@transferwise/components 46.165.4 → 46.166.0

package/src/Accordion/Accordion.less

@@ -17,7 +17,8 @@
 
   &.np-accordion-item--dark {
     .media-body,
-    .np-text-title-body {
+    .np-text-title-body,
+    .wds-text-title-body {
       color: @color-navy-content-primary;
     }
   }
@@ -35,7 +36,7 @@
 
   .np-option {
     .np-option__title {
-      font-weight: var(--font-weight-semi-bold);
+      font-weight: var(--wds-font-weight-body-bold);
     }
   }
 
@@ -57,15 +58,15 @@
     }
 
     .decision__title {
-      font-size: var(--font-size-18);
+      font-size: var(--wds-font-size-title-body);
     }
 
     .np-option {
       .np-option__title {
         margin-bottom: 0;
-        font-size: var(--font-size-18);
-        letter-spacing: var(--letter-spacing-negative-xs);
-        line-height: var(--line-height-24);
+        font-size: var(--wds-font-size-title-body);
+        letter-spacing: var(--wds-letter-spacing-title-body);
+        line-height: var(--wds-line-height-title-body);
       }
 
       .circle-sm {

package/src/Body/Body.css

@@ -1,3 +1,4 @@
-.np-text--pre-line {
+.np-text--pre-line,
+.wds-text--pre-line {
   white-space: pre-line;
 }

package/src/Body/Body.less

@@ -1,3 +1,4 @@
-.np-text--pre-line {
+.np-text--pre-line,
+.wds-text--pre-line {
   white-space: pre-line;
 }

package/src/Body/Body.test.tsx

@@ -9,7 +9,10 @@ describe('Body', () => {
     const copy = screen.getByText('Test');
     expect(copy).toBeInTheDocument();
     expect(copy.tagName).toBe('DIV');
-    expect(copy).toHaveClass(`np-text-${Typography.BODY_DEFAULT}`);
+    expect(copy).toHaveClass(
+      `np-text-${Typography.BODY_DEFAULT}`,
+      `wds-text-${Typography.BODY_DEFAULT}`,
+    );
   });
 
   it('enforces tag via `as` prop', () => {
@@ -17,7 +20,10 @@ describe('Body', () => {
     const copy = screen.getByText('Test');
     expect(copy).toBeInTheDocument();
     expect(copy.tagName).toBe('P');
-    expect(copy).toHaveClass(`np-text-${Typography.BODY_DEFAULT}`);
+    expect(copy).toHaveClass(
+      `np-text-${Typography.BODY_DEFAULT}`,
+      `wds-text-${Typography.BODY_DEFAULT}`,
+    );
   });
 
   it('supports native HTML attrs', () => {
@@ -35,7 +41,7 @@ describe('Body', () => {
   it('renders newlines as line breaks when preserveNewlines is true', () => {
     render(<Body preserveNewlines>{'Line 1.\nLine 2'}</Body>);
     const copy = screen.getByText(/Line 1\.\s*Line 2/);
-    expect(copy).toHaveClass('np-text--pre-line');
+    expect(copy).toHaveClass('np-text--pre-line', 'wds-text--pre-line');
     expect(copy).toHaveTextContent('Line 1.');
     expect(copy).toHaveTextContent('Line 2');
   });
@@ -47,6 +53,9 @@ describe('Body', () => {
     const copy = screen.getByText('Test');
     expect(copy).toBeInTheDocument();
     expect(copy.tagName).toBe('DIV');
-    expect(copy).toHaveClass(`np-text-${Typography.BODY_DEFAULT}`);
+    expect(copy).toHaveClass(
+      `np-text-${Typography.BODY_DEFAULT}`,
+      `wds-text-${Typography.BODY_DEFAULT}`,
+    );
   });
 });

package/src/Body/Body.tsx

@@ -33,7 +33,7 @@ const Body = forwardRef(function Body(
     | null
   >,
 ) {
-  const isTypeSupported = bodyTypes.has(type);
+  const bodyType = bodyTypes.has(type) ? type : DEFAULT_TYPE;
   return (
     <Element
       {...props}
@@ -41,8 +41,9 @@ const Body = forwardRef(function Body(
       // See: https://fettblog.eu/typescript-react-generic-forward-refs/
       ref={reference}
       className={clsx(
-        `np-text-${isTypeSupported ? type : DEFAULT_TYPE}`,
-        preserveNewlines && 'np-text--pre-line',
+        `np-text-${bodyType}`,
+        `wds-text-${bodyType}`,
+        preserveNewlines && 'np-text--pre-line wds-text--pre-line',
         className,
       )}
     />

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

@@ -5,6 +5,7 @@ import Container from '../../Container';
 import Title from '../../Title';
 import { Typography } from '../../common/PropsValues/typography';
 import { withVariantConfig } from '../../../.storybook/helpers';
+import { useRtlDiffI18n, withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
 
 export default {
   title: 'Typography/Body/Tests',
@@ -88,3 +89,44 @@ export const HyphenationMobile: Story = {
   ...HyphenationTest,
   ...withVariantConfig(['mobile'], HyphenationTest),
 };
+
+const rtlDiffBodyLarge = withRTLDiff({
+  i18n: {
+    secondParagraph: {
+      en: "Set up a transfer in a few minutes from your phone or computer. We'll keep you updated at every step, so you always know where your money is.",
+      ar: 'أعدّ تحويلك في بضع دقائق من هاتفك أو حاسوبك. سنبقيك على اطلاع في كل خطوة، لتعرف دائمًا أين أموالك.',
+      he: 'הגדירו העברה תוך כמה דקות מהטלפון או מהמחשב. נעדכן אתכם בכל שלב, כך שתמיד תדעו איפה הכסף שלכם.',
+    },
+    paragraph: {
+      en: "Send money abroad at the real exchange rate, with low, transparent fees. You'll always see what you pay upfront, and your recipient gets the money quickly and securely.",
+      ar: 'أرسل الأموال إلى الخارج بسعر الصرف الحقيقي ومع رسوم منخفضة وشفافة. سترى دائمًا ما تدفعه مقدمًا، ويحصل المستلم على أمواله بسرعة وأمان.',
+      he: 'שלחו כסף לחו״ל בשער החליפין האמיתי, עם עמלות נמוכות ושקופות. תמיד תראו מראש כמה אתם משלמים, והנמען יקבל את הכסף במהירות ובבטחה.',
+    },
+  },
+});
+
+/**
+ * Two body large paragraphs in RTL and LTR, for the RTL Typography docs page.
+ * Hidden from the sidebar, tests and Chromatic.
+ */
+export const RTLDiffBodyLarge: Story = {
+  tags: ['!dev', '!test'],
+  render: function Render() {
+    const i18n = useRtlDiffI18n();
+    return (
+      <>
+        <Body as="p" type={Typography.BODY_LARGE}>
+          {i18n.paragraph}
+        </Body>
+        <Body as="p" type={Typography.BODY_LARGE}>
+          {i18n.secondParagraph}
+        </Body>
+      </>
+    );
+  },
+  ...rtlDiffBodyLarge,
+  parameters: {
+    ...rtlDiffBodyLarge.parameters,
+    chromatic: { ...rtlDiffBodyLarge.parameters.chromatic, disableSnapshot: true },
+  },
+};

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

@@ -250,6 +250,7 @@ export const RTLDiff: Story = {
     );
   },
   ...withRTLDiff({
+    fixedRows: { heights: 'auto' },
     i18n: {
       startIcon: { en: 'Start icon', ar: 'أيقونة البداية' },
       endIcon: { en: 'End icon', ar: 'أيقونة النهاية' },

package/src/Calendar/Calendar.css

@@ -7,7 +7,7 @@
   border: transparent;
   border-radius: var(--radius-small);
   background-color: transparent;
-  font-weight: var(--font-weight-semi-bold);
+  font-weight: var(--wds-font-weight-title-screen);
   color: var(--color-content-primary);
 }
 @media (max-width: 320px) {
@@ -89,10 +89,11 @@
   text-decoration-color: var(--color-content-tertiary);
 }
 .wds-Calendar__option--day {
-  block-size: var(--size-40);
+  --circleSize: var(--size-40);
+  block-size: var(--circleSize);
+  line-height: var(--circleSize);
+  inline-size: var(--circleSize);
   border-radius: var(--radius-full);
-  line-height: var(--size-40);
-  inline-size: var(--size-40);
   padding: 0;
   display: inline-flex;
   align-items: center;

package/src/Calendar/DayCalendar/Table/DayCalendarTable.tsx

@@ -134,8 +134,8 @@ class DayCalendarTable extends PureComponent<DayCalendarTableProps> {
                 key={day}
                 className={
                   index > 4
-                    ? 'text-xs-center np-text-body-default'
-                    : 'text-xs-center np-text-body-default-bold'
+                    ? 'text-xs-center np-text-body-default wds-text-body-default'
+                    : 'text-xs-center np-text-body-default-bold wds-text-body-default-bold'
                 }
               >
                 <span className="hidden-xs">

package/src/Calendar/MonthCalendar/Table/MonthCalendarTable.tsx

@@ -76,7 +76,7 @@ const MonthCalendarTable = ({
   })();
 
   return (
-    <table className="table table-condensed table-bordered tw-date-lookup-calendar np-text-body-default-bold m-b-0">
+    <table className="table table-condensed table-bordered tw-date-lookup-calendar np-text-body-default-bold wds-text-body-default-bold m-b-0">
       <thead className="sr-only">
         <tr>
           <th colSpan={COLS}>{placeholder}</th>

package/src/Calendar/TableLink/TableLink.css

@@ -7,7 +7,7 @@
   border: transparent;
   border-radius: var(--radius-small);
   background-color: transparent;
-  font-weight: var(--font-weight-semi-bold);
+  font-weight: var(--wds-font-weight-title-screen);
   color: var(--color-content-primary);
 }
 @media (max-width: 320px) {
@@ -89,10 +89,11 @@
   text-decoration-color: var(--color-content-tertiary);
 }
 .wds-Calendar__option--day {
-  block-size: var(--size-40);
+  --circleSize: var(--size-40);
+  block-size: var(--circleSize);
+  line-height: var(--circleSize);
+  inline-size: var(--circleSize);
   border-radius: var(--radius-full);
-  line-height: var(--size-40);
-  inline-size: var(--size-40);
   padding: 0;
   display: inline-flex;
   align-items: center;

package/src/Calendar/TableLink/TableLink.less

@@ -11,7 +11,7 @@
   border: transparent;
   border-radius: var(--radius-small);
   background-color: transparent;
-  font-weight: var(--font-weight-semi-bold);
+  font-weight: var(--wds-font-weight-title-screen);
   color: var(--color-content-primary);
 
   &:focus {
@@ -51,10 +51,11 @@
 }
 
 .wds-Calendar__option--day {
-  height: var(--size-40);
+  --circleSize: var(--size-40);
+  height: var(--circleSize);
+  line-height: var(--circleSize);
+  width: var(--circleSize);
   border-radius: var(--radius-full);
-  line-height: var(--size-40);
-  width: var(--size-40);
   padding: 0;
   display: inline-flex;
   align-items: center;

package/src/Calendar/TableLink/TableLink.tsx

@@ -96,7 +96,7 @@ const TableLink = ({
       aria-pressed={active}
       className={clsx(
         `wds-Calendar__option--${type}`,
-        `tw-date-lookup-${type}-option np-text-body-default-bold`,
+        `tw-date-lookup-${type}-option np-text-body-default-bold wds-text-body-default-bold`,
         { active: !!active },
         { today: !!today },
         { disabled: !!isUnavailable },

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

@@ -166,6 +166,7 @@ export const RTLDiff: Story = {
     });
   },
   ...withRTLDiff({
+    fixedRows: { heights: 'auto' },
     i18n: {
       disabledReason: {
         en: 'Weekends and specific dates are unavailable.',
@@ -174,3 +175,36 @@ export const RTLDiff: Story = {
     },
   }),
 };
+
+const rtlDiffDayView = withRTLDiff({
+  i18n: {
+    disabledReason: {
+      en: 'Weekends and specific dates are unavailable.',
+      ar: 'عطلات نهاية الأسبوع وتواريخ محددة غير متاحة.',
+    },
+  },
+});
+
+/**
+ * Day view only, for the RTL Layout docs page. Hidden from the sidebar, tests and Chromatic,
+ * as `RTLDiff` already covers it.
+ */
+export const RTLDiffDayView: Story = {
+  tags: ['!dev', '!test'],
+  render: () => {
+    const i18n = useRtlDiffI18n();
+    return (
+      <Calendar
+        value={selectedDate}
+        min={minDate}
+        max={maxDate}
+        disabledRules={{ ...disabledRulesRtl, reason: i18n.disabledReason }}
+      />
+    );
+  },
+  ...rtlDiffDayView,
+  parameters: {
+    ...rtlDiffDayView.parameters,
+    chromatic: { ...rtlDiffDayView.parameters.chromatic, disableSnapshot: true },
+  },
+};

package/src/Chips/Chip/Chip.css

@@ -70,7 +70,7 @@
   border-color: var(--color-sentiment-negative-active) !important;
 }
 .np-theme-personal .np-chip {
-  font-weight: var(--font-weight-semi-bold);
+  font-weight: var(--wds-font-weight-body-bold);
   color: var(--color-interactive-primary);
   padding-block: 0;
   padding-inline: var(--size-16);
@@ -114,11 +114,13 @@
 .np-theme-personal .np-chip.np-chip--removable {
   position: relative;
 }
-.np-theme-personal .np-chip.np-chip--removable .np-text-body-default-bold {
+.np-theme-personal .np-chip.np-chip--removable .np-text-body-default-bold,
+.np-theme-personal .np-chip.np-chip--removable .wds-text-body-default-bold {
   padding-inline-end: var(--size-24);
 }
 @media (max-width: 320px) {
-  .np-theme-personal .np-chip.np-chip--removable .np-text-body-default-bold {
+  .np-theme-personal .np-chip.np-chip--removable .np-text-body-default-bold,
+  .np-theme-personal .np-chip.np-chip--removable .wds-text-body-default-bold {
     padding-inline-end: var(--size-48);
   }
 }

package/src/Chips/Chip/Chip.less

@@ -90,7 +90,7 @@
   }
 
   .np-theme-personal & {
-    font-weight: var(--font-weight-semi-bold);
+    font-weight: var(--wds-font-weight-body-bold);
     color: var(--color-interactive-primary);
     padding: 0 var(--size-16);
     border-color: var(--color-interactive-secondary);
@@ -137,7 +137,8 @@
     &.np-chip--removable {
       position: relative;
 
-      .np-text-body-default-bold {
+      .np-text-body-default-bold,
+      .wds-text-body-default-bold {
         padding-right: var(--size-24);
 
         @media (--screen-400-zoom) {

package/src/CircularButton/_stories/CircularButton.story.tsx

@@ -232,13 +232,8 @@ export const SentimentAwareness: Story = {
             style={{ display: 'flex', alignItems: 'center', padding: '8px 0', gap: '8px' }}
           >
             <div
-              style={{
-                width: '120px',
-                fontSize: '11px',
-                fontWeight: 'bold',
-                textAlign: 'left',
-                paddingLeft: '8px',
-              }}
+              className="wds-text-body-default-bold p-l-1 text-align-left"
+              style={{ width: '12ch' }}
             >
               {sentiment} (base)
             </div>
@@ -246,7 +241,7 @@ export const SentimentAwareness: Story = {
               <div
                 key={button.label}
                 style={{
-                  width: '100px',
+                  width: '13ch',
                   display: 'flex',
                   justifyContent: 'center',
                 }}
@@ -270,13 +265,8 @@ export const SentimentAwareness: Story = {
             style={{ display: 'flex', alignItems: 'center', padding: '8px 0', gap: '8px' }}
           >
             <div
-              style={{
-                width: '120px',
-                fontSize: '11px',
-                fontWeight: 'bold',
-                textAlign: 'left',
-                paddingLeft: '8px',
-              }}
+              className="wds-text-body-default-bold p-l-1 text-align-left"
+              style={{ width: '12ch' }}
             >
               {sentiment} (elevated)
             </div>
@@ -284,7 +274,7 @@ export const SentimentAwareness: Story = {
               <div
                 key={button.label}
                 style={{
-                  width: '100px',
+                  width: '13ch',
                   display: 'flex',
                   justifyContent: 'center',
                 }}

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

@@ -49,6 +49,52 @@ export const Sizes: Story = {
   },
   ...withRTLDiff({
     renderAs: 'iframe',
+    fixedRows: { heights: [6, 7, 9] },
+    i18n: {
+      dayLabel: { en: 'Day', ar: 'اليوم' },
+      monthLabel: { en: 'Month', ar: 'الشهر' },
+      yearLabel: { en: 'Year', ar: 'السنة' },
+    },
+  }),
+};
+export const MobileSizes: Story = {
+  render: () => {
+    const i18n = useRtlDiffI18n();
+    return (
+      <>
+        <DateInput
+          size="sm"
+          dayLabel={i18n.dayLabel}
+          monthLabel={i18n.monthLabel}
+          yearLabel={i18n.yearLabel}
+          onChange={fn()}
+        />
+        <DateInput
+          size="md"
+          dayLabel={i18n.dayLabel}
+          monthLabel={i18n.monthLabel}
+          yearLabel={i18n.yearLabel}
+          onChange={fn()}
+        />
+        <DateInput
+          size="lg"
+          dayLabel={i18n.dayLabel}
+          monthLabel={i18n.monthLabel}
+          yearLabel={i18n.yearLabel}
+          onChange={fn()}
+        />
+        <DateInput
+          mode="month-year"
+          monthLabel={i18n.monthLabel}
+          yearLabel={i18n.yearLabel}
+          onChange={fn()}
+        />
+      </>
+    );
+  },
+  ...withRTLDiff({
+    viewport: 'smallMobile',
+    fixedRows: { heights: [13, 16, 21] },
     i18n: {
       dayLabel: { en: 'Day', ar: 'اليوم' },
       monthLabel: { en: 'Month', ar: 'الشهر' },

package/src/DateInput/_stories/DateInput.story.tsx

@@ -37,5 +37,6 @@ export const Basic: Story = {
     onChange: fn(),
     onBlur: fn(),
     onFocus: fn(),
+    size: 'lg',
   },
 } satisfies Story;

package/src/Decision/Decision.css

@@ -1,9 +1,10 @@
 .np-decision .decision {
   display: flex;
 }
-.np-decision__tile--small .np-text-title-subsection {
-  font-size: var(--font-size-16);
-  line-height: var(--line-height-title);
+.np-decision__tile--small .np-text-title-subsection,
+.np-decision__tile--small .wds-text-title-subsection {
+  font-size: var(--wds-font-size-body-large);
+  line-height: var(--wds-line-height-body-large);
 }
 .np-decision:not(.flex-column) {
   gap: var(--size-24);

package/src/Decision/Decision.less

@@ -4,9 +4,10 @@
   }
 
   &__tile--small {
-    .np-text-title-subsection {
-      font-size: var(--font-size-16);
-      line-height: var(--line-height-title);
+    .np-text-title-subsection,
+    .wds-text-title-subsection {
+      font-size: var(--wds-font-size-body-large);
+      line-height: var(--wds-line-height-body-large);
     }
   }
 

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

@@ -84,6 +84,7 @@ export const RTLDiff: Story = {
     );
   },
   ...withRTLDiff({
+    fixedRows: { heights: 'auto' },
     i18n: {
       sendTitle: { en: 'Send money', ar: 'إرسال الأموال' },
       sendDescription: { en: 'Fast international transfers.', ar: 'تحويلات دولية سريعة.' },

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

@@ -32,7 +32,7 @@ const definitions = [
   },
   {
     title: 'Use wrapper elements to style',
-    value: <span className="np-text-title-subsection">89.45GBP</span>,
+    value: <span className="wds-text-title-subsection">89.45GBP</span>,
     key: 'second',
   },
   {

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

@@ -222,7 +222,7 @@ export const RTLDiff: Story = {
     );
   },
   ...withRTLDiff({
-    fixedRows: { heights: [8, 11, 8, 8, 8, 10, 12, 8, 8, 8] },
+    fixedRows: { heights: 'auto' },
     i18n: {
       fullName: { en: 'Full name', ar: 'الاسم الكامل' },
       customerName: { en: 'Alice Smith', ar: 'أليس سميث' },

package/src/Display/Display.test.tsx

@@ -0,0 +1,43 @@
+import { Typography } from '../common';
+import { render, screen } from '../test-utils';
+
+import Display from '.';
+
+describe('Display', () => {
+  it('testing default state', () => {
+    render(<Display>Test</Display>);
+    const copy = screen.getByText('Test');
+    expect(copy.tagName).toBe('H1');
+    expect(copy).toHaveClass(
+      'np-display',
+      `np-text-${Typography.DISPLAY_LARGE}`,
+      `wds-text-${Typography.DISPLAY_LARGE}`,
+    );
+  });
+
+  it('renders both typography classes for the given type', () => {
+    render(<Display type={Typography.DISPLAY_NUMBER_MEDIUM}>Test</Display>);
+    expect(screen.getByText('Test')).toHaveClass(
+      `np-text-${Typography.DISPLAY_NUMBER_MEDIUM}`,
+      `wds-text-${Typography.DISPLAY_NUMBER_MEDIUM}`,
+    );
+  });
+
+  it('renders only the legacy class for display-extra-large, which has no locale-aware style', () => {
+    render(<Display type={Typography.DISPLAY_EXTRA_LARGE}>Test</Display>);
+    const copy = screen.getByText('Test');
+    expect(copy).toHaveClass(`np-text-${Typography.DISPLAY_EXTRA_LARGE}`);
+    expect(copy).not.toHaveClass(`wds-text-${Typography.DISPLAY_EXTRA_LARGE}`);
+  });
+
+  it('enforces tag via `as` prop and merges `className`', () => {
+    render(
+      <Display as="h3" className="custom">
+        Test
+      </Display>,
+    );
+    const copy = screen.getByText('Test');
+    expect(copy.tagName).toBe('H3');
+    expect(copy).toHaveClass('custom', `wds-text-${Typography.DISPLAY_LARGE}`);
+  });
+});

package/src/Display/Display.tsx

@@ -18,7 +18,17 @@ function Display({
   id,
 }: DisplayProps) {
   return (
-    <Heading id={id} className={clsx('np-display', `np-text-${type}`, 'text-primary', className)}>
+    <Heading
+      id={id}
+      className={clsx(
+        'np-display',
+        `np-text-${type}`,
+        // display-extra-large has no locale-aware equivalent
+        type !== Typography.DISPLAY_EXTRA_LARGE && `wds-text-${type}`,
+        'text-primary',
+        className,
+      )}
+    >
       {children}
     </Heading>
   );