From e022740ce79d95389b32f1e64e0a5a22fd9dfe22 Mon Sep 17 00:00:00 2001
From: FaithDaka <faithbusigu8@gmail.com>
Date: Wed, 4 Dec 2024 15:46:21 +0300
Subject: [PATCH 1/8] add support for icon position styling

---
 .../template/components/button/button.component.html       | 1 +
 .../template/components/button/button.component.ts         | 7 +++++++
 2 files changed, 8 insertions(+)

diff --git a/src/app/shared/components/template/components/button/button.component.html b/src/app/shared/components/template/components/button/button.component.html
index efaeac915f..be759bd150 100644
--- a/src/app/shared/components/template/components/button/button.component.html
+++ b/src/app/shared/components/template/components/button/button.component.html
@@ -8,6 +8,7 @@
     [attr.data-param-style]="params.style"
     [attr.data-variant]="params.variant"
     [attr.data-has-children]="_row.rows ? true : false"
+    [attr.data-icon-position]="params.iconPosition"
   >
     <ion-icon *ngIf="params.icon" slot="start" src="{{ params.icon | plhAsset }}"></ion-icon>
     <span
diff --git a/src/app/shared/components/template/components/button/button.component.ts b/src/app/shared/components/template/components/button/button.component.ts
index c13acb036d..65536ea5d2 100644
--- a/src/app/shared/components/template/components/button/button.component.ts
+++ b/src/app/shared/components/template/components/button/button.component.ts
@@ -31,6 +31,8 @@ interface IButtonParams {
   icon: string;
   /** TEMPLATE PARAMETER: "image_asset". The path to an image asset */
   image: string;
+  /** TEMPLATE PARAMETER: "icon_position". The alignment of the icon on the button */
+  iconPosition: "left" | "right";
 }
 
 /**
@@ -75,6 +77,11 @@ export class TmplButtonComponent extends TemplateBaseComponent implements OnInit
       "center"
     ) as any;
     this.params.icon = getStringParamFromTemplateRow(this._row, "icon", null);
+    this.params.iconPosition = getStringParamFromTemplateRow(
+      this._row,
+      "icon_position",
+      "left"
+    ) as any;
   }
 
   /** Determine if the button is inside a display group with the style "two_columns" */

From 0bbc0ae82f4f3d8f89b64a9adeccd4465a690286 Mon Sep 17 00:00:00 2001
From: FaithDaka <faithbusigu8@gmail.com>
Date: Wed, 4 Dec 2024 15:47:08 +0300
Subject: [PATCH 2/8] feat: `no-background` variant

---
 src/theme/themes/plh_kids_kw/_overrides.scss | 29 ++++++++++++++++----
 1 file changed, 23 insertions(+), 6 deletions(-)

