@transferwise/components 46.130.3 → 46.131.0

package/build/styles/styles/less/utilities.css

@@ -0,0 +1,145 @@
+.d-inline-block {
+  display: inline-block;
+}
+.d-inline {
+  display: inline;
+}
+.clearfix::before,
+.clearfix::after {
+  content: " ";
+  display: table;
+}
+.clearfix::after {
+  clear: both;
+}
+.center-block {
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+}
+.pull-right,
+.pull-xs-right {
+  float: right !important;
+}
+[dir="rtl"] .pull-right,
+[dir="rtl"] .pull-xs-right {
+  float: left !important;
+}
+.pull-left,
+.pull-xs-left {
+  float: left !important;
+}
+[dir="rtl"] .pull-left,
+[dir="rtl"] .pull-xs-left {
+  float: right !important;
+}
+.pull-xs-none {
+  float: none !important;
+}
+@media (min-width: 576px) {
+  .pull-sm-left {
+    float: left !important;
+  }
+  [dir="rtl"] .pull-sm-left {
+    float: right !important;
+  }
+  .pull-sm-right {
+    float: right !important;
+  }
+  [dir="rtl"] .pull-sm-right {
+    float: left !important;
+  }
+  .pull-sm-none {
+    float: none !important;
+  }
+}
+@media (min-width: 768px) {
+  .pull-md-left {
+    float: left !important;
+  }
+  [dir="rtl"] .pull-md-left {
+    float: right !important;
+  }
+  .pull-md-right {
+    float: right !important;
+  }
+  [dir="rtl"] .pull-md-right {
+    float: left !important;
+  }
+  .pull-md-none {
+    float: none !important;
+  }
+}
+@media (min-width: 992px) {
+  .pull-lg-left {
+    float: left !important;
+  }
+  [dir="rtl"] .pull-lg-left {
+    float: right !important;
+  }
+  .pull-lg-right {
+    float: right !important;
+  }
+  [dir="rtl"] .pull-lg-right {
+    float: left !important;
+  }
+  .pull-lg-none {
+    float: none !important;
+  }
+}
+@media (min-width: 1200px) {
+  .pull-xl-left {
+    float: left !important;
+  }
+  [dir="rtl"] .pull-xl-left {
+    float: right !important;
+  }
+  .pull-xl-right {
+    float: right !important;
+  }
+  [dir="rtl"] .pull-xl-right {
+    float: left !important;
+  }
+  .pull-xl-none {
+    float: none !important;
+  }
+}
+.pull-left-single-direction {
+  float: left !important;
+}
+.pull-right-single-direction {
+  float: right !important;
+}
+.hide {
+  display: none !important;
+}
+.show {
+  display: block !important;
+}
+.invisible {
+  visibility: hidden;
+}
+.text-hide {
+  color: transparent;
+  text-shadow: none;
+  background-color: transparent;
+  border: 0;
+}
+.hidden {
+  display: none !important;
+}
+.affix {
+  position: fixed;
+}
+.rotate90 {
+  transform: rotate(90deg);
+}
+.rotate180 {
+  transform: rotate(180deg);
+}
+.rotate270 {
+  transform: rotate(270deg);
+}
+.rotate-90 {
+  transform: rotate(-90deg);
+}

package/build/styles/styles/less/wells.css

