lbh-frontend 3.6.0 → 3.7.0

package/lbh/components/lbh-dialog/_dialog.scss

@@ -1,12 +1,28 @@
 @import "../../settings/all";
 
 @include lbh-exports("lbh/component/dialog") {
-  .lbh-dialog {
-    position: relative;
-    border: 4px solid lbh-colour("lbh-text");
+  .lbh-dialog__overlay {
+    position: fixed;
+    inset: 0;
+    z-index: 1000;
+    background: rgba(lbh-colour("lbh-text"), 0.5);
+  }
+
+  .lbh-dialog.lbh-dialog--radix {
+    position: fixed;
+    left: 50%;
+    top: 7vh;
+    z-index: 1001;
     width: 90%;
     max-width: 500px;
-    margin: 7vh auto;
+    margin: 0;
+    transform: translateX(-50%);
+    max-height: calc(100vh - 14vh);
+    overflow-y: auto;
+    box-sizing: border-box;
+    padding: govuk-spacing(4);
+    background: lbh-colour("lbh-white");
+    border: 4px solid lbh-colour("lbh-text");
 
     &__title {
       margin-top: 0;

package/lbh/components/lbh-dialog/index.tsx

@@ -1,11 +1,10 @@
 import React from "react"
-import { Dialog as ReachDialog } from "@reach/dialog"
-import "@reach/dialog/styles.css"
+import * as RadixDialog from "@radix-ui/react-dialog"
 
 interface Props {
   isOpen: boolean
   onDismiss: () => void
-  children: React.ReactChild | React.ReactChildren
+  children: React.ReactNode
   title: string
 }
 
@@ -16,30 +15,38 @@ const Dialog = ({
   title,
   ...props
 }: Props): React.ReactElement => (
-  <ReachDialog
-    isOpen={isOpen}
-    onDismiss={onDismiss}
-    aria-label={title}
-    className="lbh-dialog"
-    {...props}
+  <RadixDialog.Root
+    open={isOpen}
+    onOpenChange={(open) => {
+      if (!open) onDismiss()
+    }}
   >
-    <h2 className="lbh-heading-h2 lbh-dialog__title">{title}</h2>
-    {children}
-    <button onClick={onDismiss} className="lbh-dialog__close">
-      <span className="govuk-visually-hidden">Close</span>
+    <RadixDialog.Portal>
+      <RadixDialog.Overlay className="lbh-dialog__overlay" />
+      <RadixDialog.Content className="lbh-dialog lbh-dialog--radix" {...props}>
+        <RadixDialog.Title asChild>
+          <h2 className="lbh-heading-h2 lbh-dialog__title">{title}</h2>
+        </RadixDialog.Title>
+        {children}
+        <RadixDialog.Close asChild>
+          <button type="button" className="lbh-dialog__close">
+            <span className="govuk-visually-hidden">Close</span>
 
-      <svg width="18" height="18" viewBox="0 0 13 13" fill="none">
-        <path
-          d="M-0.0501709 1.36379L1.36404 -0.050415L12.6778 11.2633L11.2635 12.6775L-0.0501709 1.36379Z"
-          fill="#0B0C0C"
-        />
-        <path
-          d="M11.2635 -0.050293L12.6778 1.36392L1.36404 12.6776L-0.0501709 11.2634L11.2635 -0.050293Z"
-          fill="#0B0C0C"
-        />
-      </svg>
-    </button>
-  </ReachDialog>
+            <svg width="18" height="18" viewBox="0 0 13 13" fill="none">
+              <path
+                d="M-0.0501709 1.36379L1.36404 -0.050415L12.6778 11.2633L11.2635 12.6775L-0.0501709 1.36379Z"
+                fill="#0B0C0C"
+              />
+              <path
+                d="M11.2635 -0.050293L12.6778 1.36392L1.36404 12.6776L-0.0501709 11.2634L11.2635 -0.050293Z"
+                fill="#0B0C0C"
+              />
+            </svg>
+          </button>
+        </RadixDialog.Close>
+      </RadixDialog.Content>
+    </RadixDialog.Portal>
+  </RadixDialog.Root>
 )
 
 export default Dialog

package/lbh/components/lbh-error-summary/error-summary.d.ts

@@ -0,0 +1,13 @@
+class ErrorSummary {
+  $module: HTMLElement;
+
+  constructor($module: HTMLElement);
+
+  init(): void;
+  handleClick(event: MouseEvent): void;
+  focusTarget($target: HTMLElement): boolean;
+  getFragmentFromUrl(url: string): string | false;
+  getAssociatedLegendOrLabel($input: HTMLElement): HTMLElement | null;
+}
+
+export default ErrorSummary;

package/lbh/components/lbh-header/_header.scss

@@ -3,7 +3,7 @@
     position: relative;
     z-index: lbh-depth-index("header");
     margin-top: 0;
-    @include lbh-rem(padding-bottom, 21);
+    @include lbh-rem(padding-bottom, 16);
     border-bottom: 2px solid lbh-colour("lbh-a03");
     background: lbh-colour("lbh-white");
 
@@ -140,6 +140,7 @@
     }
 
     &__logo-text {
+      color: lbh-colour("lbh-white");
       @include govuk-visually-hidden;
     }
 

package/lbh/components/lbh-radios/radios.d.ts

@@ -0,0 +1,12 @@
+class Radios {
+  $module: HTMLElement;
+  $inputs: NodeListOf<HTMLInputElement>;
+  constructor($module: HTMLElement);
+
+  init(): void;
+  syncAllConditionalReveals(): void;
+  syncConditionalRevealWithInputState(): void;
+  handleClick(event: MouseEvent): void;
+}
+
+export default Radios;

package/lbh/components/lbh-tabs/tabs.d.ts

@@ -0,0 +1,33 @@
+class Tabs {
+  $module: HTMLElement;
+  $tabs: NodeListOf<HTMLElement>;
+  keys: { left: number; right: number; up: number; down: number };
+  jsHiddenClass: string;
+
+  constructor($module: HTMLElement);
+
+  init(): void;
+  setupResponsiveChecks(): void;
+  checkMode(): void;
+  setup(): void;
+  teardown(): void;
+  onHashChange(event: HashChangeEvent): void;
+  hideTab($tab: HTMLElement): void;
+  showTab($tab: HTMLElement): void;
+  getTab(hash: string): HTMLElement | null;
+  setAttributes($tab: HTMLElement): void;
+  unsetAttributes($tab: HTMLElement): void;
+  onTabClick(event: MouseEvent): void;
+  createHistoryEntry($tab: HTMLElement): void;
+  onTabKeydown(event: KeyboardEvent): void;
+  activateNextTab(): void;
+  activatePreviousTab(): void;
+  getPanel($tab: HTMLElement): HTMLElement | null;
+  showPanel($tab: HTMLElement): void;
+  hidePanel($tab: HTMLElement): void;
+  unhighlightTab($tab: HTMLElement): void;
+  getCurrentTab(): HTMLElement | null;
+  getHref($tab: HTMLElement): string;
+}
+
+export default Tabs;

package/lbh/core/core.test.js

@@ -1,7 +1,4 @@
-const util = require("util");
-const sass = require("node-sass");
-
-const sassRender = util.promisify(sass.render);
+const sassRender = require("../test/sass-render.cjs");
 
 describe("The core layer", () => {
   it("renders to CSS without errors", async () => {

package/lbh/helpers/colour.test.js

@@ -1,9 +1,4 @@
-/* eslint-env jest */
-
-const util = require("util");
-
-const sass = require("node-sass");
-const sassRender = util.promisify(sass.render);
+const sassRender = require("../test/sass-render.cjs");
 
 const sassConfig = {
   includePaths: ["lbh/"],
@@ -29,19 +24,24 @@ describe("@function lbh-colour", () => {
 
     const results = await sassRender({ data: sass, ...sassConfig });
 
-    expect(results.css.toString().trim()).toBe(".foo { color: #ff0000; }");
+    expect(results.css.toString().trim()).toBe(
+      ".foo {\n  color: #ff0000;\n}"
+    );
   });
 
-  it("works with unquoted strings", async () => {
+  // Dart Sass treats `red` as a colour value, not the string "red" like node-sass.
+  it("works with a string colour name", async () => {
     const sass = `
         ${sassBootstrap}
         .foo {
-          color: lbh-colour(red);
+          color: lbh-colour("red");
         }`;
 
     const results = await sassRender({ data: sass, ...sassConfig });
 
-    expect(results.css.toString().trim()).toBe(".foo { color: #ff0000; }");
+    expect(results.css.toString().trim()).toBe(
+      ".foo {\n  color: #ff0000;\n}"
+    );
   });
 
   it("throws an error if a non-existent colour is requested", async () => {

package/lbh/helpers/helpers.test.js

@@ -1,8 +1,6 @@
 const path = require("path");
-const util = require("util");
 
-const sass = require("node-sass");
-const sassRender = util.promisify(sass.render);
+const sassRender = require("../test/sass-render.cjs");
 
 describe("The helpers layer", () => {
   it("should not output any CSS", async () => {

package/lbh/helpers/typography.test.js

@@ -1,12 +1,7 @@
-/* eslint-env jest */
-
-const util = require("util");
-
 // const configPaths = require("../../config/paths.json");
 
 const outdent = require("outdent");
-const sass = require("node-sass");
-const sassRender = util.promisify(sass.render);
+const sassRender = require("../test/sass-render.cjs");
 
 const sassConfig = {
   includePaths: ["lbh/"],

package/lbh/index.d.ts

@@ -1,249 +1,15 @@
-export interface Accordion {
-  new ($module: HTMLElement): Accordion;
-}
-
-export class Accordion {
-  $module: HTMLElement;
-  moduleId: string;
-  $sections: NodeListOf<HTMLElement>;
-  $openAllButton: string;
-  browserSupportsSessionStorage: boolean | undefined;
-
-  controlsClass: string;
-  openAllClass: string;
-  iconClass: string;
-
-  sectionHeaderClass: string;
-  sectionHeaderFocusedClass: string;
-  sectionHeadingClass: string;
-  sectionSummaryClass: string;
-  sectionButtonClass: string;
-  sectionExpandedClass: string;
-
-  constructor($module: HTMLElement);
-
-  init(): void;
-  initControls(): void;
-  initSectionHeaders(): void;
-  initHeaderAttributes($headerWrapper: HTMLElement, index: number): void;
-  onSectionToggle($section: HTMLElement): void;
-  onOpenOrCloseAllToggle(): void;
-  setExpanded(expanded: boolean, $section: HTMLElement | null): void;
-  isExpanded(section: HTMLElement | null): boolean;
-  checkIfAllSectionsOpen(): boolean;
-  updateOpenAllButton(expanded: boolean): void;
-  storeState($section: HTMLElement): void;
-  setInitialState($section: HTMLElement): void;
-}
-
-export interface BackToTop {
-  new ($module: HTMLElement): BackToTop;
-}
-
-export class BackToTop {
-  $module: HTMLElement;
-
-  constructor($module: HTMLElement);
-
-  init(): void;
-  checkScrollPosition($element: HTMLElement): void;
-}
-
-export interface Button {
-  new ($module: HTMLElement): Button;
-}
-
-export class Button {
-  $module: HTMLElement;
-  debounceFormSubmitTimer: number | null;
-
-  constructor($module: HTMLElement);
-
-  handleKeyDown(event: KeyboardEvent): void;
-  debounce(event: MouseEvent): void | false;
-  init(): void;
-}
-
-export interface CharacterCount {
-  new ($module: HTMLElement): CharacterCount;
-}
-
-export class CharacterCount {
-  $module: HTMLElement;
-  $textarea: HTMLElement | null;
-  $countMessage: HTMLElement | null;
-
-  valueChecker: number | null;
-
-  constructor($module: HTMLElement);
-
-  init(): void;
-  sync(): void;
-  getDataset(): Record<string, string>;
-  count(text: string): number;
-  bindChangeEvents(): void;
-  checkIfValueChanged(): void;
-  updateCountMessage(): void;
-  handleFocus(): void;
-  handleBlur(): void;
-}
-
-export interface Checkboxes {
-  new ($module: HTMLElement): Checkboxes;
-}
-
-export class Checkboxes {
-  $module: HTMLElement;
-  $inputs: NodeListOf<HTMLInputElement>;
-
-  constructor($module: HTMLElement);
-
-  init(): void;
-  syncAllConditionalReveals(): void;
-  syncConditionalRevealWithInputState($input: HTMLInputElement): void;
-  unCheckAllInputsExcept($input: HTMLInputElement): void;
-  unCheckExclusiveInputs($input: HTMLInputElement): void;
-  handleClick(event: MouseEvent): void;
-}
-
-export interface Collapsible {
-  new ($module: HTMLElement): Collapsible;
-}
-
-export class Collapsible {
-  $module: HTMLElement;
-
-  constructor($module: HTMLElement);
-
-  init(): void;
-}
-
-export interface CookieBanner {
-  new ($module: HTMLElement): CookieBanner;
-}
-
-export class CookieBanner {
-  $module: HTMLElement;
-  $button: HTMLElement | null;
-
-  constructor($module: HTMLElement);
-
-  init(): void;
-  checkCookies(): string | null;
-  showCookieBanner(): void;
-  bindAcceptButton(): void;
-}
-
-export interface Details {
-  new ($module: HTMLElement): Details;
-}
-
-export class Details {
-  $module: HTMLElement;
-
-  constructor($module: HTMLElement);
-
-  init(): void;
-  polyfillDetails(): void;
-  polyfillSetAttributes(): true;
-  polyfillHandleInputs(node: HTMLElement, callback: Function): void;
-}
-
-export interface ErrorSummary {
-  new ($module: HTMLElement): ErrorSummary;
-}
-
-export class ErrorSummary {
-  $module: HTMLElement;
-
-  constructor($module: HTMLElement);
-
-  init(): void;
-  handleClick(event: MouseEvent): void;
-  focusTarget($target: HTMLElement): boolean;
-  getFragmentFromUrl(url: string): string | false;
-  getAssociatedLegendOrLabel($input: HTMLElement): HTMLElement | null;
-}
-
-export interface Map {
-  new ($module: HTMLElement): Map;
-}
-
-export class Map {
-  $module: HTMLElement;
-  moduleId: string;
-  accessToken: string;
-  markerLat: number | null;
-  markerLng: number | null;
-  centreLat: number;
-  centreLng: number;
-  maxZoom: number;
-  minZoom: number;
-  initialZoom: number;
-  showZoomControl: boolean;
-  minLat: number;
-  maxLat: number;
-  maxLng: number;
-
-  constructor($module: HTMLElement);
-
-  init(): void;
-  initLeaflet(): void;
-  setBounds(): void;
-  initMapboxTiles(): void;
-  addMarker(): void;
-}
-
-export interface Radios {
-  new ($module: HTMLElement): Radios;
-}
-
-export class Radios {
-  $module: HTMLElement;
-  $inputs: NodeListOf<HTMLInputElement>;
-  constructor($module: HTMLElement);
-
-  init(): void;
-  syncAllConditionalReveals(): void;
-  syncConditionalRevealWithInputState(): void;
-  handleClick(event: MouseEvent): void;
-}
-
-export interface Tabs {
-  new ($module: HTMLElement): Tabs;
-}
-
-export class Tabs {
-  $module: HTMLElement;
-  $tabs: NodeListOf<HTMLElement>;
-  keys: { left: number; right: number; up: number; down: number };
-  jsHiddenClass: string;
-
-  constructor($module: HTMLElement);
-
-  init(): void;
-  setupResponsiveChecks(): void;
-  checkMode(): void;
-  setup(): void;
-  teardown(): void;
-  onHashChange(event: HashChangeEvent): void;
-  hideTab($tab: HTMLElement): void;
-  showTab($tab: HTMLElement): void;
-  getTab(hash: string): HTMLElement | null;
-  setAttributes($tab: HTMLElement): void;
-  unsetAttributes($tab: HTMLElement): void;
-  onTabClick(event: MouseEvent): void;
-  createHistoryEntry($tab: HTMLElement): void;
-  onTabKeydown(event: KeyboardEvent): void;
-  activateNextTab(): void;
-  activatePreviousTab(): void;
-  getPanel($tab: HTMLElement): HTMLElement | null;
-  showPanel($tab: HTMLElement): void;
-  hidePanel($tab: HTMLElement): void;
-  unhighlightTab($tab: HTMLElement): void;
-  getCurrentTab(): HTMLElement | null;
-  getHref($tab: HTMLElement): string;
-}
+import { default as Accordion } from "./components/lbh-accordion/accordion";
+import { default as BackToTop } from "./components/lbh-back-to-top/back-to-top";
+import { default as Button } from "./components/lbh-button/button";
+import { default as CharacterCount } from "./components/lbh-character-count/character-count";
+import { default as Checkboxes } from "./components/lbh-checkboxes/checkboxes";
+import { default as Collapsible } from "./components/lbh-collapsible/collapsible";
+import { default as CookieBanner } from "./components/lbh-cookie-banner/cookie-banner";
+import { default as Details } from "./components/lbh-details/details";
+import { default as ErrorSummary } from "./components/lbh-error-summary/error-summary";
+import { default as Map } from "./components/lbh-contact-block/contact-block";
+import { default as Radios } from "./components/lbh-radios/radios";
+import { default as Tabs } from "./components/lbh-tabs/tabs";
 
 export interface InitOptions {
   scope?: HTMLElement | Document;
@@ -251,6 +17,21 @@ export interface InitOptions {
 
 export function initAll(options?: InitOptions): void;
 
+export {
+  Accordion,
+  BackToTop,
+  Button,
+  CharacterCount,
+  Checkboxes,
+  Collapsible,
+  CookieBanner,
+  Details,
+  ErrorSummary,
+  Map,
+  Radios,
+  Tabs,
+};
+
 declare global {
   interface Window {
     LBHFrontend: {

package/lbh/objects/objects.test.js

@@ -1,7 +1,4 @@
-const util = require("util");
-const sass = require("node-sass");
-
-const sassRender = util.promisify(sass.render);
+const sassRender = require("../test/sass-render.cjs");
 
 describe("The objects layer", () => {
   it("renders to CSS without errors", async () => {

package/lbh/settings/settings.test.js

@@ -1,10 +1,6 @@
-/* eslint-env jest */
-
 const path = require("path");
-const util = require("util");
 
-const sass = require("node-sass");
-const sassRender = util.promisify(sass.render);
+const sassRender = require("../test/sass-render.cjs");
 
 describe("The settings layer", () => {
   it("should not output any CSS", async () => {

package/lbh/test/sass-render.cjs

@@ -0,0 +1,63 @@
+const { execFileSync } = require("child_process");
+const fs = require("fs");
+const path = require("path");
+const PROJECT_ROOT = path.dirname(require.resolve("../../package.json"));
+
+const OUTPUT_STYLE_MAP = {
+  nested: "expanded",
+  compact: "expanded",
+};
+
+function resolveFromRoot (filePath) {
+  return path.isAbsolute(filePath)
+    ? filePath
+    : path.join(PROJECT_ROOT, filePath);
+}
+
+const SASS_CLI = path.join(PROJECT_ROOT, "node_modules/sass/sass.js");
+
+function renderWithCli ({ input, includePaths, outputStyle }) {
+  const style = OUTPUT_STYLE_MAP[outputStyle] || outputStyle || "expanded";
+  const args = [
+    "--stdin",
+    `--style=${style}`,
+    "--no-source-map",
+    ...includePaths.flatMap((dir) => [`--load-path=${dir}`]),
+  ];
+
+  const css = execFileSync(process.execPath, [SASS_CLI, ...args], {
+    cwd: PROJECT_ROOT,
+    input,
+    encoding: "utf8",
+  });
+
+  return { css: Buffer.from(css) };
+}
+
+function sassRender (options) {
+  const file = options.file && resolveFromRoot(options.file);
+  const includePaths = [PROJECT_ROOT];
+  if (options.includePaths) {
+    includePaths.push(...options.includePaths.map(resolveFromRoot));
+  }
+  if (file) {
+    includePaths.push(path.dirname(file));
+  }
+
+  try {
+    const input = file ? fs.readFileSync(file, "utf8") : options.data;
+    const result = renderWithCli({
+      input,
+      includePaths,
+      outputStyle: options.outputStyle,
+    });
+    return Promise.resolve({ css: result.css });
+  } catch (err) {
+    if (err.stdout) {
+      err.message = err.stderr?.toString() || err.message;
+    }
+    return Promise.reject(err);
+  }
+}
+
+module.exports = sassRender;

package/lbh/tools/exports.test.js

@@ -1,9 +1,4 @@
-/* eslint-env jest */
-
-const util = require("util");
-
-const sass = require("node-sass");
-const sassRender = util.promisify(sass.render);
+const sassRender = require("../test/sass-render.cjs");
 
 const sassConfig = {
   includePaths: ["lbh/"],