remove unused packages, remove icon prop from TextField

package.json

@@ -42,9 +42,6 @@
     "@apollo/client": "^3.1.1",
     "@emotion/babel-preset-css-prop": "^10.0.27",
     "@emotion/core": "^10.0.28",
-    "@fortawesome/fontawesome-svg-core": "^1.2.28",
-    "@fortawesome/free-solid-svg-icons": "^5.13.0",
-    "@fortawesome/react-fontawesome": "^0.1.9",
     "@miragejs/graphql": "^0.1.3",
     "@reach/router": "^1.3.3",
     "@storybook/addon-actions": "^5.3.17",
@@ -69,8 +66,6 @@
     "@typescript-eslint/parser": "^3.2.0",
     "apollo": "^2.30.2",
     "babel-plugin-emotion": "^10.0.33",
-    "chromatic": "^4.0.3",
-    "concurrently": "^5.2.0",
     "csstype": "^3.0.0-beta.4",
     "customize-cra": "^1.0.0",
     "date-fns": "^2.15.0",

src/shared/components/TextField/TextField.style.ts

@@ -1,12 +1,11 @@
-import { StyleFn, makeStyles } from '../../utils'
-import { typography, colors, spacing } from './../../theme'
+import { makeStyles, StyleFn } from '../../utils'
+import { colors, spacing, typography } from './../../theme'
 
 export type TextFieldStyleProps = {
   disabled?: boolean
   focus?: boolean
   error?: boolean
   isActive?: boolean
-  iconPosition?: 'right' | 'left'
 }
 
 const FIELD_WIDTH = '250px'
@@ -52,19 +51,17 @@ const borderColor: StyleFn = (styles, { disabled, error, isActive, focus }) => {
     borderColor,
   }
 }
-const label: StyleFn = (_, { error, iconPosition }) => ({
+const label: StyleFn = (_, { error }) => ({
   color: error ? colors.error : colors.gray[400],
   padding: `0 ${spacing.s}`,
   backgroundColor: colors.black,
-  [`padding-${iconPosition}`]: spacing.xxxxxl,
   fontSize: typography.sizes.body2,
   transition: `all 0.1s linear`,
 })
-const input: StyleFn = (_, { iconPosition }) => ({
+const input: StyleFn = () => ({
   display: 'none',
   width: '100%',
   margin: `0 ${spacing.s}`,
-  [`margin-${iconPosition}`]: spacing.xxxxxl,
   background: 'none',
   border: 'none',
   outline: 'none',
@@ -72,32 +69,18 @@ const input: StyleFn = (_, { iconPosition }) => ({
   fontSize: typography.sizes.body2,
   padding: `5px 0`,
 })
-const icon: StyleFn = (_, { iconPosition }) => ({
-  color: colors.gray[300],
-  fontSize: typography.sizes.icon.xlarge,
-  position: 'absolute',
-  top: spacing.s,
-  [`${iconPosition}`]: spacing.s,
-})
 const helper: StyleFn = (_, { error }) => ({
   color: error ? colors.error : colors.gray[400],
 })
 
-export const useCSS = ({
-  disabled = false,
-  focus = false,
-  error = false,
-  isActive = false,
-  iconPosition = 'right',
-}: TextFieldStyleProps) => {
-  const props = { disabled, focus, error, isActive, iconPosition }
+export const useCSS = ({ disabled = false, focus = false, error = false, isActive = false }: TextFieldStyleProps) => {
+  const props = { disabled, focus, error, isActive }
   return {
     wrapper: makeStyles([wrapper])(props),
     container: makeStyles([container])(props),
     border: makeStyles([border, borderColor])(props),
     label: makeStyles([label])(props),
     input: makeStyles([input])(props),
-    icon: makeStyles([icon])(props),
     helper: makeStyles([helper])(props),
   }
 }

src/shared/components/TextField/TextField.tsx

@@ -1,25 +1,15 @@
-import React, { useState, useRef, useEffect } from 'react'
-import { useCSS, TextFieldStyleProps } from './TextField.style'
-import { IconProp } from '@fortawesome/fontawesome-svg-core'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import React, { useEffect, useRef, useState } from 'react'
+import { TextFieldStyleProps, useCSS } from './TextField.style'
 import { spacing } from './../../theme'
 
 type TextFieldProps = {
   label: string
   helper?: string
   value?: string
-  icon?: IconProp | undefined
   onChange?: (e: React.ChangeEvent) => void
 } & TextFieldStyleProps
 
-export default function TextField({
-  label,
-  helper = '',
-  value = '',
-  icon,
-  disabled = false,
-  ...styleProps
-}: TextFieldProps) {
+export default function TextField({ label, helper = '', value = '', disabled = false, ...styleProps }: TextFieldProps) {
   const inputRef = useRef<HTMLInputElement>(null)
   const [isActive, setIsActive] = useState(!!value)
   const [inputTextValue, setInputTextValue] = useState(value)
@@ -78,7 +68,6 @@ export default function TextField({
             onBlur={onInputTextBlur}
             disabled={disabled}
           />
-          {!!icon && <FontAwesomeIcon icon={icon || 'check'} css={styles.icon} />}
         </div>
       </div>
       {!!helper && <p css={styles.helper}>{helper}</p>}

src/shared/stories/06-TextField.stories.tsx

@@ -1,6 +1,5 @@
 import React from 'react'
 import { TextField } from '../components'
-import { faBan } from '@fortawesome/free-solid-svg-icons'
 
 export default {
   title: 'TextField',
@@ -37,18 +36,6 @@ export const DisabledWithValue = () => (
   </div>
 )
 
-export const PrimaryWithIconRight = () => (
-  <div style={{ backgroundColor: 'black', padding: '50px 20px' }}>
-    <TextField label="Label" icon={faBan} iconPosition="right" />
-  </div>
-)
-
-export const PrimaryWithIconLeft = () => (
-  <div style={{ backgroundColor: 'black', padding: '50px 20px' }}>
-    <TextField label="Label" icon={faBan} iconPosition="left" />
-  </div>
-)
-
 export const PrimaryWithHelperText = () => (
   <div style={{ backgroundColor: 'black', padding: '50px 20px' }}>
     <TextField label="Label" helper="Helper text" />