From 5ca85aec3d4dcbfe5fb5b80e6cbb01c352144f14 Mon Sep 17 00:00:00 2001
From: sam-m-m <sam@dassana.io>
Date: Thu, 10 Dec 2020 13:08:46 -0800
Subject: [PATCH] chore #175 -  Extract out IconButton from WAM

---
 src/components/IconButton/index.tsx | 87 +++++++++++++++++++++++++++++
 src/components/IconButton/utils.ts  | 34 +++++++++++
 2 files changed, 121 insertions(+)
 create mode 100644 src/components/IconButton/index.tsx
 create mode 100644 src/components/IconButton/utils.ts

diff --git a/src/components/IconButton/index.tsx b/src/components/IconButton/index.tsx
new file mode 100644
index 00000000..b6496329
--- /dev/null
+++ b/src/components/IconButton/index.tsx
@@ -0,0 +1,87 @@
+import cn from 'classnames'
+import { createUseStyles } from 'react-jss'
+import { faTimes } from '@fortawesome/free-solid-svg-icons'
+import { generateThemedIconBtnStyles } from './utils'
+import {
+	FontAwesomeIcon,
+	FontAwesomeIconProps
+} from '@fortawesome/react-fontawesome'
+import React, { FC, SyntheticEvent } from 'react'
+import { styleguide, ThemeType } from 'components/assets/styles'
+
+const { borderRadius, flexCenter, font, spacing } = styleguide
+const { light, dark } = ThemeType
+
+const useStyles = createUseStyles({
+	hasBorder: {
+		...flexCenter,
+		border: '1px solid',
+		borderRadius,
+		height: spacing.xl,
+		width: spacing.xl
+	},
+	icon: {
+		fontSize: props => (props.size ? props.size : 'inherit')
+	},
+	iconButton: {
+		...generateThemedIconBtnStyles(light),
+		cursor: 'pointer',
+		lineHeight: 0,
+		transition: 'border-color 0.3s, color 0.3s'
+	},
+	// eslint-disable-next-line sort-keys
+	'@global': {
+		[`.${dark}`]: {
+			'& $iconButton': generateThemedIconBtnStyles(dark)
+		}
+	}
+})
+
+export enum IconSizes {
+	'xs' = font.label.fontSize,
+	'sm' = font.body.fontSize,
+	'lg' = font.h2.fontSize
+}
+
+interface Props {
+	classes?: string[]
+	hasBorder?: boolean
+	icon?: FontAwesomeIconProps['icon']
+	onClick?: (e?: SyntheticEvent) => void
+	size?: number
+}
+
+/* NOTE: This will be moved to web-components eventually */
+export const IconButton: FC<Props> = ({
+	classes = [],
+	hasBorder = false,
+	icon = faTimes,
+	onClick,
+	size
+}: Props) => {
+	const componentClasses = useStyles({ size })
+
+	const iconBtnClasses = cn(
+		{
+			[componentClasses.iconButton]: true,
+			[componentClasses.hasBorder]: hasBorder
+		},
+		classes
+	)
+
+	const optionalProps: Pick<Props, 'onClick'> = {}
+
+	if (onClick) {
+		optionalProps.onClick = onClick
+	}
+
+	return (
+		<span className={iconBtnClasses}>
+			<FontAwesomeIcon
+				className={componentClasses.icon}
+				icon={icon}
+				{...optionalProps}
+			/>
+		</span>
+	)
+}
diff --git a/src/components/IconButton/utils.ts b/src/components/IconButton/utils.ts
new file mode 100644
index 00000000..b11b8239
--- /dev/null
+++ b/src/components/IconButton/utils.ts
@@ -0,0 +1,34 @@
+import { styleguide, themedStyles, ThemeType } from 'components/assets/styles'
+
+const {
+	colors: { blacks }
+} = styleguide
+
+const { light, dark } = ThemeType
+
+const iconBtnPalette = {
+	[dark]: {
+		hoverBorderColor: blacks['lighten-40']
+	},
+	[light]: {
+		hoverBorderColor: blacks['lighten-50']
+	}
+}
+
+export const generateThemedIconBtnStyles = (themeType: ThemeType) => {
+	const {
+		base: { borderColor, color },
+		hover
+	} = themedStyles[themeType]
+
+	const { hoverBorderColor } = iconBtnPalette[themeType]
+
+	return {
+		'&:hover': {
+			borderColor: hoverBorderColor,
+			color: hover.color
+		},
+		borderColor,
+		color
+	}
+}