@transferwise/components 46.65.0 → 46.67.0

package/src/decision/Decision.spec.tsx

@@ -0,0 +1,166 @@
+import Avatar from '../avatar';
+import { Breakpoint, Size } from '../common';
+import { mockMatchMedia } from '../mocks';
+import { render, screen } from '../test-utils';
+
+import Decision, { DecisionPresentation, DecisionType } from '.';
+import { DecisionProps } from './Decision';
+
+mockMatchMedia(jest);
+
+describe('Decision', () => {
+  const commonProps: DecisionProps = {
+    options: [
+      {
+        media: {
+          list: <Avatar type="initials">HM</Avatar>,
+          block: <img src="img.jpg" alt="alt" />,
+        },
+        href: '#href',
+        title: 'title',
+        description: 'description',
+        'aria-label': 'A label',
+        onClick: jest.fn(),
+      },
+    ],
+    presentation: DecisionPresentation.LIST_BLOCK,
+    type: DecisionType.NAVIGATION,
+  };
+
+  const initialInnerWidth = window.innerWidth;
+  const resetClientWidth = (width: number) => {
+    window.innerWidth = width;
+  };
+
+  afterAll(() => {
+    window.innerWidth = initialInnerWidth;
+  });
+
+  beforeEach(() => {
+    resetClientWidth(Breakpoint.EXTRA_SMALL - 1);
+  });
+
+  describe(`when presentation is ${DecisionPresentation.LIST_BLOCK}`, () => {
+    const props = { ...commonProps };
+
+    it('renders only Navigation Option before first breakpoint', () => {
+      render(<Decision {...props} />);
+      const element = screen.getByLabelText('A label');
+      expect(element).toBeInTheDocument();
+
+      expectElementToBeNavigationOption(element);
+      expectElementNotToBeTile(element);
+    });
+
+    it('renders only Tile after first breakpoint', () => {
+      resetClientWidth(Breakpoint.SMALL);
+
+      render(<Decision {...props} />);
+      const element = screen.getByLabelText('A label');
+      expect(element).toBeInTheDocument();
+
+      expectElementNotToBeNavigationOption(element);
+      expectElementToBeTile(element);
+      expectElementNotToBeSmallTile(element);
+    });
+  });
+
+  describe(`when presentation is ${DecisionPresentation.LIST_BLOCK_GRID}`, () => {
+    const props = { ...commonProps, presentation: DecisionPresentation.LIST_BLOCK_GRID };
+
+    it('renders only Navigation Option before first breakpoint', () => {
+      render(<Decision {...props} />);
+      const element = screen.getByLabelText('A label');
+      expect(element).toBeInTheDocument();
+
+      expectElementToBeNavigationOption(element);
+      expectElementNotToBeTile(element);
+    });
+
+    it('renders only Tile after first breakpoint', () => {
+      resetClientWidth(Breakpoint.SMALL);
+
+      render(<Decision {...props} />);
+      const element = screen.getByLabelText('A label');
+      expect(element).toBeInTheDocument();
+
+      expectElementNotToBeNavigationOption(element);
+      expectElementToBeTile(element);
+      expectElementNotToBeSmallTile(element);
+    });
+
+    it('renders container as a grid', () => {
+      resetClientWidth(Breakpoint.SMALL);
+
+      render(<Decision {...props} />);
+      const element = screen.getByLabelText('A label').parentElement;
+
+      expect(element).toHaveClass('np-decision');
+      expect(element).toHaveClass('np-decision--grid');
+      expect(element).toHaveClass('flex-wrap');
+    });
+  });
+
+  describe(`when presentation is ${DecisionPresentation.LIST_BLOCK} and size is Small`, () => {
+    const props: DecisionProps = {
+      ...commonProps,
+      presentation: DecisionPresentation.LIST_BLOCK,
+      size: Size.SMALL,
+    };
+
+    it('renders only Navigation Option before breakpoint', () => {
+      render(<Decision {...props} />);
+      const element = screen.getByLabelText('A label');
+      expect(element).toBeInTheDocument();
+
+      expectElementToBeNavigationOption(element);
+      expectElementNotToBeTile(element);
+    });
+
+    it('renders Small Tile after breakpoint', () => {
+      resetClientWidth(Breakpoint.EXTRA_SMALL);
+
+      render(<Decision {...props} />);
+      const element = screen.getByLabelText('A label');
+      expect(element).toBeInTheDocument();
+
+      expectElementNotToBeNavigationOption(element);
+      expectElementToBeTile(element);
+      expectElementToBeSmallTile(element);
+    });
+  });
+
+  describe(`when presentation is ${DecisionPresentation.LIST}`, () => {
+    const props = { ...commonProps, presentation: DecisionPresentation.LIST };
+
+    it('renders Navigation Option before breakpoint', () => {
+      render(<Decision {...props} />);
+      const element = screen.getByLabelText('A label');
+      expect(element).toBeInTheDocument();
+
+      expectElementToBeNavigationOption(element);
+      expectElementNotToBeTile(element);
+    });
+  });
+
+  const expectElementToBeNavigationOption = (element: HTMLElement) => {
+    expect(element).toHaveClass('np-navigation-option');
+  };
+  const expectElementNotToBeNavigationOption = (element: HTMLElement) => {
+    expect(element).not.toHaveClass('np-navigation-option');
+  };
+
+  const expectElementToBeTile = (element: HTMLElement) => {
+    expect(element).toHaveClass('np-tile');
+  };
+  const expectElementNotToBeTile = (element: HTMLElement) => {
+    expect(element).not.toHaveClass('np-tile');
+  };
+
+  const expectElementToBeSmallTile = (element: HTMLElement) => {
+    expect(element).toHaveClass('np-tile--small');
+  };
+  const expectElementNotToBeSmallTile = (element: HTMLElement) => {
+    expect(element).not.toHaveClass('np-tile--small');
+  };
+});

