@scottish-government/designsystem-react 0.12.1 → 1.0.0

package/src/components/FeatureHeader/FeatureHeader.tsx

@@ -1,94 +1,119 @@
-import ConditionalWrapper from "../../common/ConditionalWrapper";
+import React, { Children, createContext, useContext } from 'react';
+import { FeatureHeaderProps, FeatureHeaderPrimaryProps } from './types';
+import { ConditionalWrapper, WrapperTag } from '../../common';
+import clsx from 'clsx';
 
-const Content = ({ children, className, ...props }: any /* SGDS.Component.FeatureHeader.Primary*/) => {
+type FeatureHeaderSettingsContextProps = {
+    hasCoverImage?: boolean,
+    hasNoImagePadding?: boolean
+}
+
+const FeatureHeaderSettingsContext = createContext<FeatureHeaderSettingsContextProps>({
+    hasCoverImage: undefined,
+    hasNoImagePadding: undefined
+});
+
+const Primary = ({
+    children,
+    title,
+    ...props
+}: FeatureHeaderPrimaryProps) => {
     return (
-        <div className={['ds_feature-header__primary', className].join(' ')} {...props}>
+        <div
+            className="ds_feature-header__primary"
+            {...props}
+        >
+            <h1 className="ds_feature-header__title">
+                {title}
+            </h1>
             {children}
         </div>
-    );
-}
+    )
+};
+
+const Secondary = ({
+    children,
+    ...props
+}: React.AllHTMLAttributes<HTMLDivElement>) => {
+    const hasCoverImage = useContext(FeatureHeaderSettingsContext).hasCoverImage;
+    const hasNoImagePadding = useContext(FeatureHeaderSettingsContext).hasNoImagePadding;
+
+    children = Children.map(children, child => {
+        const thisChild = child as React.ReactElement<HTMLElement>;
+        if (thisChild && ['img', 'svg', 'picture'].includes(thisChild.type as string)) {
+            return React.cloneElement(thisChild, { className: 'ds_feature-header__image' });
+        } else {
+            return child;
+        }
+    });
 
-const Media = ({ children, className, isCover, noPadding, ...props }: any /* SGDS.Component.FeatureHeader.Secondary*/) => {
     return (
-        <div className={[
+        <div className={clsx([
             'ds_feature-header__secondary',
-            isCover && 'ds_feature-header__secondary--cover',
-            noPadding && 'ds_feature-header__secondary--no-padding',
-            className
-        ].join(' ')} {...props}>
+            hasCoverImage && 'ds_feature-header__secondary--cover',
+            hasNoImagePadding && 'ds_feature-header__secondary--no-padding'
+        ])}
+            {...props}
+        >
             {children}
         </div>
     );
-}
+};
 
 const FeatureHeader = ({
-    backgroundColour = 'NONE',
+    backgroundColor,
     children,
     className,
+    hasCoverImage,
+    hasNoImagePadding,
+    id,
     isFullWidth,
-    isTopAligned,
     isWideText,
+    isTopAlignImage,
+    tagName = 'div',
     ...props
-}: any /* SGDS.Component.FeatureHeader*/) => {
-    let backgroundColorClass = '';
-
-    switch (backgroundColour) {
-        case 'BRAND':
-            backgroundColorClass = 'ds_feature-header--background';
-            break;
-        case 'SECONDARY':
-            backgroundColorClass = 'ds_feature-header--background-secondary';
-            break;
-        case 'TERTIARY':
-            backgroundColorClass = 'ds_feature-header--background-tertiary';
-            break;
-        case 'NONE':
-            break;
-        default:
-            backgroundColorClass = '';
-            break;
+}: FeatureHeaderProps) => {
+    let backgroundColorClassName;
+    if (backgroundColor === 'secondary') {
+        backgroundColorClassName = 'ds_feature-header--background-secondary';
+    } else if (backgroundColor === 'tertiary') {
+        backgroundColorClassName = 'ds_feature-header--background-tertiary';
+    } else if (backgroundColor === 'brand') {
+        backgroundColorClassName = 'ds_feature-header--background';
     }
 
     return (
-        <header
-            className={[
+        <WrapperTag
+            className={clsx([
                 'ds_feature-header',
                 isFullWidth && 'ds_feature-header--fullwidth',
-                isTopAligned && 'ds_feature-header--top',
                 isWideText && 'ds_feature-header--wide',
-                backgroundColorClass,
+                isTopAlignImage && 'ds_feature-header--top',
+                backgroundColorClassName && backgroundColorClassName,
                 className
-            ].join(' ')}
+            ])}
+            id={id}
+            tagName={tagName}
             {...props}
         >
             <ConditionalWrapper
-                condition={isFullWidth}
+                condition={!!isFullWidth}
                 wrapper={(children: React.JSX.Element) => <div className="ds_wrapper">{children}</div>}
             >
-                {children}
+                <FeatureHeaderSettingsContext value={{
+                    hasCoverImage, hasNoImagePadding
+                }}>
+                    {children}
+                </FeatureHeaderSettingsContext>
             </ConditionalWrapper>
-        </header>
+        </WrapperTag>
     );
 };
 
 FeatureHeader.displayName = 'FeatureHeader';
