add images to dist folder and add styling to the images in guidance

.eleventy.js

@@ -28,6 +28,9 @@ export default function (eleventyConfig) {
   eleventyConfig.addWatchTarget('./src/')
   eleventyConfig.addWatchTarget('./docs/assets/')
 
+  // Add images to docs
+	eleventyConfig.addPassthroughCopy('docs/assets/images');
+
   // Add syntax highlighting to code blocks
   eleventyConfig.addPlugin(syntaxHighlight)
 

docs/_includes/layouts/sidebar.njk

@@ -12,7 +12,7 @@
       </div>
 
       <div class="nhsuk-grid-column-three-quarters">
-        <main role="main" id="maincontent" class="nhsuk-main-wrapper">
+        <main role="main" id="maincontent" class="nhsuk-main-wrapper app-content">
           {% block main %}
             {{ content | safe }}
           {% endblock main %}

docs/assets/css/_content.scss

@@ -0,0 +1,8 @@
+.app-content {
+
+  // So images do not break the container
+  img {
+    max-width: 100%;
+  }
+
+}

docs/assets/css/app.scss

@@ -15,5 +15,6 @@
 // Import all styles specific for the design system docs
 @import "docs/assets/css/components/side-navigation";
 @import "docs/assets/css/tabs.scss";
+@import "docs/assets/css/content.scss";
 @import "docs/assets/css/example.scss";
 @import "docs/assets/css/utilities.scss";

docs/components/bottom-navigation.md

@@ -7,7 +7,7 @@ tags:
   - component
 ---
 
-![bottom nav](bottom-nav.png)
+![](/assets/images/bottom-nav.png)
 
 ## When to use
 
@@ -23,6 +23,8 @@ The bottom navigation is not part of the web browser version of the NHS App. The
 
 Each hub is represented by a text label and an icon. The text labels match the main heading on the respective hub page.
 
+![](/assets/images/bottom-nav-2.png)
+
 ## Accessibility
 
 Bear in mind that the bottom navigation can be easier for users to reach than the top navigation. This lends itself to links that users may need more frequently.

docs/components/top-navigation.md

@@ -6,7 +6,7 @@ tags:
   - component
 ---
 
-[add example]
+![](/assets/images/top-nav.png)
 
 ## When to use
 
@@ -24,6 +24,8 @@ The top navigation includes a link to the NHS App help and support pages hosted
 
 The top also includes an ’Account and settings’ link. This opens the respective hub page.
 
+![ ](/assets/images/top-nav-2.png)
+
 ## Accessibility
 
 The top navigation icons do not have text labels. They have aria labels which are announced by screen readers.