Merge pull request #1103 from appfolio/debt-wa-216-update-font-awesom…

…e-to-v6 fix: add a comment
appfolio · Oct 28, 2022 · a8e291b · a8e291b
2 parents d6b310c + 8be45dc
commit a8e291b
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 16 deletions.
diff --git a/src/components/Alert/Alert.spec.js b/src/components/Alert/Alert.spec.js
@@ -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'), 'fa-info');
+      assert.equal(icon.prop('name'), 'info');
     });
 
     it('should show check for success', () => {

diff --git a/src/components/Icon/FontAwesomeAPM.tsx b/src/components/Icon/FontAwesomeAPM.tsx
@@ -32,7 +32,7 @@ export interface FontAwesomeAPMProps extends React.HTMLAttributes<any> {
 }
 
 /**
- * A React component for the font-awesome icon library.
+ * A React component for the fontawesome icon library.
  *
  *
  * @param {String} [ariaLabel] An extra accessibility label to put on the icon
@@ -49,6 +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
  * @module FontAwesome
  * @type {ReactClass}
  */
@@ -101,7 +102,7 @@ export default class FontAwesomeAPM extends React.Component<FontAwesomeAPMProps>
 
       const fa = classNames.map((iconName) => `fa-${iconName}`);
       !iconStyle ? fa.unshift(`fa-solid`) : fa.unshift(`fa-${iconStyle}`);
-      
+
       classNames = fa;
     }
 

diff --git a/src/components/Icon/Icon.stories.js b/src/components/Icon/Icon.stories.js
@@ -11,6 +11,7 @@ export default {
   component: Icon,
 };
 
+// React component for font awesome v6
 export const LiveExample = () => (
   <Icon
     name={text('name', 'motorcycle')}

diff --git a/src/components/Status/Status.spec.tsx b/src/components/Status/Status.spec.tsx
@@ -12,7 +12,7 @@ describe('<Status />', () => {
 
   it('should take a type option', () => {
     const icon = shallow(<Status type="info" />).find(Icon);
-    assert.strictEqual(icon.prop('name'), 'info');
+    assert.strictEqual(icon.prop('name'), 'circle-info');
     assert.strictEqual(icon.prop('className'), 'text-info');
   });
 

diff --git a/yarn.lock b/yarn.lock
@@ -57,6 +57,8 @@ __metadata:
     "@babel/preset-env": ^7.16.11
     "@babel/preset-react": ^7.16.7
     "@babel/preset-typescript": ^7.16.7
+    "@fortawesome/fontawesome-free": ^6.2.0
+    "@fortawesome/fontawesome-svg-core": ^6.2.0
     "@jest/types": ^27.5.1
     "@popperjs/core": ^2.10.1
     "@storybook/addon-a11y": ^6.3.11
@@ -138,7 +140,6 @@ __metadata:
     raf-stub: ^3.0.0
     react: ^16.14.0
     react-dom: ^16.14.0
-    react-fontawesome: ^1.7.1
     react-imask: ^6.2.2
     react-resize-detector: ^4.2.3
     react-select-plus: 1.2.0
@@ -1924,6 +1925,29 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@fortawesome/fontawesome-common-types@npm:6.2.0":
+  version: 6.2.0
+  resolution: "@fortawesome/fontawesome-common-types@npm:6.2.0"
+  checksum: 1d0a3340dc2d2798609195cf77f1b0db98f0d87144044eb7cd3d78745baac8509705c6ebc7cce3d9bb36c7d7358ca064f77f39d86478ab1e7aa7aadc344cfd91
+  languageName: node
+  linkType: hard
+
+"@fortawesome/fontawesome-free@npm:^6.2.0":
+  version: 6.2.0
+  resolution: "@fortawesome/fontawesome-free@npm:6.2.0"
+  checksum: fd3fcc0a963b907110922b5ac0ca67633aea20b5034102a1f5d285830f7f7a27f9c9de0c4a30228ccd2579bd8f95581a1bbef9519c7b74632e7012d60dd57bb7
+  languageName: node
+  linkType: hard
+
+"@fortawesome/fontawesome-svg-core@npm:^6.2.0":
+  version: 6.2.0
+  resolution: "@fortawesome/fontawesome-svg-core@npm:6.2.0"
+  dependencies:
+    "@fortawesome/fontawesome-common-types": 6.2.0
+  checksum: 3bae680cba4098bc3a6aee04e655e0c6b6bab2d78e6709dc0a44d106f57a09bc2fd979310108777a373df301273a2a276739056f8984cd8bc5a50d37338c5380
+  languageName: node
+  linkType: hard
+
 "@gar/promisify@npm:^1.0.1, @gar/promisify@npm:^1.1.3":
   version: 1.1.3
   resolution: "@gar/promisify@npm:1.1.3"
@@ -14693,17 +14717,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-fontawesome@npm:^1.7.1":
-  version: 1.7.1
-  resolution: "react-fontawesome@npm:1.7.1"
-  dependencies:
-    prop-types: ^15.5.6
-  peerDependencies:
-    react: ">=0.12.0"
-  checksum: 0b4ff66aac939b0fb288c68466b1702f7e2c51238bec0ca0899cea968c7bebe74a6f6a8dfe23d0771986fca83b32a1c7af7b706caee4b739a216ced48bf3f6bb
-  languageName: node
-  linkType: hard
-
 "react-imask@npm:^6.2.2":
   version: 6.4.2
   resolution: "react-imask@npm:6.4.2"