feat(icons-workflow): vend fully registered icon components

adobe · Jan 6, 2021 · 941f3a4 · 941f3a4
1 parent fe69597
commit 941f3a4
Show file tree

Hide file tree

Showing 44 changed files with 876 additions and 331 deletions.
diff --git a/.storybook/tsconfig.json b/.storybook/tsconfig.json
@@ -7,6 +7,7 @@
     "include": ["../global.d.ts", "../packages/*/stories/**/*.ts"],
     "exclude": [
         "../packages/*/src/**/*.ts",
+        "../packages/*/icons/**/*.ts",
         "../packages/*/node_modules/**/*.ts"
     ]
 }
diff --git a/documentation/src/components/component.ts b/documentation/src/components/component.ts
@@ -14,6 +14,16 @@ import '@spectrum-web-components/bundle/elements.js';
 // work around while `top-nav` isn't "officially" in the bundle
 import '@spectrum-web-components/top-nav/sp-top-nav.js';
 import '@spectrum-web-components/top-nav/sp-top-nav-item.js';
+import '@spectrum-web-components/icons-workflow/icons/sp-icon-magnify.js';
+import '@spectrum-web-components/icons-workflow/icons/sp-icon-help.js';
+import '@spectrum-web-components/icons-workflow/icons/sp-icon-info.js';
+import '@spectrum-web-components/icons-workflow/icons/sp-icon-star.js';
+import '@spectrum-web-components/icons-workflow/icons/sp-icon-chevron-down.js';
+import '@spectrum-web-components/icons-workflow/icons/sp-icon-close.js';
+import '@spectrum-web-components/icons-workflow/icons/sp-icon-info.js';
+import '@spectrum-web-components/icons-workflow/icons/sp-icon-checkmark.js';
+import '@spectrum-web-components/icons-workflow/icons/sp-icon-checkmark-circle.js';
+import '@spectrum-web-components/icons-workflow/icons/sp-icon-alert.js';
 import { RouteComponent } from './route-component.js';
 import componentStyles from './markdown.css';
 import { AppRouter } from '../router.js';

