@ministryofjustice/frontend 3.3.0 → 3.4.0

package/moj/components/cookie-banner/_cookie-banner.scss

@@ -1,18 +1,18 @@
 @import "node_modules/govuk-frontend/dist/govuk/objects/width-container";
 
 .moj-cookie-banner {
-  display: none;
-  @include govuk-font(16);
-
   box-sizing: border-box;
+  display: none;
+  left: govuk-spacing(3);
 
   padding-top: govuk-spacing(3);
-  padding-bottom: govuk-spacing(3);
-  left: govuk-spacing(3);
   padding-right: govuk-spacing(3);
+  padding-bottom: govuk-spacing(3);
   background-color: govuk-colour("white");
+  @include govuk-font(16);
 
   &--show {
+    // stylelint-disable-next-line declaration-no-important
     display: block !important;
   }
 
@@ -36,6 +36,7 @@
 
 @include govuk-media-query($media-type: print) {
   .moj-cookie-banner {
+    // stylelint-disable-next-line declaration-no-important
     display: none !important;
   }
 }

package/moj/components/currency-input/_currency-input.scss

@@ -4,25 +4,25 @@
 
 .moj-label__currency {
   @include govuk-font(19);
-  background-color: govuk-colour("light-grey");
   position: absolute;
+  // stylelint-disable-next-line declaration-no-important
   margin: 2px 0 0 2px !important;
   padding: 5.5px 12px;
   border-right: 2px solid govuk-colour("black");
+  background-color: govuk-colour("light-grey");
 
   &--error {
-    background-color: $govuk-error-colour;
     border-right: 2px solid $govuk-error-colour;
     color: govuk-colour("white");
+    background-color: $govuk-error-colour;
   }
 
   @include govuk-media-query($until: tablet) {
     padding: 8px 12px;
   }
-
 }
 
 .moj-input__currency {
   margin: 0;
   padding-left: 40px;
-}
+}

package/moj/components/date-picker/README.md

@@ -1,7 +1,6 @@
 # Date picker
 
-- [Guidance](https://design-patterns.service.justice.gov.uk/components/date-picker
-picker)
+- [Guidance](https://design-patterns.service.justice.gov.uk/components/date-picker)
 
 ## Example
 
@@ -18,19 +17,17 @@ picker)
 
 This component accepts the following arguments.
 
