Support previews for full width components (#191)

x-govuk · Dec 19, 2023 · b4ddade · b4ddade
1 parent 2e27f19
commit b4ddade
Show file tree

Hide file tree

Showing 5 changed files with 44 additions and 4 deletions.
diff --git a/docs/_components/example/_example.scss b/docs/_components/example/_example.scss
@@ -3,7 +3,9 @@
   border: 0;
   border-right: 1px solid $govuk-border-colour;
   display: block;
-  max-width: 100%;
+  padding: govuk-spacing(4);
+  max-width: calc(100% - govuk-spacing(4) * 2);
+  resize: both;
   width: 100%;
 }
 
@@ -14,8 +16,12 @@
 .app-example__tabs {
   // stylelint-disable selector-max-id
   .govuk-tabs__panel#preview {
+    background: govuk-colour("light-grey");
     padding: 0;
-    padding-right: 1px;
+  }
+
+  .x-govuk-code {
+    margin: 0;
   }
 }
 

diff --git a/docs/_layouts/example-full-width.njk b/docs/_layouts/example-full-width.njk
@@ -0,0 +1,25 @@
+{% extends "layouts/base.njk" %}
+{% from "x-govuk/components/autocomplete/macro.njk" import xGovukAutocomplete %}
+
+{% block head %}
+  {{ super() }}
+  <style>
+    .govuk-template { background-color: transparent; }
+  </style>
+{% endblock %}
+
+{% block header %}{% endblock %}
+
+{% block main %}
+  {{ content }}
+{% endblock %}
+
+{% block scripts %}
+  <script src="{{ '/assets/iframeResizer.contentWindow.js' | url }}"></script>
+  <script src="{{ '/assets/x-govuk/all.js' | url }}"></script>
+  <script>
+    window.GOVUKPrototypeComponents.initAll()
+  </script>
+{% endblock %}
+
+{% block footer %}{% endblock %}
diff --git a/docs/_layouts/example.njk b/docs/_layouts/example.njk
@@ -1,6 +1,15 @@
 {% extends "layouts/base.njk" %}
 {% from "x-govuk/components/autocomplete/macro.njk" import xGovukAutocomplete %}
 
+{% set mainClasses = "govuk-!-padding-bottom-1" %}
+
+{% block head %}
+  {{ super() }}
+  <style>
+    .govuk-template { background-color: transparent; }
+  </style>
+{% endblock %}
+
 {% block header %}{% endblock %}
 
 {% block content %}

diff --git a/docs/examples/masthead.njk b/docs/examples/masthead.njk
@@ -1,6 +1,6 @@
 ---
 eleventyExcludeFromCollections: true
-layout: example.njk
+layout: example-full-width.njk
 title: Masthead example
 ---
 {% from "x-govuk/components/masthead/macro.njk" import xGovukMasthead %}

diff --git a/docs/examples/primary-navigation.njk b/docs/examples/primary-navigation.njk
@@ -1,6 +1,6 @@
 ---
 eleventyExcludeFromCollections: true
-layout: example.njk
+layout: example-full-width.njk
 title: Primary navigation
 ---
 {% from "x-govuk/components/primary-navigation/macro.njk" import xGovukPrimaryNavigation %}