@transferwise/components 0.0.0-experimental-d1de9e0 → 0.0.0-experimental-161d286

package/src/container/Container.css

@@ -9,17 +9,17 @@
   padding-inline: 16px;
   padding-inline: var(--wds-container-padding-inline);
 }
-@media (min-width: 600px) {
+@media (min-width: 576px) {
   .wds-container {
     --wds-container-padding-inline: var(--size-16);
   }
 }
-@media (min-width: 840px) {
+@media (min-width: 768px) {
   .wds-container {
     --wds-container-padding-inline: var(--size-32);
   }
 }
-@media (min-width: 1160px) {
+@media (min-width: 992px) {
   .wds-container {
     --wds-container-padding-inline: var(--size-40);
   }

package/src/criticalBanner/CriticalCommsBanner.css

@@ -44,7 +44,7 @@
   --Button-background-hover: var(--color-sentiment-interactive-secondary-neutral-hover);
   --Button-background-active: var(--color-sentiment-interactive-secondary-neutral-active);
 }
-@media (min-width: 840px) {
+@media (min-width: 768px) {
   .critical-comms .alert-warning .alert__message,
   .critical-comms .alert-negative .alert__message,
   .critical-comms .alert-neutral .alert__message {

package/src/criticalBanner/CriticalCommsBanner.test.story.tsx

@@ -0,0 +1,85 @@
+import { Meta, StoryObj } from '@storybook/react-webpack5';
+
+import CriticalCommsBanner from '.';
+import { withVariantConfig } from '../../.storybook/helpers';
+
+export default {
+  component: CriticalCommsBanner,
+  title: 'Prompts/CriticalCommsBanner/Tests',
+  tags: ['!autodocs', 'deprecated'],
+} satisfies Meta<typeof CriticalCommsBanner>;
+
+type Story = StoryObj<typeof CriticalCommsBanner>;
+
+export const Sentiments: Story = {
+  render: (args) => (
+    <>
+      <CriticalCommsBanner {...args} sentiment="negative" />
+      <CriticalCommsBanner {...args} sentiment="warning" />
+      <CriticalCommsBanner {...args} sentiment="neutral" />
+    </>
+  ),
+  args: {
+    subtitle: 'Add money within the next 30 days',
+    action: { label: 'Take action', href: 'https://wise.com' },
+    className: 'm-b-1',
+  },
+  ...withVariantConfig([
+    'default',
+    'dark',
+    'bright-green',
+    'forest-green',
+    'business',
+    'business--forest-green',
+    'business--bright-green',
+  ]),
+};
+
+export const RTL: Story = {
+  render: (args) => (
+    <>
+      <CriticalCommsBanner {...args} sentiment="negative" />
+      <CriticalCommsBanner {...args} sentiment="warning" />
+      <CriticalCommsBanner {...args} sentiment="neutral" />
+    </>
+  ),
+  args: {
+    subtitle: 'Add money within the next 30 days',
+    action: { label: 'Take action', href: 'https://wise.com' },
+    className: 'm-b-1',
+  },
+  ...withVariantConfig(['rtl']),
+};
+
+export const Mobile: Story = {
+  args: {
+    subtitle: 'Add money within the next 30 days',
+    action: { label: 'Take action', href: 'https://wise.com' },
+    className: 'm-b-1',
+  },
+  ...withVariantConfig(['mobile']),
+};
+
+export const Zoom: Story = {
+  args: {
+    subtitle: 'Add money within the next 30 days',
+    action: { label: 'Take action', href: 'https://wise.com' },
+    className: 'm-b-1',
+  },
+  ...withVariantConfig(['400%']),
+};
+
+export const WithoutAction: Story = {
+  render: (args) => (
+    <>
+      <CriticalCommsBanner {...args} sentiment="negative" />
+      <CriticalCommsBanner {...args} sentiment="warning" />
+      <CriticalCommsBanner {...args} sentiment="neutral" />
+    </>
+  ),
+  args: {
+    subtitle: 'Add money within the next 30 days',
+    className: 'm-b-1',
+  },
+  ...withVariantConfig(['default']),
+};

package/src/dateInput/DateInput.css

@@ -9,7 +9,7 @@
 .tw-date .tw-date--day {
   margin-bottom: 0;
 }
-@media (min-width: 600px) {
+@media (min-width: 576px) {
   .np-theme-personal .tw-date label {
     margin-bottom: 0;
   }

package/src/dateLookup/DateLookup.tsx

@@ -1,11 +1,11 @@
 import { clsx } from 'clsx';
 import { createRef, PureComponent, KeyboardEvent } from 'react';
-import { Breakpoint } from '@transferwise/neptune-tokens';
 
 import {
   Size,
   MonthFormat,
   Position,
+  Breakpoint,
   type SizeSmall,
   type SizeMedium,
   type SizeLarge,

package/src/decision/Decision.test.tsx

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

package/src/decision/Decision.tsx

@@ -1,7 +1,6 @@
 import { clsx } from 'clsx';
-import { Breakpoint } from '@transferwise/neptune-tokens';
 
-import { Size, SizeSmall, SizeMedium } from '../common';
+import { Size, Breakpoint, SizeSmall, SizeMedium } from '../common';
 import { useScreenSize } from '../common/hooks/useScreenSize';
 import NavigationOption from '../navigationOption';
 import Tile from '../tile';

package/src/definitionList/DefinitionList.css

@@ -9,12 +9,12 @@
 .tw-definition-list__button {
   margin-top: -50%;
 }
-@media (max-width: 599.98px) {
+@media (max-width: 576px) {
   .tw-definition-list--right-aligned-desktop {
     justify-content: space-between;
   }
 }
-@media (min-width: 600px) {
+@media (min-width: 576px) {
   .tw-definition-list--right-aligned-desktop {
     justify-content: flex-end;
   }

package/src/definitionList/DefinitionList.less

@@ -15,13 +15,13 @@
     margin-top: -50%;
   }
 
-  @media (--screen-xs-max) {
+  @media (max-width: 576px) {
     &--right-aligned-desktop {
       justify-content: space-between;
     }
   }
 
-  @media (--screen-sm) {
+  @media (min-width: 576px) {
     &--right-aligned-desktop {
       justify-content: flex-end;
     }

package/src/drawer/Drawer.css

@@ -9,7 +9,7 @@
   max-height: 100vh;
   max-height: 100dvh;
 }
-@media (max-width: 839.98px) {
+@media (max-width: 770px) {
   .np-drawer {
     max-width: none;
     max-width: initial;
@@ -43,7 +43,7 @@
   padding: 0 16px;
   padding: 0 var(--size-16);
 }
-@media (min-width: 840px) {
+@media (min-width: 768px) {
   .np-drawer .np-drawer-header,
   .np-drawer .np-drawer-footer {
     padding: 24px;

package/src/drawer/Drawer.less

@@ -4,15 +4,14 @@
   justify-content: space-between;
   width: 100vw;
   max-width: 600px;
+  @media (max-width: 770px) {
+    max-width: unset;
+  }
   height: 100vh;
   height: 100dvh;
   max-height: 100vh;
   max-height: 100dvh;
 
-  @media (--screen-sm-max) {
-    max-width: unset;
-  }
-
   .np-drawer-header {
     min-height: var(--size-56);
     padding: var(--size-24);

package/src/flowNavigation/FlowNavigation.css

@@ -10,7 +10,7 @@
 .np-flow-navigation__content {
   width: 100%;
   min-width: 320px;
-  max-width: calc(1160px - 36px);
+  max-width: 1164px;
 }
 .np-flow-navigation__stepper {
   padding-bottom: 0 !important;

package/src/flowNavigation/FlowNavigation.less

@@ -1,4 +1,3 @@
-@import (reference) "@transferwise/neptune-tokens/breakpoints.less";
 @import (reference) "./../styles/less/addons/_spacing-utilities.less";
 
 .np-flow-navigation {
@@ -15,7 +14,7 @@
   &__content {
     width: 100%;
     min-width: 320px;
-    max-width: calc(@screen-lg-min - 36px);
+    max-width: 1164px;
   }
 
   &__stepper {

package/src/flowNavigation/FlowNavigation.story.tsx

@@ -309,9 +309,6 @@ export const WithOverlayHeaderComparison: Story = {
     done: false,
     avatarURL: '../tapestry-01.png',
   },
-  parameters: {
-    padding: '0',
-  },
   render: (args) => {
     const [activeStep, setActiveStep] = useState(4);
     const [closed, setClosed] = useState(false);

package/src/flowNavigation/FlowNavigation.test.js

@@ -1,5 +1,5 @@
-import { Breakpoint } from '@transferwise/neptune-tokens';
 import AvatarView from '../avatarView';
+import { Breakpoint } from '../common';
 import { mockMatchMedia, render, screen } from '../test-utils';
 
 import FlowNavigation from './FlowNavigation';

package/src/flowNavigation/FlowNavigation.tsx

@@ -1,8 +1,7 @@
 import { clsx } from 'clsx';
 import { useIntl } from 'react-intl';
-import { Breakpoint } from '@transferwise/neptune-tokens';
 
-import { Layout } from '../common';
+import { Breakpoint, Layout } from '../common';
 import { CloseButton } from '../common/closeButton';
 import FlowHeader from '../common/flowHeader/FlowHeader';
 import Logo from '../logo';

package/src/index.ts

@@ -248,10 +248,10 @@ export { default as useSnackbar } from './snackbar/useSnackbar';
 /**
  * Enums
  */
-export { Breakpoint } from '@transferwise/neptune-tokens';
 export { AlertArrowPosition } from './alert/Alert';
 export { AvatarType } from './avatar';
 export {
+  Breakpoint,
   ControlType,
   DateMode,
   Direction,

package/src/inputs/Input.css

@@ -111,12 +111,12 @@
     hyphens: auto;
     hyphenate-limit-chars: 7 3;
   }
-  @media (min-width: 840px) {
+  @media (min-width: 768px) {
     .np-form-control--size-lg {
       hyphenate-limit-chars: 8 3;
     }
   }
-  @media (min-width: 1160px) {
+  @media (min-width: 992px) {
     .np-form-control--size-lg {
       hyphenate-limit-chars: 10 4 3;
     }
@@ -128,7 +128,7 @@
     -webkit-hyphenate-limit-before: 3;
     -webkit-hyphenate-limit-after: 3;
   }
-  @media (min-width: 1160px) {
+  @media (min-width: 992px) {
     .np-form-control--size-lg {
       -webkit-hyphenate-limit-before: 4;
     }

package/src/inputs/SelectInput/Options/SelectInputOptions.css

@@ -6,7 +6,7 @@
 .np-select-input-options-container:focus {
   outline: none;
 }
-@media (min-width: 600px) {
+@media (min-width: 576px) {
   .np-select-input-options-container {
     max-height: 28rem /* 448px */;
   }
@@ -42,7 +42,7 @@
   scroll-padding-bottom: var(--size-8);
   overflow-y: auto;
 }
-@media (min-width: 600px) {
+@media (min-width: 576px) {
   .np-select-input-listbox-container {
     height: auto;
   }

package/src/inputs/SelectInput/SelectInput.css

@@ -250,7 +250,7 @@
 .np-select-input-options-container:focus {
   outline: none;
 }
-@media (min-width: 600px) {
+@media (min-width: 576px) {
   .np-select-input-options-container {
     max-height: 28rem /* 448px */;
   }
@@ -286,7 +286,7 @@
   scroll-padding-bottom: var(--size-8);
   overflow-y: auto;
 }
-@media (min-width: 600px) {
+@media (min-width: 576px) {
   .np-select-input-listbox-container {
     height: auto;
   }

package/src/inputs/SelectInput/SelectInput.tsx

@@ -1,8 +1,8 @@
 import mergeProps from 'merge-props';
 import { useEffect, useRef, useState, useDeferredValue } from 'react';
 import { Listbox as ListboxBase } from '@headlessui/react';
-import { Breakpoint } from '@transferwise/neptune-tokens';
 import { useScreenSize } from '../../common/hooks/useScreenSize';
+import { Breakpoint } from '../../common/propsValues/breakpoint';
 import { useEffectEvent } from '../../common/hooks/useEffectEvent';
 import { useInputAttributes } from '../contexts';
 

package/src/inputs/TextArea.css

@@ -111,12 +111,12 @@
     hyphens: auto;
     hyphenate-limit-chars: 7 3;
   }
-  @media (min-width: 840px) {
+  @media (min-width: 768px) {
     .np-form-control--size-lg {
       hyphenate-limit-chars: 8 3;
     }
   }
-  @media (min-width: 1160px) {
+  @media (min-width: 992px) {
     .np-form-control--size-lg {
       hyphenate-limit-chars: 10 4 3;
     }
@@ -128,7 +128,7 @@
     -webkit-hyphenate-limit-before: 3;
     -webkit-hyphenate-limit-after: 3;
   }
-  @media (min-width: 1160px) {
+  @media (min-width: 992px) {
     .np-form-control--size-lg {
       -webkit-hyphenate-limit-before: 4;
     }

package/src/listItem/ListItem.css

@@ -5,14 +5,16 @@
   gap: 4px 12px;
   gap: var(--size-4) var(--size-12);
 }
-.wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-noInfo-hasPrompt:not(:has(.wds-list-item-subtitle-value, .wds-list-item-subtitle)) .wds-list-item-prompt,
-.wds-list-item-gridWrapper.wds-list-item-hasMedia-noControl.wds-list-item-noInfo-hasPrompt:not(:has(.wds-list-item-subtitle-value, .wds-list-item-subtitle)) .wds-list-item-prompt {
+.wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-noInfo-hasPrompt:not( :has(.wds-list-item-subtitle-value, .wds-list-item-subtitle)) .wds-list-item-prompt,
+.wds-list-item-gridWrapper.wds-list-item-hasMedia-noControl.wds-list-item-noInfo-hasPrompt:not( :has(.wds-list-item-subtitle-value, .wds-list-item-subtitle)) .wds-list-item-prompt {
   margin-top: -2px;
 }
 @container (width > 308px) {
   .wds-list-item-gridWrapper .wds-list-item-control-wrapper {
     height: var(--wds-list-item-control-wrapper-height);
     align-content: center;
+    display: grid;
+    align-items: center;
   }
   .wds-list-item-gridWrapper .wds-list-item-media-image {
     -o-object-position: center;

package/src/listItem/ListItem.grid.css

@@ -5,14 +5,16 @@
   gap: 4px 12px;
   gap: var(--size-4) var(--size-12);
 }
-.wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-noInfo-hasPrompt:not(:has(.wds-list-item-subtitle-value, .wds-list-item-subtitle)) .wds-list-item-prompt,
-.wds-list-item-gridWrapper.wds-list-item-hasMedia-noControl.wds-list-item-noInfo-hasPrompt:not(:has(.wds-list-item-subtitle-value, .wds-list-item-subtitle)) .wds-list-item-prompt {
+.wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-noInfo-hasPrompt:not( :has(.wds-list-item-subtitle-value, .wds-list-item-subtitle)) .wds-list-item-prompt,
+.wds-list-item-gridWrapper.wds-list-item-hasMedia-noControl.wds-list-item-noInfo-hasPrompt:not( :has(.wds-list-item-subtitle-value, .wds-list-item-subtitle)) .wds-list-item-prompt {
   margin-top: -2px;
 }
 @container (width > 308px) {
   .wds-list-item-gridWrapper .wds-list-item-control-wrapper {
     height: var(--wds-list-item-control-wrapper-height);
     align-content: center;
+    display: grid;
+    align-items: center;
   }
   .wds-list-item-gridWrapper .wds-list-item-media-image {
     -o-object-position: center;