@scottish-government/designsystem-react 0.0.0

package/.editorconfig

@@ -0,0 +1,12 @@
+# EditorConfig helps developers define and maintain consistent
+# coding styles between different editors and IDEs
+# editorconfig.org
+root = true
+
+[*]
+indent_size = 4
+indent_style = space
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true

package/.github/workflows/release-package.yml

@@ -0,0 +1,96 @@
+name: Versioned release
+
+on:
+  workflow_dispatch:
+    inputs:
+      release_type:
+        description: 'Release type'
+        required: true
+        type: choice
+        options:
+          - patch
+          - minor
+          - major
+          - prepatch
+          - preminor
+          - premajor
+          - prerelease
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      # Set up node and add the registry url
+      - name: Setup Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18
+          registry-url: 'https://registry.npmjs.org'
+          always-auth: true
+
+      # Install
+      - name: Install
+        run: npm ci
+
+      # Test
+      - name: Run tests
+        run: npm run test
+
+      # Configure Git
+      - name: Git configuration
+        run: |
+          git config --global user.email "41898282+github-actions[bot]@users.noreply.github.com"
+          git config --global user.name "GitHub Actions"
+
+      # Set package version
+      - name: Set package version
+        if: startsWith(github.event.inputs.release_type, 'pre') != true
+        run: |
+          echo "NEW_VERSION=$(npm --no-git-tag-version version $RELEASE_TYPE)" >> $GITHUB_ENV
+          echo "RELEASE_TAG=latest" >> $GITHUB_ENV
+        env:
+          RELEASE_TYPE: ${{github.event.inputs.release_type}}
+
+      # Set pre-release version
+      - name: Set pre-release version
+        if: startsWith(github.event.inputs.release_type, 'pre')
+        run: |
+          echo "NEW_VERSION=$(npm --no-git-tag-version --preid=beta version $RELEASE_TYPE)" >> $GITHUB_ENV
+          echo "RELEASE_TAG=beta" >> $GITHUB_ENV
+        env:
+          RELEASE_TYPE: ${{github.event.inputs.release_type}}
+
+      # Build release assets
+      - name: Build release assets
+        run: |
+          npm run build
+
+      ## Add release assets
+      - name: Add release assets to commit
+        run: |
+          git add -f "dist/**/*"
+
+      # Commit updated package.json
+      - name: Commit package.json and create tag
+        run: |
+          git add "package.json"
+          git add "package-lock.json"
+          git commit -m "chore: release ${{env.NEW_VERSION}}"
+          git tag ${{env.NEW_VERSION}}
+
+      # Push to git repo
+      - name: Push changes to git
+        env:
+          GITHUB_TOKEN: ${{secrets.GITHUB_TOKEN}}
+        run: |
+          git push origin && git push --tags
+
+      # Publish to npm
+      - name: Publish npm package
+        run: npm publish --access public
+        env:
+          NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}

package/@types/common/ConditionalWrapper.d.ts

@@ -0,0 +1,6 @@
+declare namespace SGDS.Common {
+    interface ConditionalWrapper extends React.AllHTMLAttributes<HTMLElement> {
+        condition: boolean,
+        wrapper: any
+    }
+}

package/@types/common/HintText.d.ts

@@ -0,0 +1,6 @@
+declare namespace SGDS.Common {
+    interface HintText extends React.AllHTMLAttributes<HTMLElement> {
+        id?: string,
+        text?: string
+    }
+}

package/@types/common/Icon.d.ts

@@ -0,0 +1,11 @@
+declare namespace SGDS.Common {
+    interface Icon extends React.AllHTMLAttributes<SVGSVGElement> {
+        accessible?: boolean,
+        className?: string,
+        fill?: boolean,
+        icon: string
+        iconPath?: string,
+        iconSize?: string,
+        title?: string
+    }
+}

package/@types/common/ScreenReaderText.d.ts

@@ -0,0 +1,4 @@
+declare namespace SGDS.Common {
+    interface ScreenReaderText extends React.AllHTMLAttributes<HTMLElement> {
+    }
+}

package/@types/common/WrapperTag.d.ts

