@transferwise/components 46.98.1 → 46.100.0

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>
     </>
-  );
+  ),
 };

package/src/switchOption/SwitchOption.tsx

@@ -62,6 +62,7 @@ const SwitchOption = ({
   return (
     <Option
       {...sharedProps}
+      className="np-switch-option"
       button={
         <Switch
           id={id}

package/src/switch/__snapshots__/Switch.spec.tsx.snap

@@ -1,44 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Switch renders component when checked 1`] = `
-<div>
-  <span
-    aria-checked="true"
-    aria-label="a label"
-    class="np-switch np-switch--checked a-class-name"
-    id="id"
-    role="switch"
-    tabindex="0"
-  >
-    <span
-      class="np-switch--thumb"
-    />
-    <input
-      checked=""
-      readonly=""
-      type="checkbox"
-    />
-  </span>
-</div>
-`;
-
-exports[`Switch renders component when unchecked 1`] = `
-<div>
-  <span
-    aria-checked="false"
-    aria-label="a label"
-    class="np-switch np-switch--unchecked a-class-name"
-    id="id"
-    role="switch"
-    tabindex="0"
-  >
-    <span
-      class="np-switch--thumb"
-    />
-    <input
-      readonly=""
-      type="checkbox"
-    />
-  </span>
-</div>
-`;