From 67b6cd7aa74926ce7a85a45c5b497dc6a9dc02b2 Mon Sep 17 00:00:00 2001
From: Randall Morey <randall@randallmorey.com>
Date: Wed, 4 Nov 2020 14:32:16 -0500
Subject: [PATCH] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20add=20support=20for=20ic?=
 =?UTF-8?q?ons=20to=20radio=20fields?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../rose/form/radio/group/index.stories.mdx        | 13 ++++++++++++-
 .../components/rose/form/radio/radio/index.hbs     |  9 +++++++++
 .../rose/form/radio/radio/index.stories.mdx        | 14 +++++++++++++-
 .../addon/styles/rose/components/form/_radio.scss  |  5 +++++
 .../components/rose/form/radio/radio-test.js       |  5 +++++
 5 files changed, 44 insertions(+), 2 deletions(-)

diff --git a/addons/rose/addon/components/rose/form/radio/group/index.stories.mdx b/addons/rose/addon/components/rose/form/radio/group/index.stories.mdx
index ebdb50560..e6c750487 100644
--- a/addons/rose/addon/components/rose/form/radio/group/index.stories.mdx
+++ b/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'),
diff --git a/addons/rose/addon/components/rose/form/radio/radio/index.hbs b/addons/rose/addon/components/rose/form/radio/radio/index.hbs
index 4e38ecb4f..62d571197 100644
--- a/addons/rose/addon/components/rose/form/radio/radio/index.hbs
+++ b/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}}
diff --git a/addons/rose/addon/components/rose/form/radio/radio/index.stories.mdx b/addons/rose/addon/components/rose/form/radio/radio/index.stories.mdx
index 91d256e9a..425ea6e53 100644
--- a/addons/rose/addon/components/rose/form/radio/radio/index.stories.mdx
+++ b/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>
diff --git a/addons/rose/addon/styles/rose/components/form/_radio.scss b/addons/rose/addon/styles/rose/components/form/_radio.scss
index f20d53a1b..860c39ca5 100644
--- a/addons/rose/addon/styles/rose/components/form/_radio.scss
+++ b/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);
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 f3aa7df11..9f1677571 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,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"/>`