@transferwise/components 46.147.0 → 46.148.0

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

@@ -2,6 +2,10 @@ import { ReactElement, useState } from 'react';
 import { Meta, StoryObj } from '@storybook/react-webpack5';
 import { fn } from 'storybook/test';
 import { Bank, Star, Suitcase, Briefcase } from '@transferwise/icons';
+import {
+  createSandboxStory,
+  globalScope,
+} from '../../../.storybook/components/sandbox/SandboxEditor';
 import { lorem10, lorem20 } from '../../test-utils';
 import Button from '../../button';
 import Title from '../../title';
@@ -186,6 +190,33 @@ export const Playground: StoryObj<PreviewStoryArgs> = {
   },
 };
 
+export const Sandbox = createSandboxStory({
+  code: `const App = () => {
+  const [dismissed, setDismissed] = React.useState(false);
+
+  if (dismissed) {
+    return (
+      <Button v2 size="md" onClick={() => setDismissed(false)}>
+        Show prompt again
+      </Button>
+    );
+  }
+
+  return (
+    <ActionPrompt
+      sentiment="neutral"
+      title="Action Required"
+      description="Please complete the following action to continue."
+      media={{ avatar: { asset: <Bank /> } }}
+      action={{ label: 'Continue', onClick: () => console.log('action clicked') }}
+      actionSecondary={{ label: 'Cancel', onClick: () => console.log('cancel clicked') }}
+      onDismiss={() => setDismissed(true)}
+    />
+  );
+};`,
+  scope: globalScope,
+});
+
 /**
  * ActionPrompt supports multiple sentiments to communicate different types of messages:
  * - `neutral` (default): General prompts

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

@@ -64,6 +64,15 @@ Screen readers announce the banner content whenever:
 - The user toggles between collapsed and expanded states
 - The content (title, description, or action labels) changes
 
+## Reduced Motion
+
+`CriticalBanner` respects the user's reduced motion preference. When reduced motion is on, the component does not show:
+
+- the entry animation that reveals the banner from above when it first appears
+- the collapse and expand animation used when the user toggles the banner content
+
+The same content is still rendered and announced. Reduced motion only removes the visual movement.
+
 ## Media
 
 Custom media icons should include their own accessibility attributes. Use the `title` prop on icons to provide accessible names for screen readers:

package/src/prompt/CriticalBanner/CriticalBanner.css

@@ -4,6 +4,7 @@
   --Prompt-gap: var(--size-10) var(--size-16);
   --Prompt-border-radius: 0;
   container-type: inline-size;
+  position: relative;
   --critical-banner-easing: cubic-bezier(0.9, 0, 0.7, 1);
   --critical-banner-duration: 150ms;
   /* Override PrimitivePrompt's --screen-sm-max actions behaviour:
@@ -124,6 +125,48 @@
     min-width: fit-content;
   }
 }
+.wds-critical-banner-overhang-query {
+  container-name: critical-banner-overhang;
+  container-type: inline-size;
+  inline-size: 100%;
+}
+.wds-critical-banner__entry-mask {
+  display: grid;
+  grid-template-rows: 0fr;
+  overflow: hidden;
+  animation: wds-critical-banner-reveal-height 400ms cubic-bezier(0.3, 0, 0.1, 1) 500ms both;
+}
+@container critical-banner-overhang (max-width: 600px) {
+  .wds-critical-banner__entry-mask {
+    --critical-banner-mobile-overhang-size: 32px;
+  }
+  .wds-critical-banner__entry-mask .wds-critical-banner-overhang {
+    margin-bottom: var(--critical-banner-mobile-overhang-size);
+  }
+  .wds-critical-banner__entry-mask .wds-critical-banner-overhang::after {
+    content: "";
+    position: absolute;
+    right: 0;
+    bottom: calc(-1 * var(--critical-banner-mobile-overhang-size));
+    left: 0;
+    height: var(--critical-banner-mobile-overhang-size);
+    pointer-events: none;
+    background: radial-gradient(circle at 100% 100%, transparent var(--critical-banner-mobile-overhang-size), var(--color-sentiment-background-surface) var(--critical-banner-mobile-overhang-size)) 0 0 / var(--critical-banner-mobile-overhang-size) var(--critical-banner-mobile-overhang-size) no-repeat, radial-gradient(circle at 0% 100%, transparent var(--critical-banner-mobile-overhang-size), var(--color-sentiment-background-surface) var(--critical-banner-mobile-overhang-size)) 100% 0 / var(--critical-banner-mobile-overhang-size) var(--critical-banner-mobile-overhang-size) no-repeat;
+  }
+}
+.wds-critical-banner__entry-track {
+  min-height: 0;
+}
+@keyframes wds-critical-banner-reveal-height {
+  from {
+    grid-template-rows: 0fr;
+    overflow: hidden;
+  }
+  to {
+    grid-template-rows: 1fr;
+    overflow: visible;
+  }
+}
 @media (prefers-reduced-motion: reduce) {
   .wds-critical-banner__description,
   .wds-critical-banner__title,
@@ -131,4 +174,9 @@
   .wds-critical-banner__toggle {
     transition: none !important;
   }
+  .wds-critical-banner__entry-mask {
+    animation: none;
+    grid-template-rows: 1fr;
+    overflow: visible;
+  }
 }

package/src/prompt/CriticalBanner/CriticalBanner.less

@@ -7,6 +7,7 @@
   --Prompt-gap: var(--size-10) var(--size-16);
   --Prompt-border-radius: 0;
   container-type: inline-size;
+  position: relative;
 
   // Animation variables
   --critical-banner-easing: cubic-bezier(0.9, 0, 0.7, 1);
@@ -144,6 +145,71 @@
   }
 }
 
+// Entry animation: after a 500ms delay, reveal the already-positioned banner
+// over 400ms. The mask clips only during the reveal, then becomes visible so the
+// overhang and actions are not clipped after the animation.
+.wds-critical-banner-overhang-query {
+  container-name: critical-banner-overhang;
+  container-type: inline-size;
+  inline-size: 100%;
+}
+
+.wds-critical-banner__entry-mask {
+  display: grid;
+  grid-template-rows: 0fr;
+  overflow: hidden;
+  animation: wds-critical-banner-reveal-height 400ms cubic-bezier(0.3, 0, 0.1, 1) 500ms both;
+
+  @container critical-banner-overhang (max-width: @wds-critical-banner-mobile-overhang-max) {
+    --critical-banner-mobile-overhang-size: 32px;
+
+    .wds-critical-banner-overhang {
+      margin-bottom: var(--critical-banner-mobile-overhang-size);
+
+      &::after {
+        content: "";
+        position: absolute;
+        right: 0;
+        bottom: calc(-1 * var(--critical-banner-mobile-overhang-size));
+        left: 0;
+        height: var(--critical-banner-mobile-overhang-size);
+        pointer-events: none;
+        background:
+          radial-gradient(
+              circle at 100% 100%,
+              transparent var(--critical-banner-mobile-overhang-size),
+              var(--color-sentiment-background-surface) var(--critical-banner-mobile-overhang-size)
+            )
+            0 0 / var(--critical-banner-mobile-overhang-size)
+            var(--critical-banner-mobile-overhang-size) no-repeat,
+          radial-gradient(
+              circle at 0% 100%,
+              transparent var(--critical-banner-mobile-overhang-size),
+              var(--color-sentiment-background-surface) var(--critical-banner-mobile-overhang-size)
+            )
+            100% 0 / var(--critical-banner-mobile-overhang-size)
+            var(--critical-banner-mobile-overhang-size) no-repeat;
+      }
+    }
+  }
+}
+
+.wds-critical-banner__entry-track {
+  min-height: 0;
+}
+
+@keyframes wds-critical-banner-reveal-height {
+  from {
+    grid-template-rows: 0fr;
+    overflow: hidden;
+  }
+
+  to {
+    grid-template-rows: 1fr;
+    overflow: visible;
+  }
+}
+
 // Reduced motion support
 @media (prefers-reduced-motion: reduce) {
   .wds-critical-banner__description,
@@ -152,4 +218,10 @@
   .wds-critical-banner__toggle {
     transition: none !important;
   }
+
+  .wds-critical-banner__entry-mask {
+    animation: none;
+    grid-template-rows: 1fr;
+    overflow: visible;
+  }
 }