@defra/interactive-map 0.0.30-alpha → 0.0.32-alpha

package/plugins/beta/datasets/src/components/Key/KeyGroupItem.jsx

@@ -0,0 +1,18 @@
+import { KeyItem } from './KeyItem.jsx'
+
+export const KeyGroupItem = ({ headingId, label, datasets, symbolRegistry, patternRegistry, mapStyle }) => {
+  return (
+    <section className='im-c-datasets-key__group' aria-labelledby={headingId}>
+      <h3 id={headingId} className='im-c-datasets-key__group-heading'>{label}</h3>
+      {datasets.map(dataset =>
+        <KeyItem
+          key={`${dataset.id}`}
+          registryDataset={dataset}
+          symbolRegistry={symbolRegistry}
+          patternRegistry={patternRegistry}
+          mapStyle={mapStyle}
+        />
+      )}
+    </section>
+  )
+}

package/plugins/beta/datasets/src/components/Key/KeyItem.jsx

@@ -0,0 +1,20 @@
+import { getValueForStyle } from '../../../../../../src/utils/getValueForStyle.js'
+import { KeySvg } from './KeySvg.jsx'
+
+export const KeyItem = ({ registryDataset, symbolRegistry, patternRegistry, mapStyle }) => {
+  return (
+    <dl className='im-c-datasets-key__item'>
+      <dt className='im-c-datasets-key__item-symbol'>
+        <KeySvg registryDataset={registryDataset} symbolRegistry={symbolRegistry} patternRegistry={patternRegistry} mapStyle={mapStyle} />
+      </dt>
+      <dd className='im-c-datasets-key__item-label'>
+        {registryDataset.label}
+        {registryDataset.symbolDescription && (
+          <span className='govuk-visually-hidden'>
+            ({getValueForStyle(registryDataset.symbolDescription, mapStyle.id)})
+          </span>
+        )}
+      </dd>
+    </dl>
+  )
+}

package/plugins/beta/datasets/src/components/Key/KeySvg.jsx

@@ -0,0 +1,22 @@
+import { KeySvgPattern } from './KeySvgPattern.jsx'
+import { KeySvgSymbol } from './KeySvgSymbol.jsx'
+import { KeySvgLine } from './KeySvgLine.jsx'
+import { KeySvgRect } from './KeySvgRect.jsx'
+
+export const KeySvg = ({ symbolRegistry, registryDataset, mapStyle, patternRegistry }) => {
+  const { hasSymbol, hasPattern, style } = registryDataset
+  const symbolDef = hasSymbol && symbolRegistry.getSymbolDef(style)
+  if (symbolDef) {
+    return <KeySvgSymbol mapStyle={mapStyle} registryDataset={registryDataset} symbolRegistry={symbolRegistry} symbolDef={symbolDef} />
+  }
+
+  if (hasPattern) {
+    return <KeySvgPattern mapStyle={mapStyle} registryDataset={registryDataset} patternRegistry={patternRegistry} />
+  }
+
+  if (style.keySymbolShape === 'line') {
+    return <KeySvgLine mapStyle={mapStyle} registryDataset={registryDataset} />
+  }
+
+  return <KeySvgRect mapStyle={mapStyle} registryDataset={registryDataset} />
+}

package/plugins/beta/datasets/src/components/Key/KeySvg.test.jsx

