@transferwise/components 0.0.0-experimental-db6cf60 → 0.0.0-experimental-4678400

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,3 @@
-.np-text--pre-line {
+.wds-text--pre-line {
   white-space: pre-line;
 }

package/src/Body/Body.less

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

package/src/Body/Body.test.tsx

@@ -9,7 +9,7 @@ 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(`wds-text-${Typography.BODY_DEFAULT}`);
   });
 
   it('enforces tag via `as` prop', () => {
@@ -17,7 +17,7 @@ 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(`wds-text-${Typography.BODY_DEFAULT}`);
   });
 
   it('supports native HTML attrs', () => {
@@ -35,7 +35,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('wds-text--pre-line');
     expect(copy).toHaveTextContent('Line 1.');
     expect(copy).toHaveTextContent('Line 2');
   });
@@ -47,6 +47,6 @@ 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(`wds-text-${Typography.BODY_DEFAULT}`);
   });
 });

package/src/Body/Body.tsx

@@ -41,8 +41,8 @@ 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',
+        `wds-text-${isTypeSupported ? type : DEFAULT_TYPE}`,
+        preserveNewlines && '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;
@@ -104,6 +105,12 @@
   text-decoration-thickness: 2px;
   text-underline-offset: 4px;
 }
+.wds-Calendar__option--year {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  block-size: calc(1rlh * 1.6);
+}
 .tw-date-lookup-calendar {
   min-inline-size: 300px;
   text-align: 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 wds-text-body-default'
+                    : 'text-xs-center 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 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;
@@ -104,3 +105,9 @@
   text-decoration-thickness: 2px;
   text-underline-offset: 4px;
 }
+.wds-Calendar__option--year {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  block-size: calc(1rlh * 1.6);
+}

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;
@@ -66,3 +67,12 @@
     text-underline-offset: 4px;
   }
 }
+
+.wds-Calendar__option--year{
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: calc(1rlh * 1.6);
+}
+
+

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 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,41 @@ export const Basic = () => {
 export const Numbers = () => {
   return (
     <>
-      <Title type={Typography.TITLE_SCREEN}>Display Number</Title>
+      <Title type={Typography.TITLE_SCREEN}>Display Number Small</Title>
       <hr />
-      <Display type={Typography.DISPLAY_NUMBER}>
+      <Display type={Typography.DISPLAY_NUMBER_SMALL}>
         <Money amount={1050.6} currency="UAH" />
       </Display>
       <hr />
-      <Display type={Typography.DISPLAY_NUMBER}>
+      <Display type={Typography.DISPLAY_NUMBER_SMALL}>
         <Money amount={10.17} currency="JPY" />
       </Display>
+
+      <Title type={Typography.TITLE_SCREEN}>Display Number Medium</Title>
       <hr />
-      <Display type={Typography.DISPLAY_NUMBER}>
+      <Display type={Typography.DISPLAY_NUMBER_MEDIUM}>
         <Money amount={0.01} currency="EUR" />
       </Display>
       <hr />
-      <Display type={Typography.DISPLAY_NUMBER}>
+      <Display type={Typography.DISPLAY_NUMBER_MEDIUM}>
         <Money amount={1000000} currency="EUR" />
       </Display>
+
+      <Title type={Typography.TITLE_SCREEN}>Display Number Large</Title>
       <hr />
-      <Display type={Typography.DISPLAY_NUMBER}>
+      <Display type={Typography.DISPLAY_NUMBER_LARGE}>
         <Money amount={1000000} currency="GBP" />
       </Display>
+      <hr />
+      <Display type={Typography.DISPLAY_NUMBER_LARGE}>
+        <Money amount={1050.6} currency="UAH" />
+      </Display>
+
+      <Title type={Typography.TITLE_SCREEN}>Display Number (Deprecated)</Title>
+      <hr />
+      <Display type={Typography.DISPLAY_NUMBER}>
+        <Money amount={1050.6} currency="UAH" />
+      </Display>
     </>
   );
 };

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',
+                  'wds-text-body-large-bold',
                   className,
                 )}
                 onClick={() => setShowSteps(true)}

package/src/Header/Header.css

@@ -25,49 +25,3 @@
   display: flex;
   align-items: center;
 }
-.np-header--with-actions {
-  --Header-actions-gap: var(--size-8);
-  align-items: center;
-  container-type: inline-size;
-  display: flex;
-  flex-wrap: wrap;
-  row-gap: var(--size-8);
-}
-.np-header--with-actions > .np-header__title {
-  flex: 1 1 0;
-}
-@container (width <= 360px) {
-  .np-header--with-actions > .np-header__title {
-    flex-basis: auto;
-  }
-}
-.np-header__title-link.np-link {
-  color: inherit;
-  display: inline;
-  font: inherit;
-  letter-spacing: inherit;
-  text-align: start;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-}
-.np-header__title-link.np-link:hover,
-.np-header__title-link.np-link:focus-visible {
-  -webkit-text-decoration: underline;
-  text-decoration: underline;
-}
-.np-header__title-link.np-link .np-header__title-chevron {
-  white-space: nowrap;
-}
-.np-header__title-link.np-link .np-header__title-chevron .tw-icon {
-  display: inline-block;
-  margin: 0;
-  vertical-align: text-bottom;
-}
-.np-header__actions {
-  align-self: start;
-  align-items: center;
-  display: flex;
-  flex: none;
-  gap: var(--Header-actions-gap);
-  margin-inline-start: auto;
-}