refactor(ui-icons): s2 migration of assets

adobe · Apr 11, 2024 · c0c15ea · c0c15ea
1 parent 7f735c3
commit c0c15ea
Show file tree

Hide file tree

Showing 155 changed files with 558 additions and 427 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,12 +1,13 @@
 dist
 dist-site
+
 !tokens/dist
+!ui-icons/dist
 
 # Recommended update re:https://docs.netlify.com/integrations/frameworks/eleventy/
 **/node_modules/**
 
 temp
-.npmrc*
 .nx
 .env
 .tmp

diff --git a/.storybook/package.json b/.storybook/package.json
@@ -12,7 +12,7 @@
   "dependencies": {
     "@adobe/spectrum-css-workflow-icons": "^1.5.4",
     "@spectrum-css/tokens": "^14.0.0-next.3",
-    "@spectrum-css/ui-icons": "^1.1.2"
+    "@spectrum-css/ui-icons": "^2.0.0"
   },
   "devDependencies": {
     "@babel/core": "^7.24.3",

diff --git a/.storybook/project.json b/.storybook/project.json
@@ -23,13 +23,7 @@
 			}
 		},
 		"build": {
-			"dependsOn": [
-				"^build",
-				{
-					"target": "build",
-					"projects": "ui-icons"
-				}
-			],
+			"dependsOn": ["^build"],
 			"inputs": [
 				"{projectRoot}/assets",
 				"{projectRoot}/decorators",
@@ -60,13 +54,7 @@
 		},
 		"start": {
 			"cache": true,
-			"dependsOn": [
-				"^build",
-				{
-					"target": "build",
-					"projects": "ui-icons"
-				}
-			],
+			"dependsOn": ["^build"],
 			"inputs": [
 				"{projectRoot}/assets",
 				"{projectRoot}/decorators",

diff --git a/components/icon/stories/icon.stories.js b/components/icon/stories/icon.stories.js
@@ -1,26 +1,9 @@
 // Import the component markup template
 import { html } from "lit";
 import { styleMap } from "lit/directives/style-map.js";
-import { when } from "lit/directives/when.js";
 
 import { Template } from "./template";
-import { uiIconSizes, uiIconsWithDirections, workflowIcons } from "./utilities.js";
-
-/**
- * Create a list of all UI Icons with their sizing numbers.
- *
- * The list is a little long until Storybook adds a way to use conditional options
- * in controls, e.g. a "uiSize" control with options pulled from uiIconSizes:
- * @see https://github.com/storybookjs/storybook/discussions/24235
- */
-const uiIconNameOptions = uiIconsWithDirections.map((iconName) => {
-	const baseIconName = iconName.replace(/(Left|Right|Up|Down)$/, "");
-	// Icons like Gripper that don't have sizes yet, represented by any empty array.
-	if (uiIconSizes[baseIconName]?.length == 0) {
-		return [baseIconName];
-	}
-	return uiIconSizes[baseIconName]?.map(sizeNum => iconName + sizeNum) ?? [];
-}).flat();
+import { uiIconsWithDirections, workflowIcons } from "./utilities.js";
 
 export default {
 	title: "Components/Icon",
@@ -70,9 +53,7 @@ export default {
 				type: { summary: "string" },
 				category: "Content",
 			},
-			options: [
-				...uiIconNameOptions,
-			],
+			options: uiIconsWithDirections,
 			control: "select",
 			if: { arg: "setName", eq: "ui" },
 		},
