@scottish-government/designsystem-react 0.12.0 → 0.12.1

package/src/components/FeatureHeader/FeatureHeader.stories.tsx

@@ -0,0 +1,60 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import argTypes from '../../../.storybook/sgdsArgTypes';
+
+import FeatureHeader from './FeatureHeader';
+
+//@ts-ignore
+import coo from '../../../static/images/highland-cow.jpg';
+
+const meta = {
+    title: 'Components/Feature header',
+    component: FeatureHeader,
+    argTypes: {
+        children: argTypes.children()
+    },
+    args: {
+        children: <>
+            <FeatureHeader.Content>
+                <h1>Design standards</h1>
+                <p>The patterns included here have been developed for use by government, public sector and third sector non-commercial organisations in Scotland.</p>
+            </FeatureHeader.Content>
+            <FeatureHeader.Media>
+                <img
+                    className="ds_feature-header__image"
+                    alt="A highland cow nuzzling its calf"
+                    src={coo}
+                />
+            </FeatureHeader.Media>
+        </>
+    }
+} satisfies Meta<typeof FeatureHeader>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    args: {
+        backgroundColour: 'TERTIARY'
+    }
+};
+
+export const FullWidth: Story = {
+    args: {
+        backgroundColour: 'TERTIARY',
+        isFullWidth: true
+    }
+};
+
+export const TopAlign: Story = {
+    args: {
+        backgroundColour: 'TERTIARY',
+        isTopAligned: true
+    }
+};
+
+export const WideText: Story = {
+    args: {
+        backgroundColour: 'TERTIARY',
+        isWideText: true
+    }
+};

package/src/components/FeatureHeader/FeatureHeader.tsx

@@ -0,0 +1,94 @@
+import ConditionalWrapper from "../../common/ConditionalWrapper";
+
+const Content = ({ children, className, ...props }: any /* SGDS.Component.FeatureHeader.Primary*/) => {
+    return (
+        <div className={['ds_feature-header__primary', className].join(' ')} {...props}>
+            {children}
+        </div>
+    );
+}
+
+const Media = ({ children, className, isCover, noPadding, ...props }: any /* SGDS.Component.FeatureHeader.Secondary*/) => {
+    return (
+        <div className={[
+            'ds_feature-header__secondary',
+            isCover && 'ds_feature-header__secondary--cover',
+            noPadding && 'ds_feature-header__secondary--no-padding',
+            className
+        ].join(' ')} {...props}>
+            {children}
+        </div>
+    );
+}
+
+const FeatureHeader = ({
+    backgroundColour = 'NONE',
+    children,
+    className,
+    isFullWidth,
+    isTopAligned,
+    isWideText,
+    ...props
+}: any /* SGDS.Component.FeatureHeader*/) => {
+    let backgroundColorClass = '';
+
+    switch (backgroundColour) {
+        case 'BRAND':
+            backgroundColorClass = 'ds_feature-header--background';
+            break;
+        case 'SECONDARY':
+            backgroundColorClass = 'ds_feature-header--background-secondary';
+            break;
+        case 'TERTIARY':
+            backgroundColorClass = 'ds_feature-header--background-tertiary';
+            break;
+        case 'NONE':
+            break;
+        default:
+            backgroundColorClass = '';
+            break;
+    }
+
+    return (
+        <header
+            className={[
+                'ds_feature-header',
+                isFullWidth && 'ds_feature-header--fullwidth',
+                isTopAligned && 'ds_feature-header--top',
+                isWideText && 'ds_feature-header--wide',
+                backgroundColorClass,
+                className
+            ].join(' ')}
+            {...props}
+        >
+            <ConditionalWrapper
+                condition={isFullWidth}
+                wrapper={(children: React.JSX.Element) => <div className="ds_wrapper">{children}</div>}
+            >
+                {children}
+            </ConditionalWrapper>
+        </header>
+    );
+};
+
+FeatureHeader.displayName = 'FeatureHeader';
+Content.displayName = 'FeatureHeader.Content';
+Media.displayName = 'FeatureHeader.Media';
+FeatureHeader.Content = Content;
+FeatureHeader.Media = Media;
+
+export default FeatureHeader;
+
+
+/*
+
+<FeatureHeader backgroundColour="NONE/BRAND/SECONDARY/TERTIARY" isFullWidth isWideText isTopAligned>
+    <FeatureHeader.Content>
+        {children}
+    </FeatureHeader.Content>
+    <FeatureHeader.Media noPadding isCover>
+        {children}
+    </FeatureHeader.Media>
+</FeatureHeader>
+
+*/

package/src/components/FeatureHeader/index.ts

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

package/src/components/FileDownload/index.ts

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

package/src/components/HideThisPage/index.ts

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

package/src/components/InsetText/index.ts

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

package/src/components/NotificationBanner/index.ts

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

package/src/components/NotificationPanel/index.ts

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

package/src/components/PageHeader/PageHeader.stories.tsx

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react-vite';
 import argTypes from '../../../.storybook/sgdsArgTypes';
 
 import PageHeader from './PageHeader';
