From 02f2d4e7d5e5423cd96dd1da03a1059bfb6d7fbf Mon Sep 17 00:00:00 2001
From: Randall Morey <randall@randallmorey.com>
Date: Mon, 4 May 2020 14:21:42 -0400
Subject: [PATCH] =?UTF-8?q?chore:=20=F0=9F=A4=96=20build=20out=20textarea?=
 =?UTF-8?q?=20component?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../rose/addon/components/rose/form/input.js  |  2 +-
 .../addon/components/rose/form/textarea.js    | 20 ++++++++++
 .../styles/rose/components/form/_input.scss   |  1 +
 .../addon/styles/rose/variables/_sizing.scss  |  2 +-
 .../styles/rose/variables/_typography.scss    |  2 +-
 .../components/rose/form/textarea.hbs         | 18 +++++++++
 .../rose/app/components/rose/form/textarea.js |  1 +
 addons/rose/app/templates/index.hbs           | 27 ++++++++++++++
 addons/rose/stories/form/textarea.stories.js  | 27 ++++++++++++++
 .../components/rose/form/textarea-test.js     | 37 +++++++++++++++++++
 10 files changed, 134 insertions(+), 3 deletions(-)
 create mode 100644 addons/rose/addon/components/rose/form/textarea.js
 create mode 100644 addons/rose/addon/templates/components/rose/form/textarea.hbs
 create mode 100644 addons/rose/app/components/rose/form/textarea.js
 create mode 100644 addons/rose/stories/form/textarea.stories.js
 create mode 100644 addons/rose/tests/integration/components/rose/form/textarea-test.js

diff --git a/addons/rose/addon/components/rose/form/input.js b/addons/rose/addon/components/rose/form/input.js
index 49f5f11f3..dcd34f179 100644
--- a/addons/rose/addon/components/rose/form/input.js
+++ b/addons/rose/addon/components/rose/form/input.js
@@ -2,7 +2,7 @@ import Component from '@ember/component';
 import layout from '../../../templates/components/rose/form/input';
 
 /**
- * A simple HTML `<button>` element.
+ * A simple HTML `<input>` element.
  *
  * @example
  *  <Rose::Form::Input
diff --git a/addons/rose/addon/components/rose/form/textarea.js b/addons/rose/addon/components/rose/form/textarea.js
new file mode 100644
index 000000000..e8a8eb7a2
--- /dev/null
+++ b/addons/rose/addon/components/rose/form/textarea.js
@@ -0,0 +1,20 @@
+import Component from '@ember/component';
+import layout from '../../../templates/components/rose/form/textarea';
+
+/**
+ * A `<textarea>` element essentially identical to `Rose::Form::Input` except
+ * for the field element.
+ *
+ * @example
+ *  <Rose::Form::Textarea
+ *    @value="Text"
+ *    @label="Label"
+ *    @helperText="Helper text"
+ *    @error={{true}}
+ *    disabled={{true}}
+ *    readonly={{true}}
+ *    />
+ */
+export default Component.extend({
+  layout,
+});
diff --git a/addons/rose/addon/styles/rose/components/form/_input.scss b/addons/rose/addon/styles/rose/components/form/_input.scss
index dc207a56e..7116c6a76 100644
--- a/addons/rose/addon/styles/rose/components/form/_input.scss
+++ b/addons/rose/addon/styles/rose/components/form/_input.scss
@@ -38,6 +38,7 @@
     }
 
     &:disabled {
+      cursor: not-allowed;
       color: var(--ui-gray);
       background-color: var(--ui-gray-subtler-6);
     }
