govuk_publishing_components 8.2.0 → 9.0.0

data/app/assets/stylesheets/govuk_publishing_components/components/_share-links.scss

@@ -1,9 +1,17 @@
 $share-button-width: 32px;
 $share-button-height: 32px;
 
+.gem-c-share-links__list {
+  list-style: none;
+}
+
+.gem-c-share-links__list-item {
+  display: inline-block;
+  margin-bottom: $gutter-one-third;
+}
+
 .gem-c-share-links__link {
   margin-right: $gutter;
-  margin-bottom: $gutter-one-third;
   @include bold-16($line-height: $share-button-height, $line-height-640: $share-button-height);
   text-decoration: none;
 }
@@ -38,3 +46,9 @@ $share-button-height: 32px;
     }
   }
 }
+
+.gem-c-share-links--stacked {
+  .gem-c-share-links__list-item {
+    display: block;
+  }
+}

data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_advisory.scss

@@ -0,0 +1,34 @@
+$info-background: #D5E8F3;
+$high-alert-border:#C00;
+
+.gem-c-govspeak .advisory {
+  background: image-url("icon-information.png") no-repeat scroll 98% 1em $info-background;
+  line-height: 1.3em;
+  margin: 0 -1em 1em;
+  padding: 1em;
+  text-align: left;
+
+  @include device-pixel-ratio() {
+    background-image: image-url("icon-information-2x.png");
+    background-size: 27px 27px;
+  }
+
+  p {
+    margin: 0 0.75em 0 0;
+    min-height: 1.75em;
+    padding-right: 3em;
+  }
+
+  strong {
+    font-weight: 400;
+  }
+
+  &.high-alert {
+    background-color: $panel-colour;
+    border-color: $high-alert-border;
+  }
+
+  @include media-down(mobile) {
+    margin: 0 0 1em;
+  }
+}

data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_attachment.scss

@@ -0,0 +1,111 @@
+// Govspeak attachment
+// https://govuk-static.herokuapp.com/component-guide/govspeak/block_attachments
+//
+// Support:
+// - alphagov/whitehall: ✔︎
+// - alphagov/govspeak: ✔︎
+
+.gem-c-govspeak {
+  // This block is duplicated from Whitehall as a transitional step, see the
+  // commit message for 2d893c10ee3f2cab27162b9aba38b12379a71d07 before making
+  // changes, original version:
+  // https://github.com/alphagov/whitehall/blob/master/app/assets/stylesheets/frontend/helpers/_attachment.scss
+  $thumbnail-width: 99px;
+
+  .attachment {
+    position: relative;
+    margin: $gutter 0;
+    padding: $gutter-half 0 0 ($thumbnail-width + $gutter);
+    @extend %contain-floats;
+
+    &:first-child {
+      margin-top: 0;
+      padding-top: 0;
+    }
+
+    .attachment-thumb {
+      $thumb-border-width: $gutter-one-third / 2;
+
+      position: relative;
+      float: left;
+      margin-top: $thumb-border-width;
+      margin-left: -($thumbnail-width + $gutter - $thumb-border-width);
+      padding-bottom: $gutter-half;
+
+      img {
+        display: block;
+        width: $thumbnail-width;
+        height: 140px;
+        background: $white;
+        outline: $thumb-border-width solid transparentize($black, 0.9);
+
+        @include ie-lte(8) {
+          // IE8 incorrectly asserts the "max-width: 100%" rule to be 0
+          // because of the collapsed width on its floating container
+          // Reset the max-width so that thumbnails render at the specified
+          // width above.
+          // http://www.456bereastreet.com/archive/201202/using_max-width_on_images_can_make_them_disappear_in_ie8/
+          max-width: none;
+          border: $thumb-border-width solid $grey-3;
+        }
+
+        @include box-shadow(0 2px 2px rgba($black, .4));
+      }
+    }
+
+    .attachment-details {
+      h2 {
+        @include core-27;
+        margin: 0;
+      }
+
+      p {
+        margin: $gutter-one-third 0;
+      }
+
+      .metadata {
+        @include core-14;
+      }
+
+      .changed,
+      .references,
+      .unnumbered-paper {
+        display: block;
+      }
+
+      .preview,
+      .download {
+        @include core-19;
+
+        strong {
+          font-weight: bold;
+        }
+      }
+
+      .preview {
+        padding-right: $gutter-half;
+      }
+
+      .opendocument-help {
+        @include core-14;
+      }
+
+      .accessibility-warning {
+        h2 {
+          @include core-14;
+          margin: 0;
+        }
+      }
+    }
+  }
+
+  &.direction-rtl .attachment {
+    padding: $gutter-half ($thumbnail-width + $gutter) 0 0;
+
+    .attachment-thumb {
+      float: right;
+      margin-left: 0;
+      margin-right: (($thumbnail-width * -1) - $gutter-half);
+    }
+  }
+}

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

