daqi first bar update and welsh translation cookie fix.

Dockerfile

@@ -37,6 +37,7 @@ USER root
 RUN apk update && \
     apk add curl && \
     rm -rf /var/cache/apk/*
+
 USER node
 
 ARG PARENT_VERSION

src/client/assets/stylesheets/sass/components/_aq-definition-list.scss

@@ -0,0 +1,17 @@
+
+.aq-definition-list {
+ dt {
+    padding: govuk-spacing(4) govuk-spacing(4) govuk-spacing(4) 0;
+    border-top: 1px solid $govuk-border-colour;
+    text-align: left;
+    vertical-align: top;
+ }
+
+ dd {
+    @include govuk-font($size: 19);
+    padding: 0 govuk-spacing(4) govuk-spacing(4) 0;
+    margin: 0;
+    text-align: left;
+    vertical-align: top;
+ }
+}

src/client/assets/stylesheets/sass/components/_aq-forecast.scss

@@ -0,0 +1,38 @@
+.aq-forecast-table {
+    @include govuk-responsive-margin(8, 'bottom');
+}
+
+// Define a placeholder selector
+%daqi-table-cell {
+    // Move styles from .daqi-table__cell here
+    padding: 10px;
+    border: 1px solid #cccccc;
+    text-align: center;
+    // Add other styles as needed
+  }
+
+  // Update .daqi-table__cell to extend the placeholder
+  .daqi-table__cell {
+    @extend %daqi-table-cell;
+  }
+
+.aq-forecast-table__cell {
+    @extend %daqi-table__cell;
+    @include govuk-font($size: 19);
+}
+
+.aq-daqi-table__cell {
+    @include govuk-font($size: 16, $weight: regular, $line-height: 1);
+    padding: 6px 0;
+    border:0;
+    text-align: center;
+    border-right: 2px solid #ffffff; /* Add a 3px white vertical border to data cells */
+    width: 25%;
+}
+
+.daqi-scale-hidden {
+        @include defra-visually-hidden;
+} 
+
+
+

src/client/assets/stylesheets/sass/components/_aq-tabs.scss

@@ -0,0 +1,160 @@
+
+.govuk-tabs__list {
+    @include mq ($until: tablet) {
+        display: none;
+        @include defra-visually-hidden;
+    }
+}
+
+
+.defra-aq-tabs {
+    margin-bottom: 0;
+    padding: 0;
+
+    .govuk-tabs__list {
+        display: none; 
+    }
+
+    .govuk-tabs__list-item {
+        text-align: left;
+    }
+
+    .govuk-tabs__list-item--forecast {
+        text-align: center;
+    }
+
+
+.govuk-tabs__panel h3 {
+    position: relative;
+    margin-top: govuk-spacing(0);
+    @include mq ($from: tablet) {
+        padding: 0;
+        @include govuk-responsive-margin(4, 'bottom');
+        }
+    }
+}
+
+
+    .govuk-tabs__panel:last-child {
+        margin-bottom: govuk-spacing(4);
+    }
+
+    .govuk-tabs__panel--forecast {
+        margin-bottom: govuk-spacing(0);
+        padding-bottom: govuk-spacing(0);
+        border-bottom:1px solid $govuk-border-colour;
+        @include mq ($from: tablet) {
+            margin-bottom: govuk-spacing(6);
+            padding-bottom: 0;
+            border: 0;
+        }
+    }
+
+    .govuk-tabs__panel--forecast:last-child {
+        border: 0;
+        margin-bottom: govuk-spacing(4);
+        padding-bottom: 0;
+    }
+
+    .govuk-tabs__tab {
+        display: block;
+    }
+
+    .govuk-tabs__tab--forecast {
+        text-align: center;
+        display: block;
+    }
+
+    .govuk-tabs__title {
+        display: none;
+        @include mq ($from: tablet) {
+            display: block;
+            @include defra-visually-hidden;
+        }
+    }
+
+    @include mq ($from: tablet) {
+        border-bottom:0;
+        margin-bottom:0;
+    }
+
+    &__label {
+        text-decoration: underline;
+    }
+
+    &__label-status {
+        padding-top: govuk-spacing(1);
+        display:block;
+        @include govuk-font($size: 16);
+        text-decoration: none;
+    }
+
+    &__label-distance {
+        padding-top: govuk-spacing(1);
+        display:block;
+        @include govuk-font($size: 16);
+        text-decoration: none;
+    }
+
+    &__label-daqi {
+        display:block;
+        padding: govuk-spacing(1) 0 0 0;
+        @include govuk-font($size: 24);
+        text-decoration: none;
+    }
+
+    .defra-aq-tabs-status {
+        display: block;
+        position: absolute;
+    }
+
+    .defra-aq-tabs .govuk-tabs__list-item--selected {
+        .defra-aq-tabs-status {
+            display: none;
+        }
+    }
+
+    .aq-forecast-tabs__title, .defra-aq-site__distance {
+        @include mq ($from: tablet) {
+            display: none;
+            @include defra-visually-hidden;
+        }
+    } 
+
+    .defra-aq-site__title {
+        @include govuk-responsive-margin(1, 'bottom');
+        @include mq ($from: tablet) {
+            @include govuk-responsive-margin(4, 'bottom');
+        }
+    } 
+
+    .js-enabled {
+        .defra-aq-tabs .govuk-tabs__tab:active .defra-aq-tabs__label,
+        .defra-aq-tabs .govuk-tabs__tab:focus .defra-aq-tabs__label,
+        .govuk-tabs__list-item--selected .defra-aq-tabs__label {
+            text-decoration: none;
+        }
+    }
+
+    .js-enabled .defra-aq-tabs {
+    > h3 {
+        @include mq ($from: tablet) {
+            display: block;
+        }
+    }
+
+    .govuk-tabs__list {
+        @include mq ($from: tablet) {
+            display: block;
+        }  
+    }
+
+    .govuk-tabs__panel--sites {
+        @include mq ($from: tablet) {
+            padding-top: govuk-spacing(1);
+            padding-left: 0;
+            padding-right: 0;
+            border: 0;
+        }
+    } 
+}