@@ -0,0 +1,5 @@
+declare namespace SGDS.Common {
+    interface WrapperTag extends React.AllHTMLAttributes<HTMLElement> {
+        tagName?: string
+    }
+}

package/@types/components/Accordion.d.ts

@@ -0,0 +1,15 @@
+declare namespace SGDS.Component {
+    namespace Accordion {
+        interface Item extends React.AllHTMLAttributes<HTMLElement> {
+            headerLevel?: SGDS.HeaderLevel,
+            id: string,
+            open?: boolean,
+            title: string
+        }
+    }
+
+    interface Accordion extends React.AllHTMLAttributes<HTMLElement> {
+        headerLevel?: SGDS.HeaderLevel,
+        hideOpenAll?: boolean
+    }
+}

package/@types/components/AspectBox.d.ts

@@ -0,0 +1,5 @@
+declare namespace SGDS.Component {
+    interface AspectBox extends React.AllHTMLAttributes<HTMLElement> {
+        ratio?: 'square' | '1:1' | '4:3' | '16:9' | '21:9';
+    }
+}

package/@types/components/BackToTop.d.ts

@@ -0,0 +1,5 @@
+declare namespace SGDS.Component {
+    interface BackToTop extends React.AllHTMLAttributes<HTMLElement> {
+        href?: string;
+    }
+}

package/@types/components/Breadcrumbs.d.ts

@@ -0,0 +1,14 @@
+declare namespace SGDS.Component {
+    namespace Breadcrumbs {
+        interface Item extends React.AllHTMLAttributes<HTMLElement> {
+            hidden?: boolean,
+            href?: string,
+            title: string
+        }
+    }
+
+    interface Breadcrumbs extends React.AllHTMLAttributes<HTMLElement> {
+        hideLastItem?: boolean,
+        items: Breadcrumbs.Item[]
+    }
+}

package/@types/components/Button.d.ts

@@ -0,0 +1,17 @@
+declare namespace SGDS.Component {
+    type ButtonStyle = 'primary' | 'secondary';
+    type ButtonType = 'submit' | 'reset' | 'button';
+    type ButtonWidth = 'fluid' | 'fixed' | 'max';
+
+    interface Button extends React.AllHTMLAttributes<HTMLButtonElement> {
+        icon?: string,
+        iconLeft?: boolean
+        iconOnly?: boolean,
+        href?: string,
+        small?: boolean,
+        buttonStyle?: ButtonStyle,
+        styleAsLink?: boolean,
+        type?: ButtonType
+        width?: ButtonWidth
+    }
+}

package/@types/components/Checkbox.d.ts

@@ -0,0 +1,13 @@
+declare namespace SGDS.Component {
+    namespace Checkbox {
+        interface Group extends React.AllHTMLAttributes<HTMLElement> {
+            items: Checkbox[],
+            small?: boolean
+        }
+    }
+
+    interface Checkbox extends CheckboxRadioBase<HTMLInputElement> {
+        exclusive?: boolean
+        id: string
+    }
+}

package/@types/components/ConfirmationMessage.d.ts

@@ -0,0 +1,7 @@
+declare namespace SGDS.Component {
+    interface ConfirmationMessage extends React.AllHTMLAttributes<HTMLElement> {
+        ariaLive: AriaLive,
+        headerLevel: HeaderLevel,
+        title: string
+    }
+}

package/@types/components/ContentsNav.d.ts

@@ -0,0 +1,15 @@
+declare namespace SGDS.Component {
+    namespace ContentsNav {
+        interface Link extends React.AllHTMLAttributes<HTMLElement> {
+            title: string,
+            current: boolean,
+            href: string
+        }
+    }
+
+    interface ContentsNav extends React.AllHTMLAttributes<HTMLElement> {
+        items: ContentsNav.Link[],
+        label: string,
+        title: string
+    }
+}

package/@types/components/DatePicker.d.ts

@@ -0,0 +1,19 @@
+declare namespace SGDS.Component {
+    interface DatePicker extends React.AllHTMLAttributes<HTMLElement> {
+        disabledDates?: string,
+        error?: boolean,
+        errorMessage?: string,
+        id: string,
+        hintText?: string,
+        iconPath?: string,
+        label: string,
+        maxDate?: string,
+        minDate?: string,
+        multiple?: boolean,
+        name?: string,
+        onBlur?: React.EventHandler<any>,
+        onChange?: React.EventHandler<any>,
+        value?: string,
+        width?: SGDS.InputWidth
+    }
+}

