Examples updated

assets/css/docusaurus.css

@@ -2,16 +2,13 @@
 
 .app-section {
   padding: 40px 0;
+  background-color: #ffffff;
 }
 
 .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;
@@ -45,16 +42,6 @@
   }
 }
 
-/* Black */
-/* .govuk-template--rebranded .govuk-service-navigation:not(.govuk-service-navigation--inverse) .govuk-service-navigation__list__link,
-.govuk-template--rebranded .govuk-service-navigation:not(.govuk-service-navigation--inverse) .govuk-service-navigation__toggle {
-  color: #0b0c0c !important;
-}
-
-.govuk-template--rebranded .govuk-service-navigation:not(.govuk-service-navigation--inverse) .govuk-service-navigation__list__item--active {
-  border-color: #0b0c0c !important;
-} */
-
 /* Color 100% */
 .govuk-template--rebranded .app-masthead .govuk-button--inverse,
 .govuk-template--rebranded .app-masthead .govuk-button--inverse:visited,
@@ -76,29 +63,66 @@
   box-shadow: 0 2px 0 #0b5c3e;
 }
 
-/* Background colour 4% tint */
-/* .govuk-template--rebranded .app-homepage .app-section.app-section--features,
-.govuk-template--rebranded .govuk-template__body.app-homepage .govuk-template__body-inner,
-.govuk-template--rebranded .govuk-service-navigation,
-.govuk-template--rebranded .govuk-footer {
-  background-color: #f5faf7 !important;
-} */
-
-/* Border colour 100% */
-/* .govuk-template--rebranded .govuk-footer {
-  border-color: #008531 !important;
-} */
-
-/* Border colour 30% tint */
-/* .govuk-template--rebranded .app-homepage .app-section.app-section--features,
-.govuk-template--rebranded .govuk-service-navigation {
-  border-color: #b3dac1 !important;
-} */
-
 /* Border colour 50% tint */
 .govuk-template--rebranded .app-homepage .govuk-service-navigation--inverse .govuk-width-container {
   border-color: #66B683 !important;
 }
 
+/* Example apps */
+.app-example {
+  margin-bottom: 20px;
+}
+
+/* Example index cards */
+.app-example-card {
+  position: relative;
+  margin-bottom: 30px;
+  border: 1px solid #b1b4b6;
+}
+
+.app-example-card > img {
+  display: block;
+  width: 100%;
+}
+
+.app-example-card__body {
+  padding: 15px;
+}
+
+.app-prose-scope *:not(.app-no-prose *) .app-example-card__body h2:last-child {
+  margin-bottom: 0;
+}
+
+.app-example-card__body .govuk-heading-m {
+  margin-bottom: 0;
+}
+
+.app-example-card .govuk-heading-m a::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+}
+
+/* Fix sticky footer: the theme gives flex: 1 0 auto to any govuk-width-container
+   that is a direct child of govuk-template__body-inner, but the phase banner div
+   also matches that selector and grows incorrectly on short pages. Move the
+   flex-grow to <main> instead so only the content area stretches. */
+.govuk-template--rebranded .govuk-template__body-inner > .govuk-width-container {
+  flex: none;
+}
+
+.govuk-template--rebranded .govuk-main-wrapper {
+  flex: 1 0 auto;
+}
+
+/* Heading overides */
+.app-prose-scope *:not(.app-no-prose *) .govuk-heading-l {
+    font-size: 2.25rem;
+    line-height: 1.1111111111;
+}
 
-/* #8eb8dc */
+.app-prose-scope *:not(.app-no-prose *) .govuk-heading-m {
+  font-size: 1.5rem;
+  line-height: 1.25;
+  margin-bottom: 20px;
+}

demo/DemoMapBasic.js

@@ -0,0 +1,49 @@
+import { useEffect, useRef } from 'react'
+import BrowserOnly from '@docusaurus/BrowserOnly'
+
+const MAP_STYLE = {
+  url: 'https://labs.os.uk/tiles/styles/open-zoomstack-outdoor/style.json',
+  attribution: `Contains OS data © Crown copyright and database rights ${new Date().getFullYear()}`,
+  backgroundColor: '#f5f5f0'
+}
+
+function MapInner () {
+  const initialised = useRef(false)
+
+  useEffect(() => {
+    if (initialised.current) {
+      return
+    }
+    initialised.current = true
+
+    Promise.all([
+      import('../src/index.js'),
+      import('../providers/maplibre/src/index.js')
+    ]).then(([
+      { default: InteractiveMap },
+      { default: maplibreProvider }
+    ]) => {
+      // eslint-disable-next-line no-new
+      new InteractiveMap('demo-map-basic', {
+        behaviour: 'inline',
+        mapProvider: maplibreProvider(),
+        mapStyle: MAP_STYLE,
+        center: [-2.9631008,54.432306],
+        zoom: 15,
+        containerHeight: '500px',
+        enableZoomControls: true
+      })
+    })
+  }, [])
+  return <div id='demo-map-basic' className='app-no-prose app-example'></div>
+}
+
+export default function DemoMapBasic () {
+  return (
+    <BrowserOnly
+      fallback={<div className='govuk-inset-text'>The map requires JavaScript to be enabled.</div>}
+    >
+      {() => <MapInner />}
+    </BrowserOnly>
+  )
+}

