@scottish-government/designsystem-react 0.13.0 → 1.0.1

package/src/components/Tabs/Tabs.tsx

@@ -1,8 +1,8 @@
 import React, { Children, useEffect, useRef, useId } from 'react';
 import WrapperTag from '../../common/WrapperTag';
-// @ts-expect-error no types from core SGDS
 import DSTabs from '@scottish-government/design-system/src/components/tabs/tabs';
 import { TabListItemProps, TabsItemProps, TabsProps } from './types';
+import clsx from 'clsx';
 
 const TabItem = ({
     isBorderless,
@@ -14,11 +14,11 @@ const TabItem = ({
 }: TabsItemProps) => {
     return (
         <div
-            className={[
+            className={clsx([
                 'ds_tabs__content',
                 !isBorderless && 'ds_tabs__content--bordered',
                 className
-            ].join(' ')}
+            ])}
             data-label={tabLabel}
             id={id}
             {...props}
@@ -54,6 +54,7 @@ const Tabs = ({
     const headingId = `${baseId}-heading`;
 
     useEffect(() => {
+        /* istanbul ignore else */
         if (ref.current) {
             new DSTabs(ref.current).init();
         }
@@ -78,11 +79,11 @@ const Tabs = ({
 
     return (
         <div
-            className={[
+            className={clsx([
                 'ds_tabs',
                 isManual && 'ds_tabs--manual',
                 className
-            ].join(' ')}
+            ])}
             ref={ref}
             {...props}
         >

package/src/components/Tag/Tag.tsx

@@ -1,4 +1,5 @@
 import { TagProps } from "./types";
+import clsx from 'clsx';
 
 const Tag = ({
     children,
@@ -8,11 +9,11 @@ const Tag = ({
 }: TagProps) => {
     return (
         <span
-            className={[
+            className={clsx([
                 'ds_tag',
                 className,
-                colour && `ds_tag--${colour}`,
-            ].join(' ')}
+                colour && `ds_tag--${colour}`
+            ])}
             {...props}
         >
             {children}

package/src/components/TaskList/TaskList.tsx

@@ -4,6 +4,7 @@ import HintText from '../../common/HintText';
 import ScreenReaderText from '../../common/ScreenReaderText';
 import Tag from '../Tag';
 import { TaskListGroupProps, TaskListItemProps, TaskListProps } from './types';
+import clsx from 'clsx';
 
 const TaskItem = ({
     children,
@@ -36,10 +37,10 @@ const TaskItem = ({
 
     return (
         <li
-            className={[
+            className={clsx([
                 'ds_task-list__task',
                 className
-            ].join(' ')}
+            ])}
             id={id}
             {...props}
         >
@@ -83,10 +84,10 @@ const TaskGroup = ({
 }: TaskListGroupProps) => {
     return (
         <li
-            className={[
+            className={clsx([
                 'ds_task-list-group__section',
                 className
-            ].join(' ')}
+            ])}
             {...props}
         >
             <h2 className="ds_task-list-heading">{title}</h2>

package/src/components/TextInput/TextInput.test.tsx

@@ -58,7 +58,6 @@ test('text input with character count', () => {
     const textInput = screen.getByRole('textbox');
     const textInputWrapper = textInput.parentElement;
 
-    expect(textInputWrapper).toHaveAttribute('data-maxlength', MAX_LENGTH.toString());
     expect(textInputWrapper).toHaveAttribute('data-module', 'ds-character-count');
 });
 
@@ -232,6 +231,44 @@ test('text input with change function', () => {
     expect(ONCHANGE_FUNCTION).toHaveBeenCalled();
 });
 
+test('text input with onBlur that is not a function', () => {
+    render(
+        <TextInput
+        id={INPUT_ID}
+        label={LABEL_TEXT}
+            // @ts-expect-error onBlur is not a function
+            onBlur='foo'
+        />
+    );
+
+    const textInput = screen.getByRole('textbox');
+
+    fireEvent.blur(textInput);
+
+    // todo: assertion
+    // success indicated by no errors thrown
+    // error would be thrown on an untestable thread
+});
+
+test('text input with onChange that is not a function', () => {
+    render(
+        <TextInput
+            id={INPUT_ID}
+            label={LABEL_TEXT}
+            // @ts-expect-error onChange is not a function
+            onChange='foo'
+        />
+    );
+
+    const textInput = screen.getByRole('textbox');
+
+    fireEvent.change(textInput, {target: {value: 'foo'}});
+
+    // todo: assertion
+    // success indicated by no errors thrown
+    // error would be thrown on an untestable thread
+});
+
 test('text input with placeholder text', () => {
     const PLACEHOLDER_TEXT = 'foo';
 
@@ -299,6 +336,21 @@ test('text input with error message', () => {
     expect(errorMessageElement).toHaveClass('ds_question__error-message');
 });
 
+test('instantiating/initialising DS component script', () => {
+    render(
+        <TextInput
+            id={INPUT_ID}
+            label={LABEL_TEXT}
+            maxlength={200}
+        />
+    );
+
+    const textInput = screen.getByRole('textbox');
+    const textInputContainer = textInput.parentElement;
+    expect(textInputContainer).toHaveClass('js-initialised');
+    expect(textInputContainer).toHaveClass('js-instantiated');
+});
+
 test('passing additional props', () => {
     render(
         <TextInput

package/src/components/TextInput/TextInput.tsx

@@ -1,11 +1,11 @@
 import { useEffect, useRef } from 'react';
-// @ts-expect-error no types from core SGDS
-import DSCharacterCount from '@scottish-government/design-system/src/forms/character-count/character-count';
+import DSCharacterCount from '@scottish-government/design-system/src/components/character-count/character-count';
 import Button from '../Button';
 import ConditionalWrapper from '../../common/ConditionalWrapper';
 import ErrorMessage from '../ErrorMessage';
 import HintText from '../../common/HintText';
 import { TextInputProps } from './types';
+import clsx from 'clsx';
 
 const TextInput = ({
     buttonIcon,
@@ -33,13 +33,18 @@ const TextInput = ({
     const errorMessageId = `error-message-${id}`;
     const hintTextId = `hint-text-${id}`;
     const ref = useRef(null);
-    const inputWrapperClasses = `${hasButton ? 'ds_input__wrapper  ds_input__wrapper--has-icon' : ''} ${isCurrency ? 'ds_currency-wrapper' : ''}`;
+    const inputWrapperClasses = clsx(
+        hasButton && 'ds_input__wrapper',
+        hasButton && 'ds_input__wrapper--has-icon',
+        isCurrency && 'ds_currency-wrapper'
+    );
     const describedbys: string[] = [];
 
     if (hintText) { describedbys.push(hintTextId) };
     if (errorMessage) { describedbys.push(errorMessageId) };
 
     useEffect(() => {
+        /* istanbul ignore else */
         if (ref.current) {
             new DSCharacterCount(ref.current).init();
         }
@@ -72,12 +77,12 @@ const TextInput = ({
                 <input
                     aria-describedby={describedbys.join(' ')}
                     aria-invalid={hasError}
-                    className={[
+                    className={clsx([
                         'ds_input',
                         className,
-                        hasError ? 'ds_input--error' : '',
-                        width ? `ds_input--${width}` : '',
-                    ].join(' ')}
+                        hasError && 'ds_input--error',
+                        width && `ds_input--${width}`,
+                    ])}
                     defaultValue={value}
                     id={id}
                     maxLength={maxlength}

package/src/components/Textarea/Textarea.test.tsx

@@ -43,7 +43,6 @@ test('textarea with character count', () => {
     const textarea = screen.getByRole('textbox');
     const textareaWrapper = textarea.parentElement;
 
-    expect(textareaWrapper).toHaveAttribute('data-maxlength', MAX_LENGTH.toString());
     expect(textareaWrapper).toHaveAttribute('data-module', 'ds-character-count');
 });
 
@@ -135,6 +134,44 @@ test('textarea with change function', () => {
     expect(ONCHANGE_FUNCTION).toHaveBeenCalled();
 });
 
+test('textarea with onBlur that is not a function', () => {
+    render(
+        <Textarea
+        id={TEXTAREA_ID}
+        label={LABEL_TEXT}
+            // @ts-expect-error onBlur is not a function
+            onBlur='foo'
+        />
+    );
+
+    const textarea = screen.getByRole('textbox');
+
+    fireEvent.blur(textarea);
+
+    // todo: assertion
+    // success indicated by no errors thrown
+    // error would be thrown on an untestable thread
+});
+
+test('textarea with onChange that is not a function', () => {
+    render(
+        <Textarea
+            id={TEXTAREA_ID}
+            label={LABEL_TEXT}
+            // @ts-expect-error onChange is not a function
+            onChange='foo'
+        />
+    );
+
+    const textarea = screen.getByRole('textbox');
+
+    fireEvent.change(textarea, {target: {value: 'foo'}});
+
+    // todo: assertion
+    // success indicated by no errors thrown
+    // error would be thrown on an untestable thread
+});
+
 test('textarea with placeholder text', () => {
     const PLACEHOLDER_TEXT = 'foo';
 
@@ -203,6 +240,21 @@ test('textarea with error message', () => {
     expect(errorMessageElement).toHaveClass('ds_question__error-message');
 });
 
+test('instantiating/initialising DS component script', () => {
+    render(
+        <Textarea
+            id={TEXTAREA_ID}
+            label={LABEL_TEXT}
+            maxlength={200}
+        />
+    );
+
+    const textarea = screen.getByRole('textbox');
+    const textareaContainer = textarea.parentElement;
+    expect(textareaContainer).toHaveClass('js-initialised');
+    expect(textareaContainer).toHaveClass('js-instantiated');
+});
+
 test('passing additional props', () => {
     render(
         <Textarea

package/src/components/Textarea/Textarea.tsx

@@ -1,10 +1,10 @@
 import { useEffect, useRef } from 'react';
-// @ts-expect-error no types from core SGDS
-import DSCharacterCount from '@scottish-government/design-system/src/forms/character-count/character-count';
+import DSCharacterCount from '@scottish-government/design-system/src/components/character-count/character-count';
 import ConditionalWrapper from '../../common/ConditionalWrapper';
 import ErrorMessage from '../ErrorMessage';
 import HintText from '../../common/HintText';
 import { TextInputBase } from '../../shared-types';
+import clsx from 'clsx';
 
 const Textarea = ({
     className,
@@ -32,6 +32,7 @@ const Textarea = ({
     if (errorMessage) { describedbys.push(errorMessageId) };
 
     useEffect(() => {
+        /* istanbul ignore else */
         if (ref.current) {
             new DSCharacterCount(ref.current).init();
         }
@@ -61,11 +62,11 @@ const Textarea = ({
             <textarea
                 aria-describedby={describedbys.join(' ')}
                 aria-invalid={hasError}
-                className={[
+                className={clsx([
                     'ds_input',
                     hasError && 'ds_input--error',
                     className
-                ].join(' ')}
+                ])}
                 defaultValue={value}
                 id={id}
                 maxLength={maxlength}

package/src/components/WarningText/WarningText.tsx

@@ -1,3 +1,5 @@
+import clsx from 'clsx';
+
 const WarningText = ({
     children,
     className,
@@ -5,10 +7,10 @@ const WarningText = ({
 }: React.AllHTMLAttributes<HTMLElement>) => {
     return (
         <div
-            className={[
+            className={clsx([
                 'ds_warning-text',
                 className
-            ].join(' ')}
+            ])}
             {...props}
         >
             <strong className="ds_warning-text__icon" aria-hidden="true"></strong>

package/src/hooks/useTracking/useTracking.ts

@@ -1,6 +1,5 @@
 import { useEffect } from 'react';
 
-// @ts-expect-error no types from core SGDS
 import DSTracking from '@scottish-government/design-system/src/base/tools/tracking/tracking';
 
 export default function () {

package/src/images/icons/arrow_upward.tsx

@@ -1,15 +1,15 @@
 import * as React from "react";
 import type { SVGProps } from "react";
 const SvgArrowUpward = (props: SVGProps<SVGSVGElement>) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 24 24"
-    fill="#000000"
-    role="img"
-    {...props}
-  >
-    <path d="M0 0h24v24H0V0z" fill="none" />
-    <path d="M4 12l1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8-8 8z" />
-  </svg>
+    <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        fill="#000000"
+        role="img"
+        {...props}
+    >
+        <path d="M0 0h24v24H0V0z" fill="none" />
+        <path d="M4 12l1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8-8 8z" />
+    </svg>
 );
 export default SvgArrowUpward;

package/src/images/icons/calendar_today.tsx

@@ -1,15 +1,15 @@
 import * as React from "react";
 import type { SVGProps } from "react";
 const SvgCalendarToday = (props: SVGProps<SVGSVGElement>) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 24 24"
-    fill="#000000"
-    role="img"
-    {...props}
-  >
-    <path d="M0 0h24v24H0z" fill="none" />
-    <path d="M20 3h-1V1h-2v2H7V1H5v2H4c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 18H4V8h16v13z" />
-  </svg>
+    <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        fill="#000000"
+        role="img"
+        {...props}
+    >
+        <path d="M0 0h24v24H0z" fill="none" />
+        <path d="M20 3h-1V1h-2v2H7V1H5v2H4c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 18H4V8h16v13z" />
+    </svg>
 );
 export default SvgCalendarToday;

package/src/images/icons/cancel.tsx

@@ -1,13 +1,13 @@
 import * as React from "react";
 import type { SVGProps } from "react";
 const SvgCancel = (props: SVGProps<SVGSVGElement>) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 24 24"
-    role="img"
-    {...props}
-  >
-    <path d="m8.4 17 3.6-3.6 3.6 3.6 1.4-1.4-3.6-3.6L17 8.4 15.6 7 12 10.6 8.4 7 7 8.4l3.6 3.6L7 15.6 8.4 17Zm3.6 5c-1.4 0-2.7-.3-3.9-.8S5.8 20 4.9 19.1s-1.6-2-2.1-3.2S2 13.4 2 12s.3-2.7.8-3.9S4 5.8 4.9 4.9s2-1.6 3.2-2.1S10.6 2 12 2s2.7.3 3.9.8 2.3 1.2 3.2 2.1 1.6 2 2.1 3.2.8 2.5.8 3.9-.3 2.7-.8 3.9-1.2 2.3-2.1 3.2-2 1.6-3.2 2.1-2.5.8-3.9.8Z" />
-  </svg>
+    <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        role="img"
+        {...props}
+    >
+        <path d="m8.4 17 3.6-3.6 3.6 3.6 1.4-1.4-3.6-3.6L17 8.4 15.6 7 12 10.6 8.4 7 7 8.4l3.6 3.6L7 15.6 8.4 17Zm3.6 5c-1.4 0-2.7-.3-3.9-.8S5.8 20 4.9 19.1s-1.6-2-2.1-3.2S2 13.4 2 12s.3-2.7.8-3.9S4 5.8 4.9 4.9s2-1.6 3.2-2.1S10.6 2 12 2s2.7.3 3.9.8 2.3 1.2 3.2 2.1 1.6 2 2.1 3.2.8 2.5.8 3.9-.3 2.7-.8 3.9-1.2 2.3-2.1 3.2-2 1.6-3.2 2.1-2.5.8-3.9.8Z" />
+    </svg>
 );
 export default SvgCancel;

package/src/images/icons/check_circle.tsx

@@ -1,15 +1,15 @@
 import * as React from "react";
 import type { SVGProps } from "react";
 const SvgCheckCircle = (props: SVGProps<SVGSVGElement>) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 24 24"
-    fill="#000000"
-    role="img"
-    {...props}
-  >
-    <path d="M0 0h24v24H0z" fill="none" />
-    <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" />
-  </svg>
+    <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        fill="#000000"
+        role="img"
+        {...props}
+    >
+        <path d="M0 0h24v24H0z" fill="none" />
+        <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" />
+    </svg>
 );
 export default SvgCheckCircle;

package/src/images/icons/chevron_left.tsx

@@ -1,15 +1,15 @@
 import * as React from "react";
 import type { SVGProps } from "react";
 const SvgChevronLeft = (props: SVGProps<SVGSVGElement>) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 24 24"
-    fill="#000000"
-    role="img"
-    {...props}
-  >
-    <path d="M0 0h24v24H0z" fill="none" />
-    <path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z" />
-  </svg>
+    <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        fill="#000000"
+        role="img"
+        {...props}
+    >
+        <path d="M0 0h24v24H0z" fill="none" />
+        <path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z" />
+    </svg>
 );
 export default SvgChevronLeft;

package/src/images/icons/chevron_right.tsx

@@ -1,15 +1,15 @@
 import * as React from "react";
 import type { SVGProps } from "react";
 const SvgChevronRight = (props: SVGProps<SVGSVGElement>) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 24 24"
-    fill="#000000"
-    role="img"
-    {...props}
-  >
-    <path d="M0 0h24v24H0z" fill="none" />
-    <path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" />
-  </svg>
+    <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        fill="#000000"
+        role="img"
+        {...props}
+    >
+        <path d="M0 0h24v24H0z" fill="none" />
+        <path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" />
+    </svg>
 );
 export default SvgChevronRight;

package/src/images/icons/close.tsx

@@ -1,15 +1,15 @@
 import * as React from "react";
 import type { SVGProps } from "react";
 const SvgClose = (props: SVGProps<SVGSVGElement>) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 24 24"
-    fill="#000000"
-    role="img"
-    {...props}
-  >
-    <path d="M0 0h24v24H0z" fill="none" />
-    <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" />
-  </svg>
+    <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        fill="#000000"
+        role="img"
+        {...props}
+    >
+        <path d="M0 0h24v24H0z" fill="none" />
+        <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" />
+    </svg>
 );
 export default SvgClose;

package/src/images/icons/description.tsx

@@ -1,15 +1,15 @@
 import * as React from "react";
 import type { SVGProps } from "react";
 const SvgDescription = (props: SVGProps<SVGSVGElement>) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 24 24"
-    fill="#000000"
-    role="img"
-    {...props}
-  >
-    <path d="M0 0h24v24H0z" fill="none" />
-    <path d="M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm2 16H8v-2h8v2zm0-4H8v-2h8v2zm-3-5V3.5L18.5 9H13z" />
-  </svg>
+    <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        fill="#000000"
+        role="img"
+        {...props}
+    >
+        <path d="M0 0h24v24H0z" fill="none" />
+        <path d="M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm2 16H8v-2h8v2zm0-4H8v-2h8v2zm-3-5V3.5L18.5 9H13z" />
+    </svg>
 );
 export default SvgDescription;

package/src/images/icons/double_chevron_left.tsx

@@ -1,13 +1,13 @@
 import * as React from "react";
 import type { SVGProps } from "react";
 const SvgDoubleChevronLeft = (props: SVGProps<SVGSVGElement>) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 24 24"
-    role="img"
-    {...props}
-  >
-    <path d="M19 16.6 17.6 18l-6-6 6-6L19 7.4 14.4 12l4.6 4.6Zm-6.6 0L11 18l-6-6 6-6 1.4 1.4L7.8 12l4.6 4.6Z" />
-  </svg>
+    <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        role="img"
+        {...props}
+    >
+        <path d="M19 16.6 17.6 18l-6-6 6-6L19 7.4 14.4 12l4.6 4.6Zm-6.6 0L11 18l-6-6 6-6 1.4 1.4L7.8 12l4.6 4.6Z" />
+    </svg>
 );
 export default SvgDoubleChevronLeft;

package/src/images/icons/double_chevron_right.tsx

@@ -1,13 +1,13 @@
 import * as React from "react";
 import type { SVGProps } from "react";
 const SvgDoubleChevronRight = (props: SVGProps<SVGSVGElement>) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 24 24"
-    role="img"
-    {...props}
-  >
-    <path d="M9.6 12 5 7.4 6.4 6l6 6-6 6L5 16.6 9.6 12Zm6.6 0-4.6-4.6L13 6l6 6-6 6-1.4-1.4 4.6-4.6Z" />
-  </svg>
+    <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        role="img"
+        {...props}
+    >
+        <path d="M9.6 12 5 7.4 6.4 6l6 6-6 6L5 16.6 9.6 12Zm6.6 0-4.6-4.6L13 6l6 6-6 6-1.4-1.4 4.6-4.6Z" />
+    </svg>
 );
 export default SvgDoubleChevronRight;

package/src/images/icons/error.tsx

@@ -1,15 +1,15 @@
 import * as React from "react";
 import type { SVGProps } from "react";
 const SvgError = (props: SVGProps<SVGSVGElement>) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 24 24"
-    fill="#000000"
-    role="img"
-    {...props}
-  >
-    <path d="M0 0h24v24H0z" fill="none" />
-    <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z" />
-  </svg>
+    <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        fill="#000000"
+        role="img"
+        {...props}
+    >
+        <path d="M0 0h24v24H0z" fill="none" />
+        <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z" />
+    </svg>
 );
 export default SvgError;