[DO NOT MERGE] Experiment with toggling the header colour via a top-level class in the review app

packages/govuk-frontend-review/src/app.mjs

@@ -11,6 +11,7 @@ import { filterPath, getDirectories, hasPath } from '@govuk-frontend/lib/files'
 import { getStats, modulePaths } from '@govuk-frontend/stats'
 import express from 'express'
 
+import featureFlags from './common/lib/feature-flags.json' with { type: 'json' }
 import { getFullPageExamples } from './common/lib/files.mjs'
 import * as middleware from './common/middleware/index.mjs'
 import * as nunjucks from './common/nunjucks/index.mjs'
@@ -67,6 +68,7 @@ export default async () => {
   app.use(middleware.request)
   app.use(middleware.robots)
   app.use(middleware.banner)
+  app.use(middleware.featureFlags)
 
   // Add build stats
   app.locals.stats = Object.fromEntries(
@@ -184,9 +186,16 @@ export default async () => {
         return next()
       }
 
+      const showFeatureFlagBanner =
+        featureFlags.find((flag) =>
+          flag.affectedComponents.includes(componentName)
+        ) !== undefined
+
       res.render(componentName ? 'component' : 'components', {
         componentsFixtures,
-        componentName
+        componentName,
+        showFeatureFlagBanner,
+        featureFlags: showFeatureFlagBanner && featureFlags
       })
     }
   )

packages/govuk-frontend-review/src/common/lib/feature-flags.json

@@ -0,0 +1,9 @@
+[
+  {
+    "name": "Recolour",
+    "description": "An experimentation of changing the colours of some things",
+    "param": "recolour",
+    "cookieName": "use-recolour",
+    "affectedComponents": ["header"]
+  }
+]

packages/govuk-frontend-review/src/common/middleware/feature-flags.mjs

@@ -0,0 +1,53 @@
+import express from 'express'
+
+import featureFlags from '../lib/feature-flags.json' with { type: 'json' }
+
+const router = express.Router()
+
+router.use((req, res, next) => {
+  // If we have the expected query param in the URL handle the cookie setting
+
+  for (const flag of featureFlags) {
+    if (req.method === 'GET' && flag.param in req.query) {
+      if (req.query[flag.param] === 'true') {
+        const maxAgeInDays = 28
+
+        res.cookie(flag.cookieName, 'yes', {
+          maxAge: maxAgeInDays * 24 * 60 * 60 * 1000,
+          httpOnly: true
+        })
+      } else {
+        res.clearCookie(flag.cookieName)
+      }
+
+      const urlWithoutQueryString = req.url.split('?')[0]
+      return res.redirect(urlWithoutQueryString)
+    }
+  }
+
+  // Let express carry on and  handle the request as usual
+  next()
+})
+
+router.use((req, res, next) => {
+  res.locals.featureFlagStates = {}
+
+  for (const flag of featureFlags) {
+    if (`${flag.param}Override` in req.query) {
+      res.locals.featureFlagStates[flag.param] =
+        req.query[`${flag.param}Override`] !== 'false'
+    } else {
+      res.locals.featureFlagStates[flag.param] =
+        req.cookies?.[flag.cookieName] === 'yes'
+    }
+  }
+  next()
+})
+
+router.use((req, res, next) => {
+  res.locals.showAllFlagStates =
+    'showAllFlagStates' in req.query && req.query.showAllFlagStates === 'true'
+  next()
+})
+
+export default router

packages/govuk-frontend-review/src/common/middleware/index.mjs

@@ -4,5 +4,6 @@
 export { default as assets } from './assets.mjs'
 export { default as banner } from './banner.mjs'
 export { default as docs } from './docs.mjs'
+export { default as featureFlags } from './feature-flags.mjs'
 export { default as request } from './request.mjs'
 export { default as robots } from './robots.mjs'

packages/govuk-frontend-review/src/stylesheets/app.scss

