chanzuckerberg · booc0mtaco · Oct 23, 2023 · Oct 16, 2023 · Oct 17, 2023 · Oct 18, 2023
diff --git a/CHANGELOG.md b/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.6.1](https://github.com/chanzuckerberg/edu-design-system/compare/v13.6.0...v13.6.1) (2023-10-23)
+
+
+### Bug Fixes
+
+* add .displayName to components ([#1785](https://github.com/chanzuckerberg/edu-design-system/issues/1785)) ([dd202d8](https://github.com/chanzuckerberg/edu-design-system/commit/dd202d8a7d2dc50b82587dc4bf1e7223ed41dd37))
+
 ## [13.6.0](https://github.com/chanzuckerberg/edu-design-system/compare/v13.5.0...v13.6.0) (2023-10-13)
 
 

@@ -1,6 +1,6 @@
 {
   "name": "@chanzuckerberg/eds",
-  "version": "13.6.0",
+  "version": "13.6.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",
@@ -91,62 +91,62 @@
     "@headlessui/react": "^1.7.17",
     "@popperjs/core": "^2.11.8",
     "@tippyjs/react": "^4.2.6",
-    "@types/lodash": "^4.14.199",
+    "@types/lodash": "^4.14.200",
     "clsx": "^1.2.1",
     "graphemer": "^1.4.0",
     "lilconfig": "^2.1.0",
     "lodash": "^4.17.21",
     "react-beautiful-dnd": "^13.1.1",
     "react-children-by-type": "^1.1.0",
-    "react-focus-lock": "^2.9.5",
+    "react-focus-lock": "^2.9.6",
     "react-popper": "^2.3.0",
     "react-portal": "^4.2.2",
     "react-uid": "^2.3.3",
     "style-dictionary": "^3.8.0",
     "svg4everybody": "^2.1.9"
   },
   "devDependencies": {
-    "@babel/preset-env": "^7.22.20",
+    "@babel/preset-env": "^7.23.2",
     "@babel/preset-react": "^7.22.15",
-    "@babel/preset-typescript": "^7.23.0",
+    "@babel/preset-typescript": "^7.23.2",
     "@chanzuckerberg/axe-storybook-testing": "^7.1.2",
     "@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.7.2",
-    "@commitlint/config-conventional": "^17.7.0",
+    "@commitlint/cli": "^17.8.1",
+    "@commitlint/config-conventional": "^17.8.1",
     "@geometricpanda/storybook-addon-badges": "^2.0.0",
-    "@omlet/cli": "^1.0.1-beta.37",
-    "@rollup/plugin-node-resolve": "^15.2.2",
+    "@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.4.6",
-    "@storybook/addon-docs": "^7.4.6",
-    "@storybook/addon-essentials": "^7.4.6",
-    "@storybook/addon-interactions": "^7.4.6",
-    "@storybook/addon-links": "^7.4.6",
+    "@storybook/addon-a11y": "^7.5.1",
+    "@storybook/addon-docs": "^7.5.1",
+    "@storybook/addon-essentials": "^7.5.1",
+    "@storybook/addon-interactions": "^7.5.1",
+    "@storybook/addon-links": "^7.5.1",
     "@storybook/addon-styling": "^1.3.7",
-    "@storybook/react": "^7.4.6",
-    "@storybook/react-webpack5": "^7.4.6",
+    "@storybook/react": "^7.5.1",
+    "@storybook/react-webpack5": "^7.5.1",
     "@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/react": "^14.0.0",
     "@testing-library/user-event": "^14.5.1",
-    "@types/jest": "^29.5.5",
-    "@types/node": "^18.18.3",
-    "@types/react": "^18.2.25",
-    "@types/react-beautiful-dnd": "^13.1.5",
-    "@types/react-dom": "^18.2.10",
-    "@types/react-portal": "^4.0.4",
+    "@types/jest": "^29.5.6",
+    "@types/node": "^18.18.6",
+    "@types/react": "^18.2.30",
+    "@types/react-beautiful-dnd": "^13.1.6",
+    "@types/react-dom": "^18.2.14",
+    "@types/react-portal": "^4.0.5",
     "axe-core": "4.8.2",
     "chromatic": "^6.24.1",
     "codecov": "^3.8.3",
     "copyfiles": "^2.4.1",
-    "eslint": "^8.50.0",
+    "eslint": "^8.51.0",
     "eslint-config-prettier": "^8.10.0",
     "eslint-plugin-jest": "^27.4.2",
     "eslint-plugin-prettier": "^4.2.1",
@@ -156,7 +156,7 @@
     "identity-obj-proxy": "^3.0.0",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
-    "jest-preset-stylelint": "^6.3.0",
+    "jest-preset-stylelint": "^6.3.1",
     "lint-staged": "^13.3.0",
     "pascal-case": "^3.1.2",
     "plop": "^3.1.2",
@@ -174,9 +174,9 @@
     "size-limit": "^8.2.6",
     "snake-case": "^3.0.4",
     "standard-version": "^9.5.0",
-    "storybook": "^7.4.6",
+    "storybook": "^7.5.1",
     "style-dictionary": "^3.8.0",
-    "stylelint": "^15.10.3",
+    "stylelint": "^15.11.0",
     "stylelint-config-recommended": "^10.0.1",
     "tailwindcss": "^3.3.3",
     "ts-jest": "^29.1.1",

diff --git a/src/components/Accordion/Accordion.stories.tsx b/src/components/Accordion/Accordion.stories.tsx
@@ -282,22 +282,6 @@ export const UsingRenderProp: StoryObj<Args> = {
   ),
   parameters: {
     chromatic: { disableSnapshot: true },
-    docs: {
-      source: {
-        code: `<Accordion headingAs="h2">
-  <Accordion.Row>
-    {({ open }) => (
-      <>
-        <Accordion.Button data-testid="accordion-button">
-          Accordion Button {(open && 'open') || 'closed'}
-        </Accordion.Button>
-        <Accordion.Panel>Accordion Panel</Accordion.Panel>
-      </>
-    )}
-  </Accordion.Row>
-</Accordion>`,
-      },
-    },
   },
 };
 
@@ -332,50 +316,6 @@ export const WithLargeHeader: StoryObj<Args> = {
 export const UsingComplexHeaders: StoryObj<Args> = {
   parameters: {
     badges: ['1.2', 'implementationExample'],
-    docs: {
-      source: {
-        code: `<Accordion>
-  <Accordion.Row>
-    <Accordion.Button>
-      <Text size="lg" variant="neutral-subtle">
-        <Icon
-          className="m-2"
-          name="check-circle"
-          purpose="decorative"
-          size="1rem"
-        />
-        Step 1
-      </Text>
-    </Accordion.Button>
-    <Accordion.Panel>
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla amet,
-      massa ultricies iaculis. Quam lacus maecenas nibh malesuada. At
-      tristique et ullamcorper rhoncus amet pharetra aliquet tortor.
-      Suscipit dui, nunc sit dui tellus massa laoreet tellus.
-    </Accordion.Panel>
-  </Accordion.Row>
-  <Accordion.Row>
-    <Accordion.Button>
-      <Text size="lg" variant="neutral-subtle">
-        <Icon
-          className="m-2"
-          name="check-circle"
-          purpose="decorative"
-          size="1rem"
-        />
-        Step 2
-      </Text>
-    </Accordion.Button>
-    <Accordion.Panel>
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla amet,
-      massa ultricies iaculis. Quam lacus maecenas nibh malesuada. At
-      tristique et ullamcorper rhoncus amet pharetra aliquet tortor.
-      Suscipit dui, nunc sit dui tellus massa laoreet tellus.
-    </Accordion.Panel>
-  </Accordion.Row>
-</Accordion>`,
-      },
-    },
   },
   args: {
     children: (
@@ -426,44 +366,6 @@ export const UsingComplexHeaders: StoryObj<Args> = {
 export const UsingNumberIconInHeaders: StoryObj<Args> = {
   parameters: {
     badges: ['1.2', 'implementationExample'],
-    docs: {
-      source: {
-        code: `<Accordion>
-  <Accordion.Row>
-    <Accordion.Button>
-      <div className="flex flex-wrap gap-1">
-        <NumberIcon aria-label="Step 1" number={1} />
-        <Text size="lg" variant="neutral-subtle">
-          Step 1
-        </Text>
-      </div>
-    </Accordion.Button>
-    <Accordion.Panel>
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla amet,
-      massa ultricies iaculis. Quam lacus maecenas nibh malesuada. At
-      tristique et ullamcorper rhoncus amet pharetra aliquet tortor.
-      Suscipit dui, nunc sit dui tellus massa laoreet tellus.
-    </Accordion.Panel>
-  </Accordion.Row>
-  <Accordion.Row>
-    <Accordion.Button>
-      <div className="flex flex-wrap gap-1">
-        <NumberIcon aria-label="Step 3" number={2} />
-        <Text size="lg" variant="neutral-subtle">
-          Step 2
-        </Text>
-      </div>
-    </Accordion.Button>
-    <Accordion.Panel>
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla amet,
-      massa ultricies iaculis. Quam lacus maecenas nibh malesuada. At
-      tristique et ullamcorper rhoncus amet pharetra aliquet tortor.
-      Suscipit dui, nunc sit dui tellus massa laoreet tellus.
-    </Accordion.Panel>
-  </Accordion.Row>
-</Accordion>`,
-      },
-    },
   },
   args: {
     children: (

diff --git a/src/components/Accordion/Accordion.test.tsx b/src/components/Accordion/Accordion.test.tsx
@@ -1,7 +1,7 @@
 import { generateSnapshots } from '@chanzuckerberg/story-utils';
 import type { StoryFile } from '@storybook/testing-react';
 import { composeStories } from '@storybook/testing-react';
-import { act, render, screen } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import React from 'react';
 import { Accordion } from './Accordion';
@@ -18,14 +18,10 @@ describe('<Accordion />', () => {
     expect(screen.queryByTestId('accordion-panel')).not.toBeInTheDocument();
     const accordionButton = screen.getByTestId('accordion-button');
 
-    await act(async () => {
-      await user.click(accordionButton);
-    });
+    await user.click(accordionButton);
     expect(screen.getByTestId('accordion-panel')).toBeInTheDocument();
 
-    await act(async () => {
-      await user.click(accordionButton);
-    });
+    await user.click(accordionButton);
     expect(screen.queryByTestId('accordion-panel')).not.toBeInTheDocument();
   });
 
@@ -35,24 +31,16 @@ describe('<Accordion />', () => {
     const accordionButton = screen.getByTestId('accordion-button');
     accordionButton.focus();
 
-    await act(async () => {
-      await user.keyboard(' ');
-    });
+    await user.keyboard(' ');
     expect(screen.getByTestId('accordion-panel')).toBeInTheDocument();
 
-    await act(async () => {
-      await user.keyboard(' ');
-    });
+    await user.keyboard(' ');
     expect(screen.queryByTestId('accordion-panel')).not.toBeInTheDocument();
 
-    await act(async () => {
-      await user.keyboard('{enter}');
-    });
+    await user.keyboard('{enter}');
     expect(screen.getByTestId('accordion-panel')).toBeInTheDocument();
 
-    await act(async () => {
-      await user.keyboard('{enter}');
-    });
+    await user.keyboard('{enter}');
     expect(screen.queryByTestId('accordion-panel')).not.toBeInTheDocument();
   });
 
@@ -71,9 +59,7 @@ describe('<Accordion />', () => {
     );
     const accordionButton = screen.getByTestId('accordion-button');
 
-    await act(async () => {
-      await user.click(accordionButton);
-    });
+    await user.click(accordionButton);
     expect(onClose).toHaveBeenCalledTimes(1);
   });
 
@@ -97,9 +83,7 @@ describe('<Accordion />', () => {
     );
     const accordionButton = screen.getByRole('button');
 
-    await act(async () => {
-      await user.click(accordionButton);
-    });
+    await user.click(accordionButton);
     expect(onOpen).toHaveBeenCalledTimes(1);
     expect(onClose).not.toHaveBeenCalled();
   });
@@ -124,9 +108,7 @@ describe('<Accordion />', () => {
     );
     const accordionButton = screen.getByRole('button');
 
-    await act(async () => {
-      await user.click(accordionButton);
-    });
+    await user.click(accordionButton);
     expect(onOpen).not.toHaveBeenCalled();
     expect(onClose).not.toHaveBeenCalled();
   });

diff --git a/src/components/Accordion/Accordion.tsx b/src/components/Accordion/Accordion.tsx
@@ -264,6 +264,11 @@ const AccordionRow = ({
   );
 };
 
+Accordion.displayName = 'Accordion';
+AccordionButton.displayName = 'Accordion.Button';
+AccordionPanel.displayName = 'Accordion.Panel';
+AccordionRow.displayName = 'Accordion.Row';
+
 Accordion.Button = AccordionButton;
 Accordion.Panel = AccordionPanel;
 Accordion.Row = AccordionRow;
diff --git a/src/components/Avatar/Avatar.tsx b/src/components/Avatar/Avatar.tsx
@@ -139,3 +139,5 @@ export const Avatar = ({
     </div>
   );
 };
+
+Avatar.displayName = 'Avatar';
diff --git a/src/components/Badge/Badge.tsx b/src/components/Badge/Badge.tsx
@@ -125,6 +125,10 @@ export const Badge = ({ children, className, ...other }: BadgeProps) => {
   );
 };
 
+BadgeDot.displayName = 'Badge.Dot';
+BadgeIcon.displayName = 'Badge.Icon';
+BadgeText.displayName = 'Badge.Text';
+
 Badge.Dot = BadgeDot;
 Badge.Icon = BadgeIcon;
 Badge.Text = BadgeText;
diff --git a/src/components/Breadcrumbs/Breadcrumbs.tsx b/src/components/Breadcrumbs/Breadcrumbs.tsx
@@ -291,4 +291,7 @@ export const BreadcrumbsItem = ({
   );
 };
 
+Breadcrumbs.displayName = 'Breadcrumbs';
+CustomSeparatorBreadcrumbsItem.displayName = 'Breadcrumbs.Item';
+
 Breadcrumbs.Item = CustomSeparatorBreadcrumbsItem;
diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
@@ -101,4 +101,5 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
     );
   },
 );
+
 Button.displayName = 'Button';
-Original file line number
+Diff line change
@@ Expand Up / @@ -139,3 +139,5 @@ export const Avatar = ({ @@
         </div>
       );
     };
+    Avatar.displayName = 'Avatar';