package/@types/components/Details.d.ts

@@ -0,0 +1,6 @@
+declare namespace SGDS.Component {
+    interface Details extends React.AllHTMLAttributes<HTMLDetailsElement> {
+        title?: string,
+        summary: string
+    }
+}

package/@types/components/ErrorMessage.d.ts

@@ -0,0 +1,6 @@
+declare namespace SGDS.Component {
+    interface ErrorMessage extends React.AllHTMLAttributes<HTMLElement> {
+        id?: string,
+        text: string | undefined
+    }
+}

package/@types/components/Metadata.d.ts

@@ -0,0 +1,11 @@
+declare namespace SGDS.Component {
+    namespace Metadata {
+        interface Item extends React.AllHTMLAttributes<HTMLElement> {
+            name: string
+        }
+    }
+
+    interface Metadata extends React.AllHTMLAttributes<HTMLDListElement> {
+        inline?: boolean
+    }
+}

package/@types/components/NotificationBanner.d.ts

@@ -0,0 +1,9 @@
+declare namespace SGDS.Component {
+    interface NotificationBanner extends React.AllHTMLAttributes<HTMLDivElement> {
+        close?: boolean,
+        icon?: boolean,
+        iconColour?: boolean,
+        iconInverse?: boolean,
+        title: string
+    }
+}

package/@types/components/NotificationPanel.d.ts

@@ -0,0 +1,7 @@
+declare namespace SGDS.Component {
+    interface NotificationPanel extends React.AllHTMLAttributes<HTMLDivElement> {
+        ariaLive?: AriaLive,
+        headerLevel?: HeaderLevel,
+        title: string
+    }
+}

package/@types/components/PageHeader.d.ts

@@ -0,0 +1,6 @@
+declare namespace SGDS.Component {
+    interface PageHeader extends React.AllHTMLAttributes<HTMLHeadingElement> {
+        label?: string,
+        title: string
+    }
+}

package/@types/components/PhaseBanner.d.ts

@@ -0,0 +1,5 @@
+declare namespace SGDS.Component {
+    interface PhaseBanner extends React.AllHTMLAttributes<HTMLDivElement> {
+        phaseName: string
+    }
+}

package/@types/components/Question.d.ts

@@ -0,0 +1,11 @@
+declare namespace SGDS.Component {
+    type QuestionTags = 'div' | 'fieldset';
+
+    interface Question extends React.AllHTMLAttributes<HTMLElement> {
+        error?: boolean,
+        errorMessage?: string,
+        hintText?: string,
+        legend?: string,
+        tagName: QuestionTags
+    }
+}

package/@types/components/RadioButton.d.ts

@@ -0,0 +1,15 @@
+declare namespace SGDS.Component {
+    namespace RadioButton {
+        interface Group extends React.AllHTMLAttributes<HTMLElement> {
+            inline?: boolean,
+            items: RadioButton[],
+            name: string,
+            small?: boolean
+        }
+    }
+
+    interface RadioButton extends CheckboxRadioBase<HTMLInputElement> {
+        id: string,
+        name: string
+    }
+}

package/@types/components/Select.d.ts

@@ -0,0 +1,14 @@
+declare namespace SGDS.Component {
+    namespace Select {
+        interface Option extends React.AllHTMLAttributes<HTMLOptionElement> {
+            text: string
+        }
+    }
+
+    interface Select extends FormFieldBase<HTMLDivElement> {
+        defaultValue?: string,
+        options: Select.Option[],
+        placeholder?: string,
+        width?: InputWidth
+    }
+}

package/@types/components/SequentialNavigation.d.ts

@@ -0,0 +1,14 @@
+declare namespace SGDS.Component {
+    namespace SequentialNavigation {
+        interface Link extends React.AllHTMLAttributes<HTMLDivElement> {
+            href: string,
+            title: string
+        }
+    }
+
+    interface SequentialNavigation extends React.AllHTMLAttributes<HTMLElement> {
+        ariaLabel?: string,
+        next?: SequentialNavigation.Link,
+        previous?: SequentialNavigation.Link
+    }
+}

