chore: 🤖 build out textarea component

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

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,
+});

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);
     }

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,,,
 );
 
 /**

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.

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>

addons/rose/app/components/rose/form/textarea.js

@@ -0,0 +1 @@
+export { default } from 'rose/components/rose/form/textarea';

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}}
+  />

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),
+  },
+});

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'));
+  });
+});