@scottish-government/designsystem-react 0.1.2 → 0.1.4

package/src/components/pagination/pagination.test.tsx

@@ -0,0 +1,366 @@
+import { test, expect, vi } from 'vitest';
+import { render, screen, within, fireEvent } from '@testing-library/react';
+import Pagination, { Page, Ellipsis } from './pagination';
+
+const pageAriaLabel = 'Page 1';
+const pageHref = '#foo';
+const pageText = '1';
+const currentPage = 10;
+const totalPages = 21;
+
+test('pagination page renders correctly', () => {
+    render(
+        <Page
+            ariaLabel={pageAriaLabel}
+            href={pageHref}
+            text={pageText}
+        />
+    );
+
+    const item = screen.getByRole('listitem');
+    const link = within(item).getByRole('link');
+    const span = within(link).getByText(pageText);
+
+    expect(item).toHaveClass('ds_pagination__item');
+    expect(link).toHaveClass('ds_pagination__link');
+    expect(link).toHaveAttribute('aria-label', pageAriaLabel);
+    expect(link).toHaveAttribute('href', pageHref);
+    expect(span).toHaveClass('ds_pagination__link-label');
+});
+
+test('current pagination page', () => {
+    render(
+        <Page
+            ariaLabel={pageAriaLabel}
+            href={pageHref}
+            text={pageText}
+            current
+        />
+    );
+
+    const item = screen.getByRole('listitem');
+    const link = within(item).getByRole('link');
+
+    expect(link).toHaveClass('ds_current');
+    expect(link).toHaveAttribute('aria-current', 'page');
+});
+
+test('pagination page with click event', () => {
+    const onClickFn = vi.fn();
+
+    render(
+        <Page
+            ariaLabel={pageAriaLabel}
+            href={pageHref}
+            text={pageText}
+            onClick={onClickFn}
+        />
+    );
+
+    const item = screen.getByRole('listitem');
+    const link = within(item).getByRole('link');
+
+    fireEvent.click(link);
+
+    expect(onClickFn).toHaveBeenCalled();
+});
+
+test('Ellipsis item renders correctly', () => {
+    render(
+        <Ellipsis/>
+    );
+
+    const item = screen.getByRole('listitem', {hidden: true});
+    const link = within(item).getByText('…');
+
+    expect(item).toHaveClass('ds_pagination__item');
+    expect(item).toHaveAttribute('aria-hidden', 'true');
+    expect(link).toHaveClass('ds_pagination__link', 'ds_pagination__link--ellipsis');
+});
+
+test('pagination renders correctly', () => {
+    const currentPage = 10;
+    const totalPages = 21;
+
+    render(
+        <Pagination page={currentPage} totalPages={totalPages} />
+    );
+
+    const paginationNav = screen.getByRole('navigation');
+    const paginationList = within(paginationNav).getByRole('list');
+    const prevLabel = within(paginationList).getByText('Previous');
+    const prevLink = prevLabel.parentNode;
+    const prevIcon = prevLabel.previousSibling;
+    const prevItem = prevLink?.parentNode;
+    const nextLabel = within(paginationList).getByText('Next');
+    const nextLink = nextLabel.parentNode;
+    const nextIcon = nextLabel.nextSibling;
+    const nextItem = nextLink?.parentNode;
+
+    const firstPageLabel = within(paginationList).getByText('1');
+    const firstPageLink = firstPageLabel.parentNode;
+    const firstPageItem = firstPageLink?.parentNode;
+    const lastPageLabel = within(paginationList).getByText(totalPages);
+    const lastPageLink = lastPageLabel.parentNode;
+    const lastPageItem = lastPageLink?.parentNode;
+
+    const firstPageEllipsisItem = firstPageItem?.nextSibling;
+    const firstPageEllipsis = firstPageEllipsisItem?.children[0];
+    const lastPageEllipsisItem = lastPageItem?.previousSibling;
+    const lastPageEllipsis = lastPageEllipsisItem?.children[0];
+
+    const currentPageLink = document.querySelector('.ds_current');
+    const currentPageItem = currentPageLink?.parentNode;
+
+    const paginationItems = within(paginationList).getAllByRole('listitem', { hidden: true });
+
+    expect(paginationNav).toHaveClass('ds_pagination');
+    expect(paginationNav).toHaveAttribute('aria-label', 'Pages');
+
+    expect(paginationList).toHaveClass('ds_pagination__list');
+    expect(paginationList.tagName).toEqual('UL');
+
+    expect(prevItem).toHaveClass('ds_pagination__item');
+    expect(prevItem?.tagName).toEqual('LI');
+    expect(prevItem?.parentNode).toEqual(paginationList);
+    expect(prevLink).toHaveClass('ds_pagination__link', 'ds_pagination__link--text', 'ds_pagination__link--icon')
+    expect(prevLink).toHaveAttribute('aria-label', 'Previous page');
+    expect(prevLink).toHaveAttribute('href', `/search?page=${currentPage - 1}`);
+    expect(prevLink?.tagName).toEqual('A');
+    expect(prevIcon).toHaveClass('ds_icon');
+    expect(prevIcon).toHaveAttribute('aria-hidden', 'true')
+    expect(prevIcon?.tagName).toEqual('svg');
+    expect(prevLabel).toHaveClass('ds_pagination__link-label');
+    expect(prevLabel?.tagName).toEqual('SPAN');
+
+    expect(nextItem).toHaveClass('ds_pagination__item');
+    expect(nextItem?.tagName).toEqual('LI');
+    expect(nextItem?.parentNode).toEqual(paginationList);
+    expect(nextLink).toHaveClass('ds_pagination__link', 'ds_pagination__link--text', 'ds_pagination__link--icon')
+    expect(nextLink).toHaveAttribute('aria-label', 'Next page');
+    expect(nextLink).toHaveAttribute('href', `/search?page=${currentPage + 1}`);
+    expect(nextLink?.tagName).toEqual('A');
+    expect(nextIcon).toHaveClass('ds_icon');
+    expect(nextIcon).toHaveAttribute('aria-hidden', 'true')
+    expect(nextIcon?.tagName).toEqual('svg');
+    expect(nextLabel).toHaveClass('ds_pagination__link-label');
+    expect(nextLabel?.tagName).toEqual('SPAN');
+
+    expect(firstPageItem).toHaveClass('ds_pagination__item');
+    expect(firstPageItem?.tagName).toEqual('LI');
+    expect(firstPageItem?.parentNode).toEqual(paginationList);
+    expect(firstPageLink).toHaveClass('ds_pagination__link')
+    expect(firstPageLink).toHaveAttribute('aria-label', 'Page 1');
+    expect(firstPageLink).toHaveAttribute('href', `/search?page=1`);
+    expect(firstPageLink?.tagName).toEqual('A');
+    expect(firstPageLabel).toHaveClass('ds_pagination__link-label');
+    expect(firstPageLabel?.tagName).toEqual('SPAN');
+
+    expect(lastPageItem).toHaveClass('ds_pagination__item');
+    expect(lastPageItem?.tagName).toEqual('LI');
+    expect(lastPageItem?.parentNode).toEqual(paginationList);
+    expect(lastPageLink).toHaveClass('ds_pagination__link')
+    expect(lastPageLink).toHaveAttribute('aria-label', `Page ${totalPages}`);
+    expect(lastPageLink).toHaveAttribute('href', `/search?page=${totalPages}`);
+    expect(lastPageLink?.tagName).toEqual('A');
+    expect(lastPageLabel).toHaveClass('ds_pagination__link-label');
+    expect(lastPageLabel?.tagName).toEqual('SPAN');
+
+    // dev note: by this point I'd started to wonder if it would just be better to do a single string compare of the rendered output versus the expected output
+
+    expect(firstPageEllipsisItem).toHaveClass('ds_pagination__item');
+    expect(firstPageEllipsisItem).toHaveAttribute('aria-hidden', 'true');
+    expect(firstPageEllipsisItem.tagName).toEqual('LI');
+    expect(firstPageEllipsis).toHaveClass('ds_pagination__link', 'ds_pagination__link--ellipsis');
+    expect(firstPageEllipsis.tagName).toEqual('SPAN');
+    expect(firstPageEllipsis.textContent).toEqual('…');
+
+    expect(lastPageEllipsisItem).toHaveClass('ds_pagination__item');
+    expect(lastPageEllipsisItem).toHaveAttribute('aria-hidden', 'true');
+    expect(lastPageEllipsisItem.tagName).toEqual('LI');
+    expect(lastPageEllipsis).toHaveClass('ds_pagination__link', 'ds_pagination__link--ellipsis');
+    expect(lastPageEllipsis.tagName).toEqual('SPAN');
+    expect(lastPageEllipsis.textContent).toEqual('…');
+
+    expect(currentPageItem).toHaveClass('ds_pagination__item');
+    expect(currentPageLink).toHaveClass('ds_pagination__link', 'ds_current');
+    expect(currentPageLink.textContent).toEqual(currentPage.toString());
+
+    // expect one link either side of the current (default padding)
+    expect(currentPageItem.previousSibling.querySelector('a')).toHaveAttribute('aria-label', 'Page 9');
+    expect(currentPageItem.previousSibling.previousSibling.querySelector('a')).toBeNull();
+
+    expect(currentPageItem.nextSibling.querySelector('a')).toHaveAttribute('aria-label', 'Page 11');
+    expect(currentPageItem.nextSibling.nextSibling.querySelector('a')).toBeNull();
+
+    // 9 is: previous, first, ellipsis, current page and 1 padding either side, ellipsis, last, next
+    expect(paginationItems.length).toEqual(9);
+});
+
+test('pagination with 2 padding', () => {
+    const padding = 2;
+
+    render(
+        <Pagination
+            page={currentPage}
+            totalPages={totalPages}
+            padding={padding}
+        />
+    );
+
+    const paginationNav = screen.getByRole('navigation');
+    const paginationList = within(paginationNav).getByRole('list');
+    const paginationItems = within(paginationList).getAllByRole('listitem', { hidden: true });
+
+    // 11 is: previous, first, ellipsis, current page and 2 padding either side, ellipsis, last, next
+    expect(paginationItems.length).toEqual(11);
+});
+
+test('pagination with custom aria label', () => {
+    const ariaLabel = 'My label';
+
+    render(
+        <Pagination
+            page={currentPage}
+            totalPages={totalPages}
+            ariaLabel={ariaLabel}
+        />
+    );
+
+    const paginationNav = screen.getByRole('navigation');
+
+    expect(paginationNav).toHaveAttribute('aria-label', ariaLabel);
+});
+
+test('pagination passes onclick event to child links', () => {
+    const onClickFn = vi.fn();
+
+    render(
+        <Pagination
+            page={currentPage}
+            totalPages={totalPages}
+            onClick={onClickFn}
+        />
+    );
+
+    const paginationNav = screen.getByRole('navigation');
+
+    // pick an arbitrary link
+    const link = [].slice.call(document.querySelectorAll('.ds_pagination__link'))[4];
+    link.setAttribute('href', '#foo');
+
+    fireEvent.click(link);
+
+    expect(onClickFn).toHaveBeenCalled();
+});
+
+test('pagination modifies an input pattern for its link format', () => {
+    render(
+        <Pagination
+            page={currentPage}
+            totalPages={totalPages}
+            pattern='My/Link/Format?Page=$1#foo'
+        />
+    );
+
+    // pick an arbitrary link
+    const link = document.querySelector('.ds_pagination__link.ds_current');
+    expect(link).toHaveAttribute('href', 'My/Link/Format?Page=10#foo');
+});
+
+
+test('pagination at an early link in the list', () => {
+    render(
+        <Pagination
+            page="1"
+            totalPages={totalPages}
+        />
+    );
+
+    const paginationNav = screen.getByRole('navigation');
+    const paginationList = within(paginationNav).getByRole('list');
+    const paginationItems = within(paginationList).getAllByRole('listitem', { hidden: true });
+
+    // 7 is: current page and 3 subsequent items (padding plus 2), ellipsis, last, next
+    expect(paginationItems.length).toEqual(7);
+    expect(paginationNav.textContent).toEqual('1234…21Next');
+});
+
+test('pagination at an early link in the list, increased padding', () => {
+    render(
+        <Pagination
+            padding={2}
+            page="1"
+            totalPages={totalPages}
+        />
+    );
+
+    const paginationNav = screen.getByRole('navigation');
+    const paginationList = within(paginationNav).getByRole('list');
+    const paginationItems = within(paginationList).getAllByRole('listitem', { hidden: true });
+
+    // 8 is: current page and 4 subsequent items (padding plus 2), ellipsis, last, next
+    expect(paginationItems.length).toEqual(8);
+    expect(paginationNav.textContent).toEqual('12345…21Next');
+});
+
+test('pagination at late link in the list', () => {
+    render(
+        <Pagination
+            page={totalPages}
+            totalPages={totalPages}
+        />
+    );
+
+    const paginationNav = screen.getByRole('navigation');
+    const paginationList = within(paginationNav).getByRole('list');
+    const paginationItems = within(paginationList).getAllByRole('listitem', { hidden: true });
+
+    // 7 is: current page and 3 subsequent items (padding plus 2), ellipsis, last, next
+    expect(paginationItems.length).toEqual(7);
+    expect(paginationNav.textContent).toEqual('Previous1…18192021');
+});
+
+test('pagination at late link in the list, increased padding', () => {
+    render(
+        <Pagination
+            padding={2}
+            page={totalPages}
+            totalPages={totalPages}
+        />
+    );
+
+    const paginationNav = screen.getByRole('navigation');
+    const paginationList = within(paginationNav).getByRole('list');
+    const paginationItems = within(paginationList).getAllByRole('listitem', { hidden: true });
+
+    // 8 is: current page and 4 subsequent items (padding plus 2), ellipsis, last, next
+    expect(paginationItems.length).toEqual(8);
+    expect(paginationNav.textContent).toEqual('Previous1…1718192021');
+});
+
+test('passing additional props', () => {
+    render(
+        <Pagination
+            page={currentPage}
+            totalPages={totalPages}
+            data-test="foo"
+        />
+    );
+
+    const paginationNav = screen.getByRole('navigation');
+    expect(paginationNav?.dataset.test).toEqual('foo');
+});
+
+test('passing additional CSS classes', () => {
+    render(
+        <Pagination
+            page={currentPage}
+            totalPages={totalPages}
+            className="foo"
+        />
+    )
+
+    const paginationNav = screen.getByRole('navigation');
+    expect(paginationNav).toHaveClass('foo');
+});