@@ -8,5 +8,6 @@ $govuk-suppressed-warnings: ("organisation-colours");
 @import "partials/app";
 @import "partials/code";
 @import "partials/banner";
+@import "partials/feature-flag-banner";
 @import "partials/organisation-swatch";
 @import "partials/prose";

packages/govuk-frontend-review/src/stylesheets/full-page-examples/campaign-page.scss

@@ -1,8 +1,13 @@
 @import "govuk/base";
 @import "govuk/core";
 
-.app-header--campaign {
+.app-header--campaign,
+.govuk-feature--recolour .app-header--campaign {
   padding-bottom: govuk-spacing(2);
+}
+
+.govuk-feature--recolour .app-header--campaign {
+  padding-bottom: 0;
   border-bottom: $govuk-border-width-wide solid #fff500;
 }
 

packages/govuk-frontend-review/src/stylesheets/partials/_feature-flag-banner.scss

@@ -0,0 +1,5 @@
+.app-feature-flag-banner {
+  padding: govuk-spacing(4) 0;
+  border-bottom: 1px solid govuk-colour("mid-grey");
+  background-color: govuk-colour("light-grey");
+}

packages/govuk-frontend-review/src/views/component.njk

@@ -38,7 +38,11 @@
     </h1>
   </div>
 
+  {% if showFeatureFlagBanner %}
+    {% include "./partials/featureFlags.njk" %}
+  {% endif %}
+
   {% block examples %}
-    {{ showExamples(componentFixtures) }}
+    {{ showExamples(componentFixtures, false, showAllFlagStates) }}
   {% endblock %}
 {% endblock %}

packages/govuk-frontend-review/src/views/layouts/full-page-example.njk

@@ -1,5 +1,8 @@
 {% extends "layouts/_generic.njk" %}
 
+{% set htmlClasses = "govuk-feature--recolour" if featureFlagStates['recolour'] else "" %}
+
+
 {% block banner %}
   {% include "../partials/exampleBanner.njk" %}
 {% endblock %}

packages/govuk-frontend-review/src/views/layouts/layout.njk

@@ -1,6 +1,6 @@
 {% extends "layouts/_generic.njk" %}
 
-{% set htmlClasses = "app-template" %}
+{% set htmlClasses = "app-template" + " govuk-feature--recolour" if featureFlagStates['recolour'] else "" %}
 
 {% block pageTitle %}GOV.UK Frontend{% endblock %}
 

packages/govuk-frontend-review/src/views/macros/showExamples.njk

@@ -1,6 +1,6 @@
 {% from "govuk/components/details/macro.njk" import govukDetails %}
 
-{% macro showExamples(componentFixtures, exampleNames) %}
+{% macro showExamples(componentFixtures, exampleNames, renderTwoIframes) %}
 
 {% set componentName = componentFixtures.component %}
 
@@ -32,9 +32,19 @@
       </p>
     {% endif %}
     </div>
-    <div class="app-component-preview">
-      <iframe src="{{ path }}?iframe=true" loading="{{ "eager" if loop.index <= 3 else "lazy" }}" class="js-component-preview app-component-preview__iframe"></iframe>
-    </div>
+
+    {% if renderTwoIframes %}
+      <div class="app-component-preview">
+        <iframe src="{{ path }}?iframe=true&recolourOverride=true" loading="{{ "eager" if loop.index <= 3 else "lazy" }}" class="js-component-preview app-component-preview__iframe"></iframe>
+      </div>
+      <div class="app-component-preview">
+        <iframe src="{{ path }}?iframe=true&recolourOverride=false" loading="{{ "eager" if loop.index <= 3 else "lazy" }}" class="js-component-preview app-component-preview__iframe"></iframe>
+      </div>
+    {% else %}
+      <div class="app-component-preview">
+        <iframe src="{{ path }}?iframe=true" loading="{{ "eager" if loop.index <= 3 else "lazy" }}" class="js-component-preview app-component-preview__iframe"></iframe>
+      </div>
+    {% endif %}
 
     <div class="govuk-width-container">
       {% set codeExamplesHtml %}

packages/govuk-frontend-review/src/views/partials/featureFlags.njk

@@ -0,0 +1,21 @@
+<div class="app-feature-flag-banner">
+  <div class="govuk-width-container">
+    <h2 class="govuk-heading-m">Feature flag control</h2>
+    <p class="govuk-body">This component is impacted by the following feature flags:</p>
+
+    {% for flag in featureFlags %}
+    <h3 class="govuk-heading-s">{{ flag.name }}</h3>
+    <p class="govuk-body">{{ flag.description }}</p>
+    <p class="govuk-body">
+      <a class="govuk-button govuk-!-margin-bottom-0" href="?{{ flag.param }}={{ not featureFlagStates[flag.param] }}">
+        Turn flag '{{ flag.name }}' {{ 'off' if featureFlagStates[flag.param] else 'on' }}
+      </a>
+    </p>
+    {% endfor %}
+    <p class="govuk-body">
+      <a class="govuk-button govuk-!-margin-bottom-0" href="?showAllFlagStates={{ not showAllFlagStates }}">
+        {{ 'Only show one example state' if showAllFlagStates else 'Show both states' }}
+      </a>
+    </p>
+  </div>
+</div>

packages/govuk-frontend/src/govuk/components/header/_index.scss

@@ -1,5 +1,6 @@
 @include govuk-exports("govuk/component/header") {
   $govuk-header-background: govuk-colour("black");
+  $govuk-recoloured-header-background: govuk-colour("blue");
   $govuk-header-border-color: $govuk-brand-colour;
   $govuk-header-border-width: govuk-spacing(2);
   $govuk-header-text: govuk-colour("white");
@@ -352,4 +353,85 @@
       }
     }
   }
