govuk_tech_docs 3.5.0 → 4.0.0

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

@@ -0,0 +1,283 @@
+import { getBreakpoint, getFragmentFromUrl } from '../../common/index.mjs';
+import { ElementError } from '../../errors/index.mjs';
+import { GOVUKFrontendComponent } from '../../govuk-frontend-component.mjs';
+
+/**
+ * Tabs component
+ *
+ * @preserve
+ */
+class Tabs extends GOVUKFrontendComponent {
+  /**
+   * @param {Element | null} $root - HTML element to use for tabs
+   */
+  constructor($root) {
+    super($root);
+    this.$tabs = void 0;
+    this.$tabList = void 0;
+    this.$tabListItems = void 0;
+    this.jsHiddenClass = 'govuk-tabs__panel--hidden';
+    this.changingHash = false;
+    this.boundTabClick = void 0;
+    this.boundTabKeydown = void 0;
+    this.boundOnHashChange = void 0;
+    this.mql = null;
+    const $tabs = this.$root.querySelectorAll('a.govuk-tabs__tab');
+    if (!$tabs.length) {
+      throw new ElementError({
+        component: Tabs,
+        identifier: 'Links (`<a class="govuk-tabs__tab">`)'
+      });
+    }
+    this.$tabs = $tabs;
+    this.boundTabClick = this.onTabClick.bind(this);
+    this.boundTabKeydown = this.onTabKeydown.bind(this);
+    this.boundOnHashChange = this.onHashChange.bind(this);
+    const $tabList = this.$root.querySelector('.govuk-tabs__list');
+    const $tabListItems = this.$root.querySelectorAll('li.govuk-tabs__list-item');
+    if (!$tabList) {
+      throw new ElementError({
+        component: Tabs,
+        identifier: 'List (`<ul class="govuk-tabs__list">`)'
+      });
+    }
+    if (!$tabListItems.length) {
+      throw new ElementError({
+        component: Tabs,
+        identifier: 'List items (`<li class="govuk-tabs__list-item">`)'
+      });
+    }
+    this.$tabList = $tabList;
+    this.$tabListItems = $tabListItems;
+    this.setupResponsiveChecks();
+  }
+  setupResponsiveChecks() {
+    const breakpoint = getBreakpoint('tablet');
+    if (!breakpoint.value) {
+      throw new ElementError({
+        component: Tabs,
+        identifier: `CSS custom property (\`${breakpoint.property}\`) on pseudo-class \`:root\``
+      });
+    }
+    this.mql = window.matchMedia(`(min-width: ${breakpoint.value})`);
+    if ('addEventListener' in this.mql) {
+      this.mql.addEventListener('change', () => this.checkMode());
+    } else {
+      this.mql.addListener(() => this.checkMode());
+    }
+    this.checkMode();
+  }
+  checkMode() {
+    var _this$mql;
+    if ((_this$mql = this.mql) != null && _this$mql.matches) {
+      this.setup();
+    } else {
+      this.teardown();
+    }
+  }
+  setup() {
+    var _this$getTab;
+    this.$tabList.setAttribute('role', 'tablist');
+    this.$tabListItems.forEach($item => {
+      $item.setAttribute('role', 'presentation');
+    });
+    this.$tabs.forEach($tab => {
+      this.setAttributes($tab);
+      $tab.addEventListener('click', this.boundTabClick, true);
+      $tab.addEventListener('keydown', this.boundTabKeydown, true);
+      this.hideTab($tab);
+    });
+    const $activeTab = (_this$getTab = this.getTab(window.location.hash)) != null ? _this$getTab : this.$tabs[0];
+    this.showTab($activeTab);
+    window.addEventListener('hashchange', this.boundOnHashChange, true);
+  }
+  teardown() {
+    this.$tabList.removeAttribute('role');
+    this.$tabListItems.forEach($item => {
+      $item.removeAttribute('role');
+    });
+    this.$tabs.forEach($tab => {
+      $tab.removeEventListener('click', this.boundTabClick, true);
+      $tab.removeEventListener('keydown', this.boundTabKeydown, true);
+      this.unsetAttributes($tab);
+    });
+    window.removeEventListener('hashchange', this.boundOnHashChange, true);
+  }
+  onHashChange() {
+    const hash = window.location.hash;
+    const $tabWithHash = this.getTab(hash);
+    if (!$tabWithHash) {
+      return;
+    }
+    if (this.changingHash) {
+      this.changingHash = false;
+      return;
+    }
+    const $previousTab = this.getCurrentTab();
+    if (!$previousTab) {
+      return;
+    }
+    this.hideTab($previousTab);
+    this.showTab($tabWithHash);
+    $tabWithHash.focus();
+  }
+  hideTab($tab) {
+    this.unhighlightTab($tab);
+    this.hidePanel($tab);
+  }
+  showTab($tab) {
+    this.highlightTab($tab);
+    this.showPanel($tab);
+  }
+  getTab(hash) {
+    return this.$root.querySelector(`a.govuk-tabs__tab[href="${hash}"]`);
+  }
+  setAttributes($tab) {
+    const panelId = getFragmentFromUrl($tab.href);
+    if (!panelId) {
+      return;
+    }
+    $tab.setAttribute('id', `tab_${panelId}`);
+    $tab.setAttribute('role', 'tab');
+    $tab.setAttribute('aria-controls', panelId);
+    $tab.setAttribute('aria-selected', 'false');
+    $tab.setAttribute('tabindex', '-1');
+    const $panel = this.getPanel($tab);
+    if (!$panel) {
+      return;
+    }
+    $panel.setAttribute('role', 'tabpanel');
+    $panel.setAttribute('aria-labelledby', $tab.id);
+    $panel.classList.add(this.jsHiddenClass);
+  }
+  unsetAttributes($tab) {
+    $tab.removeAttribute('id');
+    $tab.removeAttribute('role');
+    $tab.removeAttribute('aria-controls');
+    $tab.removeAttribute('aria-selected');
+    $tab.removeAttribute('tabindex');
+    const $panel = this.getPanel($tab);
+    if (!$panel) {
+      return;
+    }
+    $panel.removeAttribute('role');
+    $panel.removeAttribute('aria-labelledby');
+    $panel.classList.remove(this.jsHiddenClass);
+  }
+  onTabClick(event) {
+    const $currentTab = this.getCurrentTab();
+    const $nextTab = event.currentTarget;
+    if (!$currentTab || !($nextTab instanceof HTMLAnchorElement)) {
+      return;
+    }
+    event.preventDefault();
+    this.hideTab($currentTab);
+    this.showTab($nextTab);
+    this.createHistoryEntry($nextTab);
+  }
+  createHistoryEntry($tab) {
+    const $panel = this.getPanel($tab);
+    if (!$panel) {
+      return;
+    }
+    const panelId = $panel.id;
+    $panel.id = '';
+    this.changingHash = true;
+    window.location.hash = panelId;
+    $panel.id = panelId;
+  }
+  onTabKeydown(event) {
+    switch (event.key) {
+      case 'ArrowLeft':
+      case 'Left':
+        this.activatePreviousTab();
+        event.preventDefault();
+        break;
+      case 'ArrowRight':
+      case 'Right':
+        this.activateNextTab();
+        event.preventDefault();
+        break;
+    }
+  }
+  activateNextTab() {
+    const $currentTab = this.getCurrentTab();
+    if (!($currentTab != null && $currentTab.parentElement)) {
+      return;
+    }
+    const $nextTabListItem = $currentTab.parentElement.nextElementSibling;
+    if (!$nextTabListItem) {
+      return;
+    }
+    const $nextTab = $nextTabListItem.querySelector('a.govuk-tabs__tab');
+    if (!$nextTab) {
+      return;
+    }
+    this.hideTab($currentTab);
+    this.showTab($nextTab);
+    $nextTab.focus();
+    this.createHistoryEntry($nextTab);
+  }
+  activatePreviousTab() {
+    const $currentTab = this.getCurrentTab();
+    if (!($currentTab != null && $currentTab.parentElement)) {
+      return;
+    }
+    const $previousTabListItem = $currentTab.parentElement.previousElementSibling;
+    if (!$previousTabListItem) {
+      return;
+    }
+    const $previousTab = $previousTabListItem.querySelector('a.govuk-tabs__tab');
+    if (!$previousTab) {
+      return;
+    }
+    this.hideTab($currentTab);
+    this.showTab($previousTab);
+    $previousTab.focus();
+    this.createHistoryEntry($previousTab);
+  }
+  getPanel($tab) {
+    const panelId = getFragmentFromUrl($tab.href);
+    if (!panelId) {
+      return null;
+    }
+    return this.$root.querySelector(`#${panelId}`);
+  }
+  showPanel($tab) {
+    const $panel = this.getPanel($tab);
+    if (!$panel) {
+      return;
+    }
+    $panel.classList.remove(this.jsHiddenClass);
+  }
+  hidePanel($tab) {
+    const $panel = this.getPanel($tab);
+    if (!$panel) {
+      return;
+    }
+    $panel.classList.add(this.jsHiddenClass);
+  }
+  unhighlightTab($tab) {
+    if (!$tab.parentElement) {
+      return;
+    }
+    $tab.setAttribute('aria-selected', 'false');
+    $tab.parentElement.classList.remove('govuk-tabs__list-item--selected');
+    $tab.setAttribute('tabindex', '-1');
+  }
+  highlightTab($tab) {
+    if (!$tab.parentElement) {
+      return;
+    }
+    $tab.setAttribute('aria-selected', 'true');
+    $tab.parentElement.classList.add('govuk-tabs__list-item--selected');
+    $tab.setAttribute('tabindex', '0');
+  }
+  getCurrentTab() {
+    return this.$root.querySelector('.govuk-tabs__list-item--selected a.govuk-tabs__tab');
+  }
+}
+Tabs.moduleName = 'govuk-tabs';
+
+export { Tabs };
+//# sourceMappingURL=tabs.mjs.map

