@transferwise/components 0.0.0-experimental-67869a3 → 0.0.0-experimental-6039481

package/src/accordion/AccordionItem/AccordionItem.tsx

@@ -102,6 +102,7 @@ const AccordionItem: FC<AccordionItemProps> = ({
       className={clsx('np-accordion-item', {
         'np-accordion-item--open': open,
         'np-accordion-item--with-icon': Boolean(icon),
+        'np-accordion-item--with-media': Boolean(media),
       })}
     >
       <Option

package/src/main.css

@@ -72,11 +72,15 @@
   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 .media {
+.np-theme-personal .np-accordion-item--with-icon .media {
   display: flex;
   align-items: flex-start;
 }
@@ -5145,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;
@@ -5153,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;
@@ -5185,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;
@@ -5215,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/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', () => {

package/src/switch/Switch.story.tsx

@@ -1,59 +1,184 @@
 import { useState } from 'react';
+import { fn } from '@storybook/test';
 
-import Switch from './Switch';
+import Switch, { SwitchProps } from './Switch';
 import { Field } from '../field/Field';
+import { Meta, StoryObj } from '@storybook/react';
+import { Label } from '../label';
 
-export default {
+const meta: Meta<typeof Switch> = {
   component: Switch,
   title: 'Actions/Switch',
+  args: {
+    checked: false,
+    disabled: false,
+    id: 'switchId',
+    className: 'switchClassName',
+    'aria-labelledby': undefined,
+    'aria-label': undefined,
+    onClick: fn(),
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof Switch>;
+
+export default meta;
+type Story = StoryObj<typeof Switch>;
+
+export const Basic: Story = {
+  tags: ['!autodocs', '!dev'],
+};
+
+export const Playground: Story = {
+  tags: ['!autodocs'],
+  argTypes: {
+    onClick: { table: { disable: true } },
+  },
 };
 
-export const Basic = () => {
+export const Interactivity: Story = {
+  render: function Render({ disabled }: SwitchProps) {
+    const [checked1, setCheck1] = useState(false);
+    const [checked2, setCheck2] = useState(true);
+    const [checked3, setCheck3] = useState(false);
+
+    return (
+      <>
+        <Field id="fieldId" label="Using Field component">
+          <Switch checked={checked1} disabled={disabled} onClick={() => setCheck1(!checked1)} />
+        </Field>
+
+        <div>
+          <Label htmlFor="labelId">Using Label component</Label>
+          <Switch
+            id="labelId"
+            checked={checked2}
+            disabled={disabled}
+            onClick={() => setCheck2(!checked2)}
+          />
+        </div>
+
+        <div>
+          <strong id="ariaId" className="d-block">
+            Using `aria-labelledby`
+          </strong>
+          <Switch
+            aria-labelledby="ariaId"
+            checked={checked3}
+            disabled={disabled}
+            onClick={() => setCheck3(!checked3)}
+          />
+        </div>
+      </>
+    );
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `
+function Render() {
   const [checked1, setCheck1] = useState(false);
   const [checked2, setCheck2] = useState(true);
-
+  const [checked3, setCheck3] = useState(false);
+  
   return (
-    <div className="d-flex flex-column">
-      <Field id="switchId" label="A switch with a label" required>
+    <>
+      <Field id="fieldId" label="Using Field component">
         <Switch
           checked={checked1}
-          className="a-class-name"
-          id="switchId"
           onClick={() => setCheck1(!checked1)}
         />
       </Field>
-      <Switch
-        aria-label="I'm a switch without label"
-        checked={checked2}
-        className="a-class-name"
-        onClick={() => setCheck2(!checked2)}
-      />
-    </div>
-  );
+  
+      <div>
+        <Label htmlFor="labelId">Using standalone Label component</Label>
+        <Switch
+          id="labelId"
+          checked={checked2}
+          onClick={() => setCheck2(!checked2)}
+        />
+      </div>
+  
+      <div>
+        <strong id="ariaId" className="d-block">Using \`aria-labelledby\`</strong>
+        <Switch
+          aria-labelledby="ariaId"
+          checked={checked3}
+          onClick={() => setCheck3(!setCheck3)}
+        />
+      </div>
+    </>
+  )
+}`,
+      },
+    },
+  },
+  decorators: [
+    (Story: any) => (
+      <div className="d-flex flex-column" style={{ gap: '1rem' }}>
+        <Story />
+      </div>
+    ),
+  ],
+  args: {},
+  argTypes: {
+    checked: { table: { disable: true } },
+    onClick: { table: { disable: true } },
+  },
 };
 
-export const Disabled = () => {
-  const [checked, setCheck] = useState(false);
+export const Disabled: Story = {
+  render: function Render(args) {
+    const [checked1, setCheck1] = useState(false);
+    const [checked2, setCheck2] = useState(true);
+
+    return (
+      <>
+        <Field label="Switch label">
+          <Switch checked={checked1} disabled onClick={() => setCheck1(!checked1)} />
+        </Field>
+
+        <Field label="Switch label">
+          <Switch checked={checked2} disabled onClick={() => setCheck2(!checked2)} />
+        </Field>
+      </>
+    );
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `
+function Render() {
+  const [checked1, setCheck1] = useState(false);
+  const [checked2, setCheck2] = useState(true);
 
   return (
-    <div className="d-flex flex-column">
-      <Field id="switchId" label="A switch with a label" required>
+    <>
+      <Field label="Switch label">
+        <Switch
+          checked={checked1}
+          disabled
+          onClick={() => setCheck1(!checked1)}
+        />
+      </Fie 
+      <Field label="Switch label">
         <Switch
-          checked={checked}
+          checked={checked2}
           disabled
-          className="a-class-name"
-          id="switchId"
-          onClick={() => setCheck(!checked)}
+          onClick={() => setCheck2(!checked2)}
         />
       </Field>
-      <Switch
-        aria-label="I'm a switch without label"
-        checked={!checked}
-        disabled
-        className="a-class-name"
-        id="switchId1"
-        onClick={() => setCheck(!checked)}
-      />
-    </div>
+    </>
   );
+}`,
+      },
+    },
+  },
+  args: {
+    disabled: true,
+  },
+  argTypes: {
+    disabled: { table: { readonly: true } },
+    onClick: { table: { disable: true } },
+    checked: { table: { disable: true } },
+  },
 };

package/src/switch/Switch.tsx

@@ -34,18 +34,11 @@ const Switch = (props: SwitchProps) => {
     disabled,
   } = props;
 
-  const handleKeyDown: KeyboardEventHandler = (event) => {
-    if (event.key === ' ') {
-      event.preventDefault();
-      onClick();
-    }
-  };
-
   const ariaLabelledby =
     (ariaLabel ? undefined : ariaLabelledbyProp) ?? inputAttributes['aria-labelledby'];
 
   return (
-    <span
+    <button
       className={clsx(
         'np-switch',
         {
@@ -55,20 +48,18 @@ const Switch = (props: SwitchProps) => {
         },
         className,
       )}
-      tabIndex={0}
+      type="button"
       role="switch"
+      {...inputAttributes}
+      id={id}
       aria-checked={checked}
       aria-label={ariaLabel}
-      {...inputAttributes}
       aria-labelledby={ariaLabelledby}
-      id={id}
-      aria-disabled={disabled}
+      disabled={disabled}
       onClick={!disabled ? onClick : undefined}
-      onKeyDown={!disabled ? handleKeyDown : undefined}
     >
       <span className="np-switch--thumb" />
-      <input type="checkbox" checked={checked} readOnly />
-    </span>
+    </button>
   );
 };
 

package/src/switchOption/SwitchOption.css

@@ -0,0 +1,4 @@
+.np-switch-option.disabled .np-switch {
+  filter: none;
+  opacity: 1;
+}

package/src/switchOption/SwitchOption.less

@@ -0,0 +1,8 @@
+.np-switch-option {
+  &.disabled {
+    .np-switch {
+      filter: none;
+      opacity: 1;
+    }
+  }
+}

package/src/switchOption/SwitchOption.spec.tsx

@@ -22,12 +22,12 @@ describe('SwitchOption', () => {
     expect(screen.getByText('title')).toBeInTheDocument();
     expect(screen.getByText('content')).toBeInTheDocument();
     expect(screen.getByTestId('fast-flag')).toBeInTheDocument();
-    expect(screen.getAllByRole('checkbox')[0]).toBeInTheDocument();
+    expect(screen.getAllByRole('switch')[0]).toBeInTheDocument();
   });
 
   it('checks the switch when the user interacts with it', () => {
     // Uses first in array to bypass the fact theres a hidden readonly input
-    const getSwitch = () => screen.getAllByRole('checkbox')[0];
+    const getSwitch = () => screen.getAllByRole('switch')[0];
 
     const mockOnChange = jest.fn();
 
@@ -64,8 +64,7 @@ describe('SwitchOption', () => {
     );
 
     expect(getSwitch()).toBeChecked();
-
-    fireEvent.keyDown(getSwitch(), { key: ' ' });
+    fireEvent.click(getSwitch());
 
     expect(mockOnChange).toHaveBeenLastCalledWith(false);
     expect(mockOnChange).toHaveBeenCalledTimes(2);
@@ -107,7 +106,7 @@ describe('SwitchOption', () => {
 
     expect(mockOnChange).toHaveBeenCalledTimes(2);
 
-    fireEvent.click(screen.getAllByRole('checkbox')[0]);
+    fireEvent.click(screen.getAllByRole('switch')[0]);
 
     expect(mockOnChange).toHaveBeenCalledTimes(3);
   });

package/src/switchOption/SwitchOption.story.tsx

@@ -1,65 +1,69 @@
 import { action } from '@storybook/addon-actions';
-import { text, boolean } from '@storybook/addon-knobs';
 import { FastFlag as FastFlagIcon } from '@transferwise/icons';
 import { useState } from 'react';
 
 import { Nudge, Title, Typography } from '..';
 
-import SwitchOption from './SwitchOption';
+import SwitchOption, { type SwitchOptionProps } from './SwitchOption';
 
-export default {
+const meta = {
   component: SwitchOption,
   title: 'Option/SwitchOption',
+  tags: ['autodocs'],
+  argTypes: {
+    title: { control: 'text' },
+    content: { control: 'text' },
+    disabled: { control: 'boolean' },
+    showMediaAtAllSizes: { control: 'boolean' },
+    isContainerAligned: { control: 'boolean' },
+    checked: { control: 'boolean' },
+  },
+  args: {
+    title: 'Switch option',
+    content: 'Normally, the button and icon are vertically centered.',
+    disabled: false,
+    showMediaAtAllSizes: false,
+    isContainerAligned: false,
+    checked: false,
+    id: 'id',
+    complex: false,
+    'aria-label': 'Switch option',
+  },
 };
+export default meta;
 
-const Template = () => {
-  const [checked, setChecked] = useState(false);
-  const title = text('title', 'Switch option');
-  const content = text('content', 'Normally, the button and icon are vertically centered.');
-  const disabled = boolean('disabled', false);
-  const showMediaAtAllSizes = boolean('showMediaAtAllSizes', false);
-  const isContainerAligned = boolean('isContainerAligned', false);
+function Template(args: SwitchOptionProps) {
+  const [checked, setChecked] = useState(args.checked);
 
   return (
-    <SwitchOption
-      media={<FastFlagIcon />}
-      title={title}
-      content={content}
-      id="id"
-      checked={checked}
-      complex={false}
-      disabled={disabled}
-      showMediaAtAllSizes={showMediaAtAllSizes}
-      isContainerAligned={isContainerAligned}
-      aria-label={title}
-      onChange={setChecked}
-    />
+    <SwitchOption {...args} media={<FastFlagIcon />} checked={checked} onChange={setChecked} />
   );
-};
+}
 
-export const Basic = () => {
-  return <Template />;
+export const Playground = {
+  render: (args: SwitchOptionProps) => <Template {...args} />,
+  tags: ['!autodocs'],
 };
 
-export const Multiple = () => {
-  return (
+export const Multiple = {
+  render: (args: SwitchOptionProps) => (
     <>
-      <Template />
-      <Template />
-      <Template />
+      <Template {...args} />
+      <Template {...args} />
+      <Template {...args} />
     </>
-  );
+  ),
 };
 
-export const WithContainerContent = () => {
-  return (
+export const WithContainerContent = {
+  render: (args: SwitchOptionProps) => (
     <>
       <Title type={Typography.TITLE_SUBSECTION} className="m-b-1">
         Choose how to pay
       </Title>
-      <Template />
-      <Template />
-      <Template />
+      <Template {...args} />
+      <Template {...args} />
+      <Template {...args} />
       <div>
         <Nudge
           className="m-t-2"
@@ -72,5 +76,5 @@ export const WithContainerContent = () => {
         />
       </div>
     </>
-  );
+  ),
 };