Merge remote-tracking branch 'upstream/main' into tag-changes

.eslintrc.js

@@ -1,18 +1,70 @@
 module.exports = {
   extends: 'standard',
   ignorePatterns: [
-    '**/fixtures/build/**'
+    '**/fixtures/build/**',
+
+    // Enable dotfile linting
+    '!.*',
+    'node_modules',
+    'node_modules/.*'
   ],
   overrides: [
+    {
+      extends: [
+        'eslint:recommended',
+        'plugin:import/recommended',
+        'plugin:n/recommended',
+        'plugin:promise/recommended'
+      ],
+      files: ['**/*.{cjs,js,mjs}'],
+      parserOptions: {
+        ecmaVersion: 'latest'
+      },
+      plugins: [
+        'import',
+        'n',
+        'promise'
+      ],
+      rules: {
+        // Check import or require statements are A-Z ordered
+        'import/order': [
+          'error',
+          {
+            alphabetize: { order: 'asc' },
+            'newlines-between': 'always'
+          }
+        ]
+      }
+    },
+    {
+      // Extensions required for ESM import
+      files: ['**/*.mjs'],
+      rules: {
+        'import/extensions': [
+          'error',
+          'always',
+          {
+            ignorePackages: true,
+            pattern: {
+              cjs: 'always',
+              js: 'always',
+              mjs: 'always'
+            }
+          }
+        ]
+      }
+    },
     {
       files: ['**/*.test.{cjs,js,mjs}'],
       env: {
         jest: true
       },
       globals: {
-        page: true,
-        browser: true
+        page: 'readonly',
+        browser: 'readonly',
+        jestPuppeteer: 'readonly'
       }
     }
-  ]
+  ],
+  root: true
 }

.github/dependabot.yml

@@ -6,14 +6,55 @@ updates:
   - package-ecosystem: npm
     directory: /
     open-pull-requests-limit: 10
+
+    # Group packages into shared PR
+    groups:
+      babel:
+        patterns:
+          - '@babel/*'
+
+      lint:
+        patterns:
+          - 'eslint'
+          - 'eslint-*'
+          - 'standard'
+          - 'stylelint'
+          - 'stylelint-*'
+
+      metalsmith:
+        patterns:
+          - '@metalsmith/*'
+          - 'jstransformer-*'
+          - 'metalsmith'
+          - 'metalsmith-*'
+
+      postcss:
+        patterns:
+          - 'autoprefixer'
+          - 'postcss'
+          - 'postcss-*'
+
+      rollup:
+        patterns:
+          - '@rollup/*'
+          - 'rollup'
+
+      test:
+        patterns:
+          - '@axe-core/*'
+          - 'jest'
+          - 'jest-*'
+          - 'puppeteer'
+
     reviewers:
       - alphagov/design-system-developers
+
+    # Schedule run every Monday, local time
     schedule:
-      # Defaults to weekly on Monday
       interval: weekly
-      time: "10:30"
-      # Setting a timezone so we let dependabot worry about BST
-      timezone: "Europe/London"
+      time: '10:30'
+      timezone: 'Europe/London'
+
     versioning-strategy: increase
 
     allow:
@@ -24,9 +65,9 @@ updates:
     directory: /
     reviewers:
       - alphagov/design-system-developers
+
+    # Schedule run every Monday, local time
     schedule:
-      # Defaults to weekly on Monday
       interval: weekly
-      time: "10:30"
-      # Setting a timezone so we let dependabot worry about BST
-      timezone: "Europe/London"
+      time: '10:30'
+      timezone: 'Europe/London'

__tests__/back-to-top.test.js

