COVP-169 Add ability to show/hide headline numers for different areas.

src/common/utils/utils.js

@@ -5,6 +5,7 @@ import type { ParsedParams } from "./utils.types";
 import type { RGB } from "components/MapTable/MapTable.types";
 import { generateUrl } from "hooks/useApi";
 import Path from "assets/paths.json";
+import type IsIncludedTypeProps from 'components/Card/Card.types';
 
 
 export const sort = (a, b) => {
@@ -192,6 +193,40 @@ export const getParamValueFor = (params: Array<ParsedParams>, keyName: string, d
 };  // getParamValueFor
 
 
+export const isAreaIncluded = ({ params, locationAware={} }: IsIncludedTypeProps): boolean => {
+    if ( !Object.keys(locationAware).length )
+        return true;
+
+    const
+        areaType = getParamValueFor(
+            params,
+            "areaType",
+            "overview"
+        ).toLowerCase(),
+        areaName = getParamValueFor(
+            params,
+            "areaName",
+            "United Kingdom"
+        ).toLowerCase(),
+        includedAreaType = locationAware?.included?.areaType ?? [],
+        includedAreaName = locationAware?.included?.areaName ?? [],
+        excludedAreaType = locationAware?.excluded?.areaType ?? [],
+        excludedAreaName = locationAware?.excluded?.areaName ?? [],
+        hasExclusion = excludedAreaType.length > 0 && !(excludedAreaName.length > 0),
+        isExcluded = (
+            excludedAreaType.map(value => value.toLowerCase()).indexOf(areaType) > -1 ||
+            excludedAreaName.map(value => value.toLowerCase()).indexOf(areaName) > -1
+        ),
+        isIncluded = (
+            includedAreaType.map(value => value.toLowerCase()).indexOf(areaType) > -1 ||
+            includedAreaName.map(value => value.toLowerCase()).indexOf(areaName) > -1
+        );
+
+    return !hasExclusion ? isIncluded : !isExcluded
+
+};  // isAreaIncluded
+
+
 export const firstObjWithMax = ( arr: Array<{[string|number]: [string|number|null]}>, key: ([string|number]) => [string|number|null] ) => {
 
     const maxValue = max(arr, key);

src/components/Card/Card.js

@@ -3,7 +3,7 @@
 import React, { useState, useEffect, lazy, Suspense } from 'react';
 import { Link } from "react-router-dom";
 
-import { fieldToStructure, getParamValueFor, heading2id } from "common/utils";
+import { fieldToStructure, heading2id, isAreaIncluded } from "common/utils";
 import usePrevious from "hooks/usePrevious";
 import TabLinkContainer from "components/TabLink";
 import { Radio } from "components/GovUk";
@@ -27,7 +27,6 @@ import {
     ShareRow
 } from './Card.styles';
 
-import type { IsIncludedTypeProps, Props } from './Card.types';
 import type { ComponentType } from 'react';
 
 import DownloadIcon from "assets/icon-download.svg";
@@ -152,41 +151,6 @@ const NoTabCard: ComponentType<*> = ({ cardType, ...props }) => {
 };  // NoTabCards
 
 
-const isIncluded = ({ params, locationAware={} }: IsIncludedTypeProps): boolean => {
-
-    if ( !Object.keys(locationAware).length )
-        return true;
-
-    const
-        areaType = getParamValueFor(
-            params,
-            "areaType",
-            "overview"
-        ).toLowerCase(),
-        areaName = getParamValueFor(
-            params,
-            "areaName",
-            "United Kingdom"
-        ).toLowerCase(),
-        includedAreaType = locationAware?.included?.areaType ?? [],
-        includedAreaName = locationAware?.included?.areaName ?? [],
-        excludedAreaType = locationAware?.excluded?.areaType ?? [],
-        excludedAreaName = locationAware?.excluded?.areaName ?? [],
-        hasExclusion = excludedAreaType.length > 0 && !(excludedAreaName.length > 0),
-        isExcluded = (
-            excludedAreaType.map(value => value.toLowerCase()).indexOf(areaType) > -1 ||
-            excludedAreaName.map(value => value.toLowerCase()).indexOf(areaName) > -1
-        ),
-        isIncluded = (
-            includedAreaType.map(value => value.toLowerCase()).indexOf(areaType) > -1 ||
-            includedAreaName.map(value => value.toLowerCase()).indexOf(areaName) > -1
-        );
-
-    return !hasExclusion ? isIncluded : !isExcluded
-
-};  // isIncluded
-
-
 const CardContent = ({ tabs: singleOptionTabs=null, cardType, download=[], params, options=null,
                          heading, fullWidth, abstract=null, ...props }) => {
 
@@ -284,7 +248,7 @@ const CardContent = ({ tabs: singleOptionTabs=null, cardType, download=[], param
         ...customProps?.[cardType] ?? {}
     };
 
-    if ( !isIncluded(cardProps) )
+    if ( !isAreaIncluded(cardProps) )
         return null;
 
     return <BrowserHistory>

src/components/HeadlineNumbers/HeadlineNumbers.js

@@ -2,6 +2,8 @@
 
 import React from "react";
 
+import { getParamValueFor, isAreaIncluded } from "common/utils";
+
 import type { Props } from "./HeadlineNumbers.types";
 import ValueBox from "components/ValueBox";
 
@@ -12,18 +14,28 @@ import type { ComponentType } from "react";
 
 const HeadlineNumbers: ComponentType<Props> = ({ params, headlineNumbers=[] }) => {
 
+    const getValueBox = (item, index) => {
+        return <>
+            {
+                isAreaIncluded({params, ...item})
+                    ? <ValueBox params={ params }
+                                key={ `headline-number-${ index }` }
+                                heading={ item.caption }
+                                { ...item }/>
+                    : null
+            }
+        </>
+    }
+
+    console.log("headline numbers:", headlineNumbers)
+
     return <Container aria-label={ "Headline numbers" }
                       aria-describedby={ 'headline-nums-desc' }>
         <span id={ 'headline-nums-desc' } className={ "govuk-visually-hidden" }>
             Latest available data
         </span>
         {
-            headlineNumbers?.map((item, index) =>
-                <ValueBox params={ params }
-                          key={ `headline-number-${ index }` }
-                          heading={ item.caption }
-                          { ...item }/>
-            ) ?? null
+            headlineNumbers?.map((item, index) => getValueBox(item, index)) ?? null
         }
     </Container>