@transferwise/components 46.142.0 → 46.143.0

package/src/modal/Modal.css

@@ -41,7 +41,7 @@
   padding-bottom: 12px;
   padding-bottom: var(--size-12);
 }
-@media (min-width: 576px) {
+@media (min-width: 600px) {
   .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: 480px) {
+@media (min-width: 320.02px) {
   .tw-modal-dialog.tw-modal-sm {
     width: 300px;
   }
 }
-@media (min-width: 576px) {
+@media (min-width: 600px) {
   .tw-modal {
     padding: 40px;
     padding: var(--size-40);
@@ -67,29 +67,16 @@
     border-radius: var(--radius-small);
   }
   .tw-modal .tw-modal-dialog.tw-modal-md {
-    width: 540px;
+    width: 576px;
   }
 }
-@media (min-width: 768px) {
+@media (min-width: 840px) {
   .tw-modal-dialog.tw-modal-lg {
-    width: 720px;
+    width: 792px;
   }
 }
-@media (min-width: 992px) {
+@media (min-width: 1160px) {
   .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,3 +1,6 @@
+@import (reference) "@transferwise/neptune-tokens/breakpoints.less";
+@import (reference) "@transferwise/neptune-tokens/tokens.less";
+
 .tw-modal {
   &--scrollable {
     max-height: 100%;
@@ -68,7 +71,7 @@
 @media (--screen-xs) {
   .tw-modal-dialog {
     &.tw-modal-sm {
-      width: 300px;
+      width: (@screen-xs-min - 2 * @size-10);
     }
   }
 }
@@ -83,7 +86,7 @@
       }
 
       &.tw-modal-md {
-        width: 540px;
+        width: (@screen-sm-min - @size-24);
       }
     }
   }
@@ -92,7 +95,7 @@
 @media (--screen-md) {
   .tw-modal-dialog {
     &.tw-modal-lg {
-      width: 720px;
+      width: (@screen-md-min - @size-48);
     }
   }
 }
@@ -100,22 +103,7 @@
 @media (--screen-lg) {
   .tw-modal-dialog {
     &.tw-modal-xl {
-      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%;
+      width: (@size-40 * 25);
     }
   }
 }

package/src/modal/Modal.tsx

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

package/src/overlayHeader/OverlayHeader.css

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

package/src/overlayHeader/OverlayHeader.less

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

package/src/popover/Popover.css

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

package/src/popover/Popover.test.tsx

@@ -1,4 +1,5 @@
-import { Breakpoint, Position } from '../common';
+import { Breakpoint } from '@transferwise/neptune-tokens';
+import { 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: 768px) {
+@media (min-width: 840px) {
   .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: 767px) {
+@media (max-width: 599.98px) {
   .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-sm-max) {
+    @media (--screen-xs-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 { Sentiment } from '../../common';
+import { userEvent } from '@testing-library/user-event';
+import { Breakpoint } from '@transferwise/neptune-tokens';
 import { mockMatchMedia, render, screen } from '../../test-utils';
 import { ActionPrompt, ActionPromptProps } from './ActionPrompt';
-import { userEvent } from '@testing-library/user-event';
 
 mockMatchMedia();
 
@@ -224,10 +224,9 @@ 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 === '(max-width: 768px)',
+        matches: query !== `(min-width: ${Breakpoint.SMALL}px)`,
         media: query,
         onchange: null,
         addListener: jest.fn(),
@@ -244,8 +243,40 @@ describe('ActionPrompt', () => {
         />,
       );
 
-      expect(screen.getByText('Primary Action')).toBeInTheDocument();
-      expect(screen.getByText('Secondary')).toBeInTheDocument();
+      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',
+      );
     });
   });
 });

package/src/prompt/ActionPrompt/ActionPrompt.tsx

@@ -1,9 +1,10 @@
 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 { Breakpoint, Typography } from '../../common';
+import { Typography } from '../../common';
 import { ButtonProps } from '../../button/Button.types';
 import { PrimitivePrompt, PrimitivePromptProps } from '../PrimitivePrompt';
 import { useScreenSize } from '../../common/hooks/useScreenSize';
@@ -49,7 +50,7 @@ export const ActionPrompt = ({
   'data-testid': testId,
   'aria-label': ariaLabel,
 }: ActionPromptProps) => {
-  const isMobile = !useScreenSize(Breakpoint.MEDIUM);
+  const isMobile = !useScreenSize(Breakpoint.SMALL);
 
   const mediaId = useId();
   const titleId = useId();

package/src/prompt/CriticalBanner/CriticalBanner.css

@@ -73,7 +73,7 @@
     padding-top: 0;
   }
 }
-@container (max-width: 320px) {
+@container (width < 320px) {
   .wds-critical-banner__text-wrapper {
     padding-top: 0;
   }

package/src/prompt/CriticalBanner/CriticalBanner.less

@@ -1,3 +1,4 @@
+@import (reference) "@transferwise/neptune-tokens/breakpoints.less";
 @import (reference) "./CriticalBanner.vars.less";
 
 .wds-critical-banner {
@@ -83,8 +84,7 @@
     @media (--screen-400-zoom) {
       padding-top: 0;
     }
-
-    @container (max-width: 320px) {
+    @container (width < @screen-xs-min) {
       padding-top: 0;
     }
   }

package/src/prompt/PrimitivePrompt/PrimitivePrompt.css

@@ -40,7 +40,7 @@
   grid-column-start: 2;
   grid-column-end: 3;
 }
-@media (max-width: 767px) {
+@media (max-width: 599.98px) {
   .wds-prompt__actions-wrapper {
     grid-column: span 2;
     width: 100%;

package/src/prompt/PrimitivePrompt/PrimitivePrompt.less

@@ -36,7 +36,7 @@
     grid-column-start: 2;
     grid-column-end: 3;
 
-    @media (--screen-sm-max) {
+    @media (--screen-xs-max) {
       grid-column: span 2;
       width: 100%;
 

package/src/select/Select.test.tsx

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

package/src/snackbar/Snackbar.css

@@ -62,7 +62,7 @@
 .np-theme-personal--forest-green .snackbar__text {
   box-shadow: none;
 }
-@media (min-width: 576px) {
+@media (min-width: 600px) {
   .snackbar__text {
     width: auto;
     max-width: 600px;
@@ -86,7 +86,7 @@
   transform: translateY(-16px);
   transform: translateY(calc(-16px - env(safe-area-inset-bottom)));
 }
-@media (min-width: 576px) {
+@media (min-width: 600px) {
   .snackbar__text-container-enter-active {
     transform: translateY(-24px);
   }

package/src/statusIcon/StatusIcon.tsx

@@ -1,8 +1,9 @@
 import { Info, Alert, Cross, Check, ClockBorderless } from '@transferwise/icons';
+import { Breakpoint } from '@transferwise/neptune-tokens';
 import { clsx } from 'clsx';
 import { useIntl } from 'react-intl';
 
-import { SizeSmall, SizeMedium, SizeLarge, Sentiment, Size, Breakpoint, Status } from '../common';
+import { SizeSmall, SizeMedium, SizeLarge, Sentiment, Size, Status } from '../common';
 import Circle, { CircleProps } from '../common/circle';
 import { useMedia } from '../common/hooks/useMedia';
 
@@ -86,7 +87,7 @@ const StatusIcon = ({
   };
   const { Icon, defaultIconLabel } = iconMetaBySentiment[sentiment];
 
-  const isTinyViewport = useMedia(`(max-width: ${Breakpoint.ZOOM_400}px)`);
+  const isTinyViewport = useMedia(`(max-width: ${Breakpoint.EXTRA_SMALL}px)`);
   const size = mapLegacySize[sizeProp] ?? sizeProp;
 
   return (

package/src/stepper/Stepper.css

@@ -2,7 +2,7 @@
   padding-bottom: 24px;
   width: 100%;
 }
-@media only screen and (max-width: 575px) {
+@media only screen and (max-width: 599.98px) {
   .tw-stepper {
     padding-bottom: 0;
   }
@@ -32,7 +32,7 @@
 .tw-stepper__step--has-tooltip {
   cursor: pointer;
 }
-@media screen and (min-width: 576px) and (max-width: 991px) {
+@media screen and (min-width: 600px) and (max-width: 1159.98px) {
   .tw-stepper__step:first-child .tooltip-inner {
     transform: translateX(calc(50% - 32px));
   }

package/src/styles/less/accordion.css

@@ -68,12 +68,12 @@
     hyphens: auto;
     hyphenate-limit-chars: 7 3;
   }
-  @media (min-width: 768px) {
+  @media (min-width: 840px) {
     .decision__title {
       hyphenate-limit-chars: 8 3;
     }
   }
-  @media (min-width: 992px) {
+  @media (min-width: 1160px) {
     .decision__title {
       hyphenate-limit-chars: 10 4 3;
     }
@@ -85,7 +85,7 @@
     -webkit-hyphenate-limit-before: 3;
     -webkit-hyphenate-limit-after: 3;
   }
-  @media (min-width: 992px) {
+  @media (min-width: 1160px) {
     .decision__title {
       -webkit-hyphenate-limit-before: 4;
     }
@@ -137,7 +137,7 @@
   color: #5d7079;
   color: var(--color-content-secondary);
 }
-@media (min-width: 480px) {
+@media (min-width: 320.02px) {
   .decision .media .media-left,
   .decision.media .media-left {
     display: block;

package/src/styles/less/addons/_display-utilities.less

@@ -87,39 +87,28 @@
 }
 
 .visible-lg,
-.visible-lg-block {
-  @media (--screen-lg) and (--screen-lg-max) {
-    display: block !important;
-  }
-}
-
-.visible-lg-inline {
-  @media (--screen-lg) and (--screen-lg-max) {
-    display: inline !important;
-  }
-}
-
-.visible-lg-inline-block {
-  @media (--screen-lg) and (--screen-lg-max) {
-    display: inline-block !important;
-  }
-}
-
+.visible-lg-block,
+/// @deprecated
 .visible-xl,
+/// @deprecated
 .visible-xl-block {
-  @media (--screen-xl) {
+  @media (--screen-lg) {
     display: block !important;
   }
 }
 
+.visible-lg-inline,
+/// @deprecated
 .visible-xl-inline {
-  @media (--screen-xl) {
+  @media (--screen-lg) {
     display: inline !important;
   }
 }
 
+.visible-lg-inline-block,
+/// @deprecated
 .visible-xl-inline-block {
-  @media (--screen-xl) {
+  @media (--screen-lg) {
     display: inline-block !important;
   }
 }
@@ -142,14 +131,11 @@
   }
 }
 
-.hidden-lg {
-  @media (--screen-lg) and (--screen-lg-max) {
-    display: none !important;
-  }
-}
 
+.hidden-lg,
+/// @deprecated
 .hidden-xl {
-  @media (--screen-xl) {
+  @media (--screen-lg) {
     display: none !important;
   }
 }

package/src/styles/less/button-groups.css

@@ -53,7 +53,7 @@
   margin-left: 0;
   margin-left: initial;
 }
-@media (min-width: 992px) {
+@media (min-width: 1160px) {
   .btn-toolbar:not(.btn-toolbar-xl) {
     margin-left: -4px;
     margin-right: -4px;
@@ -91,7 +91,7 @@
 [dir="rtl"] .btn-toolbar.btn-toolbar-xs .input-group {
   float: right;
 }
-@media (min-width: 576px) {
+@media (min-width: 600px) {
   .btn-toolbar.btn-toolbar-sm {
     margin-left: -4px;
     margin-right: -4px;
@@ -111,7 +111,7 @@
     float: right;
   }
 }
-@media (min-width: 768px) {
+@media (min-width: 840px) {
   .btn-toolbar.btn-toolbar-md {
     margin-left: -4px;
     margin-right: -4px;
@@ -131,7 +131,7 @@
     float: right;
   }
 }
-@media (min-width: 992px) {
+@media (min-width: 1160px) {
   .btn-toolbar.btn-toolbar-lg {
     margin-left: -4px;
     margin-right: -4px;
@@ -151,7 +151,7 @@
     float: right;
   }
 }
-@media (min-width: 1200px) {
+@media (min-width: 1160px) {
   .btn-toolbar.btn-toolbar-xl {
     margin-left: -4px;
     margin-right: -4px;
@@ -426,7 +426,7 @@ html:not([dir="rtl"]) .btn-group .btn + .btn-primary {
   padding-left: 40px;
   padding-right: 16px;
 }
-@media (min-width: 576px) {
+@media (min-width: 600px) {
   .btn-group.btn-block .btn-input.btn.dropdown-toggle {
     padding-right: 48px;
   }

package/src/styles/less/buttons.css

@@ -1127,7 +1127,7 @@ fieldset[disabled] .btn-accent:not(.disabled):not(:disabled).btn-priority-3 {
   height: 18px;
   background-size: 12px 12px !important;
 }
-@media (max-width: 767px) {
+@media (max-width: 839px) {
   .navbar-collapse .btn {
     padding: var(--btn-padding);
     font-size: 1rem;

package/src/styles/less/circles.css

@@ -145,7 +145,7 @@ a.circle.active:hover {
   background-color: rgba(134,167,189,0.10196);
   background-color: var(--color-background-neutral);
 }
-@media (min-width: 576px) {
+@media (min-width: 600px) {
   .circle-responsive {
     border-radius: 50%;
     background-color: #fff;

package/src/styles/less/column-layout.css

@@ -49,7 +49,7 @@
   padding: 24px;
   padding: var(--size-24);
 }
-@media (min-width: 992px) {
+@media (min-width: 1160px) {
   .column-layout {
     display: table;
   }
@@ -89,12 +89,12 @@
   opacity: 1;
   top: 20px;
 }
-@media (min-width: 992px) {
+@media (min-width: 1160px) {
   .column-layout-cover {
     display: none;
   }
 }
-@media (max-width: 991px) {
+@media (max-width: 1159.98px) {
   .column-layout-open {
     overflow: hidden;
   }
@@ -134,7 +134,7 @@
   padding: 4px 24px;
   padding: var(--size-4) 24px;
 }
-@media (min-width: 992px) {
+@media (min-width: 1160px) {
   .column-layout-brand {
     padding-left: 32px;
     padding-right: 32px;

package/src/styles/less/core/_typography-utilities.less

@@ -73,44 +73,32 @@
 }
 
 @media (--screen-lg) {
-  .text-lg-left {
-    .text-align(left);
-  }
-
-  .text-lg-right {
-    .text-align(right);
-  }
-
-  .text-lg-center {
-    text-align: center;
-  }
-
-  .text-lg-justify {
-    text-align: justify;
-  }
-
-  .text-lg-nowrap {
-    white-space: nowrap;
-  }
-}
-
-@media (--screen-xl) {
+  .text-lg-left,
+  /// @deprecated
   .text-xl-left {
     .text-align(left);
   }
 
+  .text-lg-right,
+  /// @deprecated
   .text-xl-right {
     .text-align(right);
   }
 
+  .text-lg-center,
+  /// @deprecated
   .text-xl-center {
     text-align: center;
   }
 
+  .text-lg-justify,
+  /// @deprecated
   .text-xl-justify {
     text-align: justify;
   }
 
+  .text-lg-nowrap,
+  /// @deprecated
   .text-xl-nowrap {
     white-space: nowrap;
   }