Add stories for remaining button components

src/stories/buttons/ControlButton.stories.jsx

@@ -0,0 +1,94 @@
+import React from 'react'
+import {useArgs} from '@storybook/addons'
+import {ControlButton} from '../../Components/Buttons'
+import {AddCircle, Announcement, ArrowBack, ArrowForward, Check, Help} from '@mui/icons-material'
+import Dialog from '../../Components/Dialog'
+
+
+export default {
+  title: 'BLDRS UI/Buttons/ControlButton',
+  component: ControlButton,
+  argTypes: {
+    icon: {
+      options: ['add', 'back', 'check', 'forward', 'help'],
+      mapping: {
+        add: <AddCircle />,
+        back: <ArrowBack />,
+        check: <Check />,
+        forward: <ArrowForward />,
+        help: <Help />,
+      },
+      control: {
+        type: 'select',
+      },
+      defaultValue: 'help',
+    },
+
+    onClick: {
+      action: 'clicked',
+    },
+
+    placement: {
+      control: {
+        type: 'select',
+      },
+      options: {
+        'bottom-end': 'bottom-end',
+        'bottom-start': 'bottom-start',
+        'bottom': 'bottom',
+        'left-end': 'left-end',
+        'left-start': 'left-start',
+        'left': 'left',
+        'right-end': 'right-end',
+        'right-start': 'right-start',
+        'right': 'right',
+        'top-end': 'top-end',
+        'top-start': 'top-start',
+        'top': 'top',
+      },
+      defaultValue: 'right',
+    },
+
+    size: {
+      control: {
+        type: 'select',
+      },
+      options: {
+        small: 'small',
+        medium: 'medium',
+        large: 'large',
+      },
+      defaultValue: 'medium',
+    },
+  },
+  args: {
+    isDialogDisplayed: true,
+    title: 'Only Appears on Hover',
+  },
+  parameters: {
+    backgrounds: {
+      default: 'dark',
+    },
+  },
+}
+
+const Template = (args) => {
+  const [{isDialogDisplayed}, updateArgs] = useArgs()
+  const setIsDialogDisplayed = (v) => updateArgs({isDialogDisplayed: v})
+  const dialog = <Dialog
+    icon={<Announcement />}
+    headerText={'Example Dialog'}
+    isDialogDisplayed={isDialogDisplayed}
+    setIsDialogDisplayed={setIsDialogDisplayed}
+    content={<>Example content.</>}
+  />
+
+  return <ControlButton
+    isDialogDisplayed={isDialogDisplayed}
+    setIsDialogDisplayed={setIsDialogDisplayed}
+    dialog={dialog}
+    {...args}
+  />
+}
+
+export const Button = Template.bind({})

src/stories/buttons/FormButton.stories.jsx

@@ -0,0 +1,87 @@
+import React from 'react'
+import {FormButton} from '../../Components/Buttons'
+import {AddCircle, ArrowBack, ArrowForward, Check, Search} from '@mui/icons-material'
+
+
+export default {
+  title: 'BLDRS UI/Buttons/FormButton',
+  component: FormButton,
+  argTypes: {
+    icon: {
+      options: ['add', 'back', 'check', 'forward', 'search'],
+      mapping: {
+        add: <AddCircle />,
+        back: <ArrowBack />,
+        check: <Check />,
+        forward: <ArrowForward />,
+        search: <Search />,
+      },
+      control: {
+        type: 'select',
+      },
+      defaultValue: 'search',
+    },
+
+    onClick: {
+      action: 'clicked',
+    },
+
+    placement: {
+      control: {
+        type: 'select',
+      },
+      options: {
+        'bottom-end': 'bottom-end',
+        'bottom-start': 'bottom-start',
+        'bottom': 'bottom',
+        'left-end': 'left-end',
+        'left-start': 'left-start',
+        'left': 'left',
+        'right-end': 'right-end',
+        'right-start': 'right-start',
+        'right': 'right',
+        'top-end': 'top-end',
+        'top-start': 'top-start',
+        'top': 'top',
+      },
+      defaultValue: 'left',
+    },
+
+    size: {
+      control: {
+        type: 'select',
+      },
+      options: {
+        small: 'small',
+        medium: 'medium',
+        large: 'large',
+      },
+      defaultValue: 'medium',
+    },
+
+    type: {
+      control: {
+        type: 'select',
+      },
+      options: {
+        submit: 'submit',
+      },
+    },
+  },
+  args: {
+    title: 'Only Appears on Hover',
+  },
+  parameters: {
+    backgrounds: {
+      default: 'dark',
+    },
+  },
+}
+
+const Template = (args) => {
+  return <FormButton
+    {...args}
+  />
+}
+
+export const Button = Template.bind({})

src/stories/buttons/TooltipToggleButton.stories.jsx

@@ -0,0 +1,77 @@
+import React from 'react'
+import {TooltipToggleButton} from '../../Components/Buttons'
+import {AddCircle, ArrowBack, ArrowForward, Check} from '@mui/icons-material'
+
+
+export default {
+  title: 'BLDRS UI/Buttons/TooltipToggleButton',
+  component: TooltipToggleButton,
+  argTypes: {
+    icon: {
+      options: ['add', 'back', 'check', 'forward'],
+      mapping: {
+        add: <AddCircle />,
+        back: <ArrowBack />,
+        check: <Check />,
+        forward: <ArrowForward />,
+      },
+      control: {
+        type: 'select',
+      },
+      defaultValue: 'check',
+    },
+
+    onClick: {
+      action: 'clicked',
+    },
+
+    placement: {
+      control: {
+        type: 'select',
+      },
+      options: {
+        'bottom-end': 'bottom-end',
+        'bottom-start': 'bottom-start',
+        'bottom': 'bottom',
+        'left-end': 'left-end',
+        'left-start': 'left-start',
+        'left': 'left',
+        'right-end': 'right-end',
+        'right-start': 'right-start',
+        'right': 'right',
+        'top-end': 'top-end',
+        'top-start': 'top-start',
+        'top': 'top',
+      },
+      defaultValue: 'left',
+    },
+
+    size: {
+      control: {
+        type: 'select',
+      },
+      options: {
+        small: 'small',
+        medium: 'medium',
+        large: 'large',
+      },
+      defaultValue: 'medium',
+    },
+  },
+  args: {
+    title: 'Only Appears on Hover',
+  },
+  parameters: {
+    backgrounds: {
+      default: 'dark',
+    },
+  },
+}
+
+const Template = (args) => {
+  return <TooltipToggleButton
+    {...args}
+  />
+}
+
+export const Button = Template.bind({})