diff --git a/addon/components/pix-message.hbs b/addon/components/pix-message.hbs index 67002b522..6a85a8159 100644 --- a/addon/components/pix-message.hbs +++ b/addon/components/pix-message.hbs @@ -1,6 +1,11 @@

{{#if @withIcon}} - + {{/if}} {{yield}} diff --git a/addon/components/pix-message.js b/addon/components/pix-message.js index 6b1225bcb..04b83ea44 100644 --- a/addon/components/pix-message.js +++ b/addon/components/pix-message.js @@ -3,27 +3,21 @@ import Component from '@glimmer/component'; const TYPE_INFO = 'info'; const TYPE_SUCCESS = 'success'; const TYPE_WARNING = 'warning'; -const TYPE_ALERT = 'alert'; const TYPE_ERROR = 'error'; export default class PixMessage extends Component { get type() { - const correctTypes = [TYPE_INFO, TYPE_SUCCESS, TYPE_WARNING, TYPE_ALERT, TYPE_ERROR]; - if (this.args.type === 'alert') { - console.warn( - 'ERROR in PixMessage component, "alert" type is deprecated. Use "error" type instead.', - ); - } + const correctTypes = [TYPE_INFO, TYPE_SUCCESS, TYPE_WARNING, TYPE_ERROR]; + return correctTypes.includes(this.args.type) ? this.args.type : 'info'; } - get iconClass() { + get iconName() { const classes = { - [TYPE_INFO]: 'circle-info', - [TYPE_SUCCESS]: 'circle-check', - [TYPE_WARNING]: 'circle-exclamation', - [TYPE_ALERT]: 'triangle-exclamation', - [TYPE_ERROR]: 'triangle-exclamation', + [TYPE_INFO]: 'info', + [TYPE_SUCCESS]: 'checkCircle', + [TYPE_WARNING]: 'warning', + [TYPE_ERROR]: 'error', }; return classes[this.type]; } diff --git a/addon/styles/_pix-message.scss b/addon/styles/_pix-message.scss index 9edd11488..03f666574 100644 --- a/addon/styles/_pix-message.scss +++ b/addon/styles/_pix-message.scss @@ -13,25 +13,30 @@ &.pix-message--info { color: var(--pix-info-700); background-color: var(--pix-info-50); + fill: var(--pix-info-700); } &.pix-message--alert { color: var(--pix-error-700); background-color: var(--pix-error-50); + fill: var(--pix-info-700); } &.pix-message--error { color: var(--pix-error-700); background-color: var(--pix-error-50); + fill: var(--pix-error-700); } &.pix-message--success { color: var(--pix-success-700); background-color: var(--pix-success-50); + fill: var(--pix-success-700); } &.pix-message--warning { color: var(--pix-warning-700); background-color: var(--pix-warning-50); + fill: var(--pix-warning-700); } } diff --git a/app/stories/pix-message.stories.js b/app/stories/pix-message.stories.js index 71fabdcac..57e1c7d42 100644 --- a/app/stories/pix-message.stories.js +++ b/app/stories/pix-message.stories.js @@ -19,7 +19,7 @@ export default { type: { name: 'string', required: false }, table: { defaultValue: { summary: 'info' } }, control: { type: 'select' }, - options: ['info', 'success', 'warning', 'alert', 'error'], + options: ['info', 'success', 'warning', 'error'], }, withIcon: { name: 'withIcon', diff --git a/tests/integration/components/pix-message-test.js b/tests/integration/components/pix-message-test.js index fbd647535..da63341a8 100644 --- a/tests/integration/components/pix-message-test.js +++ b/tests/integration/components/pix-message-test.js @@ -38,49 +38,41 @@ module('Integration | Component | pix-message', function (hooks) { test('it renders with an icon', async function (assert) { // given & when - await render(hbs``); + const screen = await render(hbs``); // then - const icon = this.element.querySelector('.pix-message svg'); - assert.dom('.pix-message svg').exists(); - // TODO: Fix this the next time the file is edited. - // eslint-disable-next-line qunit/no-assert-equal - assert.equal(icon.getAttribute('data-icon'), 'circle-info'); + const icon = screen.getByRole('img', { hidden: true }); + + assert.true(icon.innerHTML.includes('info')); }); test('it renders with a warning icon for warning type', async function (assert) { // given & when - await render(hbs``); + const screen = await render(hbs``); // then - const icon = this.element.querySelector('.pix-message svg'); - assert.dom('.pix-message svg').exists(); - // TODO: Fix this the next time the file is edited. - // eslint-disable-next-line qunit/no-assert-equal - assert.equal(icon.getAttribute('data-icon'), 'circle-exclamation'); + const icon = screen.getByRole('img', { hidden: true }); + + assert.true(icon.innerHTML.includes('#warning')); }); test('it renders with a success icon for success type', async function (assert) { // given & when - await render(hbs``); + const screen = await render(hbs``); // then - const icon = this.element.querySelector('.pix-message svg'); - assert.dom('.pix-message svg').exists(); - // TODO: Fix this the next time the file is edited. - // eslint-disable-next-line qunit/no-assert-equal - assert.equal(icon.getAttribute('data-icon'), 'circle-check'); + const icon = screen.getByRole('img', { hidden: true }); + + assert.true(icon.innerHTML.includes('#check_circle')); }); test('it renders with a alert icon for error type', async function (assert) { // given & when - await render(hbs``); + const screen = await render(hbs``); // then - const icon = this.element.querySelector('.pix-message svg'); - assert.dom('.pix-message svg').exists(); - // TODO: Fix this the next time the file is edited. - // eslint-disable-next-line qunit/no-assert-equal - assert.equal(icon.getAttribute('data-icon'), 'triangle-exclamation'); + const icon = screen.getByRole('img', { hidden: true }); + + assert.true(icon.innerHTML.includes('#error')); }); });