-Content.displayName = 'FeatureHeader.Content';
-Media.displayName = 'FeatureHeader.Media';
-FeatureHeader.Content = Content;
-FeatureHeader.Media = Media;
+Primary.displayName = 'FeatureHeader.Primary';
+Secondary.displayName = 'FeatureHeader.Secondary';
+FeatureHeader.Primary = Primary;
+FeatureHeader.Secondary = Secondary;
 
 export default FeatureHeader;
-
-
-/*
-
-<FeatureHeader backgroundColour="NONE/BRAND/SECONDARY/TERTIARY" isFullWidth isWideText isTopAligned>
-    <FeatureHeader.Content>
-        {children}
-    </FeatureHeader.Content>
-    <FeatureHeader.Media noPadding isCover>
-        {children}
-    </FeatureHeader.Media>
-</FeatureHeader>
-
-*/

package/src/components/FeatureHeader/types.ts

@@ -0,0 +1,13 @@
+export interface FeatureHeaderPrimaryProps extends React.AllHTMLAttributes<HTMLElement> {
+    title: string
+}
+
+export interface FeatureHeaderProps extends React.AllHTMLAttributes<HTMLElement> {
+    backgroundColor?: 'secondary' | 'tertiary' | 'brand'
+    hasCoverImage?: boolean
+    hasNoImagePadding?: boolean
+    isFullWidth?: boolean
+    isWideText?: boolean
+    isTopAlignImage?: boolean
+    tagName?: 'div' | 'header'
+}

package/src/components/FileDownload/FileDownload.test.tsx

@@ -53,10 +53,6 @@ test('highlighted file download', () => {
     expect(fileDownload).toHaveClass('ds_file-download--highlighted');
 });
 