@@ -0,0 +1,11 @@
+@import "govuk_publishing_components/components/button";
+
+.gem-c-govspeak {
+  .button {
+    @extend %gem-c-button;
+  }
+
+  .button-start {
+    @extend %gem-c-button--start;
+  }
+}

data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_call-to-action.scss

@@ -0,0 +1,25 @@
+// Govspeak call to action
+// https://govuk-static.herokuapp.com/component-guide/govspeak/call_to_action
+//
+// Support:
+//
+// - alphagov/whitehall: ✔︎
+// - alphagov/govspeak: ✔︎
+
+.gem-c-govspeak {
+  .call-to-action {
+    margin: 2em 0;
+    background-color: $panel-colour;
+    padding: 2em;
+
+    &:first-child {
+      margin-top: 0;
+    }
+
+    p:last-child,
+    ul:last-child,
+    ol:last-child {
+      margin-bottom: 0;
+    }
+  }
+}

data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_charts.scss

@@ -0,0 +1,306 @@
+// Govspeak charts
+// https://govuk-static.herokuapp.com/component-guide/govspeak/charts
+// Uses Magna Charta (https://github.com/alphagov/magna-charta)
+//
+// Support:
+// - alphagov/whitehall: ✔︎
+// - alphagov/govspeak: ✔︎
+
+// Disable linting for vendor asset
+// scss-lint:disable all
+/*
+ * magna-charta example stylesheet
+ * https://github.com/alphagov/magna-charta
+ *
+ * Author: Tim Paul
+ * Licensed under the MIT license.
+ */
+
+.gem-c-govspeak {
+  // DEFAULT CHART STYLES
+
+  $label-width: 40%; // Horizontal width taken up by the bar labels
+  $label-align: right; // Label alignment
+  $base-unit: 16px; // For font sizes and related spacing
+  $compact-font-size: 12px; // For the 'compact' bar style
+  $bar-padding: 8px; // The padding between the bar values and the edge of the bar
+  $bar-spacing: 5px; // The spacing around the bars
+  $stack-spacing: 1px; // For stacked bars, the spacing between each stack in a bar
+  $caption-side: top; // Caption alignment. Top or bottom.
+  $key-width: 160px; // Only used by IE. Other browsers get smallest width that fits content
+
+  // CHART COLOUR SCHEME
+
+  @import "colours"; // Cabinet Office colour palette (feel free to choose your own)
+  $chart-border: $white; // Chart border colour
+  $key-border: $white; // Key border colour
+  $bar-colours: $govuk-blue, $turquoise, $green, $grass-green, $yellow, $orange, $red, $mellow-red;
+
+  // HELPER MIXINS
+
+  @mixin visually-hidden {
+    // Hides content visually, but not from screen readers
+    position: absolute !important;
+    clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
+    clip: rect(1px, 1px, 1px, 1px);
+    padding: 0 !important;
+    border: 0 !important;
+    height: 1px !important;
+    width: 1px !important;
+    overflow: hidden;
+  }
+
+  // CHART STYLES
+  .mc-chart {
+    font-size: $base-unit;
+    display: table;
+    width: 100%;
+    border-spacing: 0 $bar-spacing;
+    border: 1px solid $chart-border;
+    padding: $base-unit 0;
+    position: relative;
+    margin-bottom: $base-unit;
+
+    // CAPTION STYLES
+    .mc-caption {
+      display: table-caption;
+      font-size: $base-unit;
+      text-align: center;
+      caption-side: $caption-side;
+      margin: $base-unit 0;
+    }
+
+    // KEY STYLES
+    .mc-thead {
+      background-color: #fff;
+      display: table-header-group;
+      padding: $bar-spacing;
+      border: 1px solid $key-border;
+
+      .mc-th {
+        display: none; // Hide all header cells first
+      }
+
+      .mc-key-header {
+        display: block; // Show the header cells that form part of the key
+        margin-bottom: $bar-spacing;
+        margin-left: 100%;
+        padding-left: $bar-spacing;
+        border-left: $base-unit solid;
+        text-align: left;
+        font-weight: normal;
+        width: 100%;
+
+        &:last-child {
+          margin-bottom: 0;
+        }
+      }
+
+      // Key colours
+      @for $i from 0 to length($bar-colours) {
+        .mc-key-#{$i + 1} {
+          border-left-color: nth($bar-colours, $i + 1);
+        }
+      }
+    }
+
+    // Right and left aligned keys
+    &.right-key .mc-thead,
+    &.left-key .mc-thead {
+      position: absolute;
+      top: 100px;
+
+      .mc-key-header {
+        margin-left: 0;
+      }
+    }
+
+    &.right-key .mc-thead {
+      right: 26px;
+    }
+
+    &.left-key .mc-thead {
+      left: 26px;
+    }
+
+    // Hidden keys
+    &.no-key .mc-thead {
+      display: none;
+    }
+
+    // BAR STYLES
+    .mc-tbody {
+      display: table-row-group;
+
+      .mc-tr {
+        display: table-row;
+
+        // Bars and bar labels
+        .mc-bar-cell,
+        .mc-key-cell {
+          padding-right: $bar-spacing;
+          margin-right: $stack-spacing;
+          box-sizing: border-box;
+          border: 0 solid;
+        }
+
+        // Bars
+        .mc-bar-cell {
+          display: block;
+          text-align: left;
+          padding: $bar-padding 0;
+          margin-bottom: 1px;
+          color: $white;
+          text-indent: $bar-padding;
+        }
+
+        // Bar colours
+        @for $i from 0 to length($bar-colours) {
+          .mc-bar-#{$i + 1} {
+            background-color: nth($bar-colours, $i + 1);
+          }
+        }
+
+        // Negative bars
+        .mc-bar-negative {
+          text-align: right;
+          padding-right: $bar-padding;
+        }
+
+        .mc-value-overflow {
+          text-indent: -99999px !important;
+        }
+
+        // Bar labels
+        .mc-key-cell {
+          width: $label-width;
+          text-indent: 26px;
+          text-align: $label-align;
+          display: table-cell;
+          vertical-align: middle;
+        }
+      }
+    }
+
+    // STACKED CHARTS
+    &.mc-stacked {
+      .mc-stacked-header {
+        display: none; // Hide the header for the totals column
+      }
+
+      .mc-th:nth-last-child(2) {
+        margin-bottom: 0;
+      }
+
+      .mc-stacked-total {
+        padding: $bar-padding 0;
+        background-color: transparent !important;
+        color: $black;
+        display: inline-block;
+        text-indent: 5px;
+      }
+
+      .mc-tbody .mc-bar-cell {
+        display: inline-block;
+      }
+    }
+
+    // COMPACT CHARTS
+    &.compact {
+      .mc-td.mc-bar-cell {
+        font-size: $compact-font-size;
+        text-indent: 2px;
+        padding: 0;
+      }
+    }
+
+    // Charts with multiple columns get different coloured bars
+    $len: length($bar-colours);
+
+    @for $i from 0 to $len {
+      .mc-tr .mc-td.mc-bar-cell.mc-bar-#{$i + 1} {
+        background-color: nth($bar-colours, $i + 1);
+      }
+
+      .mc-tr .mc-th.mc-key-#{$i + 1} {
+        border-left-color: nth($bar-colours, $i + 1);
+      }
+    }
+
+    .mc-td, .mc-th {
+      padding: 0;
+      padding-right: $bar-spacing;
+      margin-right: $stack-spacing;
+      border: 0 solid;
+
+      &.mc-bar-cell {
+        display: block;
+        background-color: #ebebeb; // Just for testing
+        text-align: left;
+        padding: $bar-padding 0;
+        margin-bottom: 1px;
+        color: $white;
+        text-indent: 4px;
+      }
+    }
+
+    .mc-bar-outdented {
+      span {
+        color: #111;
+      }
+    }
+
+    caption {
+      caption-side: $caption-side;
+    }
+
+    .mc-td.mc-key-cell {
+      width: $label-width;
+      text-indent: 26px;
+      text-align: $label-align;
+      display: table-cell;
+      vertical-align: middle;
+    }
+
+    // OUTDENTED BAR VALUES
+    &.mc-outdented {
+      .mc-tbody {
+        .mc-tr {
+          .mc-bar-cell {
+            color: #111;
+          }
+
+          .mc-bar-negative {
+            text-align: left;
+          }
+        }
+      }
+    }
+
+    &.mc-negative .mc-td.mc-key-cell {
+      padding-right: 25px;
+    }
+  }
+
+  .mc-outdented .mc-bar-cell.mc-bar-negative {
+    text-align: left;
+  }
+
+  .mc-chart.mc-negative .mc-td.mc-key-cell {
+    padding-right: 25px;
+  }
+
+  .mc-toggle-link {
+    display: block;
+    margin-top: 30px;
+  }
+
+  // Hides the original table
+  .visually-hidden,
+  .visually-hidden caption {
+    @include visually-hidden;
+
+    // It's reapplied to captions because Firefox can't hide
+    // table captions unless it's applied directly to it. Go figure.
+  }
+}