Deseng 543 font awesome

.github/workflows/met-web-ci.yml

@@ -41,6 +41,7 @@ jobs:
           node-version: ${{ matrix.node-version }}
       - name: Install dependencies
         run: |
+          npm config set '//npm.fontawesome.com/:_authToken' "${{ secrets.FONTAWESOME_PACKAGE_TOKEN }}"
           npm install --legacy-peer-deps
       - name: Lint
         id: lint
@@ -61,6 +62,7 @@ jobs:
 
       - name: Install dependencies
         run: |
+          npm config set '//npm.fontawesome.com/:_authToken' "${{ secrets.FONTAWESOME_PACKAGE_TOKEN }}"
           npm install --legacy-peer-deps
 
       - name: Test with jest
@@ -96,6 +98,7 @@ jobs:
           node-version: ${{ matrix.node-version }}
       - name: Install dependencies
         run: |
+          npm config set '//npm.fontawesome.com/:_authToken' "${{ secrets.FONTAWESOME_PACKAGE_TOKEN }}"
           npm install --legacy-peer-deps
       - name: build to check strictness
         id: build

CHANGELOG.MD

@@ -1,3 +1,10 @@
+## May 8, 2024
+
+- **Feature** Add font awesome to MET web [🎟️ DESENG-543](https://apps.itsm.gov.bc.ca/jira/browse/DESENG-543)
+  - Added font awesome to MET web.
+  - Created .npmrc file to pass fontawesome auth token from environment variable
+  - Updated github actions to pull fontawesome auth token from github secrets
+
 ## May 7, 2024
 
 - **Feature** Ensure users can belong to more than one tenant [🎟️ DESENG-478](https://apps.itsm.gov.bc.ca/jira/browse/DESENG-478)

met-web/.npmrc

@@ -0,0 +1 @@
+@fortawesome:registry=https://npm.fontawesome.com/

met-web/README.md

@@ -8,6 +8,7 @@ React.js frontend application for The Modern Engagement Tool project.
 * Install the following:
     - [Node.js](https://nodejs.org/en/)
 * Install Dependencies
+    - Set env variable FONTAWESOME_PACKAGE_TOKEN to access in .npmrc file
     - Run `npm install` in the root of the project (met-web)
 
 ## Environment Variables

met-web/package.json

@@ -9,11 +9,14 @@
         "@emotion/react": "^11.9.0",
         "@emotion/styled": "^11.8.1",
         "@formio/react": "^5.3.0",
-        "@fortawesome/fontawesome-svg-core": "^6.1.1",
+        "@fortawesome/fontawesome-svg-core": "^6.5.2",
         "@fortawesome/free-brands-svg-icons": "^6.1.1",
         "@fortawesome/free-regular-svg-icons": "^6.1.1",
         "@fortawesome/free-solid-svg-icons": "^6.1.1",
-        "@fortawesome/react-fontawesome": "^0.1.18",
+        "@fortawesome/pro-light-svg-icons": "^6.5.2",
+        "@fortawesome/pro-regular-svg-icons": "^6.5.2",
+        "@fortawesome/pro-solid-svg-icons": "^6.5.2",
+        "@fortawesome/react-fontawesome": "^0.2.0",
         "@hello-pangea/dnd": "^16.2.0",
         "@hookform/resolvers": "^2.9.8",
         "@mui/icons-material": "^5.8.3",

met-web/public/index.html

@@ -8,8 +8,6 @@
         <meta name="description" content="Web site of MET" />
         <script src="%PUBLIC_URL%/config/config.js"></script>
         <script src="/snowplow.js" charset="UTF-8"></script>
-        <!--TODO: Remove font awesome cdn script when we have icons svgs stored in DB-->
-        <script src="https://kit.fontawesome.com/a2e8d2c4a8.js" crossorigin="anonymous"></script>
         <link rel="icon" href="%PUBLIC_URL%/BCFavIcon.png" />
         <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
         <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />

met-web/src/components/engagement/form/EngagementFormTabs/EngagementContent/ContentTabs.tsx

@@ -1,7 +1,8 @@
 import React, { useContext, useState } from 'react';
 import { Box, Button, IconButton, MenuItem, Menu, Skeleton, Grid, Divider } from '@mui/material';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faTrash, faPenToSquare, faPlus } from '@fortawesome/free-solid-svg-icons';
+import { faTrash, faPlus } from '@fortawesome/free-solid-svg-icons';
+import { faSquarePen } from '@fortawesome/pro-regular-svg-icons';
 import CustomTabContent from './CustomTabContent';
 import SummaryTabContent from './SummaryTabContent';
 import { MetTab, MetTabList, MetTabPanel } from '../../StyledTabComponents';
@@ -108,8 +109,8 @@ export const ContentTabs: React.FC = () => {
                                                 <MetTooltip title="Edit Tab">
                                                     <IconButton onClick={() => handleEditTab(index)} aria-label="edit">
                                                         <FontAwesomeIcon
-                                                            icon={faPenToSquare as IconProp}
-                                                            fontSize="small"
+                                                            icon={faSquarePen as IconProp}
+                                                            fontSize="medium"
                                                             data-testid="edit-tab-details"
                                                         />
                                                     </IconButton>