govuk_publishing_components 60.0.2 → 60.2.0

data/node_modules/govuk-frontend/dist/govuk/components/tabs/tabs.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.mjs","sources":["../../../../src/govuk/components/tabs/tabs.mjs"],"sourcesContent":["import { getBreakpoint, getFragmentFromUrl } from '../../common/index.mjs'\nimport { Component } from '../../component.mjs'\nimport { ElementError } from '../../errors/index.mjs'\n\n/**\n * Tabs component\n *\n * @preserve\n */\nexport class Tabs extends Component {\n  /** @private */\n  $tabs\n\n  /** @private */\n  $tabList\n\n  /** @private */\n  $tabListItems\n\n  /** @private */\n  jsHiddenClass = 'govuk-tabs__panel--hidden'\n\n  /** @private */\n  changingHash = false\n\n  /** @private */\n  boundTabClick\n\n  /** @private */\n  boundTabKeydown\n\n  /** @private */\n  boundOnHashChange\n\n  /**\n   * @private\n   * @type {MediaQueryList | null}\n   */\n  mql = null\n\n  /**\n   * @param {Element | null} $root - HTML element to use for tabs\n   */\n  constructor($root) {\n    super($root)\n\n    const $tabs = this.$root.querySelectorAll('a.govuk-tabs__tab')\n    if (!$tabs.length) {\n      throw new ElementError({\n        component: Tabs,\n        identifier: 'Links (`<a class=\"govuk-tabs__tab\">`)'\n      })\n    }\n\n    this.$tabs = $tabs\n\n    // Save bound functions so we can remove event listeners during teardown\n    this.boundTabClick = this.onTabClick.bind(this)\n    this.boundTabKeydown = this.onTabKeydown.bind(this)\n    this.boundOnHashChange = this.onHashChange.bind(this)\n\n    const $tabList = this.$root.querySelector('.govuk-tabs__list')\n    const $tabListItems = this.$root.querySelectorAll(\n      'li.govuk-tabs__list-item'\n    )\n\n    if (!$tabList) {\n      throw new ElementError({\n        component: Tabs,\n        identifier: 'List (`<ul class=\"govuk-tabs__list\">`)'\n      })\n    }\n\n    if (!$tabListItems.length) {\n      throw new ElementError({\n        component: Tabs,\n        identifier: 'List items (`<li class=\"govuk-tabs__list-item\">`)'\n      })\n    }\n\n    this.$tabList = $tabList\n    this.$tabListItems = $tabListItems\n\n    this.setupResponsiveChecks()\n  }\n\n  /**\n   * Setup viewport resize check\n   *\n   * @private\n   */\n  setupResponsiveChecks() {\n    const breakpoint = getBreakpoint('tablet')\n\n    if (!breakpoint.value) {\n      throw new ElementError({\n        component: Tabs,\n        identifier: `CSS custom property (\\`${breakpoint.property}\\`) on pseudo-class \\`:root\\``\n      })\n    }\n\n    // Media query list for GOV.UK Frontend tablet breakpoint\n    this.mql = window.matchMedia(`(min-width: ${breakpoint.value})`)\n\n    // MediaQueryList.addEventListener isn't supported by Safari < 14 so we need\n    // to be able to fall back to the deprecated MediaQueryList.addListener\n    if ('addEventListener' in this.mql) {\n      this.mql.addEventListener('change', () => this.checkMode())\n    } else {\n      // @ts-expect-error Property 'addListener' does not exist\n      // eslint-disable-next-line @typescript-eslint/no-unsafe-call\n      this.mql.addListener(() => this.checkMode())\n    }\n\n    this.checkMode()\n  }\n\n  /**\n   * Setup or teardown handler for viewport resize check\n   *\n   * @private\n   */\n  checkMode() {\n    if (this.mql?.matches) {\n      this.setup()\n    } else {\n      this.teardown()\n    }\n  }\n\n  /**\n   * Setup tab component\n   *\n   * @private\n   */\n  setup() {\n    this.$tabList.setAttribute('role', 'tablist')\n\n    this.$tabListItems.forEach(($item) => {\n      $item.setAttribute('role', 'presentation')\n    })\n\n    this.$tabs.forEach(($tab) => {\n      // Set HTML attributes\n      this.setAttributes($tab)\n\n      // Handle events\n      $tab.addEventListener('click', this.boundTabClick, true)\n      $tab.addEventListener('keydown', this.boundTabKeydown, true)\n\n      // Remove old active panels\n      this.hideTab($tab)\n    })\n\n    // Show either the active tab according to the URL's hash or the first tab\n    const $activeTab = this.getTab(window.location.hash) ?? this.$tabs[0]\n\n    this.showTab($activeTab)\n\n    // Handle hashchange events\n    window.addEventListener('hashchange', this.boundOnHashChange, true)\n  }\n\n  /**\n   * Teardown tab component\n   *\n   * @private\n   */\n  teardown() {\n    this.$tabList.removeAttribute('role')\n\n    this.$tabListItems.forEach(($item) => {\n      $item.removeAttribute('role')\n    })\n\n    this.$tabs.forEach(($tab) => {\n      // Remove events\n      $tab.removeEventListener('click', this.boundTabClick, true)\n      $tab.removeEventListener('keydown', this.boundTabKeydown, true)\n\n      // Unset HTML attributes\n      this.unsetAttributes($tab)\n    })\n\n    // Remove hashchange event handler\n    window.removeEventListener('hashchange', this.boundOnHashChange, true)\n  }\n\n  /**\n   * Handle hashchange event\n   *\n   * @private\n   * @returns {void | undefined} Returns void, or undefined when prevented\n   */\n  onHashChange() {\n    const hash = window.location.hash\n    const $tabWithHash = this.getTab(hash)\n    if (!$tabWithHash) {\n      return\n    }\n\n    // Prevent changing the hash\n    if (this.changingHash) {\n      this.changingHash = false\n      return\n    }\n\n    // Show either the active tab according to the URL's hash or the first tab\n    const $previousTab = this.getCurrentTab()\n    if (!$previousTab) {\n      return\n    }\n\n    this.hideTab($previousTab)\n    this.showTab($tabWithHash)\n    $tabWithHash.focus()\n  }\n\n  /**\n   * Hide panel for tab link\n   *\n   * @private\n   * @param {HTMLAnchorElement} $tab - Tab link\n   */\n  hideTab($tab) {\n    this.unhighlightTab($tab)\n    this.hidePanel($tab)\n  }\n\n  /**\n   * Show panel for tab link\n   *\n   * @private\n   * @param {HTMLAnchorElement} $tab - Tab link\n   */\n  showTab($tab) {\n    this.highlightTab($tab)\n    this.showPanel($tab)\n  }\n\n  /**\n   * Get tab link by hash\n   *\n   * @private\n   * @param {string} hash - Hash fragment including #\n   * @returns {HTMLAnchorElement | null} Tab link\n   */\n  getTab(hash) {\n    return this.$root.querySelector(`a.govuk-tabs__tab[href=\"${hash}\"]`)\n  }\n\n  /**\n   * Set tab link and panel attributes\n   *\n   * @private\n   * @param {HTMLAnchorElement} $tab - Tab link\n   */\n  setAttributes($tab) {\n    const panelId = getFragmentFromUrl($tab.href)\n    if (!panelId) {\n      return\n    }\n\n    // Set tab attributes\n    $tab.setAttribute('id', `tab_${panelId}`)\n    $tab.setAttribute('role', 'tab')\n    $tab.setAttribute('aria-controls', panelId)\n    $tab.setAttribute('aria-selected', 'false')\n    $tab.setAttribute('tabindex', '-1')\n\n    // Set panel attributes\n    const $panel = this.getPanel($tab)\n    if (!$panel) {\n      return\n    }\n\n    $panel.setAttribute('role', 'tabpanel')\n    $panel.setAttribute('aria-labelledby', $tab.id)\n    $panel.classList.add(this.jsHiddenClass)\n  }\n\n  /**\n   * Unset tab link and panel attributes\n   *\n   * @private\n   * @param {HTMLAnchorElement} $tab - Tab link\n   */\n  unsetAttributes($tab) {\n    // unset tab attributes\n    $tab.removeAttribute('id')\n    $tab.removeAttribute('role')\n    $tab.removeAttribute('aria-controls')\n    $tab.removeAttribute('aria-selected')\n    $tab.removeAttribute('tabindex')\n\n    // unset panel attributes\n    const $panel = this.getPanel($tab)\n    if (!$panel) {\n      return\n    }\n\n    $panel.removeAttribute('role')\n    $panel.removeAttribute('aria-labelledby')\n    $panel.classList.remove(this.jsHiddenClass)\n  }\n\n  /**\n   * Handle tab link clicks\n   *\n   * @private\n   * @param {MouseEvent} event - Mouse click event\n   * @returns {void} Returns void\n   */\n  onTabClick(event) {\n    const $currentTab = this.getCurrentTab()\n    const $nextTab = event.currentTarget\n\n    if (!$currentTab || !($nextTab instanceof HTMLAnchorElement)) {\n      return\n    }\n\n    event.preventDefault()\n\n    this.hideTab($currentTab)\n    this.showTab($nextTab)\n    this.createHistoryEntry($nextTab)\n  }\n\n  /**\n   * Update browser URL hash fragment for tab\n   *\n   * - Allows back/forward to navigate tabs\n   * - Avoids page jump when hash changes\n   *\n   * @private\n   * @param {HTMLAnchorElement} $tab - Tab link\n   */\n  createHistoryEntry($tab) {\n    const $panel = this.getPanel($tab)\n    if (!$panel) {\n      return\n    }\n\n    // Save and restore the id so the page doesn't jump when a user clicks a tab\n    // (which changes the hash)\n    const panelId = $panel.id\n    $panel.id = ''\n    this.changingHash = true\n    window.location.hash = panelId\n    $panel.id = panelId\n  }\n\n  /**\n   * Handle tab keydown event\n   *\n   * - Press right arrow for next tab\n   * - Press left arrow for previous tab\n   *\n   * @private\n   * @param {KeyboardEvent} event - Keydown event\n   */\n  onTabKeydown(event) {\n    switch (event.key) {\n      // 'Left' and 'Right' required for Edge 16 support.\n      case 'ArrowLeft':\n      case 'Left':\n        this.activatePreviousTab()\n        event.preventDefault()\n        break\n      case 'ArrowRight':\n      case 'Right':\n        this.activateNextTab()\n        event.preventDefault()\n        break\n    }\n  }\n\n  /**\n   * Activate next tab\n   *\n   * @private\n   */\n  activateNextTab() {\n    const $currentTab = this.getCurrentTab()\n    if (!$currentTab?.parentElement) {\n      return\n    }\n\n    const $nextTabListItem = $currentTab.parentElement.nextElementSibling\n    if (!$nextTabListItem) {\n      return\n    }\n\n    const $nextTab = $nextTabListItem.querySelector('a.govuk-tabs__tab')\n    if (!$nextTab) {\n      return\n    }\n\n    this.hideTab($currentTab)\n    this.showTab($nextTab)\n    $nextTab.focus()\n    this.createHistoryEntry($nextTab)\n  }\n\n  /**\n   * Activate previous tab\n   *\n   * @private\n   */\n  activatePreviousTab() {\n    const $currentTab = this.getCurrentTab()\n    if (!$currentTab?.parentElement) {\n      return\n    }\n\n    const $previousTabListItem =\n      $currentTab.parentElement.previousElementSibling\n    if (!$previousTabListItem) {\n      return\n    }\n\n    const $previousTab = $previousTabListItem.querySelector('a.govuk-tabs__tab')\n    if (!$previousTab) {\n      return\n    }\n\n    this.hideTab($currentTab)\n    this.showTab($previousTab)\n    $previousTab.focus()\n    this.createHistoryEntry($previousTab)\n  }\n\n  /**\n   * Get tab panel for tab link\n   *\n   * @private\n   * @param {HTMLAnchorElement} $tab - Tab link\n   * @returns {Element | null} Tab panel\n   */\n  getPanel($tab) {\n    const panelId = getFragmentFromUrl($tab.href)\n    if (!panelId) {\n      return null\n    }\n\n    return this.$root.querySelector(`#${panelId}`)\n  }\n\n  /**\n   * Show tab panel for tab link\n   *\n   * @private\n   * @param {HTMLAnchorElement} $tab - Tab link\n   */\n  showPanel($tab) {\n    const $panel = this.getPanel($tab)\n    if (!$panel) {\n      return\n    }\n\n    $panel.classList.remove(this.jsHiddenClass)\n  }\n\n  /**\n   * Hide tab panel for tab link\n   *\n   * @private\n   * @param {HTMLAnchorElement} $tab - Tab link\n   */\n  hidePanel($tab) {\n    const $panel = this.getPanel($tab)\n    if (!$panel) {\n      return\n    }\n\n    $panel.classList.add(this.jsHiddenClass)\n  }\n\n  /**\n   * Unset 'selected' state for tab link\n   *\n   * @private\n   * @param {HTMLAnchorElement} $tab - Tab link\n   */\n  unhighlightTab($tab) {\n    if (!$tab.parentElement) {\n      return\n    }\n\n    $tab.setAttribute('aria-selected', 'false')\n    $tab.parentElement.classList.remove('govuk-tabs__list-item--selected')\n    $tab.setAttribute('tabindex', '-1')\n  }\n\n  /**\n   * Set 'selected' state for tab link\n   *\n   * @private\n   * @param {HTMLAnchorElement} $tab - Tab link\n   */\n  highlightTab($tab) {\n    if (!$tab.parentElement) {\n      return\n    }\n\n    $tab.setAttribute('aria-selected', 'true')\n    $tab.parentElement.classList.add('govuk-tabs__list-item--selected')\n    $tab.setAttribute('tabindex', '0')\n  }\n\n  /**\n   * Get current tab link\n   *\n   * @private\n   * @returns {HTMLAnchorElement | null} Tab link\n   */\n  getCurrentTab() {\n    return this.$root.querySelector(\n      '.govuk-tabs__list-item--selected a.govuk-tabs__tab'\n    )\n  }\n\n  /**\n   * Name for the component used when initialising using data-module attributes.\n   */\n  static moduleName = 'govuk-tabs'\n}\n"],"names":["Tabs","Component","constructor","$root","$tabs","$tabList","$tabListItems","jsHiddenClass","changingHash","boundTabClick","boundTabKeydown","boundOnHashChange","mql","querySelectorAll","length","ElementError","component","identifier","onTabClick","bind","onTabKeydown","onHashChange","querySelector","setupResponsiveChecks","breakpoint","getBreakpoint","value","property","window","matchMedia","addEventListener","checkMode","addListener","_this$mql","matches","setup","teardown","_this$getTab","setAttribute","forEach","$item","$tab","setAttributes","hideTab","$activeTab","getTab","location","hash","showTab","removeAttribute","removeEventListener","unsetAttributes","$tabWithHash","$previousTab","getCurrentTab","focus","unhighlightTab","hidePanel","highlightTab","showPanel","panelId","getFragmentFromUrl","href","$panel","getPanel","id","classList","add","remove","event","$currentTab","$nextTab","currentTarget","HTMLAnchorElement","preventDefault","createHistoryEntry","key","activatePreviousTab","activateNextTab","parentElement","$nextTabListItem","nextElementSibling","$previousTabListItem","previousElementSibling","moduleName"],"mappings":"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"}
+{"version":3,"file":"tabs.mjs","sources":["../../../../src/govuk/components/tabs/tabs.mjs"],"sourcesContent":["import { getBreakpoint } from '../../common/index.mjs'\nimport { Component } from '../../component.mjs'\nimport { ElementError } from '../../errors/index.mjs'\n\n/**\n * Tabs component\n *\n * @preserve\n */\nexport class Tabs extends Component {\n  /** @private */\n  $tabs\n\n  /** @private */\n  $tabList\n\n  /** @private */\n  $tabListItems\n\n  /** @private */\n  jsHiddenClass = 'govuk-tabs__panel--hidden'\n\n  /** @private */\n  changingHash = false\n\n  /** @private */\n  boundTabClick\n\n  /** @private */\n  boundTabKeydown\n\n  /** @private */\n  boundOnHashChange\n\n  /**\n   * @private\n   * @type {MediaQueryList | null}\n   */\n  mql = null\n\n  /**\n   * @param {Element | null} $root - HTML element to use for tabs\n   */\n  constructor($root) {\n    super($root)\n\n    const $tabs = this.$root.querySelectorAll('a.govuk-tabs__tab')\n    if (!$tabs.length) {\n      throw new ElementError({\n        component: Tabs,\n        identifier: 'Links (`<a class=\"govuk-tabs__tab\">`)'\n      })\n    }\n\n    this.$tabs = $tabs\n\n    // Save bound functions so we can remove event listeners during teardown\n    this.boundTabClick = this.onTabClick.bind(this)\n    this.boundTabKeydown = this.onTabKeydown.bind(this)\n    this.boundOnHashChange = this.onHashChange.bind(this)\n\n    const $tabList = this.$root.querySelector('.govuk-tabs__list')\n    const $tabListItems = this.$root.querySelectorAll(\n      'li.govuk-tabs__list-item'\n    )\n\n    if (!$tabList) {\n      throw new ElementError({\n        component: Tabs,\n        identifier: 'List (`<ul class=\"govuk-tabs__list\">`)'\n      })\n    }\n\n    if (!$tabListItems.length) {\n      throw new ElementError({\n        component: Tabs,\n        identifier: 'List items (`<li class=\"govuk-tabs__list-item\">`)'\n      })\n    }\n\n    this.$tabList = $tabList\n    this.$tabListItems = $tabListItems\n\n    this.setupResponsiveChecks()\n  }\n\n  /**\n   * Setup viewport resize check\n   *\n   * @private\n   */\n  setupResponsiveChecks() {\n    const breakpoint = getBreakpoint('tablet')\n\n    if (!breakpoint.value) {\n      throw new ElementError({\n        component: Tabs,\n        identifier: `CSS custom property (\\`${breakpoint.property}\\`) on pseudo-class \\`:root\\``\n      })\n    }\n\n    // Media query list for GOV.UK Frontend tablet breakpoint\n    this.mql = window.matchMedia(`(min-width: ${breakpoint.value})`)\n\n    // MediaQueryList.addEventListener isn't supported by Safari < 14 so we need\n    // to be able to fall back to the deprecated MediaQueryList.addListener\n    if ('addEventListener' in this.mql) {\n      this.mql.addEventListener('change', () => this.checkMode())\n    } else {\n      // @ts-expect-error Property 'addListener' does not exist\n      // eslint-disable-next-line @typescript-eslint/no-unsafe-call\n      this.mql.addListener(() => this.checkMode())\n    }\n\n    this.checkMode()\n  }\n\n  /**\n   * Setup or teardown handler for viewport resize check\n   *\n   * @private\n   */\n  checkMode() {\n    if (this.mql?.matches) {\n      this.setup()\n    } else {\n      this.teardown()\n    }\n  }\n\n  /**\n   * Setup tab component\n   *\n   * @private\n   */\n  setup() {\n    this.$tabList.setAttribute('role', 'tablist')\n\n    this.$tabListItems.forEach(($item) => {\n      $item.setAttribute('role', 'presentation')\n    })\n\n    this.$tabs.forEach(($tab) => {\n      // Set HTML attributes\n      this.setAttributes($tab)\n\n      // Handle events\n      $tab.addEventListener('click', this.boundTabClick, true)\n      $tab.addEventListener('keydown', this.boundTabKeydown, true)\n\n      // Remove old active panels\n      this.hideTab($tab)\n    })\n\n    // Show either the active tab according to the URL's hash or the first tab\n    const $activeTab = this.getTab(window.location.hash) ?? this.$tabs[0]\n\n    this.showTab($activeTab)\n\n    // Handle hashchange events\n    window.addEventListener('hashchange', this.boundOnHashChange, true)\n  }\n\n  /**\n   * Teardown tab component\n   *\n   * @private\n   */\n  teardown() {\n    this.$tabList.removeAttribute('role')\n\n    this.$tabListItems.forEach(($item) => {\n      $item.removeAttribute('role')\n    })\n\n    this.$tabs.forEach(($tab) => {\n      // Remove events\n      $tab.removeEventListener('click', this.boundTabClick, true)\n      $tab.removeEventListener('keydown', this.boundTabKeydown, true)\n\n      // Unset HTML attributes\n      this.unsetAttributes($tab)\n    })\n\n    // Remove hashchange event handler\n    window.removeEventListener('hashchange', this.boundOnHashChange, true)\n  }\n\n  /**\n   * Handle hashchange event\n   *\n   * @private\n   * @returns {void | undefined} Returns void, or undefined when prevented\n   */\n  onHashChange() {\n    const hash = window.location.hash\n    const $tabWithHash = this.getTab(hash)\n    if (!$tabWithHash) {\n      return\n    }\n\n    // Prevent changing the hash\n    if (this.changingHash) {\n      this.changingHash = false\n      return\n    }\n\n    // Show either the active tab according to the URL's hash or the first tab\n    const $previousTab = this.getCurrentTab()\n    if (!$previousTab) {\n      return\n    }\n\n    this.hideTab($previousTab)\n    this.showTab($tabWithHash)\n    $tabWithHash.focus()\n  }\n\n  /**\n   * Hide panel for tab link\n   *\n   * @private\n   * @param {HTMLAnchorElement} $tab - Tab link\n   */\n  hideTab($tab) {\n    this.unhighlightTab($tab)\n    this.hidePanel($tab)\n  }\n\n  /**\n   * Show panel for tab link\n   *\n   * @private\n   * @param {HTMLAnchorElement} $tab - Tab link\n   */\n  showTab($tab) {\n    this.highlightTab($tab)\n    this.showPanel($tab)\n  }\n\n  /**\n   * Get tab link by hash\n   *\n   * @private\n   * @param {string} hash - Hash fragment including #\n   * @returns {HTMLAnchorElement | null} Tab link\n   */\n  getTab(hash) {\n    return this.$root.querySelector(`a.govuk-tabs__tab[href=\"${hash}\"]`)\n  }\n\n  /**\n   * Set tab link and panel attributes\n   *\n   * @private\n   * @param {HTMLAnchorElement} $tab - Tab link\n   */\n  setAttributes($tab) {\n    const panelId = $tab.hash.replace('#', '')\n    if (!panelId) {\n      return\n    }\n\n    // Set tab attributes\n    $tab.setAttribute('id', `tab_${panelId}`)\n    $tab.setAttribute('role', 'tab')\n    $tab.setAttribute('aria-controls', panelId)\n    $tab.setAttribute('aria-selected', 'false')\n    $tab.setAttribute('tabindex', '-1')\n\n    // Set panel attributes\n    const $panel = this.getPanel($tab)\n    if (!$panel) {\n      return\n    }\n\n    $panel.setAttribute('role', 'tabpanel')\n    $panel.setAttribute('aria-labelledby', $tab.id)\n    $panel.classList.add(this.jsHiddenClass)\n  }\n\n  /**\n   * Unset tab link and panel attributes\n   *\n   * @private\n   * @param {HTMLAnchorElement} $tab - Tab link\n   */\n  unsetAttributes($tab) {\n    // unset tab attributes\n    $tab.removeAttribute('id')\n    $tab.removeAttribute('role')\n    $tab.removeAttribute('aria-controls')\n    $tab.removeAttribute('aria-selected')\n    $tab.removeAttribute('tabindex')\n\n    // unset panel attributes\n    const $panel = this.getPanel($tab)\n    if (!$panel) {\n      return\n    }\n\n    $panel.removeAttribute('role')\n    $panel.removeAttribute('aria-labelledby')\n    $panel.classList.remove(this.jsHiddenClass)\n  }\n\n  /**\n   * Handle tab link clicks\n   *\n   * @private\n   * @param {MouseEvent} event - Mouse click event\n   * @returns {void} Returns void\n   */\n  onTabClick(event) {\n    const $currentTab = this.getCurrentTab()\n    const $nextTab = event.currentTarget\n\n    if (!$currentTab || !($nextTab instanceof HTMLAnchorElement)) {\n      return\n    }\n\n    event.preventDefault()\n\n    this.hideTab($currentTab)\n    this.showTab($nextTab)\n    this.createHistoryEntry($nextTab)\n  }\n\n  /**\n   * Update browser URL hash fragment for tab\n   *\n   * - Allows back/forward to navigate tabs\n   * - Avoids page jump when hash changes\n   *\n   * @private\n   * @param {HTMLAnchorElement} $tab - Tab link\n   */\n  createHistoryEntry($tab) {\n    const $panel = this.getPanel($tab)\n    if (!$panel) {\n      return\n    }\n\n    // Save and restore the id so the page doesn't jump when a user clicks a tab\n    // (which changes the hash)\n    const panelId = $panel.id\n    $panel.id = ''\n    this.changingHash = true\n    window.location.hash = panelId\n    $panel.id = panelId\n  }\n\n  /**\n   * Handle tab keydown event\n   *\n   * - Press right arrow for next tab\n   * - Press left arrow for previous tab\n   *\n   * @private\n   * @param {KeyboardEvent} event - Keydown event\n   */\n  onTabKeydown(event) {\n    switch (event.key) {\n      // 'Left' and 'Right' required for Edge 16 support.\n      case 'ArrowLeft':\n      case 'Left':\n        this.activatePreviousTab()\n        event.preventDefault()\n        break\n      case 'ArrowRight':\n      case 'Right':\n        this.activateNextTab()\n        event.preventDefault()\n        break\n    }\n  }\n\n  /**\n   * Activate next tab\n   *\n   * @private\n   */\n  activateNextTab() {\n    const $currentTab = this.getCurrentTab()\n    if (!$currentTab?.parentElement) {\n      return\n    }\n\n    const $nextTabListItem = $currentTab.parentElement.nextElementSibling\n    if (!$nextTabListItem) {\n      return\n    }\n\n    const $nextTab = $nextTabListItem.querySelector('a.govuk-tabs__tab')\n    if (!$nextTab) {\n      return\n    }\n\n    this.hideTab($currentTab)\n    this.showTab($nextTab)\n    $nextTab.focus()\n    this.createHistoryEntry($nextTab)\n  }\n\n  /**\n   * Activate previous tab\n   *\n   * @private\n   */\n  activatePreviousTab() {\n    const $currentTab = this.getCurrentTab()\n    if (!$currentTab?.parentElement) {\n      return\n    }\n\n    const $previousTabListItem =\n      $currentTab.parentElement.previousElementSibling\n    if (!$previousTabListItem) {\n      return\n    }\n\n    const $previousTab = $previousTabListItem.querySelector('a.govuk-tabs__tab')\n    if (!$previousTab) {\n      return\n    }\n\n    this.hideTab($currentTab)\n    this.showTab($previousTab)\n    $previousTab.focus()\n    this.createHistoryEntry($previousTab)\n  }\n\n  /**\n   * Get tab panel for tab link\n   *\n   * @private\n   * @param {HTMLAnchorElement} $tab - Tab link\n   * @returns {Element | null} Tab panel\n   */\n  getPanel($tab) {\n    const panelId = $tab.hash.replace('#', '')\n    if (!panelId) {\n      return null\n    }\n\n    return this.$root.querySelector(`#${panelId}`)\n  }\n\n  /**\n   * Show tab panel for tab link\n   *\n   * @private\n   * @param {HTMLAnchorElement} $tab - Tab link\n   */\n  showPanel($tab) {\n    const $panel = this.getPanel($tab)\n    if (!$panel) {\n      return\n    }\n\n    $panel.classList.remove(this.jsHiddenClass)\n  }\n\n  /**\n   * Hide tab panel for tab link\n   *\n   * @private\n   * @param {HTMLAnchorElement} $tab - Tab link\n   */\n  hidePanel($tab) {\n    const $panel = this.getPanel($tab)\n    if (!$panel) {\n      return\n    }\n\n    $panel.classList.add(this.jsHiddenClass)\n  }\n\n  /**\n   * Unset 'selected' state for tab link\n   *\n   * @private\n   * @param {HTMLAnchorElement} $tab - Tab link\n   */\n  unhighlightTab($tab) {\n    if (!$tab.parentElement) {\n      return\n    }\n\n    $tab.setAttribute('aria-selected', 'false')\n    $tab.parentElement.classList.remove('govuk-tabs__list-item--selected')\n    $tab.setAttribute('tabindex', '-1')\n  }\n\n  /**\n   * Set 'selected' state for tab link\n   *\n   * @private\n   * @param {HTMLAnchorElement} $tab - Tab link\n   */\n  highlightTab($tab) {\n    if (!$tab.parentElement) {\n      return\n    }\n\n    $tab.setAttribute('aria-selected', 'true')\n    $tab.parentElement.classList.add('govuk-tabs__list-item--selected')\n    $tab.setAttribute('tabindex', '0')\n  }\n\n  /**\n   * Get current tab link\n   *\n   * @private\n   * @returns {HTMLAnchorElement | null} Tab link\n   */\n  getCurrentTab() {\n    return this.$root.querySelector(\n      '.govuk-tabs__list-item--selected a.govuk-tabs__tab'\n    )\n  }\n\n  /**\n   * Name for the component used when initialising using data-module attributes.\n   */\n  static moduleName = 'govuk-tabs'\n}\n"],"names":["Tabs","Component","constructor","$root","$tabs","$tabList","$tabListItems","jsHiddenClass","changingHash","boundTabClick","boundTabKeydown","boundOnHashChange","mql","querySelectorAll","length","ElementError","component","identifier","onTabClick","bind","onTabKeydown","onHashChange","querySelector","setupResponsiveChecks","breakpoint","getBreakpoint","value","property","window","matchMedia","addEventListener","checkMode","addListener","_this$mql","matches","setup","teardown","_this$getTab","setAttribute","forEach","$item","$tab","setAttributes","hideTab","$activeTab","getTab","location","hash","showTab","removeAttribute","removeEventListener","unsetAttributes","$tabWithHash","$previousTab","getCurrentTab","focus","unhighlightTab","hidePanel","highlightTab","showPanel","panelId","replace","$panel","getPanel","id","classList","add","remove","event","$currentTab","$nextTab","currentTarget","HTMLAnchorElement","preventDefault","createHistoryEntry","key","activatePreviousTab","activateNextTab","parentElement","$nextTabListItem","nextElementSibling","$previousTabListItem","previousElementSibling","moduleName"],"mappings":"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"}

data/node_modules/govuk-frontend/dist/govuk/components/tag/fixtures.json

@@ -8,8 +8,8 @@
             },
             "hidden": false,
             "description": "",
-            "previewLayoutModifiers": [],
-            "screenshot": false,
+            "pageTemplateOptions": {},
+            "screenshot": true,
             "html": "<strong class=\"govuk-tag\">\n  Alpha\n</strong>"
         },
         {
@@ -20,22 +20,10 @@
             },
             "hidden": false,
             "description": "",
