@transferwise/components 46.132.0 → 46.133.0

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

@@ -1,13 +1,12 @@
-import { userEvent, within } from 'storybook/test';
+import { userEvent, within, expect } from 'storybook/test';
 import { action } from 'storybook/actions';
-import { Mobile as MobileIcon, Theme, Switch, Bulb, Info, Coins, Team } from '@transferwise/icons';
+import { withVariantConfig } from '../../.storybook/helpers';
+import { lorem20 } from '../test-utils';
+import { wait } from '../test-utils/wait';
+import Button from '../button';
 import { Snackbar, type SnackbarProps } from './Snackbar';
 import { SnackbarConsumer } from './SnackbarContext';
 import SnackbarProvider from './SnackbarProvider';
-import Button from '../button';
-import CheckboxOption from '../checkboxOption';
-import { wait } from '../test-utils/wait';
-import { withVariantConfig } from '../../.storybook/helpers';
 
 export default {
   title: 'Dialogs/Snackbar/Tests',
@@ -43,6 +42,7 @@ const Default = {
           {({ createSnackbar }) => (
             <>
               <Button
+                v2
                 block
                 onClick={() => {
                   createSnackbar({
@@ -69,36 +69,6 @@ export const Basic = {
   ...Default,
   args: {
     ...Default.args,
-    extraContext: (
-      <div className="p-t-3">
-        <CheckboxOption
-          title="In light mode, snackbar has drop shadow"
-          content={
-            <a
-              href="https://transferwise.atlassian.net/browse/DS-4477"
-              target="_blank"
-              rel="noreferrer"
-            >
-              Bug DS-4477
-            </a>
-          }
-          media={<Bulb />}
-        />
-        <CheckboxOption
-          title="Font size is 14 px, not 16px"
-          content={
-            <a
-              href="https://transferwise.atlassian.net/browse/DS-3716"
-              target="_blank"
-              rel="noreferrer"
-            >
-              Bug DS-3716
-            </a>
-          }
-          media={<Info size="16" />}
-        />
-      </div>
-    ) as React.ReactNode,
   },
 };
 
@@ -106,14 +76,6 @@ 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,
   },
   ...withVariantConfig(['mobile'], Default),
 };
@@ -136,15 +98,6 @@ 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,
   ...withVariantConfig(['dark'], Default),
@@ -167,36 +120,6 @@ 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,
   ...withVariantConfig(['rtl'], Default),
@@ -217,42 +140,31 @@ export const Zoom400 = {
     ...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 />}
-        />
+        Snackbar isn&#39;t transparent (I&#39;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&#39;t want it to be transparent. Transparent is bad. When we first did rebrand we had a
+        lot of problems with transparencies. {lorem20}
       </div>
     ),
   },
   ...withVariantConfig(['400%'], Default),
 };
 
+/**
+ * Snackbar is only shown once even if trigger is clicked many times
+ */
 export const MultipleClicks = {
   ...Default,
   args: {
     ...Default.args,
-    extraContext: (
-      <div className="p-t-3">
-        <CheckboxOption
-          title="Snackbar is only shown once even if clicked many times"
-          media={<Team />}
-        />
-      </div>
-    ),
   },
   play: async ({ canvasElement }: { canvasElement: HTMLElement }) => {
     const canvas = within(canvasElement);
     for (let i = 0; i < 8; i += 1) {
       await userEvent.click(canvas.getByRole('button'));
     }
+
+    await expect(within(document.body).getAllByRole('alert')).toHaveLength(1);
   },
 };

package/src/summary/Summary.story.tsx

@@ -6,7 +6,7 @@ import { InfoPresentation } from '../info';
 import Summary, { type Props as SummaryProps } from './Summary';
 
 /**
- * > ⚠️ This component is **deprecated** and superseded by the [new ListItem component](?path=/docs/content-listitem--docs).
+ * > ⚠️ This component is **deprecated** and superseded by the [new ListItem component](?path=/docs/content-listitem--docs) (run codemod to migrate: **`npx @wise/wds-codemods@latest list-item`**).
  */
 export default {
   component: Summary,

package/src/summary/Summary.test.story.tsx

@@ -5,7 +5,7 @@ import Summary, { type SummaryProps } from '.';
 export default {
   component: Summary,
   title: 'Content/Summary/Tests',
-  tags: ['deprecated', '!manifest'],
+  tags: ['!manifest', 'deprecated'],
 };
 
 export const LongText = () => {

package/src/summary/Summary.tsx

@@ -94,7 +94,7 @@ export interface Props {
 }
 
 /**
- * @deprecated Use `<ListItem />` instead.
+ * @deprecated Use `<ListItem />` instead (run codemod to migrate: **`npx @wise/wds-codemods@latest list-item`**).
  * @deprecatedSince 46.104.0
  * @see [Source](../listItem/ListItem.tsx)
  * @see [Storybook](https://storybook.wise.design/?path=/docs/content-listitem--docs)

package/src/switchOption/SwitchOption.story.tsx

@@ -7,7 +7,8 @@ import { Nudge, Title, Typography } from '..';
 import SwitchOption, { type SwitchOptionProps } from './SwitchOption';
 
 /**
- * > ⚠️ This component is **deprecated** and superseded by the [new ListItem component](?path=/docs/content-listitem--docs) with the [ListItem.Switch control](?path=/docs/content-listitem-listitem-switch--docs).
+ * > ⚠️ This component is **deprecated** and superseded by the [new ListItem component](?path=/docs/content-listitem--docs) with the [ListItem.Switch control](?path=/docs/content-listitem-listitem-switch--docs)
+ * (run codemod to migrate: **`npx @wise/wds-codemods@latest list-item`**).
  */
 const meta = {
   component: SwitchOption,
@@ -45,7 +46,6 @@ function Template(args: SwitchOptionProps) {
 
 export const Playground = {
   render: (args: SwitchOptionProps) => <Template {...args} />,
-  tags: ['!autodocs'],
 };
 
 export const Multiple = {

package/src/switchOption/SwitchOption.tsx

@@ -27,7 +27,7 @@ const stopPropagation = (event?: MouseEvent<HTMLSpanElement>) => {
 };
 
 /**
- * @deprecated Use `<ListItem />` instead.
+ * @deprecated Use `<ListItem />` instead (run codemod to migrate: **`npx @wise/wds-codemods@latest list-item`**).
  * @deprecatedSince 46.104.0
  * @see [Source](../listItem/ListItem.tsx)
  * @see [Storybook](https://storybook.wise.design/?path=/docs/content-listitem--docs)