@scottish-government/designsystem-react 0.13.0 → 1.0.1

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

@@ -0,0 +1,5 @@
+import { LinkComponent } from "../../shared-types";
+export interface BreadcrumbItemProps extends React.AllHTMLAttributes<HTMLElement> {
+    isHidden?: boolean;
+    linkComponent?: LinkComponent;
+}

package/dist/components/Breadcrumbs/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/components/Button/Button.d.ts

@@ -1,5 +1,6 @@
+import { ButtonProps } from './types';
 declare const Button: {
-    ({ buttonStyle, children, className, icon, hasLinkStyle, href, isIconLeft, isIconOnly, isSmall, type, width, ...props }: SGDS.Component.Button): import("react").JSX.Element;
+    ({ buttonStyle, children, className, icon, hasLinkStyle, href, isIconLeft, isIconOnly, isSmall, type, width, ...props }: ButtonProps): import("react").JSX.Element;
     displayName: string;
 };
 export default Button;

package/dist/components/Button/Button.jsx

@@ -6,21 +6,22 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const Icon_1 = __importDefault(require("../../common/Icon"));
 const ScreenReaderText_1 = __importDefault(require("../../common/ScreenReaderText"));
 const WrapperTag_1 = __importDefault(require("../../common/WrapperTag"));
