feat: 🎸 add support for icons to radio fields

addons/rose/addon/components/rose/form/radio/group/index.stories.mdx

@@ -1,6 +1,6 @@
 import { Meta, Story, Preview } from '@storybook/addon-docs/blocks';
 import { hbs } from 'ember-cli-htmlbars';
-import { text, boolean } from '@storybook/addon-knobs';
+import { text, boolean, select } from '@storybook/addon-knobs';
 
 <Meta title="Rose|Form/Radio/Group" component="Form/Radio/Group" />
 
@@ -41,6 +41,7 @@ Renders a form radiofield group.
       <radioGroup.radio
         @label={{firstFieldLabel}}
         @value={{firstFieldValue}}
+        @icon={{firstFieldIcon}}
       />
       <radioGroup.radio
         @label={{secondFieldLabel}}
@@ -58,6 +59,16 @@ Renders a form radiofield group.
     selectedValue: text('selectedValue', 'disagree'),
     firstFieldLabel: text('first label', 'Agree'),
     firstFieldValue: text('first value', 'agree'),
+    firstFieldIcon: select(
+      'first icon',
+      {
+        'user-organization': 'user-organization',
+        'copy-action': 'copy-action',
+        'unfold-more': 'unfold-more',
+        'unfold-less': 'unfold-less',
+      },
+      'user-organization'
+    ),
     secondFieldLabel: text('second label', 'Maybe'),
     secondFieldValue: text('second value', 'maybe'),
     thirdFieldLabel: text('third label', 'Disagree'),

addons/rose/addon/components/rose/form/radio/radio/index.hbs

@@ -12,7 +12,16 @@
     @disabled={{@disabled}}/>
 
   <label class="rose-form-radio-label" for={{this.id}}>
+
+    {{#if @icon}}
+      <Rose::Icon
+        @name={{@icon}}
+        @size="medium"
+      />
+    {{/if}}
+
     {{@label}}
+    
   </label>
 
   {{yield}}

addons/rose/addon/components/rose/form/radio/radio/index.stories.mdx

@@ -1,6 +1,6 @@
 import { Meta, Story, Preview } from '@storybook/addon-docs/blocks';
 import { hbs } from 'ember-cli-htmlbars';
-import { text, boolean } from '@storybook/addon-knobs';
+import { text, boolean, select } from '@storybook/addon-knobs';
 
 <Meta title="Rose|Form/Radio/Radio" component="Form/Radio/Radio" />
 
@@ -27,6 +27,7 @@ Renders a form radiofield.
         @value={{value}}
         @selectedValue={{selectedValue}}
         @disabled={{disabled}}
+        @icon={{icon}}
         />
     `,
     context: {
@@ -38,6 +39,17 @@ Renders a form radiofield.
         'value and selectedValue must match to select radiofield'
       ),
       disabled: boolean('disabled', false),
+      icon: select(
+        'icon',
+        {
+          'none': null,
+          'user-organization': 'user-organization',
+          'copy-action': 'copy-action',
+          'unfold-more': 'unfold-more',
+          'unfold-less': 'unfold-less',
+        },
+        null
+      ),
     }
   }}</Story>
 </Preview>

addons/rose/addon/styles/rose/components/form/_radio.scss

@@ -33,6 +33,11 @@ $data-svg-prefix: 'data:image/svg+xml;utf-8,';
     color: currentColor;
     padding-left: sizing.rems(l);
 
+    .rose-icon {
+      margin-right: sizing.rems(xxs);
+      margin-left: sizing.rems(xxs);
+    }
+
     &::before {
       position: absolute;
       top: sizing.rems(xs);

addons/rose/tests/integration/components/rose/form/radio/radio-test.js

@@ -17,6 +17,11 @@ module('Integration | Component | rose/form/radio/radio', function (hooks) {
     assert.equal(await find('label').textContent.trim(), 'Label');
   });
 
+  test('it supports an icon', async function (assert) {
+    await render(hbs`<Rose::Form::Radio::Radio @icon="user-square-fill" />`);
+    assert.ok(find('svg'));
+  });
+
   test('it is checked when @value and @selectedValue values match', async function (assert) {
     await render(
       hbs`<Rose::Form::Radio::Radio @value="tree" @selectedValue="tree"/>`