-            "previewLayoutModifiers": [],
+            "pageTemplateOptions": {},
             "screenshot": false,
             "html": "<strong class=\"govuk-tag govuk-tag--grey\">\n  Grey\n</strong>"
         },
-        {
-            "name": "blue",
-            "options": {
-                "text": "Blue",
-                "classes": "govuk-tag--blue"
-            },
-            "hidden": false,
-            "description": "",
-            "previewLayoutModifiers": [],
-            "screenshot": false,
-            "html": "<strong class=\"govuk-tag govuk-tag--blue\">\n  Blue\n</strong>"
-        },
         {
             "name": "light blue",
             "options": {
@@ -44,7 +32,7 @@
             },
             "hidden": false,
             "description": "",
-            "previewLayoutModifiers": [],
+            "pageTemplateOptions": {},
             "screenshot": false,
             "html": "<strong class=\"govuk-tag govuk-tag--light-blue\">\n  Light blue\n</strong>"
         },
@@ -56,7 +44,7 @@
             },
             "hidden": false,
             "description": "",
-            "previewLayoutModifiers": [],
+            "pageTemplateOptions": {},
             "screenshot": false,
             "html": "<strong class=\"govuk-tag govuk-tag--turquoise\">\n  Turquoise\n</strong>"
         },
@@ -68,7 +56,7 @@
             },
             "hidden": false,
             "description": "",
