@transferwise/components 0.0.0-experimental-5f7dae1 → 0.0.0-experimental-20085a3

package/src/_deprecated/Select/_stories/Select.rtl.test.story.tsx

@@ -0,0 +1,71 @@
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+import { userEvent, within } from 'storybook/test';
+import { Person } from '@transferwise/icons';
+
+import { withRTLDiff } from '../../../../.storybook/decorators/RtlDiffDecorator';
+import Select from '..';
+
+export default {
+  component: Select,
+  title: 'Forms/Select/Tests/RTL Diff',
+  tags: ['!autodocs', '!manifest'],
+} satisfies Meta<typeof Select>;
+
+type Story = StoryObj<typeof Select>;
+
+const options = [
+  { header: 'Popular' },
+  { value: 'gbp', label: 'British pound', currency: 'gbp', icon: <Person /> },
+  { value: 'eur', label: 'Euro', currency: 'eur', icon: <Person /> },
+  { value: 'usd', label: 'US Dollar', currency: 'usd', note: 'United States dollar' },
+  { separator: true },
+  { header: 'Other' },
+  { value: 'cad', label: 'Canadian dollar', currency: 'cad' },
+  { value: 'aud', label: 'Australian dollar', currency: 'aud' },
+];
+
+const selected = { value: 'gbp', label: 'British pound', currency: 'gbp', icon: <Person /> };
+
+export const TriggerVariants: Story = {
+  render: () => (
+    <>
+      <Select
+        size="lg"
+        placeholder="Select currency"
+        selected={selected}
+        options={options}
+        onChange={() => {}}
+      />
+      <Select
+        size="md"
+        placeholder="Select currency"
+        selected={selected}
+        options={options}
+        onChange={() => {}}
+      />
+      <Select size="sm" placeholder="Select currency" options={options} onChange={() => {}} />
+    </>
+  ),
+  ...withRTLDiff(),
+};
+
+export const OpenDropdown: Story = {
+  render: () => (
+    <Select
+      size="lg"
+      search
+      searchPlaceholder="Type a currency"
+      placeholder="Select currency"
+      selected={selected}
+      options={options}
+      onChange={() => {}}
+    />
+  ),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const trigger = canvas.queryByRole('button');
+    if (!trigger) return;
+    await userEvent.click(trigger);
+  },
+  ...withRTLDiff({ renderAs: 'iframe', width: '80%' }),
+};

package/src/common/BottomSheet/_stories/BottomSheet.rtl.test.story.tsx

@@ -0,0 +1,39 @@
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+import { FastFlag } from '@transferwise/icons';
+
+import { withRTLDiff } from '../../../../.storybook/decorators/RtlDiffDecorator';
+import { lorem10 } from '../../../test-utils';
+import ListItem from '../../../ListItem';
+import Title from '../../../Title/Title';
+import { Typography } from '../../PropsValues/typography';
+import BottomSheet from '../BottomSheet';
+
+export default {
+  component: BottomSheet,
+  title: 'Dialogs/BottomSheet/Tests',
+  tags: ['!autodocs', '!manifest'],
+} satisfies Meta<typeof BottomSheet>;
+
+type Story = StoryObj<typeof BottomSheet>;
+
+export const RTLDiff: Story = {
+  render: () => (
+    <BottomSheet open aria-label="Manage your card">
+      <Title type={Typography.TITLE_SECTION}>Money without borders</Title>
+      {lorem10}
+      <br />
+      <br />
+      <ListItem
+        title="List item"
+        subtitle="Button and icon are vertically centered."
+        control={<ListItem.Navigation href="#" />}
+        media={
+          <ListItem.AvatarView>
+            <FastFlag />
+          </ListItem.AvatarView>
+        }
+      />
+    </BottomSheet>
+  ),
+  ...withRTLDiff({ renderAs: 'iframe' }),
+};