data/node_modules/govuk-frontend/dist/govuk/components/tag/_index.scss

@@ -0,0 +1,97 @@
+@include govuk-exports("govuk/component/tag") {
+  $govuk-tag-max-width: if(map-has-key($govuk-breakpoints, "mobile"), map-get($govuk-breakpoints, "mobile") / 2, 160px);
+
+  .govuk-tag {
+    @include govuk-font($size: 19);
+
+    display: inline-block;
+
+    // set a max-width along with overflow-wrap: break-word below for instances
+    // where a tag has a single long word and could overflow its boundaries.
+    // The max-width is necessary as break-word requires a bounding box to base
+    // where to break off of.
+    max-width: $govuk-tag-max-width;
+
+    // These negative margins make sure that the tag component doesn’t increase
+    // the size of its container. Otherwise, for example, a table row containing
+    // a tag will be taller than one containing plain text.
+    //
+    // The negative margin added to the top and bottom matches the extra padding
+    // added.
+    margin-top: -2px;
+    margin-bottom: -3px;
+
+    padding-top: 2px;
+    padding-right: 8px;
+    padding-bottom: 3px;
+    padding-left: 8px;
+    color: govuk-shade(govuk-colour("blue"), 60%);
+    background-color: govuk-tint(govuk-colour("blue"), 70%);
+    text-decoration: none;
+    overflow-wrap: break-word;
+
+    // When forced colour mode is active, for example to provide high contrast,
+    // the background colour of the tag is the same as the rest of the page. To
+    // ensure that the tag is perceived as separate from any surround text, it
+    // is made bold.
+    //
+    // Transparent outlines are no longer added, as they make the Tag look
+    // indistinguishable from a button – but the tag is not interactive in the
+    // same way.
+    @media screen and (forced-colors: active) {
+      font-weight: bold;
+    }
+  }
+
+  .govuk-tag--grey {
+    color: govuk-shade(govuk-colour("dark-grey"), 50%);
+    background-color: govuk-tint(govuk-colour("dark-grey"), 85%);
+  }
+
+  .govuk-tag--purple {
+    color: govuk-shade(govuk-colour("bright-purple"), 50%);
+    background-color: govuk-tint(govuk-colour("bright-purple"), 85%);
+  }
+
+  .govuk-tag--turquoise {
+    color: govuk-shade(govuk-colour("turquoise"), 60%);
+    background-color: govuk-tint(govuk-colour("turquoise"), 80%);
+  }
+
+  .govuk-tag--blue {
+    color: govuk-shade(govuk-colour("blue"), 60%);
+    background-color: govuk-tint(govuk-colour("blue"), 70%);
+  }
+
+  .govuk-tag--light-blue {
+    color: govuk-shade(govuk-colour("blue"), 60%);
+    background-color: govuk-tint(govuk-colour("blue"), 90%);
+  }
+
+  .govuk-tag--yellow {
+    color: govuk-shade(govuk-colour("yellow"), 65%);
+    background-color: govuk-tint(govuk-colour("yellow"), 75%);
+  }
+
+  .govuk-tag--orange {
+    color: govuk-shade(govuk-colour("orange"), 55%);
+    background-color: govuk-tint(govuk-colour("orange"), 70%);
+  }
+
+  .govuk-tag--red {
+    color: govuk-shade(govuk-colour("red"), 80%);
+    background-color: govuk-tint(govuk-colour("red"), 75%);
+  }
+
+  .govuk-tag--pink {
+    color: govuk-shade(govuk-colour("pink"), 50%);
+    background-color: govuk-tint(govuk-colour("pink"), 85%);
+  }
+
+  .govuk-tag--green {
+    color: govuk-shade(govuk-colour("green"), 20%);
+    background-color: govuk-tint(govuk-colour("green"), 80%);
+  }
+}
+
+/*# sourceMappingURL=_index.scss.map */

