tech(pix-message): update icon

1024pix · Oct 11, 2024 · d6399f3 · d6399f3
1 parent 05ff309
commit d6399f3
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 37 deletions.
diff --git a/addon/components/pix-message.hbs b/addon/components/pix-message.hbs
@@ -1,6 +1,11 @@
 <p class="pix-message {{concat 'pix-message--' this.type}}" ...attributes>
   {{#if @withIcon}}
-    <FaIcon @icon={{this.iconClass}} />
+    <PixIcon
+      @name={{this.iconName}}
+      aria-hidden="true"
+      @plainIcon={{true}}
+      class="pix-message__icon"
+    />
   {{/if}}
   <span class="pix-message__content">
     {{yield}}

diff --git a/addon/components/pix-message.js b/addon/components/pix-message.js
@@ -9,21 +9,16 @@ 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.',
-      );
-    }
+
     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
@@ -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
@@ -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
@@ -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`<PixMessage @withIcon='true' />`);
+    const screen = await render(hbs`<PixMessage @withIcon='true' />`);
 
     // 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`<PixMessage @type='warning' @withIcon='true' />`);
+    const screen = await render(hbs`<PixMessage @type='warning' @withIcon='true' />`);
 
     // 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`<PixMessage @type='success' @withIcon='true' />`);
+    const screen = await render(hbs`<PixMessage @type='success' @withIcon='true' />`);
 
     // 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`<PixMessage @type='error' @withIcon='true' />`);
+    const screen = await render(hbs`<PixMessage @type='error' @withIcon='true' />`);
 
     // 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'));
   });
 });