From 502a76444c92c2cb7cbef1eaf59d04c3725c2ef3 Mon Sep 17 00:00:00 2001
From: Randall Morey <randall@randallmorey.com>
Date: Tue, 5 May 2020 16:54:05 -0400
Subject: [PATCH] =?UTF-8?q?chore:=20=F0=9F=A4=96=20add=20size=20option=20t?=
 =?UTF-8?q?o=20icon=20component?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 addons/rose/addon/styles/rose/_icon.scss         | 16 +++++++++++++---
 .../addon/templates/components/rose/icon.hbs     |  2 +-
 addons/rose/app/templates/index.hbs              |  2 ++
 addons/rose/stories/icon.stories.js              | 12 +++++++++++-
 .../integration/components/rose/icon-test.js     |  5 +++++
 5 files changed, 32 insertions(+), 5 deletions(-)

diff --git a/addons/rose/addon/styles/rose/_icon.scss b/addons/rose/addon/styles/rose/_icon.scss
index eb7a8dd34..003d287c0 100644
--- a/addons/rose/addon/styles/rose/_icon.scss
+++ b/addons/rose/addon/styles/rose/_icon.scss
@@ -1,9 +1,19 @@
 @use 'variables/sizing';
 
 .rose-icon {
+  --size: #{sizing.rems(l)};
+
+  &.medium {
+    --size: #{sizing.rems(m)};
+  }
+
+  &.small {
+    --size: #{sizing.rems(s)};
+  }
+
   > svg {
-    width: sizing.rems(l);
-    height: sizing.rems(l);
-    vertical-align: top;
+    width: var(--size);
+    height: var(--size);
+    vertical-align: middle;
   }
 }
diff --git a/addons/rose/addon/templates/components/rose/icon.hbs b/addons/rose/addon/templates/components/rose/icon.hbs
index bbfe9fb57..d215526f6 100644
--- a/addons/rose/addon/templates/components/rose/icon.hbs
+++ b/addons/rose/addon/templates/components/rose/icon.hbs
@@ -1,3 +1,3 @@
-<span class="rose-icon">
+<span class="rose-icon {{@size}}">
   {{inline-svg @name}}
 </span>
diff --git a/addons/rose/app/templates/index.hbs b/addons/rose/app/templates/index.hbs
index 4b4e197a0..5feddddc0 100644
--- a/addons/rose/app/templates/index.hbs
+++ b/addons/rose/app/templates/index.hbs
@@ -2,6 +2,8 @@ Dummy app index template
 
 <h2>Icon</h2>
 <Rose::Icon @name="alert-circle-fill" />
+<Rose::Icon @name="alert-circle-fill" @size="medium" />
+<Rose::Icon @name="alert-circle-fill" @size="small" />
 
 <h2>Button</h2>
 <Rose::Button @style="primary">Primary</Rose::Button>
diff --git a/addons/rose/stories/icon.stories.js b/addons/rose/stories/icon.stories.js
index 1473bbac2..087ef6293 100644
--- a/addons/rose/stories/icon.stories.js
+++ b/addons/rose/stories/icon.stories.js
@@ -7,7 +7,7 @@ export default {
 
 export const Normal = () => ({
   template: hbs`
-    <Rose::Icon @name={{name}} />
+    <Rose::Icon @name={{name}} @size={{size}} />
 
     <br>
 
@@ -25,5 +25,15 @@ export const Normal = () => ({
       },
       'check-circle-outline'
     ),
+
+    size: select(
+      'size',
+      {
+        'large (24px / default)': 'large',
+        'medium (16px)': 'medium',
+        'small (12px)': 'small',
+      },
+      'large'
+    ),
   },
 });
diff --git a/addons/rose/tests/integration/components/rose/icon-test.js b/addons/rose/tests/integration/components/rose/icon-test.js
index 2a9fdf5bd..43a429077 100644
--- a/addons/rose/tests/integration/components/rose/icon-test.js
+++ b/addons/rose/tests/integration/components/rose/icon-test.js
@@ -10,4 +10,9 @@ module('Integration | Component | rose/icon', function (hooks) {
     await render(hbs`<Rose::Icon @name="unfold-more" />`);
     assert.ok(find('svg'));
   });
+
+  test('it supports optional @size', async function (assert) {
+    await render(hbs`<Rose::Icon @name="unfold-more" @size="small" />`);
+    assert.ok(find('.small'));
+  });
 });