@transferwise/components 46.166.0 → 46.167.0

package/src/ListItem/_stories/ListItem.story.tsx

@@ -76,7 +76,7 @@ export default {
     },
     paddingY: {
       control: 'radio',
-      options: ['unset (undefined)', 12, 24],
+      options: ['unset (undefined)', 8, 12, 16, 24],
       mapping: {
         'unset (undefined)': undefined,
       },

package/src/Prompt/CriticalBanner/_stories/CriticalBanner.docs.mdx

@@ -0,0 +1,122 @@
+import { Meta, Source } from '@storybook/addon-docs/blocks';
+
+<Meta title="Prompts/CriticalBanner/Developer Guide" tags={['new']} />
+
+# Developer Guide
+
+**Note:** Any usages of `Layout`, `Flow` or `HashRouterFlow` rely on the `global-critical-banner` feature flag being enabled. Whilst this flag is currently disabled in production, it's recommended to test with this flag enabled in staging, to ensure the critical banner behaves as expected for your users.
+
+Typically `CriticalBanner` should be used in one of three ways. Pick the one that matches the page or flow you're building and avoid using CriticalBanner as a standalone component.
+
+- `Layout` via `@transferwise/navigation-ui` - Fetched automatically from navigation-service (for non-flow layouts)
+- `Flow` / `HashRouterFlow` via `@transferwise/flow` - Fetched automatically from navigation-service (for flows)
+- `FlowNavigation` via `@transferwise/components` - Passed in by you through the `banner` prop (for custom solutions)
+
+If your page uses `Layout`, `Flow` or `HashRouterFlow`, you don't need to render `CriticalBanner` yourself. These components fetch the banner, cache it and render it for you automatically.
+
+## Layout from @transferwise/navigation-ui
+
+`Layout` has no banner prop. It fetches the critical banner from navigation-service on the client and renders it above the page content.
+
+Requirements:
+
+- `@transferwise/navigation-ui` `4.46.0` or later
+- The page must use the composable layout, and `global-critical-banner` feature flags in navigation-service control this. The legacy layout doesn't render the banner.
+
+<Source
+  code={`import { Layout, fetchNavigationData, type NavigationData } from '@transferwise/navigation-ui';
+
+// Optional: fetch initial navigation data server side, so the banner cache is scoped correctly.
+export const getServerSideProps = async () => {
+    const navigationData = await fetchNavigationData({
+      httpClient,
+      navigationServiceUrl: process.env.NAVIGATION_SERVICE_URL,
+    });
+
+    return { props: { navigationData } };
+};
+
+const Page = ({ navigationData }: { navigationData: NavigationData }) => (
+    <Layout navigationData={navigationData} onMixpanelEvent={trackEvent}>
+      { /* Page content */ }
+    </Layout>
+);
+`}
+  language="typescript"
+  dark
+/>
+
+`Layout` also handles:
+
+- saving the collapsed or expanded state when the user toggles the banner
+- caching the banner for the session, so the entry animation only plays for new or changed banners
+- sending Mixpanel events for toggles and action clicks through `onMixpanelEvent`
+
+
+## Flow / HashRouterFlow from @transferwise/flow
+
+`Flow` and `HashRouterFlow`, from `@transferwise/flow` render `FlowNavigationWrapper` from `@transferwise/navigation-ui`. It fetches, caches and renders the critical banner the same way `Layout` does. You don't need to pass a banner, but do require `@transferwise/navigation-ui` as a dependency.
+
+Requirements:
+
+- `@transferwise/flow` `13.0.0` or later
+- `@transferwise/navigation-ui` `4.51.0` or later, which is a required peer dependency
+
+You can pass two optional properties in the `navigation` options:
+
+- `navigationData`: initial navigation data, usually fetched server side, so the banner cache is scoped correctly. If you leave it out, the banner is fetched on the client.
+- `onMixpanelEvent`: called when the user toggles the banner or clicks its action.
+
+<Source
+  code={`import { HashRouterFlow } from '@transferwise/flow';
+import type { NavigationData } from '@transferwise/navigation-ui';
+
+const SendFlow = ({ navigationData }: { navigationData?: NavigationData }) => (
+    <HashRouterFlow
+      steps={steps}
+      trackEvent={trackEvent}
+      navigation={{
+      profile,
+      onClose,
+      navigationData,
+      onMixpanelEvent: trackEvent,
+      }}
+    />
+);
+`}
+  language="typescript"
+  dark
+/>
+
+## FlowNavigation from @transferwise/components
+
+`FlowNavigation` from `@transferwise/components` renders a critical banner above the navigation when you pass a `banner` prop. Use this if you build your flow with `FlowNavigation` directly. You're responsible for getting the banner data.
+
+`banner` accepts either:
+
+- `CriticalBannerProps`, the same props `CriticalBanner` takes
+- the legacy `CriticalBannerData` shape returned by navigation-service. `FlowNavigation` maps it to `CriticalBannerProps` for you.
+
+<Source
+  code={`import { FlowNavigation, type CriticalBannerProps } from '@transferwise/components';
+
+    const banner: CriticalBannerProps = {
+      sentiment: 'negative',
+      title: 'Action required',
+      description: 'Please verify your identity to continue with this transfer.',
+      action: { label: 'Verify now', onClick: handleVerify },
+    };
+
+    <FlowNavigation
+      banner={banner}
+      steps={steps}
+      activeStep={activeStep}
+      avatar={avatar}
+      onClose={onClose}
+    />;
+`}
+  language="typescript"
+  dark
+/>
+
+Requires `@transferwise/components` `46.162.0` or later. Support for the legacy `CriticalBannerData` shape was added in `46.164.0`.

package/src/Prompt/CriticalBanner/_stories/CriticalBanner.story.tsx

@@ -14,8 +14,6 @@ import { CriticalBanner, type CriticalBannerProps } from '..';
  * **Design guidance**: <a href="https://docs.wise.design/components/critical-banner" target="_blank">wise.design/components/critical-banner</a>
  *
  * Can be controlled or uncontrolled. When `onToggle` is provided, the consumer manages the expanded state via `expanded` and the banner calls `onToggle` when the user clicks the chevron. When `onToggle` is not provided, the banner manages its own expanded state internally and toggles it when the user clicks the chevron.
- *
- * **Using with FlowNavigation**: See the [FlowNavigation Critical Banner Guide](?path=/docs/navigation-flownavigation-critical-banner-guide--docs) for integration patterns and data mapping examples.
  */
 const meta = {
   component: CriticalBanner,

package/src/index.ts

@@ -4,6 +4,17 @@
  * Types
  */
 export type { ContainerProps } from './Container';
+export type {
+  CardContainerProps,
+  CardContainerSpotlight,
+  CardContainerPadding,
+} from './CardContainer';
+export type {
+  CardWidgetProps,
+  CardWidgetHeader,
+  CardWidgetTitleAction,
+  CardWidgetActionButton,
+} from './CardWidget';
 export type { LogoProps, LogoSize, LogoAssetName } from './Logo';
 export type { FlowNavigationProps, CriticalBannerLegacyData } from './FlowNavigation';
 export type { AccordionItem, AccordionProps } from './Accordion';
@@ -218,6 +229,8 @@ export { default as Chevron } from './Chevron';
 export { Chip, default as Chips } from './Chips';
 export { default as CircularButton } from './CircularButton';
 export { default as Container } from './Container';
+export { default as CardContainer } from './CardContainer';
+export { default as CardWidget } from './CardWidget';
 export { default as Option } from './common/Option';
 export { default as BottomSheet } from './common/BottomSheet';
 export { default as BaseCard } from './common/BaseCard';

package/src/main.css

@@ -26203,6 +26203,192 @@ a[data-toggle="tooltip"] {
 .wds-container--fluid {
   max-inline-size: var(--wds-container-width-fluid);
 }
+.wds-card-container {
+  --CardContainer-shadow: var(--CardContainer-theme-shadow, none);
+  --CardContainer-background-color: var(--color-background-screen);
+  --CardContainer-border-color: var(--color-border-neutral);
+  --CardContainer-border-radius: var(--radius-large);
+  --CardContainer-padding-block: var(--size-8);
+  --CardContainer-padding-inline: var(--size-8);
+  background-color: var(--CardContainer-background-color);
+  border: 1px solid var(--CardContainer-border-color);
+  border-radius: var(--CardContainer-border-radius);
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  padding-block: var(--CardContainer-padding-block);
+  padding-inline: var(--CardContainer-padding-inline);
+  inline-size: 100%;
+}
+@media (min-width: 840px) {
+  .wds-card-container {
+    --CardContainer-padding-block: var(--size-16);
+    --CardContainer-padding-inline: var(--size-16);
+  }
+}
+.wds-card-container--padding-none {
+  --CardContainer-padding-block: 0px;
+  --CardContainer-padding-inline: 0px;
+  overflow: clip;
+}
+.wds-card-container--active {
+  --CardContainer-background-color: var(--color-background-elevated);
+  --CardContainer-border-color: color-mix(in srgb, var(--color-border-neutral) 25%, transparent);
+  box-shadow: var(--CardContainer-shadow);
+}
+.wds-card-container--inactive {
+  --CardContainer-background-color: color-mix(in srgb, var(--color-background-neutral) 25%, transparent);
+  border-width: 0;
+  padding-block: calc(var(--CardContainer-padding-block) + 1px);
+  padding-inline: calc(var(--CardContainer-padding-inline) + 1px);
+  position: relative;
+}
+.wds-card-container--interactive:has(
+      > a[href]:hover,
+      > button:enabled:hover,
+      > a[href]:focus-visible,
+      > button:enabled:focus-visible
+    ).wds-card-container--active {
+  --CardContainer-border-color: color-mix(in srgb, var(--color-border-neutral) 75%, transparent);
+}
+.wds-card-container--interactive:has(
+      > a[href]:hover,
+      > button:enabled:hover,
+      > a[href]:focus-visible,
+      > button:enabled:focus-visible
+    ).wds-card-container--inactive {
+  --CardContainer-background-color: color-mix(in srgb, var(--color-background-neutral-hover) 25%, transparent);
+}
+.wds-card-container--interactive:has(> a[href]:active, > button:enabled:active).wds-card-container--active {
+  --CardContainer-border-color: var(--color-border-neutral);
+}
+.wds-card-container--interactive:has(> a[href]:active, > button:enabled:active).wds-card-container--inactive {
+  --CardContainer-background-color: color-mix(in srgb, var(--color-background-neutral-active) 25%, transparent);
+}
+.wds-card-container__border {
+  container-type: size;
+  inset: 0;
+  pointer-events: none;
+  position: absolute;
+}
+.wds-card-container__border svg {
+  display: block;
+  block-size: 100%;
+  inline-size: 100%;
+}
+.wds-card-container__border rect {
+  --CardContainer-border-dash-size: calc(var(--size-12) * 0.5);
+  --CardContainer-border-stroke-radius: calc(min(var(--CardContainer-border-radius), 50cqh, 50cqw) - 0.5px);
+  fill: none;
+  block-size: calc(100% - 1px);
+  rx: var(--CardContainer-border-stroke-radius);
+  ry: var(--CardContainer-border-stroke-radius);
+  stroke: var(--color-border-neutral);
+  stroke-dasharray: var(--CardContainer-border-dash-size) var(--CardContainer-border-dash-size);
+  inline-size: calc(100% - 1px);
+  x: 0.5px;
+  y: 0.5px;
+}
+/**
+ * The active spotlight's resting shadow, only designed for the light themes. Set on every theme
+ * root, as a nested ThemeProvider renders its own, so a card follows its nearest theme: a dark or
+ * green provider inside a light one turns the shadow off.
+ *
+ * There is no shadow or elevation token in @transferwise/neptune-tokens, so the value is
+ * component-scoped for now, the way PromoCard scopes `--Card-box-shadow`. It is the "Card Active
+ * shadow" effect style from Figma: `#0e0f0c` at 4%, kept literal so it doesn't drift with a
+ * theme's tokens. Collapses to a token reference once one is minted.
+ */
+.np-theme-personal {
+  --CardContainer-theme-shadow: 0 2px 12px rgba(14, 15, 12, 0.04), 0 2px 32px rgba(14, 15, 12, 0.04);
+}
+.np-theme-personal.np-theme-personal--dark,
+    .np-theme-personal.np-theme-personal--bright-green,
+    .np-theme-personal.np-theme-personal--forest-green,
+    .np-theme-personal.np-theme-business--dark,
+    .np-theme-personal.np-theme-business--bright-green,
+    .np-theme-personal.np-theme-business--forest-green,
+    .np-theme-personal.np-theme-platform--forest-green {
+  --CardContainer-theme-shadow: none;
+}
+.wds-card-widget {
+  --CardWidget-inset: var(--size-8);
+  --CardWidget-header-spacing: var(--size-8);
+  --CardWidget-actions-gap: var(--size-8);
+}
+.wds-card-widget__header {
+  align-items: center;
+  -moz-column-gap: var(--size-24);
+       column-gap: var(--size-24);
+  container-type: inline-size;
+  display: flex;
+  flex-wrap: wrap;
+  padding-inline-start: var(--CardWidget-inset);
+  row-gap: var(--size-8);
+}
+.wds-card-widget__header + .wds-card-widget__content {
+  margin-block-start: var(--CardWidget-header-spacing);
+}
+.wds-card-widget__title {
+  align-items: center;
+  color: var(--color-content-secondary);
+  display: grid;
+  flex: 1 1 0;
+  margin: 0;
+  min-block-size: var(--size-32);
+}
+@container (width <= 360px) {
+  .wds-card-widget__title {
+    flex-basis: auto;
+  }
+}
+.wds-card-widget__title-link.np-link {
+  color: inherit;
+  display: inline;
+  font: inherit;
+  justify-self: start;
+  letter-spacing: inherit;
+  text-align: start;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+.wds-card-widget__title-link.np-link:hover,
+.wds-card-widget__title-link.np-link:focus-visible {
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
+}
+.wds-card-widget__title-link.np-link .tw-icon {
+  display: inline-block;
+  vertical-align: text-bottom;
+}
+.wds-card-widget__title-link.np-link .wds-card-widget__title-chevron {
+  white-space: nowrap;
+}
+.wds-card-widget__title-link.np-link .wds-card-widget__title-chevron .tw-icon {
+  margin: 0;
+}
+.wds-card-widget__actions {
+  align-self: start;
+  align-items: center;
+  display: flex;
+  flex: none;
+  gap: var(--CardWidget-actions-gap);
+}
+.wds-card-widget--with-header .wds-card-widget__content {
+  padding-inline: var(--CardWidget-inset);
+}
+.wds-card-widget:has(.wds-card-widget__title-link:hover, .wds-card-widget__title-link:focus-visible).wds-card-container--active {
+  --CardContainer-border-color: color-mix(in srgb, var(--color-border-neutral) 75%, transparent);
+}
+.wds-card-widget:has(.wds-card-widget__title-link:hover, .wds-card-widget__title-link:focus-visible).wds-card-container--inactive {
+  --CardContainer-background-color: color-mix(in srgb, var(--color-background-neutral-hover) 25%, transparent);
+}
+.wds-card-widget:has(.wds-card-widget__title-link:active).wds-card-container--active {
+  --CardContainer-border-color: var(--color-border-neutral);
+}
+.wds-card-widget:has(.wds-card-widget__title-link:active).wds-card-container--inactive {
+  --CardContainer-background-color: color-mix(in srgb, var(--color-background-neutral-active) 25%, transparent);
+}
 .critical-comms {
   border-radius: var(--radius-medium);
   overflow: hidden;
@@ -29190,6 +29376,14 @@ button.np-option {
   padding-inline: 0;
   container-type: inline-size;
 }
+.wds-list-item-paddingY-8 {
+  padding-block: var(--size-8);
+  padding-inline: 0;
+}
+.wds-list-item-paddingY-16 {
+  padding-block: var(--size-16);
+  padding-inline: 0;
+}
 .wds-list-item-paddingY-24 {
   padding-block: var(--size-24);
   padding-inline: 0;

package/src/main.less

@@ -4,6 +4,8 @@
 @import "./PocketSurface/PocketSurface.less";
 
 @import "./Container/Container.less";
+@import "./CardContainer/CardContainer.less";
+@import "./CardWidget/CardWidget.less";
 @import "./_deprecated/CriticalBanner/CriticalCommsBanner.less";
 @import "./Accordion/Accordion.less";
 @import "./_deprecated/ActionButton/ActionButton.less";

package/src/FlowNavigation/_stories/FlowNavigation.CriticalBanner.docs.mdx

@@ -1,66 +0,0 @@
-import { Meta, Source } from '@storybook/addon-docs/blocks';
-
-<Meta title="Navigation/FlowNavigation/Critical Banner Guide" />
-
-# Critical Banner in FlowNavigation
-
-The `FlowNavigation` component supports displaying critical banners above the navigation, by passing a `banner` prop.
-
-`banner` accepts either the internal `CriticalBannerProps` shape, or the legacy backend `CriticalBannerData` shape (e.g. as received from `navigation-service`/`navigation-ui`) — `FlowNavigation` maps the legacy shape to `CriticalBannerProps` internally, so no manual mapping is required.
-
-## Basic Usage
-
-When you're using `FlowNavigation` directly from `@transferwise/components`.
-
-<Source
-code={`import { FlowNavigation, CriticalBannerProps } from '@transferwise/components';
-
-const banner: CriticalBannerProps = {
-    sentiment: 'negative',
-    title: 'Action required',
-    description: 'Please verify your identity to continue with this transfer.',
-    action: {
-      label: 'Verify now',
-      onClick: () => {
-          // Handle action
-      },
-    },
-};
-
-<FlowNavigation
-    banner={banner}
-    steps={steps}
-    activeStep={activeStep}
-    avatar={avatar}
-    onClose={onClose}
-/>;
-`}
-language="typescript"
-dark
-/>
-
-## Using Legacy Backend Data
-
-If your application receives banner data from a backend service (e.g. navigation-ui) in the legacy shape, you can pass it directly to `banner` — `FlowNavigation` maps it to the internal `CriticalBannerProps` shape automatically.
-
-<Source
-code={`import { FlowNavigation, CriticalBannerData } from '@transferwise/components';
-
-const banner: CriticalBannerData = {
-    id: 'banner-123',
-    title: 'Your account requires attention', // Rendered as the banner description
-    subtitle: 'Action required', // Rendered as the banner title
-    style: 'WARNING',
-    action: { label: 'Take action', href: '/action' },
-    collapsed: false, // Rendered expanded
-};
-
-<FlowNavigation
-    banner={banner}
-    steps={steps}
-    activeStep={activeStep}
-/>;
-`}
-language="typescript"
-dark
-/>