From 30090d82e31e3f05e879f7b4e565b977b683a745 Mon Sep 17 00:00:00 2001 From: Carlos Alcaide Date: Wed, 5 May 2021 12:33:56 -0700 Subject: [PATCH 1/3] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20Add=20Form=20fieldse?= =?UTF-8?q?t=20component?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Add a simple form fieldset component, basic storybook page and tests. ✅ Closes: ICU-1428 --- .../components/rose/form/fieldset/index.hbs | 20 +++++++ .../components/rose/form/fieldset/index.js | 11 ++++ .../rose/form/fieldset/index.stories.mdx | 29 +++++++++ .../rose/components/form/_fieldset.scss | 14 +++++ .../styles/rose/components/form/_index.scss | 1 + .../rose/app/components/rose/form/fieldset.js | 1 + .../components/rose/form/fieldset-test.js | 59 +++++++++++++++++++ 7 files changed, 135 insertions(+) create mode 100644 addons/rose/addon/components/rose/form/fieldset/index.hbs create mode 100644 addons/rose/addon/components/rose/form/fieldset/index.js create mode 100644 addons/rose/addon/components/rose/form/fieldset/index.stories.mdx create mode 100644 addons/rose/addon/styles/rose/components/form/_fieldset.scss create mode 100644 addons/rose/app/components/rose/form/fieldset.js create mode 100644 addons/rose/tests/integration/components/rose/form/fieldset-test.js diff --git a/addons/rose/addon/components/rose/form/fieldset/index.hbs b/addons/rose/addon/components/rose/form/fieldset/index.hbs new file mode 100644 index 000000000..685644822 --- /dev/null +++ b/addons/rose/addon/components/rose/form/fieldset/index.hbs @@ -0,0 +1,20 @@ +
+ + {{yield to='title'}} + +
+ {{yield to='description'}} +
+ +
+ {{yield to='body'}} +
+
\ No newline at end of file diff --git a/addons/rose/addon/components/rose/form/fieldset/index.js b/addons/rose/addon/components/rose/form/fieldset/index.js new file mode 100644 index 000000000..4e2a7790e --- /dev/null +++ b/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(); +} diff --git a/addons/rose/addon/components/rose/form/fieldset/index.stories.mdx b/addons/rose/addon/components/rose/form/fieldset/index.stories.mdx new file mode 100644 index 000000000..9dd61a4c6 --- /dev/null +++ b/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'; + + + +# Form Fieldset + +Renders a simple fieldset with title, description and body. + +```html + + <:title>Title + <:description>Description + <:body>Rest of the form + +``` + + + {{ + template: hbs` + + <:title>Title + <:description>Description + <:body>Rest of the form + ` + }} + \ No newline at end of file diff --git a/addons/rose/addon/styles/rose/components/form/_fieldset.scss b/addons/rose/addon/styles/rose/components/form/_fieldset.scss new file mode 100644 index 000000000..8696ad562 --- /dev/null +++ b/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); + } +} diff --git a/addons/rose/addon/styles/rose/components/form/_index.scss b/addons/rose/addon/styles/rose/components/form/_index.scss index 815a1aaf5..73137ac8d 100644 --- a/addons/rose/addon/styles/rose/components/form/_index.scss +++ b/addons/rose/addon/styles/rose/components/form/_index.scss @@ -5,3 +5,4 @@ @import 'checkbox'; @import 'select'; @import 'radio'; +@import 'fieldset'; diff --git a/addons/rose/app/components/rose/form/fieldset.js b/addons/rose/app/components/rose/form/fieldset.js new file mode 100644 index 000000000..9619ad95c --- /dev/null +++ b/addons/rose/app/components/rose/form/fieldset.js @@ -0,0 +1 @@ +export { default } from 'rose/components/rose/form/fieldset'; diff --git a/addons/rose/tests/integration/components/rose/form/fieldset-test.js b/addons/rose/tests/integration/components/rose/form/fieldset-test.js new file mode 100644 index 000000000..d2e2742c1 --- /dev/null +++ b/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` + + <:title>{{this.mockTitle}} + <:description>{{this.mockDescription}} + <:body>{{this.mockBody}} + + `); + }); + + 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' + ); + }); +}); From b1361bcb8329c3d56b28ea4d64cc62c9d430b493 Mon Sep 17 00:00:00 2001 From: Carlos Alcaide Date: Thu, 6 May 2021 09:00:37 -0700 Subject: [PATCH 2/3] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20Applying=20PR=20sugg?= =?UTF-8?q?ested=20changes?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Apply the changes suggested on the PR. Also modified tests to could test the rendering of the componet without description field. --- .../components/rose/form/fieldset/index.hbs | 21 ++++---- .../components/rose/form/fieldset-test.js | 50 +++++++++++++------ 2 files changed, 46 insertions(+), 25 deletions(-) diff --git a/addons/rose/addon/components/rose/form/fieldset/index.hbs b/addons/rose/addon/components/rose/form/fieldset/index.hbs index 685644822..d9bc73f2a 100644 --- a/addons/rose/addon/components/rose/form/fieldset/index.hbs +++ b/addons/rose/addon/components/rose/form/fieldset/index.hbs @@ -1,19 +1,20 @@ -
+
{{yield to='title'}} -
- {{yield to='description'}} -
- + + {{#if (has-block "description")}} +
+ {{yield to='description'}} +
+ {{/if}} +
{{yield to='body'}}
diff --git a/addons/rose/tests/integration/components/rose/form/fieldset-test.js b/addons/rose/tests/integration/components/rose/form/fieldset-test.js index d2e2742c1..b6081077c 100644 --- a/addons/rose/tests/integration/components/rose/form/fieldset-test.js +++ b/addons/rose/tests/integration/components/rose/form/fieldset-test.js @@ -11,19 +11,29 @@ module('Integration | Component | rose/form/fieldset', function (hooks) { this.mockDescription = 'Description'; this.mockBody = 'Rest of the form'; - hooks.beforeEach(async function () { - // Render the component before each test - await render(hbs` + // Wrap the rendering in a function to avoid repeat code + async function renderComponent(noDescription) { + if (noDescription === true) { + return render(hbs` + + <:title>{{this.mockTitle}} + <:body>{{this.mockBody}} + + `); + } + + return render(hbs` <:title>{{this.mockTitle}} <:description>{{this.mockDescription}} <:body>{{this.mockBody}} `); - }); + } - test('it renders', async function (assert) { + 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(), @@ -39,21 +49,31 @@ module('Integration | Component | rose/form/fieldset', function (hooks) { ); }); - 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'); - + test('it render with no description', async function (assert) { + assert.expect(4); + await renderComponent(true); + assert.ok(find('.rose-form-fieldset')); assert.equal( - titleElement.getAttribute('aria-describedBy'), - descriptionElement.id, - 'Title is described by description' + 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', async function (assert) { + assert.expect(1); + await renderComponent(false); + const titleElement = find('.rose-form-fieldset-title'); + const fieldsetElement = find('.rose-form-fieldset'); assert.equal( - descriptionElement.getAttribute('aria-labelledBy'), + fieldsetElement.getAttribute('aria-describedby'), titleElement.id, - 'Description is labelled by title' + 'Fieldset is described by legend' ); }); }); From e4fb2e7c4d5749c8bc1ea7b339127e7a36204381 Mon Sep 17 00:00:00 2001 From: Carlos Alcaide Date: Thu, 6 May 2021 15:33:59 -0700 Subject: [PATCH 3/3] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20Fix=20ARIA=20issues?= =?UTF-8?q?=20and=20add=20tests?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Fix an ARIA issue where fieldset aria-describedby was pointing the legend when it should point to description. Also no aria-describedby will show if description (optional) is not provided. --- .../components/rose/form/fieldset/index.hbs | 2 +- .../components/rose/form/fieldset-test.js | 20 ++++++++++++++----- 2 files changed, 16 insertions(+), 6 deletions(-) diff --git a/addons/rose/addon/components/rose/form/fieldset/index.hbs b/addons/rose/addon/components/rose/form/fieldset/index.hbs index d9bc73f2a..c610023dd 100644 --- a/addons/rose/addon/components/rose/form/fieldset/index.hbs +++ b/addons/rose/addon/components/rose/form/fieldset/index.hbs @@ -1,4 +1,4 @@ -
+