@defra/interactive-map 0.0.42-alpha → 0.0.43-fmp-experimental

package/plugins/map-key/src/components/Key/KeySvg.jsx

@@ -2,6 +2,7 @@ import { KeySvgPattern } from './KeySvgPattern.jsx'
 import { KeySvgSymbol } from './KeySvgSymbol.jsx'
 import { KeySvgLine } from './KeySvgLine.jsx'
 import { KeySvgRect } from './KeySvgRect.jsx'
+import { KeySvgRamp } from './KeySvgRamp.jsx'
 import { symbolRegistry } from '../../registry/index.js'
 
 // Pure derivation of keyDefinition — computed directly during render (see KeyItem.jsx for why:
@@ -10,7 +11,10 @@ const getSymbolShape = (keyDefinition) => {
   if (!keyDefinition) {
     return { symbolShape: null, symbolDef: null }
   }
-  const { hasSymbol, hasPattern, style } = keyDefinition
+  const { hasSymbol, hasPattern, hasRampStyleKey, style } = keyDefinition
+  if (hasRampStyleKey) {
+    return { symbolShape: 'ramp', symbolDef: null }
+  }
   if (hasSymbol) {
     const symbolDef = symbolRegistry.getSymbolDef(style)
     return { symbolShape: symbolDef ? 'symbol' : 'rect', symbolDef }
@@ -35,6 +39,8 @@ export const KeySvg = ({ keyDefinition, mapStyle }) => {
     return <KeySvgPattern mapStyle={mapStyle} keyDefinition={keyDefinition} />
   } else if (symbolShape === 'line') {
     return <KeySvgLine mapStyle={mapStyle} keyDefinition={keyDefinition} />
+  } else if (symbolShape === 'ramp') {
+    return <KeySvgRamp mapStyle={mapStyle} keyDefinition={keyDefinition} />
   } else {
     return <KeySvgRect mapStyle={mapStyle} keyDefinition={keyDefinition} />
   }

package/plugins/map-key/src/components/Key/KeySvg.test.jsx

@@ -21,6 +21,10 @@ jest.mock('./KeySvgRect.jsx', () => ({
   KeySvgRect: () => <svg data-testid='key-svg-rect' />
 }))
 
+jest.mock('./KeySvgRamp.jsx', () => ({
+  KeySvgRamp: () => <svg data-testid='key-svg-ramp' />
+}))
+
 const baseKeyDefinition = {
   hasSymbol: false,
   hasPattern: false,
@@ -86,4 +90,9 @@ describe('KeySvg', () => {
     const { container } = render(<KeySvg {...baseProps} keyDefinition={null} />)
     expect(container.firstChild).toBeNull()
   })
+
+  it('renders KeySvgRamp when hasRampStyleKey is true', () => {
+    const { getByTestId } = render(<KeySvg {...baseProps} keyDefinition={{ ...baseKeyDefinition, hasRampStyleKey: true }} />)
+    expect(getByTestId('key-svg-ramp')).toBeTruthy()
+  })
 })

package/plugins/map-key/src/components/Key/KeySvgRamp.jsx

@@ -0,0 +1,13 @@
+import { getValueForStyle } from '../../../../../src/utils/getValueForStyle.js'
+
+export const KeySvgRamp = ({ mapStyle, keyDefinition }) => {
+  const { style } = keyDefinition
+  const fill = getValueForStyle(style.fill, mapStyle.id)
+  const stroke = getValueForStyle(style.fill, mapStyle.id)
+
+  return (
+    <svg viewBox='0 0 5 5' preserveAspectRatio='none' fill={fill} stroke={stroke} strokeWidth='1'>
+      <path d='M0 0h5v5H0z' />
+    </svg>
+  )
+}

package/plugins/map-key/src/components/Key/KeySvgRamp.test.jsx

@@ -0,0 +1,43 @@
+import { render } from '@testing-library/react'
+import { KeySvgRamp } from './KeySvgRamp'
+import { getValueForStyle } from '../../../../../src/utils/getValueForStyle.js'
+
+jest.mock('../../../../../src/utils/getValueForStyle.js', () => ({
+  getValueForStyle: jest.fn()
+}))
+
+const mapStyle = { id: 'outdoor' }
+const keyDefinition = { style: { fill: { outdoor: '#3d9', dark: '#1a5' } } }
+
+beforeEach(() => {
+  getValueForStyle.mockImplementation((value) =>
+    typeof value === 'object' ? value.outdoor : value
+  )
+})
+
+describe('KeySvgRamp', () => {
+  it('renders an svg element', () => {
+    const { container } = render(<KeySvgRamp mapStyle={mapStyle} keyDefinition={keyDefinition} />)
+    expect(container.querySelector('svg')).toBeTruthy()
+  })
+
+  it('passes the resolved fill to the svg', () => {
+    const { container } = render(<KeySvgRamp mapStyle={mapStyle} keyDefinition={keyDefinition} />)
+    expect(container.querySelector('svg').getAttribute('fill')).toBe('#3d9')
+  })
+
+  it('passes the resolved stroke to the svg', () => {
+    const { container } = render(<KeySvgRamp mapStyle={mapStyle} keyDefinition={keyDefinition} />)
+    expect(container.querySelector('svg').getAttribute('stroke')).toBe('#3d9')
+  })
+
+  it('uses preserveAspectRatio none', () => {
+    const { container } = render(<KeySvgRamp mapStyle={mapStyle} keyDefinition={keyDefinition} />)
+    expect(container.querySelector('svg').getAttribute('preserveAspectRatio')).toBe('none')
+  })
+
+  it('renders a path child', () => {
+    const { container } = render(<KeySvgRamp mapStyle={mapStyle} keyDefinition={keyDefinition} />)
+    expect(container.querySelector('path')).toBeTruthy()
+  })
+})

package/plugins/map-key/src/components/Key/svgProperties.js

@@ -7,7 +7,7 @@ export const svgProps = {
   width: SVG_SIZE,
   height: SVG_SIZE,
   viewBox: `0 0 ${SVG_SIZE} ${SVG_SIZE}`,
-  className: 'am-c-map-key-symbol',
+  className: 'im-c-map-key-symbol',
   'aria-hidden': 'true',
   focusable: 'false'
 }
@@ -16,5 +16,5 @@ export const svgSymbolProps = {
   ...svgProps,
   width: SVG_SYMBOL_SIZE,
   height: SVG_SYMBOL_SIZE,
-  className: 'am-c-map-key-symbol am-c-map-key-symbol--point'
+  className: 'im-c-map-key-symbol im-c-map-key-symbol--point'
 }

package/plugins/map-key/src/components/Key/svgProperties.test.js

@@ -25,7 +25,7 @@ describe('svgProps', () => {
   })
 
   it('has the correct className', () => {
-    expect(svgProps.className).toBe('am-c-map-key-symbol')
+    expect(svgProps.className).toBe('im-c-map-key-symbol')
   })
 
   it('is aria-hidden', () => {
@@ -55,7 +55,7 @@ describe('svgSymbolProps', () => {
   })
 
   it('className includes the base class and a modifier', () => {
-    expect(svgSymbolProps.className).toContain('am-c-map-key-symbol')
+    expect(svgSymbolProps.className).toContain('im-c-map-key-symbol')
     expect(svgSymbolProps.className).toContain('--point')
   })
 })