@transferwise/components 46.160.7 → 46.160.8

package/build/styles/styles/less/popovers.css

@@ -72,6 +72,7 @@ button.close {
   letter-spacing: -0.006em;
   font-weight: 400;
   font-weight: var(--font-weight-regular);
+  word-wrap: break-word;
   background-color: #ffffff;
   background-color: var(--color-background-screen);
   background-clip: padding-box;
@@ -79,6 +80,34 @@ button.close {
   box-shadow: 0 20px 66px 0 rgba(34, 48, 73, 0.2);
   position: absolute;
 }
+@supports (hyphenate-limit-chars: 1) {
+  .popover {
+    hyphens: auto;
+    hyphenate-limit-chars: 7 3;
+  }
+  @media (min-width: 840px) {
+    .popover {
+      hyphenate-limit-chars: 8 3;
+    }
+  }
+  @media (min-width: 1160px) {
+    .popover {
+      hyphenate-limit-chars: 10 4 3;
+    }
+  }
+}
+@supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
+  .popover {
+    hyphens: auto;
+    -webkit-hyphenate-limit-before: 3;
+    -webkit-hyphenate-limit-after: 3;
+  }
+  @media (min-width: 1160px) {
+    .popover {
+      -webkit-hyphenate-limit-before: 4;
+    }
+  }
+}
 .np-theme-personal--forest-green .popover,
 .np-theme-personal--bright-green .popover,
 .np-theme-personal--dark .popover {
@@ -236,6 +265,7 @@ button.close {
   line-height: 1.2;
   line-height: var(--line-height-title);
   letter-spacing: 0;
+  word-wrap: break-word;
   font-size: 1.125rem;
   font-size: var(--font-size-18);
   font-weight: 600;
@@ -293,9 +323,38 @@ button.close {
   letter-spacing: -0.006em;
   font-weight: 400;
   font-weight: var(--font-weight-regular);
+  word-wrap: break-word;
   color: #5d7079;
   color: var(--color-content-secondary);
 }
+@supports (hyphenate-limit-chars: 1) {
+  .popover-content {
+    hyphens: auto;
+    hyphenate-limit-chars: 7 3;
+  }
+  @media (min-width: 840px) {
+    .popover-content {
+      hyphenate-limit-chars: 8 3;
+    }
+  }
+  @media (min-width: 1160px) {
+    .popover-content {
+      hyphenate-limit-chars: 10 4 3;
+    }
+  }
+}
+@supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
+  .popover-content {
+    hyphens: auto;
+    -webkit-hyphenate-limit-before: 3;
+    -webkit-hyphenate-limit-after: 3;
+  }
+  @media (min-width: 1160px) {
+    .popover-content {
+      -webkit-hyphenate-limit-before: 4;
+    }
+  }
+}
 .popover-content > :last-child {
   margin-block-end: 0;
 }

package/build/styles/styles/less/tooltip.css

@@ -51,6 +51,7 @@
   letter-spacing: -0.006em;
   font-weight: 400;
   font-weight: var(--font-weight-regular);
+  word-wrap: break-word;
   max-inline-size: 200px;
   min-inline-size: 120px;
   padding-block: 16px;
@@ -65,6 +66,34 @@
   border-radius: 3px;
   box-shadow: 0 1px 28px 0 rgba(34, 48, 73, 0.2);
 }
