Merge pull request #823 from HelixDesignSystem/surf-2161-icons-new-specs

feat(icons): implement and update icon specs

Author: 100stacks

docs/_data/icons.json5

@@ -1,7 +1,12 @@
 [
     {
         name: 'account',
-        minver: '0.1.10',
+        minver: '2.0.0',
+        keywords: [
+          'customer',
+          'asset',
+          'platform',
+        ]
     },
     {
         name: 'angle-bottom',
@@ -37,18 +42,20 @@
     },
     {
         name: 'bell',
-        minver: '0.1.10',
+        minver: '2.0.0',
         keywords: [
             'alert',
             'notification',
+            'platform',
         ],
     },
     {
         name: 'billing',
-        minver: '0.1.10',
+        minver: '2.0.0',
         keywords: [
             'invoice',
             'money',
+            'platform',
         ],
     },
     {
@@ -94,6 +101,14 @@
             'duplicate',
         ],
     },
+    {
+        name: 'critical',
+        minver: '2.0.0',
+        keywords: [
+            'urgent',
+            'status',
+        ],
+    },
     {
         name: 'download',
         minver: '0.1.4',
@@ -146,6 +161,11 @@
     {
       name: 'fish-hook',
       minver: '1.0.0',
+      keywords: [
+        'phishing',
+        'security',
+        'email',
+      ]
     },
     {
       name: 'flag',
@@ -183,6 +203,16 @@
     {
         name: 'info-circle',
         minver: '0.1.0',
+        deprecated: true,
+        replacement: 'information',
+    },
+    {
+        name: 'information',
+        minver: '2.0.0',
+        keywords: [
+          'information',
+          'status',
+        ]
     },
     {
         name: 'input-file',
@@ -451,6 +481,15 @@
             'graph',
         ],
     },
+    {
+        name: 'ok',
+        minver: '2.0.0',
+        keywords: [
+            'ok',
+            'success',
+            'status',
+        ],
+    },
     {
         name: 'paperclip',
         minver: '0.7.0',
@@ -473,6 +512,13 @@
             'edit',
         ],
     },
+    {
+        name: 'pending',
+        minver: '2.0.0',
+        keywords: [
+            'status',
+        ],
+    },
     {
         name: 'phone',
         minver: '0.1.0',
@@ -547,11 +593,12 @@
     },
     {
         name: 'support',
-        minver: '0.1.0',
+        minver: '2.0.0',
         keywords: [
             'assistance',
             'customer service',
             'help',
+            'platform',
         ],
     },
     {
@@ -572,7 +619,13 @@
     },
     {
         name: 'ticketing',
-        minver: '0.1.10',
+        minver: '2.0.0',
+        keywords: [
+          'support',
+          'customer',
+          'device',
+          'platform',
+        ]
     },
     {
         name: 'times',
@@ -600,6 +653,15 @@
             'remove',
         ],
     },
+    {
+        name: 'unavailable',
+        minver: '2.0.0',
+        keywords: [
+            'offline',
+            'inaccessible',
+            'status',
+        ],
+    },
     {
         name: 'undo',
         minver: '0.12.0',
@@ -612,10 +674,19 @@
     },
     {
         name: 'user',
-        minver: '0.1.10',
+        minver: '2.0.0',
         keywords: [
             'customer',
             'person',
+            'platform',
+        ],
+    },
+    {
+        name: 'warning',
+        minver: '2.0.0',
+        keywords: [
+            'error',
+            'status',
         ],
     },
 ]

docs/components/icon/index.html

@@ -33,6 +33,58 @@ <h2 id="basic-icon">Basic Icon</h2>
     </div>
   </section>
 
+  <section>
+    <header>
+      <h2 id="add-color-icon">Add Color to Icons</h2>
+      <p>
+        Add color to a <code>&lt;hx-icon&gt;</code> element using inline styles.
+      </p>
+    </header>
+
+    <div class="example">
+      <div>
+        <hx-icon type="warning" style="color: #ffc749" class="size-2x"></hx-icon>
+      </div>
+
+      <footer>
+        {% code 'html' %}
+          <hx-icon type="warning" style="color: #ffc749"></hx-icon>
+        {% endcode %}
+      </footer>
+    </div>
+  </section>
+
+  <section>
+    <header>
+      <h2 id="status-icons">Status Icons</h2>
+      <p>
+        Recommended colors for status icons.
+      </p>
+    </header>
+
+    <div class="example">
+      <div>
+        <hx-icon type="info-circle" style="color: #296CDC" class="size-2x"></hx-icon>
+        <hx-icon type="ok" style="color: #008B38" class="size-2x"></hx-icon>
+        <hx-icon type="warning" style="color: #ffc749" class="size-2x"></hx-icon>
+        <hx-icon type="critical" style="color: #D6251F" class="size-2x"></hx-icon>
+        <hx-icon type="pending" style="color: #9E9E9E" class="size-2x"></hx-icon>
+        <hx-icon type="unavailable" style="color: #9E9E9E" class="size-2x"></hx-icon>
+      </div>
+
+      <footer>
+        {% code 'html' %}
+          <hx-icon type="info-circle" style="color: #296CDC"></hx-icon>
+          <hx-icon type="ok" style="color: #008B38"></hx-icon>
+          <hx-icon type="warning" style="color: #ffc749"></hx-icon>
+          <hx-icon type="critical" style="color: #D6251F"></hx-icon>
+          <hx-icon type="pending" style="color: #9E9E9E"></hx-icon>
+          <hx-icon type="unavailable" style="color: #9E9E9E"></hx-icon>
+        {% endcode %}
+      </footer>
+    </div>
+  </section>
+
   <section>
     <header>
       <h2 id="file-icons">File Icon</h2>