diff --git a/lerna.json b/lerna.json
@@ -1,6 +1,11 @@
 {
     "packages": ["packages/*", "projects/*"],
-    "ignoreChanges": ["packages/*/test/**", "**/*.md"],
+    "ignoreChanges": [
+        "packages/*/test/**",
+        "packages/*/stories/**",
+        "**/*.md",
+        "**/tsconfig.json"
+    ],
     "version": "independent",
     "npmClient": "yarn",
     "useWorkspaces": true,

diff --git a/packages/action-button/README.md b/packages/action-button/README.md
@@ -45,11 +45,7 @@ import { ActionButton } from '@spectrum-web-components/action-button';
 
 ```html demo
 <sp-action-button>
-    <svg slot="icon" id="spectrum-icon-18-Edit" viewBox="0 0 36 36">
-        <path
-            d="M33.567 8.2L27.8 2.432a1.215 1.215 0 0 0-.866-.353H26.9a1.371 1.371 0 0 0-.927.406L5.084 23.372a.99.99 0 0 0-.251.422L2.055 33.1c-.114.377.459.851.783.851a.251.251 0 0 0 .062-.007c.276-.063 7.866-2.344 9.311-2.778a.972.972 0 0 0 .414-.249l20.888-20.889a1.372 1.372 0 0 0 .4-.883 1.221 1.221 0 0 0-.346-.945zM11.4 29.316c-2.161.649-4.862 1.465-6.729 2.022l2.009-6.73z"
-        ></path>
-    </svg>
+    <sp-icon-edit slot="icon"></sp-icon-edit>
     This is an action button
 </sp-action-button>
 ```
@@ -58,23 +54,15 @@ import { ActionButton } from '@spectrum-web-components/action-button';
 
 ```html demo
 <sp-action-button label="Edit">
-    <svg slot="icon" id="spectrum-icon-18-Edit" viewBox="0 0 36 36">
-        <path
-            d="M33.567 8.2L27.8 2.432a1.215 1.215 0 0 0-.866-.353H26.9a1.371 1.371 0 0 0-.927.406L5.084 23.372a.99.99 0 0 0-.251.422L2.055 33.1c-.114.377.459.851.783.851a.251.251 0 0 0 .062-.007c.276-.063 7.866-2.344 9.311-2.778a.972.972 0 0 0 .414-.249l20.888-20.889a1.372 1.372 0 0 0 .4-.883 1.221 1.221 0 0 0-.346-.945zM11.4 29.316c-2.161.649-4.862 1.465-6.729 2.022l2.009-6.73z"
-        ></path>
-    </svg>
+    <sp-icon-edit slot="icon"></sp-icon-edit>
 </sp-action-button>
 ```
 
 ### Emphasized action button
 
 ```html demo
 <sp-action-button label="Edit" emphasized selected>
-    <svg slot="icon" id="spectrum-icon-18-Edit" viewBox="0 0 36 36">
-        <path
-            d="M33.567 8.2L27.8 2.432a1.215 1.215 0 0 0-.866-.353H26.9a1.371 1.371 0 0 0-.927.406L5.084 23.372a.99.99 0 0 0-.251.422L2.055 33.1c-.114.377.459.851.783.851a.251.251 0 0 0 .062-.007c.276-.063 7.866-2.344 9.311-2.778a.972.972 0 0 0 .414-.249l20.888-20.889a1.372 1.372 0 0 0 .4-.883 1.221 1.221 0 0 0-.346-.945zM11.4 29.316c-2.161.649-4.862 1.465-6.729 2.022l2.009-6.73z"
-        ></path>
-    </svg>
+    <sp-icon-edit slot="icon"></sp-icon-edit>
 </sp-action-button>
 ```
 
@@ -85,33 +73,15 @@ The use of the `hold-affordance` attribute signifies that the `<sp-action-button
 ```html demo
 <sp-action-group>
     <sp-action-button label="Edit" hold-affordance>
-        <svg slot="icon" id="spectrum-icon-18-Edit" viewBox="0 0 36 36">
-            <path
-                d="M33.567 8.2L27.8 2.432a1.215 1.215 0 0 0-.866-.353H26.9a1.371 1.371 0 0 0-.927.406L5.084 23.372a.99.99 0 0 0-.251.422L2.055 33.1c-.114.377.459.851.783.851a.251.251 0 0 0 .062-.007c.276-.063 7.866-2.344 9.311-2.778a.972.972 0 0 0 .414-.249l20.888-20.889a1.372 1.372 0 0 0 .4-.883 1.221 1.221 0 0 0-.346-.945zM11.4 29.316c-2.161.649-4.862 1.465-6.729 2.022l2.009-6.73z"
-            ></path>
-        </svg>
+        <sp-icon-edit slot="icon"></sp-icon-edit>
     </sp-action-button>
 
     <sp-action-button hold-affordance quiet>
-        <svg
-            slot="icon"
-            xmlns="http://www.w3.org/2000/svg"
-            height="18"
-            viewBox="0 0 18 18"
-            width="18"
-        >
-            <path
-                d="M16.45,7.8965H14.8945a5.97644,5.97644,0,0,0-.921-2.2535L15.076,4.54a.55.55,0,0,0,.00219-.77781L15.076,3.76l-.8365-.836a.55.55,0,0,0-.77781-.00219L13.4595,2.924,12.357,4.0265a5.96235,5.96235,0,0,0-2.2535-.9205V1.55a.55.55,0,0,0-.55-.55H8.45a.55.55,0,0,0-.55.55V3.106a5.96235,5.96235,0,0,0-2.2535.9205l-1.1-1.1025a.55.55,0,0,0-.77781-.00219L3.7665,2.924,2.924,3.76a.55.55,0,0,0-.00219.77781L2.924,4.54,4.0265,5.643a5.97644,5.97644,0,0,0-.921,2.2535H1.55a.55.55,0,0,0-.55.55V9.55a.55.55,0,0,0,.55.55H3.1055a5.967,5.967,0,0,0,.921,2.2535L2.924,13.4595a.55.55,0,0,0-.00219.77782l.00219.00218.8365.8365a.55.55,0,0,0,.77781.00219L4.5405,15.076,5.643,13.9735a5.96235,5.96235,0,0,0,2.2535.9205V16.45a.55.55,0,0,0,.55.55H9.55a.55.55,0,0,0,.55-.55V14.894a5.96235,5.96235,0,0,0,2.2535-.9205L13.456,15.076a.55.55,0,0,0,.77782.00219L14.236,15.076l.8365-.8365a.55.55,0,0,0,.00219-.77781l-.00219-.00219L13.97,12.357a5.967,5.967,0,0,0,.921-2.2535H16.45a.55.55,0,0,0,.55-.55V8.45a.55.55,0,0,0-.54649-.55349ZM11.207,9A2.207,2.207,0,1,1,9,6.793H9A2.207,2.207,0,0,1,11.207,9Z"
-            />
-        </svg>
+        <sp-icon-edit slot="icon"></sp-icon-edit>
     </sp-action-button>
 
     <sp-action-button hold-affordance selected>
-        <svg slot="icon" id="spectrum-icon-18-More" viewBox="0 0 36 36">
-            <circle cx="17.8" cy="18.2" r="3.4"></circle>
-            <circle cx="29.5" cy="18.2" r="3.4"></circle>
-            <circle cx="6.1" cy="18.2" r="3.4"></circle>
-        </svg>
+        <sp-icon-edit slot="icon"></sp-icon-edit>
     </sp-action-button>
 </sp-action-group>
 ```

diff --git a/packages/action-button/stories/action-button.stories.ts b/packages/action-button/stories/action-button.stories.ts
@@ -12,11 +12,9 @@ governing permissions and limitations under the License.
 import { html, action } from '@open-wc/demoing-storybook';
 import { TemplateResult } from '@spectrum-web-components/base';
 import '@spectrum-web-components/icon/sp-icon.js';
-import {
-    EditIcon,
-    MoreIcon,
-    SettingsIcon,
-} from '@spectrum-web-components/icons-workflow';
+import '@spectrum-web-components/icons-workflow/icons/sp-icon-edit.js';
+import '@spectrum-web-components/icons-workflow/icons/sp-icon-more.js';
+import '@spectrum-web-components/icons-workflow/icons/sp-icon-settings.js';
 
 import '../';
 import '../sp-action-button.js';
@@ -102,9 +100,7 @@ export const toggles = (): TemplateResult => {
 export const wIconButton = (): TemplateResult => {
     return html`
         <sp-action-button>
-            <sp-icon slot="icon">
-                ${EditIcon({ hidden: true })}
-            </sp-icon>
+            <sp-icon-edit slot="icon"></sp-icon-edit>
             This is an action button
         </sp-action-button>
     `;
@@ -117,9 +113,7 @@ wIconButton.story = {
 export const iconOnlyButton = (): TemplateResult => {
     return html`
         <sp-action-button label="Edit">
-            <sp-icon slot="icon">
-                ${EditIcon({ hidden: true })}
-            </sp-icon>
+            <sp-icon-edit slot="icon"></sp-icon-edit>
         </sp-action-button>
     `;
 };
@@ -128,21 +122,15 @@ export const holdAffordance = (): TemplateResult => {
     return html`
         <sp-action-group>
             <sp-action-button label="Edit" hold-affordance>
-                <sp-icon slot="icon">
-                    ${EditIcon({ hidden: true })}
-                </sp-icon>
+                <sp-icon-edit slot="icon"></sp-icon-edit>
             </sp-action-button>
 
             <sp-action-button hold-affordance quiet>
-                <sp-icon slot="icon">
-                    ${SettingsIcon({ hidden: true })}
-                </sp-icon>
+                <sp-icon-settings slot="icon"></sp-icon-settings>
             </sp-action-button>
 
             <sp-action-button hold-affordance selected>
-                <sp-icon slot="icon">
-                    ${MoreIcon({ hidden: true })}
-                </sp-icon>
+                <sp-icon-more slot="icon"></sp-icon-more>
             </sp-action-button>
         </sp-action-group>
     `;

diff --git a/packages/action-group/README.md b/packages/action-group/README.md
@@ -25,60 +25,58 @@ import { ActionGroup } from '@spectrum-web-components/action-group';
 
 ## Horizontal
 
-<sp-icons-medium></sp-icons-medium>
-
 ```html
 <sp-action-group>
     <sp-action-button>
-        <sp-icon slot="icon" size="m" name="ui:Magnifier"></sp-icon>
+        <sp-icon-magnify slot="icon"></sp-icon-magnify>
         Button 1
     </sp-action-button>
     <sp-action-button>
-        <sp-icon slot="icon" size="m" name="ui:Magnifier"></sp-icon>
+        <sp-icon-magnify slot="icon"></sp-icon-magnify>
         Longer Button 2
     </sp-action-button>
     <sp-action-button>
-        <sp-icon slot="icon" size="m" name="ui:Magnifier"></sp-icon>
+        <sp-icon-magnify slot="icon"></sp-icon-magnify>
         Short 3
     </sp-action-button>
 </sp-action-group>
 <br />
 <sp-action-group compact>
     <sp-action-button>
-        <sp-icon slot="icon" size="m" name="ui:Magnifier"></sp-icon>
+        <sp-icon-magnify slot="icon"></sp-icon-magnify>
         Button 1
     </sp-action-button>
     <sp-action-button>
-        <sp-icon slot="icon" size="m" name="ui:Magnifier"></sp-icon>
+        <sp-icon-magnify slot="icon"></sp-icon-magnify>
         Longer Button 2
     </sp-action-button>
     <sp-action-button>
-        <sp-icon slot="icon" size="m" name="ui:Magnifier"></sp-icon>
+        <sp-icon-magnify slot="icon"></sp-icon-magnify>
         Short 3
     </sp-action-button>
 </sp-action-group>
 <br />
 <sp-action-group>
     <sp-action-button quiet label="Zoom in">
-        <sp-icon slot="icon" size="m" name="ui:Magnifier"></sp-icon>
+        <sp-icon-magnify slot="icon"></sp-icon-magnify>
     </sp-action-button>
     <sp-action-button quiet label="Zoom in">
-        <sp-icon slot="icon" size="m" name="ui:Magnifier"></sp-icon>
+        <sp-icon-magnify slot="icon"></sp-icon-magnify>
     </sp-action-button>
     <sp-action-button quiet label="Zoom in">
-        <sp-icon slot="icon" size="m" name="ui:Magnifier"></sp-icon>
+        <sp-icon-magnify slot="icon"></sp-icon-magnify>
     </sp-action-button>
 </sp-action-group>
 <br />
 <sp-action-group compact>
     <sp-action-button label="Zoom in">
-        <sp-icon slot="icon" size="m" name="ui:Magnifier"></sp-icon>
+        <sp-icon-magnify slot="icon"></sp-icon-magnify>
     </sp-action-button>
     <sp-action-button label="Zoom in">
-        <sp-icon slot="icon" size="m" name="ui:Magnifier"></sp-icon>
+        <sp-icon-magnify slot="icon"></sp-icon-magnify>
     </sp-action-button>
     <sp-action-button label="Zoom in">
-        <sp-icon slot="icon" size="m" name="ui:Magnifier"></sp-icon>
+        <sp-icon-magnify slot="icon"></sp-icon-magnify>
     </sp-action-button>
 </sp-action-group>
 ```
@@ -89,52 +87,52 @@ import { ActionGroup } from '@spectrum-web-components/action-group';
 <div style="display: flex; justify-content: space-around;">
     <sp-action-group vertical>
         <sp-action-button>
-            <sp-icon slot="icon" size="m" name="ui:Magnifier"></sp-icon>
+            <sp-icon-magnify slot="icon"></sp-icon-magnify>
             Button 1
         </sp-action-button>
         <sp-action-button>
-            <sp-icon slot="icon" size="m" name="ui:Magnifier"></sp-icon>
+            <sp-icon-magnify slot="icon"></sp-icon-magnify>
             Longer Button 2
         </sp-action-button>
         <sp-action-button>
-            <sp-icon slot="icon" size="m" name="ui:Magnifier"></sp-icon>
+            <sp-icon-magnify slot="icon"></sp-icon-magnify>
             Short 3
         </sp-action-button>
     </sp-action-group>
     <sp-action-group vertical compact>
         <sp-action-button>
-            <sp-icon slot="icon" size="m" name="ui:Magnifier"></sp-icon>
+            <sp-icon-magnify slot="icon"></sp-icon-magnify>
             Button 1
         </sp-action-button>
         <sp-action-button>
-            <sp-icon slot="icon" size="m" name="ui:Magnifier"></sp-icon>
+            <sp-icon-magnify slot="icon"></sp-icon-magnify>
             Longer Button 2
         </sp-action-button>
         <sp-action-button>
-            <sp-icon slot="icon" size="m" name="ui:Magnifier"></sp-icon>
+            <sp-icon-magnify slot="icon"></sp-icon-magnify>
             Short 3
         </sp-action-button>
     </sp-action-group>
     <sp-action-group vertical>
         <sp-action-button quiet label="Zoom in">
-            <sp-icon slot="icon" size="m" name="ui:Magnifier"></sp-icon>
+            <sp-icon-magnify slot="icon"></sp-icon-magnify>
         </sp-action-button>
         <sp-action-button quiet label="Zoom in">
-            <sp-icon slot="icon" size="m" name="ui:Magnifier"></sp-icon>
+            <sp-icon-magnify slot="icon"></sp-icon-magnify>
         </sp-action-button>
         <sp-action-button quiet label="Zoom in">
-            <sp-icon slot="icon" size="m" name="ui:Magnifier"></sp-icon>
+            <sp-icon-magnify slot="icon"></sp-icon-magnify>
         </sp-action-button>
     </sp-action-group>
     <sp-action-group compact vertical>
         <sp-action-button label="Zoom in">
-            <sp-icon slot="icon" size="m" name="ui:Magnifier"></sp-icon>
+            <sp-icon-magnify slot="icon"></sp-icon-magnify>
         </sp-action-button>
         <sp-action-button label="Zoom in">
-            <sp-icon slot="icon" size="m" name="ui:Magnifier"></sp-icon>
+            <sp-icon-magnify slot="icon"></sp-icon-magnify>
         </sp-action-button>
         <sp-action-button label="Zoom in">
-            <sp-icon slot="icon" size="m" name="ui:Magnifier"></sp-icon>
+            <sp-icon-magnify slot="icon"></sp-icon-magnify>
         </sp-action-button>
     </sp-action-group>
 </div>
@@ -145,55 +143,55 @@ import { ActionGroup } from '@spectrum-web-components/action-group';
 ```html
 <sp-action-group justified>
     <sp-action-button>
-        <sp-icon slot="icon" size="m" name="ui:Magnifier"></sp-icon>
+        <sp-icon-magnify slot="icon"></sp-icon-magnify>
         Button 1
     </sp-action-button>
     <sp-action-button>
-        <sp-icon slot="icon" size="m" name="ui:Magnifier"></sp-icon>
+        <sp-icon-magnify slot="icon"></sp-icon-magnify>
         Longer Button 2
     </sp-action-button>
     <sp-action-button>
-        <sp-icon slot="icon" size="m" name="ui:Magnifier"></sp-icon>
+        <sp-icon-magnify slot="icon"></sp-icon-magnify>
         Short 3
     </sp-action-button>
 </sp-action-group>
 <br />
 <sp-action-group justified compact>
     <sp-action-button>
-        <sp-icon slot="icon" size="m" name="ui:Magnifier"></sp-icon>
+        <sp-icon-magnify slot="icon"></sp-icon-magnify>
         Button 1
     </sp-action-button>
     <sp-action-button>
-        <sp-icon slot="icon" size="m" name="ui:Magnifier"></sp-icon>
+        <sp-icon-magnify slot="icon"></sp-icon-magnify>
         Longer Button 2
     </sp-action-button>
     <sp-action-button>
-        <sp-icon slot="icon" size="m" name="ui:Magnifier"></sp-icon>
+        <sp-icon-magnify slot="icon"></sp-icon-magnify>
         Short 3
     </sp-action-button>
 </sp-action-group>
 <br />
 <sp-action-group justified>
     <sp-action-button quiet label="Zoom in">
-        <sp-icon slot="icon" size="m" name="ui:Magnifier"></sp-icon>
+        <sp-icon-magnify slot="icon"></sp-icon-magnify>
     </sp-action-button>
     <sp-action-button quiet label="Zoom in">
-        <sp-icon slot="icon" size="m" name="ui:Magnifier"></sp-icon>
+        <sp-icon-magnify slot="icon"></sp-icon-magnify>
     </sp-action-button>
     <sp-action-button quiet label="Zoom in">
-        <sp-icon slot="icon" size="m" name="ui:Magnifier"></sp-icon>
+        <sp-icon-magnify slot="icon"></sp-icon-magnify>
     </sp-action-button>
 </sp-action-group>
 <br />
 <sp-action-group compact justified>
     <sp-action-button label="Zoom in">
-        <sp-icon slot="icon" size="m" name="ui:Magnifier"></sp-icon>
+        <sp-icon-magnify slot="icon"></sp-icon-magnify>
     </sp-action-button>
     <sp-action-button label="Zoom in">
-        <sp-icon slot="icon" size="m" name="ui:Magnifier"></sp-icon>
+        <sp-icon-magnify slot="icon"></sp-icon-magnify>
     </sp-action-button>
     <sp-action-button label="Zoom in">
-        <sp-icon slot="icon" size="m" name="ui:Magnifier"></sp-icon>
+        <sp-icon-magnify slot="icon"></sp-icon-magnify>
     </sp-action-button>
 </sp-action-group>
 ```
diff --git a/packages/button/README.md b/packages/button/README.md
@@ -71,7 +71,7 @@ SVG.
 <sp-button-group>
     <sp-button variant="primary">Label only</sp-button>
     <sp-button variant="primary">
-        <sp-icon slot="icon" size="m" name="ui:HelpMedium"></sp-icon>
+        <sp-icon-help slot="icon"></sp-icon-help>
         Icon + Label
     </sp-button>
     <sp-button variant="primary">