@scottish-government/designsystem-react 0.12.1 → 1.0.0

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,9 +1,10 @@
 import { useEffect, useRef } from 'react';
-// @ts-ignore
-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,
@@ -21,7 +22,7 @@ const Textarea = ({
     rows = 4,
     value,
     ...props
-}: SGDS.Component.Textarea) => {
+}: TextInputBase<HTMLTextAreaElement>) => {
     const errorMessageId = `error-message-${id}`;
     const hintTextId = `hint-text-${id}`;
     const ref = useRef(null);
@@ -31,18 +32,19 @@ const Textarea = ({
     if (errorMessage) { describedbys.push(errorMessageId) };
 
     useEffect(() => {
+        /* istanbul ignore else */
         if (ref.current) {
             new DSCharacterCount(ref.current).init();
         }
     }, [ref]);
 
-    function handleBlur(event: React.FocusEvent) {
+    function handleBlur(event: React.FocusEvent<HTMLTextAreaElement>) {
         if (typeof onBlur === 'function') {
             onBlur(event);
         }
     }
 
-    function handleChange(event: React.ChangeEvent) {
+    function handleChange(event: React.ChangeEvent<HTMLTextAreaElement>) {
         if (typeof onChange === 'function') {
             onChange(event);
         }
@@ -54,17 +56,17 @@ const Textarea = ({
             wrapper={(children: React.JSX.Element) => <div ref={ref} data-threshold={countThreshold} data-module="ds-character-count">{children}</div>}
         >
             <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>}
 
             <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,14 +1,16 @@
+import clsx from 'clsx';
+
 const WarningText = ({
     children,
     className,
     ...props
-}: SGDS.Component.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.test.tsx

@@ -6,7 +6,9 @@ import { fireEvent, render, screen } from '@testing-library/react';
 
 import useTracking from './useTracking';
 
-const Link = ({ children }) => <a href="#">{children}</a>;
+const Link = ({ children }: {
+    children: React.ReactNode;
+}) => <a href="#">{children}</a>;
 
 const Links = () => {
     useTracking();
@@ -45,9 +47,7 @@ test('text tracking on component render', async () => {
 
     const button = screen.getByRole('button');
     const firstLink = screen.getByText('First link');
-
-    // todo: this will fail until the tracking script in DS core is updated to use textContent instead of innerText
-    // expect(firstLink).toHaveAttribute('data-section', SECTION_ONE_TEXT);
+    expect(firstLink).toHaveAttribute('data-section', SECTION_ONE_TEXT);
 
     fireEvent(
         button,
@@ -58,7 +58,5 @@ test('text tracking on component render', async () => {
     ));
 
     const secondLink = await screen.findByText('Second link')
-
-    // todo: this will fail until the tracking script in DS core is updated to use textContent instead of innerText
-    // expect(secondLink).toHaveAttribute('data-section', SECTION_TWO_TEXT);
+    expect(secondLink).toHaveAttribute('data-section', SECTION_TWO_TEXT);
 });

package/src/hooks/useTracking/useTracking.ts

@@ -1,6 +1,5 @@
 import { useEffect } from 'react';
 
-//@ts-ignore
 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;

package/src/images/icons/expand_less.tsx

@@ -1,15 +1,15 @@
 import * as React from "react";
 import type { SVGProps } from "react";
 const SvgExpandLess = (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 8l-6 6 1.41 1.41L12 10.83l4.59 4.58L18 14z" />
-    </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 8l-6 6 1.41 1.41L12 10.83l4.59 4.58L18 14z" />
+  </svg>
 );
 export default SvgExpandLess;

package/src/images/icons/expand_more.tsx

@@ -1,15 +1,15 @@
 import * as React from "react";
 import type { SVGProps } from "react";
 const SvgExpandMore = (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="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-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="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z" />
+  </svg>
 );
 export default SvgExpandMore;

package/src/images/icons/list.tsx

@@ -1,18 +1,18 @@
 import * as React from "react";
 import type { SVGProps } from "react";
 const SvgList = (props: SVGProps<SVGSVGElement>) => (
-    <svg
-        xmlns="http://www.w3.org/2000/svg"
-        viewBox="0 0 24 24"
-        fill="#000000"
-        role="img"
-        {...props}
-    >
-        <g fill="none">
-            <path d="M0 0h24v24H0V0z" />
-            <path d="M0 0h24v24H0V0z" opacity={0.87} />
-        </g>
-        <path d="M3 13h2v-2H3v2zm0 4h2v-2H3v2zm0-8h2V7H3v2zm4 4h14v-2H7v2zm0 4h14v-2H7v2zM7 7v2h14V7H7zm-4 6h2v-2H3v2zm0 4h2v-2H3v2zm0-8h2V7H3v2zm4 4h14v-2H7v2zm0 4h14v-2H7v2zM7 7v2h14V7H7z" />
-    </svg>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    fill="#000000"
+    role="img"
+    {...props}
+  >
+    <g fill="none">
+      <path d="M0 0h24v24H0V0z" />
+      <path d="M0 0h24v24H0V0z" opacity={0.87} />
+    </g>
+    <path d="M3 13h2v-2H3v2zm0 4h2v-2H3v2zm0-8h2V7H3v2zm4 4h14v-2H7v2zm0 4h14v-2H7v2zM7 7v2h14V7H7zm-4 6h2v-2H3v2zm0 4h2v-2H3v2zm0-8h2V7H3v2zm4 4h14v-2H7v2zm0 4h14v-2H7v2zM7 7v2h14V7H7z" />
+  </svg>
 );
 export default SvgList;

package/src/images/icons/menu.tsx

@@ -1,15 +1,15 @@
 import * as React from "react";
 import type { SVGProps } from "react";
 const SvgMenu = (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="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z" />
-    </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="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z" />
+  </svg>
 );
 export default SvgMenu;

package/src/images/icons/priority_high.tsx

@@ -1,16 +1,16 @@
 import * as React from "react";
 import type { SVGProps } from "react";
 const SvgPriorityHigh = (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" />
-        <circle cx={12} cy={19} r={2} />
-        <path d="M10 3h4v12h-4z" />
-    </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" />
+    <circle cx={12} cy={19} r={2} />
+    <path d="M10 3h4v12h-4z" />
+  </svg>
 );
 export default SvgPriorityHigh;