Merge pull request #500 from PermanentOrg/fontawesome-pro

Use FontAwesome Pro Icons

.github/workflows/build-dev.yml

@@ -24,7 +24,7 @@ jobs:
             ${{ runner.os }}-node_modules-
 
       - name: Install dependencies
-        run: npm install
+        run: FONTAWESOME_PACKAGE_TOKEN="${{ secrets.FONTAWESOME_PACKAGE_TOKEN }}" npm install
 
       - name: Build
         env:
@@ -59,7 +59,7 @@ jobs:
             ${{ runner.os }}-node_modules-
 
       - name: Install dependencies
-        run: npm install
+        run: FONTAWESOME_PACKAGE_TOKEN="${{ secrets.FONTAWESOME_PACKAGE_TOKEN }}" npm install
 
       - name: Build Storybook
         run: npm run build-storybook

.github/workflows/build-prod.yml

@@ -20,7 +20,7 @@ jobs:
           restore-keys: |
             ${{ runner.os }}-node_modules-
       - name: Install dependencies
-        run: npm install
+        run: FONTAWESOME_PACKAGE_TOKEN="${{ secrets.FONTAWESOME_PACKAGE_TOKEN }}" npm install
       - name: Build
         env:
           GOOGLE_API_KEY: ${{ secrets.GOOGLE_API_KEY_PROD }}
@@ -54,7 +54,7 @@ jobs:
             ${{ runner.os }}-node_modules-
 
       - name: Install dependencies
-        run: npm install
+        run: FONTAWESOME_PACKAGE_TOKEN="${{ secrets.FONTAWESOME_PACKAGE_TOKEN }}" npm install
 
       - name: Build Storybook
         run: npm run build-storybook

.github/workflows/build-staging.yml

@@ -21,7 +21,7 @@ jobs:
           restore-keys: |
             ${{ runner.os }}-node_modules-
       - name: Install dependencies
-        run: npm install
+        run: FONTAWESOME_PACKAGE_TOKEN="${{ secrets.FONTAWESOME_PACKAGE_TOKEN }}" npm install
       - name: Build
         env:
           GOOGLE_API_KEY: ${{ secrets.GOOGLE_API_KEY_STAGING }}
@@ -53,7 +53,7 @@ jobs:
             ${{ runner.os }}-node_modules-
 
       - name: Install dependencies
-        run: npm install
+        run: FONTAWESOME_PACKAGE_TOKEN="${{ secrets.FONTAWESOME_PACKAGE_TOKEN }}" npm install
 
       - name: Build Storybook
         run: npm run build-storybook

.github/workflows/lint.yml

@@ -17,7 +17,7 @@ jobs:
           restore-keys: |
             ${{ runner.os }}-node_modules-
       - name: Install dependencies
-        run: npm install
+        run: FONTAWESOME_PACKAGE_TOKEN="${{ secrets.FONTAWESOME_PACKAGE_TOKEN }}" npm install
       - name: Run Prettier
         run: npx prettier --check --require-pragma .
       - name: Run eslint

.github/workflows/unit-tests.yml

@@ -27,7 +27,7 @@ jobs:
             ${{ runner.os }}-node_modules-
 
       - name: Install dependencies
-        run: npm install
+        run: FONTAWESOME_PACKAGE_TOKEN="${{ secrets.FONTAWESOME_PACKAGE_TOKEN }}" npm install
 
       - name: Run unit tests
         env:

.npmrc

@@ -0,0 +1,2 @@
+@fortawesome:registry=https://npm.fontawesome.com/
+//npm.fontawesome.com/:_authToken=${FONTAWESOME_PACKAGE_TOKEN}

README.md

@@ -8,13 +8,17 @@ This is the source code for Permanent.org's front-end.
 
 To get started, first create the file for the environment variables.
 
-```
+```sh
 cp .env.template .env
 ```
 
 Add your environment secrets to `.env`.
 
-Install the project dependencies with `npm install`.
+You need access to FontAwesome Pro packages to install dependencies. You can install the project dependencies with:
+
+```sh
+FONTAWESOME_PACKAGE_TOKEN="insert_token_here" npm install
+```
 
 Then run the app using `npm run dev` to point the dev server against your `local.permanent.org` VM accessible at `https://ng.permanent.org:4200`
 

package.json

@@ -40,6 +40,8 @@
     "@fortawesome/fontawesome-svg-core": "^1.2.28",
     "@fortawesome/free-regular-svg-icons": "^6.5.2",
     "@fortawesome/free-solid-svg-icons": "^5.13.0",
+    "@fortawesome/pro-regular-svg-icons": "^6.7.1",
+    "@fortawesome/pro-solid-svg-icons": "^6.7.1",
     "@ng-bootstrap/ng-bootstrap": "16.0.0",
     "@popperjs/core": "^2.11.8",
     "@sentry/browser": "7.119.1",

src/app/onboarding/components/glam/archive-type-icon/archive-type-icon.component.ts

@@ -1,7 +1,15 @@
 import { Component, Input } from '@angular/core';
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
-import { faHeart, faUser } from '@fortawesome/free-regular-svg-icons';
-import { faScroll } from '@fortawesome/free-solid-svg-icons';
+import {
+  faBuildingColumns,
+  faFamily,
+  faHeart,
+  faPeopleGroup,
+  faScrollOld,
+  faShapes,
+  faSquareEllipsis,
+  faUser,
+} from '@fortawesome/pro-regular-svg-icons';
 import { OnboardingTypes } from '@root/app/onboarding/shared/onboarding-screen';
 
 @Component({
@@ -12,10 +20,14 @@ import { OnboardingTypes } from '@root/app/onboarding/shared/onboarding-screen';
 })
 export class ArchiveTypeIconComponent {
   @Input() public type: OnboardingTypes = OnboardingTypes.myself;
-  public readonly icons = {
+  public readonly icons: Record<OnboardingTypes, typeof faHeart> = {
     'type:myself': faHeart,
     'type:individual': faUser,
-    'type:family': faHeart,
-    'type:famhist': faScroll,
+    'type:family': faFamily,
+    'type:famhist': faScrollOld,
+    'type:community': faPeopleGroup,
+    'type:org': faBuildingColumns,
+    'type:other': faSquareEllipsis,
+    'type:unsure': faShapes,
   };
 }

src/app/onboarding/components/glam/types/archive-types.ts

@@ -54,8 +54,8 @@ export const archiveDescriptions = {
     'Create an archive that preserves the history of a community, group, or other association of people.',
   'type:org':
     'Create an archive that preserves the history of an organization or nonprofit.',
-  'type:other': '',
-  'type:unsure': '',
+  'type:other': 'Create an archive about something else.',
+  'type:unsure': 'I’m not sure what type of archive I want to create.',
 };
 
 export const archiveOptionsWithArticle = [