Feature FormGroup component

addon/components/form-group/component.ts

@@ -0,0 +1,66 @@
+import Component from '@ember/component';
+// @ts-ignore: Ignore import of compiled template
+import layout from './template';
+import { classNames } from '@ember-decorators/component';
+import * as Classes from '../../-private/common/classes';
+import { Intent } from '../../-private/common/intent';
+import { readOnly } from '@ember-decorators/object/computed';
+import { computed } from '@ember-decorators/object';
+import { htmlSafe } from '@ember/string';
+@classNames(Classes.FORM_GROUP)
+export default class FormGroup extends Component {
+  layout = layout;
+  /**
+     * A space-delimited list of class names to pass along to the
+     * `Classes.FORM_CONTENT` element that contains `children`.
+  */
+  contentClassName?: string;
+
+  /**
+    * Whether form group should appear as non-interactive.
+    * Remember that `input` elements must be disabled separately.
+  */
+  disabled?: boolean;
+
+  /**
+    * Optional helper text. The given content will be wrapped in
+    * `Classes.FORM_HELPER_TEXT` and displayed beneath `children`.
+    * Helper text color is determined by the `intent`.
+  */
+  helperText?: string | HTMLElement;
+
+  /** Whether to render the label and children on a single line. */
+  inline?: boolean;
+
+  /** Label of this form group. */
+  label?: string | HTMLElement;
+
+  /**
+  * `id` attribute of the labelable form element that this `FormGroup` controls,
+  * used as `<label for>` attribute.
+  */
+  labelFor?: string;
+
+  /**
+     * Optional secondary text that appears after the label.
+  */
+  labelInfo?: string | HTMLElement;
+
+  /** CSS properties to apply to the root element. */
+  style?: any = htmlSafe(this.style);
+
+  @readOnly('intent') Intents?: Intent;
+
+  @computed('Intents')
+  get intentStyle() {
+    return this.Intents ? Classes.intentClass(this.Intents) : Classes.intentClass('none');
+  }
+
+  classNameBindings = ['intentStyle', `disabled:${Classes.DISABLED}`, `inline:${Classes.INLINE}`];
+  attributeBindings = ['style:style'];
+
+  LABEL: string = Classes.LABEL;
+  TEXT_MUTED: string = Classes.TEXT_MUTED;
+  FORM_CONTENT: string = Classes.FORM_CONTENT;
+  FORM_HELPER_TEXT: string = Classes.FORM_HELPER_TEXT;
+};

addon/components/form-group/template.hbs

