@codecademy/brand

brand

Brand components across the design spectrum that exist for utility, are more experimental, or are tied to brand representation.

Building brand

Run yarn nx build brand to build the brand component library.

Storybook

To build the Brand Storybook, run yarn nx build-storybook brand.

To run the Brand Storybook locally, run yarn nx storybook brand. The Storybook instance will be spun up on local port 4400.

You can view the production Brand Storybook at https://brand-storybook.codecademy.com/?path=/docs/brand--docs.

Browsing stories

In the Storybook sidebar, you will see all of our component organized according to Atomic Design standards.

Each component has its own Docs page as well as a number of stories representing a discrete component state, use case, or context. Clicking the story in the sidebar will take you to the Canvas view of that story, which will allow you to customize props for that component state in browser.

We recommend reading the Browse Stories documentation from Storybook to make the best use of Canvas + other features!

Writing stories

Unlike Gamut - the new brand library uses the typesafe CSF format. You can find more information about how to write stories here.

Eventually our stories will be colocated with their respective components, but in the meantime you can find them in the ./stories folder.

PR Previews

PR previews publish for every pull request - you can find the url in the output within the Publish Storybook Github action, under the Run npx nx run-many --target=publish-storybook --parallel=3 step.

This is temporarily, and the web platform team is diligently working on getting Storybook preview urls in PR comments.