fix button type, add disabled button, string enum

1. use string enum as button type
2. default to dark mode on start

src/components/common/Button/index.stories.tsx

@@ -31,35 +31,42 @@ const Template: Story<ButtonBaseProps & { label?: string | React.ReactNode }> =
 export const PrimaryButton = Template.bind({})
 PrimaryButton.args = {
   label: 'Main Button',
-  kind: 'default',
+  kind: ButtonVariations.default,
 }
 
 export const SecondaryButton = Template.bind({})
 SecondaryButton.args = {
   label: 'Secondary Button',
-  kind: 'secondary',
+  kind: ButtonVariations.secondary,
 }
 
 export const SuccessButton = Template.bind({})
 SuccessButton.args = {
   label: 'Success Button',
-  kind: 'success',
+  kind: ButtonVariations.success,
 }
 
 export const WarningButton = Template.bind({})
 WarningButton.args = {
   label: 'Warning Button',
-  kind: 'warning',
+  kind: ButtonVariations.warning,
 }
 
 export const DangerButton = Template.bind({})
 DangerButton.args = {
   label: 'Danger Button',
-  kind: 'danger',
+  kind: ButtonVariations.danger,
 }
 
 export const CancelButton = Template.bind({})
 CancelButton.args = {
   label: 'Cancel Button',
-  kind: 'cancel',
+  kind: ButtonVariations.cancel,
+}
+
+export const DisabledButton = Template.bind({})
+DisabledButton.args = {
+  label: 'Disabled Button',
+  kind: ButtonVariations.disabled,
+  disabled: true,
 }

src/components/common/Button/index.tsx

@@ -3,7 +3,7 @@ import React from 'react'
 import styled from 'styled-components'
 import StyledButton, { ButtonVariations } from 'styles/common/StyledButton'
 
-export interface ButtonBaseProps {
+export interface ButtonBaseProps extends React.ButtonHTMLAttributes<Element> {
   kind?: keyof typeof ButtonVariations
 }
 
@@ -52,7 +52,6 @@ const ThemeButtonToggleWrapper = styled.div<{ $mode: boolean }>`
 
 export const ThemeButton: React.FC<
   ButtonBaseProps & {
-    onClick: ((event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void) | undefined
     mode: boolean
   }
 > = (props) => {

src/storybook/decorators.tsx

@@ -13,11 +13,12 @@ import { faMoon, faSun } from '@fortawesome/free-regular-svg-icons'
 
 import { ThemeButton } from 'components/common/Button'
 
-import { ThemeProvider } from 'styled-components'
 import COLOURS from 'styles/colours'
+import { ThemeProvider } from 'styled-components'
+import { ButtonVariations } from 'styles/common/StyledButton'
 
 export const ThemeToggler = (DecoratedStory: () => JSX.Element): JSX.Element => {
-  const [darkMode, setDarkMode] = React.useState(false)
+  const [darkMode, setDarkMode] = React.useState(true)
   const theme = {
     mode: darkMode ? 'dark' : 'light',
   }
@@ -29,7 +30,7 @@ export const ThemeToggler = (DecoratedStory: () => JSX.Element): JSX.Element =>
       <ThemeProvider theme={theme}>
         <Frame style={{ backgroundColor: darkMode ? COLOURS.bgDark : COLOURS.bgLight }}>{DecoratedStory()}</Frame>
         {/* Cheeky use of ButtonBase here :P */}
-        <ThemeButton kind="theme" onClick={handleDarkMode} mode={darkMode}>
+        <ThemeButton kind={ButtonVariations.theme} onClick={handleDarkMode} mode={darkMode}>
           <FontAwesomeIcon icon={darkMode ? faSun : faMoon} />
         </ThemeButton>
         <br />

src/styles/common/StyledButton.ts

@@ -1,5 +1,5 @@
 import styled, { css } from 'styled-components'
-import { variants } from 'styled-theming'
+import { ThemeValue, variants } from 'styled-theming'
 
 import ColourSheet from '../colours'
 import StyleSheet from '../styles'
@@ -24,14 +24,15 @@ const { buttonBorder } = StyleSheet
 // Used in stories
 // Good to keep around altough not required
 export enum ButtonVariations {
-  default,
-  primary,
-  secondary,
-  danger,
-  success,
-  warning,
-  cancel,
-  theme,
+  default = 'default',
+  primary = 'primary',
+  secondary = 'secondary',
+  danger = 'danger',
+  success = 'success',
+  warning = 'warning',
+  cancel = 'cancel',
+  disabled = 'disabled',
+  theme = 'theme',
 }
 
 // Create our variated Button Theme
@@ -160,6 +161,16 @@ export const ButtonTheme = variants<'kind', keyof typeof ButtonVariations>('mode
       }
     `,
   },
+  disabled: {
+    light: css`
+      color: ${white};
+      opacity: 0.5;
+      background: #000;
+    `,
+    get dark(): ThemeValue {
+      return this.light
+    },
+  },
   theme: {
     light: css`
       color: ${white};