@transferwise/components 46.96.0 → 46.96.1

package/build/main.css

@@ -2585,6 +2585,8 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   line-height: 1.2;
   line-height: var(--line-height-title);
   letter-spacing: 0;
+  -webkit-hyphens: auto;
+          hyphens: auto;
   margin-bottom: 0;
   margin-bottom: initial;
   font-size: 1.375rem;
@@ -4021,6 +4023,8 @@ html:not([dir="rtl"]) .np-navigation-option {
   line-height: 1.2;
   line-height: var(--line-height-title);
   letter-spacing: 0;
+  -webkit-hyphens: auto;
+          hyphens: auto;
   margin-bottom: 0;
   margin-bottom: initial;
   font-weight: 600;
@@ -4435,7 +4439,10 @@ html:not([dir="rtl"]) .np-navigation-option {
   }
 }
 .status-circle .light {
-  color: var(--color-contrast);
+  color: var(--color-contrast-overlay);
+}
+.np-theme-personal--bright-green .status-circle .light {
+  color: var(--color-white);
 }
 .status-circle .dark {
   color: #37517e;
@@ -4453,6 +4460,10 @@ html:not([dir="rtl"]) .np-navigation-option {
 .status-circle.error {
   background-color: var(--color-sentiment-negative);
 }
+.status-circle.negative .status-icon,
+.status-circle.error .status-icon {
+  color: var(--color-sentiment-negative-secondary);
+}
 .status-circle.neutral {
   background-color: #5d7079;
   background-color: var(--color-content-secondary);
@@ -4461,6 +4472,10 @@ html:not([dir="rtl"]) .np-navigation-option {
 .status-circle.success {
   background-color: var(--color-sentiment-positive);
 }
+.status-circle.positive .status-icon,
+.status-circle.success .status-icon {
+  color: var(--color-sentiment-positive-secondary);
+}
 .tw-stepper {
   padding-bottom: 24px;
   width: 100%;

package/build/styles/inputs/Input.css

@@ -71,6 +71,8 @@
   line-height: 1.2;
   line-height: var(--line-height-title);
   letter-spacing: 0;
+  -webkit-hyphens: auto;
+          hyphens: auto;
   margin-bottom: 0;
   margin-bottom: initial;
   font-size: 1.375rem;

package/build/styles/inputs/TextArea.css

@@ -71,6 +71,8 @@
   line-height: 1.2;
   line-height: var(--line-height-title);
   letter-spacing: 0;
+  -webkit-hyphens: auto;
+          hyphens: auto;
   margin-bottom: 0;
   margin-bottom: initial;
   font-size: 1.375rem;

package/build/styles/main.css

@@ -2585,6 +2585,8 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   line-height: 1.2;
   line-height: var(--line-height-title);
   letter-spacing: 0;
+  -webkit-hyphens: auto;
+          hyphens: auto;
   margin-bottom: 0;
   margin-bottom: initial;
   font-size: 1.375rem;
@@ -4021,6 +4023,8 @@ html:not([dir="rtl"]) .np-navigation-option {
   line-height: 1.2;
   line-height: var(--line-height-title);
   letter-spacing: 0;
+  -webkit-hyphens: auto;
+          hyphens: auto;
   margin-bottom: 0;
   margin-bottom: initial;
   font-weight: 600;
@@ -4435,7 +4439,10 @@ html:not([dir="rtl"]) .np-navigation-option {
   }
 }
 .status-circle .light {
-  color: var(--color-contrast);
+  color: var(--color-contrast-overlay);
+}
+.np-theme-personal--bright-green .status-circle .light {
+  color: var(--color-white);
 }
 .status-circle .dark {
   color: #37517e;
@@ -4453,6 +4460,10 @@ html:not([dir="rtl"]) .np-navigation-option {
 .status-circle.error {
   background-color: var(--color-sentiment-negative);
 }
+.status-circle.negative .status-icon,
+.status-circle.error .status-icon {
+  color: var(--color-sentiment-negative-secondary);
+}
 .status-circle.neutral {
   background-color: #5d7079;
   background-color: var(--color-content-secondary);
@@ -4461,6 +4472,10 @@ html:not([dir="rtl"]) .np-navigation-option {
 .status-circle.success {
   background-color: var(--color-sentiment-positive);
 }
+.status-circle.positive .status-icon,
+.status-circle.success .status-icon {
+  color: var(--color-sentiment-positive-secondary);
+}
 .tw-stepper {
   padding-bottom: 24px;
   width: 100%;

package/build/styles/popover/Popover.css

@@ -24,6 +24,8 @@
   line-height: 1.2;
   line-height: var(--line-height-title);
   letter-spacing: 0;
+  -webkit-hyphens: auto;
+          hyphens: auto;
   margin-bottom: 0;
   margin-bottom: initial;
   font-weight: 600;

package/build/styles/statusIcon/StatusIcon.css

@@ -1,5 +1,8 @@
 .status-circle .light {
-  color: var(--color-contrast);
+  color: var(--color-contrast-overlay);
+}
+.np-theme-personal--bright-green .status-circle .light {
+  color: var(--color-white);
 }
 .status-circle .dark {
   color: #37517e;
@@ -17,6 +20,10 @@
 .status-circle.error {
   background-color: var(--color-sentiment-negative);
 }
+.status-circle.negative .status-icon,
+.status-circle.error .status-icon {
+  color: var(--color-sentiment-negative-secondary);
+}
 .status-circle.neutral {
   background-color: #5d7079;
   background-color: var(--color-content-secondary);
@@ -25,3 +32,7 @@
 .status-circle.success {
   background-color: var(--color-sentiment-positive);
 }
+.status-circle.positive .status-icon,
+.status-circle.success .status-icon {
+  color: var(--color-sentiment-positive-secondary);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "46.96.0",
+  "version": "46.96.1",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {
@@ -95,8 +95,8 @@
     "rollup-preserve-directives": "^1.1.1",
     "storybook": "^8.2.2",
     "@transferwise/less-config": "3.1.1",
+    "@transferwise/neptune-css": "14.24.3",
     "@wise/components-theming": "1.6.2",
-    "@transferwise/neptune-css": "14.24.2",
     "@wise/wds-configs": "0.0.0"
   },
   "peerDependencies": {

package/src/inputs/Input.css

@@ -71,6 +71,8 @@
   line-height: 1.2;
   line-height: var(--line-height-title);
   letter-spacing: 0;
+  -webkit-hyphens: auto;
+          hyphens: auto;
   margin-bottom: 0;
   margin-bottom: initial;
   font-size: 1.375rem;

package/src/inputs/TextArea.css

@@ -71,6 +71,8 @@
   line-height: 1.2;
   line-height: var(--line-height-title);
   letter-spacing: 0;
+  -webkit-hyphens: auto;
+          hyphens: auto;
   margin-bottom: 0;
   margin-bottom: initial;
   font-size: 1.375rem;

package/src/main.css

@@ -2585,6 +2585,8 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   line-height: 1.2;
   line-height: var(--line-height-title);
   letter-spacing: 0;
+  -webkit-hyphens: auto;
+          hyphens: auto;
   margin-bottom: 0;
   margin-bottom: initial;
   font-size: 1.375rem;
@@ -4021,6 +4023,8 @@ html:not([dir="rtl"]) .np-navigation-option {
   line-height: 1.2;
   line-height: var(--line-height-title);
   letter-spacing: 0;
+  -webkit-hyphens: auto;
+          hyphens: auto;
   margin-bottom: 0;
   margin-bottom: initial;
   font-weight: 600;
@@ -4435,7 +4439,10 @@ html:not([dir="rtl"]) .np-navigation-option {
   }
 }
 .status-circle .light {
-  color: var(--color-contrast);
+  color: var(--color-contrast-overlay);
+}
+.np-theme-personal--bright-green .status-circle .light {
+  color: var(--color-white);
 }
 .status-circle .dark {
   color: #37517e;
@@ -4453,6 +4460,10 @@ html:not([dir="rtl"]) .np-navigation-option {
 .status-circle.error {
   background-color: var(--color-sentiment-negative);
 }
+.status-circle.negative .status-icon,
+.status-circle.error .status-icon {
+  color: var(--color-sentiment-negative-secondary);
+}
 .status-circle.neutral {
   background-color: #5d7079;
   background-color: var(--color-content-secondary);
@@ -4461,6 +4472,10 @@ html:not([dir="rtl"]) .np-navigation-option {
 .status-circle.success {
   background-color: var(--color-sentiment-positive);
 }
+.status-circle.positive .status-icon,
+.status-circle.success .status-icon {
+  color: var(--color-sentiment-positive-secondary);
+}
 .tw-stepper {
   padding-bottom: 24px;
   width: 100%;

package/src/popover/Popover.css

@@ -24,6 +24,8 @@
   line-height: 1.2;
   line-height: var(--line-height-title);
   letter-spacing: 0;
+  -webkit-hyphens: auto;
+          hyphens: auto;
   margin-bottom: 0;
   margin-bottom: initial;
   font-weight: 600;

package/src/statusIcon/StatusIcon.css

@@ -1,5 +1,8 @@
 .status-circle .light {
-  color: var(--color-contrast);
+  color: var(--color-contrast-overlay);
+}
+.np-theme-personal--bright-green .status-circle .light {
+  color: var(--color-white);
 }
 .status-circle .dark {
   color: #37517e;
@@ -17,6 +20,10 @@
 .status-circle.error {
   background-color: var(--color-sentiment-negative);
 }
+.status-circle.negative .status-icon,
+.status-circle.error .status-icon {
+  color: var(--color-sentiment-negative-secondary);
+}
 .status-circle.neutral {
   background-color: #5d7079;
   background-color: var(--color-content-secondary);
@@ -25,3 +32,7 @@
 .status-circle.success {
   background-color: var(--color-sentiment-positive);
 }
+.status-circle.positive .status-icon,
+.status-circle.success .status-icon {
+  color: var(--color-sentiment-positive-secondary);
+}

package/src/statusIcon/StatusIcon.less

@@ -1,6 +1,10 @@
 .status-circle {
   .light {
-    color: var(--color-contrast);
+    color: var(--color-contrast-overlay);
+
+    .np-theme-personal--bright-green & {
+      color: var(--color-white);
+    }
   }
 
   .dark {
@@ -22,6 +26,9 @@
 .status-circle.negative,
 .status-circle.error {
   background-color: var(--color-sentiment-negative);
+  .status-icon {
+    color: var(--color-sentiment-negative-secondary);
+  }
 }
 
 .status-circle.neutral {
@@ -31,4 +38,7 @@
 .status-circle.positive,
 .status-circle.success {
   background-color: var(--color-sentiment-positive);
+  .status-icon {
+    color: var(--color-sentiment-positive-secondary);
+  }
 }

package/src/statusIcon/StatusIcon.story.tsx

@@ -3,6 +3,7 @@ import { Meta, StoryObj } from '@storybook/react';
 import { Sentiment, Size } from '../common';
 
 import StatusIcon from './StatusIcon';
+import { storyConfig } from '../test-utils';
 
 export default {
   component: StatusIcon,
@@ -28,36 +29,42 @@ export const Presentational: Story = {
   },
 };
 
-export const Variants: Story = {
-  render: () => (
-    <span style={{ display: 'flex', justifyContent: 'space-between', maxWidth: '400px' }}>
-      {[
-        Sentiment.POSITIVE,
-        Sentiment.NEGATIVE,
-        Sentiment.WARNING,
-        Sentiment.NEUTRAL,
-        Sentiment.PENDING,
-      ].map((sentiment) => {
-        return (
-          <span
-            key={sentiment}
-            style={{
-              display: 'flex',
-              justifyContent: 'space-between',
-              flexDirection: 'column',
-              minHeight: '150px',
-              alignItems: 'center',
-            }}
-          >
-            {([16, 24, 32, 40, 48, 56, 72] as const).map((size) => {
-              return <StatusIcon key={size} size={size} sentiment={sentiment} />;
-            })}
-          </span>
-        );
-      })}
-    </span>
-  ),
-};
+export const Variants = storyConfig(
+  {
+    parameters: {
+      padding: '0',
+    },
+    render: () => (
+      <span style={{ display: 'flex', justifyContent: 'space-between', maxWidth: '400px' }}>
+        {[
+          Sentiment.POSITIVE,
+          Sentiment.NEGATIVE,
+          Sentiment.WARNING,
+          Sentiment.NEUTRAL,
+          Sentiment.PENDING,
+        ].map((sentiment) => {
+          return (
+            <span
+              key={sentiment}
+              style={{
+                display: 'flex',
+                justifyContent: 'space-between',
+                flexDirection: 'column',
+                minHeight: '150px',
+                alignItems: 'center',
+              }}
+            >
+              {([16, 24, 32, 40, 48, 56, 72] as const).map((size) => {
+                return <StatusIcon key={size} size={size} sentiment={sentiment} />;
+              })}
+            </span>
+          );
+        })}
+      </span>
+    ),
+  },
+  { variants: ['default', 'dark', 'bright-green', 'forest-green'] },
+);
 
 export const LegacySizes: Story = {
   render: () => (

package/src/title/Title.test.story.tsx

@@ -0,0 +1,25 @@
+import { Typography } from '../common/propsValues/typography';
+import Modal from '../modal';
+import { lorem1000 } from '../test-utils';
+
+import Title from './Title';
+
+export default {
+  component: Title,
+  title: 'Typography/Title/Tests',
+};
+
+export const Hyphenation = () => {
+  return (
+    <Modal
+      open
+      body={
+        <Title type={Typography.TITLE_SCREEN} style={{ maxWidth: '600px' }}>
+          This Screen Title is mostly one very long word and it hyphenates{' '}
+          {lorem1000.replaceAll(' ', '')}
+        </Title>
+      }
+      onClose={() => {}}
+    />
+  );
+};