@uktrade/react-component-library 0.10.1

package/dist/components/SummaryItem/SummaryItem.d.ts

@@ -0,0 +1,39 @@
+import type React from "react";
+export interface SummaryItemConfig {
+    name: string;
+    value: React.ReactNode;
+    actions?: SummaryListAction[];
+}
+export type SummaryListAction = {
+    text: string;
+    href: string;
+    visuallyHidden?: string;
+};
+export interface SummaryListActionProps {
+    action: SummaryListAction;
+}
+export interface SummaryListActionsListProps {
+    actions?: SummaryListAction[];
+}
+interface SummaryItemProps {
+    name: string;
+    children: React.ReactNode;
+    actions?: SummaryListAction[];
+}
+/**
+ * Single action link
+ */
+export declare const SummaryListAction: ({ action, }: SummaryListActionProps) => React.JSX.Element;
+/**
+ * Actions container
+ * - Renders nothing if no actions
+ * - Renders a link if one action
+ * - Renders a list if multiple actions
+ */
+export declare const SummaryListActionsList: ({ actions, }: SummaryListActionsListProps) => React.JSX.Element | null;
+/**
+ * Standard GOV.UK Summary List row
+ */
+export declare const SummaryItem: ({ name, children, actions, }: SummaryItemProps) => React.JSX.Element;
+export {};
+//# sourceMappingURL=SummaryItem.d.ts.map

package/dist/components/SummaryItem/SummaryItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SummaryItem.d.ts","sourceRoot":"","sources":["../../../src/components/SummaryItem/SummaryItem.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,WAAW,iBAAiB;IAChC,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,OAAO,CAAC,EAAE,iBAAiB,EAAE,CAAC;CAC/B;AAED,MAAM,MAAM,iBAAiB,GAAG;IAC9B,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB,CAAC;AAEF,MAAM,WAAW,sBAAsB;IACrC,MAAM,EAAE,iBAAiB,CAAC;CAC3B;AAED,MAAM,WAAW,2BAA2B;IAC1C,OAAO,CAAC,EAAE,iBAAiB,EAAE,CAAC;CAC/B;AAED,UAAU,gBAAgB;IACxB,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,OAAO,CAAC,EAAE,iBAAiB,EAAE,CAAC;CAC/B;AAED;;GAEG;AACH,eAAO,MAAM,iBAAiB,GAAI,aAE/B,sBAAsB,KAAG,KAAK,CAAC,GAAG,CAAC,OAYrC,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,sBAAsB,GAAI,cAEpC,2BAA2B,KAAG,KAAK,CAAC,GAAG,CAAC,OAAO,GAAG,IAqBpD,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,WAAW,GAAI,8BAIzB,gBAAgB,KAAG,KAAK,CAAC,GAAG,CAAC,OAQ/B,CAAC"}

package/dist/components/SummaryItem/SummaryItem.js

@@ -0,0 +1,25 @@
+"use client";
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Single action link
+ */
+export const SummaryListAction = ({ action, }) => {
+    return (_jsxs("a", { className: "govuk-link", href: action.href, children: [action.text, action.visuallyHidden && (_jsxs("span", { className: "govuk-visually-hidden", children: [" ", action.visuallyHidden] }))] }));
+};
+/**
+ * Actions container
+ * - Renders nothing if no actions
+ * - Renders a link if one action
+ * - Renders a list if multiple actions
+ */
+export const SummaryListActionsList = ({ actions, }) => {
+    if (!actions || actions.length === 0)
+        return null;
+    return (_jsx("dd", { className: "govuk-summary-list__actions", children: actions.length === 1 ? (_jsx(SummaryListAction, { action: actions[0] })) : (_jsx("ul", { className: "govuk-summary-list__actions-list", children: actions.map((action, index) => (_jsx("li", { className: "govuk-summary-list__actions-list-item", children: _jsx(SummaryListAction, { action: action }) }, `${action.href}-${index}`))) })) }));
+};
+/**
+ * Standard GOV.UK Summary List row
+ */
+export const SummaryItem = ({ name, children, actions, }) => {
+    return (_jsxs("div", { className: "govuk-summary-list__row", children: [_jsx("dt", { className: "govuk-summary-list__key", children: name }), _jsx("dd", { className: "govuk-summary-list__value", children: children }), _jsx(SummaryListActionsList, { actions: actions })] }));
+};

