feat: add Toggle component (#1224)

src/components/button/styles.ts

@@ -57,6 +57,13 @@ const buttonColors = (dark: string, base: string, kind: string) => {
         return base;
     };
 
+    const borderColor = (): ColorGroup | string => {
+        if (isPrimary) return base;
+        if (isSecondary) return lightGrey;
+        if (isTertiary) return lightestGrey;
+        return dark;
+    };
+
     const hoverTextColor = (): ColorGroup | string => {
         if (isPrimary) return lightBase;
         if (isSecondary) return darkBase;
@@ -65,7 +72,7 @@ const buttonColors = (dark: string, base: string, kind: string) => {
     };
 
     return {
-        borderColor: isPrimary ? base : lightGrey,
+        borderColor: borderColor(),
         backgroundColor: isPrimary ? base : 'transparent',
         textColor: textColor(),
         hoverBackgroundColor: isPrimary ? dark : lightestGrey,

src/components/elevated/Elevated.spec.tsx

@@ -6,8 +6,8 @@ import 'jest-styled-components';
 import { ThemeProvider } from '../theme-provider';
 import { Elevated, ElevationHeight } from './index';
 
-const setup = (Tag: React.ReactElement) =>
-    render(<ThemeProvider>{Tag}</ThemeProvider>);
+const setup = (Elevated: React.ReactElement) =>
+    render(<ThemeProvider>{Elevated}</ThemeProvider>);
 
 test('it works', () => {
     const { container } = setup(<Elevated>Hello world</Elevated>);

src/components/toggle/Toggle.spec.tsx

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import { render } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import 'jest-styled-components';
+
+import { ThemeProvider } from '../theme-provider';
+import { ButtonKind } from '../button';
+import { Toggle } from './index';
+
+const setup = (Toggle: React.ReactElement) =>
+    render(<ThemeProvider>{Toggle}</ThemeProvider>);
+
+const kinds: ButtonKind[] = ['primary', 'secondary', 'tertiary', 'danger'];
+
+test('it works', () => {
+    kinds.forEach((kind) => {
+        const { container } = setup(<Toggle kind={kind}>Hello world</Toggle>);
+        expect(container.firstChild).toMatchSnapshot();
+    });
+});
+
+test('it works with checked', () => {
+    kinds.forEach((kind) => {
+        const { container } = setup(
+            <Toggle kind={kind} checked>
+                Hello world
+            </Toggle>
+        );
+        expect(container.firstChild).toMatchSnapshot();
+    });
+});

src/components/toggle/Toggle.stories.tsx

@@ -0,0 +1,54 @@
+import * as React from 'react';
+import { ThemeProvider } from '../theme-provider';
+import { Toggle } from './index';
+import { Box } from '../box';
+
+export default {
+    title: 'Components/Toggle',
+    component: Toggle,
+    decorators: [(getStory) => <ThemeProvider>{getStory()}</ThemeProvider>]
+};
+
+const DefaultTemplate = (args) => {
+    const [checked, setChecked] = React.useState(false);
+    return (
+        <Toggle
+            kind={args?.kind || 'primary'}
+            checked={checked}
+            onClick={() => setChecked(!checked)}
+            {...args}
+        />
+    );
+};
+
+export const SingleToggle = (args) => (
+    <DefaultTemplate {...args}>Toggle</DefaultTemplate>
+);
+
+export const MultiToggle = (args) => {
+    const [option1Checked, setOption1Checked] = React.useState(false);
+    const [option2Checked, setOption2Checked] = React.useState(false);
+
+    return (
+        <Box styles={{ display: 'flex', sizeGap: '2' }}>
+            <DefaultTemplate
+                kind="tertiary"
+                variant="medium"
+                checked={option1Checked}
+                onClick={() => setOption1Checked(!option1Checked)}
+                {...args}
+            >
+                Option 1
+            </DefaultTemplate>
+            <DefaultTemplate
+                kind="tertiary"
+                variant="medium"
+                checked={option2Checked}
+                onClick={() => setOption2Checked(!option2Checked)}
+                {...args}
+            >
+                Option 2
+            </DefaultTemplate>
+        </Box>
+    );
+};