From 271c671448e0a04ab520fedb2f1901d163378e20 Mon Sep 17 00:00:00 2001
From: Susmitha Girumala <susmitha@hashicorp.com>
Date: Wed, 6 May 2020 14:52:15 -0400
Subject: [PATCH 1/5] Add radio field rose component

---
 .../rose/addon/components/rose/form/radio.js  |  20 +++
 .../styles/rose/components/form/_index.scss   |   1 +
 .../styles/rose/components/form/_radio.scss   | 131 ++++++++++++++++++
 .../templates/components/rose/form/radio.hbs  |  16 +++
 addons/rose/app/components/rose/form/radio.js |   1 +
 addons/rose/app/templates/index.hbs           |  31 +++++
 addons/rose/stories/form/radio.stories.js     |  27 ++++
 .../components/rose/form/radio-test.js        |  49 +++++++
 8 files changed, 276 insertions(+)
 create mode 100644 addons/rose/addon/components/rose/form/radio.js
 create mode 100644 addons/rose/addon/styles/rose/components/form/_radio.scss
 create mode 100644 addons/rose/addon/templates/components/rose/form/radio.hbs
 create mode 100644 addons/rose/app/components/rose/form/radio.js
 create mode 100644 addons/rose/stories/form/radio.stories.js
 create mode 100644 addons/rose/tests/integration/components/rose/form/radio-test.js

diff --git a/addons/rose/addon/components/rose/form/radio.js b/addons/rose/addon/components/rose/form/radio.js
new file mode 100644
index 000000000..882c4eea2
--- /dev/null
+++ b/addons/rose/addon/components/rose/form/radio.js
@@ -0,0 +1,20 @@
+import Component from '@ember/component';
+import layout from '../../../templates/components/rose/form/radio';
+
+/**
+  * A HTML `<input type="radio">` element.
+  *
+  * @example
+  * <Rose::Form::Radio
+  *   @id="fieldId"
+  *   @label="label"
+  *   name="fieldName"
+  *   disabled={{true}}
+  *   @checked={{true}}
+  *   @error={{true}}
+  *   />
+  */
+export default Component.extend({
+  layout,
+  tagName: '',
+});
diff --git a/addons/rose/addon/styles/rose/components/form/_index.scss b/addons/rose/addon/styles/rose/components/form/_index.scss
index 6bcb2c8de..c8c516f8c 100644
--- a/addons/rose/addon/styles/rose/components/form/_index.scss
+++ b/addons/rose/addon/styles/rose/components/form/_index.scss
@@ -1,3 +1,4 @@
 @import 'input';
 @import 'checkbox';
 @import 'select';
