feat(icons): clear icons Cu 1x73an0 (#240)

Author: snqb

.storybook/preview.js

@@ -1,14 +1,7 @@
 import React from 'react';
 
-import { library } from '@fortawesome/fontawesome-svg-core';
-// Font Awesome icons
-import { fas } from '@fortawesome/free-solid-svg-icons';
-import { far } from '@fortawesome/free-regular-svg-icons';
-
 import ThemeProvider from '../src/theme/ThemeProvider';
 
-library.add(fas, far);
-
 export const parameters = {
   actions: { argTypesRegex: '^on[A-Z].*' },
   layout: 'centered',
@@ -17,7 +10,7 @@ export const parameters = {
 
 export const decorators = [
   (Story) => (
-    <ThemeProvider theme="default">
+    <ThemeProvider>
       <Story />
     </ThemeProvider>
   ),

package.json

@@ -90,11 +90,6 @@
   ],
   "dependencies": {
     "@emotion/core": "^10.3.1",
-    "@fortawesome/fontawesome-common-types": "^0.3.0",
-    "@fortawesome/fontawesome-svg-core": "^1.3.0",
-    "@fortawesome/free-regular-svg-icons": "^6.0.0",
-    "@fortawesome/free-solid-svg-icons": "^6.0.0",
-    "@fortawesome/react-fontawesome": "^0.1.17",
     "@rebass/forms": "^4.0.6",
     "@styled-system/css": "^5.1.5",
     "@tanem/react-nprogress": "^4.0.8",

src/@types/emotion-theming.ts

@@ -0,0 +1,6 @@
+import { ITheme } from '../theme/types'
+
+declare module 'emotion-theming' {
+  export interface Theme extends ITheme {}
+  export function useTheme(): ITheme;
+}

src/components/badges/badge.tsx

@@ -59,7 +59,7 @@ const Badge: FC<BadgeProps> = ({
   icon,
   ...props
 }: BadgeProps) => {
-  const theme = useTheme<ITheme>();
+  const theme = useTheme();
 
   const borderColor = getBorderColor(theme, variant);
   const borderStyle = loading

src/components/badges/project-badge.tsx

@@ -3,7 +3,8 @@ import { Flex, FlexProps } from 'rebass';
 
 // Components
 import Value from '../typography/value';
-import Icon from '../icon';
+import GetIcon from '../icon/GetIcon';
+import { IconName } from '../icon/list';
 
 export interface ProjectBadgeProps extends Omit<FlexProps, 'css'> {
   value: string | number;
@@ -32,7 +33,7 @@ const ProjectBadge: FC<ProjectBadgeProps> = ({
     <Value as="span" lineHeight="13px">
       {value}
     </Value>
-    {isLock && <Icon ml="5px" fontSize="10px" icon="lock" />}
+    {isLock && <GetIcon ml="5px" fontSize="10px" icon={IconName.lock} />}
   </Flex>
 );
 

src/components/button/button.stories.tsx

@@ -2,9 +2,9 @@
 import { action } from '@storybook/addon-actions';
 import React from 'react';
 import { Story, Meta } from '@storybook/react/types-6-0';
-import { faCoffee } from '@fortawesome/free-solid-svg-icons';
 
 import Button, { QuartzButtonProps } from '.';
+import { IconName } from '../icon';
 
 export default {
   title: 'Quartz/Buttons',
@@ -66,11 +66,10 @@ Default.argTypes = {
   icon: {
     control: {
       type: 'select',
-      options: [undefined, faCoffee],
+      options: [undefined, IconName.upload],
     },
     type: {
-      summary:
-        'Put icon component from @fortawesome/free-solid-svg-icons package',
+      summary: 'Put icon component from IconName',
     },
   },
 };

src/components/button/button.styles.ts

@@ -26,6 +26,10 @@ export default {
 
   '> span': {
     mr: '8px',
+    display: 'flex',
+    height: '15px',
+    justifyContent: 'center',
+    alignItems: 'center',
   },
 } as SxStyleProp;
 

src/components/button/index.tsx

@@ -1,16 +1,19 @@
 import React, { FC } from 'react';
 import { Button as RebassButton, ButtonProps } from 'rebass';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { IconDefinition } from '@fortawesome/fontawesome-common-types';
+import * as R from 'ramda';
 
 // Styles
 import styles, { spinnerColor } from './button.styles';
 import Spinner from '../spinner';
 
+import { GetIcon, IconName } from '../icon';
+import { Color } from '../../theme/types';
+
+type Intent = 'primary' | 'secondary' | 'ghost' | 'inline' | 'alert';
 export interface QuartzButtonProps extends Omit<ButtonProps, 'css'> {
   children: React.ReactNode;
-  intent?: 'primary' | 'secondary' | 'ghost' | 'inline' | 'alert';
-  icon?: IconDefinition;
+  intent?: Intent;
+  icon?: IconName;
   href?: string;
   isLoading?: boolean;
   loadingOnly?: boolean;
@@ -32,9 +35,7 @@ const Button: FC<QuartzButtonProps> = ({
   const component = (
     <RebassButton variant={intent} disabled={disabled || isLoading} {...test}>
       {icon && (!loadingOnly || !isLoading) && (
-        <span>
-          <FontAwesomeIcon icon={icon} size="sm" />
-        </span>
+        <GetIcon icon={icon} size="md" color={buttonIntentToColor(intent)} />
       )}
       {(!loadingOnly || !isLoading) && children}
       {isLoading && (
@@ -66,3 +67,16 @@ const Button: FC<QuartzButtonProps> = ({
 };
 
 export default Button;
+
+const intentToColor: { [intent in Intent]?: Color } = {
+  primary: 'white',
+  alert: 'labels.red',
+  /* [others]: 'primary' */
+}
+
+const buttonIntentToColor = (intent: Intent): Color => {
+  const getColor = R.propOr(intent, 'primary');
+
+  return getColor(intentToColor);
+}
+

src/components/callout/index.tsx

@@ -1,7 +1,8 @@
 import React, { FC } from 'react';
 import { Box, Flex, FlexProps, Text } from 'rebass';
 import styles from './callout.styles';
-import icons from '../../sources/icons';
+import { Color } from '../../theme/types';
+import { GetIcon, IconName } from '../icon';
 
 export enum CalloutTypes {
   valid = 'valid',
@@ -10,6 +11,12 @@ export enum CalloutTypes {
   neutral = 'neutral',
 }
 
+const calloutColors: Record<CalloutTypes, Color> = {
+  valid: 'primary',
+  error: 'labels.red',
+  warning: 'labels.orange',
+  neutral: 'black',
+};
 export interface ICalloutProps extends Omit<FlexProps, 'content' | 'css'> {
   type: CalloutTypes;
   content: string | React.ReactNode;
@@ -34,7 +41,7 @@ const Callout: FC<ICalloutProps> = ({
       maxWidth={cta ? '80%' : '100%'}
     >
       <Box mt="-2px" mb="-3px" mr="8px">
-        {icons.info_block}
+        <GetIcon color={calloutColors[type]} icon={IconName.info_block} />
       </Box>
       <Box as="pre">
         <Text

src/components/code-input/index.tsx

@@ -15,9 +15,9 @@ import 'codemirror/theme/yeti.css';
 import Label, { LabelProps } from '../label';
 import Labeling from '../typography/labeling';
 import Tooltip from '../tooltip';
-import icons from '../../sources/icons';
 import { Intents } from '../intents';
 import InputInfo from '../input-info';
+import { GetIcon, IconName } from '../icon';
 
 export interface InputProps {
   label?: string;
@@ -63,7 +63,7 @@ const CodeInput: FC<InputProps> = forwardRef(
         {tooltipInfo && (
           <Tooltip mainText={tooltipInfo}>
             <Box mt="-6px" mb="-3px">
-              {icons.info_block}
+              <GetIcon icon={IconName.info_block} />
             </Box>
           </Tooltip>
         )}

src/components/code/index.tsx

@@ -3,7 +3,6 @@ import { Box, FlexProps, Flex } from 'rebass';
 import SyntaxHighlighter from 'react-syntax-highlighter';
 import { useTheme } from 'emotion-theming';
 import Button from '../button';
-import { ITheme } from '../../theme/types';
 import ExpandViewer from '../expand-viewer';
 
 import styles, {
@@ -12,10 +11,10 @@ import styles, {
   lineNumberStyles,
   codeHeaderStyles,
 } from './code.styles';
-import icons from '../../sources/icons';
 import Value from '../typography/value';
 import { copyToClipboard, saveToFile } from '../../utils';
 import { PopupProps } from '../popup';
+import { GetIcon, IconName } from '../icon';
 
 const CONTENT_UPPER_BOUND = 12;
 
@@ -123,7 +122,7 @@ const CodeSnippet: FC<CodeSnippetProps> = ({
   maxHeightOfCode,
   ...props
 }) => {
-  const theme = useTheme<ITheme>();
+  const theme = useTheme();
 
   return (
     <Flex width="100%" sx={styles} height="100%">
@@ -184,7 +183,7 @@ const DownloadButton: FC<
   return (
     <Box>
       <Button intent="ghost" sx={buttonsStyles} onClick={download}>
-        {icons.download}
+        <GetIcon icon={IconName.download} />
         <Value ml="5px" mt="1px">
           download
         </Value>
@@ -221,7 +220,7 @@ const CopyButton: FC<Pick<CodeProps, 'copyCallback' | 'content'>> = ({
         onClick={handleCopyClicked}
         disabled={copied}
       >
-        {icons.copy}
+        <GetIcon icon={IconName.copy} />
         <Value ml="5px" mt="1px">
           {copied ? 'copied' : 'copy'}
         </Value>

src/components/collapse/index.tsx

@@ -2,8 +2,8 @@ import { Box, BoxProps, Flex } from 'rebass';
 import React, { FC, memo, useEffect, useRef, useState } from 'react';
 
 import Labeling from '../typography/labeling';
-import icons from '../../sources/icons';
 import styles, { contentStyles, containerStyles } from './collapse.styles';
+import { GetIcon, IconName } from '../icon';
 
 export interface CollapseProps extends Omit<BoxProps, 'css' | 'title'> {
   title: React.ReactNode;
@@ -52,7 +52,12 @@ const Collapse: FC<CollapseProps> = ({
     <Box sx={containerStyles} {...props}>
       <Flex sx={styles(isOpen)} onClick={() => setOpen((state) => !state)}>
         <Flex>
-          <Box>{isOpen ? icons.arrow_up : icons.arrow_down}</Box>
+          <Box>
+            <GetIcon
+              color="primary"
+              icon={isOpen ? IconName.arrow_up : IconName.arrow_down}
+            />
+          </Box>
           {title}
         </Flex>
         {!!secondaryContent && <Labeling>{secondaryContent}</Labeling>}

src/components/compact-button/compact-button.tsx

@@ -1,7 +1,6 @@
 import React, { FC, memo, CSSProperties } from 'react';
 import { Button, ButtonProps, Flex, Box } from 'rebass';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { IconDefinition } from '@fortawesome/fontawesome-common-types';
+import { GetIcon, IconName } from '../icon';
 
 import styles from './styles';
 
@@ -11,7 +10,7 @@ type LinkRelatedProps = Pick<Props, 'href' | 'newTab'>;
 export interface Props extends Omit<ButtonProps, 'css'> {
   newTab?: boolean;
   isActive?: boolean;
-  icon?: IconDefinition;
+  icon?: IconName;
   indicator?: Indicator;
   mode?: 'default' | 'highlight';
 }
@@ -56,7 +55,7 @@ const CompactButton: FC<Props> = ({
       sx={styles.flex}
       flexDirection={flexDirections[indicator ?? 'horizontal']}
     >
-      {!!icon && <FontAwesomeIcon icon={icon} size="xs" />}
+      {!!icon && <GetIcon icon={icon} size="xs" />}
       {indicator && !icon && <span data-active={isActive} />}
 
       <Box>{children}</Box>

src/components/compact-button/index.stories.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import { Story, Meta } from '@storybook/react/types-6-0';
-import { faPlus } from '@fortawesome/free-solid-svg-icons';
 
 import CompactButton, { CompactButtonProps } from '.';
+import { GetIcon, IconName } from '../icon';
 
 export default {
   title: 'Quartz/CompactButton',
@@ -44,10 +44,10 @@ CompactButtonTemplate.argTypes = {
   icon: {
     control: {
       type: 'select',
-      options: [undefined, faPlus],
+      options: [undefined, <GetIcon icon={IconName.plus} />],
     },
     type: {
-      summary: 'Take icons from @fortawesome/free-solid-svg-icons',
+      summary: 'Put icon component from IconName',
     },
   },
 };

src/components/datepicker/index.tsx

@@ -8,7 +8,7 @@ import 'react-datepicker/dist/react-datepicker.min.css';
 import styles from './datepicker.styles';
 import Labeling from '../typography/labeling';
 import Value from '../typography/value';
-import ArrowsIcon from '../icons/arrows.icon';
+import { GetIcon, IconName } from '../icon';
 
 export interface DatePickerProps {
   selectProps: SelectProps;
@@ -51,7 +51,7 @@ const DatePicker: FC<DatePickerProps & ReactDatePickerProps> = ({
         >
           {selectProps.value}
         </Value>
-        <ArrowsIcon />
+        <GetIcon icon={IconName.arrow_up_down} size='sm' mt="4px"/>
       </Flex>
       <Box alignSelf={datePickerAlign === 'right' ? 'flex-end' : 'flex-start'}>
         <ReactDatePicker

src/components/dropdown/dropdown.stories.tsx

@@ -5,6 +5,7 @@ import { Box } from 'rebass';
 import { Story, Meta } from '@storybook/react/types-6-0';
 
 import Dropdown, { DropdownProps } from './index';
+import { IconName } from '../icon';
 
 export default {
   title: 'Quartz/Dropdown',
@@ -32,7 +33,7 @@ Default.args = {
     },
     {
       value: 'Create New Project',
-      icon: 'plus',
+      icon: IconName.plus,
       metadata: {},
       onClick: action('onClick'),
     },

src/components/dropdown/index.tsx

@@ -1,4 +1,3 @@
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import React, { FC, useRef } from 'react';
 
 // Components
@@ -8,6 +7,7 @@ import List, { ListProps } from '../list/container';
 import useOnClickOutside from '../../utils/useClickOutside';
 // Types
 import { DropdownItem } from './types';
+import { GetIcon } from '../icon';
 
 export interface DropdownProps extends Omit<ListProps, 'css'> {
   items: DropdownItem[];
@@ -39,7 +39,7 @@ const Dropdown: FC<DropdownProps> = ({
             key={id || value}
             onClick={() => onClick(item)}
           >
-            {icon && <FontAwesomeIcon icon={icon} />}
+            {icon && <GetIcon icon={icon} size="sm" />}
             {value}
           </ListItem>
         );