@scottish-government/designsystem-react 0.8.0 → 0.10.0-beta.0

package/dist/components/Button/Button.jsx

@@ -6,22 +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 Button = ({ buttonStyle, children, className, icon, iconLeft, iconOnly = false, href, small, styleAsLink, type = 'button', width, ...props }) => {
+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={[
-            !styleAsLink ? 'ds_button' : 'ds_link',
+            !hasLinkStyle ? 'ds_button' : 'ds_link',
             width && `ds_button--${width}`,
             buttonStyle && `ds_button--${buttonStyle}`,
-            small && 'ds_button--small',
-            (icon && !iconOnly) ? 'ds_button--has-icon' : undefined,
-            iconLeft && 'ds_button--has-icon--left',
+            isSmall && 'ds_button--small',
+            (icon && !isIconOnly) ? 'ds_button--has-icon' : undefined,
+            isIconLeft && 'ds_button--has-icon--left',
             className
         ].join(' ')} href={href} {...(tagName === 'button' ? { type: type } : {})} {...props}>
-            {iconOnly ? <ScreenReaderText_1.default>{children}</ScreenReaderText_1.default> : children}
+            {isIconOnly ? <ScreenReaderText_1.default>{children}</ScreenReaderText_1.default> : children}
 
             {icon && <Icon_1.default icon={icon}/>}
         </WrapperTag_1.default>);

package/dist/components/CategoryItem/CategoryItem.jsx

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

package/dist/components/CategoryList/CategoryList.jsx

@@ -0,0 +1,55 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importStar(require("react"));
+const WrapperTag_1 = __importDefault(require("../../common/WrapperTag"));
+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={[
+            'ds_category-list',
+            isGrid && 'ds_category-list--grid',
+            className
+        ].join(' ')} {...props}>
+            {react_1.Children.map(children, child => processChild(child))}
+        </WrapperTag_1.default>);
+};
+CategoryList.displayName = 'CategoryList';
+exports.default = CategoryList;

package/dist/components/Checkbox/Checkbox.jsx

@@ -3,10 +3,12 @@ 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 context_1 = require("../../utils/context");
 const HintText_1 = __importDefault(require("../../common/HintText"));
