Merge pull request #1498 from chanzuckerberg/release-v9.1.0

chore(release): v9.1.0

.storybook/components/TokenSpecimen/TokenSpecimen.tsx

@@ -5,6 +5,7 @@ import './TokenSpecimen.css';
 type Props = {
  name: string;
  value: any;
+ children?: React.ReactNode;
  comment?: string;
  inlineStyles?: Record<string, string>;
  variant?: string;

.storybook/pages/AlongDemo/AlongDemo.stories.ts

@@ -1,5 +1,5 @@
 import type { StoryObj, Meta } from '@storybook/react';
-import { within } from '@storybook/testing-library';
+import { userEvent, within } from '@storybook/testing-library';
 import type React from 'react';
 
 import { AlongDemo } from './AlongDemo';
@@ -17,6 +17,6 @@ export const WatchPage: StoryObj<Args> = {
  play: async ({ canvasElement }) => {
  const canvas = within(canvasElement);
  const nextPageButton = await canvas.findByText('Hogwarts');
- nextPageButton.click();
+ userEvent.click(nextPageButton);
  },
 };

.storybook/pages/AlongDemo/AlongDemo.tsx

@@ -1,6 +1,5 @@
-import { useId } from '@reach/auto-id';
 import clsx from 'clsx';
-import React, { useState } from 'react';
+import React, { useId, useState } from 'react';
 
 import styles from './AlongDemo.module.css';
 import globalStyles from './GlobalStyles.module.css';

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

@@ -1,5 +1,5 @@
 import type { StoryObj, Meta } from '@storybook/react';
-import { within } from '@storybook/testing-library';
+import { userEvent, within } from '@storybook/testing-library';
 import type React from 'react';
 
 import { WireframeDemo } from './WireframeDemo';
@@ -20,6 +20,6 @@ export const WatchPage: StoryObj<Args> = {
  play: async ({ canvasElement }) => {
  const canvas = within(canvasElement);
  const nextPageButton = await canvas.findByText('Hogwarts');
- nextPageButton.click();
+ userEvent.click(nextPageButton);
  },
 };

.storybook/pages/WireframeDemo/WireframeDemo.tsx

@@ -1,6 +1,5 @@
-import { useId } from '@reach/auto-id';
 import clsx from 'clsx';
-import React, { useState } from 'react';
+import React, { useId, useState } from 'react';
 
 import globalStyles from './GlobalStyles.module.css';
 import styles from './WireframeDemo.module.css';

CHANGELOG.md

@@ -2,6 +2,15 @@
 
 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.
 
+## [9.1.0](https://github.com/chanzuckerberg/edu-design-system/compare/v9.0.0...v9.1.0) (2023-02-16)
+
+
+### Features
+
+* bump to React 18 ([#1497](https://github.com/chanzuckerberg/edu-design-system/issues/1497)) ([d44b3db](https://github.com/chanzuckerberg/edu-design-system/commit/d44b3db4a1f683538daf74b0434e69d6df80620a))
+* bump to user-event v14 ([#1497](https://github.com/chanzuckerberg/edu-design-system/issues/1497)) ([d44b3db](https://github.com/chanzuckerberg/edu-design-system/commit/d44b3db4a1f683538daf74b0434e69d6df80620a))
+* remove reach/auto-id ([#1497](https://github.com/chanzuckerberg/edu-design-system/issues/1497)) ([d44b3db](https://github.com/chanzuckerberg/edu-design-system/commit/d44b3db4a1f683538daf74b0434e69d6df80620a))
+
 ## [9.0.0](https://github.com/chanzuckerberg/edu-design-system/compare/v8.0.0...v9.0.0) (2023-02-14)
 
 

docs/CODE_GUIDELINES.md

@@ -567,6 +567,7 @@ EDS follows specific front-end API naming conventions. Authoring a consistent AP
 EDS adheres to the following API naming conventions:
 
 ### Variants
+
 The default option should be the one most commonly used in order to reduce friction for developers using the components.
 
 - `variant` should be used for primary _stylistic_ variations of a component, such as (e.g. `<Card variant="bordered">` or `<Button variant="secondary">`). `variant` should be used if there is primarily one variable used to manipulate the component style.
@@ -596,16 +597,10 @@ The default option should be the one most commonly used in order to reduce frict
 
 ID attributes used for accessibility (e.g. associating `<label>` and `<input>` elements) should be unique and stable.
 
-We currently use [@reach/auto-id](https://www.npmjs.com/package/@reach/auto-id) `useId` hook for ID generation. To ensure stable results, they cannot be invoked within conditionals or callbacks.
-
-- `useId()` is the most common usage.
+We currently use the [`useId` hook](https://reactjs.org/docs/hooks-reference.html#useid) for ID generation. To ensure stable results, they cannot be invoked within conditionals or callbacks.
 
 ```tsx
 const generatedId = useId();
-
-// ensuring the id is of type string
-const generatedId = useId(props.id);
-const checkboxId = String(generatedId);
 ```
 
 ## Tools <a name="accessibility-tools"></a>

jest/jest.setup.ts

@@ -1,19 +1 @@
 import '@testing-library/jest-dom';
-import { format } from 'util';
-
-/**
- * Ensure `console.error` calls throw an error in tests
- */
-function throwOnConsoleError() {
- console.error = function (...args: unknown[]) {
- const [firstArg, ...restArgs] = args;
-
- if (firstArg instanceof Error) {
- throw firstArg;
- }
-
- throw new Error(format(firstArg, ...restArgs));
- };
-}
-
-throwOnConsoleError();

package.json

@@ -1,6 +1,6 @@
 {
  "name": "@chanzuckerberg/eds",
- "version": "9.0.0",
+ "version": "9.1.0",
  "description": "The React-powered design system library for Chan Zuckerberg Initiative education web applications",
  "author": "CZI <edu-frontend-infra@chanzuckerberg.com>",
  "homepage": "https://github.com/chanzuckerberg/edu-design-system",
@@ -76,12 +76,11 @@
  }
  ],
  "peerDependencies": {
- "react": ">= 16.8.0"
+ "react": ">= 18"
  },
  "dependencies": {
  "@headlessui/react": "1.7.5",
  "@popperjs/core": "^2.11.6",
- "@reach/auto-id": "^0.18.0",
  "@tippyjs/react": "^4.2.6",
  "clsx": "^1.2.1",
  "lodash.debounce": "^4.0.8",
@@ -119,14 +118,14 @@
  "@storybook/testing-library": "^0.0.13",
  "@storybook/testing-react": "^1.3.0",
  "@testing-library/jest-dom": "^5.16.5",
- "@testing-library/react": "^12.1.5",
- "@testing-library/user-event": "^13.5.0",
+ "@testing-library/react": "^13.4.0",
+ "@testing-library/user-event": "^14.4.3",
  "@types/jest": "^29.4.0",
  "@types/lodash.debounce": "^4.0.7",
  "@types/node": "^18.11.18",
- "@types/react": "^17.0.53",
+ "@types/react": "^18.0.28",
  "@types/react-beautiful-dnd": "^13.1.3",
- "@types/react-dom": "^17.0.18",
+ "@types/react-dom": "^18.0.11",
  "@types/react-portal": "^4.0.4",
  "axe-core": "4.4.3",
  "chromatic": "^6.15.0",
@@ -155,8 +154,8 @@
  "postcss-nested": "^6.0.0",
  "postcss-simple-vars": "^7.0.1",
  "prettier": "^2.8.4",
- "react": "^16.14.0",
- "react-dom": "^16.14.0",
+ "react": "^18.2.0",
+ "react-dom": "^18.2.0",
  "size-limit": "^8.1.2",
  "snake-case": "^3.0.4",
  "standard-version": "^9.5.0",

src/components/Accordion/Accordion.test.tsx

@@ -1,7 +1,7 @@
 import { generateSnapshots } from '@chanzuckerberg/story-utils';
-import { userEvent } from '@storybook/testing-library';
 import { composeStories } from '@storybook/testing-react';
 import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import React from 'react';
 import { Accordion } from './Accordion';
 import * as stories from './Accordion.stories';
@@ -11,31 +11,34 @@ const { Default } = composeStories(stories);
 describe('<Accordion />', () => {
  generateSnapshots(stories);
 
- it('should open and close Accordion panel clicking Accordion button', () => {
+ it('should open and close Accordion panel clicking Accordion button', async () => {
+ const user = userEvent.setup();
  render(<Default />);
  expect(screen.queryByTestId('accordion-panel')).not.toBeInTheDocument();
  const accordionButton = screen.getByTestId('accordion-button');
- userEvent.click(accordionButton);
+ await user.click(accordionButton);
  expect(screen.getByTestId('accordion-panel')).toBeInTheDocument();
- userEvent.click(accordionButton);
+ await user.click(accordionButton);
  expect(screen.queryByTestId('accordion-panel')).not.toBeInTheDocument();
  });
 
- it('should open and close Accordion panel with space and enter keys on the Accordion button', () => {
+ it('should open and close Accordion panel with space and enter keys on the Accordion button', async () => {
+ const user = userEvent.setup();
  render(<Default />);
  const accordionButton = screen.getByTestId('accordion-button');
  accordionButton.focus();
- userEvent.keyboard('{space}');
+ await user.keyboard(' ');
  expect(screen.getByTestId('accordion-panel')).toBeInTheDocument();
- userEvent.keyboard('{space}');
+ await user.keyboard(' ');
  expect(screen.queryByTestId('accordion-panel')).not.toBeInTheDocument();
- userEvent.keyboard('{enter}');
+ await user.keyboard('{enter}');
  expect(screen.getByTestId('accordion-panel')).toBeInTheDocument();
- userEvent.keyboard('{enter}');
+ await user.keyboard('{enter}');
  expect(screen.queryByTestId('accordion-panel')).not.toBeInTheDocument();
  });
 
- it('should call onClose callback when accordion closes', () => {
+ it('should call onClose callback when accordion closes', async () => {
+ const user = userEvent.setup();
  const onClose = jest.fn();
  render(
  <Accordion headingAs="h2">
@@ -48,7 +51,7 @@ describe('<Accordion />', () => {
  </Accordion>,
  );
  const accordionButton = screen.getByTestId('accordion-button');
- userEvent.click(accordionButton);
+ await user.click(accordionButton);
  expect(onClose).toHaveBeenCalledTimes(1);
  });
 });