package/src/decision/Decision.story.tsx

@@ -24,63 +24,64 @@ export const Basic = () => {
   const size = select('size', [Size.MEDIUM, Size.SMALL], Size.MEDIUM);
 
   return (
-    <>
-      <Decision
-        options={[
-          {
-            description: 'Short text test.',
-            onClick: action('clicked'),
-            href: '#href1',
-            disabled,
-            media: {
-              block: <Illustration name="globe" alt="" disablePadding />,
-              list: (
-                <Avatar size="md" type="initials">
-                  HM
-                </Avatar>
-              ),
-            },
-            title: 'Hank Miller',
+    <Decision
+      options={[
+        {
+          description: 'Short text test.',
+          onClick: action('clicked'),
+          href: '#href1',
+          disabled,
+          media: {
+            block: <Illustration name="globe" alt="" disablePadding />,
+            list: (
+              <Avatar size="md" type="initials">
+                HM
+              </Avatar>
+            ),
           },
-          {
-            description:
-              "Click here to send money to Hank Miller. Money will be sent directly to Han Miller's multi-currency account.",
-            onClick: action('clicked'),
-            disabled,
-            href: '#href2',
-            media: {
-              block: <Illustration name="confetti" alt="" disablePadding />,
-              list: (
-                <Avatar size="md" type="initials">
-                  HM
-                </Avatar>
-              ),
-            },
-            title: 'Hank Miller',
+          'aria-label': 'Click to see something',
+          title: 'Hank Miller',
+        },
+        {
+          description:
+            "Click here to send money to Hank Miller. Money will be sent directly to Han Miller's multi-currency account.",
+          onClick: action('clicked'),
+          disabled,
+          href: '#href2',
+          media: {
+            block: <Illustration name="confetti" alt="" disablePadding />,
+            list: (
+              <Avatar size="md" type="initials">
+                HM
+              </Avatar>
+            ),
           },
-          {
-            description: "I'm disabled and don't require an onClick or href.",
-            media: {
-              block: <Illustration name="briefcase" alt="" disablePadding />,
-              list: (
-                <img
-                  src="https://wise.com/public-resources/assets/illustrations/business_account_web_small.svg"
-                  alt=""
-                  width="100"
-                />
-              ),
-            },
-            disabled: true,
-            title: 'Hank Miller',
+          'aria-label': 'Click here to send money to Hank Miller.',
+          title: 'Hank Miller',
+        },
+        {
+          description: "I'm disabled and don't require an onClick or href.",
+          media: {
+            block: <Illustration name="briefcase" alt="" disablePadding />,
+            list: (
+              <img
+                src="https://wise.com/public-resources/assets/illustrations/business_account_web_small.svg"
+                alt=""
+                width="100"
+              />
+            ),
           },
-        ]}
-        presentation={presentation}
-        type={DecisionType.NAVIGATION}
-        showMediaCircleInList={showMediaCircleInList}
-        isContainerAligned={isContainerAligned}
-        size={size}
-      />
-    </>
+          'aria-label': 'This option is disabled.',
+          disabled: true,
+          title: 'Hank Miller',
+        },
+      ]}
+      presentation={presentation}
+      type={DecisionType.NAVIGATION}
+      showMediaCircleInList={showMediaCircleInList}
+      isContainerAligned={isContainerAligned}
+      size={size}
+    />
   );
 };
 
@@ -94,160 +95,165 @@ export const grid = () => {
   const size = select('size', [Size.MEDIUM, Size.SMALL], Size.MEDIUM);
 
   return (
-    <>
-      <Decision
-        options={[
-          {
-            description: 'Short text test.',
-            onClick: action('clicked'),
-            href: '#href1',
-            disabled,
-            media: {
-              block: (
-                <img
-                  src="https://wise.com/public-resources/assets/bank-details/bank-details-flow/finish.svg"
-                  alt=""
-                />
-              ),
-              list: (
-                <Avatar size="md" type="initials">
-                  HM
-                </Avatar>
-              ),
-            },
-            title: 'Hank Miller',
+    <Decision
+      options={[
+        {
+          description: 'Short text test.',
+          onClick: action('clicked'),
+          href: '#href1',
+          disabled,
+          media: {
+            block: (
+              <img
+                src="https://wise.com/public-resources/assets/bank-details/bank-details-flow/finish.svg"
+                alt=""
+              />
+            ),
+            list: (
+              <Avatar size="md" type="initials">
+                HM
+              </Avatar>
+            ),
           },
-          {
-            description:
-              "Click here to send money to Hank Miller. Money will be sent directly to Han Miller's multi-currency account.",
-            onClick: action('clicked'),
-            disabled,
-            href: '#href2',
-            media: {
-              block: (
-                <img
-                  src="https://wise.com/public-resources/assets/bank-details/bank-details-flow/finish.svg"
-                  alt=""
-                />
-              ),
-              list: (
-                <Avatar size="md" type="initials">
-                  HM
-                </Avatar>
-              ),
-            },
-            title: 'Hank Miller',
+          'aria-label': 'Click to see something',
+          title: 'Hank Miller',
+        },
+        {
+          description:
+            "Click here to send money to Hank Miller. Money will be sent directly to Han Miller's multi-currency account.",
+          onClick: action('clicked'),
+          disabled,
+          href: '#href2',
+          media: {
+            block: (
+              <img
+                src="https://wise.com/public-resources/assets/bank-details/bank-details-flow/finish.svg"
+                alt=""
+              />
+            ),
+            list: (
+              <Avatar size="md" type="initials">
+                HM
+              </Avatar>
+            ),
           },
-          {
-            description:
-              "Click here to send money to Hank Miller. Money will be sent directly to Han Miller's multi-currency account.",
-            onClick: action('clicked'),
-            href: '#href3',
-            media: {
-              block: (
-                <img
-                  src="https://wise.com/public-resources/assets/bank-details/bank-details-flow/finish.svg"
-                  alt=""
-                />
-              ),
-              list: (
-                <Avatar size="md" type="initials">
-                  HM
-                </Avatar>
-              ),
-            },
-            disabled,
-            title: 'Hank Miller',
+          'aria-label': 'Click here to send money to Hank Miller.',
+          title: 'Hank Miller',
+        },
+        {
+          description:
+            "Click here to send money to Hank Miller. Money will be sent directly to Han Miller's multi-currency account.",
+          onClick: action('clicked'),
+          href: '#href3',
+          media: {
+            block: (
+              <img
+                src="https://wise.com/public-resources/assets/bank-details/bank-details-flow/finish.svg"
+                alt=""
+              />
+            ),
+            list: (
+              <Avatar size="md" type="initials">
+                HM
+              </Avatar>
+            ),
           },
-          {
-            description:
-              "Click here to send money to Hank Miller. Money will be sent directly to Hank Miller's multi-currency account.",
-            onClick: action('clicked'),
-            href: '#href1',
-            disabled,
-            media: {
-              block: (
-                <img
-                  src="https://wise.com/public-resources/assets/bank-details/bank-details-flow/finish.svg"
-                  alt=""
-                />
-              ),
-              list: (
-                <Avatar size="md" type="initials">
-                  HM
-                </Avatar>
-              ),
-            },
-            title: 'Hank Miller',
+          'aria-label': 'Click here to send money to Hank Miller.',
+          disabled,
+          title: 'Hank Miller',
+        },
+        {
+          description:
+            "Click here to send money to Hank Miller. Money will be sent directly to Hank Miller's multi-currency account.",
+          onClick: action('clicked'),
+          href: '#href1',
+          disabled,
+          media: {
+            block: (
+              <img
+                src="https://wise.com/public-resources/assets/bank-details/bank-details-flow/finish.svg"
+                alt=""
+              />
+            ),
+            list: (
+              <Avatar size="md" type="initials">
+                HM
+              </Avatar>
+            ),
           },
-          {
-            description:
-              "Click here to send money to Hank Miller. Money will be sent directly to Hank Miller's multi-currency account.",
-            onClick: action('clicked'),
-            href: '#href1',
-            disabled,
-            media: {
-              block: (
-                <img
-                  src="https://wise.com/public-resources/assets/bank-details/bank-details-flow/finish.svg"
-                  alt=""
-                />
-              ),
-              list: (
-                <Avatar size="md" type="initials">
-                  HM
-                </Avatar>
-              ),
-            },
-            title: 'Hank Miller',
+          'aria-label': 'Click here to send money to Hank Miller.',
+          title: 'Hank Miller',
+        },
+        {
+          description:
+            "Click here to send money to Hank Miller. Money will be sent directly to Hank Miller's multi-currency account.",
+          onClick: action('clicked'),
+          href: '#href1',
+          disabled,
+          media: {
+            block: (
+              <img
+                src="https://wise.com/public-resources/assets/bank-details/bank-details-flow/finish.svg"
+                alt=""
+              />
+            ),
+            list: (
+              <Avatar size="md" type="initials">
+                HM
+              </Avatar>
+            ),
           },
-          {
-            description:
-              "Click here to send money to Hank Miller. Money will be sent directly to Hank Miller's multi-currency account.",
-            onClick: action('clicked'),
-            href: '#href1',
-            disabled,
-            media: {
-              block: (
-                <img
-                  src="https://wise.com/public-resources/assets/bank-details/bank-details-flow/finish.svg"
-                  alt=""
-                />
-              ),
-              list: (
-                <Avatar size="md" type="initials">
-                  HM
-                </Avatar>
-              ),
-            },
-            title: 'Hank Miller',
+          'aria-label': 'Click here to send money to Hank Miller.',
+          title: 'Hank Miller',
+        },
+        {
+          description:
+            "Click here to send money to Hank Miller. Money will be sent directly to Hank Miller's multi-currency account.",
+          onClick: action('clicked'),
+          href: '#href1',
+          disabled,
+          media: {
+            block: (
+              <img
+                src="https://wise.com/public-resources/assets/bank-details/bank-details-flow/finish.svg"
+                alt=""
+              />
+            ),
+            list: (
+              <Avatar size="md" type="initials">
+                HM
+              </Avatar>
+            ),
           },
-          {
-            description:
-              "Click here to send money to Hank Miller. Money will be sent directly to Hank Miller's multi-currency account.",
-            onClick: action('clicked'),
-            href: '#href1',
-            disabled,
-            media: {
-              block: (
-                <img
-                  src="https://wise.com/public-resources/assets/bank-details/bank-details-flow/finish.svg"
-                  alt=""
-                />
-              ),
-              list: (
-                <Avatar size="md" type="initials">
-                  HM
-                </Avatar>
-              ),
-            },
-            title: 'Hank Miller',
+          'aria-label': 'Click here to send money to Hank Miller.',
+          title: 'Hank Miller',
+        },
+        {
+          description:
+            "Click here to send money to Hank Miller. Money will be sent directly to Hank Miller's multi-currency account.",
+          onClick: action('clicked'),
+          href: '#href1',
+          disabled,
+          media: {
+            block: (
+              <img
+                src="https://wise.com/public-resources/assets/bank-details/bank-details-flow/finish.svg"
+                alt=""
+              />
+            ),
+            list: (
+              <Avatar size="md" type="initials">
+                HM
+              </Avatar>
+            ),
           },
-        ]}
-        presentation={presentation}
-        type={DecisionType.NAVIGATION}
-        size={size}
-      />
-    </>
+          'aria-label': 'Click here to send money to Hank Miller.',
+          title: 'Hank Miller',
+        },
+      ]}
+      presentation={presentation}
+      type={DecisionType.NAVIGATION}
+      size={size}
+    />
   );
 };

package/src/decision/Decision.tsx

@@ -6,6 +6,7 @@ import NavigationOption from '../navigationOption';
 import Tile from '../tile';
 
 interface DecisionOption {
+  'aria-label'?: string;
   description?: React.ReactNode;
   disabled?: boolean;
   href?: string;
@@ -58,10 +59,23 @@ const Decision = ({
 
   if (type === DecisionType.NAVIGATION) {
     const renderedOptions = options.map(
-      ({ title, description, disabled, href, target, media: { list }, onClick }, key) => (
+      (
+        {
+          'aria-label': ariaLabel,
+          title,
+          description,
+          disabled,
+          href,
+          target,
+          media: { list },
+          onClick,
+        },
+        key,
+      ) => (
         <NavigationOption
           // eslint-disable-next-line react/no-array-index-key
           key={`nav-${key}`}
+          aria-label={ariaLabel}
           complex={false}
           content={description}
           disabled={disabled}
@@ -100,7 +114,16 @@ const Decision = ({
           {breakpoint
             ? options.map(
                 (
-                  { description, disabled, href, target, media: { block }, onClick, title },
+                  {
+                    'aria-label': ariaLabel,
+                    description,
+                    disabled,
+                    href,
+                    target,
+                    media: { block },
+                    onClick,
+                    title,
+                  },
                   key,
                 ) => (
                   <Tile
@@ -109,6 +132,7 @@ const Decision = ({
                     className={clsx(`np-decision__tile${isSmall ? '--small' : ''}`, {
                       'np-decision__tile--fixed-width': isGrid,
                     })}
+                    aria-label={ariaLabel}
                     description={description}
                     disabled={disabled}
                     href={href}