@transferwise/components 46.130.2 → 46.131.0

package/src/styles/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/styles/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/summary/Summary.less

@@ -1,4 +1,4 @@
-@import (reference) "../../node_modules/@transferwise/neptune-css/src/less/mixins/_logical-properties.less";
+@import (reference) "./../styles/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) "./../styles/variables/neptune-tokens.less";
+@import (reference) "./../styles/less/mixins/_logical-properties.less";
+@import (reference) "./../styles/less/ring.less";
+@import (reference) "./../styles/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) "./../styles/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) "./../styles/variables/neptune-tokens.less";
+@import (reference) "./../styles/variables/legacy-variables.less";
+@import (reference) "./../styles/less/mixins/_logical-properties.less";
+@import (reference) "./../styles/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) "./../styles/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) "./../styles/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) "./../styles/variables/legacy-variables.less";
+@import (reference) "./../styles/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) "../../styles/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) "./../styles/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) "./../styles/less/ring.less";
+@import (reference) "./../styles/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) "../../styles/less/ring.less";
 
 .np-upload-input__item {
   position: relative;