@scottish-government/designsystem-react 0.10.2 → 0.11.0

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

@@ -2,13 +2,14 @@ declare namespace SGDS.Component {
     namespace Accordion {
         interface Item extends React.AllHTMLAttributes<HTMLElement> {
             id?: string,
+            heading: string | React.ReactNode
             isOpen?: boolean,
-            title: string
         }
     }
 
     interface Accordion extends React.AllHTMLAttributes<HTMLElement> {
         headingLevel?: SGDS.HeadingLevel,
-        hideOpenAll?: boolean
+        hideOpenAll?: boolean,
+        isSmall?: boolean
     }
 }

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

@@ -0,0 +1,5 @@
+declare namespace SGDS.Component {
+    interface ButtonGroup extends React.AllHTMLAttributes<HTMLElement> {
+        isInline?: boolean
+    }
+}

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

@@ -2,13 +2,13 @@ declare namespace SGDS.Component {
     namespace RadioButton {
         interface Group extends React.AllHTMLAttributes<HTMLElement> {
             isInline?: boolean,
-            name: string,
+            name?: string,
             isSmall?: boolean
         }
     }
 
     interface RadioButton extends CheckboxRadioBase<HTMLInputElement> {
         id: string,
-        name: string
+        name?: string
     }
 }

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

@@ -0,0 +1,18 @@
+declare namespace SGDS.Component {
+    namespace SearchFacets {
+        interface Group extends React.AllHTMLAttributes<HTMLElement> {
+            joinContent?: string,
+            title: string
+        }
+
+        interface Item extends React.AllHTMLAttributes<HTMLElement> {
+            accessibleName?: string
+            joinContent?: string
+            title: string
+        }
+    }
+
+    interface SearchFacets extends React.AllHTMLAttributes<HTMLElement> {
+        headingId?: string
+    }
+}

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

@@ -0,0 +1,14 @@
+declare namespace SGDS.Component {
+    namespace SearchFilters {
+        interface Panel extends  React.AllHTMLAttributes<HTMLElement> {
+            activeFilterCount?: number,
+            heading: string | React.ReactNode
+            isScrollable?: boolean,
+            legend: string,
+        }
+    }
+
+    interface SearchFilters extends React.AllHTMLAttributes<HTMLElement> {
+        searchResultsContainerId?: string
+    }
+}

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

@@ -0,0 +1,30 @@
+declare namespace SGDS.Component {
+    namespace SearchResult {
+        interface Content extends React.AllHTMLAttributes<HTMLElement> {
+
+        }
+
+        interface Context extends React.AllHTMLAttributes<HTMLDListElement> {
+            title: string
+        }
+
+        interface ContextItem extends React.AllHTMLAttributes<HTMLElement> {
+
+        }
+
+        interface Media extends React.AllHTMLAttributes<HTMLElement> {
+
+        }
+
+        interface Meta extends React.AllHTMLAttributes<HTMLElement> {
+        }
+    }
+
+    interface SearchResult extends React.AllHTMLAttributes<HTMLElement> {
+        href: string,
+        isPromoted?: boolean,
+        linkComponent?: SGDS.LinkComponent,
+        promotedTitle?: string,
+        title: string
+    }
+}

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

@@ -0,0 +1,9 @@
+declare namespace SGDS.Component {
+    interface SearchSort extends React.AllHTMLAttributes<HTMLElement> {
+        children: React.ReactNode;
+        className?: string;
+        id?: string;
+        label?: string;
+        onApply?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+    }
+}

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

@@ -13,6 +13,6 @@ declare namespace SGDS.Component {
     }
 
     interface SideNavigation extends React.AllHTMLAttributes<HTMLElement> {
-
+        ariaLabel?: string
     }
 }

package/CHANGELOG.md

@@ -6,13 +6,37 @@ Changes are grouped under the labels: `Added`, `Changed`, `Deprecated`, `Fixed`,
 `Removed` and `Security`.
 
 ---
+## [0.11.0] - 2025-10-22
 