-            "previewLayoutModifiers": [],
+            "pageTemplateOptions": {},
             "screenshot": false,
             "html": "<strong class=\"govuk-tag govuk-tag--green\">\n  Green\n</strong>"
         },
@@ -80,7 +68,7 @@
             },
             "hidden": false,
             "description": "",
-            "previewLayoutModifiers": [],
+            "pageTemplateOptions": {},
             "screenshot": false,
             "html": "<strong class=\"govuk-tag govuk-tag--purple\">\n  Purple\n</strong>"
         },
@@ -92,7 +80,7 @@
             },
             "hidden": false,
             "description": "",
-            "previewLayoutModifiers": [],
+            "pageTemplateOptions": {},
             "screenshot": false,
             "html": "<strong class=\"govuk-tag govuk-tag--pink\">\n  Pink\n</strong>"
         },
@@ -104,7 +92,7 @@
             },
             "hidden": false,
             "description": "",
-            "previewLayoutModifiers": [],
+            "pageTemplateOptions": {},
             "screenshot": false,
             "html": "<strong class=\"govuk-tag govuk-tag--red\">\n  Red\n</strong>"
         },
@@ -116,7 +104,7 @@
             },
             "hidden": false,
             "description": "",
-            "previewLayoutModifiers": [],
+            "pageTemplateOptions": {},
             "screenshot": false,
             "html": "<strong class=\"govuk-tag govuk-tag--orange\">\n  Orange\n</strong>"
         },
