@transferwise/components 0.0.0-experimental-09066ec → 0.0.0-experimental-c8bf162

package/src/neptune-css/variables/neptune-tokens.less

@@ -0,0 +1,12 @@
+@import "@transferwise/neptune-tokens/tokens.less";
+@import "@transferwise/neptune-tokens/colors-base.less";
+
+// DEPRECATED, use neptune-tokens instead: https://transferwise.github.io/neptune-web/styles/tokens/Colors
+@color-primary: #37517e;
+@color-secondary: #5d7079;
+@color-accent: #00b9ff;
+@color-positive: #2ed06e;
+@color-negative: #f53636;
+@color-warning: #ffa600;
+
+@color-base-white: @color-base-white-light;

package/src/neptune-css/variables/zindex.less

@@ -0,0 +1,17 @@
+// Z-index master list
+//
+// Warning: Avoid customizing these values. They're used for a bird's eye view
+// of components dependent on the z-axis and are designed to all work together.
+//
+// These used to live in Bootstrap.
+
+@zindex-navbar: 1000;
+@zindex-dropdown: 1000;
+@zindex-popover: 1060;
+@zindex-tooltip: 1070;
+@zindex-navbar-fixed: 1030;
+@zindex-modal-background: 1040;
+@zindex-modal: 1050;
+
+@zindex-mobile-nav-background: 1055;
+@zindex-mobile-nav: 1060;

package/src/overlayHeader/OverlayHeader.less