package/dist/components/SummaryList/SummaryList.d.ts

@@ -0,0 +1,17 @@
+import type React from "react";
+import { SummaryListAction } from "../SummaryItem/SummaryItem";
+export interface SummaryListProps extends React.HTMLAttributes<HTMLDListElement> {
+    title: string;
+    children?: React.ReactNode;
+    actions?: SummaryListAction[];
+    className?: string;
+}
+export declare const SummaryList: ({ title, children, className, ...props }: SummaryListProps) => import("react/jsx-runtime").JSX.Element;
+export interface SummaryCardProps extends React.HTMLAttributes<HTMLDivElement> {
+    title: string;
+    children?: React.ReactNode;
+    actions?: SummaryListAction[];
+    className?: string;
+}
+export declare const SummaryCard: ({ title, children, actions, className, ...props }: SummaryCardProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=SummaryList.d.ts.map

package/dist/components/SummaryList/SummaryList.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SummaryList.d.ts","sourceRoot":"","sources":["../../../src/components/SummaryList/SummaryList.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAG/D,MAAM,WAAW,gBAAiB,SAAQ,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC;IAC9E,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,OAAO,CAAC,EAAE,iBAAiB,EAAE,CAAC;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,WAAW,GAAI,0CAA0C,gBAAgB,4CAOrF,CAAC;AAEF,MAAM,WAAW,gBAAiB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC5E,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,OAAO,CAAC,EAAE,iBAAiB,EAAE,CAAC;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,WAAW,GAAI,mDAAmD,gBAAgB,4CAgC9F,CAAC"}

package/dist/components/SummaryList/SummaryList.js

@@ -0,0 +1,7 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+import { SummaryListAction } from "../SummaryItem/SummaryItem";
+import styles from "./SummaryList.module.css";
+export const SummaryList = ({ title, children, className, ...props }) => (_jsxs(_Fragment, { children: [title && _jsx("h2", { className: "govuk-heading-l", children: title }), _jsx("dl", { className: clsx("govuk-summary-list", className), ...props, children: children })] }));
+export const SummaryCard = ({ title, children, actions, className, ...props }) => (_jsx("div", { className: clsx(styles.root, className), children: _jsxs("div", { className: "govuk-summary-card govuk-body", ...props, children: [_jsxs("div", { className: "govuk-summary-card__title-wrapper", children: [_jsx("h2", { className: "govuk-summary-card__title", children: title }), actions && (_jsx("ul", { className: clsx("govuk-summary-card__actions", styles.summaryCardTitleActions), children: actions.map((action) => (_jsx("li", { className: "govuk-summary-card__action", children: _jsx(SummaryListAction, { action: action }) }, action.text))) }))] }), _jsx("div", { className: clsx("govuk-summary-card__content", styles.govukSummaryCardContent), children: children })] }) }));

package/dist/components/SummaryList/SummaryList.module.css

@@ -0,0 +1,14 @@
+.root {
+  .govukSummaryCardContent {
+    display: table;
+    width: calc(100% - 40px);
+    table-layout: fixed;
+    border-collapse: collapse;
+    margin: 20px;
+    margin-top: 10px;
+  }
+
+  .summaryCardTitleActions {
+    font-weight: 400;
+  }
+}

package/dist/components/Tags/Tags.d.ts

@@ -0,0 +1,16 @@
+import type React from "react";
+import { TagColours } from "../Colours";
+export type TagProps = {
+    text: string;
+    colour: TagColours;
+};
+export declare const Tag: ({ text, colour }: TagProps) => React.JSX.Element;
+export type TagsProps = {
+    children: React.ReactNode;
+};
+export declare const Tags: ({ children }: TagsProps) => React.JSX.Element;
+export type TagsListProps = {
+    tags: TagProps[];
+};
+export declare const TagsList: ({ tags }: TagsListProps) => React.JSX.Element;
+//# sourceMappingURL=Tags.d.ts.map

package/dist/components/Tags/Tags.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tags.d.ts","sourceRoot":"","sources":["../../../src/components/Tags/Tags.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAGxC,MAAM,MAAM,QAAQ,GAAG;IACrB,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,UAAU,CAAC;CACpB,CAAC;AAEF,eAAO,MAAM,GAAG,GAAI,kBAAkB,QAAQ,KAAG,KAAK,CAAC,GAAG,CAAC,OAE1D,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG;IACtB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC;AAEF,eAAO,MAAM,IAAI,GAAI,cAAc,SAAS,KAAG,KAAK,CAAC,GAAG,CAAC,OAExD,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG;IAC1B,IAAI,EAAE,QAAQ,EAAE,CAAC;CAClB,CAAC;AAEF,eAAO,MAAM,QAAQ,GAAI,UAAU,aAAa,KAAG,KAAK,CAAC,GAAG,CAAC,OAU5D,CAAC"}

package/dist/components/Tags/Tags.js

@@ -0,0 +1,16 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import clsx from "clsx";
+import { TagColours } from "../Colours";
+import styles from "./Tags.module.css";
+export const Tag = ({ text, colour }) => {
+    return _jsx("strong", { className: clsx("govuk-tag", colour, styles.tag), children: text });
+};
+export const Tags = ({ children }) => {
+    return _jsx("span", { className: clsx("govuk-tags", styles.root), children: children });
+};
+export const TagsList = ({ tags }) => {
+    if (!tags || tags.length === 0)
+        return _jsx(_Fragment, {});
+    return (_jsx(Tags, { children: tags.map((tag) => (_jsx(Tag, { text: tag.text, colour: tag.colour }, tag.text))) }));
+};

package/dist/components/Tags/Tags.module.css

@@ -0,0 +1,17 @@
+.root {
+  display: inline-flex;
+  flex-wrap: wrap;
+
+  @media (max-width: 640px) {
+    float: none;
+    clear: left;
+  }
+
+  @media (min-width: 640px) {
+    float: right;
+  }
+
+  .tag:not(:last-child) {
+    margin-right: 0.5rem;
+  }
+}

package/dist/components/ViewFormItem/ViewFormItem.d.ts

@@ -0,0 +1,11 @@
+import type { ReactNode } from "react";
+import { type TagProps } from "../Tags/Tags";
+interface LinkAndTagItemProps {
+    name: string;
+    href: string;
+    children?: ReactNode;
+    tags?: TagProps[];
+}
+export declare const ViewFormItem: ({ name, href, children, tags, }: LinkAndTagItemProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=ViewFormItem.d.ts.map

package/dist/components/ViewFormItem/ViewFormItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ViewFormItem.d.ts","sourceRoot":"","sources":["../../../src/components/ViewFormItem/ViewFormItem.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,EAAY,KAAK,QAAQ,EAAE,MAAM,cAAc,CAAC;AAIvD,UAAU,mBAAmB;IAC3B,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,IAAI,CAAC,EAAE,QAAQ,EAAE,CAAC;CACnB;AAED,eAAO,MAAM,YAAY,GAAI,iCAK1B,mBAAmB,4CAmBrB,CAAC"}

package/dist/components/ViewFormItem/ViewFormItem.js

@@ -0,0 +1,13 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+import { TagColours } from "../Colours";
+import { TagsList } from "../Tags/Tags";
+import styles from "./ViewFormItem.module.css";
+export const ViewFormItem = ({ name, href, children, tags = [], }) => {
+    tags.push({
+        text: children ? "Completed" : "Not started",
+        colour: children ? TagColours.LightBlue : TagColours.Grey,
+    });
+    return (_jsxs("div", { className: clsx(styles.root, "view-form-item", "govuk-summary-list__row"), children: [_jsx("dt", { className: clsx(styles.key, "govuk-summary-list__key"), children: _jsx("a", { className: "govuk-link", href: href, children: name }) }), _jsx("dd", { className: "govuk-summary-list__value", children: children }), _jsx("dd", { className: clsx(styles.actions, "govuk-summary-list__actions"), children: _jsx(TagsList, { tags: tags }) })] }));
+};

package/dist/components/ViewFormItem/ViewFormItem.module.css

@@ -0,0 +1,11 @@
+.root {
+  clear: both;
+
+  .key {
+    font-weight: normal;
+  }
+
+  & .govuk-tags {
+    float: none;
+  }
+}

package/dist/index.d.ts

@@ -0,0 +1,14 @@
+export * from "./components/SummaryList/SummaryList";
+export * from "./components/SummaryItem/SummaryItem";
+export * from "./components/ViewFormItem/ViewFormItem";
+export * from "./components/Arrow/Arrow";
+export * from "./components/Arrows/Arrows";
+export * from "./components/Tags/Tags";
+export * from "./components/Colours";
+export * from "./components/Button";
+export * from "./components/ButtonGroup";
+export * from "./components/BackLink";
+export * from "./components/LoadingSpinner/LoadingSpinner";
+export * from "./components/ApiBoundary/ApiBoundary";
+export * from "./components/ApiQuery";
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,sCAAsC,CAAC;AACrD,cAAc,sCAAsC,CAAC;AACrD,cAAc,wCAAwC,CAAC;AACvD,cAAc,0BAA0B,CAAC;AACzC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,wBAAwB,CAAC;AACvC,cAAc,sBAAsB,CAAC;AACrC,cAAc,qBAAqB,CAAC;AACpC,cAAc,0BAA0B,CAAC;AACzC,cAAc,uBAAuB,CAAC;AACtC,cAAc,4CAA4C,CAAC;AAC3D,cAAc,sCAAsC,CAAC;AACrD,cAAc,uBAAuB,CAAC"}

package/dist/index.js

@@ -0,0 +1,13 @@
+export * from "./components/SummaryList/SummaryList";
+export * from "./components/SummaryItem/SummaryItem";
+export * from "./components/ViewFormItem/ViewFormItem";
+export * from "./components/Arrow/Arrow";
+export * from "./components/Arrows/Arrows";
+export * from "./components/Tags/Tags";
+export * from "./components/Colours";
+export * from "./components/Button";
+export * from "./components/ButtonGroup";
+export * from "./components/BackLink";
+export * from "./components/LoadingSpinner/LoadingSpinner";
+export * from "./components/ApiBoundary/ApiBoundary";
+export * from "./components/ApiQuery";

package/dist/utils/cn.d.ts

@@ -0,0 +1,2 @@
+export declare function cn(...classes: (string | undefined | false)[]): string;
+//# sourceMappingURL=cn.d.ts.map

package/dist/utils/cn.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"cn.d.ts","sourceRoot":"","sources":["../../src/utils/cn.ts"],"names":[],"mappings":"AAAA,wBAAgB,EAAE,CAAC,GAAG,OAAO,EAAE,CAAC,MAAM,GAAG,SAAS,GAAG,KAAK,CAAC,EAAE,UAE5D"}

package/dist/utils/cn.js

@@ -0,0 +1,3 @@
+export function cn(...classes) {
+    return classes.filter(Boolean).join(" ");
+}

package/package.json

@@ -0,0 +1,78 @@
+{
+  "name": "@uktrade/react-component-library",
+  "version": "0.10.1",
+  "description": "A collection of reusable React components following GOV.UK design patterns.",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist",
+    "src"
+  ],
+  "scripts": {
+    "build": "tsc -p tsconfig.build.json && npm run copy:css",
+    "copy:css": "rsync -av --include='*/' --include='*.css' --exclude='*' src/ dist/",
+    "docs:build": "tsc -p docs/playground/tsconfig.docs.json",
+    "docs:start": "npx vite@latest docs/playground open",
+    "docs:vulnerability": "npx vite@latest --version && npm audit --audit-level=high",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix",
+    "test": "vitest run --config tests/vitest.config.ts",
+    "test:watch": "vitest --watch --config tests/vitest.config.ts",
+    "test:ui": "vitest --ui --config tests/vitest.config.ts",
+    "coverage": "vitest run --coverage --config tests/vitest.config.ts"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    }
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/uktrade/react-component-library.git"
+  },
+  "bugs": {
+    "url": "https://github.com/uktrade/react-component-library/issues"
+  },
+  "homepage": "https://github.com/uktrade/react-component-library#readme",
+  "keywords": [
+    "react-components",
+    "govuk"
+  ],
+  "author": "Mo",
+  "license": "MIT",
+  "type": "module",
+  "private": false,
+  "peerDependencies": {
+    "react": ">=19",
+    "react-dom": ">=19"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.39.2",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
+    "@types/react": "^19.2.9",
+    "@types/react-dom": "^19.2.3",
+    "@typescript-eslint/eslint-plugin": "^8.53.1",
+    "@typescript-eslint/parser": "^8.53.1",
+    "@vitest/coverage-v8": "^4.0.18",
+    "@vitest/ui": "^4.0.18",
+    "eslint": "^9.39.2",
+    "eslint-plugin-react": "^7.37.5",
+    "globals": "^17.2.0",
+    "jsdom": "^27.4.0",
+    "openapi-typescript": "^7.10.1",
+    "typescript": "^5.9.3",
+    "typescript-eslint": "^8.53.1",
+    "vitest": "^4.0.18"
+  },
+  "engines": {
+    "npm": ">=11.6.2",
+    "node": ">=24.11.1"
+  },
+  "dependencies": {
+    "@tanstack/react-query": "^5.90.20",
+    "clsx": "^2.1.0",
+    "openapi-fetch": "^0.15.0"
+  }
+}

