@scottish-government/designsystem-react 0.12.1 → 0.13.0

package/src/components/SearchFilters/types.ts

@@ -0,0 +1,14 @@
+export interface SearchFiltersPanelProps extends  React.AllHTMLAttributes<HTMLElement> {
+    activeFilterCount?: number;
+    heading: string | React.ReactNode;
+    isScrollable?: boolean;
+    legend: string;
+}
+
+export interface SearchFiltersCheckboxGroupProps {
+    children: React.ReactNode,
+}
+
+export interface SearchFiltersProps extends React.AllHTMLAttributes<HTMLElement> {
+    searchResultsContainerId?: string;
+}

package/src/components/SearchResult/SearchResult.stories.tsx

@@ -1,9 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
 import argTypes from '../../../.storybook/sgdsArgTypes';
-
 import SearchResult from './SearchResult';
-
-//@ts-ignore
+// @ts-expect-error no types
 import coo from '../../../static/images/highland-cow.jpg';
 
 const meta = {
@@ -13,7 +11,8 @@ const meta = {
         children: argTypes.children()
     },
     args: {
-        title: 'Application incomplete'
+        title: 'Greenhouse gas statistics 1990-2022',
+        href: '#foo'
     }
 } satisfies Meta<typeof SearchResult>;
 
@@ -22,7 +21,7 @@ type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
     render: (args) => (
-        <SearchResult href="#foo" title="Greenhouse gas statistics 1990-2022" {...args}>
+        <SearchResult {...args}>
             <SearchResult.Content>
                 Official statistics showing emissions of greenhouse gases in Scotland over the period 1990 to 2022.
             </SearchResult.Content>
@@ -32,7 +31,7 @@ export const Default: Story = {
 
 export const Metadata: Story = {
     render: (args) => (
-        <SearchResult href="#foo" title="Greenhouse gas statistics 1990-2022" {...args}>
+        <SearchResult {...args}>
             <SearchResult.Content>
                 Official statistics showing emissions of greenhouse gases in Scotland over the period 1990 to 2022.
             </SearchResult.Content>
@@ -50,7 +49,7 @@ export const Metadata: Story = {
 
 export const Context: Story = {
     render: (args) => (
-        <SearchResult href="#foo" title="Greenhouse gas statistics 1990-2022" {...args}>
+        <SearchResult {...args}>
             <SearchResult.Content>
                 Official statistics showing emissions of greenhouse gases in Scotland over the period 1990 to 2022.
             </SearchResult.Content>
@@ -64,7 +63,7 @@ export const Context: Story = {
 
 export const Media: Story = {
     render: (args) => (
-        <SearchResult href="#foo" title="Application incomplete" {...args}>
+        <SearchResult {...args}>
             <SearchResult.Content>
                 <SearchResult.Media>
                     <img src={coo} alt="" />
@@ -77,7 +76,7 @@ export const Media: Story = {
 
 export const Promoted: Story = {
     render: (args) => (
-        <SearchResult isPromoted href="#foo" title="Greenhouse gas statistics 1990-2022" {...args}>
+        <SearchResult isPromoted {...args}>
             <SearchResult.Content>
                 Official statistics showing emissions of greenhouse gases in Scotland over the period 1990 to 2022.
             </SearchResult.Content>
@@ -87,7 +86,7 @@ export const Promoted: Story = {
 
 export const KitchenSink: Story = {
     render: (args) => (
-        <SearchResult isPromoted href="#foo" title="Application incomplete" {...args}>
+        <SearchResult isPromoted {...args}>
             <SearchResult.Content>
                 <SearchResult.Media>
                     <img src={coo} alt="" />

package/src/components/SearchResult/SearchResult.tsx

@@ -2,18 +2,19 @@ import { Children, createContext, useContext } from 'react';
 import ConditionalWrapper from '../../common/ConditionalWrapper';
 import AspectBox from '../AspectBox';
 import Metadata from '../PageMetadata';
+import { SearchResultContextProps, SearchResultProps } from './types';
 
 const SearchResultLinkHrefContext = createContext('');
 
 const SearchResultContent = ({
     children
-}: SGDS.Component.SearchResult.Content) => {
-    const otherChildren: any[] = [];
+}: React.AllHTMLAttributes<HTMLElement>) => {
+    const otherChildren: React.ReactNode[] = [];
     let imageChild: React.ReactNode = null;
 
     // assign to slots
     Children.forEach(children, (child: React.ReactNode) => {
-        const thisChild = child as React.ReactElement<any>;
+        const thisChild = child as React.JSX.Element;
         if (thisChild && thisChild.type === SearchResultMedia) {
             imageChild = thisChild;
         } else {
@@ -37,7 +38,7 @@ const SearchResultContent = ({
 const SearchResultContext = ({
     children,
     title = 'Part of'
-}: SGDS.Component.SearchResult.Context) => {
+}: SearchResultContextProps) => {
     return (
         <dl className="ds_search-result__context">
             <dt className="ds_search-result__context-key">{title}:</dt>
@@ -48,7 +49,7 @@ const SearchResultContext = ({
 
 const SearchResultContextItem = ({
     children
-}: SGDS.Component.SearchResult.ContextItem) => {
+}: React.AllHTMLAttributes<HTMLElement>) => {
     return (
         <dd className="ds_search-result__context-value">
             {children}
@@ -58,7 +59,7 @@ const SearchResultContextItem = ({
 
 const SearchResultMedia = ({
     children
-}: SGDS.Component.SearchResult.Media) => {
+}: React.AllHTMLAttributes<HTMLElement>) => {
     return (
         <div className="ds_search-result__media-wrapper">
             <a className="ds_search-result__media-link" href={useContext(SearchResultLinkHrefContext)} tabIndex={-1} aria-hidden="true">
@@ -72,7 +73,7 @@ const SearchResultMedia = ({
 
 const SearchResultMeta = ({
     children
-}: SGDS.Component.SearchResult.Meta) => {
+}: React.AllHTMLAttributes<HTMLElement>) => {
     return (
         <Metadata className="ds_search-result__metadata" isInline>
             {children}
@@ -88,7 +89,7 @@ const SearchResult = ({
     promotedTitle = 'Recommended',
     title,
     ...props
-}: SGDS.Component.SearchResult) => {
+}: SearchResultProps) => {
     const LINK_CLASS = 'ds_search-result__link';
 
     return (

package/src/components/SearchResult/types.ts

@@ -0,0 +1,13 @@
+import { LinkComponent } from "../../shared-types";
+
+export interface SearchResultContextProps extends React.AllHTMLAttributes<HTMLDListElement> {
+    title: string;
+}
+
+export interface SearchResultProps extends React.AllHTMLAttributes<HTMLElement> {
+    href: string;
+    isPromoted?: boolean;
+    linkComponent?: LinkComponent;
+    promotedTitle?: string;
+    title: string;
+}

package/src/components/SearchSort/SearchSort.stories.tsx

@@ -14,7 +14,8 @@ const meta = {
     },
     args: {
         id: 'sort-by',
-        label: 'Sort by'
+        label: 'Sort by',
+        children: <></>
     }
 } satisfies Meta<typeof SearchSort>;
 

package/src/components/SearchSort/SearchSort.tsx

@@ -1,6 +1,7 @@
 import { AllHTMLAttributes } from "react";
 import Button from "../Button";
 import Select from "../Select";
+import { SearchSortProps } from "./types";
 
 const Option = ({
     children,
@@ -20,7 +21,7 @@ const SearchSort = ({
     label = 'Sort by',
     onApply,
     ...props
-}: SGDS.Component.SearchSort) => {
+}: SearchSortProps) => {
     return (
         <div
             className={[

package/src/components/SearchSort/types.ts

@@ -0,0 +1,7 @@
+export interface SearchSortProps extends React.AllHTMLAttributes<HTMLElement> {
+    children: React.ReactNode;
+    className?: string;
+    id?: string;
+    label?: string;
+    onApply?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+}

package/src/components/Select/Select.tsx

@@ -1,5 +1,6 @@
 import ErrorMessage from '../ErrorMessage';
 import HintText from '../../common/HintText';
+import { SelectProps } from './types';
 
 const Select = function ({
     children,
@@ -16,7 +17,7 @@ const Select = function ({
     placeholder,
     width,
     ...props
-}: SGDS.Component.Select) {
+}: SelectProps) {
     const errorMessageId = `error-message-${id}`;
     const hintTextId = `hint-text-${id}`;
     const describedbys: string[] = [];
@@ -24,13 +25,13 @@ const Select = function ({
     if (hintText) { describedbys.push(hintTextId) };
     if (errorMessage) { describedbys.push(errorMessageId) };
 
-    function handleBlur(event: React.FocusEvent) {
+    function handleBlur(event: React.FocusEvent<HTMLSelectElement>) {
         if (typeof onBlur === 'function') {
             onBlur(event);
         }
     }
 
-    function handleChange(event: React.ChangeEvent) {
+    function handleChange(event: React.ChangeEvent<HTMLSelectElement>) {
         if (typeof onChange === 'function') {
             onChange(event);
         }
@@ -39,7 +40,7 @@ const Select = function ({
     return (
         <>
             <label className="ds_label" htmlFor={id}>{label}</label>
-            {hintText && <HintText id={hintTextId} text={hintText} />}
+            {hintText && <HintText id={hintTextId}>{hintText}</HintText>}
             {errorMessage && <ErrorMessage id={errorMessageId}>{errorMessage}</ErrorMessage>}
             <div
                 className={[

package/src/components/Select/types.ts

@@ -0,0 +1,7 @@
+import { FormFieldBase, InputWidth } from "../../shared-types";
+
+export interface SelectProps extends FormFieldBase<HTMLElement> {
+    defaultValue?: string;
+    placeholder?: string;
+    width?: InputWidth;
+}

package/src/components/SequentialNavigation/SequentialNavigation.tsx

@@ -1,10 +1,12 @@
+import { SequentialNavigationLinkProps, SequentialNavigationProps } from "./types";
+
 const SeqNavLink = ({
     children,
     href,
     isPrev,
     linkComponent,
     textLabel
-}: SGDS.Component.SequentialNavigation.Link) => {
+}:SequentialNavigationLinkProps) => {
     const LINK_CLASSES = [
         'ds_sequential-nav__button',
         isPrev ? 'ds_sequential-nav__button--left' : 'ds_sequential-nav__button--right'
@@ -39,7 +41,7 @@ const NextLink = ({
     href,
     linkComponent,
     textLabel = 'Next'
-}: SGDS.Component.SequentialNavigation.Link) => {
+}: SequentialNavigationLinkProps) => {
     return <SeqNavLink href={href} linkComponent={linkComponent} textLabel={textLabel}>{children}</SeqNavLink>
 };
 
@@ -48,7 +50,7 @@ const PreviousLink = ({
     href,
     linkComponent,
     textLabel = 'Previous'
-}: SGDS.Component.SequentialNavigation.Link) => {
+}: SequentialNavigationLinkProps) => {
     return <SeqNavLink href={href} linkComponent={linkComponent} textLabel={textLabel} isPrev>{children}</SeqNavLink>
 };
 
@@ -57,7 +59,7 @@ const SequentialNavigation = ({
     children,
     className,
     ...props
-}: SGDS.Component.SequentialNavigation) => {
+}: SequentialNavigationProps) => {
     return (
         <nav
             className={[

package/src/components/SequentialNavigation/types.ts

@@ -0,0 +1,12 @@
+import { LinkComponent } from "../../shared-types";
+
+export interface SequentialNavigationLinkProps extends React.AllHTMLAttributes<HTMLDivElement> {
+    href: string;
+    isPrev?: boolean;
+    linkComponent?: LinkComponent;
+    textLabel?: string;
+}
+
+export interface SequentialNavigationProps extends React.AllHTMLAttributes<HTMLElement> {
+    ariaLabel?: React.AriaAttributes['aria-label'];
+}

package/src/components/SideNavigation/SideNavigation.tsx

@@ -1,11 +1,12 @@
 import { useEffect, useRef } from 'react';
-// @ts-ignore
+// @ts-expect-error no types from core SGDS
 import DSSideNavigation from '@scottish-government/design-system/src/components/side-navigation/side-navigation';
+import { SideNavigationItemProps, SideNavigationListProps, SideNavigationProps } from './types';
 
 const SideNavigationList = function ({
     children,
     isRoot
-}: SGDS.Component.SideNavigation.List) {
+}: SideNavigationListProps) {
     return (
         <ul className="ds_side-navigation__list"
             id={isRoot ? 'side-navigation-root' : undefined }
@@ -21,7 +22,7 @@ const SideNavigationItem = function ({
     isCurrent = false,
     linkComponent,
     title
-}: SGDS.Component.SideNavigation.Item) {
+}: SideNavigationItemProps) {
     const LINK_CLASS = 'ds_side-navigation__link';
 
     return (
@@ -47,7 +48,7 @@ const SideNavigation = function ({
     children,
     className,
     ...props
-}: SGDS.Component.SideNavigation) {
+}: SideNavigationProps) {
     const ref = useRef(null);
 
     useEffect(() => {

package/src/components/SideNavigation/types.ts

@@ -0,0 +1,16 @@
+import { LinkComponent } from "../../shared-types";
+
+export interface SideNavigationListProps extends React.AllHTMLAttributes<HTMLUListElement> {
+    isRoot?: boolean;
+}
+
+export interface SideNavigationItemProps extends React.AllHTMLAttributes<HTMLLIElement> {
+    isCurrent?: boolean;
+    href: string;
+    linkComponent?: LinkComponent;
+    title: string;
+}
+
+export interface SideNavigationProps extends React.AllHTMLAttributes<HTMLElement> {
+    ariaLabel?: string;
+}

package/src/components/SiteFooter/SiteFooter.tsx

@@ -1,10 +1,11 @@
 import React, { Children } from 'react';
 import ConditionalWrapper from '../../common/ConditionalWrapper';
+import { SiteFooterLicenseProps, SiteFooterLinkProps, SiteFooterOrgProps, SiteFooterProps } from './types';
 
 const License = ({
     children,
     ...props
-}: SGDS.Component.SiteFooter.License) => {
+}: SiteFooterLicenseProps) => {
     return (
         <div className="ds_site-footer__copyright" {...props}>
             {children}
@@ -15,7 +16,7 @@ const License = ({
 const Links = ({
     children,
     ...props
-}: SGDS.Component.SiteFooter.Links) => {
+}: React.AllHTMLAttributes<HTMLUListElement>) => {
     return (
         <ul className="ds_site-footer__site-items" {...props}>
             {children}
@@ -28,7 +29,7 @@ const Link = ({
     href,
     linkComponent,
     ...props
-}: SGDS.Component.SiteFooter.Link) => {
+}: SiteFooterLinkProps) => {
     function processChildren(children: React.ReactNode) {
         if (linkComponent) {
             return linkComponent({ href, children });
@@ -49,9 +50,9 @@ const Org = ({
     title,
     children,
     ...props
-}: SGDS.Component.SiteFooter.Org) => {
+}: SiteFooterOrgProps) => {
     children = Children.map(children, child => {
-        let thisChild = child as React.ReactElement<HTMLElement>;
+        const thisChild = child as React.ReactElement<HTMLElement>;
         if (thisChild && ['img', 'svg', 'picture'].includes(thisChild.type as string)) {
             return React.cloneElement(thisChild, { className: 'ds_site-footer__org-logo' });
         } else {
@@ -75,7 +76,7 @@ const SiteFooter = ({
     children,
     className,
     ...props
-}: SGDS.Component.SiteFooter) => {
+}: SiteFooterProps) => {
     return (
         <footer
             className={[

package/src/components/SiteFooter/types.ts

@@ -0,0 +1,20 @@
+import { LinkComponent } from "../../shared-types";
+
+export interface SiteFooterLinkProps extends React.AllHTMLAttributes<HTMLLIElement> {
+    href?: string;
+    linkComponent?: LinkComponent;
+}
+
+export interface SiteFooterLicenseProps extends React.AllHTMLAttributes<HTMLDivElement> {
+    href?: string;
+    logoSrc?: string;
+}
+
+export interface SiteFooterOrgProps extends React.AllHTMLAttributes<HTMLDivElement> {
+    href?: string;
+    title: string;
+}
+
+export interface SiteFooterProps extends React.AllHTMLAttributes<HTMLElement> {
+    className?: string;
+}

package/src/components/SiteHeader/SiteHeader.stories.tsx

@@ -17,6 +17,7 @@ const meta = {
             <SiteHeader.Brand
                 homeUrl="/"
                 siteTitle="Design System React"
+                key="1"
             >
                 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 206.7 30.7">
                     <title>The Scottish Government</title>
@@ -26,7 +27,7 @@ const meta = {
                     <path fill="#333e48" d="M205.1 12.8c.8 0 1.3-.2 1.6-.5l-.4-1.3c-.1.2-.4.3-.8.3-.5 0-.8-.4-.8-1V6.1h1.6V4.6h-1.6V2.3H203v2.2h-1.3V6h1.3v4.7c0 1.4.7 2.1 2.1 2.1m-4.7-.2V6.9c0-1.7-.9-2.6-2.6-2.6-1.3 0-2.3.7-2.9 1.3v-1h-1.8v8.1h1.8V7c.4-.5 1.2-1.1 2.1-1.1 1 0 1.6.4 1.6 1.7v5.1h1.8zm-10.5-4.7h-4.5c.1-1 .8-2.1 2.3-2.1 1.5 0 2.1 1.2 2.2 2.1m-2.2 4.9c1.3 0 2.5-.4 3.3-1.2l-.8-1.2c-.6.6-1.5.9-2.3.9-1.5 0-2.4-1-2.6-2.2h6.2v-.4c0-2.5-1.5-4.4-4-4.4a4 4 0 0 0-4.1 4.2c.1 2.6 1.9 4.3 4.3 4.3m-5.9-.2V6.8c0-1.6-.9-2.4-2.3-2.4-1.2 0-2.3.8-2.7 1.5-.3-.9-1-1.5-2.2-1.5-1.2 0-2.3.8-2.6 1.3V4.6h-1.8v8.1h1.8V7c.4-.5 1.1-1.1 1.9-1.1 1 0 1.3.6 1.3 1.5v5.3h1.8V7c.4-.5 1.1-1.1 1.9-1.1 1 0 1.3.6 1.3 1.5v5.3h1.6zm-13.9 0V6.9c0-1.7-.9-2.6-2.6-2.6-1.3 0-2.3.7-2.9 1.3v-1h-1.8v8.1h1.8V7c.4-.5 1.2-1.1 2.1-1.1 1 0 1.6.4 1.6 1.7v5.1h1.8zm-11.1 0V7.1c.4-.6 1.3-1.1 2.1-1.1h.5V4.4c-1 0-2 .6-2.6 1.4V4.6H155v8.1h1.8zm-5.1-4.7h-4.5c.1-1 .8-2.1 2.3-2.1 1.5 0 2.1 1.2 2.2 2.1m-2.2 4.9c1.3 0 2.5-.4 3.3-1.2l-.8-1.2c-.6.6-1.5.9-2.3.9-1.5 0-2.4-1-2.6-2.2h6.2v-.4c0-2.5-1.5-4.4-4-4.4a4 4 0 0 0-4.1 4.2c.1 2.6 1.9 4.3 4.3 4.3m-7.8-.2 3.3-8.1h-1.9l-2.4 6.1-2.4-6.1h-1.9l3.3 8.1h2zm-9.7-1.3c-1.5 0-2.3-1.3-2.3-2.7 0-1.4.8-2.7 2.3-2.7 1.5 0 2.3 1.3 2.3 2.7 0 1.4-.8 2.7-2.3 2.7m0 1.5c2.6 0 4.1-1.9 4.1-4.2 0-2.3-1.6-4.2-4.1-4.2s-4.1 1.9-4.1 4.2a4 4 0 0 0 4.1 4.2m-10.7 0c3.5 0 5.6-2.4 5.6-6.2h-6.1v1.7h4a3.2 3.2 0 0 1-3.3 2.7c-2.2 0-3.8-1.7-3.8-4 0-2.4 1.6-4 3.8-4 1.2 0 2.3.7 2.9 1.5l1.6-.9a5.2 5.2 0 0 0-4.5-2.3 5.7 5.7 0 0 0-5.9 5.8c0 3.5 2.7 5.7 5.7 5.7m-11.5-.2V6.9c0-1.7-.9-2.6-2.6-2.6-1.3 0-2.3.7-2.8 1.3V1.5h-1.8v11.2h1.8V7c.4-.5 1.2-1.1 2.1-1.1 1 0 1.6.4 1.6 1.6v5.1h1.7zm-12.2.2c2.2 0 3.4-1.1 3.4-2.5 0-3.2-4.9-2.1-4.9-3.6 0-.6.6-1 1.5-1 1 0 1.9.4 2.4 1l.7-1.2a4.8 4.8 0 0 0-3.1-1.1c-2 0-3.2 1.1-3.2 2.4 0 3.1 4.9 2 4.9 3.6 0 .6-.6 1.1-1.6 1.1a4 4 0 0 1-2.7-1.1l-.8 1.3c.8.7 2 1.1 3.4 1.1m-5-8.2h-1.8v8.1h1.8V4.6zm-.9-1c.6 0 1.1-.5 1.1-1.1 0-.6-.5-1.1-1.1-1.1-.6 0-1.1.5-1.1 1.1 0 .6.5 1.1 1.1 1.1M88 12.8c.8 0 1.3-.2 1.6-.5l-.4-1.3c-.1.2-.4.3-.8.3-.5 0-.8-.4-.8-1V6.1h1.6V4.6h-1.6V2.3h-1.8v2.2h-1.3V6h1.3v4.7c.1 1.4.8 2.1 2.2 2.1m-5.6 0c.8 0 1.3-.2 1.6-.5l-.4-1.3c-.1.2-.4.3-.8.3-.5 0-.8-.4-.8-1V6.1h1.6V4.6H82V2.3h-1.8v2.2h-1.3V6h1.3v4.7c.1 1.4.8 2.1 2.2 2.1m-8.3-1.5c-1.5 0-2.3-1.3-2.3-2.7 0-1.4.8-2.7 2.3-2.7 1.5 0 2.3 1.3 2.3 2.7 0 1.4-.8 2.7-2.3 2.7m0 1.5c2.6 0 4.1-1.9 4.1-4.2 0-2.3-1.6-4.2-4.1-4.2-2.6 0-4.1 1.9-4.1 4.2a4 4 0 0 0 4.1 4.2m-8.1 0c1.6 0 2.5-.7 3.1-1.4L68 10.3c-.5.6-1.1 1-1.9 1-1.5 0-2.4-1.1-2.4-2.7s1-2.7 2.4-2.7c.8 0 1.4.3 1.9.9l1.2-1.1c-.6-.7-1.6-1.3-3.2-1.3a4.1 4.1 0 0 0-4.2 4.2c.1 2.4 1.8 4.2 4.2 4.2m-9.7 0c3 0 4.3-1.6 4.3-3.5 0-4.1-6.5-2.9-6.5-4.9.1-.8.8-1.4 1.9-1.4 1.2 0 2.4.4 3.2 1.3l1.1-1.5c-1-1-2.4-1.6-4.2-1.6-2.5 0-4.1 1.4-4.1 3.3 0 4.1 6.5 2.6 6.5 5 0 .8-.6 1.5-2.2 1.5s-2.8-.7-3.5-1.6l-1.1 1.5a6 6 0 0 0 4.6 1.9"/>
                 </svg>
             </SiteHeader.Brand>,
-            <SiteHeader.Navigation>
+            <SiteHeader.Navigation key="2">
                 <SiteNavigation>
                 <SiteNavigation.Item href="#about">
                     About
@@ -51,10 +52,10 @@ const meta = {
                 </SiteNavigation.Item>
                 </SiteNavigation>
             </SiteHeader.Navigation>,
-            <SiteHeader.Search>
+            <SiteHeader.Search key="3">
                 <SiteSearch id="site-header-search" />
             </SiteHeader.Search>,
-            <SiteHeader.Phase>
+            <SiteHeader.Phase key="4">
                 <PhaseBanner phaseName="Beta">
                 This is a new service. Your{' '}
                 <a href="#feedback">

package/src/components/SiteHeader/SiteHeader.tsx

@@ -1,16 +1,17 @@
 import React, { Children, useEffect, useRef } from 'react';
 import Icon from '../../common/Icon';
 import SiteNavigation from '../SiteNavigation';
-
-// @ts-ignore
+// @ts-expect-error no types from core SGDS
 import DSMobileMenu from '@scottish-government/design-system/src/components/site-navigation/site-navigation';
+import { SiteHeaderBrandProps, SiteHeaderProps } from './types';
+import { SiteNavigationProps } from '../SiteNavigation/types';
 
 const Brand = ({
     children,
     homeUrl = '/',
     linkComponent,
     siteTitle
-}: SGDS.Component.SiteHeader.Brand) => {
+}: SiteHeaderBrandProps) => {
     function processChildren(children: React.ReactNode) {
         const image = React.cloneElement(children as React.ReactElement<HTMLImageElement>, { className: 'ds_site-branding__logo-image' });
 
@@ -36,26 +37,26 @@ const Brand = ({
 
 const Navigation = ({
     children
-}: any) => {
+}: React.AllHTMLAttributes<HTMLElement>) => {
     return children;
 }
 
 const Phase = ({
     children
-}: any) => {
+}: React.AllHTMLAttributes<HTMLElement>) => {
     return children;
 }
 
 const Search = ({
     children
-}: any) => {
+}: React.AllHTMLAttributes<HTMLElement>) => {
     return children;
 }
 
 const SiteHeader = ({
     children,
     ...props
-}: SGDS.Component.SiteHeader) => {
+}: SiteHeaderProps) => {
     const mobileMenuRef = useRef(null);
 
     let branding: React.ReactNode;
@@ -66,14 +67,14 @@ const SiteHeader = ({
 
     // assign to slots
     Children.forEach(children, (child: React.ReactNode) => {
-        const thisChild = child as React.ReactElement<any>;
+        const thisChild = child as React.JSX.Element;
         if (thisChild && thisChild.type === Brand) {
             branding = thisChild;
         } else if (thisChild && thisChild.type === Navigation) {
             navigation = thisChild;
 
             if (thisChild.props.children.type === SiteNavigation) {
-                mobileNavigation = React.cloneElement(thisChild.props.children as React.ReactElement<SGDS.Component.SiteNavigation>, { className: 'ds_site-navigation--mobile', id: 'mobile-navigation', ref: mobileMenuRef});
+                mobileNavigation = React.cloneElement(thisChild.props.children as React.ReactElement<SiteNavigationProps>, { className: 'ds_site-navigation--mobile', id: 'mobile-navigation', ref: mobileMenuRef});
             }
         } else if (thisChild && thisChild.type === Phase) {
             phase = thisChild;

package/src/components/SiteHeader/types.ts

@@ -0,0 +1,22 @@
+import { LinkComponent } from "../../shared-types";
+import { PhaseBannerProps } from "../PhaseBanner/types";
+import { SiteNavigationItemProps } from "../SiteNavigation/types";
+import { SiteSearchProps } from "../SiteSearch/types";
+
+export interface SiteHeaderBrandProps extends React.AllHTMLAttributes<HTMLElement> {
+    homeUrl: string;
+    linkComponent?: LinkComponent;
+    siteTitle?: string;
+}
+
+export interface SiteHeaderProps extends React.AllHTMLAttributes<HTMLHeadingElement> {
+    logo?: {
+        alt?: string;
+        href?: string;
+        src?: string;
+    };
+    navigationItems?: SiteNavigationItemProps[];
+    phaseBanner?: PhaseBannerProps;
+    siteSearch?: SiteSearchProps;
+    siteTitle?: string;
+}

package/src/components/SiteNavigation/SiteNavigation.tsx

@@ -1,9 +1,11 @@
+import { SiteNavigationItemProps, SiteNavigationProps } from "./types";
+
 const Item = ({
     children,
     isCurrent = false,
     href,
     linkComponent
-}: SGDS.Component.SiteNavigation.Item) => {
+}: SiteNavigationItemProps) => {
     const classNames = ['ds_site-navigation__link'];
     let ariaCurrent: React.AriaAttributes["aria-current"];
 
@@ -33,7 +35,7 @@ const SiteNavigation = ({
     children,
     className,
     ...props
-}: SGDS.Component.SiteNavigation) => {
+}: SiteNavigationProps) => {
     return (
         <nav
             className={[

package/src/components/SiteNavigation/types.ts

@@ -0,0 +1,11 @@
+import { LinkComponent } from '../../shared-types';
+
+export interface SiteNavigationItemProps extends React.AllHTMLAttributes<HTMLLIElement> {
+    isCurrent?: boolean;
+    href: string;
+    linkComponent?: LinkComponent;
+}
+
+export interface SiteNavigationProps extends React.AllHTMLAttributes<HTMLElement> {
+    ref?: React.RefObject<null>;
+}

package/src/components/SiteSearch/SiteSearch.stories.tsx

@@ -11,8 +11,10 @@ type AutocompleteResponseObject = {
     category: string
 }
 
-const suggestionMappingFunction = function (request: XMLHttpRequest) {
-    const responseObj = JSON.parse(request.response).map((item: string) => ({
+type SuggestionObject = { response: string };
+
+const suggestionMappingFunction = function (suggestionObj: SuggestionObject) {
+    const responseObj = JSON.parse(suggestionObj.response).map((item: string) => ({
         key: '',
         displayText: item,
         weight: '',

package/src/components/SiteSearch/SiteSearch.tsx

@@ -1,7 +1,8 @@
 import { useEffect, useRef } from 'react';
-// @ts-ignore
+// @ts-expect-error no types from core SGDS
 import DSAutocomplete from '@scottish-government/design-system/src/components/autocomplete/autocomplete';
 import Button from '../Button';
+import { SiteSearchProps, SuggestionMappingFunctionProps } from './types';
 
 const SiteSearch = function ({
     action = '/search',
@@ -14,14 +15,14 @@ const SiteSearch = function ({
     name = 'q',
     placeholder = 'Search',
     ...props
-}: SGDS.Component.SiteSearch) {
+}: SiteSearchProps) {
     const ref = useRef(null);
     const hasAutocomplete = !!autocompleteEndpoint;
-    let autocompleteId = hasAutocomplete ? id + '-autocomplete' : '';
+    const autocompleteId = hasAutocomplete ? id + '-autocomplete' : '';
 
     type AutoCompleteOptions = {
         minLength?: number,
-        suggestionMappingFunction?: Function,
+        suggestionMappingFunction?: SuggestionMappingFunctionProps,
         throttleDelay?: number
     }
 
@@ -48,7 +49,7 @@ const SiteSearch = function ({
     return (
         <div
             className={[
-                'ds_site-search', ,
+                'ds_site-search',
                 className,
                 hasAutocomplete ? 'ds_autocomplete' : undefined
             ].join(' ')}

package/src/components/SiteSearch/types.ts

@@ -0,0 +1,13 @@
+type FormMethods = 'GET' | 'POST';
+export type SuggestionMappingFunctionProps = (suggestionObj: {response: string}) => [];
+
+export interface SiteSearchProps extends React.AllHTMLAttributes<HTMLInputElement> {
+    action?: string;
+    autocompleteEndpoint?: string;
+    autocompleteSuggestionMappingFunction?: SuggestionMappingFunctionProps;
+    id: string;
+    method?: FormMethods;
+    minLength?: number;
+    name?: string;
+    placeholder?: string;
+}