@transferwise/components 0.0.0-experimental-4c97d70 → 0.0.0-experimental-a322f91

package/src/section/Section.story.tsx

@@ -108,14 +108,8 @@ export const WithListItems = () => {
   return (
     <Section>
       <Header title="Section with list items" />
-      <ListItem
-        title="Item 1"
-        control={<ListItem.Navigation onClick={() => action('Item 1')} />}
-      />
-      <ListItem
-        title="Item 2"
-        control={<ListItem.Navigation onClick={() => action('Item 2')} />}
-      />
+      <ListItem title="Item 1" control={<ListItem.Navigation onClick={() => action('Item 1')} />} />
+      <ListItem title="Item 2" control={<ListItem.Navigation onClick={() => action('Item 2')} />} />
     </Section>
   );
 };

package/src/select/Select.css

@@ -123,14 +123,15 @@
   max-width: calc(100% - 32px);
 }
 .np-dropdown-menu-desktop {
-  max-height: 70vh;
   max-height: 70svh;
+  max-height: var(--np-panel-available-height, 70svh);
   min-width: 160px;
   max-width: calc(100vw - 32px);
 }
 @media (min-height: 592px) {
   .np-dropdown-menu-desktop {
     max-height: 592px;
+    max-height: var(--np-panel-available-height, 592px);
   }
 }
 .np-dropdown-menu {

package/src/select/Select.less

@@ -81,7 +81,7 @@
 
   // Override some of Button component styles
   .btn {
-    &:not(.disabled,:disabled,.btn-loading) {
+    &:not(.disabled, :disabled, .btn-loading) {
       color: var(--color-content-primary);
 
       &:hover {
@@ -108,15 +108,14 @@
 }
 
 .np-dropdown-menu-desktop {
-  max-height: 70vh;
-  max-height: 70svh;
+  max-height: var(--np-panel-available-height, 70svh);
   min-width: 160px;
   max-width: ~"calc(100vw - 32px)";
 }
 
 @media (min-height: 592px) {
   .np-dropdown-menu-desktop {
-    max-height: 592px;
+    max-height: var(--np-panel-available-height, 592px);
   }
 }
 
@@ -270,7 +269,9 @@
   /* stylelint-disable-next-line no-duplicate-selectors */
   .np-select .np-dropdown-toggle {
     background-color: unset;
-    transition: background-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
+    transition:
+      background-color 0.3s ease-in-out,
+      box-shadow 0.3s ease-in-out;
     border: none;
     box-shadow: inset 0 0 0 1px var(--color-interactive-secondary);
 

package/src/select/Select.test.story.tsx

@@ -0,0 +1,59 @@
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+import { userEvent, within } from 'storybook/test';
+import { useState } from 'react';
+
+import { withVariantConfig } from '../../.storybook/helpers';
+import Select, { SelectOptionItem } from './Select';
+
+const meta = {
+  title: 'Forms/Select/Tests',
+  component: Select,
+  tags: ['!autodocs', '!manifest'],
+} satisfies Meta<typeof Select>;
+export default meta;
+
+type Story = StoryObj<typeof Select>;
+
+const options: SelectOptionItem[] = Array.from({ length: 10 }, (_, i) => ({
+  value: i + 1,
+  label: `Option ${i + 1}`,
+}));
+
+/**
+ * Visual regression story: Select placed at the bottom of the viewport so the dropdown
+ * flips to the top when opened. The play function opens the dropdown automatically.
+ */
+export const DropdownFlipsToTop: Story = {
+  render: function Render() {
+    const [selected, setSelected] = useState<SelectOptionItem>(options[0]);
+    return (
+      <div
+        style={{
+          display: 'flex',
+          flexDirection: 'column',
+          justifyContent: 'flex-end',
+          minHeight: '50vh',
+        }}
+      >
+        <Select
+          id="flip-test-select"
+          size="md"
+          block
+          options={options}
+          selected={selected}
+          onChange={(option) => {
+            if (option && 'value' in option) {
+              setSelected(option as SelectOptionItem);
+            }
+          }}
+        />
+      </div>
+    );
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const trigger = canvas.getByRole('button', { name: /Option 1/i });
+    await userEvent.click(trigger);
+  },
+  ...withVariantConfig(['default']),
+};

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/select/Select.tsx

@@ -608,8 +608,8 @@ export default function Select({
       ) : (
         <Panel
           open={open}
-          flip={false}
           altAxis
+          considerHeight
           anchorRef={selectReference}
           anchorWidth={isDropdownAutoWidth}
           position={dropdownUp ? Position.TOP : Position.BOTTOM}

package/src/sentimentSurface/SentimentSurface.story.tsx

@@ -202,26 +202,18 @@ const TokenSwatch = ({ token }: { token: string }) => (
 export const EmphasisLevels: Story = {
   render: (args) => (
     <>
-      {sentiments.map((sentiment) => (
-        <div key={sentiment}>
-          <SentimentSurface
-            key={`${sentiment}-base`}
-            {...args}
-            sentiment={sentiment}
-            emphasis="base"
-          >
-            <div className="p-a-2 text-capitalize">{sentiment} - Base emphasis</div>
-          </SentimentSurface>
-          <SentimentSurface
-            key={`${sentiment}-elevated`}
-            {...args}
-            sentiment={sentiment}
-            emphasis="elevated"
-          >
-            <div className="p-a-2 text-capitalize">{sentiment} - Elevated emphasis</div>
-          </SentimentSurface>
-        </div>
-      ))}
+      <SentimentSurface {...args} sentiment="negative" emphasis="base">
+        <div className="p-a-2">Negative - Base emphasis</div>
+      </SentimentSurface>
+      <SentimentSurface {...args} sentiment="negative" emphasis="elevated">
+        <div className="p-a-2">Negative - Elevated emphasis</div>
+      </SentimentSurface>
+      <SentimentSurface {...args} sentiment="success" emphasis="base">
+        <div className="p-a-2">Success - Base emphasis</div>
+      </SentimentSurface>
+      <SentimentSurface {...args} sentiment="success" emphasis="elevated">
+        <div className="p-a-2">Success - Elevated emphasis</div>
+      </SentimentSurface>
     </>
   ),
   parameters: {
@@ -377,8 +369,8 @@ export const SentimentAwareComponents: Story = {
           {STATUS_NEGATIVE}
         </div>
 
-        <Header level="group" title="Success sentiment surface - Base emphasis" />
-        <SentimentSurface sentiment="success" emphasis="base">
+        <Header level="group" title="Success sentiment surface" />
+        <SentimentSurface sentiment="success">
           <div className="p-a-2 m-b-2 sentimentAwareComponent">
             {BODY}
             {AVATAR_SUCCESS}
@@ -386,26 +378,8 @@ export const SentimentAwareComponents: Story = {
           </div>
         </SentimentSurface>
 
-        <Header level="group" title="Success sentiment surface - Elevated emphasis" />
-        <SentimentSurface sentiment="success" emphasis="elevated">
-          <div className="p-a-2 m-b-2 sentimentAwareComponent">
-            {BODY}
-            {AVATAR_SUCCESS}
-            {STATUS_SUCCESS}
-          </div>
-        </SentimentSurface>
-
-        <Header level="group" title="Negative sentiment surface - Base emphasis" />
-        <SentimentSurface sentiment="negative" emphasis="base">
-          <div className="p-a-2 m-b-2 sentimentAwareComponent">
-            {BODY}
-            {AVATAR_NEGATIVE}
-            {STATUS_NEGATIVE}
-          </div>
-        </SentimentSurface>
-
-        <Header level="group" title="Negative sentiment surface - Elevated emphasis" />
-        <SentimentSurface sentiment="negative" emphasis="elevated">
+        <Header level="group" title="Negative sentiment surface" />
+        <SentimentSurface sentiment="negative">
           <div className="p-a-2 m-b-2 sentimentAwareComponent">
             {BODY}
             {AVATAR_NEGATIVE}
@@ -453,7 +427,7 @@ function CustomCard({ children, className }: { className?: string; children: Rea
 
 export const CustomComponents: Story = {
   tags: ['!autodocs', '!dev'],
-  render: () => (
+  render: (args) => (
     <>
       <style>{`
         .custom-card {

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.test.tsx

@@ -42,7 +42,6 @@ describe('StatusIcon', () => {
     },
   );
 
-
   it.each([
     [Sentiment.WARNING, 'alert-icon'],
     [Sentiment.PENDING, 'clock-borderless-icon'],
@@ -61,7 +60,6 @@ describe('StatusIcon', () => {
     },
   );
 
-
   describe('accessible name', () => {
     it.each([
       ['Error', Sentiment.NEGATIVE],

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: 320px) {
   .decision .media .media-left,
   .decision.media .media-left {
     display: block;

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/decision.css

@@ -33,12 +33,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;
     }
@@ -50,7 +50,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;
     }
@@ -102,7 +102,7 @@
   color: #5d7079;
   color: var(--color-content-secondary);
 }
-@media (min-width: 480px) {
+@media (min-width: 320px) {
   .decision .media .media-left,
   .decision.media .media-left {
     display: block;

package/src/styles/less/dropdowns.css

@@ -54,7 +54,7 @@
   border-radius: var(--radius-medium);
   box-shadow: 0 0 40px rgba(69, 71, 69, 0.2);
 }
-@media (min-width: 576px) {
+@media (min-width: 600px) {
   .dropdown-menu {
     min-width: 160px;
   }
@@ -176,7 +176,7 @@
   opacity: 1;
   transform: none;
 }
-@media (max-width: 575px) {
+@media (max-width: 599.98px) {
   .open > .dropdown-menu-overlay {
     position: fixed;
     top: 0;
@@ -238,7 +238,7 @@
   right: auto;
   right: initial;
 }
-@media (min-width: 576px) {
+@media (min-width: 600px) {
   .dropdown-menu-sm-right {
     left: auto;
     right: 0;
@@ -268,7 +268,7 @@
     right: initial;
   }
 }
-@media (min-width: 768px) {
+@media (min-width: 840px) {
   .dropdown-menu-md-right {
     left: auto;
     right: 0;
@@ -298,7 +298,7 @@
     right: initial;
   }
 }
-@media (min-width: 992px) {
+@media (min-width: 1160px) {
   .dropdown-menu-lg-right {
     left: auto;
     right: 0;
@@ -328,7 +328,7 @@
     right: initial;
   }
 }
-@media (min-width: 1200px) {
+@media (min-width: 1160px) {
   .dropdown-menu-xl-right {
     left: auto;
     right: 0;
@@ -384,12 +384,12 @@
     hyphens: auto;
     hyphenate-limit-chars: 7 3;
   }
-  @media (min-width: 768px) {
+  @media (min-width: 840px) {
     .dropdown-header {
       hyphenate-limit-chars: 8 3;
     }
   }
-  @media (min-width: 992px) {
+  @media (min-width: 1160px) {
     .dropdown-header {
       hyphenate-limit-chars: 10 4 3;
     }
@@ -401,7 +401,7 @@
     -webkit-hyphenate-limit-before: 3;
     -webkit-hyphenate-limit-after: 3;
   }
-  @media (min-width: 992px) {
+  @media (min-width: 1160px) {
     .dropdown-header {
       -webkit-hyphenate-limit-before: 4;
     }
@@ -437,7 +437,7 @@
   bottom: -2px;
   margin-bottom: 2px;
 }
-@media (min-width: 768px) {
+@media (min-width: 840px) {
   .navbar-right .dropdown-menu {
     left: auto;
     right: 0;

package/src/styles/less/droppable.css

@@ -25,7 +25,7 @@
   border-radius: 0;
   border-radius: initial;
 }
-@media (min-width: 768px) {
+@media (min-width: 840px) {
   .droppable {
     border-style: dashed;
   }
@@ -124,7 +124,7 @@
   max-width: 96px;
   margin: 0 auto;
 }
-@media (min-width: 768px) {
+@media (min-width: 840px) {
   .droppable .thumbnail {
     max-height: 128px;
     max-width: 128px;
@@ -175,12 +175,12 @@
 .droppable-sm {
   padding: 16px 16px;
 }
-@media (min-width: 576px) {
+@media (min-width: 600px) {
   .droppable-sm {
     padding: 24px 16px;
   }
 }
-@media (min-width: 992px) {
+@media (min-width: 1160px) {
   .droppable-sm {
     padding: 32px 24px;
   }
@@ -188,12 +188,12 @@
 .droppable-md {
   padding: 32px 32px;
 }
-@media (min-width: 576px) {
+@media (min-width: 600px) {
   .droppable-md {
     padding: 48px 32px;
   }
 }
-@media (min-width: 992px) {
+@media (min-width: 1160px) {
   .droppable-md {
     padding: 64px 48px;
   }
@@ -201,12 +201,12 @@
 .droppable-lg {
   padding: 48px 48px;
 }
-@media (min-width: 576px) {
+@media (min-width: 600px) {
   .droppable-lg {
     padding: 72px 48px;
   }
 }
-@media (min-width: 992px) {
+@media (min-width: 1160px) {
   .droppable-lg {
     padding: 96px 72px;
   }