Final refinements

docs/_components/example/_example.scss

@@ -0,0 +1,25 @@
+.app-example__frame {
+  background: govuk-colour("white");
+  border: 0;
+  border-right: 1px solid $govuk-border-colour;
+  display: block;
+  max-width: 100%;
+  width: 100%;
+}
+
+.app-example__new-window {
+  @include govuk-font($size: 16);
+}
+
+.app-example__tabs {
+  .govuk-tabs__panel#preview {
+    padding: 0;
+    padding-right: 1px;
+  }
+}
+
+.app-example__toolbar {
+  background: $govuk-body-background-colour;
+  border-top: 1px solid $govuk-border-colour;
+  padding: govuk-spacing(2);
+}

docs/_components/example/macro.njk

@@ -0,0 +1,3 @@
+{% macro appExample(params) %}
+  {%- include "./template.njk" -%}
+{% endmacro %}

docs/_components/example/template.njk

@@ -0,0 +1,32 @@
+{% from "govuk/components/tabs/macro.njk" import govukTabs %}
+
+{%- set nunjucksHtml %}
+
+```js
+{{ getNunjucksCode(params.component) }}
+```
+{% endset %}
+
+{%- set previewHtml -%}
+<iframe class="app-example__frame" data-module="app-example-frame" src="/examples/{{ params.component }}"></iframe>
+<p class="app-example__toolbar">
+  <a class="app-example__new-window" href="/examples/{{ params.component }}" target="_blank">Open this example in a new tab</a>
+</p>
+{%- endset %}
+
+{{ govukTabs({
+  classes: "app-example__tabs",
+  items: [{
+    label: "Preview",
+    id: "preview",
+    panel: {
+      html: previewHtml
+    }
+  }, {
+    label: "Nunjucks",
+    id: "nunjucks",
+    panel: {
+      html: nunjucksHtml
+    }
+  }]
+}) }}

docs/autocomplete.md

@@ -3,14 +3,14 @@ title: Autocomplete
 layout: sub-navigation
 order: 1
 ---
-{% from "x-govuk/components/autocomplete/macro.njk" import xGovukAutocomplete %}
-{% from "components/_example.njk" import example %}
 
 The autocomplete component implements the [Accessible autocomplete pattern](https://github.com/alphagov/accessible-autocomplete) to enhance a fixed list of options provided by a `<select>` element.
 
 This component may be useful if you want users to pick from a number of options. Unlike an autosuggest component, this component will only allow users to choose from a predetermined list of options.
 
-{{ example({
+{% from "example/macro.njk" import appExample %}
+
+{{ appExample({
   component: "autocomplete"
 }) }}
 

docs/index.md

@@ -131,6 +131,5 @@ The project repository is public and anyone can contribute.
 
 This command will ask you what version you want to use. It will then publish a new version on NPM, create and push a new git tag and then generate release notes ready for posting on GitHub.
 
-> ![NOTE]
+> **NOTE**
 > Releasing a new version requires permission to publish packages to the `@x-govuk` organisation.
-

docs/masthead.md

@@ -3,14 +3,14 @@ title: Masthead
 layout: sub-navigation
 order: 3
 ---
-{% from "x-govuk/components/masthead/macro.njk" import xGovukMasthead %}
-{% from "components/_example.njk" import example %}
 
 The masthead component is based on the component used on [GOV.UK product pages](https://github.com/alphagov/product-page-example).
 
 This component may be useful if you are prototyping product or marketing pages.
 
-{{ example({
+{% from "example/macro.njk" import appExample %}
+
+{{ appExample({
   component: "masthead"
 }) }}