Facilitator_mx Theme: New look task-card

src/app/shared/components/template/components/task-card/task-card.component.html

@@ -3,39 +3,35 @@
     [class]="'card-wrapper landscape ' + style"
     [attr.data-variant]="variant"
     (click)="triggerActions('click')"
+    [attr.data-status]="progressStatus"
   >
-    <ng-container *ngIf="highlighted; else showProgress">
+    @if (highlighted) {
       <span class="badge highlighted-badge">
         {{ highlightedText }}
       </span>
-    </ng-container>
-    <ng-template #showProgress>
-      <span class="badge progress-badge">
-        <span class="circle" [class]="progressStatus"></span>
-        <img
-          *ngIf="progressStatus === 'inProgress'"
-          class="icon"
-          src="{{ inProgressIcon | plhAsset }}"
-        />
-        <img
-          *ngIf="progressStatus === 'completed'"
-          class="icon completed"
-          src="{{ completedIcon | plhAsset }}"
-        />
-      </span>
-    </ng-template>
+    } @else {
+      @if (inProgressIcon || completedIcon) {
+        <span class="badge progress-badge">
+          <span class="circle" [class]="progressStatus"></span>
+          @if (progressStatus === "inProgress") {
+            <img class="icon" src="{{ inProgressIcon | plhAsset }}" />
+          } @else if (progressStatus === "completed") {
+            <img class="icon completed" src="{{ completedIcon | plhAsset }}" />
+          }
+        </span>
+      }
+    }
     <div class="content-wrapper">