-const Checkbox = ({ checked, hintText, id, exclusive, label, name, onBlur, onChange, small }) => {
+const Checkbox = ({ checked, hintText, id, isSmall, isExclusive, label, name, onBlur, onChange }) => {
     const hintTextId = `hint-text-${id}`;
-    const behaviour = exclusive && 'exclusive';
+    const behaviour = isExclusive && 'exclusive';
     function handleBlur(event) {
         if (typeof onBlur === 'function') {
             onBlur(event);
@@ -17,11 +19,12 @@ const Checkbox = ({ checked, hintText, id, exclusive, label, name, onBlur, onCha
             onChange(event);
         }
     }
+    isSmall = isSmall || (0, react_1.useContext)(context_1.CheckboxRadioContext).isSmall;
     return (<>
-            {exclusive && <p className="ds_checkbox-separator">or</p>}
+            {isExclusive && <p className="ds_checkbox-separator">or</p>}
             <div className={[
             'ds_checkbox',
-            small && 'ds_checkbox--small'
+            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"/>

package/dist/components/Checkbox/CheckboxGroup.jsx

@@ -38,18 +38,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CheckboxGroup = void 0;
 const react_1 = __importStar(require("react"));
-const Checkbox_1 = __importDefault(require("./Checkbox"));
+const context_1 = require("../../utils/context");
 // @ts-ignore
 const checkboxes_1 = __importDefault(require("@scottish-government/design-system/src/forms/checkbox/checkboxes"));
-const CheckboxGroup = ({ children, className, small, ...props }) => {
-    function processChild(child) {
-        if (child && child.type === Checkbox_1.default) {
-            return react_1.default.cloneElement(child, { small: small });
-        }
-        else {
-            return child;
-        }
-    }
+const CheckboxGroup = ({ children, className, isSmall, ...props }) => {
     const ref = (0, react_1.useRef)(null);
     (0, react_1.useEffect)(() => {
         if (ref.current) {
@@ -61,7 +53,9 @@ const CheckboxGroup = ({ children, className, small, ...props }) => {
             'ds_field-group',
             className
         ].join(' ')} data-module="ds-checkboxes" ref={ref} {...props}>
-            {react_1.Children.map(children, child => processChild(child))}
+            <context_1.CheckboxRadioContext value={{ isSmall: !!isSmall, name: '' }}>
+                {children}
+            </context_1.CheckboxRadioContext>
         </div>);
 };
 exports.CheckboxGroup = CheckboxGroup;

package/dist/components/ContentsNav/ContentsNav.jsx

@@ -4,10 +4,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
-const ContentsNavItem = ({ children, current, href, linkComponent }) => {
+const ContentsNavItem = ({ children, isCurrent, href, linkComponent }) => {
     const classNames = ['ds_contents-nav__link'];
     let ariaCurrent;
-    if (current) {
+    if (isCurrent) {
         classNames.push('ds_current');
         ariaCurrent = 'page';
     }

package/dist/components/DatePicker/DatePicker.jsx

@@ -35,7 +35,7 @@ const DatePicker = ({ className, dateSelectCallback, disabledDates, errorMessage
         ].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 && <ErrorMessage_1.default text={errorMessage}/>}
+                    {errorMessage && <ErrorMessage_1.default>{errorMessage}</ErrorMessage_1.default>}
                     <div>
                         <TextInput_1.default className="js-datepicker-date" hasError={!!hasError} id={id + "-day"} hintText={hintText} label="Day" name={name + "-day"} onBlur={handleBlur} onChange={handleChange} value={value?.split('/')[0]} width="fixed-2"/>
                     </div>

package/dist/components/ErrorMessage/ErrorMessage.jsx

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

package/dist/components/FileDownload/FileDownload.jsx

@@ -5,12 +5,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = require("react");
 const FileIcon_1 = __importDefault(require("../../common/FileIcon"));
-const FileDownload = ({ className, cover, highlighted, icon = 'Generic', fileSize, fileType, fileUrl, title, ...props }) => {
+const FileDownload = ({ className, cover, icon = 'Generic', isHighlighted, fileSize, fileType, fileUrl, title, ...props }) => {
     const hasMetadata = !!fileType || !!fileSize;
     const metaContainerId = `file-download-${(0, react_1.useId)()}`;
     return (<div className={[
             'ds_file-download',
-            highlighted && 'ds_file-download--highlighted',
+            isHighlighted && 'ds_file-download--highlighted',
             className
         ].join(' ')} {...props}>
             <div className="ds_file-download__thumbnail">

package/dist/components/NotificationBanner/NotificationBanner.jsx

@@ -7,7 +7,7 @@ const react_1 = require("react");
 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, hasColourIcon, hasInverseIcon, icon, title, ...props }) => {
+const NotificationBanner = ({ children, className, hasColourIcon, hasIcon, hasInverseIcon, isDismissable, title, ...props }) => {
     const ref = (0, react_1.useRef)(null);
     (0, react_1.useEffect)(() => {
         if (ref.current) {
@@ -17,7 +17,7 @@ const NotificationBanner = ({ children, className, close, hasColourIcon, hasInve
     return (<AbstractNotificationBanner_1.default className={[
             'ds_reversed',
             className
-        ].join(' ')} close={close} icon={icon ? "PriorityHigh" : undefined} hasColourIcon={hasColourIcon} hasInverseIcon={hasInverseIcon} ref={ref} title="Information" {...props}>
+        ].join(' ')} isDismissable={isDismissable} icon={hasIcon ? "PriorityHigh" : undefined} hasColourIcon={hasColourIcon} hasInverseIcon={hasInverseIcon} ref={ref} title="Information" {...props}>
             {children}
         </AbstractNotificationBanner_1.default>);
 };

package/dist/components/PageMetadata/PageMetadata.jsx

@@ -5,16 +5,16 @@ const MetadataItem = ({ children, className, name, ...props }) => {
             'ds_metadata__item',
             className
         ].join(' ')} {...props}>
-            <dt className="ds_metadata__key">{name}</dt>{' '}
+            <dt className="ds_metadata__key">{name}</dt>
             <dd className="ds_metadata__value">
-                {children}
+                {children}{' '}
             </dd>
         </div>);
 };
-const Metadata = ({ children, className, inline, ...props }) => {
+const Metadata = ({ children, className, isInline, ...props }) => {
     return (<dl className={[
             'ds_metadata',
-            inline && 'ds_metadata--inline',
+            isInline && 'ds_metadata--inline',
             className
         ].join(' ')} {...props}>
             {children}

package/dist/components/Pagination/Pagination.jsx

@@ -5,7 +5,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 Page = ({ ariaLabel, children, className, current = false, href, linkComponent, onClick }) => {
+const Page = ({ ariaLabel, children, className, href, isCurrent = false, linkComponent, onClick }) => {
     function handleClick(event) {
         if (typeof onClick === 'function') {
             onClick(event);
@@ -15,14 +15,14 @@ const Page = ({ ariaLabel, children, className, current = false, href, linkCompo
         const classNames = [
             'ds_pagination__link',
             className,
-            current ? 'ds_current' : undefined
+            isCurrent ? 'ds_current' : undefined
         ].join(' ');
         const linkProps = {
             'aria-label': ariaLabel,
             href: href,
             onClick: handleClick
         };
-        if (current) {
+        if (isCurrent) {
             linkProps['aria-current'] = 'page';
         }
         if (linkComponent) {
@@ -94,7 +94,7 @@ const Pagination = ({ ariaLabel = 'Pages', className, onClick, padding = 1, page
                         <exports.Ellipsis />
                     </>)}
 
-                {pages && pages.map((item, index) => (<exports.Page ariaLabel={`Page ${item}`} href={pattern.replace('$1', String(item))} current={item === page} key={`pagination${index}`} linkComponent={linkComponent} onClick={onClick} pattern={pattern}>
+                {pages && pages.map((item, index) => (<exports.Page ariaLabel={`Page ${item}`} href={pattern.replace('$1', String(item))} isCurrent={item === page} key={`pagination${index}`} linkComponent={linkComponent} onClick={onClick} pattern={pattern}>
                         <span className="ds_pagination__link-label">{item.toString()}</span>
                     </exports.Page>))}
 

package/dist/components/Question/Question.jsx

@@ -14,7 +14,7 @@ const Question = function ({ children, className, errorMessage, hasError, hintTe
         ].join(' ')} {...props}>
             {legend && <legend>{legend}</legend>}
             {hintText && <HintText_1.default text={hintText}/>}
-            {hasError && errorMessage && <ErrorMessage_1.default text={errorMessage}/>}
+            {hasError && errorMessage && <ErrorMessage_1.default>{errorMessage}</ErrorMessage_1.default>}
             {children}
         </WrapperTag_1.default>);
 };

package/dist/components/RadioButton/RadioButton.jsx

@@ -3,8 +3,10 @@ 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 HintText_1 = __importDefault(require("../../common/HintText"));
-const RadioButton = ({ checked, hintText, id, label, name, onBlur, onChange, small }) => {
+const context_1 = require("../../utils/context");
+const RadioButton = ({ checked, hintText, id, isSmall, label, name, onBlur, onChange }) => {
     const hintTextId = `hint-text-${id}`;
     function handleBlur(event) {
         if (typeof onBlur === 'function') {
@@ -16,9 +18,11 @@ const RadioButton = ({ checked, hintText, id, label, name, onBlur, onChange, sma
             onChange(event);
         }
     }
+    isSmall = isSmall || (0, react_1.useContext)(context_1.CheckboxRadioContext).isSmall;
+    name = name || (0, react_1.useContext)(context_1.CheckboxRadioContext).name;
     return (<div className={[
             'ds_radio',
-            small && 'ds_radio--small'
+            isSmall && 'ds_radio--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>

package/dist/components/RadioButton/RadioGroup.jsx

@@ -1,60 +1,20 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importStar(require("react"));
-const RadioButton_1 = __importDefault(require("./RadioButton"));
-const RadioGroup = ({ children, className, inline, name, small, ...props }) => {
-    function processChild(child) {
-        if (child && child.type === RadioButton_1.default) {
-            return react_1.default.cloneElement(child, { small: small, name: name });
-        }
-        else {
-            return child;
-        }
-    }
+const react_1 = __importDefault(require("react"));
+const context_1 = require("../../utils/context");
+const RadioGroup = ({ children, className, isInline, isSmall, name, ...props }) => {
     return (<div className={[
             'ds_radios',
             'ds_field-group',
-            inline && 'ds_field-group--inline',
+            isInline && 'ds_field-group--inline',
             className
         ].join(' ')} {...props}>
-
-            {react_1.Children.map(children, child => processChild(child))}
+            <context_1.CheckboxRadioContext value={{ isSmall: !!isSmall, name }}>
+                {children}
+            </context_1.CheckboxRadioContext>
         </div>);
 };
 RadioGroup.displayName = 'RadioGroup';

package/dist/components/Select/Select.jsx

@@ -30,7 +30,7 @@ const Select = function ({ children, className, defaultValue, errorMessage, hasE
     return (<>
             <label className="ds_label" htmlFor={id}>{label}</label>
             {hintText && <HintText_1.default id={hintTextId} text={hintText}/>}
-            {errorMessage && <ErrorMessage_1.default id={errorMessageId} text={errorMessage}/>}
+            {errorMessage && <ErrorMessage_1.default id={errorMessageId}>{errorMessage}</ErrorMessage_1.default>}
             <div className={[
             "ds_select-wrapper",
             hasError && 'ds_input--error',

package/dist/components/SideNavigation/SideNavigation.jsx

@@ -11,13 +11,13 @@ const SideNavigationList = function ({ children, isRoot }) {
             {children}
         </ul>);
 };
-const SideNavigationItem = function ({ children, href, current = false, linkComponent, title }) {
+const SideNavigationItem = function ({ children, href, isCurrent = false, linkComponent, title }) {
     const LINK_CLASS = 'ds_side-navigation__link';
     return (<li className={[
             'ds_side-navigation__item',
             children && 'ds_side-navigation__item--has-children'
         ].join(' ')}>
-            {current ?
+            {isCurrent ?
             <span className={LINK_CLASS + ' ds_current'}>{title}</span> :
             linkComponent ? linkComponent({ className: LINK_CLASS, href, children: title }) :
                 <a href={href} className={LINK_CLASS}>{title}</a>}

package/dist/components/SiteHeader/SiteHeader.jsx

@@ -70,7 +70,7 @@ const Phase = ({ children }) => {
 const Search = ({ children }) => {
     return children;
 };
-const SiteHeader = ({ children, logo = {}, navigationItems, phaseBanner, siteSearch, siteTitle, ...props }) => {
+const SiteHeader = ({ children, ...props }) => {
     const mobileMenuRef = (0, react_1.useRef)(null);
     let branding;
     let navigation;
@@ -113,8 +113,8 @@ const SiteHeader = ({ children, logo = {}, navigationItems, phaseBanner, siteSea
                             <div className="ds_site-header__controls">
                                 <label aria-controls="mobile-navigation" className="ds_site-header__control  js-toggle-menu" htmlFor="menu">
                                     <span className="ds_site-header__control-text">Menu</span>
-                                    <Icon_1.default fill className="ds_site-header__control-icon" icon="Menu" aria-hidden="true"/>
-                                    <Icon_1.default fill className="ds_site-header__control-icon  ds_site-header__control-icon--active-icon" icon="Close" aria-hidden="true"/>
+                                    <Icon_1.default isFilled className="ds_site-header__control-icon" icon="Menu" aria-hidden="true"/>
+                                    <Icon_1.default isFilled className="ds_site-header__control-icon  ds_site-header__control-icon--active-icon" icon="Close" aria-hidden="true"/>
                                 </label>
                             </div>
 

package/dist/components/SiteNavigation/SiteNavigation.jsx

@@ -1,9 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-const Item = ({ children, current = false, href, linkComponent }) => {
+const Item = ({ children, isCurrent = false, href, linkComponent }) => {
     const classNames = ['ds_site-navigation__link'];
     let ariaCurrent;
-    if (current) {
+    if (isCurrent) {
         classNames.push('ds_current');
         ariaCurrent = 'page';
     }

package/dist/components/SiteSearch/SiteSearch.jsx

@@ -42,7 +42,7 @@ const SiteSearch = function ({ action = '/search', autocompleteEndpoint, autocom
             hasAutocomplete ? 'js-autocomplete-input' : undefined
         ].join(' ')} id={id} name={name} placeholder={placeholder} required spellCheck="false" type="search"/>
 
-                    <Button_1.default type="submit" icon="Search" iconOnly>Search</Button_1.default>
+                    <Button_1.default type="submit" icon="Search" isIconOnly>Search</Button_1.default>
 
                     {hasAutocomplete && (<div id="autocomplete-suggestions" className="ds_autocomplete__suggestions">
                             <ol className="ds_autocomplete__suggestions-list" role="listbox" aria-labelledby="site-search-label"></ol>

package/dist/components/SkipLinks/SkipLinks.jsx

@@ -16,6 +16,6 @@ const SkipLinks = ({ children, mainContentId = 'main-content', mainLinkText = 'S
         </div>);
 };
 SkipLinks.displayName = 'SkipLinks';
-Link.displayName = 'SkipLink';
+Link.displayName = 'SkipLinks.Link';
 SkipLinks.Link = Link;
 exports.default = SkipLinks;

package/dist/components/SummaryList/SummaryList.jsx

@@ -74,10 +74,10 @@ const Item = ({ children, title }) => {
 const Value = ({ children }) => {
     return (<q className="ds_summary-list__answer">{children}</q>);
 };
-const SummaryList = ({ children, className, noBorder, ...props }) => {
+const SummaryList = ({ children, className, isBorderless, ...props }) => {
     return (<ol className={[
             'ds_summary-list',
-            noBorder && 'ds_summary-list--no-border',
+            isBorderless && 'ds_summary-list--no-border',
             className
         ].join(' ')} {...props}>
            {children}
@@ -89,5 +89,5 @@ SummaryList.Value = Value;
 SummaryList.displayName = 'SummaryList';
 SummaryList.Action.displayName = 'SummaryList.Action';
 Item.displayName = 'SummaryList.Item';
-Value.displayName = 'SumaryList.Value';
+Value.displayName = 'SummaryList.Value';
 exports.default = SummaryList;

package/dist/components/Tabs/Tabs.jsx

@@ -40,11 +40,10 @@ const react_1 = __importStar(require("react"));
 const WrapperTag_1 = __importDefault(require("../../common/WrapperTag"));
 // @ts-ignore
 const tabs_1 = __importDefault(require("@scottish-government/design-system/src/components/tabs/tabs"));
-const slugify_1 = __importDefault(require("../../utils/slugify"));
-const TabItem = ({ bordered, children, className, id, tabLabel, ...props }) => {
+const TabItem = ({ isBorderless, children, className, id, tabLabel, ...props }) => {
     return (<div className={[
             'ds_tabs__content',
-            bordered && 'ds_tabs__content--bordered',
+            !isBorderless && 'ds_tabs__content--bordered',
             className
         ].join(' ')} id={id} {...props}>
             {children}
@@ -55,7 +54,7 @@ const TabListItem = ({ children, href }) => {
             <a className="ds_tabs__tab-link" href={href}>{children}</a>
         </li>);
 };
-const Tabs = ({ baseId = 'tabs', bordered = true, children, className, headingLevel = 'h2', manual = false, title = 'Contents', ...props }) => {
+const Tabs = ({ baseId = 'tabs', children, className, headingLevel = 'h2', isBorderless, isManual = false, title = 'Contents', ...props }) => {
     const ref = (0, react_1.useRef)(null);
     const headingId = `${baseId}-heading`;
     (0, react_1.useEffect)(() => {
@@ -67,8 +66,8 @@ const Tabs = ({ baseId = 'tabs', bordered = true, children, className, headingLe
         const thisChild = child;
         if (thisChild && thisChild.type === TabItem) {
             return react_1.default.cloneElement(thisChild, {
-                bordered: bordered,
-                id: thisChild.props.id || `${baseId}-${(0, slugify_1.default)(thisChild.props.tabLabel)}`,
+                isBorderless: !!isBorderless,
+                id: thisChild.props.id || `${baseId}-${(0, react_1.useId)()}`,
             });
         }
     });
@@ -79,7 +78,7 @@ const Tabs = ({ baseId = 'tabs', bordered = true, children, className, headingLe
     });
     return (<div className={[
             'ds_tabs',
-            manual && 'ds_tabs--manual',
+            isManual && 'ds_tabs--manual',
             className
         ].join(' ')} ref={ref} {...props}>
             <WrapperTag_1.default id={headingId} className="ds_tabs__title" tagName={headingLevel}>

package/dist/components/TextInput/TextInput.jsx

@@ -10,11 +10,11 @@ const Button_1 = __importDefault(require("../Button/Button"));
 const ConditionalWrapper_1 = __importDefault(require("../../common/ConditionalWrapper"));
 const ErrorMessage_1 = __importDefault(require("../ErrorMessage/ErrorMessage"));
 const HintText_1 = __importDefault(require("../../common/HintText"));
-const TextInput = ({ buttonIcon, buttonText, children, className, countThreshold, width, currency, currencySymbol, errorMessage, hasButton = false, hasError, hintText, id, label, maxlength, name, onBlur, onChange, placeholder, type = 'text', value, ...props }) => {
+const TextInput = ({ buttonIcon, buttonText, children, className, countThreshold, width, isCurrency, currencySymbol, errorMessage, hasButton = false, hasError, hintText, id, label, maxlength, name, onBlur, onChange, placeholder, type = 'text', value, ...props }) => {
     const errorMessageId = `error-message-${id}`;
     const hintTextId = `hint-text-${id}`;
     const ref = (0, react_1.useRef)(null);
-    const inputWrapperClasses = `${hasButton ? 'ds_input__wrapper  ds_input__wrapper--has-icon' : ''} ${currency ? 'ds_currency-wrapper' : ''}`;
+    const inputWrapperClasses = `${hasButton ? 'ds_input__wrapper  ds_input__wrapper--has-icon' : ''} ${isCurrency ? 'ds_currency-wrapper' : ''}`;
     const describedbys = [];
     if (hintText) {
         describedbys.push(hintTextId);
@@ -42,15 +42,15 @@ const TextInput = ({ buttonIcon, buttonText, children, className, countThreshold
     return (<ConditionalWrapper_1.default condition={typeof maxlength !== 'undefined' && maxlength > 0} wrapper={(children) => <div ref={ref} data-threshold={countThreshold} data-module="ds-character-count">{children}</div>}>
             <label className="ds_label" htmlFor={id}>{label}</label>
             {hintText && <HintText_1.default id={hintTextId} text={hintText}/>}
-            {errorMessage && <ErrorMessage_1.default id={errorMessageId} text={errorMessage}/>}
-            <ConditionalWrapper_1.default condition={hasButton || typeof currency !== 'undefined' && currency} wrapper={(children) => <div className={inputWrapperClasses} data-symbol={currencySymbol}>{children}</div>}>
+            {errorMessage && <ErrorMessage_1.default id={errorMessageId}>{errorMessage}</ErrorMessage_1.default>}
+            <ConditionalWrapper_1.default condition={hasButton || typeof isCurrency !== 'undefined' && isCurrency} wrapper={(children) => <div className={inputWrapperClasses} data-symbol={currencySymbol}>{children}</div>}>
                 <input aria-describedby={describedbys.join(' ')} aria-invalid={hasError} className={[
             'ds_input',
             className,
             hasError ? 'ds_input--error' : '',
             width ? `ds_input--${width}` : '',
         ].join(' ')} defaultValue={value} id={id} maxLength={maxlength} name={name || id} onBlur={handleBlur} onChange={handleChange} placeholder={placeholder} type={type} {...props}/>
-                {hasButton && (buttonText || buttonIcon) && <Button_1.default iconOnly icon={buttonIcon}>{buttonText}</Button_1.default>}
+                {hasButton && (buttonText || buttonIcon) && <Button_1.default isIconOnly icon={buttonIcon}>{buttonText}</Button_1.default>}
             </ConditionalWrapper_1.default>
         </ConditionalWrapper_1.default>);
 };

package/dist/components/Textarea/Textarea.jsx

@@ -40,7 +40,7 @@ const Textarea = ({ className, countThreshold, errorMessage, hasError, hintText,
     return (<ConditionalWrapper_1.default condition={typeof maxlength !== 'undefined' && maxlength > 0} wrapper={(children) => <div ref={ref} data-threshold={countThreshold} data-module="ds-character-count">{children}</div>}>
             <label className="ds_label" htmlFor={id}>{label}</label>
             {hintText && <HintText_1.default id={hintTextId} text={hintText}/>}
-            {errorMessage && <ErrorMessage_1.default id={errorMessageId} text={errorMessage}/>}
+            {errorMessage && <ErrorMessage_1.default id={errorMessageId}>{errorMessage}</ErrorMessage_1.default>}
 
             <textarea aria-describedby={describedbys.join(' ')} aria-invalid={hasError} className={[
             'ds_input',