@transferwise/components 0.0.0-experimental-805500d → 0.0.0-experimental-2b2d326

package/build/flowNavigation/animatedLabel/AnimatedLabel.mjs

@@ -1,25 +1,99 @@
 import { clsx } from 'clsx';
-import 'react';
-import Body from '../../body/Body.mjs';
-import { jsx } from 'react/jsx-runtime';
-import { Typography } from '../../common/propsValues/typography.mjs';
+import { useId, useState } from 'react';
+import BottomSheet from '../../common/bottomSheet/BottomSheet.mjs';
+import Option from '../../common/Option/Option.mjs';
+import { ChevronDown, Check } from '@transferwise/icons';
+import { OverlayIdProvider, OverlayIdContext } from '../../provider/overlay/OverlayIdProvider.mjs';
+import { List } from '../../listItem/List.mjs';
+import '../../body/Body.mjs';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
 const AnimatedLabel = ({
   activeLabel,
   className,
-  labels
+  steps
 }) => {
-  return /*#__PURE__*/jsx(Body, {
-    type: Typography.BODY_LARGE_BOLD,
-    className: clsx('np-animated-label', className),
-    children: labels.map((label, index) => {
-      const nextLabel = index - 1;
-      return /*#__PURE__*/jsx("div", {
-        className: clsx('text-xs-center', {
-          'np-animated-label--in text-ellipsis': index === activeLabel
-        }),
-        children: label
-      }, nextLabel);
+  const labelId = useId();
+  const [showSteps, setShowSteps] = useState(false);
+  function handleStepAction(onClick) {
+    return () => {
+      setShowSteps(false);
+      onClick?.();
+    };
+  }
+  return /*#__PURE__*/jsx(OverlayIdProvider, {
+    open: showSteps,
+    children: /*#__PURE__*/jsx(OverlayIdContext.Consumer, {
+      children: overlayId => {
+        return /*#__PURE__*/jsxs(Fragment, {
+          children: [/*#__PURE__*/jsx("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),
+            children: steps.map(({
+              label
+            }, index) => {
+              const isCurrentStep = activeLabel === index;
+              const nextLabel = index - 1;
+              return /*#__PURE__*/jsxs("div", {
+                "aria-hidden": !isCurrentStep,
+                className: clsx('text-xs-center', 'd-inline-flex', {
+                  'np-animated-label--in text-ellipsis': isCurrentStep
+                }),
+                children: [label, " ", /*#__PURE__*/jsx(ChevronDown, {
+                  className: "m-l-1",
+                  size: 24
+                })]
+              }, nextLabel);
+            })
+          }), /*#__PURE__*/jsx(BottomSheet, {
+            role: "menu",
+            "aria-labelledby": labelId,
+            open: showSteps,
+            onClose: () => setShowSteps(false),
+            children: /*#__PURE__*/jsx(List, {
+              className: "p-a-1",
+              children: steps.map((step, index) => {
+                const isCurrentStep = activeLabel === index;
+                const isDisabled = activeLabel < index;
+                const itemId = `step-${index}`;
+                return /*#__PURE__*/jsx(Option, {
+                  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 ? /*#__PURE__*/jsx(Check, {
+                    size: 24
+                  }) : null,
+                  "aria-current": isCurrentStep ? 'step' : false,
+                  "aria-disabled": isDisabled,
+                  disabled: isDisabled,
+                  isContainerAligned: true,
+                  ...(!isDisabled && {
+                    tabIndex: 0,
+                    onClick: handleStepAction(step.onClick),
+                    onKeyDown: event => {
+                      event.preventDefault();
+                      if (event.code === 'Enter' || event.code === 'Space') {
+                        handleStepAction(step.onClick)();
+                      }
+                    }
+                  })
+                }, itemId);
+              })
+            })
+          })]
+        });
+      }
     })
   });
 };

package/build/flowNavigation/animatedLabel/AnimatedLabel.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"AnimatedLabel.mjs","sources":["../../../src/flowNavigation/animatedLabel/AnimatedLabel.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport React from 'react';\n\nimport Body from '../../body';\nimport { Typography } from '../../common';\n\nexport interface AnimatedLabelProps {\n  activeLabel: number;\n  className?: string;\n  labels: readonly React.ReactNode[];\n}\n\nconst AnimatedLabel = ({ activeLabel, className, labels }: AnimatedLabelProps) => {\n  return (\n    <Body type={Typography.BODY_LARGE_BOLD} className={clsx('np-animated-label', className)}>\n      {labels.map((label, index) => {\n        const nextLabel = index - 1;\n        return (\n          <div\n            key={nextLabel}\n            className={clsx('text-xs-center', {\n              'np-animated-label--in text-ellipsis': index === activeLabel,\n            })}\n          >\n            {label}\n          </div>\n        );\n      })}\n    </Body>\n  );\n};\n\nexport default AnimatedLabel;\n"],"names":["AnimatedLabel","activeLabel","className","labels","_jsx","Body","type","Typography","BODY_LARGE_BOLD","clsx","children","map","label","index","nextLabel"],"mappings":";;;;;;AAYMA,MAAAA,aAAa,GAAGA,CAAC;EAAEC,WAAW;EAAEC,SAAS;AAAEC,EAAAA,MAAAA;AAA4B,CAAA,KAAI;EAC/E,oBACEC,GAAA,CAACC,IAAI,EAAA;IAACC,IAAI,EAAEC,UAAU,CAACC,eAAgB;AAACN,IAAAA,SAAS,EAAEO,IAAI,CAAC,mBAAmB,EAAEP,SAAS,CAAE;IAAAQ,QAAA,EACrFP,MAAM,CAACQ,GAAG,CAAC,CAACC,KAAK,EAAEC,KAAK,KAAI;AAC3B,MAAA,MAAMC,SAAS,GAAGD,KAAK,GAAG,CAAC,CAAA;AAC3B,MAAA,oBACET,GAAA,CAAA,KAAA,EAAA;AAEEF,QAAAA,SAAS,EAAEO,IAAI,CAAC,gBAAgB,EAAE;UAChC,qCAAqC,EAAEI,KAAK,KAAKZ,WAAAA;AAClD,SAAA,CAAE;AAAAS,QAAAA,QAAA,EAEFE,KAAAA;AAAK,OAAA,EALDE,SAMF,CAAC,CAAA;KAET,CAAA;AAAC,GACE,CAAC,CAAA;AAEX;;;;"}
+{"version":3,"file":"AnimatedLabel.mjs","sources":["../../../src/flowNavigation/animatedLabel/AnimatedLabel.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useId, useState } from 'react';\n\nimport type { Step } from '../../stepper/Stepper';\nimport BottomSheet from '../../common/bottomSheet';\nimport Option from '../../common/Option';\nimport { Check, ChevronDown } from '@transferwise/icons';\nimport { OverlayIdContext, OverlayIdProvider } from '../../provider/overlay/OverlayIdProvider';\nimport { List } from '../../listItem';\n\nexport interface AnimatedLabelProps {\n  activeLabel: number;\n  className?: string;\n  steps: readonly Step[];\n}\n\nconst AnimatedLabel = ({ activeLabel, className, steps }: AnimatedLabelProps) => {\n  const labelId = useId();\n  const [showSteps, setShowSteps] = useState(false);\n\n  function handleStepAction(onClick: Step['onClick']) {\n    return () => {\n      setShowSteps(false);\n      onClick?.();\n    };\n  }\n\n  return (\n    <OverlayIdProvider open={showSteps}>\n      <OverlayIdContext.Consumer>\n        {(overlayId) => {\n          return (\n            <>\n              <button\n                type=\"button\"\n                id={labelId}\n                aria-haspopup=\"menu\"\n                aria-controls={overlayId}\n                aria-expanded={showSteps}\n                className={clsx(\n                  'np-animated-label',\n                  'btn-unstyled',\n                  'np-text-body-large-bold',\n                  className,\n                )}\n                onClick={() => setShowSteps(true)}\n              >\n                {steps.map(({ label }, index) => {\n                  const isCurrentStep = activeLabel === index;\n                  const nextLabel = index - 1;\n                  return (\n                    <div\n                      key={nextLabel}\n                      aria-hidden={!isCurrentStep}\n                      className={clsx('text-xs-center', 'd-inline-flex', {\n                        'np-animated-label--in text-ellipsis': isCurrentStep,\n                      })}\n                    >\n                      {label} <ChevronDown className=\"m-l-1\" size={24} />\n                    </div>\n                  );\n                })}\n              </button>\n              <BottomSheet\n                role=\"menu\"\n                aria-labelledby={labelId}\n                open={showSteps}\n                onClose={() => setShowSteps(false)}\n              >\n                <List className=\"p-a-1\">\n                  {steps.map((step, index) => {\n                    const isCurrentStep = activeLabel === index;\n                    const isDisabled = activeLabel < index;\n                    const itemId = `step-${index}`;\n                    return (\n                      <Option\n                        key={itemId}\n                        id={itemId}\n                        as=\"li\"\n                        role=\"menuitem\"\n                        decision={false}\n                        className={clsx('np-animated-label-option', 'p-x-3', 'p-y-1', 'm-y-1', {\n                          clickable: !isDisabled,\n                        })}\n                        title={step.label}\n                        content={step.hoverLabel}\n                        button={isCurrentStep ? <Check size={24} /> : null}\n                        aria-current={isCurrentStep ? 'step' : false}\n                        aria-disabled={isDisabled}\n                        disabled={isDisabled}\n                        isContainerAligned\n                        {...(!isDisabled && {\n                          tabIndex: 0,\n                          onClick: handleStepAction(step.onClick),\n                          onKeyDown: (event) => {\n                            event.preventDefault();\n                            if (event.code === 'Enter' || event.code === 'Space') {\n                              handleStepAction(step.onClick)();\n                            }\n                          },\n                        })}\n                      />\n                    );\n                  })}\n                </List>\n              </BottomSheet>\n            </>\n          );\n        }}\n      </OverlayIdContext.Consumer>\n    </OverlayIdProvider>\n  );\n};\n\nexport default AnimatedLabel;\n"],"names":["AnimatedLabel","activeLabel","className","steps","labelId","useId","showSteps","setShowSteps","useState","handleStepAction","onClick","_jsx","OverlayIdProvider","open","children","OverlayIdContext","Consumer","overlayId","_jsxs","_Fragment","type","id","clsx","map","label","index","isCurrentStep","nextLabel","ChevronDown","size","BottomSheet","role","onClose","List","step","isDisabled","itemId","Option","as","decision","clickable","title","content","hoverLabel","button","Check","disabled","isContainerAligned","tabIndex","onKeyDown","event","preventDefault","code"],"mappings":"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"}

package/build/main.css

@@ -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/build/styles/flowNavigation/animatedLabel/AnimatedLabel.css

@@ -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/build/styles/main.css

@@ -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/build/types/common/bottomSheet/BottomSheet.d.ts

@@ -1,15 +1,15 @@
-import { PropsWithChildren, SyntheticEvent } from 'react';
+import { HTMLAttributes, PropsWithChildren, SyntheticEvent } from 'react';
 import { CommonProps } from '../commonProps';
 export type BottomSheetProps = PropsWithChildren<{
     onClose?: (event: Event | SyntheticEvent) => void;
     open: boolean;
-} & CommonProps>;
+} & CommonProps & Pick<HTMLAttributes<HTMLDivElement>, 'role' | 'aria-labelledby'>>;
 /**
  * Neptune: https://transferwise.github.io/neptune/components/bottom-sheet/
  *
  * Neptune Web: https://transferwise.github.io/neptune-web/components/overlays/BottomSheet
  *
  */
-declare const BottomSheet: (props: BottomSheetProps) => import("react").JSX.Element;
+declare const BottomSheet: ({ role, ...props }: BottomSheetProps) => import("react").JSX.Element;
 export default BottomSheet;
 //# sourceMappingURL=BottomSheet.d.ts.map

package/build/types/common/bottomSheet/BottomSheet.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BottomSheet.d.ts","sourceRoot":"","sources":["../../../../src/common/bottomSheet/BottomSheet.tsx"],"names":[],"mappings":"AACA,OAAO,EAEL,iBAAiB,EACjB,cAAc,EAIf,MAAM,OAAO,CAAC;AAOf,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAa7C,MAAM,MAAM,gBAAgB,GAAG,iBAAiB,CAC9C;IACE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,GAAG,cAAc,KAAK,IAAI,CAAC;IAClD,IAAI,EAAE,OAAO,CAAC;CACf,GAAG,WAAW,CAChB,CAAC;AAEF;;;;;GAKG;AACH,QAAA,MAAM,WAAW,UAAW,gBAAgB,gCAoL3C,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"BottomSheet.d.ts","sourceRoot":"","sources":["../../../../src/common/bottomSheet/BottomSheet.tsx"],"names":[],"mappings":"AACA,OAAO,EAEL,cAAc,EACd,iBAAiB,EACjB,cAAc,EAIf,MAAM,OAAO,CAAC;AAOf,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAa7C,MAAM,MAAM,gBAAgB,GAAG,iBAAiB,CAC9C;IACE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,GAAG,cAAc,KAAK,IAAI,CAAC;IAClD,IAAI,EAAE,OAAO,CAAC;CACf,GAAG,WAAW,GACb,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,MAAM,GAAG,iBAAiB,CAAC,CACnE,CAAC;AAEF;;;;;GAKG;AACH,QAAA,MAAM,WAAW,uBAAmC,gBAAgB,gCA2LnE,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/build/types/drawer/Drawer.d.ts

@@ -1,5 +1,6 @@
+import { HTMLAttributes } from 'react';
 import { Position } from '../common';
-export interface DrawerProps {
+export type DrawerProps = {
     /** The content to appear in the drawer body. */
     children?: React.ReactNode;
     className?: string;
@@ -13,6 +14,6 @@ export interface DrawerProps {
     position?: `${Position.LEFT | Position.RIGHT | Position.BOTTOM}`;
     /** The action to perform on close click. */
     onClose?: (event: KeyboardEvent | React.MouseEvent) => void;
-}
-export default function Drawer({ children, className, footerContent, headerTitle, onClose, open, position, }: DrawerProps): import("react").JSX.Element;
+} & Pick<HTMLAttributes<HTMLDivElement>, 'role' | 'aria-labelledby'>;
+export default function Drawer({ children, className, footerContent, headerTitle, onClose, open, position, role, 'aria-labelledby': ariaLabelledBy, }: DrawerProps): import("react").JSX.Element;
 //# sourceMappingURL=Drawer.d.ts.map

package/build/types/drawer/Drawer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Drawer.d.ts","sourceRoot":"","sources":["../../../src/drawer/Drawer.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,QAAQ,EAAc,MAAM,WAAW,CAAC;AASjD,MAAM,WAAW,WAAW;IAC1B,gDAAgD;IAChD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kDAAkD;IAClD,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC,kDAAkD;IAClD,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,+CAA+C;IAC/C,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,uGAAuG;IACvG,QAAQ,CAAC,EAAE,GAAG,QAAQ,CAAC,IAAI,GAAG,QAAQ,CAAC,KAAK,GAAG,QAAQ,CAAC,MAAM,EAAE,CAAC;IACjE,4CAA4C;IAC5C,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,GAAG,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;CAC7D;AAED,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,EAC7B,QAAQ,EACR,SAAS,EACT,aAAa,EACb,WAAW,EACX,OAAO,EACP,IAAY,EACZ,QAAkB,GACnB,EAAE,WAAW,+BAuCb"}
+{"version":3,"file":"Drawer.d.ts","sourceRoot":"","sources":["../../../src/drawer/Drawer.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAqB,MAAM,OAAO,CAAC;AAE1D,OAAO,EAAE,QAAQ,EAAc,MAAM,WAAW,CAAC;AASjD,MAAM,MAAM,WAAW,GAAG;IACxB,gDAAgD;IAChD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kDAAkD;IAClD,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC,kDAAkD;IAClD,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,+CAA+C;IAC/C,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,uGAAuG;IACvG,QAAQ,CAAC,EAAE,GAAG,QAAQ,CAAC,IAAI,GAAG,QAAQ,CAAC,KAAK,GAAG,QAAQ,CAAC,MAAM,EAAE,CAAC;IACjE,4CAA4C;IAC5C,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,GAAG,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;CAC7D,GAAG,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,MAAM,GAAG,iBAAiB,CAAC,CAAC;AAErE,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,EAC7B,QAAQ,EACR,SAAS,EACT,aAAa,EACb,WAAW,EACX,OAAO,EACP,IAAY,EACZ,QAAkB,EAClB,IAAe,EACf,iBAAiB,EAAE,cAAc,GAClC,EAAE,WAAW,+BAuCb"}

package/build/types/flowNavigation/FlowNavigation.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FlowNavigation.d.ts","sourceRoot":"","sources":["../../../src/flowNavigation/FlowNavigation.tsx"],"names":[],"mappings":"AAOA,OAAgB,EAAE,KAAK,IAAI,EAAE,MAAM,oBAAoB,CAAC;AAOxD,MAAM,WAAW,mBAAmB;IAClC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,2FAA2F;IAC3F,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,sIAAsI;IACtI,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,wGAAwG;IACxG,KAAK,EAAE,SAAS,IAAI,EAAE,CAAC;CACxB;AAED,QAAA,MAAM,cAAc,kEAQjB,mBAAmB,gCAkErB,CAAC;AAEF,eAAe,cAAc,CAAC"}
+{"version":3,"file":"FlowNavigation.d.ts","sourceRoot":"","sources":["../../../src/flowNavigation/FlowNavigation.tsx"],"names":[],"mappings":"AAOA,OAAgB,EAAE,KAAK,IAAI,EAAE,MAAM,oBAAoB,CAAC;AAOxD,MAAM,WAAW,mBAAmB;IAClC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,2FAA2F;IAC3F,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,sIAAsI;IACtI,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,wGAAwG;IACxG,KAAK,EAAE,SAAS,IAAI,EAAE,CAAC;CACxB;AAED,QAAA,MAAM,cAAc,kEAQjB,mBAAmB,gCA8DrB,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/build/types/flowNavigation/animatedLabel/AnimatedLabel.d.ts

@@ -1,9 +1,9 @@
-import React from 'react';
+import type { Step } from '../../stepper/Stepper';
 export interface AnimatedLabelProps {
     activeLabel: number;
     className?: string;
-    labels: readonly React.ReactNode[];
+    steps: readonly Step[];
 }
-declare const AnimatedLabel: ({ activeLabel, className, labels }: AnimatedLabelProps) => React.JSX.Element;
+declare const AnimatedLabel: ({ activeLabel, className, steps }: AnimatedLabelProps) => import("react").JSX.Element;
 export default AnimatedLabel;
 //# sourceMappingURL=AnimatedLabel.d.ts.map

package/build/types/flowNavigation/animatedLabel/AnimatedLabel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AnimatedLabel.d.ts","sourceRoot":"","sources":["../../../../src/flowNavigation/animatedLabel/AnimatedLabel.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,MAAM,WAAW,kBAAkB;IACjC,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,EAAE,SAAS,KAAK,CAAC,SAAS,EAAE,CAAC;CACpC;AAED,QAAA,MAAM,aAAa,uCAAwC,kBAAkB,sBAkB5E,CAAC;AAEF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"AnimatedLabel.d.ts","sourceRoot":"","sources":["../../../../src/flowNavigation/animatedLabel/AnimatedLabel.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAOlD,MAAM,WAAW,kBAAkB;IACjC,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,SAAS,IAAI,EAAE,CAAC;CACxB;AAED,QAAA,MAAM,aAAa,sCAAuC,kBAAkB,gCAgG3E,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "0.0.0-experimental-805500d",
+  "version": "0.0.0-experimental-2b2d326",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {
@@ -92,9 +92,9 @@
     "rollup": "^4.18.1",
     "rollup-preserve-directives": "^1.1.1",
     "storybook": "^8.2.2",
-    "@transferwise/neptune-css": "14.15.0",
+    "@transferwise/less-config": "3.1.0",
     "@wise/components-theming": "1.6.0",
-    "@transferwise/less-config": "3.1.0"
+    "@transferwise/neptune-css": "14.15.0"
   },
   "peerDependencies": {
     "@transferwise/icons": "^3.7.0",

package/src/common/bottomSheet/BottomSheet.tsx

@@ -1,6 +1,7 @@
 import { clsx } from 'clsx';
 import {
   CSSProperties,
+  HTMLAttributes,
   PropsWithChildren,
   SyntheticEvent,
   useContext,
@@ -30,7 +31,8 @@ export type BottomSheetProps = PropsWithChildren<
   {
     onClose?: (event: Event | SyntheticEvent) => void;
     open: boolean;
-  } & CommonProps
+  } & CommonProps &
+    Pick<HTMLAttributes<HTMLDivElement>, 'role' | 'aria-labelledby'>
 >;
 
 /**
@@ -39,7 +41,7 @@ export type BottomSheetProps = PropsWithChildren<
  * Neptune Web: https://transferwise.github.io/neptune-web/components/overlays/BottomSheet
  *
  */
-const BottomSheet = (props: BottomSheetProps) => {
+const BottomSheet = ({ role = 'dialog', ...props }: BottomSheetProps) => {
   const bottomSheetReference = useRef<HTMLDivElement>(null);
   const topBarReference = useRef<HTMLDivElement>(null);
   const contentReference = useRef<HTMLDivElement>(null);
@@ -181,7 +183,13 @@ const BottomSheet = (props: BottomSheetProps) => {
   const overlayId = useContext(OverlayIdContext);
 
   return is400Zoom ? (
-    <Drawer open={props.open} className={props.className} onClose={close}>
+    <Drawer
+      aria-labelledby={props['aria-labelledby']}
+      role={role}
+      open={props.open}
+      className={props.className}
+      onClose={close}
+    >
       {props.children}
     </Drawer>
   ) : (
@@ -195,7 +203,8 @@ const BottomSheet = (props: BottomSheetProps) => {
         {/* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */}
         <div
           id={overlayId}
-          role="dialog"
+          aria-labelledby={props['aria-labelledby']}
+          role={role}
           aria-modal
           onTouchStart={onSwipeStart}
           onTouchMove={onSwipeMove}

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 === 4} 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} />
             )}
           </>
         }

package/src/flowNavigation/animatedLabel/AnimatedLabel.css

@@ -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;
@@ -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,51 @@
-import { render, screen } from '../../test-utils';
+import { render, screen, mockMatchMedia, mockResizeObserver } from '../../test-utils';
 
 import AnimatedLabel from '.';
 
+mockMatchMedia();
+mockResizeObserver();
+
 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(screen.getByText(props.steps[0].label)).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(screen.getByText(props.steps[1].label)).not.toHaveClass('np-animated-label--in');
     expect(container.querySelectorAll('.np-animated-label--in')).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--in');
+    expect(screen.getByText(props.steps[1].label)).not.toHaveClass('np-animated-label--in');
+    expect(screen.getByText(props.steps[2].label)).not.toHaveClass('np-animated-label--in');
 
     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--in');
+    expect(screen.getByText(props.steps[1].label)).toHaveClass('np-animated-label--in');
+    expect(screen.getByText(props.steps[2].label)).not.toHaveClass('np-animated-label--in');
   });
 
   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--in');
+    expect(screen.getByText(props.steps[1].label)).toHaveClass('np-animated-label--in');
+    expect(screen.getByText(props.steps[2].label)).not.toHaveClass('np-animated-label--in');
 
     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--in');
+    expect(screen.getByText(props.steps[1].label)).not.toHaveClass('np-animated-label--in');
+    expect(screen.getByText(props.steps[2].label)).not.toHaveClass('np-animated-label--in');
   });
 });