@scottish-government/designsystem-react 0.10.2 → 0.11.1

package/src/components/SequentialNavigation/SequentialNavigation.Next.stories.tsx

@@ -7,7 +7,7 @@ const meta = {
     title: 'Components/SequentialNavigation/SequentialNavigation.Next',
     component: SequentialNavigation.Next,
     argTypes: {
-        href: argTypes.href(),
+        href: argTypes.href({type: {name: 'string', required: true}}),
         linkComponent: argTypes.linkComponent(),
         textLabel: {
             description: 'String to use for the label that precedes the link text',

package/src/components/SequentialNavigation/SequentialNavigation.Previous.stories.tsx

@@ -7,7 +7,7 @@ const meta = {
     title: 'Components/SequentialNavigation/SequentialNavigation.Previous',
     component: SequentialNavigation.Previous,
     argTypes: {
-        href: argTypes.href(),
+        href: argTypes.href({type: {name: 'string', required: true}}),
         linkComponent: argTypes.linkComponent(),
         textLabel: {
             description: 'String to use for the label that precedes the link text',

package/src/components/SequentialNavigation/SequentialNavigation.tsx

@@ -5,7 +5,6 @@ const SeqNavLink = ({
     linkComponent,
     textLabel
 }: SGDS.Component.SequentialNavigation.Link) => {
-    console.log(textLabel)
     const LINK_CLASSES = [
         'ds_sequential-nav__button',
         isPrev ? 'ds_sequential-nav__button--left' : 'ds_sequential-nav__button--right'

package/src/components/SequentialNavigation/index.ts

@@ -0,0 +1 @@
+export { default } from './SequentialNavigation';

package/src/components/SideNavigation/SideNavigation.Item.stories.tsx

@@ -6,6 +6,15 @@ import SideNavigation from './SideNavigation';
 const meta = {
     title: 'Components/SideNavigation/SideNavigation.Item',
     component: SideNavigation.Item,
+    decorators: [
+        Story => (
+            <nav className="ds_side-navigation">
+                <ul className="ds_side-navigation__list">
+                    <Story />
+                </ul>
+            </nav>
+        )
+    ],
     argTypes: {
         href: argTypes.href(),
         isCurrent: argTypes.isCurrent(),

package/src/components/SideNavigation/SideNavigation.List.stories.tsx

@@ -6,6 +6,13 @@ import SideNavigation from './SideNavigation';
 const meta = {
     title: 'Components/SideNavigation/SideNavigation.List',
     component: SideNavigation.List,
+    decorators: [
+        Story => (
+            <nav className="ds_side-navigation">
+                <Story />
+            </nav>
+        )
+    ],
     argTypes: {
         isRoot: {
             description: 'Indicates that this is the root list in a nested structure. Required for mobile navigation.',

package/src/components/SideNavigation/SideNavigation.tsx

@@ -43,6 +43,7 @@ const SideNavigationItem = function ({
 };
 
 const SideNavigation = function ({
+    ariaLabel = 'Sections',
     children,
     className,
     ...props
@@ -57,7 +58,7 @@ const SideNavigation = function ({
 
     return (
         <nav
-            aria-label="Sections"
+            aria-label={ariaLabel}
             className={[
                 'ds_side-navigation',
                 className

package/src/components/SideNavigation/index.ts

@@ -0,0 +1 @@
+export { default } from './SideNavigation';

package/src/components/SiteFooter/SiteFooter.License.stories.tsx

@@ -6,6 +6,13 @@ import SiteFooter from './SiteFooter';
 const meta = {
     title: 'Components/SiteFooter/SiteFooter.License',
     component: SiteFooter.License,
+    decorators: [
+        Story => (
+            <nav className="ds_site-footer" style={{borderTop: 0}}>
+                <Story />
+            </nav>
+        )
+    ],
     argTypes: {
         children: argTypes.children()
     },

package/src/components/SiteFooter/SiteFooter.Link.stories.tsx

@@ -6,6 +6,15 @@ import SiteFooter from './SiteFooter';
 const meta = {
     title: 'Components/SiteFooter/SiteFooter.Link',
     component: SiteFooter.Link,
+    decorators: [
+        Story => (
+            <div className="ds_site-footer__site-items" style={{ borderBottom: 0 }}>
+                <ul>
+                    <Story />
+                </ul>
+            </div>
+        )
+    ],
     argTypes: {
         href: argTypes.href(),
         linkComponent: argTypes.linkComponent(),

package/src/components/SiteFooter/SiteFooter.Org.stories.tsx

@@ -6,6 +6,13 @@ import SiteFooter from './SiteFooter';
 const meta = {
     title: 'Components/SiteFooter/SiteFooter.Org',
     component: SiteFooter.Org,
+    decorators: [
+        Story => (
+            <div className="ds_site-footer__content" style={{borderTop: 0}}>
+                <Story />
+            </div>
+        )
+    ],
     argTypes: {
         href: argTypes.href(),
         title: {

package/src/components/SiteFooter/index.ts

@@ -0,0 +1 @@
+export { default } from './SiteFooter';

package/src/components/SiteHeader/SiteHeader.stories.tsx

@@ -2,9 +2,9 @@ import type { Meta, StoryObj } from '@storybook/react-vite';
 import argTypes from '../../../.storybook/sgdsArgTypes';
 
 import SiteHeader from './SiteHeader';
-import SiteSearch from '../SiteSearch/SiteSearch';
-import SiteNavigation from '../SiteNavigation/SiteNavigation';
-import PhaseBanner from '../PhaseBanner/PhaseBanner';
+import SiteSearch from '../SiteSearch';
+import SiteNavigation from '../SiteNavigation';
+import PhaseBanner from '../PhaseBanner';
 
 const meta = {
     title: 'Components/SiteHeader',

package/src/components/SiteHeader/SiteHeader.test.tsx

@@ -1,9 +1,9 @@
 import { test, expect } from 'vitest';
 import { render, screen, within } from '@testing-library/react';
 import SiteHeader from './SiteHeader';
-import SiteNavigation from '../SiteNavigation/SiteNavigation';
-import SiteSearch from '../SiteSearch/SiteSearch';
-import PhaseBanner from '../PhaseBanner/PhaseBanner';
+import SiteNavigation from '../SiteNavigation';
+import SiteSearch from '../SiteSearch';
+import PhaseBanner from '../PhaseBanner';
 
 test('site header renders correctly (maximal, testing markup structure)', () => {
     render(

package/src/components/SiteHeader/SiteHeader.tsx

@@ -1,8 +1,6 @@
-'use client';
-
 import React, { Children, useEffect, useRef } from 'react';
 import Icon from '../../common/Icon';
-import SiteNavigation from '../SiteNavigation/SiteNavigation';
+import SiteNavigation from '../SiteNavigation';
 
 // @ts-ignore
 import DSMobileMenu from '@scottish-government/design-system/src/components/site-navigation/site-navigation';

package/src/components/SiteHeader/index.ts

@@ -0,0 +1 @@
+export { default } from './SiteHeader';

package/src/components/SiteNavigation/SiteNavigation.Item.stories.tsx

@@ -6,7 +6,17 @@ import SiteNavigation from './SiteNavigation';
 const meta = {
     title: 'Components/SiteNavigation/SiteNavigation.Item',
     component: SiteNavigation.Item,
+    decorators: [
+        Story => (
+            <nav className="ds_site-navigation">
+                <ul className="ds_site-navigation__list">
+                    <Story />
+                </ul>
+            </nav>
+        )
+    ],
     argTypes: {
+        href: argTypes.href({type: {name: 'string', required: true}}),
         linkComponent: argTypes.linkComponent(),
         children: argTypes.children()
     },

package/src/components/SiteNavigation/index.ts

@@ -0,0 +1 @@
+export { default } from './SiteNavigation';

package/src/components/SiteSearch/SiteSearch.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useRef } from 'react';
 // @ts-ignore
 import DSAutocomplete from '@scottish-government/design-system/src/components/autocomplete/autocomplete';
-import Button from '../Button/Button';
+import Button from '../Button';
 
 const SiteSearch = function ({
     action = '/search',

package/src/components/SiteSearch/index.ts

@@ -0,0 +1 @@
+export { default } from './SiteSearch';

package/src/components/SkipLinks/SkipLinks.Item.stories.tsx

@@ -6,10 +6,20 @@ import SkipLinks from './SkipLinks';
 const meta = {
     title: 'Components/SkipLinks/SkipLinks.Link',
     component: SkipLinks.Link,
+    decorators: [
+        Story => (
+            <ul className="ds_skip-links">
+                <Story />
+            </ul>
+        )
+    ],
     argTypes: {
         fragmentId: {
             description: 'ID of the destination element',
-            type: 'string'
+            type: {
+                name: 'string',
+                required: true
+            }
         },
         children: argTypes.children()
     },

package/src/components/SkipLinks/SkipLinks.tsx

@@ -1,3 +1,8 @@
+import React, { useEffect } from 'react';
+
+// @ts-ignore
+import dsSkipLinks from '@scottish-government/design-system/src/components/skip-links/skip-links';
+
 const Link = ({
     children,
     fragmentId
@@ -18,6 +23,11 @@ const SkipLinks = ({
     isStatic,
     ...props
 }: SGDS.Component.SkipLinks) => {
+
+    useEffect(() => {
+        dsSkipLinks.init();
+    });
+
     return (
         <div
             className={[

package/src/components/SkipLinks/index.ts

@@ -0,0 +1 @@
+export { default } from './SkipLinks';

package/src/components/SummaryCard/SummaryCard.Action.stories.tsx

@@ -6,6 +6,13 @@ import SummaryCard from './SummaryCard';
 const meta = {
     title: 'Components/SummaryCard/SummaryCard.Action',
     component: SummaryCard.Action,
+    decorators: [
+        Story => (
+            <div className="ds_summary-card__header">
+                <Story />
+            </div>
+        )
+    ],
     argTypes: {
         href: argTypes.href(),
         onClick: argTypes.onClick(),

package/src/components/SummaryCard/SummaryCard.stories.tsx

@@ -2,13 +2,20 @@ import type { Meta, StoryObj } from '@storybook/react-vite';
 import argTypes from '../../../.storybook/sgdsArgTypes';
 
 import SummaryCard from './SummaryCard';
-import SummaryList from '../SummaryList/SummaryList';
+import SummaryList from '../SummaryList';
 
 const meta = {
     title: 'Components/SummaryCard',
     component: SummaryCard,
     argTypes: {
         headingLevel: argTypes.headingLevel(),
+        title: {
+            description: 'The title of the summary card',
+            type: {
+                name: 'string',
+                required: true
+            }
+        },
         children: argTypes.children()
     },
     args: {

package/src/components/SummaryCard/SummaryCard.test.tsx

@@ -1,7 +1,7 @@
 import { test, expect, vi } from 'vitest';
-import { render, screen, within, fireEvent } from '@testing-library/react';
+import { render, screen, within } from '@testing-library/react';
 import SummaryCard from './SummaryCard';
-import SummaryList from '../SummaryList/SummaryList';
+import SummaryList from '../SummaryList';
 
 const ONCLICK_FUNCTION = vi.fn();
 

package/src/components/SummaryCard/index.ts

@@ -0,0 +1 @@
+export { default } from './SummaryCard';

package/src/components/SummaryList/SummaryList.Item.stories.tsx

@@ -6,10 +6,25 @@ import SummaryList from './SummaryList';
 const meta = {
     title: 'Components/SummaryList/SummaryList.Item',
     component: SummaryList.Item,
+    decorators: [
+        Story => (
+            <ul>
+                <Story />
+            </ul>
+        )
+    ],
     argTypes: {
+        Title: {
+            description: 'Title of the summary list item.',
+            type: {
+                name: 'string',
+                required: true
+            }
+        },
         children: argTypes.children()
     },
     args: {
+        title: 'Contact details',
         children: [
             <SummaryList.Value name="Email">
                 email@gov.scot

package/src/components/SummaryList/SummaryList.Value.stories.tsx

@@ -8,8 +8,11 @@ const meta = {
     component: SummaryList.Value,
     argTypes: {
         name: {
-            description: 'Title of the summary list item',
-            type: 'string'
+            description: 'Name of the summary value',
+            type: {
+                name: 'string',
+                required: true
+            }
         },
         children: argTypes.children()
     },

package/src/components/SummaryList/index.ts

@@ -0,0 +1 @@
+export { default } from './SummaryList';

package/src/components/Table/index.ts

@@ -0,0 +1 @@
+export { default } from './Table';

package/src/components/Tabs/Tabs.Item.stories.tsx

@@ -9,7 +9,10 @@ const meta = {
     argTypes: {
         tabLabel: {
             description: '',
-            type: 'string'
+            type: {
+                name: 'string',
+                required: true
+            }
         },
         children: argTypes.children()
     },

package/src/components/Tabs/index.ts

@@ -0,0 +1 @@
+export { default } from './Tabs';

package/src/components/Tag/index.ts

@@ -0,0 +1 @@
+export { default } from './Tag';

package/src/components/TaskList/TaskList.Group.stories.tsx

@@ -6,6 +6,15 @@ import TaskList from './TaskList';
 const meta = {
     title: 'Components/TaskList/TaskList.Group',
     component: TaskList.Group,
+    decorators: [
+        Story => (
+            <div className="ds_task-list">
+                <ul>
+                    <Story />
+                </ul>
+            </div>
+        )
+    ],
     argTypes: {
         headingId: {
             description: 'ID of the task list\'s heading element',

package/src/components/TaskList/TaskList.Item.stories.tsx

@@ -6,6 +6,13 @@ import TaskList from './TaskList';
 const meta = {
     title: 'Components/TaskList/TaskList.Item',
     component: TaskList.Item,
+    decorators: [
+        Story => (
+            <ul>
+                <Story />
+            </ul>
+        )
+    ],
     argTypes: {
         href: argTypes.href(),
         id: {

package/src/components/TaskList/TaskList.tsx

@@ -2,7 +2,7 @@ import { Children } from 'react';
 import ConditionalWrapper from '../../common/ConditionalWrapper';
 import HintText from '../../common/HintText';
 import ScreenReaderText from '../../common/ScreenReaderText';
-import Tag from '../Tag/Tag';
+import Tag from '../Tag';
 
 const TaskItem = ({
     children,

package/src/components/TaskList/index.ts

@@ -0,0 +1 @@
+export { default } from './TaskList';

package/src/components/TextInput/TextInput.tsx

@@ -1,9 +1,9 @@
 import { useEffect, useRef } from 'react';
 // @ts-ignore
 import DSCharacterCount from '@scottish-government/design-system/src/forms/character-count/character-count';
-import Button from '../Button/Button';
+import Button from '../Button';
 import ConditionalWrapper from '../../common/ConditionalWrapper';
-import ErrorMessage from '../ErrorMessage/ErrorMessage';
+import ErrorMessage from '../ErrorMessage';
 import HintText from '../../common/HintText';
 
 const TextInput = ({

package/src/components/TextInput/index.ts

@@ -0,0 +1 @@
+export { default } from './TextInput';

package/src/components/Textarea/Textarea.tsx

@@ -2,7 +2,7 @@ import { useEffect, useRef } from 'react';
 // @ts-ignore
 import DSCharacterCount from '@scottish-government/design-system/src/forms/character-count/character-count';
 import ConditionalWrapper from '../../common/ConditionalWrapper';
-import ErrorMessage from '../ErrorMessage/ErrorMessage';
+import ErrorMessage from '../ErrorMessage';
 import HintText from '../../common/HintText';
 
 const Textarea = ({

package/src/components/Textarea/index.ts

@@ -0,0 +1 @@
+export { default } from './Textarea';

package/src/components/WarningText/index.ts

@@ -0,0 +1 @@
+export { default } from './WarningText';

package/src/components/index.ts

@@ -0,0 +1,46 @@
+export { default as Accordion } from "./Accordion";
+export { default as AspectBox } from "./AspectBox";
+export { default as BackToTop } from "./BackToTop";
+export { default as Breadcrumbs } from "./Breadcrumbs";
+export { default as Button, ButtonGroup } from "./Button";
+export { default as CategoryItem } from "./CategoryItem";
+export { default as CategoryList } from "./CategoryList";
+export { default as Checkbox, CheckboxGroup } from "./Checkbox";
+export { default as ConfirmationMessage } from "./ConfirmationMessage";
+export { default as ContentsNav } from "./ContentsNav";
+export { default as CookieBanner } from "./CookieBanner";
+export { default as DatePicker } from "./DatePicker";
+export { default as Details } from "./Details";
+export { default as ErrorMessage } from "./ErrorMessage";
+export { default as ErrorSummary } from "./ErrorSummary";
+export { default as FileDownload } from "./FileDownload";
+export { default as HideThisPage } from "./HideThisPage";
+export { default as InsetText } from "./InsetText";
+export { default as NotificationBanner } from "./NotificationBanner";
+export { default as NotificationPanel } from "./NotificationPanel";
+export { default as PageHeader } from "./PageHeader";
+export { default as PageMetadata } from "./PageMetadata/";
+export { default as Pagination } from "./Pagination";
+export { default as PhaseBanner } from "./PhaseBanner";
+export { default as Question } from "./Question";
+export { default as RadioButton, RadioGroup } from "./RadioButton";
+export { default as SearchFacets } from "./SearchFacets";
+export { default as SearchFilters } from "./SearchFilters";
+export { default as SearchResult } from "./SearchResult";
+export { default as SearchSort } from "./SearchSort";
+export { default as Select } from "./Select";
+export { default as SequentialNavigation } from "./SequentialNavigation";
+export { default as SideNavigation } from "./SideNavigation";
+export { default as SiteFooter } from "./SiteFooter";
+export { default as SiteHeader } from "./SiteHeader";
+export { default as SiteSearch } from "./SiteSearch";
+export { default as SkipLinks } from "./SkipLinks";
+export { default as SummaryCard } from "./SummaryCard";
+export { default as SummaryList } from "./SummaryList";
+export { default as Table } from "./Table";
+export { default as Tabs } from "./Tabs";
+export { default as Tag } from "./Tag";
+export { default as TaskList } from "./TaskList";
+export { default as Textarea } from "./Textarea";
+export { default as TextInput } from "./TextInput";
+export { default as WarningText } from "./WarningText";

package/src/hooks/index.ts

@@ -0,0 +1 @@
+export { default as useTracking } from "./useTracking";

package/src/hooks/useTracking/index.ts

@@ -0,0 +1 @@
+export { default } from './useTracking';

package/src/images/index.ts

@@ -0,0 +1,2 @@
+export * as documents from './documents';
+export * as icons from './icons';

package/src/index.ts

@@ -0,0 +1,4 @@
+export * as common from './common';
+export * as components from './components';
+export * as hooks from './hooks';
+export * as images from './images';

package/tsconfig.json

@@ -1,9 +1,20 @@
 {
   "compilerOptions": {
     "allowJs": false,
+    "declaration": true,
+    "esModuleInterop": true,
+    "incremental": true,
     "jsx": "preserve",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
     "module": "NodeNext",
     "moduleResolution": "nodenext",
+    "noFallthroughCasesInSwitch": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
     "outDir": "./dist",
     "paths": {
       "@/*": [
@@ -13,25 +24,14 @@
         "./node_modules/@scottish-government/design-system/src/*"
       ]
     },
+    "resolveJsonModule": true,
+    "strict": true,
     "target": "esnext",
     "types": [],
     "typeRoots": [
       "./node_modules/@types",
       "./@types"
-    ],
-    "lib": [
-      "dom",
-      "dom.iterable",
-      "esnext"
-    ],
-    "incremental": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-
-    "noFallthroughCasesInSwitch": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "strict": true
+    ]
   },
   "include": [
     "@types",

package/vite.config.ts

@@ -1,6 +1,7 @@
 /// <reference types="vitest/config" />
 import { defineConfig } from 'vitest/config';
 import react from "@vitejs/plugin-react-swc";
+import { playwright } from '@vitest/browser-playwright';
 import path from 'node:path';
 import { fileURLToPath } from 'node:url';
 import { storybookTest } from '@storybook/addon-vitest/vitest-plugin';
@@ -38,7 +39,7 @@ export default defineConfig({
           browser: {
             enabled: true,
             headless: true,
-            provider: 'playwright',
+            provider: playwright(),
             instances: [{
               browser: 'chromium'
             }]