govuk-react-kainos

Installation

To use the package in your project run npm install kainossoftwareltd-govuk-react-kainos

The repository

Description

Component library with govuk styled components, documented with storybook. The application is built using React v17.0.2. and contains most, but not all (yet) components The application uses webpack for bundling assets and dependencies. We utilize TypeScript aliases defined in tsconfig.json, webpack, and Jest configurations, to help streamline module imports and enhancing code readability.

Style and Types of various components are referenced in the gov.uk design system documentation: https://design-system.service.gov.uk/components/button/

Including the stylesheets

In your main stylesheet include this at the top of the file:

@import 'kainossoftwareltd-govuk-react-kainos/dist/index.css';

This import includes all of the GDS frontend toolkit stylesheets along with all the stylesheets for non GDS compontents and features.

Adding a component - example

Import the required component and any supporting types from the library. Refer to storybook documentation for a full list of properties for each component.

import { Button, Variant } from 'kainossoftwareltd-govuk-react-kainos';

const ExampleComponent = () => {
    const handleClick = () => {
        console.log('Click handled')
    }

    return (
        <Button
            variant={Variant.SECONDARY}
            onClick={handleClick}
            className="govuk-!-margin-left-5"
            data-testid="load-more-button"
        >
            Click me
        </Button>
    )
}