package/@types/components/SideNavigation.d.ts

@@ -0,0 +1,19 @@
+declare namespace SGDS.Component {
+    namespace SideNavigation {
+        interface List extends React.AllHTMLAttributes<HTMLUListElement> {
+            items?: SideNavigation.Link[],
+            root?: boolean
+        }
+
+        interface Link extends React.AllHTMLAttributes<HTMLLIElement> {
+            current?: boolean,
+            href: string,
+            items?: SideNavigation.Link[]
+            title: string,
+        }
+    }
+
+    interface SideNavigation extends React.AllHTMLAttributes<HTMLElement> {
+        items: SideNavigation.Link[]
+    }
+}

package/@types/components/SiteNavigation.d.ts

@@ -0,0 +1,13 @@
+declare namespace SGDS.Component {
+    namespace SiteNavigation {
+        interface Link extends React.AllHTMLAttributes<HTMLLIElement> {
+            current?: boolean,
+            href: string,
+            title: string
+        }
+    }
+
+    interface SiteNavigation extends React.AllHTMLAttributes<HTMLElement> {
+        items: SiteNavigation.Link[]
+    }
+}

package/@types/components/SiteSearch.d.ts

@@ -0,0 +1,14 @@
+declare namespace SGDS.Component {
+    type FormMethods = 'GET' | 'POST';
+
+    interface SiteSearch extends React.AllHTMLAttributes<HTMLInputElement> {
+        action?: string,
+        autocompleteEndpoint?: string,
+        autocompleteSuggestionMappingFunction?: Function,
+        id: string,
+        method?: FormMethods,
+        minLength?: number,
+        name?: string,
+        placeholder?: string
+    }
+}

package/@types/components/SkipLinks.d.ts

@@ -0,0 +1,14 @@
+declare namespace SGDS.Component {
+    namespace SkipLinks {
+        interface Link extends React.AllHTMLAttributes<HTMLLIElement> {
+            targetId: string,
+            title: string
+        }
+    }
+
+    interface SkipLinks extends React.AllHTMLAttributes<HTMLDivElement> {
+        items?: SkipLinks.Link[],
+        mainContentId?: string,
+        mainLinkText?: string
+    }
+}

package/@types/components/Tag.d.ts

@@ -0,0 +1,7 @@
+declare namespace SGDS.Component {
+    interface Tag extends React.AllHTMLAttributes<HTMLElement> {
+        className?: string,
+        colour?: TagColour,
+        title: string
+    }
+}

package/@types/components/TaskList.d.ts

@@ -0,0 +1,21 @@
+declare namespace SGDS.Component {
+    namespace TaskList {
+        interface Group extends React.AllHTMLAttributes<HTMLElement> {
+            intro?: string,
+            title: string
+        }
+
+        interface Task extends React.AllHTMLAttributes<HTMLElement> {
+            href?: string,
+            id?: string,
+            isComplete?: boolean,
+            statusText?: string,
+            tagColour?: TagColour,
+            title: string
+        }
+    }
+
+    interface TaskList extends React.AllHTMLAttributes<HTMLElement> {
+        headingId?: string
+    }
+}

package/@types/components/TextInput.d.ts

@@ -0,0 +1,12 @@
+declare namespace SGDS.Component {
+    interface TextInput extends TextInputBase<HTMLInputElement> {
+        buttonIcon?: string,
+        buttonText?: string,
+        className?: string,
+        currency?: boolean,
+        currencySymbol?: string,
+        hasButton?: boolean,
+        type?: string,
+        width?: InputWidth
+    }
+}

package/@types/components/Textarea.d.ts

@@ -0,0 +1,4 @@
+declare namespace SGDS.Component {
+    interface Textarea extends TextInputBase<HTMLTextAreaElement> {
+    }
+}

package/@types/global.d.ts

@@ -0,0 +1 @@
+import React from 'react'

package/@types/sgds.d.ts

