@ministryofjustice/frontend 3.7.0 → 4.0.1

package/moj/all.scss

@@ -1,9 +1,4 @@
-$govuk-suppressed-warnings: ("govuk-typography-scale-14");
-
-@import "node_modules/govuk-frontend/dist/govuk/base";
-
-@import "settings/all";
-@import "helpers/all";
-@import "objects/all";
-@import "components/all";
-@import "utilities/all";
+@forward "base";
+@forward "objects/all";
+@forward "components/all";
+@forward "utilities/all";

package/moj/components/_all.scss

@@ -1,33 +1,33 @@
-@import "action-bar/action-bar";
-@import "add-another/add-another";
-@import "alert/alert";
-@import "badge/badge";
-@import "banner/banner";
-@import "button-menu/button-menu";
-@import "cookie-banner/cookie-banner";
-@import "currency-input/currency-input";
-@import "date-picker/date-picker";
-@import "filter/filter";
-@import "header/header";
-@import "identity-bar/identity-bar";
-@import "interruption-card/interruption-card";
-@import "messages/messages";
-@import "multi-file-upload/multi-file-upload";
-@import "multi-select/multi-select";
-@import "notification-badge/notification-badge";
-@import "organisation-switcher/organisation-switcher";
-@import "page-header-actions/page-header-actions";
-@import "pagination/pagination";
-@import "password-reveal/password-reveal";
-@import "primary-navigation/primary-navigation";
-@import "progress-bar/progress-bar";
-@import "rich-text-editor/rich-text-editor";
-@import "search-toggle/search-toggle";
-@import "search/search";
-@import "side-navigation/side-navigation";
-@import "sortable-table/sortable-table";
-@import "sub-navigation/sub-navigation";
-@import "tag/tag";
-@import "task-list/task-list";
-@import "timeline/timeline";
-@import "ticket-panel/ticket-panel";
+@forward "action-bar/action-bar";
+@forward "add-another/add-another";
+@forward "alert/alert";
+@forward "badge/badge";
+@forward "banner/banner";
+@forward "button-menu/button-menu";
+@forward "cookie-banner/cookie-banner";
+@forward "currency-input/currency-input";
+@forward "date-picker/date-picker";
+@forward "filter/filter";
+@forward "header/header";
+@forward "identity-bar/identity-bar";
+@forward "interruption-card/interruption-card";
+@forward "messages/messages";
+@forward "multi-file-upload/multi-file-upload";
+@forward "multi-select/multi-select";
+@forward "notification-badge/notification-badge";
+@forward "organisation-switcher/organisation-switcher";
+@forward "page-header-actions/page-header-actions";
+@forward "pagination/pagination";
+@forward "password-reveal/password-reveal";
+@forward "primary-navigation/primary-navigation";
+@forward "progress-bar/progress-bar";
+@forward "rich-text-editor/rich-text-editor";
+@forward "search-toggle/search-toggle";
+@forward "search/search";
+@forward "side-navigation/side-navigation";
+@forward "sortable-table/sortable-table";
+@forward "sub-navigation/sub-navigation";
+@forward "tag/tag";
+@forward "task-list/task-list";
+@forward "timeline/timeline";
+@forward "ticket-panel/ticket-panel";

package/moj/components/action-bar/_action-bar.scss

@@ -1,3 +1,5 @@
+@use "../../vendor/govuk-frontend" as *;
+
 .moj-action-bar {
   font-size: 0; // Removes white space
 }

package/moj/components/add-another/_add-another.scss

@@ -1,3 +1,5 @@
+@use "../../vendor/govuk-frontend" as *;
+
 /* ==========================================================================
    #ADD ANOTHER
    ========================================================================== */

package/moj/components/alert/_alert.scss