package/src/components/ApiBoundary/ApiBoundary.module.css

@@ -0,0 +1,30 @@
+.hods-loading-spinner {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding-top: 1rem;
+}
+
+.hods-loading-spinner__spinner {
+  width: 80px;
+  height: 80px;
+  border: 12px solid #dee0e2;
+  border-top-color: #1d70b8; /* GOV.UK blue */
+  border-radius: 50%;
+  animation: hods-loading-spinner-rotate 1.5s linear infinite;
+}
+
+.hods-loading-spinner__content {
+  margin-top: 1rem;
+  text-align: center;
+}
+
+@keyframes hods-loading-spinner-rotate {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}

package/src/components/ApiBoundary/ApiBoundary.tsx

@@ -0,0 +1,44 @@
+// import { LoadingBox } from "govuk-react";
+import { LoadingSpinner } from "../LoadingSpinner/LoadingSpinner";
+import styles from "./ApiBoundary.module.css";
+import { Button } from "../Button";
+
+interface ApiBoundaryProps {
+  isLoading: boolean;
+  isError: boolean;
+  error?: unknown;
+  onRetry?: () => void;
+  children: React.ReactNode;
+}
+
+/* Boundary for API-related states: loading, success, and error */
+export const ApiBoundary = ({
+  isLoading,
+  isError,
+  error,
+  onRetry,
+  children,
+}: ApiBoundaryProps) => (
+  <div className={styles.root} aria-live="polite">
+    {isLoading && <LoadingSpinner />}
+
+    {!isLoading && !isError && children}
+
+    {isError && (
+      <>
+        <div className={styles.errorBackdrop} />
+        <section className={styles.error}>
+          <h2 className="govuk-heading-m">Error!</h2>
+          <pre className={styles.description}>
+            {typeof error === "string" ? error : JSON.stringify(error, null, 2)}
+          </pre>
+          
+          {/* TODO: Make this button optional since it cannot always be required */}
+          <Button variant="warning" onClick={onRetry}>
+            Retry
+          </Button>
+        </section>
+      </>
+    )}
+  </div>
+);