+@import 'radio';
diff --git a/addons/rose/addon/styles/rose/components/form/_radio.scss b/addons/rose/addon/styles/rose/components/form/_radio.scss
new file mode 100644
index 000000000..e86b33d1c
--- /dev/null
+++ b/addons/rose/addon/styles/rose/components/form/_radio.scss
@@ -0,0 +1,131 @@
+@use '../../variables/sizing';
+@use '../../utilities/type';
+
+$radio-svg: (
+  'default': "<svg viewBox='0 0 24 24' fill='%23aaaaaa' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z' /></svg>",
+
+  'hover': "<svg viewBox='0 0 24 24' fill='%236f7682' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z' /></svg>",
+
+  'focus': "<svg viewBox='0 0 24 24' fill='%231563ff' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z' /></svg>",
+
+  'checked': "<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zm0-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z' fill='%231563ff'/></svg>",
+
+  'disabled': "<svg viewBox='0 0 24 24' fill='%23bac1cc' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z' /></svg>",
+
+  'disabled-checked': "<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zm0-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z' fill='%23bac1cc'/></svg>",
+
+  'error': "<svg viewBox='0 0 24 24' fill='%23c73445' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z' /></svg>",
+
+  'error-checked': "<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zm0-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z' fill='%23c73445'/></svg>",
+);
+
+$data-svg-prefix: 'data:image/svg+xml;utf-8,';
+
+.rose-form-radio {
+  position: relative;
+  margin-bottom: sizing.rems(xs);
+  color: var(--ui-gray);
+
+  .rose-form-radio-label {
+    @include type.type(s, semibold);
+    color: currentColor;
+    padding-left: sizing.rems(l);
+
+    &::before {
+      position: absolute;
+      left: 0;
+      display: block;
+      width: sizing.rems(m);
+      height: sizing.rems(m);
+      pointer-events: none;
+      content: ' ';
+    }
+
+    &::after {
+      position: absolute;
+      top: -#{sizing.rems(xxs)};
+      left: -#{sizing.rems(xxxs) + sizing.rems(xxxxs)};
+      display: block;
+      width: sizing.rems(l);
+      height: sizing.rems(l);
+      transform: scale(2);
+      pointer-events: none;
+      content: ' ';
+      background: no-repeat 50%/50% 50%;
+      background-image: url($data-svg-prefix + map-get($radio-svg, 'default'));
+    }
+  }
+
+  .rose-form-radio-field {
+    position: absolute;
+    left: 0;
+    z-index: -1;
+    width: sizing.rems(m);
+    height: sizing.rems(m);
+    opacity: 0;
+
+    &:not(:disabled) {
+      &:hover {
+        ~ .rose-form-radio-label {
+          &::after {
+            background-image: url($data-svg-prefix + map-get($radio-svg, 'hover'));
+          }
+        }
+      }
+
+      &:focus {
+        ~ .rose-form-radio-label {
+          &::after {
+            background-image: url($data-svg-prefix + map-get($radio-svg, 'focus'));
+          }
+        }
+      }
+
+      &:checked {
+        ~ .rose-form-radio-label {
+          &::after {
+            background-image: url($data-svg-prefix + map-get($radio-svg, 'checked'));
+          }
+        }
+      }
+    }
+
+    &:disabled {
+      ~ .rose-form-radio-label {
+        &::after {
+          background-image: url($data-svg-prefix + map-get($radio-svg, 'disabled'));
+        }
+      }
+
+      &:checked {
+        ~ .rose-form-radio-label {
+          &::after {
+            background-image: url($data-svg-prefix + map-get($radio-svg, 'disabled-checked'));
+          }
+        }
+      }
+    }
+  }
+
+  &.error {
+    color: var(--failure);
+
+    .rose-form-radio-field {
+      &:not(:disabled):not(:focus) {
+        ~ .rose-form-radio-label {
+          &::after {
+            background-image: url($data-svg-prefix + map-get($radio-svg, 'error'));
+          }
+        }
+
+        &:checked {
+          ~ .rose-form-radio-label {
+            &::after {
+              background-image: url($data-svg-prefix + map-get($radio-svg, 'error-checked'));
+            }
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/addons/rose/addon/templates/components/rose/form/radio.hbs b/addons/rose/addon/templates/components/rose/form/radio.hbs
new file mode 100644
index 000000000..f01831c6d
--- /dev/null
+++ b/addons/rose/addon/templates/components/rose/form/radio.hbs
@@ -0,0 +1,16 @@
+<div class="rose-form-radio{{if @error " error"}}">
+
+  <input
+    ...attributes
+    class="rose-form-radio-field"
+    id={{@id}}
+    type="radio"
+    checked={{@checked}} />
+
+  <label class="rose-form-radio-label" for={{@id}}>
+    {{@label}}
+  </label>
+
+  {{yield}}
+
+</div>
diff --git a/addons/rose/app/components/rose/form/radio.js b/addons/rose/app/components/rose/form/radio.js
new file mode 100644
index 000000000..609e3db99
--- /dev/null
+++ b/addons/rose/app/components/rose/form/radio.js
@@ -0,0 +1 @@
+export { default } from 'rose/components/rose/form/radio';
\ No newline at end of file
diff --git a/addons/rose/app/templates/index.hbs b/addons/rose/app/templates/index.hbs
index 5ac78d798..47336ad5e 100644
--- a/addons/rose/app/templates/index.hbs
+++ b/addons/rose/app/templates/index.hbs
@@ -118,3 +118,34 @@ Dummy app index template
   @label="Disabled + Checked"
   disabled={{true}}
   />
+
+<h2>Radio</h2>
+<Rose::Form::Radio
+  @id="radio-1"
+  @label="Label"
+  name="radio-group"
+  />
+<Rose::Form::Radio
+  @id="radio-2"
+  @error={{true}}
+  @label="Error"
+  name="radio-group"
+  />
+<Rose::Form::Radio
+  @id="radio-3"
+  @checked={{true}}
+  @label="Checked"
+  name="radio-group"
+  />
+
+<Rose::Form::Radio
+  @id="radio-4"
+  @label="Disabled"
+  disabled={{true}}
+  />
+<Rose::Form::Radio
+  @id="radio-5"
+  @checked={{true}}
+  @label="Disabled + Checked"
+  disabled={{true}}
+  />
diff --git a/addons/rose/stories/form/radio.stories.js b/addons/rose/stories/form/radio.stories.js
new file mode 100644
index 000000000..68bcc04c6
--- /dev/null
+++ b/addons/rose/stories/form/radio.stories.js
@@ -0,0 +1,27 @@
+import { hbs } from 'ember-cli-htmlbars';
+import { text, boolean } from '@storybook/addon-knobs';
+
+export default {
+  title: 'Rose::Form::Radio',
+};
+
+export const Normal = () => ({
+  template: hbs`
+    <Rose::Form::Radio
+      @id={{id}}
+      name={{name}}
+      @label={{label}}
+      @checked={{checked}}
+      @error={{error}}
+      disabled={{disabled}}
+      />
+  `,
+  context: {
+    label: text('text', 'Radiofield'),
+    id: text('id', 'radio-1'),
+    name: text('name', 'radio-1'),
+    checked: boolean('checked', false),
+    error: boolean('error', false),
+    disabled: boolean('disabled', false),
+  },
+});
diff --git a/addons/rose/tests/integration/components/rose/form/radio-test.js b/addons/rose/tests/integration/components/rose/form/radio-test.js
new file mode 100644
index 000000000..88ac59173
--- /dev/null
+++ b/addons/rose/tests/integration/components/rose/form/radio-test.js
@@ -0,0 +1,49 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render, find } from '@ember/test-helpers';
+import hbs from 'htmlbars-inline-precompile';
+
+module('Integration | Component | rose/form/radio', function(hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders', async function(assert) {
+    await render(hbs`<Rose::Form::Radio />`);
+    assert.ok(await find('input'));
+    assert.equal(await find('input').type, 'radio');
+  });
+
+  test('it renders with label', async function(assert) {
+    await render(hbs`<Rose::Form::Radio @label="Label"/>`);
+    assert.equal(await find('label').textContent.trim(), 'Label');
+  });
+
+  test('it is not checked by default', async function(assert) {
+    await render(hbs`<Rose::Form::Radio />`);
+    assert.equal(await find('input').checked, false);
+  });
+
+  test('it is not disabled by default', async function(assert) {
+    await render(hbs`<Rose::Form::Radio />`);
+    assert.equal(await find('input').disabled, false);
+  });
+
+  test('it is not in error state by default', async function(assert) {
+    await render(hbs`<Rose::Form::Radio />`);
+    assert.notOk(await find('.error'));
+  });
+
+  test('it is checked when @checked={{true}}', async function(assert) {
+    await render(hbs`<Rose::Form::Radio @checked={{true}}/>`);
+    assert.equal(await find('input').checked, true);
+  });
+
+  test('it is disabled when disabled={{true}}', async function(assert) {
+    await render(hbs`<Rose::Form::Radio disabled={{true}}/>`);
+    assert.equal(await find('input').disabled, true);
+  });
+
+  test('it is in error state when @error={{true}}', async function(assert) {
+    await render(hbs`<Rose::Form::Radio @error={{true}} />`);
+    assert.ok(await find('.error'));
+  });
+});

From a4b16bdddbb314132033836925e9fff5e0c7d699 Mon Sep 17 00:00:00 2001
From: Randall Morey <randall@randallmorey.com>
Date: Thu, 7 May 2020 12:49:40 -0400
Subject: [PATCH 2/5] =?UTF-8?q?chore:=20=F0=9F=A4=96=20add=20contextual=20?=
 =?UTF-8?q?radio/radio=20group=20components?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../addon/components/rose/form/radio/group.js |  8 ++++
 .../addon/components/rose/form/radio/radio.js | 20 ++++++++++
 .../components/rose/form/radio/group.hbs      |  3 ++
 .../components/rose/form/radio/radio.hbs      | 18 +++++++++
 .../app/components/rose/form/radio/group.js   |  1 +
 .../app/components/rose/form/radio/radio.js   |  1 +
 addons/rose/app/templates/index.hbs           | 19 +++++++++
 addons/rose/package.json                      |  1 +
 .../components/rose/form/radio/group-test.js  | 26 +++++++++++++
 .../components/rose/form/radio/radio-test.js  | 26 +++++++++++++
 yarn.lock                                     | 39 +++++++++++++++++--
 11 files changed, 159 insertions(+), 3 deletions(-)
 create mode 100644 addons/rose/addon/components/rose/form/radio/group.js
 create mode 100644 addons/rose/addon/components/rose/form/radio/radio.js
 create mode 100644 addons/rose/addon/templates/components/rose/form/radio/group.hbs
 create mode 100644 addons/rose/addon/templates/components/rose/form/radio/radio.hbs
 create mode 100644 addons/rose/app/components/rose/form/radio/group.js
 create mode 100644 addons/rose/app/components/rose/form/radio/radio.js
 create mode 100644 addons/rose/tests/integration/components/rose/form/radio/group-test.js
 create mode 100644 addons/rose/tests/integration/components/rose/form/radio/radio-test.js

diff --git a/addons/rose/addon/components/rose/form/radio/group.js b/addons/rose/addon/components/rose/form/radio/group.js
new file mode 100644
index 000000000..5375e3cbf
--- /dev/null
+++ b/addons/rose/addon/components/rose/form/radio/group.js
@@ -0,0 +1,8 @@
+import Component from '@ember/component';
+import layout from '../../../../templates/components/rose/form/radio/group';
+
+export default Component.extend({
+  layout,
+
+  tagName: ''
+});
diff --git a/addons/rose/addon/components/rose/form/radio/radio.js b/addons/rose/addon/components/rose/form/radio/radio.js
new file mode 100644
index 000000000..853f3a58b
--- /dev/null
+++ b/addons/rose/addon/components/rose/form/radio/radio.js
@@ -0,0 +1,20 @@
+import Component from '@ember/component';
+import layout from '../../../../templates/components/rose/form/radio/radio';
+
+/**
+  * A HTML `<input type="radio">` element.
+  *
+  * @example
+  * <Rose::Form::Radio
+  *   @id="fieldId"
+  *   @label="label"
+  *   name="fieldName"
+  *   disabled={{true}}
+  *   @checked={{true}}
+  *   @error={{true}}
+  *   />
+  */
+export default Component.extend({
+  layout,
+  tagName: '',
+});
diff --git a/addons/rose/addon/templates/components/rose/form/radio/group.hbs b/addons/rose/addon/templates/components/rose/form/radio/group.hbs
new file mode 100644
index 000000000..4fa7ab5fa
--- /dev/null
+++ b/addons/rose/addon/templates/components/rose/form/radio/group.hbs
@@ -0,0 +1,3 @@
+{{yield (hash
+  radio=(component 'rose/form/radio/radio' name=@name variable=@variable)
+)}}
diff --git a/addons/rose/addon/templates/components/rose/form/radio/radio.hbs b/addons/rose/addon/templates/components/rose/form/radio/radio.hbs
new file mode 100644
index 000000000..84b155d26
--- /dev/null
+++ b/addons/rose/addon/templates/components/rose/form/radio/radio.hbs
@@ -0,0 +1,18 @@
+<div class="rose-form-radio{{if @error " error"}}">
+
+  <RadioButton
+    ...attributes
+    @radioClass="rose-form-radio-field"
+    @radioId={{@id}}
+    type="radio"
+    @name={{@name}}
+    @value={{@value}}
+    @groupValue={{@variable}} />
+
+  <label class="rose-form-radio-label" for={{@id}}>
+    {{@label}}
+  </label>
+
+  {{yield}}
+
+</div>
diff --git a/addons/rose/app/components/rose/form/radio/group.js b/addons/rose/app/components/rose/form/radio/group.js
new file mode 100644
index 000000000..0a106a8ce
--- /dev/null
+++ b/addons/rose/app/components/rose/form/radio/group.js
@@ -0,0 +1 @@
+export { default } from 'rose/components/rose/form/radio/group';
\ No newline at end of file
diff --git a/addons/rose/app/components/rose/form/radio/radio.js b/addons/rose/app/components/rose/form/radio/radio.js
new file mode 100644
index 000000000..e2662158e
--- /dev/null
+++ b/addons/rose/app/components/rose/form/radio/radio.js
@@ -0,0 +1 @@
+export { default } from 'rose/components/rose/form/radio/radio';
\ No newline at end of file
diff --git a/addons/rose/app/templates/index.hbs b/addons/rose/app/templates/index.hbs
index 47336ad5e..d4440212c 100644
--- a/addons/rose/app/templates/index.hbs
+++ b/addons/rose/app/templates/index.hbs
@@ -120,6 +120,25 @@ Dummy app index template
   />
 
 <h2>Radio</h2>
+
+<Rose::Form::Radio::Group @name="color" @variable="green" as |radioGroup|>
+  <radioGroup.radio
+    @id="red-radio"
+    @label="Red"
+    @value="red"
+  />
+  <radioGroup.radio
+    @id="green-radio"
+    @label="Green"
+    @value="green"
+  />
+  <radioGroup.radio
+    @id="blue-radio"
+    @label="Blue"
+    @value="blue"
+  />
+</Rose::Form::Radio::Group>
+
 <Rose::Form::Radio
   @id="radio-1"
   @label="Label"
diff --git a/addons/rose/package.json b/addons/rose/package.json
index 7f11c9875..2d18da163 100644
--- a/addons/rose/package.json
+++ b/addons/rose/package.json
@@ -59,6 +59,7 @@
     "ember-load-initializers": "^2.1.1",
     "ember-maybe-import-regenerator": "^0.1.6",
     "ember-qunit": "^4.6.0",
+    "ember-radio-button": "^2.0.1",
     "ember-resolver": "^7.0.0",
     "ember-source": "~3.12.0",
     "ember-source-channel-url": "^2.0.1",
diff --git a/addons/rose/tests/integration/components/rose/form/radio/group-test.js b/addons/rose/tests/integration/components/rose/form/radio/group-test.js
new file mode 100644
index 000000000..50ec78f65
--- /dev/null
+++ b/addons/rose/tests/integration/components/rose/form/radio/group-test.js
@@ -0,0 +1,26 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render } from '@ember/test-helpers';
+import hbs from 'htmlbars-inline-precompile';
+
+module('Integration | Component | rose/form/radio/group', function(hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders', async function(assert) {
+    // Set any properties with this.set('myProperty', 'value');
+    // Handle any actions with this.set('myAction', function(val) { ... });
+
+    await render(hbs`{{rose/form/radio/group}}`);
+
+    assert.equal(this.element.textContent.trim(), '');
+
+    // Template block usage:
+    await render(hbs`
+      {{#rose/form/radio/group}}
+        template block text
+      {{/rose/form/radio/group}}
+    `);
+
+    assert.equal(this.element.textContent.trim(), 'template block text');
+  });
+});
diff --git a/addons/rose/tests/integration/components/rose/form/radio/radio-test.js b/addons/rose/tests/integration/components/rose/form/radio/radio-test.js
new file mode 100644
index 000000000..8ff2a2db7
--- /dev/null
+++ b/addons/rose/tests/integration/components/rose/form/radio/radio-test.js
@@ -0,0 +1,26 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render } from '@ember/test-helpers';
+import hbs from 'htmlbars-inline-precompile';
+
+module('Integration | Component | rose/form/radio/radio', function(hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders', async function(assert) {
+    // Set any properties with this.set('myProperty', 'value');
+    // Handle any actions with this.set('myAction', function(val) { ... });
+
+    await render(hbs`{{rose/form/radio/radio}}`);
+
+    assert.equal(this.element.textContent.trim(), '');
+
+    // Template block usage:
+    await render(hbs`
+      {{#rose/form/radio/radio}}
+        template block text
+      {{/rose/form/radio/radio}}
+    `);
+
+    assert.equal(this.element.textContent.trim(), 'template block text');
+  });
+});
diff --git a/yarn.lock b/yarn.lock
index 14a22b9cd..828b9e888 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4204,7 +4204,7 @@ broccoli-output-wrapper@^3.2.1:
     heimdalljs-logger "^0.1.10"
     symlink-or-copy "^1.2.0"
 