@@ -128,7 +116,7 @@
             },
             "hidden": false,
             "description": "",
-            "previewLayoutModifiers": [],
+            "pageTemplateOptions": {},
             "screenshot": false,
             "html": "<strong class=\"govuk-tag govuk-tag--yellow\">\n  Yellow\n</strong>"
         },
@@ -143,7 +131,7 @@
             },
             "hidden": true,
             "description": "",
-            "previewLayoutModifiers": [],
+            "pageTemplateOptions": {},
             "screenshot": false,
             "html": "<strong class=\"govuk-tag\" data-test=\"attribute\" id=\"my-tag\">\n  Tag with attributes\n</strong>"
         },
@@ -154,7 +142,7 @@
             },
             "hidden": true,
             "description": "",
-            "previewLayoutModifiers": [],
+            "pageTemplateOptions": {},
             "screenshot": false,
             "html": "<strong class=\"govuk-tag\">\n  &lt;span&gt;Alpha&lt;/span&gt;\n</strong>"
         },
@@ -165,7 +153,7 @@
             },
             "hidden": true,
             "description": "",
-            "previewLayoutModifiers": [],
+            "pageTemplateOptions": {},
             "screenshot": false,
             "html": "<strong class=\"govuk-tag\">\n  <span>Alpha</span>\n</strong>"
         }

