@transferwise/components 0.0.0-experimental-a8f3db2 → 0.0.0-experimental-8abc58f

package/src/dropFade/DropFade.story.tsx

@@ -8,6 +8,7 @@ import DropFade from './DropFade';
 export default {
   title: 'Dialogs/DropFade',
   component: DropFade,
+  tags: ['autodocs'],
 };
 
 export const Basic = () => {

package/src/flowNavigation/FlowNavigation.story.tsx

@@ -16,6 +16,7 @@ import Sticky from '../sticky';
 export default {
   component: FlowNavigation,
   title: 'Navigation/FlowNavigation',
+  tags: ['autodocs'],
 };
 
 export const Variants = () => {

package/src/header/Header.story.tsx

@@ -3,6 +3,7 @@ import Header from './Header';
 export default {
   component: Header,
   title: 'Typography/Header',
+  tags: ['autodocs'],
 };
 
 export const Basic = () => {

package/src/iconButton/IconButton.story.tsx

@@ -7,6 +7,7 @@ import Body from '../body';
 
 export default {
   title: 'Actions/IconButton',
+  tags: ['autodocs'],
 } satisfies Meta<typeof IconButton>;
 
 type Story = StoryObj<typeof IconButton>;

package/src/image/Image.story.tsx

@@ -6,6 +6,7 @@ import Image from './Image';
 export default {
   component: Image,
   title: 'Content/Image',
+  tags: ['autodocs'],
 };
 
 export const Basic = () => {

package/src/info/Info.story.tsx

@@ -13,6 +13,7 @@ const meta = {
     title: 'Fast transfer hint',
     content: lorem10,
   },
+  tags: ['autodocs'],
   render: (args) => (
     <p>
       <span>Fast transfer</span> <Info {...args} />

package/src/inlineAlert/InlineAlert.story.tsx

@@ -7,6 +7,7 @@ import Link from '../link';
 export default {
   component: InlineAlert,
   title: 'Forms/InlineAlert',
+  tags: ['autodocs'],
 } as Meta<InlineAlertProps>;
 
 export const Basic = () => {

package/src/inputWithDisplayFormat/InputWithDisplayFormat.story.tsx

@@ -16,6 +16,7 @@ const meta: Meta<typeof InputWithDisplayFormat> = {
       </Field>
     );
   },
+  tags: ['autodocs'],
   args: {
     onFocus: fn(),
     onBlur: fn(),

package/src/inputs/InputGroup.story.tsx

@@ -11,6 +11,7 @@ import { InputGroup } from './InputGroup';
 export default {
   component: InputGroup,
   title: 'Forms/InputGroup',
+  tags: ['autodocs'],
 } satisfies Meta<typeof InputGroup>;
 
 type Story = StoryObj<typeof InputGroup>;

package/src/inputs/SearchInput.story.tsx

@@ -9,6 +9,7 @@ import { SearchInput } from './SearchInput';
 export default {
   component: SearchInput,
   title: 'Forms/SearchInput',
+  tags: ['autodocs'],
 } satisfies Meta<typeof SearchInput>;
 
 type Story = StoryObj<typeof SearchInput>;

package/src/legacylistItem/LegacyListItem.tests.story.tsx

@@ -6,6 +6,7 @@ import LegacyListItem, { List, type LegacyListItemProps } from '.';
 export default {
   component: LegacyListItem,
   title: 'Other/LegacyListItem/tests',
+  tags: ['autodocs'],
 };
 
 export const LongText = () => {

package/src/link/Link.story.tsx

@@ -7,6 +7,7 @@ import Link from '.';
 export default {
   component: Link,
   title: 'Typography/Link',
+  tags: ['autodocs'],
 };
 
 export const Basic = () => {

package/src/main.css

@@ -5149,6 +5149,8 @@ html:not([dir="rtl"]) .np-navigation-option {
   margin-top: var(--size-24);
 }
 .np-switch {
+  all: unset;
+  box-sizing: border-box;
   display: inline-flex;
   overflow: hidden;
   width: 50px;
@@ -5157,6 +5159,7 @@ html:not([dir="rtl"]) .np-navigation-option {
   -webkit-user-select: none;
      -moz-user-select: none;
           user-select: none;
+  cursor: pointer;
 }
 .np-switch:focus {
   outline: none;
@@ -5189,21 +5192,10 @@ html:not([dir="rtl"]) .np-navigation-option {
 [dir="rtl"] .np-switch--checked .np-switch--thumb {
   transform: translateX(-20px)  ;
 }
-.np-switch input {
-  position: absolute;
-  left: -100%;
-  display: none;
-  width: 0;
-  height: 0;
-  opacity: 0;
-}
-[dir="rtl"] .np-switch input {
-  right: -100%;
-  left: auto;
-  left: initial;
-}
-.np-switch:not([aria-disabled]) {
-  cursor: pointer;
+.np-switch.disabled {
+  filter: grayscale(1);
+  opacity: 0.45;
+  cursor: not-allowed !important;
 }
 .np-theme-personal .np-switch {
   padding: 1px 2px;
@@ -5219,6 +5211,10 @@ html:not([dir="rtl"]) .np-navigation-option {
   background-color: #ffffff;
   background-color: var(--color-background-screen);
 }
+.np-switch-option.disabled .np-switch {
+  filter: none;
+  opacity: 1;
+}
 .tabs {
   position: relative;
 }

package/src/main.less

@@ -65,6 +65,7 @@
 @import "./segmentedControl/SegmentedControl.less";
 @import "./summary/Summary.less";
 @import "./switch/Switch.less";
+@import "./switchOption/SwitchOption.less";
 @import "./tabs/Tabs.less";
 @import "./table/Table.less";
 @import "./tile/Tile.less";

package/src/modal/Modal.story.tsx

@@ -10,10 +10,11 @@ import { lorem10, lorem100, lorem1000, storyConfig } from '../test-utils';
 export default {
   component: Modal,
   title: 'Dialogs/Modal',
+  tags: ['autodocs'],
   args: {
     size: 'md',
     position: 'center',
-    open: true,
+    open: false,
   },
   parameters: {
     chromatic: {
@@ -27,10 +28,11 @@ type Story = StoryObj<typeof Modal>;
 export interface StoryContentProps {
   args: CommonProps & ModalProps;
   screenMode?: ScreenMode;
+  viewMode?: string;
 }
 
-const StoryContent = ({ args, screenMode }: StoryContentProps) => {
-  const [open, setOpen] = useState(args.open);
+const StoryContent = ({ args, screenMode, viewMode }: StoryContentProps) => {
+  const [open, setOpen] = useState(viewMode !== 'docs');
 
   return (
     <>
@@ -70,7 +72,7 @@ export const Basic: Story = {
       </Button>
     ),
   },
-  render: (args) => <StoryContent args={args} />,
+  render: (args, context) => <StoryContent args={args} viewMode={context.viewMode} />,
 };
 
 export const BasicMobile: Story = storyConfig(Basic, { variants: ['mobile'] });
@@ -81,6 +83,7 @@ export const ContentScroll: Story = {
     body: lorem1000,
     scroll: Scroll.CONTENT,
   },
+  render: (args, context) => <StoryContent args={args} viewMode={context.viewMode} />,
 };
 
 export const ContentScrollMobile: Story = storyConfig(ContentScroll, { variants: ['mobile'] });
@@ -91,6 +94,7 @@ export const ViewportScroll: Story = {
     body: lorem1000,
     scroll: Scroll.VIEWPORT,
   },
+  render: (args, context) => <StoryContent args={args} viewMode={context.viewMode} />,
 };
 
 export const ViewportScrollMobile: Story = storyConfig(ViewportScroll, { variants: ['mobile'] });
@@ -100,6 +104,7 @@ export const WithoutTitle: Story = {
     body: lorem1000,
     scroll: Scroll.CONTENT,
   },
+  render: (args, context) => <StoryContent args={args} viewMode={context.viewMode} />,
 };
 
 export const WithoutTitleMobile: Story = storyConfig(WithoutTitle, { variants: ['mobile'] });
@@ -115,9 +120,9 @@ export const WithThemeProviderInContent: Story = {
       </Button>
     ),
   },
-  render: (args, { globals: { screenMode } }) => (
+  render: (args, { globals: { screenMode }, viewMode }) => (
     // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-    <StoryContent args={args} screenMode={screenMode} />
+    <StoryContent args={args} screenMode={screenMode} viewMode={viewMode} />
   ),
 };
 

package/src/money/Money.story.tsx

@@ -5,6 +5,7 @@ import Money from './Money';
 export default {
   component: Money,
   title: 'Typography/Money',
+  tags: ['autodocs'],
 } satisfies Meta<typeof Money>;
 
 type Story = StoryObj<typeof Money>;

package/src/navigationOptionsList/NavigationOptionsList.story.tsx

@@ -5,6 +5,7 @@ import NavigationOptionsList from '.';
 export default {
   component: NavigationOptionsList,
   title: 'Option/NavigationOptionsList',
+  tags: ['autodocs'],
 };
 
 export const Basic = () => {

package/src/nudge/Nudge.story.tsx

@@ -6,6 +6,7 @@ import { Nudge } from '..';
 export default {
   component: Nudge,
   title: 'Feedback/Nudge',
+  tags: ['autodocs'],
 };
 
 export const Default = () => {

package/src/overlayHeader/OverlayHeader.story.tsx

@@ -11,6 +11,7 @@ import OverlayHeader from './OverlayHeader';
 export default {
   component: OverlayHeader,
   title: 'Navigation/OverlayHeader',
+  tags: ['autodocs'],
 };
 
 const avatarProfiles = {

package/src/progress/Progress.story.tsx

@@ -5,6 +5,7 @@ import Progress from './Progress';
 export default {
   component: Progress,
   title: 'Other/Progress',
+  tags: ['autodocs'],
 } satisfies Meta<typeof Progress>;
 
 type Story = StoryObj<typeof Progress>;

package/src/provider/Provider.story.tsx

@@ -7,6 +7,7 @@ import closeButtonMessages from '../common/closeButton/CloseButton.messages';
 export default {
   component: Provider,
   title: 'Other/Provider',
+  tags: ['autodocs'],
 } satisfies Meta<typeof Provider>;
 
 type Story = StoryObj<typeof Provider>;

package/src/radio/Radio.story.tsx

@@ -7,6 +7,7 @@ import { Flag } from '@wise/art';
 export default {
   component: Radio,
   title: 'Forms/Radio',
+  tags: ['autodocs'],
 };
 
 export const Basic = () => {

package/src/radioGroup/RadioGroup.story.tsx

@@ -9,6 +9,7 @@ import AvatarView from '../avatarView';
 const meta = {
   component: RadioGroup,
   title: 'Forms/RadioGroup',
+  tags: ['autodocs'],
 } satisfies Meta<typeof RadioGroup>;
 
 export default meta;

package/src/radioOption/RadioOption.story.tsx

@@ -10,6 +10,7 @@ import RadioOption, { RadioOptionProps } from './RadioOption';
 export default {
   component: RadioOption,
   title: 'Option/RadioOption',
+  tags: ['autodocs'],
 };
 
 const Template = (props: Partial<RadioOptionProps>) => {

package/src/section/Section.story.tsx

@@ -11,6 +11,7 @@ import Section from './Section';
 export default {
   component: Section,
   title: 'Content/Section',
+  tags: ['autodocs'],
 };
 
 export const Basic = () => {

package/src/segmentedControl/SegmentedControl.story.tsx

@@ -8,6 +8,7 @@ import SegmentedControl from './SegmentedControl';
 export default {
   component: SegmentedControl,
   title: 'Forms/SegmentedControl',
+  tags: ['autodocs'],
 };
 
 const Template: StoryFn = (args) => {

package/src/select/Select.story.tsx

@@ -10,6 +10,7 @@ import Select, { SelectItem, SelectOptionItem } from './Select';
 export default {
   component: Select,
   title: 'Forms/Select (Deprecated)',
+  tags: ['autodocs'],
 };
 
 const ImageIcon = () => (

package/src/slidingPanel/SlidingPanel.story.tsx

@@ -8,6 +8,7 @@ import SlidingPanel from './SlidingPanel';
 export default {
   component: SlidingPanel,
   title: 'Dialogs/SlidingPanel',
+  tags: ['autodocs'],
 };
 
 export const Basic = () => {

package/src/snackbar/Snackbar.story.tsx

@@ -13,6 +13,7 @@ import SnackbarProvider from './SnackbarProvider';
 export default {
   component: Snackbar,
   title: 'Dialogs/Snackbar',
+  tags: ['autodocs'],
 };
 
 export const Basic = () => {

package/src/summary/Summary.story.tsx

@@ -9,6 +9,7 @@ import Summary from './Summary';
 export default {
   component: Summary,
   title: 'Content/Summary',
+  tags: ['autodocs'],
 };
 
 export const Basic = () => {

package/src/switch/Switch.css

@@ -1,4 +1,8 @@
-.np-switch {
+@media (min-width: 768px) {
+}@media (min-width: 768px) {
+}.np-switch {
+  all: unset;
+  box-sizing: border-box;
   display: inline-flex;
   overflow: hidden;
   width: 50px;
@@ -7,61 +11,38 @@
   -webkit-user-select: none;
      -moz-user-select: none;
           user-select: none;
-}
-.np-switch:focus {
+  cursor: pointer;
+}.np-switch:focus {
   outline: none;
-}
-.np-switch:focus-visible {
+}.np-switch:focus-visible {
   outline: var(--ring-outline-color) solid var(--ring-outline-width);
   outline-offset: var(--ring-outline-offset);
-}
-.np-switch--thumb {
+}.np-switch--thumb {
   display: flex;
   transition: transform cubic-bezier(0, 0.94, 0.62, 1) 350ms;
-}
-.np-switch--thumb .tw-icon {
+}.np-switch--thumb .tw-icon {
   color: #fff;
-}
-.np-switch--unchecked {
+}.np-switch--unchecked {
   background: #c9cbce;
   background: var(--color-interactive-secondary);
-}
-.np-switch--unchecked .switch--thumb {
+}.np-switch--unchecked .switch--thumb {
   transform: translateX(0);
-}
-.np-switch--checked {
+}.np-switch--checked {
   background: #00a2dd;
   background: var(--color-interactive-accent);
-}
-.np-switch--checked .np-switch--thumb {
+}.np-switch--checked .np-switch--thumb {
   transform: translateX(20px)  ;
-}
-[dir="rtl"] .np-switch--checked .np-switch--thumb {
+}[dir="rtl"] .np-switch--checked .np-switch--thumb {
   transform: translateX(-20px)  ;
-}
-.np-switch input {
-  position: absolute;
-  left: -100%;
-  display: none;
-  width: 0;
-  height: 0;
-  opacity: 0;
-}
-[dir="rtl"] .np-switch input {
-  right: -100%;
-  left: auto;
-  left: initial;
-}
-.np-switch:not([aria-disabled]) {
-  cursor: pointer;
-}
-.np-theme-personal .np-switch {
+}.np-switch.disabled {
+  filter: grayscale(1);
+  opacity: 0.45;
+  cursor: not-allowed !important;
+}.np-theme-personal .np-switch {
   padding: 1px 2px;
-}
-.np-theme-personal .np-switch--checked {
+}.np-theme-personal .np-switch--checked {
   background: var(--color-interactive-primary);
-}
-.np-theme-personal .np-switch--thumb {
+}.np-theme-personal .np-switch--thumb {
   width: 20px;
   height: 20px;
   margin: 3px;

package/src/switch/Switch.less

@@ -1,14 +1,18 @@
 @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";
 
 .np-switch {
+  all: unset;
+  box-sizing: border-box;
   display: inline-flex;
   overflow: hidden;
   width: 50px;
   padding: 2px;
   border-radius: 16px;
   user-select: none;
+  cursor: pointer;
 
   .focus-ring();
 
@@ -37,18 +41,8 @@
     }
   }
 
-  input {
-    position: absolute;
-    .left(-100%);
-
-    display: none;
-    width: 0;
-    height: 0;
-    opacity: 0;
-  }
-
-  &:not([aria-disabled]) {
-    cursor: pointer;
+  &.disabled{
+    .disabled();
   }
 }
 

package/src/switch/Switch.spec.tsx

@@ -1,5 +1,5 @@
 import { Field } from '../field/Field';
-import { render, fireEvent, screen } from '../test-utils';
+import { render, userEvent, fireEvent, screen } from '../test-utils';
 
 import Switch from './Switch';
 
@@ -22,7 +22,7 @@ describe('Switch', () => {
         onClick={props.onClick}
       />,
     );
-    expect(container).toMatchSnapshot();
+    expect(screen.getByRole('switch')).toBeChecked();
   });
 
   it('renders component associated with label', () => {
@@ -54,25 +54,27 @@ describe('Switch', () => {
         onClick={props.onClick}
       />,
     );
-    expect(container).toMatchSnapshot();
+    expect(screen.getByLabelText(props['aria-label'])).not.toBeChecked();
   });
 
-  it('calls onClick when user press space key', () => {
+  it('calls onClick when user press space or enter key', async () => {
     render(
       <Switch
-        checked={props.checked}
         className={props.className}
-        id={props.id}
         aria-label={props['aria-label']}
         onClick={props.onClick}
       />,
     );
 
-    const input = screen.getAllByRole('checkbox')[0];
-    fireEvent.keyDown(input, { key: 'Enter' });
     expect(props.onClick).not.toHaveBeenCalled();
-    fireEvent.keyDown(input, { key: ' ' });
+
+    await userEvent.tab();
+
+    await userEvent.keyboard(' ');
     expect(props.onClick).toHaveBeenCalledTimes(1);
+
+    await userEvent.keyboard('{Enter}');
+    expect(props.onClick).toHaveBeenCalledTimes(2);
   });
 
   it('should not call onClick if disabled', () => {