@scottish-government/designsystem-react 0.1.0 → 0.1.2

package/src/components/error-message/error-message.tsx

@@ -1,5 +1,6 @@
 const ErrorMessage: React.FC<SGDS.Component.ErrorMessage> = ({
     children,
+    className,
     id,
     text,
     ...props
@@ -8,6 +9,7 @@ const ErrorMessage: React.FC<SGDS.Component.ErrorMessage> = ({
         <p
             className={[
                 'ds_question__error-message',
+                className
             ].join(' ')}
             dangerouslySetInnerHTML={text ? { __html: text } : undefined}
             id={id}

package/src/components/inset-text/inset-text.test.tsx

@@ -31,3 +31,14 @@ test('passing additional props', () => {
     const insetTextOuter = document.querySelector('.ds_inset-text');
     expect(insetTextOuter?.dataset.test).toEqual('foo');
 });
+
+test('passing additional CSS classes', () => {
+    render(
+        <InsetText className="foo">
+            {text}
+        </InsetText>
+    )
+
+    const insetTextOuter = document.querySelector('.ds_inset-text');
+    expect(insetTextOuter).toHaveClass('foo', 'ds_inset-text');
+});

package/src/components/inset-text/inset-text.tsx

@@ -1,10 +1,14 @@
-const InsetText: React.FC<React.PropsWithChildren> = ({
+const InsetText: React.FC<SGDS.Component.InsetText> = ({
     children,
+    className,
     ...props
 }) => {
     return (
         <div
-            className="ds_inset-text"
+            className={[
+                'ds_inset-text',
+                className
+            ].join(' ')}
             {...props}
         >
             <div className="ds_inset-text__text">

package/src/components/notification-banner/notification-banner.test.tsx

@@ -91,3 +91,14 @@ test('passing additional props', () => {
     const bannerContainer = document.querySelector('.ds_notification');
     expect(bannerContainer?.dataset.test).toEqual('foo');
 });
+
+test('passing additional CSS classes', () => {
+    render(
+        <NotificationBanner className="foo">
+            {text}
+        </NotificationBanner>
+    )
+
+    const bannerContainer = document.querySelector('.ds_notification');
+    expect(bannerContainer).toHaveClass('foo', 'ds_notification');
+});

package/src/components/notification-banner/notification-banner.tsx

@@ -7,6 +7,7 @@ import ScreenReaderText from '../../common/screen-reader-text';
 
 const NotificationBanner: React.FC<SGDS.Component.NotificationBanner> = ({
     children,
+    className,
     close,
     icon,
     iconColour,
@@ -24,7 +25,11 @@ const NotificationBanner: React.FC<SGDS.Component.NotificationBanner> = ({
 
     return (
         <div
-            className="ds_notification  ds_reversed"
+            className={[
+                'ds_notification',
+                'ds_reversed',
+                className
+            ].join(' ')}
             data-module="ds-notification"
             ref={ref}
             {...props}

package/src/components/notification-panel/notification-panel.test.tsx

@@ -75,3 +75,15 @@ test('passing additional props', () => {
     const notificationPanel = notificationPanelHeading.parentNode;
     expect(notificationPanel?.dataset.test).toEqual('foo');
 });
+
+test('passing additional CSS classes', () => {
+    render(
+        <NotificationPanel title={headingText} className="foo">
+            {text}
+        </NotificationPanel>
+    )
+
+    const notificationPanelHeading = screen.getByRole('heading');
+    const notificationPanel = notificationPanelHeading.parentNode;
+    expect(notificationPanel).toHaveClass('foo', 'ds_notification-panel');
+});

package/src/components/notification-panel/notification-panel.tsx

@@ -3,6 +3,7 @@ import WrapperTag from '../../common/wrapper-tag';
 const NotificationPanel: React.FC<SGDS.Component.NotificationPanel> = function ({
     ariaLive,
     children,
+    className,
     headerLevel = 'h1',
     title,
     ...props
@@ -10,7 +11,10 @@ const NotificationPanel: React.FC<SGDS.Component.NotificationPanel> = function (
     return (
         <div
             aria-live={ariaLive}
-            className="ds_notification-panel"
+            className={[
+                'ds_notification-panel',
+                className
+            ].join(' ')}
             {...props}
         >
             <WrapperTag

package/src/components/page-header/page-header.test.tsx

@@ -46,3 +46,12 @@ test('passing additional props', () => {
     const header = screen.getByRole('banner');
     expect(header?.dataset.test).toEqual('foo');
 });
+
+test('passing additional CSS classes', () => {
+    render(
+       <PageHeader className="foo" label={labelText} title={titleText}/>
+    )
+
+    const header = screen.getByRole('banner');
+    expect(header).toHaveClass('foo', 'ds_page-header');
+});

package/src/components/page-header/page-header.tsx

@@ -1,12 +1,16 @@
 const PageHeader: React.FC<SGDS.Component.PageHeader> = ({
     children,
+    className,
     label,
     title,
     ...props
 }) => {
     return (
         <header
-            className="ds_page-header"
+            className={[
+                'ds_page-header',
+                className
+            ].join(' ')}
             {...props}
         >
             {label && <span className="ds_page-header__label  ds_content-label">{label}</span>}

package/src/components/page-metadata/page-metadata.test.tsx

@@ -54,3 +54,18 @@ test('passing additional props', () => {
     expect(metadata?.dataset.test).toEqual('foo');
     expect(metadataItem?.dataset.test).toEqual('bar');
 });
+
+test('passing additional CSS classes', () => {
+    render(
+        <Metadata className="foo">
+            <MetadataItem className="bar" name="Last updated">
+                21/04/2020
+            </MetadataItem>
+        </Metadata>
+    )
+
+    const metadata = document.querySelector('.ds_metadata');
+    const metadataItem = document.querySelector('.ds_metadata__item');
+    expect(metadata).toHaveClass('foo');
+    expect(metadataItem).toHaveClass('bar');
+});

package/src/components/page-metadata/page-metadata.tsx

@@ -1,10 +1,14 @@
 export const MetadataItem: React.FC<SGDS.Component.Metadata.Item> = ({
     children,
+    className,
     name,
     ...props
 }) => {
     return (
-        <div className="ds_metadata__item"
+        <div className={[
+            'ds_metadata__item',
+            className
+        ].join(' ')}
             {...props}
         >
             <dt className="ds_metadata__key">{name}</dt>{' '}
@@ -17,6 +21,7 @@ export const MetadataItem: React.FC<SGDS.Component.Metadata.Item> = ({
 
 const Metadata: React.FC<SGDS.Component.Metadata> = ({
     children,
+    className,
     inline,
     ...props
 }) => {
@@ -25,6 +30,7 @@ const Metadata: React.FC<SGDS.Component.Metadata> = ({
             className={[
                 'ds_metadata',
                 inline && 'ds_metadata--inline',
+                className
             ].join(' ')}
             {...props}
         >

package/src/components/phase-banner/phase-banner.test.tsx

@@ -65,3 +65,14 @@ test('passing additional props', () => {
     const phaseBanner = document.querySelector('.ds_phase-banner');
     expect(phaseBanner?.dataset.test).toEqual('foo');
 });
+
+test('passing additional CSS classes', () => {
+    render(
+        <PhaseBanner className="foo">
+            This is a new service. Your <a href="#feedback">feedback</a> will help us to improve it.
+        </PhaseBanner>
+    )
+
+    const phaseBanner = document.querySelector('.ds_phase-banner');
+    expect(phaseBanner).toHaveClass('foo', 'ds_phase-banner');
+});

package/src/components/phase-banner/phase-banner.tsx

@@ -2,12 +2,16 @@ import Tag from "../tag/tag";
 
 const PhaseBanner: React.FC<SGDS.Component.PhaseBanner> = ({
     children,
+    className,
     phaseName,
     ...props
 }) => {
     return (
         <div
-            className="ds_phase-banner"
+            className={[
+                'ds_phase-banner',
+                className
+            ].join(' ')}
             {...props}
         >
             <div className="ds_wrapper">

package/src/components/question/question.test.tsx

@@ -67,3 +67,13 @@ test('passing additional props', () => {
     const questionElement = document.querySelector('.ds_question');
     expect(questionElement?.dataset.test).toEqual('foo');
 });
+
+test('passing additional CSS classes', () => {
+    render(
+        <Question className="foo">
+        </Question>
+    )
+
+    const questionElement = document.querySelector('.ds_question');
+    expect(questionElement).toHaveClass('foo', 'ds_question');
+});

package/src/components/question/question.tsx

@@ -4,6 +4,7 @@ import WrapperTag from '../../common/wrapper-tag';
 
 const Question: React.FC<SGDS.Component.Question> = function ({
     children,
+    className,
     error,
     errorMessage,
     hintText,
@@ -16,7 +17,8 @@ const Question: React.FC<SGDS.Component.Question> = function ({
             tagName={tagName}
             className={[
                 'ds_question',
-                error && 'ds_question--error'
+                error && 'ds_question--error',
+                className
             ].join(' ')}
             {...props}
         >

package/src/components/radio-button/radio-button.test.tsx

@@ -188,3 +188,16 @@ test('passing additional props', () => {
     const groupContainer = radios[0]?.parentNode?.parentNode;
     expect(groupContainer?.dataset.test).toEqual('foo');
 });
+
+test('passing additional CSS classes', () => {
+    render(
+        <RadioGroup className="foo" items={[{
+            id: 'universal-credit',
+            label: 'Universal Credit'
+        }]} />
+    );
+
+    const radios = screen.getAllByRole('radio');
+    const groupContainer = radios[0]?.parentNode?.parentNode;
+    expect(groupContainer).toHaveClass('foo', 'ds_radios');
+});

package/src/components/radio-button/radio-button.tsx

@@ -49,6 +49,7 @@ export const Radio: React.FC<SGDS.Component.RadioButton> = ({
 };
 
 const RadioGroup: React.FC<SGDS.Component.RadioButton.Group> = ({
+    className,
     inline,
     items,
     name,
@@ -60,7 +61,8 @@ const RadioGroup: React.FC<SGDS.Component.RadioButton.Group> = ({
             className={[
                 'ds_radios',
                 'ds_field-group',
-                inline && 'ds_field-group--inline'
+                inline && 'ds_field-group--inline',
+                className
             ].join(' ')}
             {...props}
         >

package/src/components/select/select.test.tsx

@@ -206,3 +206,18 @@ test('passing additional props', () => {
     const selectWrapper = select.parentNode;
     expect(selectWrapper?.dataset.test).toEqual('foo');
 });
+
+test('passing additional CSS classes', () => {
+    render(
+        <Select
+            id={id}
+            label={labelText}
+            options={options}
+            className="foo"
+        />
+    );
+
+    const select = screen.getByRole('combobox');
+    const selectWrapper = select.parentNode;
+    expect(selectWrapper).toHaveClass('foo', 'ds_select-wrapper');
+});

package/src/components/select/select.tsx

@@ -11,6 +11,7 @@ const Option: React.FC<SGDS.Component.Select.Option> = function ({
 };
 
 const Select: React.FC<SGDS.Component.Select> = function ({
+    className,
     defaultValue,
     error,
     errorMessage,
@@ -54,6 +55,7 @@ const Select: React.FC<SGDS.Component.Select> = function ({
                     "ds_select-wrapper",
                     error && 'ds_input--error',
                     width && `ds_input--${width}`,
+                    className
                 ].join(' ')}
                 {...props}
             >

package/src/components/sequential-navigation/sequential-navigation.test.tsx

@@ -65,3 +65,16 @@ test('passing additional props', () => {
     const sequentialNavigation = screen.getByRole('navigation');
     expect(sequentialNavigation?.dataset.test).toEqual('foo');
 });
+
+test('passing additional CSS classes', () => {
+    render(
+        <SequentialNavigation
+            className="foo"
+            next={nextLinkObj}
+            previous={prevLinkObj}
+        />
+    );
+
+    const sequentialNavigation = screen.getByRole('navigation');
+    expect(sequentialNavigation).toHaveClass('foo', 'ds_sequential-nav');
+});

package/src/components/sequential-navigation/sequential-navigation.tsx

@@ -34,13 +34,17 @@ const PrevLink: React.FC<SGDS.Component.SequentialNavigation.Link> = ({
 
 const SequentialNavigation: React.FC<SGDS.Component.SequentialNavigation> = ({
     ariaLabel = 'Article navigation',
+    className,
     next,
     previous,
     ...props
 }) => {
     return (
         <nav
-            className="ds_sequential-nav"
+            className={[
+                'ds_sequential-nav',
+                className
+            ].join(' ')}
             aria-label={ariaLabel}
             {...props}
         >

package/src/components/side-navigation/side-navigation.test.tsx

@@ -154,3 +154,21 @@ test('side nav list renders correctly', () => {
     expect(link).toHaveAttribute('href', '#bramley');
     expect(link.textContent).toEqual('Bramley');
 });
+
+test('passing additional props', () => {
+    render(
+        <SideNavigation data-test="foo" items={items} />
+    );
+
+    const sideNavigation = screen.getByRole('navigation');
+    expect(sideNavigation?.dataset.test).toEqual('foo');
+});
+
+test('passing additional CSS classes', () => {
+    render(
+        <SideNavigation className="foo" items={items} />
+    );
+
+    const sideNavigation = screen.getByRole('navigation');
+    expect(sideNavigation).toHaveClass('foo', 'ds_side-navigation');
+});

package/src/components/side-navigation/side-navigation.tsx

@@ -48,6 +48,7 @@ export const Link: React.FC<SGDS.Component.SideNavigation.Link> = function ({
 
 const SideNavigation: React.FC<SGDS.Component.SideNavigation> = function ({
     children,
+    className,
     items,
     ...props
 }) {
@@ -62,7 +63,10 @@ const SideNavigation: React.FC<SGDS.Component.SideNavigation> = function ({
     return (
         <nav
             aria-label="Sections"
-            className="ds_side-navigation"
+            className={[
+                'ds_side-navigation',
+                className
+            ].join(' ')}
             data-module="ds-side-navigation"
             ref={ref}
             {...props}

package/src/components/site-navigation/site-navigation.test.tsx

@@ -61,3 +61,12 @@ test('passing additional props', () => {
     const nav = screen.getByRole('navigation');
     expect(nav.dataset.test).toEqual('foo');
 });
+
+test('passing additional CSS classes', () => {
+    render(
+        <SiteNavigation className="foo" items={items}/>
+    );
+
+    const nav = screen.getByRole('navigation');
+    expect(nav).toHaveClass('foo', 'ds_site-navigation');
+});

package/src/components/site-navigation/site-navigation.tsx

@@ -18,12 +18,16 @@ const SiteNavLink: React.FC<SGDS.Component.SiteNavigation.Link> = ({
 };
 
 const SiteNavigation: React.FC<SGDS.Component.SiteNavigation> = ({
+    className,
     items,
     ...props
 }) => {
     return (
         <nav
-            className="ds_site-navigation"
+            className={[
+                'ds_site-navigation',
+                className
+            ].join(' ')}
             {...props}
         >
             <ul className="ds_site-navigation__list">

package/src/components/site-search/site-search.test.tsx

@@ -151,3 +151,13 @@ test('passing additional props', () => {
     const searchFormContainer = searchForm.parentNode;
     expect(searchFormContainer?.dataset.test).toEqual('foo');
 });
+
+test('passing additional CSS classes', () => {
+    render(
+        <SiteSearch className="foo" />
+    );
+
+    const searchForm = screen.getByRole('search');
+    const searchFormContainer = searchForm.parentNode;
+    expect(searchFormContainer).toHaveClass('foo', 'ds_site-search');
+});

package/src/components/site-search/site-search.tsx

@@ -7,6 +7,7 @@ const SiteSearch: React.FC<SGDS.Component.SiteSearch> = function ({
     action = '/search',
     autocompleteEndpoint,
     autocompleteSuggestionMappingFunction,
+    className,
     id = 'site-search',
     method = 'GET',
     minLength = 3,
@@ -47,7 +48,8 @@ const SiteSearch: React.FC<SGDS.Component.SiteSearch> = function ({
     return (
         <div
             className={[
-                'ds_site-search',
+                'ds_site-search', ,
+                className,
                 hasAutocomplete ? 'ds_autocomplete' : undefined
             ].join(' ')}
             id={autocompleteId ? autocompleteId : undefined}

package/src/components/tag/tag.test.tsx

@@ -25,21 +25,21 @@ test('tag with custom colour', () => {
     expect(tag).toHaveClass('ds_tag--red');
 });
 
-test('tag with additional CSS class', () => {
+test('passing additional props', () => {
     render(
-        <Tag className="foo" title={tagText}/>
+        <Tag data-test="foo" title={tagText}/>
     );
 
     const tag = screen.getByText(tagText);
-
-    expect(tag).toHaveClass('foo');
+    expect(tag?.dataset.test).toEqual('foo');
 });
 
-test('passing additional props', () => {
+test('tag with additional CSS class', () => {
     render(
-        <Tag data-test="foo" title={tagText}/>
+        <Tag className="foo" title={tagText}/>
     );
 
     const tag = screen.getByText(tagText);
-    expect(tag?.dataset.test).toEqual('foo');
+
+    expect(tag).toHaveClass('foo', 'ds_tag');
 });

package/src/components/task-list/task-list.test.tsx

@@ -388,6 +388,19 @@ test('task list counts completed items from all groups for its status text and t
     expect(taskListStatusLink).toHaveAttribute('href', `#${tasks[0].id + '2'}`);
 });
 
+test('passing additional props to task list', () => {
+    render(
+        <TaskList
+            title={taskListHeadingText}
+            data-test="foo"
+        />
+    );
+
+    const taskList = screen.getByRole('list');
+    const taskListWrapper = taskList.parentNode;
+    expect(taskListWrapper?.dataset.test).toEqual('foo');
+});
+
 test('passing additional props to task group', () => {
     render(
         <TaskGroup data-test="foo">
@@ -407,3 +420,36 @@ test('passing additional props to task', () => {
     const task = document.querySelector('.ds_task-list__task');
     expect(task?.dataset.test).toEqual('foo');
 });
+
+test('passing additional CSS classes to task list', () => {
+    render(
+        <TaskList
+            title={taskListHeadingText}
+            className="foo"
+        />
+    );
+
+    const taskList = screen.getByRole('list');
+    const taskListWrapper = taskList.parentNode;
+    expect(taskListWrapper).toHaveClass('foo');
+});
+
+test('passing additional CSS classes to task group', () => {
+    render(
+        <TaskGroup className="foo">
+        </TaskGroup>
+    );
+
+    const taskGroup = document.querySelector('.ds_task-list-group__section');
+    expect(taskGroup).toHaveClass('foo', 'ds_task-list-group__section');
+});
+
+test('passing additional CSS classes to task', () => {
+    render(
+        <Task className="foo">
+        </Task>
+    );
+
+    const task = document.querySelector('.ds_task-list__task');
+    expect(task).toHaveClass('foo', 'ds_task-list__task');
+});

package/src/components/task-list/task-list.tsx

@@ -6,6 +6,7 @@ import Tag from '../tag/tag';
 
 export const Task: React.FC<SGDS.Component.TaskList.Task> = ({
     children,
+    className,
     href,
     id,
     isComplete = false,
@@ -20,7 +21,10 @@ export const Task: React.FC<SGDS.Component.TaskList.Task> = ({
 
     return (
         <li
-            className="ds_task-list__task"
+            className={[
+                'ds_task-list__task',
+                className
+            ].join(' ')}
             id={id}
             {...props}
         >
@@ -56,13 +60,17 @@ export const Task: React.FC<SGDS.Component.TaskList.Task> = ({
  */
 export const TaskGroup: React.FC<SGDS.Component.TaskList.Group> = ({
     children,
+    className,
     intro,
     title,
     ...props
 }) => {
     return (
         <li
-            className="ds_task-list-group__section"
+            className={[
+                'ds_task-list-group__section',
+                className
+            ].join(' ')}
             {...props}
         >
             <h2 className="ds_task-list-heading">{title}</h2>
@@ -76,8 +84,10 @@ export const TaskGroup: React.FC<SGDS.Component.TaskList.Group> = ({
 
 const TaskList: React.FC<SGDS.Component.TaskList> = ({
     children,
+    className,
     headingId = 'task-list',
-    title
+    title,
+    ...props
 }) => {
     let taskCount = 0;
     let incompleteTaskIds: string[] = [];
@@ -112,7 +122,10 @@ const TaskList: React.FC<SGDS.Component.TaskList> = ({
     });
 
     return (
-        <>
+        <div
+            className={className}
+            {...props}
+        >
             <h2 id={`${headingId}-status`} className="ds_task-list-status-heading">{title}</h2>
             <nav aria-labelledby={`${headingId}-status`} className="ds_task-list-status">
                 <p>You have completed {completedTasksCount} of {taskCount} sections.</p>
@@ -121,7 +134,7 @@ const TaskList: React.FC<SGDS.Component.TaskList> = ({
             <ul className="ds_task-list">
                 {children}
             </ul>
-        </>
+        </div>
     );
 };