@transferwise/components 46.165.4 → 46.166.0

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

@@ -0,0 +1,108 @@
+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';
+
+const meta: Meta<typeof Display> = {
+  component: Display,
+  tags: ['!autodocs', '!manifest'],
+  title: 'Typography/Display/Tests',
+};
+export default meta;
+type Story = StoryObj<typeof Display>;
+
+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 DisplayNumberLargeLocales: Story = {
+  render: () => renderAllLocales(Typography.DISPLAY_NUMBER_LARGE),
+};
+
+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/ExpressiveMoneyInput/_stories/ExpressiveMoneyInput.rtl.test.story.tsx

@@ -94,6 +94,7 @@ export const TriggerVariants: Story = {
     );
   },
   ...withRTLDiff({
+    fixedRows: { heights: [8, 8, 10, 8] },
     renderAs: 'iframe',
     width: 'stretch',
     i18n: {

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

@@ -111,6 +111,7 @@ export const RTLDiff: Story = {
     );
   },
   ...withRTLDiff({
+    fixedRows: { heights: 'auto' },
     width: 'stretch',
     i18n: {
       placeholder_en: { en: 'LTR placeholder...', ar: 'LTR placeholder...' },

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)}

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

@@ -151,7 +151,7 @@ export const RTLDiff: Story = {
     );
   },
   ...withRTLDiff({
-    fixedRows: { heights: [4, 4, 5, 5], hideSeparators: true },
+    fixedRows: { heights: 'auto', hideSeparators: true },
     i18n: {
       groupWithoutAction: { en: 'Group level without action', ar: 'مستوى المجموعة بدون إجراء' },
       groupWithAction: { en: 'Group level with action', ar: 'مستوى المجموعة مع إجراء' },

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

@@ -70,6 +70,7 @@ export const RTLDiff: StoryObj<typeof InputWithDisplayFormat> = {
     );
   },
   ...withRTLDiff({
+    fixedRows: { heights: 'auto' },
     width: 'stretch',
     i18n: {
       value: {

package/src/Inputs/Input/Input.css

@@ -1,4 +1,91 @@
-.np-form-control {
+.np-form-control--size-lg {
+  margin: 0;color: var(--color-content-primary);word-wrap: break-word;
+}
+@supports (hyphenate-limit-chars: 1) {
+  .np-form-control--size-lg {
+    hyphens: auto;hyphenate-limit-chars: 7 3;
+  }
+  @media (min-width: 840px) {
+    .np-form-control--size-lg {
+      hyphenate-limit-chars: 8 3;
+    }
+  }
+  @media (min-width: 1160px) {
+    .np-form-control--size-lg {
+      hyphenate-limit-chars: 10 4 3;
+    }
+  }
+}@supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
+  .np-form-control--size-lg {
+    hyphens: auto;-webkit-hyphenate-limit-before: 3;-webkit-hyphenate-limit-after: 3;
+  }
+  @media (min-width: 1160px) {
+    .np-form-control--size-lg {
+      -webkit-hyphenate-limit-before: 4;
+    }
+  }
+}.np-form-control--size-lg {
+  margin-block-end: initial;
+}
+.np-form-control--size-sm {
+  word-wrap: break-word;
+}
+@supports (hyphenate-limit-chars: 1) {
+  .np-form-control--size-sm {
+    hyphens: auto;hyphenate-limit-chars: 7 3;
+  }
+  @media (min-width: 840px) {
+    .np-form-control--size-sm {
+      hyphenate-limit-chars: 8 3;
+    }
+  }
+  @media (min-width: 1160px) {
+    .np-form-control--size-sm {
+      hyphenate-limit-chars: 10 4 3;
+    }
+  }
+}@supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
+  .np-form-control--size-sm {
+    hyphens: auto;-webkit-hyphenate-limit-before: 3;-webkit-hyphenate-limit-after: 3;
+  }
+  @media (min-width: 1160px) {
+    .np-form-control--size-sm {
+      -webkit-hyphenate-limit-before: 4;
+    }
+  }
+}.np-form-control--size-auto,
+.np-form-control--size-md {
+  word-wrap: break-word;
+}
+@supports (hyphenate-limit-chars: 1) {
+  .np-form-control--size-auto,
+  .np-form-control--size-md {
+    hyphens: auto;hyphenate-limit-chars: 7 3;
+  }
+  @media (min-width: 840px) {
+    .np-form-control--size-auto,
+    .np-form-control--size-md {
+      hyphenate-limit-chars: 8 3;
+    }
+  }
+  @media (min-width: 1160px) {
+    .np-form-control--size-auto,
+    .np-form-control--size-md {
+      hyphenate-limit-chars: 10 4 3;
+    }
+  }
+}@supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
+  .np-form-control--size-auto,
+  .np-form-control--size-md {
+    hyphens: auto;-webkit-hyphenate-limit-before: 3;-webkit-hyphenate-limit-after: 3;
+  }
+  @media (min-width: 1160px) {
+    .np-form-control--size-auto,
+    .np-form-control--size-md {
+      -webkit-hyphenate-limit-before: 4;
+    }
+  }
+}.np-form-control {
   --ring-width: 1px;
   --ring-color: var(--color-interactive-secondary);
   border: none;
@@ -35,10 +122,6 @@
   --ring-color: var(--color-interactive-primary);
 }
 .np-form-control--size-auto {
-  font-weight: var(--font-weight-regular);
-  font-size: var(--font-size-16);
-  line-height: 150%;
-  letter-spacing: -0.011em;
   word-wrap: break-word;
   padding-block-start: var(--size-12);
   padding-block-end: var(--size-12);
@@ -78,12 +161,8 @@
   padding-block-end: 0 !important;
 }
 .np-form-control--size-sm {
-  font-size: var(--font-size-14);
-  line-height: 155%;
-  letter-spacing: -0.006em;
-  font-weight: var(--font-weight-regular);
   word-wrap: break-word;
-  block-size: var(--size-32) !important;
+  block-size: calc(2 * var(--size-4) + var(--wds-font-size-body) * var(--wds-line-height-body)) !important;
 }
 @supports (hyphenate-limit-chars: 1) {
   .np-form-control--size-sm {
@@ -115,16 +194,12 @@
 }
 @media (max-width: 320px) {
   .np-form-control--size-sm {
-    block-size: var(--size-64) !important;
+    block-size: calc(2 * var(--size-8) + var(--wds-font-size-body) * var(--wds-line-height-body)) !important;
   }
 }
 .np-form-control--size-md {
-  font-weight: var(--font-weight-regular);
-  font-size: var(--font-size-16);
-  line-height: 150%;
-  letter-spacing: -0.011em;
   word-wrap: break-word;
-  block-size: var(--size-48) !important;
+  block-size: calc(2 * var(--size-12) + var(--wds-font-size-body-large) * var(--wds-line-height-body-large)) !important;
 }
 @supports (hyphenate-limit-chars: 1) {
   .np-form-control--size-md {
@@ -156,21 +231,15 @@
 }
 @media (max-width: 320px) {
   .np-form-control--size-md {
-    block-size: var(--size-72) !important;
+    block-size: calc(2 * var(--size-12) + var(--wds-font-size-body-large) * var(--wds-line-height-body-large)) !important;
   }
 }
 .np-form-control--size-lg {
   margin: 0;
   color: var(--color-content-primary);
-  line-height: var(--line-height-title);
-  letter-spacing: 0;
   word-wrap: break-word;
   margin-block-end: initial;
-  font-size: var(--font-size-22);
-  font-weight: var(--font-weight-semi-bold);
-  letter-spacing: -0.018em;
-  line-height: 125%;
-  block-size: var(--size-72) !important;
+  block-size: calc(2 * var(--size-24) + var(--wds-font-size-title-body) * var(--wds-line-height-title-body)) !important;
 }
 @supports (hyphenate-limit-chars: 1) {
   .np-form-control--size-lg {
@@ -205,6 +274,11 @@
 .np-form-control--size-lg + ol:not(.list-unstyled) {
   margin-block-start: var(--size-8);
 }
+@media (max-width: 320px) {
+  .np-form-control--size-lg {
+    block-size: calc(2 * var(--size-12) + var(--wds-font-size-title-body) * var(--wds-line-height-title-body)) !important;
+  }
+}
 .np-input::-moz-placeholder {
   color: var(--color-content-tertiary);
 }

package/src/Inputs/InputGroup/_stories/InputGroup.test.story.tsx

@@ -78,6 +78,7 @@ export const RTLDiff: Story = {
     );
   },
   ...withRTLDiff({
+    fixedRows: { heights: 'auto' },
     i18n: {
       placeholder_both: { en: 'addonStart and addonEnd', ar: 'البادئة والنهاية' },
       placeholder_start: { en: 'addonStart only', ar: 'البادئة فقط' },

package/src/Inputs/SelectInput/BottomSheet/SelectInputBottomSheet.tsx

@@ -122,9 +122,11 @@ export function SelectInputBottomSheet({
                         )}
                       >
                         {title ? (
-                          <h2 className="np-bottom-sheet-v2-title np-text-title-body">{title}</h2>
+                          <h2 className="np-bottom-sheet-v2-title np-text-title-body wds-text-title-body">
+                            {title}
+                          </h2>
                         ) : null}
-                        <div className="np-bottom-sheet-v2-body np-text-body-default">
+                        <div className="np-bottom-sheet-v2-body np-text-body-default wds-text-body-default">
                           {children}
                         </div>
                       </div>

package/src/Inputs/SelectInput/Option/SelectInputOption.tsx

@@ -34,7 +34,7 @@ export function SelectInputOption<T = string>({
       disabled={disabled}
       className={({ active, disabled: uiDisabled }) =>
         clsx(
-          'np-select-input-option-container np-text-body-large',
+          'np-select-input-option-container np-text-body-large wds-text-body-large',
           active && 'np-select-input-option-container--active',
           uiDisabled && 'np-select-input-option-container--disabled',
         )

package/src/Inputs/SelectInput/OptionContent/SelectInputOptionContent.tsx

@@ -28,7 +28,7 @@ export function SelectInputOptionContent({
     <div
       className={clsx(
         'np-select-input-option-content-container',
-        (note || description) && 'np-text-body-large',
+        (note || description) && 'np-text-body-large wds-text-body-large',
         className,
       )}
     >
@@ -52,7 +52,7 @@ export function SelectInputOptionContent({
         >
           <div className="d-inline np-select-input-option-content-title">{title}</div>
           {note ? (
-            <span className="np-select-input-option-content-text-secondary np-text-body-default">
+            <span className="np-select-input-option-content-text-secondary np-text-body-default wds-text-body-default">
               {note}
             </span>
           ) : null}
@@ -61,7 +61,7 @@ export function SelectInputOptionContent({
         {description ? (
           <div
             className={clsx(
-              'np-select-input-option-content-text-secondary np-text-body-default',
+              'np-select-input-option-content-text-secondary np-text-body-default wds-text-body-default',
               withinTrigger &&
                 'np-select-input-option-content-text-within-trigger np-select-input-option-description-in-trigger',
             )}

package/src/Inputs/SelectInput/Popover/SelectInputPopover.tsx

@@ -124,9 +124,13 @@ export function SelectInputPopover({
                     })}
                   >
                     {title ? (
-                      <h2 className="np-popover-v2-title np-text-title-body">{title}</h2>
+                      <h2 className="np-popover-v2-title np-text-title-body wds-text-title-body">
+                        {title}
+                      </h2>
                     ) : null}
-                    <div className="np-popover-v2-content np-text-body-default">{children}</div>
+                    <div className="np-popover-v2-content np-text-body-default wds-text-body-default">
+                      {children}
+                    </div>
                   </div>
                 </div>
               </FloatingFocusManager>

package/src/Inputs/SelectInput/_stories/SelectInput.rtl.test.story.tsx

@@ -88,6 +88,7 @@ export const TriggerVariants: Story = {
     );
   },
   ...withRTLDiff({
+    fixedRows: { heights: 'auto' },
     i18n: {
       ...currencyNames,
       selectCurrency: { en: 'Select currency', ar: 'اختر العملة' },

package/src/Inputs/SelectInput/_stories/SelectInput.story.tsx

@@ -1276,7 +1276,7 @@ export const WithBuiltInSearchResultSorting: Story<CountryWithCurrency> = {
   decorators: [
     (Story) => (
       <div>
-        <p className="m-b-3 np-text-body-default" style={{ maxWidth: '600px' }}>
+        <p className="m-b-3 wds-text-body-default" style={{ maxWidth: '600px' }}>
           This example uses the built-in <code>SelectInput.sortByRelevance</code> helper to sort
           filtered results by relevance (You can implement your own). This one prioritises: exact
           matches → starts with → contains → alphabetical.