Add support for FontAwesome icons versions 5 and 6

Author: raymond-lam

example/package-lock.json

@@ -81,7 +81,7 @@
   },
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "^6.1.1",
-    "@fortawesome/free-solid-svg-icons": "^6.1.1",
+    "@fortawesome/free-solid-svg-icons": "^5.15.3 || ^6.1.1",
     "@fortawesome/react-fontawesome": "^0.1.14",
     "classnames": "^2.2.6",
     "react-beautiful-dnd": "^13.0.0",

package-lock.json

@@ -53,8 +53,10 @@ const useStyles = createUseStyles({
       'border-radius': '4px',
     },
     '& .card-array': {
-      '& .fa-plus-square': { display: 'none' },
-      '& .section-entries': { '& .fa-plus-square': { display: 'initial' } },
+      '& .fa-plus-square, & .fa-square-plus': { display: 'none' },
+      '& .section-entries': {
+        '& .fa-plus-square, & .fa-square-plus': { display: 'initial' },
+      },
     },
     '& .card-enum': {
       display: 'flex',

package.json

@@ -101,7 +101,7 @@ describe('Card', () => {
     const pencil = wrapper
       .find('.card-container')
       .first()
-      .find('.fa-pencil-alt')
+      .find('.fa-pencil')
       .first();
     pencil.simulate('click');
     expect(wrapper.exists('div[data-test="card-modal"]')).toBeTruthy();

src/formBuilder/Card.js

@@ -48,7 +48,7 @@ describe('CardGallery', () => {
     document.body.appendChild(div);
     const wrapper = mount(<CardGallery {...props} />, { attachTo: div });
 
-    const plusButton = wrapper.find('.fa-plus-square').first();
+    const plusButton = wrapper.find('.fa-square-plus').first();
     plusButton.simulate('click');
     const createButton = wrapper.find('button').at(1);
     expect(mockEvent).toHaveBeenCalledTimes(0);

src/formBuilder/Card.test.js

@@ -27,7 +27,7 @@ const useStyles = createUseStyles({
       marginBottom: '1em',
       height: '32px',
     },
-    '& .fa-question-circle': { color: 'gray' },
+    '& .fa-question-circle, & .fa-circle-question': { color: 'gray' },
     '& .card-modal-boolean': {
       '& *': { marginRight: '0.25em', height: 'auto', display: 'inline-block' },
     },

src/formBuilder/CardGallery.test.js

@@ -29,14 +29,14 @@ const useStyles = createUseStyles({
     '& .fa': {
       cursor: 'pointer',
     },
-    '& .fa-question-circle': {
+    '& .fa-question-circle, & .fa-circle-question': {
       color: 'gray',
     },
     '& .fa-asterisk': {
       'font-size': '.9em',
       color: 'green',
     },
-    '& .fa-plus-square': {
+    '& .fa-plus-square, & .fa-square-plus': {
       color: 'green',
       'font-size': '1.5em',
       margin: '0 auto',
@@ -161,7 +161,7 @@ const useStyles = createUseStyles({
   formBody: {
     display: 'flex',
     flexDirection: 'column',
-    '& .fa-pencil-alt': {
+    '& .fa-pencil-alt, & .fa-pencil': {
       border: '1px solid #1d71ad',
       color: '#1d71ad',
     },

src/formBuilder/CardModal.js

@@ -155,7 +155,7 @@ describe('FormBuilder', () => {
     const div = document.createElement('div');
     document.body.appendChild(div);
     const wrapper = mount(<FormBuilder {...props} />, { attachTo: div });
-    const plusButton = wrapper.find('.fa-plus-square').first();
+    const plusButton = wrapper.find('.fa-square-plus').first();
     plusButton.simulate('click');
     const createButton = wrapper.find('button').at(1);
     expect(mockEvent).toHaveBeenCalledTimes(0);

src/formBuilder/FormBuilder.js

@@ -22,7 +22,7 @@ const useStyles = createUseStyles({
     '& .fa': {
       cursor: 'pointer',
     },
-    '& .fa-question-circle': {
+    '& .fa-question-circle, & .fa-circle-question': {
       color: 'gray',
     },
     '& .fa-asterisk': {
@@ -35,7 +35,7 @@ const useStyles = createUseStyles({
       textAlign: 'center',
       '& .fa': { cursor: 'pointer', color: '$green', fontSize: '1.5em' },
     },
-    '& .fa-plus-square': {
+    '& .fa-plus-square & .fa-square-plus': {
       color: 'green',
       'font-size': '1.5em',
       margin: '0 auto',
@@ -100,7 +100,7 @@ const useStyles = createUseStyles({
     '& .section-requirements': {
       border: '1px dashed black',
     },
-    '& .fa-pencil-alt': {
+    '& .fa-pencil-alt, & .fa-pencil': {
       border: '1px solid #1d71ad',
       color: '#1d71ad',
     },