feat: add future Icon (release branch) (#5153)

* feat(Icon): add future Icon (#4973) * feat: add illustrations entrypoint * chore(storybook): link to Material Symbols CDN * feat(future/Icon): add prop to mirror in RTL * docs(future/Icon): add api specification * docs(future/Icon): update usage guidelines * feat(future/Icon): add props for accessibility * feat(future/Icon): add string suggestions for name * feat(future/Icon): handle RTL icons that are not a direct mirror * docs(future/Icon): add list of default icon set * docs(DosAndDonts): update styles so items are the same height * chore: update root test command to not watch * docs(DosAndDonts): update styles for single col to span full width * feat(Notification): update icons to use future Icon * chore(tsconfig): resolve json in storybook * chore(DosAndDonts): update to use new icon * chore(ResourceLinks): update to use new icon * fix(future/Tag): fix cautionary icon colour * refactor: update Icon usage in some components * chore: fix lint:fix script * fix(Popover): fix icon color * feat(codemod): add codemod to upgrade Icon to Future Icon (#5080) * refactor: rename getTagName to getKaioTagName and abstract traversing * feat(codemod): add util getKaioTagNamesByRegex * refactor(transformSource): make tag name generic * feat(updateJsxElementWithNewProps): add arg to update tag name * feat(codemod): add codemod for upgrading icons * feat(upgradeIconV1): transform CaMonogramIcon to Brand * feat(updateKaioImport): add util to update imports * feat(upgradeIconV1): transform SpinnerIcon to LoadingSpinner
cultureamp · Oct 16, 2024 · 17951f3 · 17951f3
1 parent 6798c3c
commit 17951f3
Show file tree

Hide file tree

Showing 174 changed files with 7,432 additions and 964 deletions.
diff --git a/.changeset/little-lizards-sniff.md b/.changeset/little-lizards-sniff.md
@@ -0,0 +1,5 @@
+---
+"@kaizen/components": minor
+---
+
+Add future Icon and update internal icon usages (excluding Buttons).
diff --git a/.changeset/quick-timers-juggle.md b/.changeset/quick-timers-juggle.md
@@ -0,0 +1,2 @@
+---
+---
diff --git a/.changeset/real-pumpkins-drive.md b/.changeset/real-pumpkins-drive.md
@@ -0,0 +1,5 @@
+---
+"@kaizen/components": patch
+---
+
+Fix future Tag cautionary icon colour.
diff --git a/.github/workflows/test-unit.yml b/.github/workflows/test-unit.yml
@@ -27,7 +27,7 @@ jobs:
       - uses: actions/checkout@v4
       - uses: ./.github/actions/setup
       - name: Unit tests (1/3)
-        run: pnpm test -- -- --run --shard=1/3
+        run: pnpm test -- --shard=1/3
 
   unit-tests-2:
     if: github.head_ref != 'changeset-release/main'
@@ -38,7 +38,7 @@ jobs:
       - uses: actions/checkout@v4
       - uses: ./.github/actions/setup
       - name: Unit tests (2/3)
-        run: pnpm test -- -- --run --shard=2/3
+        run: pnpm test -- --shard=2/3
 
   unit-tests-3:
     if: github.head_ref != 'changeset-release/main'
@@ -49,4 +49,4 @@ jobs:
       - uses: actions/checkout@v4
       - uses: ./.github/actions/setup
       - name: Unit tests (3/3)
-        run: pnpm test -- -- --run --shard=3/3
+        run: pnpm test -- --shard=3/3
diff --git a/docs/.storybook/preview-head.html b/docs/.storybook/preview-head.html
@@ -1,3 +1,9 @@
+<!-- https://www.cdnplanet.com/blog/faster-google-webfonts-preconnect -->
+<!-- https://stackoverflow.com/a/62219966 -->
+<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
+<link rel="preload" as="style" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,400,0..1,0" />
+<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,400,0..1,0" />
+
 <style>
   body {
     /* Removing the default Storybook transition because it's causing false positive a11y violations */

diff --git a/docs/components/DosAndDonts/DosAndDonts.module.css b/docs/components/DosAndDonts/DosAndDonts.module.css
@@ -8,3 +8,17 @@
     grid-column: span 2;
   }
 }
+
+.doOrDontTag {
+  position: absolute;
+  z-index: 10;
+  top: 6px;
+  left: 6px;
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2);
+  border-radius: var(--border-solid-border-radius);
+  padding-block: var(--spacing-2);
+  padding-inline: var(--spacing-4) var(--spacing-8);
+  color: var(--color-white);
+}
diff --git a/docs/components/DosAndDonts/DosAndDonts.tsx b/docs/components/DosAndDonts/DosAndDonts.tsx
@@ -1,9 +1,9 @@
 import React, { HTMLAttributes } from "react"
 // eslint-disable-next-line import/no-extraneous-dependencies
-import { Canvas } from "@storybook/blocks"
+import { Canvas, Unstyled } from "@storybook/blocks"
 import classnames from "classnames"
