@ministryofjustice/frontend 3.7.0 → 4.0.1

package/moj/objects/_all.scss

@@ -1,4 +1,4 @@
-@import "width-container";
-@import "filter-layout";
-@import "scrollable-pane";
-@import "button-group";
+@forward "width-container";
+@forward "filter-layout";
+@forward "scrollable-pane";
+@forward "button-group";

package/moj/objects/_button-group.scss

@@ -1,31 +1,112 @@
+@use "../vendor/govuk-frontend" as *;
+
+// Button groups can be used to group buttons and links together as a group.
+//
+// Within a button group:
+//
+// - links are styled to line up visually with the buttons, including being
+//   centre-aligned on mobile
+// - spacing between the buttons and links is handled automatically, including
+//   when they wrap across multiple lines
 .moj-button-group {
   $horizontal-gap: govuk-spacing(3);
   $vertical-gap: govuk-spacing(3);
+  $link-spacing: govuk-spacing(1);
+
+  // These need to be kept in sync with the button component's styles
   $button-shadow-size: $govuk-border-width-form-element;
 
-  @extend .govuk-button-group;
+  // Flexbox is used to center-align links on mobile, align everything along
+  // the baseline on tablet and above, and to removes extra whitespace that
+  // we'd get between the buttons and links because they're inline-blocks.
+  //
+  // Ideally we'd use `gap` with flexbox rather than having to do it all with
+  // margins, but unfortunately the support isn't there (yet) and @supports
+  // doesn't play nicely with it
+  // (https://github.com/w3c/csswg-drafts/issues/3559)
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  @include govuk-responsive-margin(6, "bottom", $adjustment: $vertical-gap * -1);
+
+  // Give links within the button group the same font-size and line-height
+  // as buttons.
+  //
+  // Because we want the focus state to be tight around the link text, we use
+  // margins where the buttons would use padding.
+  .govuk-link {
+    display: inline-block;
+    // Prevent links overflowing their container in IE10/11 because of bug
+    // with align-items: center
+    max-width: 100%;
+    margin-top: $link-spacing;
+    margin-bottom: $link-spacing + $vertical-gap;
+    text-align: center;
+    @include govuk-font($size: 19, $line-height: 19px);
+  }
+
+  // Reduce the bottom margin to the size of the vertical gap (accommodating
+  // the button shadow) – the 'lost' margin is moved to the button-group.
+  .govuk-button,
+  .moj-button-menu__item,
+  .js-enabled & .moj-button-menu {
+    margin-bottom: $vertical-gap + $button-shadow-size;
+  }
+
+  .moj-button-menu__toggle-button,
+  .js-enabled & .moj-button-menu__item {
+    margin-bottom: 0;
+  }
+
+  // Set button menu to full width on mobile to match GOV.UK Frontend
+  @include govuk-media-query($until: tablet) {
+    .moj-button-menu,
+    .moj-button-menu__wrapper,
+    .moj-button-menu__item {
+      width: 100%;
+    }
+
+    .moj-button-menu__wrapper {
+      position: relative;
+    }
+  }
+
+  // On tablet and above, we also introduce a 'column gap' between the
+  // buttons and links in each row and left align links
+  @mixin moj-button-group-inline() {
+    // Cancel out the column gap for the last item in each row
+    margin-right: ($horizontal-gap * -1);
 
-  &--inline {
     flex-direction: row;
     flex-wrap: wrap;
     align-items: baseline;
-    gap: $horizontal-gap;
-    margin-right: 0;
 
+    .govuk-button,
+    .govuk-link,
     .moj-button-menu {
-      margin-bottom: $vertical-gap + $button-shadow-size;
+      width: auto;
+      margin-right: $horizontal-gap;
     }
 
-    .moj-button-menu .moj-button-menu__toggle-button {
-      vertical-align: baseline;
+    .moj-button-menu__toggle-button {
+      margin-right: 0;
     }
 
-    > .moj-button-menu,
-    > .govuk-button,
-    > .govuk-link {
-      width: auto;
-      margin-right: 0;
-      margin-bottom: 0;
+    .govuk-link {
+      text-align: left;
     }
   }
+
+  // Inline buttons on mobile (optional)
+  &--inline {
+    @include govuk-media-query($until: tablet) {
+      @include moj-button-group-inline;
+    }
+  }
+
+  // Inline buttons on tablet and desktop
+  @include govuk-media-query($from: tablet) {
+    @include moj-button-group-inline;
+  }
 }

package/moj/objects/_filter-layout.scss

@@ -1,3 +1,5 @@
+@use "../vendor/govuk-frontend" as *;
+
 .moj-filter-layout {
   @include govuk-clearfix;
 }

package/moj/objects/_scrollable-pane.scss

@@ -1,3 +1,5 @@
+@use "../vendor/govuk-frontend" as *;
+
 .moj-scrollable-pane {
   // stylelint-disable scss/dollar-variable-pattern
   $scrollableBgColor: govuk-colour("white");

package/moj/objects/_width-container.scss

@@ -1,3 +1,6 @@
+@use "../settings/measurements" as *;
+@use "../vendor/govuk-frontend" as *;
+
 @mixin moj-width-container($width: $moj-page-width) {
   // Limit the width of the container to the page width
   max-width: $width;

package/moj/settings/_all.scss

@@ -1,3 +1,4 @@
-@import "assets";
-@import "measurements";
-@import "colours";
+@forward "assets";
+@forward "measurements";
+@forward "colours";
+@forward "typography";

package/moj/settings/_assets.scss

@@ -2,8 +2,11 @@
    #ASSETS
    ========================================================================== */
 
-// Assets folder
+// Path to the assets directory, with trailing slash.
 $moj-assets-path: "/assets/" !default;
 
-// Path the images folder
+// Path to the images folder, with trailing slash.
 $moj-images-path: "#{$moj-assets-path}images/" !default;
+
+// Path to the fonts folder, with trailing slash.
+$moj-fonts-path: "#{$moj-assets-path}fonts/" !default;

package/moj/settings/_colours.scss

@@ -12,3 +12,8 @@ $moj-secondary-link-hover-color: rgb(23, 24, 25);
 $moj-warning-colour: rgb(235, 97, 28);
 // Links need higher contrast still so a modified orange for links
 $moj-warning-link-colour: rgb(199, 82, 40);
+
+// Custom colour required for passing WCAG 2.2 AA contrast text/background and
+// background/surrounding
+$moj-button-menu-color: #949494;
+$moj-button-menu-hover-color: #767676;

package/moj/settings/_measurements.scss

@@ -1,3 +1,5 @@
+@use "sass:math";
+
 /* ==========================================================================
    #MEASUREMENTS
    ========================================================================== */
@@ -9,4 +11,4 @@ $moj-page-width: 960px !default;
 $moj-gutter: 30px !default;
 
 // Width of half the gutter between grid columns
-$moj-gutter-half: $moj-gutter / 2;
+$moj-gutter-half: math.div($moj-gutter, 2);

package/moj/settings/_typography.scss

@@ -0,0 +1,13 @@
+@use "sass:list";
+
+/* ==========================================================================
+   #TYPOGRAPHY
+   ========================================================================== */
+
+/// Font families to use for all typography on screen media
+
+$moj-font-family: "GDS Transport", arial, sans-serif !default;
+
+/// Exclude @font-face declarations already included in GOV.UK Frontend
+
+$moj-include-default-font-face: false;

package/moj/utilities/_all.scss

@@ -1,2 +1,2 @@
-@import "hidden";
-@import "width-container";
+@forward "hidden";
+@forward "width-container";

package/moj/utilities/_hidden.scss

@@ -1,3 +1,5 @@
+@use "../helpers/hidden" as *;
+
 .js-enabled .moj-js-hidden {
   @include moj-hidden;
 }

package/moj/utilities/_width-container.scss

@@ -1,3 +1,5 @@
+@use "../objects/width-container" as *;
+
 .moj-width-container {
   @include moj-width-container;
 }

package/moj/vendor/govuk-frontend/_base.scss

@@ -0,0 +1,5 @@
+@forward "node_modules/govuk-frontend/dist/govuk/base" with (
+  $govuk-suppressed-warnings: (
+    "govuk-typography-scale-14"
+  )
+);

package/moj/vendor/govuk-frontend/_index.scss

@@ -0,0 +1,21 @@
+// Declare all settings
+@forward "../../settings/all";
+
+// Use settings for overrides
+@use "../../settings/all" as *;
+
+// GOV.UK Frontend with settings
+@forward "base" with (
+  // Assets override
+  $govuk-assets-path: $moj-assets-path,
+  $govuk-images-path: $moj-images-path,
+  $govuk-fonts-path: $moj-fonts-path,
+
+  // Measurements override
+  $govuk-gutter: $moj-gutter,
+  $govuk-page-width: $moj-page-width,
+
+  // Typography override
+  $govuk-font-family: $moj-font-family,
+  $govuk-include-default-font-face: $moj-include-default-font-face
+);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ministryofjustice/frontend",
   "description": "The MOJ Frontend contains the code you need to start building user interfaces for UK Ministry of Justice government services.",
-  "version": "3.7.0",
+  "version": "4.0.1",
   "main": "moj/all.js",
   "module": "moj/all.mjs",
   "sass": "moj/all.scss",
@@ -13,6 +13,8 @@
       "default": "./moj/all.js"
     },
     "./*": "./*",
+    "./moj/filters/*": "./moj/filters/*.js",
+    "./moj/filters/*.js": "./moj/filters/*.js",
     "./package.json": "./package.json"
   },
   "sideEffects": false,