+@supports (hyphenate-limit-chars: 1) {
+  .tooltip-inner {
+    hyphens: auto;
+    hyphenate-limit-chars: 7 3;
+  }
+  @media (min-width: 840px) {
+    .tooltip-inner {
+      hyphenate-limit-chars: 8 3;
+    }
+  }
+  @media (min-width: 1160px) {
+    .tooltip-inner {
+      hyphenate-limit-chars: 10 4 3;
+    }
+  }
+}
+@supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
+  .tooltip-inner {
+    hyphens: auto;
+    -webkit-hyphenate-limit-before: 3;
+    -webkit-hyphenate-limit-after: 3;
+  }
+  @media (min-width: 1160px) {
+    .tooltip-inner {
+      -webkit-hyphenate-limit-before: 4;
+    }
+  }
+}
 .np-theme-personal--forest-green .tooltip-inner,
 .np-theme-personal--bright-green .tooltip-inner,
 .np-theme-personal--dark .tooltip-inner {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "46.160.7",
+  "version": "46.160.8",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {
@@ -92,8 +92,8 @@
     "storybook-addon-tag-badges": "^3.1.0",
     "storybook-addon-test-codegen": "^3.0.4",
     "@transferwise/less-config": "3.2.0",
-    "@wise/components-theming": "1.10.3",
-    "@wise/wds-configs": "0.0.0"
+    "@wise/wds-configs": "0.0.0",
+    "@wise/components-theming": "1.10.3"
   },
   "peerDependencies": {
     "@transferwise/icons": "^3 || ^4",

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

@@ -0,0 +1,81 @@
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+
+import Body from '../Body';
+import Container from '../../Container';
+import Title from '../../Title';
+import { Typography } from '../../common/PropsValues/typography';
+import { withVariantConfig } from '../../../.storybook/helpers';
+
+export default {
+  title: 'Typography/Body/Tests',
+  component: Body,
+  tags: ['!autodocs', '!manifest'],
+} satisfies Meta<typeof Body>;
+
+type Story = StoryObj<typeof Body>;
+
+const HyphenationTest = {
+  render: () => (
+    <Container size="compact">
+      <Title type={Typography.TITLE_SUBSECTION}>German (de)</Title>
+      <div lang="de">
+        <Body as="p" type={Typography.BODY_DEFAULT}>
+          Donaudampfschifffahrtsgesellschaftskapitän Überweisungsgebühren
+          Rechtsschutzversicherungsgesellschaften Kraftfahrzeughaftpflichtversicherung
+          Geschwindigkeitsbeschränkung Aufmerksamkeitsdefizithyperaktivitätsstörung
+          Bundesausbildungsförderungsgesetz
+          Rindfleischetikettierungsüberwachungsaufgabenübertragungsgesetz
+        </Body>
+      </div>
+
+      <Title type={Typography.TITLE_SUBSECTION}>Dutch (nl)</Title>
+      <div lang="nl">
+        <Body as="p" type={Typography.BODY_DEFAULT}>
+          Verzekeringsmaatschappij arbeidsongeschiktheidsverzekering
+          kindercarnavalsoptochtvoorbereidingswerkzaamheden aansprakelijkheidsverzekering
+          gemeenteraadsverkiezingen rijkswaterstaatwerkzaamheden ovaboratoriumonderzoeksresultaten
+        </Body>
+      </div>
+
+      <Title type={Typography.TITLE_SUBSECTION}>Ukrainian (uk)</Title>
+      <div lang="uk">
+        <Body as="p" type={Typography.BODY_DEFAULT}>
+          Найбільш міжнародний рахунок відповідальність працевлаштування перевантажувальний Найбільш
+          міжнародний рахунок відповідальність працевлаштування перевантажувальний Найбільш
+          міжнародний рахунок відповідальність працевлаштування перевантажувальний.
+        </Body>
+      </div>
+
+      <Title type={Typography.TITLE_SUBSECTION}>Japanese (ja) — no hyphens</Title>
+      <div lang="ja">
+        <Body as="p" type={Typography.BODY_DEFAULT}>
+          私たちは世界で最も国際的なアカウントを構築しています。送金手数料についてもっと知りたい方はこちらをご覧ください。
+        </Body>
+      </div>
+
+      <Title type={Typography.TITLE_SUBSECTION}>Chinese Simplified (zh-CN) — no hyphens</Title>
+      <div lang="zh-CN">
+        <Body as="p" type={Typography.BODY_DEFAULT}>
+          我们正在建设世界上最国际化的账户。如果您想了解更多关于汇款费用的信息请查看这里。
+        </Body>
+      </div>
+
+      <Title type={Typography.TITLE_SUBSECTION}>Thai (th) — no hyphens</Title>
+      <div lang="th">
+        <Body as="p" type={Typography.BODY_DEFAULT}>
+          เรากำลังสร้างบัญชีที่เป็นสากลที่สุดในโลก
+          หากคุณต้องการทราบข้อมูลเพิ่มเติมเกี่ยวกับค่าธรรมเนียมการโอนเงิน
+        </Body>
+      </div>
+    </Container>
+  ),
+};
+
+export const Hyphenation: Story = {
+  ...HyphenationTest,
+};
+
+export const HyphenationMobile: Story = {
+  ...HyphenationTest,
+  ...withVariantConfig(['mobile'], HyphenationTest),
+};

package/src/Inputs/Input/Input.css

@@ -45,11 +45,40 @@
   font-size: var(--font-size-16);
   line-height: 150%;
   letter-spacing: -0.011em;
+  word-wrap: break-word;
   padding-block-start: 12px;
   padding-block-start: var(--size-12);
   padding-block-end: 12px;
   padding-block-end: var(--size-12);
 }
+@supports (hyphenate-limit-chars: 1) {
+  .np-form-control--size-auto {
+    hyphens: auto;
+    hyphenate-limit-chars: 7 3;
+  }
+  @media (min-width: 840px) {
+    .np-form-control--size-auto {
+      hyphenate-limit-chars: 8 3;
+    }
+  }
+  @media (min-width: 1160px) {
+    .np-form-control--size-auto {
+      hyphenate-limit-chars: 10 4 3;
+    }
+  }
+}
+@supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
+  .np-form-control--size-auto {
+    hyphens: auto;
+    -webkit-hyphenate-limit-before: 3;
+    -webkit-hyphenate-limit-after: 3;
+  }
+  @media (min-width: 1160px) {
+    .np-form-control--size-auto {
+      -webkit-hyphenate-limit-before: 4;
+    }
+  }
+}
 .np-form-control--size-sm,
 .np-form-control--size-md,
 .np-form-control--size-lg {
@@ -63,9 +92,38 @@
   letter-spacing: -0.006em;
   font-weight: 400;
   font-weight: var(--font-weight-regular);
+  word-wrap: break-word;
   block-size: 32px !important;
   block-size: var(--size-32) !important;
 }
