@scottish-government/designsystem-react 0.11.0 → 0.11.1

package/src/components/ContentsNav/index.ts

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

package/src/components/CookieBanner/CookieBanner.Buttons.stories.tsx

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

package/src/components/CookieBanner/CookieBanner.stories.tsx

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

package/src/components/CookieBanner/index.ts

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

package/src/components/DatePicker/DatePicker.tsx

@@ -1,8 +1,8 @@
 import { useEffect, useRef } from 'react';
 // @ts-ignore
 import DSDatePicker from '@scottish-government/design-system/src/components/date-picker/date-picker';
-import ErrorMessage from '../ErrorMessage/ErrorMessage';
-import TextInput from '../TextInput/TextInput';
+import ErrorMessage from '../ErrorMessage';
+import TextInput from '../TextInput';
 
 const DatePicker = ({
     className,

package/src/components/DatePicker/index.ts

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

package/src/components/Details/index.ts

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

package/src/components/ErrorMessage/index.ts

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

package/src/components/ErrorSummary/index.ts

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

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/PageHeader.tsx

@@ -3,6 +3,7 @@ const PageHeader = ({
     className,
     label,
     title,
+    titleId,
     ...props
 }: SGDS.Component.PageHeader) => {
     return (
@@ -14,7 +15,7 @@ const PageHeader = ({
             {...props}
         >
             {label && <span className="ds_page-header__label  ds_content-label">{label}</span>}
-            <h1 className="ds_page-header__title">{title}</h1>
+            <h1 id={titleId} className="ds_page-header__title">{title}</h1>
 
             {children}
         </header>

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,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/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.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.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';