Merge pull request #1811 from chanzuckerberg/release-v13.7.1

### [13.7.1](v13.7.0...v13.7.1) (2023-11-16)

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

### Bug Fixes

* update Node types for Node 20 ([115ef19](115ef19))

### Documentation

* Documentation improvements to widely-used components

.github/CODEOWNERS

@@ -1,5 +1,5 @@
 # Overview: https://help.github.com/en/github/creating-cloning-and-archiving-repositories/about-code-owners
 # Any line with invalid syntax will invalidate the entire file.
 
-# Developer Foundations Team
-package.json @chanzuckerberg/edu-dev-foundations
+# Education Shared Infrastructure Team
+package.json @chanzuckerberg/edu-shared-infra

.node-version

@@ -1 +1 @@
-18.15.0
+20.9.0

.storybook/data/tokens.json

@@ -513,10 +513,10 @@
   "eds-theme-typography-tab-sm-active": "var(--eds-typography-preset-009)",
   "eds-theme-typography-tag": "var(--eds-typography-preset-009)",
   "eds-theme-box-button-border-radius": "4px",
-  "eds-theme-box-focus-ring-outline-width": "var(--eds-outline-width-sm)",
-  "eds-theme-box-focus-ring-outline-offset": "var(--eds-outline-width-md)",
+  "eds-theme-box-focus-ring-outline-width": "1px",
+  "eds-theme-box-focus-ring-outline-offset": "2px",
   "eds-theme-form-border-width": "1px",
   "eds-theme-form-border-radius": "4px",
-  "eds-theme-size-slider-track-height": "var(--eds-size-1)",
-  "eds-theme-size-slider-thumb": "var(--eds-size-3)"
+  "eds-theme-size-slider-track-height": "var(--eds-size-base-unit)",
+  "eds-theme-size-slider-thumb": "calc(var(--eds-size-base-unit) * 3)"
 }

.storybook/pages/WireframeDemo/WireframeDemo.stories.ts

@@ -20,6 +20,6 @@ export const WatchPage: StoryObj<Args> = {
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
     const nextPageButton = await canvas.findByText('Hogwarts');
-    userEvent.click(nextPageButton);
+    await userEvent.click(nextPageButton);
   },
 };

.stylelintignore

@@ -0,0 +1,2 @@
+# Ignore this file, as it uses token references instead of hard-coded values
+src/tokens-dist/css/variables.css

.stylelintrc

@@ -12,6 +12,7 @@
     "custom-property-empty-line-before": "never",
     "max-nesting-depth": 2,
     "no-descending-specificity": null,
