@transferwise/components 0.0.0-experimental-5ca6e74 → 0.0.0-experimental-c132c7d

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "0.0.0-experimental-5ca6e74",
+  "version": "0.0.0-experimental-c132c7d",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {
@@ -83,8 +83,8 @@
     "storybook": "^9.1.3",
     "storybook-addon-tag-badges": "^2.0.2",
     "storybook-addon-test-codegen": "^2.0.1",
-    "@transferwise/less-config": "3.1.2",
     "@transferwise/neptune-css": "14.25.0",
+    "@transferwise/less-config": "3.1.2",
     "@wise/components-theming": "1.7.0",
     "@wise/wds-configs": "0.0.0"
   },

package/src/inputs/SelectInput.test.story.tsx

@@ -6,6 +6,7 @@ import { SelectInput, type SelectInputProps } from './SelectInput';
 import { lorem5, lorem500 } from '../test-utils';
 import Body from '../body';
 import { allModes } from '../../.storybook/modes';
+import { MINIMAL_VIEWPORTS } from 'storybook/viewport';
 
 const meta = {
   title: 'Forms/SelectInput/tests',
@@ -30,8 +31,9 @@ const wait = async (duration = 1000) =>
 /**
  * This test ensures that when the SelectInput is used within a scrollable page,
  * opening the dropdown does not cause any unwanted scrolling or layout shifts.
- * Expected snapshot should start with green bar at the top, with yellow section
- * not in the viewport
+ * Expected preview should start with green bar at the top, with yellow section
+ * not in the viewport.
+ * NB: This test is disabled in Chromatic as there's no known way to scroll position.
  */
 export const SmoothScrollReset: Story<string> = {
   args: {
@@ -44,16 +46,15 @@ export const SmoothScrollReset: Story<string> = {
   decorators: [
     (Story) => (
       <>
-        <style>{`html { scroll-behavior: smooth; }`}</style>
-        <a href="#anchor">Jump to SelectInput</a>
-        <div style={{ maxWidth: 400 }}>
+
+        <div style={{ ...MINIMAL_VIEWPORTS.mobile2.styles, overflow: 'scroll' }}>
           <div
             className="d-flex align-items-center justify-content-center"
             style={{ height: 400, backgroundColor: 'var(--color-bright-yellow)' }}
           >
-            This block should not be visible on a snapshot
+            This block should not be in the viewport.
           </div>
-          <div id="anchor" style={{ height: 10, backgroundColor: 'var(--color-bright-green)' }} />
+          <div style={{ height: 10, backgroundColor: 'var(--color-bright-green)' }} />
           <Field id="el1" label={lorem5}>
             <Story />
           </Field>
@@ -63,18 +64,10 @@ export const SmoothScrollReset: Story<string> = {
     ),
   ],
   play: async ({ canvasElement }) => {
-    document.documentElement.style.scrollBehavior = 'unset';
-    await wait(100);
-
+    document.documentElement.scrollTop = 400;
     const canvas = within(canvasElement);
-    await userEvent.click(canvas.getByRole('link'));
-
-    await wait(750);
-    document.documentElement.style.removeProperty('scroll-behavior');
-    await wait(100);
-
     const triggerButton = canvas.getByRole('combobox');
-    await userEvent.click(triggerButton);
+    //await userEvent.click(triggerButton);
   },
   globals: {
     viewport: { value: allModes.largeMobile.viewport, isRotated: false },