@@ -166,21 +147,7 @@ const TestTemplate = ({
 			</div>`
 		)}
 		<div style="margin-top:32px;">
-			${uiIconsWithDirections.map(iconName => html`
-				<div
-					style=${styleMap({
-						display: "flex",
-						gap: "16px",
-					})}
-				>
-					${uiIconSizes[iconName.replace(/(Left|Right|Up|Down)$/, "")]?.map((iconSize) =>
-						Template({ ...args, setName: "ui", iconName: iconName + iconSize })
-					)}
-					${when(uiIconSizes[iconName]?.length == 0, () =>
-						Template({ ...args, setName: "ui", iconName })
-					)}
-				</div>`
-			)}
+			${uiIconsWithDirections.map(iconName => Template({ ...args, setName: "ui", iconName }))}
 		</div>
 	`;
 };
diff --git a/components/icon/stories/template.js b/components/icon/stories/template.js
@@ -3,7 +3,7 @@ import { classMap } from "lit/directives/class-map.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 import { unsafeSVG } from "lit/directives/unsafe-svg.js";
 
-import { fetchIconSVG, uiIcons, uiIconSizes, workflowIcons } from "./utilities.js";
+import { fetchIconSVG, uiIcons, workflowIcons } from "./utilities.js";
 
 import "../index.css";
 
@@ -48,13 +48,30 @@ export const Template = ({
 
 	let idKey = iconName;
 
+	// If a descriptor like Right, Left, Down, or Up is present for the UI icons Chevron or
+	// Arrow, use that only for the class and not the icon fetch.
+	if (
+		["Right", "Left", "Down", "Up"].some((c) => idKey.includes(c))
+	) {
+		idKey = idKey.replace(/(Right|Left|Down|Up)/, "");
+	}
+
+
+	// If the provided icon name includes the weight, make sure it's a supported weight;
+	// if not, strip it from the key
+	if (
+		/\d{2,3}$/.test(idKey) && !uiIcons.includes(idKey)
+	) {
+		idKey = idKey.replace(/\d{2,3}$/, "");
+	}
+
 	// If icon set was not provided, try determine which icon set contains this icon.
 	// Note: icon sets can contain the same icon name, with different icons.
 	if (!["workflow","ui"].includes(setName)) {
 		if (workflowIcons.includes(idKey)) {
 			setName = "workflow";
 		}
-		else if (uiIcons.includes(idKey.replace(/\d{2,3}$/, "").replace(/(Right|Left|Down|Up)$/, ""))) {
+		else if (uiIcons.some(ui => ui.includes(idKey))) {
 			setName = "ui";
 		}
 	}
@@ -66,16 +83,6 @@ export const Template = ({
 		return html``;
 	}
 
-	// If a descriptor like Right, Left, Down, or Up is present for the UI icons Chevron or
-	// Arrow, use that only for the class and not the icon fetch.
-	if (
-		setName == "ui" &&
-		uiIcons.some((c) => idKey.startsWith(c)) &&
-		["Right", "Left", "Down", "Up"].some((c) => idKey.includes(c))
-	) {
-		idKey = idKey.replace(/(Right|Left|Down|Up)/, "");
-	}
-
 	/**
 	 * Fallback UI Icon sizing number.
 	 *
@@ -87,12 +94,8 @@ export const Template = ({
 	 */
 	if (
 		setName == "ui" &&
-		// Exists in the list of available UI icons.
-		uiIcons.includes(idKey.replace(/\d{2,3}$/, "")) &&
 		// Does not already have size number at the end.
-		!idKey.match(/^(?!\d).*\d{2,3}$/) &&
-		// Exclude some UI icons that do not (yet) have size numbers.
-		uiIconSizes[idKey]?.length != 0
+		!idKey.match(/^(?!\d).*\d{2,3}$/)
 	) {
 		let sizeVal;
 		switch (size) {

diff --git a/components/icon/stories/utilities.js b/components/icon/stories/utilities.js
@@ -2,48 +2,47 @@ import path from "path";
 
 // Imports an array of all icon names in the workflow set
 import iconOpts from "@adobe/spectrum-css-workflow-icons";
+import uiIconOpts from "@spectrum-css/ui-icons/dist/icons.json";
 
 export const workflowIcons = (iconOpts || []).map((icon) =>
 	path.basename(icon, ".svg")
 );
 
-/**
- * UI Icons have specific sizes represented by a number.
- * Each size has its own individual file and a CSS class with defined dimensions.
- */
-export const uiIconSizes = {
-	"Arrow": ["75","100","200","300","400","500","600"],
-	"Asterisk": ["75","100","200","300"],
-	"Checkmark": ["50","75","100","200","300","400","500","600"],
-	"Chevron": ["50","75","100","200","300","400","500"],
-	"CornerTriangle": ["75","100","200","300"],
-	"Cross": ["75","100","200","300","400","500","600"],
-	"Dash": ["50","75","100","200","300","400","500","600"],
-	"SingleGripper": [],
-	"DoubleGripper": [],
-	"TripleGripper": [],
-};
+export const uiIcons = (uiIconOpts || []).map((icon) =>
+	path.basename(icon, ".svg")
+);
 
 /**
- * List of UI icon names, corresponding to files.
+ * @description A custom alpha-numeric sort
+ * @param {string} a
+ * @param {string} b
+ * @returns number
  */
-export const uiIcons = Object.keys(uiIconSizes);
+function alphaNumericSort (a, b) {
+	const aSet = a.match(/^([a-z]+)([0-9]+)\.svg$/i);
+	const bSet = b.match(/^([a-z]+)([0-9]+)\.svg$/i);
+	const aChar = aSet?.[1];
+	const bChar = bSet?.[1];
+
+	if (aChar !== bChar) return aChar > bChar ? 1 : -1;
+
+	const aInt = parseInt(aSet?.[2] ?? 0);
+	const bInt = parseInt(bSet?.[2] ?? 0);
+	return aInt - bInt;
+}
 
 /**
  * List of all UI icon names for CSS. Chevron and Arrow have directional suffixes
  * for rotating the same base icon, e.g. Arrow becomes ArrowRight, ArrowDown, etc.
  */
 export const uiIconsWithDirections = [
-	...uiIcons.filter((c) => !["Chevron", "Arrow"].includes(c)),
-	"ArrowRight",
-	"ArrowLeft",
-	"ArrowUp",
-	"ArrowDown",
-	"ChevronRight",
-	"ChevronLeft",
-	"ChevronUp",
-	"ChevronDown",
-];
+	...uiIcons.filter((c) => !["Chevron", "Arrow"].some(prefix => c.startsWith(prefix))),
+	...uiIcons.filter((c) => ["Chevron", "Arrow"].some(prefix => c.startsWith(prefix))).map(i => i.replace(/(Chevron|Arrow)(\d{2,3})/, "$1Right$2")),
+	...uiIcons.filter((c) => ["Chevron", "Arrow"].some(prefix => c.startsWith(prefix))).map(i => i.replace(/(Chevron|Arrow)(\d{2,3})/, "$1Left$2")),
+	...uiIcons.filter((c) => ["Chevron", "Arrow"].some(prefix => c.startsWith(prefix))).map(i => i.replace(/(Chevron|Arrow)(\d{2,3})/, "$1Up$2")),
+	...uiIcons.filter((c) => ["Chevron", "Arrow"].some(prefix => c.startsWith(prefix))).map(i => i.replace(/(Chevron|Arrow)(\d{2,3})/, "$1Down$2")),
+].sort(alphaNumericSort);
+
 
 /**
  * Retrieve SVG markup from contents of loaded SVG file, pulling from
@@ -75,9 +74,7 @@ export const fetchIconSVG = ({
 
 	// Check "UI icons" for icon set if not yet found.
 	try {
-		icon = require(`@spectrum-css/ui-icons/dist/${
-			scale ? scale : "medium"
-		}/${iconName}.svg?raw`);
+		icon = require(`@spectrum-css/ui-icons/dist/svg/${iconName}.svg?raw`);
 		if (icon) return (icon.default ?? icon).trim();
 	}
 	catch (e) {/* ignore */}

diff --git a/site/package.json b/site/package.json
@@ -19,7 +19,7 @@
     "@adobe/focus-ring-polyfill": "^0.1.5",
     "@adobe/spectrum-css-workflow-icons": "^1.5.4",
     "@spectrum-css/tokens": "^13.0.8",
-    "@spectrum-css/ui-icons": "^1.1.1",
+    "@spectrum-css/ui-icons": "^2.0.0",
     "browser-sync": "^3.0.2",
     "colors": "^1.4.0",
     "dependency-solver": "^1.0.6",

diff --git a/site/project.json b/site/project.json
@@ -33,10 +33,6 @@
 					"target": "build",
 					"projects": "tag:component"
 				},
-				{
-					"target": "build",
-					"projects": "ui-icons"
-				},
 				"clean"
 			],
 			"inputs": ["core", "tools"],

diff --git a/ui-icons/dist/icons.json b/ui-icons/dist/icons.json
@@ -0,0 +1,44 @@
+[
+  "Add50.svg",
+  "Add75.svg",
+  "Add100.svg",
+  "Add200.svg",
+  "Add300.svg",
+  "Arrow100.svg",
+  "Arrow400.svg",
+  "Asterisk100.svg",
+  "Asterisk200.svg",
+  "Asterisk300.svg",
+  "Checkmark50.svg",
+  "Checkmark75.svg",
+  "Checkmark100.svg",
+  "Checkmark200.svg",
+  "Checkmark300.svg",
+  "Checkmark400.svg",
+  "Chevron50.svg",
+  "Chevron75.svg",
+  "Chevron100.svg",
+  "Chevron200.svg",
+  "Chevron300.svg",
+  "Chevron400.svg",
+  "CornerTriangle75.svg",
+  "CornerTriangle100.svg",
+  "CornerTriangle200.svg",
+  "CornerTriangle300.svg",
+  "Cross75.svg",
+  "Cross100.svg",
+  "Cross200.svg",
+  "Cross300.svg",
+  "Cross400.svg",
+  "Cross500.svg",
+  "Cross600.svg",
+  "Dash50.svg",
+  "Dash75.svg",
+  "Dash100.svg",
+  "Dash200.svg",
+  "Dash300.svg",
+  "LinkOut100.svg",
+  "LinkOut200.svg",
+  "LinkOut300.svg",
+  "LinkOut400.svg"
+]