feat: 🎸 Add Form fieldset component

Add a simple form fieldset component, basic storybook page and tests.

✅ Closes: ICU-1428

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

@@ -0,0 +1,20 @@
+<fieldset ...attributes class='rose-form-fieldset'>
+    <legend 
+        id={{concat 'title-' this.id}}
+        aria-describedby={{concat 'description-' this.id}}
+        class='rose-form-fieldset-title'
+    >
+        {{yield to='title'}}
+    </legend>
+    <div
+        id={{concat 'description-' this.id}}
+        aria-labelledby={{concat 'title-' this.id}}
+        class='rose-form-fieldset-description'
+    >
+        {{yield to='description'}}
+    </div>
+
+    <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,59 @@
+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';
+
+  hooks.beforeEach(async function () {
+    // Render the component before each test
+    await render(hbs`
+      <Rose::Form::Fieldset>
+        <:title>{{this.mockTitle}}</:title>
+        <:description>{{this.mockDescription}}</:description>
+        <:body>{{this.mockBody}}</:body>
+      </Rose::Form::Fieldset>
+    `);
+  });
+
+  test('it renders', async function (assert) {
+    assert.expect(4);
+    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 supports aria description for title', async function (assert) {
+    assert.expect(2);
+    const titleElement = find('.rose-form-fieldset-title');
+    const descriptionElement = find('.rose-form-fieldset-description');
+
+    assert.equal(
+      titleElement.getAttribute('aria-describedBy'),
+      descriptionElement.id,
+      'Title is described by description'
+    );
+
+    assert.equal(
+      descriptionElement.getAttribute('aria-labelledBy'),
+      titleElement.id,
+      'Description is labelled by title'
+    );
+  });
+});