@transferwise/components 0.0.0-experimental-43b3aaa → 0.0.0-experimental-14034f1

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/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/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

@@ -57,6 +57,52 @@ export const Sizes: Story = {
     },
   }),
 };
+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({
+    renderAs: 'iframe',
+    width: '320px',
+    fixedRows: { heights: [13, 16, 21] },
+    i18n: {
+      dayLabel: { en: 'Day', ar: 'اليوم' },
+      monthLabel: { en: 'Month', ar: 'الشهر' },
+      yearLabel: { en: 'Year', ar: 'السنة' },
+    },
+  }),
+};
 
 export const OpenDropdown: Story = {
   render: () => {

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/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/Display/_stories/Display.story.tsx

@@ -118,27 +118,42 @@ export const Basic = () => {
 export const Numbers = () => {
   return (
     <>
-      <Title type={Typography.TITLE_SCREEN}>Display Number</Title>
-      <hr />
-      <Display type={Typography.DISPLAY_NUMBER}>
-        <Money amount={1050.6} currency="UAH" />
-      </Display>
-      <hr />
-      <Display type={Typography.DISPLAY_NUMBER}>
-        <Money amount={10.17} currency="JPY" />
-      </Display>
-      <hr />
-      <Display type={Typography.DISPLAY_NUMBER}>
-        <Money amount={0.01} currency="EUR" />
-      </Display>
-      <hr />
-      <Display type={Typography.DISPLAY_NUMBER}>
-        <Money amount={1000000} currency="EUR" />
-      </Display>
-      <hr />
-      <Display type={Typography.DISPLAY_NUMBER}>
-        <Money amount={1000000} currency="GBP" />
-      </Display>
+      <section className="m-b-2">
+        <Title type={Typography.TITLE_BODY}>Display Number Small</Title>
+        <Display type={Typography.DISPLAY_NUMBER_SMALL}>
+          <Money amount={1050.6} currency="UAH" />
+        </Display>
+        <Display type={Typography.DISPLAY_NUMBER_SMALL}>
+          <Money amount={10.17} currency="JPY" />
+        </Display>
+      </section>
+
+      <section className="m-b-2">
+        <Title type={Typography.TITLE_BODY}>Display Number Medium</Title>
+        <Display type={Typography.DISPLAY_NUMBER_MEDIUM}>
+          <Money amount={0.01} currency="EUR" />
+        </Display>
+        <Display type={Typography.DISPLAY_NUMBER_MEDIUM}>
+          <Money amount={1000000} currency="EUR" />
+        </Display>
+      </section>
+
+      <section className="m-b-2">
+        <Title type={Typography.TITLE_BODY}>Display Number Large</Title>
+        <Display type={Typography.DISPLAY_NUMBER_LARGE}>
+          <Money amount={1000000} currency="GBP" />
+        </Display>
+        <Display type={Typography.DISPLAY_NUMBER_LARGE}>
+          <Money amount={1050.6} currency="UAH" />
+        </Display>
+      </section>
+
+      <section className="m-b-2">
+        <Title type={Typography.TITLE_BODY}>Display Number (Deprecated)</Title>
+        <Display type={Typography.DISPLAY_NUMBER}>
+          <Money amount={1050.6} currency="UAH" />
+        </Display>
+      </section>
     </>
   );
 };

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

@@ -1,42 +1,108 @@
-import { Fragment } from 'react';
-import type { Meta, StoryObj } from '@storybook/react-webpack5';
-
-import Body from '../../Body';
-import Container from '../../Container';
-import { Typography } from '../../common/PropsValues/typography';
-import { localeCopy } from '../../test-utils';
-import { withVariantConfig } from '../../../.storybook/helpers';
-
+import { Meta, StoryObj } from '@storybook/react-webpack5';
+import { IntlProvider } from 'react-intl';
+import { withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
+import { getDirectionFromLocale, Typography } from '../../common';
+import type { DisplayTypes } from '../../common/PropsValues/typography';
+import Money from '../../Money/Money';
+import Title from '../../Title/Title';
 import Display from '../Display';
 
-export default {
+const meta: Meta<typeof Display> = {
   component: Display,
-  title: 'Typography/Display/Tests',
   tags: ['!autodocs', '!manifest'],
-} satisfies Meta<typeof Display>;
-
+  title: 'Typography/Display/Tests',
+};
+export default meta;
 type Story = StoryObj<typeof Display>;
 
-const HyphenationTest = {
-  render: () => (
-    <Container size="compact">
-      {localeCopy.map(({ lang, name, display }) => (
-        <Fragment key={lang}>
-          <Body type={Typography.BODY_DEFAULT_BOLD}>{name}</Body>
-          <div lang={lang} className="m-b-3">
-            <Display type={Typography.DISPLAY_LARGE}>{display}</Display>
-          </div>
-        </Fragment>
-      ))}
-    </Container>
-  ),
+export const RTLDiff: Story = {
+  render: () => {
+    return (
+      <>
+        <section className="m-b-2">
+          <Title type={Typography.TITLE_BODY}>Display Number Small</Title>
+          <Display type={Typography.DISPLAY_NUMBER_SMALL}>
+            <Money amount={1050.6} currency="UAH" />
+          </Display>
+          <Display type={Typography.DISPLAY_NUMBER_SMALL}>
+            <Money amount={10.17} currency="JPY" />
+          </Display>
+        </section>
+
+        <section className="m-b-2">
+          <Title type={Typography.TITLE_BODY}>Display Number Medium</Title>
+          <Display type={Typography.DISPLAY_NUMBER_MEDIUM}>
+            <Money amount={0.01} currency="EUR" />
+          </Display>
+          <Display type={Typography.DISPLAY_NUMBER_MEDIUM}>
+            <Money amount={1000000} currency="EUR" />
+          </Display>
+        </section>
+
+        <section className="m-b-2">
+          <Title type={Typography.TITLE_BODY}>Display Number Large</Title>
+          <Display type={Typography.DISPLAY_NUMBER_LARGE}>
+            <Money amount={123456} currency="GBP" />
+          </Display>
+          <Display type={Typography.DISPLAY_NUMBER_LARGE}>
+            <Money amount={1010.6} currency="UAH" />
+          </Display>
+        </section>
+
+        <section className="m-b-2">
+          <Title type={Typography.TITLE_BODY}>Display Number (Deprecated)</Title>
+          <Display type={Typography.DISPLAY_NUMBER}>
+            <Money amount={1050.6} currency="UAH" />
+          </Display>
+        </section>
+      </>
+    );
+  },
+  ...withRTLDiff({ fixedRows: { heights: 'auto' } }),
+};
+
+const LOCALES = [
+  { value: 'fr', label: 'Other Latin' },
+  { value: 'ru', label: 'Cyrillic' },
+  { value: 'el', label: 'Greek' },
+  { value: 'ja', label: 'Japanese' },
+  { value: 'ko', label: 'Korean' },
+  { value: 'th', label: 'Thai' },
+  { value: 'zh-CN', label: 'Chinese' },
+  { value: 'ar', label: 'Arabic' },
+  { value: 'he', label: 'Hebrew' },
+];
+
+// `lang` picks the locale's typography tokens, IntlProvider the locale's number formatting
+const renderAllLocales = (type: DisplayTypes) => (
+  <>
+    {LOCALES.map(({ value, label }) => (
+      <section key={value} className="m-b-2">
+        <Title type={Typography.TITLE_BODY}>{label}</Title>
+        <div lang={value} dir={getDirectionFromLocale(value)}>
+          <IntlProvider locale={value} messages={{}}>
+            <Display type={type}>
+              <Money amount={1235.56} currency="GBP" />
+            </Display>
+          </IntlProvider>
+        </div>
+      </section>
+    ))}
+  </>
+);
+
+export const DisplayNumberSmallLocales: Story = {
+  render: () => renderAllLocales(Typography.DISPLAY_NUMBER_SMALL),
+};
+
+export const DisplayNumberMediumLocales: Story = {
+  render: () => renderAllLocales(Typography.DISPLAY_NUMBER_MEDIUM),
 };
 
-export const Hyphenation: Story = {
-  ...HyphenationTest,
+export const DisplayNumberLargeLocales: Story = {
+  render: () => renderAllLocales(Typography.DISPLAY_NUMBER_LARGE),
 };
 
-export const HyphenationMobile: Story = {
-  ...HyphenationTest,
-  ...withVariantConfig(['mobile'], HyphenationTest),
+export const DisplayNumberDeprecatedLocales: Story = {
+  render: () => renderAllLocales(Typography.DISPLAY_NUMBER),
 };

package/src/Emphasis/Emphasis.css

@@ -1,5 +1,5 @@
 .emphasis {
-  font-weight: var(--font-weight-semi-bold);
+  font-weight: var(--wds-font-weight-body-bold);
   font-style: normal;
 }
 .emphasis--important {

package/src/Emphasis/Emphasis.less

@@ -1,5 +1,5 @@
 .emphasis {
-  font-weight: var(--font-weight-semi-bold);
+  font-weight: var(--wds-font-weight-body-bold);
   font-style: normal;
 }
 

package/src/ExpressiveMoneyInput/AmountInput/AmountInput.css

@@ -2,6 +2,7 @@
   inline-size: 100%;
 }
 .wds-amount-input-input-container {
+  font-family: var(--wds-font-family-display-number);
   display: flex;
   justify-content: right;
   inline-size: 100%;
@@ -36,5 +37,5 @@
   flex-grow: 0;
   display: flex;
   align-items: center;
-  line-height: inherit;
+  line-height: 1em;
 }

package/src/ExpressiveMoneyInput/AmountInput/AmountInput.less

@@ -4,6 +4,7 @@
   }
 
   &-input-container {
+    font-family: var(--wds-font-family-display-number);
     display: flex;
     justify-content: right;
     width: 100%;
@@ -47,6 +48,6 @@
     flex-grow: 0;
     display: flex;
     align-items: center;
-    line-height: inherit;
+    line-height: 1em;
   }
 }

package/src/ExpressiveMoneyInput/AmountInput/AmountInput.tsx

@@ -297,10 +297,7 @@ export const AmountInput = ({
 
   return (
     <div className="wds-amount-input-container" dir="ltr">
-      <div
-        className={clsx('wds-amount-input-input-container', 'np-text-display-large--forced')}
-        style={style}
-      >
+      <div className={clsx('wds-amount-input-input-container')} style={style}>
         <input
           ref={ref}
           dir="auto"

package/src/ExpressiveMoneyInput/ExpressiveMoneyInput.css

@@ -2,6 +2,7 @@
   inline-size: 100%;
 }
 .wds-amount-input-input-container {
+  font-family: var(--wds-font-family-display-number);
   display: flex;
   justify-content: right;
   inline-size: 100%;
@@ -36,7 +37,7 @@
   flex-grow: 0;
   display: flex;
   align-items: center;
-  line-height: inherit;
+  line-height: 1em;
 }
 .wds-currency-selector:disabled {
   opacity: 1 !important;

package/src/FlowNavigation/AnimatedLabel/AnimatedLabel.tsx

@@ -40,7 +40,7 @@ const AnimatedLabel = ({ activeLabel, className, steps }: AnimatedLabelProps) =>
                 className={clsx(
                   'np-animated-label',
                   'btn-unstyled',
-                  'np-text-body-large-bold',
+                  'np-text-body-large-bold wds-text-body-large-bold',
                   className,
                 )}
                 onClick={() => setShowSteps(true)}