-broccoli-persistent-filter@^1.1.6, broccoli-persistent-filter@^1.4.3:
+broccoli-persistent-filter@^1.0.3, broccoli-persistent-filter@^1.1.6, broccoli-persistent-filter@^1.4.3:
   version "1.4.6"
   resolved "https://registry.yarnpkg.com/broccoli-persistent-filter/-/broccoli-persistent-filter-1.4.6.tgz#80762d19000880a77da33c34373299c0f6a3e615"
   integrity sha512-0RejLwoC95kv4kta8KAa+FmECJCK78Qgm8SRDEK7YyU0N9Cx6KpY3UCDy9WELl3mCXLN8TokNxc7/hp3lL4lfw==
@@ -6226,7 +6226,7 @@ ember-cli-babel-plugin-helpers@^1.0.0, ember-cli-babel-plugin-helpers@^1.1.0:
   resolved "https://registry.yarnpkg.com/ember-cli-babel-plugin-helpers/-/ember-cli-babel-plugin-helpers-1.1.0.tgz#de3baedd093163b6c2461f95964888c1676325ac"
   integrity sha512-Zr4my8Xn+CzO0gIuFNXji0eTRml5AxZUTDQz/wsNJ5AJAtyFWCY4QtKdoELNNbiCVGt1lq5yLiwTm4scGKu6xA==
 
-ember-cli-babel@^6.0.0-beta.4, ember-cli-babel@^6.16.0, ember-cli-babel@^6.6.0, ember-cli-babel@^6.8.1:
+ember-cli-babel@^6.0.0-beta.4, ember-cli-babel@^6.16.0, ember-cli-babel@^6.6.0, ember-cli-babel@^6.8.1, ember-cli-babel@^6.9.2:
   version "6.18.0"
   resolved "https://registry.yarnpkg.com/ember-cli-babel/-/ember-cli-babel-6.18.0.tgz#3f6435fd275172edeff2b634ee7b29ce74318957"
   integrity sha512-7ceC8joNYxY2wES16iIBlbPSxwKDBhYwC8drU3ZEvuPDMwVv1KzxCNu1fvxyFEBWhwaRNTUxSCsEVoTd9nosGA==
@@ -6314,6 +6314,17 @@ ember-cli-htmlbars-inline-precompile@^2.1.0:
     heimdalljs-logger "^0.1.9"
     silent-error "^1.1.0"
 
+ember-cli-htmlbars@^1.1.1:
+  version "1.3.5"
+  resolved "https://registry.yarnpkg.com/ember-cli-htmlbars/-/ember-cli-htmlbars-1.3.5.tgz#65be9678b274b5e7861d7f75c188780af7ef9d13"
+  integrity sha512-Qur/anb0Vk57qmIhGLkSzl8X1QIMoae6pLa14MRQ8+YD2N5fNs3qdhEFf0SDBquPOH1QxQtraiNQvji47QBJyg==
+  dependencies:
+    broccoli-persistent-filter "^1.0.3"
+    ember-cli-version-checker "^1.0.2"
+    hash-for-dep "^1.0.2"
+    json-stable-stringify "^1.0.0"
+    strip-bom "^2.0.0"
+
 ember-cli-htmlbars@^3.0.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/ember-cli-htmlbars/-/ember-cli-htmlbars-3.1.0.tgz#87806c2a0bca2ab52d4fb8af8e2215c1ca718a99"
@@ -6473,6 +6484,13 @@ ember-cli-uglify@^3.0.0:
     broccoli-uglify-sourcemap "^3.1.0"
     lodash.defaultsdeep "^4.6.0"
 
+ember-cli-version-checker@^1.0.2:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/ember-cli-version-checker/-/ember-cli-version-checker-1.3.1.tgz#0bc2d134c830142da64bf9627a0eded10b61ae72"
+  integrity sha1-C8LRNMgwFC2mS/lieg7e0QthrnI=
+  dependencies:
+    semver "^5.3.0"
+
 ember-cli-version-checker@^2.0.0, ember-cli-version-checker@^2.1.0, ember-cli-version-checker@^2.1.1, ember-cli-version-checker@^2.1.2:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/ember-cli-version-checker/-/ember-cli-version-checker-2.2.0.tgz#47771b731fe0962705e27c8199a9e3825709f3b3"
@@ -6662,6 +6680,14 @@ ember-qunit@^4.6.0:
     ember-cli-test-loader "^2.2.0"
     qunit "^2.9.3"
 
