feat(label-wrapped): use font awesone icon instead of svg

1024pix · Jun 13, 2024 · 4f583b1 · 4f583b1
1 parent 80a1cc1
commit 4f583b1
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 24 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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 {
+        visibility: hidden;
+        position: absolute;
       }
     }
   }

diff --git a/config/icons.js b/config/icons.js
@@ -9,6 +9,7 @@ module.exports = () => ({
     'circle-exclamation',
     'circle-info',
     'circle-question',
+    'circle-xmark',
     'earth-europe',
     'eye',
     'eye-slash',