[FEATURE] Kuwait Theme: Radio group styling

src/app/shared/components/template/components/radio-button-grid/radio-button-grid.component.html

@@ -1,9 +1,15 @@
-<div class="radio-grid" [ngStyle]="gridStyle" [attr.data-variant]="parameter_list.variant">
+<div
+  class="radio-buttons"
+  [ngStyle]="gridStyle"
+  [attr.data-variant]="parameter_list.variant"
+  [attr.data-style]="parameter_list.style"
+>
   @for (item of radioItems; track $index) {
     <div
       class="item"
       (click)="handleItemClick(item)"
       [attr.data-selected]="item.name === _row.value"
+      [style.--min-item-width]="parameter_list.item_width"
     >
       @if (item.image) {
         <div class="item-image-container">
@@ -17,7 +23,9 @@
         </div>
       }
       @if (item.text) {
-        <div class="item-text">{{ item.text }}</div>
+        <div class="item-text">
+          <p>{{ item.text }}</p>
+        </div>
       }
     </div>
   }

src/app/shared/components/template/components/radio-button-grid/radio-button-grid.component.scss

@@ -1,35 +1,60 @@
-// @use "/src/theme/mixins";
-
+// Vars for primary style
+$background: var(--radio-group-background, white);
 $background-selected: var(
   --radio-group-background-selected,
   var(--gradient-primary-light-vertical)
 );
-$border: var(--border-standard);
-$border-radius: var(--ion-border-radius-standard);
+$border: var(--radio-group-border, var(--border-standard));
+$border-selected: var(--radio-group-border-selected, var(--border-standard));
+
+// Vars for secondary style
+$background-secondary: var(--radio-group-background-secondary, white);
+$background-selected-secondary: var(
+  --radio-group-background-selected-secondary,
+  var(--gradient-secondary-light-vertical)
+);
+$border-secondary: var(--radio-group-border-secondary, var(--border-standard));
+$border-selected-secondary: var(--radio-group-border-selected-secondary, var(--border-standard));
+
+$border-radius: var(--radio-group-border-radius, var(--ion-border-radius-standard));
+$box-shadow: var(--radio-group-box-shadow, var(--ion-default-box-shadow));
 $text-size: var(--radio-button-font-size, 1.25rem);
 $text-color: var(--radio-button-font-color, var(--ion-color-primary));
 
-.radio-grid {
+.radio-buttons {
   display: grid;
-}
-.item {
-  border: $border;
-  border-radius: 15px;
-  text-align: center;
-  padding: 8px;
-  background: white;
-  cursor: pointer;
-  box-shadow: var(--ion-default-box-shadow);
-}
-.item[data-selected="true"] {
-  background: $background-selected;
-}
-.item-text {
-  font-size: $text-size;
-  color: $text-color;
+  .item {
+    border: $border;
+    border-radius: $border-radius;
+    text-align: center;
+    padding: 8px;
+    background: $background;
+    cursor: pointer;
+    box-shadow: $box-shadow;
+    &[data-selected="true"] {
+      background: $background-selected;
+      border: $border-selected;
+      transition: 0.2s linear;
+    }
+    .item-text {
+      font-size: $text-size;
+      color: $text-color;
+    }
+  }
+
+  &[data-style="secondary"] {
+    .item {
+      border: $border-secondary;
+      background: $background-secondary;
+      &[data-selected="true"] {
+        background: $background-selected-secondary;
+        border: $border-selected-secondary;
+      }
+    }
+  }
 }
 
-.radio-grid[data-variant="circle-icon"] {
+.radio-buttons[data-variant="circle-icon"] {
   display: grid;
 
   .item {
@@ -77,3 +102,54 @@ $text-color: var(--radio-button-font-color, var(--ion-color-primary));
     }
   }
 }
+
+.radio-buttons[data-variant="flex"] {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: stretch;
+  width: 100%;
+  .item {
+    flex: 1 1 auto;
+    width: 25%;
+    min-width: var(--min-item-width, 10px);
+    background-color: $background;
+    box-shadow: $box-shadow;
+    border: $border;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
+    gap: 12px;
+    padding: 12px 8px;
+
+    &[data-selected="true"] {
+      background-color: $background-selected;
+      border: $border-selected;
+    }
+    .item-image-container {
+      height: var(--icon-size-largest);
+      img {
+        height: 100%;
+      }
+    }
+    .item-text {
+      p {
+        font-size: var(--font-size-text-small);
+        text-align: center;
+        margin: 0px;
+      }
+    }
+  }
+
+  &[data-style="secondary"] {
+    .item {
+      border: $border-secondary;
+      background: $background-secondary;
+      &[data-selected="true"] {
+        background: $background-selected-secondary;
+        border: $border-selected-secondary;
+      }
+    }
+  }
+}

src/app/shared/components/template/components/radio-button-grid/radio-button-grid.component.ts

@@ -26,7 +26,9 @@ interface IRadioButtonGridParams {
    **/
   grid_gap: string;
   /* TEMPLATE PARAMETER: "variant". The style variant of the button_grid */
-  variant?: "default" | "circle-icon";
+  variant?: "default" | "circle-icon" | "flex";
+  /* TEMPLATE PARAMETER: "style". The "secondary" style sets the colour of the buttons */
+  style?: "secondary" | undefined;
 }
 
 @Component({
@@ -73,6 +75,11 @@ export class TmplRadioButtonGridComponent
     this.parameter_list = this._row.parameter_list || ({} as any);
     this.radioItems = getAnswerListParamFromTemplateRow(this._row, "answer_list", []);
     this.gridStyle = this.generateGridStyle();
+    this.parameter_list.style = getStringParamFromTemplateRow(
+      this._row,
+      "style",
+      undefined
+    ) as IRadioButtonGridParams["style"];
     this.parameter_list.variant = getStringParamFromTemplateRow(this._row, "variant", "default")
       .split(",")
       .join(" ") as IRadioButtonGridParams["variant"];

src/theme/themes/early_family_math.scss

@@ -47,7 +47,9 @@
       // slider-ui-color: #096e90,
       accordion-background-highlight: var(--ion-color-primary-300),
       tour-next-button-background: var(--ion-color-secondary),
+      radio-button-font-color: var(--ion-color-primary-900),
       radio-group-background-selected: var(--ion-color-primary-300),
+      radio-group-background-selected-secondary: var(--ion-color-secondary-200),
       // radio-button-font-size: 1.25rem,
       // radio-button-font-color: var(--ion-color-primary),
       ion-item-background: var(--ion-color-gray-light),

src/theme/themes/pfr.scss

@@ -49,6 +49,7 @@
       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),
+      radio-group-background-selected-secondary: var(--ion-color-secondary-300),
       // radio-button-font-size: 1.25rem,
       // radio-button-font-color: var(--ion-color-primary),
       ion-item-background: var(--ion-color-gray-light),

src/theme/themes/plh_facilitator_mx/_index.scss

@@ -65,6 +65,7 @@
       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),
+      radio-group-background-selected-secondary: var(--ion-color-secondary-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),

src/theme/themes/plh_kids_kw/_index.scss

@@ -34,10 +34,15 @@
       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,
+      icon-size-small: 16px,
+      icon-size-medium: 24px,
+      icon-size-large: 32px,
+      icon-size-extra-large: 40px,
+      icon-size-largest: 48px,
+
+      paragraph-margin-small: 4px,
+      paragraph-margin-medium: 8px,
+      paragraph-margin-large: 12px,
 
       buttons-min-height: 60px,
       buttons-short-height: 48px,
@@ -52,10 +57,16 @@
       buttons-full-height: 100%,
 
       // BORDERS
+      ion-border-radius-small: 8px,
+      ion-border-radius-standard: 12px,
+      ion-border-radius-secondary: 20px,
+      ion-border-radius-rounded: 50px,
+
       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),
