Remove JavaScript from Details component

CHANGELOG.md

@@ -61,6 +61,16 @@ This change was made in [pull request #3599: Enable new link styles by default](
 
 You must make the following changes when you migrate to this release, or your service might break.
 
+#### Check that details components work as expected
+
+The Details component no longer uses JavaScript, and is no longer polyfilled in older browsers.
+
+If you aren’t using our Nunjucks macros, ensure you remove the `data-module="govuk-details"` attribute from all `<details>` elements.
+
+If you have extended browser support requirements, check that the Details component works as expected in older browsers.
+
+This change was introduced in [pull request #3766: Remove JavaScript from Details component](https://github.com/alphagov/govuk-frontend/pull/3766).
+
 #### Update package file paths
 
 In preparation for additional build targets, we've moved our package files into a directory called `dist`.

packages/govuk-frontend/src/govuk/all.mjs

@@ -3,7 +3,6 @@ import { Accordion } from './components/accordion/accordion.mjs'
 import { Button } from './components/button/button.mjs'
 import { CharacterCount } from './components/character-count/character-count.mjs'
 import { Checkboxes } from './components/checkboxes/checkboxes.mjs'
-import { Details } from './components/details/details.mjs'
 import { ErrorSummary } from './components/error-summary/error-summary.mjs'
 import { Header } from './components/header/header.mjs'
 import { NotificationBanner } from './components/notification-banner/notification-banner.mjs'
@@ -51,11 +50,6 @@ function initAll (config) {
     new Checkboxes($checkbox).init()
   })
 
-  const $details = $scope.querySelectorAll('[data-module="govuk-details"]')
-  $details.forEach(($detail) => {
-    new Details($detail).init()
-  })
-
   // Find first error summary module to enhance.
   const $errorSummary = $scope.querySelector('[data-module="govuk-error-summary"]')
   if ($errorSummary) {
@@ -97,7 +91,6 @@ export {
   // Components
   Accordion,
   Button,
-  Details,
   CharacterCount,
   Checkboxes,
   ErrorSummary,

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

@@ -8,26 +8,6 @@
  * @module common/index
  */
 
-/**
- * Used to generate a unique string, allows multiple instances of the component
- * without them conflicting with each other.
- * https://stackoverflow.com/a/8809472
- *
- * @private
- * @returns {string} Unique ID
- */
-export function generateUniqueID () {
-  let d = new Date().getTime()
-  if (typeof window.performance !== 'undefined' && typeof window.performance.now === 'function') {
-    d += window.performance.now() // use high-precision timer if available
-  }
-  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
-    const r = (d + Math.random() * 16) % 16 | 0
-    d = Math.floor(d / 16)
-    return (c === 'x' ? r : (r & 0x3 | 0x8)).toString(16)
-  })
-}
-
 /**
  * Config flattening function
  *

packages/govuk-frontend/src/govuk/common/index.unit.test.mjs

@@ -1,7 +1,5 @@
 import { mergeConfigs, extractConfigByNamespace } from './index.mjs'
 
-// TODO: Write unit tests for `generateUniqueID`
-
 describe('Common JS utilities', () => {
   describe('mergeConfigs', () => {
     const config1 = {

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

@@ -11,78 +11,123 @@
     // Make the focus outline shrink-wrap the text content of the summary
     display: inline-block;
 
-    // Absolutely position the marker against this element
-    position: relative;
-
     margin-bottom: govuk-spacing(1);
+  }
 
-    // Allow for absolutely positioned marker and align with disclosed text
-    padding-left: govuk-spacing(4) + $govuk-border-width;
-
-    // Style the summary to look like a link...
-    color: $govuk-link-colour;
-    cursor: pointer;
-
-    &:hover {
-      color: $govuk-link-hover-colour;
+  .govuk-details__summary-text {
+    > :first-child {
+      margin-top: 0;
     }
 
-    &:focus {
-      @include govuk-focused-text;
+    > :only-child,
+    > :last-child {
+      margin-bottom: 0;
     }
   }
 
-  // ...but only underline the text, not the arrow
-  .govuk-details__summary-text {
-    @include govuk-link-decoration;
+  .govuk-details__text {
+    padding-top: govuk-spacing(3);
+    padding-bottom: govuk-spacing(3);
+    padding-left: govuk-spacing(4);
   }
 
-  .govuk-details__summary:hover .govuk-details__summary-text {
-    @include govuk-link-hover-decoration;
+  .govuk-details__text p {
+    margin-top: 0;
+    margin-bottom: govuk-spacing(4);
   }
 
-  // Remove the underline when focussed to avoid duplicate borders
-  .govuk-details__summary:focus .govuk-details__summary-text {
-    text-decoration: none;
+  .govuk-details__text > :last-child {
+    margin-bottom: 0;
   }
 
-  // Remove the default details marker so we can style our own consistently and
-  // ensure it displays in Firefox (see implementation.md for details)
-  .govuk-details__summary::-webkit-details-marker {
-    display: none;
-  }
+  // Hack to target IE8 - IE11 (and REALLY old Firefox)
+  // These browsers don't support the details element, so fall back to looking
+  // like inset text
+  @media screen\0 {
+    .govuk-details {
+      border-left: $govuk-border-width-wide solid $govuk-border-colour;
+    }
+
+    .govuk-details__summary {
+      margin-top: govuk-spacing(3);
+    }
 
-  // Append our own open / closed marker using a pseudo-element
-  .govuk-details__summary::before {
-    content: "";
-    position: absolute;
+    .govuk-details__summary-text {
+      @include govuk-typography-weight-bold;
+      @include govuk-responsive-margin(4, "bottom");
+      padding-left: govuk-spacing(4);
+    }
+  }
 
-    top: -1px;
-    bottom: 0;
-    left: 0;
+  // We wrap styles for newer browsers in a feature query, which is ignored by
+  // older browsers, which always expand the details element.
+  //
+  // Additionally, -ms-ime-align is only supported by Edge 12 - 18
+  //
+  // This ensures we don't use these styles in browsers which:
+  //   - support ES6 modules but not the <details> element (Edge 16 - 18)
+  //   - do not support ES6 modules or the <details> element (eg, IE8+)
+  @supports not (-ms-ime-align: auto) {
+    .govuk-details__summary {
+
+      // Absolutely position the marker against this element
+      position: relative;
+
+      // Allow for absolutely positioned marker and align with disclosed text
+      padding-left: govuk-spacing(4) + $govuk-border-width;
+
+      // Style the summary to look like a link...
+      color: $govuk-link-colour;
+      cursor: pointer;
+
+      &:hover {
+        color: $govuk-link-hover-colour;
+      }
+
+      &:focus {
+        @include govuk-focused-text;
+      }
+    }
+    // ...but only underline the text, not the arrow
+    .govuk-details__summary-text {
+      @include govuk-link-decoration;
+    }
 
-    margin: auto;
+    .govuk-details__summary:hover .govuk-details__summary-text {
+      @include govuk-link-hover-decoration;
+    }
 
-    @include govuk-shape-arrow($direction: right, $base: 14px);
+    // Remove the underline when focussed to avoid duplicate borders
+    .govuk-details__summary:focus .govuk-details__summary-text {
+      text-decoration: none;
+    }
 
-    .govuk-details[open] > & {
-      @include govuk-shape-arrow($direction: down, $base: 14px);
+    // Remove the default details marker so we can style our own consistently and
+    // ensure it displays in Firefox (see implementation.md for details)
+    .govuk-details__summary::-webkit-details-marker {
+      display: none;
     }
-  }
 
-  .govuk-details__text {
-    padding-top: govuk-spacing(3);
-    padding-bottom: govuk-spacing(3);
-    padding-left: govuk-spacing(4);
-    border-left: $govuk-border-width solid $govuk-border-colour;
-  }
+    // Append our own open / closed marker using a pseudo-element
+    .govuk-details__summary::before {
+      content: "";
+      position: absolute;
 
-  .govuk-details__text p {
-    margin-top: 0;
-    margin-bottom: govuk-spacing(4);
-  }
+      top: -1px;
+      bottom: 0;
+      left: 0;
 
-  .govuk-details__text > :last-child {
-    margin-bottom: 0;
+      margin: auto;
+
+      @include govuk-shape-arrow($direction: right, $base: 14px);
+
+      .govuk-details[open] > & {
+        @include govuk-shape-arrow($direction: down, $base: 14px);
+      }
+    }
+
+    .govuk-details__text {
+      border-left: $govuk-border-width solid $govuk-border-colour;
+    }
   }
 }