From e70be2756cf9fc48625ac5ba98df5833fb1f2281 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=A9becca?= <rebecca.kaci@gmail.com>
Date: Thu, 13 Jun 2024 16:03:12 +0200
Subject: [PATCH] feat(label-wrapped): use font awesone icon instead of svg

---
 addon/components/pix-checkbox.js       |  8 ++------
 addon/components/pix-label-wrapped.hbs |  7 +++++++
 addon/components/pix-label-wrapped.js  |  8 ++++++++
 addon/styles/_pix-checkbox.scss        | 21 +++------------------
 config/icons.js                        |  1 +
 5 files changed, 21 insertions(+), 24 deletions(-)

diff --git a/addon/components/pix-checkbox.js b/addon/components/pix-checkbox.js
index 523a56bea..5af9ce497 100644
--- a/addon/components/pix-checkbox.js
+++ b/addon/components/pix-checkbox.js
@@ -32,12 +32,8 @@ export default class PixCheckbox extends Component {
       classes.push(`${classes[0]}--indeterminate`);
     }
 
-    if (this.hasSuccessState) {
-      classes.push(`${classes[0]}--state-success`);
-    }
-
-    if (this.hasErrorState) {
-      classes.push(`${classes[0]}--state-error`);
+    if (this.hasSuccessState || this.hasErrorState) {
+      classes.push(`${classes[0]}--state`);
     }
 
     return classes.join(' ');
diff --git a/addon/components/pix-label-wrapped.hbs b/addon/components/pix-label-wrapped.hbs
index 9c7f7c87f..551406be8 100644
--- a/addon/components/pix-label-wrapped.hbs
+++ b/addon/components/pix-label-wrapped.hbs
@@ -1,4 +1,11 @@
 <label for={{@for}} class={{this.className}} ...attributes>
+  {{#if this.hasError}}
+    <FaIcon @icon="circle-xmark" />
+  {{/if}}
+  {{#if this.hasSuccess}}
+    <FaIcon @icon="circle-check" />
+  {{/if}}
+
   {{yield to="inputElement"}}
 
   <span class="{{if @screenReaderOnly 'screen-reader-only'}}">
diff --git a/addon/components/pix-label-wrapped.js b/addon/components/pix-label-wrapped.js
index 959138d31..f3717859d 100644
--- a/addon/components/pix-label-wrapped.js
+++ b/addon/components/pix-label-wrapped.js
@@ -16,4 +16,12 @@ export default class PixLabelWrapped extends Component {
 
     return classes.join(' ');
   }
+
+  get hasError() {
+    return this.args.state === 'error';
+  }
+
+  get hasSuccess() {
+    return this.args.state === 'success';
+  }
 }
diff --git a/addon/styles/_pix-checkbox.scss b/addon/styles/_pix-checkbox.scss
index 5d6c294ce..c3b0b3e5d 100644
--- a/addon/styles/_pix-checkbox.scss
+++ b/addon/styles/_pix-checkbox.scss
@@ -115,24 +115,9 @@
         display: none;
       }
 
-      &.pix-checkbox__input--state-success {
-        background: var(--pix-success-700);
-        border-color: var(--pix-success-700);
-        border-radius: 50%;
-
-        &::after {
-          background-image: url("data:image/svg+xml,%3Csvg width='8' height='8' viewBox='0 0 13 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.5 3L0 4.5L5 9.5L13 1.5L11.5 0L5 6.5L1.5 3Z' fill='white'/%3E%3C/svg%3E%0A");
-        }
-      }
-
-      &.pix-checkbox__input--state-error {
-        background: var(--pix-error-700);
-        border-color: var(--pix-error-700);
-        border-radius: 50%;
-
-        &::after {
-          background-image: url("data:image/svg+xml,%3Csvg width='8' height='8' viewBox='0 0 384 512' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z' fill='white'/%3E%3C/svg%3E%0A");
-        }
+      &.pix-checkbox__input--state {
+        position: absolute;
+        visibility: hidden;
       }
     }
   }
diff --git a/config/icons.js b/config/icons.js
index fdfe067e5..ffb1f7057 100644
--- a/config/icons.js
+++ b/config/icons.js
@@ -10,6 +10,7 @@ module.exports = () => ({
     'circle-exclamation',
     'circle-info',
     'circle-question',
+    'circle-xmark',
     'earth-europe',
     'eye',
     'eye-slash',