fix: update font awesome icons to v6

.storybook/preview-head.html

@@ -7,6 +7,10 @@
   rel="stylesheet"
   href="https://public.cdn.appfolio.com/public/icons/font-awesome/6.2.0/css/all.min.css"
 />
+<link
+  rel="stylesheet"
+  href="https://public.cdn.appfolio.com/public/icons/font-awesome/6.2.0/css/sharp-solid.min.css"
+/>
 <link
   rel="stylesheet"
   href="https://apm-prod-frontend-assets.s3.amazonaws.com/icons/font-awesome/5.14.0/css/v4-shims.min.css"

package.json

@@ -43,6 +43,8 @@
     "react-dom": ">= 16.8"
   },
   "dependencies": {
+    "@fortawesome/fontawesome-free": "^6.2.0",
+    "@fortawesome/fontawesome-svg-core": "^6.2.0",
     "@popperjs/core": "^2.10.1",
     "classnames": "^2.2.6",
     "credit-card-type": "^5.0.1",
@@ -65,7 +67,6 @@
     "lodash.without": "^4.4.0",
     "memoize-one": "^5.1.1",
     "prop-types": "^15.7.2",
-    "react-fontawesome": "^1.7.1",
     "react-imask": "^6.2.2",
     "react-resize-detector": "^4.2.3",
     "react-select-plus": "1.2.0",

src/components/Alert/Alert.spec.js

@@ -24,9 +24,9 @@ describe('<Alert />', () => {
   });
 
   describe('with icon', () => {
-    it('should show exclamation-circle for warning', () => {
+    it('should show exclamation for warning', () => {
       const icon = shallow(<Alert icon color="warning" />).find(Icon);
-      assert.equal(icon.prop('name'), 'exclamation-circle');
+      assert.equal(icon.prop('name'), 'exclamation');
     });
 
     it('should show ban for danger', () => {
@@ -36,7 +36,7 @@ describe('<Alert />', () => {
 
     it('should show info for info', () => {
       const icon = shallow(<Alert icon color="info" />).find(Icon);
-      assert.equal(icon.prop('name'), 'info-circle');
+      assert.equal(icon.prop('name'), 'fa-info');
     });
 
     it('should show check for success', () => {

src/components/Alert/Alert.tsx

@@ -5,9 +5,9 @@ import Icon from '../Icon/Icon';
 const noop = () => undefined;
 
 const ICON_MAP: { [key: string]: string } = {
-  warning: 'exclamation-circle',
+  warning: 'exclamation',
   success: 'check',
-  info: 'info-circle',
+  info: 'info',
   danger: 'ban',
 };
 
@@ -50,7 +50,7 @@ const Alert: FC<Props> = ({
       {...props}
     >
       <div className="d-flex align-items-start">
-        {icon ? <Icon name={ICON_MAP[color]} size="lg" className="me-3 mt-1" /> : null}
+        {icon ? <Icon name={ICON_MAP[color]} size="lg" className="me-3 mt-2" /> : null}
         {icon ? (
           <div className="w-100" style={{ overflow: 'hidden' }}>
             {children}

src/components/BlockPanel/BlockPanel.stories.js

@@ -86,7 +86,7 @@ export const ComponentsForTitleAndControls = () => (
           <Icon name="list" />
         </Button>
         <Button>
-          <Icon name="th-list" />
+          <Icon name="table-list" />
         </Button>
       </ButtonGroup>,
     ]}

src/components/CollapsableText/CollapsableText.stories.js

@@ -35,8 +35,8 @@ export const ShorterThanMaxLength = () => (
 export const CustomComponents = () => (
   <div>
     <CollapsableText
-      moreLabel={<Icon name="plus-circle" className="text-success" />}
-      lessLabel={<Icon name="minus-circle" className="text-danger" />}
+      moreLabel={<Icon name="plus" className="text-success" />}
+      lessLabel={<Icon name="circle-minus" className="text-danger" />}
     >
       {loremIpsum}
     </CollapsableText>

src/components/HasManyFields/HasManyFieldsAdd.js

@@ -9,7 +9,7 @@ const HasManyFieldsAdd = ({ children, className, ...props }) => {
 
   return (
     <Button color="success" block outline {...props} className={classes}>
-      <Icon name="plus-circle" className="me-2" />
+      <Icon name="plus" className="me-2" />
       <span>{children}</span>
     </Button>
   );

src/components/HasManyFields/HasManyFieldsAdd.spec.js

@@ -25,7 +25,7 @@ describe('<HasManyFieldsAdd />', () => {
 
   it('should have an icon', () => {
     const icon = component.find(Icon);
-    assert.equal(icon.prop('name'), 'plus-circle');
+    assert.equal(icon.prop('name'), 'plus');
   });
 
   it('should be a disabled button when disabled', () => {

src/components/HasManyFields/HasManyFieldsRow.tsx

@@ -57,7 +57,7 @@ const HasManyFieldsRow = ({
       outline
       className="p-2 disabled align-self-stretch"
     >
-      <Icon name="times-circle-o" size="lg" />
+      <Icon name="circle-xmark" size="lg" />
     </Button>
   ) : (
     <ConfirmationButton
@@ -69,7 +69,7 @@ const HasManyFieldsRow = ({
       className="p-2 align-self-stretch"
       {...deleteProps}
     >
-      <Icon name="times-circle-o" size="lg" />
+      <Icon name="circle-xmark" size="lg" />
     </ConfirmationButton>
   );
 

src/components/HelpBubble/HelpBubble.spec.tsx

@@ -25,7 +25,7 @@ describe('<HelpBubble />', () => {
 
   it('should have a question mark', () => {
     const icon = mount(<HelpBubble title="hello" />, { attachTo: div }).find(Icon);
-    assert.equal(icon.prop('name'), 'question-circle');
+    assert.equal(icon.prop('name'), 'circle-question');
   });
 
   it('should link popover and icon trigger', () => {

src/components/HelpBubble/HelpBubble.tsx

@@ -41,7 +41,7 @@ function HelpBubble(props: HelpBubbleProps) {
   return (
     <span className={className} style={style}>
       <Button color="link" className="p-0" aria-label="More Info" onClick={toggle}>
-        <Icon name="question-circle" id={id} className="text-primary" />
+        <Icon name="circle-question" id={id} className="text-primary" />
       </Button>
       <Popover isOpen={isOpen} toggle={toggle} target={id} {...other}>
         <div aria-live="polite">

src/components/Icon/FontAwesomeAPM.tsx

@@ -28,7 +28,7 @@ export interface FontAwesomeAPMProps extends React.HTMLAttributes<any> {
   spin?: boolean;
   stack?: '1x' | '2x';
   tag?: keyof JSX.IntrinsicElements;
-  isSolid?: boolean;
+  iconStyle?: 'regular' | 'solid' | 'thin' | 'light' | 'duotone';
 }
 
 /**
@@ -68,7 +68,7 @@ export default class FontAwesomeAPM extends React.Component<FontAwesomeAPMProps>
       spin,
       stack,
       tag: Tag = 'i',
-      isSolid,
+      iconStyle,
       ariaLabel,
       ...props
     } = this.props;
@@ -100,8 +100,8 @@ export default class FontAwesomeAPM extends React.Component<FontAwesomeAPMProps>
       inverse && classNames.push('inverse');
 
       const fa = classNames.map((iconName) => `fa-${iconName}`);
-      isSolid? fa.unshift('fas') : fa.unshift('fa');
-
+      !iconStyle ? fa.unshift(`fa-solid`) : fa.unshift(`fa-${iconStyle}`);
+      
       classNames = fa;
     }
 

src/components/Icon/Icon.stories.js

@@ -20,7 +20,7 @@ export const LiveExample = () => (
     rotate={select('rotate', ['', '90', '180', '270'], '')}
     flip={select('flip', ['', 'horizontal', 'vertical'], '')}
     border={boolean('border', false)}
-    isSolid={boolean('isSolid', false)}
+    iconStyle={select('iconStyle', ['regular', 'solid', 'thin', 'light', 'duotone'], 'solid')}
   />
 );
 
@@ -49,7 +49,7 @@ export const InlineText = () => (
       <Icon name="print" /> Print
     </p>
     <p>
-      <Icon name="plus-circle" /> Add Item
+      <Icon name="plus" /> Add Item
     </p>
     <p>
       <Icon name="pencil" /> Edit
@@ -64,7 +64,7 @@ export const Buttons = () => (
   <div>
     <p>
       <Button>
-        <Icon name="plus-circle" fixedWidth /> Add Item
+        <Icon name="plus" fixedWidth /> Add Item
       </Button>
     </p>
     <p>
@@ -107,7 +107,7 @@ export const Size = () => (
 export const Animation = () => (
   <div>
     <Icon name="spinner" spin size="3x" />
-    <Icon name="circle-o-notch" spin size="3x" />
+    <Icon name="circle-notch" spin size="3x" />
     <Icon name="refresh" spin size="3x" />
     <Icon name="cog" spin size="3x" />
     <Icon name="spinner" pulse size="3x" />