UI components for the Storybook marketing, docs, addons, blog and showcase sites.

• Storybook homepage
• Tutorials
• Blog
• Component Encyclopedia

Note: these components are not used in Storybook's UI.

Building components

• 📚 Storybook for UI component development and auto-generated docs
• 👩‍🎤 Storybook theming | for component-scoped styling
• ⚛️ React declarative component-centric UI

Maintaining the system

• 📦 NPM for packaging and distribution
• ✅ Chromatic to prevent UI bugs in components (by Storybook maintainers)
• 🚥 CircleCI Continuous integration

npm install --save @storybook/components-marketing

Install peer dependencies:

npm install --save @docsearch/css @storybook/theming [email protected]

The page header comprises of three parts: Eyerbrow, Nav, and SubNav

Eyebrow, Nav, and Footer usually live at the shared layout level whereas the SubNav is specific to each page. The SubNav can be configured in several different ways, check out its stories file for examples.

All these components support an inverse variant.

Source shared DX data from https://storybook-dx.netlify.app/.netlify/functions/dx-data

• Eyerbrow requires latestPost
• Footer requires subscriberCount

The Nav and Footer links are configured via the LinksContextProvider. It comes with a default set of links

https://storybook-dx.netlify.app/.netlify/functions/dx-data

Eyebrow contains a Search component which depends on @docsearch/css. You need to load these styles in your app, probably at the top-most, global, level:

import '@docsearch/css';

Bump the version

Push a release to GitHub and npm

Push a changelog to GitHub

Notes:

• Requires authentication with npm adduser
• auto is used to generate a changelog and push it to GitHub. In order for this to work correctly, environment variables called GH_TOKEN and NPM_TOKEN are needed that reference a GitHub personal access token and a NPM "Publish" token with the appropriate permissions to update the repo.

MIT © storybookjs