package/src/components/Arrow/Arrow.module.css

@@ -0,0 +1,21 @@
+.root {
+  display: flex;
+  align-items: center;
+  margin-bottom: 0.5rem;
+}
+
+.arrow {
+  background: #f3f2f1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding-left: 1rem;
+  font-weight: bold;
+  color: #333;
+  transition: background 0.2s ease;
+}
+
+.arrow.active {
+  background: #1d70b8;
+  color: white;
+}

package/src/components/Arrow/Arrow.tsx

@@ -0,0 +1,41 @@
+"use client"
+
+import type React from "react";
+import { cn } from "../../utils/cn";
+import styles from "./Arrow.module.css";
+
+export type ArrowProps = React.JSX.IntrinsicElements["div"] & {
+  variant?: "start" | "middle" | "end";
+  height?: number; // in px
+  active?: boolean;
+};
+
+export const Arrow = ({
+  className,
+  variant = "middle",
+  active = false,
+  height = 40,
+  children,
+  ...props
+}: ArrowProps) => {
+  const clipMap: Record<string, string> = {
+    start: "polygon(0% 0%, calc(100% - 20px) 0%, 100% 50%, calc(100% - 20px) 100%, 0% 100%)",
+    middle: "polygon(0% 0%, calc(100% - 20px) 0%, 100% 50%, calc(100% - 20px) 100%, 0% 100%, 20px 50%)",
+    end: "polygon(0% 0%, 100% 0%, 100% 50%, 100% 100%, 0% 100%, 20px 50%)",
+  };
+
+  return (
+    <div
+      {...props}
+      className={cn(styles.root, className)}
+      style={{ height }}
+    >
+      <div
+        className={cn(styles.arrow, active && styles.active)}
+        style={{ clipPath: clipMap[variant], height }}
+      >
+        {children}
+      </div>
+    </div>
+  );
+};