+const clsx_1 = __importDefault(require("clsx"));
 const Button = ({ buttonStyle, children, className, icon, hasLinkStyle, href, isIconLeft, isIconOnly = false, isSmall, type = 'button', width, ...props }) => {
     // determine which HTML tag to use
     let tagName = 'button';
     if (href) {
         tagName = 'a';
     }
-    return (<WrapperTag_1.default tagName={tagName} className={[
+    return (<WrapperTag_1.default tagName={tagName} className={(0, clsx_1.default)([
             !hasLinkStyle ? 'ds_button' : 'ds_link',
             width && `ds_button--${width}`,
             buttonStyle && `ds_button--${buttonStyle}`,
             isSmall && 'ds_button--small',
-            (icon && !isIconOnly) ? 'ds_button--has-icon' : undefined,
+            (icon && !isIconOnly) && 'ds_button--has-icon',
             isIconLeft && 'ds_button--has-icon--left',
             className
-        ].join(' ')} href={href} {...(tagName === 'button' ? { type: type } : {})} {...props}>
+        ])} href={href} {...(tagName === 'button' ? { type: type } : {})} {...props}>
             {isIconOnly ? <ScreenReaderText_1.default>{children}</ScreenReaderText_1.default> : children}
 
             {icon && <Icon_1.default icon={icon}/>}

package/dist/components/Button/ButtonGroup.d.ts

@@ -1,5 +1,6 @@
+import { ButtonGroupProps } from "./types";
 declare const ButtonGroup: {
-    ({ children, className, isInline, ...props }: SGDS.Component.ButtonGroup): import("react").JSX.Element;
+    ({ children, className, isInline, isWrap, ...props }: ButtonGroupProps): import("react").JSX.Element;
     displayName: string;
 };
 export default ButtonGroup;

package/dist/components/Button/ButtonGroup.jsx

@@ -1,11 +1,16 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-const ButtonGroup = ({ children, className, isInline, ...props }) => {
-    return (<div className={[
+const clsx_1 = __importDefault(require("clsx"));
+const ButtonGroup = ({ children, className, isInline, isWrap, ...props }) => {
+    return (<div className={(0, clsx_1.default)([
             "ds_button-group",
-            isInline ? "ds_button-group--inline" : undefined,
+            isInline && "ds_button-group--inline",
+            isWrap && "ds_button-group--wrap",
             className
-        ].join(' ')} {...props}>
+        ])} {...props}>
             {children}
         </div>);
 };

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

@@ -0,0 +1,20 @@
+import { IconName } from '../../shared-types';
+type ButtonStyle = 'primary' | 'secondary';
+type ButtonType = 'submit' | 'reset' | 'button';
+type ButtonWidth = 'fluid' | 'fixed' | 'max';
+export interface ButtonProps extends React.AllHTMLAttributes<HTMLButtonElement> {
+    hasLinkStyle?: boolean;
+    href?: string;
+    icon?: IconName;
+    isIconLeft?: boolean;
+    isIconOnly?: boolean;
+    isSmall?: boolean;
+    buttonStyle?: ButtonStyle;
+    type?: ButtonType;
+    width?: ButtonWidth;
+}
+export interface ButtonGroupProps extends React.AllHTMLAttributes<HTMLElement> {
+    isInline?: boolean;
+    isWrap?: boolean;
+}
+export {};

package/dist/components/Button/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/components/Card/Card.d.ts

@@ -0,0 +1,34 @@
+import { CardProps, CardHeaderProps, CardMediaProps, CardStatusTagProps } from "./types";
+declare const Card: {
+    ({ children, className, hasSecondaryBackground, headingLevel, href, isAdaptive, isHorizontal, isHorizontalSmall, linkComponent, tagName, ...props }: CardProps): import("react").JSX.Element;
+    Content: {
+        ({ children }: React.AllHTMLAttributes<HTMLElement>): import("react").JSX.Element;
+        displayName: string;
+    };
+    ContentFooter: {
+        ({ children }: React.AllHTMLAttributes<HTMLElement>): import("react").JSX.Element;
+        displayName: string;
+    };
+    ContentHeader: {
+        ({ children, description, title }: CardHeaderProps): import("react").JSX.Element;
+        displayName: string;
+    };
+    ContentMain: {
+        ({ children }: React.AllHTMLAttributes<HTMLElement>): import("react").JSX.Element;
+        displayName: string;
+    };
+    Metadata: {
+        ({ children }: React.AllHTMLAttributes<HTMLElement>): import("react").JSX.Element;
+        displayName: string;
+    };
+    Media: {
+        ({ children, isCover, mediaWidth, ratio, ...props }: CardMediaProps): import("react").JSX.Element;
+        displayName: string;
+    };
+    StatusTag: {
+        ({ children, colour, isHidden, ...props }: CardStatusTagProps): import("react").JSX.Element;
+        displayName: string;
+    };
+    displayName: string;
+};
+export default Card;

package/dist/components/Card/Card.jsx

@@ -0,0 +1,118 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = require("react");
+const ConditionalWrapper_1 = __importDefault(require("../../common/ConditionalWrapper"));
+const WrapperTag_1 = __importDefault(require("../../common/WrapperTag"));
+const AspectBox_1 = __importDefault(require("../AspectBox"));
+const PageMetadata_1 = __importDefault(require("../PageMetadata"));
+const Tag_1 = __importDefault(require("../Tag"));
+const clsx_1 = __importDefault(require("clsx"));
+const CardSettingsContext = (0, react_1.createContext)({
+    headingLevel: 'h2',
+    href: undefined,
+    linkComponent: undefined
+});
+const CardContent = ({ children }) => {
+    return (<div className="ds_card__content">
+            {children}
+        </div>);
+};
+const CardContentHeader = ({ children, description, title }) => {
+    const headingLevel = (0, react_1.useContext)(CardSettingsContext).headingLevel;
+    const href = (0, react_1.useContext)(CardSettingsContext).href;
+    const linkComponent = (0, react_1.useContext)(CardSettingsContext).linkComponent;
+    const LINK_CLASS = 'ds_card__link  ds_card__link--cover';
+    function getLinkElement(children) {
+        let linkElement;
+        if (linkComponent) {
+            linkElement = linkComponent({ className: LINK_CLASS, href, children });
+        }
+        else {
+            linkElement = <a href={href} className={LINK_CLASS}>{children}</a>;
+        }
+        return linkElement;
+    }
+    return (<div className="ds_card__content-header">
+            {children}
+            <WrapperTag_1.default className="ds_card__title" tagName={headingLevel}>
+                <ConditionalWrapper_1.default condition={typeof href !== 'undefined'} wrapper={(children) => getLinkElement(children)}>
+                    {title}
+                    {description && <span className="visually-hidden">, {description}</span>}
+                </ConditionalWrapper_1.default>
+            </WrapperTag_1.default>
+        </div>);
+};
+const CardStatusTag = ({ children, colour, isHidden, ...props }) => {
+    return (<Tag_1.default aria-hidden={isHidden ? "true" : undefined} colour={colour} {...props}>
+            {children}
+        </Tag_1.default>);
+};
+const CardContentMain = ({ children }) => {
+    return (<div className="ds_card__content-main">
+            {children}
+        </div>);
+};
+const CardContentFooter = ({ children }) => {
+    return (<div className="ds_card__content-footer">
+            {children}
+        </div>);
+};
+const CardMetadata = ({ children }) => {
+    return (<PageMetadata_1.default isInline>
+            {children}
+        </PageMetadata_1.default>);
+};
+const CardMedia = ({ children, isCover, mediaWidth, ratio, ...props }) => {
+    return (<div className={(0, clsx_1.default)([
+            'ds_card__media',
+            isCover && ratio && 'ds_card__media--cover',
+            (mediaWidth && (mediaWidth === 'narrow' || mediaWidth === 'wide')) && 'ds_card__media--' + mediaWidth
+        ])} {...props}>
+            <ConditionalWrapper_1.default condition={ratio !== undefined} wrapper={(children) => <AspectBox_1.default ratio={ratio}>
+                {children}
+            </AspectBox_1.default>}>
+                {children}
+            </ConditionalWrapper_1.default>
+        </div>);
+};
+const Card = ({ children, className, hasSecondaryBackground = false, headingLevel, href, isAdaptive = false, isHorizontal = false, isHorizontalSmall = false, linkComponent, tagName = 'div', ...props }) => {
+    return (<CardSettingsContext value={{
+            headingLevel: headingLevel || 'h2',
+            href: href,
+            linkComponent: linkComponent
+        }}>
+            <ConditionalWrapper_1.default condition={isAdaptive} wrapper={(children) => <div className="ds_card-container">
+                    {children}
+                </div>}>
+                <WrapperTag_1.default tagName={tagName} className={(0, clsx_1.default)([
+            'ds_card',
+            href && 'ds_card--navigation',
+            hasSecondaryBackground && 'ds_card--background-secondary',
+            isHorizontal && 'ds_card--horizontal',
+            isHorizontalSmall && 'ds_card--horizontal-small',
+            className
+        ])} {...props}>
+                    {children}
+                </WrapperTag_1.default>
+            </ConditionalWrapper_1.default>
+        </CardSettingsContext>);
+};
+Card.Content = CardContent;
+Card.ContentFooter = CardContentFooter;
+Card.ContentHeader = CardContentHeader;
+Card.ContentMain = CardContentMain;
+Card.Metadata = CardMetadata;
+Card.Media = CardMedia;
+Card.StatusTag = CardStatusTag;
+Card.displayName = 'Card';
+CardContent.displayName = 'Card.Content';
+CardContentFooter.displayName = 'Card.ContentFooter';
+CardContentHeader.displayName = 'Card.ContentHeader';
+CardContentMain.displayName = 'Card.ContentMain';
+CardMetadata.displayName = 'Card.Metadata';
+CardMedia.displayName = 'Card.Media';
+CardStatusTag.displayName = 'Card.StatusTag';
+exports.default = Card;

package/dist/components/Card/index.d.ts

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

package/dist/components/Card/index.js

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+var Card_1 = require("./Card");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(Card_1).default; } });

package/dist/components/Card/types.d.ts

@@ -0,0 +1,26 @@
+import { HeadingLevel, LinkComponent } from '../../shared-types';
+import { TagProps } from '../Tag/types';
+export interface CardProps extends React.AllHTMLAttributes<HTMLElement> {
+    className?: string;
+    hasSecondaryBackground?: boolean;
+    headingLevel?: HeadingLevel;
+    href?: string;
+    isAdaptive?: boolean;
+    isHorizontal?: boolean;
+    isHorizontalSmall?: boolean;
+    linkComponent?: LinkComponent;
+    tagName?: string;
+}
+export interface CardHeaderProps extends React.AllHTMLAttributes<HTMLElement> {
+    className?: string;
+    description?: string;
+    title: string;
+}
+export interface CardMediaProps extends React.AllHTMLAttributes<HTMLElement> {
+    isCover?: boolean;
+    mediaWidth?: 'narrow' | 'wide';
+    ratio?: 'square' | '1:1' | '4:3' | '16:9' | '21:9';
+}
+export interface CardStatusTagProps extends TagProps {
+    isHidden?: boolean;
+}

package/dist/components/Card/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/components/CategoryItem/CategoryItem.d.ts

@@ -1,5 +1,6 @@
+import { CategoryItemProps } from "./types";
 declare const CategoryItem: {
-    ({ children, className, headingLevel, href, linkComponent, tagName, title, ...props }: SGDS.Component.CategoryItem): import("react").JSX.Element;
+    ({ children, className, headingLevel, href, linkComponent, tagName, title, ...props }: CategoryItemProps): import("react").JSX.Element;
     displayName: string;
 };
 export default CategoryItem;

package/dist/components/CategoryItem/CategoryItem.jsx

@@ -5,20 +5,23 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const ConditionalWrapper_1 = __importDefault(require("../../common/ConditionalWrapper"));
 const WrapperTag_1 = __importDefault(require("../../common/WrapperTag"));
+const clsx_1 = __importDefault(require("clsx"));
 const CategoryItem = ({ children, className, headingLevel = 'h2', href, linkComponent, tagName = 'div', title, ...props }) => {
     const LINK_CLASS = 'ds_category-item__link';
     function getLinkElement(children) {
+        let linkElement;
         if (linkComponent) {
-            return linkComponent({ className: LINK_CLASS, href, children });
+            linkElement = linkComponent({ className: LINK_CLASS, href, children });
         }
-        else if (href) {
-            return <a href={href} className={LINK_CLASS}>{children}</a>;
+        else {
+            linkElement = <a href={href} className={LINK_CLASS}>{children}</a>;
         }
+        return linkElement;
     }
-    return (<WrapperTag_1.default tagName={tagName} className={[
+    return (<WrapperTag_1.default tagName={tagName} className={(0, clsx_1.default)([
             'ds_category-item',
             className
-        ].join(' ')} {...props}>
+        ])} {...props}>
             <WrapperTag_1.default className="ds_category-item__title" tagName={headingLevel}>
                 <ConditionalWrapper_1.default condition={typeof href !== 'undefined'} wrapper={(children) => getLinkElement(children)}>
                     {title}

package/dist/components/CategoryItem/types.d.ts

@@ -0,0 +1,9 @@
+import { HeadingLevel, LinkComponent } from '../../shared-types';
+export interface CategoryItemProps extends React.AllHTMLAttributes<HTMLElement> {
+    className?: string;
+    headingLevel?: HeadingLevel;
+    href?: string;
+    linkComponent?: LinkComponent;
+    tagName?: string;
+    title: string;
+}

package/dist/components/CategoryItem/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/components/CategoryList/CategoryList.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
+import { CategoryListProps } from './types';
 declare const CategoryList: {
-    ({ children, className, isGrid, isOrdered, ...props }: SGDS.Component.CategoryList): React.JSX.Element;
+    ({ children, className, isGrid, isOrdered, ...props }: CategoryListProps): React.JSX.Element;
     displayName: string;
 };
 export default CategoryList;

package/dist/components/CategoryList/CategoryList.jsx

@@ -38,16 +38,17 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importStar(require("react"));
 const WrapperTag_1 = __importDefault(require("../../common/WrapperTag"));
+const clsx_1 = __importDefault(require("clsx"));
 const CategoryList = ({ children, className, isGrid, isOrdered, ...props }) => {
     function processChild(child) {
         const thisChild = child;
         return react_1.default.cloneElement(thisChild, { tagName: 'li' });
     }
-    return (<WrapperTag_1.default tagName={isOrdered ? 'ol' : 'ul'} className={[
+    return (<WrapperTag_1.default tagName={isOrdered ? 'ol' : 'ul'} className={(0, clsx_1.default)([
             'ds_category-list',
             isGrid && 'ds_category-list--grid',
             className
-        ].join(' ')} {...props}>
+        ])} {...props}>
             {react_1.Children.map(children, child => processChild(child))}
         </WrapperTag_1.default>);
 };

package/dist/components/CategoryList/types.d.ts

@@ -0,0 +1,5 @@
+export interface CategoryListProps extends React.AllHTMLAttributes<HTMLElement> {
+    className?: string;
+    isGrid?: boolean;
+    isOrdered?: boolean;
+}

package/dist/components/CategoryList/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/components/Checkbox/Checkbox.d.ts

@@ -1,5 +1,6 @@
+import { CheckboxProps } from './types';
 declare const Checkbox: {
-    ({ checked, hintText, id, isSmall, isExclusive, label, name, onBlur, onChange }: SGDS.Component.Checkbox): import("react").JSX.Element;
+    ({ checked, hintText, id, isSmall, isExclusive, label, name, onBlur, onChange }: CheckboxProps): import("react").JSX.Element;
     displayName: string;
 };
 export default Checkbox;

package/dist/components/Checkbox/Checkbox.jsx

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = require("react");
 const context_1 = require("../../utils/context");
 const HintText_1 = __importDefault(require("../../common/HintText"));
+const clsx_1 = __importDefault(require("clsx"));
 const Checkbox = ({ checked, hintText, id, isSmall, isExclusive, label, name, onBlur, onChange }) => {
     const hintTextId = `hint-text-${id}`;
     const behaviour = isExclusive && 'exclusive';
@@ -22,14 +23,14 @@ const Checkbox = ({ checked, hintText, id, isSmall, isExclusive, label, name, on
     isSmall = isSmall || (0, react_1.useContext)(context_1.CheckboxRadioContext).isSmall;
     return (<>
             {isExclusive && <p className="ds_checkbox-separator">or</p>}
-            <div className={[
+            <div className={(0, clsx_1.default)([
             'ds_checkbox',
             isSmall && 'ds_checkbox--small'
-        ].join(' ')}>
+        ])}>
 
                 <input aria-describedby={hintText ? hintTextId : undefined} className="ds_checkbox__input" data-behaviour={behaviour} defaultChecked={!!checked} id={id} name={name || id} onBlur={handleBlur} onChange={handleChange} type="checkbox"/>
                 <label className="ds_checkbox__label" htmlFor={id}>{label}</label>
-                {hintText && <HintText_1.default id={hintTextId} text={hintText}/>}
+                {hintText && <HintText_1.default id={hintTextId}>{hintText}</HintText_1.default>}
             </div>
         </>);
 };

package/dist/components/Checkbox/CheckboxGroup.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
+import { CheckboxGroupProps } from './types';
 export declare const CheckboxGroup: {
-    ({ children, className, isSmall, ...props }: SGDS.Component.Checkbox.Group): React.JSX.Element;
+    ({ children, className, isSmall, ...props }: CheckboxGroupProps): React.JSX.Element;
     displayName: string;
 };
 export default CheckboxGroup;

package/dist/components/Checkbox/CheckboxGroup.jsx

@@ -39,20 +39,21 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.CheckboxGroup = void 0;
 const react_1 = __importStar(require("react"));
 const context_1 = require("../../utils/context");
-// @ts-ignore
-const checkboxes_1 = __importDefault(require("@scottish-government/design-system/src/forms/checkbox/checkboxes"));
+const checkboxes_1 = __importDefault(require("@scottish-government/design-system/src/components/checkbox/checkboxes"));
+const clsx_1 = __importDefault(require("clsx"));
 const CheckboxGroup = ({ children, className, isSmall, ...props }) => {
     const ref = (0, react_1.useRef)(null);
     (0, react_1.useEffect)(() => {
+        /* istanbul ignore else */
         if (ref.current) {
             new checkboxes_1.default(ref.current).init();
         }
     }, [ref]);
-    return (<div className={[
+    return (<div className={(0, clsx_1.default)([
             'ds_checkboxes',
             'ds_field-group',
             className
-        ].join(' ')} data-module="ds-checkboxes" ref={ref} {...props}>
+        ])} data-module="ds-checkboxes" ref={ref} {...props}>
             <context_1.CheckboxRadioContext value={{ isSmall: !!isSmall, name: '' }}>
                 {children}
             </context_1.CheckboxRadioContext>

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

@@ -0,0 +1,7 @@
+import { CheckboxRadioBase } from '../../shared-types';
+export interface CheckboxGroupProps extends React.AllHTMLAttributes<HTMLElement> {
+    isSmall?: boolean;
+}
+export interface CheckboxProps extends CheckboxRadioBase<HTMLInputElement> {
+    isExclusive?: boolean;
+}

package/dist/components/Checkbox/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/components/ConfirmationMessage/ConfirmationMessage.d.ts

@@ -1,5 +1,6 @@
+import { ConfirmationMessageProps } from './types';
 declare const ConfirmationMessage: {
-    ({ ariaLive, children, className, headingLevel, title, ...props }: SGDS.Component.ConfirmationMessage): import("react").JSX.Element;
+    ({ ariaLive, children, className, headingLevel, title, ...props }: ConfirmationMessageProps): import("react").JSX.Element;
     displayName: string;
 };
 export default ConfirmationMessage;

package/dist/components/ConfirmationMessage/ConfirmationMessage.jsx

@@ -5,11 +5,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const Icon_1 = __importDefault(require("../../common/Icon"));
 const WrapperTag_1 = __importDefault(require("../../common/WrapperTag"));
+const clsx_1 = __importDefault(require("clsx"));
 const ConfirmationMessage = ({ ariaLive = 'polite', children, className, headingLevel = 'h3', title, ...props }) => {
-    return (<div aria-live={ariaLive} className={[
+    return (<div aria-live={ariaLive} className={(0, clsx_1.default)([
             'ds_confirmation-message',
             className
-        ].join(' ')} {...props}>
+        ])} {...props}>
             <Icon_1.default className="ds_confirmation-message__icon" icon="CheckCircle" iconSize="24"/>
 
             <WrapperTag_1.default className="ds_confirmation-message__title" tagName={headingLevel}>

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

@@ -0,0 +1,6 @@
+import { HeadingLevel } from '../../shared-types';
+export interface ConfirmationMessageProps extends React.AllHTMLAttributes<HTMLElement> {
+    ariaLive: React.AriaAttributes['aria-live'];
+    headingLevel: HeadingLevel;
+    title: string;
+}

package/dist/components/ConfirmationMessage/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/components/ContentsNav/ContentsNav.d.ts

@@ -1,9 +1,10 @@
 import React from 'react';
+import { ContentsNavItemProps, ContentsNavProps } from './types';
 declare const ContentsNav: {
-    ({ ariaLabel, children, className, title, ...props }: SGDS.Component.ContentsNav): React.JSX.Element;
+    ({ ariaLabel, children, className, title, ...props }: ContentsNavProps): React.JSX.Element;
     displayName: string;
     Item: {
-        ({ children, isCurrent, href, linkComponent }: SGDS.Component.ContentsNav.ContentsNavItem): React.JSX.Element;
+        ({ children, isCurrent, href, linkComponent }: ContentsNavItemProps): React.JSX.Element;
         displayName: string;
     };
 };

package/dist/components/ContentsNav/ContentsNav.jsx

@@ -4,6 +4,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
+const clsx_1 = __importDefault(require("clsx"));
 const ContentsNavItem = ({ children, isCurrent, href, linkComponent }) => {
     const classNames = ['ds_contents-nav__link'];
     let ariaCurrent;
@@ -11,15 +12,16 @@ const ContentsNavItem = ({ children, isCurrent, href, linkComponent }) => {
         classNames.push('ds_current');
         ariaCurrent = 'page';
     }
+    const classNamesString = (0, clsx_1.default)(classNames);
     function processChildren(children) {
         if (linkComponent) {
-            return linkComponent({ className: classNames.join(' '), href, children });
+            return linkComponent({ className: classNamesString, href, children });
         }
         else if (href) {
-            return <a href={href} aria-current={ariaCurrent ? ariaCurrent : undefined} className={classNames.join(' ')}>{children}</a>;
+            return <a href={href} aria-current={ariaCurrent ? ariaCurrent : undefined} className={classNamesString}>{children}</a>;
         }
         else {
-            return <span aria-current={ariaCurrent ? ariaCurrent : undefined} className={classNames.join(' ')}>{children}</span>;
+            return <span aria-current={ariaCurrent ? ariaCurrent : undefined} className={classNamesString}>{children}</span>;
         }
     }
     return (<li className="ds_contents-nav__item">
@@ -27,10 +29,10 @@ const ContentsNavItem = ({ children, isCurrent, href, linkComponent }) => {
         </li>);
 };
 const ContentsNav = ({ ariaLabel = 'Pages in this section', children, className, title = 'Contents', ...props }) => {
-    return (<nav aria-label={ariaLabel} className={[
+    return (<nav aria-label={ariaLabel} className={(0, clsx_1.default)([
             'ds_contents-nav',
             className
-        ].join(' ')} {...props}>
+        ])} {...props}>
             <h2 className="ds_contents-nav__title">{title}</h2>
 
             <ul className="ds_contents-nav__list">

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

@@ -0,0 +1,9 @@
+import { LinkComponent } from "../../shared-types";
+export interface ContentsNavItemProps extends React.AllHTMLAttributes<HTMLElement> {
+    isCurrent?: boolean;
+    linkComponent?: LinkComponent;
+}
+export interface ContentsNavProps extends React.AllHTMLAttributes<HTMLElement> {
+    ariaLabel: React.AriaAttributes['aria-label'];
+    title: string;
+}

package/dist/components/ContentsNav/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/components/CookieBanner/CookieBanner.d.ts

@@ -1,8 +1,9 @@
+import { AbstractNotificationBannerProps } from '../../common/AbstractNotificationBanner/types';
 declare const CookieBanner: {
-    ({ children, className, title, ...props }: SGDS.Common.AbstractNotificationBanner): import("react").JSX.Element;
+    ({ children, className, title, ...props }: AbstractNotificationBannerProps): import("react").JSX.Element;
     displayName: string;
     Buttons: {
-        ({ children }: SGDS.Common.AbstractNotificationBanner.Buttons): import("react").JSX.Element;
+        ({ children }: import("../../common/AbstractNotificationBanner/types").AbstractNotificationBannerButtonsProps): import("react").JSX.Element;
         displayName: string;
     };
 };

package/dist/components/CookieBanner/CookieBanner.jsx

@@ -3,15 +3,25 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = require("react");
 const AbstractNotificationBanner_1 = __importDefault(require("../../common/AbstractNotificationBanner"));
-const CookieBanner = ({ children, className, title, ...props }) => {
+const cookie_notification_1 = __importDefault(require("@scottish-government/design-system/src/components/cookie-notification/cookie-notification"));
+const clsx_1 = __importDefault(require("clsx"));
+const CookieBanner = ({ children, className, title = 'Information', ...props }) => {
+    const ref = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => {
+        /* istanbul ignore else */
+        if (ref.current) {
+            new cookie_notification_1.default(ref.current).init();
+        }
+    }, [ref]);
     return (<>
-            <AbstractNotificationBanner_1.default className={[
+            <AbstractNotificationBanner_1.default className={(0, clsx_1.default)([
             'ds_notification--large',
             'ds_notification--cookie',
             'js-initial-cookie-content',
             className
-        ].join(' ')} data-module="ds-cookie-notification" title={title} {...props}>
+        ])} data-module="ds-cookie-notification" ref={ref} title={title} {...props}>
                 {children}
             </AbstractNotificationBanner_1.default>
         </>);