@transferwise/components 45.17.0 → 45.18.0

package/src/moneyInput/MoneyInput.story.tsx

@@ -19,9 +19,6 @@ export default {
       buttonProps: {
         'aria-label': 'Select currency',
       },
-      dropdownProps: {
-        'aria-label': 'Currency options',
-      },
     },
   },
   tags: ['autodocs'],

package/src/phoneNumberInput/PhoneNumberInput.story.js

@@ -15,9 +15,6 @@ export const Basic = () => {
     buttonProps: {
       'aria-label': 'Select country code',
     },
-    dropdownProps: {
-      'aria-label': 'Country code options',
-    },
   });
 
   return (

package/src/processIndicator/ProcessIndicator.js

@@ -4,7 +4,7 @@ import { Component } from 'react';
 
 import { Status, Size } from '../common';
 
-const radius = { xs: 11, sm: 22, xl: 61 };
+const radius = { xxs: 6, xs: 11, sm: 22, xl: 61 };
 export const ANIMATION_DURATION_IN_MS = 1500;
 
 class ProcessIndicator extends Component {
@@ -100,7 +100,7 @@ class ProcessIndicator extends Component {
 }
 ProcessIndicator.propTypes = {
   status: PropTypes.oneOf(['processing', 'failed', 'succeeded', 'hidden']),
-  size: PropTypes.oneOf(['xs', 'sm', 'xl']),
+  size: PropTypes.oneOf(['xxs', 'xs', 'sm', 'xl']),
   onAnimationCompleted: PropTypes.func,
   className: PropTypes.string,
   'data-testid': PropTypes.string,

package/src/promoCard/PromoCard.tsx

@@ -3,7 +3,7 @@ import classNames from 'classnames';
 import React, { forwardRef, FunctionComponent, ReactElement, useEffect, useState } from 'react';
 
 import Body from '../body';
-import { Typography } from '../common';
+import { Typography, generateRandomId } from '../common';
 import Card, { CardProps } from '../common/card';
 import Display from '../display';
 import Image from '../image/Image';
@@ -142,21 +142,6 @@ export type PolymorphicPromoCard = (
   props: PromoCardLinkProps | PromoCardCheckedProps,
 ) => JSX.Element;
 
-/**
- * generateRandomId() function
- *
- * This function generates a random string of characters that can be used as
- * an ID.
- *
- * @returns {string} A random string of characters.
- * @example
- * const id = generateRandomId();
- * // id will be a random string of characters, such as "id-4711".
- */
-const generateRandomId = (): string => {
-  return `id-${Math.random().toString(36).slice(7)}`;
-};
-
 /**
  * PromoCard component.
  *

package/src/select/Select.js

@@ -333,6 +333,8 @@ export default function Select({
         ref={optionsListReference}
         id={listboxId}
         role="listbox"
+        aria-orientation="vertical"
+        aria-activedescendant={getUniqueIdForOption(id, selected)}
         tabIndex="-1"
         className={dropdownClass}
         {...dropdownProps}

package/src/select/Select.story.js

@@ -41,12 +41,6 @@ export const Basic = () => {
   return (
     <Select
       id={id}
-      buttonProps={{
-        'aria-label': 'Basic button',
-      }}
-      dropdownProps={{
-        'aria-label': 'Options for basic button',
-      }}
       size={size}
       classNames={`${hasError ? 'has-error' : ''}`}
       placeholder={placeholder}

package/src/select/searchBox/SearchBox.spec.js

@@ -1,11 +1,7 @@
-import '@testing-library/jest-dom';
-
-import { render } from '../../test-utils';
+import { render, screen } from '../../test-utils';
 
 import SearchBox from '.';
 
-jest.mock('react-transition-group/Transition', () => jest.fn('placeholder'));
-
 describe('SearchBox', () => {
   const props = {
     classNames: {},
@@ -17,8 +13,8 @@ describe('SearchBox', () => {
   };
 
   it('renders', () => {
-    const { container } = render(<SearchBox {...props} />);
+    render(<SearchBox {...props} />);
 
-    expect(container).toMatchSnapshot();
+    expect(screen.getByRole('searchbox')).toBeInTheDocument();
   });
 });

package/src/select/searchBox/SearchBox.tsx

@@ -37,6 +37,8 @@ const SearchBox = forwardRef<HTMLInputElement, Props>(
             <Input
               ref={reference}
               id={id}
+              role="searchbox"
+              inputMode="search"
               className={classnames(style('np-select-filter'))}
               placeholder={placeholder}
               value={value}

package/src/stepper/Stepper.css

@@ -1 +1 @@
-.tw-stepper{padding-bottom:24px;width:100%}@media only screen and (max-width:575px){.tw-stepper{padding-bottom:0}}.tw-stepper__step{list-style-type:none;position:absolute;top:0}.tw-stepper__step--active .tw-stepper__step-label{color:#37517e;color:var(--color-content-primary);cursor:default}.tw-stepper__step--clickable .tw-stepper__step-label{border-radius:2px;color:#0097c7;color:var(--color-content-accent);line-height:0;transition:color .15s ease-in-out}.np-theme-personal .tw-stepper__step--clickable .tw-stepper__step-label{color:#5d7079;color:var(--color-content-secondary);top:0}.tw-stepper__step--has-tooltip{cursor:pointer}@media screen and (min-width:576px) and (max-width:991px){.tw-stepper__step:first-child .tooltip-inner{transform:translateX(calc(50% - 32px))}.tw-stepper__step:last-child .tooltip-inner{transform:translateX(calc(-50% + 32px))}}.tw-stepper__step-label{color:#5d7079;color:var(--color-content-secondary);position:absolute;top:0;transform:translateX(-50%);transition:color .6s ease-in-out;white-space:nowrap}[dir=rtl] .tw-stepper__step-label{transform:translateX(50%)}.tw-stepper .tooltip{top:24px!important;white-space:nowrap}.tw-stepper .tooltip .tooltip-inner{max-width:100%}.tw-stepper .tw-tooltip-container{display:block}.tw-stepper-steps{padding:0;position:relative}[dir=rtl] .tw-stepper-steps{padding:0}.progress-bar{-webkit-backface-visibility:hidden;background-color:var(--color-interactive-primary);border-bottom-left-radius:1px;border-top-left-radius:1px;float:left;height:100%;transition:width .6s ease-in-out;will-change:width}[dir=rtl] .progress-bar{float:right}.progress-bar:after{border-radius:4px;content:"";float:right;height:8px;margin-right:-4px;margin-top:-3px;width:8px}[dir=rtl] .progress-bar:after{float:left;margin-left:-4px;margin-right:0}.btn-unstyled{background:none;border:none;display:block;margin:0;padding:0}
+.tw-stepper{padding-bottom:24px;width:100%}@media only screen and (max-width:575px){.tw-stepper{padding-bottom:0}}.tw-stepper__step{list-style-type:none;position:absolute;top:0}.tw-stepper__step--active .tw-stepper__step-label{color:#37517e;color:var(--color-content-primary);cursor:default}.tw-stepper__step--clickable .tw-stepper__step-label{border-radius:2px;color:#0097c7;color:var(--color-content-accent);line-height:0;transition:color .15s ease-in-out}.np-theme-personal .tw-stepper__step--clickable .tw-stepper__step-label{color:#5d7079;color:var(--color-content-secondary);top:0}.tw-stepper__step--has-tooltip{cursor:pointer}@media screen and (min-width:576px) and (max-width:991px){.tw-stepper__step:first-child .tooltip-inner{transform:translateX(calc(50% - 32px))}.tw-stepper__step:last-child .tooltip-inner{transform:translateX(calc(-50% + 32px))}}.tw-stepper__step-label{color:#5d7079;color:var(--color-content-secondary);position:absolute;top:0;transform:translateX(-50%);transition:color .6s ease-in-out;white-space:nowrap}[dir=rtl] .tw-stepper__step-label{transform:translateX(50%)}.tw-stepper .tooltip{top:24px!important;white-space:nowrap}.tw-stepper .tooltip .tooltip-inner{max-width:100%}.tw-stepper .tw-tooltip-container{display:inline-block}.tw-stepper-steps{padding:0;position:relative}[dir=rtl] .tw-stepper-steps{padding:0}.progress-bar{-webkit-backface-visibility:hidden;background-color:var(--color-interactive-primary);border-bottom-left-radius:1px;border-top-left-radius:1px;float:left;height:100%;transition:width .6s ease-in-out;will-change:width}[dir=rtl] .progress-bar{float:right}.progress-bar:after{border-radius:4px;content:"";float:right;height:8px;margin-right:-4px;margin-top:-3px;width:8px}[dir=rtl] .progress-bar:after{float:left;margin-left:-4px;margin-right:0}.btn-unstyled{background:none;border:none;display:block;margin:0;padding:0}

package/src/stepper/Stepper.less

@@ -68,7 +68,7 @@
   }
 
   & .tw-tooltip-container {
-    display: block;
+    display: inline-block;
   }
 }
 

package/src/tooltip/Tooltip.css

@@ -1 +1 @@
-.tw-tooltip-container{display:inline-block}.tw-tooltip-container .tooltip{-webkit-user-select:none;-moz-user-select:none;user-select:none;visibility:visible}.tw-tooltip-container .tooltip:not(.in){animation:tw-tooltip-disappear;animation-delay:.15s;animation-duration:0s;animation-fill-mode:both;pointer-events:none}@keyframes tw-tooltip-disappear{0%{visibility:visible}to{visibility:hidden}}.np-tooltip{z-index:1070}.np-panel[data-popper-placement^=right]>.np-panel__content.tooltip-inner .np-panel__arrow{left:-7px}.np-panel[data-popper-placement^=left]>.np-panel__content.tooltip-inner .np-panel__arrow{right:-7px}
+.tw-tooltip-container{display:inline-block}.tw-tooltip-container .tooltip{-webkit-user-select:none;-moz-user-select:none;user-select:none;visibility:visible}.tw-tooltip-container .tooltip:not(.in){animation:tw-tooltip-disappear;animation-delay:.15s;animation-duration:0s;animation-fill-mode:both;pointer-events:none}@keyframes tw-tooltip-disappear{0%{visibility:visible}to{visibility:hidden}}.np-tooltip{z-index:1070}.np-tooltip,.np-tooltip .tooltip-inner{visibility:hidden}.np-tooltip--open,.np-tooltip--open .tooltip-inner{visibility:initial}.np-panel[data-popper-placement^=right]>.np-panel__content.tooltip-inner .np-panel__arrow{left:-7px}.np-panel[data-popper-placement^=left]>.np-panel__content.tooltip-inner .np-panel__arrow{right:-7px}

package/src/tooltip/Tooltip.less

@@ -34,6 +34,19 @@
 
 .np-tooltip {
   z-index: @zindex-tooltip;
+  visibility: hidden;
+
+  .tooltip-inner {
+    visibility: hidden;
+  }
+
+  &--open {
+    visibility: initial;
+
+    .tooltip-inner {
+      visibility: initial;
+    }
+  }
 }
 
 .np-panel[data-popper-placement^="right"] > .np-panel__content.tooltip-inner {

package/src/tooltip/Tooltip.spec.tsx

@@ -1,48 +1,116 @@
-import { render, screen, fireEvent, userEvent } from '../test-utils';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import React from 'react';
 
 import Tooltip from '.';
 
-describe('Tooltip', () => {
-  const anchor = <span>Hover over me!</span>;
+describe('Tooltip Component', () => {
+  it('renders an empty list when no items are passed', () => {
+    expect(
+      render(
+        <Tooltip label="Test Tooltip">
+          <span>Hover me</span>
+        </Tooltip>,
+      ).container,
+    ).toMatchSnapshot();
+  });
+
+  it('initially is hidden (test with toBeInTheDocument)', () => {
+    render(
+      <Tooltip label="Test Tooltip">
+        <span>Hover me</span>
+      </Tooltip>,
+    );
+    const tooltip = screen.getByRole('tooltip', { hidden: true });
+    expect(tooltip).toBeInTheDocument();
+    expect(tooltip).toHaveAttribute('aria-hidden', 'true');
+  });
 
-  it('wraps anchor as a children and renders it', () => {
-    render(<Tooltip label="Tooltip">{anchor}</Tooltip>);
+  it('should render the tooltip label when closed', () => {
+    render(
+      <Tooltip label="Test Tooltip">
+        <span>Hover me</span>
+      </Tooltip>,
+    );
+    const triggerElement = screen.getByText('Hover me');
+    const tooltip = screen.getByRole('tooltip', { hidden: true });
+    expect(tooltip).toHaveAttribute('aria-hidden', 'true');
 
-    expect(screen.getByText('Hover over me!')).toBeInTheDocument();
+    userEvent.hover(triggerElement);
+    expect(tooltip).toHaveAttribute('aria-hidden', 'false');
   });
 
-  it('appears onMouseOver', () => {
-    const tooltipLabel = 'Tooltip';
-    render(<Tooltip label={tooltipLabel}>{anchor}</Tooltip>);
-    expect(screen.queryByText(tooltipLabel)).not.toBeInTheDocument();
+  it('should display the tooltip on mouse hover', () => {
+    render(
+      <Tooltip label="Test Tooltip">
+        <span>Hover over me!</span>
+      </Tooltip>,
+    );
+    const triggerElement = screen.getByText('Hover over me!');
 
-    userEvent.hover(screen.getByText('Hover over me!'));
-    expect(screen.getByText(tooltipLabel)).toBeInTheDocument();
+    userEvent.hover(triggerElement);
+
+    const tooltipElement = screen.queryByText('Test Tooltip');
+    expect(tooltipElement).toBeVisible();
   });
 
-  it('hides onMouseOut', () => {
-    const tooltipLabel = 'Tooltip';
-    render(<Tooltip label={tooltipLabel}>{anchor}</Tooltip>);
+  it('should hide the tooltip on mouse out', () => {
+    render(
+      <Tooltip label="Test Tooltip">
+        <span>Hover me</span>
+      </Tooltip>,
+    );
+    const triggerElement = screen.getByText('Hover me');
+
+    userEvent.hover(triggerElement);
+    let tooltipElement = screen.getByText('Test Tooltip');
+    expect(tooltipElement).toBeVisible();
 
-    userEvent.hover(screen.getByText('Hover over me!'));
-    expect(screen.getByText(tooltipLabel)).toBeInTheDocument();
-    userEvent.unhover(screen.getByText('Hover over me!'));
+    userEvent.unhover(triggerElement);
+    tooltipElement = screen.getByRole('tooltip', { hidden: true });
+    expect(tooltipElement).toHaveAttribute('aria-hidden', 'true');
   });
 
-  it('appears onFocus', () => {
-    const tooltipLabel = 'Tooltip';
-    render(<Tooltip label={tooltipLabel}>{anchor}</Tooltip>);
-    expect(screen.queryByText(tooltipLabel)).not.toBeInTheDocument();
+  it('should display the tooltip on focus', () => {
+    render(
+      <Tooltip label="Test Tooltip">
+        <span>Focus me</span>
+      </Tooltip>,
+    );
+    const triggerElement = screen.getByText('Focus me');
+
+    userEvent.tab();
+    const tooltipElement = screen.getByText('Test Tooltip');
+    expect(tooltipElement).toBeVisible();
+  });
+
+  it('should hide the tooltip on blur', () => {
+    render(
+      <Tooltip label="Test Tooltip">
+        <span>Focus me</span>
+      </Tooltip>,
+    );
+    const triggerElement = screen.getByText('Focus me');
+
+    userEvent.tab();
+    let tooltipElement = screen.getByRole('tooltip', { hidden: true });
+    expect(tooltipElement).toBeVisible();
 
-    fireEvent.focus(screen.getByText('Hover over me!'));
-    expect(screen.getByText(tooltipLabel)).toBeInTheDocument();
+    userEvent.tab({ shift: true }); // Blur the element
+    tooltipElement = screen.getByRole('tooltip', { hidden: true });
+    expect(tooltipElement).toHaveAttribute('aria-hidden', 'true');
   });
 
-  it('hides onBlur', () => {
-    const tooltipLabel = 'Tooltip';
-    render(<Tooltip label={tooltipLabel}>{anchor}</Tooltip>);
+  it('should display the tooltip when the "children" prop is a React element', () => {
+    render(
+      <Tooltip label="Test Tooltip">
+        <button type="button">Click me</button>
+      </Tooltip>,
+    );
+    const triggerElement = screen.getByText('Click me');
 
-    fireEvent.blur(screen.getByText('Hover over me!'));
-    expect(screen.queryByText(tooltipLabel)).not.toBeInTheDocument();
+    userEvent.hover(triggerElement);
+    const tooltipElement = screen.getByRole('tooltip', { hidden: true });
+    expect(tooltipElement).toBeVisible();
   });
 });

package/src/tooltip/Tooltip.tsx

@@ -1,4 +1,5 @@
 /* eslint-disable @typescript-eslint/ban-ts-comment */
+import { useId } from '@radix-ui/react-id';
 import classNames from 'classnames';
 import {
   cloneElement,
@@ -22,6 +23,7 @@ import {
 type Props = PropsWithChildren<{
   position?: PositionTop | PositionRight | PositionBottom | PositionLeft;
   label: ReactNode;
+  id?: string;
 }> &
   CommonProps;
 
@@ -29,6 +31,7 @@ const Tooltip = ({
   position = Position.TOP,
   children = undefined,
   label,
+  id,
   className,
 }: Props): ReactElement => {
   const [open, setOpen] = useState(false);
@@ -36,6 +39,8 @@ const Tooltip = ({
   const [arrowElement, setArrowElement] = useState(null);
   const [popperElement, setPopperElement] = useState(null);
 
+  const fallbackId = useId();
+  const tooltipId = id ?? fallbackId;
   const modifiers = [];
 
   modifiers.push({
@@ -71,46 +76,34 @@ const Tooltip = ({
 
   return (
     <>
-      <span ref={anchorReference} className="d-inline-block">
+      <span
+        ref={anchorReference}
+        className="tw-tooltip-container"
+        onMouseOver={() => setOpen(true)}
+        onFocus={() => setOpen(true)}
+        onMouseOut={() => setOpen(false)}
+        onBlur={() => setOpen(false)}
+      >
         {children
           ? cloneElement(children as ReactElement, {
-              /* eslint-disable @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call */
-              onMouseOver: () => {
-                if ((children as ReactElement)?.props?.onMouseOver) {
-                  (children as ReactElement)?.props?.onMouseOver();
-                }
-                setOpen(true);
-              },
-              onFocus: () => {
-                if ((children as ReactElement)?.props?.onFocus) {
-                  (children as ReactElement).props.onFocus();
-                }
-                setOpen(true);
-              },
-              onMouseOut: () => {
-                if ((children as ReactElement)?.props?.onMouseOver) {
-                  (children as ReactElement).props.onMouseOver();
-                }
-                setOpen(false);
-              },
-              onBlur: () => {
-                if ((children as ReactElement)?.props?.onBlur) {
-                  (children as ReactElement).props.onBlur();
-                }
-                setOpen(false);
-              },
-              /* eslint-enable @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call */
+              'aria-describedby': `${tooltipId}-tooltip`,
             })
           : null}
-      </span>
-      {open ? (
         <div
           // @ts-expect-error
           ref={setPopperElement}
-          className={classNames('np-tooltip', 'np-panel', 'np-panel--open', 'bg-screen', className)}
+          className={classNames(
+            'np-tooltip',
+            'np-panel',
+            open ? `np-panel--open np-tooltip--open` : null,
+            className,
+          )}
           // eslint-disable-next-line react/forbid-dom-props
           style={{ ...styles.popper }}
           {...attributes.popper}
+          aria-hidden={!open}
+          role="tooltip"
+          id={`${tooltipId}-tooltip`}
         >
           <div className="np-panel__content tooltip-inner">
             {label}
@@ -123,7 +116,7 @@ const Tooltip = ({
             />
           </div>
         </div>
-      ) : null}
+      </span>
     </>
   );
 };

package/src/tooltip/__snapshots__/Tooltip.spec.tsx.snap

@@ -0,0 +1,31 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Tooltip Component renders an empty list when no items are passed 1`] = `
+<div>
+  <span
+    class="tw-tooltip-container"
+  >
+    <span
+      aria-describedby="radix-0-tooltip"
+    >
+      Hover me
+    </span>
+    <div
+      aria-hidden="true"
+      class="np-tooltip np-panel"
+      id="radix-0-tooltip"
+      role="tooltip"
+      style="position: absolute; left: 0px; top: 0px;"
+    >
+      <div
+        class="np-panel__content tooltip-inner"
+      >
+        Test Tooltip
+        <div
+          class="np-panel__arrow"
+        />
+      </div>
+    </div>
+  </span>
+</div>
+`;

package/src/upload/Upload.spec.js

@@ -15,6 +15,7 @@ jest.mock('./utils/asyncFileRead');
 const { asyncFileRead } = require('./utils/asyncFileRead');
 
 const defaultLocale = 'en-GB';
+const formatMessage = (id) => `${id}`;
 jest.mock('react-intl', () => ({
   injectIntl: (Component) =>
     function (props) {
@@ -22,6 +23,7 @@ jest.mock('react-intl', () => ({
         <Component {...props} intl={{ locale: defaultLocale, formatMessage: (id) => `${id}` }} />
       );
     },
+  useIntl: () => ({ formatMessage }),
   defineMessages: (translations) => translations,
 }));
 

package/src/instructionsList/InstructionList.story.js

@@ -1,27 +0,0 @@
-import Link from '../link';
-
-import InstructionsList from './InstructionsList';
-
-export default {
-  component: InstructionsList,
-  title: 'Typography/InstructionsList',
-};
-
-export const Basic = () => {
-  return (
-    <InstructionsList
-      dos={[
-        'Do an initial money transfer',
-        'Invite at least 3 friends',
-        <span key="12">
-          Paying extra{' '}
-          <Link href="" type="link-large">
-            hidden fees
-          </Link>{' '}
-          for transfers
-        </span>,
-      ]}
-      donts={['Paying extra hidden fees for transfers', 'Use bad exchange rate']}
-    />
-  );
-};

package/src/instructionsList/InstructionsList.spec.js

@@ -1,29 +0,0 @@
-import { shallow } from 'enzyme';
-
-import InstructionsList from '.';
-
-describe('InstructionsList', () => {
-  it('should render dos list only', () => {
-    const dos = ['Test this component', 'With multiple dos'];
-    const component = shallow(<InstructionsList dos={dos} />);
-
-    expect(component.find('.do')).toHaveLength(2);
-  });
-
-  it('should render donts list only', () => {
-    const donts = ['Putting things into production without testing'];
-
-    const component = shallow(<InstructionsList donts={donts} />);
-    expect(component.find('.dont')).toHaveLength(1);
-  });
-
-  it('should render do/dont lists', () => {
-    const dos = ['Do this'];
-    const donts = [`Don't do that`];
-
-    const component = shallow(<InstructionsList dos={dos} donts={donts} />);
-    expect(component.find('.do')).toHaveLength(1);
-    expect(component.find('.dont')).toHaveLength(1);
-    expect(component.find('.instruction')).toHaveLength(2);
-  });
-});

package/src/select/searchBox/__snapshots__/SearchBox.spec.js.snap

@@ -1,46 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`SearchBox renders 1`] = `
-<div>
-  <li
-    class="border-bottom"
-  >
-    <a
-      class="np-select-filter-link p-a-0"
-    >
-      <div
-        class="input-group"
-      >
-        <span
-          class="input-group-addon input-group-addon--search"
-        >
-          <span
-            aria-hidden="true"
-            class="tw-icon tw-icon-search tw-icon tw-icon-search"
-            data-testid="search-icon"
-            role="presentation"
-          >
-            <svg
-              fill="currentColor"
-              focusable="false"
-              height="24"
-              viewBox="0 0 24 24"
-              width="24"
-            >
-              <path
-                d="m20.786 19.543-4.029-4.029c1.072-1.328 1.672-3 1.672-4.8C18.429 6.471 14.957 3 10.714 3S3 6.471 3 10.714s3.471 7.715 7.714 7.715c1.8 0 3.472-.643 4.8-1.672l4.029 4.029 1.243-1.243Zm-10.029-2.829c-3.3 0-6-2.7-6-6s2.7-6 6-6 6 2.7 6 6-2.7 6-6 6Z"
-              />
-            </svg>
-          </span>
-        </span>
-        <input
-          class="np-select-filter form-control np-form-control np-form-control--size-auto np-text-body-large np-input np-input--shape-rectangle"
-          placeholder="placeholder"
-          spellcheck="false"
-          value="value"
-        />
-      </div>
-    </a>
-  </li>
-</div>
-`;