Merge pull request #2044 from chanzuckerberg/release-v15.3.0

## [15.3.0](v15.2.1...v15.3.0) (2024-08-23)

[Storybook](https://61313967cde49b003ae2a860-vuzmfnjuoj.chromatic.com/)

Figma Components Library:
🟢  No breaking changes
- EDS-toastNotification:
  - deleted the dissmissType property
  - Added Toast Pattern documentation to handle multiple toasts
- EDS-popover: added EDS-popover 2.0 component

### Features

* **config:** add transition durations for tailwind ([#2036](#2036)) ([aed0f09](aed0f09))
* **Popover:** update theming to 2.0 ([#2031](#2031)) ([c5ab351](c5ab351))
* **tokens:** add in additional table tokens ([#2035](#2035)) ([a698a5b](a698a5b))
* **tokens:** update visited tokens ([#2034](#2034)) ([df84c87](df84c87))


### Bug Fixes

* **Card:** add spacing between eyebrow and title ([#2040](#2040)) ([d6ee15d](d6ee15d))
* **Link:** handle inverse variant for standalone links ([#2042](#2042)) ([351d7fd](351d7fd))
* **Popover:** update component version number ([#2038](#2038)) ([9940d76](9940d76))

Author: booc0mtaco

.storybook/components/DesignTokens/Tier2/Colors.stories.tsx

@@ -54,22 +54,6 @@ export const TextUtility: StoryObj = {
   ),
 };
 
-export const IconUtility: StoryObj = {
-  render: () => (
-    <div>
-      <Section title="Icon Colors (utility)">
-        <ColorList
-          listItems={getListItems({
-            filterTerm: 'eds-theme-color-icon-utility',
-            figmaTokenHeader: 'icon',
-            tailwindClassHeader: 'text-icon-utility',
-          })}
-        />
-      </Section>
-    </div>
-  ),
-};
-
 export const BackgroundUtility: StoryObj = {
   render: () => (
     <div>

.storybook/components/DesignTokens/Tier3/Colors.stories.tsx

@@ -0,0 +1,72 @@
+import type { StoryObj } from '@storybook/react';
+import React from 'react';
+import filterTokens from '../../../util/filterTokens';
+import { ColorList } from '../../ColorList/ColorList';
+import Section from '../../Section';
+
+export default {
+  title: 'Design Tokens/Tier 3: Component/Colors',
+  parameters: {
+    axe: {
+      // For documentation purposes only
+      skip: true,
+    },
+  },
+};
+
+const camelCaseWarning =
+  'NOTE: table tokens have a camelCase suffix for the emphasis (e.g., tableRow)';
+
+const getListItems = ({
+  filterTerm,
+  figmaTokenHeader,
+  tailwindClassHeader,
+}: {
+  filterTerm: string;
+  figmaTokenHeader: string;
+  tailwindClassHeader: string;
+}) =>
+  filterTokens(filterTerm).map(({ name, value }) => {
+    const specifier = name.slice(
+      name.indexOf(filterTerm) + filterTerm.length + 1,
+    );
+    return {
+      name,
+      value,
+      figmaToken: figmaTokenHeader + '/' + specifier,
+      tailwindClass: tailwindClassHeader + '-' + specifier,
+    };
+  });
+
+export const IconUtility: StoryObj = {
+  render: () => (
+    <div>
+      <Section title="Icon Colors (utility)">
+        <ColorList
+          listItems={getListItems({
+            filterTerm: 'eds-theme-color-icon-utility',
+            figmaTokenHeader: 'icon',
+            tailwindClassHeader: 'text-icon-utility',
+          })}
+        />
+      </Section>
+    </div>
+  ),
+};
+
+// TODO: handle name formatting for tableRow tokens in figma and tailwind
+export const BackgroundTable: StoryObj = {
+  render: () => (
+    <div>
+      <Section description={camelCaseWarning} title="Background Colors (Table)">
+        <ColorList
+          listItems={getListItems({
+            filterTerm: 'eds-theme-color-background-table',
+            figmaTokenHeader: 'background',
+            tailwindClassHeader: 'bg-table',
+          })}
+        />
+      </Section>
+    </div>
+  ),
+};

.storybook/components/Docs/Guidelines/Theming.mdx

@@ -40,15 +40,15 @@ for which utility classes to use when you need color tokens (in order of prefere
 These map to the higher-tier token names, and are semantic- (or component-) based. 
 
 ```tsx
-<div className="text-utility-interactive-visited">Option 1</div>
+<div className="text-utility-interactive-primary-visited">Option 1</div>
 ```
 
 #### ✅ Token name referecnes as custom utility classes
 
 If there is no existing utility class for the use case, you can reference the token directly in a class. While less preferable to the above, this still plugs into EDS.
 
 ```tsx
-<div className="bg-[var(--eds-theme-color-text-utility-interactive-visited)]">Option 2</div>
+<div className="bg-[var(--eds-theme-color-text-utility-interactive-primary-visited)]">Option 2</div>
 ```
 
 Cons:

.storybook/data/tokens.json

@@ -191,6 +191,9 @@
   "eds-theme-color-background-brand-purple": "#C580E7",
   "eds-theme-color-background-brand-purple-low-emphasis": "#FBF5FD",
   "eds-theme-color-background-brand-pink": "#DB458D",
+  "eds-theme-color-background-table-row-stripe-1": "#F5FAFF",
+  "eds-theme-color-background-table-row-stripe-2": "rgb(var(--eds-color-white) / 1)",
+  "eds-theme-color-background-table-row-selected": "#CEE6FF",
   "eds-theme-color-background-utility-base-1": "rgb(var(--eds-color-white) / 1)",
   "eds-theme-color-background-utility-base-2": "#FDF9F8",
   "eds-theme-color-background-utility-container": "rgb(var(--eds-color-white) / 1)",
@@ -492,9 +495,11 @@
   "eds-theme-color-icon-utility-interactive-primary": "#0F2163",
   "eds-theme-color-icon-utility-interactive-primary-hover": "#0A164C",
   "eds-theme-color-icon-utility-interactive-primary-active": "#060E30",
+  "eds-theme-color-icon-utility-interactive-primary-visited": "#0F2163",
   "eds-theme-color-icon-utility-interactive-secondary": "#3165D2",
   "eds-theme-color-icon-utility-interactive-secondary-hover": "#254EAC",
   "eds-theme-color-icon-utility-interactive-secondary-active": "#1B3889",
+  "eds-theme-color-icon-utility-interactive-secondary-visited": "#3165D2",
   "eds-theme-color-icon-utility-interactive-visited": "#8A50A7",
   "eds-theme-color-icon-utility-critical": "#A51115",
   "eds-theme-color-icon-utility-critical-hover": "#7D0A16",
@@ -555,9 +560,11 @@
   "eds-theme-color-text-utility-interactive-primary": "#0F2163",
   "eds-theme-color-text-utility-interactive-primary-hover": "#0A164C",
   "eds-theme-color-text-utility-interactive-primary-active": "#060E30",
+  "eds-theme-color-text-utility-interactive-primary-visited": "#0F2163",
   "eds-theme-color-text-utility-interactive-secondary": "#3165D2",
   "eds-theme-color-text-utility-interactive-secondary-hover": "#254EAC",
   "eds-theme-color-text-utility-interactive-secondary-active": "#1B3889",
+  "eds-theme-color-text-utility-interactive-secondary-visited": "#3165D2",
   "eds-theme-color-text-utility-interactive-visited": "#8A50A7",
   "eds-theme-color-text-utility-critical": "#A51115",
   "eds-theme-color-text-utility-critical-hover": "#7D0A16",
@@ -575,7 +582,7 @@
   "eds-theme-color-text-utility-disabled-secondary": "#CFC9C7",
   "eds-theme-color-text-utility-inverse": "rgb(var(--eds-color-white) / 1)",
   "eds-theme-color-text-utility-inverse-disabled": "rgb(var(--eds-color-white) / 0.5)",
-  "eds-theme-color-text-utility-inverse-interactive-visited": "#C580E7",
+  "eds-theme-color-text-utility-inverse-interactive-visited": "rgb(var(--eds-color-white) / 1)",
   "eds-theme-color-text-utility-placeholder": "#6C6967",
   "eds-theme-color-text-utility-success": "#007249",
   "eds-theme-color-text-utility-error": "#BD0044",
@@ -718,6 +725,7 @@
   "eds-color-blue-850": "#0F2163",
   "eds-color-blue-900": "#0A164C",
   "eds-color-blue-950": "#060E30",
+  "eds-color-blue-025": "#F5FAFF",
   "eds-color-blue-050": "#EAF4FF",
   "eds-color-pink-350": "#E67EB0",
   "eds-color-pink-450": "#DB458D",

.yarn/releases/yarn-4.3.1.cjs

@@ -4,4 +4,4 @@ enableGlobalCache: false
 
 nodeLinker: node-modules
 
-yarnPath: .yarn/releases/yarn-4.3.1.cjs
+yarnPath: .yarn/releases/yarn-4.4.0.cjs

.yarn/releases/yarn-4.4.0.cjs

@@ -2,6 +2,23 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+## [15.3.0](https://github.com/chanzuckerberg/edu-design-system/compare/v15.2.1...v15.3.0) (2024-08-23)
+
+
+### Features
+
+* **config:** add transition durations for tailwind ([#2036](https://github.com/chanzuckerberg/edu-design-system/issues/2036)) ([aed0f09](https://github.com/chanzuckerberg/edu-design-system/commit/aed0f0941d9d09f8a7b96f2219f6801eefa4ee50))
+* **Popover:** update theming to 2.0 ([#2031](https://github.com/chanzuckerberg/edu-design-system/issues/2031)) ([c5ab351](https://github.com/chanzuckerberg/edu-design-system/commit/c5ab3515e1bfe8eafde89ec308547b6d34e0b44d))
+* **tokens:** add in additional table tokens ([#2035](https://github.com/chanzuckerberg/edu-design-system/issues/2035)) ([a698a5b](https://github.com/chanzuckerberg/edu-design-system/commit/a698a5b4a65af8a7dffa7da908be9d7e05ffc570))
+* **tokens:** update visited tokens ([#2034](https://github.com/chanzuckerberg/edu-design-system/issues/2034)) ([df84c87](https://github.com/chanzuckerberg/edu-design-system/commit/df84c87ecd2ad34b37b90d6774bea284da50d045))
+
+
+### Bug Fixes
+
+* **Card:** add spacing between eyebrow and title ([#2040](https://github.com/chanzuckerberg/edu-design-system/issues/2040)) ([d6ee15d](https://github.com/chanzuckerberg/edu-design-system/commit/d6ee15d71d9f3df76fe68f1639ac1e442e6cd686))
+* **Link:** handle inverse variant for standalone links ([#2042](https://github.com/chanzuckerberg/edu-design-system/issues/2042)) ([351d7fd](https://github.com/chanzuckerberg/edu-design-system/commit/351d7fd850196c44da17985b82d8f150fd37a62b))
+* **Popover:** update component version number ([#2038](https://github.com/chanzuckerberg/edu-design-system/issues/2038)) ([9940d76](https://github.com/chanzuckerberg/edu-design-system/commit/9940d76d6ac60e112dee2e39d227bbb695057564))
+
 ### [15.2.1](https://github.com/chanzuckerberg/edu-design-system/compare/v15.2.0...v15.2.1) (2024-08-09)
 
 

.yarnrc.yml

@@ -85,22 +85,22 @@ Once merged, wait until the [builds complete on `main`](https://github.com/chanz
 
 8. Pull down the most up-to-date version of main: `git checkout main && git pull && yarn install && yarn build`
 9. Publish the package: `npm publish`
-10. Create a [new release](https://github.com/chanzuckerberg/edu-design-system/releases) based on the new tag. Use the same text used for the pull request description above (from CHANGELOG.md). Also include the link for the built storybook in the description. This will automatically post to [relevant slack channels](https://slack.github.com/). **When doing a major version release, don't forget to include notes on each breaking change**. Also, enable the discussion feature to handle any question-answering should questions arise.
+10. Create a [new release](https://github.com/chanzuckerberg/edu-design-system/releases) based on the newly-created tag.
 
-When naming the release, include the package name before the version number in the release name field (e.g., "@chanzuckerberg/eds vX.X.X")
+To prepare the message:
+
+* Include the package name before the version number in the release name field (e.g., "@chanzuckerberg/eds@X.Y.Z")
+* Use the same text used for the pull request description above (from CHANGELOG.md).
+* Include any additional notes from the [System Designers](https://github.com/orgs/chanzuckerberg/teams/edu-systems-designers).
+* Include the link for the built storybook in the description.
+
+The latter will automatically post to [relevant slack channels](https://slack.github.com/). **When doing a major version release, don't forget to include notes on each breaking change**.
 
 #### Finishing the release
 
 11. Lastly, run the following to "back merge" release changes to `next`:
     - `git checkout main && git pull origin main && git checkout next && git merge main && git push`
 
-Once complete, you can update the package in the main apps that use it (for major versions):
-
-- [edu-stack](https://github.com/chanzuckerberg/edu-stack) - in the package.json
-- [edu-stack-service](https://github.com/chanzuckerberg/edu-stack-service) - in the package.json
-
-Take note of the details here, which will also be mentioned in that month's newsletter, and updates to ZeroHeight (What's New).
-
 #### Alpha release
 
 For testing a release to build confidence.

CHANGELOG.md

@@ -1,6 +1,6 @@
 {
   "name": "@chanzuckerberg/eds",
-  "version": "15.2.1",
+  "version": "15.3.0",
   "description": "The React-powered design system library for Chan Zuckerberg Initiative education web applications",
   "author": "CZI <[email protected]>",
   "homepage": "https://github.com/chanzuckerberg/edu-design-system",
@@ -125,53 +125,53 @@
     "@commitlint/cli": "^18.6.1",
     "@commitlint/config-conventional": "^18.6.3",
     "@geometricpanda/storybook-addon-badges": "^2.0.2",
-    "@omlet/cli": "^1.10.1",
+    "@omlet/cli": "^1.10.2",
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@rollup/plugin-typescript": "^11.1.6",
     "@size-limit/file": "^8.2.6",
-    "@storybook/addon-a11y": "^8.2.7",
-    "@storybook/addon-essentials": "^8.2.7",
-    "@storybook/addon-interactions": "^8.2.7",
-    "@storybook/addon-links": "^8.2.7",
-    "@storybook/addon-mdx-gfm": "^8.2.7",
+    "@storybook/addon-a11y": "^8.2.9",
+    "@storybook/addon-essentials": "^8.2.9",
+    "@storybook/addon-interactions": "^8.2.9",
+    "@storybook/addon-links": "^8.2.9",
+    "@storybook/addon-mdx-gfm": "^8.2.9",
     "@storybook/addon-styling": "^1.3.7",
     "@storybook/addon-webpack5-compiler-babel": "^3.0.3",
-    "@storybook/manager-api": "^8.2.7",
-    "@storybook/react": "^8.2.7",
-    "@storybook/react-webpack5": "^8.2.7",
-    "@storybook/test": "^8.2.7",
+    "@storybook/manager-api": "^8.2.9",
+    "@storybook/react": "^8.2.9",
+    "@storybook/react-webpack5": "^8.2.9",
+    "@storybook/test": "^8.2.9",
     "@storybook/testing-library": "^0.2.2",
-    "@storybook/theming": "^8.2.7",
+    "@storybook/theming": "^8.2.9",
     "@testing-library/jest-dom": "^6.4.8",
     "@testing-library/react": "^16.0.0",
     "@testing-library/user-event": "^14.5.2",
     "@types/jest": "^29.5.12",
     "@types/jsonfile": "^6",
     "@types/lodash": "^4.17.7",
-    "@types/node": "^20.14.14",
+    "@types/node": "^20.14.15",
     "@types/react": "^18.3.3",
     "@types/react-beautiful-dnd": "^13.1.8",
     "@types/react-dom": "^18.3.0",
     "@types/react-portal": "^4.0.7",
-    "@types/yargs": "^17.0.32",
+    "@types/yargs": "^17.0.33",
     "axe-core": "4.10.0",
-    "chromatic": "^11.7.0",
+    "chromatic": "^11.7.1",
     "codecov": "^3.8.3",
     "copyfiles": "^2.4.1",
     "eslint": "^8.57.0",
     "eslint-config-prettier": "^9.0.0",
     "eslint-plugin-jest": "^27.9.0",
     "eslint-plugin-prettier": "^5.0.1",
     "eslint-plugin-storybook": "^0.8.0",
-    "eslint-plugin-testing-library": "^6.2.2",
+    "eslint-plugin-testing-library": "^6.3.0",
     "husky": "^8.0.3",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "jest-preset-stylelint": "^6.3.2",
     "lint-staged": "^13.3.0",
     "plop": "^4.0.1",
-    "postcss": "^8.4.40",
+    "postcss": "^8.4.41",
     "postcss-cli": "^10.1.0",
     "postcss-import": "^15.1.0",
     "postcss-mixins": "^9.0.4",
@@ -181,15 +181,15 @@
     "prettier-plugin-tailwindcss": "^0.5.7",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "rollup": "^4.19.2",
+    "rollup": "^4.20.0",
     "rollup-plugin-postcss": "^4.0.2",
     "size-limit": "^8.2.6",
     "standard-version": "^9.5.0",
-    "storybook": "^8.2.7",
+    "storybook": "^8.2.9",
     "style-dictionary": "^3.9.2",
     "stylelint": "^15.11.0",
     "stylelint-config-recommended": "^13.0.0",
-    "tailwindcss": "^3.4.7",
+    "tailwindcss": "^3.4.10",
     "ts-jest": "^29.2.4",
     "typescript": "^5.5.4"
   },
@@ -202,5 +202,5 @@
       "stylelint --fix --allow-empty-input"
     ]
   },
-  "packageManager": "yarn@4.3.1"
+  "packageManager": "yarn@4.4.0"
 }

docs/PUBLISHING.md

@@ -92,8 +92,7 @@ export type ButtonProps<ExtendedElement = unknown> = ButtonHTMLElementProps & {
  * or other in-page activity.
  *
  * - If you need to style a navigation anchor, please use the `Link` component.
- * - If you need to style a different element or component to
- *   look like a button or link, you can use the `ClickableStyle` component.
+ * - If you need the button to use some other tag or component, use the `as` prop.
  */
 export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
   (

package.json

@@ -83,6 +83,10 @@
 
 .card__header {
   display: flex;
+
+  & .header__eyebrow {
+    margin-bottom: calc(var(--eds-size-1) / 16 * 1rem);
+  }
 
   &.header--size-sm {
     gap: calc(var(--eds-size-1) / 16 * 1rem)

src/components/Button/Button.tsx

@@ -50,6 +50,10 @@
     text-decoration: none;
   }
 
+  &.link--variant-inverse {
+    color: var(--eds-theme-color-text-utility-inverse);
+  }
+
   /**
    * Sizes - using the presets for type ramp matching body-*
    */
@@ -114,7 +118,7 @@
 }
 
 .link:visited {
-  color: var(--eds-theme-color-text-utility-interactive-visited);
+  color: var(--eds-theme-color-text-utility-interactive-primary-visited);
 }
 
 .link:focus-visible {