From c40dec39f972a4242acc97fd40c6e25e212d710b Mon Sep 17 00:00:00 2001
From: Arne Molland <arne@molland.sh>
Date: Tue, 10 Aug 2021 16:40:59 +0200
Subject: [PATCH] Add IconButton component

---
 ...Button.stories.mdx => Buttons.stories.mdx} | 25 +++++++-
 package.json                                  |  2 +-
 src/lib/components/buttons/Button/Button.tsx  |  4 +-
 .../buttons/IconButton/IconButton.styles.tsx  | 60 +++++++++++++++++++
 .../buttons/IconButton/IconButton.tsx         | 40 +++++++++++++
 .../components/buttons/IconButton/index.tsx   |  8 +--
 .../components/buttons/IconButton/styles.tsx  | 36 -----------
 src/lib/components/buttons/index.ts           |  2 -
 8 files changed, 128 insertions(+), 49 deletions(-)
 rename docs/buttons/{Button.stories.mdx => Buttons.stories.mdx} (84%)
 create mode 100644 src/lib/components/buttons/IconButton/IconButton.styles.tsx
 create mode 100644 src/lib/components/buttons/IconButton/IconButton.tsx
 delete mode 100644 src/lib/components/buttons/IconButton/styles.tsx

diff --git a/docs/buttons/Button.stories.mdx b/docs/buttons/Buttons.stories.mdx
similarity index 84%
rename from docs/buttons/Button.stories.mdx
rename to docs/buttons/Buttons.stories.mdx
index 0d87d5f3..fb8d9ae6 100644
--- a/docs/buttons/Button.stories.mdx
+++ b/docs/buttons/Buttons.stories.mdx
@@ -1,4 +1,4 @@
-import { Button, ButtonProps } from '../../src'
+import { Button, ButtonProps, IconButton, IconButtonProps } from '../../src'
 import { Canvas, Meta, ArgsTable, Story } from '@storybook/addon-docs'
 
 <Meta title="Docs/Buttons" component={Button} />
@@ -87,3 +87,26 @@ Buttons allow users to take actions and make choices. They are used for actions
   <Button variant="signal" size="medium" icon="trophy" label="Button" disabled />
   <Button variant="signal" size="small" icon="trophy" label="Button" disabled />
 </Canvas>
