@transferwise/components 0.0.0-experimental-b7a6b24 → 0.0.0-experimental-fb447f5

package/build/types/instructionsList/InstructionsList.d.ts

@@ -3,7 +3,15 @@ import { CommonProps } from '../common';
 type Props = CommonProps & {
     dos?: ReactNode[];
     donts?: ReactNode[];
+    /**
+     * Add meaning to "do" icon of "do" items
+     */
+    ['do-aria-label']?: string;
+    /**
+     * Add meaning to "don't" icon of "don't" items
+     */
+    ['dont-aria-label']?: string;
 };
-declare const InstructionsList: (props: Props) => import("react").JSX.Element;
+declare const InstructionsList: ({ dos, donts, "do-aria-label": doAriaLabel, "dont-aria-label": dontAriaLabel, }: Props) => import("react").JSX.Element;
 export default InstructionsList;
 //# sourceMappingURL=InstructionsList.d.ts.map

package/build/types/instructionsList/InstructionsList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"InstructionsList.d.ts","sourceRoot":"","sources":["../../../src/instructionsList/InstructionsList.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGlC,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAGxC,KAAK,KAAK,GAAG,WAAW,GAAG;IACzB,GAAG,CAAC,EAAE,SAAS,EAAE,CAAC;IAClB,KAAK,CAAC,EAAE,SAAS,EAAE,CAAC;CACrB,CAAC;AAEF,QAAA,MAAM,gBAAgB,UAAW,KAAK,gCA8BrC,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"InstructionsList.d.ts","sourceRoot":"","sources":["../../../src/instructionsList/InstructionsList.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGlC,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAGxC,KAAK,KAAK,GAAG,WAAW,GAAG;IACzB,GAAG,CAAC,EAAE,SAAS,EAAE,CAAC;IAClB,KAAK,CAAC,EAAE,SAAS,EAAE,CAAC;IACpB;;OAEG;IACH,CAAC,eAAe,CAAC,CAAC,EAAE,MAAM,CAAC;IAC3B;;OAEG;IACH,CAAC,iBAAiB,CAAC,CAAC,EAAE,MAAM,CAAC;CAC9B,CAAC;AAEF,QAAA,MAAM,gBAAgB,oFAKnB,KAAK,gCAyBP,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/package.json

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

package/src/inputs/SelectInput.story.tsx

@@ -4,8 +4,6 @@ import { Flag } from '@wise/art';
 import { useState } from 'react';
 
 import { getMonthNames } from '../common/dateUtils';
-import Drawer from '../drawer';
-import Modal from '../modal';
 
 import { SelectInput, type SelectInputItem, SelectInputOptionContent } from './SelectInput';
 
@@ -264,23 +262,3 @@ export const Currencies: StoryObj<{
     },
   },
 };
-
-export const WithinDrawer: StoryObj<{
-  onChange: (value: Currency) => void;
-}> = {
-  ...Currencies,
-  decorators: [
-    (Story) => (
-      <Drawer open headerTitle="This is the title of the drawer">
-        <Story />
-      </Drawer>
-    ),
-  ],
-};
-
-export const WithinModal: StoryObj<{
-  onChange: (value: Currency) => void;
-}> = {
-  ...Currencies,
-  decorators: [(Story) => <Modal open body={<Story />} onClose={() => {}} />],
-};

package/src/inputs/_BottomSheet.less

