USWDS-Next - Storybook: Add initial implementation #14
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Based on default light theme. This is the recommended way of updating the title and setting some baseline defaults for Storybook UI. **Note** Setting a brand image will completely replace the text. Potential workaround here if we really want logo + text - storybookjs/storybook#5866 (comment)
Added to load fonts locally, but seems like its intended for including assets in final build.
- Update title - Add basic USWDS colors
Docs updateI've enabled source code by default [0523b65] to avoid having to click on each variant for markup.
|
heymatthenry
approved these changes
Jun 12, 2024
mejiaj
commented
Jun 13, 2024
web-components/.storybook/preview.js
Outdated
| toc: true, // Autogenerate table of contents. | ||
| theme: UswdsTheme, | ||
| canvas: { | ||
| sourceState: 'shown' |
There was a problem hiding this comment.
Note
Not a blocker, but indentation can be off in some previews. There's a workaround in this issue DocsPage code preview indentation is wrong · Issue #8078 · storybookjs/storybook.
There was a problem hiding this comment.
FYI, I got this working on the MD WDS project I'm working on!
Here are my notes on the workaround:
storybookjs/storybook#8078 (comment)
There was a problem hiding this comment.
@caseywatts thanks for sharing. Created an issue to give this a try 😄
mahoneycm
approved these changes
Jun 13, 2024
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Closes #6.
Blocked by #8.
Initial setup of StorybookJS in repo. Includes a few examples for:
Also created a small custom theme called
UswdsTheme.jsto use Public Sans, bump up default font size, and use some USWDS colors.Welcome page
Includes an example of what custom documentation using Storybook blocks looks like.
Embedded README
Example of embedding an existing README into page. Could be used for CHANGELOGs.
Component docs
Autogenerated component docs.
Component preview
Example of importing Lit component with configurable props.
How to test
web-componentsdirectory.npm install.npm start.You should have a working storybook library powered by Vite.