diff --git a/.storybook/USWDS.js b/.storybook/USWDS.js index 7045edbb3b..66d99f33a5 100644 --- a/.storybook/USWDS.js +++ b/.storybook/USWDS.js @@ -1,4 +1,4 @@ -import { create } from '@storybook/theming'; +import { create } from '@storybook/theming/create'; export default create({ brandTitle: 'U.S. Web Design System (USWDS)', diff --git a/.storybook/main.ts b/.storybook/main.ts index aa080d4eee..5ee4d58de5 100644 --- a/.storybook/main.ts +++ b/.storybook/main.ts @@ -4,6 +4,7 @@ const config: StorybookConfig = { stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'], addons: [ '@storybook/addon-a11y', + '@storybook/addon-docs', '@storybook/addon-links', '@storybook/addon-essentials', '@storybook/addon-interactions', @@ -13,7 +14,7 @@ const config: StorybookConfig = { options: {}, }, docs: { - autodocs: 'tag', + autodocs: true, }, staticDirs: ['public'], } diff --git a/.storybook/manager.js b/.storybook/manager.js index 9ddf38f666..339f3f6731 100644 --- a/.storybook/manager.js +++ b/.storybook/manager.js @@ -1,4 +1,4 @@ -import { addons } from '@storybook/addons'; +import { addons } from '@storybook/manager-api'; import USWDS from './USWDS'; addons.setConfig({ diff --git a/.storybook/preview.ts b/.storybook/preview.ts index 683275da2e..9463cf09cb 100644 --- a/.storybook/preview.ts +++ b/.storybook/preview.ts @@ -5,16 +5,24 @@ import '../src/styles/index.scss' import './custom-styles.scss' import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport' +import { Preview } from '@storybook/react'; +import USWDS from './USWDS'; -export const parameters = { - viewport: { - viewports: INITIAL_VIEWPORTS, - }, - options: { - showPanel: true, - storySort: { - method: 'alphabetical', - order: ['Welcome', 'Design tokens', 'Page Templates', 'Components', 'Other'], +const preview: Preview = { + parameters: { + docs: { + theme: USWDS, + }, + viewport: { + viewports: INITIAL_VIEWPORTS, + }, + options: { + showPanel: true, + storySort: { + method: 'alphabetical', + order: ['Welcome', 'Design tokens', 'Page Templates', 'Components', 'Other'], + }, }, }, } +export default preview; diff --git a/package.json b/package.json index ee325ceccd..157040685d 100644 --- a/package.json +++ b/package.json @@ -80,6 +80,7 @@ "@storybook/addon-links": "^7.6.10", "@storybook/addons": "^7.6.10", "@storybook/blocks": "^7.6.10", + "@storybook/manager-api": "^7.1.1", "@storybook/react": "^7.6.10", "@storybook/react-vite": "^7.6.10", "@storybook/test": "^7.6.10", diff --git a/src/components/Link/Link.stories.tsx b/src/components/Link/Link.stories.tsx index f93d998042..0158e5780f 100644 --- a/src/components/Link/Link.stories.tsx +++ b/src/components/Link/Link.stories.tsx @@ -2,7 +2,7 @@ import React from 'react' import { Link } from './Link' export default { - title: 'Components/Typography/Link', + title: 'Components/Link', component: Link, parameters: { docs: { diff --git a/src/components/forms/TimePicker/TimePicker.stories.tsx b/src/components/forms/TimePicker/TimePicker.stories.tsx index c848df7479..9023d65286 100644 --- a/src/components/forms/TimePicker/TimePicker.stories.tsx +++ b/src/components/forms/TimePicker/TimePicker.stories.tsx @@ -4,7 +4,7 @@ import { Form } from '../Form/Form' import { TimePicker } from './TimePicker' export default { - title: 'Components/Form controls/Time picker', + title: 'Components/Time picker', component: TimePicker, argTypes: { onsubmit: { action: 'submitted' }, diff --git a/src/stories/swatches.stories.tsx b/src/stories/swatches.stories.tsx index f821c9e8fb..7342de83cf 100644 --- a/src/stories/swatches.stories.tsx +++ b/src/stories/swatches.stories.tsx @@ -9,9 +9,9 @@ export default { }, } -export const BackgroundColors = (): React.ReactElement => ( +export const Swatches = (): React.ReactElement => (
-

Background color

+

Color swatches

Primary

diff --git a/src/stories/templates/createaccount.stories.tsx b/src/stories/templates/createaccount.stories.tsx index 7475ef587e..4fae47f417 100644 --- a/src/stories/templates/createaccount.stories.tsx +++ b/src/stories/templates/createaccount.stories.tsx @@ -35,7 +35,7 @@ import circleSvg from '@uswds/uswds/img/circle-gray-20.svg' import { MediaBlockBody } from '../../components/mediablock/MediaBlockBody/MediaBlockBody' export default { - title: 'Page Templates/Authentication Pages', + title: 'Page Templates/Create Account', parameters: { options: { showPanel: false, diff --git a/src/stories/templates/documentation.stories.tsx b/src/stories/templates/documentation.stories.tsx index 2a81984ceb..8672df5a0c 100644 --- a/src/stories/templates/documentation.stories.tsx +++ b/src/stories/templates/documentation.stories.tsx @@ -26,11 +26,8 @@ import { import { SideNav } from '../../components/SideNav/SideNav' export default { - title: 'Page Templates/Documentation Page', + title: 'Page Templates/Documentation', parameters: { - options: { - showPanel: false, - }, docs: { description: { component: ` diff --git a/src/stories/templates/mutliplesignin.stories.tsx b/src/stories/templates/mutliplesignin.stories.tsx index ae65e909fa..436a5e12ef 100644 --- a/src/stories/templates/mutliplesignin.stories.tsx +++ b/src/stories/templates/mutliplesignin.stories.tsx @@ -30,7 +30,7 @@ import logoImg from '@uswds/uswds/img/logo-img.png' import circleSvg from '@uswds/uswds/img/circle-gray-20.svg' export default { - title: 'Page Templates/Authentication Pages', + title: 'Page Templates/Multiple Sign In Options', parameters: { options: { showPanel: false, diff --git a/src/stories/templates/notfound.stories.tsx b/src/stories/templates/notfound.stories.tsx index b08170ec00..23714ef58e 100644 --- a/src/stories/templates/notfound.stories.tsx +++ b/src/stories/templates/notfound.stories.tsx @@ -35,7 +35,7 @@ import { } from '../../index' export default { - title: 'Page Templates/Not Found Page', + title: 'Page Templates/Not Found', parameters: { options: { showPanel: false, diff --git a/src/stories/templates/signin.stories.tsx b/src/stories/templates/signin.stories.tsx index 06fd6ccd65..597ed62ada 100644 --- a/src/stories/templates/signin.stories.tsx +++ b/src/stories/templates/signin.stories.tsx @@ -33,7 +33,7 @@ import logoImg from '@uswds/uswds/img/logo-img.png' import circleSvg from '@uswds/uswds/img/circle-gray-20.svg' export default { - title: 'Page Templates/Authentication Pages', + title: 'Page Templates/Sign In', parameters: { options: { showPanel: false, diff --git a/src/stories/type.stories.tsx b/src/stories/type.stories.tsx index a55ecc1d8c..b6f0e70d48 100644 --- a/src/stories/type.stories.tsx +++ b/src/stories/type.stories.tsx @@ -1,7 +1,7 @@ import React from 'react' export default { - title: 'Components/Typography/Type Styles', + title: 'Design tokens/Type Styles', parameters: { options: { showPanel: false, diff --git a/src/stories/welcome.stories.mdx b/src/stories/welcome.stories.mdx new file mode 100644 index 0000000000..6ab2cfc90e --- /dev/null +++ b/src/stories/welcome.stories.mdx @@ -0,0 +1,22 @@ +import { Meta, Story, Canvas } from '@storybook/addon-docs'; + + + + [trussworks](https://github.com/trussworks)/[**react-uswds**](https://github.com/trussworks/react-uswds) + +# ReactUSWDS Component Library + +This is a frontend component library built by [Truss](https://truss.works/), using [React](https://reactjs.org/) with [Typescript](https://www.typescriptlang.org/), based on design patterns defined by the [United States Web Design System (USWDS)](https://designsystem.digital.gov/). Our primary goal is to document and provide common UI components following the USWDS specification. This library removes a significant amount of overhead UI development for projects based on this standard. + +## See also +* [Using the USWDS as an Engineer](https://truss.works/blog/uswds-for-engineers) +* [React-USWDS Github](https://github.com/trussworks/react-uswds) +* [USWDS website](https://designsystem.digital.gov/) +* [USWDS Figma library](https://www.figma.com/community/file/836611771720754351) \ No newline at end of file diff --git a/src/stories/welcome.stories.tsx b/src/stories/welcome.stories.tsx deleted file mode 100644 index 0cf4b36938..0000000000 --- a/src/stories/welcome.stories.tsx +++ /dev/null @@ -1,104 +0,0 @@ -import React from 'react' - -export default { - title: 'Welcome', - parameters: { - options: { - showPanel: false, - }, - }, -} - -export const Welcome = (): React.ReactElement => { - return ( -
-
- - - / - - - react-uswds - - -
-
-
- USWDS logo -
-
-

- ReactUSWDS Component Library -

-
-
-

- This is a frontend component library built by{' '} - Truss, using{' '} - React with{' '} - Typescript, based on - design patterns defined by the{' '} - - United States Web Design System (USWDS) - - . Our primary goal is to document and provide common UI components - following the USWDS specification. This library removes a significant - amount of overhead UI development for projects based on this standard. -

-

See also

- -
- ) -} diff --git a/yarn.lock b/yarn.lock index e4a526c56d..5cc1929fc6 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2841,7 +2841,7 @@ telejson "^7.2.0" ts-dedent "^2.0.0" -"@storybook/manager-api@7.6.17": +"@storybook/manager-api@7.6.17", "@storybook/manager-api@^7.1.1": version "7.6.17" resolved "https://registry.yarnpkg.com/@storybook/manager-api/-/manager-api-7.6.17.tgz#cdf0bb8e5bdc3da2559150125b3d6a3ff72f0def" integrity sha512-IJIV1Yc6yw1dhCY4tReHCfBnUKDqEBnMyHp3mbXpsaHxnxJZrXO45WjRAZIKlQKhl/Ge1CrnznmHRCmYgqmrWg==