@transferwise/components 46.159.2 → 46.160.1

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

@@ -28,6 +28,7 @@ const meta = {
     action: { label: 'Verify now', onClick: fn() },
     actionSecondary: undefined,
     media: undefined,
+    animateEntry: true,
     id: undefined,
     className: undefined,
     'data-testid': undefined,
@@ -47,6 +48,7 @@ const meta = {
       table: { type: { summary: 'ReactNode' } },
     },
     expanded: { control: 'boolean' },
+    animateEntry: { control: 'boolean' },
     media: {
       control: false,
       description: 'Replaces the default Status Icon with a custom image or AvatarView.',
@@ -131,12 +133,28 @@ const hiddenArgTypes = {
   actionSecondary: { table: { disable: true } },
   media: { table: { disable: true } },
   expanded: { table: { disable: true } },
+  animateEntry: { table: { disable: true } },
   onToggle: { table: { disable: true } },
   id: { table: { disable: true } },
   className: { table: { disable: true } },
   'data-testid': { table: { disable: true } },
 } as const;
 
+const AnimatedEntryPreview = (args: CriticalBannerProps) => {
+  const [bannerInstance, setBannerInstance] = useState(0);
+
+  return (
+    <>
+      <CriticalBanner key={bannerInstance} {...args} />
+      <div className="p-t-3">
+        <Button block v2 onClick={() => setBannerInstance((current) => current + 1)}>
+          Replay
+        </Button>
+      </div>
+    </>
+  );
+};
+
 /** Renders children inside an iframe that inherits the parent page's stylesheets. */
 function IframeContainer({ width, children }: { width: number; children: ReactNode }) {
   const iframeRef = useRef<HTMLIFrameElement>(null);
@@ -585,6 +603,40 @@ export const MobileOverhang: Story = {
   },
 };
 
+/** The banner waits 500ms, then reveals from above when it enters the page. */
+export const AnimatedEntry: Story = {
+  args: {
+    title: 'Your account is restricted.',
+    description: 'Review your personal details to get your account active again.',
+    action: { label: 'Review details', onClick: fn() },
+  },
+  argTypes: hiddenArgTypes,
+  render: (args) => <AnimatedEntryPreview {...args} />,
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      canvas: { sourceState: 'hidden' },
+    },
+  },
+};
+
+/** The banner can mount immediately without replaying its entry animation. */
+export const WithoutEntryAnimation: Story = {
+  args: {
+    animateEntry: false,
+    title: 'Your account is restricted.',
+    description: 'Review your personal details to get your account active again.',
+    action: { label: 'Review details', onClick: fn() },
+  },
+  argTypes: hiddenArgTypes,
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      canvas: { sourceState: 'hidden' },
+    },
+  },
+};
+
 /**
  * The text container is capped at 480px for optimal readability, even though
  * the banner itself stretches to the full available width.

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

@@ -22,6 +22,7 @@ const wait = async (ms: number) =>
   });
 
 const ANIMATION_DURATION = 200; // 150ms animation + 50ms buffer
+const ENTRY_ANIMATION_DURATION = 950; // 500ms delay + 400ms animation + 50ms buffer
 
 const longDescription =
   'We have detected unusual activity on your account that does not match your typical usage patterns. To protect your funds and personal information, we have temporarily restricted access. Please verify your identity to restore full access to your account.';
@@ -151,7 +152,7 @@ export const MobileVariants: Story = {
   ...withVariantConfig(['mobile']),
 };
 
-/** Neutral background regression test with page content scrolled under the mobile overhang. */
+/** Neutral background regression test with page content scrolled under the sticky banner. */
 export const BackgroundIsNotTransparent: Story = {
   args: {
     sentiment: 'neutral',
@@ -198,6 +199,7 @@ export const BackgroundIsNotTransparent: Story = {
 
     if (scrollContainer) {
       scrollContainer.scrollTop = 250;
+      await wait(ENTRY_ANIMATION_DURATION);
     }
   },
   ...withVariantConfig(['mobile'], {
@@ -207,6 +209,25 @@ export const BackgroundIsNotTransparent: Story = {
   }),
 };
 
+/** Mobile entry animation visual regression test. */
+export const AnimatedEntryMobile: Story = {
+  render: function Render() {
+    return (
+      <CriticalBanner
+        sentiment="negative"
+        title="Your account is restricted."
+        description="Review your personal details to get your account active again."
+        action={{ label: 'Review details', onClick: fn() }}
+      />
+    );
+  },
+  ...withVariantConfig(['mobile'], {
+    parameters: {
+      chromatic: { pauseAnimationAtEnd: true },
+    },
+  }),
+};
+
 /**
  * Tests keyboard navigation and interaction:
  * - Tab focuses the first chevron toggle button

package/src/Prompt/InfoPrompt/InfoPrompt.css

@@ -8,8 +8,8 @@
   display: flex;
   flex-direction: column;
   justify-content: center;
-  max-width: calc(48px * 10);
-  max-width: calc(var(--size-48) * 10);
+  max-inline-size: calc(48px * 10);
+  max-inline-size: calc(var(--size-48) * 10);
 }
 .wds-info-prompt__content:has(.wds-info-prompt__title) {
   justify-content: flex-start;
@@ -21,38 +21,38 @@
 }
 .wds-info-prompt__action {
   align-self: flex-start;
-  margin-top: var(--Prompt-gap);
+  margin-block-start: var(--Prompt-gap);
 }
 .wds-info-prompt__media svg {
-  width: 24px;
-  width: var(--size-24);
-  height: 24px;
-  height: var(--size-24);
+  inline-size: 24px;
+  inline-size: var(--size-24);
+  block-size: 24px;
+  block-size: var(--size-24);
 }
 .wds-info-prompt .wds-prompt__media-wrapper {
   padding: 0;
 }
 @media (max-width: 320px) {
   .wds-info-prompt .wds-prompt__media-wrapper {
-    padding-top: 4px;
-    padding-top: var(--size-4);
+    padding-block-start: 4px;
+    padding-block-start: var(--size-4);
   }
 }
 @media (max-width: 320px) {
   .wds-info-prompt .wds-prompt__media-wrapper:has(.wds-info-prompt__media > .tw-icon) {
-    padding-top: 8px;
-    padding-top: var(--size-8);
+    padding-block-start: 8px;
+    padding-block-start: var(--size-8);
   }
 }
 @media (max-width: 320px) {
   .wds-info-prompt .wds-prompt__media-wrapper:has(+ .wds-info-prompt__content .wds-info-prompt__title:first-child) {
-    padding-top: 8px;
-    padding-top: var(--size-8);
+    padding-block-start: 8px;
+    padding-block-start: var(--size-8);
   }
 }
 @media (max-width: 320px) {
   .wds-info-prompt .wds-prompt__media-wrapper:has(+ .wds-info-prompt__content .wds-info-prompt__title:first-child):has(.wds-info-prompt__media > .tw-icon) {
-    padding-top: 12px;
-    padding-top: var(--size-12);
+    padding-block-start: 12px;
+    padding-block-start: var(--size-12);
   }
 }

package/src/Prompt/InlinePrompt/InlinePrompt.css

@@ -20,8 +20,7 @@
   background-color: var(--color-sentiment-background-surface-active);
 }
 .wds-inline-prompt--auto-width {
-  width: auto;
-  width: initial;
+  inline-size: unset;
 }
 .wds-inline-prompt--muted {
   opacity: 0.93;
@@ -48,10 +47,10 @@
   inset: 0;
 }
 .wds-inline-prompt .wds-inline-prompt-process-indicator {
-  width: 16px;
-  width: var(--size-16);
-  height: 16px;
-  height: var(--size-16);
+  inline-size: 16px;
+  inline-size: var(--size-16);
+  block-size: 16px;
+  block-size: var(--size-16);
 }
 .wds-inline-prompt .wds-inline-prompt-process-indicator .process-circle {
   stroke: currentColor;

package/src/Prompt/PrimitivePrompt/PrimitivePrompt.css

@@ -5,11 +5,13 @@
   gap: 16px;
   gap: var(--Prompt-gap, var(--size-16));
   word-wrap: break-word;
-  padding: 8px 8px;
-  padding: var(--Prompt-padding-y, var(--padding-x-small)) var(--Prompt-padding-x, var(--padding-x-small));
-  text-align: left;
+  padding-block: 8px;
+  padding-block: var(--Prompt-padding-y, var(--padding-x-small));
+  padding-inline: 8px;
+  padding-inline: var(--Prompt-padding-x, var(--padding-x-small));
+  text-align: start;
   word-break: break-word;
-  width: 100%;
+  inline-size: 100%;
 }
 .wds-prompt__content-wrapper {
   display: grid;
@@ -18,15 +20,15 @@
   gap: 16px;
   gap: var(--Prompt-gap, var(--size-16));
   grid-template-columns: auto 1fr;
-  width: 100%;
+  inline-size: 100%;
 }
 .wds-prompt__content-wrapper--with-dismiss {
   grid-template-columns: auto 1fr auto;
 }
 .wds-prompt__media-wrapper {
   align-self: flex-start;
-  padding-top: calc(4px - 1px);
-  padding-top: calc(var(--size-4) - 1px);
+  padding-block-start: calc(4px - 1px);
+  padding-block-start: calc(var(--size-4) - 1px);
 }
 .wds-prompt__media-wrapper .tw-icon-tags,
 .wds-prompt__media-wrapper .tw-icon-confetti {
@@ -43,7 +45,7 @@
 @media (max-width: 599.98px) {
   .wds-prompt__actions-wrapper {
     grid-column: span 2;
-    width: 100%;
+    inline-size: 100%;
   }
   .wds-prompt__content-wrapper--with-dismiss .wds-prompt__actions-wrapper {
     grid-column: span 3;

package/src/RadioGroup/RadioGroup.css

@@ -1,3 +1,3 @@
 .wds-radio-group .np-radio:last-child label {
-  margin-bottom: 0;
+  margin-block-end: 0;
 }

package/src/Section/Section.css

@@ -1,10 +1,10 @@
 .np-section {
-  margin-top: 32px;
-  margin-top: var(--size-32);
+  margin-block-start: 32px;
+  margin-block-start: var(--size-32);
 }
 .np-section--with-horizontal-padding {
-  padding-right: 16px;
-  padding-right: var(--space-content-horizontal);
-  padding-left: 16px;
-  padding-left: var(--space-content-horizontal);
+  padding-inline-end: 16px;
+  padding-inline-end: var(--space-content-horizontal);
+  padding-inline-start: 16px;
+  padding-inline-start: var(--space-content-horizontal);
 }

package/src/SegmentedControl/SegmentedControl.css

@@ -8,7 +8,7 @@
   position: relative;
   padding: 4px;
   padding: var(--size-4);
-  width: 100%;
+  inline-size: 100%;
   justify-content: center;
   align-items: center;
   background: rgba(134,167,189,0.10196);
@@ -24,12 +24,12 @@
 .segmented-control__segments::after {
   content: "";
   position: absolute;
-  width: var(--segment-highlight-width);
-  top: 4px;
-  top: var(--size-4);
-  bottom: 4px;
-  bottom: var(--size-4);
-  left: var(--segment-highlight-x);
+  inline-size: var(--segment-highlight-width);
+  inset-block-start: 4px;
+  inset-block-start: var(--size-4);
+  inset-block-end: 4px;
+  inset-block-end: var(--size-4);
+  inset-inline-start: var(--segment-highlight-x);
   z-index: 0;
   background: #ffffff;
   background: var(--color-background-screen);
@@ -44,11 +44,14 @@
   position: relative;
   flex: 1 1 100%;
   flex-flow: column;
-  padding: 8px 16px;
-  padding: var(--size-8) var(--size-16);
-  margin: 0 0 0 4px;
-  margin: 0 0 0 var(--size-4);
-  min-width: 0;
+  padding-block: 8px;
+  padding-block: var(--size-8);
+  padding-inline: 16px;
+  padding-inline: var(--size-16);
+  margin-block: 0 0;
+  margin-inline: 4px 0;
+  margin-inline: var(--size-4) 0;
+  min-inline-size: 0;
   line-height: inherit;
   align-items: center;
   text-align: center;
@@ -61,7 +64,7 @@
   color: var(--color-interactive-primary);
 }
 .segmented-control__segment:first-child {
-  margin-left: 0;
+  margin-inline-start: 0;
 }
 .segmented-control__segment:hover {
   background: rgba(0,0,0,0.10196);
@@ -73,8 +76,8 @@
   pointer-events: none;
 }
 .segmented-control__button {
-  width: 100%;
-  height: 100%;
+  inline-size: 100%;
+  block-size: 100%;
   background: none;
   -webkit-appearance: none;
      -moz-appearance: none;

package/src/SlidingPanel/SlidingPanel.css

@@ -14,33 +14,23 @@
 }
 .sliding-panel.sliding-panel--open-right,
 .sliding-panel.sliding-panel--open-left {
-  top: 0;
-  bottom: 0;
+  inset-block-start: 0;
+  inset-block-end: 0;
 }
 .sliding-panel.sliding-panel--open-right {
   transform: translateX(100%)  ;
-  right: 0;
+  inset-inline-end: 0;
 }
 [dir="rtl"] .sliding-panel.sliding-panel--open-right {
   transform: translateX(-100%)  ;
 }
-[dir="rtl"] .sliding-panel.sliding-panel--open-right {
-  left: 0;
-  right: auto;
-  right: initial;
-}
 .sliding-panel.sliding-panel--open-left {
   transform: translateX(-100%)  ;
-  left: 0;
+  inset-inline-start: 0;
 }
 [dir="rtl"] .sliding-panel.sliding-panel--open-left {
   transform: translateX(100%)  ;
 }
-[dir="rtl"] .sliding-panel.sliding-panel--open-left {
-  right: 0;
-  left: auto;
-  left: initial;
-}
 .sliding-panel.sliding-panel-enter-done.sliding-panel--open-right,
 .sliding-panel.sliding-panel-enter-done.sliding-panel--open-left {
   transform: translateX(0);
@@ -51,29 +41,17 @@
 }
 .sliding-panel.sliding-panel--open-top,
 .sliding-panel.sliding-panel--open-bottom {
-  right: 0;
-  left: 0;
-  width: 100%;
-}
-[dir="rtl"] .sliding-panel.sliding-panel--open-top,
-[dir="rtl"] .sliding-panel.sliding-panel--open-bottom {
-  left: 0;
-  right: auto;
-  right: initial;
-}
-[dir="rtl"] .sliding-panel.sliding-panel--open-top,
-[dir="rtl"] .sliding-panel.sliding-panel--open-bottom {
-  right: 0;
-  left: auto;
-  left: initial;
+  inset-inline-end: 0;
+  inset-inline-start: 0;
+  inline-size: 100%;
 }
 .sliding-panel.sliding-panel--open-top {
   transform: translateY(-100%);
-  top: 0;
+  inset-block-start: 0;
 }
 .sliding-panel.sliding-panel--open-bottom {
   transform: translateY(100%);
-  bottom: 0;
+  inset-block-end: 0;
 }
 .sliding-panel.sliding-panel--border-top {
   box-shadow: inset 0 -1px 0 0 #e2e6e8;
@@ -95,6 +73,10 @@
   box-shadow: inset 1px 0 0 0 rgba(0,0,0,0.10196);
   box-shadow: inset 1px 0 0 0 var(--color-border-neutral);
 }
+[dir="rtl"] .np-theme-personal .sliding-panel.sliding-panel--border-right {
+  box-shadow: inset -1px 0 0 0 rgba(0,0,0,0.10196);
+  box-shadow: inset -1px 0 0 0 var(--color-border-neutral);
+}
 .np-theme-personal .sliding-panel.sliding-panel--border-bottom {
   box-shadow: inset 0 1px 0 0 rgba(0,0,0,0.10196);
   box-shadow: inset 0 1px 0 0 var(--color-border-neutral);
@@ -103,3 +85,7 @@
   box-shadow: inset -1px 0 0 0 rgba(0,0,0,0.10196);
   box-shadow: inset -1px 0 0 0 var(--color-border-neutral);
 }
+[dir="rtl"] .np-theme-personal .sliding-panel.sliding-panel--border-left {
+  box-shadow: inset 1px 0 0 0 rgba(0,0,0,0.10196);
+  box-shadow: inset 1px 0 0 0 var(--color-border-neutral);
+}

package/src/SlidingPanel/SlidingPanel.less

@@ -22,13 +22,13 @@
   &.sliding-panel--open-right {
     .translateX(100%);
 
-    .right(0);
+    right: 0;
   }
 
   &.sliding-panel--open-left {
     .translateX(-100%);
 
-    .left(0);
+    left: 0;
   }
 
   &.sliding-panel-enter-done {
@@ -45,9 +45,9 @@
 
   &.sliding-panel--open-top,
   &.sliding-panel--open-bottom {
-    .right(0);
+    right: 0;
 
-    .left(0);
+    left: 0;
 
     width: 100%;
   }
@@ -85,6 +85,10 @@
 
     &.sliding-panel--border-right {
       box-shadow: inset 1px 0 0 0 var(--color-border-neutral);
+
+      [dir="rtl"] & {
+        box-shadow: inset -1px 0 0 0 var(--color-border-neutral);
+      }
     }
 
     &.sliding-panel--border-bottom {
@@ -93,6 +97,10 @@
 
     &.sliding-panel--border-left {
       box-shadow: inset -1px 0 0 0 var(--color-border-neutral);
+
+      [dir="rtl"] & {
+        box-shadow: inset 1px 0 0 0 var(--color-border-neutral);
+      }
     }
   }
 }

package/src/SlidingPanel/_stories/SlidingPanel.rtl.test.story.tsx

@@ -11,14 +11,15 @@ export default {
 
 type Story = StoryObj<typeof SlidingPanel>;
 
-const iframeDiff = withRTLDiff({ renderAs: 'iframe' });
+const iframeDiff = withRTLDiff({ renderAs: 'iframe', width: 'stretch' });
 
 const containerStyle: React.CSSProperties = {
   position: 'relative',
-  width: 300,
+  width: '100%',
   height: 120,
   overflow: 'hidden',
-  border: '1px dashed #ccc',
+  border: '1px solid #f5f5f5',
+  background: '#f5f5f5',
 };
 
 const panelContentStyle: React.CSSProperties = {

package/src/Snackbar/Snackbar.css

@@ -1,20 +1,11 @@
 .snackbar {
   text-align: center;
   position: fixed;
-  bottom: 0;
-  left: 0;
-  right: 0;
+  inset-block-end: 0;
+  inset-inline-start: 0;
+  inset-inline-end: 0;
   z-index: 1060;
 }
-[dir="rtl"] .snackbar {
-  right: 0;
-  left: auto;
-  left: initial;
-}
-[dir="rtl"] .snackbar {
-  left: 0;
-  right: 0;
-}
 .snackbar__text {
   background: #37517e;
   color: #ffffff;
@@ -23,20 +14,20 @@
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
   align-items: center;
   justify-content: space-between;
-  text-align: left;
+  text-align: start;
   font-size: 0.875rem;
   font-size: var(--font-size-14);
-  margin: 0 16px;
-  margin: 0 var(--size-16);
-  padding: 8px 16px;
-  padding: var(--size-8) var(--size-16);
-  width: calc(100% - 32px);
-  width: calc(100% - var(--size-32));
+  margin-block: 0;
+  margin-inline: 16px;
+  margin-inline: var(--size-16);
+  padding-block: 8px;
+  padding-block: var(--size-8);
+  padding-inline: 16px;
+  padding-inline: var(--size-16);
+  inline-size: calc(100% - 32px);
+  inline-size: calc(100% - var(--size-32));
   transition: 400ms cubic-bezier(0.215, 0.61, 0.355, 1);
 }
-[dir="rtl"] .snackbar__text {
-  text-align: right;
-}
 .np-theme-personal .snackbar__text {
   box-shadow: 0 2px 4px 0 rgba(69, 71, 69, 0.35);
   position: relative;
@@ -48,12 +39,12 @@
 .np-theme-personal .snackbar__text::after {
   display: block;
   border-radius: inherit;
-  height: 100%;
-  width: 100%;
+  block-size: 100%;
+  inline-size: 100%;
   content: "";
   position: absolute;
-  left: 0;
-  top: 0;
+  inset-inline-start: 0;
+  inset-block-start: 0;
   z-index: -1;
   background-color: rgba(134,167,189,0.10196);
   background-color: var(--color-background-neutral);
@@ -64,19 +55,14 @@
 }
 @media (min-width: 600px) {
   .snackbar__text {
-    width: auto;
-    max-width: 600px;
+    inline-size: auto;
+    max-inline-size: 600px;
   }
 }
 .snackbar__text__action {
   flex-shrink: 0;
-  margin-left: 16px;
-  margin-left: var(--size-16);
-}
-[dir="rtl"] .snackbar__text__action {
-  margin-right: 16px;
-  margin-right: var(--size-16);
-  margin-left: 0;
+  margin-inline-start: 16px;
+  margin-inline-start: var(--size-16);
 }
 .snackbar__text-container-enter,
 .snackbar__text-container-exit {

package/src/Snackbar/Snackbar.less

@@ -1,14 +1,13 @@
 @import (reference) "./../styles/variables/zindex.less";
 @import (reference) "./../styles/variables/neptune-tokens.less";
-@import (reference) "./../styles/less/mixins/_logical-properties.less";
 
 .snackbar {
   text-align: center;
   position: fixed;
   bottom: 0;
-  .left(0);
+  left: 0;
 
-  .right(0, 0);
+  right: 0;
 
   z-index: @zindex-mobile-nav;
 
@@ -20,7 +19,7 @@
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
     align-items: center;
     justify-content: space-between;
-    .text-align(left);
+    text-align: left;
 
     font-size: var(--font-size-14);
     margin: 0 var(--size-16);
@@ -62,11 +61,6 @@
     &__action {
       flex-shrink: 0;
       margin-left: var(--size-16);
-
-      [dir="rtl"] & {
-        margin-right: var(--size-16);
-        margin-left: 0;
-      }
     }
 
     &-container-enter,