@transferwise/components 0.0.0-experimental-a64b578 → 0.0.0-experimental-0b6896b

package/build/types/accordion/AccordionItem/AccordionItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AccordionItem.d.ts","sourceRoot":"","sources":["../../../../src/accordion/AccordionItem/AccordionItem.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAgB,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAOpD,MAAM,WAAW,kBAAkB;IACjC,uEAAuE;IACvE,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,qEAAqE;IACrE,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,uCAAuC;IACvC,KAAK,EAAE,SAAS,CAAC;IACjB,yCAAyC;IACzC,OAAO,EAAE,SAAS,CAAC;IACnB,6EAA6E;IAC7E,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,8DAA8D;IAC9D,IAAI,EAAE,OAAO,CAAC;IACd,oEAAoE;IACpE,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,sBAAsB;IACtB,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;CAC1B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,QAAA,MAAM,aAAa,EAAE,EAAE,CAAC,kBAAkB,CA6CzC,CAAC;AAEF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"AccordionItem.d.ts","sourceRoot":"","sources":["../../../../src/accordion/AccordionItem/AccordionItem.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAgB,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAOpD,MAAM,WAAW,kBAAkB;IACjC,uEAAuE;IACvE,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,qEAAqE;IACrE,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,uCAAuC;IACvC,KAAK,EAAE,SAAS,CAAC;IACjB,yCAAyC;IACzC,OAAO,EAAE,SAAS,CAAC;IACnB,6EAA6E;IAC7E,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,8DAA8D;IAC9D,IAAI,EAAE,OAAO,CAAC;IACd,oEAAoE;IACpE,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,sBAAsB;IACtB,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;CAC1B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,QAAA,MAAM,aAAa,EAAE,EAAE,CAAC,kBAAkB,CAoDzC,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/build/types/common/index.d.ts

@@ -12,6 +12,7 @@ export * from "./propsValues/profileType";
 export * from "./propsValues/scroll";
 export * from "./locale";
 export * from "./commonProps";
+export * from "./randomId";
 export { Breakpoint } from "./propsValues/breakpoint";
 export { Type } from "./propsValues/type";
 export { DateMode } from "./propsValues/dateMode";

package/build/types/common/randomId.d.ts

@@ -0,0 +1,13 @@
+/**
+ * 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".
+ */
+export declare const generateRandomId: () => string;
+//# sourceMappingURL=randomId.d.ts.map

package/build/types/common/randomId.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"randomId.d.ts","sourceRoot":"","sources":["../../../src/common/randomId.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AACH,eAAO,MAAM,gBAAgB,QAAO,MAEnC,CAAC"}

package/build/types/promoCard/PromoCard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PromoCard.d.ts","sourceRoot":"","sources":["../../../src/promoCard/PromoCard.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA2E,MAAM,OAAO,CAAC;AAIhG,OAAa,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAMjD,OAA2B,EAAE,uBAAuB,EAAE,MAAM,sBAAsB,CAAC;AAEnF,MAAM,MAAM,aAAa,GAAG,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;AACxD,MAAM,MAAM,UAAU,GAAG,QAAQ,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,CAAC;AACjE,MAAM,MAAM,YAAY,GACpB,EAAE,GACF,WAAW,GACX,QAAQ,GACR,UAAU,GACV,UAAU,GACV,MAAM,GACN,SAAS,GACT,MAAM,GACN,UAAU,GACV,YAAY,GACZ,UAAU,GACV,MAAM,GACN,QAAQ,GACR,KAAK,CAAC;AAEV,MAAM,WAAW,oBAAoB;IACnC,6DAA6D;IAC7D,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,uDAAuD;IACvD,EAAE,CAAC,EAAE,MAAM,CAAC;IAEZ,sEAAsE;IACtE,WAAW,EAAE,MAAM,CAAC;IAEpB;;;;OAIG;IACH,YAAY,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAEzC,6EAA6E;IAC7E,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB,gFAAgF;IAChF,aAAa,CAAC,EAAE,uBAAuB,CAAC,MAAM,CAAC,CAAC;IAEhD,kDAAkD;IAClD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB,+CAA+C;IAC/C,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB,oDAAoD;IACpD,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB,wDAAwD;IACxD,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB,uCAAuC;IACvC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IAErB,uDAAuD;IACvD,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB,gEAAgE;IAChE,KAAK,EAAE,MAAM,CAAC;IAEd,0DAA0D;IAC1D,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AAED,MAAM,WAAW,kBAAmB,SAAQ,oBAAoB,EAAE,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC;IAC3F;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB,8EAA8E;IAC9E,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd,wDAAwD;IACxD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;;OAGG;IACH,GAAG,CAAC,EAAE,YAAY,CAAC;IAEnB,iEAAiE;IACjE,MAAM,CAAC,EAAE,UAAU,CAAC;IAEpB,iDAAiD;IACjD,cAAc,CAAC,EAAE,KAAK,CAAC;IACvB,SAAS,CAAC,EAAE,KAAK,CAAC;IAClB,QAAQ,CAAC,EAAE,KAAK,CAAC;IACjB,IAAI,CAAC,EAAE,KAAK,CAAC;IACb,SAAS,CAAC,EAAE,KAAK,CAAC;IAClB,KAAK,CAAC,EAAE,KAAK,CAAC;CACf;AAED,MAAM,WAAW,qBAAsB,SAAQ,oBAAoB,EAAE,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC;IAC9F,6DAA6D;IAC7D,cAAc,CAAC,EAAE,OAAO,CAAC;IAEzB,uDAAuD;IACvD,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,6DAA6D;IAC7D,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB,iDAAiD;IACjD,SAAS,CAAC,EAAE,aAAa,CAAC;IAE1B,gEAAgE;IAChE,IAAI,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC;IAE5B,wEAAwE;IACxE,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,6BAA6B;IAC7B,QAAQ,CAAC,EAAE,KAAK,CAAC;IACjB,IAAI,CAAC,EAAE,KAAK,CAAC;IACb,QAAQ,CAAC,EAAE,KAAK,CAAC;IACjB,GAAG,CAAC,EAAE,KAAK,CAAC;IACZ,MAAM,CAAC,EAAE,KAAK,CAAC;CAChB;AAED,MAAM,MAAM,cAAc,GAAG,kBAAkB,GAAG,qBAAqB,CAAC;AAExE,MAAM,MAAM,oBAAoB,GAAG,CACjC,KAAK,EAAE,kBAAkB,GAAG,qBAAqB,KAC9C,GAAG,CAAC,OAAO,CAAC;;AAkPjB,wBAAqC"}
+{"version":3,"file":"PromoCard.d.ts","sourceRoot":"","sources":["../../../src/promoCard/PromoCard.tsx"],"names":[],"mappings":"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"}

package/build/types/select/Select.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../src/select/Select.js"],"names":[],"mappings":"AA8EA;;;;;;;;;;;;;;;;;;;;;;gCAieC"}
+{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../src/select/Select.js"],"names":[],"mappings":"AA8EA;;;;;;;;;;;;;;;;;;;;;;gCAmeC"}

package/build/types/select/searchBox/SearchBox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SearchBox.d.ts","sourceRoot":"","sources":["../../../../src/select/searchBox/SearchBox.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAc,mBAAmB,EAAE,MAAM,OAAO,CAAC;AAUxD,QAAA,MAAM,SAAS;;;;oJAwCd,CAAC;AAEF,eAAe,SAAS,CAAC"}
+{"version":3,"file":"SearchBox.d.ts","sourceRoot":"","sources":["../../../../src/select/searchBox/SearchBox.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAc,mBAAmB,EAAE,MAAM,OAAO,CAAC;AAUxD,QAAA,MAAM,SAAS;;;;oJA0Cd,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "0.0.0-experimental-a64b578",
+  "version": "0.0.0-experimental-0b6896b",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {

package/src/accordion/AccordionItem/AccordionItem.spec.js

@@ -9,6 +9,7 @@ describe('AccordionItem', () => {
     title: 'This is title number one',
     content: 'Lauri Ipsum has been the industry standard dummy text ever since the 1500s.',
     open: false,
+    id: 'test-accordion',
     onClick: jest.fn(),
   };
 

package/src/accordion/AccordionItem/AccordionItem.tsx

@@ -1,3 +1,4 @@
+import { useId } from '@radix-ui/react-id';
 import { useTheme } from '@wise/components-theming';
 import classNames from 'classnames';
 import { cloneElement, FC, ReactNode } from 'react';
@@ -70,11 +71,13 @@ const AccordionItem: FC<AccordionItemProps> = ({
   icon,
   theme = 'light',
 }) => {
-  const iconElement = icon ? cloneElement(icon as JSX.Element, { size: 24 }) : null;
+  const iconElement = icon ? cloneElement(icon as React.ReactElement<any>, { size: 24 }) : null;
+  const fallbackId = useId();
+  const accordionId = id ?? fallbackId;
 
   return (
     <div
-      id={id}
+      id={accordionId}
       className={classNames(
         'np-accordion-item',
         iconElement ? 'np-accordion-item--with-icon' : null,
@@ -90,18 +93,23 @@ const AccordionItem: FC<AccordionItemProps> = ({
         title={title}
         button={<Chevron orientation={open ? Position.TOP : Position.BOTTOM} size={Size.MEDIUM} />}
         inverseMediaCircle={false}
+        aria-expanded={open}
+        aria-controls={`${accordionId}-section`}
+        id={`${accordionId}-control`}
         onClick={onClick}
       />
       {open && (
-        <Body
-          as="span"
-          type={Typography.BODY_LARGE}
-          className={classNames('np-accordion-item__content', 'd-block', {
-            'has-icon': icon,
-          })}
-        >
-          {content}
-        </Body>
+        <div id={`${accordionId}-section`} role="region" aria-labelledby={`${accordionId}-control`}>
+          <Body
+            as="span"
+            type={Typography.BODY_LARGE}
+            className={classNames('np-accordion-item__content', 'd-block', {
+              'has-icon': icon,
+            })}
+          >
+            {content}
+          </Body>
+        </div>
       )}
     </div>
   );

package/src/accordion/AccordionItem/__snapshots__/AccordionItem.spec.js.snap

@@ -4,9 +4,13 @@ exports[`AccordionItem open / close renders an item closed 1`] = `
 <div>
   <div
     class="np-accordion-item"
+    id="test-accordion"
   >
     <button
+      aria-controls="test-accordion-section"
+      aria-expanded="false"
       class="np-option decision"
+      id="test-accordion-control"
     >
       <div
         class="media"
@@ -52,9 +56,13 @@ exports[`AccordionItem open / close renders an item open 1`] = `
 <div>
   <div
     class="np-accordion-item np-accordion-item--open"
+    id="test-accordion"
   >
     <button
+      aria-controls="test-accordion-section"
+      aria-expanded="true"
       class="np-option decision"
+      id="test-accordion-control"
     >
       <div
         class="media"
@@ -92,11 +100,17 @@ exports[`AccordionItem open / close renders an item open 1`] = `
         </div>
       </div>
     </button>
-    <span
-      class="np-text-body-large np-accordion-item__content d-block"
+    <div
+      aria-labelledby="test-accordion-control"
+      id="test-accordion-section"
+      role="region"
     >
-      Lauri Ipsum has been the industry standard dummy text ever since the 1500s.
-    </span>
+      <span
+        class="np-text-body-large np-accordion-item__content d-block"
+      >
+        Lauri Ipsum has been the industry standard dummy text ever since the 1500s.
+      </span>
+    </div>
   </div>
 </div>
 `;

package/src/common/index.js

@@ -24,3 +24,4 @@ export { FileType } from './fileType';
 export { Key } from './key';
 export * from './locale';
 export * from './commonProps';
+export * from './randomId';

package/src/common/randomId.ts

@@ -0,0 +1,14 @@
+/**
+ * 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".
+ */
+export const generateRandomId = (): string => {
+  return `id-${Math.random().toString(36).slice(7)}`;
+};

package/src/dateInput/DateInput.story.tsx

@@ -16,9 +16,6 @@ export default {
       buttonProps: {
         'aria-label': 'Select month',
       },
-      dropdownProps: {
-        'aria-label': 'Month options',
-      },
     },
   },
   tags: ['autodocs'],

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/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/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>
-`;