@defra/docusaurus-theme-govuk 0.0.4-alpha → 0.0.5-alpha

package/README.md

@@ -10,7 +10,7 @@ A Docusaurus 3 theme that applies the [GOV.UK Design System](https://design-syst
 - Syntax-highlighted code blocks with copy button
 - Admonition blocks (:::note, :::warning, etc.) rendered as GOV.UK InsetText / WarningText
 - 404 page with GOV.UK styling
-- Bundled GDS Transport fonts and GOV.UK static assets
+- GOV.UK static assets included (GDS Transport is **not** bundled — the theme uses Helvetica/Arial)
 - Compatible with React 18 and React 19
 
 
@@ -63,6 +63,8 @@ module.exports = {
       header: {
         serviceName: 'My Service',
         serviceHref: '/',
+        organisationText: 'My Organisation',
+        organisationHref: 'https://example.gov.uk',
       },
 
       navigation: [
@@ -108,6 +110,8 @@ module.exports = {
 |----------|------|-------------|
 | `serviceName` | `string` | Service name displayed in the GOV.UK header |
 | `serviceHref` | `string` | Link for the service name (default: `/`) |
+| `organisationText` | `string` | Organisation name displayed in the header crown block |
+| `organisationHref` | `string` | URL the organisation name links to |
 
 #### `themeConfig.govuk.navigation`
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@defra/docusaurus-theme-govuk",
-  "version": "0.0.4-alpha",
+  "version": "0.0.5-alpha",
   "description": "A Docusaurus theme implementing the GOV.UK Design System for consistent, accessible documentation sites",
   "main": "index.js",
   "license": "MIT",

package/src/css/components.scss

@@ -29,7 +29,7 @@
   border-bottom: 1px solid #b1b4b6;
   font-size: 0.875rem;
   font-weight: 700;
-  font-family: 'GDS Transport', arial, sans-serif;
+  font-family: Helvetica, Arial, sans-serif;
 }
 
 .app-code-block__pre {
@@ -38,7 +38,7 @@
   overflow: auto;
   font-size: 0.875rem;
   line-height: 1.6;
-  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
+  font-family: Menlo, Consolas, 'Courier New', monospace;
   position: relative;
   border: 1px solid #b1b4b6;
   margin: 0;
@@ -54,7 +54,7 @@
   border-radius: 0;
   background: #f3f2f1;
   cursor: pointer;
-  font-family: 'GDS Transport', arial, sans-serif;
+  font-family: Helvetica, Arial, sans-serif;
   color: #0b0c0c;
 
   &:hover {

package/src/css/theme.scss

@@ -9,10 +9,27 @@
 
 /*
  * Set the default font on the body so that ALL elements
- * (header, footer, service-nav, etc.) inherit GDS Transport.
+ * (header, footer, service-nav, etc.) inherit the same stack.
  * The prose-scope only covers content inside .app-prose-scope;
  * without this, outer chrome inherits the browser default serif.
+ * GDS Transport is not bundled — Helvetica/Arial is used instead.
  */
 body {
-  font-family: 'GDS Transport', arial, sans-serif;
+  font-family: Helvetica, Arial, sans-serif;
+}
+
+/*
+ * Sticky footer: Docusaurus inserts a #__docusaurus wrapper between body
+ * and our layout, breaking GOV.UK Frontend's flex sticky-footer chain.
+ * Rather than patching the chain, own the full-height context here.
+ */
+.govuk-template--rebranded {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+}
+
+.govuk-template--rebranded > .govuk-width-container {
+  flex: 1 0 auto;
+  width: 100%;
 }

package/src/lib/react-foundry-router-shim.js

@@ -41,11 +41,28 @@ const includes = (haystack, needle) => {
 export const useIsActive = () => {
   const location = useLocation();
 
-  return (href, exact = true) => {
+  return (href, exact = true, options = {}) => {
     const target = URI.parse(href, location.pathname);
     const pathMatch = location.pathname === target.pathname;
     const queryMatch = includes(location.query, target.query);
-    return pathMatch && queryMatch;
+    // Home link: exact match only (must match exactly, not as a prefix)
+    if (
+      target.pathname === '/' ||
+      /^\/[^/]+\/?$/.test(target.pathname) // e.g. /interactive-map or /interactive-map/
+    ) {
+      // Only highlight if the current path matches the home link's pathname exactly
+      return location.pathname === target.pathname && queryMatch;
+    }
+    // Overview link: href is a prefix of current path, and next char is '/' or nothing
+    const isOverview = location.pathname.startsWith(target.pathname)
+      && location.pathname.charAt(target.pathname.length) === '/';
+    if (isOverview) {
+      return pathMatch && queryMatch;
+    }
+    // All other links: startsWith logic
+    const dir = target.pathname.endsWith('/') ? target.pathname : target.pathname + '/';
+    const pathStart = location.pathname === target.pathname || location.pathname.startsWith(dir);
+    return pathStart && queryMatch;
   };
 };
 

package/src/theme/Heading/index.js

@@ -15,15 +15,6 @@ export default function Heading({as: Tag = 'h2', id, children, ...props}) {
   return (
     <Tag id={id} className={className} {...props}>
       {children}
-      {id && (
-        <a
-          href={`#${id}`}
-          className="govuk-link app-heading-anchor"
-          aria-label={`Direct link to ${typeof children === 'string' ? children : 'heading'}`}
-        >
-          #
-        </a>
-      )}
     </Tag>
   );
 }

package/src/theme/Layout/index.js

@@ -137,14 +137,17 @@ export default function Layout(props) {
         <SkipLink for="main-content">Skip to main content</SkipLink>
 
         <Header
-          govUK
           rebrand
+          organisationText={header.organisationText}
+          organisationHref={header.organisationHref}
+        />
+
+        <ServiceNavigation 
+          items={serviceNavItems}
           serviceName={header.serviceName}
           serviceHref={withBase(header.serviceHref || '/')}
         />
 
-        <ServiceNavigation items={serviceNavItems} />
-
         <div className="govuk-width-container">
           {phaseBanner && (
             <PhaseBanner phase={phaseBanner.phase}>
@@ -174,7 +177,7 @@ export default function Layout(props) {
         </div>
 
         {!noFooter && (
-          <Footer govUK rebrand meta={footer.meta} />
+          <Footer rebrand meta={footer.meta} />
         )}
       </div>
     </LayoutProvider>