Theme bump (#165)

dannyleech · web-flow · commit 23e80d6afd2c · 2026-03-12T16:26:47.000Z
* Theme bump
diff --git a/assets/css/docusaurus.css 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
@@ -103,7 +103,7 @@ function MapInner ({ mapStyles }) {
       })
     })
   }, [])
-  return <div id='demo-map-button'></div>
+  return <div id='demo-map-button' className='app-no-prose'></div>
 }
 
 export default function DemoMapButton () {
diff --git 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: '...'; } }
       `}</style>
 
-      <div id='demo-map-inline'>
+      <div id='demo-map-inline' className='app-no-prose'>
         <div className='map-loading-overlay' aria-hidden='true'>
           Loading<span className='map-loading-dots' />
         </div>
diff --git 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 <!-- no-sidebar -->
 
 For installation and setup instructions, see the [Getting started](./getting-started.md) guide.
 
diff --git 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/examples.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
@@ -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
diff --git a/docs/index.md b/docs/index.md
diff --git a/docs/index.mdx b/docs/index.mdx
@@ -0,0 +1,42 @@
+import Link from '@docusaurus/Link';
+
+<div className="app-section app-section--features">
+  <div className="govuk-width-container">
+    <div className="govuk-grid-row">
+      <div className="govuk-grid-column-one-third">
+        <h2>Inclusive and accessible</h2>
+        <p>Designed for everyone, including people using touch, keyboard navigation and assistive technologies. Compliant with WCAG standards for public-facing services.</p>
+      </div>
+      <div className="govuk-grid-column-one-third">
+        <h2>Consistent with GOV.UK</h2>
+        <p>Built with the GOV.UK Design System, providing a predictable mapping interface and ensuring a consistent experience across all government services.</p>
+      </div>
+      <div className="govuk-grid-column-one-third">
+        <h2>Open source and flexible</h2>
+        <p>Open source and free from proprietary dependencies. Configurable and extensible, with plugin support and compatibility with multiple mapping libraries.</p>
+      </div>
+    </div>
+  </div>
+</div>
+<div className="app-section">
+  <div className="govuk-width-container">
+    <div className="govuk-grid-row">
+      <div className="govuk-grid-column-two-thirds">
+        <h2>Documentation</h2>
+        <h3><Link to="/getting-started" className="govuk-link">Getting Started</Link></h3>
+        <p>How to install and configure the component. Covers setup, initialisation options, and integration with common build tools.</p>
+        <h3><Link to="/examples" className="govuk-link">Examples</Link></h3>
+        <p>Live interactive demos showing the component in action, including inline maps, button-triggered maps, and various configuration options.</p>
+        <h3><Link to="/api" className="govuk-link">API Reference</Link></h3>
+        <p>Full reference for all configuration options, events, methods, and plugin interfaces exposed by the component.</p>
+        <h3><Link to="/plugins" className="govuk-link">Plugins</Link></h3>
+        <p>Extend the component with built-in plugins for search, map styles, drawing tools, and more. Includes a guide to building your own.</p>
+        <h3><Link to="/architecture" className="govuk-link">Architecture</Link></h3>
+        <p>Technical overview of how the component is structured, including the plugin system, rendering pipeline, and integration patterns.</p>
+        <hr className="govuk-section-break govuk-section-break--visible govuk-section-break--xl" />
+        <h2>Support</h2>
+        <p>For issues and feature requests, visit our <a href="https://github.com/DEFRA/interactive-map" className="govuk-link">GitHub repository</a>.</p>
+      </div>
+    </div>
+  </div>
+</div>
diff --git 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
@@ -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
diff --git 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
@@ -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);
   }

Original file line number	Diff line number	Diff line change
`@@ -103,7 +103,7 @@ function MapInner ({ mapStyles }) {`
`103`	`103`	`})`
`104`	`104`	`})`
`105`	`105`	`}, [])`
`106`		`- return <div id='demo-map-button'></div>`
	`106`	`+ return <div id='demo-map-button' className='app-no-prose'></div>`
`107`	`107`	`}`
`108`	`108`
`109`	`109`	`export default function DemoMapButton () {`