Skip to content

Commit c2ecaf7

Browse files
booc0mtacobooc0mtaco
authored
Merge pull request #1790 from chanzuckerberg/release-v13.6.1
### [13.6.1](v13.6.0...v13.6.1) (2023-10-23) [Storybook](https://61313967cde49b003ae2a860-emvaqemhhp.chromatic.com/) ### Bug Fixes * add .displayName to components ([#1785](#1785)) ([dd202d8](dd202d8))
2 parents 609f07e + b3bf0b2 commit c2ecaf7

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

58 files changed

+1404
-1261
lines changed

‎CHANGELOG.md

+7
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,13 @@
22

33
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.
44

5+
### [13.6.1](https://github.com/chanzuckerberg/edu-design-system/compare/v13.6.0...v13.6.1) (2023-10-23)
6+
7+
8+
### Bug Fixes
9+
10+
* add .displayName to components ([#1785](https://github.com/chanzuckerberg/edu-design-system/issues/1785)) ([dd202d8](https://github.com/chanzuckerberg/edu-design-system/commit/dd202d8a7d2dc50b82587dc4bf1e7223ed41dd37))
11+
512
## [13.6.0](https://github.com/chanzuckerberg/edu-design-system/compare/v13.5.0...v13.6.0) (2023-10-13)
613

714

‎package.json

+27-27
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@chanzuckerberg/eds",
3-
"version": "13.6.0",
3+
"version": "13.6.1",
44
"description": "The React-powered design system library for Chan Zuckerberg Initiative education web applications",
55
"author": "CZI <[email protected]>",
66
"homepage": "https://github.com/chanzuckerberg/edu-design-system",
@@ -91,62 +91,62 @@
9191
"@headlessui/react": "^1.7.17",
9292
"@popperjs/core": "^2.11.8",
9393
"@tippyjs/react": "^4.2.6",
94-
"@types/lodash": "^4.14.199",
94+
"@types/lodash": "^4.14.200",
9595
"clsx": "^1.2.1",
9696
"graphemer": "^1.4.0",
9797
"lilconfig": "^2.1.0",
9898
"lodash": "^4.17.21",
9999
"react-beautiful-dnd": "^13.1.1",
100100
"react-children-by-type": "^1.1.0",
101-
"react-focus-lock": "^2.9.5",
101+
"react-focus-lock": "^2.9.6",
102102
"react-popper": "^2.3.0",
103103
"react-portal": "^4.2.2",
104104
"react-uid": "^2.3.3",
105105
"style-dictionary": "^3.8.0",
106106
"svg4everybody": "^2.1.9"
107107
},
108108
"devDependencies": {
109-
"@babel/preset-env": "^7.22.20",
109+
"@babel/preset-env": "^7.23.2",
110110
"@babel/preset-react": "^7.22.15",
111-
"@babel/preset-typescript": "^7.23.0",
111+
"@babel/preset-typescript": "^7.23.2",
112112
"@chanzuckerberg/axe-storybook-testing": "^7.1.2",
113113
"@chanzuckerberg/eslint-config-edu-js": "^1.1.0",
114114
"@chanzuckerberg/eslint-config-edu-ts": "^1.0.9",
115115
"@chanzuckerberg/eslint-plugin-edu-react": "^1.1.9",
116116
"@chanzuckerberg/eslint-plugin-stories": "^3.2.14",
117117
"@chanzuckerberg/prettier-config-edu": "^1.0.5",
118118
"@chanzuckerberg/story-utils": "^4.0.0",
119-
"@commitlint/cli": "^17.7.2",
120-
"@commitlint/config-conventional": "^17.7.0",
119+
"@commitlint/cli": "^17.8.1",
120+
"@commitlint/config-conventional": "^17.8.1",
121121
"@geometricpanda/storybook-addon-badges": "^2.0.0",
122-
"@omlet/cli": "^1.0.1-beta.37",
123-
"@rollup/plugin-node-resolve": "^15.2.2",
122+
"@omlet/cli": "^1.0.1-beta.38",
123+
"@rollup/plugin-node-resolve": "^15.2.3",
124124
"@rollup/plugin-typescript": "^11.1.5",
125125
"@size-limit/file": "^8.2.6",
126-
"@storybook/addon-a11y": "^7.4.6",
127-
"@storybook/addon-docs": "^7.4.6",
128-
"@storybook/addon-essentials": "^7.4.6",
129-
"@storybook/addon-interactions": "^7.4.6",
130-
"@storybook/addon-links": "^7.4.6",
126+
"@storybook/addon-a11y": "^7.5.1",
127+
"@storybook/addon-docs": "^7.5.1",
128+
"@storybook/addon-essentials": "^7.5.1",
129+
"@storybook/addon-interactions": "^7.5.1",
130+
"@storybook/addon-links": "^7.5.1",
131131
"@storybook/addon-styling": "^1.3.7",
132-
"@storybook/react": "^7.4.6",
133-
"@storybook/react-webpack5": "^7.4.6",
132+
"@storybook/react": "^7.5.1",
133+
"@storybook/react-webpack5": "^7.5.1",
134134
"@storybook/testing-library": "^0.2.0",
135135
"@storybook/testing-react": "^2.0.1",
136136
"@testing-library/jest-dom": "^5.17.0",
137-
"@testing-library/react": "^13.4.0",
137+
"@testing-library/react": "^14.0.0",
138138
"@testing-library/user-event": "^14.5.1",
139-
"@types/jest": "^29.5.5",
140-
"@types/node": "^18.18.3",
141-
"@types/react": "^18.2.25",
142-
"@types/react-beautiful-dnd": "^13.1.5",
143-
"@types/react-dom": "^18.2.10",
144-
"@types/react-portal": "^4.0.4",
139+
"@types/jest": "^29.5.6",
140+
"@types/node": "^18.18.6",
141+
"@types/react": "^18.2.30",
142+
"@types/react-beautiful-dnd": "^13.1.6",
143+
"@types/react-dom": "^18.2.14",
144+
"@types/react-portal": "^4.0.5",
145145
"axe-core": "4.8.2",
146146
"chromatic": "^6.24.1",
147147
"codecov": "^3.8.3",
148148
"copyfiles": "^2.4.1",
149-
"eslint": "^8.50.0",
149+
"eslint": "^8.51.0",
150150
"eslint-config-prettier": "^8.10.0",
151151
"eslint-plugin-jest": "^27.4.2",
152152
"eslint-plugin-prettier": "^4.2.1",
@@ -156,7 +156,7 @@
156156
"identity-obj-proxy": "^3.0.0",
157157
"jest": "^29.7.0",
158158
"jest-environment-jsdom": "^29.7.0",
159-
"jest-preset-stylelint": "^6.3.0",
159+
"jest-preset-stylelint": "^6.3.1",
160160
"lint-staged": "^13.3.0",
161161
"pascal-case": "^3.1.2",
162162
"plop": "^3.1.2",
@@ -174,9 +174,9 @@
174174
"size-limit": "^8.2.6",
175175
"snake-case": "^3.0.4",
176176
"standard-version": "^9.5.0",
177-
"storybook": "^7.4.6",
177+
"storybook": "^7.5.1",
178178
"style-dictionary": "^3.8.0",
179-
"stylelint": "^15.10.3",
179+
"stylelint": "^15.11.0",
180180
"stylelint-config-recommended": "^10.0.1",
181181
"tailwindcss": "^3.3.3",
182182
"ts-jest": "^29.1.1",

‎src/components/Accordion/Accordion.stories.tsx

-98
Original file line numberDiff line numberDiff line change
@@ -282,22 +282,6 @@ export const UsingRenderProp: StoryObj<Args> = {
282282
),
283283
parameters: {
284284
chromatic: { disableSnapshot: true },
285-
docs: {
286-
source: {
287-
code: `<Accordion headingAs="h2">
288-
<Accordion.Row>
289-
{({ open }) => (
290-
<>
291-
<Accordion.Button data-testid="accordion-button">
292-
Accordion Button {(open && 'open') || 'closed'}
293-
</Accordion.Button>
294-
<Accordion.Panel>Accordion Panel</Accordion.Panel>
295-
</>
296-
)}
297-
</Accordion.Row>
298-
</Accordion>`,
299-
},
300-
},
301285
},
302286
};
303287

@@ -332,50 +316,6 @@ export const WithLargeHeader: StoryObj<Args> = {
332316
export const UsingComplexHeaders: StoryObj<Args> = {
333317
parameters: {
334318
badges: ['1.2', 'implementationExample'],
335-
docs: {
336-
source: {
337-
code: `<Accordion>
338-
<Accordion.Row>
339-
<Accordion.Button>
340-
<Text size="lg" variant="neutral-subtle">
341-
<Icon
342-
className="m-2"
343-
name="check-circle"
344-
purpose="decorative"
345-
size="1rem"
346-
/>
347-
Step 1
348-
</Text>
349-
</Accordion.Button>
350-
<Accordion.Panel>
351-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla amet,
352-
massa ultricies iaculis. Quam lacus maecenas nibh malesuada. At
353-
tristique et ullamcorper rhoncus amet pharetra aliquet tortor.
354-
Suscipit dui, nunc sit dui tellus massa laoreet tellus.
355-
</Accordion.Panel>
356-
</Accordion.Row>
357-
<Accordion.Row>
358-
<Accordion.Button>
359-
<Text size="lg" variant="neutral-subtle">
360-
<Icon
361-
className="m-2"
362-
name="check-circle"
363-
purpose="decorative"
364-
size="1rem"
365-
/>
366-
Step 2
367-
</Text>
368-
</Accordion.Button>
369-
<Accordion.Panel>
370-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla amet,
371-
massa ultricies iaculis. Quam lacus maecenas nibh malesuada. At
372-
tristique et ullamcorper rhoncus amet pharetra aliquet tortor.
373-
Suscipit dui, nunc sit dui tellus massa laoreet tellus.
374-
</Accordion.Panel>
375-
</Accordion.Row>
376-
</Accordion>`,
377-
},
378-
},
379319
},
380320
args: {
381321
children: (
@@ -426,44 +366,6 @@ export const UsingComplexHeaders: StoryObj<Args> = {
426366
export const UsingNumberIconInHeaders: StoryObj<Args> = {
427367
parameters: {
428368
badges: ['1.2', 'implementationExample'],
429-
docs: {
430-
source: {
431-
code: `<Accordion>
432-
<Accordion.Row>
433-
<Accordion.Button>
434-
<div className="flex flex-wrap gap-1">
435-
<NumberIcon aria-label="Step 1" number={1} />
436-
<Text size="lg" variant="neutral-subtle">
437-
Step 1
438-
</Text>
439-
</div>
440-
</Accordion.Button>
441-
<Accordion.Panel>
442-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla amet,
443-
massa ultricies iaculis. Quam lacus maecenas nibh malesuada. At
444-
tristique et ullamcorper rhoncus amet pharetra aliquet tortor.
445-
Suscipit dui, nunc sit dui tellus massa laoreet tellus.
446-
</Accordion.Panel>
447-
</Accordion.Row>
448-
<Accordion.Row>
449-
<Accordion.Button>
450-
<div className="flex flex-wrap gap-1">
451-
<NumberIcon aria-label="Step 3" number={2} />
452-
<Text size="lg" variant="neutral-subtle">
453-
Step 2
454-
</Text>
455-
</div>
456-
</Accordion.Button>
457-
<Accordion.Panel>
458-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla amet,
459-
massa ultricies iaculis. Quam lacus maecenas nibh malesuada. At
460-
tristique et ullamcorper rhoncus amet pharetra aliquet tortor.
461-
Suscipit dui, nunc sit dui tellus massa laoreet tellus.
462-
</Accordion.Panel>
463-
</Accordion.Row>
464-
</Accordion>`,
465-
},
466-
},
467369
},
468370
args: {
469371
children: (

‎src/components/Accordion/Accordion.test.tsx

+10-28
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { generateSnapshots } from '@chanzuckerberg/story-utils';
22
import type { StoryFile } from '@storybook/testing-react';
33
import { composeStories } from '@storybook/testing-react';
4-
import { act, render, screen } from '@testing-library/react';
4+
import { render, screen } from '@testing-library/react';
55
import userEvent from '@testing-library/user-event';
66
import React from 'react';
77
import { Accordion } from './Accordion';
@@ -18,14 +18,10 @@ describe('<Accordion />', () => {
1818
expect(screen.queryByTestId('accordion-panel')).not.toBeInTheDocument();
1919
const accordionButton = screen.getByTestId('accordion-button');
2020

21-
await act(async () => {
22-
await user.click(accordionButton);
23-
});
21+
await user.click(accordionButton);
2422
expect(screen.getByTestId('accordion-panel')).toBeInTheDocument();
2523

26-
await act(async () => {
27-
await user.click(accordionButton);
28-
});
24+
await user.click(accordionButton);
2925
expect(screen.queryByTestId('accordion-panel')).not.toBeInTheDocument();
3026
});
3127

@@ -35,24 +31,16 @@ describe('<Accordion />', () => {
3531
const accordionButton = screen.getByTestId('accordion-button');
3632
accordionButton.focus();
3733

38-
await act(async () => {
39-
await user.keyboard(' ');
40-
});
34+
await user.keyboard(' ');
4135
expect(screen.getByTestId('accordion-panel')).toBeInTheDocument();
4236

43-
await act(async () => {
44-
await user.keyboard(' ');
45-
});
37+
await user.keyboard(' ');
4638
expect(screen.queryByTestId('accordion-panel')).not.toBeInTheDocument();
4739

48-
await act(async () => {
49-
await user.keyboard('{enter}');
50-
});
40+
await user.keyboard('{enter}');
5141
expect(screen.getByTestId('accordion-panel')).toBeInTheDocument();
5242

53-
await act(async () => {
54-
await user.keyboard('{enter}');
55-
});
43+
await user.keyboard('{enter}');
5644
expect(screen.queryByTestId('accordion-panel')).not.toBeInTheDocument();
5745
});
5846

@@ -71,9 +59,7 @@ describe('<Accordion />', () => {
7159
);
7260
const accordionButton = screen.getByTestId('accordion-button');
7361

74-
await act(async () => {
75-
await user.click(accordionButton);
76-
});
62+
await user.click(accordionButton);
7763
expect(onClose).toHaveBeenCalledTimes(1);
7864
});
7965

@@ -97,9 +83,7 @@ describe('<Accordion />', () => {
9783
);
9884
const accordionButton = screen.getByRole('button');
9985

100-
await act(async () => {
101-
await user.click(accordionButton);
102-
});
86+
await user.click(accordionButton);
10387
expect(onOpen).toHaveBeenCalledTimes(1);
10488
expect(onClose).not.toHaveBeenCalled();
10589
});
@@ -124,9 +108,7 @@ describe('<Accordion />', () => {
124108
);
125109
const accordionButton = screen.getByRole('button');
126110

127-
await act(async () => {
128-
await user.click(accordionButton);
129-
});
111+
await user.click(accordionButton);
130112
expect(onOpen).not.toHaveBeenCalled();
131113
expect(onClose).not.toHaveBeenCalled();
132114
});

‎src/components/Accordion/Accordion.tsx

+5
Original file line numberDiff line numberDiff line change
@@ -264,6 +264,11 @@ const AccordionRow = ({
264264
);
265265
};
266266

267+
Accordion.displayName = 'Accordion';
268+
AccordionButton.displayName = 'Accordion.Button';
269+
AccordionPanel.displayName = 'Accordion.Panel';
270+
AccordionRow.displayName = 'Accordion.Row';
271+
267272
Accordion.Button = AccordionButton;
268273
Accordion.Panel = AccordionPanel;
269274
Accordion.Row = AccordionRow;

‎src/components/Avatar/Avatar.tsx

+2
Original file line numberDiff line numberDiff line change
@@ -139,3 +139,5 @@ export const Avatar = ({
139139
</div>
140140
);
141141
};
142+
143+
Avatar.displayName = 'Avatar';

‎src/components/Badge/Badge.tsx

+4
Original file line numberDiff line numberDiff line change
@@ -125,6 +125,10 @@ export const Badge = ({ children, className, ...other }: BadgeProps) => {
125125
);
126126
};
127127

128+
BadgeDot.displayName = 'Badge.Dot';
129+
BadgeIcon.displayName = 'Badge.Icon';
130+
BadgeText.displayName = 'Badge.Text';
131+
128132
Badge.Dot = BadgeDot;
129133
Badge.Icon = BadgeIcon;
130134
Badge.Text = BadgeText;

‎src/components/Breadcrumbs/Breadcrumbs.tsx

+3
Original file line numberDiff line numberDiff line change
@@ -291,4 +291,7 @@ export const BreadcrumbsItem = ({
291291
);
292292
};
293293

294+
Breadcrumbs.displayName = 'Breadcrumbs';
295+
CustomSeparatorBreadcrumbsItem.displayName = 'Breadcrumbs.Item';
296+
294297
Breadcrumbs.Item = CustomSeparatorBreadcrumbsItem;

‎src/components/Button/Button.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -101,4 +101,5 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
101101
);
102102
},
103103
);
104+
104105
Button.displayName = 'Button';

0 commit comments

Comments
 (0)