-## [0.9.0] - 2025-09-17
-## Added
+### Added
+- SearchResult, SearchFilters, SearchFacets, SearchSort components
+- ButtonGroup component
+### Changed
+- Accordion.Item now uses a new `heading` prop for its heading content, which allows both string and ReactNode
+- add "ariaLabel" property to SideNavigation to make the aria label editable
+### Deprecated
+- Accordion.Item `title` prop replaced with `heading`
+### Fixed
+- decorators added to many storybook components for correct rendering
+
+## [0.10.2] - 2025-09-18
+### Fixed
+- correction to handling of subcomponents in Storybook
+
+## [0.10.1] - 2025-09-18
+### Fixed
+- correction to white space on PageMetadata
+
+## [0.10.0] - 2025-09-18
+### Added
 - Storybook now added for all components. `npm run storybook`
 - CategoryList component
 - CategoryItem component
-## Changed
+- useTracking hook, to add DS tracking attributes
+### Changed
+- Accordion uses useContext instead of cloneElement to pass props (headingLevel) to its children
+- CheckboxGroup uses useContext instead of cloneElement to pass props (isSmall) to its children
+- RadioGroup use useContext instead of cloneElement to pass props (isSmall, name) to its children
 - 'text' prop removed from ErrorMessage. Use children instead.
 - Many boolean prop names updated for clarity/consistency
   - AbstractNotificationBanner (used by NotificationBanner and CookieBanner): close -> isDismissable
@@ -36,13 +60,15 @@ Changes are grouped under the labels: `Added`, `Changed`, `Deprecated`, `Fixed`,
   - Tabs: bordered -> isBorderless (logic inverted), manual -> isManual
   - TextInput: currency -> isCurrency
 
+## [0.9.0] - skipped due to user error with the CI script
+
 ## [0.8.0] - 2025-08-18
-## Added
+### Added
 - ActionLink component, centralising behaviour used in actions in both SummaryCard and SummaryList
 - SiteFooter component
 - Add support for the SkipLinks 'static' variant
 
-## Changed
+### Changed
 
 Two headline changes:
 

package/dist/components/Accordion/Accordion.jsx

@@ -42,10 +42,14 @@ const WrapperTag_1 = __importDefault(require("../../common/WrapperTag"));
 const accordion_1 = __importDefault(require("@scottish-government/design-system/src/components/accordion/accordion"));
 let accordionItemCounter = 0;
 const AccordionHeadingLevelContext = (0, react_1.createContext)('h3');
