@transferwise/components 46.64.0 → 46.66.0

package/src/flowNavigation/animatedLabel/AnimatedLabel.css

@@ -11,7 +11,7 @@
   transform: translateX(-8px);
   transition: all 0.3s ease-in;
 }
-.np-animated-label--in {
+.np-animated-label--active {
   height: auto;
   opacity: 1;
   position: relative;
@@ -19,3 +19,12 @@
   transform: translateX(0);
   transition: all 0.3s ease-in 0.3s;
 }
+.np-animated-label-option {
+  border-radius: 10px;
+  border-radius: var(--radius-small);
+}
+.np-animated-label-option:not(.disabled):hover,
+.np-animated-label-option:not(.disabled):focus-visible {
+  outline: var(--ring-outline-color) solid var(--ring-outline-width);
+  outline-offset: var(--ring-outline-offset);
+}

package/src/flowNavigation/animatedLabel/AnimatedLabel.less

@@ -1,4 +1,5 @@
 @import (reference) "../../../node_modules/@transferwise/neptune-css/src/less/addons/_spacing-utilities.less";
+@import (reference) "../../../node_modules/@transferwise/neptune-css/src/less/ring.less";
 
 @transition-timing-function: ease-in-out;
 @transition-duration: 0.3s;
@@ -20,7 +21,7 @@
     transition: all @transition-duration ease-in;
   }
 
-  &--in {
+  &--active {
     height: auto;
     opacity: 1;
     position: relative;
@@ -28,4 +29,12 @@
     transform: translateX(0);
     transition: all @transition-duration ease-in @transition-duration;
   }
+
+  &-option {
+    border-radius: var(--radius-small);
+    &:not(.disabled):hover,
+    &:not(.disabled):focus-visible {
+      .ring();
+    }
+  }
 }

package/src/flowNavigation/animatedLabel/AnimatedLabel.spec.js

@@ -1,53 +1,90 @@
-import { render, screen } from '../../test-utils';
+import { render, screen, mockMatchMedia, userEvent, waitFor } from '../../test-utils';
 
 import AnimatedLabel from '.';
 
