GBG Component Library for React

Usage

First, install the GBG component library and GBG component library using the package manager of your choice

# yarn
yarn add @gbg/gbgcomponentlibrary @gbg/gbgcomponentlibrary_react

# npm
npm install @gbg/gbgcomponentlibrary @gbg/gbgcomponentlibrary_react

You must include the GBG component library css files and assets in your React App when using these components, e.g.

// Main.jsx
import React from 'react';
import App from './app';
import '@gbg/gbgcomponentlibrary/dist/gbgcomponentlibrary.min.css';

...

Then in your React display components include the library components you wish to use

// MyCustomButton.jsx
import React from "react";
import { Button, ButtonKind } from "@gbg/gbgcomponentlibrary_react";

const MyCustomButton = ({ onClick, children }) => (
  <Button kind={ButtonKind.Tertiary} onClick={onClick}>
    {children}
  </Button>
);

export default MyCustomButton;

For a full list of exported components please visit https://ds.gbgplc.com/react/

Contributing

Pre-requisites

node v14 is required to develop in this repository - we reccomend using a node version manager, we like nvm, but your environment is your environment!

Setting up your environment

First ensure you have cloned this repository and installed the requirements using npm ci in your terminal.

Ensure that you have storybook running with npm run storybook and your tests are running npm run test:watch

Creating new components.

New components should conform to the GBG Design System and should follow the principles of writing tests to cover component use cases of inversion of control.

Our components are organised following atomic design, so should be organised under Atoms, Molecules, Templates and Base

Anatomy of a component

Each component should follow this structure

📂 MyComponent/ // Note the capitalisation
| 📄 MyComponent.snippets.js // usage code snippets
| 📄 MyComponent.stories.tsx // examples for storybook
| 📄 MyComponent.test.tsx    // the tests for your components
| 📄 MyComponent.tsx         // the file containing your component and type definitions
| 📄 index.tsx               // the public exports for this component

All components should be exported from the root index file (src/index.ts), and the index file for it's organising folder (eg. src/Atoms/Atoms.ts)

Your component must include storybook stories and have complete usecase coverage in its test cases.

Do not include the global GBGComponentLibrary.css file in your component!

Testing your component

Ensure that your tests cover

1. Basic accessibilty tests.

it("should not have basic a11y issues", async () => {
  const { container } = render(<MyComponent />);
  const results = await axe(container);
  expect(results).toHaveNoViolations();
});

2. Cover the use cases for your component. Think about how you would want to use this component in your projects, write tests that prove it works this way.

If you find you are writing complex tests or too many tests, you trying to do too much with this component? Could this component be broken into smaller units?

Submitting your changes

When you are ready to contribute your changes, ensure that you have a clear, clean branch containing only the changes you wish to contribute, and that the tests are passing for your component, push this branch and Raise a PR.

Raising a PR

Ensure that your PR includes the following

• A clear title.
• What is your PR doing.
• A clear description of the problem you are trying to solve.
• Any notes to help the reviewer.

It must include tests covering your changes.