Merge branch 'develop' into chore-input-field-component

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