@storybook/components-marketing

Storybook Marketing Component Library

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

Used by

• Storybook homepage
• Tutorials
• Blog
• Component Encyclopedia

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

Tech stack

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

Install

npm install --save @storybook/components-marketing

Install peer dependencies:

npm install --save @docsearch/css @storybook/theming framer-motion@7.0.0

Usage — global header and footer

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.

Sourcing data

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

• Eyerbrow requires latestPost
• Footer requires subscriberCount

Configuring links

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

Styling

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';

Development Scripts

yarn release

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.

License

MIT © storybookjs