@@ -0,0 +1,87 @@
+import { render } from '@testing-library/react'
+import { KeySvg } from './KeySvg'
+
+import { symbolRegistry } from '../../../../../../src/services/symbolRegistry.js'
+import { patternRegistry } from '../../../../../../src/services/patternRegistry.js'
+
+const getSymbolDef = jest.spyOn(symbolRegistry, 'getSymbolDef')
+
+jest.mock('./KeySvgPattern.jsx', () => ({
+  KeySvgPattern: () => <svg data-testid='key-svg-pattern' />
+}))
+
+jest.mock('./KeySvgSymbol.jsx', () => ({
+  KeySvgSymbol: () => <svg data-testid='key-svg-symbol' />
+}))
+
+jest.mock('./KeySvgLine.jsx', () => ({
+  KeySvgLine: () => <svg data-testid='key-svg-line' />
+}))
+
+jest.mock('./KeySvgRect.jsx', () => ({
+  KeySvgRect: () => <svg data-testid='key-svg-rect' />
+}))
+
+const baseRegistryDataset = {
+  hasSymbol: false,
+  hasPattern: false,
+  style: {}
+}
+
+const baseProps = {
+  symbolRegistry,
+  patternRegistry,
+  mapStyle: { id: 'default' },
+  registryDataset: baseRegistryDataset
+}
+
+beforeEach(() => {
+  getSymbolDef.mockReturnValue(null)
+})
+
+describe('KeySvg', () => {
+  it('renders KeySvgSymbol when a symbolDef is resolved', () => {
+    getSymbolDef.mockReturnValue({ id: 'marker' })
+    const { getByTestId } = render(<KeySvg {...baseProps} registryDataset={{ ...baseRegistryDataset, hasSymbol: true }} />)
+    expect(getByTestId('key-svg-symbol')).toBeTruthy()
+  })
+
+  it('renders KeySvgPattern when hasPattern is true and no symbol', () => {
+    const { getByTestId } = render(<KeySvg {...baseProps} registryDataset={{ ...baseRegistryDataset, hasPattern: true }} />)
+    expect(getByTestId('key-svg-pattern')).toBeTruthy()
+  })
+
+  it('renders KeySvgLine when keySymbolShape is line and no symbol or pattern', () => {
+    const { getByTestId } = render(<KeySvg {...baseProps} registryDataset={{ ...baseRegistryDataset, style: { keySymbolShape: 'line' } }} />)
+    expect(getByTestId('key-svg-line')).toBeTruthy()
+  })
+
+  it('renders KeySvgRect as the default fallback', () => {
+    const { getByTestId } = render(<KeySvg {...baseProps} />)
+    expect(getByTestId('key-svg-rect')).toBeTruthy()
+  })
+
+  it('prefers symbol over pattern when both are present', () => {
+    getSymbolDef.mockReturnValue({ id: 'marker' })
+    const { getByTestId, queryByTestId } = render(<KeySvg {...baseProps} registryDataset={{ ...baseRegistryDataset, hasSymbol: true, hasPattern: true }} />)
+    expect(getByTestId('key-svg-symbol')).toBeTruthy()
+    expect(queryByTestId('key-svg-pattern')).toBeNull()
+  })
+
+  it('prefers pattern over line when both conditions are met', () => {
+    const { getByTestId, queryByTestId } = render(<KeySvg {...baseProps} registryDataset={{ ...baseRegistryDataset, hasPattern: true, style: { keySymbolShape: 'line' } }} />)
+    expect(getByTestId('key-svg-pattern')).toBeTruthy()
+    expect(queryByTestId('key-svg-line')).toBeNull()
+  })
+
+  it('renders KeySvgRect when keySymbolShape is not line and no symbol or pattern', () => {
+    const { getByTestId } = render(<KeySvg {...baseProps} registryDataset={{ ...baseRegistryDataset, style: { keySymbolShape: 'polygon' } }} />)
+    expect(getByTestId('key-svg-rect')).toBeTruthy()
+  })
+
+  it('does not render KeySvgSymbol when hasSymbol is true but getSymbolDef returns null', () => {
+    getSymbolDef.mockReturnValue(null)
+    const { getByTestId } = render(<KeySvg {...baseProps} registryDataset={{ ...baseRegistryDataset, hasSymbol: true }} />)
+    expect(getByTestId('key-svg-rect')).toBeTruthy()
+  })
+})

package/plugins/beta/datasets/src/components/Key/KeySvgLine.jsx

@@ -0,0 +1,19 @@
+import { svgProps, SVG_SIZE, SVG_CENTER } from './svgProperties.js'
+import { getValueForStyle } from '../../../../../../src/utils/getValueForStyle.js'
+
+export const KeySvgLine = ({ mapStyle, registryDataset }) => {
+  const { style } = registryDataset
+  return (
+    <svg {...svgProps}>
+      <line
+        x1={style.strokeWidth / 2}
+        y1={SVG_CENTER}
+        x2={SVG_SIZE - style.strokeWidth / 2}
+        y2={SVG_CENTER}
+        stroke={getValueForStyle(style.stroke, mapStyle.id)}
+        strokeWidth={style.strokeWidth}
+        strokeLinecap='round'
+      />
+    </svg>
+  )
+}