data/node_modules/govuk-frontend/{govuk → dist/govuk}/components/tag/_tag.scss

@@ -1,2 +1,4 @@
 @import "../../base";
 @import "./index";
+
+/*# sourceMappingURL=_tag.scss.map */

data/node_modules/govuk-frontend/dist/govuk/components/task-list/_index.scss

@@ -0,0 +1,79 @@
+@import "../tag/index";
+
+@include govuk-exports("govuk/component/task-list") {
+  $govuk-task-list-hover-colour: govuk-colour("light-grey");
+
+  .govuk-task-list {
+    @include govuk-font($size: 19);
+    margin-top: 0;
+    @include govuk-responsive-margin(6, "bottom");
+    padding: 0;
+    list-style-type: none;
+  }
+
+  // This uses table layout so that the task name and status always appear
+  // side-by-side, with the width of each 'column' being flexible depending upon
+  // the length of the task names and statuses.
+  //
+  // The position is set to 'relative' so than an absolutely-positioned
+  // transparent element box can be added within the link so that the whole row
+  // can be clickable.
+  .govuk-task-list__item {
+    display: table;
+    position: relative;
+    width: 100%;
+    margin-bottom: 0;
+    padding-top: govuk-spacing(2);
+    padding-bottom: govuk-spacing(2);
+    border-bottom: 1px solid $govuk-border-colour;
+  }
+
+  .govuk-task-list__item:first-child {
+    border-top: 1px solid $govuk-border-colour;
+  }
+
+  // This class is added to the <li> elements where the task name is a link. The
+  // background hover colour is added to help indicate that the whole row is
+  // clickable, rather than just the visible link text.
+  .govuk-task-list__item--with-link:hover {
+    background: $govuk-task-list-hover-colour;
+  }
+
+  .govuk-task-list__name-and-hint {
+    display: table-cell;
+    vertical-align: top;
+    @include govuk-text-colour;
+  }
+
+  .govuk-task-list__status {
+    display: table-cell;
+    padding-left: govuk-spacing(2);
+    text-align: right;
+    vertical-align: top;
+    @include govuk-text-colour;
+  }
+
+  .govuk-task-list__status--cannot-start-yet {
+    color: $govuk-secondary-text-colour;
+  }
+
+  // This adds an empty transparent box covering the whole row, including the
+  // task status and any hint text. Because this is generated within the link
+  // element, this allows the whole area to be clickable.
+  .govuk-task-list__link::after {
+    content: "";
+    display: block;
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+  }
+
+  .govuk-task-list__hint {
+    margin-top: govuk-spacing(1);
+    color: $govuk-secondary-text-colour;
+  }
+}
+
+/*# sourceMappingURL=_index.scss.map */

