chore: 🤖 add form error components for error message display

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: ''
+});

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';
+
+<Meta title="Rose|Form/Errors" component="Form/Errors" />
+
+# Form Errors
+
+Use this component to display one or more error messages.
+
+```html
+<Rose::Form::Errors as |errors|>
+  <errors.message>An error message goes here.</errors.message>
+  <errors.message>Another message goes here.</errors.message>
+</Rose::Form::Errors>
+```
+
+<Preview>
+  <Story name="Basic Form Errors">{{
+    template: hbs`
+      <Rose::Form::Errors as |errors|>
+        <errors.message>An error message goes here.</errors.message>
+        <errors.message>Another message goes here.</errors.message>
+      </Rose::Form::Errors>
+    `,
+    context: {},
+  }}</Story>
+</Preview>

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: ''
+});

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';
+
+<Meta title="Rose|Form/Errors/Message" component="Form/Errors/Message" />
+
+# 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
+<Rose::Form::Errors::Message>
+  An error message goes here.
+</Rose::Form::Errors::Message>
+```
+
+<Preview>
+  <Story name="Basic Form Error Message">{{
+    template: hbs`
+      <Rose::Form::Errors::Message>
+        An error message goes here.
+      </Rose::Form::Errors::Message>
+    `,
+    context: {},
+  }}</Story>
+</Preview>

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

@@ -3,3 +3,4 @@
 @import 'select';
 @import 'radio';
 @import 'actions';
+@import 'errors';

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);
+}

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);
+}

addons/rose/addon/templates/components/rose/form/errors.hbs

@@ -0,0 +1,5 @@
+<div class="rose-form-errors" ...attributes>
+  {{yield (hash
+    message=(component 'rose/form/errors/message')
+  )}}
+</div>

addons/rose/addon/templates/components/rose/form/errors/message.hbs

@@ -0,0 +1,4 @@
+<p class="rose-form-error-message" ...attributes>
+  <Rose::Icon @name="cancel-square-fill" @size="medium" />
+  {{yield}}
+</p>

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

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

addons/rose/app/components/rose/form/errors/message.js

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

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`
+      <Rose::Form::Errors as |errors|>
+        <errors.message>An error occurred.</errors.message>
+        <errors.message>Another error occurred.</errors.message>
+      <//Rose::Form::Errors>
+    `);
+    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.');
+  });
+});

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`
+      <Rose::Form::Errors::Message>
+        An error occurred.
+      </Rose::Form::Errors::Message>
+    `);
+    assert.equal(this.element.textContent.trim(), 'An error occurred.');
+  });
+});