katalyst-govuk-formbuilder 1.3.1 → 1.4.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 825db35e2cda704416b62b17d88cd78293d52c743f354a4b7c5f706f8831380e
-  data.tar.gz: 3580d6c6732c92f28753731955b162c9eabf8582939d629ebb0979c3650fc12b
+  metadata.gz: c9df88d9d5abc58da448ed9fd96a45ef1924a27dcda9939ef0596b9e21ff3d06
+  data.tar.gz: c824d95a58018d8376b8cc9de329ef21b1e8d06d9fca460f9683072a625a0fb9
 SHA512:
-  metadata.gz: 51c61d52190aa4bd3083568b8020b54a3cd83bf104aa69c0a1fad1c2e0cd08be16439034cac8b97fb149add2f043c55c895729dcca9c130721dc0529f4d3ed02
-  data.tar.gz: 4139797a41ba4364b2e97f025d9d860c5348627a886504eb1c828dfd593bef5bcced2ce0eedc75a87f6ddf1dda9c58c10f4468504ee5e5934bf7b158c53bae85
+  metadata.gz: 9c7bf61b527e1092fb8327b2ba88d9832d45e99d46a445a8f1a6d1428d81ddc154aa79af57c5e9fb0892ea2da77482bdb0df396b50bc1ef0bd3e8cab6e9b7213
+  data.tar.gz: 02c92b8b8822995c73bff3851ce55b418b36e11ff5fd25bbf59021a664602802338104a19c752744edcf2f77e1c79471ce7b6ade424d07f7bf2664135e6cf5dc

data/app/assets/config/katalyst-govuk-formbuilder.js

@@ -1,2 +1 @@
-//= link_tree ../javascripts
 //= link_tree ../builds

data/app/assets/stylesheets/katalyst/govuk/formbuilder.scss

@@ -1,5 +1,5 @@
 $govuk-include-default-font-face: false;
-$govuk-font-family: "Open Sans", sans-serif;
+$govuk-font-family: "Open Sans", sans-serif !default;
 
 @import "govuk-frontend/govuk/base";
 

data/lib/katalyst/govuk/formbuilder/engine.rb

@@ -8,6 +8,7 @@ module Katalyst
         initializer "katalyst-govuk-formbuilder.assets" do
           config.after_initialize do |app|
             if app.config.respond_to?(:assets)
+              app.config.assets.paths << root.join("vendor/assets/stylesheets")
               app.config.assets.precompile += %w(katalyst-govuk-formbuilder.js)
             end
           end

data/lib/katalyst/govuk/formbuilder/version.rb

@@ -3,7 +3,7 @@
 module Katalyst
   module GOVUK
     module Formbuilder
-      VERSION = "1.3.1"
+      VERSION = "1.4.0"
     end
   end
 end

data/vendor/assets/stylesheets/govuk-frontend/govuk/_base.scss

@@ -0,0 +1,3 @@
+@import "settings/all";
+@import "tools/all";
+@import "helpers/all";

data/vendor/assets/stylesheets/govuk-frontend/govuk/all-ie8.scss

@@ -0,0 +1,6 @@
+// By setting $govuk-is-ie8 to true, we create a version of the stylesheet that
+// targets IE8 – e.g. conditionally including or excluding styles, and
+// rasterizing media queries.
+$govuk-is-ie8: true;
+
+@import "all";

data/vendor/assets/stylesheets/govuk-frontend/govuk/all.scss

@@ -0,0 +1,9 @@
+@import "base";
+
+@import "core/all";
+@import "objects/all";
+
+@import "components/all";
+
+@import "utilities/all";
+@import "overrides/all";

data/vendor/assets/stylesheets/govuk-frontend/govuk/components/_all.scss

