📽 BFI Design Sytem

CURRENTLY IN BETA. SOME THINGS MIGHT NOT WORK

The next-gen design system for the British Film Institute.

🍿 Demo and docs

👉 BFI design system is here.

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 @reach/router

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.

1. Clone the repo and npm i
2. npm run dev will start up the Storybook playground and start rollup 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

1. Ensure all tests pass with npm test
2. 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
3. Increment the next version number in the package.json file.
4. npm publish. This will:
   • Run the tests
   • Bundle and transpile the code
   • Create and publish a tarball to NPM
5. 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 the package.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