govuk_tech_docs 2.2.1 → 2.4.1

data/node_modules/govuk-frontend/govuk/components/label/_index.scss

@@ -0,0 +1,41 @@
+@include govuk-exports("govuk/component/label") {
+  .govuk-label {
+    @include govuk-font($size: 19);
+    @include govuk-text-colour;
+
+    display: block;
+
+    margin-bottom: govuk-spacing(1);
+  }
+
+  // Modifiers that make labels look more like their equivalent headings
+
+  .govuk-label--xl {
+    @include govuk-font($size: 48, $weight: bold);
+    margin-bottom: govuk-spacing(3);
+  }
+
+  .govuk-label--l {
+    @include govuk-font($size: 36, $weight: bold);
+    margin-bottom: govuk-spacing(3);
+  }
+
+  .govuk-label--m {
+    @include govuk-font($size: 24, $weight: bold);
+    margin-bottom: govuk-spacing(2);
+  }
+
+  .govuk-label--s {
+    @include govuk-font($size: 19, $weight: bold);
+  }
+
+  // When the label is nested inside a heading, override the heading so that it
+  // does not have a margin. Effectively we want to be able to treat the heading
+  // as if it is not there.
+  //
+  // This breaks BEM conventions because it exists as a parent of the 'block',
+  // so we can't really consider an element.
+  .govuk-label-wrapper {
+    margin: 0;
+  }
+}

data/node_modules/govuk-frontend/govuk/components/label/_label.scss

@@ -1,45 +1,2 @@
-@import "../../settings/all";
-@import "../../tools/all";
-@import "../../helpers/all";
-
-@include govuk-exports("govuk/component/label") {
-  .govuk-label {
-    @include govuk-font($size: 19);
-    @include govuk-text-colour;
-
-    display: block;
-
-    margin-bottom: govuk-spacing(1);
-  }
-
-  // Modifiers that make labels look more like their equivalent headings
-
-  .govuk-label--xl {
-    @include govuk-font($size: 48, $weight: bold);
-    margin-bottom: govuk-spacing(3);
-  }
-
-  .govuk-label--l {
-    @include govuk-font($size: 36, $weight: bold);
-    margin-bottom: govuk-spacing(3);
-  }
-
-  .govuk-label--m {
-    @include govuk-font($size: 24, $weight: bold);
-    margin-bottom: govuk-spacing(2);
-  }
-
-  .govuk-label--s {
-    @include govuk-font($size: 19, $weight: bold);
-  }
-
-  // When the label is nested inside a heading, override the heading so that it
-  // does not have a margin. Effectively we want to be able to treat the heading
-  // as if it is not there.
-  //
-  // This breaks BEM conventions because it exists as a parent of the 'block',
-  // so we can't really consider an element.
-  .govuk-label-wrapper {
-    margin: 0;
-  }
-}
+@import "../../base";
+@import "./index";

data/node_modules/govuk-frontend/govuk/components/notification-banner/_index.scss

