Design System Core

This project provides basic components in pure React for Barnardo's Design System. To visualize components this library is using Storybook.

Getting Started

Getting a Storybook build up and running

First, install Node.js and npm.

Then run these commands:

• npm install, to install all dependencies
• npm start, to start a storybook server
• or npm run build, to compile a static build

Open http://localhost:9009 to view it in the browser.

The page will reload if you make edits.

Testing

Testing the build

Storybook comes with an add-on called StoryShots. It provides snapshot testing for each component that has a story. For better coverage and more complex scenarios use unit testing.

To run the test suite use command:

npm run test

This launches the test runner in the interactive watch mode.

See the section about running tests for more information.

Components Installation

Installing Design System components and importing them into a project for use

1. Install latest LTS Node.js.
2. Install the Barnardo’s Design System components using:

npm install @barnardos/design-system-core

3. Import the components you need.

4. Import the css you need.

Importing the React components

You can import React components using named imports.

For example, to import the BackLink and Pagination components:

// MyComponent/index.js
import { BackLink, Pagination } from "@barnardos/design-system-core";

Importing the CSS

Include the index.css file as such: import "@barnardos/design-system-core/build/index.css";

Make sure its included before your other app component styles so you can effectively override them. Furthermore, ensure you setup your webpack style-loader to include the styles in the correct order.

Individual component CSS imports

!! not working until we have individual entry paths !! For example, to import the CSS of the BackLink and Pagination components:

/* src/index.css */
@import "node_modules/@barnardos/design-system-core/src/components/custom-properties.css";
@import "node_modules/@barnardos/design-system-core/src/components/Navigation/Links/BackLink/index.css";
@import "node_modules/@barnardos/design-system-core/src/components/Navigation/Paginating/Pagination/index.css";

You’ll need to use postcss-present-env to transpile the CSS using the Design System’s PostCSS and browserslist configurations.

Deploying to an NPM package

• To deploy a new version simply create your work as a regular pull request and ensure to include a new version in the package.json file and update the CHANGELOG.MD and have it be merged into the master branch.
• Checkout master locally: git checkout master and git pull to ensure it's up to date with your changes.
• Create a tag matching ^v.*. For example git tag v1.1.1 and then push it up git push origin v1.1.1
• CircleCI will do it's thing and automatically publish the package for you.

Contributing

Contributing to the Design System

Thank you for wanting to contribute. We welcome contributions from everyone, both inside and outside Barnardo’s.

If you’re unfamiliar with:

• open source projects, refer to guidance on how to contribute
• the Barnardo’s development process, refer to the developer manual or additionally view the contributing guide.