diff --git a/src/components/Alert/Alert.spec.js b/src/components/Alert/Alert.spec.js index 7ea2b822c..ed7bf48fd 100644 --- a/src/components/Alert/Alert.spec.js +++ b/src/components/Alert/Alert.spec.js @@ -36,7 +36,7 @@ describe('', () => { it('should show info for info', () => { const icon = shallow().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 index 255d37858..9d9d96234 100644 --- a/src/components/Icon/FontAwesomeAPM.tsx +++ b/src/components/Icon/FontAwesomeAPM.tsx @@ -32,7 +32,7 @@ export interface FontAwesomeAPMProps extends React.HTMLAttributes { } /** - * 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 { * @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 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 index 4344218f5..fe426aac6 100644 --- 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 = () => ( ', () => { it('should take a type option', () => { const icon = shallow().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 index 7ebf71581..554609650 100644 --- 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"