Skip to content

Commit

Permalink
Merge pull request #1790 from chanzuckerberg/release-v13.6.1
Browse files Browse the repository at this point in the history
### [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))
  • Loading branch information
booc0mtaco authored Oct 23, 2023
2 parents 609f07e + b3bf0b2 commit c2ecaf7
Show file tree
Hide file tree
Showing 58 changed files with 1,404 additions and 1,261 deletions.
7 changes: 7 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -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)


Expand Down
54 changes: 27 additions & 27 deletions package.json
Original file line number Diff line number Diff line change
@@ -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",
Expand Down Expand Up @@ -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",
Expand All @@ -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",
Expand All @@ -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",
Expand Down
98 changes: 0 additions & 98 deletions src/components/Accordion/Accordion.stories.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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>`,
},
},
},
};

Expand Down Expand Up @@ -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: (
Expand Down Expand Up @@ -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: (
Expand Down
38 changes: 10 additions & 28 deletions src/components/Accordion/Accordion.test.tsx
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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();
});

Expand All @@ -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();
});

Expand All @@ -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);
});

Expand All @@ -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();
});
Expand All @@ -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();
});
Expand Down
5 changes: 5 additions & 0 deletions src/components/Accordion/Accordion.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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;
2 changes: 2 additions & 0 deletions src/components/Avatar/Avatar.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -139,3 +139,5 @@ export const Avatar = ({
</div>
);
};

Avatar.displayName = 'Avatar';
4 changes: 4 additions & 0 deletions src/components/Badge/Badge.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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;
3 changes: 3 additions & 0 deletions src/components/Breadcrumbs/Breadcrumbs.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -291,4 +291,7 @@ export const BreadcrumbsItem = ({
);
};

Breadcrumbs.displayName = 'Breadcrumbs';
CustomSeparatorBreadcrumbsItem.displayName = 'Breadcrumbs.Item';

Breadcrumbs.Item = CustomSeparatorBreadcrumbsItem;
1 change: 1 addition & 0 deletions src/components/Button/Button.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -101,4 +101,5 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
);
},
);

Button.displayName = 'Button';
Loading

0 comments on commit c2ecaf7

Please sign in to comment.