Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Replace auto-docs with a free-form MDX documentation page #73

Merged
merged 1 commit into from
Jun 7, 2023
Merged

Conversation

contolini
Copy link
Member

@contolini contolini commented Jun 7, 2023

Storybook's autodocs pages lack a lot of the information about our components (rendered states, guidelines, a11y tips). To show how MDX docs work, I created an overview page for the Checkbox component and copied over the content from the DS checkbox page.

MDX = MarkDown JSX and supports any flavor of markdown, including raw HTML.

Closes #68
See https://storybook.js.org/docs/react/writing-docs/mdx
See https://storybook.js.org/docs/react/writing-docs/doc-blocks

How to test this PR

  1. Compare the autodocs checkbox page to the PR preview checkbox docs page to the DS checkbox page. Is MDX a reasonable route for us?

Notes

Couple things to mull over:

  • If we were to add HTML snippets alongside the React snippets (View code button), could we retire the DS website? Or is the barebones nature of Storybook too ugly when compared to the DS website?

@netlify
Copy link

netlify bot commented Jun 7, 2023

Deploy Preview for cfpb-design-stories ready!

Name Link
🔨 Latest commit ecf6438
🔍 Latest deploy log https://app.netlify.com/sites/cfpb-design-stories/deploys/648098bc94bf760008268154
😎 Deploy Preview https://deploy-preview-73--cfpb-design-stories.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

Storybook's autodocs pages lack a lot of the information about our
components (rendered states, guidelines, a11y tips). To show how
MDX docs work, I created an overview page for the Checkbox component
and copied over the content from https://cfpb.github.io/design-system/components/checkboxes

MDX supports any flavor of markdown so we can add whatever we'd like to the
docs pages if we decide to go this route.

Closes #68
@meissadia
Copy link
Contributor

If we were to add HTML snippets alongside the React snippets (View code button), could we retire the DS website? Or is the barebones nature of Storybook too ugly when compared to the DS website?

Functionally I think it could replace the DS site, but the Storybook content does still feel quite dry by comparison. Maybe SB just needs some additional styling?

Copy link
Contributor

@meissadia meissadia left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍🏾

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Add ability to add free-form documentation to component pages
2 participants