@transferwise/components 46.64.0 → 46.66.0

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}

package/src/drawer/Drawer.tsx

@@ -1,5 +1,5 @@
 import { clsx } from 'clsx';
-import { useContext, useId } from 'react';
+import { HTMLAttributes, useContext, useId } from 'react';
 
 import { Position, Typography } from '../common';
 import { CloseButton } from '../common/closeButton';
@@ -10,7 +10,7 @@ import SlidingPanel from '../slidingPanel';
 import Title from '../title';
 import { logActionRequiredIf } from '../utilities';
 
-export interface DrawerProps {
+export type DrawerProps = {
   /** The content to appear in the drawer body. */
   children?: React.ReactNode;
   className?: string;
@@ -24,7 +24,7 @@ export interface DrawerProps {
   position?: `${Position.LEFT | Position.RIGHT | Position.BOTTOM}`;
   /** The action to perform on close click. */
   onClose?: (event: KeyboardEvent | React.MouseEvent) => void;
-}
+} & Pick<HTMLAttributes<HTMLDivElement>, 'role' | 'aria-labelledby'>;
 
 export default function Drawer({
   children,
@@ -34,6 +34,8 @@ export default function Drawer({
   onClose,
   open = false,
   position = 'right',
+  role = 'dialog',
+  'aria-labelledby': ariaLabelledBy,
 }: DrawerProps) {
   logActionRequiredIf(
     'Drawer now expects `onClose`, and will soon make this prop required. Please update your usage to provide it.',
@@ -50,9 +52,9 @@ export default function Drawer({
       <SlidingPanel open={open} position={isMobile ? Position.BOTTOM : position}>
         <div
           id={overlayId}
-          role="dialog"
+          role={role}
           aria-modal
-          aria-labelledby={headerTitle ? titleId : undefined}
+          aria-labelledby={ariaLabelledBy || (headerTitle ? titleId : undefined)}
           className={clsx('np-drawer', className)}
         >
           <div

package/src/flowNavigation/FlowNavigation.story.js

@@ -6,11 +6,14 @@ import Avatar, { AvatarType } from '../avatar';
 import AvatarWrapper from '../avatarWrapper';
 import Body from '../body';
 import Button from '../button';
-import { ProfileType, Size } from '../common';
+import { ProfileType, Size, Typography } from '../common';
 import Logo from '../logo';
 import OverlayHeader from '../overlayHeader';
 
 import FlowNavigation from './FlowNavigation';
+import { lorem10 } from '../test-utils';
+import Display from '../display';
+import Sticky from '../sticky';
 
 export default {
   component: FlowNavigation,
@@ -51,26 +54,12 @@ export const Variants = () => {
         steps={[
           {
             label: 'Amount',
-            hoverLabel: (
-              <>
-                <div>
-                  <strong>100 GBP</strong>
-                </div>
-                0.2351 ETH
-              </>
-            ),
+            hoverLabel: <strong>100 GBP</strong>,
             onClick: () => setActiveStep(0),
           },
           {
             label: 'You',
-            hoverLabel: (
-              <>
-                <div>
-                  <strong>Elena Durante</strong>
-                </div>
-                elenadurante@test.com
-              </>
-            ),
+            hoverLabel: <>Elena Durante - elenadurante@test.com</>,
             onClick: () => setActiveStep(1),
           },
           { label: 'Recipient', hoverLabel: 'Daniele Tomboro', onClick: () => setActiveStep(2) },
@@ -201,6 +190,69 @@ export const Variants = () => {
   ) : null;
 };
 
+export const SendFlow = () => {
+  const [activeStep, setActiveStep] = useState(2);
+  const steps = [
+    {
+      label: 'Recipient',
+      onClick: handleStepClick(0),
+    },
+    {
+      label: 'Amount',
+      hoverLabel: (
+        <>
+          You send 100 GBP <br />
+          You get 99.39 GBP{' '}
+        </>
+      ),
+      ...(activeStep > 1 && { onClick: handleStepClick(1) }),
+    },
+    {
+      label: 'Review',
+      ...(activeStep > 2 && { onClick: handleStepClick(2) }),
+    },
+    {
+      label: 'Pay',
+      ...(activeStep > 3 && { onClick: handleStepClick(3) }),
+    },
+  ];
+  function handleStepClick(step) {
+    return () => {
+      setActiveStep(step);
+    };
+  }
+  return (
+    <>
+      <FlowNavigation
+        avatar={
+          <Avatar type={AvatarType.ICON} size={Size.MEDIUM}>
+            <ProfileIcon />
+          </Avatar>
+        }
+        logo={<Logo />}
+        activeStep={activeStep}
+        steps={steps}
+        onClose={() => alert('close & move away')}
+        onGoBack={() => setActiveStep(activeStep > 0 ? activeStep - 1 : 0)}
+      />
+
+      <Body className="m-a-3">
+        <Display type={Typography.DISPLAY_SMALL}>{steps[activeStep].label} Step</Display>
+        <br />
+        {lorem10}
+      </Body>
+
+      <Sticky>
+        <div className="d-flex justify-content-center align-items-center p-a-3">
+          <Button disabled={activeStep === 3} block onClick={() => setActiveStep(activeStep + 1)}>
+            Continue
+          </Button>
+        </div>
+      </Sticky>
+    </>
+  );
+};
+
 export const WithOverlayHeaderComparison = () => {
   const [activeStep, setActiveStep] = useState(4);
   const [closed, setClosed] = useState(false);

package/src/flowNavigation/FlowNavigation.tsx

@@ -71,11 +71,7 @@ const FlowNavigation = ({
               <div className="np-flow-header__left">{logo}</div>
             )}
             {!screenSm && !done && (
-              <AnimatedLabel
-                className="m-x-1"
-                labels={steps.map((step) => step.label)}
-                activeLabel={activeStep}
-              />
+              <AnimatedLabel className="m-x-1" steps={steps} activeLabel={activeStep} />
             )}
           </>
         }