data/node_modules/govuk-frontend/dist/govuk/components/task-list/fixtures.json

@@ -42,69 +42,12 @@
             },
             "hidden": false,
             "description": "",
-            "previewLayoutModifiers": [],
+            "pageTemplateOptions": {},
             "screenshot": false,
             "html": "<ul class=\"govuk-task-list\">\n  <li class=\"govuk-task-list__item govuk-task-list__item--with-link\">\n    <div class=\"govuk-task-list__name-and-hint\">\n      <a class=\"govuk-link govuk-task-list__link\" href=\"#\" aria-describedby=\"task-list-1-status\">\n        Company Directors\n      </a>\n    </div>\n    <div class=\"govuk-task-list__status\" id=\"task-list-1-status\">\n      Completed\n    </div>\n  </li>\n  <li class=\"govuk-task-list__item govuk-task-list__item--with-link\">\n    <div class=\"govuk-task-list__name-and-hint\">\n      <a class=\"govuk-link govuk-task-list__link\" href=\"#\" aria-describedby=\"task-list-2-status\">\n        Registered company details\n      </a>\n    </div>\n    <div class=\"govuk-task-list__status\" id=\"task-list-2-status\">\n      <strong class=\"govuk-tag govuk-tag--blue\">\n        Incomplete\n      </strong>\n    </div>\n  </li>\n  <li class=\"govuk-task-list__item govuk-task-list__item--with-link\">\n    <div class=\"govuk-task-list__name-and-hint\">\n      <a class=\"govuk-link govuk-task-list__link\" href=\"#\" aria-describedby=\"task-list-3-status\">\n        Business plan\n      </a>\n    </div>\n    <div class=\"govuk-task-list__status\" id=\"task-list-3-status\">\n      <strong class=\"govuk-tag govuk-tag--blue\">\n        Incomplete\n      </strong>\n    </div>\n  </li>\n</ul>"
         },
         {
-            "name": "example with 3 states",
-            "options": {
-                "items": [
-                    {
-                        "title": {
-                            "text": "Company Directors"
-                        },
-                        "href": "#",
-                        "status": {
-                            "text": "Completed"
-                        }
-                    },
-                    {
-                        "title": {
-                            "text": "Registered company details"
-                        },
-                        "href": "#",
-                        "status": {
-                            "tag": {
-                                "text": "Not started",
-                                "classes": "govuk-tag--light-blue"
-                            }
-                        }
-                    },
-                    {
-                        "title": {
-                            "text": "Business plan"
-                        },
-                        "href": "#",
-                        "status": {
-                            "tag": {
-                                "text": "In progress",
-                                "classes": "govuk-tag--blue"
-                            }
-                        }
-                    },
-                    {
-                        "title": {
-                            "text": "Documentation"
-                        },
-                        "href": "#",
-                        "status": {
-                            "tag": {
-                                "text": "Not started",
-                                "classes": "govuk-tag--light-blue"
-                            }
-                        }
-                    }
-                ]
-            },
-            "hidden": false,
-            "description": "",
-            "previewLayoutModifiers": [],
-            "screenshot": false,
-            "html": "<ul class=\"govuk-task-list\">\n  <li class=\"govuk-task-list__item govuk-task-list__item--with-link\">\n    <div class=\"govuk-task-list__name-and-hint\">\n      <a class=\"govuk-link govuk-task-list__link\" href=\"#\" aria-describedby=\"task-list-1-status\">\n        Company Directors\n      </a>\n    </div>\n    <div class=\"govuk-task-list__status\" id=\"task-list-1-status\">\n      Completed\n    </div>\n  </li>\n  <li class=\"govuk-task-list__item govuk-task-list__item--with-link\">\n    <div class=\"govuk-task-list__name-and-hint\">\n      <a class=\"govuk-link govuk-task-list__link\" href=\"#\" aria-describedby=\"task-list-2-status\">\n        Registered company details\n      </a>\n    </div>\n    <div class=\"govuk-task-list__status\" id=\"task-list-2-status\">\n      <strong class=\"govuk-tag govuk-tag--light-blue\">\n        Not started\n      </strong>\n    </div>\n  </li>\n  <li class=\"govuk-task-list__item govuk-task-list__item--with-link\">\n    <div class=\"govuk-task-list__name-and-hint\">\n      <a class=\"govuk-link govuk-task-list__link\" href=\"#\" aria-describedby=\"task-list-3-status\">\n        Business plan\n      </a>\n    </div>\n    <div class=\"govuk-task-list__status\" id=\"task-list-3-status\">\n      <strong class=\"govuk-tag govuk-tag--blue\">\n        In progress\n      </strong>\n    </div>\n  </li>\n  <li class=\"govuk-task-list__item govuk-task-list__item--with-link\">\n    <div class=\"govuk-task-list__name-and-hint\">\n      <a class=\"govuk-link govuk-task-list__link\" href=\"#\" aria-describedby=\"task-list-4-status\">\n        Documentation\n      </a>\n    </div>\n    <div class=\"govuk-task-list__status\" id=\"task-list-4-status\">\n      <strong class=\"govuk-tag govuk-tag--light-blue\">\n        Not started\n      </strong>\n    </div>\n  </li>\n</ul>"
-        },
-        {
-            "name": "example with hint text and additional states",
+            "name": "with hint text and additional states",
             "options": {
                 "items": [
                     {
@@ -183,12 +126,12 @@
             },
             "hidden": false,
             "description": "",
-            "previewLayoutModifiers": [],
-            "screenshot": false,
+            "pageTemplateOptions": {},
+            "screenshot": true,
             "html": "<ul class=\"govuk-task-list\">\n  <li class=\"govuk-task-list__item govuk-task-list__item--with-link\">\n    <div class=\"govuk-task-list__name-and-hint\">\n      <a class=\"govuk-link govuk-task-list__link\" href=\"#\" aria-describedby=\"task-list-1-status\">\n        Company Directors\n      </a>\n    </div>\n    <div class=\"govuk-task-list__status\" id=\"task-list-1-status\">\n      Completed\n    </div>\n  </li>\n  <li class=\"govuk-task-list__item govuk-task-list__item--with-link\">\n    <div class=\"govuk-task-list__name-and-hint\">\n      <a class=\"govuk-link govuk-task-list__link\" href=\"#\" aria-describedby=\"task-list-2-status\">\n        Registered company details\n      </a>\n    </div>\n    <div class=\"govuk-task-list__status\" id=\"task-list-2-status\">\n      <strong class=\"govuk-tag govuk-tag--light-blue\">\n        Not started\n      </strong>\n    </div>\n  </li>\n  <li class=\"govuk-task-list__item govuk-task-list__item--with-link\">\n    <div class=\"govuk-task-list__name-and-hint\">\n      <a class=\"govuk-link govuk-task-list__link\" href=\"#\" aria-describedby=\"task-list-3-hint task-list-3-status\">\n        Business plan\n      </a>\n      <div id=\"task-list-3-hint\" class=\"govuk-task-list__hint\">\n        Ensure the plan covers objectives, strategies, sales, marketing and financial forecasts.\n      </div>\n    </div>\n    <div class=\"govuk-task-list__status\" id=\"task-list-3-status\">\n      <strong class=\"govuk-tag govuk-tag--pink\">\n        Review\n      </strong>\n    </div>\n  </li>\n  <li class=\"govuk-task-list__item govuk-task-list__item--with-link\">\n    <div class=\"govuk-task-list__name-and-hint\">\n      <a class=\"govuk-link govuk-task-list__link\" href=\"#\" aria-describedby=\"task-list-4-status\">\n        Documentation\n      </a>\n    </div>\n    <div class=\"govuk-task-list__status\" id=\"task-list-4-status\">\n      <strong class=\"govuk-tag govuk-tag--blue\">\n        In progress\n      </strong>\n    </div>\n  </li>\n  <li class=\"govuk-task-list__item govuk-task-list__item--with-link\">\n    <div class=\"govuk-task-list__name-and-hint\">\n      <a class=\"govuk-link govuk-task-list__link\" href=\"#\" aria-describedby=\"task-list-5-status\">\n        Charitable status\n      </a>\n    </div>\n    <div class=\"govuk-task-list__status\" id=\"task-list-5-status\">\n      <strong class=\"govuk-tag govuk-tag--red\">\n        Error\n      </strong>\n    </div>\n  </li>\n  <li class=\"govuk-task-list__item\">\n    <div class=\"govuk-task-list__name-and-hint\">\n      <div>\n        Payment\n      </div>\n      <div id=\"task-list-6-hint\" class=\"govuk-task-list__hint\">\n        It will cost between £15 and £75\n      </div>\n    </div>\n    <div class=\"govuk-task-list__status govuk-task-list__status--cannot-start-yet\" id=\"task-list-6-status\">\n      Cannot start yet\n    </div>\n  </li>\n</ul>"
         },
         {
-            "name": "example with all possible colours",
+            "name": "with all possible colours",
             "options": {
                 "items": [
                     {
@@ -334,12 +277,12 @@
             },
             "hidden": false,
             "description": "",
-            "previewLayoutModifiers": [],
+            "pageTemplateOptions": {},
             "screenshot": false,
             "html": "<ul class=\"govuk-task-list\">\n  <li class=\"govuk-task-list__item govuk-task-list__item--with-link\">\n    <div class=\"govuk-task-list__name-and-hint\">\n      <a class=\"govuk-link govuk-task-list__link\" href=\"#\" aria-describedby=\"task-list-1-status\">\n        Task A\n      </a>\n    </div>\n    <div class=\"govuk-task-list__status\" id=\"task-list-1-status\">\n      Text colour\n    </div>\n  </li>\n  <li class=\"govuk-task-list__item govuk-task-list__item--with-link\">\n    <div class=\"govuk-task-list__name-and-hint\">\n      <a class=\"govuk-link govuk-task-list__link\" href=\"#\" aria-describedby=\"task-list-2-status\">\n        Task B\n      </a>\n    </div>\n    <div class=\"govuk-task-list__status govuk-task-list__status--cannot-start-yet\" id=\"task-list-2-status\">\n      Secondary text colour\n    </div>\n  </li>\n  <li class=\"govuk-task-list__item govuk-task-list__item--with-link\">\n    <div class=\"govuk-task-list__name-and-hint\">\n      <a class=\"govuk-link govuk-task-list__link\" href=\"#\" aria-describedby=\"task-list-3-status\">\n        Task C\n      </a>\n    </div>\n    <div class=\"govuk-task-list__status\" id=\"task-list-3-status\">\n      <strong class=\"govuk-tag govuk-tag--grey\">\n        Grey\n      </strong>\n    </div>\n  </li>\n  <li class=\"govuk-task-list__item govuk-task-list__item--with-link\">\n    <div class=\"govuk-task-list__name-and-hint\">\n      <a class=\"govuk-link govuk-task-list__link\" href=\"#\" aria-describedby=\"task-list-4-status\">\n        Task D\n      </a>\n    </div>\n    <div class=\"govuk-task-list__status\" id=\"task-list-4-status\">\n      <strong class=\"govuk-tag govuk-tag--blue\">\n        Blue\n      </strong>\n    </div>\n  </li>\n  <li class=\"govuk-task-list__item govuk-task-list__item--with-link\">\n    <div class=\"govuk-task-list__name-and-hint\">\n      <a class=\"govuk-link govuk-task-list__link\" href=\"#\" aria-describedby=\"task-list-5-status\">\n        Task E\n      </a>\n    </div>\n    <div class=\"govuk-task-list__status\" id=\"task-list-5-status\">\n      <strong class=\"govuk-tag govuk-tag--light-blue\">\n        Light blue\n      </strong>\n    </div>\n  </li>\n  <li class=\"govuk-task-list__item govuk-task-list__item--with-link\">\n    <div class=\"govuk-task-list__name-and-hint\">\n      <a class=\"govuk-link govuk-task-list__link\" href=\"#\" aria-describedby=\"task-list-6-status\">\n        Task F\n      </a>\n    </div>\n    <div class=\"govuk-task-list__status\" id=\"task-list-6-status\">\n      <strong class=\"govuk-tag govuk-tag--turquoise\">\n        Turquoise\n      </strong>\n    </div>\n  </li>\n  <li class=\"govuk-task-list__item govuk-task-list__item--with-link\">\n    <div class=\"govuk-task-list__name-and-hint\">\n      <a class=\"govuk-link govuk-task-list__link\" href=\"#\" aria-describedby=\"task-list-7-status\">\n        Task G\n      </a>\n    </div>\n    <div class=\"govuk-task-list__status\" id=\"task-list-7-status\">\n      <strong class=\"govuk-tag govuk-tag--green\">\n        Green\n      </strong>\n    </div>\n  </li>\n  <li class=\"govuk-task-list__item govuk-task-list__item--with-link\">\n    <div class=\"govuk-task-list__name-and-hint\">\n      <a class=\"govuk-link govuk-task-list__link\" href=\"#\" aria-describedby=\"task-list-8-status\">\n        Task H\n      </a>\n    </div>\n    <div class=\"govuk-task-list__status\" id=\"task-list-8-status\">\n      <strong class=\"govuk-tag govuk-tag--purple\">\n        Purple\n      </strong>\n    </div>\n  </li>\n  <li class=\"govuk-task-list__item govuk-task-list__item--with-link\">\n    <div class=\"govuk-task-list__name-and-hint\">\n      <a class=\"govuk-link govuk-task-list__link\" href=\"#\" aria-describedby=\"task-list-9-status\">\n        Task I\n      </a>\n    </div>\n    <div class=\"govuk-task-list__status\" id=\"task-list-9-status\">\n      <strong class=\"govuk-tag govuk-tag--pink\">\n        Pink\n      </strong>\n    </div>\n  </li>\n  <li class=\"govuk-task-list__item govuk-task-list__item--with-link\">\n    <div class=\"govuk-task-list__name-and-hint\">\n      <a class=\"govuk-link govuk-task-list__link\" href=\"#\" aria-describedby=\"task-list-10-status\">\n        Task J\n      </a>\n    </div>\n    <div class=\"govuk-task-list__status\" id=\"task-list-10-status\">\n      <strong class=\"govuk-tag govuk-tag--red\">\n        Red\n      </strong>\n    </div>\n  </li>\n  <li class=\"govuk-task-list__item govuk-task-list__item--with-link\">\n    <div class=\"govuk-task-list__name-and-hint\">\n      <a class=\"govuk-link govuk-task-list__link\" href=\"#\" aria-describedby=\"task-list-11-status\">\n        Task K\n      </a>\n    </div>\n    <div class=\"govuk-task-list__status\" id=\"task-list-11-status\">\n      <strong class=\"govuk-tag govuk-tag--orange\">\n        Orange\n      </strong>\n    </div>\n  </li>\n  <li class=\"govuk-task-list__item govuk-task-list__item--with-link\">\n    <div class=\"govuk-task-list__name-and-hint\">\n      <a class=\"govuk-link govuk-task-list__link\" href=\"#\" aria-describedby=\"task-list-12-status\">\n        Task L\n      </a>\n    </div>\n    <div class=\"govuk-task-list__status\" id=\"task-list-12-status\">\n      <strong class=\"govuk-tag govuk-tag--yellow\">\n        Yellow\n      </strong>\n    </div>\n  </li>\n</ul>"
         },
         {
-            "name": "example with very long single word tags",
+            "name": "with very long single word tags",
             "options": {
                 "items": [
                     {
@@ -379,7 +322,7 @@
             },
             "hidden": false,
             "description": "",
-            "previewLayoutModifiers": [],
+            "pageTemplateOptions": {},
             "screenshot": false,
             "html": "<ul class=\"govuk-task-list\">\n  <li class=\"govuk-task-list__item govuk-task-list__item--with-link\">\n    <div class=\"govuk-task-list__name-and-hint\">\n      <a class=\"govuk-link govuk-task-list__link\" href=\"#\" aria-describedby=\"task-list-1-status\">\n        Company Directors\n      </a>\n    </div>\n    <div class=\"govuk-task-list__status\" id=\"task-list-1-status\">\n      Completed\n    </div>\n  </li>\n  <li class=\"govuk-task-list__item govuk-task-list__item--with-link\">\n    <div class=\"govuk-task-list__name-and-hint\">\n      <a class=\"govuk-link govuk-task-list__link\" href=\"#\" aria-describedby=\"task-list-2-status\">\n        Registered company details\n      </a>\n    </div>\n    <div class=\"govuk-task-list__status\" id=\"task-list-2-status\">\n      <strong class=\"govuk-tag govuk-tag--blue\">\n        Incomplete\n      </strong>\n    </div>\n  </li>\n  <li class=\"govuk-task-list__item govuk-task-list__item--with-link\">\n    <div class=\"govuk-task-list__name-and-hint\">\n      <a class=\"govuk-link govuk-task-list__link\" href=\"#\" aria-describedby=\"task-list-3-status\">\n        A very very very long Business plan\n      </a>\n    </div>\n    <div class=\"govuk-task-list__status\" id=\"task-list-3-status\">\n      <strong class=\"govuk-tag govuk-tag--blue\">\n        Thisisaverylongwaytosaythatsomethingisincomplete\n      </strong>\n    </div>\n  </li>\n</ul>"
         },
@@ -418,7 +361,7 @@
             },
             "hidden": true,
             "description": "",
-            "previewLayoutModifiers": [],
+            "pageTemplateOptions": {},
             "screenshot": false,
             "html": "<ul class=\"govuk-task-list custom-class-on-component\">\n  <li class=\"govuk-task-list__item govuk-task-list__item--with-link custom-class-on-task\">\n    <div class=\"govuk-task-list__name-and-hint\">\n      <a class=\"govuk-link govuk-task-list__link custom-class-on-linked-title\" href=\"#\" aria-describedby=\"task-list-1-status\">\n        A Link\n      </a>\n    </div>\n    <div class=\"govuk-task-list__status custom-class-on-status\" id=\"task-list-1-status\">\n      <strong class=\"govuk-tag custom-class-on-tag\">\n        Status\n      </strong>\n    </div>\n  </li>\n  <li class=\"govuk-task-list__item\">\n    <div class=\"govuk-task-list__name-and-hint\">\n      <div class=\"custom-class-on-unlinked-title\">\n        Not a link\n      </div>\n    </div>\n    <div class=\"govuk-task-list__status\" id=\"task-list-2-status\">\n      <strong class=\"govuk-tag\">\n        Status\n      </strong>\n    </div>\n  </li>\n</ul>"
         },
@@ -447,7 +390,7 @@
             },
             "hidden": true,
             "description": "",
-            "previewLayoutModifiers": [],
+            "pageTemplateOptions": {},
             "screenshot": false,
             "html": "<ul class=\"govuk-task-list\" data-custom-attribute=\"custom-value\">\n  <li class=\"govuk-task-list__item govuk-task-list__item--with-link\">\n    <div class=\"govuk-task-list__name-and-hint\">\n      <a class=\"govuk-link govuk-task-list__link\" href=\"#\" aria-describedby=\"task-list-1-status\">\n        A Link\n      </a>\n    </div>\n    <div class=\"govuk-task-list__status\" id=\"task-list-1-status\">\n      <strong class=\"govuk-tag\" data-tag-attribute=\"tag-value\">\n        Status\n      </strong>\n    </div>\n  </li>\n</ul>"
         },
@@ -474,7 +417,7 @@
             },
             "hidden": true,
             "description": "",
-            "previewLayoutModifiers": [],
+            "pageTemplateOptions": {},
             "screenshot": false,
             "html": "<ul class=\"govuk-task-list\">\n  <li class=\"govuk-task-list__item govuk-task-list__item--with-link\">\n    <div class=\"govuk-task-list__name-and-hint\">\n      <a class=\"govuk-link govuk-task-list__link\" href=\"#\" aria-describedby=\"my-custom-id-1-hint my-custom-id-1-status\">\n        A Link\n      </a>\n      <div id=\"my-custom-id-1-hint\" class=\"govuk-task-list__hint\">\n        Hint text\n      </div>\n    </div>\n    <div class=\"govuk-task-list__status\" id=\"my-custom-id-1-status\">\n      <strong class=\"govuk-tag\">\n        Status\n      </strong>\n    </div>\n  </li>\n</ul>"
         },
