- {status.toLowerCase()}
+
+ {status == 'Green' ? t('map.no-alert') : t('map.alert', { level: status.toLowerCase() })}
@@ -118,7 +124,7 @@ export default function HealthAlertControl() {
const [selectedFeatureId, setSelectedFeatureId] = useQueryState(mapQueryKeys.featureId, parseAsString)
return (
-
+
{
diff --git a/src/app/components/ui/ukhsa/Map/shared/controls/KeyControl.tsx b/src/app/components/ui/ukhsa/Map/shared/controls/KeyControl.tsx
new file mode 100644
index 000000000..a5dccf1c6
--- /dev/null
+++ b/src/app/components/ui/ukhsa/Map/shared/controls/KeyControl.tsx
@@ -0,0 +1,71 @@
+'use client'
+
+import clsx from 'clsx'
+import { ControlPosition } from 'leaflet'
+import { KeyboardEvent, useState } from 'react'
+import Control from 'react-leaflet-custom-control'
+
+import { HealthAlertStatus } from '@/api/models/Alerts'
+import { useTranslation } from '@/app/i18n/client'
+import { getTailwindBackgroundFromColour, getTextColourCssFromColour } from '@/app/utils/weather-health-alert.utils'
+
+interface KeyControlProps {
+ position: ControlPosition
+ keyItems: HealthAlertStatus[]
+}
+
+export function KeyControl({ position, keyItems }: KeyControlProps) {
+ const { t } = useTranslation('weatherHealthAlerts')
+ const [showKey, setShowKey] = useState(true)
+
+ function clickHandler() {
+ return {
+ onClick: () => setShowKey(!showKey),
+ onKeyDown: (event: KeyboardEvent) => {
+ console.log(event.key)
+ },
+ }
+ }
+
+ const renderKeyButton = () => (
+
+ )
+
+ const renderCloseButton = () => (
+
+ )
+
+ const renderKey = (keyItems: HealthAlertStatus[]) => {
+ return (
+
+
+
Key
+ {renderCloseButton()}
+
+
+ {keyItems.map((colour, index) => {
+ return (
+
+
+ {colour == 'Green' ? t('map.no-alert') : t('map.alert', { level: colour.toLowerCase() })}
+
+
+ )
+ })}
+
+
+
+
+
+ )
+}
diff --git a/src/app/utils/weather-health-alert.utils.spec.ts b/src/app/utils/weather-health-alert.utils.spec.ts
index 1691edb02..432e19284 100644
--- a/src/app/utils/weather-health-alert.utils.spec.ts
+++ b/src/app/utils/weather-health-alert.utils.spec.ts
@@ -3,6 +3,8 @@ import {
getCssVariableFromColour,
getHoverCssVariableFromColour,
getTagVariantFromStatus,
+ getTailwindBackgroundFromColour,
+ getTextColourCssFromColour,
} from './weather-health-alert.utils'
describe('getTagVariantFromStatus', () => {
@@ -60,6 +62,24 @@ describe('getHoverCssVariableFromColour', () => {
})
describe('getActiveCssVariableFromColour', () => {
+ test('Returns the correct CSS background colour for Green', () => {
+ expect(getTailwindBackgroundFromColour('Green')).toBe('bg-green')
+ })
+
+ test('Returns the correct CSS background colour for Amber', () => {
+ expect(getTailwindBackgroundFromColour('Amber')).toBe('bg-orange')
+ })
+
+ test('Returns the correct CSS background colour for Yellow', () => {
+ expect(getTailwindBackgroundFromColour('Yellow')).toBe('bg-custard')
+ })
+
+ test('Returns the correct CSS background colour for Red', () => {
+ expect(getTailwindBackgroundFromColour('Red')).toBe('bg-red')
+ })
+})
+
+describe('getTailwindBackgroundFromColour', () => {
test('Returns the correct active CSS variable for Green', () => {
expect(getActiveCssVariableFromColour('Green')).toBe('var(--colour-green-darkest)')
})
@@ -76,3 +96,13 @@ describe('getActiveCssVariableFromColour', () => {
expect(getActiveCssVariableFromColour('Red')).toBe('var(--colour-red-darkest)')
})
})
+
+describe('getTextColourCssFromColour', () => {
+ test('Returns the correct CSS property', () => {
+ expect(getTextColourCssFromColour('Yellow')).toBe('text-black')
+ })
+
+ test.each([['Green'], ['Red'], ['Orange']])('Returns the correct CSS property when the input is %s', (colour) => {
+ expect(getTextColourCssFromColour(colour)).toBe('text-white')
+ })
+})
diff --git a/src/app/utils/weather-health-alert.utils.ts b/src/app/utils/weather-health-alert.utils.ts
index e0f34fe51..b2064cc66 100644
--- a/src/app/utils/weather-health-alert.utils.ts
+++ b/src/app/utils/weather-health-alert.utils.ts
@@ -39,6 +39,13 @@ export enum ActiveColourVariableMap {
Red = 'var(--colour-red-darkest)',
}
+export enum ColourBackgroundMap {
+ Green = 'bg-green',
+ Amber = 'bg-orange',
+ Yellow = 'bg-custard',
+ Red = 'bg-red',
+}
+
export function getCssVariableFromColour(color: keyof typeof ColourVariableMap) {
return ColourVariableMap[color]
}
@@ -50,3 +57,15 @@ export function getHoverCssVariableFromColour(color: keyof typeof HoverColourVar
export function getActiveCssVariableFromColour(color: keyof typeof ActiveColourVariableMap) {
return `${ActiveColourVariableMap[color]}`
}
+
+export function getTailwindBackgroundFromColour(color: keyof typeof ColourBackgroundMap) {
+ return ColourBackgroundMap[color]
+}
+
+export function getTextColourCssFromColour(colour: string) {
+ if (colour == 'Yellow') {
+ return 'text-black'
+ } else {
+ return 'text-white'
+ }
+}
diff --git a/tsconfig.json b/tsconfig.json
index f0d84371b..7bf3ef235 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -16,7 +16,8 @@
"incremental": true,
"baseUrl": ".",
"paths": {
- "@/*": ["./src/*"]
+ "@/*": ["./src/*"],
+ "#/*": ["./public/*"]
},
"types": ["jest", "node", "@testing-library/jest-dom", "@types/gtag.js"],
"plugins": [