diff --git a/assets/css/docusaurus.css b/assets/css/docusaurus.css new file mode 100644 index 00000000..6a17f42e --- /dev/null +++ b/assets/css/docusaurus.css @@ -0,0 +1,25 @@ +/* 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/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 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/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.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..29888e28 --- /dev/null +++ b/docs/index.mdx @@ -0,0 +1,42 @@ +import Link from '@docusaurus/Link'; + +
+
+
+
+

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.

+

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.

+

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/docs/plugins.md b/docs/plugins.md index 04e2e671..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. @@ -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,15 +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. -## Coming Soon - -The following plugins are planned for future releases. - -### Geometry Actions - -Split and merge polygons. - -## 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: @@ -80,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()`: @@ -94,7 +86,7 @@ interactiveMap.on('highlight:removed', ({ id }) => { }) ``` -## Plugin Methods +## Plugin methods Plugins can expose methods that you call on the plugin instance: @@ -108,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 2243a2e4..5c079e58 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', { @@ -66,18 +74,17 @@ const config = { }, navigation: [ - { text: 'Getting Started', href: '/getting-started' }, - { text: 'Demo', href: '/demo', sidebar: 'auto' }, { - text: 'Architecture', - href: '/architecture', + text: 'Getting Started', + href: '/getting-started', sidebar: [ - { text: 'Overview', href: '/architecture' }, - { text: 'Diagrams', href: 'architecture-diagrams' }, - { text: 'Diagram Viewer', href: 'diagrams-viewer' }, + { 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: 'GOV.UK Prototype', href: '/govuk-prototype' }, + { text: 'Examples', href: '/examples', sidebar: 'auto' }, { text: 'API', href: '/api', @@ -87,31 +94,24 @@ const config = { text: 'Plugins', href: '/plugins', 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: 'Alpha Plugins', - href: '/plugins#alpha-plugins', - 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: 'Overview', href: '/plugins' }, + // { text: 'Building a Plugin', href: '/building-a-plugin' }, + { 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: 'Diagrams', href: 'architecture-diagrams' }, + { text: 'Diagram Viewer', href: 'diagrams-viewer' }, + ], + } ], phaseBanner: { @@ -127,7 +127,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..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.12-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.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.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 0db2228a..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.12-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", 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); }