@@ -1,4 +1,4 @@
-@import (reference) "../../node_modules/@transferwise/neptune-css/src/less/addons/_spacing-utilities.less";
+@import (reference) "./../neptune-css/less/addons/_spacing-utilities.less";
 
 .np-overlay-header {
   .np-overlay-header__content {

package/src/phoneNumberInput/PhoneNumberInput.less

@@ -1,4 +1,4 @@
-@import (reference) "../../node_modules/@transferwise/neptune-css/src/less/mixins/_logical-properties.less";
+@import (reference) "./../neptune-css/less/mixins/_logical-properties.less";
 
 @four-digit-country-code-width: 120px;
 

package/src/popover/Popover.less

@@ -1,4 +1,4 @@
-@import (reference) "../../node_modules/@transferwise/neptune-css/src/less/core/_typography.less";
+@import (reference) "./../neptune-css/less/core/_typography.less";
 
 // This can't be wrapped in np-popover because styles won't get applied to bottomsheet
 //which is opened in a portal hence it won't be contained in np-popover.

package/src/prompt/ActionPrompt/ActionPrompt.story.tsx

@@ -335,49 +335,6 @@ export const Dismissible: Story = {
   },
 };
 
-/**
- * ActionPrompt adapts its layout based on available width. At narrow widths (mobile),
- * the buttons stack vertically. At wider widths (desktop), they appear side by side.
- */
-export const Responsiveness: Story = {
-  render: (args) => (
-    <div
-      style={{
-        display: 'grid',
-        gridTemplateColumns: '320px 480px',
-        gap: '1rem',
-        alignItems: 'start',
-      }}
-    >
-      <ActionPrompt
-        sentiment="proposition"
-        title="Stacked (320px)"
-        description={lorem10}
-        media={{ avatar: { asset: <Travel /> } }}
-        action={{ label: 'Primary action', onClick: fn() }}
-        actionSecondary={{ label: 'Secondary', onClick: fn() }}
-        onDismiss={fn()}
-      />
-      <ActionPrompt
-        sentiment="proposition"
-        title="Side-by-side (480px)"
-        description={lorem10}
-        media={{ avatar: { asset: <Travel /> } }}
-        action={{ label: 'Primary action', onClick: fn() }}
-        actionSecondary={{ label: 'Secondary', onClick: fn() }}
-        onDismiss={fn()}
-      />
-    </div>
-  ),
-  parameters: {
-    docs: {
-      canvas: {
-        sourceState: 'hidden',
-      },
-    },
-  },
-};
-
 /**
  * While the component itself will stretch to the full available width, the text container will be
  * capped at `480px` to ensure optimal readability.

package/src/prompt/ActionPrompt/ActionPrompt.test.story.tsx

@@ -1,5 +1,5 @@
 import { ReactElement } from 'react';
-import { Freeze, People } from '@transferwise/icons';
+import { Freeze, People, Travel } from '@transferwise/icons';
 import { action } from 'storybook/actions';
 import { fn } from 'storybook/test';
 import ActionPrompt from './ActionPrompt';
@@ -7,6 +7,7 @@ import { Body, Title } from '../..';
 import { StoryObj } from '@storybook/react-webpack5';
 import { allModes } from '../../../.storybook/modes';
 import { withVariantConfig } from '../../../.storybook/helpers';
+import { lorem10 } from '../../test-utils';
 
 const withComponentGrid =
   ({ gap = '1rem' } = {}) =>
@@ -228,3 +229,46 @@ export const TinyScreen: Story = {
   ),
   ...withVariantConfig(['400%']),
 };
+
+/**
+ * ActionPrompt adapts its layout based on available width. At narrow widths (mobile),
+ * the buttons stack vertically. At wider widths (desktop), they appear side by side.
+ */
+export const Responsiveness: Story = {
+  render: (args) => (
+    <div
+      style={{
+        display: 'grid',
+        gridTemplateColumns: '320px 480px',
+        gap: '1rem',
+        alignItems: 'start',
+      }}
+    >
+      <ActionPrompt
+        sentiment="proposition"
+        title="Stacked (320px)"
+        description={lorem10}
+        media={{ avatar: { asset: <Travel /> } }}
+        action={{ label: 'Primary action', onClick: fn() }}
+        actionSecondary={{ label: 'Secondary', onClick: fn() }}
+        onDismiss={fn()}
+      />
+      <ActionPrompt
+        sentiment="proposition"
+        title="Side-by-side (480px)"
+        description={lorem10}
+        media={{ avatar: { asset: <Travel /> } }}
+        action={{ label: 'Primary action', onClick: fn() }}
+        actionSecondary={{ label: 'Secondary', onClick: fn() }}
+        onDismiss={fn()}
+      />
+    </div>
+  ),
+  parameters: {
+    docs: {
+      canvas: {
+        sourceState: 'hidden',
+      },
+    },
+  },
+};

package/src/radioGroup/RadioGroup.test.story.tsx

@@ -5,7 +5,7 @@ import { fn } from 'storybook/test';
 
 const meta = {
   component: RadioGroup,
-  title: 'Forms/RadioGroup/tests',
+  title: 'Forms/RadioGroup/Tests',
   tags: ['!autodocs', '!manifest'],
   args: {
     selectedValue: 'radio-2',

package/src/select/Select.less

@@ -1,8 +1,8 @@
-@import (reference) "../../node_modules/@transferwise/neptune-css/dist/less/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/mixins/_border-radius.less";
-@import (reference) "../../node_modules/@transferwise/neptune-css/src/less/core/_typography.less";
-@import (reference) "../../node_modules/@transferwise/neptune-css/src/less/ring.less";
+@import (reference) "./../neptune-css/variables/neptune-tokens.less";
+@import (reference) "./../neptune-css/less/mixins/_logical-properties.less";
+@import (reference) "./../neptune-css/less/mixins/_border-radius.less";
+@import (reference) "./../neptune-css/less/core/_typography.less";
+@import (reference) "./../neptune-css/less/ring.less";
 
 .np-select {
   .np-dropdown-toggle {

package/src/slidingPanel/SlidingPanel.less

@@ -1,5 +1,5 @@
-@import (reference) "../../node_modules/@transferwise/neptune-css/src/variables/zindex.less";
-@import (reference) "../../node_modules/@transferwise/neptune-css/src/less/mixins/_logical-properties.less";
+@import (reference) "./../neptune-css/variables/zindex.less";
+@import (reference) "./../neptune-css/less/mixins/_logical-properties.less";
 
 .sliding-panel {
   .translateX(-100%);

package/src/snackbar/Snackbar.less

@@ -1,6 +1,6 @@
-@import (reference) "../../node_modules/@transferwise/neptune-css/src/variables/zindex.less";
-@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) "./../neptune-css/variables/zindex.less";
+@import (reference) "./../neptune-css/variables/neptune-tokens.less";
+@import (reference) "./../neptune-css/less/mixins/_logical-properties.less";
 
 .snackbar {
   text-align: center;

package/src/stepper/Stepper.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/ring.less";
+@import (reference) "./../neptune-css/variables/neptune-tokens.less";
+@import (reference) "./../neptune-css/less/mixins/_logical-properties.less";
+@import (reference) "./../neptune-css/less/ring.less";
 
 .tw-stepper {
   padding-bottom: 24px;

package/src/stepper/Stepper.test.story.tsx

@@ -26,7 +26,7 @@ const STEPS = [
 
 const meta = {
   component: Stepper,
-  title: 'Navigation/Stepper/tests',
+  title: 'Navigation/Stepper/Tests',
   tags: ['!manifest'],
   argTypes: {
     activeStep: {

package/src/summary/Summary.less

@@ -1,4 +1,4 @@
-@import (reference) "../../node_modules/@transferwise/neptune-css/src/less/mixins/_logical-properties.less";
+@import (reference) "./../neptune-css/less/mixins/_logical-properties.less";
 
 .np-summary {
   min-width: 280px;

package/src/summary/Summary.test.story.tsx

@@ -4,7 +4,7 @@ import Summary, { type SummaryProps } from '.';
 
 export default {
   component: Summary,
-  title: 'Content/Summary/tests',
+  title: 'Content/Summary/Tests',
   tags: ['deprecated', '!manifest'],
 };
 

package/src/switch/Switch.less

@@ -1,7 +1,7 @@
-@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/ring.less";
-@import (reference) "../../node_modules/@transferwise/neptune-css/src/less/core/_scaffolding.less";
+@import (reference) "./../neptune-css/variables/neptune-tokens.less";
+@import (reference) "./../neptune-css/less/mixins/_logical-properties.less";
+@import (reference) "./../neptune-css/less/ring.less";
+@import (reference) "./../neptune-css/less/core/_scaffolding.less";
 
 .np-switch {
   all: unset;

package/src/table/Table.less

@@ -1,4 +1,4 @@
-@import (reference) "../../node_modules/@transferwise/neptune-css/src/less/ring.less";
+@import (reference) "./../neptune-css/less/ring.less";
 
 .np-table {
   @table-background-color: var(--color-background-neutral);

package/src/tabs/Tabs.less

@@ -1,7 +1,7 @@
-@import (reference) "../../node_modules/@transferwise/neptune-css/src/variables/neptune-tokens.less";
-@import (reference) "../../node_modules/@transferwise/neptune-css/src/variables/legacy-variables.less";
-@import (reference) "../../node_modules/@transferwise/neptune-css/src/less/mixins/_logical-properties.less";
-@import (reference) "../../node_modules/@transferwise/neptune-css/src/less/ring.less";
+@import (reference) "./../neptune-css/variables/neptune-tokens.less";
+@import (reference) "./../neptune-css/variables/legacy-variables.less";
+@import (reference) "./../neptune-css/less/mixins/_logical-properties.less";
+@import (reference) "./../neptune-css/less/ring.less";
 
 @transition-timing-function: ease-in-out;
 @short-transition-duration: 0.15s;

package/src/tile/Tile.less

@@ -1,4 +1,4 @@
-@import (reference) "../../node_modules/@transferwise/neptune-css/src/less/core/_typography.less";
+@import (reference) "./../neptune-css/less/core/_typography.less";
 
 .np-tile {
   min-width: 120px;

package/src/tooltip/Tooltip.less

@@ -1,4 +1,4 @@
-@import (reference) "../../node_modules/@transferwise/neptune-css/src/variables/zindex.less";
+@import (reference) "./../neptune-css/variables/zindex.less";
 
 .tw-tooltip-container {
   display: inline-block;

package/src/tooltip/Tooltip.story.tsx

@@ -1,10 +1,6 @@
 import { Meta, StoryObj } from '@storybook/react-webpack5';
-import { userEvent, within } from 'storybook/test';
-
 import Button from '../button';
-
 import Tooltip from './Tooltip';
-import { withVariantConfig } from '../../.storybook/helpers';
 
 export default {
   component: Tooltip,
@@ -25,20 +21,3 @@ export default {
 type Story = StoryObj<typeof Tooltip>;
 
 export const Basic: Story = {};
-
-export const OpenedTooltip: Story = {
-  parameters: {
-    chromatic: {
-      delay: 1000,
-    },
-  },
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-    await userEvent.hover(canvas.getByRole('button'));
-  },
-};
-
-export const OpenedTooltipDark: Story = {
-  ...OpenedTooltip,
-  ...withVariantConfig(['dark'], OpenedTooltip),
-};

package/src/tooltip/Tooltip.test.story.tsx

@@ -0,0 +1,42 @@
+import { Meta, StoryObj } from '@storybook/react-webpack5';
+import { userEvent, within } from 'storybook/test';
+import Button from '../button';
+import Tooltip from './Tooltip';
+import { withVariantConfig } from '../../.storybook/helpers';
+
+const meta: Meta<typeof Tooltip> = {
+  component: Tooltip,
+  tags: ['!autodocs', '!manifest'],
+  title: 'Dialogs/Tooltip/Tests',
+  args: {
+    label: 'This is the content',
+    position: 'bottom',
+  },
+  render: (args) => (
+    <div className="text-xs-center" style={{ flexBasis: '150px' }}>
+      <Tooltip {...args}>
+        <Button>Hover me</Button>
+      </Tooltip>
+    </div>
+  ),
+};
+export default meta;
+
+type Story = StoryObj<typeof Tooltip>;
+
+export const OpenedTooltip: Story = {
+  parameters: {
+    chromatic: {
+      delay: 1000,
+    },
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await userEvent.hover(canvas.getByRole('button'));
+  },
+};
+
+export const OpenedTooltipDark: Story = {
+  ...OpenedTooltip,
+  ...withVariantConfig(['dark'], OpenedTooltip),
+};

package/src/typeahead/Typeahead.less

@@ -1,5 +1,5 @@
-@import (reference) "../../node_modules/@transferwise/neptune-css/src/variables/legacy-variables.less";
-@import (reference) "../../node_modules/@transferwise/neptune-css/src/less/mixins/_logical-properties.less";
+@import (reference) "./../neptune-css/variables/legacy-variables.less";
+@import (reference) "./../neptune-css/less/mixins/_logical-properties.less";
 
 @animation-timing-function: ease-in-out;
 @animation-duration: 0.03s;

package/src/typeahead/Typeahead.story.tsx

@@ -251,58 +251,6 @@ export const Search: Story = {
   },
 };
 
-export const AutoFocusInModal: Story = {
-  parameters: {
-    docs: {
-      story: {
-        inline: false,
-        iframeHeight: 500,
-      },
-    },
-  },
-  render: function Render() {
-    const [open, setOpen] = useState<boolean>(true);
-    return (
-      <>
-        <Button v2 onClick={() => setOpen(true)}>
-          Open Modal
-        </Button>
-        <Modal
-          title="Global Search"
-          body={
-            <Typeahead
-              id="typeahead"
-              name="search-input"
-              // eslint-disable-next-line jsx-a11y/no-autofocus
-              autoFocus
-              size="md"
-              showSuggestions
-              showNewEntry={false}
-              addon={<SearchIcon size={24} />}
-              options={[
-                { label: 'Option 1' },
-                { label: 'Option 2' },
-                { label: 'Option 3' },
-                { label: 'Option 4' },
-              ]}
-              inputAutoComplete="off"
-              onSearch={(search) => {
-                console.log(search);
-              }}
-              onChange={(option) => {}}
-              onBlur={() => {}}
-            />
-          }
-          open={open}
-          onClose={() => {
-            setOpen(false);
-          }}
-        />
-      </>
-    );
-  },
-};
-
 export const WithField: Story = {
   args: {
     autoFillOnBlur: undefined,

package/src/typeahead/Typeahead.test.story.tsx

@@ -0,0 +1,73 @@
+import { Meta, StoryObj } from '@storybook/react-webpack5';
+import { Search as SearchIcon } from '@transferwise/icons';
+import { useState } from 'react';
+
+import Button from '../button';
+import Modal from '../modal';
+import Typeahead from './Typeahead';
+
+// needed for SB to display correct name in the docs
+(Typeahead as React.FC).displayName = 'Typeahead';
+type Story = StoryObj<typeof Typeahead>;
+
+const meta: Meta<typeof Typeahead> = {
+  component: Typeahead,
+  title: 'Forms/Typeahead/Tests',
+  tags: ['!autodocs', '!manifest'],
+};
+export default meta;
+
+export const AutoFocusInModal: Story = {
+  parameters: {
+    docs: {
+      story: {
+        inline: false,
+        iframeHeight: 500,
+      },
+    },
+    chromatic: {
+      delay: 1000,
+    },
+  },
+  render: function Render(args, { viewMode }) {
+    const [open, setOpen] = useState<boolean>(viewMode !== 'docs');
+    return (
+      <>
+        <Button v2 onClick={() => setOpen(true)}>
+          Open Modal
+        </Button>
+        <Modal
+          title="Global Search"
+          body={
+            <Typeahead
+              id="typeahead"
+              name="search-input"
+              // eslint-disable-next-line jsx-a11y/no-autofocus
+              autoFocus
+              size="md"
+              showSuggestions
+              showNewEntry={false}
+              addon={<SearchIcon size={24} />}
+              options={[
+                { label: 'Option 1' },
+                { label: 'Option 2' },
+                { label: 'Option 3' },
+                { label: 'Option 4' },
+              ]}
+              inputAutoComplete="off"
+              onSearch={(search) => {
+                console.log(search);
+              }}
+              onChange={(option) => {}}
+              onBlur={() => {}}
+            />
+          }
+          open={open}
+          onClose={() => {
+            setOpen(false);
+          }}
+        />
+      </>
+    );
+  },
+};

package/src/typeahead/typeaheadOption/TypeaheadOption.less

@@ -1,4 +1,4 @@
-@import (reference) "../../../node_modules/@transferwise/neptune-css/src/variables/neptune-tokens.less";
+@import (reference) "../../neptune-css/variables/neptune-tokens.less";
 
 .typeahead__option.tw-dropdown-item {
   .dropdown-item:active {

package/src/upload/Upload.less

@@ -1,4 +1,4 @@
-@import (reference) "../../node_modules/@transferwise/neptune-css/src/less/ring.less";
+@import (reference) "./../neptune-css/less/ring.less";
 
 // This css is a quick workaround on the height of the upload container collapsing if UploadImageStep is
 // not rendered.

package/src/uploadInput/UploadInput.less

@@ -1,5 +1,5 @@
-@import (reference) "../../node_modules/@transferwise/neptune-css/src/less/ring.less";
-@import (reference) "../../node_modules/@transferwise/neptune-css/src/less/mixins/_links.less";
+@import (reference) "./../neptune-css/less/ring.less";
+@import (reference) "./../neptune-css/less/mixins/_links.less";
 @import (reference) './uploadItem/UploadItem.less';
 
 .np-upload-input {

package/src/uploadInput/uploadItem/UploadItem.less

@@ -1,4 +1,4 @@
-@import (reference) "../../../node_modules/@transferwise/neptune-css/src/less/ring.less";
+@import (reference) "../../neptune-css/less/ring.less";
 
 .np-upload-input__item {
   position: relative;

package/src/accordion/Accordion.css

@@ -1,74 +0,0 @@
-.np-accordion-item {
-  display: block;
-  width: 100%;
-}
-.np-accordion-item--open .media {
-  border: 0 !important;
-}
-.np-accordion-item .decision:not(.disabled):not(:disabled):hover {
-  background-color: transparent;
-}
-.np-accordion-item.np-accordion-item--dark .media-body,
-.np-accordion-item.np-accordion-item--dark .np-text-title-body {
-  color: #ffffff;
-}
-.np-accordion-item__content {
-  padding: 0 12px 24px 12px;
-  padding: 0 var(--size-12) var(--size-24) var(--size-12);
-  border-bottom: 1px solid rgba(0,0,0,0.10196);
-  border-bottom: 1px solid var(--color-border-neutral);
-}
-@media (min-width: 480px) {
-  .np-accordion-item__content.has-icon {
-    padding-left: 68px;
-  }
-  [dir="rtl"] .np-accordion-item__content.has-icon {
-    padding-right: 68px;
-    padding-left: 0;
-    padding-left: initial;
-  }
-}
-.np-accordion-item .np-option .np-option__title {
-  font-weight: 600;
-  font-weight: var(--font-weight-semi-bold);
-}
-.np-theme-personal .np-accordion-item--with-media .media {
-  display: flex;
-  align-items: center;
-}
-.np-theme-personal .np-accordion-item--with-icon .np-accordion-item__content {
-  padding: 0 56px 16px;
-  padding: 0 var(--size-56) var(--size-16);
-}
-.np-theme-personal .np-accordion-item--with-icon .media {
-  display: flex;
-  align-items: flex-start;
-}
-.np-theme-personal .np-accordion-item .decision__title {
-  font-size: 1.125rem;
-  font-size: var(--font-size-18);
-}
-.np-theme-personal .np-accordion-item .np-option .np-option__title {
-  margin-bottom: 0;
-  font-size: 1.125rem;
-  font-size: var(--font-size-18);
-  letter-spacing: -0.01em;
-  letter-spacing: var(--letter-spacing-negative-xs);
-  line-height: 1.5rem;
-  line-height: var(--line-height-24);
-}
-.np-theme-personal .np-accordion-item .np-option .circle-sm {
-  background-color: transparent;
-  width: 24px;
-  width: var(--size-24);
-  height: 24px;
-  height: var(--size-24);
-  border-radius: 0;
-}
-.np-theme-personal .np-accordion-item__content {
-  padding: 0 56px 16px 16px;
-  padding: 0 var(--size-56) var(--size-16) var(--size-16);
-  border-bottom: none;
-  color: #5d7079;
-  color: var(--color-content-secondary);
-}