Massive changes to ilw-icon

README.md

@@ -6,23 +6,33 @@ Links: **[ilw-icon in Builder](https://builder3.toolkit.illinois.edu/component/i
 
 ## Overview
 
-A 1-3 paragraph explanation of what the component does and how it presents.
+This is a wrapper class to pull the icons from https://cdn.brand.illinois.edu/icons.html. It requires the icon name, and will default to blue solid. 
+
+Attributes include:
+* `icon`: the icon name. If there is no `icon`, it will display nothing. If there is an icon name that does not have a corresponding icon in the design list, it will throw a 404 error. 
+* `type`: the icon type: consists of *solid*, *line*, and *duo*. Defaults to solid. 
+* `theme`: the color: consists of *blue*, *orange*, and *white*. Defaults to blue. 
+* `alt`: the alternate text used for the image. Defaults to the icon name plus the word 'icon', used for accessible technology. 
+* `size`: the width of the icon, defaults to 48px. 
+* `focus`: a Boolean value that changes the color to a focused color. 
+
+There should be no child tags or text. 
 
 ## Code Examples
 
 ```html
-<ilw-icon></ilw-icon>
+<ilw-icon icon="twitter" aria-hidden="true"></ilw-icon>
+
+<ilw-icon icon="admissions" type="line" theme="orange" alt="Access admissions records"></ilw-icon>
 ```
 
 ## Accessibility Notes and Use
 
-Consider accessibility, both for building the component and for its use:
+If you are using an icon with text, then you can use the `aria-hidden` attribute on the `ilw-icon`, and it will propogate that value to the icon below and remove the label. If you are not using an icon with text, then the icon is conveying information and should not be hidden. 
 
-- Is there sufficient color contrast?
-- Can the component be fully understood without colors?
-- Does the component need alt text or ARIA roles?
-- Can the component be navigated with a keyboard? Is the tab order correct?
-- Are focusable elements interactive, and interactive elements focusable?
-- Are form fields, figures, fieldsets and other interactive elements labelled?
+If you are using an icon that requires a focus state, you can set the `focus` boolean attribute via javascript to change the color. It will change the color to white, unless the color is already white, in which case it will change to blue. This should be done by the item triggering the CSS change via javascript. 
 
 ## External References
+
+* https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA24
+* https://lit.dev/docs/api/templates/#nothing

builder/ilw-icon.json

@@ -4,7 +4,7 @@
     "github": "https://github.com/web-illinois/ilw-icon/",
     "type": "web component",
     "element-name": "ilw-icon",
-    "description": "Description for builder.",
+    "description": "Wrapper to pull the icons from https://cdn.brand.illinois.edu/icons.html and manage state",
     "toolkit-version": "",
     "production-version": "",
     "development-version": "1.0.0-alpha"

builder/versions/ilw-icon.1.0.0-alpha.json

@@ -6,21 +6,33 @@
     "element-name": "ilw-icon",
     "description": "Description for builder.",
     "version": "1.0.0-alpha",
-    "date": "09/04/2024",
+    "date": "09/03/2024",
     "css": "https://dev.toolkit.illinois.edu/ilw-icon/1.0.0-alpha/ilw-icon.css",
     "js": "https://dev.toolkit.illinois.edu/ilw-icon/1.0.0-alpha/ilw-icon.js",
     "production": false,
     "notes": "",
     "parent-style": "",
-    "samples": [
+    "attributes-fixed": [],
+    "attributes-text": [
+        {
+            "name": "icon",
+            "description": "Icon name: use the name from https://cdn.brand.illinois.edu/icons.html",
+            "depreciated": false,
+            "value": "admissions"
+        },
+        {
+            "name": "alt",
+            "description": "Alternative text, defaults to the icon name plus 'icon'",
+            "depreciated": false,
+            "value": ""
+        },
         {
-            "name": "default",
-            "description": "Default information",
-            "text": "<p>Lorem ipsum</p>"
+            "name": "size",
+            "description": "Width in CSS value and unit, defaults to 48px",
+            "depreciated": false,
+            "value": ""
         }
     ],
-    "attributes-fixed": [],
-    "attributes-text": [],
     "attributes": [
         {
             "name": "theme",
@@ -32,6 +44,26 @@
                 "orange",
                 "white"
             ]
+        },
+        {
+            "name": "type",
+            "description": "Type of icon",
+            "depreciated": false,
+            "values": [
+                "",
+                "solid",
+                "line",
+                "duo"
+            ]
+        },
+        {
+            "name": "focus",
+            "description": "Whether or not a focus state is involved",
+            "depreciated": false,
+            "values": [
+                "",
+                "true"
+            ]
         }
     ],
     "classes-fixed": [],