@transferwise/components 46.99.0 → 46.100.1

package/src/switch/Switch.story.tsx

@@ -1,59 +1,183 @@
 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(),
+  },
+} 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',
+
+  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/table/Table.story.tsx

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

package/src/tabs/Tabs.story.tsx

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

package/src/tooltip/Tooltip.story.tsx

@@ -20,7 +20,6 @@ export default {
       </Tooltip>
     </div>
   ),
-  tags: ['autodocs'],
 } satisfies Meta<typeof Tooltip>;
 
 type Story = StoryObj<typeof Tooltip>;

package/src/typeahead/Typeahead.story.tsx

@@ -48,6 +48,7 @@ const meta: Meta<typeof Typeahead> = {
     onInputChange: fn(),
     onSearch: fn(),
   },
+
   argTypes: {
     size: {
       control: 'inline-radio',

package/src/upload/Upload.story.tsx

@@ -8,7 +8,7 @@ import { Field } from '../field/Field';
 const meta = {
   component: Upload,
   title: 'Forms/Upload',
-  tags: ['autodocs'],
+
   argTypes: {
     maxSize: {
       control: {

package/src/uploadInput/UploadInput.story.tsx

@@ -8,7 +8,6 @@ import { UploadResponse } from './types';
 const meta: Meta<typeof UploadInput> = {
   title: 'Forms/UploadInput',
   component: UploadInput,
-  tags: ['autodocs'],
 };
 
 export default meta;

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>
-`;