-import Metadata from '../PageMetadata/PageMetadata';
+import Metadata from '../PageMetadata';
 
 const meta = {
     title: 'Components/PageHeader',

package/src/components/PageHeader/index.ts

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

package/src/components/PageMetadata/index.ts

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

package/src/components/Pagination/index.ts

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

package/src/components/PhaseBanner/index.ts

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

package/src/components/Question/Question.stories.tsx

@@ -2,9 +2,8 @@ import type { Meta, StoryObj } from '@storybook/react-vite';
 import argTypes from '../../../.storybook/sgdsArgTypes';
 
 import Question from './Question';
-import TextInput from '../TextInput/TextInput';
-import Checkbox from '../Checkbox/Checkbox';
-import CheckboxGroup from '../Checkbox/CheckboxGroup';
+import TextInput from '../TextInput';
+import Checkbox, { CheckboxGroup } from '../Checkbox';
 
 const meta = {
     title: 'Components/Question',

package/src/components/Question/Question.tsx

@@ -1,5 +1,5 @@
-import ErrorMessage from '../ErrorMessage/ErrorMessage';
-import HintText from '../../common/HintText';
+import ErrorMessage from '../ErrorMessage';
+import HintText from '../../common/HintText'
 import WrapperTag from '../../common/WrapperTag';
 
 const Question = function ({

package/src/components/Question/index.ts

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

package/src/components/RadioButton/RadioGroup.stories.tsx

@@ -1,8 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
 import argTypes from '../../../.storybook/sgdsArgTypes';
 
-import RadioButton from '../RadioButton/RadioButton';
-import RadioGroup from './RadioGroup';
+import RadioButton, { RadioGroup } from '../RadioButton';
 
 const meta = {
     title: 'Components/Radio/Radio group',

package/src/components/RadioButton/RadioGroup.test.tsx

@@ -1,7 +1,6 @@
 import { test, expect } from 'vitest';
 import { render, screen } from '@testing-library/react';
-import RadioButton from './RadioButton';
-import RadioGroup from './RadioGroup';
+import RadioButton, { RadioGroup } from '../RadioButton';
 
 test('radio group renders correctly', () => {
     render(

package/src/components/RadioButton/index.ts

@@ -0,0 +1,2 @@
+export { default } from './RadioButton';
+export { default as RadioGroup } from './RadioGroup';

package/src/components/SearchFacets/index.ts

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

package/src/components/SearchFilters/SearchFilters.Panel.stories.tsx

@@ -2,8 +2,8 @@ import type { Meta, StoryObj } from '@storybook/react-vite';
 import argTypes from '../../../.storybook/sgdsArgTypes';
 
 import Filters from './SearchFilters';
-import DatePicker from '../DatePicker/DatePicker';
-import Checkbox from '../Checkbox/Checkbox';
+import DatePicker from '../DatePicker';
+import Checkbox from '../Checkbox';
 
 const meta = {
     title: 'Components/Search results/Filters/Filter panel',

package/src/components/SearchFilters/SearchFilters.stories.tsx

@@ -2,8 +2,8 @@ import type { Meta, StoryObj } from '@storybook/react-vite';
 import argTypes from '../../../.storybook/sgdsArgTypes';
 
 import Filters from './SearchFilters';
-import DatePicker from '../DatePicker/DatePicker';
-import Checkbox from '../Checkbox/Checkbox';
+import DatePicker from '../DatePicker';
+import Checkbox from '../Checkbox';
 
 
 const meta = {

package/src/components/SearchFilters/SearchFilters.test.tsx

@@ -1,7 +1,7 @@
 import { test, expect } from 'vitest';
 import { render, screen, within } from '@testing-library/react';
 import Filters from './SearchFilters';
-import Checkbox from '../Checkbox/Checkbox';
+import Checkbox from '../Checkbox';
 
 test('search filters boilerplate renders correctly', () => {
     render(

package/src/components/SearchFilters/SearchFilters.tsx

@@ -1,8 +1,8 @@
-import Accordion from "../Accordion/Accordion";
-import Button from "../Button/Button";
-import SkipLinks from "../SkipLinks/SkipLinks";
+import Accordion from "../Accordion";
+import Button from "../Button";
+import SkipLinks from "../SkipLinks";
 import ConditionalWrapper from "../../common/ConditionalWrapper";
-import CheckboxGroup from "../Checkbox/CheckboxGroup";
+import { CheckboxGroup } from "../Checkbox";
 
 export const FilterPanel = ({
     activeFilterCount = 0,

package/src/components/SearchFilters/index.ts

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

package/src/components/SearchResult/SearchResult.tsx

@@ -1,7 +1,7 @@
 import { Children, createContext, useContext } from 'react';
 import ConditionalWrapper from '../../common/ConditionalWrapper';
-import AspectBox from '../AspectBox/AspectBox';
-import Metadata from '../PageMetadata/PageMetadata';
+import AspectBox from '../AspectBox';
+import Metadata from '../PageMetadata';
 
 const SearchResultLinkHrefContext = createContext('');
 

package/src/components/SearchResult/index.ts

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

package/src/components/SearchSort/SearchSort.tsx

@@ -1,6 +1,6 @@
 import { AllHTMLAttributes } from "react";
-import Button from "../Button/Button";
-import Select from "../Select/Select";
+import Button from "../Button";
+import Select from "../Select";
 
 const Option = ({
     children,

package/src/components/SearchSort/index.ts

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

package/src/components/Select/Select.tsx

@@ -1,4 +1,4 @@
-import ErrorMessage from '../ErrorMessage/ErrorMessage';
+import ErrorMessage from '../ErrorMessage';
 import HintText from '../../common/HintText';
 
 const Select = function ({

package/src/components/Select/index.ts

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

package/src/components/SequentialNavigation/index.ts

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

package/src/components/SideNavigation/index.ts

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

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,6 +1,6 @@
 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/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/index.ts

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

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

@@ -2,7 +2,7 @@ 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',

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/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/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.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/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'
             }]