From 0177360493602a40ff65f843aa2cb3fffa286d50 Mon Sep 17 00:00:00 2001
From: Dave Hunter <thebeakking@gmail.com>
Date: Wed, 31 Jul 2024 10:38:43 +0100
Subject: [PATCH] Add issue templates, footer and contact us page (#125)

* add GitHub issue templates (.yaml files)
* add global footer
* add service name to header
* add 'Help and feedback' page
---
 .../ISSUE_TEMPLATE/accessibility_issue.yaml   | 69 +++++++++++++++++++
 .github/ISSUE_TEMPLATE/bug_report.md          | 33 ---------
 .github/ISSUE_TEMPLATE/bug_report.yaml        | 48 +++++++++++++
 .github/ISSUE_TEMPLATE/config.yml             |  5 ++
 .github/ISSUE_TEMPLATE/design_defect.yaml     | 54 +++++++++++++++
 .github/ISSUE_TEMPLATE/documentation.yaml     | 34 +++++++++
 .../new_component_or_pattern.md               | 26 -------
 .github/ISSUE_TEMPLATE/new_feature.yaml       | 44 ++++++++++++
 docs/_includes/layouts/base.njk               | 23 ++++++-
 .../layouts/partials/feedback-section.njk     |  6 +-
 docs/_includes/layouts/plain.njk              | 26 +++++++
 docs/assets/css/app.scss                      |  3 +
 docs/assets/css/components/_header.scss       | 38 ++++++++++
 docs/assets/css/components/_hero.scss         | 10 +++
 docs/components/index.md                      |  6 +-
 docs/help-and-feedback.md                     | 11 +++
 docs/index.njk                                | 22 +++---
 17 files changed, 376 insertions(+), 82 deletions(-)
 create mode 100644 .github/ISSUE_TEMPLATE/accessibility_issue.yaml
 delete mode 100644 .github/ISSUE_TEMPLATE/bug_report.md
 create mode 100644 .github/ISSUE_TEMPLATE/bug_report.yaml
 create mode 100644 .github/ISSUE_TEMPLATE/config.yml
 create mode 100644 .github/ISSUE_TEMPLATE/design_defect.yaml
 create mode 100644 .github/ISSUE_TEMPLATE/documentation.yaml
 delete mode 100644 .github/ISSUE_TEMPLATE/new_component_or_pattern.md
 create mode 100644 .github/ISSUE_TEMPLATE/new_feature.yaml
 create mode 100644 docs/_includes/layouts/plain.njk
 create mode 100644 docs/assets/css/components/_header.scss
 create mode 100644 docs/assets/css/components/_hero.scss
 create mode 100644 docs/help-and-feedback.md

diff --git a/.github/ISSUE_TEMPLATE/accessibility_issue.yaml b/.github/ISSUE_TEMPLATE/accessibility_issue.yaml
new file mode 100644
index 0000000..6dc0d2c
--- /dev/null
+++ b/.github/ISSUE_TEMPLATE/accessibility_issue.yaml
@@ -0,0 +1,69 @@
+name: ♿ Accessibility Issue
+description: Report an accessibility or usability issue.
+title: '[accessibility]: '
+labels: 'type: accessibility, awaiting triage'
+body:
+  - type: markdown
+    attributes:
+      value: '## Welcome!'
+  - type: markdown
+    attributes:
+      value: Thanks for taking the time to fill out this accessibility report.
+  - type: markdown
+    attributes:
+      value: Please fill in as much of the template below as you're able to. If you're unsure whether the issue already exists or how to fill in the template, open an issue anyway. Our team will help you to complete the rest.
+  - type: markdown
+    attributes:
+      value: Your issue might already exist. If so, add a comment to the existing issue instead of creating a new one. You can [find existing issues here](https://github.com/nhsuk/nhsapp-frontend/issues).
+  - type: dropdown
+    id: browser
+    attributes:
+      label: Browser
+      description: Which browser(s) are you experiencing the issue?
+      multiple: true
+      options:
+        - Chrome
+        - Safari
+        - Firefox
+        - Edge
+  - type: dropdown
+    id: os
+    attributes:
+      label: Operating System
+      description: Which operating system are you using?
+      multiple: true
+      options:
+        - Windows
+        - MacOS
+        - Other
+  - type: input
+    id: version
+    attributes:
+      label: NHS App Frontend version
+      description: 'Which version(s) of the NHS App Frontend are you using? This can be found in your package.json file.'
+      placeholder: e.g. v1.2.0
+  - type: input
+    id: technology
+    attributes:
+      label: Assistive technology
+      description: 'Did you experience the issue using an assistive technology?'
+      placeholder: e.g. JAWS, MacOS VoiceOver
+  - type: textarea
+    id: description
+    attributes:
+      label: Description
+      description: "Tell us more about the accessibility issue that you're experiencing"
+      placeholder: What did you expect to happen? What happened instead?
+    validations:
+      required: true
+  - type: input
+    id: wcag
+    attributes:
+      label: WCAG 2.2 Violation
+      description: 'Does this violate a specific WCAG 2.2 checkpoint?'
+      placeholder: e.g Success Criterion 1.4.3 Contrast (Minimum)
+  - type: textarea
+    id: reproduce
+    attributes:
+      label: Steps to reproduce
+      description: 'How do we reproduce the accessibility issue you described?'
diff --git a/.github/ISSUE_TEMPLATE/bug_report.md b/.github/ISSUE_TEMPLATE/bug_report.md
deleted file mode 100644
index 99af7e5..0000000
--- a/.github/ISSUE_TEMPLATE/bug_report.md
+++ /dev/null
@@ -1,33 +0,0 @@
----
-name: "🐛 Bug report"
-about: Report a bug or regression
-title: ""
-labels: "\U0001F41B bug, awaiting triage"
-assignees: ""
----
-
-<!--
-    Please fill in as much of the template below as you’re able to. If you're unsure whether the issue already exists or how to fill in the template, open an issue anyway. Our team will help you to complete the rest.
-
-    Your issue might already exist. If so, add a comment to the existing issue instead of creating a new one. You can find existing issues here: https://github.com/nhsuk/nhsapp-frontend/issues
--->
-
-## Description of the issue
-
-<!-- A clear and concise summary of what the bug is. -->
-
-## Steps to reproduce the issue
-
-<!-- How can we reproduce this issue? If you think it will be helpful, please provide a small code snippet and/or screenshots. -->
-
-## Actual vs expected behaviour
-
-<!-- What is happening vs what would you expect to happen instead? -->
-
-## Environment (where applicable)
-
-<!-- Details of your operating system, browser and the version of NHSApp Frontend you’re using may help us to reproduce your issue. -->
-
-- Operating system:
-- Browser:
-- Browser version:
diff --git a/.github/ISSUE_TEMPLATE/bug_report.yaml b/.github/ISSUE_TEMPLATE/bug_report.yaml
new file mode 100644
index 0000000..80fe9a5
--- /dev/null
+++ b/.github/ISSUE_TEMPLATE/bug_report.yaml
@@ -0,0 +1,48 @@
+name: 🐛 Bug report
+description: Something not working as expected? This is the place to report your issue.
+title: '[Bug]: '
+labels: 'type: bug, awaiting triage'
+body:
+  - type: markdown
+    attributes:
+      value: '## Welcome!'
+  - type: markdown
+    attributes:
+      value: Thanks for taking the time to fill out this bug report.
+  - type: markdown
+    attributes:
+      value: Please fill in as much of the template below as you're able to. If you're unsure whether the issue already exists or how to fill in the template, open an issue anyway. Our team will help you to complete the rest.
+  - type: markdown
+    attributes:
+      value: Your issue might already exist. If so, add a comment to the existing issue instead of creating a new one. You can [find existing issues here](https://github.com/nhsuk/nhsapp-frontend/issues).
+  - type: dropdown
+    id: browser
+    attributes:
+      label: Browser
+      description: Which browser(s) are you experiencing the issue?
+      multiple: true
+      options:
+        - Chrome
+        - Safari
+        - Firefox
+        - Edge
+  - type: input
+    id: version
+    attributes:
+      label: NHS App Frontend version
+      description: 'Which version(s) of the NHS App Frontend are you using? This can be found in your package.json file.'
+      placeholder: e.g. v1.2.0
+  - type: textarea
+    id: description
+    attributes:
+      label: Description
+      description: "Tell us more about the problem that you're running into"
+      placeholder: What did you see? What did you expect to see?
+    validations:
+      required: true
+  - type: textarea
+    id: reproduce
+    attributes:
+      label: Steps to reproduce
+      description: 'How do we reproduce the error you described using the
+        reproduction/example link above?'
diff --git a/.github/ISSUE_TEMPLATE/config.yml b/.github/ISSUE_TEMPLATE/config.yml
new file mode 100644
index 0000000..66eb6e0
--- /dev/null
+++ b/.github/ISSUE_TEMPLATE/config.yml
@@ -0,0 +1,5 @@
+blank_issues_enabled: true
+contact_links:
+  - name: Get in touch another way
+    url: https://design-system.nhsapp.service.nhs.uk/help-and-feedback/
+    about: Find out how to get in touch via email or Slack.
diff --git a/.github/ISSUE_TEMPLATE/design_defect.yaml b/.github/ISSUE_TEMPLATE/design_defect.yaml
new file mode 100644
index 0000000..599a613
--- /dev/null
+++ b/.github/ISSUE_TEMPLATE/design_defect.yaml
@@ -0,0 +1,54 @@
+name: 🎨 Design defect
+description: Report a visual design issue
+title: '[Bug]: '
+labels: 'type: bug, awaiting triage'
+body:
+  - type: markdown
+    attributes:
+      value: '## Welcome!'
+  - type: markdown
+    attributes:
+      value: Thanks for taking the time to fill out the details below for this design defect.
+  - type: markdown
+    attributes:
+      value: Please fill in as much of the template below as you're able to. If you're unsure whether the issue already exists or how to fill in the template, open an issue anyway. Our team will help you to complete the rest.
+  - type: markdown
+    attributes:
+      value: Your issue might already exist. If so, add a comment to the existing issue instead of creating a new one. You can [find existing issues here](https://github.com/nhsuk/nhsapp-frontend/issues).
+  - type: dropdown
+    id: browser
+    attributes:
+      label: Browser
+      description: Which browser(s) are you experiencing the issue?
+      multiple: true
+      options:
+        - Chrome
+        - Safari
+        - Firefox
+        - Edge
+  - type: input
+    id: version
+    attributes:
+      label: NHS App Frontend version
+      description: 'Which version(s) of the NHS App Frontend are you using? This can be found in your package.json file.'
+      placeholder: e.g. v1.2.0
+  - type: textarea
+    id: description
+    attributes:
+      label: Description
+      description: "Tell us more about the problem that you're running into"
+      placeholder: What did you see? What did you expect to see?
+    validations:
+      required: true
+  - type: textarea
+    id: example-url
+    attributes:
+      label: Screenshots
+      description: 'Provide screenshots of the problem'
+    validations:
+      required: true
+  - type: textarea
+    id: reproduce
+    attributes:
+      label: Steps to reproduce
+      description: 'How do we reproduce the problem displayed in the screenshots above?'
diff --git a/.github/ISSUE_TEMPLATE/documentation.yaml b/.github/ISSUE_TEMPLATE/documentation.yaml
new file mode 100644
index 0000000..7f133e5
--- /dev/null
+++ b/.github/ISSUE_TEMPLATE/documentation.yaml
@@ -0,0 +1,34 @@
+name: 📖 Documentation
+description: Add new documentation, or report missing, incorrect or unclear documentation
+title: '[Documentation]: '
+labels: 'type: documentation, awaiting triage'
+body:
+  - type: markdown
+    attributes:
+      value: '## Welcome!'
+  - type: markdown
+    attributes:
+      value: Thanks for taking the time to fill out the details below for documentation.
+  - type: markdown
+    attributes:
+      value: Please fill in as much of the template below as you're able to. If you're unsure whether the issue already exists or how to fill in the template, open an issue anyway. Our team will help you to complete the rest.
+  - type: markdown
+    attributes:
+      value: Your issue might already exist. If so, add a comment to the existing issue instead of creating a new one. You can [find existing issues here](https://github.com/nhsuk/nhsapp-frontend/issues).
+  - type: textarea
+    id: description
+    attributes:
+      label: Description
+      description: 'Tell us more about the proposal or problem.'
+    validations:
+      required: true
+  - type: textarea
+    id: example-url
+    attributes:
+      label: Related documentation
+      description: 'Does this issue refer to a gap or mistake in some existing documentation? Provide a link if possible.'
+  - type: textarea
+    id: evidence
+    attributes:
+      label: Evidence (where applicable)
+      description: 'Please provide any relevant user research or evidence to support this change.'
diff --git a/.github/ISSUE_TEMPLATE/new_component_or_pattern.md b/.github/ISSUE_TEMPLATE/new_component_or_pattern.md
deleted file mode 100644
index 3f7f98c..0000000
--- a/.github/ISSUE_TEMPLATE/new_component_or_pattern.md
+++ /dev/null
@@ -1,26 +0,0 @@
----
-name: '🆕 New component or pattern'
-about: Tell us about new component or pattern being used on the NHS App
-title: ""
-assignees: ""
----
-
-## What
-
-<!--
-Briefly describe the thing.
-- where is it being used?
-- add a screenshot
--->
-
-## Other information
-
-<!--
-If you can, include these:
-- links to any discussions in the NHS or GOV.UK community backlogs
-- links to any examples
-- research or design thinking
-- screenshots (ideally tested examples)
-- any user research insight
-- code
--->
diff --git a/.github/ISSUE_TEMPLATE/new_feature.yaml b/.github/ISSUE_TEMPLATE/new_feature.yaml
new file mode 100644
index 0000000..8fa51c4
--- /dev/null
+++ b/.github/ISSUE_TEMPLATE/new_feature.yaml
@@ -0,0 +1,44 @@
+name: ✨ Feature request
+description: Suggest a new feature or idea
+title: '[Feature request]: '
+labels: 'type: feature request, awaiting triage'
+body:
+  - type: markdown
+    attributes:
+      value: '## Welcome!'
+  - type: markdown
+    attributes:
+      value: Thanks for taking the time to fill out the details below for this new feature or idea.
+  - type: markdown
+    attributes:
+      value: Please fill in as much of the template below as you're able to. If you're unsure whether the issue already exists or how to fill in the template, open an issue anyway. Our team will help you to complete the rest.
+  - type: markdown
+    attributes:
+      value: Your issue might already exist. If so, add a comment to the existing issue instead of creating a new one. You can [find existing issues here](https://github.com/nhsuk/nhsapp-frontend/issues).
+  - type: textarea
+    id: description
+    attributes:
+      label: Description
+      description: 'Briefly describe the thing.'
+    validations:
+      required: true
+  - type: textarea
+    id: related
+    attributes:
+      label: Related component
+      description: 'Does this feature relate to an existing component?'
+  - type: textarea
+    id: context
+    attributes:
+      label: Context
+      description: 'What are you trying to do? Is this something you think should behave differently, or something that you currently cannot do? Is this related to an existing issue/bug?'
+  - type: textarea
+    id: Alternatives
+    attributes:
+      label: Alternatives
+      description: 'Are you currently using a workaround / alternative solution instead?'
+  - type: textarea
+    id: additional
+    attributes:
+      label: Additional information (if applicable)
+      description: "What evidence do you have that this meets the needs of users? It's useful for us to know of any user research/testing you've done with this feature."
diff --git a/docs/_includes/layouts/base.njk b/docs/_includes/layouts/base.njk
index c91e92e..765dfb1 100644
--- a/docs/_includes/layouts/base.njk
+++ b/docs/_includes/layouts/base.njk
@@ -28,9 +28,14 @@
 
       {% block header %}
         {{ header({
+        "service": {
+            "name": "App design resources"
+          },
           "showNav": "false",
           "showSearch": "false",
-          "homeHref": baseUrl
+          "homeHref": baseUrl,
+          "classes": "app-header",
+          "ariaLabel": "NHS App design resources homepage"
         }) }}
       {% endblock %}
 
@@ -47,7 +52,21 @@
         </div>
       {% endblock container %}
 
-      {% block footer %}{% endblock %}
+      {% block footer %}
+
+      {{ footer({
+        "links": [
+          {
+            "URL": "/help-and-feedback/",
+            "label": "Help and feedback"
+          },
+          {
+            "URL": "https://github.com/nhsuk/nhsapp-frontend",
+            "label": "Code on Github"
+          }
+        ]
+      })}}
+      {% endblock %}
 
     {% endblock body %}
   </body>
diff --git a/docs/_includes/layouts/partials/feedback-section.njk b/docs/_includes/layouts/partials/feedback-section.njk
index adc8a37..7fb21b0 100644
--- a/docs/_includes/layouts/partials/feedback-section.njk
+++ b/docs/_includes/layouts/partials/feedback-section.njk
@@ -1,8 +1,4 @@
 <h2>Help improve this component</h2>
 <p>If you have used or researched this component, please let us know what you found so we can make it better for everyone.</p> 
 <p><a href="https://github.com/nhsuk/nhsapp-frontend/issues/{{ backlogID }}">Discuss '{{ title }}'  on GitHub</a> where you can share anything you think might be useful.</p>
-<p>Or you can use:</p>
-<ul>
-  <li><a href="https://nhsdigitalcorporate.enterprise.slack.com/archives/C06GY1LRP19">#forum-app-design-system on NHS England Slack</a></li>
-  <li><a href="https://nhs-service-manual.slack.com/archives/CDJ29AQCD">#general on NHS service manual Slack</a></li>
-</ul>
\ No newline at end of file
+<p>You can also <a href="/help-and-feedback/">share feedback with us on Slack</a>.</p>
\ No newline at end of file
diff --git a/docs/_includes/layouts/plain.njk b/docs/_includes/layouts/plain.njk
new file mode 100644
index 0000000..873060c
--- /dev/null
+++ b/docs/_includes/layouts/plain.njk
@@ -0,0 +1,26 @@
+{% extends "./base.njk" %}
+
+{% block breadcrumb %}
+  {{ breadcrumb({
+    href: "/",
+    text: "Home"
+  }) }}
+{% endblock %}
+
+{% block container %}
+  <div class="nhsuk-width-container">
+    <div class="nhsuk-grid-row">
+      <div class="nhsuk-grid-column-two-thirds">
+        <main role="main" id="maincontent" class="nhsuk-main-wrapper app-content">
+          {% block main %}
+            <h1 class="nhsuk-heading-xl nhsuk-u-margin-bottom-5">
+              {{ title }}
+            </h1>
+            <p class="nhsuk-body-l nhsuk-u-margin-bottom-7">{{ description }}</p>
+            {{ content | safe }}
+          {% endblock %}
+        </main>
+      </div>
+    </div>
+  </div>
+{% endblock %}
\ No newline at end of file
diff --git a/docs/assets/css/app.scss b/docs/assets/css/app.scss
index aa53794..c652fd8 100644
--- a/docs/assets/css/app.scss
+++ b/docs/assets/css/app.scss
@@ -5,6 +5,7 @@
 @import "node_modules/nhsuk-frontend/packages/components/breadcrumb/breadcrumb";
 @import "node_modules/nhsuk-frontend/packages/components/skip-link/skip-link";
 @import "node_modules/nhsuk-frontend/packages/components/header/header";
+@import "node_modules/nhsuk-frontend/packages/components/footer/footer";
 @import "node_modules/nhsuk-frontend/packages/components/hero/hero";
 @import "node_modules/nhsuk-frontend/packages/components/tabs/tabs";
 @import "node_modules/nhsuk-frontend/packages/components/summary-list/summary-list";
@@ -16,6 +17,8 @@
 @import "src/all";
 
 // Import all styles specific for the design system docs
+@import "docs/assets/css/components/header";
+@import "docs/assets/css/components/hero";
 @import "docs/assets/css/components/side-navigation";
 @import "docs/assets/css/tabs";
 @import "docs/assets/css/content";
diff --git a/docs/assets/css/components/_header.scss b/docs/assets/css/components/_header.scss
new file mode 100644
index 0000000..25bfbba
--- /dev/null
+++ b/docs/assets/css/components/_header.scss
@@ -0,0 +1,38 @@
+// Header overrides
+// Fixes service name placement and style
+.app-header {
+  .nhsuk-header__link--service {
+    align-items: center;
+    color: $color_nhsuk-white;
+    display: flex;
+    gap: nhsuk-spacing(3);
+    text-decoration: none;
+    width: 100%;
+
+    &:hover {
+      .nhsuk-header__service-name {
+        text-decoration: underline;
+      }
+    }
+
+    &:focus {
+      background-color: $nhsuk-focus-color;
+      box-shadow:
+        0 0 0 4px $nhsuk-focus-color,
+        0 4px 0 4px $nhsuk-focus-text-color;
+
+      .nhsuk-header__service-name {
+        text-decoration: none;
+      }
+    }
+
+    .nhsuk-logo {
+      flex-shrink: 0;
+    }
+
+    .nhsuk-header__service-name {
+      @include nhsuk-font($size: 19);
+      padding-left: 0;
+    }
+  }
+}
diff --git a/docs/assets/css/components/_hero.scss b/docs/assets/css/components/_hero.scss
new file mode 100644
index 0000000..1d56ebe
--- /dev/null
+++ b/docs/assets/css/components/_hero.scss
@@ -0,0 +1,10 @@
+// Hero overrides
+// Reduces spacing on mobile screens
+.app-hero {
+  .nhsuk-hero__wrapper {
+    @include mq($until: tablet) {
+      padding-bottom: nhsuk-spacing(5);
+      padding-top: nhsuk-spacing(5);
+    }
+  }
+}
diff --git a/docs/components/index.md b/docs/components/index.md
index b92284a..a074b9e 100644
--- a/docs/components/index.md
+++ b/docs/components/index.md
@@ -21,8 +21,4 @@ Find out how to [set up the prototype kit](https://nhsuk-prototype-kit.azurewebs
 
 ## Get help
 
-If you have a question, idea or suggestion, you can use the:
-
-- [#forum-app-design-system on NHS England Slack](https://nhsdigitalcorporate.enterprise.slack.com/archives/C06GY1LRP19)
-- [#general on NHS service manual Slack](https://nhs-service-manual.slack.com/archives/CDJ29AQCD)
-- [NHS App Frontend GitHub issues](https://github.com/nhsuk/nhsapp-frontend/issues/new/choose)
+The NHS App Design System Team provides support for users of the NHS App design resources. [Contact us](/help-and-feedback/) to ask for help.
diff --git a/docs/help-and-feedback.md b/docs/help-and-feedback.md
new file mode 100644
index 0000000..83f2363
--- /dev/null
+++ b/docs/help-and-feedback.md
@@ -0,0 +1,11 @@
+---
+layout: layouts/plain.njk
+title: Help and feedback
+description: The NHS App Design System Team provides support for users of the NHS App design resources. Contact us to ask for help or to provide feedback.
+---
+
+## Contact us on Slack
+
+The team monitors the following channels and provides support. If you have any questions or feedback, get in touch via Slack.
+
+- [#forum-app-design-system](https://nhsdigitalcorporate.enterprise.slack.com/archives/C06GY1LRP19)
diff --git a/docs/index.njk b/docs/index.njk
index 6d4b259..688aab7 100644
--- a/docs/index.njk
+++ b/docs/index.njk
@@ -11,7 +11,8 @@
 
   {{ hero({
     "heading": "NHS App design resources",
-    "text": "Design, build, and deliver accessible and consistent services for the NHS App"
+    "text": "Design, build, and deliver accessible and consistent services for the NHS App",
+    "classes": "app-hero"
   }) }}
 {% endblock %}
 
@@ -19,7 +20,7 @@
   <div class="nhsuk-grid-row">
     <div class="nhsuk-grid-column-full">
 
-      <h2 class="nhsuk-heading-s">Styles, components and patterns</h2>
+      <h2 class="nhsuk-heading-l">Styles, components and patterns</h2>
 
       {{ nhsappCardGroup({
         stacked: true,
@@ -35,7 +36,7 @@
         ]
       }) }}
 
-      <h2 class="nhsuk-heading-s">Content design</h2>
+      <h2 class="nhsuk-heading-l">Content design</h2>
 
       {{ nhsappCardGroup({
         stacked: true,
@@ -47,7 +48,7 @@
         ]
       }) }}
 
-      <h2 class="nhsuk-heading-s">Accessibility</h2>
+      <h2 class="nhsuk-heading-l">Accessibility</h2>
 
       {{ nhsappCardGroup({
         stacked: true,
@@ -65,13 +66,12 @@
 
       <hr>
 
-      <h2 class="nhsuk-heading-s">Get help</h2>
-      <p>If you have a question, idea or suggestion, you can use the:</p>
-      <ul>
-        <li><a href="https://nhsdigitalcorporate.enterprise.slack.com/archives/C06GY1LRP19">#forum-app-design-system on NHS England Slack</a></li>
-        <li><a href="https://nhs-service-manual.slack.com/archives/CDJ29AQCD">#general on NHS service manual Slack</a></li>
-        <li><a href="https://github.com/nhsuk/nhsapp-frontend/issues/new/choose">NHS App Frontend GitHub issues</a></li>
-      </ul>
+      <div class="nhsuk-u-reading-width">
+
+        <h2 class="nhsuk-heading-l">Get help</h2>
+        <p>The NHS App Design System Team provides support for users of the NHS App design resources. <a href="/help-and-feedback/">Contact us</a> to ask for help.
+
+      </div>
 
     </div>
   </div>