@scottish-government/designsystem-react 0.1.0 → 0.1.2

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

@@ -0,0 +1,5 @@
+declare namespace SGDS.Component {
+    interface InsetText extends React.AllHTMLAttributes<HTMLElement> {
+
+    }
+}

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

@@ -0,0 +1,5 @@
+declare namespace SGDS.Component {
+    interface WarningText extends React.AllHTMLAttributes<HTMLElement> {
+
+    }
+}

package/README.md

@@ -0,0 +1,26 @@
+# @scottish-government/designsystem-react
+
+This repository contains a React implementation of the [Scottish Government Design System](https://designsystem.gov.scot/).
+
+There is a documentation site showing what is in this implementation and how to use it here: https://designsystem-react.vercel.app/
+
+## Feedback, help or support
+
+If you need any help or want to give any feedback you can e-mail the Design System team at: [designsystem@gov.scot](mailto:designsystem@gov.scot).
+
+## Installation
+
+We recommend installing the package using npm. The npm package includes the SG Design System as a dependency.
+
+`npm install @scottish-government/designsystem-react`
+
+## Run tasks
+
+`npm run tsc`  
+Compile the source code from TypeScript/TSX into JavaScript/JSX files, located in `/dist`
+
+`npm run test`  
+Run unit tests
+
+`npm run coverage`  
+Run unit tests and output a coverage report, located in `/coverage`

package/dist/components/accordion/accordion.jsx

@@ -42,10 +42,13 @@ const wrapper_tag_1 = __importDefault(require("../../common/wrapper-tag"));
 // @ts-ignore
 const accordion_1 = __importDefault(require("@scottish-government/design-system/src/components/accordion/accordion"));
 let accordionItemCounter = 0;
-const AccordionItem = ({ children, headerLevel = 'h3', id: rawId, open = false, title, ...props }) => {
+const AccordionItem = ({ children, className, headerLevel = 'h3', id: rawId, open = false, title, ...props }) => {
     accordionItemCounter = accordionItemCounter + 1;
     const processedId = rawId || `accordion-item-${accordionItemCounter}`;
-    return (<div className="ds_accordion-item" id={processedId} {...props}>
+    return (<div className={[
+            'ds_accordion-item',
+            className
+        ].join(' ')} id={processedId} {...props}>
             <input aria-labelledby={`panel-${processedId}-heading`} className={[
             'ds_accordion-item__control',
             'visually-hidden'
@@ -65,7 +68,7 @@ const AccordionItem = ({ children, headerLevel = 'h3', id: rawId, open = false,
         </div>);
 };
 exports.AccordionItem = AccordionItem;
-const Accordion = ({ children, headerLevel = 'h3', hideOpenAll, ...props }) => {
+const Accordion = ({ children, className, headerLevel = 'h3', hideOpenAll, ...props }) => {
     const ref = (0, react_1.useRef)(null);
     (0, react_1.useEffect)(() => {
         if (ref.current) {
@@ -78,7 +81,10 @@ const Accordion = ({ children, headerLevel = 'h3', hideOpenAll, ...props }) => {
     function processChild(child) {
         return react_1.default.cloneElement(child, { headerLevel: headerLevel });
     }
-    return (<div className='ds_accordion' ref={ref} {...props}>
+    return (<div className={[
+            'ds_accordion',
+            className
+        ].join(' ')} ref={ref} {...props}>
             {!hideOpenAll && (<button className={[
                 'ds_accordion__open-all',
                 'ds_link',

package/dist/components/aspect-box/aspect-box.jsx

@@ -39,7 +39,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importStar(require("react"));
 // @ts-ignore
 const aspect_box_fallback_1 = __importDefault(require("@scottish-government/design-system/src/components/aspect-box/aspect-box-fallback"));
-const AspectBox = ({ children, ratio, ...props }) => {
+const AspectBox = ({ children, className, ratio, ...props }) => {
     const ref = (0, react_1.useRef)(null);
     (0, react_1.useEffect)(() => {
         if (ref.current) {
@@ -69,7 +69,8 @@ const AspectBox = ({ children, ratio, ...props }) => {
     }
     return (<div className={[
             'ds_aspect-box',
-            `${ratioClassName}`
+            ratioClassName,
+            className
         ].join(' ')} ref={ref} {...props}>
             {react_1.Children.map(children, child => processChild(child))}
         </div>);

package/dist/components/back-to-top/back-to-top.jsx

@@ -7,14 +7,17 @@ const react_1 = require("react");
 // @ts-ignore
 const back_to_top_1 = __importDefault(require("@scottish-government/design-system/src/components/back-to-top/back-to-top"));
 const icon_1 = __importDefault(require("../../common/icon"));
-const BackToTop = ({ href = '#page-top', ...props }) => {
+const BackToTop = ({ className, href = '#page-top', ...props }) => {
     const ref = (0, react_1.useRef)(null);
     (0, react_1.useEffect)(() => {
         if (ref.current) {
             new back_to_top_1.default(ref.current).init();
         }
     }, [ref]);
-    return (<div className='ds_back-to-top' ref={ref} {...props}>
+    return (<div className={[
+            'ds_back-to-top',
+            className
+        ].join(' ')} ref={ref} {...props}>
             <a href={href} className="ds_back-to-top__button">Back to top
                 <icon_1.default className="ds_back-to-top__icon" icon="arrow_upward"/>
             </a>

package/dist/components/breadcrumbs/breadcrumbs.jsx

@@ -17,8 +17,8 @@ const Breadcrumb = ({ hidden, href, title }) => {
  * @param {Object} props - Properties for the element
  * @returns {JSX.Element} - The element
  */
-const Breadcrumbs = ({ hideLastItem, items, ...props }) => {
-    return (<nav aria-label="Breadcrumb" {...props}>
+const Breadcrumbs = ({ className, hideLastItem, items, ...props }) => {
+    return (<nav aria-label="Breadcrumb" className={className} {...props}>
             <ol className="ds_breadcrumbs">
                 {items && items.map((item, index) => (<Breadcrumb title={item.title} href={item.href} hidden={(hideLastItem) && index + 1 === items.length} key={'breadcrumb' + index}/>))}
             </ol>

package/dist/components/button/button.jsx

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const icon_1 = __importDefault(require("../../common/icon"));
 const screen_reader_text_1 = __importDefault(require("../../common/screen-reader-text"));
 const wrapper_tag_1 = __importDefault(require("../../common/wrapper-tag"));
-const Button = ({ children, buttonStyle, icon, iconLeft, iconOnly = false, href, small, styleAsLink, type = 'button', width, ...props }) => {
+const Button = ({ buttonStyle, children, className, icon, iconLeft, iconOnly = false, href, small, styleAsLink, type = 'button', width, ...props }) => {
     // determine which HTML tag to use
     let tagName = 'button';
     if (href) {
@@ -18,7 +18,8 @@ const Button = ({ children, buttonStyle, icon, iconLeft, iconOnly = false, href,
             buttonStyle && `ds_button--${buttonStyle}`,
             small && 'ds_button--small',
             (icon && !iconOnly) ? 'ds_button--has-icon' : undefined,
-            iconLeft && 'ds_button--has-icon--left'
+            iconLeft && 'ds_button--has-icon--left',
+            className
         ].join(' ')} href={href} {...(tagName === 'button' ? { type: type } : {})} {...props}>
             {iconOnly ? <screen_reader_text_1.default>{children}</screen_reader_text_1.default> : children}
 

package/dist/components/checkbox/checkbox.jsx

@@ -41,14 +41,18 @@ exports.Checkbox = Checkbox;
  * @param {boolean} small - Use the small display style for all checkboxes
  * @returns {JSX.Element} - The element
  */
-const CheckboxGroup = ({ items, small, ...props }) => {
+const CheckboxGroup = ({ className, items, small, ...props }) => {
     const ref = (0, react_1.useRef)(null);
     (0, react_1.useEffect)(() => {
         if (ref.current) {
             new checkboxes_1.default(ref.current).init();
         }
     }, [ref]);
-    return (<div className="ds_checkboxes ds_field-group" data-module="ds-checkboxes" ref={ref} {...props}>
+    return (<div className={[
+            'ds_checkboxes',
+            'ds_field-group',
+            className
+        ].join(' ')} data-module="ds-checkboxes" ref={ref} {...props}>
             {items && items.map((item, index) => (<exports.Checkbox exclusive={item.exclusive} checked={item.checked} hintText={item.hintText} id={item.id} key={'checkbox' + index} label={item.label} onBlur={item.onBlur} onChange={item.onChange} small={small || item.small}/>))}
         </div>);
 };

package/dist/components/confirmation-message/confirmation-message.jsx

@@ -5,8 +5,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const icon_1 = __importDefault(require("../../common/icon"));
 const wrapper_tag_1 = __importDefault(require("../../common/wrapper-tag"));
-const ConfirmationMessage = ({ ariaLive = 'polite', children, headerLevel = 'h3', title }) => {
-    return (<div aria-live={ariaLive} className="ds_confirmation-message">
+const ConfirmationMessage = ({ ariaLive = 'polite', children, className, headerLevel = 'h3', title, ...props }) => {
+    return (<div aria-live={ariaLive} className={[
+            'ds_confirmation-message',
+            className
+        ].join(' ')} {...props}>
             <icon_1.default className="ds_confirmation-message__icon" icon="check_circle" iconSize="24"/>
 
             <wrapper_tag_1.default className="ds_confirmation-message__title" tagName={headerLevel}>

package/dist/components/contents-nav/contents-nav.jsx

@@ -5,7 +5,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Link = void 0;
 const wrapper_tag_1 = __importDefault(require("../../common/wrapper-tag"));
-const Link = ({ title, current, href }) => {
+const Link = ({ current, href, title }) => {
     // determine which HTML tag to use
     const tagName = href && !current ? 'a' : 'span';
     return (<li aria-current={current && 'page' || undefined} className="ds_contents-nav__item">
@@ -18,8 +18,11 @@ const Link = ({ title, current, href }) => {
         </li>);
 };
 exports.Link = Link;
-const ContentsNav = function ({ items, label = 'Pages in this section', title = 'Contents', ...props }) {
-    return (<nav aria-label={label} className="ds_contents-nav" {...props}>
+const ContentsNav = function ({ className, items, label = 'Pages in this section', title = 'Contents', ...props }) {
+    return (<nav aria-label={label} className={[
+            'ds_contents-nav',
+            className
+        ].join(' ')} {...props}>
             <h2 className="ds_contents-nav__title">{title}</h2>
             <ul className="ds_contents-nav__list">
                 {items && items.map((item, index) => (<exports.Link current={item.current} href={item.href} title={item.title} key={'link' + index}/>))}

package/dist/components/date-picker/date-picker.jsx

@@ -7,7 +7,7 @@ const react_1 = require("react");
 // @ts-ignore
 const date_picker_1 = __importDefault(require("@scottish-government/design-system/src/components/date-picker/date-picker"));
 const text_input_1 = __importDefault(require("../text-input/text-input"));
-const DatePicker = ({ width = 'fixed-10', disabledDates, error, errorMessage, hintText, id, iconPath = './', label, maxDate, minDate, multiple, name, onBlur, onChange, value, ...props }) => {
+const DatePicker = ({ className, disabledDates, error, errorMessage, hintText, id, iconPath = './', label, maxDate, minDate, multiple, name, onBlur, onChange, value, width = 'fixed-10', ...props }) => {
     // todo: dateSelectCallback function
     const ref = (0, react_1.useRef)(null);
     (0, react_1.useEffect)(() => {
@@ -27,7 +27,8 @@ const DatePicker = ({ width = 'fixed-10', disabledDates, error, errorMessage, hi
     }
     return (<div className={[
             "ds_datepicker",
-            multiple && "ds_datepicker--multiple"
+            multiple && "ds_datepicker--multiple",
+            className
         ].join(' ')} data-disableddates={disabledDates} data-maxdate={maxDate} data-mindate={minDate} data-module="ds-datepicker" ref={ref} {...props}>
             {(multiple ? (<fieldset className="ds_datepicker__input-wrapper">
                     <legend>{label}</legend>

package/dist/components/details/details.jsx

@@ -1,8 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-const Details = ({ children, summary, ...props }) => {
+const Details = ({ children, className, summary, ...props }) => {
     return (<details className={[
             "ds_details",
+            className
         ].join(' ')} {...props}>
             <summary className="ds_details__summary">
                 {summary}

package/dist/components/error-message/error-message.jsx

@@ -1,8 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-const ErrorMessage = ({ children, id, text, ...props }) => {
+const ErrorMessage = ({ children, className, id, text, ...props }) => {
     return (<p className={[
             'ds_question__error-message',
+            className
         ].join(' ')} dangerouslySetInnerHTML={text ? { __html: text } : undefined} id={id} {...props}>
             {!text ? children : null}
         </p>);

package/dist/components/inset-text/inset-text.jsx

@@ -1,7 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-const InsetText = ({ children, ...props }) => {
-    return (<div className="ds_inset-text" {...props}>
+const InsetText = ({ children, className, ...props }) => {
+    return (<div className={[
+            'ds_inset-text',
+            className
+        ].join(' ')} {...props}>
             <div className="ds_inset-text__text">
                 {children}
             </div>

package/dist/components/notification-banner/notification-banner.jsx

@@ -9,14 +9,18 @@ const notification_banner_1 = __importDefault(require("@scottish-government/desi
 const button_1 = __importDefault(require("../button/button"));
 const icon_1 = __importDefault(require("../../common/icon"));
 const screen_reader_text_1 = __importDefault(require("../../common/screen-reader-text"));
-const NotificationBanner = ({ children, close, icon, iconColour, iconInverse, title = 'Information', ...props }) => {
+const NotificationBanner = ({ children, className, close, icon, iconColour, iconInverse, title = 'Information', ...props }) => {
     const ref = (0, react_1.useRef)(null);
     (0, react_1.useEffect)(() => {
         if (ref.current) {
             new notification_banner_1.default(ref.current).init();
         }
     }, [ref]);
-    return (<div className="ds_notification  ds_reversed" data-module="ds-notification" ref={ref} {...props}>
+    return (<div className={[
+            'ds_notification',
+            'ds_reversed',
+            className
+        ].join(' ')} data-module="ds-notification" ref={ref} {...props}>
             <div className="ds_wrapper">
                 <div className={[
             'ds_notification__content',

package/dist/components/notification-panel/notification-panel.jsx

@@ -4,8 +4,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const wrapper_tag_1 = __importDefault(require("../../common/wrapper-tag"));
-const NotificationPanel = function ({ ariaLive, children, headerLevel = 'h1', title, ...props }) {
-    return (<div aria-live={ariaLive} className="ds_notification-panel" {...props}>
+const NotificationPanel = function ({ ariaLive, children, className, headerLevel = 'h1', title, ...props }) {
+    return (<div aria-live={ariaLive} className={[
+            'ds_notification-panel',
+            className
+        ].join(' ')} {...props}>
             <wrapper_tag_1.default className="ds_notification-panel__title" tagName={headerLevel}>
                 {title}
             </wrapper_tag_1.default>

package/dist/components/page-header/page-header.jsx

@@ -1,7 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-const PageHeader = ({ children, label, title, ...props }) => {
-    return (<header className="ds_page-header" {...props}>
+const PageHeader = ({ children, className, label, title, ...props }) => {
+    return (<header className={[
+            'ds_page-header',
+            className
+        ].join(' ')} {...props}>
             {label && <span className="ds_page-header__label  ds_content-label">{label}</span>}
             <h1 className="ds_page-header__title">{title}</h1>
 

package/dist/components/page-metadata/page-metadata.jsx

@@ -1,8 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.MetadataItem = void 0;
-const MetadataItem = ({ children, name, ...props }) => {
-    return (<div className="ds_metadata__item" {...props}>
+const MetadataItem = ({ children, className, name, ...props }) => {
+    return (<div className={[
+            'ds_metadata__item',
+            className
+        ].join(' ')} {...props}>
             <dt className="ds_metadata__key">{name}</dt>{' '}
             <dd className="ds_metadata__value">
                 {children}
@@ -10,10 +13,11 @@ const MetadataItem = ({ children, name, ...props }) => {
         </div>);
 };
 exports.MetadataItem = MetadataItem;
-const Metadata = ({ children, inline, ...props }) => {
+const Metadata = ({ children, className, inline, ...props }) => {
     return (<dl className={[
             'ds_metadata',
             inline && 'ds_metadata--inline',
+            className
         ].join(' ')} {...props}>
             {children}
         </dl>);

package/dist/components/phase-banner/phase-banner.jsx

@@ -4,8 +4,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const tag_1 = __importDefault(require("../tag/tag"));
-const PhaseBanner = ({ children, phaseName, ...props }) => {
-    return (<div className="ds_phase-banner" {...props}>
+const PhaseBanner = ({ children, className, phaseName, ...props }) => {
+    return (<div className={[
+            'ds_phase-banner',
+            className
+        ].join(' ')} {...props}>
             <div className="ds_wrapper">
                 <p className="ds_phase-banner__content">
                     {phaseName && <tag_1.default title={phaseName} className="ds_phase-banner__tag"/>}

package/dist/components/question/question.jsx

@@ -6,10 +6,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const error_message_1 = __importDefault(require("../error-message/error-message"));
 const hint_text_1 = __importDefault(require("../../common/hint-text"));
 const wrapper_tag_1 = __importDefault(require("../../common/wrapper-tag"));
-const Question = function ({ children, error, errorMessage, hintText, legend, tagName = 'div', ...props }) {
+const Question = function ({ children, className, error, errorMessage, hintText, legend, tagName = 'div', ...props }) {
     return (<wrapper_tag_1.default tagName={tagName} className={[
             'ds_question',
-            error && 'ds_question--error'
+            error && 'ds_question--error',
+            className
         ].join(' ')} {...props}>
             {legend && <legend>{legend}</legend>}
             {hintText && <hint_text_1.default text={hintText}/>}

package/dist/components/radio-button/radio-button.jsx

@@ -27,11 +27,12 @@ const Radio = ({ checked, hintText, id, label, name, onBlur, onChange, small })
         </div>);
 };
 exports.Radio = Radio;
-const RadioGroup = ({ inline, items, name, small, ...props }) => {
+const RadioGroup = ({ className, inline, items, name, small, ...props }) => {
     return (<div className={[
             'ds_radios',
             'ds_field-group',
-            inline && 'ds_field-group--inline'
+            inline && 'ds_field-group--inline',
+            className
         ].join(' ')} {...props}>
 
             {items && items.map((item, index) => (<exports.Radio checked={item.checked} hintText={item.hintText} id={item.id} key={'radio' + index} label={item.label} name={name} onBlur={item.onBlur} onChange={item.onChange} small={small || item.small}/>))}

package/dist/components/select/select.jsx

@@ -8,7 +8,7 @@ const hint_text_1 = __importDefault(require("../../common/hint-text"));
 const Option = function ({ text, value }) {
     return (<option value={value}>{text}</option>);
 };
-const Select = function ({ defaultValue, error, errorMessage, hintText, id, label, name, onBlur, onChange, options, placeholder, width, ...props }) {
+const Select = function ({ className, defaultValue, error, errorMessage, hintText, id, label, name, onBlur, onChange, options, placeholder, width, ...props }) {
     const errorMessageId = `error-message-${id}`;
     const hintTextId = `hint-text-${id}`;
     const describedbys = [];
@@ -38,6 +38,7 @@ const Select = function ({ defaultValue, error, errorMessage, hintText, id, labe
             "ds_select-wrapper",
             error && 'ds_input--error',
             width && `ds_input--${width}`,
+            className
         ].join(' ')} {...props}>
                 <select aria-describedby={describedbys.join(' ')} className="ds_select" defaultValue={defaultValue} id={id} name={name || id} onBlur={handleBlur} onChange={handleChange}>
                     <option value="">{placeholder}</option>

package/dist/components/sequential-navigation/sequential-navigation.jsx

@@ -18,8 +18,11 @@ const PrevLink = ({ href, title, }) => {
             </a>
         </div>);
 };
-const SequentialNavigation = ({ ariaLabel = 'Article navigation', next, previous, ...props }) => {
-    return (<nav className="ds_sequential-nav" aria-label={ariaLabel} {...props}>
+const SequentialNavigation = ({ ariaLabel = 'Article navigation', className, next, previous, ...props }) => {
+    return (<nav className={[
+            'ds_sequential-nav',
+            className
+        ].join(' ')} aria-label={ariaLabel} {...props}>
             {previous && <PrevLink href={previous.href} title={previous.title}></PrevLink>}
             {next && <NextLink href={next.href} title={next.title}></NextLink>}
         </nav>);

package/dist/components/side-navigation/side-navigation.jsx

@@ -26,14 +26,17 @@ const Link = function ({ current = false, href, items, title }) {
         </li>);
 };
 exports.Link = Link;
-const SideNavigation = function ({ children, items, ...props }) {
+const SideNavigation = function ({ children, className, items, ...props }) {
     const ref = (0, react_1.useRef)(null);
     (0, react_1.useEffect)(() => {
         if (ref.current) {
             new side_navigation_1.default(ref.current).init();
         }
     }, [ref]);
-    return (<nav aria-label="Sections" className="ds_side-navigation" data-module="ds-side-navigation" ref={ref} {...props}>
+    return (<nav aria-label="Sections" className={[
+            'ds_side-navigation',
+            className
+        ].join(' ')} data-module="ds-side-navigation" ref={ref} {...props}>
             <input type="checkbox" className="fully-hidden  js-toggle-side-navigation" id="show-side-navigation" aria-controls="side-navigation-root"/>
             <label className="ds_side-navigation__expand  ds_link" htmlFor="show-side-navigation">
                 <span className="visually-hidden">Show all</span> Pages in this section

package/dist/components/site-navigation/site-navigation.jsx

@@ -8,8 +8,11 @@ const SiteNavLink = ({ current = false, href, title }) => {
         ].join(' ')}>{title}</a>
         </li>);
 };
-const SiteNavigation = ({ items, ...props }) => {
-    return (<nav className="ds_site-navigation" {...props}>
+const SiteNavigation = ({ className, items, ...props }) => {
+    return (<nav className={[
+            'ds_site-navigation',
+            className
+        ].join(' ')} {...props}>
             <ul className="ds_site-navigation__list">
                 {items && items.map((item, index) => (<SiteNavLink current={item.current} href={item.href} title={item.title} key={`link-${index}`}/>))}
             </ul>

package/dist/components/site-search/site-search.jsx

@@ -7,7 +7,7 @@ const react_1 = require("react");
 // @ts-ignore
 const autocomplete_1 = __importDefault(require("@scottish-government/design-system/src/components/autocomplete/autocomplete"));
 const button_1 = __importDefault(require("../button/button"));
-const SiteSearch = function ({ action = '/search', autocompleteEndpoint, autocompleteSuggestionMappingFunction, id = 'site-search', method = 'GET', minLength = 3, name = 'q', placeholder = 'Search', ...props }) {
+const SiteSearch = function ({ action = '/search', autocompleteEndpoint, autocompleteSuggestionMappingFunction, className, id = 'site-search', method = 'GET', minLength = 3, name = 'q', placeholder = 'Search', ...props }) {
     const ref = (0, react_1.useRef)(null);
     const hasAutocomplete = !!autocompleteEndpoint;
     let autocompleteId = hasAutocomplete ? id + '-autocomplete' : '';
@@ -25,7 +25,8 @@ const SiteSearch = function ({ action = '/search', autocompleteEndpoint, autocom
         }
     }, [ref, autocompleteEndpoint, autocompleteId, hasAutocomplete, minLength, autocompleteSuggestionMappingFunction]);
     return (<div className={[
-            'ds_site-search',
+            'ds_site-search', ,
+            className,
             hasAutocomplete ? 'ds_autocomplete' : undefined
         ].join(' ')} id={autocompleteId ? autocompleteId : undefined} ref={ref} {...props}>
 

package/dist/components/task-list/task-list.jsx

@@ -9,11 +9,14 @@ const conditional_wrapper_1 = __importDefault(require("../../common/conditional-
 const hint_text_1 = __importDefault(require("../../common/hint-text"));
 const screen_reader_text_1 = __importDefault(require("../../common/screen-reader-text"));
 const tag_1 = __importDefault(require("../tag/tag"));
-const Task = ({ children, href, id, isComplete = false, statusText, tagColour = 'grey', title, ...props }) => {
+const Task = ({ children, className, href, id, isComplete = false, statusText, tagColour = 'grey', title, ...props }) => {
     if (isComplete) {
         tagColour = 'green';
     }
-    return (<li className="ds_task-list__task" id={id} {...props}>
+    return (<li className={[
+            'ds_task-list__task',
+            className
+        ].join(' ')} id={id} {...props}>
             <div className="ds_task-list__task-details">
                 <h3 className="ds_task-list__task-heading">
                 <conditional_wrapper_1.default condition={typeof href !== 'undefined'} wrapper={(children) => <a className="ds_task-list__task-link" href={href}>{children}</a>}>
@@ -35,8 +38,11 @@ exports.Task = Task;
  * @param {string} props.title - The title of the task group
  * @returns {JSX.Element} - The element
  */
-const TaskGroup = ({ children, intro, title, ...props }) => {
-    return (<li className="ds_task-list-group__section" {...props}>
+const TaskGroup = ({ children, className, intro, title, ...props }) => {
+    return (<li className={[
+            'ds_task-list-group__section',
+            className
+        ].join(' ')} {...props}>
             <h2 className="ds_task-list-heading">{title}</h2>
             {intro && <p className="ds_task-list-intro">{intro}</p>}
             <ul className="ds_task-list">
@@ -45,7 +51,7 @@ const TaskGroup = ({ children, intro, title, ...props }) => {
         </li>);
 };
 exports.TaskGroup = TaskGroup;
-const TaskList = ({ children, headingId = 'task-list', title }) => {
+const TaskList = ({ children, className, headingId = 'task-list', title, ...props }) => {
     let taskCount = 0;
     let incompleteTaskIds = [];
     let completedTasksCount = 0;
@@ -73,7 +79,7 @@ const TaskList = ({ children, headingId = 'task-list', title }) => {
     react_1.Children.forEach(children, child => {
         processChild(child);
     });
-    return (<>
+    return (<div className={className} {...props}>
             <h2 id={`${headingId}-status`} className="ds_task-list-status-heading">{title}</h2>
             <nav aria-labelledby={`${headingId}-status`} className="ds_task-list-status">
                 <p>You have completed {completedTasksCount} of {taskCount} sections.</p>
@@ -82,7 +88,7 @@ const TaskList = ({ children, headingId = 'task-list', title }) => {
             <ul className="ds_task-list">
                 {children}
             </ul>
-        </>);
+        </div>);
 };
 TaskList.displayName = 'TaskList';
 exports.Task.displayName = 'Task';

package/dist/components/textarea/textarea.jsx

@@ -9,7 +9,7 @@ const character_count_1 = __importDefault(require("@scottish-government/design-s
 const conditional_wrapper_1 = __importDefault(require("../../common/conditional-wrapper"));
 const error_message_1 = __importDefault(require("../error-message/error-message"));
 const hint_text_1 = __importDefault(require("../../common/hint-text"));
-const Textarea = ({ countThreshold, error, errorMessage, hintText, id, label, maxlength, name, onBlur, onChange, placeholder, rows = 4, value, ...props }) => {
+const Textarea = ({ className, countThreshold, error, errorMessage, hintText, id, label, maxlength, name, onBlur, onChange, placeholder, rows = 4, value, ...props }) => {
     const errorMessageId = `error-message-${id}`;
     const hintTextId = `hint-text-${id}`;
     const ref = (0, react_1.useRef)(null);
@@ -45,6 +45,7 @@ const Textarea = ({ countThreshold, error, errorMessage, hintText, id, label, ma
             <textarea aria-describedby={describedbys.join(' ')} className={[
             'ds_input',
             error && 'ds_input--error',
+            className
         ].join(' ')} defaultValue={value} id={id} maxLength={maxlength} name={name || id} onBlur={handleBlur} onChange={handleChange} placeholder={placeholder} rows={rows} {...props}/>
 
         </conditional_wrapper_1.default>);

package/dist/components/warning-text/warning-text.jsx

@@ -1,7 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-const WarningText = ({ children, ...props }) => {
-    return (<div className="ds_warning-text" {...props}>
+const WarningText = ({ children, className, ...props }) => {
+    return (<div className={[
+            'ds_warning-text',
+            className
+        ].join(' ')} {...props}>
             <strong className="ds_warning-text__icon" aria-hidden="true"></strong>
             <strong className="visually-hidden">Warning</strong>
             <div className="ds_warning-text__text">