+    "media-query-no-invalid": null,
     "selector-class-pattern": null,
     "selector-pseudo-class-no-unknown": [
       true,

.yarnrc.yml

@@ -1,9 +1,7 @@
-nodeLinker: node-modules
+compressionLevel: mixed
+
+enableGlobalCache: false
 
-plugins:
-  - path: .yarn/plugins/@yarnpkg/plugin-workspace-tools.cjs
-    spec: "@yarnpkg/plugin-workspace-tools"
-  - path: .yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs
-    spec: "@yarnpkg/plugin-interactive-tools"
+nodeLinker: node-modules
 
-yarnPath: .yarn/releases/yarn-3.6.4.cjs
+yarnPath: .yarn/releases/yarn-4.0.2.cjs

CHANGELOG.md

@@ -2,6 +2,13 @@
 
 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.
 
+### [13.7.1](https://github.com/chanzuckerberg/edu-design-system/compare/v13.7.0...v13.7.1) (2023-11-16)
+
+
+### Bug Fixes
+
+* update Node types for Node 20 ([115ef19](https://github.com/chanzuckerberg/edu-design-system/commit/115ef19ccef4d9615d9ddaabc298eeee4bfcbbe7))
+
 ## [13.7.0](https://github.com/chanzuckerberg/edu-design-system/compare/v13.6.1...v13.7.0) (2023-11-06)
 
 

bin/eds-apply-theme.js

@@ -47,6 +47,7 @@
             destination: 'app-theme.css',
             options: {
               fileHeader: 'cssOverrideHeader',
+              outputReferences: true,
             },
             filter: function (token) {
               // don't allow theming on legacy tokens

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@chanzuckerberg/eds",
-  "version": "13.7.0",
+  "version": "13.7.1",
   "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",
@@ -51,7 +51,7 @@
     "create-component": "plop",
     "lint": "yarn run lint:styles && yarn run lint:scripts",
     "lint:fix": "yarn run lint:styles:fix && yarn run lint:scripts:fix",
-    "lint:styles": "stylelint --ignore-path .gitignore src/**/*.css .storybook/**/*.css",
+    "lint:styles": "stylelint src/**/*.css .storybook/**/*.css",
     "lint:styles:fix": "yarn run lint:styles --fix",
     "lint:scripts": "eslint --ignore-path .gitignore --ext=js,jsx,ts,tsx .",
     "lint:scripts:fix": "yarn run lint:scripts --fix",
@@ -91,8 +91,8 @@
     "@headlessui/react": "^1.7.17",
     "@popperjs/core": "^2.11.8",
     "@tippyjs/react": "^4.2.6",
-    "@types/lodash": "^4.14.200",
-    "clsx": "^1.2.1",
+    "@types/lodash": "^4.14.201",
+    "clsx": "^2.0.0",
     "graphemer": "^1.4.0",
     "lilconfig": "^2.1.0",
     "lodash": "^4.17.21",
@@ -106,90 +106,88 @@
     "svg4everybody": "^2.1.9"
   },
   "devDependencies": {
-    "@babel/preset-env": "^7.23.2",
-    "@babel/preset-react": "^7.22.15",
-    "@babel/preset-typescript": "^7.23.2",
-    "@chanzuckerberg/axe-storybook-testing": "^7.1.2",
+    "@babel/preset-env": "^7.23.3",
+    "@babel/preset-react": "^7.23.3",
+    "@babel/preset-typescript": "^7.23.3",
+    "@chanzuckerberg/axe-storybook-testing": "^7.1.3",
     "@chanzuckerberg/eslint-config-edu-js": "^1.1.0",
     "@chanzuckerberg/eslint-config-edu-ts": "^1.0.9",
     "@chanzuckerberg/eslint-plugin-edu-react": "^1.1.9",
     "@chanzuckerberg/eslint-plugin-stories": "^3.2.14",
-    "@chanzuckerberg/prettier-config-edu": "^1.0.5",
     "@chanzuckerberg/story-utils": "^4.0.0",
-    "@commitlint/cli": "^17.8.1",
-    "@commitlint/config-conventional": "^17.8.1",
+    "@commitlint/cli": "^18.4.1",
+    "@commitlint/config-conventional": "^18.4.0",
     "@geometricpanda/storybook-addon-badges": "^2.0.0",
     "@omlet/cli": "^1.0.1-beta.38",
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@rollup/plugin-typescript": "^11.1.5",
     "@size-limit/file": "^8.2.6",
-    "@storybook/addon-a11y": "^7.5.2",
-    "@storybook/addon-docs": "^7.5.2",
-    "@storybook/addon-essentials": "^7.5.2",
-    "@storybook/addon-interactions": "^7.5.2",
-    "@storybook/addon-links": "^7.5.2",
+    "@storybook/addon-a11y": "^7.5.3",
+    "@storybook/addon-docs": "^7.5.3",
+    "@storybook/addon-essentials": "^7.5.3",
+    "@storybook/addon-interactions": "^7.5.3",
+    "@storybook/addon-links": "^7.5.3",
     "@storybook/addon-styling": "^1.3.7",
-    "@storybook/react": "^7.5.2",
-    "@storybook/react-webpack5": "^7.5.2",
-    "@storybook/testing-library": "^0.2.0",
+    "@storybook/react": "^7.5.3",
+    "@storybook/react-webpack5": "^7.5.3",
+    "@storybook/testing-library": "^0.2.2",
     "@storybook/testing-react": "^2.0.1",
-    "@testing-library/jest-dom": "^5.17.0",
-    "@testing-library/react": "^14.0.0",
+    "@testing-library/jest-dom": "^6.1.4",
+    "@testing-library/react": "^14.1.0",
     "@testing-library/user-event": "^14.5.1",
-    "@types/jest": "^29.5.7",
-    "@types/node": "^18.18.8",
-    "@types/react": "^18.2.34",
-    "@types/react-beautiful-dnd": "^13.1.6",
-    "@types/react-dom": "^18.2.14",
-    "@types/react-portal": "^4.0.5",
+    "@types/jest": "^29.5.8",
+    "@types/node": "^20.9.0",
+    "@types/react": "^18.2.37",
+    "@types/react-beautiful-dnd": "^13.1.7",
+    "@types/react-dom": "^18.2.15",
+    "@types/react-portal": "^4.0.6",
     "axe-core": "4.8.2",
-    "chromatic": "^6.24.1",
+    "chromatic": "^9.0.0",
     "codecov": "^3.8.3",
     "copyfiles": "^2.4.1",
-    "eslint": "^8.52.0",
-    "eslint-config-prettier": "^8.10.0",
+    "eslint": "^8.53.0",
+    "eslint-config-prettier": "^9.0.0",
     "eslint-plugin-jest": "^27.6.0",
-    "eslint-plugin-prettier": "^4.2.1",
-    "eslint-plugin-storybook": "^0.6.13",
-    "eslint-plugin-testing-library": "^5.11.1",
+    "eslint-plugin-prettier": "^5.0.1",
+    "eslint-plugin-storybook": "^0.6.15",
+    "eslint-plugin-testing-library": "^6.1.2",
     "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",
-    "pascal-case": "^3.1.2",
-    "plop": "^3.1.2",
+    "plop": "^4.0.0",
     "postcss": "^8.4.31",
     "postcss-cli": "^10.1.0",
     "postcss-import": "^15.1.0",
     "postcss-mixins": "^9.0.4",
     "postcss-nested": "^6.0.1",
     "postcss-simple-vars": "^7.0.1",
-    "prettier": "^2.8.8",
+    "prettier": "^3.1.0",
+    "prettier-plugin-tailwindcss": "^0.5.7",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "rollup": "^3.29.4",
+    "rollup": "^4.4.0",
     "rollup-plugin-postcss": "^4.0.2",
     "size-limit": "^8.2.6",
-    "snake-case": "^3.0.4",
     "standard-version": "^9.5.0",
-    "storybook": "^7.5.2",
+    "storybook": "^7.5.3",
     "style-dictionary": "^3.9.0",
     "stylelint": "^15.11.0",
-    "stylelint-config-recommended": "^10.0.1",
+    "stylelint-config-recommended": "^13.0.0",
     "tailwindcss": "^3.3.5",
     "ts-jest": "^29.1.1",
-    "typescript": "^4.9.5"
+    "typescript": "^5.2.2"
   },
   "lint-staged": {
     "*.{js,jsx,ts,tsx}": [
       "prettier --write",
       "eslint --fix"
     ],
     "*.css": [
-      "stylelint --fix"
+      "stylelint --fix --allow-empty-input"
     ]
   },
-  "packageManager": "yarn@3.6.4"
+  "packageManager": "yarn@4.0.2"
 }

plop-templates/Component/Component.tsx.hbs

@@ -12,7 +12,7 @@ export interface Props {
 /**
  * BETA: This component is still a work in progress and is subject to change.
  *
- * `import {{inBraces name}} from "@chanzuckerberg/eds";`
+ * `import {{inBraces (pascalCase name)}} from "@chanzuckerberg/eds";`
  *
  * TODO: update this comment with a description of the component.
  */

plopfile.js

@@ -1,5 +1,4 @@
-const pascalCase = require('pascal-case');
-const { snakeCase } = require('snake-case');
+const { snakeCase } = require('lodash');
 
 module.exports = (plop) => {
   plop.setHelper('spacedUpperCase', (txt) =>
@@ -8,7 +7,7 @@ module.exports = (plop) => {
 
   // This helper allows us to place a variable inside curly braces without spaces
   // between the text and the braces.
-  plop.setHelper('inBraces', (txt) => `{${pascalCase.pascalCase(txt)}}`);
+  plop.setHelper('inBraces', (txt) => `{${txt}}`);
 
   plop.setGenerator('component', {
     description: 'Create a reusable component',
@@ -27,8 +26,8 @@ module.exports = (plop) => {
       },
       {
         type: 'add',
-        path: 'src/components/{{pascalCase name}}/{{pascalCase name}}.stories.tsx',
-        templateFile: 'plop-templates/Component/Component.stories.tsx.hbs',
+        path: 'src/components/{{pascalCase name}}/{{pascalCase name}}.stories.ts',
+        templateFile: 'plop-templates/Component/Component.stories.ts.hbs',
       },
       {
         type: 'add',

prettier.config.js

@@ -1,9 +1,12 @@
-const config = require('@chanzuckerberg/prettier-config-edu');
-
 module.exports = {
-  ...config,
+  // Shared Edu config from https://github.com/chanzuckerberg/edu-libs/tree/main/packages/prettier-config-edu.
+  // Copied here, because EDS is open source and can't use the private package directly.
+  arrowParens: 'always',
+  plugins: ['prettier-plugin-tailwindcss'],
+  singleQuote: true,
+  trailingComma: 'all',
 
-  // Override of our shared config. Should we remove this and use the same config as our other
+  // Override of our shared config. Should we change this and use the same config as our other
   // repos? Doing so would result in a large diff (every file would be updated).
   bracketSpacing: true,
 };