📽 BFI Design Sytem
The next-gen design system for the British Film Institute.
Compatible with Node 16 & NPM 7.
🍿 Demo and docs
This is a living documentation powered by Storybook, where you can see all the available components and their variations.
🎬 Using the design system
npm install bfi-design-system
// Install peer dependencies
npm install react react-dom styled-components
Import the components you'd like to use into your app. For example:
import React from "react"
import { Card } from "bfi-design-system"
const MyComponent = () =>
<Card>My content</Card>
Each component has documentation in the design system explaining the avaliable props, how to use it, and any guidence on using it.
💻 Developing the design system
You need node
and npm
installed.
- Clone the repo and
npm i
-
npm run dev
will start up the Storybook playground and startrollup
watching for changes.
If you want, you can also include this repo in another app as if it were an npm
package using npm link
. This is great for developing both side-by-side.
How to publish a new version to NPM
- Ensure all tests pass with
npm test
- If the snapshot tests are out of date due to changes in the components then ensure all is working and update them with
npx jest --updateSnapshot
- Increment the next version number in the
package.json
file. -
npm publish
. This will:- Run the tests
- Bundle and transpile the code
- Create and publish a tarball to NPM
- If you are wanting to utilise the updated design system, for example in the BFI
web frontend
you will then need to update the version number of the design system in thepackage.json
file within that repo.
🧪 Testing
We use jest
and react-test-renderer
to run snapshot tests on all components.
npm test
runs all the tests.
If you make changes to the output of components, you can regenerate the snapshot files with jest --updateSnaphot
.
The snapshot test cases themselves come from the same stories.jsx
file colocated with each component.
🧼 Linting
We use eslint
and jsx-a11y
to detect potential accessibility issues. Some code editors will automatically pick up problems, and it runs automatically with the jest
tests, but you can also lint manually with npm run lint
.
To-do list
- Add more add-ons to the Storybook playground
- Typescript support?
- Update the
styled-components
dependency to ~5.0.0