govuk_publishing_components 8.2.0 → 9.0.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: e88c86057a77da6fc577ecf2b7c95a5c37fdc6627335d6798838390be5e74658
-  data.tar.gz: 63dd6a60c53f6c03538e33a3880c88336a48978a92673d19e9e1f5db9a5b81ab
+  metadata.gz: bf10b89816a774564689adfe4b90428a270c463f15f501195a7a38d1554b6ac4
+  data.tar.gz: 4f5e300eff4bbe5a9070742cfad1173add058aa69e2411f6e88bd8bc6fc6ed64
 SHA512:
-  metadata.gz: 2df4fc9c44e66544eb54b8ccfab24989833888d9b82fca80f620cac81799a1ce8522ba9f1a59bb937469a876fa1005d4fde54c942fe563629ec447a491500162
-  data.tar.gz: 8c1dd8ccdebf70b01f695bad66b8f07532bf69d6c4914c7cc516cbaddcd169f5903015b39c41ed024dd7fd0b1363f97f972159d1a2bf6b6930d943dcfcdc03a7
+  metadata.gz: 84247657400caa6a5150e6b5c0ceacfac8998a1aee8df9322603760d1d0f3787a85b5293c2736921bb608969b257828ff28b2d8d9b9d2c8d098680106b58b2c2
+  data.tar.gz: 59631efa93616e3f94ec2cc75c482b00672286e2fbb8ea7d481ed080f35ab0ba7352f3d24836cfeeacd44ca6e3ad4e48834690b7441f43e208e5f22eaa8d31c6

data/app/assets/stylesheets/govuk_publishing_components/_all_components.scss

@@ -12,15 +12,19 @@
 @import "components/back-link";
 @import "components/breadcrumbs";
 @import "components/button";
+@import "components/contents-list";
 @import "components/document-list";
 @import "components/error-summary";
 @import "components/feedback";
 @import "components/fieldset";
+@import "components/govspeak";
 @import "components/heading";
+@import "components/image-card";
 @import "components/input";
 @import "components/inverse-header";
 @import "components/label";
 @import "components/lead-paragraph";
+@import "components/notice";
 @import "components/phase-banner";
 @import "components/previous-and-next-navigation";
 @import "components/radio";

data/app/assets/stylesheets/govuk_publishing_components/_all_components_print.scss

@@ -7,7 +7,10 @@
 @import "typography";
 @import "colours";
 
+@import "components/print/contents-list";
 @import "components/print/feedback";
+@import "components/print/govspeak-html-publication";
+@import "components/print/govspeak";
 @import "components/print/step-by-step-nav-header";
 @import "components/print/step-by-step-nav";
 @import "components/print/title";

data/app/assets/stylesheets/govuk_publishing_components/components/_button.scss

@@ -35,7 +35,7 @@
     padding-bottom: 0.15em;
   }
 
-  background-image: image-url("icon-pointer.png");
+  background-image: image-url("govuk_publishing_components/icon-pointer.png");
   background-position: 100% 50%;
   background-repeat: no-repeat;
 
@@ -44,7 +44,7 @@
   }
 
   @include device-pixel-ratio() {
-    background-image: image-url("icon-pointer-2x.png");
+    background-image: image-url("govuk_publishing_components/icon-pointer-2x.png");
     background-size: 30px 19px;
   }
 }

data/app/assets/stylesheets/govuk_publishing_components/components/_contents-list.scss

@@ -0,0 +1,70 @@
+@import "helpers/contents-list-helper";
+
+.gem-c-contents-list {
+  // Always render the contents list above a
+  // back to contents link
+  position: relative;
+  margin-bottom: $gutter-two-thirds;
+  z-index: 1;
+  background: $white;
+  box-shadow: 0 20px 15px -10px $white;
+}
+
+.gem-c-contents-list--no-underline {
+  .gem-c-contents-list__link {
+    text-decoration: none;
+
+    &:hover,
+    &:focus,
+    &:active {
+      text-decoration: underline;
+    }
+  }
+}
+
+.gem-c-contents-list__link {
+  .gem-c-contents-list__list-item--parent > & {
+    font-weight: bold;
+  }
+}
+
+.gem-c-contents-list__list-item {
+  padding-top: $gutter-one-third;
+  line-height: 1.3;
+  list-style-type: none;
+
+  @include media(tablet) {
+    padding-top: $gutter-one-quarter;
+  }
+}
+
+.gem-c-contents-list__list-item--dashed {
+  $contents-spacing: $gutter-half + 10;
+  margin-left: $contents-spacing;
+  padding-right: $contents-spacing;
+
+  &:before {
+    content: "— ";
+    margin-left: -$contents-spacing;
+    padding-right: 5px;
+
+    .direction-rtl & {
+      margin-left: 0;
+      margin-right: -$contents-spacing;
+      padding-right: 0;
+      padding-left: 5px;
+    }
+  }
+
+  // Focus styles on IE8 and older include the
+  // left margin, creating an odd white box with
+  // orange border around the em dash.
+  // Use inline-block and vertical alignment to
+  // fix focus styles
+  //
+  // https://github.com/alphagov/government-frontend/pull/420#issuecomment-320632386
+  .lte-ie8 & .gem-c-contents-list__link {
+    display: inline-block;
+    vertical-align: top;
+  }
+}