@@ -0,0 +1,74 @@
+.well,
+.well-xs {
+  min-height: 24px;
+  min-height: var(--size-24);
+  margin-bottom: 24px;
+  margin-bottom: var(--size-24);
+  border-radius: 10px;
+  border-radius: var(--radius-small);
+  border: solid 1px rgba(0,0,0,0.10196);
+  border: solid 1px var(--color-border-neutral);
+  padding: 24px;
+  padding: var(--size-24);
+  box-shadow: none;
+}
+@media only screen and (min-width: 576px) {
+  .well-sm {
+    min-height: 24px;
+    min-height: var(--size-24);
+    margin-bottom: 24px;
+    margin-bottom: var(--size-24);
+    border-radius: 10px;
+    border-radius: var(--radius-small);
+    border: solid 1px rgba(0,0,0,0.10196);
+    border: solid 1px var(--color-border-neutral);
+    padding: 24px;
+    padding: var(--size-24);
+    box-shadow: none;
+  }
+}
+@media only screen and (min-width: 768px) {
+  .well-md {
+    min-height: 24px;
+    min-height: var(--size-24);
+    margin-bottom: 24px;
+    margin-bottom: var(--size-24);
+    border-radius: 10px;
+    border-radius: var(--radius-small);
+    border: solid 1px rgba(0,0,0,0.10196);
+    border: solid 1px var(--color-border-neutral);
+    padding: 24px;
+    padding: var(--size-24);
+    box-shadow: none;
+  }
+}
+@media only screen and (min-width: 992px) {
+  .well-lg {
+    min-height: 24px;
+    min-height: var(--size-24);
+    margin-bottom: 24px;
+    margin-bottom: var(--size-24);
+    border-radius: 10px;
+    border-radius: var(--radius-small);
+    border: solid 1px rgba(0,0,0,0.10196);
+    border: solid 1px var(--color-border-neutral);
+    padding: 24px;
+    padding: var(--size-24);
+    box-shadow: none;
+  }
+}
+@media only screen and (min-width: 1200px) {
+  .well-xl {
+    min-height: 24px;
+    min-height: var(--size-24);
+    margin-bottom: 24px;
+    margin-bottom: var(--size-24);
+    border-radius: 10px;
+    border-radius: var(--radius-small);
+    border: solid 1px rgba(0,0,0,0.10196);
+    border: solid 1px var(--color-border-neutral);
+    padding: 24px;
+    padding: var(--size-24);
+    box-shadow: none;
+  }
+}

package/build/styles/styles/props/custom-media.css

@@ -0,0 +1,11 @@
+@custom-media --screen-xs (min-width: 480px);
+@custom-media --screen-xs-max (max-width: 575px); /* --screen-sm - 1 */
+@custom-media --screen-sm (min-width: 576px);
+@custom-media --screen-sm-max (max-width: 767px); /* --screen-md - 1 */
+@custom-media --screen-md (min-width: 768px);
+@custom-media --screen-md-max (max-width: 991px); /* --screen-lg - 1 */
+@custom-media --screen-lg (min-width: 992px);
+@custom-media --screen-lg-max (max-width: 1199px); /* --screen-xl - 1 */
+@custom-media --screen-xl (min-width: 1200px);
+
+@custom-media --screen-400-zoom (max-width: 320px); /* ~400% zoom viewport */

package/build/styles/styles/props/legacy-custom-props.css

@@ -0,0 +1,69 @@
+/*
+  DEPRECATED
+  Use neptune-tokens.css instead.
+  If the token you want isn't available there, raise an issue in @transferwise/neptune-tokens.
+*/
+:root {
+  --border-radius: var(--radius-small);
+  --spacer: 8px;
+  --space-4: 4px;
+  --space-8: 8px;
+  --space-12: 12px;
+  --space-16: 16px;
+  --space-24: 24px;
+  --space-32: 32px;
+  --space-40: 40px;
+  --space-48: 48px;
+  --space-56: 56px;
+  --space-64: 64px;
+  --color-text-link-hover: #00a4df;
+  --color-text-link-active: #008ec0;
+  --brand-white: #fff;
+  --link-color: #00b9ff;
+  --brand-pale-blue: #dbf0fd;
+  --brand-navy-minus-20: #253655;
+  --brand-navy-minus-10: #2e4369;
+  --brand-navy: #37517e;
+  --brand-blue-minus-20: #111824;
+  --brand-blue-minus-10: #192439;
+  --brand-blue: #223049;
+  --brand-light-blue-minus-10: #00a4df;
+  --brand-light-blue: #00b9ff;
+  --brand-grey-plus-10: #6f8691;
+  --brand-smoke-minus-10: #a8aaac;
+  --brand-smoke: #d3d5d8;
+  --brand-smoke-plus-10: #e2e6e8;
+  --brand-smoke-plus-20: #f2f5f7;
+  --brand-green-minus-10: #28b862;
+  --brand-green: #2ed06e;
+  --gray-base: #f2f5f7;
+  --gray-darker: #384347;
+  --gray-light: #829ca9;
+  --brand-primary: #37517e;
+  --body-bg: #fff;
+  --text-bold-color: #2e4369;
+  --font-size-xx-large: 2.8rem; /* 42px */
+  /* stylelint-disable-next-line number-max-precision */
+  --font-size-x-large: 1.8666666667rem; /* 28px */
+  /* stylelint-disable-next-line number-max-precision */
+  --font-size-large: 1.4666666667rem; /* 22px */
+  --font-size-medium: 1.2rem; /* 18px */
+  --font-size: 0.9375rem; /* 15px */
+  /* stylelint-disable-next-line number-max-precision */
+  --font-size-small: 0.9333333333rem; /* 14px */
+  --font-size-x-small: 0.8rem; /* 12px */
+  --line-height: 1.6; /* 24/15 */
+}
+
+@media (--screen-md) {
+  :root {
+    --font-size-xx-large: 2.625rem; /* 42px */
+    --font-size-x-large: 1.75rem; /* 28px */
+    --font-size-large: 1.375rem; /* 22px */
+    --font-size-medium: 1.125rem; /* 18px */
+    --font-size: 1rem; /* 16px */
+    --font-size-small: 0.875rem; /* 14px */
+    --font-size-x-small: 0.75rem; /* 12px */
+    --line-height: 1.5; /* 24/16px */
+  }
+}