data/node_modules/govuk-frontend/dist/govuk/components/task-list/_task-list.scss

@@ -0,0 +1,4 @@
+@import "../../base";
+@import "./index";
+
+/*# sourceMappingURL=_task-list.scss.map */

data/node_modules/govuk-frontend/{govuk → dist/govuk}/components/textarea/_index.scss

@@ -6,7 +6,7 @@
   .govuk-textarea {
     @include govuk-font($size: 19, $line-height: 1.25);
 
-    box-sizing: border-box; // should this be global?
+    box-sizing: border-box;
     display: block;
     width: 100%;
     min-height: 40px;
@@ -25,19 +25,13 @@
       // Ensure outline appears outside of the element
       outline-offset: 0;
       // Double the border by adding its width again. Use `box-shadow` to do
-      // this instead of changing `border-width` (which changes element size) and
-      // since `outline` is already used for the yellow focus state.
+      // this instead of changing `border-width` (which changes element size)
+      // and since `outline` is already used for the yellow focus state.
       box-shadow: inset 0 0 0 $govuk-border-width-form-element;
-
-      @include _govuk-if-ie8 {
-        // IE8 doesn't support `box-shadow` so double the border with
-        // `border-width`.
-        border-width: $govuk-border-width-form-element * 2;
-      }
     }
 
     &:disabled {
-      opacity: .5;
+      opacity: 0.5;
       color: inherit;
       background-color: transparent;
       cursor: not-allowed;
@@ -52,3 +46,5 @@
     }
   }
 }
