tech(pix-message): update icon

1024pix · Sep 24, 2024 · 1453ff1 · 1453ff1
1 parent 4f3c518
commit 1453ff1
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 31 deletions.
diff --git a/addon/components/pix-message.hbs b/addon/components/pix-message.hbs
@@ -1,6 +1,6 @@
 <p class="pix-message {{concat 'pix-message--' this.type}}" ...attributes>
   {{#if @withIcon}}
-    <FaIcon @icon={{this.iconClass}} />
+    <PixIcon @name={{this.iconName}} />
   {{/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/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'));
   });
 });