package/src/components/Arrows/Arrows.module.css

@@ -0,0 +1,25 @@
+.root {
+  & > * {
+    display: none;
+  }
+
+  .active {
+    display: block;
+    + *,
+    + * + * {
+      display: block;
+    }
+  }
+
+  @media (min-width: 30rem) {
+    & {
+      display: flex;
+    }
+  }
+
+  @media (min-width: 40rem) {
+    && > * {
+      display: block;
+    }
+  }
+}

package/src/components/Arrows/Arrows.tsx

@@ -0,0 +1,26 @@
+"use client"
+
+import clsx from "clsx";
+import type React from "react";
+import { Arrow } from "../Arrow/Arrow";
+import styles from "./Arrows.module.css";
+
+export type ArrowsProps = React.JSX.IntrinsicElements["div"] & {
+  arrows: string[];
+  activeIndex: number;
+};
+
+export const Arrows = ({ className, arrows, activeIndex }: ArrowsProps) => (
+  <div className={clsx(styles.root, className)}>
+    {arrows.map((arrow, index) => (
+      <Arrow
+        key={arrow}
+        className={clsx(index === activeIndex && styles.active)}
+        active={index === activeIndex}
+        variant={index === 0 ? "start" : index === arrows.length - 1 ? "end" : "middle"}
+      >
+        {arrow}
+      </Arrow>
+    ))}
+  </div>
+);