+ember-radio-button@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/ember-radio-button/-/ember-radio-button-2.0.1.tgz#f081a44d581a4b1db88fef79ec5c47da712ab963"
+  integrity sha512-cAAyFgNIM3PquowkWfa0lOSlq4PPst9vpkNiLi5yhd1LJ4lVtwgn6s+OpPXWKJLZdig2m31PWU8jxobcubge5w==
+  dependencies:
+    ember-cli-babel "^6.9.2"
+    ember-cli-htmlbars "^1.1.1"
+
 ember-resolver@^7.0.0:
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/ember-resolver/-/ember-resolver-7.0.0.tgz#07ca86b3bae373395b44bba784b8c133f75d61c2"
@@ -9543,7 +9569,7 @@ is-typedarray@^1.0.0, is-typedarray@~1.0.0:
   resolved "https://registry.yarnpkg.com/is-typedarray/-/is-typedarray-1.0.0.tgz#e479c80858df0c1b11ddda6940f96011fcda4a9a"
   integrity sha1-5HnICFjfDBsR3dppQPlgEfzaSpo=
 
-is-utf8@^0.2.1:
+is-utf8@^0.2.0, is-utf8@^0.2.1:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/is-utf8/-/is-utf8-0.2.1.tgz#4b0da1442104d1b336340e80797e865cf39f7d72"
   integrity sha1-Sw2hRCEE0bM2NA6AeX6GXPOffXI=
@@ -13956,6 +13982,13 @@ strip-bom@4.0.0, strip-bom@^4.0.0:
   resolved "https://registry.yarnpkg.com/strip-bom/-/strip-bom-4.0.0.tgz#9c3505c1db45bcedca3d9cf7a16f5c5aa3901878"
   integrity sha512-3xurFv5tEgii33Zi8Jtp55wEIILR9eh34FAW00PZf+JnSsTmV/ioewSgQl97JHvgjoRGwPShsWm+IdrxB35d0w==
 
+strip-bom@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/strip-bom/-/strip-bom-2.0.0.tgz#6219a85616520491f35788bdbf1447a99c7e6b0e"
+  integrity sha1-YhmoVhZSBJHzV4i9vxRHqZx+aw4=
+  dependencies:
+    is-utf8 "^0.2.0"
+
 strip-bom@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/strip-bom/-/strip-bom-3.0.0.tgz#2334c18e9c759f7bdd56fdef7e9ae3d588e68ed3"

From 5567e5436ff4b83edcb25584049936b9d0f96669 Mon Sep 17 00:00:00 2001
From: Susmitha Girumala <susmitha@hashicorp.com>
Date: Thu, 7 May 2020 17:44:18 -0400
Subject: [PATCH 3/5] =?UTF-8?q?chore:=20=F0=9F=A4=96=20Add=20ember-radio-b?=
 =?UTF-8?q?utton=20as=20radiofield?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Use ember-radio-button to wrap a radiofield. Introduce radiofield group
---
 .../rose/addon/components/rose/form/radio.js  | 20 ------
 .../addon/components/rose/form/radio/group.js | 25 ++++++-
 .../addon/components/rose/form/radio/radio.js | 26 +++----
 .../styles/rose/components/form/_radio.scss   | 67 +++++++++++++------
 .../templates/components/rose/form/radio.hbs  | 16 -----
 .../components/rose/form/radio/radio.hbs      |  3 +-
 addons/rose/app/components/rose/form/radio.js |  1 -
 .../app/components/rose/form/radio/group.js   |  2 +-
 .../app/components/rose/form/radio/radio.js   |  2 +-
 addons/rose/app/templates/index.hbs           | 62 ++++++++---------
 .../rose/stories/form/radio/group.stories.js  | 41 ++++++++++++
 .../stories/form/{ => radio}/radio.stories.js | 19 +++---
 .../components/rose/form/radio-test.js        | 49 --------------
 .../components/rose/form/radio/group-test.js  | 58 +++++++++++-----
 .../components/rose/form/radio/radio-test.js  | 61 +++++++++++++----
 15 files changed, 260 insertions(+), 192 deletions(-)
 delete mode 100644 addons/rose/addon/components/rose/form/radio.js
 delete mode 100644 addons/rose/addon/templates/components/rose/form/radio.hbs
 delete mode 100644 addons/rose/app/components/rose/form/radio.js
 create mode 100644 addons/rose/stories/form/radio/group.stories.js
 rename addons/rose/stories/form/{ => radio}/radio.stories.js (55%)
 delete mode 100644 addons/rose/tests/integration/components/rose/form/radio-test.js

diff --git a/addons/rose/addon/components/rose/form/radio.js b/addons/rose/addon/components/rose/form/radio.js
deleted file mode 100644
index 882c4eea2..000000000
--- a/addons/rose/addon/components/rose/form/radio.js
+++ /dev/null
@@ -1,20 +0,0 @@
-import Component from '@ember/component';
-import layout from '../../../templates/components/rose/form/radio';
-
-/**
-  * A HTML `<input type="radio">` element.
-  *
-  * @example
-  * <Rose::Form::Radio
-  *   @id="fieldId"
-  *   @label="label"
-  *   name="fieldName"
-  *   disabled={{true}}
-  *   @checked={{true}}
-  *   @error={{true}}
-  *   />
-  */
-export default Component.extend({
-  layout,
-  tagName: '',
-});
diff --git a/addons/rose/addon/components/rose/form/radio/group.js b/addons/rose/addon/components/rose/form/radio/group.js
index 5375e3cbf..9ad393cd2 100644
--- a/addons/rose/addon/components/rose/form/radio/group.js
+++ b/addons/rose/addon/components/rose/form/radio/group.js
@@ -1,8 +1,31 @@
 import Component from '@ember/component';
 import layout from '../../../../templates/components/rose/form/radio/group';
 
+/**
+ * A `<input type="radio" name="radio-group">` element.
+ *
+ * @example
+ * <Rose::Form::Radio::Group @name="color" @variable="green" as |radioGroup|>
+ *   <radioGroup.radio
+ *     @id="red-radio"
+ *     @label="Red"
+ *     @value="red"
+ *   />
+ *   <radioGroup.radio
+ *     @id="green-radio"
+ *     @label="Green"
+ *     @value="green"
+ *   />
+ *   <radioGroup.radio
+ *     @id="blue-radio"
+ *     @label="Blue"
+ *     @value="blue"
+ *   />
+ * </Rose::Form::Radio::Group>
+ */
+
 export default Component.extend({
   layout,
 
-  tagName: ''
+  tagName: '',
 });