@@ -0,0 +1,16 @@
+{{#if label}}
+  <label class={{LABEL}} htmlFor={{labelFor}}>
+    {{{label}}}
+    <span class={{TEXT_MUTED}}>
+      {{{labelInfo}}}
+    </span>
+  </label>
+{{/if}}
+<div class="{{FORM_CONTENT}} {{contentClassName}}">
+  {{yield}}
+  {{#if helperText}}
+    <div class={{FORM_HELPER_TEXT}}>
+      {{{helperText}}}
+    </div>
+  {{/if}}
+</div>

app/components/form-group/component.js

@@ -0,0 +1 @@
+export { default } from 'ember-elements/components/form-group/component';

tests/integration/components/form-group/component-test.ts

@@ -0,0 +1,150 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render } from '@ember/test-helpers';
+import hbs from 'htmlbars-inline-precompile';
+
+module('Integration | Component | form-group', function (hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders', async function (assert) {
+    // Set any properties with this.set('myProperty', 'value');
+    // Handle any actions with this.set('myAction', function(val) { ... });
+
+
+    // Template block usage:
+    await render(hbs`
+      {{#form-group}}
+        template block text
+      {{/form-group}}
+    `);
+
+    assert.equal((this.element as any).textContent.trim(), 'template block text');
+  });
+  test('Custom class to FormGroup ', async function (assert) {
+    await render(hbs`
+      <FormGroup @class="hellow">
+      <InputGroup @placeholder="Enter text..."/>
+      </FormGroup>
+    `);
+
+    assert.ok(document.getElementsByName('hellow'));
+  });
+  test('Yield value is rendering ', async function (assert) {
+    await render(hbs`
+      <FormGroup >
+      <InputGroup @placeholder="Enter text..."/>
+      </FormGroup>
+    `);
+
+    assert.ok(document.getElementsByName('bp3-input-group'));
+  });
+  test('contentClassName class to FormGroup ', async function (assert) {
+    await render(hbs`
+      <FormGroup @contentClassName="hellow">
+      <InputGroup @placeholder="Enter text..."/>
+      </FormGroup>
+    `);
+
+    assert.ok(document.getElementsByName('hellow'));
+  });
+  test('disabled FormGroup ', async function (assert) {
+    await render(hbs`
+      <FormGroup @disabled=true>
+      <InputGroup @placeholder="Enter text..."/>
+      </FormGroup>
+    `);
+
+    assert.ok(document.getElementsByName('bp3-disabled'));
+  });
+  test('helperText for  FormGroup ', async function (assert) {
+    await render(hbs`
+      <FormGroup @helperText="helper text is rendering">
+      <InputGroup @placeholder="Enter text..."/>
+      </FormGroup>
+    `);
+    assert.equal((document.querySelector(".bp3-form-helper-text") as any).textContent.trim(), "helper text is rendering");
+  });
+  test('inline prop for  FormGroup ', async function (assert) {
+    await render(hbs`
+      <FormGroup @inline=true>
+      <InputGroup @placeholder="Enter text..."/>
+      </FormGroup>
+    `);
+
+    assert.ok(document.getElementsByName('bp3-inline'));
+  });
+  test('intent=primary prop for  FormGroup ', async function (assert) {
+    await render(hbs`
+      <FormGroup @intent="primary">
+      <InputGroup @placeholder="Enter text..."/>
+      </FormGroup>
+    `);
+
+    assert.ok(document.getElementsByName('bp3-intent-primary'));
+  });
+  test('intent=success prop for  FormGroup ', async function (assert) {
+    await render(hbs`
+      <FormGroup @intent="success">
+      <InputGroup @placeholder="Enter text..."/>
+      </FormGroup>
+    `);
+
+    assert.ok(document.getElementsByName('bp3-intent-success'));
+  });
+  test('intent=warning prop for  FormGroup ', async function (assert) {
+    await render(hbs`
+      <FormGroup @intent="warning">
+      <InputGroup @placeholder="Enter text..."/>
+      </FormGroup>
+    `);
+
+    assert.ok(document.getElementsByName('bp3-intent-warning'));
+  });
+  test('intent=danger prop for  FormGroup ', async function (assert) {
+    await render(hbs`
+      <FormGroup @intent="danger">
+      <InputGroup @placeholder="Enter text..."/>
+      </FormGroup>
+    `);
+
+    assert.ok(document.getElementsByName('bp3-intent-danger'));
+  });
+  test('label prop for  FormGroup ', async function (assert) {
+    await render(hbs`
+      <FormGroup @label="danger">
+      <InputGroup @placeholder="Enter text..."/>
+      </FormGroup>
+    `);
+
+    assert.equal((document.querySelector('.bp3-label') as any).textContent.trim(), "danger");
+  });
+  test('labelFor prop for  FormGroup ', async function (assert) {
+    await render(hbs`
+      <FormGroup @label="hi" @labelFor="text-input">
+      <InputGroup @placeholder="Enter text..."/>
+      </FormGroup>
+    `);
+
+    assert.ok(document.getElementsByTagName("label")[0].getAttribute("for"));
+  });
+  test('labelInfo prop for  FormGroup ', async function (assert) {
+    await render(hbs`
+      <FormGroup @label="hi" @labelInfo="hellow" @labelFor="text-input">
+      <InputGroup @placeholder="Enter text..."/>
+      </FormGroup>
+    `);
+
+    assert.equal((document.querySelector(".bp3-text-muted") as any).textContent.trim(), "hellow");
+  });
+  test('Custom style  ', async function (assert) {
+    await render(hbs`
+      <FormGroup @style="width:20px">
+      <InputGroup @placeholder="Enter text..."/>
+      </FormGroup>
+    `);
+
+    assert.equal((document.querySelector('.bp3-form-group') as HTMLInputElement).style.width, "20px");
+  });
+
+});
+