+
+## IconButton
+
+<p>
+  <IconButton icon="heart" size="small" /> is a single component that can take different properties
+  and result in different variants.
+</p>
+
+<ArgsTable of={IconButton} />
+
+## Small
+
+<Canvas>
+  <IconButton size="small" icon="trophy" />
+  <IconButton size="small" icon="heart" />
+</Canvas>
+
+## Large
+
+<Canvas>
+  <IconButton size="large" icon="trophy" />
+  <IconButton size="large" icon="heart" />
+</Canvas>
diff --git a/package.json b/package.json
index 0d6a1ab1..4dc47c4b 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@gameflow-tv/flume",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "description": "React implementation of the Flume design system",
   "module": "dist/index.js",
   "files": [
diff --git a/src/lib/components/buttons/Button/Button.tsx b/src/lib/components/buttons/Button/Button.tsx
index dd7d8903..2e8f6d27 100644
--- a/src/lib/components/buttons/Button/Button.tsx
+++ b/src/lib/components/buttons/Button/Button.tsx
@@ -6,10 +6,10 @@ import { ButtonContent, ButtonContentProps, StyledButton, StyledButtonProps } fr
 
 export type IconPosition = 'left' | 'right'
 
-export type ButtonSize = 'large' | 'medium' | 'small'
-
 export type ButtonVariant = 'primary' | 'secondary' | 'signal'
 
+export type ButtonSize = 'large' | 'medium' | 'small'
+
 export type ButtonMargins = {
   horizontalMargin: string
   verticalMargin: string
diff --git a/src/lib/components/buttons/IconButton/IconButton.styles.tsx b/src/lib/components/buttons/IconButton/IconButton.styles.tsx
new file mode 100644
index 00000000..fcd3b409
--- /dev/null
+++ b/src/lib/components/buttons/IconButton/IconButton.styles.tsx
@@ -0,0 +1,60 @@
+import { Transition, transitionToCss } from '../../../theme'
+import styled from 'styled-components'
+import { IconButtonSize } from './IconButton'
+
+export type StyledIconButtonProps = {
+  borderRadius?: string
+  backgroundColor?: string
+  foregroundColor?: string
+  transition?: Transition
+  shadow?: string
+  hoverShadow?: string
+  borderColor?: string
+  glow?: string
+  size?: IconButtonSize
+}
+
+export const StyledIconButton = styled.button<StyledIconButtonProps>`
+  border-radius: ${(props) => props.borderRadius};
+  background-color: ${(props) => props.backgroundColor};
+  color: ${(props) => props.foregroundColor};
+  box-shadow: ${(props) => props.shadow};
+  border: none;
+  outline: none;
+  transition: ${(props) => transitionToCss(props.transition)};
+
+  &:hover {
+    filter: brightness(110%);
+    box-shadow: ${(props) => props.hoverShadow};
+
+    svg {
+      filter: brightness(110%);
+    }
+  }
+
+  &:active {
+    filter: brightness(75%);
+
+    svg {
+      transform: scale(0.95);
+    }
+  }
+
+  &:focus {
+    box-shadow: 0 0 0 1px ${(props) => props.borderColor}, ${(props) => props.glow},
+      ${(props) => props.shadow};
+  }
+
+  &:disabled {
+    filter: saturate(65%);
+
+    svg,
+    p {
+      opacity: 50%;
+      font-size: ${(props) => (props.size === 'large' ? '18px' : '16px')};
+      color: ${(props) => props.foregroundColor};
+    }
+  }
+  min-width: ${(props) => (props.size === 'large' ? '42px' : '30px')};
+  min-height: ${(props) => (props.size === 'large' ? '42px' : '30px')};
+`
diff --git a/src/lib/components/buttons/IconButton/IconButton.tsx b/src/lib/components/buttons/IconButton/IconButton.tsx
new file mode 100644
index 00000000..fed22a46
--- /dev/null
+++ b/src/lib/components/buttons/IconButton/IconButton.tsx
@@ -0,0 +1,40 @@
+import { IconProp } from '@fortawesome/fontawesome-svg-core'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import React from 'react'
+import { useTheme } from '../../../hooks'
+import { Theme } from '../../../theme'
+import { StyledIconButton, StyledIconButtonProps } from './IconButton.styles'
+
+export type IconButtonSize = 'small' | 'large'
+
+export type IconButtonProps = StyledIconButtonProps & {
+  icon?: IconProp
+  label?: string
+  onClick?: () => void
+  size?: IconButtonSize
+}
+
+const getIconButtonStyles = (props: IconButtonProps, theme: Theme): IconButtonProps => {
+  return {
+    ...props,
+    borderRadius: theme.shapes.borders.small,
+    backgroundColor: theme.colors.iconButton,
+    foregroundColor: theme.colors.onIconButton,
+    transition: theme.transitions.short,
+    shadow: theme.shadows.xsmall,
+    hoverShadow: theme.shadows.small,
+    borderColor: theme.colors.buttonBorder,
+    glow: theme.shadows.glow
+  }
+}
+
+export const IconButton = (props: IconButtonProps) => {
+  const theme = useTheme()
+  props = getIconButtonStyles(props, theme)
+
+  return (
+    <StyledIconButton {...props} onClick={props.onClick}>
+      <FontAwesomeIcon icon={props.icon} />
+    </StyledIconButton>
+  )
+}
diff --git a/src/lib/components/buttons/IconButton/index.tsx b/src/lib/components/buttons/IconButton/index.tsx
index 960f7950..a37a7fc4 100644
--- a/src/lib/components/buttons/IconButton/index.tsx
+++ b/src/lib/components/buttons/IconButton/index.tsx
@@ -1,7 +1 @@
-import React from 'react'
-import { ButtonProps } from '../Button'
-import { StyledIconButton } from './styles'
-
-export const IconButton = (props: ButtonProps) => {
-  return <StyledIconButton {...props}></StyledIconButton>
-}
+export * from './IconButton'
diff --git a/src/lib/components/buttons/IconButton/styles.tsx b/src/lib/components/buttons/IconButton/styles.tsx
deleted file mode 100644
index dfda3ac0..00000000
--- a/src/lib/components/buttons/IconButton/styles.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import { transitionToCss } from '../../../theme'
-import styled from 'styled-components'
-import { ButtonProps } from '../'
-
-export const StyledIconButton = styled.button<ButtonProps>`
-  border-radius: ${(props) => props.borderRadius};
-  background-color: ${(props) => props.backgroundColor};
-  color: ${(props) => props.foregroundColor};
-  box-shadow: ${(props) => props.shadow};
-  border: none;
-  outline: none;
-  transition: ${(props) => transitionToCss(props.transition)};
-
-  &:hover {
-    filter: brightness(95%);
-  }
-
-  &:active {
-    filter: brightness(85%);
-  }
-
-  &:focus {
-    box-shadow: 0 0 0 1px ${(props) => props.borderColor}, ${(props) => props.glow},
-      ${(props) => props.shadow};
-  }
-
-  &:disabled {
-    filter: saturate(65%);
-
-    svg,
-    p {
-      opacity: 50%;
-    }
-  }
-  min-width: ${(props) => props.size === 'large' && '160px'};
-`
diff --git a/src/lib/components/buttons/index.ts b/src/lib/components/buttons/index.ts
index b56b665a..e666f176 100644
--- a/src/lib/components/buttons/index.ts
+++ b/src/lib/components/buttons/index.ts
@@ -1,4 +1,2 @@
 export * from './Button'
 export * from './IconButton'
-
-export type ButtonSize = 'large' | 'medium' | 'small'