@transferwise/components 46.119.5 → 46.120.1

package/src/snackbar/Snackbar.tests.story.tsx

@@ -6,8 +6,8 @@ import { SnackbarConsumer } from './SnackbarContext';
 import SnackbarProvider from './SnackbarProvider';
 import Button from '../button';
 import CheckboxOption from '../checkboxOption';
-import { storyConfig } from '../test-utils';
 import { wait } from '../test-utils/wait';
+import { allModes } from '../../.storybook/modes';
 
 export default {
   title: 'Dialogs/Snackbar/Tests',
@@ -66,6 +66,7 @@ const Default = {
 };
 
 export const Basic = {
+  ...Default,
   args: {
     ...Default.args,
     extraContext: (
@@ -99,30 +100,28 @@ export const Basic = {
       </div>
     ) as React.ReactNode,
   },
-  play: Default.play,
-  render: Default.render,
 };
 
-export const Mobile = storyConfig(
-  {
-    args: {
-      ...Default.args,
-      extraContext: (
-        <div className="p-t-3">
-          <CheckboxOption
-            title="In mobile view, snackbar is full-width, not centered"
-            media={<MobileIcon />}
-          />
-        </div>
-      ) as React.ReactNode,
-    },
-    play: Default.play,
-    render: Default.render,
+export const Mobile = {
+  ...Default,
+  args: {
+    ...Default.args,
+    extraContext: (
+      <div className="p-t-3">
+        <CheckboxOption
+          title="In mobile view, snackbar is full-width, not centered"
+          media={<MobileIcon />}
+        />
+      </div>
+    ) as React.ReactNode,
   },
-  {
+  parameters: {
     variants: ['mobile'],
+    chromatic: {
+      mobile: allModes.largeMobile,
+    },
   },
-);
+};
 
 const switchToDarkMode = async (context: { canvasElement: HTMLElement }) => {
   await Default.play(context);
@@ -138,27 +137,28 @@ const switchToDarkMode = async (context: { canvasElement: HTMLElement }) => {
   }
 };
 
-export const DarkMode = storyConfig(
-  {
-    args: {
-      ...Default.args,
-      extraContext: (
-        <div className="p-t-3">
-          <CheckboxOption title="In dark mode, snackbar has no drop shadow" media={<Theme />} />
-          <CheckboxOption
-            title="In dark mode, snackbar is inverted and has light background"
-            media={<Theme />}
-          />
-        </div>
-      ) as React.ReactNode,
-    },
-    play: switchToDarkMode,
-    render: Default.render,
+export const DarkMode = {
+  ...Default,
+  args: {
+    ...Default.args,
+    extraContext: (
+      <div className="p-t-3">
+        <CheckboxOption title="In dark mode, snackbar has no drop shadow" media={<Theme />} />
+        <CheckboxOption
+          title="In dark mode, snackbar is inverted and has light background"
+          media={<Theme />}
+        />
+      </div>
+    ) as React.ReactNode,
   },
-  {
+  play: switchToDarkMode,
+  parameters: {
     variants: ['dark'],
+    chromatic: {
+      dark: allModes.dark,
+    },
   },
-);
+};
 
 const switchToRTL = async (context: { canvasElement: HTMLElement }) => {
   await Default.play(context);
@@ -173,94 +173,97 @@ const switchToRTL = async (context: { canvasElement: HTMLElement }) => {
   }
 };
 
-export const RTL = storyConfig(
-  {
-    args: {
-      ...Default.args,
-      extraContext: (
-        <div className="p-t-3">
-          <CheckboxOption
-            title="In RTL, snackbar is not left aligned"
-            content={
-              <a
-                href="https://transferwise.atlassian.net/browse/DS-4642"
-                target="_blank"
-                rel="noreferrer"
-              >
-                Bug DS-4642
-              </a>
-            }
-            media={<Switch />}
-          />
-          <CheckboxOption
-            title="In RTL, snackbar has proper padding on left and right of button"
-            content={
-              <a
-                href="https://transferwise.atlassian.net/browse/DS-4643"
-                target="_blank"
-                rel="noreferrer"
-              >
-                Bug DS-4643
-              </a>
-            }
-            media={<Switch />}
-          />
-        </div>
-      ) as React.ReactNode,
-    },
-    play: switchToRTL,
-    render: Default.render,
+export const RTL = {
+  ...Default,
+  args: {
+    ...Default.args,
+    extraContext: (
+      <div className="p-t-3">
+        <CheckboxOption
+          title="In RTL, snackbar is not left aligned"
+          content={
+            <a
+              href="https://transferwise.atlassian.net/browse/DS-4642"
+              target="_blank"
+              rel="noreferrer"
+            >
+              Bug DS-4642
+            </a>
+          }
+          media={<Switch />}
+        />
+        <CheckboxOption
+          title="In RTL, snackbar has proper padding on left and right of button"
+          content={
+            <a
+              href="https://transferwise.atlassian.net/browse/DS-4643"
+              target="_blank"
+              rel="noreferrer"
+            >
+              Bug DS-4643
+            </a>
+          }
+          media={<Switch />}
+        />
+      </div>
+    ) as React.ReactNode,
   },
-  {
+  play: switchToRTL,
+  parameters: {
     variants: ['rtl'],
+    chromatic: {
+      rtl: allModes.rtl,
+    },
   },
-);
+};
 
-export const RTLMobile = storyConfig(
-  {
-    args: {
-      ...RTL.args,
-    },
-    play: switchToRTL,
-    render: Default.render,
+export const RTLMobile = {
+  ...Default,
+  args: {
+    ...RTL.args,
   },
-  {
+  play: switchToRTL,
+  parameters: {
     variants: ['rtl', 'mobile'],
-  },
-);
-
-export const Zoom400 = storyConfig(
-  {
-    args: {
-      ...Default.args,
-      extraContext: (
-        <div className="p-t-3">
-          <CheckboxOption
-            content="Snackbar isn't transparent (I'm going to make this text very long so that it will fill up the entire page and go behind the snackbar. This way, when you look at it you will easily be able to tell if the snackbar is transparent and recognize the bug because we don't want it to be transparent. Transparent is bad. When we first did rebrand we had a lot of problems with transparencies. I don't know what happened to them. I don't see them a lot anymore but I also don't remember anybody fixing them.)"
-            title={
-              <a
-                href="https://transferwise.atlassian.net/browse/DS-3716"
-                target="_blank"
-                rel="noreferrer"
-              >
-                Bug DS-3716
-              </a>
-            }
-            media={<Coins />}
-          />
-        </div>
-      ),
+    chromatic: {
+      rtl: allModes.rtl,
+      mobile: allModes.largeMobile,
     },
+  },
+};
 
-    play: Default.play,
-    render: Default.render,
+export const Zoom400 = {
+  ...Default,
+  args: {
+    ...Default.args,
+    extraContext: (
+      <div className="p-t-3">
+        <CheckboxOption
+          content="Snackbar isn't transparent (I'm going to make this text very long so that it will fill up the entire page and go behind the snackbar. This way, when you look at it you will easily be able to tell if the snackbar is transparent and recognize the bug because we don't want it to be transparent. Transparent is bad. When we first did rebrand we had a lot of problems with transparencies. I don't know what happened to them. I don't see them a lot anymore but I also don't remember anybody fixing them.)"
+          title={
+            <a
+              href="https://transferwise.atlassian.net/browse/DS-3716"
+              target="_blank"
+              rel="noreferrer"
+            >
+              Bug DS-3716
+            </a>
+          }
+          media={<Coins />}
+        />
+      </div>
+    ),
   },
-  {
+  parameters: {
     variants: ['400%'],
+    chromatic: {
+      zoom400: allModes.zoom400,
+    },
   },
-);
+};
 
 export const MultipleClicks = {
+  ...Default,
   args: {
     ...Default.args,
     extraContext: (
@@ -278,5 +281,4 @@ export const MultipleClicks = {
       await userEvent.click(canvas.getByRole('button'));
     }
   },
-  render: Default.render,
 };

package/src/statusIcon/StatusIcon.story.tsx

@@ -3,7 +3,7 @@ import { Meta, StoryObj } from '@storybook/react-webpack5';
 import { Sentiment, Size, Status } from '../common';
 
 import StatusIcon, { StatusIconSentiment } from './StatusIcon';
-import { storyConfig } from '../test-utils';
+import { allModes } from '../../.storybook/modes';
 
 export default {
   component: StatusIcon,
@@ -29,45 +29,48 @@ export const Presentational: Story = {
   },
 };
 
-export const Variants = storyConfig(
-  {
-    parameters: {
-      padding: '0',
+export const Variants: Story = {
+  parameters: {
+    padding: '0',
+    variants: ['default', 'dark', 'bright-green', 'forest-green'],
+    chromatic: {
+      dark: allModes.dark,
+      brightGreen: allModes.brightGreen,
+      forestGreen: allModes.forestGreen,
     },
-    render: () => (
-      <span style={{ display: 'flex', justifyContent: 'space-between', maxWidth: '400px' }}>
-        {[
-          Sentiment.POSITIVE,
-          Sentiment.NEGATIVE,
-          Sentiment.WARNING,
-          Sentiment.NEUTRAL,
-          Sentiment.PENDING,
-          Status.PENDING,
-        ].map((sentiment) => {
-          return (
-            <span
-              key={sentiment}
-              style={{
-                display: 'flex',
-                justifyContent: 'space-between',
-                flexDirection: 'column',
-                minHeight: '150px',
-                alignItems: 'center',
-              }}
-            >
-              {([16, 24, 32, 40, 48, 56, 72] as const).map((size) => {
-                return (
-                  <StatusIcon key={size} size={size} sentiment={sentiment as StatusIconSentiment} />
-                );
-              })}
-            </span>
-          );
-        })}
-      </span>
-    ),
   },
-  { variants: ['default', 'dark', 'bright-green', 'forest-green'] },
-);
+  render: () => (
+    <span style={{ display: 'flex', justifyContent: 'space-between', maxWidth: '400px' }}>
+      {[
+        Sentiment.POSITIVE,
+        Sentiment.NEGATIVE,
+        Sentiment.WARNING,
+        Sentiment.NEUTRAL,
+        Sentiment.PENDING,
+        Status.PENDING,
+      ].map((sentiment) => {
+        return (
+          <span
+            key={sentiment}
+            style={{
+              display: 'flex',
+              justifyContent: 'space-between',
+              flexDirection: 'column',
+              minHeight: '150px',
+              alignItems: 'center',
+            }}
+          >
+            {([16, 24, 32, 40, 48, 56, 72] as const).map((size) => {
+              return (
+                <StatusIcon key={size} size={size} sentiment={sentiment as StatusIconSentiment} />
+              );
+            })}
+          </span>
+        );
+      })}
+    </span>
+  ),
+};
 
 export const LegacySizes: Story = {
   render: () => (

package/src/test-utils/index.tsx

@@ -1,6 +1,5 @@
 import { ReactElement, FC } from 'react';
 import { render, renderHook } from '@testing-library/react';
-import { renderToString } from 'react-dom/server';
 import { userEvent } from '@testing-library/user-event';
 
 import { Provider } from '..';
@@ -37,6 +36,5 @@ function customRenderHook(
 
 export * from '@testing-library/react';
 export * from './fake-data';
-export * from './story-config';
 export * from './window-mock';
 export { customRender as render, customRenderHook as renderHook, userEvent };

package/src/tokens/tokens.story.tsx

@@ -8,7 +8,7 @@ import Body from '../body';
 
 const meta: Meta = {
   title: 'Foundations/tokens',
-  tags: ['!autodocs'],
+  tags: ['!autodocs', '!manifest'],
 };
 
 export default meta;

package/src/tooltip/Tooltip.story.tsx

@@ -2,9 +2,9 @@ import { Meta, StoryObj } from '@storybook/react-webpack5';
 import { userEvent, within } from 'storybook/test';
 
 import Button from '../button';
-import { storyConfig } from '../test-utils';
 
 import Tooltip from './Tooltip';
+import { allModes } from '../../.storybook/modes';
 
 export default {
   component: Tooltip,
@@ -38,4 +38,12 @@ export const OpenedTooltip: Story = {
   },
 };
 
-export const OpenedTooltipDark: Story = storyConfig(OpenedTooltip, { variants: ['dark'] });
+export const OpenedTooltipDark: Story = {
+  ...OpenedTooltip,
+  parameters: {
+    variants: ['dark'],
+    chromatic: {
+      dark: allModes.dark,
+    },
+  },
+};

package/src/typeahead/Typeahead.css

@@ -103,6 +103,10 @@
   padding: 0;
   margin: 0;
 }
+.typeahead--prompt {
+  margin-top: 4px;
+  margin-top: var(--size-4);
+}
 .typeahead-sm.typeahead--multiple .typeahead__input-container {
   min-height: 32px;
 }

package/src/typeahead/Typeahead.less

@@ -122,6 +122,10 @@
     }
   }
 
+  &--prompt {
+    margin-top: var(--size-4);
+  }
+
   // SIZES
   &-sm {
     &.typeahead--multiple {
@@ -207,7 +211,7 @@
   }
 
   .np-theme-personal & {
-    .input-group:not(.disabled,:disabled,.input-group--has-error):focus-within .tw-icon-search {
+    .input-group:not(.disabled, :disabled, .input-group--has-error):focus-within .tw-icon-search {
       color: var(--color-interactive-primary);
     }
     .tw-icon-search {

package/src/typeahead/Typeahead.spec.tsx

@@ -102,7 +102,7 @@ describe('Typeahead', () => {
     expect(onChange).toHaveBeenCalledWith([]);
   });
 
-  it('shows InlineAlert when alert prop is provided', () => {
+  it('shows InlinePrompt when alert prop is provided', () => {
     render(
       <Typeahead
         id="test"

package/src/typeahead/Typeahead.story.tsx

@@ -1,15 +1,18 @@
 import { Meta, StoryObj } from '@storybook/react-webpack5';
 import { Search as SearchIcon } from '@transferwise/icons';
 import { userEvent, within, fn } from 'storybook/test';
-
-import Typeahead, { type TypeaheadOption } from './Typeahead';
-import { Size } from '../common';
 import { useState } from 'react';
+
+import { Sentiment, Size } from '../common';
 import { Input } from '../inputs/Input';
 import { Field } from '../field/Field';
 import Button from '../button';
 import Modal from '../modal';
+import { InlinePromptProps } from '../prompt';
+import Typeahead, { type TypeaheadOption } from './Typeahead';
 
+// needed for SB to display correct name in the docs
+(Typeahead as React.FC).displayName = 'Typeahead';
 type Story = StoryObj<typeof Typeahead>;
 
 /**
@@ -37,6 +40,7 @@ const meta: Meta<typeof Typeahead> = {
     searchDelay: 200,
     showSuggestions: true,
     showNewEntry: true,
+    alert: undefined,
     size: Size.MEDIUM,
     initialValue: [],
     id: 'myTypeahead',
@@ -54,6 +58,17 @@ const meta: Meta<typeof Typeahead> = {
       control: 'inline-radio',
       options: [Size.MEDIUM, Size.LARGE],
     },
+    alert: {
+      description:
+        'Displays an [InlinePrompt](?path=/docs/prompts-inlineprompt--docs) below the input when provided. <blockquote class="m-0">**⚠️ DEPRECATED:** Please use [&lt;Field />](?path=/docs/forms-field--docs) component and its `message` and `sentiment` props instead. `error`, `info` and `success` alert types are no longer supported and will be soon removed.</blockquote>',
+      control: 'object',
+      table: {
+        type: {
+          summary:
+            '{ message: ReactNode; type?: "negative" | "neutral" | "positive" | "warning" | "proposition" }',
+        },
+      },
+    },
   },
 };
 export default meta;
@@ -237,6 +252,14 @@ 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 (
@@ -279,3 +302,128 @@ export const AutoFocusInModal: Story = {
     );
   },
 };
+
+export const WithField: Story = {
+  args: {
+    autoFillOnBlur: undefined,
+    chipSeparators: undefined,
+    clearable: undefined,
+    initialValue: undefined,
+    inputAutoComplete: undefined,
+    minQueryLength: undefined,
+    onBlur: undefined,
+    onFocus: undefined,
+    onInputChange: undefined,
+    onSearch: undefined,
+    placeholder: undefined,
+    searchDelay: undefined,
+    showSuggestions: undefined,
+    showNewEntry: undefined,
+    size: undefined,
+  },
+  render: function Render(args) {
+    const options = [{ label: 'Option 1' }];
+
+    const alertTypes: InlinePromptProps['sentiment'][] = [
+      Sentiment.NEGATIVE,
+      Sentiment.WARNING,
+      Sentiment.NEUTRAL,
+      Sentiment.POSITIVE,
+      'proposition',
+    ];
+
+    return (
+      <>
+        <Field
+          id="typeahead"
+          label="Field label"
+          description="Additional information about the field"
+          required
+        >
+          <Typeahead {...args} name="typeahead" options={options} />
+        </Field>
+        {alertTypes.map((sentiment) => (
+          <Field
+            key={sentiment}
+            label="Field label"
+            id={`typeahead-${sentiment}`}
+            message={`This is a ${sentiment} message`}
+            sentiment={sentiment}
+          >
+            <Typeahead {...args} name={`typeahead-${sentiment}`} options={options} />
+          </Field>
+        ))}
+      </>
+    );
+  },
+  decorators: (Story) => (
+    <div className="d-flex flex-column">
+      <Story />
+    </div>
+  ),
+};
+
+/**
+ * > **⚠️ DEPRECATED:** Please use [&lt;Field />](?path=/docs/forms-field--docs) component and its `message` and `sentiment` props instead. <br/>`error`, `info` and `success` alert types are no longer supported and will be soon removed.
+ */
+export const WithAlert: Story = {
+  name: 'With Alert (deprecated)',
+  args: {
+    autoFillOnBlur: undefined,
+    chipSeparators: undefined,
+    clearable: undefined,
+    initialValue: undefined,
+    inputAutoComplete: undefined,
+    minQueryLength: undefined,
+    onBlur: undefined,
+    onFocus: undefined,
+    onInputChange: undefined,
+    onSearch: undefined,
+    placeholder: undefined,
+    searchDelay: undefined,
+    showSuggestions: undefined,
+    showNewEntry: undefined,
+    size: undefined,
+  },
+  parameters: {
+    docs: {
+      canvas: {
+        sourceState: 'hidden',
+      },
+    },
+  },
+  render: function Render(args) {
+    const options = [{ label: 'Option 1' }];
+
+    const alertTypes: InlinePromptProps['sentiment'][] = [
+      Sentiment.NEGATIVE,
+      Sentiment.WARNING,
+      Sentiment.NEUTRAL,
+      Sentiment.POSITIVE,
+      'proposition',
+    ];
+
+    return (
+      <>
+        {alertTypes.map((sentiment) => (
+          <Typeahead
+            key={sentiment}
+            {...args}
+            id={`typeahead-${sentiment}`}
+            name={`typeahead-${sentiment}`}
+            options={options}
+            alert={{
+              message: `This is a ${sentiment} message`,
+              type: sentiment,
+            }}
+          />
+        ))}
+      </>
+    );
+  },
+  decorators: (Story) => (
+    <div className="d-flex flex-column">
+      <Story />
+    </div>
+  ),
+};