@transferwise/components 0.0.0-experimental-09066ec → 0.0.0-experimental-148ffef

package/src/typeahead/Typeahead.story.tsx

@@ -251,58 +251,6 @@ export const Search: Story = {
   },
 };
 
-export const AutoFocusInModal: Story = {
-  parameters: {
-    docs: {
-      story: {
-        inline: false,
-        iframeHeight: 500,
-      },
-    },
-  },
-  render: function Render() {
-    const [open, setOpen] = useState<boolean>(true);
-    return (
-      <>
-        <Button v2 onClick={() => setOpen(true)}>
-          Open Modal
-        </Button>
-        <Modal
-          title="Global Search"
-          body={
-            <Typeahead
-              id="typeahead"
-              name="search-input"
-              // eslint-disable-next-line jsx-a11y/no-autofocus
-              autoFocus
-              size="md"
-              showSuggestions
-              showNewEntry={false}
-              addon={<SearchIcon size={24} />}
-              options={[
-                { label: 'Option 1' },
-                { label: 'Option 2' },
-                { label: 'Option 3' },
-                { label: 'Option 4' },
-              ]}
-              inputAutoComplete="off"
-              onSearch={(search) => {
-                console.log(search);
-              }}
-              onChange={(option) => {}}
-              onBlur={() => {}}
-            />
-          }
-          open={open}
-          onClose={() => {
-            setOpen(false);
-          }}
-        />
-      </>
-    );
-  },
-};
-
 export const WithField: Story = {
   args: {
     autoFillOnBlur: undefined,

package/src/typeahead/Typeahead.test.story.tsx

@@ -0,0 +1,73 @@
+import { Meta, StoryObj } from '@storybook/react-webpack5';
+import { Search as SearchIcon } from '@transferwise/icons';
+import { useState } from 'react';
+
+import Button from '../button';
+import Modal from '../modal';
+import Typeahead from './Typeahead';
+
+// needed for SB to display correct name in the docs
+(Typeahead as React.FC).displayName = 'Typeahead';
+type Story = StoryObj<typeof Typeahead>;
+
+const meta: Meta<typeof Typeahead> = {
+  component: Typeahead,
+  title: 'Forms/Typeahead/Tests',
+  tags: ['!autodocs', '!manifest'],
+};
+export default meta;
+
+export const AutoFocusInModal: Story = {
+  parameters: {
+    docs: {
+      story: {
+        inline: false,
+        iframeHeight: 500,
+      },
+    },
+    chromatic: {
+      delay: 1000,
+    },
+  },
+  render: function Render(args, { viewMode }) {
+    const [open, setOpen] = useState<boolean>(viewMode !== 'docs');
+    return (
+      <>
+        <Button v2 onClick={() => setOpen(true)}>
+          Open Modal
+        </Button>
+        <Modal
+          title="Global Search"
+          body={
+            <Typeahead
+              id="typeahead"
+              name="search-input"
+              // eslint-disable-next-line jsx-a11y/no-autofocus
+              autoFocus
+              size="md"
+              showSuggestions
+              showNewEntry={false}
+              addon={<SearchIcon size={24} />}
+              options={[
+                { label: 'Option 1' },
+                { label: 'Option 2' },
+                { label: 'Option 3' },
+                { label: 'Option 4' },
+              ]}
+              inputAutoComplete="off"
+              onSearch={(search) => {
+                console.log(search);
+              }}
+              onChange={(option) => {}}
+              onBlur={() => {}}
+            />
+          }
+          open={open}
+          onClose={() => {
+            setOpen(false);
+          }}
+        />
+      </>
+    );
+  },
+};