@transferwise/components 0.0.0-experimental-6e04f56 → 0.0.0-experimental-542ae69

package/src/_deprecated/Select/Select.css

@@ -1,4 +1,30 @@
-.np-select .np-dropdown-toggle {
+.np-dropdown-menu > li > a {
+  word-wrap: break-word;
+}
+@supports (hyphenate-limit-chars: 1) {
+  .np-dropdown-menu > li > a {
+    hyphens: auto;hyphenate-limit-chars: 7 3;
+  }
+  @media (min-width: 840px) {
+    .np-dropdown-menu > li > a {
+      hyphenate-limit-chars: 8 3;
+    }
+  }
+  @media (min-width: 1160px) {
+    .np-dropdown-menu > li > a {
+      hyphenate-limit-chars: 10 4 3;
+    }
+  }
+}@supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
+  .np-dropdown-menu > li > a {
+    hyphens: auto;-webkit-hyphenate-limit-before: 3;-webkit-hyphenate-limit-after: 3;
+  }
+  @media (min-width: 1160px) {
+    .np-dropdown-menu > li > a {
+      -webkit-hyphenate-limit-before: 4;
+    }
+  }
+}.np-select .np-dropdown-toggle {
   background-color: #ffffff;
   background-color: var(--color-background-screen);
   border: 1px solid #c9cbce;
@@ -146,12 +172,6 @@
   border-radius: var(--radius-small);
   color: #37517e;
   color: var(--color-content-primary);
-  font-size: 0.875rem;
-  font-size: var(--font-size-14);
-  line-height: 155%;
-  letter-spacing: -0.006em;
-  font-weight: 400;
-  font-weight: var(--font-weight-regular);
   word-wrap: break-word;
 }
 .np-theme-personal .np-dropdown-menu > li > a {
@@ -230,8 +250,12 @@
 .np-dropdown-menu > .selected > a strong {
   color: inherit;
 }
+.np-dropdown-menu > .active > a .body-2,
+.np-dropdown-menu > .selected > a .body-2,
 .np-dropdown-menu > .active > a .np-text-body-default,
-.np-dropdown-menu > .selected > a .np-text-body-default {
+.np-dropdown-menu > .selected > a .np-text-body-default,
+.np-dropdown-menu > .active > a .wds-text-body-default,
+.np-dropdown-menu > .selected > a .wds-text-body-default {
   color: #c9cbce;
 }
 .np-dropdown-menu .np-select-filter,
@@ -271,7 +295,9 @@
   vertical-align: middle;
 }
 .np-select .np-text-body-default,
-.np-dropdown-menu .np-text-body-default {
+.np-dropdown-menu .np-text-body-default,
+.np-select .wds-text-body-default,
+.np-dropdown-menu .wds-text-body-default {
   color: #5d7079;
   color: var(--color-content-secondary);
 }
@@ -332,7 +358,13 @@
 .np-theme-personal .np-dropdown-menu .active a:focus .np-text-body-default,
 .np-theme-personal .np-dropdown-menu .selected a:focus .np-text-body-default,
 .np-theme-personal .np-dropdown-menu .active a:hover .np-text-body-default,
-.np-theme-personal .np-dropdown-menu .selected a:hover .np-text-body-default {
+.np-theme-personal .np-dropdown-menu .selected a:hover .np-text-body-default,
+.np-theme-personal .np-dropdown-menu .active a .wds-text-body-default,
+.np-theme-personal .np-dropdown-menu .selected a .wds-text-body-default,
+.np-theme-personal .np-dropdown-menu .active a:focus .wds-text-body-default,
+.np-theme-personal .np-dropdown-menu .selected a:focus .wds-text-body-default,
+.np-theme-personal .np-dropdown-menu .active a:hover .wds-text-body-default,
+.np-theme-personal .np-dropdown-menu .selected a:hover .wds-text-body-default {
   color: var(--color-interactive-primary);
 }
 .np-theme-personal .np-dropdown-menu li:not(.active):not(.selected):not(:has(input)) a:not([disabled]):not(.disabled):active {
@@ -340,7 +372,8 @@
   background-color: var(--color-background-neutral-active) !important;
 }
 .np-theme-personal .np-dropdown-menu li:not(.active):not(.selected):not(:has(input)) a:not([disabled]):not(.disabled):active .body-2,
-.np-theme-personal .np-dropdown-menu li:not(.active):not(.selected):not(:has(input)) a:not([disabled]):not(.disabled):active .np-text-body-default {
+.np-theme-personal .np-dropdown-menu li:not(.active):not(.selected):not(:has(input)) a:not([disabled]):not(.disabled):active .np-text-body-default,
+.np-theme-personal .np-dropdown-menu li:not(.active):not(.selected):not(:has(input)) a:not([disabled]):not(.disabled):active .wds-text-body-default {
   color: var(--color-interactive-primary);
 }
 .np-theme-personal .np-dropdown-menu .np-dropdown-item {

package/src/_deprecated/Select/Select.less

@@ -170,7 +170,7 @@
       border-radius: var(--radius-small);
     }
 
-    .np-text-body-default;
+    .wds-text-body-default;
   }
 
   > li:first-child > a {
@@ -215,7 +215,9 @@
       color: inherit;
     }
 
-    .np-text-body-default {
+    .body-2,
+    .np-text-body-default,
+    .wds-text-body-default {
       color: @color-navy-content-secondary;
     }
   }
@@ -255,7 +257,8 @@
     vertical-align: middle;
   }
 
-  .np-text-body-default {
+  .np-text-body-default,
+  .wds-text-body-default {
     color: var(--color-content-secondary);
   }
 
@@ -313,7 +316,8 @@
         background-color: var(--color-background-neutral-active);
 
         .body-2,
-        .np-text-body-default {
+        .np-text-body-default,
+        .wds-text-body-default {
           color: var(--color-interactive-primary);
         }
       }
@@ -324,7 +328,8 @@
       background-color: var(--color-background-neutral-active) !important;
 
       .body-2,
-      .np-text-body-default {
+      .np-text-body-default,
+      .wds-text-body-default {
         color: var(--color-interactive-primary);
       }
     }

package/src/_deprecated/Select/Select.tsx

@@ -457,7 +457,7 @@ export default function Select({
   function HeaderOption({ children }: { children?: React.ReactNode }) {
     return (
       <li // eslint-disable-line jsx-a11y/no-noninteractive-element-interactions
-        className={clsx(s('np-dropdown-header'), s('np-text-title-group'))}
+        className={clsx(s('np-dropdown-header'), s('wds-text-title-group'))}
         onClick={stopPropagation}
         onKeyPress={stopPropagation}
       >
@@ -562,7 +562,7 @@ export default function Select({
         htmlType="button"
         className={clsx(
           s('np-dropdown-toggle'),
-          s('np-text-body-large'),
+          s('wds-text-body-large'),
           inverse ? s('np-dropdown-toggle-navy') : null,
         )}
         // reset Button's styles

package/src/common/PropsValues/typography.ts

@@ -6,7 +6,13 @@ export enum Typography {
   DISPLAY_LARGE = 'display-large',
   DISPLAY_MEDIUM = 'display-medium',
   DISPLAY_SMALL = 'display-small',
+  /**
+   * @deprecated Use {@link Typography.DISPLAY_NUMBER_SMALL} instead.
+   */
   DISPLAY_NUMBER = 'display-number',
+  DISPLAY_NUMBER_SMALL = 'display-number-small',
+  DISPLAY_NUMBER_MEDIUM = 'display-number-medium',
+  DISPLAY_NUMBER_LARGE = 'display-number-large',
 
   TITLE_SCREEN = 'title-screen',
   TITLE_SECTION = 'title-section',
@@ -30,10 +36,23 @@ export type DisplayExtraLarge = 'display-extra-large';
 export type DisplayLarge = 'display-large';
 export type DisplayMedium = 'display-medium';
 export type DisplaySmall = 'display-small';
+/**
+ * @deprecated Use {@link DisplayNumberSmall} instead.
+ */
 export type DisplayNumber = 'display-number';
+export type DisplayNumberSmall = 'display-number-small';
+export type DisplayNumberMedium = 'display-number-medium';
+export type DisplayNumberLarge = 'display-number-large';
 
 export type DisplayTypes =
-  DisplayExtraLarge | DisplayLarge | DisplayMedium | DisplaySmall | DisplayNumber;
+  | DisplayExtraLarge
+  | DisplayLarge
+  | DisplayMedium
+  | DisplaySmall
+  | DisplayNumber
+  | DisplayNumberSmall
+  | DisplayNumberMedium
+  | DisplayNumberLarge;
 
 export type TitleScreen = 'title-screen';
 export type TitleSection = 'title-section';