package/plugins/beta/datasets/src/components/Key/KeySvgLine.test.jsx

@@ -0,0 +1,71 @@
+import { render } from '@testing-library/react'
+import { KeySvgLine } from './KeySvgLine'
+
+import { getValueForStyle } from '../../../../../../src/utils/getValueForStyle'
+
+jest.mock('../../../../../../src/utils/getValueForStyle', () => ({
+  getValueForStyle: jest.fn((value) => value)
+}))
+
+const defaultProps = {
+  registryDataset: {
+    style: {
+      stroke: '#ff0000',
+      strokeWidth: 2
+    }
+  },
+  mapStyle: { id: 'default' }
+}
+
+beforeEach(() => {
+  getValueForStyle.mockImplementation((value) => value)
+})
+
+describe('KeySvgLine', () => {
+  it('renders an svg element', () => {
+    const { container } = render(<KeySvgLine {...defaultProps} />)
+    expect(container.querySelector('svg')).toBeTruthy()
+  })
+
+  it('renders a line element', () => {
+    const { container } = render(<KeySvgLine {...defaultProps} />)
+    expect(container.querySelector('line')).toBeTruthy()
+  })
+
+  it('applies the stroke color via getValueForStyle', () => {
+    render(<KeySvgLine {...defaultProps} />)
+    expect(getValueForStyle).toHaveBeenCalledWith('#ff0000', 'default')
+  })
+
+  it('sets stroke attribute on the line', () => {
+    const { container } = render(<KeySvgLine {...defaultProps} />)
+    const line = container.querySelector('line')
+    expect(line.getAttribute('stroke')).toBe('#ff0000')
+  })
+
+  it('sets strokeWidth attribute on the line', () => {
+    const { container } = render(<KeySvgLine {...defaultProps} />)
+    const line = container.querySelector('line')
+    expect(line.getAttribute('stroke-width')).toBe('2')
+  })
+
+  it('centres the line vertically', () => {
+    const { container } = render(<KeySvgLine {...defaultProps} />)
+    const line = container.querySelector('line')
+    expect(line.getAttribute('y1')).toBe('10')
+    expect(line.getAttribute('y2')).toBe('10')
+  })
+
+  it('insets the line horizontally by half the strokeWidth', () => {
+    const { container } = render(<KeySvgLine {...defaultProps} />)
+    const line = container.querySelector('line')
+    expect(line.getAttribute('x1')).toBe('1') // strokeWidth/2 = 1
+    expect(line.getAttribute('x2')).toBe('19') // 20 - 1
+  })
+
+  it('has round stroke linecap', () => {
+    const { container } = render(<KeySvgLine {...defaultProps} />)
+    const line = container.querySelector('line')
+    expect(line.getAttribute('stroke-linecap')).toBe('round')
+  })
+})

package/plugins/beta/datasets/src/components/{KeySvgPattern.jsx → Key/KeySvgPattern.jsx}

@@ -1,10 +1,9 @@
 import { svgProps } from './svgProperties.js'
 const PATTERN_INSET = 2
 