+mockMatchMedia();
+
 const props = {
   activeLabel: 0,
-  labels: ['label1', 'label2', 'label3'],
+  steps: [{ label: 'label1' }, { label: 'label2' }, { label: 'label3' }],
 };
 jest.useFakeTimers();
 describe('AnimatedLabel', () => {
-  it('renders all labels', () => {
-    const { container } = render(<AnimatedLabel {...props} />);
-    expect(container).toMatchSnapshot();
-  });
-
   it('renders only one label with class in', () => {
     const { container } = render(<AnimatedLabel {...props} />);
-    expect(screen.getByText(props.labels[0])).toHaveClass('np-animated-label--in');
-    expect(container.querySelectorAll('.np-animated-label--in')).toHaveLength(1);
-  });
-
-  it('renders only one label with class out', () => {
-    const { container } = render(<AnimatedLabel {...props} />);
-    expect(screen.getByText(props.labels[1])).not.toHaveClass('np-animated-label--in');
-    expect(container.querySelectorAll('.np-animated-label--in')).toHaveLength(1);
+    expect(screen.getByText(props.steps[0].label)).toHaveClass('np-animated-label--active');
+    expect(container.querySelectorAll('.np-animated-label--active')).toHaveLength(1);
   });
 
   it('when activeLabel increase it switches class accordingly', () => {
     const { rerender } = render(<AnimatedLabel {...props} />);
-    expect(screen.getByText(props.labels[0])).toHaveClass('np-animated-label--in');
-    expect(screen.getByText(props.labels[1])).not.toHaveClass('np-animated-label--in');
-    expect(screen.getByText(props.labels[2])).not.toHaveClass('np-animated-label--in');
+    expect(screen.getByText(props.steps[0].label)).toHaveClass('np-animated-label--active');
+    expect(screen.getByText(props.steps[1].label)).not.toHaveClass('np-animated-label--active');
+    expect(screen.getByText(props.steps[2].label)).not.toHaveClass('np-animated-label--active');
 
     rerender(<AnimatedLabel {...props} activeLabel={1} />);
 
-    expect(screen.getByText(props.labels[0])).not.toHaveClass('np-animated-label--in');
-    expect(screen.getByText(props.labels[1])).toHaveClass('np-animated-label--in');
-    expect(screen.getByText(props.labels[2])).not.toHaveClass('np-animated-label--in');
+    expect(screen.getByText(props.steps[0].label)).not.toHaveClass('np-animated-label--active');
+    expect(screen.getByText(props.steps[1].label)).toHaveClass('np-animated-label--active');
+    expect(screen.getByText(props.steps[2].label)).not.toHaveClass('np-animated-label--active');
   });
 
   it('when activeLabel decrease it switches class accordingly', () => {
     const { rerender } = render(<AnimatedLabel {...props} activeLabel={1} />);
-    expect(screen.getByText(props.labels[0])).not.toHaveClass('np-animated-label--in');
-    expect(screen.getByText(props.labels[1])).toHaveClass('np-animated-label--in');
-    expect(screen.getByText(props.labels[2])).not.toHaveClass('np-animated-label--in');
+    expect(screen.getByText(props.steps[0].label)).not.toHaveClass('np-animated-label--active');
+    expect(screen.getByText(props.steps[1].label)).toHaveClass('np-animated-label--active');
+    expect(screen.getByText(props.steps[2].label)).not.toHaveClass('np-animated-label--active');
 
     rerender(<AnimatedLabel {...props} activeLabel={0} />);
 
-    expect(screen.getByText(props.labels[0])).toHaveClass('np-animated-label--in');
-    expect(screen.getByText(props.labels[1])).not.toHaveClass('np-animated-label--in');
-    expect(screen.getByText(props.labels[2])).not.toHaveClass('np-animated-label--in');
+    expect(screen.getByText(props.steps[0].label)).toHaveClass('np-animated-label--active');
+    expect(screen.getByText(props.steps[1].label)).not.toHaveClass('np-animated-label--active');
+    expect(screen.getByText(props.steps[2].label)).not.toHaveClass('np-animated-label--active');
+  });
+
+  it('shows all steps in menu when click on the label', async () => {
+    render(<AnimatedLabel {...props} activeLabel={1} />);
+    expect(screen.queryByRole('menu')).not.toBeInTheDocument();
+    userEvent.click(screen.getByRole('button', { name: /label2/i }));
+    await waitFor(() => {
+      expect(screen.getByRole('menu')).toBeInTheDocument();
+    });
+    expect(screen.getAllByRole('menuitem')).toHaveLength(props.steps.length);
+  });
+
+  it('switches label when click on one of steps as menu itme', async () => {
+    const handleClick = jest.fn();
+    const handleStepClick = (stepNumber) => {
+      return () => handleClick(stepNumber);
+    };
+    render(
+      <AnimatedLabel
+        {...{
+          activeLabel: 1,
+          steps: [
+            { label: 'label1', onClick: handleStepClick(0) },
+            { label: 'label2', onClick: handleStepClick(1) },
+            { label: 'label3', onClick: handleStepClick(2) },
+          ],
+        }}
+      />,
+    );
+    expect(screen.getByRole('button', { name: /label2/i })).toBeInTheDocument();
+    expect(screen.queryByRole('button', { name: /label1/i })).not.toBeInTheDocument();
+
+    userEvent.click(screen.getByRole('button', { name: /label2/i }));
+
+    await waitFor(() => {
+      expect(screen.getByRole('menu')).toBeInTheDocument();
+    });
+
+    userEvent.click(screen.getByRole('menuitem', { name: /label1/i }));
+
+    await waitFor(() => {
+      expect(screen.queryByRole('menu')).not.toBeInTheDocument();
+    });
+
+    expect(handleClick).toHaveBeenCalledTimes(1);
+    expect(handleClick).toHaveBeenCalledWith(0);
   });
 });

package/src/flowNavigation/animatedLabel/AnimatedLabel.tsx

@@ -1,32 +1,114 @@
 import { clsx } from 'clsx';
