feat(denali-text-area): add wrapperClass arg (denali-design#82)

ayeswarya · Mar 26, 2021 · 285512a · 285512a
1 parent 3ef7fbe
commit 285512a
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 13 deletions.
diff --git a/addon/components/denali-text-area.hbs b/addon/components/denali-text-area.hbs
@@ -1,7 +1,8 @@
-{{! Copyright 2020, Verizon Media. Licensed under the terms of the MIT license. See accompanying LICENSE.md file for terms. }}
+{{! Copyright 2021, Verizon Media. Licensed under the terms of the MIT license. See accompanying LICENSE.md file for terms. }}
 <div class="input
   {{this.activeClass}}
-  {{this.errorClass}}"
+  {{this.errorClass}}
+  {{this.wrapperClass}}"
 >
   <textarea ...attributes>{{yield}}</textarea>
   {{#if this.errorMsg}}

diff --git a/addon/components/denali-text-area.js b/addon/components/denali-text-area.js
@@ -14,6 +14,9 @@ export default class DenaliTextAreaComponent extends Component {
   @arg(string)
   errorMsg;
 
+  @arg(string)
+  wrapperClass;
+
   get activeClass() {
     return this.state === 'active' ? 'is-active' : undefined;
   }

diff --git a/stories/text-area.stories.js b/stories/text-area.stories.js
@@ -19,9 +19,10 @@ export const Default = () => ({
 const allStates = [undefined, ...STATES];
 export const Playground = () => ({
   template: hbs`
-    <DenaliTextArea 
+    <DenaliTextArea
       @state={{state}}
       @errorMsg={{errorMsg}}
+      @wrapperClass={{wrapperClass}}
       placeholder={{placeholder}}
       disabled={{disabled}}
       class={{class}}
@@ -31,6 +32,7 @@ export const Playground = () => ({
   context: {
     state: select('state', allStates, allStates[0], argument),
     errorMsg: text('errorMsg', '', argument),
+    wrapperClass: text('wrapperClass', '', argument),
     placeholder: text('placeholder', 'Denali Text Area', attribute),
     disabled: boolean('disabled', false, attribute),
     class: text('class', '', attribute),

diff --git a/tests/integration/components/denali-text-area-test.js b/tests/integration/components/denali-text-area-test.js
@@ -7,8 +7,6 @@ module('Integration | Component | denali-text-area', function (hooks) {
   setupRenderingTest(hooks);
 
   test('it renders', async function (assert) {
-    assert.expect(3);
-
     await render(hbs`<DenaliTextArea>My Input</ DenaliTextArea>`);
 
     assert.dom('.input textarea').exists('An textarea is rendered within a wrapper div with class `.input`');
@@ -17,8 +15,6 @@ module('Integration | Component | denali-text-area', function (hooks) {
   });
 
   test('states', async function (assert) {
-    assert.expect(2);
-
     await render(hbs`<DenaliTextArea @state={{this.state}} @errorMsg="error"/>`);
 
     this.set('state', 'active');
@@ -29,24 +25,18 @@ module('Integration | Component | denali-text-area', function (hooks) {
   });
 
   test('disabled', async function (assert) {
-    assert.expect(1);
-
     await render(hbs`<DenaliTextArea disabled={{true}}/>`);
     assert.dom('.input textarea').isDisabled('The textarea is disabled when specified');
   });
 
   test('placeholder', async function (assert) {
-    assert.expect(1);
-
     await render(hbs`<DenaliTextArea placeholder="Text field"/>`);
     assert
       .dom('.input textarea')
       .hasAttribute('placeholder', 'Text field', 'The textarea is has the specified placeholder');
   });
 
   test('error message', async function (assert) {
-    assert.expect(2);
-
     await render(hbs`<DenaliTextArea @state="error" @errorMsg={{this.errorMsg}} />`);
     assert.dom('.input').hasClass('is-error', 'The input wrapper has the appropriate class.');
 
@@ -71,4 +61,21 @@ module('Integration | Component | denali-text-area', function (hooks) {
     this.element.querySelector('.input textarea').value = 'More Random Text';
     this.element.querySelector('.input textarea').dispatchEvent(new Event('input'));
   });
+
+  test('wrapperClass', async function (assert) {
+    await render(hbs`
+      <DenaliTextArea
+        @wrapperClass={{this.wrapperClass}}
+      />
+    `);
+
+    const wrapperClass = 'wrapperClass';
+    assert
+      .dom('.input')
+      .doesNotHaveClass(wrapperClass, '`DenaliTextArea` does not have custom wrapper class by default');
+
+    this.set('wrapperClass', wrapperClass);
+
+    assert.dom('.input').hasClass(wrapperClass, '`DenaliTextArea` has custom specified wrapper class');
+  });
 });