@transferwise/components 0.0.0-experimental-bcfa03a → 0.0.0-experimental-3cdcd93

package/src/main.css

@@ -3976,49 +3976,27 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   color: #5d7079;
   color: var(--color-content-secondary);
 }
-.np-select-input-option-container {
-  display: flex;
-  cursor: default;
-  -webkit-user-select: none;
-     -moz-user-select: none;
-          user-select: none;
-  align-items: center;
-  -moz-column-gap: 8px;
-       column-gap: 8px;
-  -moz-column-gap: var(--size-8);
-       column-gap: var(--size-8);
-  border-radius: 10px;
-  border-radius: var(--radius-small);
-  padding: 12px 16px;
-  padding: var(--size-12) var(--size-16);
-  color: var(--color-interactive-primary);
-}
-.np-select-input-option-container:focus {
-  outline: none;
-}
-.np-select-input-option-container--active {
-  box-shadow: inset 0 0 0 1px #c9cbce;
-  box-shadow: inset 0 0 0 1px var(--color-interactive-secondary);
-}
-.np-select-input-option-container--disabled {
-  opacity: 0.45;
+.np-select-input-content {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
-.np-select-input-option {
-  flex: 1;
+.np-select-input-placeholder {
+  color: #768e9c;
+  color: var(--color-content-tertiary);
 }
-.np-select-input-option-check--not-selected {
-  visibility: hidden;
+.np-select-input-options-container {
+  display: flex;
+  height: 100%;
+  flex-direction: column;
 }
-.np-select-input-group-item--without-needle:first-child {
-  margin-top: calc(-1 * 8px);
-  margin-top: calc(-1 * var(--size-8));
+.np-select-input-options-container:focus {
+  outline: none;
 }
-.np-select-input-group-item-header {
-  position: sticky;
-  top: 0px;
-  z-index: 10;
-  background-color: #ffffff;
-  background-color: var(--color-background-elevated);
+@media (min-width: 576px) {
+  .np-select-input-options-container {
+    max-height: 28rem /* 448px */;
+  }
 }
 .np-select-input-options-status {
   display: flex;
@@ -4084,22 +4062,54 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   contain: strict;
   height: 100%;
 }
-.np-select-input-options-container {
+.np-select-input-separator-item {
+  margin: 8px;
+  margin: var(--size-8);
+  border-top-width: 1px;
+}
+.np-select-input-group-item--without-needle:first-child {
+  margin-top: calc(-1 * 8px);
+  margin-top: calc(-1 * var(--size-8));
+}
+.np-select-input-group-item-header {
+  position: sticky;
+  top: 0px;
+  z-index: 10;
+  background-color: #ffffff;
+  background-color: var(--color-background-elevated);
+}
+.np-select-input-option-container {
   display: flex;
-  height: 100%;
-  flex-direction: column;
+  cursor: default;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+  align-items: center;
+  -moz-column-gap: 8px;
+       column-gap: 8px;
+  -moz-column-gap: var(--size-8);
+       column-gap: var(--size-8);
+  border-radius: 10px;
+  border-radius: var(--radius-small);
+  padding: 12px 16px;
+  padding: var(--size-12) var(--size-16);
+  color: var(--color-interactive-primary);
 }
-.np-select-input-options-container:focus {
+.np-select-input-option-container:focus {
   outline: none;
 }
-@media (min-width: 576px) {
-  .np-select-input-options-container {
-    max-height: 28rem /* 448px */;
-  }
+.np-select-input-option-container--active {
+  box-shadow: inset 0 0 0 1px #c9cbce;
+  box-shadow: inset 0 0 0 1px var(--color-interactive-secondary);
 }
-.np-select-input-footer {
-  padding: 4px 24px 16px;
-  padding: var(--size-4) var(--size-24) var(--size-16);
+.np-select-input-option-container--disabled {
+  opacity: 0.45;
+}
+.np-select-input-option-check--not-selected {
+  visibility: hidden;
+}
+.np-select-input-option {
+  flex: 1;
 }
 .np-select-input-option-content-container {
   display: flex;
@@ -4138,6 +4148,10 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   margin-left: 8px;
   margin-left: var(--size-8);
 }
+.np-select-input-footer {
+  padding: 4px 24px 16px;
+  padding: var(--size-4) var(--size-24) var(--size-16);
+}
 .np-select-input-addon-container {
   pointer-events: none;
   margin-inline-start: 4px;
@@ -4149,21 +4163,6 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   margin-inline-start: 4px;
   margin-inline-start: var(--size-4);
 }
-.np-select-input-addon-separator {
-  height: 24px;
-  height: var(--size-24);
-  border-inline-start: 1px solid rgba(0,0,0,0.10196);
-  border-inline-start: 1px solid var(--color-border-neutral);
-}
-.np-select-input-content {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-.np-select-input-placeholder {
-  color: #768e9c;
-  color: var(--color-content-tertiary);
-}
 .np-select-input-addon {
   border-width: 0;
   background: none;
@@ -4193,6 +4192,12 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   outline: var(--ring-outline-color) solid var(--ring-outline-width);
   outline-offset: var(--ring-outline-offset);
 }
+.np-select-input-addon-separator {
+  height: 24px;
+  height: var(--size-24);
+  border-inline-start: 1px solid rgba(0,0,0,0.10196);
+  border-inline-start: 1px solid var(--color-border-neutral);
+}
 .np-text-area {
   min-height: 72px;
   min-height: var(--size-72);

package/src/main.less

@@ -44,7 +44,7 @@
 @import "./listItem/ListItem.less";
 @import "./field/Field.less";
 @import "./inputs/InputGroup.less";
-@import "./inputs/SelectInput/SelectInput.less";
+@import "./inputs/SelectInput.less";
 @import "./inputs/TextArea.less";
 @import "./instructionsList/InstructionsList.less";
 @import "./link/Link.less";

package/src/tabs/Tabs.story.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'react';
 
-import { Size, Width } from '../common';
+import { Width } from '../common';
 
 import Tabs from './Tabs';
 
@@ -15,7 +15,6 @@ export const Basic = () => {
     <Tabs
       className="tabs-custom-class"
       name="tabs-docs"
-      transitionSpacing={Size.MEDIUM}
       tabs={[
         {
           title: 'Title 1',
@@ -44,7 +43,6 @@ export const Basic = () => {
         },
       ]}
       selected={selected}
-      animatePanelsOnClick
       onTabSelect={(index) => setSelected(index)}
     />
   );
@@ -56,7 +54,6 @@ export const AutoTabHeaderWidth = () => {
     <Tabs
       className="tabs-custom-class"
       name="tabs-docs"
-      transitionSpacing={Size.MEDIUM}
       headerWidth={Width.AUTO}
       tabs={[
         {
@@ -92,44 +89,3 @@ export const AutoTabHeaderWidth = () => {
     />
   );
 };
-
-export const NoPanelAnimation = () => {
-  const [selected, setSelected] = useState(0);
-  return (
-    <Tabs
-      animatePanelsOnClick={false}
-      className="tabs-custom-class"
-      name="tabs-docs"
-      transitionSpacing={Size.MEDIUM}
-      tabs={[
-        {
-          title: 'Title 1',
-          disabled: false,
-          content: (
-            <div className="p-a-2">
-              Lorem ipsum dolor, sit amet consectetur adipisicing elit. Cum totam debitis similique
-            </div>
-          ),
-        },
-        {
-          title: 'Title 2',
-          disabled: false,
-          content: (
-            <div className="p-a-2">Lorem ipsum dolor, sit amet consectetur adipisicing elit.</div>
-          ),
-        },
-        {
-          title: 'Title 3',
-          disabled: true,
-          content: (
-            <div className="p-a-2">
-              Lorem ipsum dolor, sit amet consectetur adipisicing elit. Cum totam debitis similique
-            </div>
-          ),
-        },
-      ]}
-      selected={selected}
-      onTabSelect={(index) => setSelected(index)}
-    />
-  );
-};

package/src/tabs/Tabs.test.tsx

@@ -1,4 +1,3 @@
-import { Globals } from '@react-spring/web';
 import { render, screen, userEvent } from '../test-utils';
 import Tabs, { TabsProps } from './Tabs';
 
@@ -18,21 +17,13 @@ function generateTabs(tabsStatus = defaultTabsStatus) {
   }));
 }
 
-beforeAll(() => {
-  Globals.assign({
-    skipAnimation: true,
-  });
-});
-
 describe('Tabs', () => {
   const initialProps: TabsProps = {
-    animatePanelsOnClick: true,
     tabs: generateTabs(),
     changeTabOnSwipe: true,
     name: 'testName',
     headerWidth: 'block',
     selected: 0,
-    transitionSpacing: 'default',
     onTabSelect: jest.fn(),
     className: 'custom-class-name',
   };
@@ -65,19 +56,6 @@ describe('Tabs', () => {
     expect(screen.getByRole('tabpanel')).toHaveAttribute('id', controlsTarget);
   });
 
-  describe('transitionSpacing', () => {
-    test.each([
-      ['default', '100%'],
-      ['xs', '8px'],
-      ['sm', '16px'],
-      ['md', '24px'],
-      ['lg', '32px'],
-    ] as const)('should respect `%s`', (input, width) => {
-      render(<Tabs {...initialProps} transitionSpacing={input} />);
-      expect(screen.getByRole('tabpanel').nextSibling).toHaveStyle({ width });
-    });
-  });
-
   it('should render correct number of tabs', () => {
     render(<Tabs {...initialProps} />);
     expect(screen.getAllByRole('tab')).toHaveLength(defaultTabsStatus.length);