@@ -1,4 +1,3 @@
-
 const { goTo, isVisible } = require('../lib/puppeteer-helpers.js')
 
 describe('Back to top', () => {

__tests__/component-options.test.js

@@ -1,4 +1,3 @@
-
 const { goTo } = require('../lib/puppeteer-helpers.js')
 
 describe('Component page', () => {

__tests__/cookie-banner.test.js

@@ -1,8 +1,6 @@
-
+const { ports } = require('../config')
 const { goTo, getAttribute, isVisible } = require('../lib/puppeteer-helpers.js')
 
-const configPaths = require('../lib/paths.js')
-
 describe('Cookie banner', () => {
   let $module
   let $message
@@ -17,7 +15,7 @@ describe('Cookie banner', () => {
   const cookieParam = {
     name: 'design_system_cookies_policy',
     value: JSON.stringify({ analytics: true, version: 1 }),
-    url: `http://localhost:${configPaths.port}`
+    url: `http://localhost:${ports.preview}`
   }
 
   async function setup (page) {

__tests__/cookie-functions.test.mjs

@@ -2,8 +2,8 @@
  * @jest-environment jsdom
  */
 
-import * as CookieHelpers from '../src/javascripts/components/cookie-functions.mjs'
 import * as Analytics from '../src/javascripts/components/analytics.mjs'
+import * as CookieHelpers from '../src/javascripts/components/cookie-functions.mjs'
 
 jest.mock('../src/javascripts/components/analytics')
 

__tests__/cookies-page.test.js

@@ -1,7 +1,6 @@
+const { ports } = require('../config')
 const { goTo, getProperty, isVisible } = require('../lib/puppeteer-helpers.js')
 
-const configPaths = require('../lib/paths.js')
-
 describe('Cookies page', () => {
   let $module
 
@@ -19,7 +18,7 @@ describe('Cookies page', () => {
   beforeEach(async () => {
     await page.deleteCookie({
       name: 'design_system_cookies_policy',
-      url: `http://localhost:${configPaths.port}`
+      url: `http://localhost:${ports.preview}`
     })
 
     await page.setJavaScriptEnabled(true)

__tests__/example.test.js

@@ -1,4 +1,3 @@
-
 const { goTo } = require('../lib/puppeteer-helpers.js')
 
 describe('Example page', () => {

__tests__/search.test.js

@@ -1,4 +1,3 @@
-
 const { goTo, getProperty } = require('../lib/puppeteer-helpers.js')
 
 // Regex that can be used to match on fingerprinted search index files
@@ -43,40 +42,37 @@ describe('Site search', () => {
   it('returns results where a word in the title begins with the letter "d"', async () => {
     await $searchInput.type('d')
 
-    const resultsArray = await page.evaluate(
-      () => [...document.querySelectorAll('.app-site-search__option')]
-        // ignore any results where a match was found in the alias
-        .filter(elem => !elem.querySelector('.app-site-search__aliases'))
-        // only get text, ignore child nodes
-        .map(elem => elem.firstChild.textContent.toLowerCase())
-    )
+    // ignore any results where a match was found in the alias
+    const resultsArray = await page.$$eval('.app-site-search__option:not(:has(.app-site-search__aliases))', results =>
+      results.map(result => result.firstChild.textContent.toLowerCase()))
 
     // regex with word boundary, in our case words that begin with 'd'
-    expect(resultsArray.every(item => (/\b[d]\w*/).test(item))).toBeTruthy()
+    for (const result of resultsArray) {
+      expect(result).toMatch(/\b[d]\w*/)
+    }
+
+    expect.assertions()
   })
 
   it('returns results that contain aliases that start with the letter "d"', async () => {
     await $searchInput.type('d')
 
-    const resultsArray = await page.evaluate(
-      () => [...document.querySelectorAll('.app-site-search__option')]
-        // only get results where a match was found in the alias
-        .filter(elem => elem.querySelector('.app-site-search__aliases'))
-        .map(elem => elem.querySelector('.app-site-search__aliases').textContent)
-    )
+    // only get results where a match was found in the alias
+    const resultsArray = await page.$$eval('.app-site-search__option:has(.app-site-search__aliases)', results =>
+      results.map(result => result.querySelector('.app-site-search__aliases').textContent))
 
     // regex with word boundary, in our case words that begin with 'd'
-    expect(resultsArray.every(item => (/\b[d]\w*/).test(item))).toBeTruthy()
+    for (const result of resultsArray) {
+      expect(result).toMatch(/\b[d]\w*/)
+    }
+
+    expect.assertions()
   })
 
-  it('doesn\'t show any aliases if it finds any matches in the title', async () => {
+  it("doesn't show any aliases if it finds any matches in the title", async () => {
     await $searchInput.type('det')
 
-    const resultsArray = await page.evaluate(
-      () => [...document.querySelectorAll('.app-site-search__aliases')]
-        .map(elem => elem.querySelector('.app-site-search__aliases'))
-    )
-
+    const resultsArray = await page.$$('.app-site-search__aliases')
     expect(resultsArray).toHaveLength(0)
   })
 

__tests__/tabs.test.js

@@ -1,4 +1,3 @@
-
 const { goTo, getAttribute, isVisible } = require('../lib/puppeteer-helpers.js')
 
 describe('Component page', () => {

config/index.js

@@ -0,0 +1,12 @@
+/**
+ * Config
+ */
+const navigation = require('./navigation')
+const paths = require('./paths')
+const ports = require('./ports')
+
+module.exports = {
+  navigation,
+  paths,
+  ports
+}

config/navigation.js

@@ -0,0 +1,50 @@
+/**
+ * Navigation menu items
+ *
+ * @type {NavigationItem[]}
+ */
+module.exports = [
+  {
+    label: 'Get started',
+    url: 'get-started',
+    includeInSearch: true
+  },
+  {
+    label: 'Styles',
+    url: 'styles',
+    includeInSearch: true
+  },
+  {
+    label: 'Components',
+    url: 'components',
+    includeInSearch: true
+  },
+  {
+    label: 'Patterns',
+    url: 'patterns',
+    includeInSearch: true
+  },
+  {
+    label: 'Community',
+    url: 'community',
+    includeInSearch: true
+  }
+]
+
+/**
+ * @typedef {object} NavigationItem
+ * @property {string} label - Navigation item text
+ * @property {string} url - URL path without leading slash
+ * @property {boolean} includeInSearch - Include in search index
+ * @property {NavigationSubItem[]} [items] - Navigation sub items
+ */
+
+/**
+ * @typedef {object} NavigationSubItem
+ * @property {string} label - Navigation item text
+ * @property {string} url - URL path without leading slash
+ * @property {string[]} [aliases] - Additional search terms (optional)
+ * @property {string[]} [headings] - Markdown extracted headings (optional)
+ * @property {string} [order] - Menu item sort order (optional)
+ * @property {string} [theme] - Menu heading to group by (optional)
+ */

config/paths.js

@@ -0,0 +1,14 @@
+const { join, resolve } = require('path')
+
+// Repository root directory
+const rootPath = resolve(__dirname, '../')
+
+/**
+ * Config paths
+ */
+module.exports = {
+  root: rootPath,
+  public: join(rootPath, 'deploy/public'),
+  source: join(rootPath, 'src'),
+  views: join(rootPath, 'views')
+}