src/client/assets/stylesheets/sass/components/_cards.scss

@@ -0,0 +1,131 @@
+.app-cards__heading {
+  margin: 0 0 govuk-spacing(6) 0;
+}
+
+.app-cards__list {
+  list-style: none;
+  padding: 0;
+  // Remove the outermost left and right margin from the internal margin of the list items.
+  margin: 0 govuk-spacing(-3);
+
+  display: grid;
+  grid-auto-flow: row;
+  // Use CSS grid to calculate the number of rows
+  grid-template-rows: auto;
+  // Use the tallest cell in the grid to set the height for all rows
+  grid-auto-rows: 1fr;
+  grid-template-columns: 1fr;
+
+  @include govuk-media-query($from: "tablet") {
+    grid-template-columns: 1fr;
+  }
+
+  @include govuk-media-query($from: "desktop") {
+    // Note that browsers that don't support CSS grid display the component as
+    // one column on all breakpoints
+    grid-template-columns: 1fr 1fr;
+
+    // For browsers that don't support CSS grid, constrain the width to 50% to
+    // improve usability especially for screen magnifier users
+    width: 50%;
+
+    // Reset the width for browsers that support CSS grid
+    @supports (display: grid) {
+      width: initial;
+    }
+  }
+}
+
+.app-cards__list--two-column-desktop {
+  @include govuk-media-query($from: "desktop") {
+    grid-template-columns: 1fr 1fr;
+  }
+}
+
+.app-cards__list-item {
+  border-top: 1px solid $govuk-border-colour;
+  // We use grid to split the container into column widths, so manage the
+  // horizontal spacing with internal margins.
+  margin: 0 govuk-spacing(3);
+  padding: govuk-spacing(1) 0 govuk-spacing(4) 0;
+}
+
+.app-cards__list-item-wrapper {
+  // This wrapper ensures that the clickable area of the card only
+  // covers the area of the card containing text so in a grid of cards
+  // there is space above and below each link
+  padding: govuk-spacing(2) govuk-spacing(6) govuk-spacing(2) 0;
+  position: relative;
+}
+
+.app-cards__sub-heading {
+  margin-bottom: govuk-spacing(2);
+}
+
+.app-cards__link {
+  // Make the entire list item area clickable
+  &::after {
+    bottom: 0;
+    content: "";
+    left: 0;
+    position: absolute;
+    right: 0;
+    top: 0;
+  }
+
+  &::before {
+    $dimension: 7px;
+    $width: 3px;
+
+    border-right: $width solid $govuk-brand-colour;
+    border-top: $width solid $govuk-brand-colour;
+    content: "";
+    height: $dimension;
+    position: absolute;
+    right: govuk-spacing(1);
+    top: govuk-spacing(3);
+    transform: rotate(45deg);
+    width: $dimension;
+  }
+
+  &:visited {
+    &::before {
+      border-color: $govuk-link-visited-colour;
+    }
+  }
+
+  &:hover {
+    &::before {
+      border-color: $govuk-link-hover-colour;
+    }
+  }
+
+  &:focus {
+    &::before {
+      border-color: $govuk-focus-text-colour;
+    }
+  }
+}
+
+.app-cards__description {
+  margin: 0 govuk-spacing(-6) 0 0;
+}
+
+@include govuk-media-query($media-type: print) {
+  .app-cards__list {
+    display: block;
+  }
+
+  .app-cards__list-item {
+    padding-bottom: 0;
+  }
+
+  .app-cards__sub-heading {
+    margin-top: govuk-spacing(4);
+    margin-bottom: govuk-spacing(1);
+  }
+
+  .app-cards__link::before {
+    display: none;
+  }
+}

src/client/assets/stylesheets/sass/components/_inset-text-colour.scss

@@ -0,0 +1,8 @@
+// Creates coloured bands for the govuk-inset-text
+
+@for $i from 0 through 10 {
+  .govuk-inset-text--#{$i} {
+    border-left: 10px solid nth($daqi-colour, $i + 1);
+    margin-top: 0;
+  }
+}

src/client/assets/stylesheets/sass/elements/_colour.scss

@@ -11,4 +11,18 @@ $daqi-colour-6: govuk-colour("yellow");
 $daqi-colour-7: govuk-colour("red");
 $daqi-colour-8: govuk-colour("red");
 $daqi-colour-9: govuk-colour("red");
-$daqi-colour-10: govuk-colour("purple");
+$daqi-colour-10: govuk-colour("purple");
+
+$daqi-colour: (
+  $daqi-colour-0,
+  $daqi-colour-1,
+  $daqi-colour-2,
+  $daqi-colour-3,
+  $daqi-colour-4,
+  $daqi-colour-5,
+  $daqi-colour-6,
+  $daqi-colour-7,
+  $daqi-colour-8,
+  $daqi-colour-9,
+  $daqi-colour-10
+);