-export const KeySvgPattern = (props) => {
-  const { patternRegistry, mapStyle } = props
-
-  const paths = patternRegistry.getKeyPatternPaths(props, mapStyle.id)
+export const KeySvgPattern = ({ patternRegistry, registryDataset, mapStyle }) => {
+  const { style } = registryDataset
+  const paths = patternRegistry.getKeyPatternPaths(style, mapStyle.id)
   return (
     <svg {...svgProps}>
       <g dangerouslySetInnerHTML={{ __html: paths.border }} />

package/plugins/beta/datasets/src/components/Key/KeySvgPattern.test.jsx

@@ -0,0 +1,55 @@
+import { render } from '@testing-library/react'
+import { KeySvgPattern } from './KeySvgPattern'
+import { patternRegistry } from '../../../../../../src/services/patternRegistry.js'
+
+const getKeyPatternPaths = jest.spyOn(patternRegistry, 'getKeyPatternPaths')
+const defaultProps = {
+  registryDataset: {
+    style: {
+      fillPattern: 'dots'
+    }
+  },
+  patternRegistry,
+  mapStyle: { id: 'default' }
+}
+
+beforeEach(() => {
+  getKeyPatternPaths.mockReturnValue({ border: '<rect/>', content: '<path/>' })
+})
+
+describe('KeySvgPattern', () => {
+  it('renders an svg element', () => {
+    const { container } = render(<KeySvgPattern {...defaultProps} />)
+    expect(container.querySelector('svg')).toBeTruthy()
+  })
+
+  it('calls getKeyPatternPaths with props, the mapStyle id, and the patternRegistry', () => {
+    render(<KeySvgPattern {...defaultProps} />)
+    expect(getKeyPatternPaths).toHaveBeenCalledWith(defaultProps.registryDataset.style, 'default')
+  })
+
+  it('renders two g elements for border and content', () => {
+    const { container } = render(<KeySvgPattern {...defaultProps} />)
+    const groups = container.querySelectorAll('g')
+    expect(groups.length).toBe(2)
+  })
+
+  it('applies a translate transform to the content group', () => {
+    const { container } = render(<KeySvgPattern {...defaultProps} />)
+    const groups = container.querySelectorAll('g')
+    const contentGroup = groups[1]
+    expect(contentGroup.getAttribute('transform')).toMatch(/^translate\(/)
+  })
+
+  it('injects the border html into the first g element', () => {
+    getKeyPatternPaths.mockReturnValue({ border: '<circle id="border-el"/>', content: '' })
+    const { container } = render(<KeySvgPattern {...defaultProps} />)
+    expect(container.querySelector('#border-el')).toBeTruthy()
+  })
+
+  it('injects the content html into the second g element', () => {
+    getKeyPatternPaths.mockReturnValue({ border: '', content: '<circle id="content-el"/>' })
+    const { container } = render(<KeySvgPattern {...defaultProps} />)
+    expect(container.querySelector('#content-el')).toBeTruthy()
+  })
+})

package/plugins/beta/datasets/src/components/Key/KeySvgRect.jsx

@@ -0,0 +1,22 @@
+import { getValueForStyle } from '../../../../../../src/utils/getValueForStyle.js'
+import { svgProps, SVG_SIZE } from './svgProperties.js'
+
+export const KeySvgRect = ({ mapStyle, registryDataset }) => {
+  const { style } = registryDataset
+  return (
+    <svg {...svgProps}>
+      <rect
+        x={style.strokeWidth / 2}
+        y={style.strokeWidth / 2}
+        width={SVG_SIZE - style.strokeWidth}
+        height={SVG_SIZE - style.strokeWidth}
+        rx={style.strokeWidth}
+        ry={style.strokeWidth}
+        fill={getValueForStyle(style.fill, mapStyle.id)}
+        stroke={getValueForStyle(style.stroke, mapStyle.id)}
+        strokeWidth={style.strokeWidth}
+        strokeLinejoin='round'
+      />
+    </svg>
+  )
+}

package/plugins/beta/datasets/src/components/Key/KeySvgRect.test.jsx

@@ -0,0 +1,85 @@
+import { render } from '@testing-library/react'
+import { KeySvgRect } from './KeySvgRect'
+
+import { getValueForStyle } from '../../../../../../src/utils/getValueForStyle'
+
+jest.mock('../../../../../../src/utils/getValueForStyle', () => ({
+  getValueForStyle: jest.fn((value) => value)
+}))
+
+const defaultProps = {
+  registryDataset: {
+    style: {
+      fill: '#0000ff',
+      stroke: '#ff0000',
+      strokeWidth: 2
+    }
+  },
+  mapStyle: { id: 'default' }
+}
+
+beforeEach(() => {
+  getValueForStyle.mockImplementation((value) => value)
+})
+
+describe('KeySvgRect', () => {
+  it('renders an svg element', () => {
+    const { container } = render(<KeySvgRect {...defaultProps} />)
+    expect(container.querySelector('svg')).toBeTruthy()
+  })
+
+  it('renders a rect element', () => {
+    const { container } = render(<KeySvgRect {...defaultProps} />)
+    expect(container.querySelector('rect')).toBeTruthy()
+  })
+
+  it('resolves fill color via getValueForStyle', () => {
+    render(<KeySvgRect {...defaultProps} />)
+    expect(getValueForStyle).toHaveBeenCalledWith('#0000ff', 'default')
+  })
+
+  it('resolves stroke color via getValueForStyle', () => {
+    render(<KeySvgRect {...defaultProps} />)
+    expect(getValueForStyle).toHaveBeenCalledWith('#ff0000', 'default')
+  })
+
+  it('sets fill attribute on the rect', () => {
+    const { container } = render(<KeySvgRect {...defaultProps} />)
+    const rect = container.querySelector('rect')
+    expect(rect.getAttribute('fill')).toBe('#0000ff')
+  })
+
+  it('sets stroke attribute on the rect', () => {
+    const { container } = render(<KeySvgRect {...defaultProps} />)
+    const rect = container.querySelector('rect')
+    expect(rect.getAttribute('stroke')).toBe('#ff0000')
+  })
+
+  it('sets strokeWidth attribute on the rect', () => {
+    const { container } = render(<KeySvgRect {...defaultProps} />)
+    const rect = container.querySelector('rect')
+    expect(rect.getAttribute('stroke-width')).toBe('2')
+  })
+
+  it('insets the rect by half the strokeWidth', () => {
+    const { container } = render(<KeySvgRect {...defaultProps} />)
+    const rect = container.querySelector('rect')
+    expect(rect.getAttribute('x')).toBe('1') // strokeWidth / 2
+    expect(rect.getAttribute('y')).toBe('1')
+    expect(rect.getAttribute('width')).toBe('18') // SVG_SIZE - strokeWidth
+    expect(rect.getAttribute('height')).toBe('18')
+  })
+
+  it('uses strokeWidth as the rx and ry for rounded corners', () => {
+    const { container } = render(<KeySvgRect {...defaultProps} />)
+    const rect = container.querySelector('rect')
+    expect(rect.getAttribute('rx')).toBe('2')
+    expect(rect.getAttribute('ry')).toBe('2')
+  })
+
+  it('has round stroke linejoin', () => {
+    const { container } = render(<KeySvgRect {...defaultProps} />)
+    const rect = container.querySelector('rect')
+    expect(rect.getAttribute('stroke-linejoin')).toBe('round')
+  })
+})

package/plugins/beta/datasets/src/components/{KeySvgSymbol.jsx → Key/KeySvgSymbol.jsx}

@@ -1,13 +1,13 @@
-import { getSymbolStyleColors, getSymbolViewBox } from '../../../../../src/utils/symbolUtils.js'
+import { getSymbolStyleColors, getSymbolViewBox } from '../../../../../../src/utils/symbolUtils.js'
 import { svgSymbolProps } from './svgProperties.js'
 
-export const KeySvgSymbol = (props) => {
-  const { symbolRegistry, mapStyle, symbolDef } = props
+export const KeySvgSymbol = ({ symbolRegistry, registryDataset, mapStyle, symbolDef }) => {
+  const { style } = registryDataset
   const mapColorScheme = mapStyle?.appColorScheme ?? 'light'
   const keyMapStyle = { ...mapStyle, mapColorScheme }
 
-  const resolvedSvg = symbolRegistry.resolve(symbolDef, getSymbolStyleColors(props), keyMapStyle)
-  const viewBox = getSymbolViewBox(props, symbolDef)
+  const resolvedSvg = symbolRegistry.resolve(symbolDef, getSymbolStyleColors(style), keyMapStyle)
+  const viewBox = getSymbolViewBox(style, symbolDef)
   return (
     <svg {...svgSymbolProps} viewBox={viewBox}>
       <g dangerouslySetInnerHTML={{ __html: resolvedSvg }} />

package/plugins/beta/datasets/src/components/Key/KeySvgSymbol.test.jsx

@@ -0,0 +1,80 @@
+import { render } from '@testing-library/react'
+import { KeySvgSymbol } from './KeySvgSymbol'
+
+import { getSymbolStyleColors, getSymbolViewBox } from '../../../../../../src/utils/symbolUtils.js'
+
+jest.mock('../../../../../../src/utils/symbolUtils.js', () => ({
+  getSymbolStyleColors: jest.fn(() => ({ foreground: '#000', background: '#fff' })),
+  getSymbolViewBox: jest.fn(() => '0 0 38 38')
+}))
+
+const mockResolve = jest.fn(() => '<path d="M0 0"/>')
+
+const defaultProps = {
+  symbolDef: { id: 'marker' },
+  registryDataset: {
+    style: {
+      stroke: '#000000'
+    }
+  },
+  symbolRegistry: { resolve: mockResolve },
+  mapStyle: { id: 'default' }
+}
+
+beforeEach(() => {
+  mockResolve.mockClear()
+  mockResolve.mockReturnValue('<path d="M0 0"/>')
+  getSymbolStyleColors.mockReturnValue({ foreground: '#000', background: '#fff' })
+  getSymbolViewBox.mockReturnValue('0 0 38 38')
+})
+
+describe('KeySvgSymbol', () => {
+  it('renders an svg element', () => {
+    const { container } = render(<KeySvgSymbol {...defaultProps} />)
+    expect(container.querySelector('svg')).toBeTruthy()
+  })
+
+  it('calls symbolRegistry.resolve with the symbolDef, style colors, and mapStyle', () => {
+    render(<KeySvgSymbol {...defaultProps} />)
+    expect(mockResolve).toHaveBeenCalledWith(
+      defaultProps.symbolDef,
+      { foreground: '#000', background: '#fff' },
+      expect.objectContaining({ id: 'default' })
+    )
+  })
+
+  it('calls getSymbolStyleColors with the dataset props', () => {
+    render(<KeySvgSymbol {...defaultProps} />)
+    expect(getSymbolStyleColors).toHaveBeenCalledWith(defaultProps.registryDataset.style)
+  })
+
+  it('calls getSymbolViewBox with the dataset props and symbolDef', () => {
+    render(<KeySvgSymbol {...defaultProps} />)
+    expect(getSymbolViewBox).toHaveBeenCalledWith(defaultProps.registryDataset.style, defaultProps.symbolDef)
+  })
+
+  it('sets the viewBox from getSymbolViewBox', () => {
+    getSymbolViewBox.mockReturnValue('0 0 64 64')
+    const { container } = render(<KeySvgSymbol {...defaultProps} />)
+    expect(container.querySelector('svg').getAttribute('viewBox')).toBe('0 0 64 64')
+  })
+
+  it('renders the resolved svg html inside a g element', () => {
+    mockResolve.mockReturnValue('<circle id="sym-el"/>')
+    const { container } = render(<KeySvgSymbol {...defaultProps} />)
+    expect(container.querySelector('#sym-el')).toBeTruthy()
+  })
+
+  it('defaults mapColorScheme to light when appColorScheme is not set', () => {
+    render(<KeySvgSymbol {...defaultProps} />)
+    const callArg = mockResolve.mock.calls[0][2]
+    expect(callArg.mapColorScheme).toBe('light')
+  })
+
+  it('uses the mapStyle appColorScheme when provided', () => {
+    const props = { ...defaultProps, mapStyle: { id: 'dark', appColorScheme: 'dark' } }
+    render(<KeySvgSymbol {...props} />)
+    const callArg = mockResolve.mock.calls[0][2]
+    expect(callArg.mapColorScheme).toBe('dark')
+  })
+})

package/plugins/beta/datasets/src/components/Key/svgProperties.test.js

@@ -0,0 +1,61 @@
+import { SVG_SIZE, SVG_CENTER, svgProps, svgSymbolProps } from './svgProperties'
+
+describe('svgProperties constants', () => {
+  it('SVG_SIZE is 20', () => {
+    expect(SVG_SIZE).toBe(20)
+  })
+
+  it('SVG_CENTER is half of SVG_SIZE', () => {
+    expect(SVG_CENTER).toBe(SVG_SIZE / 2)
+  })
+})
+
+describe('svgProps', () => {
+  it('has the correct xmlns', () => {
+    expect(svgProps.xmlns).toBe('http://www.w3.org/2000/svg')
+  })
+
+  it('has width and height equal to SVG_SIZE', () => {
+    expect(svgProps.width).toBe(SVG_SIZE)
+    expect(svgProps.height).toBe(SVG_SIZE)
+  })
+
+  it('has viewBox covering the full SVG_SIZE', () => {
+    expect(svgProps.viewBox).toBe(`0 0 ${SVG_SIZE} ${SVG_SIZE}`)
+  })
+
+  it('has the correct className', () => {
+    expect(svgProps.className).toBe('am-c-datasets-key-symbol')
+  })
+
+  it('is aria-hidden', () => {
+    expect(svgProps['aria-hidden']).toBe('true')
+  })
+
+  it('is not focusable', () => {
+    expect(svgProps.focusable).toBe('false')
+  })
+})
+
+describe('svgSymbolProps', () => {
+  it('inherits xmlns from svgProps', () => {
+    expect(svgSymbolProps.xmlns).toBe(svgProps.xmlns)
+  })
+
+  it('has a larger width than svgProps', () => {
+    expect(svgSymbolProps.width).toBeGreaterThan(svgProps.width)
+  })
+
+  it('has a larger height than svgProps', () => {
+    expect(svgSymbolProps.height).toBeGreaterThan(svgProps.height)
+  })
+
+  it('width and height are equal', () => {
+    expect(svgSymbolProps.width).toBe(svgSymbolProps.height)
+  })
+
+  it('className includes the base class and a modifier', () => {
+    expect(svgSymbolProps.className).toContain('am-c-datasets-key-symbol')
+    expect(svgSymbolProps.className).toContain('--point')
+  })
+})

package/plugins/beta/datasets/src/{panels → components/LayersMenu}/Layers.module.scss

@@ -35,19 +35,19 @@
       margin-bottom: 0;
     }
   }
-}
 
-.im-c-datasets-layers__item-label {
-  width: 100%;
-  max-width: none;
-  align-items: start;
-  padding-top: 12px;
-  padding-bottom: 10px;
-  align-self: auto;
-  font-size: 1rem;
-  line-height: 1.2;
+  .im-c-datasets-layers__item-label {
+    width: 100%;
+    max-width: none;
+    align-items: start;
+    padding-top: 12px;
+    padding-bottom: 10px;
+    align-self: auto;
+    font-size: 1rem;
+    line-height: 1.2;
 
-  color: var(--foreground-color);
+    color: var(--foreground-color);
+  }
 }
 
 // GovUK style overide
@@ -79,3 +79,7 @@
 .im-c-datasets-layers-group:first-child .im-c-datasets-layers-group__legend {
   padding-top: 0;
 }
+
+.im-c-datasets-layers .govuk-checkboxes__input[aria-disabled="true"] + .govuk-checkboxes__label {
+  opacity: 0.5;
+}

package/plugins/beta/datasets/src/components/LayersMenu/LayersMenu.jsx

@@ -0,0 +1,33 @@
+import React from 'react'
+import { setDatasetVisibility } from '../../api/setDatasetVisibility.js'
+import { LayersMenuCheckbox } from './LayersMenuCheckbox.jsx'
+import { LayersMenuGroupWrapper } from './LayersMenuGroupWrapper.jsx'
+
+export const LayersMenu = ({ pluginState }) => {
+  const { menu = [] } = pluginState
+  const handleDatasetChange = (e) => {
+    const { value, checked } = e.target
+    setDatasetVisibility({ pluginState }, checked, { datasetId: value })
+  }
+
+  const hasGroups = menu.some(item => item.groupLabel)
+  const containerClass = `im-c-datasets-layers${hasGroups ? ' im-c-datasets-layers--has-groups' : ''}`
+  return (
+    <div className={containerClass}>
+      {// Each menuGroup
+        menu.map(menuGroup =>
+          <LayersMenuGroupWrapper key={menuGroup.id} menuGroup={menuGroup}>
+            {// Each menuGroupItem
+              menuGroup.items.map(menuGroupItem =>
+                <LayersMenuCheckbox
+                  key={menuGroupItem.id}
+                  menuGroupItem={menuGroupItem}
+                  onChange={handleDatasetChange}
+                />
+              )
+            }
+          </LayersMenuGroupWrapper>)
+      }
+    </div>
+  )
+}