From 76bcc1097b3b1b3d38b13bf5d27adc0c19200f4e Mon Sep 17 00:00:00 2001 From: Dan Leech Date: Thu, 12 Mar 2026 13:08:09 +0000 Subject: [PATCH 1/4] Theme bump --- assets/css/docusaurus.css | 24 ++++++++++++++++++++ demo/DemoMapButton.js | 2 +- demo/DemoMapInline.js | 2 +- docs/api.md | 2 +- docs/{demo.mdx => examples.mdx} | 2 +- docs/index.md | 19 ---------------- docs/index.mdx | 40 +++++++++++++++++++++++++++++++++ docs/plugins.md | 12 ++-------- docusaurus.config.cjs | 38 ++++++++++++++++++------------- package-lock.json | 8 +++---- package.json | 2 +- plugins/search/src/search.scss | 13 ++++++++--- 12 files changed, 108 insertions(+), 56 deletions(-) create mode 100644 assets/css/docusaurus.css rename docs/{demo.mdx => examples.mdx} (99%) delete mode 100644 docs/index.md create mode 100644 docs/index.mdx diff --git a/assets/css/docusaurus.css b/assets/css/docusaurus.css new file mode 100644 index 00000000..2e9ed35e --- /dev/null +++ b/assets/css/docusaurus.css @@ -0,0 +1,24 @@ +/* Custom styles for the Interactive Map docs site */ + +.app-section { + padding: 40px 0; +} + +.govuk-template__body.app-homepage .govuk-template__body-inner { + background-color: #f4f8fb; +} + +.app-section { + background-color: #ffffff; +} + +.app-section--features { + background-color: #f4f8fb; + border-bottom: 1px solid #8eb8dc; +} + +.app-prose-scope .app-section--features p { + @media (min-width: 40.0625em) { + margin-bottom: 0 !important; + } +} diff --git a/demo/DemoMapButton.js b/demo/DemoMapButton.js index 83b9923f..283e79a3 100644 --- a/demo/DemoMapButton.js +++ b/demo/DemoMapButton.js @@ -103,7 +103,7 @@ function MapInner ({ mapStyles }) { }) }) }, []) - return
+ return
} export default function DemoMapButton () { diff --git a/demo/DemoMapInline.js b/demo/DemoMapInline.js index 9d7810d2..92ebf1b3 100644 --- a/demo/DemoMapInline.js +++ b/demo/DemoMapInline.js @@ -113,7 +113,7 @@ function MapInner ({ mapStyles }) { @media (prefers-reduced-motion: reduce) { .map-loading-dots::after { animation: none; content: '...'; } } `} -
+
diff --git a/docs/api.md b/docs/api.md index 51728722..f90c626e 100644 --- a/docs/api.md +++ b/docs/api.md @@ -6,7 +6,7 @@ The `InteractiveMap` object represents an instance of an InteractiveMap on your You create an instance of a InteractiveMap by specifying a `container` and `options` in the `constructor`. An InteractiveMap is then initialized on the page and returns an instance of an InteractiveMap object. -## Getting started +## Getting started For installation and setup instructions, see the [Getting started](./getting-started.md) guide. diff --git a/docs/demo.mdx b/docs/examples.mdx similarity index 99% rename from docs/demo.mdx rename to docs/examples.mdx index ff8ef2d7..c8816fae 100644 --- a/docs/demo.mdx +++ b/docs/examples.mdx @@ -1,7 +1,7 @@ import DemoMapInline from '../demo/DemoMapInline.js' import DemoMapButton from '../demo/DemoMapButton.js' -# Demo +# Examples See [Getting started](getting-started) for installation and full configuration options. diff --git a/docs/index.md b/docs/index.md deleted file mode 100644 index adcb46a3..00000000 --- a/docs/index.md +++ /dev/null @@ -1,19 +0,0 @@ -## What's Inside - -- **[Getting Started](getting-started)** - Installation and basic usage -- **[API Reference](api)** - Complete API documentation -- **[Plugins](plugins)** - Extend functionality with plugins -- **[Architecture](architecture)** - Learn about the design and structure -- **[GOV.UK Prototype](govuk-prototype)** - Use with GOV.UK Prototype Kit - -## Features - -- βœ… Accessible and keyboard navigable -- πŸ—ΊοΈ Multiple map provider support (MapLibre, ESRI) -- πŸ”Œ Extensible plugin system -- 🎨 Customizable styling and behaviors -- πŸ“± Responsive design - -## Support - -For issues and feature requests, visit our [GitHub repository](https://github.com/DEFRA/interactive-map). diff --git a/docs/index.mdx b/docs/index.mdx new file mode 100644 index 00000000..fd58c03f --- /dev/null +++ b/docs/index.mdx @@ -0,0 +1,40 @@ +
+
+
+
+

Inclusive and accessible

+

Designed for everyone, including people using touch, keyboard navigation and assistive technologies. Compliant with WCAG standards for public-facing services.

+
+
+

Consistent with GOV.UK

+

Built with the GOV.UK Design System, providing a predictable mapping interface and ensuring a consistent experience across all government services.

+
+
+

Open source and flexible

+

Open source and free from proprietary dependencies. Configurable and extensible, with plugin support and compatibility with multiple mapping libraries.

+
+
+
+
+
+
+
+
+

Documentation

+

Getting Started

+

How to install and configure the component. Covers setup, initialisation options, and integration with common build tools.

+

Examples

+

Live interactive demos showing the component in action, including inline maps, button-triggered maps, and various configuration options.

+

GOV.UK Prototype

+

Guidance for using the component inside the GOV.UK Prototype Kit, including pre-built macros and page templates.

+

API Reference

+

Full reference for all configuration options, events, methods, and plugin interfaces exposed by the component.

+

Plugins

+

Extend the component with built-in plugins for search, map styles, drawing tools, and more. Includes a guide to building your own.

+
+

Support

+

For issues and feature requests, visit our GitHub repository.

+
+
+
+
diff --git a/docs/plugins.md b/docs/plugins.md index 04e2e671..9f2cc927 100644 --- a/docs/plugins.md +++ b/docs/plugins.md @@ -24,7 +24,7 @@ Scale bar display plugin that shows the current map scale. Location search plugin with autocomplete functionality. Include custom datasets to search. -## Alpha Plugins +## Coming soon The following plugins are in early development. APIs and features may change. @@ -34,7 +34,7 @@ Add datasets to your map, configure the display, layer toggling and render a key ### Draw for MapLibre -Draw lines and polygons using the MapLibre map provider. +Draw lines, polygons and place points using the MapLibre map provider. Includes geometry actions such as split and merge. ### Draw for ESRI SDK @@ -48,14 +48,6 @@ Add a regular shaped frame to the map and control its position. Use to generate Geolocation plugin that allows users to centre the map on their current location. -## Coming Soon - -The following plugins are planned for future releases. - -### Geometry Actions - -Split and merge polygons. - ## Using Plugins Plugins are registered via the `plugins` option when creating an InteractiveMap. Plugins typically export a factory function that accepts configuration options: diff --git a/docusaurus.config.cjs b/docusaurus.config.cjs index 2243a2e4..a018c07f 100644 --- a/docusaurus.config.cjs +++ b/docusaurus.config.cjs @@ -41,6 +41,14 @@ const config = { ], plugins: [ + function customCssPlugin() { + return { + name: 'custom-css', + getClientModules() { + return [require.resolve('./assets/css/docusaurus.css')]; + }, + }; + }, [ '@docusaurus/plugin-content-docs', { @@ -67,16 +75,16 @@ const config = { navigation: [ { text: 'Getting Started', href: '/getting-started' }, - { text: 'Demo', href: '/demo', sidebar: 'auto' }, - { - text: 'Architecture', - href: '/architecture', - sidebar: [ - { text: 'Overview', href: '/architecture' }, - { text: 'Diagrams', href: 'architecture-diagrams' }, - { text: 'Diagram Viewer', href: 'diagrams-viewer' }, - ], - }, + { text: 'Examples', href: '/examples', sidebar: 'auto' }, + // { + // text: 'Architecture', + // href: '/architecture', + // sidebar: [ + // { text: 'Overview', href: '/architecture' }, + // { text: 'Diagrams', href: 'architecture-diagrams' }, + // { text: 'Diagram Viewer', href: 'diagrams-viewer' }, + // ], + // }, { text: 'GOV.UK Prototype', href: '/govuk-prototype' }, { text: 'API', @@ -87,8 +95,8 @@ const config = { text: 'Plugins', href: '/plugins', sidebar: [ - { text: 'Overview', href: '/plugins' }, - { text: 'Building a Plugin', href: '/building-a-plugin' }, + // { text: 'Overview', href: '/plugins' }, + // { text: 'Building a Plugin', href: '/building-a-plugin' }, { text: 'Available Plugins', href: '/plugins#available-plugins', @@ -100,8 +108,8 @@ const config = { ], }, { - text: 'Alpha Plugins', - href: '/plugins#alpha-plugins', + text: 'Coming soon', + href: '/plugins#coming-soon', items: [ { text: 'Datasets', href: '/plugins#datasets' }, { text: 'Draw for MapLibre', href: '/plugins#draw-for-maplibre' }, @@ -127,7 +135,7 @@ const config = { homepage: { getStartedHref: '/getting-started', - description: 'A lightweight, accessible map component for public-facing government services. Open source, multi-engine, and extendable through plugins.', +description: 'A lightweight, accessible map component for public-facing government services. Open source, works with different mapping libraries, and extendable through plugins.', }, }, }, diff --git a/package-lock.json b/package-lock.json index 27b24eec..5c7a7c92 100644 --- a/package-lock.json +++ b/package-lock.json @@ -34,7 +34,7 @@ "@babel/plugin-transform-runtime": "^7.29.0", "@babel/preset-env": "^7.28.0", "@babel/preset-react": "^7.27.1", - "@defra/docusaurus-theme-govuk": "^0.0.12-alpha", + "@defra/docusaurus-theme-govuk": "^0.0.14-alpha", "@docusaurus/core": "^3.9.2", "@docusaurus/module-type-aliases": "^3.9.2", "@docusaurus/plugin-content-docs": "^3.9.2", @@ -3212,9 +3212,9 @@ } }, "node_modules/@defra/docusaurus-theme-govuk": { - "version": "0.0.12-alpha", - "resolved": "https://registry.npmjs.org/@defra/docusaurus-theme-govuk/-/docusaurus-theme-govuk-0.0.12-alpha.tgz", - "integrity": "sha512-ZSBLFy7d4HSUGZ/FdvYi/9x5s4eTl2US3/eOhdl+hEbQk+mP4S49EX7D28PH4IcYaPX46Y5gTPwiOtspPiw9hQ==", + "version": "0.0.14-alpha", + "resolved": "https://registry.npmjs.org/@defra/docusaurus-theme-govuk/-/docusaurus-theme-govuk-0.0.14-alpha.tgz", + "integrity": "sha512-e/PjHkeDmK0K1B0WR6lGrn+QehRlI94X2g5iXCNvO3LCXnPRsRDkhDPlb02QFg2Hwdt34j7NN6jTOz1ggXrmTA==", "dev": true, "license": "MIT", "dependencies": { diff --git a/package.json b/package.json index 0db2228a..3aef24ad 100755 --- a/package.json +++ b/package.json @@ -127,7 +127,7 @@ "@babel/plugin-transform-runtime": "^7.29.0", "@babel/preset-env": "^7.28.0", "@babel/preset-react": "^7.27.1", - "@defra/docusaurus-theme-govuk": "^0.0.12-alpha", + "@defra/docusaurus-theme-govuk": "^0.0.14-alpha", "@docusaurus/core": "^3.9.2", "@docusaurus/module-type-aliases": "^3.9.2", "@docusaurus/plugin-content-docs": "^3.9.2", diff --git a/plugins/search/src/search.scss b/plugins/search/src/search.scss index f63949ae..3818e0ef 100755 --- a/plugins/search/src/search.scss +++ b/plugins/search/src/search.scss @@ -50,14 +50,21 @@ } } -.im-c-search__input { +// Input reset (extra specificity to reset govuk) +.im-o-app .im-c-search__input { width: 100%; - border: 0; - padding: var(--divider-gap) calc(var(--divider-gap) + 2px); color: var(--foreground-color); background-color: transparent; + font-size: 1rem; + border: 0; + padding: var(--divider-gap) calc(var(--divider-gap) + 2px); outline: 0; + &:focus { + outline: 3px solid transparent; + box-shadow: none; + } + &::placeholder { color: var(--foreground-color); } From 0ab3cdfabdf1314cee715224c82f0c0c3ad81b3f Mon Sep 17 00:00:00 2001 From: Dan Leech Date: Thu, 12 Mar 2026 14:17:09 +0000 Subject: [PATCH 2/4] Architecture reinstated and prototype kit moved to getting started --- docs/getting-started.md | 4 +--- docs/govuk-prototype.md | 23 ----------------------- docs/index.mdx | 14 ++++++++------ docusaurus.config.cjs | 30 +++++++++++++++++++----------- 4 files changed, 28 insertions(+), 43 deletions(-) delete mode 100644 docs/govuk-prototype.md diff --git a/docs/getting-started.md b/docs/getting-started.md index 397ed981..6d7b4447 100644 --- a/docs/getting-started.md +++ b/docs/getting-started.md @@ -111,6 +111,4 @@ Each plugin distributes its own CSS. Import or copy only the CSS for the plugins Following installation the InteractiveMap plugin will be added to your prototype. You can now create pages with a map, and configure for specific use cases. -See [Install and use plugins](https://prototype-kit.service.gov.uk/docs/install-and-use-plugins). - -See [Configuring InteractiveMap in a GOVUK Prototype](./govuk-prototype.md). +See [GOV.UK Prototype Kit - Install and use plugins](https://prototype-kit.service.gov.uk/docs/install-and-use-plugins). diff --git a/docs/govuk-prototype.md b/docs/govuk-prototype.md deleted file mode 100644 index cf4351a4..00000000 --- a/docs/govuk-prototype.md +++ /dev/null @@ -1,23 +0,0 @@ -# GOV.UK Prototype Kit - -This guide explains how to use the Interactive Map component in a GOV.UK Prototype Kit project. - -## Installation - -Install the package in your prototype kit project: - -```shell -npm install @defra/interactive-map -``` - -The InteractiveMap plugin will be automatically added to your prototype. - -## Usage - -For detailed usage instructions, see the [GOV.UK Prototype Kit documentation](https://prototype-kit.service.gov.uk/docs/install-and-use-plugins). - -## Next Steps - -- [Getting Started](./getting-started.md) - Learn the basics -- [API Reference](./api.md) - Explore the full API -- [Plugins](./plugins.md) - Extend functionality diff --git a/docs/index.mdx b/docs/index.mdx index fd58c03f..29888e28 100644 --- a/docs/index.mdx +++ b/docs/index.mdx @@ -1,3 +1,5 @@ +import Link from '@docusaurus/Link'; +
@@ -21,16 +23,16 @@

Documentation

-

Getting Started

+

Getting Started

How to install and configure the component. Covers setup, initialisation options, and integration with common build tools.

-

Examples

+

Examples

Live interactive demos showing the component in action, including inline maps, button-triggered maps, and various configuration options.

-

GOV.UK Prototype

-

Guidance for using the component inside the GOV.UK Prototype Kit, including pre-built macros and page templates.

-

API Reference

+

API Reference

Full reference for all configuration options, events, methods, and plugin interfaces exposed by the component.

-

Plugins

+

Plugins

Extend the component with built-in plugins for search, map styles, drawing tools, and more. Includes a guide to building your own.

+

Architecture

+

Technical overview of how the component is structured, including the plugin system, rendering pipeline, and integration patterns.

Support

For issues and feature requests, visit our GitHub repository.

diff --git a/docusaurus.config.cjs b/docusaurus.config.cjs index a018c07f..b795e3a7 100644 --- a/docusaurus.config.cjs +++ b/docusaurus.config.cjs @@ -74,18 +74,17 @@ const config = { }, navigation: [ - { text: 'Getting Started', href: '/getting-started' }, + { + text: 'Getting Started', + href: '/getting-started', + sidebar: [ + { text: 'Installation', href: '/getting-started#installation' }, + { text: 'Basic usage', href: '/getting-started#basic-usage' }, + { text: 'Using plugins', href: '/getting-started#using-plugins' }, + { text: 'GOV.UK Prototype kit', href: '/getting-started#govuk-prototype-kit-plugin' } + ], + }, { text: 'Examples', href: '/examples', sidebar: 'auto' }, - // { - // text: 'Architecture', - // href: '/architecture', - // sidebar: [ - // { text: 'Overview', href: '/architecture' }, - // { text: 'Diagrams', href: 'architecture-diagrams' }, - // { text: 'Diagram Viewer', href: 'diagrams-viewer' }, - // ], - // }, - { text: 'GOV.UK Prototype', href: '/govuk-prototype' }, { text: 'API', href: '/api', @@ -120,6 +119,15 @@ const config = { }, ], }, + { + text: 'Architecture', + href: '/architecture', + sidebar: [ + { text: 'Overview', href: '/architecture' }, + { text: 'Diagrams', href: 'architecture-diagrams' }, + { text: 'Diagram Viewer', href: 'diagrams-viewer' }, + ], + } ], phaseBanner: { From dc18fd758a5c798a17151c536df8a99a5b68bde2 Mon Sep 17 00:00:00 2001 From: Dan Leech Date: Thu, 12 Mar 2026 14:18:31 +0000 Subject: [PATCH 3/4] Wrapping fix --- docs/architecture.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/docs/architecture.md b/docs/architecture.md index 78d50ece..4dcb9254 100644 --- a/docs/architecture.md +++ b/docs/architecture.md @@ -7,7 +7,9 @@ At its core, it provides: * A plugin system for extending functionality * An abstraction layer over multiple mapping engines -The system is designed so that **the core controls rendering and layout**, while **plugins declaratively contribute behaviour and UI.** --- +The system is designed so that **the core controls rendering and layout**, while **plugins declaratively contribute behaviour and UI.** + +--- ## High-level Structure From a016a8f8da06ce108a518a1a5eb515e94eb81e15 Mon Sep 17 00:00:00 2001 From: Dan Leech Date: Thu, 12 Mar 2026 16:23:26 +0000 Subject: [PATCH 4/4] Theme bump --- assets/css/docusaurus.css | 1 + docs/plugins.md | 10 +++++----- docusaurus.config.cjs | 28 ++++++---------------------- package-lock.json | 8 ++++---- package.json | 2 +- 5 files changed, 17 insertions(+), 32 deletions(-) diff --git a/assets/css/docusaurus.css b/assets/css/docusaurus.css index 2e9ed35e..6a17f42e 100644 --- a/assets/css/docusaurus.css +++ b/assets/css/docusaurus.css @@ -22,3 +22,4 @@ margin-bottom: 0 !important; } } + diff --git a/docs/plugins.md b/docs/plugins.md index 9f2cc927..0a570624 100644 --- a/docs/plugins.md +++ b/docs/plugins.md @@ -4,7 +4,7 @@ Plugins extend the InteractiveMap with additional functionality. This page lists For guidance on building your own plugins, see [Building a Plugin](./building-a-plugin.md). -## Available Plugins +## Available plugins The following plugins are available for use with InteractiveMap. @@ -48,7 +48,7 @@ Add a regular shaped frame to the map and control its position. Use to generate Geolocation plugin that allows users to centre the map on their current location. -## Using Plugins +## Using plugins Plugins are registered via the `plugins` option when creating an InteractiveMap. Plugins typically export a factory function that accepts configuration options: @@ -72,7 +72,7 @@ The factory function returns a [PluginDescriptor](./plugins/plugin-descriptor.md - **load** - Function that returns a [PluginManifest](./plugins/plugin-manifest.md) - **...options** - Configuration passed to the factory, available as [pluginConfig](./plugins/plugin-context.md#pluginconfig) -## Plugin Events +## Plugin events Plugins can emit events that you can listen to using `interactiveMap.on()`: @@ -86,7 +86,7 @@ interactiveMap.on('highlight:removed', ({ id }) => { }) ``` -## Plugin Methods +## Plugin methods Plugins can expose methods that you call on the plugin instance: @@ -100,7 +100,7 @@ interactiveMap.on('map:ready', () => { See individual plugin documentation for available events and methods. -## Further Reading +## Further reading - [Building a Plugin](./building-a-plugin.md) - Guide to creating custom plugins - [PluginDescriptor](./plugins/plugin-descriptor.md) - Plugin registration reference diff --git a/docusaurus.config.cjs b/docusaurus.config.cjs index b795e3a7..5c079e58 100644 --- a/docusaurus.config.cjs +++ b/docusaurus.config.cjs @@ -96,34 +96,18 @@ const config = { sidebar: [ // { text: 'Overview', href: '/plugins' }, // { text: 'Building a Plugin', href: '/building-a-plugin' }, - { - text: 'Available Plugins', - href: '/plugins#available-plugins', - items: [ - { text: 'Interact', href: '/plugins#interact' }, - { text: 'Map Styles', href: '/plugins#map-styles' }, - { text: 'Scale Bar', href: '/plugins#scale-bar' }, - { text: 'Search', href: '/plugins#search' }, - ], - }, - { - text: 'Coming soon', - href: '/plugins#coming-soon', - items: [ - { text: 'Datasets', href: '/plugins#datasets' }, - { text: 'Draw for MapLibre', href: '/plugins#draw-for-maplibre' }, - { text: 'Draw for ESRI SDK', href: '/plugins#draw-for-esri-sdk' }, - { text: 'Frame', href: '/plugins#frame' }, - { text: 'Use Location', href: '/plugins#use-location' }, - ], - }, + { text: 'Available Plugins', href: '/plugins#available-plugins' }, + { text: 'Coming soon', href: '/plugins#coming-soon' }, + { text: 'Using plugins', href: '/plugins#using-plugins' }, + { text: 'Plugin events', href: '/plugins#plugin-events' }, + { text: 'Plugin methods', href: '/plugins#plugin-methods' }, + { text: 'Further reading', href: '/plugins#further-reading' }, ], }, { text: 'Architecture', href: '/architecture', sidebar: [ - { text: 'Overview', href: '/architecture' }, { text: 'Diagrams', href: 'architecture-diagrams' }, { text: 'Diagram Viewer', href: 'diagrams-viewer' }, ], diff --git a/package-lock.json b/package-lock.json index 5c7a7c92..f1873da4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -34,7 +34,7 @@ "@babel/plugin-transform-runtime": "^7.29.0", "@babel/preset-env": "^7.28.0", "@babel/preset-react": "^7.27.1", - "@defra/docusaurus-theme-govuk": "^0.0.14-alpha", + "@defra/docusaurus-theme-govuk": "^0.0.15-alpha", "@docusaurus/core": "^3.9.2", "@docusaurus/module-type-aliases": "^3.9.2", "@docusaurus/plugin-content-docs": "^3.9.2", @@ -3212,9 +3212,9 @@ } }, "node_modules/@defra/docusaurus-theme-govuk": { - "version": "0.0.14-alpha", - "resolved": "https://registry.npmjs.org/@defra/docusaurus-theme-govuk/-/docusaurus-theme-govuk-0.0.14-alpha.tgz", - "integrity": "sha512-e/PjHkeDmK0K1B0WR6lGrn+QehRlI94X2g5iXCNvO3LCXnPRsRDkhDPlb02QFg2Hwdt34j7NN6jTOz1ggXrmTA==", + "version": "0.0.15-alpha", + "resolved": "https://registry.npmjs.org/@defra/docusaurus-theme-govuk/-/docusaurus-theme-govuk-0.0.15-alpha.tgz", + "integrity": "sha512-dhfIlMKf/SaUhoFZQvJmmvS42MqRTeXCdzCrxZg83ChDJ+SMIt/wna/xLn9u+Imnn4KXuzbSlrkZE+U5rPRy5A==", "dev": true, "license": "MIT", "dependencies": { diff --git a/package.json b/package.json index 3aef24ad..279e34d3 100755 --- a/package.json +++ b/package.json @@ -127,7 +127,7 @@ "@babel/plugin-transform-runtime": "^7.29.0", "@babel/preset-env": "^7.28.0", "@babel/preset-react": "^7.27.1", - "@defra/docusaurus-theme-govuk": "^0.0.14-alpha", + "@defra/docusaurus-theme-govuk": "^0.0.15-alpha", "@docusaurus/core": "^3.9.2", "@docusaurus/module-type-aliases": "^3.9.2", "@docusaurus/plugin-content-docs": "^3.9.2",