feat(model-ad): create a footer component and add it to the MODEL-AD …

…app (#2689)

apps/model-ad/app/project.json

@@ -7,44 +7,60 @@
   "tags": [],
   "targets": {
     "build": {
-      "executor": "@angular-devkit/build-angular:application",
-      "outputs": ["{options.outputPath}"],
+      "executor": "@angular-devkit/build-angular:browser",
+      "outputs": [
+        "{options.outputPath}"
+      ],
       "options": {
-        "outputPath": "dist/apps/model-ad/app",
+        "outputPath": "dist/apps/model-ad/app/browser/browser",
         "index": "apps/model-ad/app/src/index.html",
-        "browser": "apps/model-ad/app/src/main.ts",
-        "polyfills": ["zone.js"],
+        "main": "apps/model-ad/app/src/main.ts",
+        "polyfills": [
+          "zone.js"
+        ],
         "tsConfig": "apps/model-ad/app/tsconfig.app.json",
         "inlineStyleLanguage": "scss",
-        "assets": ["apps/model-ad/app/src/favicon.ico", "apps/model-ad/app/src/assets"],
-        "styles": ["apps/model-ad/app/src/styles.scss"],
-        "scripts": [],
-        "server": "apps/model-ad/app/src/main.server.ts",
-        "prerender": true,
-        "ssr": {
-          "entry": "apps/model-ad/app/server.ts"
-        }
+        "assets": [
+          "apps/model-ad/app/src/assets",
+          "apps/model-ad/app/src/humans.txt",
+          "apps/model-ad/app/src/robots.txt",
+          {
+            "input": "libs/shared/typescript/assets/src/assets",
+            "glob": "**/*",
+            "output": "assets"
+          }
+        ],
+        "styles": [
+          "apps/model-ad/app/src/styles.scss",
+          "node_modules/primeicons/primeicons.css",
+          "node_modules/primeng/resources/themes/lara-light-blue/theme.css",
+          "node_modules/primeng/resources/primeng.min.css"
+        ],
+        "scripts": []
       },
       "configurations": {
         "production": {
           "budgets": [
             {
               "type": "initial",
-              "maximumWarning": "500kb",
-              "maximumError": "1mb"
+              "maximumWarning": "1mb",
+              "maximumError": "2mb"
             },
             {
               "type": "anyComponentStyle",
               "maximumWarning": "2kb",
-              "maximumError": "4kb"
+              "maximumError": "10kb"
             }
           ],
           "outputHashing": "all"
         },
         "development": {
+          "buildOptimizer": false,
           "optimization": false,
+          "vendorChunk": true,
           "extractLicenses": false,
-          "sourceMap": true
+          "sourceMap": true,
+          "namedChunks": true
         }
       },
       "defaultConfiguration": "production"
@@ -72,7 +88,9 @@
     },
     "test": {
       "executor": "@nx/jest:jest",
-      "outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
+      "outputs": [
+        "{workspaceRoot}/coverage/{projectRoot}"
+      ],
       "options": {
         "jestConfig": "apps/model-ad/app/jest.config.ts"
       }
@@ -84,5 +102,10 @@
         "staticFilePath": "dist/apps/model-ad/app/browser"
       }
     }
-  }
-}
+  },
+  "implicitDependencies": [
+    "model-ad-styles",
+    "model-ad-themes",
+    "shared-typescript-assets"
+  ]
+}

apps/model-ad/app/src/_app-theme.scss

@@ -0,0 +1,48 @@
+@use 'sass:map';
+@use '@angular/material' as mat;
+@use 'libs/model-ad/themes/src/fonts' as fonts;
+@use 'libs/model-ad/themes/src/palettes' as palettes;
+@use 'libs/model-ad/themes/src/index' as model-ad;
+
+@include mat.typography-hierarchy(fonts.$lato);
+@include mat.core();
+
+$primary: mat.define-palette(palettes.$dark-blue-palette, 600);
+$accent: mat.define-palette(palettes.$accent-purple-palette, 400);
+
+$theme: mat.define-light-theme(
+  (
+    color: (
+      primary: $primary,
+      accent: $accent,
+    ),
+    typography: fonts.$lato,
+    density: 0,
+    is-dark: false,
+  )
+);
+
+// Add custom palettes used in figma to the theme
+$theme: map.deep-merge(
+  $theme,
+  (
+    color: (
+      figma: palettes.$figma-collection,
+    ),
+  )
+);
+
+// Emit theme-dependent styles for common features used across multiple components.
+@include mat.core-theme($theme);
+
+// Emit styles for MatButton based on `$theme`.
+@include mat.button-theme($theme);
+
+// Include the theme mixins for other components you use here.
+@include model-ad.theme($theme);
+
+:root {
+  --color-btn-primary: #39bde7;
+  --color-btn-disabled: #ebebe4;
+  --color-btn-shadow: rgba(196, 196, 196, 1);
+}