diff --git a/addons/rose/addon/components/rose/form/radio/radio.js b/addons/rose/addon/components/rose/form/radio/radio.js
index 853f3a58b..6d0083cc2 100644
--- a/addons/rose/addon/components/rose/form/radio/radio.js
+++ b/addons/rose/addon/components/rose/form/radio/radio.js
@@ -2,18 +2,20 @@ import Component from '@ember/component';
 import layout from '../../../../templates/components/rose/form/radio/radio';
 
 /**
-  * A HTML `<input type="radio">` element.
-  *
-  * @example
-  * <Rose::Form::Radio
-  *   @id="fieldId"
-  *   @label="label"
-  *   name="fieldName"
-  *   disabled={{true}}
-  *   @checked={{true}}
-  *   @error={{true}}
-  *   />
-  */
+ * A `<input type="radio">` element.
+ * `value` and `variable` must be equal to select
+ *  radiofield.
+ *
+ * @example
+ * <Rose::Form::Radio::Radio
+ *   @id="fieldId"
+ *   @label="label"
+ *   @error={{true}}
+ *   @value="fieldValue"
+ *   @variable="fieldValue"
+ *   @disabled={{true}}
+ *   />
+ */
 export default Component.extend({
   layout,
   tagName: '',
diff --git a/addons/rose/addon/styles/rose/components/form/_radio.scss b/addons/rose/addon/styles/rose/components/form/_radio.scss
index e86b33d1c..822505cf8 100644
--- a/addons/rose/addon/styles/rose/components/form/_radio.scss
+++ b/addons/rose/addon/styles/rose/components/form/_radio.scss
@@ -2,21 +2,22 @@
 @use '../../utilities/type';
 
 $radio-svg: (
-  'default': "<svg viewBox='0 0 24 24' fill='%23aaaaaa' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z' /></svg>",
-
-  'hover': "<svg viewBox='0 0 24 24' fill='%236f7682' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z' /></svg>",
-
-  'focus': "<svg viewBox='0 0 24 24' fill='%231563ff' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z' /></svg>",
-
-  'checked': "<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zm0-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z' fill='%231563ff'/></svg>",
-
-  'disabled': "<svg viewBox='0 0 24 24' fill='%23bac1cc' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z' /></svg>",
-
-  'disabled-checked': "<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zm0-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z' fill='%23bac1cc'/></svg>",
-
-  'error': "<svg viewBox='0 0 24 24' fill='%23c73445' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z' /></svg>",
-
-  'error-checked': "<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zm0-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z' fill='%23c73445'/></svg>",
+  'default':
+    "<svg viewBox='0 0 24 24' fill='%23aaaaaa' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z' /></svg>",
+  'hover':
+    "<svg viewBox='0 0 24 24' fill='%236f7682' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z' /></svg>",
+  'focus':
+    "<svg viewBox='0 0 24 24' fill='%231563ff' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z' /></svg>",
+  'checked':
+    "<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zm0-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z' fill='%231563ff'/></svg>",
+  'disabled':
+    "<svg viewBox='0 0 24 24' fill='%23bac1cc' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z' /></svg>",
+  'disabled-checked':
+    "<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zm0-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z' fill='%23bac1cc'/></svg>",
+  'error':
+    "<svg viewBox='0 0 24 24' fill='%23c73445' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z' /></svg>",
+  'error-checked':
+    "<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zm0-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z' fill='%23c73445'/></svg>",
 );
 
 $data-svg-prefix: 'data:image/svg+xml;utf-8,';
@@ -33,6 +34,7 @@ $data-svg-prefix: 'data:image/svg+xml;utf-8,';
 
     &::before {
       position: absolute;
+      top: sizing.rems(xs);
       left: 0;
       display: block;
       width: sizing.rems(m);
@@ -68,7 +70,10 @@ $data-svg-prefix: 'data:image/svg+xml;utf-8,';
       &:hover {
         ~ .rose-form-radio-label {
           &::after {
-            background-image: url($data-svg-prefix + map-get($radio-svg, 'hover'));
+            background-image: url($data-svg-prefix + map-get(
+                $radio-svg,
+                'hover'
+              ));
           }
         }
       }
@@ -76,7 +81,10 @@ $data-svg-prefix: 'data:image/svg+xml;utf-8,';
       &:focus {
         ~ .rose-form-radio-label {
           &::after {
-            background-image: url($data-svg-prefix + map-get($radio-svg, 'focus'));
+            background-image: url($data-svg-prefix + map-get(
+                $radio-svg,
+                'focus'
+              ));
           }
         }
       }
@@ -84,7 +92,10 @@ $data-svg-prefix: 'data:image/svg+xml;utf-8,';
       &:checked {
         ~ .rose-form-radio-label {
           &::after {
-            background-image: url($data-svg-prefix + map-get($radio-svg, 'checked'));
+            background-image: url($data-svg-prefix + map-get(
+                $radio-svg,
+                'checked'
+              ));
           }
         }
       }
@@ -93,14 +104,20 @@ $data-svg-prefix: 'data:image/svg+xml;utf-8,';
     &:disabled {
       ~ .rose-form-radio-label {
         &::after {
-          background-image: url($data-svg-prefix + map-get($radio-svg, 'disabled'));
+          background-image: url($data-svg-prefix + map-get(
+              $radio-svg,
+              'disabled'
+            ));
         }
       }
 
       &:checked {
         ~ .rose-form-radio-label {
           &::after {
-            background-image: url($data-svg-prefix + map-get($radio-svg, 'disabled-checked'));
+            background-image: url($data-svg-prefix + map-get(
+                $radio-svg,
+                'disabled-checked'
+              ));
           }
         }
       }
@@ -114,14 +131,20 @@ $data-svg-prefix: 'data:image/svg+xml;utf-8,';
       &:not(:disabled):not(:focus) {
         ~ .rose-form-radio-label {
           &::after {
-            background-image: url($data-svg-prefix + map-get($radio-svg, 'error'));
+            background-image: url($data-svg-prefix + map-get(
+                $radio-svg,
+                'error'
+              ));
           }
         }
 
         &:checked {
           ~ .rose-form-radio-label {
             &::after {
-              background-image: url($data-svg-prefix + map-get($radio-svg, 'error-checked'));
+              background-image: url($data-svg-prefix + map-get(
+                  $radio-svg,
+                  'error-checked'
+                ));
             }
           }
         }
diff --git a/addons/rose/addon/templates/components/rose/form/radio.hbs b/addons/rose/addon/templates/components/rose/form/radio.hbs
deleted file mode 100644
index f01831c6d..000000000
--- a/addons/rose/addon/templates/components/rose/form/radio.hbs
+++ /dev/null
@@ -1,16 +0,0 @@
-<div class="rose-form-radio{{if @error " error"}}">
-
-  <input
-    ...attributes
-    class="rose-form-radio-field"
-    id={{@id}}
-    type="radio"
-    checked={{@checked}} />
-
-  <label class="rose-form-radio-label" for={{@id}}>
-    {{@label}}
-  </label>
-
-  {{yield}}
-
-</div>
diff --git a/addons/rose/addon/templates/components/rose/form/radio/radio.hbs b/addons/rose/addon/templates/components/rose/form/radio/radio.hbs
index 84b155d26..09e492f7d 100644
--- a/addons/rose/addon/templates/components/rose/form/radio/radio.hbs
+++ b/addons/rose/addon/templates/components/rose/form/radio/radio.hbs
@@ -7,7 +7,8 @@
     type="radio"
     @name={{@name}}
     @value={{@value}}
-    @groupValue={{@variable}} />
+    @groupValue={{@variable}}
+    @disabled={{@disabled}}/>
 
   <label class="rose-form-radio-label" for={{@id}}>
     {{@label}}
diff --git a/addons/rose/app/components/rose/form/radio.js b/addons/rose/app/components/rose/form/radio.js
deleted file mode 100644
index 609e3db99..000000000
--- a/addons/rose/app/components/rose/form/radio.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from 'rose/components/rose/form/radio';
\ No newline at end of file
diff --git a/addons/rose/app/components/rose/form/radio/group.js b/addons/rose/app/components/rose/form/radio/group.js
index 0a106a8ce..0f546baa3 100644
--- a/addons/rose/app/components/rose/form/radio/group.js
+++ b/addons/rose/app/components/rose/form/radio/group.js
@@ -1 +1 @@
-export { default } from 'rose/components/rose/form/radio/group';
\ No newline at end of file
+export { default } from 'rose/components/rose/form/radio/group';
diff --git a/addons/rose/app/components/rose/form/radio/radio.js b/addons/rose/app/components/rose/form/radio/radio.js
index e2662158e..162aa3a66 100644
--- a/addons/rose/app/components/rose/form/radio/radio.js
+++ b/addons/rose/app/components/rose/form/radio/radio.js
@@ -1 +1 @@
-export { default } from 'rose/components/rose/form/radio/radio';
\ No newline at end of file
+export { default } from 'rose/components/rose/form/radio/radio';
diff --git a/addons/rose/app/templates/index.hbs b/addons/rose/app/templates/index.hbs
index d4440212c..0a96fc98a 100644
--- a/addons/rose/app/templates/index.hbs
+++ b/addons/rose/app/templates/index.hbs
@@ -119,8 +119,38 @@ Dummy app index template
   disabled={{true}}
   />
 
-<h2>Radio</h2>
+<h2>Radio field</h2>
+<Rose::Form::Radio::Radio
+  @id="radio-1"
+  @label="Label"
+  @value="radio-1"
+  />
+<Rose::Form::Radio::Radio
+  @id="radio-2"
+  @error={{true}}
+  @label="Error"
+  @value="radio-2"
+  />
+<Rose::Form::Radio::Radio
+  @id="radio-3"
+  @label="Checked"
+  />
 
+<Rose::Form::Radio::Radio
+  @id="radio-4"
+  @label="Disabled"
+  @disabled={{true}}
+  @value="radio-4"
+  />
+<Rose::Form::Radio::Radio
+  @id="radio-5"
+  @label="Disabled + Checked"
+  @value="radio-5"
+  @variable="radio-5"
+  @disabled={{true}}
+  />
+
+<h2>Radio field group</h2>
 <Rose::Form::Radio::Group @name="color" @variable="green" as |radioGroup|>
   <radioGroup.radio
     @id="red-radio"
@@ -138,33 +168,3 @@ Dummy app index template
     @value="blue"
   />
 </Rose::Form::Radio::Group>
-
-<Rose::Form::Radio
-  @id="radio-1"
-  @label="Label"
-  name="radio-group"
-  />
-<Rose::Form::Radio
-  @id="radio-2"
-  @error={{true}}
-  @label="Error"
-  name="radio-group"
-  />
-<Rose::Form::Radio
-  @id="radio-3"
-  @checked={{true}}
-  @label="Checked"
-  name="radio-group"
-  />
-
-<Rose::Form::Radio
-  @id="radio-4"
-  @label="Disabled"
-  disabled={{true}}
-  />
-<Rose::Form::Radio
-  @id="radio-5"
-  @checked={{true}}
-  @label="Disabled + Checked"
-  disabled={{true}}
-  />
diff --git a/addons/rose/stories/form/radio/group.stories.js b/addons/rose/stories/form/radio/group.stories.js
new file mode 100644
index 000000000..9a084b07c
--- /dev/null
+++ b/addons/rose/stories/form/radio/group.stories.js
@@ -0,0 +1,41 @@
+import { hbs } from 'ember-cli-htmlbars';
+import { text } from '@storybook/addon-knobs';
+
+export default {
+  title: 'Rose::Form::Radio::Group',
+};
+
+export const Normal = () => ({
+  template: hbs`
+    <Rose::Form::Radio::Group @name={{name}} @variable={{variable}} as |radioGroup|>
+      <radioGroup.radio
+        @id="firstField"
+        @label={{firstFieldLabel}}
+        @value={{firstFieldValue}}
+      />
+      <radioGroup.radio
+        @id="secondField"
+        @label={{secondFieldLabel}}
+        @value={{secondFieldValue}}
+      />
+      <radioGroup.radio
+        @id="thirdField"
+        @label={{thirdFieldLabel}}
+        @value={{thirdFieldValue}}
+      />
+    </Rose::Form::Radio::Group>
+  `,
+  context: {
+    name: text('name', 'Groupname'),
+    variable: text('variable', 'disagree'),
+
+    firstFieldLabel: text('first radiofield label', 'Agree'),
+    firstFieldValue: text('first radiofield value', 'agree'),
+
+    secondFieldLabel: text('second radiofield label', 'Maybe'),
+    secondFieldValue: text('second radiofield value', 'maybe'),
+
+    thirdFieldLabel: text('third radiofield label', 'Disagree'),
+    thirdFieldValue: text('third radiofield value', 'disagree'),
+  },
+});
diff --git a/addons/rose/stories/form/radio.stories.js b/addons/rose/stories/form/radio/radio.stories.js
similarity index 55%
rename from addons/rose/stories/form/radio.stories.js
rename to addons/rose/stories/form/radio/radio.stories.js
index 68bcc04c6..b97194478 100644
--- a/addons/rose/stories/form/radio.stories.js
+++ b/addons/rose/stories/form/radio/radio.stories.js
@@ -2,26 +2,29 @@ import { hbs } from 'ember-cli-htmlbars';
 import { text, boolean } from '@storybook/addon-knobs';
 
 export default {
-  title: 'Rose::Form::Radio',
+  title: 'Rose::Form::Radio::Radio',
 };
 
 export const Normal = () => ({
   template: hbs`
-    <Rose::Form::Radio
+    <Rose::Form::Radio::Radio
       @id={{id}}
-      name={{name}}
       @label={{label}}
-      @checked={{checked}}
       @error={{error}}
-      disabled={{disabled}}
+      @value={{value}}
+      @variable={{variable}}
+      @disabled={{disabled}}
       />
   `,
   context: {
-    label: text('text', 'Radiofield'),
     id: text('id', 'radio-1'),
-    name: text('name', 'radio-1'),
-    checked: boolean('checked', false),
+    label: text('text', 'Radiofield'),
     error: boolean('error', false),
+    value: text('value', 'value and variable must match to select radiofield'),
+    variable: text(
+      'variable',
+      'value and variable must match to select radiofield'
+    ),
     disabled: boolean('disabled', false),
   },
 });
diff --git a/addons/rose/tests/integration/components/rose/form/radio-test.js b/addons/rose/tests/integration/components/rose/form/radio-test.js
deleted file mode 100644
index 88ac59173..000000000
--- a/addons/rose/tests/integration/components/rose/form/radio-test.js
+++ /dev/null
@@ -1,49 +0,0 @@
-import { module, test } from 'qunit';
-import { setupRenderingTest } from 'ember-qunit';
-import { render, find } from '@ember/test-helpers';
-import hbs from 'htmlbars-inline-precompile';
-
-module('Integration | Component | rose/form/radio', function(hooks) {
-  setupRenderingTest(hooks);
-
-  test('it renders', async function(assert) {
-    await render(hbs`<Rose::Form::Radio />`);
-    assert.ok(await find('input'));
-    assert.equal(await find('input').type, 'radio');
-  });
-
-  test('it renders with label', async function(assert) {
-    await render(hbs`<Rose::Form::Radio @label="Label"/>`);
-    assert.equal(await find('label').textContent.trim(), 'Label');
-  });
-
-  test('it is not checked by default', async function(assert) {
-    await render(hbs`<Rose::Form::Radio />`);
-    assert.equal(await find('input').checked, false);
-  });
-
-  test('it is not disabled by default', async function(assert) {
-    await render(hbs`<Rose::Form::Radio />`);
-    assert.equal(await find('input').disabled, false);
-  });
-
-  test('it is not in error state by default', async function(assert) {
-    await render(hbs`<Rose::Form::Radio />`);
-    assert.notOk(await find('.error'));
-  });
-
-  test('it is checked when @checked={{true}}', async function(assert) {
-    await render(hbs`<Rose::Form::Radio @checked={{true}}/>`);
-    assert.equal(await find('input').checked, true);
-  });
-
-  test('it is disabled when disabled={{true}}', async function(assert) {
-    await render(hbs`<Rose::Form::Radio disabled={{true}}/>`);
-    assert.equal(await find('input').disabled, true);
-  });
-
-  test('it is in error state when @error={{true}}', async function(assert) {
-    await render(hbs`<Rose::Form::Radio @error={{true}} />`);
-    assert.ok(await find('.error'));
-  });
-});
diff --git a/addons/rose/tests/integration/components/rose/form/radio/group-test.js b/addons/rose/tests/integration/components/rose/form/radio/group-test.js
index 50ec78f65..35635bdb1 100644
--- a/addons/rose/tests/integration/components/rose/form/radio/group-test.js
+++ b/addons/rose/tests/integration/components/rose/form/radio/group-test.js
@@ -1,26 +1,54 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'ember-qunit';
-import { render } from '@ember/test-helpers';
+import { render, click, findAll } from '@ember/test-helpers';
 import hbs from 'htmlbars-inline-precompile';
 
-module('Integration | Component | rose/form/radio/group', function(hooks) {
+module('Integration | Component | rose/form/radio/group', function (hooks) {
   setupRenderingTest(hooks);
 
-  test('it renders', async function(assert) {
-    // Set any properties with this.set('myProperty', 'value');
-    // Handle any actions with this.set('myAction', function(val) { ... });
-
-    await render(hbs`{{rose/form/radio/group}}`);
-
-    assert.equal(this.element.textContent.trim(), '');
-
-    // Template block usage:
+  test('it renders', async function (assert) {
     await render(hbs`
-      {{#rose/form/radio/group}}
-        template block text
-      {{/rose/form/radio/group}}
+      <Rose::Form::Radio::Group @name="bird" as |radioGroup|>
+        <radioGroup.radio
+          @id="bird-1"
+          @label="Pegion"
+          @value="pegion"
+        />
+        <radioGroup.radio
+          @id="bird-2"
+          @label="flamingo"
+          @value="flamingo"
+        />
+      </Rose::Form::Radio::Group>
     `);
 
-    assert.equal(this.element.textContent.trim(), 'template block text');
+    assert.equal(findAll('input').length, 2);
+    assert.equal(findAll('input')[0].name, 'bird');
+    assert.equal(findAll('input')[1].name, 'bird');
+  });
+
+  test('it renders with @variable value selected', async function (assert) {
+    await render(hbs`
+      <Rose::Form::Radio::Group @name="bird" @variable="flamingo" as |radioGroup|>
+        <radioGroup.radio
+          @id="bird-1"
+          @label="Pegion"
+          @value="pegion"
+        />
+        <radioGroup.radio
+          @id="bird-2"
+          @label="flamingo"
+          @value="flamingo"
+        />
+      </Rose::Form::Radio::Group>
+    `);
+
+    assert.equal(findAll('#bird-1')[0].checked, false);
+    assert.equal(findAll('#bird-2')[0].checked, true);
+
+    await click(findAll('#bird-1')[0]);
+
+    assert.equal(findAll('#bird-1')[0].checked, true);
+    assert.equal(findAll('#bird-2')[0].checked, false);
   });
 });
diff --git a/addons/rose/tests/integration/components/rose/form/radio/radio-test.js b/addons/rose/tests/integration/components/rose/form/radio/radio-test.js
index 8ff2a2db7..a3b7d7a0b 100644
--- a/addons/rose/tests/integration/components/rose/form/radio/radio-test.js
+++ b/addons/rose/tests/integration/components/rose/form/radio/radio-test.js
@@ -1,26 +1,59 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'ember-qunit';
-import { render } from '@ember/test-helpers';
+import { render, find } from '@ember/test-helpers';
 import hbs from 'htmlbars-inline-precompile';
 
-module('Integration | Component | rose/form/radio/radio', function(hooks) {
+module('Integration | Component | rose/form/radio/radio', function (hooks) {
   setupRenderingTest(hooks);
 
-  test('it renders', async function(assert) {
-    // Set any properties with this.set('myProperty', 'value');
-    // Handle any actions with this.set('myAction', function(val) { ... });
+  test('it renders', async function (assert) {
+    await render(hbs`<Rose::Form::Radio::Radio />`);
+    assert.ok(await find('input'));
+    assert.equal(await find('input').type, 'radio');
+  });
 
-    await render(hbs`{{rose/form/radio/radio}}`);
+  test('it renders with label', async function (assert) {
+    await render(hbs`<Rose::Form::Radio::Radio @label="Label"/>`);
+    assert.equal(await find('label').textContent.trim(), 'Label');
+  });
 
-    assert.equal(this.element.textContent.trim(), '');
+  test('it is checked when @value and @variable values match', async function (assert) {
+    await render(
+      hbs`<Rose::Form::Radio::Radio @value="tree" @variable="tree"/>`
+    );
+    assert.equal(await find('input').checked, true);
+  });
 
-    // Template block usage:
-    await render(hbs`
-      {{#rose/form/radio/radio}}
-        template block text
-      {{/rose/form/radio/radio}}
-    `);
+  test('it is not checked when @value and @variable values are different', async function (assert) {
+    await render(hbs`<Rose::Form::Radio::Radio @value="tree"/>`);
+    assert.equal(await find('input').checked, false);
 
-    assert.equal(this.element.textContent.trim(), 'template block text');
+    await render(hbs`<Rose::Form::Radio::Radio @variable="tree"/>`);
+    assert.equal(await find('input').checked, false);
+
+    await render(
+      hbs`<Rose::Form::Radio::Radio @value="root" @variable="tree"/>`
+    );
+    assert.equal(await find('input').checked, false);
+  });
+
+  test('it is not disabled by default', async function (assert) {
+    await render(hbs`<Rose::Form::Radio::Radio />`);
+    assert.equal(await find('input').disabled, false);
+  });
+
+  test('it is not in error state by default', async function (assert) {
+    await render(hbs`<Rose::Form::Radio::Radio />`);
+    assert.notOk(await find('.error'));
+  });
+
+  test('it is disabled when @disabled={{true}}', async function (assert) {
+    await render(hbs`<Rose::Form::Radio::Radio @disabled={{true}}/>`);
+    assert.equal(await find('input').disabled, true);
+  });
+
+  test('it is in error state when @error={{true}}', async function (assert) {
+    await render(hbs`<Rose::Form::Radio::Radio @error={{true}} />`);
+    assert.ok(await find('.error'));
   });
 });

From a0e01a2af0f1812e0ec318f3a7f36dd7a4cf63e9 Mon Sep 17 00:00:00 2001
From: Susmitha Girumala <susmitha@hashicorp.com>
Date: Thu, 7 May 2020 17:54:12 -0400
Subject: [PATCH 4/5] =?UTF-8?q?refactor:=20=F0=9F=92=A1=20Remove=20overzea?=
 =?UTF-8?q?lous=20use=20of=20findAll=20in=20group=20test?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/rose/form/radio/group-test.js         | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/addons/rose/tests/integration/components/rose/form/radio/group-test.js b/addons/rose/tests/integration/components/rose/form/radio/group-test.js
index 35635bdb1..56452c7c7 100644
--- a/addons/rose/tests/integration/components/rose/form/radio/group-test.js
+++ b/addons/rose/tests/integration/components/rose/form/radio/group-test.js
@@ -1,6 +1,6 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'ember-qunit';
-import { render, click, findAll } from '@ember/test-helpers';
+import { render, click, find, findAll } from '@ember/test-helpers';
 import hbs from 'htmlbars-inline-precompile';
 
 module('Integration | Component | rose/form/radio/group', function (hooks) {
@@ -43,12 +43,12 @@ module('Integration | Component | rose/form/radio/group', function (hooks) {
       </Rose::Form::Radio::Group>
     `);
 
-    assert.equal(findAll('#bird-1')[0].checked, false);
-    assert.equal(findAll('#bird-2')[0].checked, true);
+    assert.equal(find('#bird-1').checked, false);
+    assert.equal(find('#bird-2').checked, true);
 
-    await click(findAll('#bird-1')[0]);
+    await click(find('#bird-1'));
 
-    assert.equal(findAll('#bird-1')[0].checked, true);
-    assert.equal(findAll('#bird-2')[0].checked, false);
+    assert.equal(find('#bird-1').checked, true);
+    assert.equal(find('#bird-2').checked, false);
   });
 });

From b8f7d133f2546314c8b6cabbd265a88bb6185a07 Mon Sep 17 00:00:00 2001
From: Susmitha Girumala <susmitha@hashicorp.com>
Date: Fri, 8 May 2020 14:46:09 -0400
Subject: [PATCH 5/5] =?UTF-8?q?test:=20=F0=9F=92=8D=20Add=20click=20tests?=
 =?UTF-8?q?=20for=20radiofield=20group?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Add tests for changes to radiofield group attribute: selectedValue
---
 .../addon/components/rose/form/radio/group.js |  2 +-
 .../addon/components/rose/form/radio/radio.js |  4 +-
 .../components/rose/form/radio/group.hbs      |  2 +-
 .../components/rose/form/radio/radio.hbs      |  2 +-
 .../rose/stories/form/radio/group.stories.js  |  4 +-
 .../rose/stories/form/radio/radio.stories.js  | 10 +--
 .../components/rose/form/radio/group-test.js  | 62 ++++++++++++++++++-
 .../components/rose/form/radio/radio-test.js  | 10 +--
 8 files changed, 77 insertions(+), 19 deletions(-)

diff --git a/addons/rose/addon/components/rose/form/radio/group.js b/addons/rose/addon/components/rose/form/radio/group.js
index 9ad393cd2..a9508a084 100644
--- a/addons/rose/addon/components/rose/form/radio/group.js
+++ b/addons/rose/addon/components/rose/form/radio/group.js
@@ -5,7 +5,7 @@ import layout from '../../../../templates/components/rose/form/radio/group';
  * A `<input type="radio" name="radio-group">` element.
  *
  * @example
- * <Rose::Form::Radio::Group @name="color" @variable="green" as |radioGroup|>
+ * <Rose::Form::Radio::Group @name="color" @selectedValue="green" as |radioGroup|>
  *   <radioGroup.radio
  *     @id="red-radio"
  *     @label="Red"
diff --git a/addons/rose/addon/components/rose/form/radio/radio.js b/addons/rose/addon/components/rose/form/radio/radio.js
index 6d0083cc2..f32a6835e 100644
--- a/addons/rose/addon/components/rose/form/radio/radio.js
+++ b/addons/rose/addon/components/rose/form/radio/radio.js
@@ -3,7 +3,7 @@ import layout from '../../../../templates/components/rose/form/radio/radio';
 
 /**
  * A `<input type="radio">` element.
- * `value` and `variable` must be equal to select
+ * `value` and `selectedValue` must be equal to select
  *  radiofield.
  *
  * @example
@@ -12,7 +12,7 @@ import layout from '../../../../templates/components/rose/form/radio/radio';
  *   @label="label"
  *   @error={{true}}
  *   @value="fieldValue"
- *   @variable="fieldValue"
+ *   @selectedValue="fieldValue"
  *   @disabled={{true}}
  *   />
  */
diff --git a/addons/rose/addon/templates/components/rose/form/radio/group.hbs b/addons/rose/addon/templates/components/rose/form/radio/group.hbs
index 4fa7ab5fa..6aa52cf50 100644
--- a/addons/rose/addon/templates/components/rose/form/radio/group.hbs
+++ b/addons/rose/addon/templates/components/rose/form/radio/group.hbs
@@ -1,3 +1,3 @@
 {{yield (hash
-  radio=(component 'rose/form/radio/radio' name=@name variable=@variable)
+  radio=(component 'rose/form/radio/radio' name=@name selectedValue=@selectedValue)
 )}}
diff --git a/addons/rose/addon/templates/components/rose/form/radio/radio.hbs b/addons/rose/addon/templates/components/rose/form/radio/radio.hbs
index 09e492f7d..088853d5b 100644
--- a/addons/rose/addon/templates/components/rose/form/radio/radio.hbs
+++ b/addons/rose/addon/templates/components/rose/form/radio/radio.hbs
@@ -7,7 +7,7 @@
     type="radio"
     @name={{@name}}
     @value={{@value}}
-    @groupValue={{@variable}}
+    @groupValue={{@selectedValue}}
     @disabled={{@disabled}}/>
 
   <label class="rose-form-radio-label" for={{@id}}>
diff --git a/addons/rose/stories/form/radio/group.stories.js b/addons/rose/stories/form/radio/group.stories.js
index 9a084b07c..8c64c7016 100644
--- a/addons/rose/stories/form/radio/group.stories.js
+++ b/addons/rose/stories/form/radio/group.stories.js
@@ -7,7 +7,7 @@ export default {
 
 export const Normal = () => ({
   template: hbs`
-    <Rose::Form::Radio::Group @name={{name}} @variable={{variable}} as |radioGroup|>
+    <Rose::Form::Radio::Group @name={{name}} @selectedValue={{selectedValue}} as |radioGroup|>
       <radioGroup.radio
         @id="firstField"
         @label={{firstFieldLabel}}
@@ -27,7 +27,7 @@ export const Normal = () => ({
   `,
   context: {
     name: text('name', 'Groupname'),
-    variable: text('variable', 'disagree'),
+    selectedValue: text('selectedValue', 'disagree'),
 
     firstFieldLabel: text('first radiofield label', 'Agree'),
     firstFieldValue: text('first radiofield value', 'agree'),
diff --git a/addons/rose/stories/form/radio/radio.stories.js b/addons/rose/stories/form/radio/radio.stories.js
index b97194478..72bac02d3 100644
--- a/addons/rose/stories/form/radio/radio.stories.js
+++ b/addons/rose/stories/form/radio/radio.stories.js
@@ -12,7 +12,7 @@ export const Normal = () => ({
       @label={{label}}
       @error={{error}}
       @value={{value}}
-      @variable={{variable}}
+      @selectedValue={{selectedValue}}
       @disabled={{disabled}}
       />
   `,
@@ -20,10 +20,10 @@ export const Normal = () => ({
     id: text('id', 'radio-1'),
     label: text('text', 'Radiofield'),
     error: boolean('error', false),
-    value: text('value', 'value and variable must match to select radiofield'),
-    variable: text(
-      'variable',
-      'value and variable must match to select radiofield'
+    value: text('value', 'value and selectedValue must match to select radiofield'),
+    selectedValue: text(
+      'selectedValue',
+      'value and selectedValue must match to select radiofield'
     ),
     disabled: boolean('disabled', false),
   },
diff --git a/addons/rose/tests/integration/components/rose/form/radio/group-test.js b/addons/rose/tests/integration/components/rose/form/radio/group-test.js
index 56452c7c7..b3aa9d2f9 100644
--- a/addons/rose/tests/integration/components/rose/form/radio/group-test.js
+++ b/addons/rose/tests/integration/components/rose/form/radio/group-test.js
@@ -27,9 +27,9 @@ module('Integration | Component | rose/form/radio/group', function (hooks) {
     assert.equal(findAll('input')[1].name, 'bird');
   });
 
-  test('it renders with @variable value selected', async function (assert) {
+  test('it renders with @selectedValue value selected', async function (assert) {
     await render(hbs`
-      <Rose::Form::Radio::Group @name="bird" @variable="flamingo" as |radioGroup|>
+      <Rose::Form::Radio::Group @name="bird" @selectedValue="flamingo" as |radioGroup|>
         <radioGroup.radio
           @id="bird-1"
           @label="Pegion"
@@ -51,4 +51,62 @@ module('Integration | Component | rose/form/radio/group', function (hooks) {
     assert.equal(find('#bird-1').checked, true);
     assert.equal(find('#bird-2').checked, false);
   });
+
+  test('it reflects active radiofield value in @selectedValue', async function (assert) {
+    await render(hbs`
+      <Rose::Form::Radio::Group @name="bird" @selectedValue={{this.selectedValue}} as |radioGroup|>
+        <radioGroup.radio
+          @id="bird-1"
+          @label="Pegion"
+          @value="pegion"
+        />
+        <radioGroup.radio
+          @id="bird-2"
+          @label="flamingo"
+          @value="flamingo"
+        />
+      </Rose::Form::Radio::Group>
+    `);
+
+    assert.notOk(this.selectedValue);
+
+    await click(find('#bird-1'));
+    assert.equal(this.selectedValue, 'pegion');
+
+    await click(find('#bird-2'));
+    assert.equal(this.selectedValue, 'flamingo');
+  });
+
+  test('it uses @selectedValue value to set active radiofield', async function (assert) {
+    this.set('selectedValue', 'cat');
+    await render(hbs`
+      <Rose::Form::Radio::Group @name="bird" @selectedValue={{this.selectedValue}} as |radioGroup|>
+        <radioGroup.radio
+          @id="bird-1"
+          @label="Pegion"
+          @value="pegion"
+        />
+        <radioGroup.radio
+          @id="bird-2"
+          @label="flamingo"
+          @value="flamingo"
+        />
+      </Rose::Form::Radio::Group>
+    `);
+
+    assert.equal(find('#bird-1').checked, false);
+    assert.equal(find('#bird-2').checked, false);
+
+    this.set('selectedValue', 'flamingo');
+    assert.equal(find('#bird-1').checked, false);
+    assert.equal(find('#bird-2').checked, true);
+
+    this.set('selectedValue', 'pegion');
+    assert.equal(find('#bird-1').checked, true);
+    assert.equal(find('#bird-2').checked, false);
+
+    this.set('selectedValue', 'dog');
+    assert.equal(find('#bird-1').checked, false);
+    assert.equal(find('#bird-2').checked, false);
+  });
 });
diff --git a/addons/rose/tests/integration/components/rose/form/radio/radio-test.js b/addons/rose/tests/integration/components/rose/form/radio/radio-test.js
index a3b7d7a0b..f3aa7df11 100644
--- a/addons/rose/tests/integration/components/rose/form/radio/radio-test.js
+++ b/addons/rose/tests/integration/components/rose/form/radio/radio-test.js
@@ -17,22 +17,22 @@ module('Integration | Component | rose/form/radio/radio', function (hooks) {
     assert.equal(await find('label').textContent.trim(), 'Label');
   });
 
-  test('it is checked when @value and @variable values match', async function (assert) {
+  test('it is checked when @value and @selectedValue values match', async function (assert) {
     await render(
-      hbs`<Rose::Form::Radio::Radio @value="tree" @variable="tree"/>`
+      hbs`<Rose::Form::Radio::Radio @value="tree" @selectedValue="tree"/>`
     );
     assert.equal(await find('input').checked, true);
   });
 
-  test('it is not checked when @value and @variable values are different', async function (assert) {
+  test('it is not checked when @value and @selectedValue values are different', async function (assert) {
     await render(hbs`<Rose::Form::Radio::Radio @value="tree"/>`);
     assert.equal(await find('input').checked, false);
 
-    await render(hbs`<Rose::Form::Radio::Radio @variable="tree"/>`);
+    await render(hbs`<Rose::Form::Radio::Radio @selectedValue="tree"/>`);
     assert.equal(await find('input').checked, false);
 
     await render(
-      hbs`<Rose::Form::Radio::Radio @value="root" @variable="tree"/>`
+      hbs`<Rose::Form::Radio::Radio @value="root" @selectedValue="tree"/>`
     );
     assert.equal(await find('input').checked, false);
   });