diff --git a/addon/components/o-s-s/password-input.hbs b/addon/components/o-s-s/password-input.hbs index 514c211ae..7499334d3 100644 --- a/addon/components/o-s-s/password-input.hbs +++ b/addon/components/o-s-s/password-input.hbs @@ -1,5 +1,5 @@
- + <:input> {{else}} - + {{/if}} {{#if @validates}} -
+
{{#each this.inputValidators as |inputValidator|}} {{#let (this.validatorAttributes type=inputValidator) as |validator|}} -
+
{{#each this.validationIcons as |validationIcon|}} - + {{/each}}
{{t validator.labelKey}} diff --git a/addon/components/o-s-s/password-input.stories.js b/addon/components/o-s-s/password-input.stories.js index 89ff35330..2dc286f33 100644 --- a/addon/components/o-s-s/password-input.stories.js +++ b/addon/components/o-s-s/password-input.stories.js @@ -35,6 +35,16 @@ export default { }, control: { type: 'text' } }, + feedbackMessage: { + description: 'A success, warning or error message that will be displayed below the input-group.', + table: { + type: { + summary: '{ type: string, value: string }' + }, + defaultValue: { summary: 'undefined' } + }, + control: { type: 'object' } + }, disabled: { description: 'Whether or not the input is disabled', table: { diff --git a/addon/components/o-s-s/password-input.ts b/addon/components/o-s-s/password-input.ts index 340a88015..bb8569692 100644 --- a/addon/components/o-s-s/password-input.ts +++ b/addon/components/o-s-s/password-input.ts @@ -5,6 +5,7 @@ import Component from '@glimmer/component'; import { assert } from '@ember/debug'; import { isEmpty } from '@ember/utils'; import { helper } from '@ember/component/helper'; +import type { FeedbackMessage } from './input-container'; export type ValidatorSet = Record; export const INPUT_VALIDATORS: ValidatorSet = { @@ -17,6 +18,7 @@ interface OSSPasswordInputArgs { value: string | null; placeholder?: string; errorMessage?: string; + feedbackMessage?: FeedbackMessage; disabled?: boolean; validates?(isPassing: boolean): void; validatorSet?: ValidatorSet; diff --git a/tests/integration/components/o-s-s/password-input-test.ts b/tests/integration/components/o-s-s/password-input-test.ts index 1f85feb3c..bc207dc94 100644 --- a/tests/integration/components/o-s-s/password-input-test.ts +++ b/tests/integration/components/o-s-s/password-input-test.ts @@ -168,6 +168,31 @@ module('Integration | Component | o-s-s/password-input', function (hooks) { }); }); + module('feedbackMessage', () => { + test('Passing an error @feedbackMessage displays the message and sets the border to red', async function (assert) { + await render( + hbs`` + ); + assert.dom('.oss-input-container').hasClass('oss-input-container--error'); + assert.dom('.font-color-error-500').hasText('This is an error message'); + }); + + test('Passing a @feedbackMessage without a value only applies the container state class', async function (assert) { + await render(hbs``); + assert.dom('.oss-input-container').hasClass('oss-input-container--success'); + assert.dom('.font-color-success-500').doesNotExist(); + }); + + test('@errorMessage takes precedence over @feedbackMessage', async function (assert) { + await render( + hbs`` + ); + assert.dom('.oss-input-container').hasClass('oss-input-container--errored'); + assert.dom('.text-color-error').hasText('Error takes priority'); + assert.dom('.font-color-success-500').doesNotExist(); + }); + }); + test('it throws an error when the @value parameter is missing', async function (assert) { setupOnerror((err: any) => { assert.equal(err.message, 'Assertion Failed: [component][OSS::PasswordInput] The @value parameter is mandatory');