docs(example template): amending example template

Related to #958
ministryofjustice · Dec 3, 2024 · 2b71718 · 2b71718
1 parent d732ca6
commit 2b71718
Show file tree

Hide file tree

Showing 6 changed files with 19 additions and 25 deletions.
diff --git a/docs/_includes/example.njk b/docs/_includes/example.njk
@@ -1,7 +1,7 @@
-<div class="app-example">
-  <span class="app-example__new-window">
+<div class="app-example__new-window">
     <a href="{{ href | url }}" target="_blank">Open this example <span class="govuk-visually-hidden">({{ title }})</span> in a new window</a>
-  </span>
+</div>
+<div class="app-example">
   <iframe class="app-example__frame" scrolling="auto" frameborder="0" height="{{ height }}" src="{{ href | url }}" title="{{ title }}"></iframe>
 </div>
 <div class="app-tabs" data-module="app-tabs">
@@ -34,7 +34,7 @@
   <div class="app-tabs__panel app-tabs__panel--hidden" id="nunjucks-default-{{ id }}" role="tabpanel" aria-labelledby="tab_nunjucks-default-{{ id }}">
 
 {% if arguments %}
-  <details class="govuk-details govuk-!-padding-3" data-module="govuk-details">
+  <details class="govuk-details govuk-!-padding-left-3 govuk-!-padding-top-3 govuk-!-padding-right-3 govuk-!-margin-bottom-0" data-module="govuk-details">
     <summary class="govuk-details__summary">
       <span class="govuk-details__summary-text">
         Nunjucks macro options
@@ -74,7 +74,7 @@ This component is in the ‘Assets’ tab in the MoJ Figma Kit.
 
 If you’re external to MoJ, download the Kit and add it as a library to your Figma files. You’ll need to re-add the kit to update the version.
 
-[View component in MoJ Figma Kit]({{ figmaLink }})
+<p class="govuk-body govuk-!-margin-0"><a href="{{ figmaLink }}">View component in MoJ Figma Kit</a></p>
 
   </div>
 {% endif %}

diff --git a/docs/_includes/layouts/example.njk b/docs/_includes/layouts/example.njk
@@ -3,7 +3,7 @@
     <style>{% include (page.inputPath | getStylesPath) ignore missing %}</style>
 {% endblock %}
 {% block body %}
-    <div class="app-example__wrapper govuk-!-margin-6 govuk-!-margin-top-9">{{ content | safe }}</div>
+    <div class="app-example__wrapper govuk-!-margin-6">{{ content | safe }}</div>
 {% endblock %}
 {% block pageScripts %}
     <script type="module">{% include (page.inputPath | getScriptPath) ignore missing %}</script>

diff --git a/docs/assets/stylesheets/components/_copy-button.scss b/docs/assets/stylesheets/components/_copy-button.scss
@@ -5,7 +5,7 @@
   position: absolute;
   z-index: 1;
   top: govuk-spacing(4);
-  right: govuk-spacing(4);
+  right: govuk-spacing(8);
   min-width: 110px;
   padding: 4px 10px 2px 10px;
   border: 1px solid $copy-button-colour;

diff --git a/docs/assets/stylesheets/components/_example.scss b/docs/assets/stylesheets/components/_example.scss
@@ -4,11 +4,11 @@
 
   .app-example {
     background-color: govuk-colour("white");
-    border: 1px solid $govuk-border-colour;
+    border-left: 1px solid $govuk-border-colour;
+    border-right: 1px solid $govuk-border-colour;
     position: relative;
   }
 
-
   .app-example__frame {
     background-color: govuk-colour("white");
     border: 0;
@@ -26,16 +26,14 @@
   .app-example__new-window {
     @include govuk-font($size: 16);
     border: 1px solid $govuk-border-colour;
-    position: absolute; top: -1px; left: -1px;
-    background-color: white;
-
+    background-color: govuk-colour("white");
+    padding: 8px;
 
     a,
     a:link,
     a:visited {
       color: govuk-colour("blue");
-      display: block;
-      margin: 8px;
+      // display: block;
       text-decoration: none;
     }
 

diff --git a/docs/assets/stylesheets/components/_prose.scss b/docs/assets/stylesheets/components/_prose.scss
@@ -102,10 +102,10 @@
 }
 
 pre {
-  @include govuk-responsive-margin(4, "bottom");
-  background: #f8f8f8; // Matches _higlight.scss
+  @include govuk-responsive-margin(6, "bottom");
+  background: #f7f7f7;
   font-size: 16px;
-  margin: 0;
+  margin: govuk-spacing(6);
   padding: govuk-spacing(3);
   position: relative;
   overflow: auto;

diff --git a/docs/assets/stylesheets/components/_tabs.scss b/docs/assets/stylesheets/components/_tabs.scss
@@ -4,12 +4,12 @@
 
 .app-tabs {
   background: govuk-colour("white");
-  margin-bottom: govuk-spacing(6);
+  border-top: 0;
+  margin-bottom: govuk-spacing(9);
 }
 
 .app-tabs__list {
   border: 1px solid $govuk-border-colour;
-  border-top: 0;
   list-style: none;
   margin: 0;
   padding: 0;
@@ -72,7 +72,7 @@
   }
 
   &[aria-selected="true"] {
-    background-color: govuk-colour("light-grey");
+    background-color: govuk-colour("white");
     color: govuk-colour("black");
     margin-bottom: -1px;
     padding-bottom: 21px;
@@ -86,7 +86,7 @@
 
 .app-tabs__panel {
   @include govuk-font($size: 16);
-  background-color: govuk-colour("light-grey");
+  background-color: govuk-colour("white");
   border: 1px solid $govuk-border-colour;
   border-top: 0;
   position: relative;
@@ -95,10 +95,6 @@
     display: none;
   }
 
-  *:last-of-type {
-    margin-bottom: 0; // Remove margin bottom from any last element
-  }
-
   p {
     max-width: 100% !important;
   }