@transferwise/components 0.0.0-experimental-9050641 → 0.0.0-experimental-ce05ccb

package/src/modal/Modal.css

@@ -41,7 +41,7 @@
   padding-bottom: 12px;
   padding-bottom: var(--size-12);
 }
-@media (min-width: 600px) {
+@media (min-width: 576px) {
   .tw-modal .tw-modal-content .tw-modal-header,
   .tw-modal .tw-modal-content .tw-modal-footer {
     padding: 24px;
@@ -52,12 +52,12 @@
     padding: 0 var(--size-24);
   }
 }
-@media (min-width: 320.02px) {
+@media (min-width: 480px) {
   .tw-modal-dialog.tw-modal-sm {
     width: 300px;
   }
 }
-@media (min-width: 600px) {
+@media (min-width: 576px) {
   .tw-modal {
     padding: 40px;
     padding: var(--size-40);
@@ -67,16 +67,29 @@
     border-radius: var(--radius-small);
   }
   .tw-modal .tw-modal-dialog.tw-modal-md {
-    width: 576px;
+    width: 540px;
   }
 }
-@media (min-width: 840px) {
+@media (min-width: 768px) {
   .tw-modal-dialog.tw-modal-lg {
-    width: 792px;
+    width: 720px;
   }
 }
-@media (min-width: 1160px) {
+@media (min-width: 992px) {
   .tw-modal-dialog.tw-modal-xl {
     width: 1000px;
   }
 }
+/* Internet explorer hack */
+@media all and (-ms-high-contrast: none) {
+  /* IE11 */
+  /* stylelint-disable selector-no-vendor-prefix, selector-type-no-unknown */
+  _:-ms-fullscreen,
+  :root .tw-modal {
+    height: 100%;
+  }
+  _:-ms-fullscreen .tw-modal-dialog,
+  :root .tw-modal .tw-modal-dialog {
+    height: 100%;
+  }
+}

package/src/modal/Modal.less

@@ -1,6 +1,3 @@
-@import (reference) "@transferwise/neptune-tokens/breakpoints.less";
-@import (reference) "@transferwise/neptune-tokens/tokens.less";
-
 .tw-modal {
   &--scrollable {
     max-height: 100%;
@@ -71,7 +68,7 @@
 @media (--screen-xs) {
   .tw-modal-dialog {
     &.tw-modal-sm {
-      width: (@screen-xs-min - 2 * @size-10);
+      width: 300px;
     }
   }
 }
@@ -86,7 +83,7 @@
       }
 
       &.tw-modal-md {
-        width: (@screen-sm-min - @size-24);
+        width: 540px;
       }
     }
   }
@@ -95,7 +92,7 @@
 @media (--screen-md) {
   .tw-modal-dialog {
     &.tw-modal-lg {
-      width: (@screen-md-min - @size-48);
+      width: 720px;
     }
   }
 }
@@ -103,7 +100,22 @@
 @media (--screen-lg) {
   .tw-modal-dialog {
     &.tw-modal-xl {
-      width: (@size-40 * 25);
+      width: 1000px;
+    }
+  }
+}
+
+/* Internet explorer hack */
+// In internet explorer 11 modal shows up always collapsed.
+@media all and (-ms-high-contrast: none) {
+  /* IE11 */
+  /* stylelint-disable selector-no-vendor-prefix, selector-type-no-unknown */
+  _:-ms-fullscreen,
+  :root .tw-modal {
+    height: 100%;
+
+    .tw-modal-dialog {
+      height: 100%;
     }
   }
 }

package/src/modal/Modal.tsx

@@ -63,14 +63,14 @@ const Modal = ({
   ...otherProps
 }: ModalProps) => {
   const intl = useIntl();
-  const { isSmall } = useLayout();
+  const { isMedium } = useLayout();
 
   const contentReference = useRef<HTMLDivElement>(null);
   const titleId = useId();
 
   const overlayId = useContext(OverlayIdContext);
 
-  return !isSmall ? (
+  return !isMedium ? (
     <Drawer
       open={open}
       className={className}

package/src/overlayHeader/OverlayHeader.css

@@ -2,7 +2,7 @@
   min-height: 97px;
   width: 100%;
   min-width: 320px;
-  max-width: calc(1160px - 36px);
+  max-width: 1164px;
 }
 .np-theme-personal .np-overlay-header {
   border-bottom: 1px solid rgba(0,0,0,0.10196);

package/src/overlayHeader/OverlayHeader.less

@@ -1,4 +1,3 @@
-@import (reference) "@transferwise/neptune-tokens/breakpoints.less";
 @import (reference) "./../styles/less/addons/_spacing-utilities.less";
 
 .np-overlay-header {
@@ -6,8 +5,8 @@
     // Same height and width as in FlowNavigation
     min-height: 97px;
     width: 100%;
-    min-width: @screen-xs-min;
-    max-width: calc(@screen-lg-min - 36px);
+    min-width: 320px;
+    max-width: 1164px;
   }
 
   .np-theme-personal & {

package/src/popover/Popover.css

@@ -41,12 +41,12 @@
     hyphens: auto;
     hyphenate-limit-chars: 7 3;
   }
-  @media (min-width: 840px) {
+  @media (min-width: 768px) {
     .np-popover__container.np-bottom-sheet .np-popover__title {
       hyphenate-limit-chars: 8 3;
     }
   }
-  @media (min-width: 1160px) {
+  @media (min-width: 992px) {
     .np-popover__container.np-bottom-sheet .np-popover__title {
       hyphenate-limit-chars: 10 4 3;
     }
@@ -58,7 +58,7 @@
     -webkit-hyphenate-limit-before: 3;
     -webkit-hyphenate-limit-after: 3;
   }
-  @media (min-width: 1160px) {
+  @media (min-width: 992px) {
     .np-popover__container.np-bottom-sheet .np-popover__title {
       -webkit-hyphenate-limit-before: 4;
     }

package/src/popover/Popover.test.tsx

@@ -1,5 +1,4 @@
-import { Breakpoint } from '@transferwise/neptune-tokens';
-import { Position } from '../common';
+import { Breakpoint, Position } from '../common';
 import { render, screen, userEvent, mockMatchMedia } from '../test-utils';
 
 import Popover from './Popover';

package/src/promoCard/PromoCard.css

@@ -176,7 +176,7 @@
   gap: var(--size-24);
   width: 100%;
 }
-@media (min-width: 840px) {
+@media (min-width: 768px) {
   .np-CardGroup {
     flex-direction: row;
   }

package/src/prompt/ActionPrompt/ActionPrompt.css

@@ -12,7 +12,7 @@
   -o-object-fit: contain;
      object-fit: contain;
 }
-@media (max-width: 599.98px) {
+@media (max-width: 767px) {
   .wds-action-prompt--with-two-actions .wds-prompt__actions-wrapper .wds-Button {
     flex: 1 1 calc(50% - (var(--Prompt-actions-gap) / 2));
     min-width: -moz-fit-content;

package/src/prompt/ActionPrompt/ActionPrompt.less

@@ -11,7 +11,7 @@
   }
 
   &--with-two-actions {
-    @media (--screen-xs-max) {
+    @media (--screen-sm-max) {
       .wds-prompt__actions-wrapper {
         .wds-Button {
           flex: 1 1 calc(50% - (var(--Prompt-actions-gap) / 2));

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

@@ -1,7 +1,7 @@
-import { userEvent } from '@testing-library/user-event';
-import { Breakpoint } from '@transferwise/neptune-tokens';
+import { Sentiment } from '../../common';
 import { mockMatchMedia, render, screen } from '../../test-utils';
 import { ActionPrompt, ActionPromptProps } from './ActionPrompt';
+import { userEvent } from '@testing-library/user-event';
 
 mockMatchMedia();
 
@@ -224,9 +224,10 @@ describe('ActionPrompt', () => {
 
   describe('Responsive behavior', () => {
     it('renders buttons as block on mobile', () => {
+      // Mock mobile viewport
       const mockMatchMediaFn = window.matchMedia as jest.Mock;
       mockMatchMediaFn.mockImplementation((query: string) => ({
-        matches: query !== `(min-width: ${Breakpoint.SMALL}px)`,
+        matches: query === '(max-width: 768px)',
         media: query,
         onchange: null,
         addListener: jest.fn(),
@@ -243,40 +244,8 @@ describe('ActionPrompt', () => {
         />,
       );
 
-      expect(screen.getByRole('button', { name: 'Primary Action' })).toHaveClass(
-        'wds-Button--block',
-      );
-      expect(screen.getByRole('button', { name: 'Secondary' })).toHaveClass(
-        'wds-Button--block'
-      );
-    });
-
-    it('renders buttons as inline on desktop', () => {
-      const mockMatchMediaFn = window.matchMedia as jest.Mock;
-      mockMatchMediaFn.mockImplementation((query: string) => ({
-        matches: query === `(min-width: ${Breakpoint.SMALL}px)`,
-        media: query,
-        onchange: null,
-        addListener: jest.fn(),
-        removeListener: jest.fn(),
-        addEventListener: jest.fn(),
-        removeEventListener: jest.fn(),
-        dispatchEvent: jest.fn(),
-      }));
-
-      render(
-        <ActionPrompt
-          {...defaultProps}
-          actionSecondary={{ label: 'Secondary', onClick: jest.fn() }}
-        />,
-      );
-
-      expect(screen.getByRole('button', { name: 'Primary Action' })).not.toHaveClass(
-        'wds-Button--block',
-      );
-      expect(screen.getByRole('button', { name: 'Secondary' })).not.toHaveClass(
-        'wds-Button--block',
-      );
+      expect(screen.getByText('Primary Action')).toBeInTheDocument();
+      expect(screen.getByText('Secondary')).toBeInTheDocument();
     });
   });
 });

package/src/prompt/ActionPrompt/ActionPrompt.tsx

@@ -1,10 +1,9 @@
 import { AriaAttributes, ReactNode, useId } from 'react';
-import { Breakpoint } from '@transferwise/neptune-tokens';
 import { clsx } from 'clsx';
 
 import Body from '../../body';
 import Button from '../../button';
-import { Typography } from '../../common';
+import { Breakpoint, Typography } from '../../common';
 import { ButtonProps } from '../../button/Button.types';
 import { PrimitivePrompt, PrimitivePromptProps } from '../PrimitivePrompt';
 import { useScreenSize } from '../../common/hooks/useScreenSize';
@@ -50,7 +49,7 @@ export const ActionPrompt = ({
   'data-testid': testId,
   'aria-label': ariaLabel,
 }: ActionPromptProps) => {
-  const isMobile = !useScreenSize(Breakpoint.SMALL);
+  const isMobile = !useScreenSize(Breakpoint.MEDIUM);
 
   const mediaId = useId();
   const titleId = useId();

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

@@ -73,7 +73,7 @@
     padding-top: 0;
   }
 }
-@container (width < 320px) {
+@container (max-width: 320px) {
   .wds-critical-banner__text-wrapper {
     padding-top: 0;
   }
@@ -124,6 +124,63 @@
     min-width: fit-content;
   }
 }
+.wds-critical-banner-overhang {
+  --critical-banner-mobile-overhang-size: 32px;
+  --critical-banner-mobile-overhang-color: var(--color-sentiment-negative);
+  position: relative;
+}
+.wds-critical-banner-overhang--warning {
+  --critical-banner-mobile-overhang-color: var(--color-sentiment-warning);
+}
+.wds-critical-banner-overhang--negative {
+  --critical-banner-mobile-overhang-color: var(--color-sentiment-negative);
+}
+.wds-critical-banner-overhang--neutral {
+  --critical-banner-mobile-overhang-color: var(--color-background-neutral);
+}
+.wds-critical-banner-overhang--success {
+  --critical-banner-mobile-overhang-color: var(--color-sentiment-positive);
+}
+.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 .wds-critical-banner-overhang {
+    margin-bottom: var(--critical-banner-mobile-overhang-size);
+    padding-bottom: var(--critical-banner-mobile-overhang-size);
+  }
+  .wds-critical-banner__entry-mask .wds-critical-banner-overhang::after {
+    content: "";
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    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(--critical-banner-mobile-overhang-color) 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(--critical-banner-mobile-overhang-color) 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 +188,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

@@ -1,4 +1,3 @@
-@import (reference) "@transferwise/neptune-tokens/breakpoints.less";
 @import (reference) "./CriticalBanner.vars.less";
 
 .wds-critical-banner {
@@ -84,7 +83,8 @@
     @media (--screen-400-zoom) {
       padding-top: 0;
     }
-    @container (width < @screen-xs-min) {
+
+    @container (max-width: 320px) {
       padding-top: 0;
     }
   }
@@ -144,6 +144,94 @@
   }
 }
 
+.wds-critical-banner-overhang {
+  --critical-banner-mobile-overhang-size: 32px;
+  --critical-banner-mobile-overhang-color: var(--color-sentiment-negative);
+  position: relative;
+
+  &--warning {
+    --critical-banner-mobile-overhang-color: var(--color-sentiment-warning);
+  }
+
+  &--negative {
+    --critical-banner-mobile-overhang-color: var(--color-sentiment-negative);
+  }
+
+  &--neutral {
+    --critical-banner-mobile-overhang-color: var(--color-background-neutral);
+  }
+
+  &--success {
+    --critical-banner-mobile-overhang-color: var(--color-sentiment-positive);
+  }
+}
+
+// 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) {
+    .wds-critical-banner-overhang {
+      margin-bottom: var(--critical-banner-mobile-overhang-size);
+      padding-bottom: var(--critical-banner-mobile-overhang-size);
+
+      &::after {
+        content: "";
+        position: absolute;
+        right: 0;
+        bottom: 0;
+        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(--critical-banner-mobile-overhang-color)
+                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(--critical-banner-mobile-overhang-color)
+                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 +240,10 @@
   .wds-critical-banner__toggle {
     transition: none !important;
   }
+
+  .wds-critical-banner__entry-mask {
+    animation: none;
+    grid-template-rows: 1fr;
+    overflow: visible;
+  }
 }