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. .govuk-frontend-supported should be added to the body of your app in order for styling to be applied to some components

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>
    )
}

Using link components with a router

Several components accept a linkComponent prop that lets you use your router's Link instead of a plain <a>. This makes the library router-agnostic — it works with React Router, Next.js, Gatsby, or any other framework.

Components that support linkComponent: Button, BackLink, Breadcrumbs, Footer, Pagination, SummaryList, TaskList, ServiceNavigation.

Because the library standardises on the HTML href attribute internally, you need a thin adapter that maps href to the prop your router expects. Define it once in your app and reuse it everywhere. Make sure any href values (including those returned from pagination or path functions) are fully-formed URLs, typically starting with /, rather than relative segments like page-2 which would resolve under the current path:

// React Router v6
import { Link } from 'react-router-dom';
const RouterLink = ({ href, ...props }) => <Link to={href} {...props} />;

// Next.js
import NextLink from 'next/link';
const RouterLink = ({ href, ...props }) => <NextLink href={href} {...props} />;

Then pass it to any component that renders links:

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

<Button href="/dashboard" linkComponent={RouterLink}>Go to dashboard</Button>
<BackLink href="/previous-page" linkComponent={RouterLink} />
<Breadcrumbs items={[{ children: 'Home', href: '/' }]} linkComponent={RouterLink} />

If no linkComponent is provided, a standard <a> element is used.