-| Name         | Type   | Required | Description                                                                                                                      |
-| ------------ | ------ | -------- | -------------------------------------------------------------------------------------------------------------------------------- |
-| id           | string | Yes      | The ID of the input.                |
-| name         | string | Yes      | The name of the input, which is submitted with the form data. |
-| value        | string | No       | Optional initial value of the input. |
-| formGroup    | object | No       | Additional options for the form group containing the text input component. See [formGroup](#options-date-picker-form-group). |
-| label        | object | Yes      | The label used by the text input component. See [GOV.UK text input documentation](https://design-system.service.gov.uk/components/text-input/) for label options. |
-| hint         | object | No       | Can be used to add a hint to a text input component. See [GOV.UK text input documentation](https://design-system.service.gov.uk/components/text-input/) for hint options. |
+| Name         | Type   | Required | Description                                                                                                                                                                                                                                                                                                            |
+| ------------ | ------ | -------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| id           | string | Yes      | The ID of the input.                                                                                                                                                                                                                                                                                                   |
+| name         | string | Yes      | The name of the input, which is submitted with the form data.                                                                                                                                                                                                                                                          |
+| value        | string | No       | Optional initial value of the input.                                                                                                                                                                                                                                                                                   |
+| formGroup    | object | No       | Additional options for the form group containing the text input component. See [formGroup](#options-date-picker-form-group).                                                                                                                                                                                           |
+| label        | object | Yes      | The label used by the text input component. See [GOV.UK text input documentation](https://design-system.service.gov.uk/components/text-input/) for label options.                                                                                                                                                      |
+| hint         | object | No       | Can be used to add a hint to a text input component. See [GOV.UK text input documentation](https://design-system.service.gov.uk/components/text-input/) for hint options.                                                                                                                                              |
 | errorMessage | object | No       | Can be used to add an error message to the text input component. The error message component will not display if you use a falsy value for `errorMessage`, for example `false` or `null`. See [GOV.UK text input documentation](https://design-system.service.gov.uk/components/text-input/) for errorMessage options. |
-| minDate      | string | No       | Earliest date that can be selected (format dd/mm/yyyy) |
-| maxDate      | string | No       | Latest date that can be selected (format dd/mm/yyyy) |
-| exludedDates | string | No       | String of pace separated dates that cannot be selected |
-| excludedDays | string | No       | String of space separated days of the week that cannot be selected |
-| weekStartDay | string | No       | Day of the week the calendar starts on. Either 'monday' or 'sunday'. Defaults to 'monday' |
-
-
+| minDate      | string | No       | Earliest date that can be selected (format dd/mm/yyyy)                                                                                                                                                                                                                                                                 |
+| maxDate      | string | No       | Latest date that can be selected (format dd/mm/yyyy)                                                                                                                                                                                                                                                                   |
+| exludedDates | string | No       | String of pace separated dates that cannot be selected                                                                                                                                                                                                                                                                 |
+| excludedDays | string | No       | String of space separated days of the week that cannot be selected                                                                                                                                                                                                                                                     |
+| weekStartDay | string | No       | Day of the week the calendar starts on. Either 'monday' or 'sunday'. Defaults to 'monday'                                                                                                                                                                                                                              |

package/moj/components/date-picker/_date-picker.scss

@@ -10,14 +10,16 @@ $moj-datepicker-mid-grey: #949494;
 .moj-datepicker__dialog {
   display: none;
   position: absolute;
+  z-index: 2;
   top: 0;
   min-width: 280px;
   padding: govuk-spacing(4);
+  transition:
+    background-color 0.2s,
+    outline-color 0.2s;
   outline: 2px solid $govuk-text-colour;
   outline-offset: -2px;
-  background-color: govuk-colour('white');
-  transition: background-color 0.2s, outline-color 0.2s;
-  z-index: 2;
+  background-color: govuk-colour("white");
 }
 
 .moj-datepicker__dialog--open {
@@ -25,18 +27,18 @@ $moj-datepicker-mid-grey: #949494;
 }
 
 .moj-datepicker__dialog-header {
-  position: relative;
   display: flex;
+  position: relative;
+  margin-bottom: govuk-spacing(2);
   align-items: center;
   justify-content: space-between;
-  margin-bottom: govuk-spacing(2);
 }
 
 .moj-datepicker__dialog-title {
   @include govuk-font(16);
-  font-weight: bold;
   margin-top: 0;
   margin-bottom: 0;
+  font-weight: bold;
 }
 
 .moj-datepicker__dialog-navbuttons {
@@ -45,30 +47,29 @@ $moj-datepicker-mid-grey: #949494;
 }
 
 .moj-datepicker__calendar {
-  border-collapse: collapse;
   margin-bottom: govuk-spacing(4);
+  border-collapse: collapse;
 
   tbody:focus-within {
     outline: 2px solid $govuk-focus-colour;
   }
 
   td {
-    border: 0;
     margin: 0;
-    outline: 0;
     padding: 0;
+    border: 0;
+    outline: 0;
   }
 
   th {
     @include govuk-font(16);
-    font-weight: bold;
     color: $govuk-text-colour;
+    font-weight: bold;
   }
-
 }
 
 .moj-datepicker__dialog > .govuk-button-group {
-    margin-bottom: 0;
+  margin-bottom: 0;
 
   > * {
     margin-bottom: 0;
@@ -77,111 +78,114 @@ $moj-datepicker-mid-grey: #949494;
 
 .moj-datepicker__button {
   @include govuk-font(16);
+  position: relative;
+  width: 44px;
+  height: 40px;
+  margin: 0;
+  padding: 0;
+  border-width: 0;
+  outline: 2px solid rgba(0, 0, 0, 0);
+  outline-offset: -2px;
+  color: $govuk-text-colour;
+  background-color: transparent;
+
+  @media (forced-colors: active) {
+    // Don't show the bottom bar in forced-color modes as it blocks the outline
+    &::after {
+      display: none;
+    }
+  }
+
+  &::after {
+    content: "";
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    height: 4px;
     background-color: transparent;
-    outline: 2px solid rgba(0, 0, 0, 0);
-    outline-offset: -2px;
-    border-width: 0;
+  }
+
+  &[aria-disabled="true"],
+  &[aria-disabled="true"]:hover {
     color: $govuk-text-colour;
-    height: 40px;
-    margin: 0;
-    padding: 0;
-    width: 44px;
-    position: relative;
+    background-color: govuk-colour("light-grey");
+    text-decoration: line-through;
+    cursor: not-allowed;
+  }
 
-    @media (forced-colors: active) {
-      // Don't show the bottom bar in forced-color modes as it blocks the outline
-      &:after {
-        display: none
-      }
-    }
+  &:hover {
+    color: $govuk-text-colour;
+    background-color: $moj-datepicker-mid-grey;
+    text-decoration: none;
+    -webkit-box-decoration-break: clone;
+    box-decoration-break: clone;
+    cursor: pointer;
+  }
 
-    &:after {
-      content: "";
-      position: absolute;
-      bottom: 0px;
-      height: 4px;
-      left: 0;
-      right: 0;
-      background-color: transparent;
-    }
+  &:focus {
+    outline-color: transparent;
+    color: $govuk-text-colour;
+    background-color: $govuk-focus-colour;
+    -webkit-box-decoration-break: clone;
+    box-decoration-break: clone;
 
-    &[aria-disabled="true"],
-    &[aria-disabled="true"]:hover {
-      background-color: govuk-colour('light-grey');
-      color: $govuk-text-colour;
-      cursor: not-allowed;
-      text-decoration: line-through;
+    &::after {
+      background-color: $govuk-text-colour;
     }
+  }
 
-    &:hover {
-      color: $govuk-text-colour;
-      background-color: $moj-datepicker-mid-grey;
-      text-decoration: none;
-      -webkit-box-decoration-break: clone;
-      box-decoration-break: clone;
-      cursor: pointer;
-    }
+  &:focus:hover {
+    outline-color: $govuk-focus-colour;
+    background-color: $moj-datepicker-mid-grey;
 
-    &:focus {
-      color: $govuk-text-colour;
-      background-color: $govuk-focus-colour;
-      outline-color: transparent;
-      -webkit-box-decoration-break: clone;
-      box-decoration-break: clone;
-      &:after {
-        background-color: $govuk-text-colour;
-      }
+    &::after {
+      background-color: transparent;
     }
+  }
 
-    &:focus:hover {
-      background-color: $moj-datepicker-mid-grey;
-      outline-color: $govuk-focus-colour;
-      &:after {
-        background-color: transparent;
-      }
-    }
+  &--current:not(:focus) {
+    outline-color: $govuk-link-colour;
+    color: govuk-colour("white");
+    background-color: $govuk-link-colour;
 
-    &--current:not(:focus) {
+    &::after {
       background-color: $govuk-link-colour;
-      color: govuk-colour('white');
-      outline-color: $govuk-link-colour;
-      &:after {
-        background-color: $govuk-link-colour;
-      }
     }
+  }
 
-    &--current[tabindex="-1"] {
-      background: transparent;
-      color: currentColor;
-      outline-color: transparent;
-      &:after {
-        background-color: transparent;
-      }
-    }
+  &--current[tabindex="-1"] {
+    outline-color: transparent;
+    color: currentcolor;
+    background: transparent;
 
-    &--today {
-      border: 2px solid $govuk-text-colour;
+    &::after {
+      background-color: transparent;
     }
+  }
 
-    &--selected:not(:focus) {
-      background-color: $govuk-link-colour;
-      color: govuk-colour('white');
+  &--today {
+    border: 2px solid $govuk-text-colour;
+  }
 
-      &:after {
-        background-color: $govuk-link-colour;
-      }
+  &--selected:not(:focus) {
+    color: govuk-colour("white");
+    background-color: $govuk-link-colour;
 
-      &:hover {
-        outline-color: $govuk-link-colour;
-        background-color: $moj-datepicker-mid-grey;
-        color: $govuk-text-colour;
+    &::after {
+      background-color: $govuk-link-colour;
+    }
 
-        &:after {
-          background-color: transparent;
-        }
+    &:hover {
+      outline-color: $govuk-link-colour;
+      color: $govuk-text-colour;
+      background-color: $moj-datepicker-mid-grey;
+
+      &::after {
+        background-color: transparent;
       }
     }
-
+  }
 }
 
 /*
@@ -189,6 +193,7 @@ $moj-datepicker-mid-grey: #949494;
  Allow that to be overriden by the input width modifiers or global width overrides.
  Width classes less than 10ch not included as that is narrower than a date.
 */
+// stylelint-disable selector-no-qualifying-type
 .moj-datepicker input {
   max-width: 11.5em; // govuk-input--width-10
 
@@ -201,61 +206,72 @@ $moj-datepicker-mid-grey: #949494;
   }
 
   &.govuk-\!-width-full {
+    // stylelint-disable-next-line declaration-no-important
     width: 100% !important;
     max-width: none;
   }
 
   &.govuk-\!-width-three-quarters {
+    // stylelint-disable-next-line declaration-no-important
     width: 100% !important;
     max-width: none;
 
     @include govuk-media-query($from: tablet) {
+      // stylelint-disable-next-line declaration-no-important
       width: 75% !important;
     }
   }
 
   &.govuk-\!-width-two-thirds {
+    // stylelint-disable-next-line declaration-no-important
     width: 100% !important;
     max-width: none;
 
     @include govuk-media-query($from: tablet) {
+      // stylelint-disable-next-line declaration-no-important
       width: 66.66% !important;
     }
   }
 
   &.govuk-\!-width-one-half {
+    // stylelint-disable-next-line declaration-no-important
     width: 100% !important;
     max-width: none;
 
     @include govuk-media-query($from: tablet) {
+      // stylelint-disable-next-line declaration-no-important
       width: 50% !important;
     }
   }
 
   &.govuk-\!-width-one-third {
+    // stylelint-disable-next-line declaration-no-important
     width: 100% !important;
     max-width: none;
 
     @include govuk-media-query($from: tablet) {
+      // stylelint-disable-next-line declaration-no-important
       width: 33.33% !important;
     }
   }
 
   &.govuk-\!-width-one-quarter {
+    // stylelint-disable-next-line declaration-no-important
     width: 100% !important;
     max-width: none;
 
     @include govuk-media-query($from: tablet) {
+      // stylelint-disable-next-line declaration-no-important
       width: 25% !important;
     }
   }
 }
+// stylelint-enable selector-no-qualifying-type
 
 .moj-datepicker__wrapper {
   position: relative;
 }
 
-
 @media (min-width: 768px) {
   .moj-datepicker__dialog {
     width: auto;
@@ -263,31 +279,31 @@ $moj-datepicker-mid-grey: #949494;
 }
 
 .moj-datepicker__toggle {
-  background-color: $govuk-text-colour;
-  color: govuk-colour('white');
-  outline: 3px solid rgba(0, 0, 0, 0);
-  outline-offset: -3px;
   height: 40px;
   padding-top: 6px;
   border: none;
   border-bottom: 4px solid rgba(0, 0, 0, 0);
+  outline: 3px solid rgba(0, 0, 0, 0);
+  outline-offset: -3px;
+  color: govuk-colour("white");
+  background-color: $govuk-text-colour;
   cursor: pointer;
 
   &:focus {
-    background-color: $govuk-focus-colour;
-    color: $govuk-text-colour;
     border-bottom: 4px solid $govuk-text-colour;
+    color: $govuk-text-colour;
+    background-color: $govuk-focus-colour;
   }
 
   &:hover {
-    background-color: $moj-datepicker-mid-grey;
-    color: $govuk-text-colour;
     border-bottom: 4px solid $moj-datepicker-mid-grey;
+    color: $govuk-text-colour;
+    background-color: $moj-datepicker-mid-grey;
   }
 
   &:focus:hover {
-    background-color: $moj-datepicker-mid-grey;
-    color: $govuk-text-colour;
     border-bottom: 4px solid $govuk-text-colour;
+    color: $govuk-text-colour;
+    background-color: $moj-datepicker-mid-grey;
   }
 }