@@ -0,0 +1,34 @@
+@import "../base";
+
+@import "accordion/index";
+@import "back-link/index";
+@import "breadcrumbs/index";
+@import "button/index";
+@import "checkboxes/index";
+@import "character-count/index";
+@import "cookie-banner/index";
+@import "date-input/index";
+@import "details/index";
+@import "error-message/index";
+@import "error-summary/index";
+@import "fieldset/index";
+@import "file-upload/index";
+@import "footer/index";
+@import "hint/index";
+@import "header/index";
+@import "input/index";
+@import "inset-text/index";
+@import "label/index";
+@import "notification-banner/index";
+@import "pagination/index";
+@import "panel/index";
+@import "phase-banner/index";
+@import "tabs/index";
+@import "tag/index";
+@import "radios/index";
+@import "select/index";
+@import "skip-link/index";
+@import "summary-list/index";
+@import "table/index";
+@import "textarea/index";
+@import "warning-text/index";

data/vendor/assets/stylesheets/govuk-frontend/govuk/components/accordion/_accordion.scss

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

data/vendor/assets/stylesheets/govuk-frontend/govuk/components/accordion/_index.scss

@@ -0,0 +1,392 @@
+@include govuk-exports("govuk/component/accordion") {
+  $govuk-accordion-base-colour: govuk-colour("black");
+  $govuk-accordion-hover-colour: govuk-colour("light-grey", $legacy: "grey-3");
+  $govuk-accordion-icon-focus-colour: $govuk-focus-colour;
+  $govuk-accordion-bottom-border-width: 1px;
+
+  .govuk-accordion {
+    @include govuk-responsive-margin(6, "bottom");
+  }
+
+  .govuk-accordion__section {
+    padding-top: govuk-spacing(3);
+  }
+
+  .govuk-accordion__section-heading {
+    // Override browser defaults to ensure consistent element height
+    margin-top: 0;
+    margin-bottom: 0;
+
+    padding-top: govuk-spacing(3);
+    padding-bottom: govuk-spacing(3);
+  }
+
+  .govuk-accordion__section-button {
+    @include govuk-font($size: 24, $weight: bold);
+    @include govuk-text-colour;
+
+    display: block;
+    margin-bottom: 0;
+    padding-top: govuk-spacing(3);
+  }
+
+  // Remove the bottom margin from the last item inside the content
+  .govuk-accordion__section-content > :last-child {
+    margin-bottom: 0;
+  }
+
+  // JavaScript enabled
+  .js-enabled {
+    .govuk-accordion {
+      // Border at the bottom of the whole accordion
+      border-bottom: $govuk-accordion-bottom-border-width solid $govuk-border-colour;
+    }
+
+    .govuk-accordion__section {
+      padding-top: 0;
+    }
+
+    // Hide the body of collapsed sections by default for browsers that lack
+    // support for `content-visibility` paired with [hidden=until-found]
+    .govuk-accordion__section-content {
+      display: none;
+
+      @include govuk-responsive-padding(3, "top");
+      @include govuk-responsive-padding(8, "bottom");
+    }
+
+    // Hide the body of collapsed sections using `content-visibility` to enable
+    // page search within [hidden=until-found] regions where browser supported
+    .govuk-accordion__section-content[hidden] {
+      @supports (content-visibility: hidden) {
+        content-visibility: hidden;
+        display: inherit;
+      }
+
+      // Hide the padding of collapsed sections
+      padding-top: 0;
+      padding-bottom: 0;
+    }
+
+    // Show the body of expanded sections
+    .govuk-accordion__section--expanded .govuk-accordion__section-content {
+      display: block;
+    }
+
+    .govuk-accordion__show-all {
+      @include govuk-font($size: 19);
+      position: relative;
+      z-index: 1;
+
+      margin-bottom: 9px;
+      padding: govuk-spacing(1) 2px govuk-spacing(1) 0;
+
+      border-width: 0;
+
+      color: $govuk-link-colour;
+      background: none;
+
+      cursor: pointer;
+      -webkit-appearance: none;
+
+      @include govuk-media-query ($from: tablet) {
+        margin-bottom: 14px;
+      }
+
+      // Remove default button focus outline in Firefox
+      &::-moz-focus-inner {
+        padding: 0;
+        border: 0;
+      }
+
+      &:hover {
+        color: $govuk-accordion-base-colour;
+        background: $govuk-accordion-hover-colour;
+        // The GOV.UK Design System focus state adds a box-shadow to the top and bottom of the
+        // button. We add a grey box-shadow on hover too, to make the height of the hover state
+        // match the height of the focus state.
+        box-shadow: 0 -2px $govuk-accordion-hover-colour, 0 4px $govuk-accordion-hover-colour;
+
+        .govuk-accordion__section-toggle-text {
+          color: $govuk-accordion-base-colour;
+        }
+
+        .govuk-accordion-nav__chevron {
+          color: $govuk-accordion-base-colour;
+          background: $govuk-accordion-base-colour;
+        }
+
+        .govuk-accordion-nav__chevron:after {
+          color: $govuk-accordion-hover-colour;
+        }
+      }
+
+      &:focus {
+        @include govuk-focused-text;
+
+        .govuk-accordion-nav__chevron {
+          background: $govuk-accordion-base-colour;
+        }
+
+        .govuk-accordion-nav__chevron:after {
+          color: $govuk-accordion-icon-focus-colour;
+        }
+      }
+    }
+
+    .govuk-accordion__section-heading {
+      padding: 0;
+    }
+
+    // Create Chevron icon aligned with text
+    .govuk-accordion-nav__chevron {
+      box-sizing: border-box;
+      display: inline-block;
+
+      position: relative;
+
+      // Set size using rems to make the icon scale with text if user resizes text in their browser
+      width: govuk-px-to-rem(20px);
+      height: govuk-px-to-rem(20px);
+
+      border: govuk-px-to-rem(1px) solid;
+      border-radius: 50%;
+
+      vertical-align: middle;
+
+      // IE8 fallback of icon
+      @include govuk-if-ie8 {
+        display: inline-block;
+        max-height: 20px;
+        line-height: 1;
+      }
+
+      // Create inner chevron arrow
+      &:after {
+        content: "";
+        box-sizing: border-box;
+        display: block;
+
+        position: absolute;
+        bottom: govuk-px-to-rem(5px);
+        left: govuk-px-to-rem(6px);
+
+        width: govuk-px-to-rem(6px);
+        height: govuk-px-to-rem(6px);
+
+        -webkit-transform: rotate(-45deg);
+
+            -ms-transform: rotate(-45deg);
+
+                transform: rotate(-45deg);
+
+        border-top: govuk-px-to-rem(2px) solid;
+        border-right: govuk-px-to-rem(2px) solid;
+
+        // IE8 fallback of icon with HTML symbol
+        @include govuk-if-ie8 {
+          content: "\25B2"; // "▲"
+          position: relative;
+          border: 0;
+        }
+      }
+    }
+
+    // Rotate icon to create "Down" version
+    .govuk-accordion-nav__chevron--down {
+      -webkit-transform: rotate(180deg);
+          -ms-transform: rotate(180deg);
+              transform: rotate(180deg);
+
+      // IE8 fallback of arrow icon
+      @include govuk-if-ie8 {
+        &:after {
+          content: "\25BC"; // "▼"
+          -webkit-transform: none;
+              -ms-transform: none;
+                  transform: none;
+        }
+      }
+    }
+
+    .govuk-accordion__section-button {
+      width: 100%;
+
+      padding: govuk-spacing(2) 0 0 0;
+
+      border: 0;
+
+      border-top: $govuk-accordion-bottom-border-width solid $govuk-border-colour;
+
+      // Visually separate the section from the one underneath when user changes colours in their
+      // browser. See https://github.com/alphagov/govuk-frontend/issues/2321#issuecomment-924201488
+      border-bottom: govuk-spacing(2) solid transparent;
+
+      color: $govuk-text-colour;
+      background: none;
+
+      text-align: left;
+      // Section headers have a pointer cursor as an additional affordance
+      cursor: pointer;
+      -webkit-appearance: none;
+
+      @include govuk-media-query ($from: tablet) {
+        padding-bottom: govuk-spacing(2);
+      }
+
+      &:active {
+        color: $govuk-link-active-colour;
+        background: none;
+      }
+
+      &:hover {
+        color: $govuk-accordion-base-colour;
+        background: $govuk-accordion-hover-colour;
+
+        .govuk-accordion__section-toggle-text {
+          color: $govuk-accordion-base-colour;
+        }
+
+        .govuk-accordion-nav__chevron {
+          color: $govuk-accordion-base-colour;
+          background: $govuk-accordion-base-colour;
+        }
+
+        .govuk-accordion-nav__chevron:after {
+          color: $govuk-accordion-hover-colour;
+        }
+      }
+
+      &:focus {
+        // Remove default focus border around button as
+        // styling is being applied to inner text elements that receive focus
+        outline: 0;
+
+        .govuk-accordion__section-heading-text-focus,
+        .govuk-accordion__section-summary-focus,
+        .govuk-accordion__section-toggle-focus {
+          @include govuk-focused-text;
+        }
+
+        .govuk-accordion-nav__chevron {
+          color: $govuk-accordion-base-colour;
+          background: $govuk-accordion-base-colour;
+        }
+
+        .govuk-accordion-nav__chevron:after {
+          color: $govuk-accordion-icon-focus-colour;
+        }
+      }
+
+      // Remove default button focus outline in Firefox
+      &::-moz-focus-inner {
+        padding: 0;
+        border: 0;
+      }
+    }
+
+    // Remove the transparent border when the section is expanded to make it clear that the heading
+    // relates to the content below. Adjust padding to maintain the height of the element.
+    // See https://github.com/alphagov/govuk-frontend/pull/2257#issuecomment-951920798
+    .govuk-accordion__section--expanded .govuk-accordion__section-button {
+      padding-bottom: govuk-spacing(3);
+      border-bottom: 0;
+
+      @include govuk-media-query ($from: tablet) {
+        padding-bottom: govuk-spacing(4);
+      }
+    }
+
+    // As Chevron icon is vertically aligned it overlaps with the focus state bottom border
+    // Styling adds some spacing
+    .govuk-accordion__section-button:focus .govuk-accordion__section-toggle-focus {
+      padding-bottom: 3px;
+
+      @include govuk-media-query ($from: desktop) {
+        padding-bottom: 2px;
+      }
+    }
+
+    .govuk-accordion__section-toggle,
+    .govuk-accordion__section-heading-text,
+    .govuk-accordion__section-summary {
+      display: block;
+      margin-bottom: 13px;
+
+      .govuk-accordion__section-heading-text-focus,
+      .govuk-accordion__section-summary-focus,
+      .govuk-accordion__section-toggle-focus {
+        display: inline;
+      }
+    }
+
+    // Add toggle link with Chevron icon on left.
+    .govuk-accordion__section-toggle {
+      @include govuk-typography-responsive($size: 19);
+      @include govuk-typography-weight-regular;
+      color: $govuk-link-colour;
+    }
+
+    // Add space between the icon and text.
+    // Avoid applying spacing directly to the icon as the use of `transform` will change the
+    // placement of any margins.
+    .govuk-accordion__show-all-text,
+    .govuk-accordion__section-toggle-text {
+      margin-left: govuk-spacing(1);
+      vertical-align: middle;
+    }
+
+    // Background colour adjustment when user changes colours in Firefox
+    //
+    // When user changes colours in Firefox, text colour inside <button> is always black
+    // (regardless of the custom colours the user has set). This is fine when the text in the
+    // button is not nested inside another element because when user changes colours in Firefox,
+    // the immediate background colour of buttons is always white (again, regardless of user's
+    // custom colours).
+    //
+    // However, when the text inside <button> is wrapped inside another element AND that element
+    // sets a background colour, the text colour is still black but the background of that nested
+    // element gets the user's custom background colour. When the custom background is a lighter
+    // hue, the contrast might be sufficient. But if the user's custom background colour is a
+    // darker colour, the contrast with the text might not be sufficient.
+    //
+    // To ensure sufficient contrast, override the background colour set by the focus state on the
+    // nested elements to be transparent.
+    //
+    // Also override the background colour of the Show/Hide chevrons which set a background colour
+    // on hover.
+    @media screen and (forced-colors: active) {
+      .govuk-accordion__show-all:hover,
+      .govuk-accordion__section-button:hover {
+        .govuk-accordion-nav__chevron {
+          background-color: transparent;
+        }
+      }
+
+      .govuk-accordion__show-all:focus,
+      .govuk-accordion__section-button:focus {
+        .govuk-accordion__section-heading-text-focus,
+        .govuk-accordion__section-summary-focus,
+        .govuk-accordion__section-toggle-focus,
+        .govuk-accordion-nav__chevron {
+          background: transparent;
+          background-color: transparent;
+        }
+      }
+    }
+
+    // For devices that can't hover such as touch devices,
+    // remove hover state as it can be stuck in that state (iOS).
+    @media (hover: none) {
+      .govuk-accordion__section-header:hover {
+        border-top-color: $govuk-border-colour;
+
+        box-shadow: inset 0 3px 0 0 $govuk-link-colour;
+
+        .govuk-accordion__section-button {
+          border-top-color: $govuk-border-colour;
+        }
+      }
+    }
+  }
+}

