govuk_tech_docs 6.3.0.beta → 6.4.0.beta

data/documentation/source/support/index.html.md.erb

@@ -0,0 +1,46 @@
+---
+title: Support
+weight: 80
+last_reviewed_on: 2020-07-01
+review_in: 1 year
+---
+
+# Support
+
+## Report issues
+
+Report any problems or issues by:
+
+- contacting the Government Digital Service (GDS) technical writing community on [email][contact-email] or [Slack][slack-ask-tw]
+- posting in the [tech docs format][slack-tech-docs-format] Slack channel
+- opening an issue on the [tech-docs-template repo][template-issues]
+
+## Contribute
+
+We welcome contributions to the Technical Documentation Template.
+
+You can create an issue or pull request in the following GitHub repos:
+
+- [alphagov/tech-docs-gem][tech-docs-gem] - for technical and documentation issues
+- [alphagov/tech-docs-template][tech-docs-template]
+
+You should check and document your pull request before you submit it.
+
+1. Check the repo to see if someone has already raised a similar pull request or issue.
+2. Test your contribution using [unit tests](https://github.com/alphagov/tech-docs-gem/tree/main/spec/govuk_tech_docs), [JavaScript tests](https://github.com/alphagov/tech-docs-gem/tree/main/spec/javascripts) and [integration tests](https://github.com/alphagov/tech-docs-gem/tree/main/spec/features).
+3. Document the change in this documentation.
+4. Add a description of the change to the repo changelog if your pull request changes how the Technical Documentation Template behaves.
+
+The Tech Docs Template working group will review your proposal at their next fortnightly triage session.
+
+The team will then do one of the following:
+
+- accept your proposal but ask for changes before it's prioritised for publication
+- accept your proposal and find someone to work with you to publish the changes
+- not accept your proposal and explain why
+
+## Projects that use the template
+
+You can see [which repos currently use the Tech Docs Template](https://github.com/alphagov/tech-docs-gem/network/dependents) in the Tech Docs Template Ruby gem GitHub repo.
+
+<%= partial "partials/links" %>

data/documentation/source/write_docs/add_openapi_spec/index.html.md.erb

@@ -0,0 +1,48 @@
+---
+title: Convert an OpenAPI specification into documentation
+weight: 42
+last_reviewed_on: 2021-07-06
+review_in: 1 year
+---
+
+# Convert an OpenAPI specification into documentation
+
+OpenAPI is an API description format for REST APIs. The government's Open Standards Board [recommends using OpenAPI][use-openapi].
+
+You can convert an OpenAPI file into an API reference page in your documentation.
+
+Your OpenAPI file must be both:
+
+- [version 3](https://github.com/OAI/OpenAPI-Specification/blob/main/versions/3.0.0.md)
+- in YAML format
+
+1. Add the following to your `config/tech-docs.yml` file:
+
+    ```yaml
+    api_path: <OPENAPI_FILE>
+    ```
+
+    where `<OPENAPI_FILE>` is your OpenAPI file, for example `/openapi/openapi.yaml`.
+
+2. Add the following in your documentation to convert the OpenAPI file into an API reference:
+
+    ```markdown
+    api>
+    ```
+
+For `api_path` you can also use:
+
+- a relative path, for example `./openapi/openapi.yaml`
+- an external file, for example `https://raw.githubusercontent.com/OAI/OpenAPI-Specification/main/examples/v3.0/petstore.yaml`
+
+## Convert a specific endpoint
+
+You can convert a specific endpoint using the following in your documentation: 
+
+```markdown
+api> <ENDPOINT>
+```
+
+where `<ENDPOINT>` is your endpoint, for example `/pets`.
+
+<%= partial "partials/links" %>

data/documentation/source/write_docs/content/index.html.md.erb

@@ -0,0 +1,128 @@
+---
+title: Write your content
+weight: 41
+last_reviewed_on: 2020-07-01
+review_in: 1 year
+---
+# Write your content
+
+You can write your content in Markdown or HTML when using the Tech Doc Template.
+
+## Insert a table
+
+You can insert a table using either Markdown or HTML.
+
+Use Markdown when there are no specific formatting requirements.
+
+Use HTML when there are specific formatting requirements, for example to ensure that text in cells does not wrap.
+
+### Create table using Markdown
+
+Use Markdown when there are no specific formatting requirements.
+
+This example is a left-aligned table.
+
+```bash
+| Column header | Column header |
+|---------------|---------------|
+| content       | content       |
+| content       | content       |
+```
+
+Add more columns and rows as needed.
+
+You can change the alignment of the text in each column:
+
+- Centre: `|:---:|`
+- Right: `|---:|`
+
+If a table has 3 or more columns, you might need to set row headers as well as column headers to improve accessibility. Using row headers reduces the amount of information screen reader users need to remember whilst using the table.
+
+The following example has the first cell in each row marked up as the row header using the `#` character:
+
+```bash
+| City name         | Population | Average age |
+|-------------------|------------|-------------|
+| # Some city       | 38000      | 48          |
+| # Some other city | 41000      | 37          |
+```
+
+See the [Web Accessibility Initiative tutoral on table concepts](https://www.w3.org/WAI/tutorials/tables/) for more information.
+
+### Create table using HTML
+
+You should create tables using HTML when there are specific formatting requirements.
+
+The following code is an example of a 2 column 2 row table with no text wrapping.
+
+```bash
+<div style = "overflow-x:auto;">
+<table style="width:100%">
+<tr>
+<th nowrap>Header 1</th>
+<th>Header 2</th>
+</tr>
+<tr>
+<td nowrap><code>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et enim quis arcu pharetra aliquet. Maecenas posuere tellus arcu, a suscipit dui posuere eu. Nunc vestibulum ligula sit amet eros euismod accumsan. </code></td>
+<td nowrap>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et enim quis arcu pharetra aliquet. Maecenas posuere tellus arcu, a suscipit dui posuere eu. Nunc vestibulum ligula sit amet eros euismod accumsan. </td>
+</tr>
+</table>
+</div>
+```
+
+## Create a link
+
+You can create links using either Markdown or HTML.
+
+To create a link in Markdown, use the following:
+
+```yaml
+[link text](link address)
+```
+
+For example:
+
+```yaml
+[The Google home page](http://www.google.co.uk)
+```
+
+To create a link in HTML, use the following:
+
+```bash
+<a href="link address">link text</a>
+```
+
+You can write the link in HTML with a `target="blank"` element to make the link open in a new internet browser tab by default:
+
+```bash
+<a href="link address" target="blank">link text</a>
+```
+
+## Insert an image
+
+To insert an image into your content, use the following:
+
+```bash
+<%= image_tag "image file", { :alt => 'image alt text' } %>
+```
+
+You must include alt text for an image if the image has not been explained in surrounding content, due to accessibility requirements.
+
+## Insert a warning
+
+Use the warning text component when you need to warn users about something important, such as legal consequences of an action, or lack of action, that they might take.
+
+This warning text format is consistent with the [GOV.UK Design System warning text][design-system].
+
+To insert a warning, use the following:
+
+```ruby
+<%%= warning_text('insert warning text here') %>
+```
+
+## Use the GOV.UK Design System
+
+Use [GOV.UK Design System](https://design-system.service.gov.uk/) elements in your documentation to ensure your content complies with accessibility regulations.
+
+
+<%= partial "partials/links" %>

data/documentation/source/write_docs/index.html.md.erb

@@ -0,0 +1,15 @@
+---
+title: Write your documentation
+weight: 40
+last_reviewed_on: 2020-07-01
+review_in: 1 year
+---
+
+# Write your documentation
+
+When you write your documentation, you can:
+
+- [write your content][write-content] in Markdown and / or HTML
+- add an [OpenAPI3 specification][openapi3] to your documentation site
+
+<%= partial "partials/links" %>

data/lib/govuk_tech_docs/version.rb

@@ -1,3 +1,3 @@
 module GovukTechDocs
-  VERSION = "6.3.0.beta".freeze
+  VERSION = "6.4.0.beta".freeze
 end

data/lib/source/layouts/_footer.erb

@@ -1,4 +1,4 @@
-<footer class="govuk-footer app-footer" role="contentinfo">
+<div class="govuk-footer app-footer">
   <% if config[:tech_docs][:show_govuk_logo] %>
   <svg focusable="false" role="presentation" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 60" height="30" width="32" fill="currentcolor" class="govuk-footer__crown">
     <g>
@@ -57,4 +57,4 @@
       >© Crown copyright</a>
     </div>
   </div>
-</footer>
+</div>

data/lib/source/layouts/_header.erb

@@ -1,4 +1,4 @@
-<header class="govuk-header app-header" role="banner" data-module="govuk-header">
+<div class="govuk-header app-header">
   <div class="govuk-header__container govuk-header__container--full-width">
     <div class="govuk-header__logo">
       <% if config[:tech_docs][:service_link] %>
@@ -46,4 +46,4 @@
       <% end %>
     </div>
   </div>
-</header>
+</div>

data/lib/source/layouts/_service_navigation.erb

@@ -1,7 +1,5 @@
-<% if config[:tech_docs][:header_links] %>
-<div class="govuk-service-navigation app-pane__navigation"
-  data-module="govuk-service-navigation">
-  <div class="govuk-width-container">
+<div class="govuk-service-navigation app-pane__navigation" data-module="govuk-service-navigation">
+<div class="govuk-width-container">
     <div class="govuk-service-navigation__container">
       <nav aria-label="Menu" class="govuk-service-navigation__wrapper">
         <button type="button" class="govuk-service-navigation__toggle govuk-js-service-navigation-toggle" aria-controls="navigation" hidden aria-hidden="true">
@@ -24,4 +22,3 @@
     </div>
   </div>
 </div>
-<% end %>

data/lib/source/layouts/core.erb

@@ -50,13 +50,17 @@
 
   <body class="govuk-template__body">
     <script>document.body.className += ' js-enabled' + ('noModule' in HTMLScriptElement.prototype ? ' govuk-frontend-supported' : '');</script>
+    <header class="govuk-template__header app-header">
+      <%= partial 'layouts/header' %>
+    </header>
+    <% if config[:tech_docs][:header_links] %>
+        <%= partial 'layouts/service_navigation' %>
+    <% end %>
+
 
-    <div class="app-pane">
       <%= partial 'layouts/cookie_banner' %>
       <div class="app-pane__header toc-open-disabled">
         <a href="#content" class="govuk-skip-link" data-module="govuk-skip-link">Skip to main content</a>
-        <%= partial 'layouts/header' %>
-        <%= partial 'layouts/service_navigation' %>
       </div>
 
       <% if content_for? :sidebar %>
@@ -95,11 +99,13 @@
               </ul>
             <% end %>
           </aside>
-
-          <%= partial "layouts/footer" %>
         </div>
       </div>
-    </div>
+
+
+    <footer class="govuk-template__footer">
+      <%= partial "layouts/footer" %>
+    </footer>
 
     <%= partial 'layouts/analytics' %>
     <%= javascript_include_tag :govuk_frontend, :type => "module" %>

data/node_modules/govuk-frontend/dist/govuk/_base.import.scss

@@ -0,0 +1,6 @@
+@import "settings";
+@import "tools";
+@import "helpers";
+@import "custom-properties";
+@import "components/button/settings";
+

data/node_modules/govuk-frontend/dist/govuk/_base.scss

@@ -1,6 +1,5 @@
-@import "settings/index";
-@import "tools/index";
-@import "helpers/index";
-@import "custom-properties/index";
+@forward "settings";
+@forward "tools";
+@forward "helpers";
+@forward "components/button/settings";
 
-/*# sourceMappingURL=_base.scss.map */

data/node_modules/govuk-frontend/dist/govuk/all.bundle.js

@@ -4,7 +4,7 @@
   (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.GOVUKFrontend = global.GOVUKFrontend || {}));
 })(this, (function (exports) { 'use strict';
 
-  const version = '6.1.0';
+  const version = '6.4.0';
 
   function getBreakpoint(name) {
     const property = `--govuk-breakpoint-${name}`;
@@ -1589,20 +1589,18 @@
       this.$input = void 0;
       this.$button = void 0;
       this.$status = void 0;
+      this.$label = void 0;
       this.i18n = void 0;
       this.id = void 0;
       this.$announcements = void 0;
       this.enteredAnotherElement = void 0;
-      const $input = this.$root.querySelector('input');
+      const $input = this.$root.querySelector('input[type="file"]');
       if ($input === null) {
         throw new ElementError({
           component: FileUpload,
           identifier: 'File inputs (`<input type="file">`)'
         });
       }
-      if ($input.type !== 'file') {
-        throw new ElementError(formatErrorMessage(FileUpload, 'File input (`<input type="file">`) attribute (`type`) is not `file`'));
-      }
       this.$input = $input;
       if (!this.$input.id) {
         throw new ElementError({
@@ -1618,8 +1616,30 @@
       if (!$label.id) {
         $label.id = `${this.id}-label`;
       }
+      this.$label = $label;
       this.$input.id = `${this.id}-input`;
-      this.$input.setAttribute('hidden', 'true');
+      this.$input.setAttribute('hidden', 'hidden');
+      this.$status = this.createStatus();
+      this.$button = this.createButton();
+      this.$root.insertAdjacentElement('afterbegin', this.$button);
+      this.$input.addEventListener('change', this.onChange.bind(this));
+      this.updateDisabledState();
+      this.observeDisabledState();
+      this.$announcements = document.createElement('span');
+      this.$announcements.classList.add('govuk-file-upload-announcements');
+      this.$announcements.classList.add('govuk-visually-hidden');
+      this.$announcements.setAttribute('aria-live', 'assertive');
+      this.$root.insertAdjacentElement('afterend', this.$announcements);
+      this.bindDraggingEvents();
+    }
+    createStatus() {
+      const $status = document.createElement('span');
+      $status.className = 'govuk-body govuk-file-upload-button__status';
+      $status.setAttribute('aria-live', 'polite');
+      $status.innerText = this.i18n.t('noFileChosen');
+      return $status;
+    }
+    createButton() {
       const $button = document.createElement('button');
       $button.classList.add('govuk-file-upload-button');
       $button.type = 'button';
@@ -1629,11 +1649,7 @@
       if (ariaDescribedBy) {
         $button.setAttribute('aria-describedby', ariaDescribedBy);
       }
-      const $status = document.createElement('span');
-      $status.className = 'govuk-body govuk-file-upload-button__status';
-      $status.setAttribute('aria-live', 'polite');
-      $status.innerText = this.i18n.t('noFileChosen');
-      $button.appendChild($status);
+      $button.appendChild(this.$status);
       const commaSpan = document.createElement('span');
       commaSpan.className = 'govuk-visually-hidden';
       commaSpan.innerText = ', ';
@@ -1651,24 +1667,14 @@
       instructionSpan.innerText = this.i18n.t('dropInstruction');
       containerSpan.appendChild(instructionSpan);
       $button.appendChild(containerSpan);
-      $button.setAttribute('aria-labelledby', `${$label.id} ${commaSpan.id} ${$button.id}`);
+      $button.setAttribute('aria-labelledby', `${this.$label.id} ${commaSpan.id} ${$button.id}`);
       $button.addEventListener('click', this.onClick.bind(this));
       $button.addEventListener('dragover', event => {
         event.preventDefault();
       });
-      this.$root.insertAdjacentElement('afterbegin', $button);
-      this.$input.setAttribute('tabindex', '-1');
-      this.$input.setAttribute('aria-hidden', 'true');
-      this.$button = $button;
-      this.$status = $status;
-      this.$input.addEventListener('change', this.onChange.bind(this));
-      this.updateDisabledState();
-      this.observeDisabledState();
-      this.$announcements = document.createElement('span');
-      this.$announcements.classList.add('govuk-file-upload-announcements');
-      this.$announcements.classList.add('govuk-visually-hidden');
-      this.$announcements.setAttribute('aria-live', 'assertive');
-      this.$root.insertAdjacentElement('afterend', this.$announcements);
+      return $button;
+    }
+    bindDraggingEvents() {
       this.$button.addEventListener('drop', this.onDrop.bind(this));
       document.addEventListener('dragenter', this.updateDropzoneVisibility.bind(this));
       document.addEventListener('dragenter', () => {
@@ -1775,7 +1781,7 @@
     }
     updateDisabledState() {
       this.$button.disabled = this.$input.disabled;
-      this.$root.classList.toggle('govuk-drop-zone--disabled', this.$button.disabled);
+      this.$root.classList.toggle('govuk-file-upload-wrapper--disabled', this.$button.disabled);
     }
   }
 

data/node_modules/govuk-frontend/dist/govuk/all.bundle.mjs

@@ -1,4 +1,4 @@
-const version = '6.1.0';
+const version = '6.4.0';
 
 function getBreakpoint(name) {
   const property = `--govuk-breakpoint-${name}`;
@@ -1583,20 +1583,18 @@ class FileUpload extends ConfigurableComponent {
     this.$input = void 0;
     this.$button = void 0;
     this.$status = void 0;
+    this.$label = void 0;
     this.i18n = void 0;
     this.id = void 0;
     this.$announcements = void 0;
     this.enteredAnotherElement = void 0;
-    const $input = this.$root.querySelector('input');
+    const $input = this.$root.querySelector('input[type="file"]');
     if ($input === null) {
       throw new ElementError({
         component: FileUpload,
         identifier: 'File inputs (`<input type="file">`)'
       });
     }
-    if ($input.type !== 'file') {
-      throw new ElementError(formatErrorMessage(FileUpload, 'File input (`<input type="file">`) attribute (`type`) is not `file`'));
-    }
     this.$input = $input;
     if (!this.$input.id) {
       throw new ElementError({
@@ -1612,8 +1610,30 @@ class FileUpload extends ConfigurableComponent {
     if (!$label.id) {
       $label.id = `${this.id}-label`;
     }
+    this.$label = $label;
     this.$input.id = `${this.id}-input`;
-    this.$input.setAttribute('hidden', 'true');
+    this.$input.setAttribute('hidden', 'hidden');
+    this.$status = this.createStatus();
+    this.$button = this.createButton();
+    this.$root.insertAdjacentElement('afterbegin', this.$button);
+    this.$input.addEventListener('change', this.onChange.bind(this));
+    this.updateDisabledState();
+    this.observeDisabledState();
+    this.$announcements = document.createElement('span');
+    this.$announcements.classList.add('govuk-file-upload-announcements');
+    this.$announcements.classList.add('govuk-visually-hidden');
+    this.$announcements.setAttribute('aria-live', 'assertive');
+    this.$root.insertAdjacentElement('afterend', this.$announcements);
+    this.bindDraggingEvents();
+  }
+  createStatus() {
+    const $status = document.createElement('span');
+    $status.className = 'govuk-body govuk-file-upload-button__status';
+    $status.setAttribute('aria-live', 'polite');
+    $status.innerText = this.i18n.t('noFileChosen');
+    return $status;
+  }
+  createButton() {
     const $button = document.createElement('button');
     $button.classList.add('govuk-file-upload-button');
     $button.type = 'button';
@@ -1623,11 +1643,7 @@ class FileUpload extends ConfigurableComponent {
     if (ariaDescribedBy) {
       $button.setAttribute('aria-describedby', ariaDescribedBy);
     }
-    const $status = document.createElement('span');
-    $status.className = 'govuk-body govuk-file-upload-button__status';
-    $status.setAttribute('aria-live', 'polite');
-    $status.innerText = this.i18n.t('noFileChosen');
-    $button.appendChild($status);
+    $button.appendChild(this.$status);
     const commaSpan = document.createElement('span');
     commaSpan.className = 'govuk-visually-hidden';
     commaSpan.innerText = ', ';
@@ -1645,24 +1661,14 @@ class FileUpload extends ConfigurableComponent {
     instructionSpan.innerText = this.i18n.t('dropInstruction');
     containerSpan.appendChild(instructionSpan);
     $button.appendChild(containerSpan);
-    $button.setAttribute('aria-labelledby', `${$label.id} ${commaSpan.id} ${$button.id}`);
+    $button.setAttribute('aria-labelledby', `${this.$label.id} ${commaSpan.id} ${$button.id}`);
     $button.addEventListener('click', this.onClick.bind(this));
     $button.addEventListener('dragover', event => {
       event.preventDefault();
     });
-    this.$root.insertAdjacentElement('afterbegin', $button);
-    this.$input.setAttribute('tabindex', '-1');
-    this.$input.setAttribute('aria-hidden', 'true');
-    this.$button = $button;
-    this.$status = $status;
-    this.$input.addEventListener('change', this.onChange.bind(this));
-    this.updateDisabledState();
-    this.observeDisabledState();
-    this.$announcements = document.createElement('span');
-    this.$announcements.classList.add('govuk-file-upload-announcements');
-    this.$announcements.classList.add('govuk-visually-hidden');
-    this.$announcements.setAttribute('aria-live', 'assertive');
-    this.$root.insertAdjacentElement('afterend', this.$announcements);
+    return $button;
+  }
+  bindDraggingEvents() {
     this.$button.addEventListener('drop', this.onDrop.bind(this));
     document.addEventListener('dragenter', this.updateDropzoneVisibility.bind(this));
     document.addEventListener('dragenter', () => {
@@ -1769,7 +1775,7 @@ class FileUpload extends ConfigurableComponent {
   }
   updateDisabledState() {
     this.$button.disabled = this.$input.disabled;
-    this.$root.classList.toggle('govuk-drop-zone--disabled', this.$button.disabled);
+    this.$root.classList.toggle('govuk-file-upload-wrapper--disabled', this.$button.disabled);
   }
 }
 

data/node_modules/govuk-frontend/dist/govuk/common/govuk-frontend-version.mjs

@@ -1,4 +1,4 @@
-const version = '6.1.0';
+const version = '6.4.0';
 
 export { version };
 //# sourceMappingURL=govuk-frontend-version.mjs.map

data/node_modules/govuk-frontend/dist/govuk/components/_index.import.scss

@@ -0,0 +1,38 @@
+@import "accordion";
+@import "back-link";
+@import "breadcrumbs";
+@import "button";
+@import "character-count";
+@import "checkboxes";
+@import "cookie-banner";
+@import "date-input";
+@import "details";
+@import "error-message";
+@import "error-summary";
+@import "exit-this-page";
+@import "fieldset";
+@import "file-upload";
+@import "footer";
+@import "generic-header";
+@import "header";
+@import "hint";
+@import "input";
+@import "inset-text";
+@import "label";
+@import "notification-banner";
+@import "pagination";
+@import "panel";
+@import "password-input";
+@import "phase-banner";
+@import "radios";
+@import "select";
+@import "service-navigation";
+@import "skip-link";
+@import "summary-list";
+@import "table";
+@import "tabs";
+@import "tag";
+@import "task-list";
+@import "textarea";
+@import "warning-text";
+