Merge pull request #1599 from public-convenience-ltd/add-switch-to-de…

…sign-system

Add switch to design system

.storybook/main.js

@@ -29,6 +29,10 @@ module.exports = {
       ...config,
       resolve: {
         ...config.resolve,
+        alias: {
+          ...config.resolve.alias,
+          src: path.resolve(__dirname, '../src'),
+        },
         fallback: {
           ...(config.resolve || {}).fallback,
           https: false,

.storybook/preview.js

@@ -5,11 +5,7 @@ import providersDecorator from './providersDecorator';
 import { MockedProvider } from '@apollo/client/testing';
 
 // Import design system component styles for our Stories.
-import '../src/design-system/components/Badge/Badge.css';
-import '../src/design-system/components/Button/Button.css';
-import '../src/design-system/components/Icon/Icon.css';
-import '../src/design-system/components/InputField/InputField.css';
-import '../src/design-system/components/RadioInput/RadioInput.css';
+import '../src/design-system/components/stylesheet.css';
 
 export const parameters = {
   actions: { argTypesRegex: '^on[A-Z].*' },

src/components/Drawer/Drawer.stories.tsx

@@ -5,7 +5,7 @@ import React, { useState } from 'react';
 import { default as DrawerComponent } from '.';
 import Box from '../Box';
 import Icon from '../../design-system/components/Icon';
-import Switch from '../Switch';
+import Switch from '../../design-system/components/Switch';
 
 export default {
   name: 'Drawer',

src/components/EntryForm.tsx

@@ -20,7 +20,7 @@ import Box from '../components/Box';
 import Text from '../components/Text';
 import Spacer from '../components/Spacer';
 import VisuallyHidden from '../components/VisuallyHidden';
-import Switch from '../components/Switch';
+import Switch from '../design-system/components/Switch';
 import { WEEKDAYS, isClosed, Weekdays } from '../lib/openingTimes';
 import crosshair from '../../public/crosshair-small.svg';
 

src/components/Filters.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { usePlausible } from 'next-plausible';
 
 import Box from './Box';
-import Switch from './Switch';
+import Switch from '../design-system/components/Switch';
 import Icon from '../design-system/components/Icon';
 import { IconProps } from '../design-system/components/Icon/Icon.types';
 import config from '../config';

src/design-system/components/Switch/Switch.css

@@ -0,0 +1,31 @@
+.switch {
+    --switch-height: 16px;
+    --switch-width: 27px;
+    --switch-thumb-padding: 1px;
+    --switch-thumb-size: calc(var(--switch-height) - var(--switch-thumb-padding) * 2);
+
+    position: relative;
+    background-color: var(--color-blue);
+    border-radius: calc(var(--switch-height) + var(--switch-thumb-padding) * 2);
+    width: var(--switch-width);
+    height: var(--switch-height);
+}
+
+.switch[aria-checked=true] {
+    background-color: var(--color-pink);
+}
+
+.switch .switch-thumb {
+    transition: left 0.2s ease;
+    position:absolute;
+    width: var(--switch-thumb-size); 
+    height: var(--switch-thumb-size);
+    top: var(--switch-thumb-padding);
+    left: var(--switch-thumb-padding);
+    border-radius: 50%;
+    background-color: white;
+}
+
+.switch[aria-checked=true] .switch-thumb {
+    left: calc(100% - var(--switch-thumb-size) - var(--switch-thumb-padding));
+}

src/design-system/components/Switch/Switch.stories.tsx

@@ -0,0 +1,20 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import Switch from './Switch';
+import { useState } from 'react';
+
+const meta: Meta<typeof Switch> = {
+  title: 'Design-System/Form Elements/Switch',
+  component: Switch,
+};
+
+export default meta;
+
+const SwitchWithState = () => {
+  const [checked, setChecked] = useState(false);
+  return <Switch onChange={setChecked} checked={checked} />;
+};
+
+export const Primary: StoryObj<typeof Switch> = {
+  render: () => <SwitchWithState />,
+};

src/design-system/components/Switch/Switch.tsx

@@ -0,0 +1,38 @@
+import { ComponentPropsWithoutRef, forwardRef } from 'react';
+
+interface SwitchProps
+  extends Omit<ComponentPropsWithoutRef<'button'>, 'onClick' | 'onChange'> {
+  /** Determines whether the switch is on */
+  checked: boolean;
+  onClick?: () => void;
+  onChange?: (checked: boolean) => void;
+}
+
+const Switch = forwardRef<HTMLButtonElement, SwitchProps>(
+  ({ checked, onClick, onChange, ...props }, ref) => {
+    return (
+      <button
+        type="button"
+        role="switch"
+        ref={ref}
+        {...props}
+        className="switch"
+        aria-checked={checked}
+        onClick={() => {
+          if (onClick) {
+            onClick();
+          }
+          if (onChange) {
+            onChange(!checked);
+          }
+        }}
+      >
+        <span className="switch-thumb" />
+      </button>
+    );
+  },
+);
+
+Switch.displayName = 'Switch';
+
+export default Switch;

src/design-system/components/Switch/index.ts

@@ -0,0 +1 @@
+export { default } from './Switch';

src/design-system/components/stylesheet.css

@@ -3,3 +3,4 @@
 @import 'src/design-system/components/Icon/Icon.css';
 @import 'src/design-system/components/InputField/InputField.css';
 @import 'src/design-system/components/RadioInput/RadioInput.css';
+@import 'src/design-system/components/Switch/Switch.css';