-      <ng-container *ngIf="!title">
+      @if (!title) {
         <plh-template-component
           *ngFor="let childRow of _row.rows | filterDisplayComponent; trackBy: trackByRow"
           [row]="childRow"
           [parent]="parent"
           [attr.data-rowname]="_row.name"
         >
         </plh-template-component>
-      </ng-container>
-      <ng-container *ngIf="title">
-        <ng-container *ngIf="isButton">
+      } @else {
+        @if (isButton) {
           <div class="button-content">
             <plh-template-component
               *ngFor="let childRow of _row.rows | filterDisplayComponent; trackBy: trackByRow"
@@ -45,70 +41,71 @@
             >
             </plh-template-component>
           </div>
-        </ng-container>
+        }
         <div class="text-wrapper">
-          <div *ngIf="title" class="title-wrapper">
+          <div class="title-wrapper">
             <h1>
               {{ title }}
             </h1>
           </div>
-          <div *ngIf="subtitle" class="subtitle-wrapper">
-            <p>
-              {{ subtitle }}
-            </p>
-          </div>
+          @if (subtitle) {
+            <div class="subtitle-wrapper">
+              <p>
+                {{ subtitle }}
+              </p>
+            </div>
+          }
           <!-- If a taskGroupId is provided, show the progress bar for the relevant task group -->
-          <div *ngIf="taskGroupId && !taskId">
-            <plh-task-progress-bar
-              [dataListName]="taskGroupDataList"
-              [completedField]="completedField"
-              [completedColumnName]="completedColumnName"
-              [highlighted]="highlighted"
-              [parameterList]="_row.parameter_list"
-              [progressUnitsName]="progressUnitsName"
-              [showText]="showProgressText"
-              [(progressStatus)]="progressStatus"
-              (newlyCompleted)="handleNewlyCompleted($event)"
-            ></plh-task-progress-bar>
-          </div>
-        </div>
-        <div *ngIf="image" class="image-wrapper">
-          <img [src]="image | plhAsset" />
+          @if (taskGroupId && !taskId) {
+            <div>
+              <plh-task-progress-bar
+                [dataListName]="taskGroupDataList"
+                [completedField]="completedField"
+                [highlighted]="highlighted"
+                [progressUnitsName]="progressUnitsName"
+                [showText]="showProgressText"
+                [(progressStatus)]="progressStatus"
+                (newlyCompleted)="handleNewlyCompleted($event)"
+              ></plh-task-progress-bar>
+            </div>
+          }
         </div>
-      </ng-container>
+        @if (image) {
+          <div class="image-wrapper">
+            <img [src]="image | plhAsset" />
+          </div>
+        }
+      }
     </div>
   </div>
 } @else {
   <div class="circle-card-wrapper" (click)="triggerActions('click')">
     <div class="image-and-badge-wrapper">
-      <div *ngIf="taskGroupId && !taskId">
-        <plh-task-progress-bar
-          [dataListName]="taskGroupDataList"
-          [completedField]="completedField"
-          [highlighted]="highlighted"
-          [progressUnitsName]="progressUnitsName"
-          [showText]="false"
-          [(progressStatus)]="progressStatus"
-          (newlyCompleted)="handleNewlyCompleted($event)"
-        ></plh-task-progress-bar>
-      </div>
+      @if (taskGroupId && !taskId) {
+        <div>
+          <plh-task-progress-bar
+            [dataListName]="taskGroupDataList"
+            [completedField]="completedField"
+            [highlighted]="highlighted"
+            [progressUnitsName]="progressUnitsName"
+            [showText]="false"
+            [(progressStatus)]="progressStatus"
+            (newlyCompleted)="handleNewlyCompleted($event)"
+          ></plh-task-progress-bar>
+        </div>
+      }
       @if (highlighted) {
         <span class="badge highlighted-badge">
           {{ highlightedText }}
         </span>
-      } @else {
+      } @else if (inProgressIcon || completedIcon) {
         <span class="badge progress-badge">
           <span class="circle" [class]="progressStatus"></span>
-          <img
-            *ngIf="progressStatus === 'inProgress'"
-            class="icon"
-            src="{{ inProgressIcon | plhAsset }}"
-          />
-          <img
-            *ngIf="progressStatus === 'completed'"
-            class="icon completed"
-            src="{{ completedIcon | plhAsset }}"
-          />
+          @if (progressStatus === "inProgress") {
+            <img class="icon" src="{{ inProgressIcon | plhAsset }}" />
+          } @else if (progressStatus === "completed") {
+            <img class="icon completed" src="{{ completedIcon | plhAsset }}" />
+          }
         </span>
       }
       <div class="circle-wrapper">

src/app/shared/components/template/components/task-card/task-card.component.ts

@@ -54,7 +54,14 @@ interface ITaskCardParams {
    * A list of named style variants of the component, separated by spaces or commas.
    * Default "landscape"
    * */
-  variant: "background-secondary" | "background-primary" | "button" | "landscape" | "portrait" | "";
+  variant:
+    | "background-secondary"
+    | "background-primary"
+    | "button"
+    | "landscape"
+    | "portrait"
+    | ""
+    | "block-button";
   /**
    * The icon to display in the "badge" added to the task card
    * when its associated task/task group has been completed

src/theme/themes/_index.scss

@@ -1,6 +1,6 @@
 @forward "./default.scss";
 @forward "./professional.scss";
 @forward "./pfr.scss";
-@forward "./plh_facilitator_mx.scss";
+@forward "./plh_facilitator_mx/index";
 @forward "./early_family_math.scss";
 @forward "./plh_kids_kw/index";

src/theme/themes/plh_facilitator_mx/_index.scss

@@ -0,0 +1,110 @@
+@use "../utils";
+@use "sass:color";
+@use "./overrides";
+
+@mixin theme-plh_facilitator_mx {
+  [data-theme="plh_facilitator_mx"] {
+    /** Authoring variables **/
+    $color-primary: hsl(183, 40%, 43%); // #419499;
+    $color-secondary: hsl(168, 77%, 43%); //#19C2A0;
+    $page-background: white;
+
+    /** Global and component variables **/
+    $variable-overrides: (
+      font-weight-standard: 500,
+      font-weight-medium: 600,
+      font-weight-bold: 700,
+      font-weight-extra-bold: 800,
+
+      font-size-text-tiny: 14px,
+      font-size-text-small: 16px,
+      font-size-text-mid-size: 18px,
+      font-size-text-medium: 20px,
+      font-size-text-large: 24px,
+      font-size-text-title: 28px,
+      font-size-text-extra-large: 32px,
+
+      line-height-text-tiny: 18px,
+      line-height-text-small: 24px,
+      line-height-text-medium: 28px,
+      line-height-text-large: 32px,
+      line-height-text-extra-large: 40px,
+
+      ion-border-radius-small: 8px,
+      ion-border-radius-standard: 12px,
+      ion-border-radius-secondary: 20px,
+      ion-border-radius-rounded: 50px,
+
+      // BORDERS
+      border-color-default: var(--ion-color-gray-200),
+      border-width-default: 1px,
+      border-standard: var(--border-width-default) solid var(--border-color-default),
+      border-thin-standard: 1px solid var(--border-color-default),
+      button-background-primary: var(--ion-color-primary-500),
+      button-background-secondary: var(--ion-color-secondary),
+      button-background-option: var(--ion-color-primary-800),
+      round-button-background-secondary-light: var(--ion-color-yellow),
+      tile-button-background-primary: var(--ion-color-primary-500),
+      tile-button-background-primary-light: var(--ion-color-primary-300),
+      tile-button-background-secondary: var(--ion-color-secondary),
+      tile-button-background-secondary-light: var(--ion-color-yellow),
+      points-item-background: var(--ion-background-color),
+      points-item-background-complete: var(--ion-color-primary-200),
+      points-item-border: rgba(black, 0.07),
+      display-group-background-banner-primary: var(--ion-color-primary-200),
+      display-group-background-banner-secondary: var(--ion-color-secondary-300),
+      display-group-background-home-light: var(--ion-color-primary-300),
+      display-group-background-home-mid: var(--ion-color-primary-600),
+      display-group-background-home-dark: var(--ion-color-primary-800),
+      combo-box-background-with-value: var(--ion-color-primary-300),
+      accordion-background-highlight: var(--ion-color-primary-300),
+      tour-next-button-background: var(--ion-color-secondary),
+      radio-group-background-selected: var(--ion-color-primary-300),
+      ion-item-background: var(--ion-color-gray-light),
+      task-progress-bar-color: var(--ion-color-green),
+      progress-path-line-background: var(--ion-color-gray-100),
+      // ICONS
+      icon-size-small: 16px,
+      icon-size-medium: 24px,
+      icon-size-large: 32px,
+      icon-size-extra-large: 40px,
+      icon-size-largest: 48px,
+
+      // SURFACE COLOUR PALETTE
+      color-surface-white: #ffffff,
+      color-surface-white-variant: #f9f9fa,
+      color-surface-black: #1b1c1d,
+      color-surface-black-variant: #44474a,
+      color-outline: #74777c,
+      color-outline-variant: #c4c7c9,
+
+      // SECONDARY PALETTE
+      color-secondary-green-40: #006f54,
+      color-secondary-green-50: #008a6c,
+      color-secondary-green-60: #00a485,
+      color-secondary-green-70: #4ebda1,
+      color-secondary-green-80: #8ad5bf,
+      color-secondary-green-90: #c4ebde,
+
+      // ORANGE PALETTE
+      color-accent-orange-40: #a63b0f,
+      color-accent-orange-50: #c75223,
+      color-accent-orange-60: #e36f40,
+      color-accent-orange-70: #f89065,
+      color-accent-orange-80: #ffb392,
+      color-accent-orange-95: #ffd8c6,
+
+      // BLUE PALETTE
+      color-accent-blue-40: #46607f,
+      color-accent-blue-50: #5e799b,
+      color-accent-blue-60: #7993b4,
+      color-accent-blue-70: #98adca,
+      color-accent-blue-80: #b9c8de,
+      color-accent-blue-90: #dce3ef,
+    );
+    @include utils.generateTheme($color-primary, $color-secondary, $page-background);
+    @each $name, $value in $variable-overrides {
+      --#{$name}: #{$value};
+    }
+  }
+}