+      // COMPONENT VARIABLES
       button-background-primary: var(--ion-color-primary-500),
       button-background-secondary: var(--ion-color-secondary),
       button-background-option: var(--ion-color-primary-800),
@@ -75,20 +86,18 @@
       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),
-      icon-size-small: 16px,
-      icon-size-medium: 24px,
-      icon-size-large: 32px,
-      icon-size-extra-large: 40px,
-      icon-size-largest: 48px,
-
-      paragraph-margin-small: 4px,
-      paragraph-margin-medium: 8px,
-      paragraph-margin-large: 12px,
-
+      radio-group-border-radius: var(--ion-border-radius-small),
+      radio-group-box-shadow: none,
+      radio-group-border: 1px solid var(--ion-color-gray-100),
+      radio-group-border-selected: 1px solid var(--ion-color-primary-400),
+      radio-group-border-secondary: 2px solid transparent,
+      radio-group-border-selected-secondary: 2px solid var(--color-accent-orange-70),
+      radio-group-background-secondary: var(--color-accent-orange-90),
+      radio-group-background-selected: var(--ion-color-primary-300),
+      radio-group-background-selected-secondary: var(--color-accent-orange-80),
       // SURFACE COLOUR PALETTE
       color-surface-white: #ffffff,
       color-surface-white-variant: #f9f9fa,

src/theme/themes/plh_kids_kw/_overrides.scss

@@ -1073,17 +1073,6 @@ body[data-theme="plh_kids_kw"] {
       }
     }
   }
-  // Radio Button Grid
-  .radio-grid {
-    .item {
-      border: 1px solid var(--ion-color-gray-100);
-      box-shadow: none !important;
-      border-radius: var(--ion-border-radius-small);
-      .item-image-container {
-        padding: 16px;
-      }
-    }
-  }
 
   // Completion Modal
   plh-completion-modal {

src/theme/themes/plh_kids_tz.scss

@@ -48,6 +48,7 @@
       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),
+      radio-group-background-selected-secondary: var(--ion-color-secondary-300),
       // radio-button-font-size: 1.25rem,
       // radio-button-font-color: var(--ion-color-primary),
       ion-item-background: var(--ion-color-gray-light),

src/theme/themes/professional.scss

@@ -48,6 +48,7 @@
       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),
+      radio-group-background-selected-secondary: var(--ion-color-secondary-300),
       // radio-button-font-size: 1.25rem,
       // radio-button-font-color: var(--ion-color-primary),
       ion-item-background: var(--ion-color-gray-light),