demo/DemoMapButton.js

@@ -1,120 +1,48 @@
 import { useEffect, useRef } from 'react'
 import BrowserOnly from '@docusaurus/BrowserOnly'
-import useBaseUrl from '@docusaurus/useBaseUrl'
 
-const OS_ATTRIBUTION = `Contains OS data © Crown copyright and database rights ${new Date().getFullYear()}`
-
-function buildMapStyles (thumbnailUrl) {
-  return [
-    {
-      id: 'outdoor',
-      label: 'Outdoor',
-      url: 'https://labs.os.uk/tiles/styles/open-zoomstack-outdoor/style.json',
-      thumbnail: thumbnailUrl,
-      attribution: OS_ATTRIBUTION,
-      backgroundColor: '#f5f5f0'
-    },
-    {
-      id: 'night',
-      label: 'Night',
-      url: 'https://labs.os.uk/tiles/styles/open-zoomstack-night/style.json',
-      thumbnail: thumbnailUrl,
-      mapColorScheme: 'dark',
-      appColorScheme: 'dark',
-      attribution: OS_ATTRIBUTION
-    },
-    {
-      id: 'deuteranopia',
-      label: 'Deuteranopia',
-      url: 'https://labs.os.uk/tiles/styles/open-zoomstack-deuteranopia/style.json',
-      thumbnail: thumbnailUrl,
-      attribution: OS_ATTRIBUTION
-    },
-    {
-      id: 'tritanopia',
-      label: 'Tritanopia',
-      url: 'https://labs.os.uk/tiles/styles/open-zoomstack-tritanopia/style.json',
-      thumbnail: thumbnailUrl,
-      attribution: OS_ATTRIBUTION
-    }
-  ]
+const MAP_STYLE = {
+  url: 'https://labs.os.uk/tiles/styles/open-zoomstack-outdoor/style.json',
+  attribution: `Contains OS data © Crown copyright and database rights ${new Date().getFullYear()}`,
+  backgroundColor: '#f5f5f0'
 }
 
-function MapInner ({ mapStyles }) {
+function MapInner () {
   const initialised = useRef(false)
 
   useEffect(() => {
-    if (initialised.current) return
+    if (initialised.current) {
+      return
+    }
     initialised.current = true
 
     Promise.all([
       import('../src/index.js'),
-      import('../providers/maplibre/src/index.js'),
-      import('../plugins/search/src/index.js'),
-      import('../plugins/beta/scale-bar/src/index.js'),
-      import('../plugins/beta/map-styles/src/index.js')
+      import('../providers/maplibre/src/index.js')
     ]).then(([
       { default: InteractiveMap },
-      { default: maplibreProvider },
-      { default: searchPlugin },
-      { default: scaleBarPlugin },
-      { default: mapStylesPlugin }
+      { default: maplibreProvider }
     ]) => {
-      const nominatimDataset = {
-        name: 'nominatim',
-        urlTemplate: 'https://nominatim.openstreetmap.org/search?q={query}&format=json&limit=8&countrycodes=gb',
-        parseResults: (json, query) => {
-          if (!Array.isArray(json)) return []
-          const esc = q => q.replace(/[.*+?^${}()|[\\]\\]/g, '\\$&')
-          const rx = new RegExp(`(${esc(query)})`, 'i')
-          return json.map(r => {
-            const [south, north, west, east] = r.boundingbox.map(Number)
-            const lon = +r.lon
-            const lat = +r.lat
-            const full = r.display_name || ''
-            const text = full.length > 80 ? `${full.slice(0, 79).trim()}…` : full
-            const marked = text.replace(rx, '<mark>$1</mark>')
-            return {
-              id: String(r.place_id),
-              bounds: [west, south, east, north],
-              point: [lon, lat],
-              text,
-              marked,
-              type: 'nominatim'
-            }
-          })
-        }
-      }
-
       // eslint-disable-next-line no-new
       new InteractiveMap('demo-map-button', {
         behaviour: 'buttonFirst',
         mapProvider: maplibreProvider(),
-        mapStyle: mapStyles[0],
-        center: [-1.6, 53.1],
-        zoom: 6,
-        containerHeight: '500px',
-        enableZoomControls: true,
-        plugins: [
-          searchPlugin({ customDatasets: [nominatimDataset], showMarker: true }),
-          scaleBarPlugin({ units: 'metric' }),
-          mapStylesPlugin({ mapStyles })
-        ]
+        mapStyle: MAP_STYLE,
+        center: [-2.9631008,54.432306],
+        zoom: 15,
+        enableZoomControls: true
       })
     })
   }, [])
-  return <div id='demo-map-button' className='app-no-prose'></div>
+  return <div id='demo-map-button' className='app-no-prose app-example'></div>
 }
 
 export default function DemoMapButton () {
-  const thumbnailUrl = useBaseUrl('/images/outdoor-map-thumb.jpg')
-  const mapStyles = buildMapStyles(thumbnailUrl)
-
   return (
     <BrowserOnly
       fallback={<div className='govuk-inset-text'>The map requires JavaScript to be enabled.</div>}
     >
-      {() => <MapInner mapStyles={mapStyles} />}
+      {() => <MapInner />}
     </BrowserOnly>
   )
 }