-const AccordionItem = ({ children, className, id: rawId, isOpen = false, title, ...props }) => {
+const AccordionItem = ({ children, className, id: rawId, isOpen = false, heading, title, ...props }) => {
     accordionItemCounter = accordionItemCounter + 1;
     const processedId = rawId || `accordion-item-${(0, react_1.useId)()}`;
     let headingLevel = (0, react_1.useContext)(AccordionHeadingLevelContext);
+    if (title) {
+        console.warn('Warning: Using the `title` prop for heading text on an Accordion.Item is deprecated and will be removed in a future release. Please use the `heading` prop instead.');
+        heading = heading || title;
+    }
     return (<div className={[
             'ds_accordion-item',
             className
@@ -56,7 +60,7 @@ const AccordionItem = ({ children, className, id: rawId, isOpen = false, title,
         ].join(' ')} defaultChecked={isOpen} id={`${processedId}-control`} type="checkbox"/>
             <div className="ds_accordion-item__header">
                 <WrapperTag_1.default id={`panel-${processedId}-heading`} className="ds_accordion-item__title" tagName={headingLevel}>
-                    {title}
+                    {heading}
                 </WrapperTag_1.default>
                 <span className="ds_accordion-item__indicator"/>
                 <label className="ds_accordion-item__label" htmlFor={`${processedId}-control`}>
@@ -68,7 +72,7 @@ const AccordionItem = ({ children, className, id: rawId, isOpen = false, title,
             </div>
         </div>);
 };
-const Accordion = ({ children, className, headingLevel = 'h3', hideOpenAll, ...props }) => {
+const Accordion = ({ children, className, headingLevel = 'h3', hideOpenAll, isSmall, ...props }) => {
     const ref = (0, react_1.useRef)(null);
     (0, react_1.useEffect)(() => {
         if (ref.current) {
@@ -80,6 +84,7 @@ const Accordion = ({ children, className, headingLevel = 'h3', hideOpenAll, ...p
     }
     return (<div className={[
             'ds_accordion',
+            isSmall ? 'ds_accordion--small' : '',
             className
         ].join(' ')} ref={ref} {...props}>
             {!hideOpenAll && (<button className={[

package/dist/components/ButtonGroup/ButtonGroup.jsx

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const ButtonGroup = ({ children, className, isInline, ...props }) => {
+    return (<div className={[
+            "ds_button-group",
+            isInline ? "ds_button-group--inline" : undefined,
+            className
+        ].join(' ')} {...props}>
+            {children}
+        </div>);
+};
+ButtonGroup.displayName = 'ButtonGroup';
+exports.default = ButtonGroup;

package/dist/components/RadioButton/RadioGroup.jsx

@@ -5,7 +5,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 const context_1 = require("../../utils/context");
-const RadioGroup = ({ children, className, isInline, isSmall, name, ...props }) => {
+const RadioGroup = ({ children, className, isInline, isSmall, name = '', ...props }) => {
     return (<div className={[
             'ds_radios',
             'ds_field-group',

package/dist/components/SearchFacets/SearchFacets.jsx

@@ -0,0 +1,101 @@
+"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 Icon_1 = __importDefault(require("../../common/Icon"));
+const icons_1 = require("../../../src/images/icons");
+const FacetsItem = ({ accessibleName, joinContent, onClick, title, ...props }) => {
+    accessibleName = accessibleName ? accessibleName : title;
+    return (<dd className="ds_facet-wrapper" {...props}>
+            {joinContent &&
+            <span aria-hidden="true">{joinContent}</span>}
+            <span className="ds_facet">
+                {title}
+                <button type="button" onClick={onClick} aria-label={`Remove '${accessibleName}' filter`} className="ds_facet__button">
+                    <Icon_1.default className="ds_facet__button-icon" aria-hidden="true" role="img" icon="Cancel"/>
+                </button>
+            </span>
+        </dd>);
+};
+const FacetsGroup = ({ children, joinContent = 'or', title, ...props }) => {
+    return (<div className="ds_facet-group" {...props}>
+            <dt className="ds_facet__group-title">
+                {title.trim()}:
+            </dt>
+            {react_1.Children.map(children, (child, index) => {
+            const thisChild = child;
+            return react_1.default.cloneElement(thisChild, { joinContent: index > 0 ? joinContent : undefined, key: 'facet' + index });
+        })}
+        </div>);
+};
+const Facets = ({ children, className, ...props }) => {
+    let facetCount = 0;
+    function processChild(item) {
+        if (item.type.displayName === 'Facets.Item') {
+            facetCount = facetCount + 1;
+        }
+        else if (item.type.displayName === 'Facets.Group') {
+            react_1.Children.forEach(item.props.children, child => {
+                processChild(child);
+            });
+        }
+    }
+    react_1.Children.forEach(children, child => {
+        processChild(child);
+    });
+    return (<div className={[
+            "ds_facets",
+            className
+        ].join(' ')} {...props}>
+            <p className="visually-hidden">There {facetCount === 1 ? 'is' : 'are'} {facetCount} search {facetCount === 1 ? 'filter' : 'filters'} applied</p>
+            <dl className="ds_facets__list">
+                {children}
+            </dl>
+            {facetCount > 0 &&
+            <button className="ds_button  ds_button--secondary  ds_button--has-icon  ds_facets__clear-button" type="button">
+                    Clear all filters
+                    <icons_1.Cancel className="ds_facet__button-icon"/>
+                </button>}
+        </div>);
+};
+Facets.displayName = 'Facets';
+FacetsItem.displayName = 'Facets.Item';
+FacetsGroup.displayName = 'Facets.Group';
+Facets.Item = FacetsItem;
+Facets.Group = FacetsGroup;
+exports.default = Facets;

package/dist/components/SearchFilters/SearchFilters.jsx

@@ -0,0 +1,63 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FilterPanel = void 0;
+const Accordion_1 = __importDefault(require("../Accordion/Accordion"));
+const Button_1 = __importDefault(require("../Button/Button"));
+const SkipLinks_1 = __importDefault(require("../SkipLinks/SkipLinks"));
+const ConditionalWrapper_1 = __importDefault(require("../../common/ConditionalWrapper"));
+const CheckboxGroup_1 = __importDefault(require("../Checkbox/CheckboxGroup"));
+const FilterPanel = ({ activeFilterCount = 0, children, isScrollable = false, legend, heading = 'Filter', ...props }) => {
+    const headingWithCount = <>
+        {heading}
+        {activeFilterCount > 0 && <div className="ds_search-filters__filter-count">({activeFilterCount} selected)</div>}
+    </>;
+    return (<Accordion_1.default.Item heading={headingWithCount} {...props}>
+            <fieldset>
+                <legend className="visually-hidden">{legend}</legend>
+
+                <ConditionalWrapper_1.default condition={isScrollable} wrapper={(children) => <div className="ds_search-filters__scrollable">{children}</div>}>
+                    {children}
+                </ConditionalWrapper_1.default>
+            </fieldset>
+        </Accordion_1.default.Item>);
+};
+exports.FilterPanel = FilterPanel;
+const FilterCheckboxGroup = ({ children, ...props }) => {
+    return (<CheckboxGroup_1.default className="ds_search-filters__checkboxes" isSmall {...props}>
+            {children}
+        </CheckboxGroup_1.default>);
+};
+const Filters = ({ children, searchResultsContainerId = 'search-results', ...props }) => {
+    return (<div className="ds_search-filters" {...props}>
+            <div className="ds_details  ds_no-margin" data-module="ds-details">
+                <input id="filters-toggle" type="checkbox" className="ds_details__toggle  visually-hidden"/>
+                <label htmlFor="filters-toggle" className="ds_details__summary">
+                    Search filters
+                </label>
+
+                <SkipLinks_1.default isStatic>
+                    <SkipLinks_1.default.Link fragmentId={searchResultsContainerId}>Skip to results</SkipLinks_1.default.Link>
+                </SkipLinks_1.default>
+
+                <div className="ds_details__text">
+                    <form id="filters">
+                        <h2 className="ds_search-filters__title  ds_h4">Filter by</h2>
+
+                        <Accordion_1.default className="ds_!_margin-top--0" isSmall hideOpenAll>
+                            {children}
+                        </Accordion_1.default>
+
+                        <Button_1.default isSmall width="max" className="ds_no-margin">Apply filter</Button_1.default>
+                    </form>
+                </div>
+            </div>
+        </div>);
+};
+Filters.Panel = exports.FilterPanel;
+Filters.CheckboxGroup = FilterCheckboxGroup;
+FilterCheckboxGroup.displayName = 'Filters.CheckboxGroup';
+exports.FilterPanel.displayName = 'Filters.Panel';
+exports.default = Filters;

package/dist/components/SearchResult/SearchResult.jsx

@@ -0,0 +1,93 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = require("react");
+const ConditionalWrapper_1 = __importDefault(require("../../common/ConditionalWrapper"));
+const AspectBox_1 = __importDefault(require("../AspectBox/AspectBox"));
+const PageMetadata_1 = __importDefault(require("../PageMetadata/PageMetadata"));
+const SearchResultLinkHrefContext = (0, react_1.createContext)('');
+const SearchResultContent = ({ children }) => {
+    const otherChildren = [];
+    let imageChild = null;
+    // assign to slots
+    react_1.Children.forEach(children, (child) => {
+        const thisChild = child;
+        if (thisChild && thisChild.type === SearchResultMedia) {
+            imageChild = thisChild;
+        }
+        else {
+            otherChildren.push(thisChild);
+        }
+    });
+    return (imageChild ?
+        (<div className="ds_search-result__has-media">
+                {imageChild}
+                <div className="ds_search-result__summary">{otherChildren}</div>
+            </div>)
+        :
+            (<div className="ds_search-result__summary">
+                {otherChildren}
+            </div>));
+};
+const SearchResultContext = ({ children, title = 'Part of' }) => {
+    return (<dl className="ds_search-result__context">
+            <dt className="ds_search-result__context-key">{title}:</dt>
+            {children}
+        </dl>);
+};
+const SearchResultContextItem = ({ children }) => {
+    return (<dd className="ds_search-result__context-value">
+            {children}
+        </dd>);
+};
+const SearchResultMedia = ({ children }) => {
+    return (<div className="ds_search-result__media-wrapper">
+            <a className="ds_search-result__media-link" href={(0, react_1.useContext)(SearchResultLinkHrefContext)} tabIndex={-1} aria-hidden="true">
+                <AspectBox_1.default className="ds_search-result__media" ratio="1:1">
+                    {children}
+                </AspectBox_1.default>
+            </a>
+        </div>);
+};
+const SearchResultMeta = ({ children }) => {
+    return (<PageMetadata_1.default className="ds_search-result__metadata" isInline>
+            {children}
+        </PageMetadata_1.default>);
+};
+const SearchResult = ({ children, href, isPromoted, linkComponent, promotedTitle = 'Recommended', title, ...props }) => {
+    const LINK_CLASS = 'ds_search-result__link';
+    return (<div className={[
+            'ds_search-result',
+            isPromoted ? 'ds_search-result--promoted' : ''
+        ].join(' ')} {...props}>
+            <ConditionalWrapper_1.default condition={!!isPromoted} wrapper={(children) => <div className="ds_search-result--promoted-content">
+                    <header className="ds_search-result--promoted-title">{promotedTitle}</header>
+                    {children}
+                </div>}>
+                <SearchResultLinkHrefContext value={href}>
+                    <h3 className="ds_search-result__title">
+                        {linkComponent ?
+            linkComponent({ className: LINK_CLASS, children: title, href }) :
+            <a className={LINK_CLASS} href={href}>{title}</a>}
+                    </h3>
+
+                    {children}
+                </SearchResultLinkHrefContext>
+            </ConditionalWrapper_1.default>
+        </div>);
+};
+SearchResult.Content = SearchResultContent;
+SearchResult.Context = SearchResultContext;
+SearchResult.ContextItem = SearchResultContextItem;
+SearchResult.Media = SearchResultMedia;
+SearchResult.Meta = SearchResultMeta;
+SearchResult.MetaItem = PageMetadata_1.default.Item;
+SearchResultContent.displayName = 'SearchResult.Content';
+SearchResultContext.displayName = 'SearchResult.Context';
+SearchResultContextItem.displayName = 'SearchResult.ContextItem';
+SearchResultMedia.displayName = 'SearchResult.Media';
+SearchResultMeta.displayName = 'SearchResult.Meta';
+SearchResult.MetaItem.displayName = 'SearchResult.MetaItem';
+exports.default = SearchResult;

package/dist/components/SearchSort/SearchSort.jsx

@@ -0,0 +1,28 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const Button_1 = __importDefault(require("../Button/Button"));
+const Select_1 = __importDefault(require("../Select/Select"));
+const Option = ({ children, value }) => {
+    return (<option value={value}>
+            {children}
+        </option>);
+};
+const SearchSort = ({ children, className, id = 'sort-by', label = 'Sort by', onApply, ...props }) => {
+    return (<div className={[
+            'ds_sort-options',
+            className
+        ].join(' ')} {...props}>
+            <Select_1.default id={id} label={label}>
+                {children}
+            </Select_1.default>
+
+            <Button_1.default onClick={onApply} isSmall buttonStyle="secondary" type="submit">Apply sort</Button_1.default>
+        </div>);
+};
+SearchSort.displayName = 'SearchSort';
+Option.displayName = 'SearchSort.Option';
+SearchSort.Option = Option;
+exports.default = SearchSort;

package/dist/components/SequentialNavigation/SequentialNavigation.jsx

@@ -1,7 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const SeqNavLink = ({ children, href, isPrev, linkComponent, textLabel }) => {
-    console.log(textLabel);
     const LINK_CLASSES = [
         'ds_sequential-nav__button',
         isPrev ? 'ds_sequential-nav__button--left' : 'ds_sequential-nav__button--right'

package/dist/components/SideNavigation/SideNavigation.jsx

@@ -25,14 +25,14 @@ const SideNavigationItem = function ({ children, href, isCurrent = false, linkCo
             {children}
         </li>);
 };
-const SideNavigation = function ({ children, className, ...props }) {
+const SideNavigation = function ({ ariaLabel = 'Sections', children, className, ...props }) {
     const ref = (0, react_1.useRef)(null);
     (0, react_1.useEffect)(() => {
         if (ref.current && children) {
             new side_navigation_1.default(ref.current).init();
         }
     }, [ref]);
-    return (<nav aria-label="Sections" className={[
+    return (<nav aria-label={ariaLabel} className={[
             'ds_side-navigation',
             className
         ].join(' ')} data-module="ds-side-navigation" ref={ref} {...props}>