@transferwise/components 0.0.0-experimental-99bbbb3 → 0.0.0-experimental-20085a3

package/src/_deprecated/CriticalBanner/_stories/CriticalCommsBanner.rtl.test.story.tsx

@@ -0,0 +1,28 @@
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+import { withRTLDiff } from '../../../../.storybook/decorators/RtlDiffDecorator';
+import CriticalCommsBanner from '..';
+
+export default {
+  component: CriticalCommsBanner,
+  title: 'Prompts/CriticalCommsBanner/Tests',
+  tags: ['!autodocs', '!manifest'],
+} satisfies Meta<typeof CriticalCommsBanner>;
+
+type Story = StoryObj<typeof CriticalCommsBanner>;
+
+export const RTLDiff: Story = {
+  render: () => (
+    <>
+      <CriticalCommsBanner
+        title="Your account is overdrawn"
+        subtitle="Add money within the next 30 days"
+        action={{ label: 'Take action', href: 'https://wise.com' }}
+      />
+      <CriticalCommsBanner
+        title="Your account is overdrawn"
+        subtitle="Add money within the next 30 days"
+      />
+    </>
+  ),
+  ...withRTLDiff(),
+};

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

@@ -0,0 +1,26 @@
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+
+import { withRTLDiff } from '../../../../.storybook/decorators/RtlDiffDecorator';
+import InlineAlert from '..';
+
+export default {
+  component: InlineAlert,
+  title: 'Prompts/InlineAlert/Tests',
+  tags: ['!autodocs', '!manifest'],
+} satisfies Meta<typeof InlineAlert>;
+
+type Story = StoryObj<typeof InlineAlert>;
+
+export const RTLDiff: Story = {
+  render: () => (
+    <>
+      <InlineAlert type="neutral">Neutral alert without icon</InlineAlert>
+      <InlineAlert type="warning">Warning alert with icon</InlineAlert>
+      <InlineAlert type="negative">Negative alert with icon</InlineAlert>
+      <InlineAlert type="positive">
+        Positive alert with icon and longer content that may wrap to multiple lines
+      </InlineAlert>
+    </>
+  ),
+  ...withRTLDiff(),
+};

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

@@ -0,0 +1,42 @@
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+import { Person } from '@transferwise/icons';
+
+import { withRTLDiff } from '../../../../.storybook/decorators/RtlDiffDecorator';
+import AvatarView from '../../../AvatarView';
+import Logo from '../../../Logo';
+import OverlayHeader from '..';
+
+export default {
+  component: OverlayHeader,
+  title: 'Navigation/OverlayHeader/Tests',
+  tags: ['!autodocs', '!manifest'],
+} satisfies Meta<typeof OverlayHeader>;
+
+type Story = StoryObj<typeof OverlayHeader>;
+
+export const RTLDiff: Story = {
+  render: () => (
+    <>
+      <OverlayHeader logo={<Logo />} onClose={() => {}} />
+      <OverlayHeader
+        logo={<Logo />}
+        avatar={
+          <AvatarView>
+            <Person size="24" />
+          </AvatarView>
+        }
+        onClose={() => {}}
+      />
+      <OverlayHeader
+        logo={<Logo />}
+        avatar={
+          <AvatarView>
+            <Person size="24" />
+          </AvatarView>
+        }
+      />
+      <OverlayHeader logo={<Logo />} />
+    </>
+  ),
+  ...withRTLDiff(),
+};

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' }),
+};

package/src/i18n/id.json

@@ -12,10 +12,6 @@
   "neptune.DateLookup.goTo20YearView": "Lihat tampilan 20 tahun",
   "neptune.DateLookup.month": "bulan",
   "neptune.DateLookup.next": "berikutnya",
-  "neptune.DateLookup.notAvailable": "tidak tersedia",
-  "neptune.DateLookup.outOfRangeAfter": "Silakan masukkan {min} atau tanggal yang lebih nanti.",
-  "neptune.DateLookup.outOfRangeBefore": "Silakan masukkan {max} atau tanggal yang lebih awal.",
-  "neptune.DateLookup.outOfRangeBetween": "Silakan pilih tanggal antara {min} dan {max}.",
   "neptune.DateLookup.previous": "sebelumnya",
   "neptune.DateLookup.selected": "terpilih",
   "neptune.DateLookup.twentyYears": "20 tahun",
@@ -50,7 +46,6 @@
   "neptune.Table.loaded": "Data tabel telah dimuat",
   "neptune.Table.loading": "Data tabel sedang dimuat",
   "neptune.Table.refreshPage": "Muat ulang halaman",
-  "neptune.Typeahead.suggestionsLabel": "Saran",
   "neptune.Upload.csButtonText": "Unggah file lainnya?",
   "neptune.Upload.csFailureText": "Unggahan gagal. Silakan coba lagi",
   "neptune.Upload.csSuccessText": "Pengunggahan selesai!",