-// test('file download with specific icon', () => {
-
-// });
-
 test('file download with cover image', () => {
     const COVER_URL = 'my-image.png';
 
@@ -66,7 +62,7 @@ test('file download with cover image', () => {
 
     const thumbnailImage = screen.getByRole('presentation', {hidden: true});
 
-    expect(thumbnailImage).toHaveClass('ds_file-download__thumbnail-image');
+    expect(thumbnailImage).toHaveClass('ds_file-download__thumbnail-image', 'ds_file-download__thumbnail-image--outlined');
     expect(thumbnailImage).toHaveAttribute('alt', '');
     expect(thumbnailImage).toHaveAttribute('src', COVER_URL);
     expect(thumbnailImage.tagName).toEqual('IMG');

package/src/components/FileDownload/FileDownload.tsx

@@ -1,5 +1,7 @@
 import { useId } from 'react';
 import FileIcon from '../../common/FileIcon';
+import { FileDownloadProps } from './types';
+import clsx from 'clsx';
 
 const FileDownload = ({
     className,
@@ -11,22 +13,22 @@ const FileDownload = ({
     fileUrl,
     title,
     ...props
-}: SGDS.Component.FileDownload) => {
+}: FileDownloadProps) => {
     const hasMetadata = !!fileType || !!fileSize;
     const metaContainerId = `file-download-${useId()}`;
 
     return (
-        <div className={[
+        <div className={clsx([
             'ds_file-download',
             isHighlighted && 'ds_file-download--highlighted',
             className
-        ].join(' ')}
+        ])}
             {...props}
         >
             <div className="ds_file-download__thumbnail">
                 <a className="ds_file-download__thumbnail-link" aria-hidden="true" tabIndex={-1} href={fileUrl}>
                     {cover ?
-                        <img alt="" className="ds_file-download__thumbnail-image" src={cover}/>
+                        <img alt="" className="ds_file-download__thumbnail-image  ds_file-download__thumbnail-image--outlined" src={cover}/>
                     :
                         <FileIcon ariaLabel="" className="ds_file-download__thumbnail-image" icon={icon} />
                     }

package/src/components/FileDownload/types.ts

@@ -0,0 +1,11 @@
+import { DocumentIconName } from '../../shared-types';
+
+export interface FileDownloadProps extends React.AllHTMLAttributes<HTMLElement> {
+    cover?: string;
+    fileSize?: string;
+    fileType?: string;
+    fileUrl: string;
+    icon?: DocumentIconName;
+    isHighlighted?: boolean;
+    title: string;
+}

package/src/components/HideThisPage/HideThisPage.test.tsx

@@ -49,7 +49,18 @@ test('custom escape URL', () => {
     const link = within(hideThisPageElement).getByRole('link');
 
     expect(link).toHaveAttribute('href', ESCAPE_URL);
-})
+});
+
+test('instantiating/initialising DS component script', () => {
+    render(
+        <HideThisPage data-testid="htp" />
+    );
+
+    const hideThisPageElement = screen.getByTestId('htp');
+    const link = within(hideThisPageElement).getByRole('link');
+    expect(link).toHaveClass('js-initialised');
+    expect(link).toHaveClass('js-instantiated');
+});
 
 test('passing additional props', () => {
     render(

package/src/components/HideThisPage/HideThisPage.tsx

@@ -1,17 +1,19 @@
 import React, { useEffect, useRef } from 'react';
-// @ts-ignore
 import DSHideThisPage from '@scottish-government/design-system/src/components/hide-this-page/hide-this-page';
+import { HideThisPageProps } from './types';
+import clsx from 'clsx';
 
 const HideThisPage = ({
     className,
     escapeUrl = 'https://www.bbc.co.uk/weather',
     ...props
-}: SGDS.Component.HideThisPage) => {
+}: HideThisPageProps) => {
     const ref = useRef(null);
 
     useEffect(() => {
+        /* istanbul ignore else */
         if (ref.current) {
-            new DSHideThisPage().init();
+            new DSHideThisPage(ref.current).init();
 
             const HIDE_THIS_PAGE_DIV_ID = 'hide-this-page-instruction';
             if (!document.getElementById(HIDE_THIS_PAGE_DIV_ID)) {
@@ -29,10 +31,10 @@ const HideThisPage = ({
 
     return (
         <div
-            className={[
+            className={clsx([
                 'ds_hide-page',
                 className
-            ].join(' ')}
+            ])}
             ref={ref}
             {...props}
         >

package/src/components/HideThisPage/types.ts

@@ -0,0 +1,3 @@
+export interface HideThisPageProps extends React.AllHTMLAttributes<HTMLElement> {
+    escapeUrl?: string;
+}

package/src/components/InsetText/InsetText.tsx

@@ -1,14 +1,16 @@
+import clsx from 'clsx';
+
 const InsetText = ({
     children,
     className,
     ...props
-}: SGDS.Component.InsetText) => {
+}: React.AllHTMLAttributes<HTMLElement>) => {
     return (
         <div
-            className={[
+            className={clsx([
                 'ds_inset-text',
                 className
-            ].join(' ')}
+            ])}
             {...props}
         >
             <div className="ds_inset-text__text">

package/src/components/NotificationBanner/NotificationBanner.stories.tsx

@@ -13,7 +13,7 @@ const meta = {
             description: 'Makes the icon display in the alternative colour scheme'
         },
         hasIcon: {
-            description: 'Shows the ‘high priority’ icon on the notification banner',
+            description: 'Shows the \'high priority\' icon on the notification banner',
             control: 'boolean'
         },
         hasInverseIcon: {
@@ -22,7 +22,7 @@ const meta = {
          },
         isDismissable: {
             control: 'boolean',
-            description: 'Shows a ‘close’ button on the notification banner'
+            description: 'Shows a \'close\' button on the notification banner'
          },
         title: {
             description: 'A hidden title for the notification banner, useful for screen reader users',

package/src/components/NotificationBanner/NotificationBanner.test.tsx

@@ -42,3 +42,13 @@ test('notification banner with icon', () => {
     expect(bannerIcon).toHaveClass('ds_icon');
     expect(bannerIcon).toHaveAttribute('aria-hidden');
 });
+
+test('instantiating/initialising DS component script', () => {
+    render(
+        <NotificationBanner data-testid="notification-banner" />
+    );
+
+    const notificationBanner = screen.getByTestId('notification-banner');
+    expect(notificationBanner).toHaveClass('js-initialised');
+    expect(notificationBanner).toHaveClass('js-instantiated');
+});

package/src/components/NotificationBanner/NotificationBanner.tsx

@@ -1,7 +1,8 @@
 import { useEffect, useRef } from 'react';
 import AbstractNotificationBanner from '../../common/AbstractNotificationBanner';
-// @ts-ignore
 import DSNotificationBanner from '@scottish-government/design-system/src/components/notification-banner/notification-banner';
+import { AbstractNotificationBannerProps } from '../../common/AbstractNotificationBanner/types';
+import clsx from 'clsx';
 
 const NotificationBanner = ({
     children,
@@ -10,12 +11,13 @@ const NotificationBanner = ({
     hasIcon,
     hasInverseIcon,
     isDismissable,
-    title,
+    title = 'Information',
     ...props
-}: SGDS.Common.AbstractNotificationBanner) => {
+}: AbstractNotificationBannerProps) => {
     const ref = useRef(null);
 
     useEffect(() => {
+        /* istanbul ignore else */
         if (ref.current) {
             new DSNotificationBanner(ref.current).init();
         }
@@ -23,16 +25,16 @@ const NotificationBanner = ({
 
     return (
         <AbstractNotificationBanner
-            className={[
+            className={clsx([
                 'ds_reversed',
                 className
-            ].join(' ')}
+            ])}
             isDismissable={isDismissable}
             icon={hasIcon ? "PriorityHigh" : undefined}
             hasColourIcon={hasColourIcon}
             hasInverseIcon={hasInverseIcon}
             ref={ref}
-            title="Information"
+            title={title}
             {...props}
         >
             {children}

package/src/components/NotificationPanel/NotificationPanel.tsx

@@ -1,4 +1,6 @@
 import WrapperTag from '../../common/WrapperTag';
+import { NotificationPanelProps } from './types';
+import clsx from 'clsx';
 
 const NotificationPanel = function ({
     ariaLive,
@@ -7,14 +9,14 @@ const NotificationPanel = function ({
     headingLevel = 'h1',
     title,
     ...props
-}: SGDS.Component.NotificationPanel) {
+}: NotificationPanelProps) {
     return (
         <div
             aria-live={ariaLive}
-            className={[
+            className={clsx([
                 'ds_notification-panel',
                 className
-            ].join(' ')}
+            ])}
             {...props}
         >
             <WrapperTag

package/src/components/NotificationPanel/types.ts

@@ -0,0 +1,7 @@
+import { HeadingLevel } from '../../shared-types';
+
+export interface NotificationPanelProps extends React.AllHTMLAttributes<HTMLDivElement> {
+    ariaLive?: React.AriaAttributes['aria-live'];
+    headingLevel?: HeadingLevel;
+    title: string;
+}

package/src/components/NotificationTag/NotificationTag.stories.tsx

@@ -0,0 +1,68 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import argTypes from '../../../.storybook/sgdsArgTypes';
+
+import NotificationTag from './NotificationTag';
+
+const meta = {
+    title: 'Components/Notification Tag',
+    component: NotificationTag,
+    argTypes: {
+        children: argTypes.children(),
+        description: {
+            description: 'Additional description for screen readers',
+            type: 'string'
+        },
+        label: {
+            description: 'Visible label, leave blank for a dot notification tag',
+            type: 'string'
+        },
+        isHidden: {
+            description: 'Hides the tag from screen readers',
+            control: 'boolean',
+        },
+    },
+    args: {
+        label: '99+',
+        description: 'Unread notifications'
+    }
+} satisfies Meta<typeof NotificationTag>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    render: (args) => (
+        <NotificationTag {...args}
+            >
+            <svg className="ds_icon ds_icon--40" aria-hidden="true" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 40" width="30" height="40" fill="none">
+                <path d="m2.77792 35c-.75 0-1.40056-.2754-1.95167-.8262-.550833-.5512-.82625-1.2017-.82625-1.9517v-24.44418c0-.75.275417-1.40056.82625-1.95167.55111-.55083 1.20167-.82625 1.95167-.82625h24.44418c.75 0 1.4005.27542 1.9517.82625.5508.55111.8262 1.20167.8262 1.95167v24.44418c0 .75-.2754 1.4005-.8262 1.9517-.5512.5508-1.2017.8262-1.9517.8262zm5.19416-6.6387h8.75002c.3936 0 .7235-.1337.9896-.4009.2664-.2672.3995-.5982.3995-.9929 0-.395-.1331-.7244-.3995-.9883-.2661-.2639-.596-.3959-.9896-.3959h-8.75002c-.39333 0-.72319.1336-.98958.4009-.26611.2669-.39917.5979-.39917.9929s.13306.7244.39917.9883c.26639.2639.59625.3959.98958.3959zm0-6.9726h14.05582c.3933 0 .7232-.1334.9896-.4004.2661-.2672.3992-.5983.3992-.9933 0-.3947-.1331-.724-.3992-.9879-.2664-.2639-.5963-.3959-.9896-.3959h-14.05582c-.39333 0-.72319.1335-.98958.4005-.26611.2672-.39917.5983-.39917.9933 0 .3947.13306.724.39917.9879.26639.2639.59625.3958.98958.3958zm0-6.972h14.05582c.3933 0 .7232-.1336.9896-.4009.2661-.2669.3992-.5979.3992-.9929s-.1331-.7244-.3992-.9883c-.2664-.2639-.5963-.3958-.9896-.3958h-14.05582c-.39333 0-.72319.1336-.98958.4008-.26611.2672-.39917.5982-.39917.9929 0 .395.13306.7244.39917.9883.26639.2639.59625.3959.98958.3959z" />
+            </svg>
+        </NotificationTag>
+    )
+};
+
+export const Dot: Story = {
+    args: {
+        label: ''
+    },
+    render: (args) => (
+        <NotificationTag {...args}
+            >
+            <svg className="ds_icon ds_icon--40" aria-hidden="true" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 40" width="30" height="40" fill="none">
+                <path d="m2.77792 35c-.75 0-1.40056-.2754-1.95167-.8262-.550833-.5512-.82625-1.2017-.82625-1.9517v-24.44418c0-.75.275417-1.40056.82625-1.95167.55111-.55083 1.20167-.82625 1.95167-.82625h24.44418c.75 0 1.4005.27542 1.9517.82625.5508.55111.8262 1.20167.8262 1.95167v24.44418c0 .75-.2754 1.4005-.8262 1.9517-.5512.5508-1.2017.8262-1.9517.8262zm5.19416-6.6387h8.75002c.3936 0 .7235-.1337.9896-.4009.2664-.2672.3995-.5982.3995-.9929 0-.395-.1331-.7244-.3995-.9883-.2661-.2639-.596-.3959-.9896-.3959h-8.75002c-.39333 0-.72319.1336-.98958.4009-.26611.2669-.39917.5979-.39917.9929s.13306.7244.39917.9883c.26639.2639.59625.3959.98958.3959zm0-6.9726h14.05582c.3933 0 .7232-.1334.9896-.4004.2661-.2672.3992-.5983.3992-.9933 0-.3947-.1331-.724-.3992-.9879-.2664-.2639-.5963-.3959-.9896-.3959h-14.05582c-.39333 0-.72319.1335-.98958.4005-.26611.2672-.39917.5983-.39917.9933 0 .3947.13306.724.39917.9879.26639.2639.59625.3958.98958.3958zm0-6.972h14.05582c.3933 0 .7232-.1336.9896-.4009.2661-.2669.3992-.5979.3992-.9929s-.1331-.7244-.3992-.9883c-.2664-.2639-.5963-.3958-.9896-.3958h-14.05582c-.39333 0-.72319.1336-.98958.4008-.26611.2672-.39917.5982-.39917.9929 0 .395.13306.7244.39917.9883.26639.2639.59625.3959.98958.3959z" />
+            </svg>
+        </NotificationTag>
+    )
+};
+
+export const Hidden: Story = {
+    render: (args) => (
+        <NotificationTag {...args}
+            isHidden
+            >
+            <svg className="ds_icon ds_icon--40" aria-hidden="true" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 40" width="30" height="40" fill="none">
+                <path d="m2.77792 35c-.75 0-1.40056-.2754-1.95167-.8262-.550833-.5512-.82625-1.2017-.82625-1.9517v-24.44418c0-.75.275417-1.40056.82625-1.95167.55111-.55083 1.20167-.82625 1.95167-.82625h24.44418c.75 0 1.4005.27542 1.9517.82625.5508.55111.8262 1.20167.8262 1.95167v24.44418c0 .75-.2754 1.4005-.8262 1.9517-.5512.5508-1.2017.8262-1.9517.8262zm5.19416-6.6387h8.75002c.3936 0 .7235-.1337.9896-.4009.2664-.2672.3995-.5982.3995-.9929 0-.395-.1331-.7244-.3995-.9883-.2661-.2639-.596-.3959-.9896-.3959h-8.75002c-.39333 0-.72319.1336-.98958.4009-.26611.2669-.39917.5979-.39917.9929s.13306.7244.39917.9883c.26639.2639.59625.3959.98958.3959zm0-6.9726h14.05582c.3933 0 .7232-.1334.9896-.4004.2661-.2672.3992-.5983.3992-.9933 0-.3947-.1331-.724-.3992-.9879-.2664-.2639-.5963-.3959-.9896-.3959h-14.05582c-.39333 0-.72319.1335-.98958.4005-.26611.2672-.39917.5983-.39917.9933 0 .3947.13306.724.39917.9879.26639.2639.59625.3958.98958.3958zm0-6.972h14.05582c.3933 0 .7232-.1336.9896-.4009.2661-.2669.3992-.5979.3992-.9929s-.1331-.7244-.3992-.9883c-.2664-.2639-.5963-.3958-.9896-.3958h-14.05582c-.39333 0-.72319.1336-.98958.4008-.26611.2672-.39917.5982-.39917.9929 0 .395.13306.7244.39917.9883.26639.2639.59625.3959.98958.3959z" />
+            </svg>
+        </NotificationTag>
+    )
+};

package/src/components/NotificationTag/NotificationTag.test.tsx

@@ -0,0 +1,70 @@
+import { test, expect } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import NotificationTag from './NotificationTag';
+
+const NOTIFICATION_TAG_LABEL = '11';
+const NOTIFICATION_TAG_DESCRIPTION = 'new messages';
+const NOTIFICATION_TAG_ICON = 'SVG icon';
+
+test('notification tag renders correctly', () => {
+    render(
+        <NotificationTag label={NOTIFICATION_TAG_LABEL} description={NOTIFICATION_TAG_DESCRIPTION} data-testid="notification-tag">{NOTIFICATION_TAG_ICON}</NotificationTag>
+    );
+
+    const notificationTag = screen.getByTestId('notification-tag');
+    const notificationTagWrapper = notificationTag.parentElement;
+    const notificationTagDescription = notificationTag.lastChild;
+
+    expect(notificationTag).toHaveClass('ds_notification-tag');
+    expect(notificationTag.nodeName).toEqual('SPAN');
+    expect(notificationTag).not.toHaveAttribute('aria-hidden');
+    expect(notificationTagWrapper).toHaveClass('ds_notification-tag__wrapper');
+    expect(notificationTagWrapper?.nodeName).toEqual('SPAN');
+    expect(notificationTagDescription).toHaveClass('visually-hidden');
+    expect(notificationTagDescription?.nodeName).toEqual('SPAN');
+});
+
+test('notification tag with dot', () => {
+    render(
+        <NotificationTag data-testid="notification-tag">
+            {NOTIFICATION_TAG_ICON}
+        </NotificationTag>
+    );
+
+    const notificationTag = screen.getByTestId('notification-tag');
+
+    expect(notificationTag).toHaveClass('ds_notification-tag--dot');
+});
+
+test('aria-hidden on notification tag', () => {
+    render(
+        <NotificationTag isHidden data-testid="notification-tag">
+            {NOTIFICATION_TAG_ICON}
+        </NotificationTag>
+    );
+
+    const notificationTag = screen.getByTestId('notification-tag');
+    expect(notificationTag.getAttribute('aria-hidden')).toEqual('true');
+});
+
+test('passing additional props', () => {
+    render(
+        <NotificationTag data-test="foo" data-testid="notification-tag">
+            {NOTIFICATION_TAG_ICON}
+        </NotificationTag>
+    );
+
+    const notificationTag = screen.getByTestId('notification-tag');
+    expect(notificationTag?.dataset.test).toEqual('foo');
+});
+
+test('passing additional CSS class', () => {
+    render(
+        <NotificationTag className="foo" data-testid="notification-tag">
+            {NOTIFICATION_TAG_ICON}
+        </NotificationTag>
+    );
+
+    const notificationTag = screen.getByTestId('notification-tag');
+    expect(notificationTag).toHaveClass('foo', 'ds_notification-tag');
+});

package/src/components/NotificationTag/NotificationTag.tsx

@@ -0,0 +1,32 @@
+import { NotificationTagProps } from "./types";
+import clsx from 'clsx';
+
+const NotificationTag = ({
+    children,
+    className,
+    description,
+    isHidden,
+    label,
+    ...props
+}: NotificationTagProps) => {
+    return (
+        <span className="ds_notification-tag__wrapper">
+            {children}
+            <span
+                aria-hidden={isHidden ? "true" : undefined}
+                className={clsx([
+                    'ds_notification-tag',
+                    !label && 'ds_notification-tag--dot',
+                    className
+                ])}
+                {...props}
+            >
+                {label} {description && <span className="visually-hidden">{description}</span>}
+            </span>
+        </span>
+    )
+};
+
+NotificationTag.displayName = 'NotificationTag';
+
+export default NotificationTag;

package/src/components/NotificationTag/index.ts

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

package/src/components/NotificationTag/types.ts

@@ -0,0 +1,5 @@
+export interface NotificationTagProps extends React.AllHTMLAttributes<HTMLElement> {
+    description?: string
+    isHidden?: boolean
+    label?: string
+}