data/app/assets/stylesheets/govuk_publishing_components/components/_govspeak-html-publication.scss

@@ -0,0 +1,134 @@
+// Override govspeak styles with HTML publication specific ones
+.gem-c-govspeak-html-publication {
+  margin-bottom: $gutter * 1.5;
+  z-index: 2;
+
+  // This fixes the positioning of the sticky element. The reason it's done on the parent element
+  // is because directly messing with the positioning of the sticky element produces undesirable results.
+  // The nested govspeak component handles its own text direction independently, but will
+  // coincide with the direction of its parent anyway in all usecases.
+  &.direction-rtl {
+    direction: rtl;
+    text-align: start;
+  }
+
+  .gem-c-govspeak {
+    h2 {
+      @include bold-36;
+    }
+
+    h3 {
+      @include bold-27;
+    }
+
+    .stat-headline:first-child {
+      margin-top: $gutter;
+
+      @include media(tablet) {
+        margin-top: ($gutter * 2) + $gutter-two-thirds;
+      }
+    }
+
+    h2,
+    h3 {
+      margin-top: $gutter;
+
+      @include media(tablet) {
+        margin-top: ($gutter * 2) + $gutter-two-thirds;
+      }
+    }
+
+    h2:first-child,
+    h3:first-child {
+      margin-top: $gutter-two-thirds;
+
+      @include media(tablet) {
+        margin-top: 0;
+      }
+    }
+
+    h3 .number,
+    h4 .number,
+    h5 .number,
+    h6 .number {
+      margin-right: 0.1em;
+
+      .direction-rtl & {
+        margin-right: 0;
+        margin-left: 0.1em;
+      }
+    }
+
+    // scss-lint:disable QualifyingElement
+    // this class will only be for tables and is to distinguish from a bare `table`
+    // the row classes below should not be applied to anything else but `tr`s
+    table.financial-data {
+
+      .numeric {
+        text-align: right;
+        font-family: $nta-light-tabular;
+      }
+
+      // make all elements inside thead look the same
+      // (td can sometimes be used to overcome complexity of multiple lines in thead)
+      // and make all of thead and tfoot stand out
+      thead,
+      tfoot {
+        background-color: $grey-3;
+      }
+
+      thead th,
+      thead td {
+        font-weight: bold;
+      }
+
+      // don't make `th`s bold unless they are a section heading or a (sub)total row
+      tbody th,
+      tfoot th {
+        font-weight: normal;
+      }
+
+      // needs padding due to occasional background colour
+      // is intentionally small and not balanced with other padding
+      // as tables can be quite wide
+      tr > :first-child {
+        padding-left: $gutter-one-third / 2;
+      }
+
+      // add spacing so that groupings are clearer
+      tr.section-heading > * {
+        font-weight: bold;
+        padding-top: $gutter;
+      }
+
+      // ideally this should be just a top margin on the tfoot
+      // but as that is very tricky, this is more complex
+      tbody:last-of-type tr:last-child > *,
+      tfoot ~ tbody:last-of-type tr:last-child > * {
+        padding-bottom: $gutter;
+      }
+
+      tbody:last-child tr:last-child > * {
+        padding-bottom: $gutter-one-third;
+      }
+
+      // total and subtotal rows
+      tr.subtotal > *,
+      tr.total > * {
+        border-top: 3px solid $grey-2;
+      }
+
+      tr.total > *,
+      tbody tr.subtotal > * {
+        font-weight: bold;
+      }
+
+      // the total is usually in the tfoot, so already has that background colour
+      // but when it's used inside the tbody, it should also be highlighted
+      tr.total {
+        background-color: $grey-3;
+      }
+    }
+    // scss-lint:enable QualifyingElement
+  }
+}

data/app/assets/stylesheets/govuk_publishing_components/components/_govspeak.scss