data/vendor/assets/stylesheets/govuk-frontend/govuk/components/back-link/_back-link.scss

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

data/vendor/assets/stylesheets/govuk-frontend/govuk/components/back-link/_index.scss

@@ -0,0 +1,99 @@
+@include govuk-exports("govuk/component/back-link") {
+  // Component font-size on the Frontend (used for calculations)
+  $font-size: 16;
+
+  // Size of chevron (excluding border)
+  $chevron-size: govuk-em(7px, $font-size);
+
+  // Size of chevron border
+  $chevron-border-min-width: 1px;
+  $chevron-border-width: govuk-em($chevron-border-min-width, $font-size);
+
+  // Colour of chevron
+  $chevron-border-colour: $govuk-secondary-text-colour;
+
+  .govuk-back-link {
+    @include govuk-typography-responsive($size: $font-size);
+    @include govuk-link-common;
+    @include govuk-link-style-text;
+
+    display: inline-block;
+    position: relative;
+
+    margin-top: govuk-spacing(3);
+    margin-bottom: govuk-spacing(3);
+
+    // Allow space for the arrow
+    padding-left: govuk-em(14px, $font-size);
+  }
+
+  // Prepend left pointing chevron
+  .govuk-back-link:before {
+    content: "";
+    display: block;
+
+    // Vertically align with the parent element
+    position: absolute;
+
+    @if $govuk-use-legacy-font {
+      // Begin adjustments for font baseline offset
+      // These should be removed when legacy font support is dropped
+      $offset: govuk-em(1px, $font-size);
+      top: $offset * -1;
+      bottom: $offset;
+    } @else {
+      top: 0;
+      bottom: 0;
+    }
+
+    left: govuk-em(3px, $font-size);
+
+    width: $chevron-size;
+    height: $chevron-size;
+
+    margin: auto 0;
+
+    -webkit-transform: rotate(225deg);
+
+        -ms-transform: rotate(225deg);
+
+            transform: rotate(225deg);
+
+    border: solid;
+    border-width: $chevron-border-min-width $chevron-border-min-width 0 0;
+    border-color: $chevron-border-colour;
+
+    @supports (border-width: unquote("max(0px)")) {
+      border-width: unquote("max(#{$chevron-border-min-width}, #{$chevron-border-width}) max(#{$chevron-border-min-width}, #{$chevron-border-width})") 0 0;
+
+      // Ensure that the chevron never gets smaller than 16px
+      font-size: unquote("max(#{$font-size * 1px}, 1em)");
+    }
+
+    // Fall back to a less than sign for IE8
+    @include govuk-if-ie8 {
+      content: "\003c"; // Less than sign (<)
+      width: auto;
+      height: auto;
+      border: 0;
+      color: $chevron-border-colour;
+
+      // IE8 doesn't seem to like rendering pseudo-elements using @font-faces,
+      // so fall back to using another sans-serif font to render the chevron.
+      font-family: Arial, sans-serif;
+    }
+  }
+
+  .govuk-back-link:focus:before {
+    border-color: $govuk-focus-text-colour;
+  }
+
+  .govuk-back-link:after {
+    content: "";
+    position: absolute;
+    top: -14px;
+    right: 0;
+    bottom: -14px;
+    left: 0;
+  }
+}

data/vendor/assets/stylesheets/govuk-frontend/govuk/components/breadcrumbs/_breadcrumbs.scss

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