chore: 🤖 add support for left and right icons to buttons

addons/rose/addon/components/rose/button.js

@@ -10,4 +10,6 @@ import layout from '../../templates/components/rose/button';
  */
 export default Component.extend({
   layout,
+
+  tagName: ''
 });

addons/rose/addon/styles/rose/_icon.scss

@@ -14,6 +14,6 @@
   > svg {
     width: var(--size);
     height: var(--size);
-    vertical-align: middle;
+    vertical-align: text-top;
   }
 }

addons/rose/addon/styles/rose/utilities/_button.scss

@@ -24,6 +24,16 @@
       text-shadow: map.get($default, 'text-shadow');
     }
 
+    > .rose-button-icon-left {
+      margin-left: -(sizing.rems(xs));
+      margin-right: sizing.rems(xxs);
+    }
+
+    > .rose-button-icon-right {
+      margin-left: sizing.rems(xxs);
+      margin-right: -(sizing.rems(xs));
+    }
+
     &:not(:disabled) {
       @if $hover {
         &:hover {

addons/rose/addon/templates/components/rose/button.hbs

@@ -4,5 +4,25 @@
   disabled={{if @disabled "disabled"}}
   class={{if  @style (concat "rose-button-" @style)}}
   >
-  {{yield}}
+
+  {{#if @iconLeft}}
+    <Rose::Icon
+      @name={{@iconLeft}}
+      @size="medium"
+      class="rose-button-icon-left"
+    />
+  {{/if}}
+
+  <span class="rose-button-body">
+    {{yield}}
+  </span>
+
+  {{#if @iconRight}}
+    <Rose::Icon
+      @name={{@iconRight}}
+      @size="medium"
+      class="rose-button-icon-right"
+    />
+  {{/if}}
+
 </button>

addons/rose/addon/templates/components/rose/icon.hbs

@@ -1,3 +1,3 @@
-<span class="rose-icon {{@size}}">
+<span ...attributes class="rose-icon {{@size}}">
   {{inline-svg @name}}
 </span>

addons/rose/stories/button.stories.js

@@ -6,19 +6,28 @@ export default {
   title: 'Rose::Button',
 };
 
+const icons = {
+  none: null,
+  'alert-circle-fill': 'alert-circle-fill',
+  'chevron-right': 'chevron-right',
+  'copy-action': 'copy-action',
+};
+
 export const Normal = () => ({
   template: hbs`
     <Rose::Button
       @submit={{submit}}
       @disabled={{disabled}}
       @style={{style}}
+      @iconLeft={{iconLeft}}
+      @iconRight={{iconRight}}
       {{on "click" onClick}}
       >
       {{text}}
     </Rose::Button>
   `,
   context: {
-    text: text('text', 'Button 🌈'),
+    text: text('text', 'Button'),
     submit: boolean('submit', false),
     disabled: boolean('disabled', false),
     style: select(
@@ -32,6 +41,8 @@ export const Normal = () => ({
       },
       'primary'
     ),
+    iconLeft: select('iconLeft', icons, 'copy-action'),
+    iconRight: select('iconRight', icons, 'chevron-right'),
     onClick: action('clicked'),
-  },
+  }
 });

addons/rose/tests/integration/components/rose/button-test.js

@@ -13,23 +13,30 @@ module('Integration | Component | rose/button', function (hooks) {
 
   test('it is type="button" by default', async function (assert) {
     await render(hbs`<Rose::Button>Button</Rose::Button>`);
-    assert.equal(await find('button').type, 'button');
+    assert.equal(find('button').type, 'button');
   });
 
   test('it is type="submit" when @submit={{true}}', async function (assert) {
     await render(hbs`<Rose::Button @submit={{true}} />`);
-    assert.equal(await find('button').type, 'submit');
+    assert.equal(find('button').type, 'submit');
   });
 
   test('it is disabled when @disabled={{true}}', async function (assert) {
     await render(hbs`<Rose::Button @disabled={{true}} />`);
-    assert.equal(await find('button').disabled, true);
+    assert.equal(find('button').disabled, true);
   });
 
   test('it adds a style class', async function (assert) {
     await render(hbs`<Rose::Button @style="primary" />`);
-    assert.ok(await find('button.rose-button-primary'));
+    assert.ok(find('.rose-button-primary'));
     await render(hbs`<Rose::Button @style="secondary" />`);
-    assert.ok(await find('button.rose-button-secondary'));
+    assert.ok(find('.rose-button-secondary'));
+  });
+
+  test('it supports left and right icons', async function (assert) {
+    await render(hbs`<Rose::Button @iconLeft="chevron-left" />`);
+    assert.ok(find('.rose-button-icon-left'));
+    await render(hbs`<Rose::Button @iconRight="chevron-left" />`);
+    assert.ok(find('.rose-button-icon-right'));
   });
 });