diff --git a/addons/rose/addon/components/rose/form/errors.js b/addons/rose/addon/components/rose/form/errors.js new file mode 100644 index 000000000..0d9254b87 --- /dev/null +++ b/addons/rose/addon/components/rose/form/errors.js @@ -0,0 +1,10 @@ +import Component from '@ember/component'; +import layout from '../../../templates/components/rose/form/errors'; + +/** + * A container for error messages. Yields the error message component. + */ +export default Component.extend({ + layout, + tagName: '' +}); diff --git a/addons/rose/addon/components/rose/form/errors.stories.mdx b/addons/rose/addon/components/rose/form/errors.stories.mdx new file mode 100644 index 000000000..27bcbb867 --- /dev/null +++ b/addons/rose/addon/components/rose/form/errors.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 } from '@storybook/addon-knobs'; + + + +# Form Errors + +Use this component to display one or more error messages. + +```html + + An error message goes here. + Another message goes here. + +``` + + + {{ + template: hbs` + + An error message goes here. + Another message goes here. + + `, + context: {}, + }} + diff --git a/addons/rose/addon/components/rose/form/errors/message.js b/addons/rose/addon/components/rose/form/errors/message.js new file mode 100644 index 000000000..23c6ebb5d --- /dev/null +++ b/addons/rose/addon/components/rose/form/errors/message.js @@ -0,0 +1,10 @@ +import Component from '@ember/component'; +import layout from '../../../../templates/components/rose/form/errors/message'; + +/** + * A simple, styled error message. Do not use directly. + */ +export default Component.extend({ + layout, + tagName: '' +}); diff --git a/addons/rose/addon/components/rose/form/errors/message.stories.mdx b/addons/rose/addon/components/rose/form/errors/message.stories.mdx new file mode 100644 index 000000000..161a5dd61 --- /dev/null +++ b/addons/rose/addon/components/rose/form/errors/message.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 } from '@storybook/addon-knobs'; + + + +# Form Error Message + +This component accepts block content describing a single error to the user. +Normally this component would not be used directly, but rather in the context +of the `Rose::Form::Errors` component. + +```html + + An error message goes here. + +``` + + + {{ + template: hbs` + + An error message goes here. + + `, + context: {}, + }} + diff --git a/addons/rose/addon/styles/rose/components/form/_index.scss b/addons/rose/addon/styles/rose/components/form/_index.scss index 29fa5e995..f85c70469 100644 --- a/addons/rose/addon/styles/rose/components/form/_index.scss +++ b/addons/rose/addon/styles/rose/components/form/_index.scss @@ -3,3 +3,4 @@ @import 'select'; @import 'radio'; @import 'actions'; +@import 'errors'; diff --git a/addons/rose/addon/styles/rose/components/form/errors/_index.scss b/addons/rose/addon/styles/rose/components/form/errors/_index.scss new file mode 100644 index 000000000..7953f5b65 --- /dev/null +++ b/addons/rose/addon/styles/rose/components/form/errors/_index.scss @@ -0,0 +1,7 @@ +@use '../../../variables/sizing'; + +@import "message"; + +.rose-form-errors { + margin-bottom: sizing.rems(l); +} diff --git a/addons/rose/addon/styles/rose/components/form/errors/_message.scss b/addons/rose/addon/styles/rose/components/form/errors/_message.scss new file mode 100644 index 000000000..09bf0b317 --- /dev/null +++ b/addons/rose/addon/styles/rose/components/form/errors/_message.scss @@ -0,0 +1,8 @@ +@use '../../../variables/sizing'; +@use '../../../utilities/type'; + +.rose-form-error-message { + @include type.type(xs); + color: var(--failure); + margin-bottom: sizing.rems(xs); +} diff --git a/addons/rose/addon/templates/components/rose/form/errors.hbs b/addons/rose/addon/templates/components/rose/form/errors.hbs new file mode 100644 index 000000000..dffe51b70 --- /dev/null +++ b/addons/rose/addon/templates/components/rose/form/errors.hbs @@ -0,0 +1,5 @@ +
+ {{yield (hash + message=(component 'rose/form/errors/message') + )}} +
diff --git a/addons/rose/addon/templates/components/rose/form/errors/message.hbs b/addons/rose/addon/templates/components/rose/form/errors/message.hbs new file mode 100644 index 000000000..fb4b2ebe0 --- /dev/null +++ b/addons/rose/addon/templates/components/rose/form/errors/message.hbs @@ -0,0 +1,4 @@ +

+ + {{yield}} +

diff --git a/addons/rose/app/components/rose/form/errors.js b/addons/rose/app/components/rose/form/errors.js new file mode 100644 index 000000000..519fba0ae --- /dev/null +++ b/addons/rose/app/components/rose/form/errors.js @@ -0,0 +1 @@ +export { default } from 'rose/components/rose/form/errors'; \ No newline at end of file diff --git a/addons/rose/app/components/rose/form/errors/message.js b/addons/rose/app/components/rose/form/errors/message.js new file mode 100644 index 000000000..6e518bea4 --- /dev/null +++ b/addons/rose/app/components/rose/form/errors/message.js @@ -0,0 +1 @@ +export { default } from 'rose/components/rose/form/errors/message'; \ No newline at end of file diff --git a/addons/rose/tests/integration/components/rose/form/errors-test.js b/addons/rose/tests/integration/components/rose/form/errors-test.js new file mode 100644 index 000000000..db9bbe8c3 --- /dev/null +++ b/addons/rose/tests/integration/components/rose/form/errors-test.js @@ -0,0 +1,21 @@ +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/errors', function(hooks) { + setupRenderingTest(hooks); + + test('it renders', async function(assert) { + assert.expect(3); + await render(hbs` + + An error occurred. + Another error occurred. + + `); + assert.ok(find('.rose-form-errors')); + assert.equal(find('.rose-form-error-message:first-child').textContent.trim(), 'An error occurred.'); + assert.equal(find('.rose-form-error-message:last-child').textContent.trim(), 'Another error occurred.'); + }); +}); diff --git a/addons/rose/tests/integration/components/rose/form/errors/message-test.js b/addons/rose/tests/integration/components/rose/form/errors/message-test.js new file mode 100644 index 000000000..a88fcd78d --- /dev/null +++ b/addons/rose/tests/integration/components/rose/form/errors/message-test.js @@ -0,0 +1,17 @@ +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 | rose/form/errors/message', function(hooks) { + setupRenderingTest(hooks); + + test('it renders', async function(assert) { + await render(hbs` + + An error occurred. + + `); + assert.equal(this.element.textContent.trim(), 'An error occurred.'); + }); +});