+
+/*# sourceMappingURL=_index.scss.map */

data/node_modules/govuk-frontend/dist/govuk/components/textarea/_textarea.scss

@@ -0,0 +1,4 @@
+@import "../../base";
+@import "./index";
+
+/*# sourceMappingURL=_textarea.scss.map */

data/node_modules/govuk-frontend/{govuk → dist/govuk}/components/warning-text/_index.scss

@@ -1,17 +1,13 @@
 @include govuk-exports("govuk/component/warning-text") {
   .govuk-warning-text {
-    position: relative;
+    @include govuk-font($size: 19);
     @include govuk-responsive-margin(6, "bottom");
+    @include govuk-typography-weight-bold;
+    position: relative;
     padding: govuk-spacing(2) 0;
   }
 
-  .govuk-warning-text__assistive {
-    @include govuk-visually-hidden;
-  }
-
   .govuk-warning-text__icon {
-    @include govuk-font($size: false, $weight: bold);
-
     box-sizing: border-box;
 
     display: inline-block;
@@ -27,13 +23,13 @@
       margin-top: -5px;
     }
 
-    // When a user customises their colours the background colour will often be removed.
-    // Adding a border to the component keeps it's shape as a circle.
-    border: 3px solid govuk-colour("black");
+    // When a user customises their colours the background colour will often be
+    // removed. Adding a border to the component keeps it's shape as a circle.
+    border: 3px solid $govuk-text-colour;
     border-radius: 50%;
 
-    color: govuk-colour("white");
-    background: govuk-colour("black");
+    color: $govuk-body-background-colour;
+    background: $govuk-text-colour;
 
     font-size: 30px;
     line-height: 29px;
@@ -58,9 +54,13 @@
   }
 
   .govuk-warning-text__text {
-    @include govuk-font($size: 19, $weight: bold);
     @include govuk-text-colour;
     display: block;
     padding-left: 45px;
+    // While `<strong>` is styled `bold` or `bolder` by user-agents
+    // this can be reset by the app's stylesheet
+    font-weight: inherit;
   }
 }