@@ -1,6 +1,6 @@
 .np-bottom-sheet-v2-container {
   position: relative;
-  z-index: 1060;
+  z-index: 50;
 }
 
 .np-bottom-sheet-v2-backdrop-container {

package/src/inputs/_Popover.less

@@ -1,5 +1,5 @@
 .np-popover-v2-container {
-  z-index: 1060;
+  z-index: 10;
   display: flex;
   max-height: var(--max-height);
   width: var(--width);

package/src/instructionsList/InstructionList.story.js

@@ -1,4 +1,9 @@
+import { CrossCircleFill as DontIcon, CheckCircleFill as DoIcon } from '@transferwise/icons';
+
+import Body from '../body';
+import { Typography } from '../common';
 import Link from '../link';
+import Title from '../title';
 
 import InstructionsList from './InstructionsList';
 
@@ -25,3 +30,29 @@ export const Basic = () => {
     />
   );
 };
+
+export const IconsProvideDescription = () => {
+  return (
+    <>
+      <Body as="p">
+        In following example icons have visual meaning. <DontIcon className="d-inline-flex" /> means
+        "doesn't support" while <DoIcon className="d-inline-flex" /> means "supports". So we have to
+        make sure that this is works same for visually impaired users which use screen readers.
+      </Body>
+      <Body as="p">
+        We can do this by adding meaning to each icon via <code>do-aria-label="Supports"</code> and{' '}
+        <code>dont-aria-label="Doesn't support"</code> props. So screen reader will read "Supports
+        Multiple currencies" / "Doesn't support Create recipients".
+      </Body>
+      <Title type={Typography.TITLE_SUBSECTION} className="m-t-3">
+        List of Supported Features
+      </Title>
+      <InstructionsList
+        do-aria-label="Supports"
+        dos={['Multiple currencies', 'Existing recipients']}
+        dont-aria-label="Doesn't support"
+        donts={['Create recipients', 'Edit recipients']}
+      />
+    </>
+  );
+};

package/src/instructionsList/InstructionsList.css

@@ -1 +1 @@
-.tw-instructions{display:flex;flex-direction:column}.tw-instructions .instruction{display:flex;margin-top:8px;margin-top:var(--padding-x-small)}.tw-instructions .instruction .do,.tw-instructions .instruction .dont{flex-shrink:0;margin-bottom:0;margin-right:16px;margin-right:var(--padding-small)}.np-theme-personal .tw-instructions .instruction .do,.np-theme-personal .tw-instructions .instruction .dont{margin-right:8px;margin-right:var(--padding-x-small)}.tw-instructions .instruction .do{color:#008026;color:var(--color-content-positive)}.np-theme-personal .tw-instructions .instruction .do{color:var(--color-sentiment-positive)}.tw-instructions .instruction .dont{color:#cf2929;color:var(--color-content-negative)}.np-theme-personal .tw-instructions .instruction .dont{color:var(--color-sentiment-negative)}
+.tw-instructions{display:flex;flex-direction:column}.tw-instructions .instruction{display:flex;margin-top:8px;margin-top:var(--padding-x-small)}.tw-instructions .instruction .do,.tw-instructions .instruction .dont{flex-shrink:0;margin-bottom:0;margin-right:8px;margin-right:var(--padding-x-small)}.tw-instructions .instruction .do{color:var(--color-sentiment-positive)}.tw-instructions .instruction .dont{color:var(--color-sentiment-negative)}

package/src/instructionsList/InstructionsList.less

@@ -9,28 +9,16 @@
     .do,
     .dont {
       flex-shrink: 0;
-      margin-right: var(--padding-small);
+      margin-right: var(--padding-x-small);
       margin-bottom: 0;
-
-      .np-theme-personal & {
-        margin-right: var(--padding-x-small);
-      }
     }
 
     .do {
-      color: var(--color-content-positive);
-
-      .np-theme-personal & {
-        color: var(--color-sentiment-positive);
-      }
+      color: var(--color-sentiment-positive);
     }
 
     .dont {
-      color: var(--color-content-negative);
-
-      .np-theme-personal & {
-        color: var(--color-sentiment-negative);
-      }
+      color: var(--color-sentiment-negative);
     }
   }
 }

package/src/instructionsList/InstructionsList.spec.tsx

