Allow for more frontend settings to be overridden

x-govuk · Sep 27, 2023 · 3ac2a0d · 3ac2a0d
1 parent bb3d558
commit 3ac2a0d
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 5 deletions.
diff --git a/lib/events/generate-govuk-assets.js b/lib/events/generate-govuk-assets.js
@@ -4,7 +4,31 @@ const sass = require('sass')
 const rollup = require('rollup')
 const commonJs = require('@rollup/plugin-commonjs')
 const { nodeResolve } = require('@rollup/plugin-node-resolve')
-const { ensureSlash } = require('../utils.js')
+const { ensureSlash, kebabise } = require('../utils.js')
+
+/**
+ * @see {@link https://frontend.design-system.service.gov.uk/sass-api-reference/#settings}
+ */
+const settingKeys = [
+  'brandColour',
+  'textColour',
+  'canvasBackgroundColour',
+  'bodyBackgroundColour',
+  'secondaryTextColour',
+  'focusColour',
+  'focusTextColour',
+  'errorColour',
+  'successColour',
+  'borderColour',
+  'inputBorderColour',
+  'hoverColour',
+  'linkColour',
+  'linkVisitedColour',
+  'linkHoverColour',
+  'linkActiveColour',
+  'pageWidth',
+  'fontFamily'
+]
 
 /**
  * Generate GOV.UK Frontend assets
@@ -15,8 +39,15 @@ const { ensureSlash } = require('../utils.js')
  * @returns {function}
  */
 module.exports = async function (dir, pathPrefix, options) {
-  const { imagesPath, fontsPath, brandColour, fontFamily } = options
-  const assetsPath = options.assetsPath || path.join(pathPrefix, 'assets')
+  let { assetsPath, imagesPath, fontsPath } = options
+  assetsPath = assetsPath || path.join(pathPrefix, 'assets')
+
+  const settings = []
+  for (const key of settingKeys) {
+    if (options[key]) {
+      settings.push(`$govuk-${kebabise(key)}: ${options[key]};`)
+    }
+  }
 
   // Get plugin options and set GOV.UK Frontend variables if provided
   const inputFilePath = path.join(__dirname, '../govuk.scss')
@@ -25,8 +56,7 @@ module.exports = async function (dir, pathPrefix, options) {
     assetsPath ? `$govuk-assets-path: "${ensureSlash(assetsPath)}";` : [],
     fontsPath ? `$govuk-fonts-path: "${ensureSlash(fontsPath)}";` : [],
     imagesPath ? `$govuk-images-path: "${ensureSlash(imagesPath)}";` : [],
-    brandColour ? `$govuk-brand-colour: ${brandColour};` : [],
-    fontFamily ? `$govuk-font-family: ${fontFamily};` : [],
+    ...settings,
     inputFile
   ].join('\n')
 

diff --git a/lib/utils.js b/lib/utils.js
@@ -16,6 +16,20 @@ const ensureSlash = (string) => {
   return `${string}/`
 }
 
+/**
+ * Convert camelCase to kebab-case
+ *
+ * @param {string} string camelCase string
+ * @returns kebab-case string
+ */
+const kebabise = (string) => {
+  return string.split('').map((letter, index) => {
+    return letter.toUpperCase() === letter
+      ? `${index !== 0 ? '-' : ''}${letter.toLowerCase()}`
+      : letter
+  }).join('')
+}
+
 /**
  * Normalise value provided to a filter. Checks that a given value exists
  * before performing a transformation.
@@ -34,5 +48,6 @@ const normalise = (value, defaultValue) => {
 
 module.exports = {
   ensureSlash,
+  kebabise,
   normalise
 }