Merge pull request #1116 from appfolio/debt-fa-rg-revert-to-fa5

Debt fa revert react-gears to fa5

.storybook/preview-head.html

@@ -5,11 +5,7 @@
 />
 <link
   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"
+  href="https://public.cdn.appfolio.com/public/icons/font-awesome/5.14.0/css/all.min.css"
 />
 <link
   rel="stylesheet"

package.json

@@ -43,8 +43,6 @@
     "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",
@@ -67,6 +65,7 @@
     "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 for warning', () => {
+    it('should show exclamation-circle for warning', () => {
       const icon = shallow(<Alert icon color="warning" />).find(Icon);
-      assert.equal(icon.prop('name'), 'exclamation');
+      assert.equal(icon.prop('name'), 'exclamation-circle');
     });
 
     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');
+      assert.equal(icon.prop('name'), 'info-circle');
     });
 
     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',
+  warning: 'exclamation-circle',
   success: 'check',
-  info: 'info',
+  info: 'info-circle',
   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-2" /> : null}
+        {icon ? <Icon name={ICON_MAP[color]} size="lg" className="me-3 mt-1" /> : 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="table-list" />
+          <Icon name="th-list" />
         </Button>
       </ButtonGroup>,
     ]}
@@ -109,7 +109,7 @@ export const DropdownForControls = () => (
           role="button"
           title="More options"
         >
-          <Icon name="ellipsis" size="lg" />
+          <Icon name="ellipsis-h" size="lg" />
         </DropdownToggle>
         <DropdownMenu right>
           <DropdownItem>Eenie</DropdownItem>

src/components/Carousel/ImageCarousel.js

@@ -82,7 +82,7 @@ export default class ImageCarousel extends React.Component {
         external={
           <div className="h-100">
             <Icon
-              name="xmark"
+              name="times"
               size="2x"
               className="text-white"
               style={{ position: 'fixed', top: '2rem', right: '2rem', zIndex: 15000 }}

src/components/Carousel/ImageCarousel.spec.js

@@ -38,7 +38,7 @@ describe('<ImageCarousel />', () => {
     const external = shallow(component.prop('external'));
     const icon = external.find(Icon);
 
-    assert.strictEqual(icon.prop('name'), 'xmark');
+    assert.strictEqual(icon.prop('name'), 'times');
   });
 
   it('should render a carousel', () => {

src/components/CollapsableText/CollapsableText.stories.js

@@ -35,8 +35,8 @@ export const ShorterThanMaxLength = () => (
 export const CustomComponents = () => (
   <div>
     <CollapsableText
-      moreLabel={<Icon name="plus" className="text-success" />}
-      lessLabel={<Icon name="circle-minus" className="text-danger" />}
+      moreLabel={<Icon name="plus-circle" className="text-success" />}
+      lessLabel={<Icon name="minus-circle" 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" className="me-2" />
+      <Icon name="plus-circle" 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');
+    assert.equal(icon.prop('name'), 'plus-circle');
   });
 
   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="circle-xmark" size="lg" />
+      <Icon name="times-circle-o" size="lg" />
     </Button>
   ) : (
     <ConfirmationButton
@@ -69,7 +69,7 @@ const HasManyFieldsRow = ({
       className="p-2 align-self-stretch"
       {...deleteProps}
     >
-      <Icon name="circle-xmark" size="lg" />
+      <Icon name="times-circle-o" 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'), 'circle-question');
+    assert.equal(icon.prop('name'), 'question-circle');
   });
 
   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="circle-question" id={id} className="text-primary" />
+        <Icon name="question-circle" 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;
-  iconStyle?: 'regular' | 'solid' | 'thin' | 'light' | 'duotone';
+  isSolid?: boolean;
 }
 
 /**
@@ -49,7 +49,7 @@ export interface FontAwesomeAPMProps extends React.HTMLAttributes<any> {
  * @param {Boolean} [spin=false] Spin the icon
  * @param {String} [stack] Stack an icon on top of another
  * @param {String} [tag=span] The HTML tag to use as a string (eg 'i' or 'em')
- * @param {String} [iconStyle] Font Awesome classic family with multiple icon styles to choose from
+ * @param {Boolean} [isSolid] FontAwesome 5 to use solid icons if true
  * @module FontAwesome
  * @type {ReactClass}
  */
@@ -69,7 +69,7 @@ export default class FontAwesomeAPM extends React.Component<FontAwesomeAPMProps>
       spin,
       stack,
       tag: Tag = 'i',
-      iconStyle,
+      isSolid,
       ariaLabel,
       ...props
     } = this.props;
@@ -101,7 +101,7 @@ export default class FontAwesomeAPM extends React.Component<FontAwesomeAPMProps>
       inverse && classNames.push('inverse');
 
       const fa = classNames.map((iconName) => `fa-${iconName}`);
-      iconStyle ? fa.unshift(`fa-${iconStyle}`) : fa.unshift(`fa-solid`);
+      isSolid ? fa.unshift('fas') : fa.unshift('fa');
 
       classNames = fa;
     }

src/components/Icon/Icon.stories.js

@@ -11,7 +11,7 @@ export default {
   component: Icon,
 };
 
-// React component for font awesome v6
+// React component for font awesome v5
 export const LiveExample = () => (
   <Icon
     name={text('name', 'motorcycle')}
@@ -21,7 +21,7 @@ export const LiveExample = () => (
     rotate={select('rotate', ['', '90', '180', '270'], '')}
     flip={select('flip', ['', 'horizontal', 'vertical'], '')}
     border={boolean('border', false)}
-    iconStyle={select('iconStyle', ['regular', 'solid', 'thin', 'light', 'duotone'], 'solid')}
+    isSolid={boolean('isSolid', false)}
   />
 );
 
@@ -50,7 +50,7 @@ export const InlineText = () => (
       <Icon name="print" /> Print
     </p>
     <p>
-      <Icon name="plus" /> Add Item
+      <Icon name="plus-circle" /> Add Item
     </p>
     <p>
       <Icon name="pencil" /> Edit
@@ -65,7 +65,7 @@ export const Buttons = () => (
   <div>
     <p>
       <Button>
-        <Icon name="plus" fixedWidth /> Add Item
+        <Icon name="plus-circle" fixedWidth /> Add Item
       </Button>
     </p>
     <p>
@@ -108,7 +108,7 @@ export const Size = () => (
 export const Animation = () => (
   <div>
     <Icon name="spinner" spin size="3x" />
-    <Icon name="circle-notch" spin size="3x" />
+    <Icon name="circle-o-notch" spin size="3x" />
     <Icon name="refresh" spin size="3x" />
     <Icon name="cog" spin size="3x" />
     <Icon name="spinner" pulse size="3x" />