@@ -0,0 +1,29 @@
+@import "govspeak/advisory";
+@import "govspeak/attachment";
+@import "govspeak/button";
+@import "govspeak/call-to-action";
+@import "govspeak/charts";
+@import "govspeak/contact";
+@import "govspeak/example";
+@import "govspeak/footnotes";
+@import "govspeak/form-download";
+@import "govspeak/fraction";
+@import "govspeak/highlight-answer";
+@import "govspeak/images";
+@import "govspeak/information-callout";
+@import "govspeak/legislative-list";
+@import "govspeak/media-player";
+@import "govspeak/place";
+@import "govspeak/stat-headline";
+@import "govspeak/steps";
+@import "govspeak/summary";
+@import "govspeak/tables";
+@import "govspeak/typography";
+@import "govspeak/warning-callout";
+
+.gem-c-govspeak {
+  &.direction-rtl {
+    direction: rtl;
+    text-align: start;
+  }
+}

data/app/assets/stylesheets/govuk_publishing_components/components/_image-card.scss

@@ -0,0 +1,123 @@
+@import 'grid_layout';
+
+.gem-c-image-card {
+  // if this extends grid-row a margin-bottom can't
+  // be applied as the extend overrides it
+  @extend %contain-floats;
+  margin: 0 (-$gutter-half) $gutter (-$gutter-half);
+  position: relative;
+}
+
+.gem-c-image-card__image-wrapper {
+  @include grid-column( 1 / 3, mobile );
+
+  @include media(tablet) {
+    margin-bottom: $gutter-one-third;
+  }
+
+  + .gem-c-image-card__text-wrapper {
+    @include media(mobile) {
+      padding-left: 0;
+    }
+  }
+}
+
+.gem-c-image-card__image {
+  display: block;
+  max-width: 100%;
+}
+
+.gem-c-image-card__text-wrapper {
+  @include grid-column( 2 / 3, mobile );
+}
+
+.gem-c-image-card__title {
+  @include bold-19;
+}
+
+.gem-c-image-card__title-link {
+  // the after element extends the link to cover the image, removing the
+  // need for a duplicate link. Other elements apart from the image are given
+  // position relative and a higher z-index to put them above the after element
+  &:after {
+    content: "";
+    position: absolute;
+    z-index: 1;
+    top: 0;
+    left: $gutter-half;
+    right: $gutter-half;
+    height: 100%;
+    $ie-background: rgba(255, 255, 255, 0);
+    background: $ie-background; // because internet explorer
+  }
+}
+
+.gem-c-image-card__context,
+.gem-c-image-card__description {
+  position: relative;
+  z-index: 2;
+}
+
+.gem-c-image-card__context {
+  @include core-14;
+  color: $grey-1;
+}
+
+.gem-c-image-card__description {
+  padding-top: $gutter-one-quarter;
+}
+
+.gem-c-image-card__list {
+  position: relative;
+  z-index: 2;
+  padding: $gutter-one-quarter 0 0 0;
+  margin: 0;
+  list-style: none;
+
+  &.gem-c-image-card__list--indented {
+    padding-left: $gutter-half;
+
+    .gem-c-image-card__list-item {
+      position: relative;
+
+      &:before {
+        content: "-";
+        position: absolute;
+        left: -$gutter-half;
+      }
+    }
+  }
+}
+
+.gem-c-image-card--large {
+  .gem-c-image-card__image-wrapper {
+    @include grid-column( 2 / 3, tablet );
+  }
+
+  .gem-c-image-card__text-wrapper {
+    @include grid-column( 1 / 3, tablet );
+  }
+
+  .gem-c-image-card__image-wrapper {
+    @include media(mobile) {
+      margin-bottom: $gutter-one-third;
+    }
+  }
+
+  .gem-c-image-card__image-wrapper,
+  .gem-c-image-card__text-wrapper {
+    @include media(mobile) {
+      float: none;
+      width: auto;
+    }
+  }
+
+  .gem-c-image-card__title {
+    @include bold-24;
+    padding-bottom: $gutter-one-third;
+  }
+
+  .gem-c-image-card__description {
+    @include core-19;
+  }
+}

data/app/assets/stylesheets/govuk_publishing_components/components/_notice.scss

@@ -0,0 +1,33 @@
+.gem-c-notice {
+  clear: both;
+  padding: $gutter-two-thirds;
+  border: 2px solid $govuk-blue;
+
+  @include media(mobile) {
+    padding: $gutter-half;
+  }
+
+  .govuk-govspeak {
+    p:last-child {
+      margin-bottom: 0;
+    }
+  }
+}
+
+.gem-c-notice--bottom-margin {
+  @include responsive-bottom-margin;
+}
+
+.gem-c-notice__title {
+  @include bold-27;
+  margin-bottom: $gutter-one-third;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+
+.gem-c-notice__description {
+  @include core-19;
+  margin-bottom: 0;
+}