govuk_publishing_components 29.13.0 → 29.14.0

data/node_modules/govuk-frontend/govuk/components/label/fixtures.json

@@ -19,7 +19,43 @@
             "hidden": false
         },
         {
-            "name": "as page heading",
+            "name": "styled as xl text",
+            "options": {
+                "text": "National Insurance number",
+                "classes": "govuk-label--xl"
+            },
+            "html": "<label class=\"govuk-label govuk-label--xl\">\n  National Insurance number\n</label>",
+            "hidden": false
+        },
+        {
+            "name": "styled as large text",
+            "options": {
+                "text": "National Insurance number",
+                "classes": "govuk-label--l"
+            },
+            "html": "<label class=\"govuk-label govuk-label--l\">\n  National Insurance number\n</label>",
+            "hidden": false
+        },
+        {
+            "name": "styled as medium text",
+            "options": {
+                "text": "National Insurance number",
+                "classes": "govuk-label--m"
+            },
+            "html": "<label class=\"govuk-label govuk-label--m\">\n  National Insurance number\n</label>",
+            "hidden": false
+        },
+        {
+            "name": "styled as small text",
+            "options": {
+                "text": "National Insurance number",
+                "classes": "govuk-label--s"
+            },
+            "html": "<label class=\"govuk-label govuk-label--s\">\n  National Insurance number\n</label>",
+            "hidden": false
+        },
+        {
+            "name": "as page heading xl",
             "options": {
                 "text": "National Insurance number",
                 "classes": "govuk-label--xl",
@@ -28,6 +64,45 @@
             "html": "<h1 class=\"govuk-label-wrapper\">\n  <label class=\"govuk-label govuk-label--xl\">\n    National Insurance number\n  </label>\n  </h1>",
             "hidden": false
         },
+        {
+            "name": "as page heading l",
+            "options": {
+                "text": "National Insurance number",
+                "classes": "govuk-label--l",
+                "isPageHeading": true
+            },
+            "html": "<h1 class=\"govuk-label-wrapper\">\n  <label class=\"govuk-label govuk-label--l\">\n    National Insurance number\n  </label>\n  </h1>",
+            "hidden": false
+        },
+        {
+            "name": "as page heading m",
+            "options": {
+                "text": "National Insurance number",
+                "classes": "govuk-label--m",
+                "isPageHeading": true
+            },
+            "html": "<h1 class=\"govuk-label-wrapper\">\n  <label class=\"govuk-label govuk-label--m\">\n    National Insurance number\n  </label>\n  </h1>",
+            "hidden": false
+        },
+        {
+            "name": "as page heading s",
+            "options": {
+                "text": "National Insurance number",
+                "classes": "govuk-label--s",
+                "isPageHeading": true
+            },
+            "html": "<h1 class=\"govuk-label-wrapper\">\n  <label class=\"govuk-label govuk-label--s\">\n    National Insurance number\n  </label>\n  </h1>",
+            "hidden": false
+        },
+        {
+            "name": "as page heading without class",
+            "options": {
+                "text": "National Insurance number",
+                "isPageHeading": true
+            },
+            "html": "<h1 class=\"govuk-label-wrapper\">\n  <label class=\"govuk-label\">\n    National Insurance number\n  </label>\n  </h1>",
+            "hidden": false
+        },
         {
             "name": "empty",
             "options": {},

data/node_modules/govuk-frontend/govuk/components/pagination/README.md

@@ -0,0 +1,15 @@
+# Pagination
+
+## Installation
+
+See the [main README quick start guide](https://github.com/alphagov/govuk-frontend#quick-start) for how to install this component.
+
+## Guidance and Examples
+
+Find out when to use the pagination component in your service in the [GOV.UK Design System](https://design-system.service.gov.uk/components/pagination).
+
+## Component options
+
+Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
+
+See [options table](https://design-system.service.gov.uk/components/details/#options-pagination-example) for details.

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

@@ -0,0 +1,244 @@
+@include govuk-exports("govuk/component/pagination") {
+  // Flexbox enhancement for small screen visual design
+  // Falls back to a float: left layout on non-flex browsers
+  .govuk-pagination {
+    @include govuk-responsive-margin(6, "bottom");
+    display: -ms-flexbox;
+    display: flex;
+    -ms-flex-direction: column;
+        flex-direction: column;
+    -ms-flex-align: center;
+        align-items: center;
+    -ms-flex-wrap: wrap;
+        flex-wrap: wrap;
+
+    @include govuk-media-query($from: tablet) {
+      -ms-flex-direction: row;
+          flex-direction: row;
+      -ms-flex-align: start;
+          align-items: flex-start;
+    }
+  }
+
+  .govuk-pagination__list {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  .govuk-pagination__item,
+  .govuk-pagination__next,
+  .govuk-pagination__prev {
+    @include govuk-font(19);
+    box-sizing: border-box;
+    position: relative;
+    min-width: 45px;
+    min-height: 45px;
+    padding: govuk-spacing(2) govuk-spacing(3);
+    float: left; // Float is ignored if flex is active for prev/next links
+
+    &:hover {
+      background-color: govuk-colour("light-grey", $legacy: "grey-4");
+    }
+  }
+
+  .govuk-pagination__item {
+    // Hide items on small screens except the prev/next items,
+    // non-link items and the first and last items
+    display: none;
+
+    // Center align pagination links in their parent list item so that they
+    // visually sit in the middle of their touch area
+    text-align: center;
+
+    @include govuk-media-query($from: tablet) {
+      display: block;
+    }
+  }
+
+  .govuk-pagination__prev,
+  .govuk-pagination__next {
+    @include govuk-typography-weight-bold;
+
+    // Use flex to get around a whitespace issue between the arrow svg and the link text
+    // without having to rely on whitespace control from backend tooling
+    .govuk-pagination__link {
+      display: -ms-flexbox;
+      display: flex;
+      -ms-flex-align: center;
+          align-items: center;
+    }
+  }
+
+  .govuk-pagination__prev {
+    padding-left: 0;
+  }
+
+  .govuk-pagination__next {
+    padding-right: 0;
+  }
+
+  // Only show first, last and non-link items on mobile
+  .govuk-pagination__item--current,
+  .govuk-pagination__item--ellipses,
+  .govuk-pagination__item:first-child,
+  .govuk-pagination__item:last-child {
+    display: block;
+  }
+
+  .govuk-pagination__item--current {
+    @include govuk-typography-weight-bold;
+    outline: 1px solid transparent;
+    background-color: $govuk-link-colour;
+
+    &:hover {
+      background-color: $govuk-link-colour;
+    }
+
+    .govuk-pagination__link {
+      @include govuk-link-style-inverse;
+    }
+  }
+
+  .govuk-pagination__item--ellipses {
+    @include govuk-typography-weight-bold;
+    color: $govuk-secondary-text-colour;
+
+    // Remove hover state for ellipsis items as they don't have links within them
+    &:hover {
+      background-color: transparent;
+    }
+  }
+
+  .govuk-pagination__link {
+    display: block;
+    min-width: govuk-spacing(3);
+
+    &:after {
+      content: "";
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+    }
+
+    // Add link hover decoration to prev/next text if no label present on prev/next only mode
+    // We do this so that we have a hover state in all possible instances
+    &:hover,
+    &:active {
+      .govuk-pagination__link-title--decorated {
+        @include govuk-link-decoration;
+      }
+
+      .govuk-pagination__link-label,
+      .govuk-pagination__link-title--decorated {
+        @include govuk-link-hover-decoration;
+      }
+    }
+
+    &:focus {
+      .govuk-pagination__icon {
+        color: $govuk-focus-text-colour;
+      }
+
+      .govuk-pagination__link-label {
+        text-decoration: none;
+      }
+
+      .govuk-pagination__link-title--decorated {
+        text-decoration: none;
+      }
+    }
+  }
+
+  .govuk-pagination__link-label {
+    @include govuk-font($size: 19, $weight: "regular");
+    @include govuk-link-decoration;
+    display: inline-block;
+    padding-left: govuk-spacing(6);
+  }
+
+  .govuk-pagination__icon {
+    // Set size using rems to make the icon scale with text if user resizes text in their browser
+    width: govuk-px-to-rem(15px);
+    height: govuk-px-to-rem(13px);
+    color: $govuk-secondary-text-colour;
+    fill: currentcolor;
+    forced-color-adjust: auto;
+  }
+
+  .govuk-pagination__icon--prev {
+    margin-right: govuk-spacing(3);
+  }
+
+  .govuk-pagination__icon--next {
+    margin-left: govuk-spacing(3);
+  }
+
+  // Block mode - position previous and next links above and below numbers
+  .govuk-pagination--block {
+    display: block;
+
+    .govuk-pagination__item {
+      padding: govuk-spacing(3);
+      float: none;
+    }
+
+    .govuk-pagination__next,
+    .govuk-pagination__prev {
+      padding-left: 0;
+      float: none;
+    }
+
+    .govuk-pagination__next {
+      padding-right: govuk-spacing(3);
+
+      .govuk-pagination__icon {
+        margin-left: 0;
+      }
+    }
+
+    // Only apply a border between prev and next if both are present
+    .govuk-pagination__prev + .govuk-pagination__next {
+      border-top: 1px solid $govuk-border-colour;
+    }
+
+    // Reset both these elements to their inline default, both to ensure that the focus state
+    // for block mode "shrink wraps" text as expected
+    .govuk-pagination__link,
+    .govuk-pagination__link-title {
+      display: inline;
+    }
+
+    // Set the after pseudo element to a block which makes the title visually display
+    // as block level whilst programmatically being inline
+    // We do this to get around an NVDA quirk where adjacent block level
+    // elements are always read out separately
+    .govuk-pagination__link-title:after {
+      content: "";
+      display: block;
+    }
+
+    .govuk-pagination__link {
+      text-align: left;
+
+      &:focus {
+        // apply focus styling to the label within the link as if it were being focused
+        // to get around a display issue with a focusable inline element containing a mixture
+        // of inline and inline-block level elements
+        .govuk-pagination__link-label {
+          @include govuk-focused-text;
+        }
+      }
+
+      &:not(:focus) {
+        text-decoration: none;
+      }
+    }
+
+    .govuk-pagination__icon {
+      margin-right: govuk-spacing(2);
+    }
+  }
+}

data/node_modules/govuk-frontend/govuk/components/pagination/_pagination.scss

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