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

package/dist/components/Accordion/Accordion.jsx

@@ -41,9 +41,15 @@ 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, headingLevel = 'h3', id: rawId, open = false, title, ...props }) => {
+const AccordionHeadingLevelContext = (0, react_1.createContext)('h3');
+const AccordionItem = ({ children, className, id: rawId, open = false, title, ...props }) => {
     accordionItemCounter = accordionItemCounter + 1;
     const processedId = rawId || `accordion-item-${accordionItemCounter}`;
+    const DEFAULT_HEADING_LEVEL = 'h3';
+    let headingLevel = (0, react_1.useContext)(AccordionHeadingLevelContext);
+    if (!['h1', 'h2', 'h3', 'h4', 'h5', 'h6'].includes(headingLevel)) {
+        headingLevel = DEFAULT_HEADING_LEVEL;
+    }
     return (<div className={[
             'ds_accordion-item',
             className
@@ -56,7 +62,7 @@ const AccordionItem = ({ children, className, headingLevel = 'h3', id: rawId, op
                 <WrapperTag_1.default id={`panel-${processedId}-heading`} className="ds_accordion-item__title" tagName={headingLevel}>
                     {title}
                 </WrapperTag_1.default>
-                <span className='ds_accordion-item__indicator'/>
+                <span className="ds_accordion-item__indicator"/>
                 <label className="ds_accordion-item__label" htmlFor={`${processedId}-control`}>
                     <span className="visually-hidden">Show this section</span>
                 </label>
@@ -76,9 +82,6 @@ const Accordion = ({ children, className, headingLevel = 'h3', hideOpenAll, ...p
     if (!children) {
         hideOpenAll = true;
     }
-    function processChild(child) {
-        return react_1.default.cloneElement(child, { headingLevel: headingLevel });
-    }
     return (<div className={[
             'ds_accordion',
             className
@@ -93,10 +96,12 @@ const Accordion = ({ children, className, headingLevel = 'h3', hideOpenAll, ...p
                     <span className="visually-hidden">sections</span>
                 </button>)}
 
-            {react_1.Children.map(children, child => processChild(child))}
+            <AccordionHeadingLevelContext value={headingLevel}>
+                {children}
+            </AccordionHeadingLevelContext>
         </div>);
 };
 Accordion.displayName = 'Accordion';
-AccordionItem.displayName = 'AccordionItem';
+AccordionItem.displayName = 'Accordion.Item';
 Accordion.Item = AccordionItem;
 exports.default = Accordion;

package/dist/components/Breadcrumbs/Breadcrumbs.jsx

@@ -1,28 +1,33 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-const Breadcrumb = ({ hidden, href, title }) => {
+const BreadcrumbItem = ({ children, isHidden, href, linkComponent, ...props }) => {
+    const BREADCRUMB_LINK_CLASSNAME = 'ds_breadcrumbs__link';
+    function processChildren(children) {
+        if (linkComponent) {
+            return linkComponent({ className: BREADCRUMB_LINK_CLASSNAME, href, children });
+        }
+        else if (href) {
+            return <a href={href} className={BREADCRUMB_LINK_CLASSNAME}>{children}</a>;
+        }
+        else {
+            return children;
+        }
+    }
     return (<li className={[
             'ds_breadcrumbs__item',
-            hidden && 'visually-hidden'
-        ].join(' ')}>
-
-            {href ? (<a className="ds_breadcrumbs__link" href={href}>
-                {title}
-            </a>) : (title)}
+            isHidden && 'visually-hidden'
+        ].join(' ')} {...props}>
+            {processChildren(children)}
         </li>);
 };
-/**
- * @param {boolean} hideLastItem
- * @param {Array} items
- * @param {Object} props - Properties for the element
- * @returns {JSX.Element} - The element
- */
-const Breadcrumbs = ({ hideLastItem, items, ...props }) => {
+const Breadcrumbs = ({ children, ...props }) => {
     return (<nav aria-label="Breadcrumb" {...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}/>))}
+                {children}
             </ol>
         </nav>);
 };
 Breadcrumbs.displayName = 'Breadcrumbs';
+BreadcrumbItem.displayName = 'Breadcrumbs.Item';
+Breadcrumbs.Item = BreadcrumbItem;
 exports.default = Breadcrumbs;

package/dist/components/Checkbox/Checkbox.jsx

@@ -3,10 +3,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-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 context_1 = require("../../utils/context");
 const HintText_1 = __importDefault(require("../../common/HintText"));
 const Checkbox = ({ checked, hintText, id, exclusive, label, name, onBlur, onChange, small }) => {
     const hintTextId = `hint-text-${id}`;
@@ -21,6 +19,7 @@ const Checkbox = ({ checked, hintText, id, exclusive, label, name, onBlur, onCha
             onChange(event);
         }
     }
+    small = small || (0, react_1.useContext)(context_1.CheckboxRadioContext).small;
     return (<>
             {exclusive && <p className="ds_checkbox-separator">or</p>}
             <div className={[
@@ -34,29 +33,5 @@ const Checkbox = ({ checked, hintText, id, exclusive, label, name, onBlur, onCha
             </div>
         </>);
 };
-exports.Checkbox = Checkbox;
-/**
- * @param {Object} props - Properties for the element
- * @param {Array} items - Checkboxes
- * @param {boolean} small - Use the small display style for all checkboxes
- * @returns {JSX.Element} - The element
- */
-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',
-            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>);
-};
-exports.CheckboxGroup = CheckboxGroup;
-exports.Checkbox.displayName = 'Checkbox';
-exports.CheckboxGroup.displayName = 'CheckboxGroup';
-exports.default = exports.CheckboxGroup;
+Checkbox.displayName = 'Checkbox';
+exports.default = Checkbox;

package/dist/components/{aspect-box/aspect-box.jsx → Checkbox/CheckboxGroup.jsx}

@@ -36,44 +36,28 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.CheckboxGroup = void 0;
 const react_1 = __importStar(require("react"));
+const context_1 = require("../../utils/context");
 // @ts-ignore
-const aspect_box_fallback_1 = __importDefault(require("@scottish-government/design-system/src/components/aspect-box/aspect-box-fallback"));
-const AspectBox = ({ children, className, ratio, ...props }) => {
+const checkboxes_1 = __importDefault(require("@scottish-government/design-system/src/forms/checkbox/checkboxes"));
+const CheckboxGroup = ({ children, className, small = false, ...props }) => {
     const ref = (0, react_1.useRef)(null);
     (0, react_1.useEffect)(() => {
         if (ref.current) {
-            new aspect_box_fallback_1.default(ref.current).init();
+            new checkboxes_1.default(ref.current).init();
         }
     }, [ref]);
-    function processChild(child) {
-        if (['img', 'svg', 'picture'].includes(child.type)) {
-            return react_1.default.cloneElement(child, { className: 'ds_aspect-box__inner' });
-        }
-    }
-    let ratioClassName;
-    switch (ratio) {
-        case '1:1':
-        case 'square':
-            ratioClassName = 'ds_aspect-box--square';
-            break;
-        case '4:3':
-            ratioClassName = 'ds_aspect-box--43';
-            break;
-        case '21:9':
-            ratioClassName = 'ds_aspect-box--219';
-            break;
-        default:
-            ratioClassName = '';
-            break;
-    }
     return (<div className={[
-            'ds_aspect-box',
-            ratioClassName,
+            'ds_checkboxes',
+            'ds_field-group',
             className
-        ].join(' ')} ref={ref} {...props}>
-            {react_1.Children.map(children, child => processChild(child))}
+        ].join(' ')} data-module="ds-checkboxes" ref={ref} {...props}>
+            <context_1.CheckboxRadioContext value={{ small, name: '' }}>
+                {children}
+            </context_1.CheckboxRadioContext>
         </div>);
 };
-AspectBox.displayName = 'AspectBox';
-exports.default = AspectBox;
+exports.CheckboxGroup = CheckboxGroup;
+exports.CheckboxGroup.displayName = 'CheckboxGroup';
+exports.default = exports.CheckboxGroup;

package/dist/components/ContentsNav/ContentsNav.jsx

@@ -3,31 +3,42 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Link = void 0;
-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">
-            <WrapperTag_1.default tagName={tagName} className={[
-            'ds_contents-nav__link',
-            current && 'ds_current'
-        ].join(' ')} href={!current ? href : undefined}>
-                {title}
-            </WrapperTag_1.default>
+const react_1 = __importDefault(require("react"));
+const ContentsNavItem = ({ children, current, href, linkComponent }) => {
+    const classNames = ['ds_contents-nav__link'];
+    let ariaCurrent;
+    if (current) {
+        classNames.push('ds_current');
+        ariaCurrent = 'page';
+    }
+    function processChildren(children) {
+        if (linkComponent) {
+            return linkComponent({ className: classNames.join(' '), href, children });
+        }
+        else if (href) {
+            return <a href={href} aria-current={ariaCurrent ? ariaCurrent : undefined} className={classNames.join(' ')}>{children}</a>;
+        }
+        else {
+            return <span aria-current={ariaCurrent ? ariaCurrent : undefined} className={classNames.join(' ')}>{children}</span>;
+        }
+    }
+    return (<li className="ds_contents-nav__item">
+            {processChildren(children)}
         </li>);
 };
-exports.Link = Link;
-const ContentsNav = function ({ className, items, label = 'Pages in this section', title = 'Contents', ...props }) {
-    return (<nav aria-label={label} className={[
+const ContentsNav = ({ ariaLabel = 'Pages in this section', children, className, title = 'Contents', ...props }) => {
+    return (<nav aria-label={ariaLabel} 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}/>))}
+                {children}
             </ul>
         </nav>);
 };
 ContentsNav.displayName = 'ContentsNav';
+ContentsNavItem.displayName = 'ContentsNav.Item';
+ContentsNav.Item = ContentsNavItem;
 exports.default = ContentsNav;

package/dist/components/CookieBanner/CookieBanner.jsx

@@ -18,4 +18,5 @@ const CookieBanner = ({ children, className, title, ...props }) => {
 };
 CookieBanner.displayName = 'CookieBanner';
 CookieBanner.Buttons = AbstractNotificationBanner_1.default.Buttons;
+CookieBanner.Buttons.displayName = 'CookieBanner.Buttons';
 exports.default = CookieBanner;

package/dist/components/DatePicker/DatePicker.jsx

@@ -8,7 +8,7 @@ const react_1 = require("react");
 const date_picker_1 = __importDefault(require("@scottish-government/design-system/src/components/date-picker/date-picker"));
 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 DatePicker = ({ className, dateSelectCallback, disabledDates, errorMessage, hasError, 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)(() => {
         if (ref.current) {
@@ -37,17 +37,17 @@ const DatePicker = ({ className, dateSelectCallback, disabledDates, error, error
                     <legend>{label}</legend>
                     {errorMessage && <ErrorMessage_1.default text={errorMessage}/>}
                     <div>
-                        <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"/>
+                        <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>
 
                     <div>
-                        <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"/>
+                        <TextInput_1.default className="js-datepicker-month" hasError={!!hasError} id={id + "-month"} hintText={hintText} label="Month" name={name + "-month"} onBlur={handleBlur} onChange={handleChange} value={value?.split('/')[1]} width="fixed-2"/>
                     </div>
 
                     <div>
-                        <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"/>
+                        <TextInput_1.default className="js-datepicker-year" hasError={!!hasError} id={id + "-year"} hintText={hintText} label="Year" name={name + "-year"} onBlur={handleBlur} onChange={handleChange} value={value?.split('/')[2]} width="fixed-4"/>
                     </div>
-                </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}/>))}
+                </fieldset>) : (<TextInput_1.default hasError={!!hasError} 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/ErrorSummary/ErrorSummary.jsx

@@ -1,27 +1,37 @@
 "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 Error = ({ fragmentId, title }) => {
+const react_1 = require("react");
+const ErrorSummaryItem = ({ children, fragmentId, linkComponent }) => {
+    const HREF = '#' + fragmentId;
+    function processChildren(children) {
+        if (linkComponent) {
+            return linkComponent({ className: '', href: HREF, children });
+        }
+        else if (fragmentId) {
+            return <a href={HREF}>{children}</a>;
+        }
+        else {
+            return children;
+        }
+    }
     return (<li>
-            <ConditionalWrapper_1.default condition={!!fragmentId} wrapper={() => <a href={`#${fragmentId}`}>{title}</a>}>{title}</ConditionalWrapper_1.default>
+            {processChildren(children)}
         </li>);
 };
-const ErrorSummary = ({ className, errors, title = 'There is a problem', ...props }) => {
-    return (<>
-            {errors && errors.length && (<div className={[
-                'ds_error-summary',
-                className
-            ].join(' ')} aria-labelledby="error-summary-title" role="alert" {...props}>
-                    <h2 className="ds_error-summary__title" id="error-summary-title">{title}</h2>
+const ErrorSummary = ({ children, className, title = 'There is a problem', ...props }) => {
+    const summaryTitleId = (0, react_1.useId)();
+    return (<div className={[
+            'ds_error-summary',
+            className
+        ].join(' ')} aria-labelledby={summaryTitleId} role="alert" {...props}>
+            <h2 className="ds_error-summary__title" id={summaryTitleId}>{title}</h2>
 
-                    <ul className="ds_error-summary__list">
-                        {errors && errors.map((error, index) => (<Error fragmentId={error.fragmentId} title={error.title} key={'error' + index}/>))}
-                    </ul>
-                </div>)}
-        </>);
+            <ul className="ds_error-summary__list">
+                {children}
+            </ul>
+        </div>);
 };
 ErrorSummary.displayName = 'ErrorSummary';
+ErrorSummaryItem.displayName = 'ErrorSummary.Item';
+ErrorSummary.Item = ErrorSummaryItem;
 exports.default = ErrorSummary;

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, icon, iconColour, iconInverse, title, ...props }) => {
+const NotificationBanner = ({ children, className, close, hasColourIcon, hasInverseIcon, icon, 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, icon, iconColour, icon
     return (<AbstractNotificationBanner_1.default className={[
             'ds_reversed',
             className
-        ].join(' ')} close={close} icon={icon ? "PriorityHigh" : undefined} iconColour={iconColour} iconInverse={iconInverse} ref={ref} title="Information" {...props}>
+        ].join(' ')} close={close} icon={icon ? "PriorityHigh" : undefined} hasColourIcon={hasColourIcon} hasInverseIcon={hasInverseIcon} ref={ref} title="Information" {...props}>
             {children}
         </AbstractNotificationBanner_1.default>);
 };

package/dist/components/Pagination/Pagination.jsx

@@ -5,19 +5,37 @@ 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, current = false, href, onClick, text }) => {
+const Page = ({ ariaLabel, children, className, current = false, href, linkComponent, onClick }) => {
     function handleClick(event) {
         if (typeof onClick === 'function') {
             onClick(event);
         }
     }
-    return (<li className="ds_pagination__item">
-            <a aria-label={ariaLabel} className={[
+    function processChildren(children) {
+        const classNames = [
             'ds_pagination__link',
+            className,
             current ? 'ds_current' : undefined
-        ].join(' ')} href={href} aria-current={current ? "page" : undefined} onClick={handleClick}>
-                <span className="ds_pagination__link-label">{text}</span>
-            </a>
+        ].join(' ');
+        const linkProps = {
+            'aria-label': ariaLabel,
+            href: href,
+            onClick: handleClick
+        };
+        if (current) {
+            linkProps['aria-current'] = 'page';
+        }
+        if (linkComponent) {
+            return linkComponent({ className: classNames, children: children, ...linkProps });
+        }
+        else if (href) {
+            return (<a href={href} className={classNames} {...linkProps}>
+                    {children}
+                </a>);
+        }
+    }
+    return (<li className="ds_pagination__item">
+            {processChildren(children)}
         </li>);
 };
 exports.Page = Page;
@@ -27,7 +45,7 @@ const Ellipsis = () => {
         </li>);
 };
 exports.Ellipsis = Ellipsis;
-const Pagination = ({ ariaLabel = 'Pages', className, onClick, padding = 1, page = 1, pattern = '/search?page=$1', totalPages, ...props }) => {
+const Pagination = ({ ariaLabel = 'Pages', className, onClick, padding = 1, page = 1, pattern = '/search?page=$1', totalPages, linkComponent, ...props }) => {
     padding = Number(padding);
     page = Number(page);
     const minToShow = padding + 2;
@@ -64,31 +82,33 @@ const Pagination = ({ ariaLabel = 'Pages', className, onClick, padding = 1, page
             className
         ].join(' ')} aria-label={ariaLabel} {...props}>
             <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"/>
-                            <span className="ds_pagination__link-label">Previous</span>
-                        </a>
-                    </li>)}
+                {page > 1 && (<exports.Page ariaLabel="Previous page" className="ds_pagination__link--text  ds_pagination__link--icon" data-search="pagination-previous" href={pattern.replace('$1', String(page - 1))} onClick={onClick}>
+                        <Icon_1.default icon="ChevronLeft"/>
+                        <span className="ds_pagination__link-label">Previous</span>
+                    </exports.Page>)}
 
                 {includeFirst && (<>
-                        <exports.Page ariaLabel="Page 1" href={pattern.replace('$1', String(1))} onClick={onClick} text="1"/>
+                        <exports.Page ariaLabel="Page 1" href={pattern.replace('$1', String(1))} onClick={onClick} linkComponent={linkComponent}>
+                            <span className="ds_pagination__link-label">1</span>
+                        </exports.Page>
                         <exports.Ellipsis />
                     </>)}
 
-                {pages && pages.map((item, index) => (<exports.Page ariaLabel={`Page ${item}`} current={item === page} href={pattern.replace('$1', String(item))} key={`pagination${index}`} onClick={onClick} pattern={pattern} text={item.toString()}/>))}
+                {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}>
+                        <span className="ds_pagination__link-label">{item.toString()}</span>
+                    </exports.Page>))}
 
                 {includeLast && (<>
                         <exports.Ellipsis />
-                        <exports.Page ariaLabel={`Page ${totalPages}`} href={pattern.replace('$1', String(totalPages))} onClick={onClick} pattern={pattern} text={totalPages.toString()}/>
+                        <exports.Page ariaLabel={`Page ${totalPages}`} href={pattern.replace('$1', String(totalPages))} linkComponent={linkComponent} onClick={onClick} pattern={pattern}>
+                            <span className="ds_pagination__link-label">{totalPages.toString()}</span>
+                        </exports.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"/>
-                        </a>
-                    </li>)}
+                {page < totalPages && (<exports.Page ariaLabel="Next page" href={pattern.replace('$1', String(page + 1))} className="ds_pagination__link  ds_pagination__link--text  ds_pagination__link--icon" onClick={onClick}>
+                        <span className="ds_pagination__link-label">Next</span>
+                        <Icon_1.default icon="ChevronRight"/>
+                    </exports.Page>)}
 
             </ul>
         </nav>);

package/dist/components/PhaseBanner/PhaseBanner.jsx

@@ -4,16 +4,16 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const Tag_1 = __importDefault(require("../Tag/Tag"));
-const PhaseBanner = ({ children, className, content, phaseName, ...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"/>}
+                    {phaseName && <Tag_1.default className="ds_phase-banner__tag">{phaseName}</Tag_1.default>}
                     <span className="ds_phase-banner__text">
-                        {content ? content : children || "This is a new service"}
+                        {children || "This is a new service"}
                     </span>
                 </p>
             </div>

package/dist/components/Question/Question.jsx

@@ -6,15 +6,15 @@ Object.defineProperty(exports, "__esModule", { value: true });
 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 }) {
+const Question = function ({ children, className, errorMessage, hasError, hintText, legend, tagName = 'div', ...props }) {
     return (<WrapperTag_1.default tagName={tagName} className={[
             'ds_question',
-            error && 'ds_question--error',
+            hasError && 'ds_question--error',
             className
         ].join(' ')} {...props}>
             {legend && <legend>{legend}</legend>}
             {hintText && <HintText_1.default text={hintText}/>}
-            {error && errorMessage && <ErrorMessage_1.default text={errorMessage}/>}
+            {hasError && errorMessage && <ErrorMessage_1.default text={errorMessage}/>}
             {children}
         </WrapperTag_1.default>);
 };

package/dist/components/RadioButton/RadioButton.jsx

@@ -3,9 +3,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Radio = void 0;
+const react_1 = require("react");
 const HintText_1 = __importDefault(require("../../common/HintText"));
-const Radio = ({ checked, hintText, id, label, name, onBlur, onChange, small }) => {
+const context_1 = require("../../utils/context");
+const RadioButton = ({ checked, hintText, id, label, name, onBlur, onChange, small }) => {
     const hintTextId = `hint-text-${id}`;
     function handleBlur(event) {
         if (typeof onBlur === 'function') {
@@ -17,6 +18,8 @@ const Radio = ({ checked, hintText, id, label, name, onBlur, onChange, small })
             onChange(event);
         }
     }
+    small = small || (0, react_1.useContext)(context_1.CheckboxRadioContext).small;
+    name = name || (0, react_1.useContext)(context_1.CheckboxRadioContext).name;
     return (<div className={[
             'ds_radio',
             small && 'ds_radio--small'
@@ -26,18 +29,5 @@ const Radio = ({ checked, hintText, id, label, name, onBlur, onChange, small })
             {hintText && <HintText_1.default id={hintTextId} text={hintText}/>}
         </div>);
 };
-exports.Radio = Radio;
-const RadioGroup = ({ className, inline, items, name, small, ...props }) => {
-    return (<div className={[
-            'ds_radios',
-            'ds_field-group',
-            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}/>))}
-        </div>);
-};
-exports.Radio.displayName = 'Radio';
-RadioGroup.displayName = 'RadioGroup';
-exports.default = RadioGroup;
+RadioButton.displayName = 'RadioButton';
+exports.default = RadioButton;

package/dist/components/RadioButton/RadioGroup.jsx

@@ -0,0 +1,21 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const context_1 = require("../../utils/context");
+const RadioGroup = ({ children, className, inline, name, small = false, ...props }) => {
+    return (<div className={[
+            'ds_radios',
+            'ds_field-group',
+            inline && 'ds_field-group--inline',
+            className
+        ].join(' ')} {...props}>
+            <context_1.CheckboxRadioContext value={{ small, name }}>
+                {children}
+            </context_1.CheckboxRadioContext>
+        </div>);
+};
+RadioGroup.displayName = 'RadioGroup';
+exports.default = RadioGroup;

package/dist/components/Select/Select.jsx

@@ -5,10 +5,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const ErrorMessage_1 = __importDefault(require("../ErrorMessage/ErrorMessage"));
 const HintText_1 = __importDefault(require("../../common/HintText"));
-const Option = function ({ text, value }) {
-    return (<option value={value}>{text}</option>);
-};
-const Select = function ({ className, defaultValue, error, errorMessage, hintText, id, label, name, onBlur, onChange, options, placeholder, width, ...props }) {
+const Select = function ({ children, className, defaultValue, errorMessage, hasError, hintText, id, label, name, onBlur, onChange, placeholder, width, ...props }) {
     const errorMessageId = `error-message-${id}`;
     const hintTextId = `hint-text-${id}`;
     const describedbys = [];
@@ -36,13 +33,13 @@ const Select = function ({ className, defaultValue, error, errorMessage, hintTex
             {errorMessage && <ErrorMessage_1.default id={errorMessageId} text={errorMessage}/>}
             <div className={[
             "ds_select-wrapper",
-            error && 'ds_input--error',
+            hasError && 'ds_input--error',
             width && `ds_input--${width}`,
             className
         ].join(' ')} {...props}>
-                <select aria-describedby={describedbys.join(' ')} aria-invalid={error} className="ds_select" defaultValue={defaultValue} id={id} name={name || id} onBlur={handleBlur} onChange={handleChange}>
+                <select aria-describedby={describedbys.join(' ')} aria-invalid={hasError} className="ds_select" defaultValue={defaultValue} id={id} name={name || id} onBlur={handleBlur} onChange={handleChange}>
                     <option value="">{placeholder}</option>
-                    {options && options.map((option, index) => (<Option value={option.value} text={option.text} key={`option-${index}`}/>))}
+                    {children}
                 </select>
                 <span className="ds_select-arrow" aria-hidden="true"></span>
             </div>