From a20c37ab5f4d8e3b02123aa53d6ac93d1ef4d6ae Mon Sep 17 00:00:00 2001
From: Kevin Hinterlong <kevinhinterlong@users.noreply.github.com>
Date: Tue, 6 Oct 2020 14:17:01 -0500
Subject: [PATCH] fix: button can now use @isFull arg on all sizes (#45)

* fix: button can now use @isFull arg on all sizes

* fix: denali button tests

* fix: use existing class name getter setup
---
 addon/components/denali-button-enums.js       |  2 +-
 addon/components/denali-button.hbs            |  2 +-
 addon/components/denali-button.js             |  7 +++++
 stories/button.stories.js                     |  2 ++
 .../components/denali-button-test.js          | 29 +++++++++++++++++--
 5 files changed, 38 insertions(+), 4 deletions(-)

diff --git a/addon/components/denali-button-enums.js b/addon/components/denali-button-enums.js
index 34f918d..ca2faa0 100644
--- a/addon/components/denali-button-enums.js
+++ b/addon/components/denali-button-enums.js
@@ -4,5 +4,5 @@
  */
 
 export const STYLES = ['solid', 'outline', 'ghost', 'text', 'danger'];
-export const SIZES = ['default', 'small', 'medium', 'large', 'full'];
+export const SIZES = ['default', 'small', 'medium', 'large'];
 export const TYPES = ['button', 'submit', 'reset'];
diff --git a/addon/components/denali-button.hbs b/addon/components/denali-button.hbs
index fc86a4d..c6422d3 100644
--- a/addon/components/denali-button.hbs
+++ b/addon/components/denali-button.hbs
@@ -1,6 +1,6 @@
 {{! Copyright 2020, Verizon Media. Licensed under the terms of the MIT license. See accompanying LICENSE.md file for terms. }}
 <button
-  class="button {{this.isActiveClass}} {{this.styleClass}} {{this.sizeClass}} {{this.isInverseClass}} {{this.hasIconClass}} {{this.hasLoaderClass}}"
+  class="button {{this.isActiveClass}} {{this.styleClass}} {{this.sizeClass}} {{this.isInverseClass}} {{this.hasIconClass}} {{this.hasLoaderClass}} {{this.isFullClass}}"
   type={{this.type}}
   ...attributes
 >
diff --git a/addon/components/denali-button.js b/addon/components/denali-button.js
index 5917dd9..1d0e077 100644
--- a/addon/components/denali-button.js
+++ b/addon/components/denali-button.js
@@ -17,6 +17,9 @@ export default class DenaliButtonComponent extends Component {
   @arg(oneOf(SIZES))
   size;
 
+  @arg(boolean)
+  isFull = false;
+
   @arg(boolean)
   isInverse = false;
 
@@ -37,6 +40,10 @@ export default class DenaliButtonComponent extends Component {
     return this.isActive ? 'is-active' : undefined;
   }
 
+  get isFullClass() {
+    return this.isFull ? 'is-full' : undefined;
+  }
+
   get styleClass() {
     return `is-${this.style}`;
   }
diff --git a/stories/button.stories.js b/stories/button.stories.js
index fc6ec94..ed938ef 100644
--- a/stories/button.stories.js
+++ b/stories/button.stories.js
@@ -25,6 +25,7 @@ export const Playground = () => ({
       @isActive={{isActive}}
       @isInverse={{isInverse}}
       @size={{size}}
+      @isFull={{isFull}}
       @style={{style}}
       @type={{type}}
       disabled={{disabled}}
@@ -39,6 +40,7 @@ export const Playground = () => ({
     isInverse: boolean('isInverse', false, argument),
     onClick: action('onClick'),
     size: select('size', SIZES, SIZES[0], argument),
+    isFull: boolean('isFull', false, argument),
     style: select('style', STYLES, STYLES[0], argument),
     type: select('type', TYPES, TYPES[0], argument),
     class: text('class', '', attribute),
diff --git a/tests/integration/components/denali-button-test.js b/tests/integration/components/denali-button-test.js
index 8dd7e47..98cc402 100644
--- a/tests/integration/components/denali-button-test.js
+++ b/tests/integration/components/denali-button-test.js
@@ -117,9 +117,34 @@ module('Integration | Component | denali-button', function (hooks) {
 
     this.set('size', 'large');
     assert.dom('.button').hasClass('is-large', 'DenaliButton has a large size when `@size` arg is set to large');
+  });
+
+  test('it supports isFull', async function (assert) {
+    await render(hbs`
+      <DenaliButton @size={{this.size}} @isFull={{this.isFull}}>
+        Inner Content
+      </DenaliButton>
+    `);
+
+    assert.dom('.button').exists('DenaliButton can render without a size set');
+    assert
+      .dom('.button')
+      .doesNotHaveClass('is-full', 'DenaliButton does not have a full size when `@isFull` arg is undefined');
 
-    this.set('size', 'full');
-    assert.dom('.button').hasClass('is-full', 'DenaliButton has a full size when `@size` arg is set to full');
+    this.set('isFull', true);
+    assert.dom('.button').hasClass('is-full', 'DenaliButton has a full size when `@isFull` arg is set to true');
+
+    this.set('size', 'small');
+    assert.dom('.button').hasClass('is-small', 'DenaliButton has a small size when `@size` arg is set to small');
+    assert
+      .dom('.button')
+      .hasClass('is-full', 'DenaliButton has a full size when `@isFull` arg is set to true and size is set to small');
+
+    this.set('isFull', false);
+    assert.dom('.button').hasClass('is-small', 'DenaliButton has a small size when `@size` arg is set to small');
+    assert
+      .dom('.button')
+      .doesNotHaveClass('is-full', 'DenaliButton does not have a full size when `@isFull` arg is set to false');
   });
 
   test('it supports icons', async function (assert) {