apps/model-ad/app/src/app/app.component.html

@@ -1 +1,8 @@
 <app-nx-welcome></app-nx-welcome> <router-outlet></router-outlet>
+<model-ad-footer
+  appVersion="1.0"
+  dataUpdatedOn="today"
+  privacyPolicyUrl="https://google.com"
+  termsOfUseUrl="https://google.com"
+  apiDocsUrl="https://google.com"
+/>

apps/model-ad/app/src/app/app.component.ts

@@ -1,10 +1,11 @@
 import { Component } from '@angular/core';
 import { RouterModule } from '@angular/router';
 import { NxWelcomeComponent } from './nx-welcome.component';
+import { FooterComponent } from '@sagebionetworks/model-ad/ui';
 
 @Component({
   standalone: true,
-  imports: [NxWelcomeComponent, RouterModule],
+  imports: [NxWelcomeComponent, RouterModule, FooterComponent],
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrl: './app.component.scss',

apps/model-ad/app/src/humans.txt

@@ -0,0 +1,6 @@
+/* TEAM */
+
+/* THANKS */
+
+/* SITE */
+Last update: 2024/05/29

apps/model-ad/app/src/robots.txt

@@ -0,0 +1 @@
+User-agent: *

apps/model-ad/app/src/styles.scss

@@ -1 +1,4 @@
 /* You can add global styles to this file, and also import other style files */
+@use 'libs/model-ad/styles/src/index';
+
+@use 'app-theme';

libs/model-ad/styles/README.md

@@ -0,0 +1 @@
+# model-ad-styles

libs/model-ad/styles/project.json

@@ -0,0 +1,13 @@
+{
+  "name": "model-ad-styles",
+  "$schema": "../../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "libs/model-ad/styles/src",
+  "projectType": "library",
+  "generators": {},
+  "targets": {},
+  "tags": [
+    "type:styles",
+    "scope:model-ad",
+    "language:typescript"
+  ]
+}

libs/model-ad/styles/src/_index.scss

@@ -0,0 +1,4 @@
+@use 'libs/shared/typescript/styles/src/index';
+
+@use './lib/constants';
+@use './lib/general';

libs/model-ad/styles/src/lib/_constants.scss

@@ -0,0 +1,39 @@
+// See https://github.com/angular/components/blob/master/src/material/core/style/_variables.scss
+
+// Global constants
+$pi: 3.14159264;
+$padding-test: 20px;
+
+// Figma variables
+$dl-size-size-large: 144px;
+$dl-size-size-small: 48px;
+$dl-size-size-medium: 96px;
+$dl-size-size-xlarge: 192px;
+$dl-size-size-xsmall: 16px;
+$dl-space-space-unit: 16px;
+$dl-size-size-xxlarge: 288px;
+$dl-size-size-maxwidth: 1400px;
+$dl-radius-radius-round: 50%;
+$dl-space-space-halfunit: 8px;
+$dl-space-space-sixunits: 96px;
+$dl-space-space-twounits: 32px;
+$dl-radius-radius-radius2: 2px;
+$dl-radius-radius-radius4: 4px;
+$dl-radius-radius-radius8: 8px;
+$dl-space-space-fiveunits: 80px;
+$dl-space-space-fourunits: 64px;
+$dl-radius-radius-radius16: 16px;
+$dl-space-space-threeunits: 48px;
+$dl-space-space-oneandhalfunits: 24px;
+
+// Breakpoints from https://getbootstrap.com/docs/5.0/layout/breakpoints/
+$sm-breakpoint: 576px;
+$md-breakpoint: 768px;
+$lg-breakpoint: 992px;
+$xl-breakpoint: 1200px;
+$xxl-breakpoint: 1400px;
+
+// Dimensions of component
+$navbar-height: 68px;
+$navbar-height-tall: 240px;
+$footer-height: 259px;