Add IconButton component

docs/buttons/Button.stories.mdx → 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>

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": [

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

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')};
+`

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>
+  )
+}

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'

src/lib/components/buttons/index.ts

@@ -1,4 +1,2 @@
 export * from './Button'
 export * from './IconButton'
-
-export type ButtonSize = 'large' | 'medium' | 'small'