Merge pull request #1125 from isaacphysics/improvement/ada-accordion-colour-coding

Improve Ada accordion colour styling

Author: jacbn

src/app/services/userViewingContext.ts

@@ -422,24 +422,36 @@ export function notRelevantMessage(userContext: UseUserContextReturnType): strin
 }
 
 export function audienceStyle(audienceString: string): string {
-    switch (audienceString) {
-        case stageLabelMap.a_level:
-            return "stage-label-alevel";
-        case stageLabelMap.gcse:
-            return "stage-label-gcse";
-        case stageLabelMap.scotland_national_5:
-            return "stage-label-national-5";
-        case stageLabelMap.scotland_higher:
-            return "stage-label-higher";
-        case stageLabelMap.scotland_advanced_higher:
-            return "stage-label-advanced-higher";
-        case stageLabelMap.core:
-            return "stage-label-core";
-        case stageLabelMap.advanced:
-            return "stage-label-advanced";
-        default:
-            return "stage-label-all";
-    }
+    const audienceStages = audienceString.split('\n').flatMap(line => line.split(', '));
+
+    // Convert to css labels
+    const stageLabels = audienceStages.map(
+        stage => {switch (stage) {
+            case stageLabelMap.core:
+            case stageLabelMap.gcse:
+            case stageLabelMap.scotland_national_5:
+                return "stage-label-core";
+
+            case stageLabelMap.advanced:
+            case stageLabelMap.a_level:
+            case stageLabelMap.scotland_advanced_higher:
+                return "stage-label-advanced";
+
+            case stageLabelMap.scotland_higher:
+                // Scotland higher has a unique styling
+                return "stage-label-higher";
+
+            default:
+                return "stage-label-all";
+        }}
+    );
+    const uniqueLabels = audienceStages.length === 1
+        ? new Set(stageLabels)
+        // If multiple stages are present group into "advanced" and "core"
+        : new Set(stageLabels.map(v => v === "stage-label-higher" ? "stage-label-advanced" : v));
+
+    // If only one group exists use that colour, otherwise, use the mixed colour
+    return uniqueLabels.size === 1 ? uniqueLabels.values().next().value : "stage-label-all";
 }
 
 export function stringifyAudience(audience: ContentDTO["audience"], userContext: UseUserContextReturnType, intendedAudience: boolean): string {

src/scss/cs/accordions.scss

@@ -1,33 +1,17 @@
 @import "../common/accordions";
 
-.stage-label-gcse, .stage-label-alevel, .stage-label-national-5, .stage-label-higher, .stage-label-advanced-higher, .stage-label-core, .stage-label-advanced, .stage-label-all {
+.stage-label-higher, .stage-label-core, .stage-label-advanced, .stage-label-all {
   color: black;
   font-weight: 600;
   text-wrap: none;
   font-size: 1rem !important;
   line-height: 1.15rem;
 }
 
-.stage-label-gcse {
-  background-color: $gcse-colour;
-}
-
-.stage-label-alevel {
-  background-color: $a-level-colour;
-}
-
-.stage-label-national-5 {
-  background-color: $national-5-colour;
-}
-
 .stage-label-higher {
   background-color: $higher-colour;
 }
 
-.stage-label-advanced-higher {
-  background-color: $adv-higher-colour;
-}
-
 .stage-label-core {
   background-color: $core-colour;
 }