Comic Relief Component Library
Recent Rebuild Notes (June 2026):
- No more markdown importing Javascript faff in example files, just simple React component examples.
- Only exception is the code examples visible below each of the components - they are built using a Vite-specific import feature:
import buttonExampleSrc from '../components/Atoms/Button/ButtonExample.jsx?raw'; - Styled-Components 5 => Styled Components 6 - slight syntax change. Previously usage of nested selector / "&" usage in nested CSS was assumed. It now needs to be explicit (like normal native CSS).
- Removed _TriggerConfetti.js file. I couldn't find any usage, was likely a private helper no longer needed.
General Usage
Main Dependencies
- Vite
- Styled Components
Install the package
$ yarn add @comicrelief/component-library
Wrap your app with the ThemeProvider and crTheme
import { ThemeProvider, crTheme } from '@comicrelief/component-library';
Load fonts in your app's HTML
We use Anton and Montserrat fonts. Add these to your frontend's index.html <head>:
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Anton&family=Montserrat:wght@400;500;600;700&display=swap"
/>
Import components
import { HeroBanner } from '@comicrelief/component-library';
Develop
To install CR-CL locally, run:
$ yarn install
To start the dev build and server:
$ yarn dev
To test:
$ yarn test:unit
Test will run through all Jest tests and watch for any changes on snapshots.
To update snapshots with desired changes brought in through your work:
$ yarn test:unit:update
To publish
$ yarn publish:npm
Testing
Install Playwright:
yarn playwright install
Run the tests:
yarn test:e2e:local