+
+  .govuk-feature--recolour {
+    .govuk-header {
+      border-bottom: 1px solid $govuk-recoloured-header-background;
+      background: $govuk-recoloured-header-background;
+    }
+
+    .govuk-header__container {
+      margin-bottom: 0;
+      padding: 0;
+      border-bottom: 0;
+    }
+
+    .govuk-header__service-name {
+      margin: govuk-spacing(2) 0 0;
+    }
+
+    .govuk-header__logo {
+      @include govuk-responsive-padding($govuk-header-vertical-spacing-value, "top");
+    }
+
+    .govuk-header__navigation {
+      margin-bottom: 0;
+    }
+
+    .govuk-header__navigation--end {
+      padding: 0;
+    }
+
+    .govuk-header__navigation-list {
+      @include govuk-media-query($until: desktop) {
+        padding-top: govuk-spacing(1);
+      }
+    }
+
+    .govuk-header__navigation-item {
+      margin: govuk-spacing(2) 0 govuk-spacing(4);
+      padding: 0;
+      border-bottom: 0;
+
+      @include govuk-media-query($from: desktop) {
+        margin: govuk-spacing(3) govuk-spacing(3) 0 0;
+        padding: 0;
+      }
+
+      a {
+        @include govuk-typography-weight-regular;
+      }
+    }
+
+    .govuk-header__navigation-item--active {
+      border: 0 solid;
+
+      @include govuk-media-query($until: desktop) {
+        margin-left: govuk-spacing(-3);
+        padding-left: govuk-spacing(2);
+        border-left-width: govuk-spacing(1);
+      }
+
+      @include govuk-media-query($from: desktop) {
+        padding-bottom: govuk-spacing(2);
+        border-bottom-width: govuk-spacing(1);
+      }
+
+      a {
+        &:link,
+        &:hover,
+        &:visited {
+          color: inherit;
+        }
+
+        &:focus {
+          color: $govuk-focus-text-colour;
+        }
+      }
+    }
+
+    .govuk-header__navigation-item:last-child {
+      margin-bottom: govuk-spacing(3);
+    }
+  }
 }