+
+/*# sourceMappingURL=_index.scss.map */

data/node_modules/govuk-frontend/dist/govuk/components/warning-text/_warning-text.scss

@@ -0,0 +1,4 @@
+@import "../../base";
+@import "./index";
+
+/*# sourceMappingURL=_warning-text.scss.map */

data/node_modules/govuk-frontend/dist/govuk/core/_all.scss

@@ -0,0 +1,10 @@
+@import "../settings/warnings";
+@import "index";
+
+@include _warning(
+  "import-using-all",
+  "Importing using 'govuk/core/all' is deprecated. Update your import statement to import 'govuk/core/index'.",
+  $silence-further-warnings: false
+);
+
+/*# sourceMappingURL=_all.scss.map */

data/node_modules/govuk-frontend/{govuk → dist/govuk}/core/_global-styles.scss

@@ -12,8 +12,9 @@
 }
 
 @include govuk-exports("govuk/core/global-styles") {
-
   @if $govuk-global-styles == true {
     @include govuk-global-styles;
   }
 }
+
+/*# sourceMappingURL=_global-styles.scss.map */

data/node_modules/govuk-frontend/dist/govuk/core/_govuk-frontend-properties.scss

@@ -0,0 +1,12 @@
+:root {
+  // This variable is automatically overwritten during builds and releases.
+  // It doesn't need to be updated manually.
+  --govuk-frontend-version: "5.7.1";
+
+  // CSS custom property for each breakpoint
+  @each $name, $value in $govuk-breakpoints {
+    --govuk-frontend-breakpoint-#{$name}: #{govuk-px-to-rem($value)};
+  }
+}
+
+/*# sourceMappingURL=_govuk-frontend-properties.scss.map */

data/node_modules/govuk-frontend/{govuk/core/_all.scss → dist/govuk/core/_index.scss}

@@ -1,6 +1,8 @@
-@import "govuk-frontend-version";
+@import "govuk-frontend-properties";
 @import "links";
 @import "lists";
 @import "typography";
 @import "section-break";
 @import "global-styles";
+
+/*# sourceMappingURL=_index.scss.map */

data/node_modules/govuk-frontend/{govuk → dist/govuk}/core/_links.scss

@@ -1,5 +1,4 @@
 @include govuk-exports("govuk/core/links") {
-
   %govuk-link {
     @include govuk-link-common;
     @include govuk-link-style-default;
@@ -32,4 +31,12 @@
   .govuk-link--no-visited-state {
     @include govuk-link-style-no-visited-state;
   }
+
+  // Links that only contain images
+
+  .govuk-link-image {
+    @include govuk-link-image;
+  }
 }
+
+/*# sourceMappingURL=_links.scss.map */

data/node_modules/govuk-frontend/{govuk → dist/govuk}/core/_lists.scss

@@ -1,5 +1,4 @@
 @include govuk-exports("govuk/core/lists") {
-
   %govuk-list {
     @include govuk-font($size: 19);
     @include govuk-text-colour;
@@ -64,3 +63,5 @@
     @extend %govuk-list--spaced;
   }
 }
+
+/*# sourceMappingURL=_lists.scss.map */

data/node_modules/govuk-frontend/{govuk → dist/govuk}/core/_section-break.scss

@@ -1,14 +1,7 @@
 @include govuk-exports("govuk/core/section-break") {
-
   %govuk-section-break {
     margin: 0;
     border: 0;
-
-    // fix double-width section break and forced visible section break
-    // when combined with styles from alphagov/elements
-    @include _govuk-compatibility(govuk_elements) {
-      height: 0;
-    }
   }
 
   .govuk-section-break {
@@ -54,3 +47,5 @@
     @extend %govuk-section-break--visible;
   }
 }
+
+/*# sourceMappingURL=_section-break.scss.map */