-import { CheckIcon, CloseIcon } from "~components/Icon"
-import { SbContent } from "../SbContent"
+import { Text } from "~components/Text"
+import { Icon } from "~components/__future__/Icon"
 import styles from "./DosAndDonts.module.css"
 
 export const DosAndDonts = ({
@@ -18,6 +18,24 @@ export const DosAndDonts = ({
 
 DosAndDonts.displayName = "DosAndDonts"
 
+const DoOrDontTag = ({ isDont }: { isDont: boolean }): JSX.Element => (
+  <Unstyled>
+    <span
+      className={classnames(
+        styles.doOrDontTag,
+        isDont ? "bg-red-500" : "bg-green-500"
+      )}
+    >
+      <Icon name={isDont ? "close" : "check"} isPresentational />
+      <Text variant="body" color="white">
+        <strong>{isDont ? "Don't" : "Do"}</strong>
+      </Text>
+    </span>
+  </Unstyled>
+)
+
+DoOrDontTag.displayName = "DoOrDontTag"
+
 export const DoOrDont = ({
   isDont = false,
   className,
@@ -28,23 +46,7 @@ export const DoOrDont = ({
   story: any
 } & HTMLAttributes<HTMLDivElement>): JSX.Element => (
   <div className={classnames("relative", className)} {...otherProps}>
-    <div
-      className={classnames(
-        "absolute top-6 left-6 z-10 py-4 px-6 font-bold text-white rounded flex gap-2 items-center justify-center",
-        isDont ? "bg-red-500" : "bg-green-500"
-      )}
-    >
-      {isDont ? (
-        <CloseIcon role="presentation" />
-      ) : (
-        <CheckIcon role="presentation" />
-      )}
-      <SbContent>
-        <span className="text-white">
-          <strong>{isDont ? "Don't" : "Do"}</strong>
-        </span>
-      </SbContent>
-    </div>
+    <DoOrDontTag isDont={isDont} />
     <Canvas
       sourceState="none"
       className="h-full m-0 bg-gray-100 rounded-none shadow-none border-none"

diff --git a/docs/components/ResourceLinks/ResourceLinks.tsx b/docs/components/ResourceLinks/ResourceLinks.tsx
@@ -2,8 +2,8 @@ import React, { HTMLAttributes } from "react"
 // eslint-disable-next-line import/no-extraneous-dependencies
 import { Unstyled } from "@storybook/blocks"
 import classNames from "classnames"
-import { ExternalLinkIcon } from "~components/Icon"
 import { Text } from "~components/Text"
+import { Icon } from "~components/__future__/Icon"
 
 type ResourceLinkProps = {
   href: string
@@ -16,15 +16,12 @@ const ResourceLink = ({ href, text }: ResourceLinkProps): JSX.Element => (
       href={href}
       target="_blank"
       rel="noopener noreferrer nofollow"
-      className="border rounded inline-flex items-center p-8 text-blue-400 no-underline"
+      className="border rounded inline-flex gap-4 items-center p-8 text-blue-400 no-underline"
     >
       <Text variant="small" tag="span" classNameOverride="text-inherit">
         {text}
       </Text>
-      <ExternalLinkIcon
-        role="presentation"
-        classNameOverride="ml-4 w-16 h-16"
-      />
+      <Icon name="open_in_new" isPresentational />
     </a>
   </li>
 )

diff --git a/docs/tsconfig.json b/docs/tsconfig.json
@@ -3,6 +3,7 @@
     "baseUrl": ".",
     "jsx": "react",
     "esModuleInterop": true,
+    "resolveJsonModule": true,
     "skipLibCheck": true,
     "paths": {
       "~storybook/*": ["./*"],

diff --git a/package.json b/package.json
@@ -11,7 +11,7 @@
     "dev": "pnpm turbo dev",
     "build": "pnpm turbo build",
     "clean": "pnpm turbo clean && rimraf node_modules && pnpm store prune",
-    "test": "pnpm turbo test",
+    "test": "pnpm turbo test -- --run",
     "lint": "pnpm lint:js && pnpm lint:md && pnpm lint:format && pnpm lint:styles",
     "lint:ts": "pnpm turbo lint:ts",
     "lint:js": "pnpm eslint '**/*.{ts,tsx,mjs,js}' --max-warnings=0",
@@ -20,7 +20,8 @@
     "lint:scss": "pnpm stylelint '**/*.scss' --config .stylelintrc-scss.json",
     "lint:css": "pnpm stylelint '**/*.css' --config .stylelintrc-css.mjs",
     "lint:styles": "pnpm lint:scss && pnpm lint:css",
-    "lint:fix": "pnpm lint:styles --fix && pnpm lint:js --fix && pnpm lint:md --fix && pnpm lint:format --write",
+    "lint:styles:fix": "pnpm lint:scss --fix && pnpm lint:css --fix",
+    "lint:fix": "pnpm lint:styles:fix && pnpm lint:js --fix && pnpm lint:md --fix && pnpm lint:format --write",
     "reset": "pnpm clean && pnpm install --force",
     "chromatic": "chromatic",
     "changeset": "changeset",

diff --git a/packages/components/codemods/README.md b/packages/components/codemods/README.md
@@ -33,3 +33,8 @@ kaizen-codemod src migrateWellVariantToColor
 - `migrateWellVariantToColor`: Migrates `Well` component prop from `variant` to `color`
 - `removeInputEditModalMood`: Removes `InputEditModal` component prop `mood`
 - `removePopoverVariant`: Removes `Popover` component props `variant` and `customIcon`
+- `upgradeIconV1`: Migrates `*Icon` components to a new equivalent
+  - `CaMonogramIcon` becomes `Brand`
+  - `SpinnerIcon` becomes `LoadingSpinner`
+  - All other Icons become future `Icon`
+    - **Note:** See [Icon API Specification (Future)](https://cultureamp.design/?path=/docs/illustrations-icon-icon-future-api-specification--docs) for setup instructions