@@ -509,7 +452,7 @@
             },
             "hidden": true,
             "description": "",
-            "previewLayoutModifiers": [],
+            "pageTemplateOptions": {},
             "screenshot": false,
             "html": "<ul class=\"govuk-task-list\">\n  <li class=\"govuk-task-list__item govuk-task-list__item--with-link\">\n    <div class=\"govuk-task-list__name-and-hint\">\n      <a class=\"govuk-link govuk-task-list__link\" href=\"#\" aria-describedby=\"my-custom-id-1-hint my-custom-id-1-status\">\n        &lt;strong&gt;Linked Title&lt;/strong&gt;\n      </a>\n      <div id=\"my-custom-id-1-hint\" class=\"govuk-task-list__hint\">\n        &lt;strong&gt;Hint&lt;/strong&gt;\n      </div>\n    </div>\n    <div class=\"govuk-task-list__status\" id=\"my-custom-id-1-status\">\n      &lt;strong&gt;Status&lt;/strong&gt;\n    </div>\n  </li>\n  <li class=\"govuk-task-list__item\">\n    <div class=\"govuk-task-list__name-and-hint\">\n      <div>\n        &lt;strong&gt;Unlinked Title&lt;/strong&gt;\n      </div>\n    </div>\n    <div class=\"govuk-task-list__status\" id=\"my-custom-id-2-status\">\n      <strong class=\"govuk-tag\">\n        &lt;strong&gt;Tag&lt;/strong&gt;\n      </strong>\n    </div>\n  </li>\n</ul>"
         },
