CellMenu - Update styles

Author: ryanlanciaux

src/CellMenu/CellMenu.css

@@ -37,4 +37,10 @@
 
 .cell-menu-item.heading {
   color: rgba(255, 255, 255, 0.6);
+}
+
+.cell-menu-item .cell-menu-item-toggle {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
 }

src/ToggleSwitch/ToggleSwitch.tsx

@@ -1,20 +1,31 @@
-import React from 'react';
+import React, { HTMLAttributes } from 'react';
 import Toggle from 'react-toggle';
 import './ToggleSwitch.css';
-interface Props {
+
+type LabelPlacement = 'start' | 'end';
+
+interface Props extends HTMLAttributes<HTMLLabelElement> {
   label?: string;
   checked?: boolean;
   onChange?: () => void;
+  labelPlacement?: LabelPlacement;
 }
 
-export const ToggleSwitch: React.FC<Props> = ({ label, checked, onChange }) => (
-  <label>
+export const ToggleSwitch: React.FC<Props> = ({
+  label,
+  checked,
+  onChange,
+  labelPlacement = 'end',
+  ...props
+}) => (
+  <label {...props}>
+    {label && labelPlacement === 'start' && <span>{label}</span>}
     <Toggle
       icons={false}
       checked={checked}
       onChange={onChange}
       className="toggle-switch"
     />
-    {label && <span>{label}</span>}
+    {label && labelPlacement === 'end' && <span>{label}</span>}
   </label>
 );

stories/CellMenu.stories.tsx

@@ -26,10 +26,12 @@ export const Default = (props?: Partial<Props>) => {
           <span>Two</span>
         </CellMenuItem>
         <CellMenuItem>
-          Two
           <ToggleSwitch
+            label="Input"
+            labelPlacement="start"
             checked={checked}
             onChange={() => toggleChecked(previous => !previous)}
+            className="cell-menu-item-toggle"
           />
         </CellMenuItem>
       </CellMenuSection>