From a81f28c8c0d0e65a6b0cdd686f08d4c773a80ddc Mon Sep 17 00:00:00 2001 From: Andrew Holloway Date: Wed, 26 Jun 2024 17:11:17 -0700 Subject: [PATCH] chore: update to storybook 8 - update docs to support storybook 8 semantics - fix documentation issues for hiding react nodes for children props - configure plugins to mesh with new conventions - update typescript to latest version - see https://github.com/storybookjs/storybook/issues/26586#issuecomment-2074582598 --- ...Started.stories.mdx => GettingStarted.mdx} | 0 ...delines.stories.mdx => CodeGuidelines.mdx} | 0 ...{Components.stories.mdx => Components.mdx} | 0 .../{Icons.stories.mdx => Icons.mdx} | 0 .../{Layout.stories.mdx => Layout.mdx} | 0 .../{Theming.stories.mdx => Theming.mdx} | 0 .../{Tokens.stories.mdx => Tokens.mdx} | 0 ...{Typography.stories.mdx => Typography.mdx} | 0 .storybook/main.ts | 28 +- .storybook/preview.tsx | 1 + package.json | 31 +- .../Accordion/Accordion.stories.tsx | 15 +- src/components/Accordion/Accordion.test.tsx | 4 +- src/components/Accordion/Accordion.tsx | 2 +- .../AppNotification.stories.tsx | 20 +- .../AppNotification/AppNotification.test.ts | 3 +- .../AppNotification/AppNotification.tsx | 6 +- src/components/Avatar/Avatar.stories.ts | 6 +- src/components/Avatar/Avatar.tsx | 9 + src/components/Badge/Badge.stories.tsx | 22 +- .../Breadcrumbs/Breadcrumbs.stories.tsx | 33 +- .../Breadcrumbs/Breadcrumbs.test.tsx | 2 +- src/components/Breadcrumbs/Breadcrumbs.tsx | 3 +- src/components/Button/Button.stories.tsx | 36 +- src/components/Button/Button.test.tsx | 2 +- .../ButtonGroup/ButtonGroup.stories.tsx | 17 +- .../ButtonGroup/ButtonGroup.test.ts | 2 +- src/components/Card/Card.stories.tsx | 46 +- src/components/Card/Card.test.ts | 3 +- src/components/Checkbox/Checkbox.test.tsx | 2 +- .../FieldLabel/FieldLabel.stories.ts | 15 +- .../FieldNote/FieldNote.stories.tsx | 14 +- src/components/FieldNote/FieldNote.tsx | 3 +- src/components/Fieldset/Fieldset.stories.tsx | 5 +- src/components/Fieldset/Fieldset.test.ts | 2 +- src/components/Heading/Heading.test.tsx | 2 +- src/components/Heading/Heading.tsx | 9 + .../HorizontalStepper.test.tsx | 2 +- src/components/Hr/Hr.stories.ts | 19 +- src/components/Hr/Hr.tsx | 22 +- src/components/Icon/Icon.test.ts | 2 +- src/components/Icon/Icon.tsx | 4 +- .../InlineNotification.test.ts | 2 +- .../InlineNotification/InlineNotification.tsx | 4 +- src/components/InputField/InputField.test.tsx | 2 +- src/components/Label/Label.test.ts | 2 +- src/components/Link/Link.stories.tsx | 18 +- src/components/Link/Link.test.tsx | 2 +- src/components/Menu/Menu.stories.tsx | 24 +- src/components/Menu/Menu.test.tsx | 2 +- src/components/Menu/Menu.tsx | 1 + src/components/Modal/Modal.stories.tsx | 7 +- src/components/Modal/Modal.test.tsx | 4 +- .../PageNotification.stories.tsx | 4 +- src/components/Popover/Popover.stories.tsx | 12 +- src/components/Popover/Popover.test.tsx | 2 +- .../PopoverContainer.stories.tsx | 14 +- .../PopoverContainer/PopoverContainer.tsx | 28 +- src/components/PopoverContainer/index.ts | 1 + .../ProgressBar/ProgressBar.test.ts | 2 +- src/components/Radio/Radio.test.tsx | 2 +- .../SearchBar/SearchBar.stories.tsx | 6 +- src/components/SearchBar/SearchBar.test.ts | 2 +- src/components/Select/Select.stories.tsx | 10 +- src/components/Select/Select.test.tsx | 2 +- src/components/Skeleton/Skeleton.stories.tsx | 10 +- src/components/Slider/Slider.stories.tsx | 2 +- src/components/Slider/Slider.test.tsx | 2 +- src/components/TabGroup/TabGroup.stories.tsx | 8 +- src/components/TabGroup/TabGroup.test.tsx | 2 +- src/components/Table/Table.stories.tsx | 4 +- src/components/Table/Table.test.ts | 2 +- src/components/Text/Text.stories.tsx | 5 +- src/components/Text/Text.test.tsx | 2 +- .../TextareaField/TextareaField.test.tsx | 2 +- .../ToastNotification.test.tsx | 3 +- src/components/Toggle/Toggle.test.ts | 2 +- src/components/Tooltip/Tooltip.stories.tsx | 11 +- src/components/Tooltip/Tooltip.test.tsx | 2 +- src/util/utility-types.ts | 4 + yarn.lock | 4240 +++++++++-------- 81 files changed, 2484 insertions(+), 2362 deletions(-) rename .storybook/components/Docs/{GettingStarted.stories.mdx => GettingStarted.mdx} (100%) rename .storybook/components/Docs/Guidelines/{CodeGuidelines.stories.mdx => CodeGuidelines.mdx} (100%) rename .storybook/components/Docs/Guidelines/{Components.stories.mdx => Components.mdx} (100%) rename .storybook/components/Docs/Guidelines/{Icons.stories.mdx => Icons.mdx} (100%) rename .storybook/components/Docs/Guidelines/{Layout.stories.mdx => Layout.mdx} (100%) rename .storybook/components/Docs/Guidelines/{Theming.stories.mdx => Theming.mdx} (100%) rename .storybook/components/Docs/Guidelines/{Tokens.stories.mdx => Tokens.mdx} (100%) rename .storybook/components/Docs/Guidelines/{Typography.stories.mdx => Typography.mdx} (100%) diff --git a/.storybook/components/Docs/GettingStarted.stories.mdx b/.storybook/components/Docs/GettingStarted.mdx similarity index 100% rename from .storybook/components/Docs/GettingStarted.stories.mdx rename to .storybook/components/Docs/GettingStarted.mdx diff --git a/.storybook/components/Docs/Guidelines/CodeGuidelines.stories.mdx b/.storybook/components/Docs/Guidelines/CodeGuidelines.mdx similarity index 100% rename from .storybook/components/Docs/Guidelines/CodeGuidelines.stories.mdx rename to .storybook/components/Docs/Guidelines/CodeGuidelines.mdx diff --git a/.storybook/components/Docs/Guidelines/Components.stories.mdx b/.storybook/components/Docs/Guidelines/Components.mdx similarity index 100% rename from .storybook/components/Docs/Guidelines/Components.stories.mdx rename to .storybook/components/Docs/Guidelines/Components.mdx diff --git a/.storybook/components/Docs/Guidelines/Icons.stories.mdx b/.storybook/components/Docs/Guidelines/Icons.mdx similarity index 100% rename from .storybook/components/Docs/Guidelines/Icons.stories.mdx rename to .storybook/components/Docs/Guidelines/Icons.mdx diff --git a/.storybook/components/Docs/Guidelines/Layout.stories.mdx b/.storybook/components/Docs/Guidelines/Layout.mdx similarity index 100% rename from .storybook/components/Docs/Guidelines/Layout.stories.mdx rename to .storybook/components/Docs/Guidelines/Layout.mdx diff --git a/.storybook/components/Docs/Guidelines/Theming.stories.mdx b/.storybook/components/Docs/Guidelines/Theming.mdx similarity index 100% rename from .storybook/components/Docs/Guidelines/Theming.stories.mdx rename to .storybook/components/Docs/Guidelines/Theming.mdx diff --git a/.storybook/components/Docs/Guidelines/Tokens.stories.mdx b/.storybook/components/Docs/Guidelines/Tokens.mdx similarity index 100% rename from .storybook/components/Docs/Guidelines/Tokens.stories.mdx rename to .storybook/components/Docs/Guidelines/Tokens.mdx diff --git a/.storybook/components/Docs/Guidelines/Typography.stories.mdx b/.storybook/components/Docs/Guidelines/Typography.mdx similarity index 100% rename from .storybook/components/Docs/Guidelines/Typography.stories.mdx rename to .storybook/components/Docs/Guidelines/Typography.mdx diff --git a/.storybook/main.ts b/.storybook/main.ts index a8e92fdb1..f4eea1edd 100644 --- a/.storybook/main.ts +++ b/.storybook/main.ts @@ -9,17 +9,16 @@ import type { Configuration } from 'webpack'; * We should refrain from using the staticDirs option in this configuration until * https://github.com/chromaui/chromatic-cli/issues/462 is resolved. */ -const config: StorybookConfig = { +const config = { stories: [ - './components/**/*.stories.mdx', + './components/**/*.mdx', './components/**/*.stories.@(js|jsx|ts|tsx)', '../src/components', - './**/*.stories.mdx', + './**/*.mdx', './**/*.stories.@(js|jsx|ts|tsx)', ], - addons: [ - '@storybook/addon-essentials', + '@storybook/addon-essentials', // See: https://storybook.js.org/docs/essentials '@storybook/addon-a11y', '@storybook/addon-links', '@storybook/addon-interactions', @@ -31,6 +30,8 @@ const config: StorybookConfig = { cssModules: true, }, }, + '@storybook/addon-webpack5-compiler-babel', + '@chromatic-com/storybook', ], framework: { @@ -38,15 +39,11 @@ const config: StorybookConfig = { options: {}, }, - docs: { - autodocs: true, - }, - core: { disableTelemetry: true, }, - babel: (config) => { + babel: () => { return { sourceType: 'unambiguous', presets: [ @@ -66,13 +63,22 @@ const config: StorybookConfig = { plugins: [], }; }, + webpackFinal(config, { configType }) { if (configType === 'DEVELOPMENT') { updateCSSLoaderPlugin(config); } return config; }, -}; + + /** + * This config enables deep parsing of TypeScript types in the table UI, which can interpret + * the values of unions, and TypeScript utils like `Extract`, `Pick`, etc. + */ + typescript: { + reactDocgen: 'react-docgen-typescript', + }, +} satisfies StorybookConfig; /** * Updates the `css-loader` webpack plugin to make class names human readable. diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx index 100cf7dc0..07af31bab 100644 --- a/.storybook/preview.tsx +++ b/.storybook/preview.tsx @@ -100,3 +100,4 @@ export const parameters: Preview['parameters'] = { }, }, }; +export const tags = ['autodocs']; diff --git a/package.json b/package.json index 1482d410b..d56735f12 100644 --- a/package.json +++ b/package.json @@ -115,12 +115,13 @@ "@babel/preset-env": "^7.24.7", "@babel/preset-react": "^7.24.7", "@babel/preset-typescript": "^7.24.7", - "@chanzuckerberg/axe-storybook-testing": "^7.2.0", + "@chanzuckerberg/axe-storybook-testing": "^8.0.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/story-utils": "^4.0.8", + "@chromatic-com/storybook": "^1", "@commitlint/cli": "^18.6.1", "@commitlint/config-conventional": "^18.6.3", "@geometricpanda/storybook-addon-badges": "^2.0.2", @@ -128,18 +129,18 @@ "@rollup/plugin-node-resolve": "^15.2.3", "@rollup/plugin-typescript": "^11.1.6", "@size-limit/file": "^8.2.6", - "@storybook/addon-a11y": "^7.6.19", - "@storybook/addon-essentials": "^7.6.19", - "@storybook/addon-interactions": "^7.6.19", - "@storybook/addon-links": "^7.6.19", + "@storybook/addon-a11y": "^8.1.10", + "@storybook/addon-essentials": "^8.1.10", + "@storybook/addon-interactions": "^8.1.10", + "@storybook/addon-links": "^8.1.10", + "@storybook/addon-mdx-gfm": "^8.1.10", "@storybook/addon-styling": "^1.3.7", - "@storybook/manager-api": "^7.6.19", - "@storybook/react": "^7.6.19", - "@storybook/react-webpack5": "^7.6.19", - "@storybook/test": "^7.6.19", - "@storybook/testing-library": "^0.2.2", - "@storybook/testing-react": "^2.0.1", - "@storybook/theming": "^7.6.19", + "@storybook/addon-webpack5-compiler-babel": "^3.0.3", + "@storybook/manager-api": "^8.1.10", + "@storybook/react": "^8.1.10", + "@storybook/react-webpack5": "^8.1.10", + "@storybook/test": "^8.1.10", + "@storybook/theming": "^8.1.10", "@testing-library/jest-dom": "^6.4.6", "@testing-library/react": "^14.3.1", "@testing-library/user-event": "^14.5.2", @@ -160,7 +161,7 @@ "eslint-config-prettier": "^9.0.0", "eslint-plugin-jest": "^27.9.0", "eslint-plugin-prettier": "^5.0.1", - "eslint-plugin-storybook": "^0.6.15", + "eslint-plugin-storybook": "^0.8.0", "eslint-plugin-testing-library": "^6.2.2", "husky": "^8.0.3", "identity-obj-proxy": "^3.0.0", @@ -183,13 +184,13 @@ "rollup-plugin-postcss": "^4.0.2", "size-limit": "^8.2.6", "standard-version": "^9.5.0", - "storybook": "^7.6.19", + "storybook": "^8.1.10", "style-dictionary": "^3.9.2", "stylelint": "^15.11.0", "stylelint-config-recommended": "^13.0.0", "tailwindcss": "^3.4.4", "ts-jest": "^29.1.5", - "typescript": "^5.2.2" + "typescript": "^5.5.2" }, "lint-staged": { "*.{js,jsx,ts,tsx}": [ diff --git a/src/components/Accordion/Accordion.stories.tsx b/src/components/Accordion/Accordion.stories.tsx index af7ac613e..ca1168f91 100644 --- a/src/components/Accordion/Accordion.stories.tsx +++ b/src/components/Accordion/Accordion.stories.tsx @@ -6,14 +6,14 @@ import { chromaticViewports } from '../../util/viewports'; import Icon from '../Icon'; import NumberIcon from '../NumberIcon'; -type Args = React.ComponentProps; - export default { title: 'Components/Accordion', component: Accordion, + // TODO: add subcomponents like Badge has parameters: { layout: 'centered', badges: ['intro-1.2', 'current-2.0'], + controls: { sort: 'requiredFirst' }, }, args: { headingAs: 'h2', @@ -35,15 +35,16 @@ export default { }, argTypes: { children: { - control: { - type: null, - }, + control: false, + }, + size: { + control: { type: 'radio' }, }, }, decorators: [(Story) =>
{Story()}
], -} as Meta; +} as Meta; -type Story = StoryObj; +type Story = StoryObj; export const Default: Story = {}; diff --git a/src/components/Accordion/Accordion.test.tsx b/src/components/Accordion/Accordion.test.tsx index 9513b0b1f..5cac5a23d 100644 --- a/src/components/Accordion/Accordion.test.tsx +++ b/src/components/Accordion/Accordion.test.tsx @@ -1,11 +1,11 @@ import { generateSnapshots } from '@chanzuckerberg/story-utils'; -import type { StoryFile } from '@storybook/testing-react'; -import { composeStories } from '@storybook/testing-react'; +import { composeStories } from '@storybook/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'; +import type { StoryFile } from '../../util/utility-types'; const { Default } = composeStories(stories); diff --git a/src/components/Accordion/Accordion.tsx b/src/components/Accordion/Accordion.tsx index 9c7f10f57..8f410bc3b 100644 --- a/src/components/Accordion/Accordion.tsx +++ b/src/components/Accordion/Accordion.tsx @@ -134,7 +134,7 @@ const AccordionRowContext = createContext< * Displays one or more headers stacked on top of one another that can reveal or hide associated content. * This component is based on the [Disclosure](https://headlessui.com/react/disclosure) component, provided by HeadlessUI. * - * @see https://headlessui.com/react/disclosure + * More Information: https://headlessui.com/react/disclosure * */ export const Accordion = ({ diff --git a/src/components/AppNotification/AppNotification.stories.tsx b/src/components/AppNotification/AppNotification.stories.tsx index 6c65c8a55..36079c426 100644 --- a/src/components/AppNotification/AppNotification.stories.tsx +++ b/src/components/AppNotification/AppNotification.stories.tsx @@ -23,23 +23,21 @@ export default { }, argTypes: { children: { - control: { - type: null, - }, + control: false, }, subTitle: { control: 'text', }, }, -} as Meta; +} as Meta; -type Args = React.ComponentProps; +type Story = StoryObj; -export const Default: StoryObj = { +export const Default: Story = { args: {}, }; -export const WithControls: StoryObj = { +export const WithControls: Story = { args: { children: ( @@ -54,7 +52,7 @@ export const WithControls: StoryObj = { }, }; -export const WithLinkInSubtitle: StoryObj = { +export const WithLinkInSubtitle: Story = { args: { subTitle: ( @@ -68,7 +66,7 @@ export const WithLinkInSubtitle: StoryObj = { }, }; -export const LightColor: StoryObj = { +export const LightColor: Story = { args: { color: 'light', children: ( @@ -80,7 +78,7 @@ export const LightColor: StoryObj = { }, }; -export const WithDismissAndControls: StoryObj = { +export const WithDismissAndControls: Story = { args: { ...WithControls.args, subTitle: 'Limited subtitle text', @@ -90,7 +88,7 @@ export const WithDismissAndControls: StoryObj = { }, }; -export const LightWithDismissAndControls: StoryObj = { +export const LightWithDismissAndControls: Story = { args: { ...LightColor.args, onDismiss: () => { diff --git a/src/components/AppNotification/AppNotification.test.ts b/src/components/AppNotification/AppNotification.test.ts index 5d0312458..64717b560 100644 --- a/src/components/AppNotification/AppNotification.test.ts +++ b/src/components/AppNotification/AppNotification.test.ts @@ -1,7 +1,6 @@ import { generateSnapshots } from '@chanzuckerberg/story-utils'; -import type { StoryFile } from '@storybook/testing-react'; - import * as stories from './AppNotification.stories'; +import type { StoryFile } from '../../util/utility-types'; describe('', () => { generateSnapshots(stories as StoryFile); diff --git a/src/components/AppNotification/AppNotification.tsx b/src/components/AppNotification/AppNotification.tsx index 3e1ed77fa..cfbc51693 100644 --- a/src/components/AppNotification/AppNotification.tsx +++ b/src/components/AppNotification/AppNotification.tsx @@ -1,5 +1,5 @@ import clsx from 'clsx'; -import React from 'react'; +import React, { type ReactNode } from 'react'; import Button from '../Button'; import Text from '../Text'; import styles from './AppNotification.module.css'; @@ -13,7 +13,7 @@ export interface AppNotificationProps { /** * Secondary text used to describe the notification in more detail */ - subTitle: React.ReactNode; + subTitle: ReactNode; /** * Treatment for component (whether it is dark on light text, or light on dark text) */ @@ -23,7 +23,7 @@ export interface AppNotificationProps { /** * Contents of the component below the title and sub-title (used mainly for `ButtonGroup`) */ - children?: React.ReactNode; + children?: ReactNode; /** * CSS class names that can be appended to the component. */ diff --git a/src/components/Avatar/Avatar.stories.ts b/src/components/Avatar/Avatar.stories.ts index 35bea6f7c..0cfa04397 100644 --- a/src/components/Avatar/Avatar.stories.ts +++ b/src/components/Avatar/Avatar.stories.ts @@ -1,8 +1,6 @@ import type { StoryObj, Meta } from '@storybook/react'; import { Avatar } from './Avatar'; -type Args = React.ComponentProps; - export default { title: 'Components/Avatar', component: Avatar, @@ -10,9 +8,9 @@ export default { badges: ['intro-1.3', 'current-1.3'], layout: 'centered', }, -} as Meta; +} as Meta; -type Story = StoryObj; +type Story = StoryObj; export const Default: Story = {}; diff --git a/src/components/Avatar/Avatar.tsx b/src/components/Avatar/Avatar.tsx index fa20b8a1c..cd30639a8 100644 --- a/src/components/Avatar/Avatar.tsx +++ b/src/components/Avatar/Avatar.tsx @@ -52,6 +52,15 @@ type AvatarProps = { src?: string; /** * The user associated with this avatar + * + * `UserData` takes the format ([] is optional): + * + * ``` + * - fullName (string) + * - [id] (string | number) + * - [displayName] (string) + * - [key:string] (string | number | boolean) + * ``` */ user?: UserData; /** diff --git a/src/components/Badge/Badge.stories.tsx b/src/components/Badge/Badge.stories.tsx index 24b13740a..860361943 100644 --- a/src/components/Badge/Badge.stories.tsx +++ b/src/components/Badge/Badge.stories.tsx @@ -17,16 +17,14 @@ export default { }, argTypes: { children: { - control: { - type: null, - }, + control: false, }, }, -} as Meta; +} as Meta; -type Args = React.ComponentProps; +type Story = StoryObj; -export const Dot: StoryObj = { +export const Dot: Story = { args: { children: ( <> @@ -42,7 +40,7 @@ export const Dot: StoryObj = { }, }; -export const SmallNumber: StoryObj = { +export const SmallNumber: Story = { args: { children: ( <> @@ -58,7 +56,7 @@ export const SmallNumber: StoryObj = { }, }; -export const LargeNumber: StoryObj = { +export const LargeNumber: Story = { args: { children: ( <> @@ -74,7 +72,7 @@ export const LargeNumber: StoryObj = { }, }; -export const OverNineThousand: StoryObj = { +export const OverNineThousand: Story = { args: { children: ( <> @@ -90,7 +88,7 @@ export const OverNineThousand: StoryObj = { }, }; -export const IconBadge: StoryObj = { +export const IconBadge: Story = { args: { children: ( <> @@ -106,7 +104,7 @@ export const IconBadge: StoryObj = { }, }; -export const IconBadgeUsingIcon: StoryObj = { +export const IconBadgeUsingIcon: Story = { args: { children: ( <> @@ -122,7 +120,7 @@ export const IconBadgeUsingIcon: StoryObj = { }, }; -export const LargeBadgeableObject: StoryObj = { +export const LargeBadgeableObject: Story = { args: { children: ( <> diff --git a/src/components/Breadcrumbs/Breadcrumbs.stories.tsx b/src/components/Breadcrumbs/Breadcrumbs.stories.tsx index f8c12ce0d..b6eaa0924 100644 --- a/src/components/Breadcrumbs/Breadcrumbs.stories.tsx +++ b/src/components/Breadcrumbs/Breadcrumbs.stories.tsx @@ -1,5 +1,5 @@ import type { StoryObj, Meta } from '@storybook/react'; -import { userEvent, within } from '@storybook/testing-library'; +import { userEvent, within } from '@storybook/test'; import React from 'react'; import { Breadcrumbs } from './Breadcrumbs'; @@ -8,6 +8,7 @@ import { chromaticViewports } from '../../util/viewports'; export default { title: 'Components/Breadcrumbs', component: Breadcrumbs, + // TODO: update subcomponent documentation here subcomponents: { 'Breadcrumbs.Item': Breadcrumbs.Item }, args: { children: ( @@ -18,31 +19,29 @@ export default { ), }, - argTypes: { - children: { - control: { - type: null, - }, - }, - }, parameters: { layout: 'centered', badges: ['intro-1.0', 'current-1.3'], }, + argTypes: { + children: { + control: false, + }, + }, decorators: [(Story) =>
{Story()}
], -} as Meta; +} as Meta; -type Args = React.ComponentProps; +type Story = StoryObj; -export const Default: StoryObj = {}; +export const Default: Story = {}; -export const OneCrumb: StoryObj = { +export const OneCrumb: Story = { args: { children: , }, }; -export const TwoCrumbs: StoryObj = { +export const TwoCrumbs: Story = { args: { children: ( <> @@ -53,7 +52,7 @@ export const TwoCrumbs: StoryObj = { }, }; -export const LongList: StoryObj = { +export const LongList: Story = { args: { children: ( <> @@ -73,7 +72,7 @@ export const LongList: StoryObj = { }, }; -export const LongText: StoryObj = { +export const LongText: Story = { args: { children: ( <> @@ -102,7 +101,7 @@ export const LongText: StoryObj = { }, }; -export const LongTextCustomSeparator: StoryObj = { +export const LongTextCustomSeparator: Story = { args: { ...LongText.args, separator: '>', @@ -116,7 +115,7 @@ export const LongTextCustomSeparator: StoryObj = { /** * Mostly for visual regression testing. */ -export const LongTextMenu: StoryObj = { +export const LongTextMenu: Story = { args: { ...LongText.args, }, diff --git a/src/components/Breadcrumbs/Breadcrumbs.test.tsx b/src/components/Breadcrumbs/Breadcrumbs.test.tsx index 68d6de625..1bc8d8e6e 100644 --- a/src/components/Breadcrumbs/Breadcrumbs.test.tsx +++ b/src/components/Breadcrumbs/Breadcrumbs.test.tsx @@ -1,5 +1,5 @@ import { generateSnapshots } from '@chanzuckerberg/story-utils'; -import { composeStories } from '@storybook/testing-react'; +import { composeStories } from '@storybook/react'; import { render, screen, waitFor } from '@testing-library/react'; import React from 'react'; import * as stories from './Breadcrumbs.stories'; diff --git a/src/components/Breadcrumbs/Breadcrumbs.tsx b/src/components/Breadcrumbs/Breadcrumbs.tsx index f980a73c7..184b5bd90 100644 --- a/src/components/Breadcrumbs/Breadcrumbs.tsx +++ b/src/components/Breadcrumbs/Breadcrumbs.tsx @@ -27,7 +27,8 @@ type Props = { id?: string; /** * Custom string separator between individual breadcrumbs - * Defaults to '/' + * + * **Defaults to `"/"`**. */ separator?: Separators; }; diff --git a/src/components/Button/Button.stories.tsx b/src/components/Button/Button.stories.tsx index 80de70a9b..ebcfd88ff 100644 --- a/src/components/Button/Button.stories.tsx +++ b/src/components/Button/Button.stories.tsx @@ -12,12 +12,6 @@ export default { isLoading: false, }, argTypes: { - // size: { - // control: { - // type: 'select', - // }, - // options: SIZES, - // }, isFullWidth: { control: 'boolean', }, @@ -29,11 +23,11 @@ export default { layout: 'centered', badges: ['intro-1.0', 'current-2.0'], }, -} as Meta; +} as Meta; -type Args = React.ComponentProps; +type Story = StoryObj; -export const Default: StoryObj = { +export const Default: Story = { args: { children: 'Button', }, @@ -42,7 +36,7 @@ export const Default: StoryObj = { /** * Each button can come in a set of ranks, denoting the importance of the button to the surrounding user interface. */ -export const DefaultRanks: StoryObj = { +export const DefaultRanks: Story = { args: { ...Default.args, }, @@ -66,7 +60,7 @@ export const DefaultRanks: StoryObj = { /** * Buttons can be disabled for each rank using `isDisabled` */ -export const Disabled: StoryObj = { +export const Disabled: Story = { args: { ...DefaultRanks.args, isDisabled: true, @@ -77,7 +71,7 @@ export const Disabled: StoryObj = { /** * Since `isDisabled` will set the form's proper disabled state, don't use just `disabled`. This will show a visual error. */ -export const JustDisabledProp: StoryObj = { +export const JustDisabledProp: Story = { args: { ...DefaultRanks.args, disabled: true, @@ -89,7 +83,7 @@ export const JustDisabledProp: StoryObj = { /** * Tertiary buttons can have an additional level of emphasis when stood by themselves. Use this case sparingly. */ -export const TertiaryStandalone: StoryObj = { +export const TertiaryStandalone: Story = { args: { rank: 'tertiary', context: 'standalone', @@ -99,7 +93,7 @@ export const TertiaryStandalone: StoryObj = { /** * Each button has variants denoting criticality, like for changes that are permanent, deletions, etc. */ -export const CriticalRanks: StoryObj = { +export const CriticalRanks: Story = { args: { ...DefaultRanks.args, variant: 'critical', @@ -110,7 +104,7 @@ export const CriticalRanks: StoryObj = { /** * There is also a neutral variant, to combine into other components, or provide a muted appearance. */ -export const NeutralRanks: StoryObj = { +export const NeutralRanks: Story = { args: { ...DefaultRanks.args, variant: 'neutral', @@ -121,7 +115,7 @@ export const NeutralRanks: StoryObj = { /** * Each rank also includes an inverse variant, for use on dark backgrounds. */ -export const InverseRanks: StoryObj = { +export const InverseRanks: Story = { args: { ...DefaultRanks.args, variant: 'inverse', @@ -136,7 +130,7 @@ export const InverseRanks: StoryObj = { /** * Inverse buttons can be disabled as well */ -export const InverseDisabledRanks: StoryObj = { +export const InverseDisabledRanks: Story = { args: { ...DefaultRanks.args, variant: 'inverse', @@ -152,7 +146,7 @@ export const InverseDisabledRanks: StoryObj = { /** * Buttons come in three sizes */ -export const Sizes: StoryObj = { +export const Sizes: Story = { args: { ...Default.args, }, @@ -176,7 +170,7 @@ export const Sizes: StoryObj = { /** * Buttons can come with full width set, which will expand the button to its maximum width (diferent for each size) */ -export const FullWidths: StoryObj = { +export const FullWidths: Story = { args: { ...Sizes.args, isFullWidth: true, @@ -190,7 +184,7 @@ export const FullWidths: StoryObj = { /** * When in the loading state, a button will show a loading indicator in place of the normal button text, maintaining the initial size. */ -export const LoadingStates: StoryObj = { +export const LoadingStates: Story = { args: { ...Sizes.args, isLoading: true, @@ -202,7 +196,7 @@ export const LoadingStates: StoryObj = { * `iconLayout` lets you place the icons adjacent to button text, or as the only visible element. * When using `"icon-only"`, you **must** include a label (e.g., via `aria-label`). */ -export const IconLayouts: StoryObj = { +export const IconLayouts: Story = { args: { ...Default.args, icon: 'open-in-new', diff --git a/src/components/Button/Button.test.tsx b/src/components/Button/Button.test.tsx index cb99b3984..8516dd340 100644 --- a/src/components/Button/Button.test.tsx +++ b/src/components/Button/Button.test.tsx @@ -1,10 +1,10 @@ import { generateSnapshots } from '@chanzuckerberg/story-utils'; -import type { StoryFile } from '@storybook/testing-react'; import { render, screen } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; import React from 'react'; import { Button } from './Button'; import * as stories from './Button.stories'; +import type { StoryFile } from '../../util/utility-types'; describe(' @@ -21,25 +20,23 @@ export default { options: ['horizontal', 'vertical', 'horizontal-progressive'], }, children: { - control: { - type: null, - }, + control: false, }, }, parameters: { badges: ['intro-1.0', 'current-2.0'], }, decorators: [(Story) =>
{Story()}
], -} as Meta; +} as Meta; -type Args = React.ComponentProps; +type Story = StoryObj; -export const Default: StoryObj = {}; +export const Default: Story = {}; /** * Buttons can have a vertical layout. */ -export const Vertical: StoryObj = { +export const Vertical: Story = { args: { buttonLayout: 'vertical', }, @@ -48,7 +45,7 @@ export const Vertical: StoryObj = { /** * Primary and secondary buttons can be put along the edges of the tertiary `Button`. */ -export const HorizontalProgressive: StoryObj = { +export const HorizontalProgressive: Story = { args: { buttonLayout: 'horizontal-progressive', }, @@ -58,7 +55,7 @@ export const HorizontalProgressive: StoryObj = { * When using a tertiary button, you may adjust the layout to nudge the button's alignment to better flow * with adjacent content. Use `-ml-X` to set a negative margin within the `ButtonGroup`. */ -export const HorizontalProgressiveTertiary: StoryObj = { +export const HorizontalProgressiveTertiary: Story = { args: { buttonLayout: 'horizontal-progressive', children: ( diff --git a/src/components/ButtonGroup/ButtonGroup.test.ts b/src/components/ButtonGroup/ButtonGroup.test.ts index f36be0257..86a605ab1 100644 --- a/src/components/ButtonGroup/ButtonGroup.test.ts +++ b/src/components/ButtonGroup/ButtonGroup.test.ts @@ -1,6 +1,6 @@ import { generateSnapshots } from '@chanzuckerberg/story-utils'; -import type { StoryFile } from '@storybook/testing-react'; import * as stories from './ButtonGroup.stories'; +import type { StoryFile } from '../../util/utility-types'; describe('', () => { generateSnapshots(stories as StoryFile); diff --git a/src/components/Card/Card.stories.tsx b/src/components/Card/Card.stories.tsx index fa382a870..a7df01328 100644 --- a/src/components/Card/Card.stories.tsx +++ b/src/components/Card/Card.stories.tsx @@ -34,11 +34,6 @@ export default { ), }, argTypes: { - children: { - control: { - type: null, - }, - }, topStripeColor: { options: [ 'bg-brand-blue-lowEmphasis', @@ -53,20 +48,29 @@ export default { type: 'select', }, }, + children: { + control: false, + }, + isInteractive: { + control: 'boolean', + }, + isDragging: { + control: 'boolean', + }, }, -} as Meta; +} as Meta; -type Args = React.ComponentProps; +type Story = StoryObj; /** * Cards come with structural containers for semantic grouping. */ -export const Default: StoryObj = {}; +export const Default: Story = {}; /** * Cards can be made interactive by using `isInteractive`. With this, it will require being linked to `Link` or some control that performs an action or is being dragged. */ -export const IsInteractive: StoryObj = { +export const IsInteractive: Story = { args: { ...Default.args, isInteractive: true, @@ -76,7 +80,7 @@ export const IsInteractive: StoryObj = { /** * This demonstrates all that's possible with the header component */ -export const WithFullHeader: StoryObj = { +export const WithFullHeader: Story = { args: { children: ( <> @@ -99,7 +103,7 @@ export const WithFullHeader: StoryObj = { /** * When using an icon in the header, we should not use `eyebrow` as it causes a noisy appearance. This is, however, technically possible. */ -export const WithFullHeaderAndIcon: StoryObj = { +export const WithFullHeaderAndIcon: Story = { args: { children: ( <> @@ -161,7 +165,7 @@ function CardMenu() { /** * You can combine a small header with a menu icon in the top-right. */ -export const WithSmallFullHeaderAndIcon: StoryObj = { +export const WithSmallFullHeaderAndIcon: Story = { args: { children: ( <> @@ -186,7 +190,7 @@ export const WithSmallFullHeaderAndIcon: StoryObj = { /** * It's possible to customize the card header with formatted text and content, which replaces the pre-defined slots */ -export const WithCustomizedHeader: StoryObj = { +export const WithCustomizedHeader: Story = { args: { children: ( <> @@ -204,7 +208,7 @@ export const WithCustomizedHeader: StoryObj = { }, }; -export const WithHorizontalPrimaryButton: StoryObj = { +export const WithHorizontalPrimaryButton: Story = { args: { children: ( <> @@ -231,7 +235,7 @@ export const WithHorizontalPrimaryButton: StoryObj = { }, }; -export const CustomBrandCard: StoryObj = { +export const CustomBrandCard: Story = { args: { containerColor: 'custom-brand', className: 'border-brand-red bg-brand-red w-96', @@ -241,7 +245,7 @@ export const CustomBrandCard: StoryObj = { /** * You can add a stripe along the top of a card to enhance and emphasis its appearance */ -export const TopStripe: StoryObj = { +export const TopStripe: Story = { args: { topStripe: 'medium', children: ( @@ -272,7 +276,7 @@ export const TopStripe: StoryObj = { /** * Cards also allow for using custom top stripe colors. Use one of the low-emphasis brand colors (see the control above to test) */ -export const CustomTopStripe: StoryObj = { +export const CustomTopStripe: Story = { args: { topStripe: 'high', topStripeColor: 'bg-brand-purple-lowEmphasis', @@ -304,7 +308,7 @@ export const CustomTopStripe: StoryObj = { /** * Another visual change to cards allow for adjusting the background color, to change how the card looks, using `containerColor` */ -export const BackgroundCallout: StoryObj = { +export const BackgroundCallout: Story = { args: { containerColor: 'call-out', children: ( @@ -336,7 +340,7 @@ export const BackgroundCallout: StoryObj = { * Cards have hierarchy, and can contain other cards with one level. When using a nested card, you can use `.ChildCard`, * which comes preconfigured with some settings and defaults applied. All the sub-components of card work within `.Childcard`. */ -export const ChildCards: StoryObj = { +export const ChildCards: Story = { args: { containerColor: 'call-out', topStripe: 'high', @@ -363,7 +367,7 @@ export const ChildCards: StoryObj = { * Cards can be marked as currently being dragged. This can be used in combination with the `draggable` attribute from HTML, * or to work with a drag-n-drop library. */ -export const WhileDragging: StoryObj = { +export const WhileDragging: Story = { args: { isDragging: true, }, @@ -372,7 +376,7 @@ export const WhileDragging: StoryObj = { /** * Implementation Example: Cancelling a card membership */ -export const CancelMembership: StoryObj = { +export const CancelMembership: Story = { parameters: { badges: ['intro-1.0', 'current-2.0', 'implementationExample'], }, diff --git a/src/components/Card/Card.test.ts b/src/components/Card/Card.test.ts index 3dfa80258..4b87962e1 100644 --- a/src/components/Card/Card.test.ts +++ b/src/components/Card/Card.test.ts @@ -1,7 +1,6 @@ import { generateSnapshots } from '@chanzuckerberg/story-utils'; -import type { StoryFile } from '@storybook/testing-react'; - import * as stories from './Card.stories'; +import type { StoryFile } from '../../util/utility-types'; describe('', () => { generateSnapshots(stories as StoryFile); diff --git a/src/components/Checkbox/Checkbox.test.tsx b/src/components/Checkbox/Checkbox.test.tsx index 6039c71a5..fc8647c44 100644 --- a/src/components/Checkbox/Checkbox.test.tsx +++ b/src/components/Checkbox/Checkbox.test.tsx @@ -1,10 +1,10 @@ import { generateSnapshots } from '@chanzuckerberg/story-utils'; -import type { StoryFile } from '@storybook/testing-react'; import { render, screen } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; import React from 'react'; import { Checkbox } from './Checkbox'; import * as stories from './Checkbox.stories'; +import type { StoryFile } from '../../util/utility-types'; describe('', () => { generateSnapshots(stories as StoryFile); diff --git a/src/components/FieldLabel/FieldLabel.stories.ts b/src/components/FieldLabel/FieldLabel.stories.ts index db501fa69..aa5188890 100644 --- a/src/components/FieldLabel/FieldLabel.stories.ts +++ b/src/components/FieldLabel/FieldLabel.stories.ts @@ -1,5 +1,4 @@ import type { StoryObj, Meta } from '@storybook/react'; -import type { ComponentProps } from 'react'; import { FieldLabel } from './FieldLabel'; @@ -13,19 +12,19 @@ export default { layout: 'centered', badges: ['intro-2.0', 'current-2.0'], }, -} as Meta; +} as Meta; -type Args = ComponentProps; +type Story = StoryObj; -export const Default: StoryObj = {}; +export const Default: Story = {}; -export const Medium: StoryObj = { +export const Medium: Story = { args: { size: 'md', }, }; -export const LargeDisabled: StoryObj = { +export const LargeDisabled: Story = { args: { disabled: true, }, @@ -36,7 +35,7 @@ export const LargeDisabled: StoryObj = { }, }; -export const MediumDisabled: StoryObj = { +export const MediumDisabled: Story = { args: { disabled: true, size: 'md', @@ -48,7 +47,7 @@ export const MediumDisabled: StoryObj = { }, }; -export const LongCopy: StoryObj = { +export const LongCopy: Story = { args: { children: 'Long label lorem ipsum dolor sit amet, consectetur adipiscing elit. Ac id velit ut egestas arcu. Atmaecenas urna, risus donec praesent eu consectetur.', diff --git a/src/components/FieldNote/FieldNote.stories.tsx b/src/components/FieldNote/FieldNote.stories.tsx index 5388bef73..2fd1c2d4d 100644 --- a/src/components/FieldNote/FieldNote.stories.tsx +++ b/src/components/FieldNote/FieldNote.stories.tsx @@ -12,18 +12,18 @@ export default { layout: 'centered', badges: ['intro-1.0', 'current-2.0'], }, -} as Meta; +} as Meta; -type Args = React.ComponentProps; +type Story = StoryObj; -export const Default: StoryObj = { +export const Default: Story = { args: { children: 'This is a fieldnote.', id: 'field-1', }, }; -export const WithErrorIcon: StoryObj = { +export const WithErrorIcon: Story = { args: { children: 'This is a fieldnote.', id: 'field-1', @@ -32,7 +32,7 @@ export const WithErrorIcon: StoryObj = { }, }; -export const WithLongText: StoryObj = { +export const WithLongText: Story = { args: { ...WithErrorIcon.args, children: @@ -40,7 +40,7 @@ export const WithLongText: StoryObj = { }, }; -export const WithWarningIcon: StoryObj = { +export const WithWarningIcon: Story = { args: { children: 'This is a fieldnote.', id: 'field-1', @@ -49,7 +49,7 @@ export const WithWarningIcon: StoryObj = { }, }; -export const WithText: StoryObj = { +export const WithText: Story = { args: { children: (
diff --git a/src/components/FieldNote/FieldNote.tsx b/src/components/FieldNote/FieldNote.tsx index 187272d9d..c64289495 100644 --- a/src/components/FieldNote/FieldNote.tsx +++ b/src/components/FieldNote/FieldNote.tsx @@ -2,7 +2,8 @@ import clsx from 'clsx'; import type { ReactNode } from 'react'; import React from 'react'; import type { Status } from '../../util/variant-types'; -import Icon, { type IconName } from '../Icon'; +import Icon from '../Icon'; +import type { IconName } from '../Icon'; import styles from './FieldNote.module.css'; export interface Props { diff --git a/src/components/Fieldset/Fieldset.stories.tsx b/src/components/Fieldset/Fieldset.stories.tsx index 77fb9b30e..41a945e9f 100644 --- a/src/components/Fieldset/Fieldset.stories.tsx +++ b/src/components/Fieldset/Fieldset.stories.tsx @@ -11,15 +11,14 @@ export default { layout: 'centered', badges: ['intro-1.0', 'current-1.3'], }, + // TODO: fix up the sub-component documentation for Fieldset.Legend subcomponents: { FieldsetLegend: Fieldset.Legend, FieldsetItems: Fieldset.Items, }, argTypes: { children: { - control: { - type: null, - }, + control: false, }, }, } as Meta; diff --git a/src/components/Fieldset/Fieldset.test.ts b/src/components/Fieldset/Fieldset.test.ts index 52abdef6a..b090f35ae 100644 --- a/src/components/Fieldset/Fieldset.test.ts +++ b/src/components/Fieldset/Fieldset.test.ts @@ -1,6 +1,6 @@ import { generateSnapshots } from '@chanzuckerberg/story-utils'; -import type { StoryFile } from '@storybook/testing-react'; import * as stories from './Fieldset.stories'; +import type { StoryFile } from '../../util/utility-types'; describe('
', () => { generateSnapshots(stories as StoryFile); diff --git a/src/components/Heading/Heading.test.tsx b/src/components/Heading/Heading.test.tsx index 35f85102b..6cb05154c 100644 --- a/src/components/Heading/Heading.test.tsx +++ b/src/components/Heading/Heading.test.tsx @@ -1,11 +1,11 @@ import { generateSnapshots } from '@chanzuckerberg/story-utils'; -import type { StoryFile } from '@storybook/testing-react'; import { render, screen } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; import React from 'react'; import { Heading } from './Heading'; import * as stories from './Heading.stories'; +import type { StoryFile } from '../../util/utility-types'; describe('', () => { generateSnapshots(stories as StoryFile); diff --git a/src/components/Heading/Heading.tsx b/src/components/Heading/Heading.tsx index 0ff2b2633..23d4496b4 100644 --- a/src/components/Heading/Heading.tsx +++ b/src/components/Heading/Heading.tsx @@ -15,8 +15,17 @@ type HeadingProps = HTMLAttributes & { * **Default is `"h1"`**. */ as?: HeadingElement; + /** + * The contents of the header tag, usually just text, but can include other content. + */ children: ReactNode; + /** + * Additional classnames passed in for styling. + */ className?: string; + /** + * The specified tab index of the heading element (used for focusing in tabbing) + */ tabIndex?: number; /** * Prop to set the desired typography value used in design. Acceptable values diff --git a/src/components/HorizontalStepper/HorizontalStepper.test.tsx b/src/components/HorizontalStepper/HorizontalStepper.test.tsx index 99cb78d96..e50304c14 100644 --- a/src/components/HorizontalStepper/HorizontalStepper.test.tsx +++ b/src/components/HorizontalStepper/HorizontalStepper.test.tsx @@ -1,10 +1,10 @@ import { generateSnapshots } from '@chanzuckerberg/story-utils'; -import type { StoryFile } from '@storybook/testing-react'; import { render } from '@testing-library/react'; import React from 'react'; import { HorizontalStepper } from './HorizontalStepper'; import * as stories from './HorizontalStepper.stories'; import consoleWarnMockHelper from '../../../jest/helpers/consoleWarnMock'; +import type { StoryFile } from '../../util/utility-types'; describe('', () => { const warnMock = consoleWarnMockHelper(); diff --git a/src/components/Hr/Hr.stories.ts b/src/components/Hr/Hr.stories.ts index c8cec72f6..9c14a53a4 100644 --- a/src/components/Hr/Hr.stories.ts +++ b/src/components/Hr/Hr.stories.ts @@ -1,5 +1,4 @@ import type { StoryObj, Meta } from '@storybook/react'; -import type { ComponentProps } from 'react'; import { Hr } from './Hr'; @@ -13,19 +12,27 @@ export default { args: { className: 'w-96', }, -} as Meta; + argTypes: { + size: { + control: 'radio', + }, + variant: { + control: 'radio', + }, + }, +} as Meta; -type Args = ComponentProps; +type Story = StoryObj; -export const Default: StoryObj = {}; +export const Default: Story = {}; -export const Large: StoryObj = { +export const Large: Story = { args: { size: 'lg', }, }; -export const Brand: StoryObj = { +export const Brand: Story = { args: { variant: 'brand', }, diff --git a/src/components/Hr/Hr.tsx b/src/components/Hr/Hr.tsx index f444a00dd..011bd689c 100644 --- a/src/components/Hr/Hr.tsx +++ b/src/components/Hr/Hr.tsx @@ -2,33 +2,37 @@ import clsx from 'clsx'; import React from 'react'; import styles from './Hr.module.css'; -export interface Props { +export type HrProps = { /** - * Stylistic variations: - * - **brand** yields a branded horizontal rule + * Stylistic variations for the horizontal rule + * + * **Default is `"brand"`**. + * */ variant?: 'brand'; /** - * Size variations: - * - **lg** yields a thicker horizontal rule + * Size variations for the horizontal rule. + * + * **Default is `"lg"`**. + * */ size?: 'lg'; /** * CSS class names that can be appended to the component. */ className?: string; -} +}; /** * `import {Hr} from "@chanzuckerberg/eds";` * * Horizontal rule component to present a horizontal line separating content. */ -export const Hr = ({ className, size, variant, ...other }: Props) => { +export const Hr = ({ className, size, variant, ...other }: HrProps) => { const componentClassName = clsx( styles['hr'], - size === 'lg' && styles['hr--lg'], - variant === 'brand' && styles['hr--brand'], + size === 'lg' && styles[`hr--${size}`], + variant === 'brand' && styles[`hr--${variant}`], className, ); diff --git a/src/components/Icon/Icon.test.ts b/src/components/Icon/Icon.test.ts index 2feac64a7..860f47fe5 100644 --- a/src/components/Icon/Icon.test.ts +++ b/src/components/Icon/Icon.test.ts @@ -1,6 +1,6 @@ import { generateSnapshots } from '@chanzuckerberg/story-utils'; -import type { StoryFile } from '@storybook/testing-react'; import * as stories from './Icon.stories'; +import type { StoryFile } from '../../util/utility-types'; describe('', () => { generateSnapshots(stories as StoryFile); diff --git a/src/components/Icon/Icon.tsx b/src/components/Icon/Icon.tsx index 593f5b1fd..bf137fdc3 100644 --- a/src/components/Icon/Icon.tsx +++ b/src/components/Icon/Icon.tsx @@ -7,7 +7,7 @@ import styles from './Icon.module.css'; export type { IconName } from '../../icons/spritemap'; // TODO: export union utility type of "Extract | (renderProps) => ReactNode" when updating IconName usages - +// TODO: convert to types for consistency interface IconPropsBase { /** * CSS class names that can be appended to the component. @@ -47,7 +47,7 @@ interface IconPropsBase { size?: string; /** * viewBox for the svg, used when the svg information is passed via children. - * To match included icons, recommend view box of "0 0 24 24" + * To match included icons, recommend view box of `"0 0 24 24"` */ viewBox?: string; } diff --git a/src/components/InlineNotification/InlineNotification.test.ts b/src/components/InlineNotification/InlineNotification.test.ts index 2c1d3536f..3726b0869 100644 --- a/src/components/InlineNotification/InlineNotification.test.ts +++ b/src/components/InlineNotification/InlineNotification.test.ts @@ -1,6 +1,6 @@ import { generateSnapshots } from '@chanzuckerberg/story-utils'; -import type { StoryFile } from '@storybook/testing-react'; import * as stories from './InlineNotification.stories'; +import type { StoryFile } from '../../util/utility-types'; describe('', () => { generateSnapshots(stories as StoryFile); diff --git a/src/components/InlineNotification/InlineNotification.tsx b/src/components/InlineNotification/InlineNotification.tsx index dcd750b85..b26f71f94 100644 --- a/src/components/InlineNotification/InlineNotification.tsx +++ b/src/components/InlineNotification/InlineNotification.tsx @@ -1,5 +1,5 @@ import clsx from 'clsx'; -import React from 'react'; +import React, { type ReactNode } from 'react'; import getIconNameFromStatus from '../../util/getIconNameFromStatus'; import type { Status } from '../../util/variant-types'; @@ -23,7 +23,7 @@ type InlineNotificationProps = { /** * Secondary text used to describe the content in more detail */ - subTitle?: React.ReactNode; + subTitle?: ReactNode; /** * The title/heading of the component */ diff --git a/src/components/InputField/InputField.test.tsx b/src/components/InputField/InputField.test.tsx index 429acc760..2df5d4c0c 100644 --- a/src/components/InputField/InputField.test.tsx +++ b/src/components/InputField/InputField.test.tsx @@ -1,5 +1,4 @@ import { generateSnapshots } from '@chanzuckerberg/story-utils'; -import type { StoryFile } from '@storybook/testing-react'; import { render, screen } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; @@ -7,6 +6,7 @@ import React from 'react'; import { InputField } from './InputField'; import * as stories from './InputField.stories'; +import type { StoryFile } from '../../util/utility-types'; describe('', () => { generateSnapshots(stories as StoryFile); diff --git a/src/components/Label/Label.test.ts b/src/components/Label/Label.test.ts index 1f61adc6c..b681b3f7f 100644 --- a/src/components/Label/Label.test.ts +++ b/src/components/Label/Label.test.ts @@ -1,6 +1,6 @@ import { generateSnapshots } from '@chanzuckerberg/story-utils'; -import type { StoryFile } from '@storybook/testing-react'; import * as stories from './Label.stories'; +import type { StoryFile } from '../../util/utility-types'; describe('