fix: text color in interruption card and initAll function updates (#1062

)

* fix(interruption card): fix body text color when govuk-global-styles is true (#1059)

If the component is used when govuk global styles is set to true, the i
specificity isn't high enough to override the text color to white.
This commit adds extra css to ensure elements within the interruption
card body are given the correct text size and color.

* fix(inital): remove duplicate initialisation block in all.js (#1060)

The code block to initialize sortable table copmonents was duplicated

* fix(initall): ensure datepickers respect scope when initialised (#1061)

Datepickers were always initialised within the document scope, and would ignore any scope passed to
the intiAll function.

src/moj/all.js

@@ -61,14 +61,7 @@ MOJFrontend.initAll = function (options) {
     });
   });
 
-  var $sortableTables = scope.querySelectorAll('[data-module="moj-sortable-table"]');
-  MOJFrontend.nodeListForEach($sortableTables, function ($table) {
-    new MOJFrontend.SortableTable({
-      table: $table
-    });
-  });
-
-  const $datepickers = document.querySelectorAll('[data-module="moj-date-picker"]')
+  const $datepickers = scope.querySelectorAll('[data-module="moj-date-picker"]')
   MOJFrontend.nodeListForEach($datepickers, function ($datepicker) {
     new MOJFrontend.DatePicker($datepicker, {}).init();
   })

src/moj/components/interruption-card/_interruption-card.scss

@@ -14,6 +14,13 @@
   color: govuk-colour("white");
 }
 
+// If $govuk-global-styles is true, we need to override the color and size on elements
+// within the body class directly
+.moj-interruption-card__body > * {
+  @include govuk-font-size($size: 24);
+  color: govuk-colour("white");
+}
+
 .moj-interruption-card__body:last-child {
   margin-bottom: 0;
 }