package/src/components/pagination/pagination.tsx

@@ -0,0 +1,157 @@
+import Icon from "../../common/icon";
+
+export const Page: React.FC<SGDS.Component.Pagination.Page> = ({
+    ariaLabel,
+    current = false,
+    href,
+    onClick,
+    text
+}) => {
+    function handleClick(event: React.MouseEvent) {
+        if (typeof onClick === 'function') {
+            onClick(event);
+        }
+    }
+
+    return (
+        <li className="ds_pagination__item">
+            <a aria-label={ariaLabel}
+                className={[
+                    'ds_pagination__link',
+                    current ? 'ds_current' : undefined
+                ].join(' ')}
+                href={href}
+                aria-current={current ? "page" : undefined}
+                onClick={handleClick}
+            >
+                <span className="ds_pagination__link-label">{text}</span>
+            </a>
+        </li>
+    );
+};
+
+export const Ellipsis = () => {
+    return (
+        <li className="ds_pagination__item" aria-hidden="true">
+            <span className="ds_pagination__link  ds_pagination__link--ellipsis">&hellip;</span>
+        </li>
+    );
+};
+
+const Pagination: React.FC<SGDS.Component.Pagination> = ({
+    ariaLabel = 'Pages',
+    className,
+    onClick,
+    padding = 1,
+    page = 1,
+    pattern = '/search?page=$1',
+    totalPages,
+    ...props
+}) => {
+    padding = Number(padding);
+    page = Number(page);
+
+    const minToShow = padding + 2;
+    let includeFirst, includeLast;
+    let pages = [];
+
+    if (page <= minToShow) {
+        for (let i = 1; i <= minToShow + 1; i++) {
+            pages.push(Number(i));
+        }
+    } else if (page <= totalPages - minToShow) {
+        pages = [page];
+        for (let i = 0; i < padding; i++) {
+            pages.unshift(page - 1 - i);
+            pages.push(Number(page) + 1 + i);
+        }
+    } else {
+        for (let i = totalPages; i > totalPages - minToShow - 1; i--) {
+            pages.push(Number(i));
+        }
+        pages.reverse();
+    }
+
+    // filter out pages that are out of bounds
+    pages = pages.filter(item => item > 0 && item <= totalPages);
+
+    if ((page - padding) > 2) {
+        includeFirst = true;
+    }
+
+    if ((page + padding < totalPages - 1)) {
+        includeLast = true;
+    }
+
+    return (
+        <nav className={[
+                'ds_pagination',
+                className
+            ].join(' ')}
+            aria-label={ariaLabel}
+            {...props}
+        >
+            <ul className="ds_pagination__list">
+                {page > 1 && (
+                    <li className="ds_pagination__item">
+                        <a aria-label="Previous page" className="ds_pagination__link  ds_pagination__link--text  ds_pagination__link--icon" href={pattern.replace('$1', String(page - 1))} data-search="pagination-previous" onClick={onClick}>
+                            <Icon icon="ChevronLeft" />
+                            <span className="ds_pagination__link-label">Previous</span>
+                        </a>
+                    </li>
+                )}
+
+                {includeFirst && (
+                    <>
+                        <Page
+                            ariaLabel="Page 1"
+                            href={pattern.replace('$1', String(1))}
+                            onClick={onClick}
+                            text="1"
+                        />
+                        <Ellipsis/>
+                    </>
+                )}
+
+                {pages && pages.map((item, index: number) => (
+                    <Page
+                        ariaLabel={`Page ${item}`}
+                        current={item === page}
+                        href={pattern.replace('$1', String(item))}
+                        key={`pagination${index}`}
+                        onClick={onClick}
+                        pattern={pattern}
+                        text={item.toString()}
+                    />
+                ))}
+
+                {includeLast && (
+                    <>
+                        <Ellipsis/>
+                        <Page
+                            ariaLabel={`Page ${totalPages}`}
+                            href={pattern.replace('$1', String(totalPages))}
+                            onClick={onClick}
+                            pattern={pattern}
+                            text={totalPages.toString()}
+                        />
+                    </>
+                )}
+
+                {page < totalPages && (
+                    <li className="ds_pagination__item">
+                        <a aria-label="Next page" className="ds_pagination__link  ds_pagination__link--text  ds_pagination__link--icon" href={pattern.replace('$1', String(page + 1))} data-search="pagination-next" onClick={onClick}>
+                            <span className="ds_pagination__link-label">Next</span>
+                            <Icon icon="ChevronRight" />
+                        </a>
+                    </li>
+                )}
+
+            </ul>
+        </nav>
+    )
+}
+
+Pagination.displayName = 'Pagination';
+
+export default Pagination;

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

