From ecec737fb50ffb02096c7ee403cc387540d339e9 Mon Sep 17 00:00:00 2001
From: MitchelvanBever <mitchel@storyofams.com>
Date: Fri, 22 Oct 2021 11:17:30 +0200
Subject: [PATCH] =?UTF-8?q?refactor(classnames):=20=F0=9F=94=8D=20=20ensur?=
 =?UTF-8?q?e=20classnames=20are=20applied=20to=20the=20right=20element?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/Toggle/index.tsx        |  3 +++
 .../common/Toggle/toggle.stories.tsx          | 19 +++++++++++++++++++
 2 files changed, 22 insertions(+)

diff --git a/src/components/common/Toggle/index.tsx b/src/components/common/Toggle/index.tsx
index d02a793..111a05a 100644
--- a/src/components/common/Toggle/index.tsx
+++ b/src/components/common/Toggle/index.tsx
@@ -15,6 +15,7 @@ type ToggleProps = {
   id?: string;
   disabled?: boolean;
   label?: string;
+  className?: string;
 } & InputWrapperProps;
 
 const ToggleContainer = styled(Box)<ToggleProps>`
@@ -89,6 +90,7 @@ export const Toggle = forwardRef<CustomCheckboxProps, ToggleProps>(
       id: givenId,
       disabled,
       label,
+      className,
       ...rest
     },
     ref,
@@ -112,6 +114,7 @@ export const Toggle = forwardRef<CustomCheckboxProps, ToggleProps>(
           as="label"
           htmlFor={id}
           disabled={disabled}
+          className={className}
           {...pick(rest)}
         >
           <CustomCheckbox
diff --git a/src/components/common/Toggle/toggle.stories.tsx b/src/components/common/Toggle/toggle.stories.tsx
index 9756914..ac3b277 100644
--- a/src/components/common/Toggle/toggle.stories.tsx
+++ b/src/components/common/Toggle/toggle.stories.tsx
@@ -2,6 +2,8 @@ import React from 'react';
 
 import { Toggle } from '~components';
 
+import { styled } from '~lib';
+
 export default {
   component: Toggle,
   title: 'components/Toggle',
@@ -22,4 +24,21 @@ export default {
   parameters: { controls: { hideNoControlsWarning: true } },
 };
 
+const ExtendedToggle = styled(Toggle, {
+  baseStyles: {
+    '> .slider': {
+      backgroundColor: 'grey300',
+      borderColor: 'grey300',
+    },
+    "[data-reach-custom-checkbox][data-state='checked']": {
+      '& + .slider': {
+        backgroundColor: 'grey800',
+        borderColor: 'grey800',
+      },
+    },
+  },
+});
+
 export const Basic = (args) => <Toggle {...args} />;
+
+export const Extended = (args) => <ExtendedToggle />;