@@ -1,5 +1,9 @@
+@use "../../helpers/links" as *;
+@use "../../objects/width-container" as *;
+@use "../../settings/colours" as *;
+@use "../../vendor/govuk-frontend" as *;
+
 .moj-alert {
-  @include govuk-font($size: false);
   display: -ms-grid;
   display: grid;
   margin-bottom: govuk-spacing(6);
@@ -8,8 +12,8 @@
   background: govuk-colour("white");
   -ms-grid-columns: min-content fit-content(960px);
   grid-template-columns: min-content fit-content(960px);
-
   gap: govuk-spacing(2);
+  @include govuk-font($size: false);
 
   &:focus {
     outline: $govuk-focus-width solid $govuk-focus-colour;
@@ -30,12 +34,12 @@
 }
 
 .moj-alert__content {
-  @include govuk-font-size($size: 19);
   display: block;
   // Padding to align text with icon
   padding-top: govuk-px-to-rem(5px);
   overflow: hidden;
   color: govuk-colour("black");
+  @include govuk-font-size($size: 19);
 
   @include govuk-media-query($from: tablet) {
     padding-top: govuk-px-to-rem(2px);
@@ -68,23 +72,22 @@
   @include govuk-link-print-friendly;
 }
 
-.moj-alert__content h2,
-.moj-alert__content h3,
-.moj-alert__content h4 {
-  margin-bottom: 2px;
-  line-height: 30px;
-}
-
-.moj-alert--with-heading .moj-alert__content {
-  // No padding needed when there is a heading
-  padding-top: 0;
+.moj-alert__heading {
+  display: block;
+  margin-top: 0;
+  margin-bottom: govuk-px-to-rem(5px);
+  @include govuk-text-colour;
+  @include govuk-font-size($size: 24);
+  @include govuk-typography-weight-bold;
 
   @include govuk-media-query($from: tablet) {
-    padding-top: 0;
+    margin-bottom: govuk-px-to-rem(3px);
   }
 }
 
-.moj-alert__content *:last-child {
+.moj-alert__content p:last-child,
+.moj-alert__content a:last-child,
+.moj-alert__content ul:last-child {
   margin-bottom: 0;
 }
 

package/moj/components/alert/template.njk

@@ -65,7 +65,7 @@
   </div>
   <div class="moj-alert__content">
     {%- if params.showTitleAsHeading and content %}
-      <{{-headingTag }} class="govuk-heading-m">
+      <{{-headingTag }} class="moj-alert__heading">
         {{- params.title }}
       </{{-headingTag}}>
     {%- endif %}

package/moj/components/badge/README.md

@@ -4,7 +4,7 @@
 
 ## Example
 
-```
+```njk
 {{ mojBadge({
   text: "Status text",
   classes: "moj-badge--blue"

package/moj/components/badge/_badge.scss

@@ -1,9 +1,10 @@
+@use "../../vendor/govuk-frontend" as *;
+
 /* ==========================================================================
    #BADGE
    ========================================================================== */
 
 .moj-badge {
-  @include govuk-font($size: 14, $weight: "bold");
   display: inline-block;
   padding: 0 govuk-spacing(1);
   border: 2px solid $govuk-brand-colour;
@@ -12,6 +13,7 @@
   color: $govuk-brand-colour;
   text-transform: uppercase;
   vertical-align: middle;
+  @include govuk-font($size: 14, $weight: "bold");
 
   &--purple {
     border-color: govuk-colour("purple");

package/moj/components/badge/macro.njk

@@ -1,3 +1,3 @@
 {% macro mojBadge(params) %}
   {%- include "./template.njk" -%}
-{% endmacro %}
+{% endmacro %}

package/moj/components/banner/README.md

@@ -0,0 +1,3 @@
+# Banner (Archived)
+
+- [Guidance](https://design-patterns.service.justice.gov.uk/archive/banner)

package/moj/components/banner/_banner.scss

@@ -1,3 +1,5 @@
+@use "../../vendor/govuk-frontend" as *;
+
 /* ==========================================================================
    #BANNER
    ========================================================================== */
@@ -17,10 +19,10 @@
 }
 
 .moj-banner__message {
-  @include govuk-font($size: 19);
   display: block;
   overflow: hidden;
   color: govuk-colour("black");
+  @include govuk-font($size: 19);
 }
 
 .moj-banner__message h2 {

package/moj/components/button-menu/README.md

@@ -8,7 +8,7 @@
 
 The macro
 
-```
+```njk
 {{ mojButtonGroup({
   items: [{
     text: 'Archive',
@@ -28,7 +28,7 @@ The macro
 
 The JavaScript
 
-```
+```js
 new MOJFrontend.ButtonGroup({
   container: $('.moj-button-group'),
   mq: '(min-width: 45em)',

package/moj/components/button-menu/_button-menu.scss

@@ -1,19 +1,14 @@
-$moj-button-hover-colour: #767676;
-$moj-datepicker-mid-grey: #949494;
+@use "../../settings/colours" as *;
+@use "../../vendor/govuk-frontend" as *;
 
 .moj-button-menu {
   display: inline-block;
   position: relative;
-
-  > .govuk-button {
-    // required for no-js alignment within moj-button-group
-    margin-bottom: 0;
-    vertical-align: baseline;
-  }
 }
 
 .moj-button-menu__toggle-button {
-  display: inline;
+  margin-bottom: 0;
+  vertical-align: baseline;
 }
 
 .moj-button-menu__toggle-button span {
@@ -32,14 +27,17 @@ $moj-datepicker-mid-grey: #949494;
 }
 
 .moj-button-menu__wrapper {
-  position: absolute;
   z-index: 10;
-  top: 43px; // 38px button height, 2px shadow, 3px gap
-  width: 200px;
-  margin: 0;
+  margin: 5px 0 0; // 2px shadow, 3px gap
   padding: 0;
   list-style: none;
 
+  &,
+  .moj-button-group--inline {
+    position: absolute;
+    width: 200px;
+  }
+
   &--right {
     right: 0;
   }
@@ -51,6 +49,7 @@ $moj-datepicker-mid-grey: #949494;
   width: auto; // Override GDS’s 100% width
   margin-right: govuk-spacing(2);
   margin-bottom: govuk-spacing(2);
+  vertical-align: baseline;
 
   &:last-child {
     margin-right: 0;
@@ -59,9 +58,6 @@ $moj-datepicker-mid-grey: #949494;
 
 /* Menu items with JS */
 .moj-button-menu li > .moj-button-menu__item {
-  $button-shadow-size: 0;
-  @include govuk-font($size: 19, $line-height: 19px);
-
   box-sizing: border-box;
   display: inline-block;
   position: relative;
@@ -72,7 +68,7 @@ $moj-datepicker-mid-grey: #949494;
   margin-left: 0;
   padding: govuk-spacing(2);
   border: $govuk-border-width-form-element solid transparent;
-  border-bottom: 1px solid $moj-datepicker-mid-grey;
+  border-bottom: 1px solid $moj-button-menu-color;
   border-radius: 0;
   color: $govuk-text-colour;
   background-color: govuk-colour("light-grey");
@@ -81,6 +77,7 @@ $moj-datepicker-mid-grey: #949494;
   cursor: pointer;
   -webkit-appearance: none;
   appearance: none;
+  @include govuk-font($size: 19, $line-height: 19px);
 
   &:link,
   &:visited,
@@ -102,7 +99,7 @@ $moj-datepicker-mid-grey: #949494;
   }
 
   &:hover {
-    background-color: $moj-button-hover-colour;
+    background-color: $moj-button-menu-hover-color;
   }
 
   &:focus {

package/moj/components/button-menu/template.njk

@@ -3,7 +3,7 @@
 
 {#- Set classes for this component #}
 {%- set classNames = "moj-button-menu" -%}
-{%- set itemClassNames = "moj-button-menu__item govuk-button--secondary" %}
+{%- set defaultItemClassNames = "moj-button-menu__item govuk-button--secondary" %}
 
 {%- if params.classes %}
   {% set classNames = classNames + " " + params.classes %}
@@ -11,12 +11,12 @@
 
 {%- set buttonAttributes = {
   "data-button-text": {
-    value: params.button.text, 
+    value: params.button.text,
     optional: true
     },
   "data-button-classes": {
     value: params.button.classes,
-    optional: true 
+    optional: true
   },
   "data-align-menu": {
     value: params.alignMenu,
@@ -27,12 +27,10 @@
 
 <div class="{{- classNames -}}" data-module="moj-button-menu" {{- govukAttributes(params.attributes) -}}  {{- govukAttributes(buttonAttributes) -}}>
     {%- for item in params.items %}
-      {%- if item.classes %}
-      {% set itemClassNames = itemClassNames + " " + item.classes %}
-  {% endif %}
-  {{ govukButton({
+      {% set currentItemClassNames = " " + item.classes if item.classes else "" %}
+      {{ govukButton({
           element: item.element,
-          classes: itemClassNames,
+          classes: defaultItemClassNames + currentItemClassNames,
           text: item.text,
           html: item.html,
           name: item.name,
@@ -42,7 +40,7 @@
           disabled: item.disabled,
           attributes: item.attributes,
           preventDoubleClick: items.preventDoubleClick
-          }) }}
+      }) }}
     {% endfor -%}
 </div>
 

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

@@ -1,4 +1,5 @@
-@import "node_modules/govuk-frontend/dist/govuk/objects/width-container";
+@use "../../objects/width-container" as *;
+@use "../../vendor/govuk-frontend" as *;
 
 .moj-cookie-banner {
   box-sizing: border-box;
@@ -18,7 +19,7 @@
 
   &__message {
     margin: 0;
-    @include govuk-width-container;
+    @include moj-width-container;
   }
 
   &__buttons {

package/moj/components/currency-input/README.md

@@ -1,6 +1,6 @@
-# Currency input
+# Currency input (Archived)
 
-- [Guidance](https://design-patterns.service.justice.gov.uk/components/currency-input)
+- [Guidance](https://design-patterns.service.justice.gov.uk/archive/currency-input)
 
 ## Dependencies
 
@@ -12,7 +12,7 @@ The currency input component is dependent on the following components from the [
 
 ## Examples
 
-```
+```njk
 {{ mojCurrencyInput({
   id: "amount",
   classes: "govuk-input--width-10",
@@ -29,7 +29,7 @@ The currency input component is dependent on the following components from the [
 
 ### With currency specified
 
-```
+```njk
 {{ mojCurrencyInput({
   id: "amount",
   classes: "govuk-input--width-10",

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

@@ -1,15 +1,17 @@
+@use "../../vendor/govuk-frontend" as *;
+
 /* ==========================================================================
    #DENOTE
    ========================================================================== */
 
 .moj-label__currency {
-  @include govuk-font(19);
   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");
+  @include govuk-font(19);
 
   &--error {
     border-right: 2px solid $govuk-error-colour;

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

@@ -4,7 +4,7 @@
 
 ## Example
 
-```
+```njk
 {{ mojDatePicker({
   id: "appointment-date",
   name: "appointment-date"

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

@@ -1,6 +1,5 @@
-// Custom colour required for passing WCAG 2.2 AA contrast text/background and
-// background/surrounding
-$moj-datepicker-mid-grey: #949494;
+@use "../../settings/colours" as *;
+@use "../../vendor/govuk-frontend" as *;
 
 .moj-datepicker {
   position: relative;
@@ -35,10 +34,10 @@ $moj-datepicker-mid-grey: #949494;
 }
 
 .moj-datepicker__dialog-title {
-  @include govuk-font(16);
   margin-top: 0;
   margin-bottom: 0;
   font-weight: bold;
+  @include govuk-font(16);
 }
 
 .moj-datepicker__dialog-navbuttons {
@@ -62,9 +61,9 @@ $moj-datepicker-mid-grey: #949494;
   }
 
   th {
-    @include govuk-font(16);
     color: $govuk-text-colour;
     font-weight: bold;
+    @include govuk-font(16);
   }
 }
 
@@ -77,7 +76,6 @@ $moj-datepicker-mid-grey: #949494;
 }
 
 .moj-datepicker__button {
-  @include govuk-font(16);
   position: relative;
   width: 44px;
   height: 40px;
@@ -88,6 +86,7 @@ $moj-datepicker-mid-grey: #949494;
   outline-offset: -2px;
   color: $govuk-text-colour;
   background-color: transparent;
+  @include govuk-font(16);
 
   @media (forced-colors: active) {
     // Don't show the bottom bar in forced-color modes as it blocks the outline
@@ -116,7 +115,7 @@ $moj-datepicker-mid-grey: #949494;
 
   &:hover {
     color: $govuk-text-colour;
-    background-color: $moj-datepicker-mid-grey;
+    background-color: $moj-button-menu-color;
     text-decoration: none;
     -webkit-box-decoration-break: clone;
     box-decoration-break: clone;
@@ -137,7 +136,7 @@ $moj-datepicker-mid-grey: #949494;
 
   &:focus:hover {
     outline-color: $govuk-focus-colour;
-    background-color: $moj-datepicker-mid-grey;
+    background-color: $moj-button-menu-color;
 
     &::after {
       background-color: transparent;
@@ -179,7 +178,7 @@ $moj-datepicker-mid-grey: #949494;
     &:hover {
       outline-color: $govuk-link-colour;
       color: $govuk-text-colour;
-      background-color: $moj-datepicker-mid-grey;
+      background-color: $moj-button-menu-color;
 
       &::after {
         background-color: transparent;
@@ -296,14 +295,14 @@ $moj-datepicker-mid-grey: #949494;
   }
 
   &:hover {
-    border-bottom: 4px solid $moj-datepicker-mid-grey;
+    border-bottom: 4px solid $moj-button-menu-color;
     color: $govuk-text-colour;
-    background-color: $moj-datepicker-mid-grey;
+    background-color: $moj-button-menu-color;
   }
 
   &:focus:hover {
     border-bottom: 4px solid $govuk-text-colour;
     color: $govuk-text-colour;
-    background-color: $moj-datepicker-mid-grey;
+    background-color: $moj-button-menu-color;
   }
 }

package/moj/components/filter/_filter.scss

@@ -1,3 +1,6 @@
+@use "../../settings/assets" as *;
+@use "../../vendor/govuk-frontend" as *;
+
 /* ==========================================================================
    #FILTER
    ========================================================================== */
@@ -36,7 +39,6 @@
   overflow: visible; // Override govuk to allow for focus style to be seen
 
   button {
-    @include govuk-font($size: 24, $weight: bold);
     appearance: none;
     box-sizing: border-box;
     display: block;
@@ -50,6 +52,7 @@
     text-align: left;
     cursor: pointer; // Adam would not approve
     -webkit-appearance: none;
+    @include govuk-font($size: 24, $weight: bold);
 
     // Fix unwanted button padding in Firefox
     &::-moz-focus-inner {
@@ -84,7 +87,6 @@
 }
 
 .moj-filter__close {
-  @include govuk-font(19);
   margin: 0;
   padding: 0;
   border: none;
@@ -95,6 +97,7 @@
   cursor: pointer; // I know Adam won’t like this
   -webkit-appearance: none;
   appearance: none;
+  @include govuk-font(19);
 
   &:focus {
     outline: none;
@@ -147,10 +150,10 @@
 
 .moj-filter__heading-title,
 .moj-filter__heading-action {
-  @include govuk-font(16);
   display: inline-block;
   text-align: left;
   vertical-align: middle;
+  @include govuk-font(16);
 }
 
 .moj-filter-tags {
@@ -165,7 +168,6 @@
 }
 
 .moj-filter__tag {
-  @include govuk-font(16);
   display: inline-block;
   margin-top: govuk-spacing(1);
   padding: govuk-spacing(1);
@@ -173,6 +175,7 @@
   color: govuk-colour("black");
   background-color: govuk-colour("white");
   text-decoration: none;
+  @include govuk-font(16);
 
   &:link,
   &:visited {

package/moj/components/form-validator/README.md

@@ -1,5 +1,3 @@
-# Form validator
+# Form validator (Archived)
 
-- [Guidance](https://design-patterns.service.justice.gov.uk/components/form-validator)
-
-## Arguments
+- [Guidance](https://design-patterns.service.justice.gov.uk/archive/form-validator)

package/moj/components/header/README.md

@@ -4,7 +4,7 @@
 
 ## Examples
 
-```
+```njk
 {{ mojHeader({
   organisationLabel: {
     text: 'Organisation name',