package/build/styles/styles/props/neptune-tokens.css

@@ -0,0 +1,11 @@
+@import "@transferwise/neptune-tokens/tokens.css";
+
+/* DEPRECATED, use neptune-tokens instead: https://transferwise.github.io/neptune-web/styles/tokens/Colors */
+:root {
+  --color-primary: #37517e;
+  --color-secondary: #5d7079;
+  --color-accent: #00b9ff;
+  --color-positive: #2ed06e;
+  --color-negative: #f53636;
+  --color-warning: #ffa600;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "46.130.3",
+  "version": "46.131.0",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {
@@ -87,13 +87,12 @@
     "storybook-addon-tag-badges": "^3.0.6",
     "storybook-addon-test-codegen": "^3.0.1",
     "@transferwise/less-config": "3.1.2",
-    "@transferwise/neptune-css": "14.26.3",
     "@wise/components-theming": "1.10.1",
-    "@wise/wds-configs": "0.0.0"
+    "@wise/wds-configs": "0.0.0",
+    "@transferwise/neptune-css": "14.27.0"
   },
   "peerDependencies": {
     "@transferwise/icons": "^3 || ^4",
-    "@transferwise/neptune-css": "^14.26",
     "@wise/art": "^2.26",
     "@wise/components-theming": "^1.9.1",
     "framer-motion": "^12.23.26",
@@ -119,7 +118,8 @@
     "merge-props": "^6.0.0",
     "react-popper": "^2.3.0",
     "react-transition-group": "^4.4.5",
-    "virtua": "^0.48.5"
+    "virtua": "^0.48.5",
+    "@transferwise/neptune-tokens": "^8.16.0"
   },
   "publishConfig": {
     "access": "public",
@@ -139,6 +139,10 @@
     "build:copy-files": "cpx 'src/**/!(db)/*.{json,svg}' build",
     "build:copy-css": "cpx 'src/main.css' build/ & cpx 'src/**/*.css' build/styles/",
     "build:copy-lang": "cpx 'src/i18n/*.json' build/i18n && cpx 'src/i18n/index.js' build/i18n",
+    "build:neptune-css": "npm-run-all build:neptune-css:*",
+    "build:neptune-css:copy-brand-assets": "cpx 'src/styles/img/**' build/styles/img && cpx 'src/styles/fonts/*' build/styles/fonts",
+    "build:neptune-css:compile": "gulp compileLess --src='src/styles/less' --dest=build/styles/css",
+    "build:neptune-css:copy-vars": "gulp copyPropsAndVars --src='src/styles/props' --dest='build/styles/props' && gulp copyPropsAndVars --src='src/styles/variables' --dest='build/styles/less'",
     "docs": "pnpm build",
     "test": "TZ=UTC jest",
     "test:watch": "TZ=UTC jest --watch",

package/src/{DisabledComponents.story.tsx → DisabledComponents.test.story.tsx}

@@ -10,7 +10,7 @@ import Checkbox from './checkbox';
 import Body from './body';
 
 export default {
-  title: 'Forms/Disabled Forms',
+  title: 'Forms/Disabled/Tests/Disabled Forms',
   parameters: {
     layout: 'centered',
   },

package/src/accordion/Accordion.less

@@ -1,6 +1,6 @@
-@import (reference) "../../node_modules/@transferwise/neptune-css/src/variables/neptune-tokens.less";
-@import (reference) "../../node_modules/@transferwise/neptune-css/src/less/mixins/_logical-properties.less";
-@import (reference) "../../node_modules/@transferwise/neptune-css/src/less/core/_typography.less";
+@import (reference) "./../styles/variables/neptune-tokens.less";
+@import (reference) "./../styles/less/mixins/_logical-properties.less";
+@import (reference) "./../styles/less/core/_typography.less";
 
 .np-accordion-item {
   display: block;

package/src/actionButton/ActionButton.less

@@ -1,4 +1,4 @@
-@import (reference) "../../node_modules/@transferwise/neptune-css/src/less/ring.less";
+@import (reference) "./../styles/less/ring.less";
 
 .np-action-btn {
   display: inline-flex;

package/src/actionButton/ActionButton.story.tsx

@@ -45,14 +45,18 @@ export const Basic: Story = {
           Tertiary label
         </ActionButton>
       </div>
+      <div>
+        <ActionButton priority="primary" {...args} disabled>
+          Primary disabled
+        </ActionButton>
+        <ActionButton priority="secondary" {...args} disabled>
+          Secondary disabled
+        </ActionButton>
+        <ActionButton priority="tertiary" {...args} disabled>
+          Tertiary disabled
+        </ActionButton>
+      </div>
     </div>
   ),
   ...withVariantConfig(['default', 'dark', 'rtl', 'mobile']),
 };
-
-export const Disabled: Story = {
-  ...Basic,
-  args: {
-    disabled: true,
-  },
-};

package/src/actionButton/ActionButton.test.story.tsx

@@ -0,0 +1,49 @@
+import { Meta, StoryObj } from '@storybook/react-webpack5';
+import { Settings } from '@transferwise/icons';
+import ActionButton from './ActionButton';
+import { withVariantConfig } from '../../.storybook/helpers';
+
+const meta: Meta<typeof ActionButton> = {
+  component: ActionButton,
+  tags: ['!autodocs', '!manifest', 'deprecated'],
+  title: 'Actions/ActionButton/Tests',
+};
+export default meta;
+
+type Story = StoryObj<typeof ActionButton>;
+
+export const DisabledVariants: Story = {
+  render: (args) => (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '0.4rem' }}>
+      <div>
+        <ActionButton priority="primary" {...args}>
+          Primary label
+        </ActionButton>
+        <ActionButton priority="secondary" {...args}>
+          Secondary label
+        </ActionButton>
+        <ActionButton priority="tertiary" {...args}>
+          Tertiary label
+        </ActionButton>
+      </div>
+      <div>
+        <ActionButton priority="primary" {...args}>
+          <Settings />
+          Primary label
+        </ActionButton>
+        <ActionButton priority="secondary" {...args}>
+          <Settings />
+          Secondary label
+        </ActionButton>
+        <ActionButton priority="tertiary" {...args}>
+          <Settings />
+          Tertiary label
+        </ActionButton>
+      </div>
+    </div>
+  ),
+  args: {
+    disabled: true,
+  },
+  ...withVariantConfig(['default', 'dark', 'rtl', 'mobile']),
+};

package/src/avatar/Avatar.less

@@ -1,6 +1,6 @@
-@import (reference) "../../node_modules/@transferwise/neptune-css/src/variables/neptune-tokens.less";
-@import (reference) "../../node_modules/@transferwise/neptune-css/src/less/mixins/_logical-properties.less";
-@import (reference) "../../node_modules/@transferwise/neptune-css/src/less/core/_typography.less";
+@import (reference) "./../styles/variables/neptune-tokens.less";
+@import (reference) "./../styles/less/mixins/_logical-properties.less";
+@import (reference) "./../styles/less/core/_typography.less";
 
 @avatar-diameter-72: 72px;
 @avatar-diameter-56: 56px;

package/src/avatarLayout/AvatarLayout.story.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable react/jsx-key */
 import { Meta, StoryObj } from '@storybook/react-webpack5';
 import AvatarLayout, { AvatarLayoutProps } from '.';
-import { Freeze, Graph, Plane, Rewards } from '@transferwise/icons';
+import { Freeze } from '@transferwise/icons';
 import { Flag } from '@wise/art';
 import Body from '../body';
 import SentimentSurface from '../sentimentSurface';
@@ -181,110 +181,6 @@ export const Horizontal: Story = {
   ),
 };
 
-export const EdgeInstances: Story = {
-  render: () => (
-    <div
-      style={{
-        gap: '1em',
-        display: 'grid',
-        justifyContent: 'space-between',
-        gridTemplate: `auto auto / repeat(2, min-content)`,
-      }}
-    >
-      <AvatarLayout orientation="diagonal" avatars={[]} />
-
-      <AvatarLayout orientation="diagonal" avatars={[{}]} />
-
-      <AvatarLayout orientation="diagonal" avatars={[{ profileName: 'Jay Jay' }]} />
-      <AvatarLayout orientation="diagonal" size={16} avatars={[{ profileName: 'Jay Jay' }]} />
-
-      <AvatarLayout orientation="diagonal" avatars={[{ asset: <Flag code="gb" /> }]} />
-      <AvatarLayout orientation="diagonal" size={24} avatars={[{ asset: <Flag code="gb" /> }]} />
-
-      <AvatarLayout
-        orientation="diagonal"
-        avatars={[{ asset: <Flag code="gb" /> }, { asset: <Flag code="jp" /> }]}
-      />
-
-      <AvatarLayout
-        orientation="horizontal"
-        interactive
-        avatars={[
-          { imgSrc: '../avatar-squere-dude.webp' },
-          { asset: null, style: { border: '1px dashed var(--color-border-neutral)' } },
-        ]}
-      />
-
-      <AvatarLayout
-        orientation="horizontal"
-        interactive
-        avatars={[
-          { imgSrc: '../avatar-square-dude.webp' },
-          {
-            asset: <Plane />,
-            style: { backgroundColor: 'var(--color-bright-pink)' },
-          },
-        ]}
-      />
-
-      <AvatarLayout
-        orientation="horizontal"
-        interactive
-        avatars={[
-          {
-            asset: <Graph />,
-            style: { color: 'rgb(22, 51, 0)', backgroundColor: 'rgb(203, 217, 195)' },
-          },
-          {
-            asset: <Rewards />,
-            style: { color: 'rgb(203, 217, 195)', backgroundColor: 'rgb(22, 51, 0)' },
-          },
-        ]}
-      />
-
-      <AvatarLayout
-        orientation="horizontal"
-        interactive
-        avatars={[
-          { asset: <Flag code="gb" /> },
-          { asset: '3+', style: { border: '1px dashed var(--color-border-neutral)' } },
-        ]}
-      />
-
-      <AvatarLayout
-        orientation="horizontal"
-        avatars={[{ imgSrc: '../avatar-rectangle-fox.webp' }, { profileName: 'Jay Jay' }]}
-      />
-
-      <AvatarLayout
-        interactive
-        orientation="horizontal"
-        avatars={[
-          { imgSrc: '../avatar-rectangle-fox.webp' },
-          { imgSrc: '../avatar-square-dude.webp' },
-          { asset: '7+' },
-        ]}
-      />
-
-      <AvatarLayout
-        interactive
-        orientation="horizontal"
-        avatars={[{ asset: <Flag code="gb" /> }, { asset: <Flag code="br" /> }, { asset: '3+' }]}
-      />
-
-      <AvatarLayout
-        orientation="horizontal"
-        avatars={[
-          { asset: <Flag code="gb" /> },
-          { asset: <Flag code="br" /> },
-          { asset: <Flag code="jp" /> },
-          { asset: '3+' },
-        ]}
-      />
-    </div>
-  ),
-};
-
 /**
  * Like [AvatarView](?path=/docs/content-avatarview--docs#sentiment-awareness), `AvatarLayout` is sentiment-aware (note: not all features are supported) and will automatically adjust its colours if wrapped inside the
  * [SentimentSurface](?path=/docs/content-sentimentsurface--docs) component.