refactor(ui-icons): s2 migration of assets

.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

.npmrc

@@ -0,0 +1,3 @@
+@a4u:registry=https://artifactory.corp.adobe.com/artifactory/api/npm/npm-a4u-release/
+//artifactory.corp.adobe.com/artifactory/api/npm/npm-a4u-release/:always-auth=true
+access=public

components/button/stories/button.stories.js

@@ -2,8 +2,6 @@ import { withDownStateDimensionCapture } from "@spectrum-css/preview/decorators"
 
 import { html } from "lit";
 import { styleMap } from "lit/directives/style-map.js";
-import { when } from "lit/directives/when.js";
-import { withDownStateDimensionCapture } from "../../../.storybook/decorators";
 
 import { default as IconStories } from "@spectrum-css/icon/stories/icon.stories.js";
 import { Template as Typography } from "@spectrum-css/typography/stories/template.js";
@@ -16,7 +14,6 @@ import { Template } from "./template";
 export default {
 	title: "Components/Button",
 	component: "Button",
-	decorators: [withDownStateDimensionCapture('.spectrum-Button:not(:disabled)')],
 	argTypes: {
 		size: {
 			name: "Size",

components/fieldlabel/stories/template.js

@@ -29,20 +29,20 @@ export const Template = ({
 
 	let iconName = "Asterisk100";
 	switch (size) {
-	case "s":
-		iconName = "Asterisk100";
-		break;
-	case "l":
-		iconName = "Asterisk200";
-		break;
-	case "xl":
-		iconName = "Asterisk300";
-		break;
-	default:
-		iconName = "Asterisk100";
+		case "s":
+			iconName = "Asterisk100";
+			break;
+		case "l":
+			iconName = "Asterisk200";
+			break;
+		case "xl":
+			iconName = "Asterisk300";
+			break;
+		default:
+			iconName = "Asterisk100";
 	}
 
-	return html`
+	const labelMarkup = html`
 		<label
 			class=${classMap({
 				[rootClass]: true,
@@ -67,4 +67,18 @@ export const Template = ({
 				: ""}
 		</label>
 	`;
+
+	// When using the static color variants, wrap the label in an example element with a background color.
+	return !staticColor
+		? labelMarkup
+		: html`
+			<div
+				style=${styleMap({
+					padding: "1rem",
+					backgroundColor: staticColor === "white" ? "rgb(15, 121, 125)" : staticColor === "black" ? "rgb(181, 209, 211)" : undefined,
+				})}
+			</div>
+				${labelMarkup}
+			</div>
+		`;
 };

package.json

@@ -34,7 +34,8 @@
 		"linter": "nx run-many --target lint --verbose --projects",
 		"new": "nx run @spectrum-css/generator:new",
 		"precommit": "lint-staged --allow-empty --config lint-staged.config.js",
-		"prepare": "husky install && run-p refresh:directory refresh:env && yarn refresh:config",
+		"prepare": "husky install && run-p refresh:directory refresh:env && run-p refresh:config refresh:auth",
+		"refresh:auth": "bash ./tasks/auth.sh || exit 0",
 		"refresh:config": "bash ./tasks/chromatic-config-creation.sh || exit 0",
 		"refresh:directory": "bash ./tasks/clean-up-after-migration.sh || exit 0",
 		"refresh:env": "bash ./tasks/copy-env-from-root.sh || exit 0",
@@ -113,6 +114,9 @@
 		"tar": "^7.0.1",
 		"yargs": "^17.7.2"
 	},
+	"optionalDependencies": {
+		"@a4u/s2-icon-global-set-open-source-processed": "latest"
+	},
 	"engines": {
 		"node": ">=20"
 	},

tasks/auth.sh

@@ -0,0 +1,21 @@
+#!/usr/bin/bash
+
+# Copyright 2023 Adobe. All rights reserved.
+# This file is licensed to you under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License. You may obtain a copy
+# of the License at http://www.apache.org/licenses/LICENSE-2.0
+
+# Unless required by applicable law or agreed to in writing, software distributed under
+# the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+# OF ANY KIND, either express or implied. See the License for the specific language
+# governing permissions and limitations under the License.
+
+ARTIFACTORY_API_TOKEN=${ARTIFACTORY_API_TOKEN:-$ARTIFACTORY_API_KEY}
+if [ -z "$ARTIFACTORY_API_TOKEN" ]; then
+    echo >&2 "🔍  no ARTIFACTORY_API_TOKEN detected.";
+else
+    auth=$(curl -s -H "X-Api-Key: ${ARTIFACTORY_API_TOKEN}" https://artifactory.corp.adobe.com/artifactory/api/npm/auth)
+    export NPM_AUTH=$(echo "$auth" | grep "_auth" | awk -F " " '{print $3}')
+    export NPM_EMAIL=$(echo "$auth" | grep "email" | awk -F " " '{print $3}')
+    echo >&2 "🪩  exported NPM_EMAIL and NPM_AUTH.";
+fi

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"
+]