@@ -0,0 +1,50 @@
+import { render, screen } from '../test-utils';
+
+import InstructionsList from '.';
+
+describe('InstructionsList', () => {
+  it('should render dos list only', () => {
+    const dos = ['Test this component', 'With multiple dos'];
+    render(<InstructionsList dos={dos} />);
+
+    expect(screen.getByText(dos[0])).toBeInTheDocument();
+    expect(screen.getByText(dos[1])).toBeInTheDocument();
+  });
+
+  it('should render do items with description for icons', () => {
+    const dos = ['Card validation', 'ID verification'];
+    render(<InstructionsList dos={dos} do-aria-label="Do" />);
+
+    expect(screen.getByText(dos[0])).toBeInTheDocument();
+    expect(screen.getByText(dos[1])).toBeInTheDocument();
+    expect(screen.getAllByText('Do')).toHaveLength(2);
+  });
+
+  it('should render donts list only', () => {
+    const donts = ['Card validation', 'ID verification'];
+
+    render(<InstructionsList donts={donts} />);
+    expect(screen.getByText(donts[0])).toBeInTheDocument();
+    expect(screen.getByText(donts[1])).toBeInTheDocument();
+  });
+
+  it('should render do/dont lists with description for icons', () => {
+    const dos = ['Card validation'];
+    const donts = ['ID verification'];
+    const doIconDescription = 'Do';
+    const dontIconDescription = 'No';
+
+    render(
+      <InstructionsList
+        dos={dos}
+        do-aria-label={doIconDescription}
+        donts={donts}
+        dont-aria-label={dontIconDescription}
+      />,
+    );
+    expect(screen.getByText(dos[0])).toBeInTheDocument();
+    expect(screen.getByText(donts[0])).toBeInTheDocument();
+    expect(screen.getByText('Do')).toBeInTheDocument();
+    expect(screen.getByText('No')).toBeInTheDocument();
+  });
+});

package/src/instructionsList/InstructionsList.tsx

@@ -1,5 +1,4 @@
-import { CrossCircle, CrossCircleFill, CheckCircle, CheckCircleFill } from '@transferwise/icons';
-import { useTheme } from '@wise/components-theming';
+import { CrossCircleFill as DontIcon, CheckCircleFill as DoIcon } from '@transferwise/icons';
 import { ReactNode } from 'react';
 
 import Body from '../body/Body';
@@ -9,21 +8,29 @@ import { Typography } from '../common/propsValues/typography';
 type Props = CommonProps & {
   dos?: ReactNode[];
   donts?: ReactNode[];
+  /**
+   * Add meaning to "do" icon of "do" items
+   */
+  ['do-aria-label']?: string;
+  /**
+   * Add meaning to "don't" icon of "don't" items
+   */
+  ['dont-aria-label']?: string;
 };
 
-const InstructionsList = (props: Props) => {
-  const { isModern } = useTheme();
-  const { dos, donts } = props;
-  const DontIcon = isModern ? CrossCircleFill : CrossCircle;
-  const DoIcon = isModern ? CheckCircleFill : CheckCircle;
-
+const InstructionsList = ({
+  dos,
+  donts,
+  'do-aria-label': doAriaLabel = undefined,
+  'dont-aria-label': dontAriaLabel = undefined,
+}: Props) => {
   return (
     <div className="tw-instructions">
       {dos &&
         dos.map((doThis, index) => (
           // eslint-disable-next-line react/no-array-index-key
           <div key={index} className="instruction">
-            <DoIcon size={24} className="do" />
+            <DoIcon size={24} className="do" title={doAriaLabel} />
             <Body className="text-primary" type={Typography.BODY_LARGE}>
               {doThis}
             </Body>
@@ -33,7 +40,7 @@ const InstructionsList = (props: Props) => {
         donts.map((dont, index) => (
           // eslint-disable-next-line react/no-array-index-key
           <div key={index} className="instruction">
-            <DontIcon size={24} className="dont" />
+            <DontIcon size={24} className="dont" title={dontAriaLabel} />
             <Body className="text-primary" type={Typography.BODY_LARGE}>
               {dont}
             </Body>