@@ -544,7 +487,7 @@
             },
             "hidden": true,
             "description": "",
-            "previewLayoutModifiers": [],
+            "pageTemplateOptions": {},
             "screenshot": false,
             "html": "<ul class=\"govuk-task-list\">\n  <li class=\"govuk-task-list__item govuk-task-list__item--with-link\">\n    <div class=\"govuk-task-list__name-and-hint\">\n      <a class=\"govuk-link govuk-task-list__link\" href=\"#\" aria-describedby=\"my-custom-id-1-hint my-custom-id-1-status\">\n        <strong>Linked Title</strong>\n      </a>\n      <div id=\"my-custom-id-1-hint\" class=\"govuk-task-list__hint\">\n        <strong>Hint</strong>\n      </div>\n    </div>\n    <div class=\"govuk-task-list__status\" id=\"my-custom-id-1-status\">\n      <strong>Status</strong>\n    </div>\n  </li>\n  <li class=\"govuk-task-list__item\">\n    <div class=\"govuk-task-list__name-and-hint\">\n      <div>\n        <strong>Unlinked Title</strong>\n      </div>\n    </div>\n    <div class=\"govuk-task-list__status\" id=\"my-custom-id-2-status\">\n      <strong class=\"govuk-tag\">\n        <strong>Tag</strong>\n      </strong>\n    </div>\n  </li>\n</ul>"
         },
@@ -578,7 +521,7 @@
             },
             "hidden": false,
             "description": "",
-            "previewLayoutModifiers": [],
+            "pageTemplateOptions": {},
             "screenshot": false,
             "html": "<ul class=\"govuk-task-list\">\n\n\n  <li class=\"govuk-task-list__item govuk-task-list__item--with-link\">\n    <div class=\"govuk-task-list__name-and-hint\">\n      <a class=\"govuk-link govuk-task-list__link\" href=\"#\" aria-describedby=\"task-list-3-status\">\n        Task A\n      </a>\n    </div>\n    <div class=\"govuk-task-list__status\" id=\"task-list-3-status\">\n      Completed\n    </div>\n  </li>\n\n\n  <li class=\"govuk-task-list__item govuk-task-list__item--with-link\">\n    <div class=\"govuk-task-list__name-and-hint\">\n      <a class=\"govuk-link govuk-task-list__link\" href=\"#\" aria-describedby=\"task-list-6-status\">\n        Task B\n      </a>\n    </div>\n    <div class=\"govuk-task-list__status\" id=\"task-list-6-status\">\n      Completed\n    </div>\n  </li>\n</ul>"
         }