Colour accordions according to stage groups

If a single audience stage exists that stages colour is used. If
multiple stages exist then the stages are grouped into "core" and
"advanced". If all of the stages are a single group then that group
colouring is used, otherwise the standard colour mix (yellow) is used.

Author: skyepurchase

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 {