@@ -5,7 +5,7 @@ import PhaseBanner from './phase-banner';
 const text = 'This is a new service. Your feedback will help us to improve it.';
 const defaultText = 'This is a new service';
 
-test('inset text renders correctly', () => {
+test('phase banner renders correctly', () => {
     render(
         <PhaseBanner>
             {text}

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

@@ -188,6 +188,7 @@ test('select with error message', () => {
 
     expect(selectWrapper).toHaveClass('ds_input--error')
     expect(select).toHaveAttribute('aria-describedby', errorMessageElement.id);
+    expect(select).toHaveAttribute('aria-invalid', 'true');
     expect(errorMessageElement).toBeInTheDocument();
     expect(errorMessageElement).toHaveClass('ds_question__error-message');
 });

package/src/components/select/select.tsx

@@ -61,6 +61,7 @@ const Select: React.FC<SGDS.Component.Select> = function ({
             >
                 <select
                     aria-describedby={describedbys.join(' ')}
+                    aria-invalid={error}
                     className="ds_select"
                     defaultValue={defaultValue}
                     id={id}

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

@@ -81,7 +81,7 @@ const SiteSearch: React.FC<SGDS.Component.SiteSearch> = function ({
                         type="search"
                     />
 
-                    <Button type="submit" icon="search" iconOnly>Search</Button>
+                    <Button type="submit" icon="Search" iconOnly>Search</Button>
 
                     {hasAutocomplete && (
                         <div id="autocomplete-suggestions" className="ds_autocomplete__suggestions">

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

@@ -133,13 +133,13 @@ test('text input with custom currency symbol', () => {
 
 test('text input with button', () => {
     const buttonText = 'Search';
-    const buttonIcon = 'search';
+    const buttonIcon = 'Search';
     render(
         <TextInput
             id={id}
             label={labelText}
-            buttonIcon="search"
-            buttonText="Search"
+            buttonIcon={buttonIcon}
+            buttonText={buttonText}
             hasButton
         />
     );
@@ -159,7 +159,7 @@ test('text input with button', () => {
     expect(buttonTextElement).toHaveClass('visually-hidden');
     expect(buttonTextElement.tagName).toEqual('SPAN');
 
-    // todo: check for correct icon
+    expect(buttonIconElement).toBeInTheDocument();
 });
 
 test('text input with hint text', () => {
@@ -289,6 +289,7 @@ test('text input with error message', () => {
 
     expect(textInput).toHaveClass('ds_input--error')
     expect(textInput).toHaveAttribute('aria-describedby', errorMessageElement.id);
+    expect(textInput).toHaveAttribute('aria-invalid', 'true');
     expect(errorMessageElement).toBeInTheDocument();
     expect(errorMessageElement).toHaveClass('ds_question__error-message');
 });

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

@@ -71,6 +71,7 @@ const TextInput: React.FC<SGDS.Component.TextInput> = ({
             >
                 <input
                     aria-describedby={describedbys.join(' ')}
+                    aria-invalid={error}
                     className={[
                         'ds_input',
                         className,

package/src/components/textarea/textarea.test.tsx

@@ -194,6 +194,7 @@ test('textarea with error message', () => {
 
     expect(textarea).toHaveClass('ds_input--error')
     expect(textarea).toHaveAttribute('aria-describedby', errorMessageElement.id);
+    expect(textarea).toHaveAttribute('aria-invalid', 'true');
     expect(errorMessageElement).toBeInTheDocument();
     expect(errorMessageElement).toHaveClass('ds_question__error-message');
 });

package/src/components/textarea/textarea.tsx

@@ -59,6 +59,7 @@ const Textarea: React.FC<SGDS.Component.Textarea> = ({
 
             <textarea
                 aria-describedby={describedbys.join(' ')}
+                aria-invalid={error}
                 className={[
                     'ds_input',
                     error && 'ds_input--error',

package/src/icons/ArrowUpward.tsx

@@ -0,0 +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>
+);
+export default SvgArrowUpward;

package/src/icons/CalendarToday.tsx

@@ -0,0 +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>
+);
+export default SvgCalendarToday;

package/src/icons/Cancel.tsx

@@ -0,0 +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 -960 960 960"
+        role="img"
+        {...props}
+    >
+        <path d="m336-280 144-144 144 144 56-56-144-144 144-144-56-56-144 144-144-144-56 56 144 144-144 144 56 56ZM480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Z" />
+    </svg>
+);
+export default SvgCancel;