Merge pull request #1740 from chanzuckerberg/release-v13.1.1

### [13.1.1](v13.1.0...v13.1.1) (2023-09-01)


### Bug Fixes

* generate valid tab ids ([#1737](#1737)) ([d1493ea](d1493ea))
* update deploy docs for storybook 7.x ([#1733](#1733)) ([b3a091e](b3a091e))

Author: booc0mtaco

.github/workflows/docs.yml

@@ -1,29 +1,35 @@
-name: Deploy Docs
+name: Deploy Docs to GH Pages
 
 on:
   push:
     branches:
       - main
 
 jobs:
-  deploy_docs:
+  deploy:
     runs-on: ubuntu-latest
 
     steps:
-      - uses: actions/checkout@v3
-      - name: Setup node 😻
-        uses: actions/setup-node@v3
-        with:
+    - name: Checkout code
+      uses: actions/checkout@v3
+
+    - name: Setup Node
+      uses: actions/setup-node@v3
+      with:
           node-version-file: '.node-version'
           cache: 'yarn'
 
-      - name: Install Dependencies ⬆️
-        run: yarn install --immutable
+    - name: Install Dependencies
+      run: yarn install --immutable
+
+    - name: Build EDS
+      run: yarn build
 
-      - name: Build Dist 🔧
-        run: yarn run build
+    - name: Build Storybook
+      run: yarn build:storybook
 
-      - name: Deploy Storybook Docs 🚀
-        run: yarn run deploy:docs
-        env:
-          GH_TOKEN: '${{ github.actor }}:${{ secrets.GITHUB_TOKEN }}'
+    - name: Deploy Storybook
+      uses: peaceiris/actions-gh-pages@v3
+      with:
+        publish_dir: ./storybook-static
+        github_token: ${{ secrets.GITHUB_TOKEN }}

.yarn/releases/yarn-3.6.2.cjs renamed to .yarn/releases/yarn-3.6.3.cjs

@@ -6,4 +6,4 @@ plugins:
   - path: .yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs
     spec: "@yarnpkg/plugin-interactive-tools"
 
-yarnPath: .yarn/releases/yarn-3.6.2.cjs
+yarnPath: .yarn/releases/yarn-3.6.3.cjs

.yarnrc.yml

@@ -2,6 +2,14 @@
 
 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.1.1](https://github.com/chanzuckerberg/edu-design-system/compare/v13.1.0...v13.1.1) (2023-09-01)
+
+
+### Bug Fixes
+
+* generate valid tab ids ([#1737](https://github.com/chanzuckerberg/edu-design-system/issues/1737)) ([d1493ea](https://github.com/chanzuckerberg/edu-design-system/commit/d1493ea6b1e55f608701c32900c5089fb19f01e3))
+* update deploy docs for storybook 7.x ([#1733](https://github.com/chanzuckerberg/edu-design-system/issues/1733)) ([b3a091e](https://github.com/chanzuckerberg/edu-design-system/commit/b3a091ed6a3636c61e7df926eba98b20ecbaaf20))
+
 ## [13.1.0](https://github.com/chanzuckerberg/edu-design-system/compare/v13.0.0...v13.1.0) (2023-08-23)
 
 

CHANGELOG.md

@@ -1,6 +1,6 @@
 {
   "name": "@chanzuckerberg/eds",
-  "version": "13.1.0",
+  "version": "13.1.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",
@@ -44,7 +44,6 @@
     "chromatic": "chromatic",
     "copy-fonts-to-lib": "copyfiles -u 3 src/design-tokens/tier-1-definitions/fonts.css src/design-tokens/tier-1-definitions/fonts/**/* lib/tokens",
     "create-component": "plop",
-    "deploy:docs": "storybook-to-ghpages --ci",
     "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",
@@ -100,7 +99,7 @@
   "devDependencies": {
     "@babel/preset-env": "^7.22.10",
     "@babel/preset-react": "^7.22.5",
-    "@babel/preset-typescript": "^7.22.5",
+    "@babel/preset-typescript": "^7.22.11",
     "@chanzuckerberg/axe-storybook-testing": "^7.1.2",
     "@chanzuckerberg/eslint-config-edu-js": "^1.1.0",
     "@chanzuckerberg/eslint-config-edu-ts": "^1.0.9",
@@ -112,31 +111,30 @@
     "@commitlint/config-conventional": "^17.7.0",
     "@geometricpanda/storybook-addon-badges": "^2.0.0",
     "@omlet/cli": "^1.0.1-beta.34",
-    "@rollup/plugin-node-resolve": "^15.2.0",
+    "@rollup/plugin-node-resolve": "^15.2.1",
     "@rollup/plugin-typescript": "^11.1.2",
     "@size-limit/file": "^8.2.6",
-    "@storybook/addon-a11y": "^7.3.1",
-    "@storybook/addon-docs": "^7.3.1",
-    "@storybook/addon-essentials": "^7.3.1",
-    "@storybook/addon-interactions": "^7.3.1",
-    "@storybook/addon-links": "^7.3.1",
-    "@storybook/addon-styling": "^1.3.6",
-    "@storybook/react": "^7.3.1",
-    "@storybook/react-webpack5": "^7.3.1",
-    "@storybook/storybook-deployer": "^2.8.16",
+    "@storybook/addon-a11y": "^7.4.0",
+    "@storybook/addon-docs": "^7.4.0",
+    "@storybook/addon-essentials": "^7.4.0",
+    "@storybook/addon-interactions": "^7.4.0",
+    "@storybook/addon-links": "^7.4.0",
+    "@storybook/addon-styling": "^1.3.7",
+    "@storybook/react": "^7.4.0",
+    "@storybook/react-webpack5": "^7.4.0",
     "@storybook/testing-library": "^0.2.0",
     "@storybook/testing-react": "^2.0.1",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^14.4.3",
-    "@types/jest": "^29.5.3",
-    "@types/node": "^18.17.5",
-    "@types/react": "^18.2.20",
+    "@types/jest": "^29.5.4",
+    "@types/node": "^18.17.11",
+    "@types/react": "^18.2.21",
     "@types/react-beautiful-dnd": "^13.1.4",
     "@types/react-dom": "^18.2.7",
     "@types/react-portal": "^4.0.4",
     "axe-core": "4.7.2",
-    "chromatic": "^6.22.0",
+    "chromatic": "^6.24.0",
     "codecov": "^3.8.3",
     "copyfiles": "^2.4.1",
     "eslint": "^8.47.0",
@@ -147,8 +145,8 @@
     "eslint-plugin-testing-library": "^5.11.1",
     "husky": "^8.0.3",
     "identity-obj-proxy": "^3.0.0",
-    "jest": "^29.6.2",
-    "jest-environment-jsdom": "^29.6.2",
+    "jest": "^29.6.4",
+    "jest-environment-jsdom": "^29.6.4",
     "jest-preset-stylelint": "^6.2.0",
     "lint-staged": "^13.3.0",
     "pascal-case": "^3.1.2",
@@ -162,14 +160,14 @@
     "prettier": "^2.8.8",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "rollup": "^3.28.0",
+    "rollup": "^3.28.1",
     "rollup-plugin-postcss": "^4.0.2",
     "size-limit": "^8.2.6",
     "snake-case": "^3.0.4",
     "standard-version": "^9.5.0",
-    "storybook": "^7.3.1",
+    "storybook": "^7.4.0",
     "style-dictionary": "^3.8.0",
-    "stylelint": "^15.10.2",
+    "stylelint": "^15.10.3",
     "stylelint-config-recommended": "^10.0.1",
     "tailwindcss": "^3.3.3",
     "ts-jest": "^29.1.1",
@@ -184,5 +182,5 @@
       "stylelint --fix"
     ]
   },
-  "packageManager": "[email protected].2"
+  "packageManager": "[email protected].3"
 }

package.json

@@ -4,6 +4,7 @@ import { act, render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import React from 'react';
 import * as stories from './Tabs.stories';
+import Tab from '../Tab';
 
 const { Default } = composeStories(stories);
 
@@ -59,4 +60,19 @@ describe('<Tabs />', () => {
     rerender(<Default activeIndex={1} />);
     expect(screen.getByRole('heading', { name: 'Tab 2' })).toBeInTheDocument();
   });
+
+  it('does not include invalid characters in tab ids', () => {
+    render(
+      <Default id="foo">
+        <Tab data-testid="tab-1" title="Tab Title 1">
+          Tab numero uno
+        </Tab>
+      </Default>,
+    );
+
+    expect(screen.getByTestId('tab-1')).toHaveAttribute(
+      'aria-labelledby',
+      'foo-Tab-Title-1',
+    );
+  });
 });

src/components/Tabs/Tabs.test.tsx

@@ -81,7 +81,10 @@ export const Tabs = ({
   const generatedId = useId();
   const tabIdPrefix = other.id || generatedId;
   const tabIds = useMemo(
-    () => tabs.map((tab) => `${tabIdPrefix}-${tab.props.title}`),
+    () =>
+      tabs.map(
+        (tab) => `${tabIdPrefix}-${tab.props.title.replace(/\s/g, '-')}`,
+      ),
     [tabs, tabIdPrefix],
   );
 

src/components/Tabs/Tabs.tsx

@@ -20,7 +20,7 @@ exports[`<Tabs /> Default story renders snapshot 1`] = `
           aria-selected="true"
           class="tabs__link"
           href="#:r0:"
-          id=":r1:-Tab Title 1"
+          id=":r1:-Tab-Title-1"
           role="tab"
           tabindex="0"
         >
@@ -36,7 +36,7 @@ exports[`<Tabs /> Default story renders snapshot 1`] = `
           aria-selected="false"
           class="tabs__link"
           href="#:r0:"
-          id=":r1:-Tab Title 2"
+          id=":r1:-Tab-Title-2"
           role="tab"
           tabindex="-1"
         >
@@ -52,7 +52,7 @@ exports[`<Tabs /> Default story renders snapshot 1`] = `
           aria-selected="false"
           class="tabs__link"
           href="#:r0:"
-          id=":r1:-Tab Title 3"
+          id=":r1:-Tab-Title-3"
           role="tab"
           tabindex="-1"
         >
@@ -68,7 +68,7 @@ exports[`<Tabs /> Default story renders snapshot 1`] = `
           aria-selected="false"
           class="tabs__link"
           href="#:r0:"
-          id=":r1:-Tab Title 4"
+          id=":r1:-Tab-Title-4"
           role="tab"
           tabindex="-1"
         >
@@ -84,7 +84,7 @@ exports[`<Tabs /> Default story renders snapshot 1`] = `
           aria-selected="false"
           class="tabs__link"
           href="#:r0:"
-          id=":r1:-Tab Title 5"
+          id=":r1:-Tab-Title-5"
           role="tab"
           tabindex="-1"
         >
@@ -100,7 +100,7 @@ exports[`<Tabs /> Default story renders snapshot 1`] = `
           aria-selected="false"
           class="tabs__link"
           href="#:r0:"
-          id=":r1:-Tab Title 6"
+          id=":r1:-Tab-Title-6"
           role="tab"
           tabindex="-1"
         >
@@ -116,7 +116,7 @@ exports[`<Tabs /> Default story renders snapshot 1`] = `
           aria-selected="false"
           class="tabs__link"
           href="#:r0:"
-          id=":r1:-Tab Title 7"
+          id=":r1:-Tab-Title-7"
           role="tab"
           tabindex="-1"
         >
@@ -132,7 +132,7 @@ exports[`<Tabs /> Default story renders snapshot 1`] = `
           aria-selected="false"
           class="tabs__link"
           href="#:r0:"
-          id=":r1:-Tab Title 8"
+          id=":r1:-Tab-Title-8"
           role="tab"
           tabindex="-1"
         >
@@ -148,7 +148,7 @@ exports[`<Tabs /> Default story renders snapshot 1`] = `
           aria-selected="false"
           class="tabs__link"
           href="#:r0:"
-          id=":r1:-Tab Title 9"
+          id=":r1:-Tab-Title-9"
           role="tab"
           tabindex="-1"
         >
@@ -160,7 +160,7 @@ exports[`<Tabs /> Default story renders snapshot 1`] = `
   <div>
     <div
       aria-hidden="false"
-      aria-labelledby=":r1:-Tab Title 1"
+      aria-labelledby=":r1:-Tab-Title-1"
       id=":r0:"
       role="tabpanel"
     >