@scottish-government/designsystem-react 0.6.0 → 0.7.1

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

@@ -1,7 +1,7 @@
 declare namespace SGDS.Component {
     namespace Accordion {
         interface Item extends React.AllHTMLAttributes<HTMLElement> {
-            headerLevel?: SGDS.HeaderLevel,
+            headingLevel?: SGDS.HeadingLevel,
             id: string,
             open?: boolean,
             title: string
@@ -9,7 +9,7 @@ declare namespace SGDS.Component {
     }
 
     interface Accordion extends React.AllHTMLAttributes<HTMLElement> {
-        headerLevel?: SGDS.HeaderLevel,
+        headingLevel?: SGDS.HeadingLevel,
         hideOpenAll?: boolean
     }
 }

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

@@ -1,7 +1,7 @@
 declare namespace SGDS.Component {
     interface ConfirmationMessage extends React.AllHTMLAttributes<HTMLElement> {
         ariaLive: AriaLive,
-        headerLevel: HeaderLevel,
+        headingLevel: HeadingLevel,
         title: string
     }
 }

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

@@ -1,7 +1,7 @@
 declare namespace SGDS.Component {
     interface NotificationPanel extends React.AllHTMLAttributes<HTMLDivElement> {
         ariaLive?: AriaLive,
-        headerLevel?: HeaderLevel,
+        headingLevel?: HeadingLevel,
         title: string
     }
 }

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

@@ -1,7 +1,7 @@
 declare namespace SGDS.Component {
     interface SummaryCard extends React.AllHTMLAttributes<HTMLElement> {
         actions?: SummaryList.Action[],
-        headerLevel?: SGDS.HeaderLevel,
+        headingLevel?: SGDS.HeadingLevel,
         items: SummaryList.Item[],
         title: string
     }

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

@@ -15,7 +15,7 @@ declare namespace SGDS.Component {
     interface Tabs extends React.AllHTMLAttributes<HTMLElement> {
         baseId: string,
         bordered?: boolean,
-        headerLevel?: SGDS.HeaderLevel,
+        headingLevel?: SGDS.HeadingLevel,
         manual?: boolean,
         title: string
     }

package/@types/sgds.d.ts

@@ -1,6 +1,6 @@
 declare namespace SGDS {
     type AriaLive = 'polite' | 'assertive';
-    type HeaderLevel = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+    type HeadingLevel = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
     type IconName = 'ArrowUpward' | 'CalendarToday' | 'Cancel' | 'CheckCircle' | 'ChevronLeft' | 'ChevronRight' | 'Close' | 'Description' | 'DoubleChevronLeft' | 'DoubleChevronRight' | 'Error' | 'ExpandLess' | 'ExpandMore' | 'List' | 'Menu' | 'PriorityHigh' | 'Search';
     type DocumentIconName = 'Audio' | 'Csv' | 'Excel' | 'File' | 'Generic' | 'Geodata' | 'Ical' | 'Ico' | 'Image' | 'Odf' | 'Odg' | 'Odp' | 'Ods' | 'Odt' | 'Pdf' | 'Ppt' | 'Rtf' | 'Text' | 'Video' | 'Word' | 'Xml' | 'Zip';
     type InputWidth = 'fixed-20' | 'fixed-10' | 'fixed-5' | 'fixed-4' | 'fixed-3' | 'fixed-2' | 'fluid-three-quarters' | 'fluid-two-thirds' | 'fluid-half' | 'fluid-one-third' | 'fluid-one-quarter';

package/CHANGELOG.md

@@ -0,0 +1,81 @@
+# Change log
+
+All notable changes to the Scottish Government "Design System React" repository/package will be documented in this file.
+
+Changes are grouped under the labels: `Added`, `Changed`, `Deprecated`, `Fixed`, 
+`Removed` and `Security`.
+
+---
+
+## [0.7.0] 
+### Changed
+- Change all component file names to Pascal case
+- Use uppercase text for const variable names
+- Nomenclature: prefer 'heading' over 'header' in variable names when referring to HTML headings (H1-H6)
+
+## [0.6.0] - 2025-07-29
+### Added
+- Add 'File download' component
+- Add 'File icon' component
+### Changed
+- Reorganise SVG icon components into subfolders
+
+## [0.5.1] - 2025-07-28
+### Changed
+- 'DisplayName' property of some compound components updated (Metadata.Item, TaskList.Item, TaskList.Group)
+
+## [0.5.0] - 2025-07-28
+### Added
+- Add 'Tabs' component
+
+## [0.4.0] - 2025-07-23
+### Added
+- Add 'Abstract notification banner' component
+- Add 'Cookie banner' component
+- Add 'Table' component
+- Add code of conduct
+### Changed
+- 'Notification banner' refactored to use AbstractNotificationBanner
+### Fixed
+- Fixed miscellaneous type warnings in unit tests
+
+## [0.3.0] - 2025-07-15
+### Added
+- Add 'Site header' component/pattern
+### Changed
+- SiteNavigation: add useRef, to support mobile navigation
+- DatePicker: add 'dateSelectCallback' prop
+
+## [0.2.0] - 2025-07-07
+### Added
+- Add 'Error summary' component
+
+## [0.1.7] - 2025-06-27
+### Added
+- Add 'Summary card' component
+- Add 'Summary list' component
+
+## [0.1.6] - 2025-06-27
+### Added
+- Add 'Hide this page' component
+
+## [0.1.5] - 2025-06-23
+### Added
+- Add 'Pagination' component
+### Changed
+- Icon: refactor to use icon components generated from DS source using SVGR
+- Add 'aria-invalid' to form fields that are in an error state
+
+## [0.1.2] - 2025-06-17
+### Added
+- Add readme file
+
+## [0.1.1] - 2025-06-13
+### Changed
+- Allow all components to have additional CSS classes passed to them
+
+## [0.1.0] - 2025-06-13
+### Added
+- Add npmignore file
+### Fixed
+- Fix broken content navigation spec

package/README.md

@@ -4,6 +4,10 @@ This repository contains a React implementation of the [Scottish Government Desi
 
 There is a documentation site showing what is in this implementation and how to use it here: https://designsystem-react.vercel.app/
 
+## 🚧 Under construction 🚧
+
+Warning: This project is in an alpha state and could potentially receive large breaking changes with little warning while it is being developed.
+
 ## 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).

package/dist/common/{abstract-notification-banner.jsx → AbstractNotificationBanner.jsx}

@@ -4,8 +4,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = require("react");
-const icon_1 = __importDefault(require("./icon"));
-const screen_reader_text_1 = __importDefault(require("./screen-reader-text"));
+const Icon_1 = __importDefault(require("./Icon"));
+const ScreenReaderText_1 = __importDefault(require("./ScreenReaderText"));
 const Buttons = ({ children }) => {
     return (<>{children}</>);
 };
@@ -37,7 +37,7 @@ const AbstractNotificationBanner = ({ children, className, close, icon, iconColo
                     iconInverse && 'ds_notification__icon--inverse',
                     iconColour && 'ds_notification__icon--colour'
                 ].join(' ')} aria-hidden="true">
-                            <icon_1.default icon={icon}/>
+                            <Icon_1.default icon={icon}/>
                         </span>}
 
                     <div className="ds_notification__text">
@@ -46,8 +46,8 @@ const AbstractNotificationBanner = ({ children, className, close, icon, iconColo
 
                     {close &&
             <button type="button" className="ds_notification__close js-close-notification">
-                            <screen_reader_text_1.default>Close this notification</screen_reader_text_1.default>
-                            <icon_1.default fill icon="Close" aria-hidden="true"/>
+                            <ScreenReaderText_1.default>Close this notification</ScreenReaderText_1.default>
+                            <Icon_1.default fill icon="Close" aria-hidden="true"/>
                         </button>}
 
                     {buttons &&

package/dist/components/{accordion/accordion.jsx → Accordion/Accordion.jsx}

@@ -37,11 +37,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importStar(require("react"));
-const wrapper_tag_1 = __importDefault(require("../../common/wrapper-tag"));
+const WrapperTag_1 = __importDefault(require("../../common/WrapperTag"));
 // @ts-ignore
 const accordion_1 = __importDefault(require("@scottish-government/design-system/src/components/accordion/accordion"));
 let accordionItemCounter = 0;
-const AccordionItem = ({ children, className, headerLevel = 'h3', id: rawId, open = false, title, ...props }) => {
+const AccordionItem = ({ children, className, headingLevel = 'h3', id: rawId, open = false, title, ...props }) => {
     accordionItemCounter = accordionItemCounter + 1;
     const processedId = rawId || `accordion-item-${accordionItemCounter}`;
     return (<div className={[
@@ -53,9 +53,9 @@ const AccordionItem = ({ children, className, headerLevel = 'h3', id: rawId, ope
             'visually-hidden'
         ].join(' ')} defaultChecked={open} id={`${processedId}-control`} type="checkbox"/>
             <div className="ds_accordion-item__header">
-                <wrapper_tag_1.default id={`panel-${processedId}-heading`} className="ds_accordion-item__title" tagName={headerLevel}>
+                <WrapperTag_1.default id={`panel-${processedId}-heading`} className="ds_accordion-item__title" tagName={headingLevel}>
                     {title}
-                </wrapper_tag_1.default>
+                </WrapperTag_1.default>
                 <span className='ds_accordion-item__indicator'/>
                 <label className="ds_accordion-item__label" htmlFor={`${processedId}-control`}>
                     <span className="visually-hidden">Show this section</span>
@@ -66,7 +66,7 @@ const AccordionItem = ({ children, className, headerLevel = 'h3', id: rawId, ope
             </div>
         </div>);
 };
-const Accordion = ({ children, className, headerLevel = 'h3', hideOpenAll, ...props }) => {
+const Accordion = ({ children, className, headingLevel = 'h3', hideOpenAll, ...props }) => {
     const ref = (0, react_1.useRef)(null);
     (0, react_1.useEffect)(() => {
         if (ref.current) {
@@ -77,7 +77,7 @@ const Accordion = ({ children, className, headerLevel = 'h3', hideOpenAll, ...pr
         hideOpenAll = true;
     }
     function processChild(child) {
-        return react_1.default.cloneElement(child, { headerLevel: headerLevel });
+        return react_1.default.cloneElement(child, { headingLevel: headingLevel });
     }
     return (<div className={[
             'ds_accordion',

package/dist/components/{back-to-top/back-to-top.jsx → BackToTop/BackToTop.jsx}

@@ -4,9 +4,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = require("react");
+const Icon_1 = __importDefault(require("../../common/Icon"));
 // @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 = ({ className, href = '#page-top', ...props }) => {
     const ref = (0, react_1.useRef)(null);
     (0, react_1.useEffect)(() => {
@@ -19,7 +19,7 @@ const BackToTop = ({ className, href = '#page-top', ...props }) => {
             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="ArrowUpward"/>
+                <Icon_1.default className="ds_back-to-top__icon" icon="ArrowUpward"/>
             </a>
        </div>);
 };

package/dist/components/{button/button.jsx → Button/Button.jsx}

@@ -3,16 +3,16 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 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 Icon_1 = __importDefault(require("../../common/Icon"));
+const ScreenReaderText_1 = __importDefault(require("../../common/ScreenReaderText"));
+const WrapperTag_1 = __importDefault(require("../../common/WrapperTag"));
 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) {
         tagName = 'a';
     }
-    return (<wrapper_tag_1.default tagName={tagName} className={[
+    return (<WrapperTag_1.default tagName={tagName} className={[
             !styleAsLink ? 'ds_button' : 'ds_link',
             width && `ds_button--${width}`,
             buttonStyle && `ds_button--${buttonStyle}`,
@@ -21,10 +21,10 @@ const Button = ({ buttonStyle, children, className, icon, iconLeft, iconOnly = f
             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}
+            {iconOnly ? <ScreenReaderText_1.default>{children}</ScreenReaderText_1.default> : children}
 
-            {icon && <icon_1.default icon={icon}/>}
-        </wrapper_tag_1.default>);
+            {icon && <Icon_1.default icon={icon}/>}
+        </WrapperTag_1.default>);
 };
 Button.displayName = 'Button';
 exports.default = Button;

package/dist/components/{checkbox/checkbox.jsx → Checkbox/Checkbox.jsx}

@@ -7,7 +7,7 @@ exports.CheckboxGroup = exports.Checkbox = void 0;
 const react_1 = require("react");
 // @ts-ignore
 const checkboxes_1 = __importDefault(require("@scottish-government/design-system/src/forms/checkbox/checkboxes"));
-const hint_text_1 = __importDefault(require("../../common/hint-text"));
+const HintText_1 = __importDefault(require("../../common/HintText"));
 const Checkbox = ({ checked, hintText, id, exclusive, label, name, onBlur, onChange, small }) => {
     const hintTextId = `hint-text-${id}`;
     const behaviour = exclusive && 'exclusive';
@@ -30,7 +30,7 @@ const Checkbox = ({ checked, hintText, id, exclusive, label, name, onBlur, onCha
 
                 <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 && <hint_text_1.default id={hintTextId} text={hintText}/>}
+                {hintText && <HintText_1.default id={hintTextId} text={hintText}/>}
             </div>
         </>);
 };

package/dist/components/{confirmation-message/confirmation-message.jsx → ConfirmationMessage/ConfirmationMessage.jsx}

@@ -3,18 +3,18 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": 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, className, headerLevel = 'h3', title, ...props }) => {
+const Icon_1 = __importDefault(require("../../common/Icon"));
+const WrapperTag_1 = __importDefault(require("../../common/WrapperTag"));
+const ConfirmationMessage = ({ ariaLive = 'polite', children, className, headingLevel = 'h3', title, ...props }) => {
     return (<div aria-live={ariaLive} className={[
             'ds_confirmation-message',
             className
         ].join(' ')} {...props}>
-            <icon_1.default className="ds_confirmation-message__icon" icon="CheckCircle" iconSize="24"/>
+            <Icon_1.default className="ds_confirmation-message__icon" icon="CheckCircle" iconSize="24"/>
 
-            <wrapper_tag_1.default className="ds_confirmation-message__title" tagName={headerLevel}>
+            <WrapperTag_1.default className="ds_confirmation-message__title" tagName={headingLevel}>
                 {title}
-            </wrapper_tag_1.default>
+            </WrapperTag_1.default>
             {children && <div className="ds_confirmation-message__body">
                 {children}
             </div>}

package/dist/components/{contents-nav/contents-nav.jsx → ContentsNav/ContentsNav.jsx}

@@ -4,17 +4,17 @@ 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 WrapperTag_1 = __importDefault(require("../../common/WrapperTag"));
 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">
-            <wrapper_tag_1.default tagName={tagName} className={[
+            <WrapperTag_1.default tagName={tagName} className={[
             'ds_contents-nav__link',
             current && 'ds_current'
         ].join(' ')} href={!current ? href : undefined}>
                 {title}
-            </wrapper_tag_1.default>
+            </WrapperTag_1.default>
         </li>);
 };
 exports.Link = Link;

package/dist/components/{cookie-banner/cookie-banner.jsx → CookieBanner/CookieBanner.jsx}

@@ -3,19 +3,19 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const abstract_notification_banner_1 = __importDefault(require("../../common/abstract-notification-banner"));
+const AbstractNotificationBanner_1 = __importDefault(require("../../common/AbstractNotificationBanner"));
 const CookieBanner = ({ children, className, title, ...props }) => {
     return (<>
-            <abstract_notification_banner_1.default className={[
+            <AbstractNotificationBanner_1.default className={[
             'ds_notification--large',
             'ds_notification--cookie',
             'js-initial-cookie-content',
             className
         ].join(' ')} data-module="ds-cookie-notification" title={title} {...props}>
                 {children}
-            </abstract_notification_banner_1.default>
+            </AbstractNotificationBanner_1.default>
         </>);
 };
 CookieBanner.displayName = 'CookieBanner';
-CookieBanner.Buttons = abstract_notification_banner_1.default.Buttons;
+CookieBanner.Buttons = AbstractNotificationBanner_1.default.Buttons;
 exports.default = CookieBanner;

package/dist/components/{date-picker/date-picker.jsx → DatePicker/DatePicker.jsx}

@@ -6,8 +6,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = require("react");
 // @ts-ignore
 const date_picker_1 = __importDefault(require("@scottish-government/design-system/src/components/date-picker/date-picker"));
-const error_message_1 = __importDefault(require("../error-message/error-message"));
-const text_input_1 = __importDefault(require("../text-input/text-input"));
+const ErrorMessage_1 = __importDefault(require("../ErrorMessage/ErrorMessage"));
+const TextInput_1 = __importDefault(require("../TextInput/TextInput"));
 const DatePicker = ({ className, dateSelectCallback, disabledDates, error, errorMessage, hintText, id, iconPath = './', label, maxDate, minDate, multiple, name, onBlur, onChange, value, width = 'fixed-10', ...props }) => {
     const ref = (0, react_1.useRef)(null);
     (0, react_1.useEffect)(() => {
@@ -35,19 +35,19 @@ const DatePicker = ({ className, dateSelectCallback, disabledDates, error, error
         ].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>
-                    {errorMessage && <error_message_1.default text={errorMessage}/>}
+                    {errorMessage && <ErrorMessage_1.default text={errorMessage}/>}
                     <div>
-                        <text_input_1.default className="js-datepicker-date" error={!!error} id={id + "-day"} hintText={hintText} label="Day" name={name + "-day"} onBlur={handleBlur} onChange={handleChange} value={value?.split('/')[0]} width="fixed-2"/>
+                        <TextInput_1.default className="js-datepicker-date" error={!!error} id={id + "-day"} hintText={hintText} label="Day" name={name + "-day"} onBlur={handleBlur} onChange={handleChange} value={value?.split('/')[0]} width="fixed-2"/>
                     </div>
 
                     <div>
-                        <text_input_1.default className="js-datepicker-month" error={!!error} id={id + "-month"} hintText={hintText} label="Month" name={name + "-month"} onBlur={handleBlur} onChange={handleChange} value={value?.split('/')[1]} width="fixed-2"/>
+                        <TextInput_1.default className="js-datepicker-month" error={!!error} id={id + "-month"} hintText={hintText} label="Month" name={name + "-month"} onBlur={handleBlur} onChange={handleChange} value={value?.split('/')[1]} width="fixed-2"/>
                     </div>
 
                     <div>
-                        <text_input_1.default className="js-datepicker-year" error={!!error} id={id + "-year"} hintText={hintText} label="Year" name={name + "-year"} onBlur={handleBlur} onChange={handleChange} value={value?.split('/')[2]} width="fixed-4"/>
+                        <TextInput_1.default className="js-datepicker-year" error={!!error} id={id + "-year"} hintText={hintText} label="Year" name={name + "-year"} onBlur={handleBlur} onChange={handleChange} value={value?.split('/')[2]} width="fixed-4"/>
                     </div>
-                </fieldset>) : (<text_input_1.default error={!!error} errorMessage={errorMessage} id={id} hasButton hintText={hintText} label={label} name={name} onBlur={handleBlur} onChange={handleChange} placeholder="dd/mm/yyyy" value={value} width={width}/>))}
+                </fieldset>) : (<TextInput_1.default error={!!error} errorMessage={errorMessage} id={id} hasButton hintText={hintText} label={label} name={name} onBlur={handleBlur} onChange={handleChange} placeholder="dd/mm/yyyy" value={value} width={width}/>))}
         </div>);
 };
 DatePicker.displayName = 'DatePicker';

package/dist/components/{error-summary/error-summary.jsx → ErrorSummary/ErrorSummary.jsx}

@@ -3,10 +3,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const conditional_wrapper_1 = __importDefault(require("../../common/conditional-wrapper"));
+const ConditionalWrapper_1 = __importDefault(require("../../common/ConditionalWrapper"));
 const Error = ({ fragmentId, title }) => {
     return (<li>
-            <conditional_wrapper_1.default condition={!!fragmentId} wrapper={() => <a href={`#${fragmentId}`}>{title}</a>}>{title}</conditional_wrapper_1.default>
+            <ConditionalWrapper_1.default condition={!!fragmentId} wrapper={() => <a href={`#${fragmentId}`}>{title}</a>}>{title}</ConditionalWrapper_1.default>
         </li>);
 };
 const ErrorSummary = ({ className, errors, title = 'There is a problem', ...props }) => {

package/dist/components/{file-download/file-download.jsx → FileDownload/FileDownload.jsx}

@@ -4,7 +4,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = require("react");
-const file_icon_1 = __importDefault(require("../../common/file-icon"));
+const FileIcon_1 = __importDefault(require("../../common/FileIcon"));
 const FileDownload = ({ className, cover, highlighted, icon = 'Generic', fileSize, fileType, fileUrl, title, ...props }) => {
     const hasMetadata = !!fileType || !!fileSize;
     const metaContainerId = `file-download-${(0, react_1.useId)()}`;
@@ -18,7 +18,7 @@ const FileDownload = ({ className, cover, highlighted, icon = 'Generic', fileSiz
                     {cover ?
             <img alt="" className="ds_file-download__thumbnail-image" src={cover}/>
             :
-                <file_icon_1.default ariaLabel="" className="ds_file-download__thumbnail-image" icon={icon}/>}
+                <FileIcon_1.default ariaLabel="" className="ds_file-download__thumbnail-image" icon={icon}/>}
                 </a>
             </div>
 

package/dist/components/{hide-this-page/hide-this-page.jsx → HideThisPage/HideThisPage.jsx}

@@ -44,10 +44,10 @@ const HideThisPage = ({ className, escapeUrl = 'https://www.bbc.co.uk/weather',
     (0, react_1.useEffect)(() => {
         if (ref.current) {
             new hide_this_page_1.default().init();
-            const htpDivId = 'hide-this-page-instruction';
-            if (!document.getElementById(htpDivId)) {
+            const HIDE_THIS_PAGE_DIV_ID = 'hide-this-page-instruction';
+            if (!document.getElementById(HIDE_THIS_PAGE_DIV_ID)) {
                 const htpDiv = document.createElement('div');
-                htpDiv.id = htpDivId;
+                htpDiv.id = HIDE_THIS_PAGE_DIV_ID;
                 htpDiv.classList.add('visually-hidden');
                 htpDiv.classList.add('ds_hide-page');
                 htpDiv.innerHTML = '<p>To leave the page quickly, press the escape key.</p>';

package/dist/components/{notification-banner/notification-banner.jsx → NotificationBanner/NotificationBanner.jsx}

@@ -4,7 +4,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = require("react");
-const abstract_notification_banner_1 = __importDefault(require("../../common/abstract-notification-banner"));
+const AbstractNotificationBanner_1 = __importDefault(require("../../common/AbstractNotificationBanner"));
 // @ts-ignore
 const notification_banner_1 = __importDefault(require("@scottish-government/design-system/src/components/notification-banner/notification-banner"));
 const NotificationBanner = ({ children, className, close, icon, iconColour, iconInverse, title, ...props }) => {
@@ -14,13 +14,13 @@ const NotificationBanner = ({ children, className, close, icon, iconColour, icon
             new notification_banner_1.default(ref.current).init();
         }
     }, [ref]);
-    return (<abstract_notification_banner_1.default className={[
+    return (<AbstractNotificationBanner_1.default className={[
             'ds_reversed',
             className
         ].join(' ')} close={close} icon={icon ? "PriorityHigh" : undefined} iconColour={iconColour} iconInverse={iconInverse} ref={ref} title="Information" {...props}>
             {children}
-        </abstract_notification_banner_1.default>);
+        </AbstractNotificationBanner_1.default>);
 };
 NotificationBanner.displayName = 'NotificationBanner';
-NotificationBanner.Buttons = abstract_notification_banner_1.default.Buttons;
+NotificationBanner.Buttons = AbstractNotificationBanner_1.default.Buttons;
 exports.default = NotificationBanner;

package/dist/components/{notification-panel/notification-panel.jsx → NotificationPanel/NotificationPanel.jsx}

@@ -3,15 +3,15 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const wrapper_tag_1 = __importDefault(require("../../common/wrapper-tag"));
-const NotificationPanel = function ({ ariaLive, children, className, headerLevel = 'h1', title, ...props }) {
+const WrapperTag_1 = __importDefault(require("../../common/WrapperTag"));
+const NotificationPanel = function ({ ariaLive, children, className, headingLevel = '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}>
+            <WrapperTag_1.default className="ds_notification-panel__title" tagName={headingLevel}>
                 {title}
-            </wrapper_tag_1.default>
+            </WrapperTag_1.default>
             <div className="ds_notification-panel__content">
                 {children}
             </div>

package/dist/components/{pagination/pagination.jsx → Pagination/Pagination.jsx}

@@ -4,7 +4,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Ellipsis = exports.Page = void 0;
-const icon_1 = __importDefault(require("../../common/icon"));
+const Icon_1 = __importDefault(require("../../common/Icon"));
 const Page = ({ ariaLabel, current = false, href, onClick, text }) => {
     function handleClick(event) {
         if (typeof onClick === 'function') {
@@ -66,7 +66,7 @@ const Pagination = ({ ariaLabel = 'Pages', className, onClick, padding = 1, page
             <ul className="ds_pagination__list">
                 {page > 1 && (<li className="ds_pagination__item">
                         <a aria-label="Previous page" className="ds_pagination__link  ds_pagination__link--text  ds_pagination__link--icon" href={pattern.replace('$1', String(page - 1))} data-search="pagination-previous" onClick={onClick}>
-                            <icon_1.default icon="ChevronLeft"/>
+                            <Icon_1.default icon="ChevronLeft"/>
                             <span className="ds_pagination__link-label">Previous</span>
                         </a>
                     </li>)}
@@ -86,7 +86,7 @@ const Pagination = ({ ariaLabel = 'Pages', className, onClick, padding = 1, page
                 {page < totalPages && (<li className="ds_pagination__item">
                         <a aria-label="Next page" className="ds_pagination__link  ds_pagination__link--text  ds_pagination__link--icon" href={pattern.replace('$1', String(page + 1))} data-search="pagination-next" onClick={onClick}>
                             <span className="ds_pagination__link-label">Next</span>
-                            <icon_1.default icon="ChevronRight"/>
+                            <Icon_1.default icon="ChevronRight"/>
                         </a>
                     </li>)}
 

package/dist/components/{phase-banner/phase-banner.jsx → PhaseBanner/PhaseBanner.jsx}

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const tag_1 = __importDefault(require("../tag/tag"));
+const Tag_1 = __importDefault(require("../Tag/Tag"));
 const PhaseBanner = ({ children, className, content, phaseName, ...props }) => {
     return (<div className={[
             'ds_phase-banner',
@@ -11,7 +11,7 @@ const PhaseBanner = ({ children, className, content, phaseName, ...props }) => {
         ].join(' ')} {...props}>
             <div className="ds_wrapper">
                 <p className="ds_phase-banner__content">
-                    {phaseName && <tag_1.default title={phaseName} className="ds_phase-banner__tag"/>}
+                    {phaseName && <Tag_1.default title={phaseName} className="ds_phase-banner__tag"/>}
                     <span className="ds_phase-banner__text">
                         {content ? content : children || "This is a new service"}
                     </span>

package/dist/components/{question/question.jsx → Question/Question.jsx}

@@ -3,20 +3,20 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 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 ErrorMessage_1 = __importDefault(require("../ErrorMessage/ErrorMessage"));
+const HintText_1 = __importDefault(require("../../common/HintText"));
+const WrapperTag_1 = __importDefault(require("../../common/WrapperTag"));
 const Question = function ({ children, className, error, errorMessage, hintText, legend, tagName = 'div', ...props }) {
-    return (<wrapper_tag_1.default tagName={tagName} className={[
+    return (<WrapperTag_1.default tagName={tagName} className={[
             'ds_question',
             error && 'ds_question--error',
             className
         ].join(' ')} {...props}>
             {legend && <legend>{legend}</legend>}
-            {hintText && <hint_text_1.default text={hintText}/>}
-            {error && errorMessage && <error_message_1.default text={errorMessage}/>}
+            {hintText && <HintText_1.default text={hintText}/>}
+            {error && errorMessage && <ErrorMessage_1.default text={errorMessage}/>}
             {children}
-        </wrapper_tag_1.default>);
+        </WrapperTag_1.default>);
 };
 Question.displayName = 'Question';
 exports.default = Question;

package/dist/components/{radio-button/radio-button.jsx → RadioButton/RadioButton.jsx}

@@ -4,7 +4,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Radio = void 0;
-const hint_text_1 = __importDefault(require("../../common/hint-text"));
+const HintText_1 = __importDefault(require("../../common/HintText"));
 const Radio = ({ checked, hintText, id, label, name, onBlur, onChange, small }) => {
     const hintTextId = `hint-text-${id}`;
     function handleBlur(event) {
@@ -23,7 +23,7 @@ const Radio = ({ checked, hintText, id, label, name, onBlur, onChange, small })
         ].join(' ')}>
             <input aria-describedby={hintText ? hintTextId : undefined} className="ds_radio__input" defaultChecked={!!checked} id={id} name={name} onBlur={handleBlur} onChange={handleChange} type="radio"/>
             <label className="ds_radio__label" htmlFor={id}>{label}</label>
-            {hintText && <hint_text_1.default id={hintTextId} text={hintText}/>}
+            {hintText && <HintText_1.default id={hintTextId} text={hintText}/>}
         </div>);
 };
 exports.Radio = Radio;