diff --git a/src/theme/themes/plh_kids_kw/_overrides.scss b/src/theme/themes/plh_kids_kw/_overrides.scss
index bb82e6357a..0f17c7990a 100644
--- a/src/theme/themes/plh_kids_kw/_overrides.scss
+++ b/src/theme/themes/plh_kids_kw/_overrides.scss
@@ -25,16 +25,17 @@ body[data-theme="plh_kids_kw"] {
     .left {
       text-align: unset !important;
     }
-    // Center align all button text by default
-    .left.null ::ng-deep {
-      text-align: center;
+    .left.text {
+      text-align: left;
       p {
-        text-align: center !important;
+        text-align: left !important;
       }
     }
-    .left ::ng-deep {
+    // Center align all button text by default
+    .left.null {
+      text-align: center !important;
       p {
-        text-align: left !important;
+        text-align: center !important;
       }
     }
     .left.centre ::ng-deep {
@@ -72,6 +73,22 @@ body[data-theme="plh_kids_kw"] {
         --background: var(--ion-color-primary-500);
       }
     }
+    ion-button[data-variant~="card"],
+    ion-button[data-param-style~="no-background"] {
+      border: none;
+    }
+    ion-button[data-variant~="card"][data-param-style~="no-background"] {
+      border: 1px solid transparent;
+      border-radius: 0px;
+      background-color: transparent;
+      background: transparent;
+      color: var(--color-surface-black);
+      min-height: 64px;
+      padding: 18px 24px;
+      p {
+        font-weight: var(--font-weight-standard);
+      }
+    }
   }
 
   // audio

From ee10c1e3ddf98e4120b7ed609979001e95ce241e Mon Sep 17 00:00:00 2001
From: FaithDaka <faithbusigu8@gmail.com>
Date: Wed, 4 Dec 2024 17:05:56 +0300
Subject: [PATCH 3/8] styling: text variant for settings list header

---
 src/theme/themes/plh_kids_kw/_overrides.scss | 17 +++++++++++++++--
 1 file changed, 15 insertions(+), 2 deletions(-)

diff --git a/src/theme/themes/plh_kids_kw/_overrides.scss b/src/theme/themes/plh_kids_kw/_overrides.scss
index 0f17c7990a..39df71f895 100644
--- a/src/theme/themes/plh_kids_kw/_overrides.scss
+++ b/src/theme/themes/plh_kids_kw/_overrides.scss
@@ -459,11 +459,24 @@ body[data-theme="plh_kids_kw"] {
     }
   }
   plh-tmpl-title {
-    .title-wrapper h1 p {
+    .title-wrapper h1 {
       font-size: var(--font-size-text-title);
       margin: var(--paragraph-margin-medium) 0;
       line-height: var(--line-height-text-large);
-      color: var(--ion-color-primary-700);
+      color: var(--color-surface-black);
+    }
+    .list-title {
+      font-size: var(--font-size-text-large) !important;
+      font-weight: var(--font-weight-medium) !important;
+      background-color: #e7f2fd;
+      border-bottom: 1px solid var(--color-secondary-blue-80);
+      h1 {
+        padding: 18px;
+        border: none;
+      }
+    }
+    .page-title h1 {
+      font-size: var(--font-size-text-extra-large) !important;
     }
   }
 

From b2a7440caa5e85845b34654585c38a7aa47494d5 Mon Sep 17 00:00:00 2001
From: FaithDaka <faithbusigu8@gmail.com>
Date: Thu, 12 Dec 2024 12:57:48 +0300
Subject: [PATCH 4/8] fix: use title variants

---
 .../components/template/components/title/title.component.ts | 2 +-
 src/theme/themes/plh_kids_kw/_overrides.scss                | 6 ++++--
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/app/shared/components/template/components/title/title.component.ts b/src/app/shared/components/template/components/title/title.component.ts
index 75a3d94bb8..caa14a4783 100644
--- a/src/app/shared/components/template/components/title/title.component.ts
+++ b/src/app/shared/components/template/components/title/title.component.ts
@@ -13,7 +13,7 @@ interface ITitleParams {
   /** TEMPLATE PARAMETER: "style". */
   style: string | null;
   /** TEMPLATE PARAMETER: "variant". */
-  variant: "" | "header";
+  variant: "" | "header" | "list-title" | "page-title";
 }
 
 @Component({
diff --git a/src/theme/themes/plh_kids_kw/_overrides.scss b/src/theme/themes/plh_kids_kw/_overrides.scss
index 34855aa709..7f73c9b5b2 100644
--- a/src/theme/themes/plh_kids_kw/_overrides.scss
+++ b/src/theme/themes/plh_kids_kw/_overrides.scss
@@ -450,6 +450,8 @@ body[data-theme="plh_kids_kw"] {
       }
     }
   }
+
+  // Title
   plh-tmpl-title {
     .title-wrapper h1 {
       font-size: var(--font-size-text-title);
@@ -457,7 +459,7 @@ body[data-theme="plh_kids_kw"] {
       line-height: var(--line-height-text-large);
       color: var(--color-surface-black);
     }
-    .list-title {
+    .title-wrapper[data-variant~="list-title"] {
       font-size: var(--font-size-text-large) !important;
       font-weight: var(--font-weight-medium) !important;
       background-color: #e7f2fd;
@@ -467,7 +469,7 @@ body[data-theme="plh_kids_kw"] {
         border: none;
       }
     }
-    .page-title h1 {
+    .title-wrapper[data-variant~="page-title"] h1 {
       font-size: var(--font-size-text-extra-large) !important;
     }
   }

From 3796c2bd2c5cd626c1b8b32cc03ca8d82accd940 Mon Sep 17 00:00:00 2001
From: FaithDaka <faithbusigu8@gmail.com>
Date: Thu, 19 Dec 2024 10:53:26 +0300
Subject: [PATCH 5/8] remove icon position param

---
 .../template/components/button/button.component.html       | 1 -
 .../template/components/button/button.component.ts         | 7 -------
 2 files changed, 8 deletions(-)

diff --git a/src/app/shared/components/template/components/button/button.component.html b/src/app/shared/components/template/components/button/button.component.html
index be759bd150..efaeac915f 100644
--- a/src/app/shared/components/template/components/button/button.component.html
+++ b/src/app/shared/components/template/components/button/button.component.html
@@ -8,7 +8,6 @@
     [attr.data-param-style]="params.style"
     [attr.data-variant]="params.variant"
     [attr.data-has-children]="_row.rows ? true : false"
-    [attr.data-icon-position]="params.iconPosition"
   >
     <ion-icon *ngIf="params.icon" slot="start" src="{{ params.icon | plhAsset }}"></ion-icon>
     <span
diff --git a/src/app/shared/components/template/components/button/button.component.ts b/src/app/shared/components/template/components/button/button.component.ts
index 65536ea5d2..c13acb036d 100644
--- a/src/app/shared/components/template/components/button/button.component.ts
+++ b/src/app/shared/components/template/components/button/button.component.ts
@@ -31,8 +31,6 @@ interface IButtonParams {
   icon: string;
   /** TEMPLATE PARAMETER: "image_asset". The path to an image asset */
   image: string;
-  /** TEMPLATE PARAMETER: "icon_position". The alignment of the icon on the button */
-  iconPosition: "left" | "right";
 }
 
 /**
@@ -77,11 +75,6 @@ export class TmplButtonComponent extends TemplateBaseComponent implements OnInit
       "center"
     ) as any;
     this.params.icon = getStringParamFromTemplateRow(this._row, "icon", null);
-    this.params.iconPosition = getStringParamFromTemplateRow(
-      this._row,
-      "icon_position",
-      "left"
-    ) as any;
   }
 
   /** Determine if the button is inside a display group with the style "two_columns" */

From 2bf08fe73d5edf98ef652faf2b6aaad74cc3bdc5 Mon Sep 17 00:00:00 2001
From: FaithDaka <faithbusigu8@gmail.com>
Date: Thu, 19 Dec 2024 10:53:44 +0300
Subject: [PATCH 6/8] change title variant names

---
 .../components/template/components/title/title.component.ts   | 2 +-
 src/theme/themes/plh_kids_kw/_overrides.scss                  | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/app/shared/components/template/components/title/title.component.ts b/src/app/shared/components/template/components/title/title.component.ts
index caa14a4783..956e528727 100644
--- a/src/app/shared/components/template/components/title/title.component.ts
+++ b/src/app/shared/components/template/components/title/title.component.ts
@@ -13,7 +13,7 @@ interface ITitleParams {
   /** TEMPLATE PARAMETER: "style". */
   style: string | null;
   /** TEMPLATE PARAMETER: "variant". */
-  variant: "" | "header" | "list-title" | "page-title";
+  variant: "" | "header" | "section-banner" | "page-banner";
 }
 
 @Component({
diff --git a/src/theme/themes/plh_kids_kw/_overrides.scss b/src/theme/themes/plh_kids_kw/_overrides.scss
index 6f3a7a8e7d..e51a2f862b 100644
--- a/src/theme/themes/plh_kids_kw/_overrides.scss
+++ b/src/theme/themes/plh_kids_kw/_overrides.scss
@@ -455,7 +455,7 @@ body[data-theme="plh_kids_kw"] {
       line-height: var(--line-height-text-large);
       color: var(--color-surface-black);
     }
-    .title-wrapper[data-variant~="list-title"] {
+    .title-wrapper[data-variant~="section-banner"] {
       font-size: var(--font-size-text-large) !important;
       font-weight: var(--font-weight-medium) !important;
       background-color: #e7f2fd;
@@ -465,7 +465,7 @@ body[data-theme="plh_kids_kw"] {
         border: none;
       }
     }
-    .title-wrapper[data-variant~="page-title"] h1 {
+    .title-wrapper[data-variant~="page-banner"] h1 {
       font-size: var(--font-size-text-extra-large) !important;
     }
   }

From d619e094153bf68d6dbc3833f58464f68c433eed Mon Sep 17 00:00:00 2001
From: Johnny McQuade <jfmcquade@hotmail.com>
Date: Tue, 24 Dec 2024 11:50:47 +0000
Subject: [PATCH 7/8] chore: use snake case for variants

---
 .../components/template/components/title/title.component.ts   | 2 +-
 src/theme/themes/plh_kids_kw/_overrides.scss                  | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/app/shared/components/template/components/title/title.component.ts b/src/app/shared/components/template/components/title/title.component.ts
index 956e528727..d88df268ee 100644
--- a/src/app/shared/components/template/components/title/title.component.ts
+++ b/src/app/shared/components/template/components/title/title.component.ts
@@ -13,7 +13,7 @@ interface ITitleParams {
   /** TEMPLATE PARAMETER: "style". */
   style: string | null;
   /** TEMPLATE PARAMETER: "variant". */
-  variant: "" | "header" | "section-banner" | "page-banner";
+  variant: "" | "header" | "section_banner" | "page_banner";
 }
 
 @Component({
diff --git a/src/theme/themes/plh_kids_kw/_overrides.scss b/src/theme/themes/plh_kids_kw/_overrides.scss
index 025c7b7942..413a6aa5eb 100644
--- a/src/theme/themes/plh_kids_kw/_overrides.scss
+++ b/src/theme/themes/plh_kids_kw/_overrides.scss
@@ -455,7 +455,7 @@ body[data-theme="plh_kids_kw"] {
       line-height: var(--line-height-text-large);
       color: var(--color-surface-black);
     }
-    .title-wrapper[data-variant~="section-banner"] {
+    .title-wrapper[data-variant~="section_banner"] {
       font-size: var(--font-size-text-large) !important;
       font-weight: var(--font-weight-medium) !important;
       background-color: #e7f2fd;
@@ -465,7 +465,7 @@ body[data-theme="plh_kids_kw"] {
         border: none;
       }
     }
-    .title-wrapper[data-variant~="page-banner"] h1 {
+    .title-wrapper[data-variant~="page_banner"] h1 {
       font-size: var(--font-size-text-extra-large) !important;
     }
   }

From a5f24f3b5ef86beb293eee959016c6cddee26b1a Mon Sep 17 00:00:00 2001
From: Johnny McQuade <jfmcquade@hotmail.com>
Date: Tue, 24 Dec 2024 12:00:45 +0000
Subject: [PATCH 8/8] feat: expose icon_secondary_asset for button

---
 .../template/components/button/button.component.html |  7 ++++++-
 .../template/components/button/button.component.ts   | 12 +++++++++++-
 2 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/src/app/shared/components/template/components/button/button.component.html b/src/app/shared/components/template/components/button/button.component.html
index efaeac915f..106d79e314 100644
--- a/src/app/shared/components/template/components/button/button.component.html
+++ b/src/app/shared/components/template/components/button/button.component.html
@@ -9,7 +9,12 @@
     [attr.data-variant]="params.variant"
     [attr.data-has-children]="_row.rows ? true : false"
   >
-    <ion-icon *ngIf="params.icon" slot="start" src="{{ params.icon | plhAsset }}"></ion-icon>
+    @if (params.icon) {
+      <ion-icon slot="start" src="{{ params.icon | plhAsset }}"></ion-icon>
+    }
+    @if (params.iconSecondary) {
+      <ion-icon slot="end" src="{{ params.iconSecondary | plhAsset }}"></ion-icon>
+    }
     <span
       *ngIf="_row.value"
       [class]="'left text ' + params.textAlign"
diff --git a/src/app/shared/components/template/components/button/button.component.ts b/src/app/shared/components/template/components/button/button.component.ts
index c13acb036d..9016790012 100644
--- a/src/app/shared/components/template/components/button/button.component.ts
+++ b/src/app/shared/components/template/components/button/button.component.ts
@@ -27,8 +27,13 @@ interface IButtonParams {
   textAlign: "left" | "centre" | "right";
   /** TEMPLATE PARAMETER: "button_align" */
   buttonAlign: "left" | "centre" | "right";
-  /** TEMPLATE PARAMETER: "icon". The path to an icon asset */
+  /** TEMPLATE PARAMETER: "icon". The path to an icon asset. This will be displayed in the 'start' slot (left for LTR languages) */
   icon: string;
+  /**
+   * TEMPLATE PARAMETER: "icon_secondary_asset". The path to a secondary icon asset,
+   * which will be displayed in the 'end' slot (right for LTR languages)
+   * */
+  iconSecondary: string;
   /** TEMPLATE PARAMETER: "image_asset". The path to an image asset */
   image: string;
 }
@@ -75,6 +80,11 @@ export class TmplButtonComponent extends TemplateBaseComponent implements OnInit
       "center"
     ) as any;
     this.params.icon = getStringParamFromTemplateRow(this._row, "icon", null);
+    this.params.iconSecondary = getStringParamFromTemplateRow(
+      this._row,
+      "icon_secondary_asset",
+      null
+    );
   }
 
   /** Determine if the button is inside a display group with the style "two_columns" */