docs(cookie banner): align cookie banner content left (#957)

* docs(cookie banner): align cookie banner content left * docs(cookie-banner): add text-wrap: pretty to cookie banner content to prevent orphans
ministryofjustice · Nov 25, 2024 · 78e4c9e · 78e4c9e
1 parent 84811d4
commit 78e4c9e
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 1 deletion.
diff --git a/docs/_includes/layouts/partials/header.njk b/docs/_includes/layouts/partials/header.njk
@@ -30,6 +30,8 @@
   attributes: {
     "data-module": "app-cookies"
   },
+  classes: "govuk-cookie-banner--align-left",
+  hidden: true,
   messages: [
     {
       headingText: "Cookies on MoJ Design System",

diff --git a/docs/assets/javascript/cookies.js b/docs/assets/javascript/cookies.js
@@ -17,8 +17,10 @@ Cookies.prototype.init = function () {
   const configEncoded = localStorage.getItem("mojpl-cookies");
   if (configEncoded) {
     const config = JSON.parse(configEncoded);
-
     this.load(config);
+  } else {
+    // If there is no config, show the cookie banner
+    this.$module.hidden = false;
   }
 };
 

diff --git a/docs/assets/stylesheets/application.scss b/docs/assets/stylesheets/application.scss
@@ -14,6 +14,7 @@ $govuk-assets-path: "../" !default;
 
 // Custom documentation components
 @import "./components/back-to-top";
+@import "./components/cookie-banner";
 @import "./components/copy-button";
 @import "./components/example";
 @import "./components/layout";

diff --git a/docs/assets/stylesheets/components/_cookie-banner.scss b/docs/assets/stylesheets/components/_cookie-banner.scss
@@ -0,0 +1,10 @@
+// Override cookie banner to be left aligned
+.govuk-cookie-banner--align-left {
+  .govuk-cookie-banner__message {
+    margin-left: 20px;
+    margin-right: 20px;
+  }
+  .govuk-cookie-banner__content {
+    text-wrap: pretty;
+  }
+}