refactor(deps): make dependencies explicit

Make govuk-frontend a package dependency, and import its helpers and width-container into SCSS,
where they're used.

Stop building `.govuk-textarea` in SCSS, instead just apply it onto the element directly.

Mark jQuery as a peer dependency, as it's necessary for the JavaScript to work but not bundled as
part of the package.

BREAKING CHANGE: The package now explicitly depends on govuk-frontend >=3.0.0. If you
already have govuk-frontend installed, ensure that you're using a compatible version.

fixes #147

package/moj/all.js

@@ -979,7 +979,7 @@ if('contentEditable' in document.documentElement) {
   };
 
   MOJFrontend.RichTextEditor.prototype.getEnhancedHtml = function(val) {
-    return this.getToolbarHtml() + '<div class="moj-rich-text-editor__content" contenteditable="true" spellcheck="false"></div>';
+    return this.getToolbarHtml() + '<div class="govuk-textarea moj-rich-text-editor__content" contenteditable="true" spellcheck="false"></div>';
   };
 
   MOJFrontend.RichTextEditor.prototype.hideDefault = function() {

package/moj/all.scss

@@ -1,3 +1,5 @@
+@import "node_modules/govuk-frontend/govuk/base";
+
 @import "settings/all";
 @import "helpers/all";
 @import "objects/all";

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

@@ -1,3 +1,5 @@
+@import "node_modules/govuk-frontend/govuk/objects/width-container";
+
 .moj-cookie-banner {
   display: none;
   @include govuk-font(16);

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

@@ -66,9 +66,8 @@
 }
 
 .moj-rich-text-editor__content {
-  @extend .govuk-textarea;
   min-height: 130px;
   outline: none;
   overflow: auto;
   resize: vertical;
-}
+}

package/moj/components/rich-text-editor/rich-text-editor.js

@@ -88,7 +88,7 @@ if('contentEditable' in document.documentElement) {
   };
 
   MOJFrontend.RichTextEditor.prototype.getEnhancedHtml = function(val) {
-    return this.getToolbarHtml() + '<div class="moj-rich-text-editor__content" contenteditable="true" spellcheck="false"></div>';
+    return this.getToolbarHtml() + '<div class="govuk-textarea moj-rich-text-editor__content" contenteditable="true" spellcheck="false"></div>';
   };
 
   MOJFrontend.RichTextEditor.prototype.hideDefault = function() {

package/package.json

@@ -27,6 +27,10 @@
     "access": "public"
   },
   "dependencies": {
+    "govuk-frontend": "^3.0.0 || ^4.0.0",
     "moment": "^2.27.0"
+  },
+  "peerDependencies": {
+    "jquery": "^3.6.0"
   }
 }

src/moj/all.scss

@@ -1,3 +1,5 @@
+@import "node_modules/govuk-frontend/govuk/base";
+
 @import "settings/all";
 @import "helpers/all";
 @import "objects/all";

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

@@ -1,3 +1,5 @@
+@import "node_modules/govuk-frontend/govuk/objects/width-container";
+
 .moj-cookie-banner {
   display: none;
   @include govuk-font(16);

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

@@ -66,9 +66,8 @@
 }
 
 .moj-rich-text-editor__content {
-  @extend .govuk-textarea;
   min-height: 130px;
   outline: none;
   overflow: auto;
   resize: vertical;
-}
+}

src/moj/components/rich-text-editor/rich-text-editor.js

@@ -88,7 +88,7 @@ if('contentEditable' in document.documentElement) {
   };
 
   MOJFrontend.RichTextEditor.prototype.getEnhancedHtml = function(val) {
-    return this.getToolbarHtml() + '<div class="moj-rich-text-editor__content" contenteditable="true" spellcheck="false"></div>';
+    return this.getToolbarHtml() + '<div class="govuk-textarea moj-rich-text-editor__content" contenteditable="true" spellcheck="false"></div>';
   };
 
   MOJFrontend.RichTextEditor.prototype.hideDefault = function() {

test.scss

@@ -1,7 +1,4 @@
 /**
  * This file is used in CI to test that the moj-frontend can be imported and built.
- *
- * The govuk-frontend source is also required because we use some of their mixins.
  */
-@import "node_modules/govuk-frontend/govuk/all";
 @import "node_modules/@ministryofjustice/frontend/moj/all";