-import React from 'react';
+import { useId, useState } from 'react';
 
-import Body from '../../body';
-import { Typography } from '../../common';
+import type { Step } from '../../stepper/Stepper';
+import BottomSheet from '../../common/bottomSheet';
+import Option from '../../common/Option';
+import { Check, ChevronDown } from '@transferwise/icons';
+import { OverlayIdContext, OverlayIdProvider } from '../../provider/overlay/OverlayIdProvider';
+import { List } from '../../listItem';
 
 export interface AnimatedLabelProps {
   activeLabel: number;
   className?: string;
-  labels: readonly React.ReactNode[];
+  steps: readonly Step[];
 }
 
-const AnimatedLabel = ({ activeLabel, className, labels }: AnimatedLabelProps) => {
+const AnimatedLabel = ({ activeLabel, className, steps }: AnimatedLabelProps) => {
+  const labelId = useId();
+  const [showSteps, setShowSteps] = useState(false);
+
+  function handleStepAction(onClick: Step['onClick']) {
+    return () => {
+      setShowSteps(false);
+      onClick?.();
+    };
+  }
+
   return (
-    <Body type={Typography.BODY_LARGE_BOLD} className={clsx('np-animated-label', className)}>
-      {labels.map((label, index) => {
-        const nextLabel = index - 1;
-        return (
-          <div
-            key={nextLabel}
-            className={clsx('text-xs-center', {
-              'np-animated-label--in text-ellipsis': index === activeLabel,
-            })}
-          >
-            {label}
-          </div>
-        );
-      })}
-    </Body>
+    <OverlayIdProvider open={showSteps}>
+      <OverlayIdContext.Consumer>
+        {(overlayId) => {
+          return (
+            <>
+              <button
+                type="button"
+                id={labelId}
+                aria-haspopup="menu"
+                aria-controls={overlayId}
+                aria-expanded={showSteps}
+                className={clsx(
+                  'np-animated-label',
+                  'btn-unstyled',
+                  'np-text-body-large-bold',
+                  className,
+                )}
+                onClick={() => setShowSteps(true)}
+              >
+                {steps.map(({ label }, index) => {
+                  const isCurrentStep = activeLabel === index;
+                  const previousIndex = index - 1;
+                  return (
+                    <div
+                      key={previousIndex}
+                      aria-hidden={!isCurrentStep}
+                      className={clsx('text-xs-center', 'd-inline-flex', {
+                        'np-animated-label--active text-ellipsis': isCurrentStep,
+                      })}
+                    >
+                      {label} <ChevronDown className="m-l-1" size={24} />
+                    </div>
+                  );
+                })}
+              </button>
+              <BottomSheet
+                role="menu"
+                aria-labelledby={labelId}
+                open={showSteps}
+                onClose={() => setShowSteps(false)}
+              >
+                <List className="m-b-0 p-a-1">
+                  {steps.map((step, index) => {
+                    const isCurrentStep = activeLabel === index;
+                    const isDisabled = activeLabel < index;
+                    const itemId = `step-${index}`;
+                    return (
+                      <Option
+                        key={itemId}
+                        id={itemId}
+                        as="li"
+                        role="menuitem"
+                        decision={false}
+                        className={clsx('np-animated-label-option', 'p-x-3', 'p-y-1', 'm-y-1', {
+                          clickable: !isDisabled,
+                        })}
+                        title={step.label}
+                        content={step.hoverLabel}
+                        button={isCurrentStep ? <Check size={24} /> : null}
+                        aria-current={isCurrentStep ? 'step' : false}
+                        aria-disabled={isDisabled}
+                        disabled={isDisabled}
+                        isContainerAligned
+                        {...(!isDisabled && {
+                          tabIndex: 0,
+                          onClick: handleStepAction(step.onClick),
+                          onKeyDown: (event) => {
+                            event.preventDefault();
+                            if (event.code === 'Enter' || event.code === 'Space') {
+                              handleStepAction(step.onClick)();
+                            }
+                          },
+                        })}
+                      />
+                    );
+                  })}
+                </List>
+              </BottomSheet>
+            </>
+          );
+        }}
+      </OverlayIdContext.Consumer>
+    </OverlayIdProvider>
   );
 };
 

package/src/main.css

@@ -2098,7 +2098,7 @@ button.np-option {
   transform: translateX(-8px);
   transition: all 0.15s ease-in;
 }
-.np-animated-label--in {
+.np-animated-label--active {
   height: auto;
   opacity: 1;
   position: relative;
@@ -2106,6 +2106,15 @@ button.np-option {
   transform: translateX(0);
   transition: all 0.15s ease-in 0.15s;
 }
+.np-animated-label-option {
+  border-radius: 10px;
+  border-radius: var(--radius-small);
+}
+.np-animated-label-option:not(.disabled):hover,
+.np-animated-label-option:not(.disabled):focus-visible {
+  outline: var(--ring-outline-color) solid var(--ring-outline-width);
+  outline-offset: var(--ring-outline-offset);
+}
 .np-back-button {
   color: #00a2dd;
   color: var(--color-interactive-accent);

package/src/switch/Switch.story.tsx

@@ -10,7 +10,7 @@ export default {
 
 export const Basic = () => {
   const [checked1, setCheck1] = useState(false);
-  const [checked2, setCheck2] = useState(false);
+  const [checked2, setCheck2] = useState(true);
 
   return (
     <div className="d-flex flex-column">
@@ -22,11 +22,10 @@ export const Basic = () => {
           onClick={() => setCheck1(!checked1)}
         />
       </Field>
-
       <Switch
-        checked={checked2}
-        className="a-class-name m-t-4"
         aria-label="I'm a switch without label"
+        checked={checked2}
+        className="a-class-name"
         onClick={() => setCheck2(!checked2)}
       />
     </div>
@@ -43,17 +42,15 @@ export const Disabled = () => {
           checked={checked}
           disabled
           className="a-class-name"
-          aria-labelledby="labelID"
           id="switchId"
           onClick={() => setCheck(!checked)}
         />
       </Field>
-
       <Switch
+        aria-label="I'm a switch without label"
         checked={!checked}
         disabled
         className="a-class-name"
-        aria-labelledby="labelID"
         id="switchId1"
         onClick={() => setCheck(!checked)}
       />

package/src/switch/Switch.tsx

@@ -1,5 +1,3 @@
-import { CheckCircleFill, CrossCircleFill } from '@transferwise/icons';
-import { useTheme } from '@wise/components-theming';
 import { clsx } from 'clsx';
 import type { KeyboardEventHandler, MouseEvent } from 'react';
 
@@ -26,7 +24,6 @@ export type SwitchProps = CommonProps & {
 const Switch = (props: SwitchProps) => {
   const inputAttributes = useInputAttributes({ nonLabelable: true });
 
-  const { isModern } = useTheme();
   const {
     checked,
     className,
@@ -44,25 +41,6 @@ const Switch = (props: SwitchProps) => {
     }
   };
 
-  const returnIcon = () => {
-    if (isModern) {
-      return <span className="np-switch--thumb" />;
-    }
-
-    if (checked) {
-      return (
-        <span className="np-switch--thumb">
-          <CheckCircleFill size={24} />
-        </span>
-      );
-    }
-    return (
-      <span className="np-switch--thumb">
-        <CrossCircleFill size={24} />
-      </span>
-    );
-  };
-
   const ariaLabelledby =
     (ariaLabel ? undefined : ariaLabelledbyProp) ?? inputAttributes['aria-labelledby'];
 
@@ -70,7 +48,6 @@ const Switch = (props: SwitchProps) => {
     <span
       className={clsx(
         'np-switch',
-
         {
           'np-switch--unchecked': !checked,
           'np-switch--checked': checked,
@@ -89,7 +66,7 @@ const Switch = (props: SwitchProps) => {
       onClick={!disabled ? onClick : undefined}
       onKeyDown={!disabled ? handleKeyDown : undefined}
     >
-      {returnIcon()}
+      <span className="np-switch--thumb" />
       <input type="checkbox" checked={checked} readOnly />
     </span>
   );

package/src/switch/__snapshots__/Switch.spec.tsx.snap

@@ -12,28 +12,7 @@ exports[`Switch renders component when checked 1`] = `
   >
     <span
       class="np-switch--thumb"
-    >
-      <span
-        aria-hidden="true"
-        class="tw-icon tw-icon-check-circle-fill "
-        data-testid="check-circle-fill-icon"
-        role="presentation"
-      >
-        <svg
-          fill="currentColor"
-          focusable="false"
-          height="24"
-          viewBox="0 0 24 24"
-          width="24"
-        >
-          <path
-            clip-rule="evenodd"
-            d="M12 22.286c5.68 0 10.286-4.605 10.286-10.286C22.286 6.32 17.68 1.714 12 1.714 6.32 1.714 1.714 6.32 1.714 12c0 5.68 4.605 10.286 10.286 10.286Zm-1.32-5.397 7.712-7.711-1.212-1.213-7.109 7.109-3.465-3.466-1.212 1.212 4.068 4.069a.861.861 0 0 0 1.219 0Z"
-            fill-rule="evenodd"
-          />
-        </svg>
-      </span>
-    </span>
+    />
     <input
       checked=""
       readonly=""
@@ -55,28 +34,7 @@ exports[`Switch renders component when unchecked 1`] = `
   >
     <span
       class="np-switch--thumb"
-    >
-      <span
-        aria-hidden="true"
-        class="tw-icon tw-icon-cross-circle-fill "
-        data-testid="cross-circle-fill-icon"
-        role="presentation"
-      >
-        <svg
-          fill="currentColor"
-          focusable="false"
-          height="24"
-          viewBox="0 0 24 24"
-          width="24"
-        >
-          <path
-            clip-rule="evenodd"
-            d="M1.714 12C1.714 6.344 6.343 1.716 12 1.716S22.286 6.343 22.286 12c0 5.657-4.629 10.285-10.286 10.285S1.714 17.658 1.714 12.001ZM12 10.8l4.243-4.244 1.2 1.2L13.2 12l4.243 4.243-1.2 1.2L12 13.2l-4.243 4.243-1.2-1.2L10.8 12 6.557 7.756l1.2-1.2L12 10.8Z"
-            fill-rule="evenodd"
-          />
-        </svg>
-      </span>
-    </span>
+    />
     <input
       readonly=""
       type="checkbox"

package/src/tile/Tile.tsx

@@ -6,6 +6,8 @@ import Title from '../title';
 
 export interface TileProps {
   /** Classes to apply to the Tile container */
+  /** A label for the accordion item, used for accessibility purposes. */
+  'aria-label'?: string;
   className?: string;
   description?: React.ReactNode;
   disabled?: boolean;
@@ -21,6 +23,7 @@ export interface TileProps {
 }
 
 export default function Tile({
+  'aria-label': ariaLabel,
   className,
   description,
   disabled,
@@ -51,6 +54,7 @@ export default function Tile({
       )}
       href={href}
       target={target}
+      aria-label={ariaLabel}
       onClick={disabled ? undefined : onClick}
       onKeyDown={
         disabled

package/src/decision/Decision.spec.js

@@ -1,127 +0,0 @@
-import Avatar from '../avatar';
-import { Breakpoint, Size } from '../common';
-import { mockMatchMedia } from '../mocks';
-import { render, fireEvent, screen } from '../test-utils';
-
-import Decision, { DecisionPresentation, DecisionType } from '.';
-
-mockMatchMedia(jest);
-
-describe('Decision', () => {
-  const commonProps = {
-    options: [
-      {
-        media: {
-          list: <Avatar type="initials">HM</Avatar>,
-          block: <img src="img.jpg" alt="alt" />,
-        },
-        href: '#href',
-        title: 'title',
-        description: 'description',
-        onClick: jest.fn(),
-      },
-    ],
-    presentation: DecisionPresentation.LIST_BLOCK,
-    type: DecisionType.NAVIGATION,
-  };
-
-  const initialInnerWidth = window.innerWidth;
-  const resetClientWidth = (width) => {
-    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', () => {
-      const { container } = render(<Decision {...props} />);
-
-      expect(getNavigationOption(container)).toBeInTheDocument();
-      expect(getTile(container)).not.toBeInTheDocument();
-    });
-
-    it('renders only Tile after first breakpoint', () => {
-      resetClientWidth(Breakpoint.SMALL);
-      const { container } = render(<Decision {...props} />);
-
-      expect(getNavigationOption(container)).not.toBeInTheDocument();
-      expect(getTile(container)).toBeInTheDocument();
-      expect(getTile(container)).not.toHaveClass('np-tile--small');
-    });
-  });
-
-  describe(`when presentation is ${DecisionPresentation.LIST_BLOCK_GRID}`, () => {
-    const props = { ...commonProps, presentation: DecisionPresentation.LIST_BLOCK_GRID };
-
-    it('renders only Navigation Option before first breakpoint', () => {
-      const { container } = render(<Decision {...props} />);
-
-      expect(getNavigationOption(container)).toBeInTheDocument();
-      expect(getTile(container)).not.toBeInTheDocument();
-    });
-
-    it('renders only Tile after first breakpoint', () => {
-      resetClientWidth(Breakpoint.SMALL);
-      const { container } = render(<Decision {...props} />);
-
-      expect(getNavigationOption(container)).not.toBeInTheDocument();
-      expect(getTile(container)).toBeInTheDocument();
-      expect(getTile(container)).not.toHaveClass('np-tile--small');
-    });
-
-    it('renders container as a grid', () => {
-      resetClientWidth(Breakpoint.SMALL);
-      const { container } = render(<Decision {...props} />);
-
-      const decisionElement = container.querySelector('.np-decision');
-      expect(decisionElement).toHaveClass('np-decision--grid');
-      expect(decisionElement).toHaveClass('flex-wrap');
-    });
-  });
-
-  describe(`when presentation is ${DecisionPresentation.LIST_BLOCK} and size is Small`, () => {
-    const props = {
-      ...commonProps,
-      presentation: DecisionPresentation.LIST_BLOCK,
-      size: Size.SMALL,
-    };
-
-    it('renders only Navigation Option before breakpoint', () => {
-      const { container } = render(<Decision {...props} />);
-
-      expect(getNavigationOption(container)).toBeInTheDocument();
-      expect(getTile(container)).not.toBeInTheDocument();
-    });
-
-    it('renders Small Tile after breakpoint', () => {
-      resetClientWidth(Breakpoint.EXTRA_SMALL);
-      const { container } = render(<Decision {...props} />);
-
-      expect(getNavigationOption(container)).not.toBeInTheDocument();
-      expect(getTile(container)).toBeInTheDocument();
-      expect(getTile(container)).toHaveClass('np-tile--small');
-    });
-  });
-
-  describe(`when presentation is ${DecisionPresentation.LIST}`, () => {
-    const props = { ...commonProps, presentation: DecisionPresentation.LIST };
-
-    it('renders Navigation Option before breakpoint', () => {
-      const { container } = render(<Decision {...props} />);
-
-      expect(getNavigationOption(container)).toBeInTheDocument();
-      expect(getTile(container)).not.toBeInTheDocument();
-    });
-  });
-
-  const getNavigationOption = (container) => container.querySelector('.np-navigation-option');
-  const getTile = (container) => container.querySelector('.np-tile');
-});

package/src/flowNavigation/animatedLabel/__snapshots__/AnimatedLabel.spec.js.snap

@@ -1,25 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`AnimatedLabel renders all labels 1`] = `
-<div>
-  <div
-    class="np-text-body-large-bold np-animated-label"
-  >
-    <div
-      class="text-xs-center np-animated-label--in text-ellipsis"
-    >
-      label1
-    </div>
-    <div
-      class="text-xs-center"
-    >
-      label2
-    </div>
-    <div
-      class="text-xs-center"
-    >
-      label3
-    </div>
-  </div>
-</div>
-`;