@@ -0,0 +1,35 @@
+declare namespace SGDS {
+    type AriaLive = 'polite' | 'assertive';
+    type HeaderLevel = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+    type InputWidth = 'fixed-20' | 'fixed-10' | 'fixed-5' | 'fixed-4' | 'fixed-3' | 'fixed-2' | 'fluid-three-quarters' | 'fluid-two-thirds' | 'fluid-half' | 'fluid-one-third' | 'fluid-one-quarter';
+    type TagColour = 'grey' | 'green' | 'teal' | 'blue' | 'purple' | 'pink' | 'red' | 'orange' | 'yellow';
+
+    interface CheckboxRadioBase<T> extends React.AllHTMLAttributes<T> {
+        checked?: boolean,
+        hintText?: string,
+        id?: string,
+        label: string,
+        name?: string,
+        onBlur?: React.EventHandler<any>,
+        onChange?: React.EventHandler<any>,
+        small?: boolean
+    }
+
+    interface FormFieldBase<T> extends React.AllHTMLAttributes <T> {
+        error?: boolean,
+        errorMessage?: string,
+        id: string,
+        hintText?: string,
+        label: string,
+        name?: string,
+        onBlur?: React.EventHandler<any>,
+        onChange?: React.EventHandler<any>
+    }
+
+    interface TextInputBase<T> extends FormFieldBase<T> {
+        countThreshold?: number,
+        maxlength?: number,
+        placeholder?: string,
+        value?: string
+    }
+}

package/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "@scottish-government/designsystem-react",
+  "description": "A React/JSX implementation of the Scottish Government Design System",
+  "version": "0.0.0",
+  "license": "MIT",
+  "author": {
+    "name": "Scottish Government Digital Design System team",
+    "email": "designsystem@gov.scot",
+    "url": "https://designsystem.gov.scot"
+  },
+  "scripts": {
+    "build": "npm run tsc",
+    "coverage": "vitest run --coverage",
+    "test": "vitest",
+    "tsc": "node ./node_modules/typescript/bin/tsc"
+  },
+  "dependencies": {
+    "@scottish-government/design-system": "^3.0.1"
+  },
+  "devDependencies": {
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.3.0",
+    "@testing-library/user-event": "^14.6.1",
+    "@types/node": "22.15.19",
+    "@types/react": "^19.1.6",
+    "@types/react-dom": "^19.1.5",
+    "@vitejs/plugin-react-swc": "^3.10.0",
+    "@vitest/coverage-v8": "^3.2.0",
+    "jsdom": "^26.1.0",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "typescript": "^5.8.3",
+    "vitest": "^3.2.0"
+  }
+}

package/src/common/conditional-wrapper.test.tsx

@@ -0,0 +1,36 @@
+import { test, expect } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import ConditionalWrapper from './conditional-wrapper';
+
+test('conditional wrapper true', () => {
+    render(
+        <ConditionalWrapper
+            condition={true}
+            wrapper={(children: React.JSX.Element) => <a data-testid="wrapper">{children}</a>}
+        >
+            <span data-testid="testContent">Bar</span>
+        </ConditionalWrapper>
+    );
+
+    const element = screen.getByTestId('testContent');
+    const elementParent = screen.getByTestId('wrapper');
+    expect(element).toBeInTheDocument();
+    expect(elementParent).toBeInTheDocument();
+    expect(element.parentNode).toEqual(elementParent)
+});
+
+test('conditional wrapper false', () => {
+    render(
+        <ConditionalWrapper
+            condition={false}
+            wrapper={(children: React.JSX.Element) => <a href="foo">{children}</a>}
+        >
+            <span data-testid="testContent">Bar</span>
+        </ConditionalWrapper>
+    );
+
+    const element = screen.getByTestId('testContent');
+    const elementParent = screen.queryByTestId('wrapper');
+    expect(element).toBeInTheDocument();
+    expect(elementParent).not.toBeInTheDocument();
+});

package/src/common/conditional-wrapper.tsx

@@ -0,0 +1,9 @@
+/**
+ * Wraps all children in a specified HTML tag if a condition is met.
+ */
+const ConditionalWrapper: React.FC<SGDS.Common.ConditionalWrapper> = ({ condition, wrapper, children }) =>
+    condition ? wrapper(children) : children;
+
+ConditionalWrapper.displayName = 'ConditionalWrapper';
+
+export default ConditionalWrapper;