@ministryofjustice/frontend 3.7.0 → 4.0.1

package/moj/components/rich-text-editor/README.md

@@ -1,15 +1,15 @@
-# Rich text editor
+# Rich text editor (Archived)
 
-- [Guidance](https://design-patterns.service.justice.gov.uk/components/rich-text-editor)
+- [Guidance](https://design-patterns.service.justice.gov.uk/archive/rich-text-editor)
 
 ## Example
 
-```
+```html
 <script>
   new MOJFrontend.RichTextEditor({
     textarea: $('.js-editor'),
     toolbar: { 'bold': true, 'italic': true, 'underline': true, 'bullets': true, 'numbers': true }
-  });
+  })
 </script>
 ```
 

package/moj/components/rich-text-editor/_rich-text-editor.scss

@@ -1,3 +1,6 @@
+@use "../../settings/assets" as *;
+@use "../../vendor/govuk-frontend" as *;
+
 /* ==========================================================================
    #RICH TEXT EDITOR
    ========================================================================== */

package/moj/components/search/_search.scss

@@ -1,3 +1,5 @@
+@use "../../vendor/govuk-frontend" as *;
+
 .moj-search {
   font-size: 0; // Fallback
 }

package/moj/components/search-toggle/search-toggle.scss

@@ -1,5 +1,6 @@
+@use "../../vendor/govuk-frontend" as *;
+
 .moj-search-toggle__button {
-  @include govuk-font($size: 19, $weight: bold);
   display: inline-block;
   padding-top: 12px;
   padding-right: 0;
@@ -12,6 +13,7 @@
   -webkit-font-smoothing: antialiased;
   -webkit-appearance: none;
   appearance: none;
+  @include govuk-font($size: 19, $weight: bold);
 
   &__icon {
     display: inline-block;

package/moj/components/side-navigation/README.md

@@ -4,7 +4,7 @@
 
 ## Example
 
-```
+```njk
 {{ mojSideNavigation({
   label: 'Side navigation',
   items: [{

package/moj/components/side-navigation/_side-navigation.scss

@@ -1,3 +1,5 @@
+@use "../../vendor/govuk-frontend" as *;
+
 /* ==========================================================================
    #SIDE NAVIGATION
    ========================================================================== */
@@ -17,12 +19,12 @@
 }
 
 .moj-side-navigation__title {
-  @include govuk-font($size: 19);
   margin: 0;
   padding: govuk-spacing(2);
   padding-left: govuk-spacing(2) + 4px;
   color: govuk-colour("dark-grey");
   font-weight: normal;
+  @include govuk-font($size: 19);
 
   @include govuk-media-query($until: tablet) {
     display: none;

package/moj/components/sortable-table/_sortable-table.scss

@@ -1,3 +1,5 @@
+@use "../../vendor/govuk-frontend" as *;
+
 [aria-sort] button,
 [aria-sort] button:hover {
   position: relative;

package/moj/components/sub-navigation/README.md

@@ -4,7 +4,7 @@
 
 ## Example
 
-```
+```njk
 {{ mojSubNavigation({
   label: 'Sub navigation',
   items: [{

package/moj/components/sub-navigation/_sub-navigation.scss

@@ -1,3 +1,5 @@
+@use "../../vendor/govuk-frontend" as *;
+
 /* ==========================================================================
    #SECONDARY NAV
    ========================================================================== */
@@ -19,10 +21,10 @@
 }
 
 .moj-sub-navigation__item {
-  @include govuk-font(19);
   display: block;
   margin-top: -1px;
   box-shadow: inset 0 -1px 0 $govuk-border-colour;
+  @include govuk-font(19);
 
   &:last-child {
     box-shadow: none;
@@ -37,19 +39,25 @@
 }
 
 .moj-sub-navigation__link {
-  @include govuk-link-common;
-  @include govuk-link-style-default;
   display: block;
   position: relative;
   padding-top: 12px;
   padding-bottom: 12px;
   padding-left: govuk-spacing(3);
-  text-decoration: none;
+  @include govuk-link-common;
+  @include govuk-link-style-default;
 
   @include govuk-media-query($from: tablet) {
     padding-left: 0;
   }
 
+  &:link,
+  &:visited,
+  &:hover,
+  &:active {
+    text-decoration: none;
+  }
+
   &:link,
   &:visited {
     color: $govuk-link-colour;

package/moj/components/tag/README.md

@@ -1,6 +1,6 @@
-# Badge
+# Badge (Archived)
 
-- [Guidance](https://design-patterns.service.justice.gov.uk/components/tag)
+- [Guidance](https://design-patterns.service.justice.gov.uk/archive/tag)
 
 ## Classes
 

package/moj/components/tag/_tag.scss

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

package/moj/components/task-list/README.md

@@ -1,10 +1,10 @@
-# Task list
+# Task list (Archived)
 
-- [Guidance](https://design-patterns.service.justice.gov.uk/patterns/task-list)
+- [Guidance](https://design-patterns.service.justice.gov.uk/archive/task-list)
 
 ## Example
 
-```
+```njk
 {{ mojTaskList({
   sections: [
     {

package/moj/components/task-list/_task-list.scss

@@ -1,3 +1,5 @@
+@use "../../vendor/govuk-frontend" as *;
+
 /* ==========================================================================
    #TASK LIST
    ========================================================================== */
@@ -27,10 +29,10 @@
 }
 
 .moj-task-list__items {
-  @include govuk-font($size: 19);
-  @include govuk-responsive-margin(9, "bottom");
   padding-left: 0;
   list-style: none;
+  @include govuk-font($size: 19);
+  @include govuk-responsive-margin(9, "bottom");
   @include govuk-media-query($from: tablet) {
     padding-left: govuk-spacing(6);
   }

package/moj/components/ticket-panel/README.md

@@ -6,7 +6,7 @@
 
 Below is a typical example of the timeline component in use.
 
-```
+```njk
 {{ mojTicketPanel({
   attributes: {
     'aria-label': 'Sub navigation 1'

package/moj/components/ticket-panel/_ticket-panel.scss

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

package/moj/components/timeline/README.md

@@ -4,22 +4,27 @@
 
 ### Installation
 
-You will need to install the following code at the bottom of `server.js`, just above `module.exports = app;`
+You will need to install the MoJ Frontend Nunjucks filters to use the `mojTimeline()` Nunjucks macro:
 
-```
-// Add filters from MOJ Frontend
-let mojFilters = require('./node_modules/@ministryofjustice/frontend/filters/all')();
-mojFilters = Object.assign(mojFilters);
-Object.keys(mojFilters).forEach(function (filterName) {
-  nunjucksAppEnv.addFilter(filterName, mojFilters[filterName])
-});
-```
+1. Import the filters
+
+   ```mjs
+   import mojFilters from '@ministryofjustice/frontend/moj/filters/all.js'
+   ```
+
+2. Add the filters to your Nunjucks environment
+
+   ```mjs
+   for (const [name, filter] of Object.entries(mojFilters())) {
+     nunjucksAppEnv.addFilter(name, filter)
+   }
+   ```
 
 ## Example
 
 Below is a typical example of the timeline component in use.
 
-```
+```njk
 {{ mojTimeline({
   items: [
     {

package/moj/components/timeline/_timeline.scss

@@ -1,3 +1,6 @@
+@use "../../settings/assets" as *;
+@use "../../vendor/govuk-frontend" as *;
+
 /* ==========================================================================
    #TIMELINE
    ========================================================================== */
@@ -43,26 +46,26 @@
 }
 
 .moj-timeline__title {
-  @include govuk-font($size: 19, $weight: bold);
   display: inline;
+  @include govuk-font($size: 19, $weight: bold);
 }
 
 .moj-timeline__byline {
-  @include govuk-font($size: 19);
   display: inline;
   margin: 0;
   color: $govuk-secondary-text-colour;
+  @include govuk-font($size: 19);
 }
 
 .moj-timeline__date {
-  @include govuk-font($size: 16);
   margin-top: govuk-spacing(1);
   margin-bottom: 0;
+  @include govuk-font($size: 16);
 }
 
 .moj-timeline__description {
-  @include govuk-font($size: 19);
   margin-top: govuk-spacing(4);
+  @include govuk-font($size: 19);
 }
 
 /* ==========================================================================

package/moj/helpers/_all.scss

@@ -1,2 +1,2 @@
-@import "hidden";
-@import "links";
+@forward "hidden";
+@forward "links";

package/moj/helpers/_links.scss

@@ -1,4 +1,6 @@
-@import "../settings/colours";
+@use "sass:color";
+@use "../settings/colours" as *;
+@use "../vendor/govuk-frontend" as *;
 
 @mixin moj-link-style-warning {
   &:link,
@@ -7,7 +9,7 @@
   }
 
   &:hover {
-    color: scale-color($moj-warning-link-colour, $lightness: -30%);
+    color: color.scale($moj-warning-link-colour, $lightness: -30%);
   }
 
   &:active {