Merge branch 'refactor-oidc-inline' of https://github.com/hashicorp/boundary-ui into refactor-oidc-inline

addons/rose/addon/components/rose/form/fieldset/index.hbs

@@ -0,0 +1,21 @@
+<fieldset ...attributes class='rose-form-fieldset' aria-describedby={{if (has-block "description") (concat 'description-' this.id)}}>
+    <legend 
+        id={{concat 'title-' this.id}}
+        class='rose-form-fieldset-title'
+    >
+        {{yield to='title'}}
+    </legend>
+    
+    {{#if (has-block "description")}}
+        <div
+            id={{concat 'description-' this.id}}
+            class='rose-form-fieldset-description'
+        >
+            {{yield to='description'}}
+        </div>
+    {{/if}}
+    
+    <div class='rose-form-fieldset-body'>
+        {{yield to='body'}}
+    </div>
+</fieldset>

addons/rose/addon/components/rose/form/fieldset/index.js

@@ -0,0 +1,11 @@
+import Component from '@glimmer/component';
+import { generateComponentID } from '../../../../utilities/component-auto-id';
+
+export default class RoseFormFieldsetComponent extends Component {
+  // =attributes
+
+  /**
+   * @type {string}
+   */
+  id = generateComponentID();
+}

addons/rose/addon/components/rose/form/fieldset/index.stories.mdx

@@ -0,0 +1,29 @@
+import { Meta, Story, Preview } from '@storybook/addon-docs/blocks';
+import { hbs } from 'ember-cli-htmlbars';
+import { action } from '@storybook/addon-actions';
+import { text, boolean, select } from '@storybook/addon-knobs';
+
+<Meta title="Rose|Form/Fieldset" component="Form/Fieldset" />
+
+# Form Fieldset
+
+Renders a simple fieldset with title, description and body.
+
+```html
+<Rose::Form::Fieldset>
+  <:title>Title</:title>
+  <:description>Description</:description>
+  <:body>Rest of the form</:body>
+</Rose::Form::Fieldset>
+```
+
+<Preview>
+    <Story name="Basic Fieldset">{{
+        template: hbs`
+            <Rose::Form::Fieldset>
+                <:title>Title</:title>
+                <:description>Description</:description>
+                <:body>Rest of the form</:body>
+            </Rose::Form::Fieldset>`
+        }}</Story>
+</Preview>

addons/rose/addon/styles/rose/components/form/_fieldset.scss

@@ -0,0 +1,14 @@
+@use '../../variables/sizing';
+@use '../../utilities/type';
+
+.rose-form-fieldset {
+  .rose-form-fieldset-title {
+    @include type.type(l, bold);
+  }
+
+  .rose-form-fieldset-description {
+    margin: sizing.rems(xxs) 0;
+    @include type.type(xs);
+    color: var(--ui-gray);
+  }
+}

addons/rose/addon/styles/rose/components/form/_index.scss

@@ -5,3 +5,4 @@
 @import 'checkbox';
 @import 'select';
 @import 'radio';
+@import 'fieldset';

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

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

addons/rose/tests/integration/components/rose/form/fieldset-test.js

@@ -0,0 +1,89 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render, find } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+
+module('Integration | Component | rose/form/fieldset', function (hooks) {
+  setupRenderingTest(hooks);
+
+  // Global values for mocking
+  this.mockTitle = 'Title';
+  this.mockDescription = 'Description';
+  this.mockBody = 'Rest of the form';
+
+  // Wrap the rendering in a function to avoid repeat code
+  async function renderComponent(noDescription) {
+    if (noDescription === true) {
+      return render(hbs`
+        <Rose::Form::Fieldset>
+          <:title>{{this.mockTitle}}</:title>
+          <:body>{{this.mockBody}}</:body>
+        </Rose::Form::Fieldset>
+    `);
+    }
+
+    return render(hbs`
+      <Rose::Form::Fieldset>
+        <:title>{{this.mockTitle}}</:title>
+        <:description>{{this.mockDescription}}</:description>
+        <:body>{{this.mockBody}}</:body>
+      </Rose::Form::Fieldset>
+    `);
+  }
+
+  test('it renders the full component', async function (assert) {
+    assert.expect(4);
+    await renderComponent(false);
+    assert.ok(find('.rose-form-fieldset'));
+    assert.equal(
+      find('.rose-form-fieldset-title').textContent.trim(),
+      this.mockTitle
+    );
+    assert.equal(
+      find('.rose-form-fieldset-description').textContent.trim(),
+      this.mockDescription
+    );
+    assert.equal(
+      find('.rose-form-fieldset-body').textContent.trim(),
+      this.mockBody
+    );
+  });
+
+  test('it renders with no description', async function (assert) {
+    assert.expect(4);
+    await renderComponent(true);
+    assert.ok(find('.rose-form-fieldset'));
+    assert.equal(
+      find('.rose-form-fieldset-title').textContent.trim(),
+      this.mockTitle
+    );
+    assert.notOk(find('.rose-form-fieldset-description'));
+    assert.equal(
+      find('.rose-form-fieldset-body').textContent.trim(),
+      this.mockBody
+    );
+  });
+
+  test('it supports aria description for fieldset with description provided', async function (assert) {
+    assert.expect(1);
+    await renderComponent(false);
+    const descriptionElement = find('.rose-form-fieldset-description');
+    const fieldsetElement = find('.rose-form-fieldset');
+
+    assert.equal(
+      fieldsetElement.getAttribute('aria-describedby'),
+      descriptionElement.id,
+      'Fieldset is described by description'
+    );
+  });
+
+  test('it does not support aria description for fieldset with no description provided', async function (assert) {
+    assert.expect(3);
+    await renderComponent(true);
+    const fieldsetElement = find('.rose-form-fieldset');
+
+    assert.ok(find('.rose-form-fieldset'));
+    assert.notOk(find('.rose-form-fieldset-description'));
+    assert.notOk(fieldsetElement.getAttribute('aria-describedby'));
+  });
+});