@transferwise/components 0.0.0-experimental-a64b578 → 0.0.0-experimental-8d248e3

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":"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"}
+{"version":3,"file":"PromoCard.d.ts","sourceRoot":"","sources":["../../../src/promoCard/PromoCard.tsx"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "0.0.0-experimental-a64b578",
+  "version": "0.0.0-experimental-8d248e3",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {
@@ -78,8 +78,8 @@
     "rollup": "^3.28.1",
     "storybook": "^7.4.5",
     "@transferwise/less-config": "3.0.6",
-    "@transferwise/neptune-css": "14.6.1",
-    "@wise/components-theming": "0.8.4"
+    "@wise/components-theming": "0.8.4",
+    "@transferwise/neptune-css": "14.6.1"
   },
   "peerDependencies": {
     "@transferwise/icons": "^3.7.0",

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/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.
  *