Use icon component for country support table (#1221)

* Use icon component for country support table * Remove unused variable
GSA-TTS · May 6, 2024 · d3e8a2a · d3e8a2a
1 parent 4363df5
commit d3e8a2a
Show file tree

Hide file tree

Showing 8 changed files with 12 additions and 38 deletions.
diff --git a/_includes/components/icon.html b/_includes/components/icon.html
@@ -1,12 +1,12 @@
 {% comment %}
 include
 - icon
-- size
+- icon_size
 {% endcomment %}
 
 {% assign class = 'usa-icon' %}
-{% if include.size > 1 %}
-  {% assign class = class | append: ' usa-icon--size-' | append: include.size %}
+{% if include.icon_size %}
+  {% assign class = class | append: ' usa-icon--size-' | append: include.icon_size %}
 {% endif %}
 {% if include.class %}
   {% assign class = class | append: ' ' | append: include.class %}

diff --git a/_includes/country_support_table.html b/_includes/country_support_table.html
@@ -18,8 +18,12 @@
   data-locale="{{ page.lang }}"
   hidden
 >
-  <span hidden data-item="icon-success" class="svg-wrapper svg-success">{% include svg/font-awesome-check-circle-solid.svg %}</span>
-  <span hidden data-item="icon-error" class="svg-wrapper svg-error">{% include svg/font-awesome-times-circle-solid.svg %}</span>
+  <span hidden data-item="icon-success" class="text-success">
+    {% include components/icon.html icon="check_circle" class="top-2px" %}
+  </span>
+  <span hidden data-item="icon-error" class="text-error">
+    {% include components/icon.html icon="cancel" class="top-2px" %}
+  </span>
   <table hidden class="usa-table--borderless usa-table--sticky-header">
     <thead>
       <tr>
@@ -34,11 +38,11 @@
         <td data-item="country"></td>
         <td data-item="dialing-code"></td>
         <td data-item="sms">
-          <span class="margin-right-05" data-item="icon" aria-hidden="true"></span>
+          <span class="margin-right-05" data-item="icon"></span>
           <span data-item="text"></span>
         </td>
         <td data-item="voice">
-          <span class="margin-right-05" data-item="icon" aria-hidden="true"></span>
+          <span class="margin-right-05" data-item="icon"></span>
           <span data-item="text"></span>
         </td>
       </tr>

diff --git a/_includes/language_picker.html b/_includes/language_picker.html
@@ -8,7 +8,7 @@
       <span id="language-picker-{{ include.id }}-description" class="language-picker__label-text">
         {{ site.data.[page.lang].settings.global.language }}
       </span>
-      {% include components/icon.html icon='expand_more' size=3 class='language-picker__expander' %}
+      {% include components/icon.html icon='expand_more' icon_size=3 class='language-picker__expander' %}
     </button>
   {% else %}
     <div class="language-picker__label language-picker__label--text">

diff --git a/_includes/svg/font-awesome-check-circle-solid.svg b/_includes/svg/font-awesome-check-circle-solid.svg
diff --git a/_includes/svg/font-awesome-times-circle-solid.svg b/_includes/svg/font-awesome-times-circle-solid.svg
diff --git a/_sass/_variables.scss b/_sass/_variables.scss
@@ -16,8 +16,6 @@ $border-color-secondary: $blue-mid !default;
 $border-style: 1px solid $border-color;
 $border-radius: 8px;
 
-$icon-width: 0.8rem;
-
 $space-tiny: 0.25rem !default;
 $space-1: 0.5rem !default;
 

diff --git a/_sass/components/_svg.scss b/_sass/components/_svg.scss
diff --git a/_sass/components/all.scss b/_sass/components/all.scss
@@ -21,5 +21,4 @@
 @forward 'site';
 @forward 'skip-nav';
 @forward 'sticky-table';
-@forward 'svg';
 @forward 'typography';