@transferwise/components 0.0.0-experimental-58e9ef8 → 0.0.0-experimental-a88d24d

package/build/types/statusIcon/StatusIcon.d.ts

@@ -5,6 +5,7 @@ import { SizeSmall, SizeMedium, SizeLarge, Sentiment, Status } from '../common';
 type LegacySizes = SizeSmall | SizeMedium | SizeLarge;
 export type StatusIconSentiment = Sentiment | Status.PENDING;
 export type StatusIconProps = {
+    id?: string;
     sentiment?: `${StatusIconSentiment}`;
     size?: LegacySizes | 16 | 24 | 32 | 40 | 48 | 56 | 72;
     /**
@@ -14,6 +15,6 @@ export type StatusIconProps = {
      * */
     iconLabel?: string | null;
 };
-declare const StatusIcon: ({ sentiment, size: sizeProp, iconLabel }: StatusIconProps) => import("react").JSX.Element;
+declare const StatusIcon: ({ id, sentiment, size: sizeProp, iconLabel, }: StatusIconProps) => import("react").JSX.Element;
 export default StatusIcon;
 //# sourceMappingURL=StatusIcon.d.ts.map

package/build/types/statusIcon/StatusIcon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StatusIcon.d.ts","sourceRoot":"","sources":["../../../src/statusIcon/StatusIcon.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,SAAS,EAAE,SAAS,EAAoB,MAAM,EAAE,MAAM,WAAW,CAAC;AAMlG;;GAEG;AACH,KAAK,WAAW,GAAG,SAAS,GAAG,UAAU,GAAG,SAAS,CAAC;AAEtD,MAAM,MAAM,mBAAmB,GAAG,SAAS,GAAG,MAAM,CAAC,OAAO,CAAC;AAE7D,MAAM,MAAM,eAAe,GAAG;IAC5B,SAAS,CAAC,EAAE,GAAG,mBAAmB,EAAE,CAAC;IACrC,IAAI,CAAC,EAAE,WAAW,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;IACtD;;;;SAIK;IACL,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CAC3B,CAAC;AAQF,QAAA,MAAM,UAAU,GAAI,0CAA2D,eAAe,gCAyE7F,CAAC;AAEF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"StatusIcon.d.ts","sourceRoot":"","sources":["../../../src/statusIcon/StatusIcon.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,SAAS,EAAE,SAAS,EAAoB,MAAM,EAAE,MAAM,WAAW,CAAC;AAMlG;;GAEG;AACH,KAAK,WAAW,GAAG,SAAS,GAAG,UAAU,GAAG,SAAS,CAAC;AAEtD,MAAM,MAAM,mBAAmB,GAAG,SAAS,GAAG,MAAM,CAAC,OAAO,CAAC;AAE7D,MAAM,MAAM,eAAe,GAAG;IAC5B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,SAAS,CAAC,EAAE,GAAG,mBAAmB,EAAE,CAAC;IACrC,IAAI,CAAC,EAAE,WAAW,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;IACtD;;;;SAIK;IACL,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CAC3B,CAAC;AAQF,QAAA,MAAM,UAAU,GAAI,+CAKjB,eAAe,gCA0EjB,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "0.0.0-experimental-58e9ef8",
+  "version": "0.0.0-experimental-a88d24d",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {
@@ -106,8 +106,8 @@
     "@floating-ui/react": "^0.27.16",
     "@headlessui/react": "^2.2.9",
     "@popperjs/core": "^2.11.8",
-    "@react-aria/focus": "^3.21.4",
-    "@react-aria/overlays": "^3.31.1",
+    "@react-aria/focus": "^3.21.3",
+    "@react-aria/overlays": "^3.31.0",
     "@transferwise/formatting": "^2.13.4",
     "@transferwise/neptune-validation": "^3.3.1",
     "clsx": "^2.1.1",

package/src/avatarView/AvatarView.tsx

@@ -32,7 +32,7 @@ export type Props = {
   style?: Pick<React.CSSProperties, 'border' | 'backgroundColor' | 'color'>;
 } & Pick<
   HTMLAttributes<HTMLDivElement>,
-  'className' | 'children' | 'role' | 'aria-label' | 'aria-labelledby' | 'aria-hidden'
+  'id' | 'className' | 'children' | 'role' | 'aria-label' | 'aria-labelledby' | 'aria-hidden'
 >;
 
 function AvatarView({

package/src/common/bottomSheet/__snapshots__/BottomSheet.test.tsx.snap

@@ -20,12 +20,6 @@ exports[`BottomSheet renders content when open 1`] = `
         <div
           class="dimmer-content-positioner"
         >
-          <style>
-            html, body { 
-    height: 100dvh; 
-    overflow: hidden;
-  }
-          </style>
           <div
             class="sliding-panel sliding-panel--open-bottom np-bottom-sheet sliding-panel-appear sliding-panel-appear-active"
           >

package/src/common/preventScroll/PreventScroll.tsx

@@ -2,15 +2,5 @@ import { usePreventScroll } from '@react-aria/overlays';
 
 export function PreventScroll() {
   usePreventScroll();
-
-  // ios18
-  return (
-    <style>{`html, body { 
-    height: 100dvh; 
-    overflow: hidden;
-  }`}</style>
-  );
-
-  // ios26
-  return <style>{`html, body { height: 100dvh; overflow: hidden; }`}</style>;
+  return null;
 }

package/src/dimmer/Dimmer.css

@@ -1,6 +1,5 @@
 .no-scroll {
   overflow: hidden;
-  scroll-behavior: unset;
 }
 .dimmer {
   position: fixed;

package/src/dimmer/Dimmer.less

@@ -6,7 +6,6 @@
 // (see https://bugs.webkit.org/show_bug.cgi?id=153852 & https://bugs.webkit.org/show_bug.cgi?id=220908)
 .no-scroll {
   overflow: hidden;
-  scroll-behavior: unset;
 }
 
 .dimmer {

package/src/inputs/SelectInput.css

@@ -11,38 +11,35 @@
   transition-property: opacity;
   transition-timing-function: ease-out;
   transition-duration: 300ms;
-  height: 100vh;
-  min-height: -webkit-fill-available;
 }
 .np-bottom-sheet-v2-backdrop--closed {
   opacity: 0;
 }
 .np-bottom-sheet-v2 {
   position: fixed;
-  inset: 0;
+  inset: 0px;
   bottom: env(keyboard-inset-height, 0px);
-  padding-top: 64px;
-  padding-top: var(--size-64);
-  padding-bottom: min(env(safe-area-inset-bottom, 16px));
-  padding-bottom: min(env(safe-area-inset-bottom, var(--size-16)));
+  margin-left: 8px;
+  margin-left: var(--size-8);
+  margin-right: 8px;
+  margin-right: var(--size-8);
+  margin-top: 64px;
+  margin-top: var(--size-64);
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
-  height: 100%;
-  min-height: -webkit-fill-available;
 }
 .np-bottom-sheet-v2-content {
   display: flex;
   flex-direction: column;
   overflow: auto;
   border-top-left-radius: 32px;
-  border-top-left-radius: var(--size-32);
+  /* TODO: Tokenize */
   border-top-right-radius: 32px;
-  border-top-right-radius: var(--size-32);
+  /* TODO: Tokenize */
   background-color: #ffffff;
   background-color: var(--color-background-elevated);
   box-shadow: 0 0 40px rgba(69, 71, 69, 0.2);
-  will-change: transform;
 }
 .np-bottom-sheet-v2-content:focus {
   outline: none;

package/src/inputs/_BottomSheet.less

@@ -11,8 +11,6 @@
   transition-property: opacity;
   transition-timing-function: ease-out;
   transition-duration: 300ms;
-  height: 100vh;
-  min-height: -webkit-fill-available;
 
   &--closed {
     opacity: 0;
@@ -21,28 +19,24 @@
 
 .np-bottom-sheet-v2 {
   position: fixed;
-  inset: 0;
+  inset: 0px;
   bottom: env(keyboard-inset-height, 0px);
-  // margin-left: var(--size-8);
-  // margin-right: var(--size-8);
-  padding-top: var(--size-64);
-  padding-bottom: min(env(safe-area-inset-bottom, var(--size-16)));
+  margin-left: var(--size-8);
+  margin-right: var(--size-8);
+  margin-top: var(--size-64);
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
-  height: 100%;
-  min-height: -webkit-fill-available;
 }
 
 .np-bottom-sheet-v2-content {
   display: flex;
   flex-direction: column;
   overflow: auto;
-  border-top-left-radius: var(--size-32);
-  border-top-right-radius: var(--size-32);
+  border-top-left-radius: 32px; /* TODO: Tokenize */
+  border-top-right-radius: 32px; /* TODO: Tokenize */
   background-color: var(--color-background-elevated);
   box-shadow: 0 0 40px rgb(69 71 69 / 0.2);
-  will-change: transform;
 
   &:focus {
     outline: none;

package/src/inputs/_BottomSheet.tsx

@@ -10,11 +10,12 @@ import { Transition, TransitionChild } from '@headlessui/react';
 import { FocusScope } from '@react-aria/focus';
 import { ThemeProvider, useTheme } from '@wise/components-theming';
 import { clsx } from 'clsx';
-import { Fragment, useState, useEffect } from 'react';
+import { Fragment, useState } from 'react';
 
-import { CloseButton, Size } from '../common';
+import { CloseButton } from '../common/closeButton';
 import { useVirtualKeyboard } from '../common/hooks/useVirtualKeyboard';
 import { PreventScroll } from '../common/preventScroll/PreventScroll';
+import { Size } from '../common/propsValues/size';
 
 export interface BottomSheetProps {
   open: boolean;
@@ -32,19 +33,6 @@ export interface BottomSheetProps {
   onCloseEnd?: () => void;
 }
 
-/**
- * App pages set scroll-behavior to 'smooth' which causes mobile Safari to
- * slow-scroll and glitch. This function temporarily disables that behaviour
- * while the BottomSheet is open.
- */
-const freezeScroll = (shouldFreeze = true) => {
-  if (shouldFreeze) {
-    document.documentElement.style.scrollBehavior = 'unset';
-  } else {
-    document.documentElement.style.removeProperty('scroll-behavior');
-  }
-};
-
 export function BottomSheet({
   open,
   renderTrigger,
@@ -66,14 +54,12 @@ export function BottomSheet({
     },
   });
 
-  useEffect(() => {
-    freezeScroll(open);
-  }, [open]);
-
   const dismiss = useDismiss(context);
   const role = useRole(context);
   const { getReferenceProps, getFloatingProps } = useInteractions([dismiss, role]);
+
   const [floatingKey, setFloatingKey] = useState(0);
+
   const { theme, screenMode } = useTheme();
 
   return (

package/src/main.css

@@ -2574,7 +2574,6 @@ button.np-option {
 }
 .no-scroll {
   overflow: hidden;
-  scroll-behavior: unset;
 }
 .dimmer {
   position: fixed;
@@ -3840,38 +3839,35 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   transition-property: opacity;
   transition-timing-function: ease-out;
   transition-duration: 300ms;
-  height: 100vh;
-  min-height: -webkit-fill-available;
 }
 .np-bottom-sheet-v2-backdrop--closed {
   opacity: 0;
 }
 .np-bottom-sheet-v2 {
   position: fixed;
-  inset: 0;
+  inset: 0px;
   bottom: env(keyboard-inset-height, 0px);
-  padding-top: 64px;
-  padding-top: var(--size-64);
-  padding-bottom: min(env(safe-area-inset-bottom, 16px));
-  padding-bottom: min(env(safe-area-inset-bottom, var(--size-16)));
+  margin-left: 8px;
+  margin-left: var(--size-8);
+  margin-right: 8px;
+  margin-right: var(--size-8);
+  margin-top: 64px;
+  margin-top: var(--size-64);
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
-  height: 100%;
-  min-height: -webkit-fill-available;
 }
 .np-bottom-sheet-v2-content {
   display: flex;
   flex-direction: column;
   overflow: auto;
   border-top-left-radius: 32px;
-  border-top-left-radius: var(--size-32);
+  /* TODO: Tokenize */
   border-top-right-radius: 32px;
-  border-top-right-radius: var(--size-32);
+  /* TODO: Tokenize */
   background-color: #ffffff;
   background-color: var(--color-background-elevated);
   box-shadow: 0 0 40px rgba(69, 71, 69, 0.2);
-  will-change: transform;
 }
 .np-bottom-sheet-v2-content:focus {
   outline: none;

package/src/prompt/ActionPrompt/ActionPrompt.accessibility.docs.mdx

@@ -0,0 +1,65 @@
+import { Meta, Canvas, Source } from '@storybook/addon-docs/blocks';
+
+<Meta title="Prompts/ActionPrompt/Accessibility" />
+
+# Accessibility
+
+Under the hood, `ActionPrompt` is marked as `role="region"` for a section of content that users might want to navigate to directly.
+
+By default, it's labelled by the `media` asset and `title`, as well as described by the `description` if one is provided.
+
+## Announcement Behaviour
+
+`ActionPrompt` should be treated as a hint or suggestion as part of the product UX. Even the negative variant still serves as a non-critical message. Therefore, it shouldn't be announced via screen reader—neither assertively (`role="alert"`) nor politely (`role="status"`).
+
+**Note:** For immediate user feedback, use [InfoPrompt](?path=/docs/prompts-infoprompt--docs) or [InlinePrompt](https://storybook.wise.design/?path=/docs/prompts-inlineprompt--docs) instead.
+
+If you want to provide a custom label for screen readers, you can use the `aria-label` prop. Make sure to include all necessary information in it, because when provided, the default labelling will be removed.
+
+<Source
+  dark
+  code={`
+<ActionPrompt
+  aria-label="JFYI: Henry requested 30 USD for lunch"
+  media={{ avatar: { imgSrc: 'profile-photo.webp' } }}
+  title="Henry requested 30 USD"
+  description="Lunch date"
+  ...
+/>
+`}
+/>
+
+## Media
+
+You can use the `aria-hidden` attribute on media assets to hide them from screen readers if they're not providing any additional information. This is useful when the media is purely decorative or when its content is already conveyed through other means (e.g., text).
+
+<Source
+  dark
+  code={`
+<ActionPrompt
+  media={{
+    'aria-hidden': true,
+    avatar: { asset: <People /> },
+  }}
+  title="Sync contacts for a faster experience"
+  ...
+/>
+`}
+/>
+
+You can also use `aria-label` on media assets to provide a custom label for screen readers.
+
+<Source
+  dark
+  code={`
+<ActionPrompt
+  media={{
+    'aria-label': 'Henry Adams photo',
+    avatar: { imgSrc: 'profile-photo.webp' },
+  }}
+  title="Henry requested 30 USD"
+  description="Lunch date"
+  ...
+/>
+`}
+/>

package/src/prompt/ActionPrompt/ActionPrompt.story.tsx

@@ -1,9 +1,12 @@
 import { ReactElement, useState } from 'react';
 import { Meta, StoryObj } from '@storybook/react-webpack5';
 import { fn } from 'storybook/test';
-import { Bank } from '@transferwise/icons';
+import { Bank, Freeze, People } from '@transferwise/icons';
 import { ActionPrompt } from './ActionPrompt';
 import { lorem10 } from '../../test-utils';
+import Body from '../../body';
+import { action } from 'storybook/actions';
+import Title from '../../title';
 import { withVariantConfig } from '../../../.storybook/helpers';
 
 const meta: Meta<typeof ActionPrompt> = {

package/src/prompt/ActionPrompt/ActionPrompt.test.story.tsx

@@ -0,0 +1,147 @@
+import { Freeze, People } from '@transferwise/icons';
+import { action } from 'storybook/actions';
+import ActionPrompt from './ActionPrompt';
+import { Body, Title } from '../..';
+import { Meta, StoryObj } from '@storybook/react-webpack5';
+
+export default {
+  title: 'Prompts/ActionPrompt/Tests',
+  component: ActionPrompt,
+  tags: ['!manifest', '!autodocs'],
+};
+
+type Story = StoryObj<typeof ActionPrompt>;
+
+export const VariousA11yFeatures: Story = {
+  name: 'Various a11y features',
+  render: () => {
+    return (
+      <Body>
+        <Title type="title-body">Neutral Prompt with Avatar Image and Custom label for media</Title>
+        <ActionPrompt
+          className="m-b-2"
+          sentiment="neutral"
+          media={{
+            'aria-label': 'Henry Profile Photo',
+            avatar: { imgSrc: '../../avatar-square-dude.webp' },
+          }}
+          title="Henry requested 30 USD"
+          description="Lunch date"
+          action={{
+            label: 'Sent',
+            onClick: () => {
+              action('send');
+            },
+          }}
+          actionSecondary={{
+            label: 'Decline',
+            onClick: () => {
+              action('decline');
+            },
+          }}
+          onDismiss={() => action('dismiss')}
+        />
+
+        <Title type="title-body">Warning Prompt</Title>
+        <ActionPrompt
+          className="m-b-2"
+          sentiment="warning"
+          media={{
+            'aria-label': 'Image of beautiful Business Wise Card',
+            imgSrc: '../../wise-card.svg',
+          }}
+          title="Your Wise Card expires soon"
+          description="Renew your card to keep spending"
+          action={{
+            label: 'Renew card',
+            onClick: () => {
+              action('renew');
+            },
+          }}
+          actionSecondary={{
+            label: 'Notify later',
+            onClick: () => {
+              action('notifyLater');
+            },
+          }}
+          onDismiss={() => action('dismiss')}
+        />
+
+        <Title type="title-body">Warning Prompt Avatar Icon</Title>
+        <ActionPrompt
+          className="m-b-2"
+          sentiment="warning"
+          media={{ avatar: { asset: <Freeze /> } }}
+          title="Your Wise Card expires soon"
+          description="Renew your card to keep spending"
+          action={{
+            label: 'Renew card',
+            onClick: () => {
+              action('renew');
+            },
+          }}
+          onDismiss={() => {
+            action('dismiss');
+          }}
+        />
+
+        <Title type="title-body">Proposition Prompt Avatar Icon</Title>
+        <ActionPrompt
+          className="m-b-2"
+          sentiment="proposition"
+          media={{ avatar: { asset: <People /> } }}
+          title="Sync contacts for a faster experience"
+          description="Find contacts on Wise — it’s simple, secure and you pick who you add."
+          action={{
+            label: 'Sync contacts',
+            onClick: () => {
+              action('sync');
+            },
+          }}
+          onDismiss={() => {
+            action('dismiss');
+          }}
+        />
+
+        <Title type="title-body">Negative Prompt Avatar Icon + muted media</Title>
+        <ActionPrompt
+          className="m-b-2"
+          sentiment="negative"
+          media={{ avatar: { asset: <People /> }, 'aria-hidden': true }}
+          title="Sync contacts for a faster experience"
+          description="Find contacts on Wise — it’s simple, secure and you pick who you add."
+          action={{
+            label: 'Sync contacts',
+            onClick: () => {
+              action('sync');
+            },
+          }}
+          onDismiss={() => {
+            action('dismiss');
+          }}
+        />
+
+        <Title type="title-body">
+          Negative Prompt + override content with custom message via aria-label
+        </Title>
+        <ActionPrompt
+          className="m-b-2"
+          aria-label="hey customer, here is custom message"
+          sentiment="negative"
+          media={{ avatar: { asset: <People /> } }}
+          title="Sync contacts for a faster experience"
+          description="Find contacts on Wise — it’s simple, secure and you pick who you add."
+          action={{
+            label: 'Sync contacts',
+            onClick: () => {
+              action('sync');
+            },
+          }}
+          onDismiss={() => {
+            action('dismiss');
+          }}
+        />
+      </Body>
+    );
+  },
+};

package/src/prompt/ActionPrompt/ActionPrompt.tsx

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import { AriaAttributes, ReactNode, useId } from 'react';
 import { clsx } from 'clsx';
 
 import StatusIcon from '../../statusIcon';
@@ -23,6 +23,7 @@ export type ActionPromptProps = {
       badge?: Pick<BadgeAssetsProps, 'flagCode'>;
     };
     'aria-label'?: string;
+    'aria-hidden'?: boolean;
   };
   action: Pick<ButtonProps, 'onClick' | 'href' | 'target'> & {
     label: ButtonProps['children'];
@@ -30,6 +31,7 @@ export type ActionPromptProps = {
   actionSecondary?: Pick<ButtonProps, 'onClick' | 'href' | 'target'> & {
     label: ButtonProps['children'];
   };
+  'aria-label'?: AriaAttributes['aria-label'];
 } & Pick<PrimitivePromptProps, 'id' | 'className' | 'data-testid' | 'sentiment' | 'onDismiss'>;
 
 export const ActionPrompt = ({
@@ -37,19 +39,32 @@ export const ActionPrompt = ({
   title,
   description,
   onDismiss,
-  media,
+  media = {},
   action,
   actionSecondary,
   id,
   className,
   'data-testid': testId,
+  'aria-label': ariaLabel,
 }: ActionPromptProps) => {
   const isMobile = !useScreenSize(Breakpoint.MEDIUM);
 
+  const mediaId = useId();
+  const titleId = useId();
+  const descId = useId();
+
+  const ariaLabelledByIds = [
+    media['aria-hidden'] ? undefined : mediaId,
+    Boolean(ariaLabel) ? undefined : titleId,
+  ]
+    .filter(Boolean)
+    .join(' ');
+
   const renderMedia = () => {
     if (media?.imgSrc) {
       return (
         <Image
+          id={mediaId}
           src={media.imgSrc}
           className="wds-action-prompt--media-image"
           alt={media['aria-label'] ?? ''}
@@ -63,17 +78,34 @@ export const ActionPrompt = ({
           ? {}
           : { status: sentiment };
       return (
-        <AvatarView {...media.avatar} badge={badge} size={48}>
+        <AvatarView
+          {...media.avatar}
+          badge={badge}
+          aria-label={media['aria-label']}
+          aria-hidden={media['aria-hidden']}
+          id={mediaId}
+          size={48}
+        >
           {media.avatar.asset}
         </AvatarView>
       );
     }
     return sentiment === 'proposition' ? (
-      <AvatarView size={48}>
+      <AvatarView
+        id={mediaId}
+        size={48}
+        aria-label={media['aria-label']}
+        aria-hidden={media['aria-hidden']}
+      >
         <GiftBox />
       </AvatarView>
     ) : (
-      <StatusIcon size={48} sentiment={sentiment} />
+      <StatusIcon
+        id={mediaId}
+        size={48}
+        sentiment={sentiment}
+        iconLabel={Boolean(media['aria-hidden']) ? null : media['aria-label']}
+      />
     );
   };
 
@@ -117,10 +149,19 @@ export const ActionPrompt = ({
         </>
       }
       onDismiss={onDismiss}
+      role="region"
+      {...(Boolean(ariaLabel)
+        ? { 'aria-label': ariaLabel }
+        : {
+            'aria-labelledby': ariaLabelledByIds,
+            'aria-describedby': descId,
+          })}
     >
       <div className={clsx('d-flex', 'flex-column', 'justify-content-center')}>
-        <Body type={Typography.BODY_LARGE_BOLD}>{title}</Body>
-        {description && <Body>{description}</Body>}
+        <Body id={titleId} type={Typography.BODY_LARGE_BOLD}>
+          {title}
+        </Body>
+        {description && <Body id={descId}>{description}</Body>}
       </div>
     </PrimitivePrompt>
   );