@transferwise/components 0.0.0-experimental-9513a35 → 0.0.0-experimental-6a3d904

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "0.0.0-experimental-9513a35",
+  "version": "0.0.0-experimental-6a3d904",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {

package/src/Chips/_stories/Chips.test.story.tsx

@@ -163,7 +163,7 @@ export const RTLDiff: Story = {
       <>
         {/* Choice mode: chip row order reverses in RTL */}
         <Chips
-          chips={amountChips}
+          chips={amountChips.toSpliced(0, 1)}
           selected={300}
           multiple={false}
           aria-label={i18n.transferAmount}

package/src/DefinitionList/_stories/DefinitionList.test.story.tsx

@@ -203,7 +203,7 @@ export const RTLDiff: Story = {
     ];
 
     return (
-      <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--size-48)' }}>
+      <div>
         {layouts.map((layout) => (
           <section key={layout}>
             <h3 style={{ fontSize: 14, margin: '0 0 var(--size-8)' }}>{layout}</h3>
@@ -222,6 +222,7 @@ export const RTLDiff: Story = {
     );
   },
   ...withRTLDiff({
+    fixedRows: { heights: [8, 11, 8, 8, 8, 10, 12, 8, 8, 8] },
     i18n: {
       fullName: { en: 'Full name', ar: 'الاسم الكامل' },
       customerName: { en: 'Alice Smith', ar: 'أليس سميث' },

package/src/Header/_stories/Header.test.story.tsx

@@ -134,7 +134,7 @@ export const RTLDiff: Story = {
   render: () => {
     const i18n = useRtlDiffI18n();
     return (
-      <>
+      <div>
         <Header title={i18n.groupWithoutAction} level="group" />
         <Header
           title={i18n.groupWithAction}
@@ -147,10 +147,11 @@ export const RTLDiff: Story = {
           level="section"
           action={{ 'aria-label': i18n.learnMore, text: i18n.learnMore, href: '#' }}
         />
-      </>
+      </div>
     );
   },
   ...withRTLDiff({
+    fixedRows: { heights: [4, 4, 5, 5], hideSeparators: true },
     i18n: {
       groupWithoutAction: { en: 'Group level without action', ar: 'مستوى المجموعة بدون إجراء' },
       groupWithAction: { en: 'Group level with action', ar: 'مستوى المجموعة مع إجراء' },

package/src/InstructionsList/_stories/InstructionsList.test.story.tsx

@@ -15,7 +15,7 @@ export const RTLDiff: Story = {
   render: () => {
     const i18n = useRtlDiffI18n();
     return (
-      <>
+      <div style={{ display: 'grid', width: '100%', gridTemplateRows: '8lh auto' }}>
         <InstructionsList
           dos={[i18n.initialTransfer, i18n.inviteFriends]}
           donts={[i18n.hiddenFees, i18n.badExchangeRate]}
@@ -26,7 +26,7 @@ export const RTLDiff: Story = {
           donts={[i18n.shareCredentials]}
           sort="dontsFirst"
         />
-      </>
+      </div>
     );
   },
   ...withRTLDiff({

package/src/ListItem/_stories/ListItem.rtl.test.story.tsx

@@ -125,7 +125,16 @@ export default {
   component: ListItem,
   title: 'Content/ListItem/Tests/RTL Diff',
   tags: ['!autodocs', '!manifest'],
-  ...withRTLDiff({ width: 'stretch', i18n: i18nMap }),
+  ...withRTLDiff({
+    width: 'stretch',
+    i18n: i18nMap,
+    fixedRows: {
+      heights: [
+        4, 6, 4, 6, 7, 5, 7, 5, 5, 7, 5, 5, 5, 5, 13, 5, 5, 8, 4, 7, 7, 6, 7, 5, 9, 5, 5, 5, 5, 5,
+        5, 5, 6, 6, 6, 14, 8, 8, 8, 8, 8, 8,
+      ],
+    },
+  }),
 } satisfies Meta<ListItemProps>;
 
 const Default = {

package/src/Tabs/_stories/Tabs.test.story.tsx

@@ -39,8 +39,8 @@ export const RTLDiff: Story = {
     ];
 
     return (
-      <>
-        <div style={{ marginBottom: 32 }}>
+      <div>
+        <div>
           <h4>{i18n.blockFirstSelected}</h4>
           <Tabs
             name="rtl-block-first"
@@ -50,7 +50,7 @@ export const RTLDiff: Story = {
             onTabSelect={() => {}}
           />
         </div>
-        <div style={{ marginBottom: 32 }}>
+        <div>
           <h4>{i18n.blockSecondSelected}</h4>
           <Tabs
             name="rtl-block-second"
@@ -60,7 +60,7 @@ export const RTLDiff: Story = {
             onTabSelect={() => {}}
           />
         </div>
-        <div style={{ marginBottom: 32 }}>
+        <div>
           <h4>{i18n.autoFirstSelected}</h4>
           <Tabs
             name="rtl-auto-first"
@@ -70,7 +70,7 @@ export const RTLDiff: Story = {
             onTabSelect={() => {}}
           />
         </div>
-        <div style={{ marginBottom: 32 }}>
+        <div>
           <h4>{i18n.autoSecondSelected}</h4>
           <Tabs
             name="rtl-auto-second"
@@ -80,10 +80,11 @@ export const RTLDiff: Story = {
             onTabSelect={() => {}}
           />
         </div>
-      </>
+      </div>
     );
   },
   ...withRTLDiff({
+    fixedRows: { heights: [8, 8, 8, 8] },
     i18n: {
       firstTab: { en: 'First tab', ar: 'التبويب الأول' },
       secondTab: { en: 'Second tab', ar: 'التبويب الثاني' },

package/src/Upload/_stories/Upload.rtl.test.story.tsx

@@ -21,9 +21,15 @@ export const Sizes: Story = {
     const i18n = useRtlDiffI18n();
     return (
       <>
-        <Upload usLabel={i18n.smallUpload} size="sm" />
-        <Upload usLabel={i18n.mediumUpload} size="md" />
-        <Upload usLabel={i18n.largeUpload} size="lg" />
+        <div>
+          <Upload usLabel={i18n.smallUpload} size="sm" />
+        </div>
+        <div>
+          <Upload usLabel={i18n.mediumUpload} size="md" />
+        </div>
+        <div>
+          <Upload usLabel={i18n.largeUpload} size="lg" />
+        </div>
       </>
     );
   },