React component implementations of the ONS Design system components.
Link to Storybook documentation
In your own React project add this repository as a dependency, specifying a release version after the # at the end. For example:
yarn add git+https://github.com/ONSdigital/blaise-design-system-react-components#<RELEASE_TAG>Before using components from this library, add the following code within the <head> tags of your React project's public/index.html file:
<link href="https://cdn.ons.gov.uk/sdc/design-system/60.0.2/css/main.css" rel="stylesheet" type="text/css">
The above code implements the ONS Design System's global CSS style rules into your project - if this code is not included, style rules will not be applied to this library's components within your project.
With this imported, you can add the components to your page, like the example below, where we use the Header, ExternalLink and ONSButton components on the page:
import React from "react";
import {Header, ExternalLink, ONSButton} from "blaise-design-system-react-components";
function SimplePage(): ReactElement {
function doStuff() {
// Do stuff
}
return (
<>
<Header title={"Simple site"}/>
<ExternalLink text={"Home"}
link={"/home"}
ariaLabel={"Return to homepage"}/>
<ONSButton label="Go to table of questionnaires"
primary={true}
onClick={() => doStuff()}/>
</>
);
}Components from the design system replicated as React components.
| Component | Link to Design System Component | Notes |
|---|---|---|
| BetaBanner | Phase banner | |
| ExternalLink | Link with external link icon | |
| Footer | Footer | |
| Header | Internal Header | |
| ONSButton | Button | |
| ONSPanel | Panel | |
| ONSPasswordInput | Password | |
| ONSSelect | Select | |
| ONSTextInput | Input | |
| ONSUpload | Upload | |
| Collapsible | Collapsible | |
| Accordion | Accordion |
Based off design system components but modified slightly, either to suit our needs or to make a simple reusable
component for example the ONSErrorPanel is simply a ONSPanel with a message already provided.
| Component | Link to Design System Component | Notes |
|---|---|---|
| NoneProductionWarning | Warning branded Panel | This one is not an 'Official' component. But is based on the Branded Census warning panel |
| ONSErrorPanel | Error Panel Variant | This is a Standard Panel with an error status, with a prepared message "Sorry, there is a problem with this service. We are working to fix the problem. Please try again later." |
| ONSLoadingPanel | Panel | This is a Standard Panel with an info status, with a loading spinner and "Loading" message. Uses react-loader-spinner for the loading spinner. |
React components to simply development across multiple repositories. These are still based off the design system, for
example the StyledForm is a reusable implementation of Formik but the fields and errors are set
up like standard ONS design system fields.
| Component | Link to Design System Component | Notes |
|---|---|---|
| StyledForm | Correct errors pattern | Easily add ONS styled forms to React application. Detailed documentation and example |
| ErrorBoundary | Error Panel Variant | React render UI error wrapper. Detailed documentation and examples |
| DefaultErrorBoundary | Service unavailable errors | React render UI error wrapper. Detailed documentation and examples |
First clone the repository to you local machine
git clone https://github.com/ONSdigital/blaise-design-system-react-components.gitThen open the project in and IDE of your choice and from the terminal run: To install required dependencies run:
yarn installStorybook is like a small UI workshop that allows us to conveniently visualise and manually test each component without needing to spin up a whole separate application.
To visualise a component, you need to write a story for it:
import type { Meta, StoryObj } from '@storybook/react';
import { Button } from './Button';
const meta: Meta<typeof Button> = {
component: Button,
};
export default meta;
type Story = StoryObj<typeof Button>;
export const Primary: Story = {
render: () => <Button primary label="Button" />,
};Once you've written the stories, you can run Storybook to view the components:
yarn run storybookFor more information, visit the Storybook documentation
To run the tests with coverage results run:
yarn run testAfter making your changes you will need to compile the Typescript components, locally run:
yarn run buildThis will add all the exported components into the build/index.js file which will be imported by other React projects.
Commit these changes.
Once merged into main, create a new release and add an appropriate version number.