@scottish-government/designsystem-react 0.12.0 → 0.13.0

package/src/components/SearchFilters/SearchFilters.Panel.stories.tsx

@@ -2,8 +2,8 @@ import type { Meta, StoryObj } from '@storybook/react-vite';
 import argTypes from '../../../.storybook/sgdsArgTypes';
 
 import Filters from './SearchFilters';
-import DatePicker from '../DatePicker/DatePicker';
-import Checkbox from '../Checkbox/Checkbox';
+import DatePicker from '../DatePicker';
+import Checkbox from '../Checkbox';
 
 const meta = {
     title: 'Components/Search results/Filters/Filter panel',
@@ -39,12 +39,22 @@ const meta = {
                 name: 'number'
             }
         }
+    },
+    args: {
+        heading: 'Filter',
+        legend: 'Select which publication types you would like to see'
     }
 } satisfies Meta<typeof Filters.Panel>;
 
 export default meta;
 type Story = StoryObj<typeof meta>;
 
+type ContentTypeType = {
+    label: string;
+    value: string;
+    checked?: boolean;
+};
+
 const CONTENT_TYPES = [
     {
         label: 'Advice and guidance',
@@ -134,7 +144,7 @@ CONTENT_TYPES_WITH_SELECTED[4].checked = true;
 CONTENT_TYPES_WITH_SELECTED[7].checked = true;
 
 export const Default: Story = {
-    render: (args: any) => (
+    render: () => (
         <Filters.Panel
             heading="Filter by date"
             legend="Filter by date"
@@ -155,12 +165,12 @@ export const Default: Story = {
 };
 
 export const Scrollable: Story = {
-    render: (args: any) => (
+    render: ({ ...args }) => (
         <Filters.Panel
+            {...args}
             heading="Content type"
             isScrollable
             legend="Select which publication types you would like to see"
-            {...args}
         >
             <Filters.CheckboxGroup>
                 {CONTENT_TYPES.map((type) => (
@@ -177,16 +187,17 @@ export const Scrollable: Story = {
 };
 
 export const WithActiveFilterCount: Story = {
-    render: (args: any) => (
+    args: {},
+    render: ({ ...args }) => (
         <Filters.Panel
-            activeFilterCount={CONTENT_TYPES_WITH_SELECTED.filter((item: any) => item.checked).length}
+            {...args}
+            activeFilterCount={CONTENT_TYPES_WITH_SELECTED.filter((item: ContentTypeType) => item.checked).length}
             heading="Content type"
             isScrollable
             legend="Select which publication types you would like to see"
-            {...args}
         >
             <Filters.CheckboxGroup>
-                {CONTENT_TYPES_WITH_SELECTED.map((type: any) => (
+                {CONTENT_TYPES_WITH_SELECTED.map((type: ContentTypeType) => (
                     <Checkbox
                         checked={type.checked || false}
                         key={type.value}

package/src/components/SearchFilters/SearchFilters.stories.tsx

@@ -2,8 +2,8 @@ import type { Meta, StoryObj } from '@storybook/react-vite';
 import argTypes from '../../../.storybook/sgdsArgTypes';
 
 import Filters from './SearchFilters';
-import DatePicker from '../DatePicker/DatePicker';
-import Checkbox from '../Checkbox/Checkbox';
+import DatePicker from '../DatePicker';
+import Checkbox from '../Checkbox';
 
 
 const meta = {
@@ -104,7 +104,7 @@ const CONTENT_TYPES = [
 ];
 
 export const Default: Story = {
-    render: (args: any) => (
+    render: ({ ...args }) => (
         <Filters {...args}>
             <Filters.Panel legend="Select which publication types you would like to see" heading="Content type">
                 <Filters.CheckboxGroup>

package/src/components/SearchFilters/SearchFilters.test.tsx

@@ -1,7 +1,7 @@
 import { test, expect } from 'vitest';
 import { render, screen, within } from '@testing-library/react';
 import Filters from './SearchFilters';
-import Checkbox from '../Checkbox/Checkbox';
+import Checkbox from '../Checkbox';
 
 test('search filters boilerplate renders correctly', () => {
     render(

package/src/components/SearchFilters/SearchFilters.tsx

@@ -1,8 +1,9 @@
-import Accordion from "../Accordion/Accordion";
-import Button from "../Button/Button";
-import SkipLinks from "../SkipLinks/SkipLinks";
+import Accordion from "../Accordion";
+import Button from "../Button";
+import SkipLinks from "../SkipLinks";
 import ConditionalWrapper from "../../common/ConditionalWrapper";
-import CheckboxGroup from "../Checkbox/CheckboxGroup";
+import { CheckboxGroup } from "../Checkbox";
+import { SearchFiltersPanelProps, SearchFiltersCheckboxGroupProps, SearchFiltersProps } from "./types";
 
 export const FilterPanel = ({
     activeFilterCount = 0,
@@ -11,7 +12,7 @@ export const FilterPanel = ({
     legend,
     heading = 'Filter',
     ...props
-}: SGDS.Component.SearchFilters.Panel) => {
+}: SearchFiltersPanelProps) => {
     const headingWithCount = <>
         {heading}
         {activeFilterCount > 0 && <div className="ds_search-filters__filter-count">({activeFilterCount} selected)</div>}
@@ -36,7 +37,7 @@ export const FilterPanel = ({
 const FilterCheckboxGroup = ({
     children,
     ...props
-}: any) => {
+}: SearchFiltersCheckboxGroupProps) => {
     return (
         <CheckboxGroup
             className="ds_search-filters__checkboxes"
@@ -52,7 +53,7 @@ const Filters = ({
     children,
     searchResultsContainerId = 'search-results',
     ...props
-}: SGDS.Component.SearchFilters) => {
+}: SearchFiltersProps) => {
     return (
         <div className="ds_search-filters" {...props}>
             <div className="ds_details  ds_no-margin" data-module="ds-details">

package/src/components/SearchFilters/index.ts

@@ -0,0 +1 @@
+export { default } from './SearchFilters';

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

@@ -1,19 +1,20 @@
 import { Children, createContext, useContext } from 'react';
 import ConditionalWrapper from '../../common/ConditionalWrapper';
-import AspectBox from '../AspectBox/AspectBox';
-import Metadata from '../PageMetadata/PageMetadata';
+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/index.ts

@@ -0,0 +1 @@
+export { default } from './SearchResult';

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/Button";
-import Select from "../Select/Select";
+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/index.ts

@@ -0,0 +1 @@
+export { default } from './SearchSort';

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/ErrorMessage';
+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/index.ts

@@ -0,0 +1 @@
+export { default } from './Select';

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/index.ts

@@ -0,0 +1 @@
+export { default } from './SequentialNavigation';

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/index.ts

@@ -0,0 +1 @@
+export { default } from './SideNavigation';

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/index.ts

@@ -0,0 +1 @@
+export { default } from './SiteFooter';

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

@@ -2,9 +2,9 @@ import type { Meta, StoryObj } from '@storybook/react-vite';
 import argTypes from '../../../.storybook/sgdsArgTypes';
 
 import SiteHeader from './SiteHeader';
-import SiteSearch from '../SiteSearch/SiteSearch';
-import SiteNavigation from '../SiteNavigation/SiteNavigation';
-import PhaseBanner from '../PhaseBanner/PhaseBanner';
+import SiteSearch from '../SiteSearch';
+import SiteNavigation from '../SiteNavigation';
+import PhaseBanner from '../PhaseBanner';
 
 const meta = {
     title: 'Components/SiteHeader',
@@ -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">