package/src/components/BackLink.tsx

@@ -0,0 +1,28 @@
+"use client"
+
+import type { MouseEventHandler, ReactNode } from "react";
+import clsx from "clsx";
+
+export interface BackLinkProps {
+  text?: ReactNode;
+  href?: string;
+  onClick?: MouseEventHandler<HTMLAnchorElement>;
+  className?: string; // ToDo: Improve additional classes, hard to override default styles
+}
+
+export function BackLink({
+  text = "Back",
+  href = "/",
+  onClick,
+  className,
+}: BackLinkProps) {
+  return (
+    <a
+      href={href}
+      onClick={onClick}
+      className={clsx("govuk-back-link", className)}
+    >
+      {text}
+    </a>
+  );
+}

package/src/components/Button.tsx

@@ -0,0 +1,18 @@
+"use client"
+
+import clsx from "clsx";
+import type { JSX, ReactNode } from "react";
+
+type Props = JSX.IntrinsicElements["button"] & {
+  children: ReactNode;
+  variant?: "primary" | "secondary" | "warning";
+};
+
+export const Button = ({ variant = "primary", className, ...props }: Props) => (
+  <button
+    className={clsx("govuk-button", `govuk-button--${variant}`, className)}
+    aria-disabled={props.disabled}
+    data-module="govuk-button"
+    {...props}
+  />
+);

package/src/components/ButtonGroup.tsx

@@ -0,0 +1,16 @@
+"use client"
+
+import clsx from "clsx";
+import type { ReactNode } from "react";
+
+export type ButtonGroupProps = React.JSX.IntrinsicElements["div"] & {
+  children: ReactNode;
+};
+
+export const ButtonGroup = ({ className, children, ...props }: ButtonGroupProps): React.JSX.Element => {
+  return (
+    <div className={clsx("govuk-button-group", className)} {...props}>
+      {children}
+    </div>
+  );
+};

package/src/components/Colours.tsx

@@ -0,0 +1,20 @@
+export enum TagColours {
+  Grey = "govuk-tag--grey",
+  Green = "govuk-tag--green",
+  Turquoise = "govuk-tag--turquoise",
+  Blue = "govuk-tag--blue",
+  LightBlue = "govuk-tag--light-blue",
+  Purple = "govuk-tag--purple",
+  Pink = "govuk-tag--pink",
+  Red = "govuk-tag--red",
+  Orange = "govuk-tag--orange",
+  Yellow = "govuk-tag--yellow",
+}
+
+export type BackgroundType = "default" | "light" | "muted" | "white";
+export enum BackgroundColours {
+  transparent = "transparent",
+  light = "#f8f8f8",
+  muted = "#eef1f5",
+  white = "#ffffff",
+}