@@ -0,0 +1,89 @@
+@include govuk-exports("govuk/component/notification-banner") {
+  .govuk-notification-banner {
+    @include govuk-font($size: 19);
+    @include govuk-responsive-margin(8, "bottom");
+
+    border: $govuk-border-width solid $govuk-brand-colour;
+
+    background-color: $govuk-brand-colour;
+
+    &:focus {
+      outline: $govuk-focus-width solid $govuk-focus-colour;
+    }
+  }
+
+  .govuk-notification-banner__header {
+    padding: 2px govuk-spacing(3) govuk-spacing(1);
+
+    // Ensures the notification header appears separate to the notification body text in high contrast mode
+    border-bottom: 1px solid transparent;
+
+    @include govuk-media-query($from: tablet) {
+      padding: 2px govuk-spacing(4) govuk-spacing(1);
+    }
+  }
+
+  .govuk-notification-banner__title {
+    @include govuk-font($size: 19, $weight: bold);
+
+    margin: 0;
+
+    padding: 0;
+
+    color: govuk-colour("white");
+  }
+
+  .govuk-notification-banner__content {
+    $padding-tablet: govuk-spacing(4);
+    @include govuk-text-colour;
+    padding: govuk-spacing(3);
+
+    background-color: $govuk-body-background-colour;
+
+    @include govuk-media-query($from: tablet) {
+      padding: $padding-tablet;
+    }
+
+    // Wrap content at the same place that a 2/3 grid column ends, to maintain
+    // shorter line-lengths when the notification banner is full width
+    > * {
+      // When elements have their own padding (like lists), include the padding
+      // in the max-width calculation
+      box-sizing: border-box;
+
+      // Calculate the internal width of a two-thirds column...
+      $two-col-width: ($govuk-page-width * 2 / 3) - ($govuk-gutter * 1 / 3);
+
+      // ...and then factor in the left border and padding
+      $banner-exterior: ($padding-tablet + $govuk-border-width);
+      max-width: $two-col-width - $banner-exterior;
+    }
+
+    > :last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  .govuk-notification-banner__heading {
+    @include govuk-font($size: 24, $weight: bold);
+
+    margin: 0 0 govuk-spacing(3) 0;
+
+    padding: 0;
+  }
+
+  .govuk-notification-banner__link {
+    @include govuk-link-common;
+    @include govuk-link-style-no-visited-state;
+  }
+
+  .govuk-notification-banner--success {
+    border-color: $govuk-success-colour;
+
+    background-color: $govuk-success-colour;
+
+    .govuk-notification-banner__link {
+      @include govuk-link-style-success;
+    }
+  }
+}

data/node_modules/govuk-frontend/govuk/components/notification-banner/_notification-banner.scss

@@ -0,0 +1,2 @@
+@import "../../base";
+@import "./index";

data/node_modules/govuk-frontend/govuk/components/notification-banner/notification-banner.js

@@ -0,0 +1,61 @@
+(function (global, factory) {
+	typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
+	typeof define === 'function' && define.amd ? define('GOVUKFrontend', factory) :
+	(global.GOVUKFrontend = factory());
+}(this, (function () { 'use strict';
+
+function NotificationBanner ($module) {
+  this.$module = $module;
+}
+
+/**
+ * Initialise the component
+ */
+NotificationBanner.prototype.init = function () {
+  var $module = this.$module;
+  // Check for module
+  if (!$module) {
+    return
+  }
+
+  this.setFocus();
+};
+
+/**
+ * Focus the element
+ *
+ * If `role="alert"` is set, focus the element to help some assistive technologies
+ * prioritise announcing it.
+ *
+ * You can turn off the auto-focus functionality by setting `data-disable-auto-focus="true"` in the
+ * component HTML. You might wish to do this based on user research findings, or to avoid a clash
+ * with another element which should be focused when the page loads.
+ */
+NotificationBanner.prototype.setFocus = function () {
+  var $module = this.$module;
+
+  if ($module.getAttribute('data-disable-auto-focus') === 'true') {
+    return
+  }
+
+  if ($module.getAttribute('role') !== 'alert') {
+    return
+  }
+
+  // Set tabindex to -1 to make the element focusable with JavaScript.
+  // Remove the tabindex on blur as the component doesn't need to be focusable after the page has
+  // loaded.
+  if (!$module.getAttribute('tabindex')) {
+    $module.setAttribute('tabindex', '-1');
+
+    $module.addEventListener('blur', function () {
+      $module.removeAttribute('tabindex');
+    });
+  }
+
+  $module.focus();
+};
+
+return NotificationBanner;
+
+})));

data/node_modules/govuk-frontend/govuk/components/panel/_index.scss

@@ -0,0 +1,44 @@
+@include govuk-exports("govuk/component/panel") {
+  .govuk-panel {
+    @include govuk-font($size: 19);
+
+    box-sizing: border-box;
+
+    margin-bottom: govuk-spacing(3);
+    padding: govuk-spacing(7) - $govuk-border-width;
+
+    border: $govuk-border-width solid transparent;
+
+    text-align: center;
+
+    @include govuk-media-query($until: tablet) {
+      padding: govuk-spacing(6) - $govuk-border-width;
+    }
+  }
+
+  .govuk-panel--confirmation {
+    color: govuk-colour("white");
+    background: govuk-colour("green", $legacy: "turquoise");
+
+    @include govuk-media-query($media-type: print) {
+      border-color: currentColor;
+      color: $govuk-print-text-colour;
+      background: none;
+    }
+  }
+
+  .govuk-panel__title {
+    margin-top: 0;
+    margin-bottom: govuk-spacing(6);
+
+    @include govuk-font($size: 48, $weight: bold);
+  }
+
+  .govuk-panel__title:last-child {
+    margin-bottom: 0;
+  }
+
+  .govuk-panel__body {
+    @include govuk-font($size: 36);
+  }
+}

data/node_modules/govuk-frontend/govuk/components/panel/_panel.scss

@@ -1,44 +1,2 @@
-@import "../../settings/all";
-@import "../../tools/all";
-@import "../../helpers/all";
-
-@include govuk-exports("govuk/component/panel") {
-
-  .govuk-panel {
-    @include govuk-font($size: 19);
-
-    box-sizing: border-box;
-
-    margin-bottom: govuk-spacing(3);
-    padding: govuk-spacing(7) - $govuk-border-width;
-
-    border: $govuk-border-width solid transparent;
-
-    text-align: center;
-
-    @include govuk-media-query($until: tablet) {
-      padding: govuk-spacing(6) - $govuk-border-width;
-    }
-  }
-
-  .govuk-panel--confirmation {
-    color: govuk-colour("white");
-    background: govuk-colour("green", $legacy: "turquoise");
-  }
-
-  .govuk-panel__title {
-    margin-top: 0;
-    margin-bottom: govuk-spacing(6);
-
-    @include govuk-font($size: 48, $weight: bold);
-  }
-
-  .govuk-panel__title:last-child {
-    margin-bottom: 0;
-  }
-
-  .govuk-panel__body {
-    @include govuk-font($size: 36);
-  }
-
-}
+@import "../../base";
+@import "./index";

data/node_modules/govuk-frontend/govuk/components/phase-banner/_index.scss

@@ -0,0 +1,27 @@
+@import "../tag/index";
+
+@include govuk-exports("govuk/component/phase-banner") {
+  .govuk-phase-banner {
+    padding-top: govuk-spacing(2);
+    padding-bottom: govuk-spacing(2);
+
+    border-bottom: 1px solid $govuk-border-colour;
+  }
+
+  .govuk-phase-banner__content {
+    @include govuk-font($size: 16);
+    @include govuk-text-colour;
+
+    display: table;
+    margin: 0;
+  }
+
+  .govuk-phase-banner__content__tag {
+    margin-right: govuk-spacing(2);
+  }
+
+  .govuk-phase-banner__text {
+    display: table-cell;
+    vertical-align: middle;
+  }
+}

data/node_modules/govuk-frontend/govuk/components/phase-banner/_phase-banner.scss

@@ -1,31 +1,2 @@
-@import "../../settings/all";
-@import "../../tools/all";
-@import "../../helpers/all";
-
-@import "../tag/tag";
-
-@include govuk-exports("govuk/component/phase-banner") {
-  .govuk-phase-banner {
-    padding-top: govuk-spacing(2);
-    padding-bottom: govuk-spacing(2);
-
-    border-bottom: 1px solid $govuk-border-colour;
-  }
-
-  .govuk-phase-banner__content {
-    @include govuk-font($size: 16);
-    @include govuk-text-colour;
-
-    display: table;
-    margin: 0;
-  }
-
-  .govuk-phase-banner__content__tag {
-    margin-right: govuk-spacing(2);
-  }
-
-  .govuk-phase-banner__text {
-    display: table-cell;
-    vertical-align: baseline;
-  }
-}
+@import "../../base";
+@import "./index";

data/node_modules/govuk-frontend/govuk/components/radios/_index.scss

@@ -0,0 +1,342 @@
+@import "../error-message/index";
+@import "../fieldset/index";
+@import "../hint/index";
+@import "../label/index";
+
+@include govuk-exports("govuk/component/radios") {
+
+  $govuk-touch-target-size: 44px;
+  $govuk-radios-size: 40px;
+  $govuk-small-radios-size: 24px;
+  $govuk-radios-label-padding-left-right: govuk-spacing(3);
+  // When the default focus width is used on a curved edge it looks visually smaller.
+  // So for the circular radios we bump the default to make it look visually consistent.
+  $govuk-radios-focus-width: $govuk-focus-width + 1px;
+
+  .govuk-radios__item {
+    @include govuk-font($size: 19);
+
+    display: block;
+    position: relative;
+
+    min-height: $govuk-radios-size;
+
+    margin-bottom: govuk-spacing(2);
+    padding-left: $govuk-radios-size;
+
+    clear: left;
+  }
+
+  .govuk-radios__item:last-child,
+  .govuk-radios__item:last-of-type {
+    margin-bottom: 0;
+  }
+
+  .govuk-radios__input {
+    $input-offset: ($govuk-touch-target-size - $govuk-radios-size) / 2;
+
+    cursor: pointer;
+
+    // IE8 doesn’t support pseudo-elements, so we don’t want to hide native
+    // elements there.
+    @include govuk-not-ie8 {
+      position: absolute;
+
+      z-index: 1;
+      top: $input-offset * -1;
+      left: $input-offset * -1;
+
+      width: $govuk-touch-target-size;
+      height: $govuk-touch-target-size;
+      margin: 0;
+
+      opacity: 0;
+    }
+
+    @include govuk-if-ie8 {
+      margin-top: 10px;
+      margin-right: $govuk-radios-size / -2;
+      margin-left: $govuk-radios-size / -2;
+      float: left;
+
+      // add focus outline to input
+      &:focus {
+        outline: $govuk-focus-width solid $govuk-focus-colour;
+      }
+    }
+  }
+
+  .govuk-radios__label {
+    display: inline-block;
+    margin-bottom: 0;
+    padding: 8px $govuk-radios-label-padding-left-right govuk-spacing(1);
+    cursor: pointer;
+    // remove 300ms pause on mobile
+    -ms-touch-action: manipulation;
+        touch-action: manipulation;
+  }
+
+  // ( ) Radio ring
+  .govuk-radios__label:before {
+    content: "";
+    box-sizing: border-box;
+    position: absolute;
+    top: 0;
+    left: 0;
+
+    width: $govuk-radios-size;
+    height: $govuk-radios-size;
+
+    border: $govuk-border-width-form-element solid currentColor;
+    border-radius: 50%;
+    background: transparent;
+  }
+
+  //  •  Radio button
+  //
+  // We create the 'button' entirely out of 'border' so that they remain
+  // 'filled' even when colours are overridden in the browser.
+  .govuk-radios__label:after {
+    content: "";
+
+    position: absolute;
+    top: govuk-spacing(2);
+    left: govuk-spacing(2);
+
+    width: 0;
+    height: 0;
+
+    border: govuk-spacing(2) solid currentColor;
+    border-radius: 50%;
+    opacity: 0;
+    background: currentColor;
+  }
+
+  .govuk-radios__hint {
+    display: block;
+    padding-right: $govuk-radios-label-padding-left-right;
+    padding-left: $govuk-radios-label-padding-left-right;
+  }
+
+  // Focused state
+  .govuk-radios__input:focus + .govuk-radios__label:before {
+    border-width: 4px;
+    box-shadow: 0 0 0 $govuk-radios-focus-width $govuk-focus-colour;
+  }
+
+  // Selected state
+  .govuk-radios__input:checked + .govuk-radios__label:after {
+    opacity: 1;
+  }
+
+  // Disabled state
+  .govuk-radios__input:disabled,
+  .govuk-radios__input:disabled + .govuk-radios__label {
+    cursor: default;
+  }
+
+  .govuk-radios__input:disabled + .govuk-radios__label {
+    opacity: .5;
+  }
+
+  // =========================================================
+  // Inline radios
+  // =========================================================
+
+  .govuk-radios--inline {
+    @include govuk-media-query ($from: tablet) {
+      @include govuk-clearfix;
+
+      .govuk-radios__item {
+        margin-right: govuk-spacing(4);
+        float: left;
+        clear: none;
+      }
+    }
+
+    // Prevent inline modifier being used with conditional reveals
+    &.govuk-radios--conditional {
+      .govuk-radios__item {
+        margin-right: 0;
+        float: none;
+      }
+    }
+  }
+
+  // =========================================================
+  // Dividers ('or')
+  // =========================================================
+
+  .govuk-radios__divider {
+    $govuk-divider-size: $govuk-radios-size !default;
+    @include govuk-font($size: 19);
+    @include govuk-text-colour;
+    width: $govuk-divider-size;
+    margin-bottom: govuk-spacing(2);
+    text-align: center;
+  }
+
+  // =========================================================
+  // Conditional reveals
+  // =========================================================
+
+  // The narrow border is used in the conditional reveals because the border has
+  // to be an even number in order to be centred under the 40px checkbox or radio.
+  $conditional-border-width: $govuk-border-width-narrow;
+  // Calculate the amount of padding needed to keep the border centered against the radios.
+  $conditional-border-padding: ($govuk-radios-size / 2) - ($conditional-border-width / 2);
+  // Move the border centered with the radios
+  $conditional-margin-left: $conditional-border-padding;
+  // Move the contents of the conditional inline with the label
+  $conditional-padding-left: $conditional-border-padding + $govuk-radios-label-padding-left-right;
+
+  .govuk-radios__conditional {
+    @include govuk-responsive-margin(4, "bottom");
+    margin-left: $conditional-margin-left;
+    padding-left: $conditional-padding-left;
+    border-left: $conditional-border-width solid $govuk-border-colour;
+
+    .js-enabled &--hidden {
+      display: none;
+    }
+
+    & > :last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  // =========================================================
+  // Small checkboxes
+  // =========================================================
+
+  .govuk-radios--small {
+
+    $input-offset: ($govuk-touch-target-size - $govuk-small-radios-size) / 2;
+    $label-offset: $govuk-touch-target-size - $input-offset;
+
+    .govuk-radios__item {
+      @include govuk-clearfix;
+      min-height: 0;
+      margin-bottom: 0;
+      padding-left: $label-offset;
+      float: left;
+    }
+
+    // Shift the touch target into the left margin so that the visible edge of
+    // the control is aligned
+    //
+    //   ┆Which colour is your favourite?
+    //  ┌┆───┐
+    //  │┆() │ Purple
+    //  └┆▲──┘
+    //  ▲┆└─ Radio pseudo element, aligned with margin
+    //  └─── Touch target (invisible input), shifted into the margin
+    .govuk-radios__input {
+      @include govuk-not-ie8 {
+        left: $input-offset * -1;
+      }
+
+      @include govuk-if-ie8 {
+        margin-left: $govuk-small-radios-size * -1;
+      }
+    }
+
+    // Adjust the size and position of the label.
+    //
+    // Unlike larger radios, we also have to float the label in order to
+    // 'shrink' it, preventing the hover state from kicking in across the full
+    // width of the parent element.
+    .govuk-radios__label {
+      margin-top: -2px;
+      padding: 13px govuk-spacing(3) 13px 1px;
+      float: left;
+
+      @include govuk-media-query($from: tablet) {
+        padding: 11px govuk-spacing(3) 10px 1px;
+      }
+    }
+
+    // ( ) Radio ring
+    //
+    // Reduce the size of the control [1], vertically centering it within the
+    // touch target [2]
+    .govuk-radios__label:before {
+      top: $input-offset - $govuk-border-width-form-element; // 2
+      width: $govuk-small-radios-size; // 1
+      height: $govuk-small-radios-size; // 1
+    }
+
+    //  •  Radio button
+    //
+    // Reduce the size of the 'button' and center it within the ring
+    .govuk-radios__label:after {
+      top: 15px;
+      left: 7px;
+      border-width: 5px;
+    }
+
+    // Fix position of hint with small radios
+    //
+    // Do not use hints with small radios – because they're within the input
+    // wrapper they trigger the hover state, but clicking them doesn't actually
+    // activate the control.
+    //
+    // (If you do use them, they won't look completely broken... but seriously,
+    // don't use them)
+    .govuk-radios__hint {
+      padding: 0;
+      clear: both;
+      pointer-events: none;
+    }
+
+    // Align conditional reveals with small radios
+    .govuk-radios__conditional {
+      $margin-left: ($govuk-small-radios-size / 2) - ($conditional-border-width / 2);
+      margin-left: $margin-left;
+      padding-left: $label-offset - ($margin-left + $conditional-border-width);
+      clear: both;
+    }
+
+    .govuk-radios__divider {
+      width: $govuk-small-radios-size;
+      margin-bottom: govuk-spacing(1);
+    }
+
+    // Hover state for small radios.
+    //
+    // We use a hover state for small radios because the touch target size
+    // is so much larger than their visible size, and so we need to provide
+    // feedback to the user as to which radio they will select when their
+    // cursor is outside of the visible area.
+    .govuk-radios__item:hover .govuk-radios__input:not(:disabled) + .govuk-radios__label:before {
+      box-shadow: 0 0 0 $govuk-hover-width $govuk-hover-colour;
+    }
+
+    // Because we've overridden the border-shadow provided by the focus state,
+    // we need to redefine that too.
+    //
+    // We use two box shadows, one that restores the original focus state [1]
+    // and another that then applies the hover state [2].
+    .govuk-radios__item:hover .govuk-radios__input:focus + .govuk-radios__label:before {
+      box-shadow:
+        0 0 0 $govuk-radios-focus-width $govuk-focus-colour, // 1
+        0 0 0 $govuk-hover-width        $govuk-hover-colour; // 2
+    }
+
+    // For devices that explicitly don't support hover, don't provide a hover
+    // state (e.g. on touch devices like iOS).
+    //
+    // We can't use `@media (hover: hover)` because we wouldn't get the hover
+    // state in browsers that don't support `@media (hover)` (like Internet
+    // Explorer) – so we have to 'undo' the hover state instead.
+    @media (hover: none), (pointer: coarse) {
+      .govuk-radios__item:hover .govuk-radios__input:not(:disabled) + .govuk-radios__label:before {
+        box-shadow: initial;
+      }
+
+      .govuk-radios__item:hover .govuk-radios__input:focus + .govuk-radios__label:before {
+        box-shadow: 0 0 0 $govuk-radios-focus-width $govuk-focus-colour;
+      }
+    }
+  }
+}