tech(pix-message): update icon

1024pix · Sep 27, 2024 · dc8ebd5 · dc8ebd5
1 parent 2de18ea
commit dc8ebd5
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 31 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
@@ -17,13 +17,13 @@ export default class PixMessage extends Component {
     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]: 'error',
+      [TYPE_ALERT]: 'warning',
+      [TYPE_ERROR]: 'warning',
     };
     return classes[this.type];
   }

diff --git a/addon/styles/_pix-message.scss b/addon/styles/_pix-message.scss
@@ -10,28 +10,38 @@
   border: 1px solid currentcolor;
   border-radius: var(--pix-spacing-1x);
 
+  &__icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+
   &.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/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');
+
+    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');
+
+    assert.true(icon.innerHTML.includes('#error'));
   });
 
   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');
+
+    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');
+
+    assert.true(icon.innerHTML.includes('#warning'));
   });
 });