+@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;
+    }
+  }
+}
 @media (max-width: 320px) {
   .np-form-control--size-sm {
     block-size: 64px !important;
@@ -79,9 +137,38 @@
   font-size: var(--font-size-16);
   line-height: 150%;
   letter-spacing: -0.011em;
+  word-wrap: break-word;
   block-size: 48px !important;
   block-size: var(--size-48) !important;
 }
+@supports (hyphenate-limit-chars: 1) {
+  .np-form-control--size-md {
+    hyphens: auto;
+    hyphenate-limit-chars: 7 3;
+  }
+  @media (min-width: 840px) {
+    .np-form-control--size-md {
+      hyphenate-limit-chars: 8 3;
+    }
+  }
+  @media (min-width: 1160px) {
+    .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-md {
+    hyphens: auto;
+    -webkit-hyphenate-limit-before: 3;
+    -webkit-hyphenate-limit-after: 3;
+  }
+  @media (min-width: 1160px) {
+    .np-form-control--size-md {
+      -webkit-hyphenate-limit-before: 4;
+    }
+  }
+}
 @media (max-width: 320px) {
   .np-form-control--size-md {
     block-size: 72px !important;
@@ -95,6 +182,7 @@
   line-height: 1.2;
   line-height: var(--line-height-title);
   letter-spacing: 0;
+  word-wrap: break-word;
   margin-block-end: initial;
   font-size: 1.375rem;
   font-size: var(--font-size-22);

package/src/Inputs/TextArea/TextArea.css

@@ -45,11 +45,40 @@
   font-size: var(--font-size-16);
   line-height: 150%;
   letter-spacing: -0.011em;
+  word-wrap: break-word;
   padding-block-start: 12px;
   padding-block-start: var(--size-12);
   padding-block-end: 12px;
   padding-block-end: var(--size-12);
 }
+@supports (hyphenate-limit-chars: 1) {
+  .np-form-control--size-auto {
+    hyphens: auto;
+    hyphenate-limit-chars: 7 3;
+  }
+  @media (min-width: 840px) {
+    .np-form-control--size-auto {
+      hyphenate-limit-chars: 8 3;
+    }
+  }
+  @media (min-width: 1160px) {
+    .np-form-control--size-auto {
+      hyphenate-limit-chars: 10 4 3;
+    }
+  }
+}
+@supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
+  .np-form-control--size-auto {
+    hyphens: auto;
+    -webkit-hyphenate-limit-before: 3;
+    -webkit-hyphenate-limit-after: 3;
+  }
+  @media (min-width: 1160px) {
+    .np-form-control--size-auto {
+      -webkit-hyphenate-limit-before: 4;
+    }
+  }
+}
 .np-form-control--size-sm,
 .np-form-control--size-md,
 .np-form-control--size-lg {
@@ -63,9 +92,38 @@
   letter-spacing: -0.006em;
   font-weight: 400;
   font-weight: var(--font-weight-regular);
+  word-wrap: break-word;
   block-size: 32px !important;
   block-size: var(--size-32) !important;
 }
+@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;
+    }
+  }
+}
 @media (max-width: 320px) {
   .np-form-control--size-sm {
     block-size: 64px !important;
@@ -79,9 +137,38 @@
   font-size: var(--font-size-16);
   line-height: 150%;
   letter-spacing: -0.011em;
+  word-wrap: break-word;
   block-size: 48px !important;
   block-size: var(--size-48) !important;
 }
+@supports (hyphenate-limit-chars: 1) {
+  .np-form-control--size-md {
+    hyphens: auto;
+    hyphenate-limit-chars: 7 3;
+  }
+  @media (min-width: 840px) {
+    .np-form-control--size-md {
+      hyphenate-limit-chars: 8 3;
+    }
+  }
+  @media (min-width: 1160px) {
+    .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-md {
+    hyphens: auto;
+    -webkit-hyphenate-limit-before: 3;
+    -webkit-hyphenate-limit-after: 3;
+  }
+  @media (min-width: 1160px) {
+    .np-form-control--size-md {
+      -webkit-hyphenate-limit-before: 4;
+    }
+  }
+}
 @media (max-width: 320px) {
   .np-form-control--size-md {
     block-size: 72px !important;
@@ -95,6 +182,7 @@
   line-height: 1.2;
   line-height: var(--line-height-title);
   letter-spacing: 0;
+  word-wrap: break-word;
   margin-block-end: initial;
   font-size: 1.375rem;
   font-size: var(--font-size-22);

package/src/Popover/Popover.css

@@ -29,6 +29,7 @@
   line-height: 1.2;
   line-height: var(--line-height-title);
   letter-spacing: 0;
+  word-wrap: break-word;
   margin-block-end: initial;
   font-weight: 600;
   font-weight: var(--font-weight-semi-bold);

package/src/_deprecated/Card/_stories/Card.test.story.tsx

@@ -7,7 +7,7 @@ import Card from '..';
 export default {
   component: Card,
   title: 'Layouts/Card/Tests',
-  tags: ['!autodocs', '!manifest'],
+  tags: ['!autodocs', '!manifest', 'deprecated'],
 } satisfies Meta<typeof Card>;
 
 type Story = StoryObj<typeof Card>;

package/src/_deprecated/CriticalBanner/_stories/CriticalCommsBanner.test.story.tsx

@@ -7,7 +7,7 @@ import { withRTLDiff } from '../../../../.storybook/decorators/RtlDiffDecorator'
 export default {
   component: CriticalCommsBanner,
   title: 'Prompts/CriticalCommsBanner/Tests',
-  tags: ['!autodocs', 'deprecated'],
+  tags: ['!autodocs', 'deprecated', 'deprecated'],
 } satisfies Meta<typeof CriticalCommsBanner>;
 
 type Story = StoryObj<typeof CriticalCommsBanner>;

package/src/_deprecated/InlineAlert/_stories/InlineAlert.test.story.tsx

@@ -6,7 +6,7 @@ import InlineAlert from '..';
 export default {
   component: InlineAlert,
   title: 'Prompts/InlineAlert/Tests',
-  tags: ['!autodocs', '!manifest'],
+  tags: ['!autodocs', '!manifest', 'deprecated'],
 } satisfies Meta<typeof InlineAlert>;
 
 type Story = StoryObj<typeof InlineAlert>;

package/src/_deprecated/OverlayHeader/_stories/OverlayHeader.test.story.tsx

@@ -9,7 +9,7 @@ import OverlayHeader from '..';
 export default {
   component: OverlayHeader,
   title: 'Navigation/OverlayHeader/Tests',
-  tags: ['!autodocs', '!manifest'],
+  tags: ['!autodocs', '!manifest', 'deprecated'],
 } satisfies Meta<typeof OverlayHeader>;
 
 type Story = StoryObj<typeof OverlayHeader>;

package/src/_deprecated/Select/Select.css

@@ -152,11 +152,40 @@
   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 {
   border-radius: 10px;
   border-radius: var(--radius-small);
 }
+@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-dropdown-menu > li:first-child > a {
   border-start-end-radius: 3px;
   border-start-start-radius: 3px;

package/src/_deprecated/Select/_stories/Select.rtl.test.story.tsx

@@ -8,7 +8,7 @@ import Select from '..';
 export default {
   component: Select,
   title: 'Forms/Select/Tests/RTL Diff',
-  tags: ['!autodocs', '!manifest'],
+  tags: ['!autodocs', '!manifest', 'deprecated'],
 } satisfies Meta<typeof Select>;
 
 type Story = StoryObj<typeof Select>;

package/src/_deprecated/Select/_stories/Select.test.story.tsx

@@ -8,7 +8,7 @@ import Select, { SelectOptionItem } from '../Select';
 const meta = {
   title: 'Forms/Select/Tests',
   component: Select,
-  tags: ['!autodocs', '!manifest'],
+  tags: ['!autodocs', '!manifest', 'deprecated'],
 } satisfies Meta<typeof Select>;
 export default meta;