diff --git a/addons/rose/addon/styles/rose/variables/_sizing.scss b/addons/rose/addon/styles/rose/variables/_sizing.scss
index 34d5c9628..93ebe4da7 100644
--- a/addons/rose/addon/styles/rose/variables/_sizing.scss
+++ b/addons/rose/addon/styles/rose/variables/_sizing.scss
@@ -23,7 +23,7 @@ $size-coefficients: (
   //  4
     xxxs: 0.125,
   //  2
-    xxxxs: 0.0625 //  1,,
+    xxxxs: 0.0625 //  1,,,
 );
 
 /**
diff --git a/addons/rose/addon/styles/rose/variables/_typography.scss b/addons/rose/addon/styles/rose/variables/_typography.scss
index f733a2930..beaf59a5a 100644
--- a/addons/rose/addon/styles/rose/variables/_typography.scss
+++ b/addons/rose/addon/styles/rose/variables/_typography.scss
@@ -40,7 +40,7 @@ $font-sizes: (
   // 20
     h3: sizing.size(m),
   // 16
-    button: sizing.size(m) * 0.8125 // 13,,
+    button: sizing.size(m) * 0.8125 // 13,,,
 );
 
 // Line height expressed as ratio.
diff --git a/addons/rose/addon/templates/components/rose/form/textarea.hbs b/addons/rose/addon/templates/components/rose/form/textarea.hbs
new file mode 100644
index 000000000..3cb51c4ec
--- /dev/null
+++ b/addons/rose/addon/templates/components/rose/form/textarea.hbs
@@ -0,0 +1,18 @@
+<div class="rose-form-input{{if @error " error"}}">
+
+  <label class="rose-form-input-label">
+    {{@label}}
+  </label>
+
+  {{#if @helperText}}
+    <span class="rose-form-input-helper-text">{{@helperText}}</span>
+  {{/if}}
+
+  <Textarea
+    ...attributes
+    class="rose-form-input-field"
+    @value={{@value}} />
+
+  {{yield}}
+
+</div>
diff --git a/addons/rose/app/components/rose/form/textarea.js b/addons/rose/app/components/rose/form/textarea.js
new file mode 100644
index 000000000..ac6c40308
--- /dev/null
+++ b/addons/rose/app/components/rose/form/textarea.js
@@ -0,0 +1 @@
+export { default } from 'rose/components/rose/form/textarea';
diff --git a/addons/rose/app/templates/index.hbs b/addons/rose/app/templates/index.hbs
index 34feb6099..45c285a23 100644
--- a/addons/rose/app/templates/index.hbs
+++ b/addons/rose/app/templates/index.hbs
@@ -36,3 +36,30 @@ Dummy app index template
   @value="Text"
   disabled={{true}}
   />
+
+
+<Rose::Form::Textarea
+  @label="Label"
+  @value="Read only"
+  readonly={{true}}
+  />
+
+<Rose::Form::Textarea
+  @label="Label"
+  @helperText="Helper text"
+  @value="Text"
+  />
+
+<Rose::Form::Textarea
+  @label="Label"
+  @helperText="Helper text"
+  @value="Text"
+  @error={{true}}
+  />
+
+<Rose::Form::Textarea
+  @label="Label"
+  @helperText="Helper text"
+  @value="Text"
+  disabled={{true}}
+  />
diff --git a/addons/rose/stories/form/textarea.stories.js b/addons/rose/stories/form/textarea.stories.js
new file mode 100644
index 000000000..f3ae74240
--- /dev/null
+++ b/addons/rose/stories/form/textarea.stories.js
@@ -0,0 +1,27 @@
+import { hbs } from 'ember-cli-htmlbars';
+import { text, boolean } from '@storybook/addon-knobs';
+
+export default {
+  title: 'Rose::Form::Textarea',
+};
+
+export const Normal = () => ({
+  template: hbs`
+    <Rose::Form::Textarea
+      @value={{value}}
+      @label={{label}}
+      @helperText={{helperText}}
+      @error={{error}}
+      disabled={{disabled}}
+      readonly={{read-only}}
+      />
+  `,
+  context: {
+    value: text('value', 'Value'),
+    label: text('label', 'Label'),
+    helperText: text('helperText', 'Helper text'),
+    disabled: boolean('disabled', false),
+    'read-only': boolean('readonly', false),
+    error: boolean('error', false),
+  },
+});
diff --git a/addons/rose/tests/integration/components/rose/form/textarea-test.js b/addons/rose/tests/integration/components/rose/form/textarea-test.js
new file mode 100644
index 000000000..cce85cc32
--- /dev/null
+++ b/addons/rose/tests/integration/components/rose/form/textarea-test.js
@@ -0,0 +1,37 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render, find } from '@ember/test-helpers';
+import hbs from 'htmlbars-inline-precompile';
+
+module('Integration | Component | rose/form/textarea', function (hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders', async function (assert) {
+    await render(hbs`<Rose::Form::Textarea @value="Text" @label="Label" />`);
+    assert.equal(await find('label').textContent.trim(), 'Label');
+    assert.equal(await find('textarea').value, 'Text');
+  });
+
+  test('it displays optional helper text', async function (assert) {
+    await render(hbs`<Rose::Form::Textarea @helperText="Help me" />`);
+    assert.equal(
+      await find('.rose-form-input-helper-text').textContent.trim(),
+      'Help me'
+    );
+  });
+
+  test('it supports disabled attribute', async function (assert) {
+    await render(hbs`<Rose::Form::Textarea disabled={{true}} />`);
+    assert.ok(await find('[disabled]'));
+  });
+
+  test('it supports readonly attribute', async function (assert) {
+    await render(hbs`<Rose::Form::Textarea readonly={{true}} />`);
+    assert.ok(await find('[readonly]'));
+  });
+
+  test('it gets an `error` class when @error=true', async function (assert) {
+    await render(hbs`<Rose::Form::Textarea @error={{true}} />`);
+    assert.ok(await find('.error'));
+  });
+});