Merge branch 'main' into fix-details-open

nhsuk · Mar 22, 2023 · a57c040 · a57c040
2 parents f14d28b + ce6b382
commit a57c040
Show file tree

Hide file tree

Showing 409 changed files with 10,653 additions and 13,256 deletions.
diff --git a/.editorconfig b/.editorconfig
@@ -3,10 +3,11 @@ root = true
 
 [*]
 charset = utf-8
-indent_size = 2
 indent_style = space
+end_of_line = lf
 trim_trailing_whitespace = true
 insert_final_newline = true
+max_line_length = 120
 
 [*.md]
 trim_trailing_whitespace = false
diff --git a/.gitattributes b/.gitattributes
@@ -0,0 +1,2 @@
+# Enforce LF line endings
+* text=auto
diff --git a/.prettierignore b/.prettierignore
@@ -0,0 +1,7 @@
+node_modules/*
+dist/*
+tests/backstop/*
+.github/*
+coverage/*
+package-lock.json
+package.json
diff --git a/.prettierrc.js b/.prettierrc.js
@@ -0,0 +1,20 @@
+module.exports = {
+  semi: false,
+  singleQuote: true,
+  trailingComma: 'none',
+  overrides: [
+    {
+      files: '*.md',
+      options: {
+        embeddedLanguageFormatting: 'off',
+        singleQuote: false
+      }
+    },
+    {
+      files: '*.scss',
+      options: {
+        singleQuote: false
+      }
+    }
+  ]
+}
diff --git a/CHANGELOG.md b/CHANGELOG.md
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -10,10 +10,12 @@ If you have any questions please [email us](mailto:[email protected]) or ge
 ## Contributing contents
 
 ### General
+
 - [Code of Conduct](./CODE_OF_CONDUCT.md)
 - [Report a bug or issue](https://github.com/nhsuk/nhsuk-frontend/issues/new?template=BUG_REPORT.md)
 
 ### Contributors
+
 - [Running the application locally](docs/contributing/running-locally.md)
 - [Application architecture](docs/contributing/application-architecture.md)
 - [Coding standards and style guide](docs/contributing/coding-standards.md)

diff --git a/app/components/all.njk b/app/components/all.njk
@@ -3,6 +3,7 @@
 {% from 'components/action-link/macro.njk' import actionLink %}
 {% from 'components/breadcrumb/macro.njk' import breadcrumb %}
 {% from 'components/card/macro.njk' import card %}
+{% from 'components/character-count/macro.njk' import characterCount %}
 {% from 'components/contents-list/macro.njk' import contentsList %}
 {% from 'components/details/macro.njk' import details %}
 {% from 'components/header/macro.njk' import header %}
@@ -24,6 +25,7 @@
 {% from 'components/radios/macro.njk' import radios %}
 {% from 'components/select/macro.njk' import select %}
 {% from 'components/textarea/macro.njk' import textarea %}
+{% from 'components/tabs/macro.njk' import tabs %}
 
 {% extends 'page.njk' %}
 
@@ -701,32 +703,34 @@
     }
   }) }}
 
-  {{ checkboxes({
-    "idPrefix": "nationality",
-    "name": "nationality",
-    "fieldset": {
-      "legend": {
-        "text": "What is your nationality?"
-      }
-    },
-    "hint": {
-      "text": "If you have more than 1 nationality, select all options that are relevant to you."
-    },
-    "items": [
-      {
-        "value": "british",
-        "text": "British"
+  <form>
+    {{ checkboxes({
+      "idPrefix": "nationality",
+      "name": "nationality",
+      "fieldset": {
+        "legend": {
+          "text": "What is your nationality?"
+        }
       },
-      {
-        "value": "irish",
-        "text": "Irish"
+      "hint": {
+        "text": "If you have more than 1 nationality, select all options that are relevant to you."
       },
-      {
-        "value": "other",
-        "text": "citizen of another country"
-      }
-    ]
-  }) }}
+      "items": [
+        {
+          "value": "british",
+          "text": "British"
+        },
+        {
+          "value": "irish",
+          "text": "Irish"
+        },
+        {
+          "value": "other",
+          "text": "citizen of another country"
+        }
+      ]
+    }) }}
+  </form>
 
   {{ radios({
     "idPrefix": "example",
@@ -780,8 +784,20 @@
   }) }}
 
   {{ textarea({
-    "name": "more-detail",
-    "id": "more-detail",
+    "name": "more-detail-textarea",
+    "id": "more-detail-textarea",
+    "label": {
+      "text": "Can you provide more detail?"
+    },
+    "hint": {
+      "text": "Don't include personal or financial information, eg your National Insurance number or credit card details."
+    }
+  }) }}
+
+  {{ characterCount({
+    "name": "more-detail-character-count",
+    "id": "more-detail-character-count",
+    "maxlength": 200,
     "label": {
       "text": "Can you provide more detail?"
     },
@@ -837,6 +853,46 @@
     "text": "Go back"
   }) }}
 
+  {% set tabOneContent %}
+    <h2>Tab one content</h2>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+  {% endset -%}
+
+  {% set tabTwoContent %}
+    <h2>Tab two content</h2>
+    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>
+  {% endset -%}
+
+  {% set tabThreeContent %}
+    <h2>Tab three content</h2>
+    <p>Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
+  {% endset -%}
+
+  {{ tabs({
+    items: [
+      {
+        label: "Tab one",
+        id: "tab-one",
+        panel: {
+          html: tabOneContent
+        }
+      },
+      {
+        label: "Tab two",
+        id: "tab-two",
+        panel: {
+          html: tabTwoContent
+        }
+      },
+      {
+        label: "Tab three",
+        id: "tab-three",
+        panel: {
+          html: tabThreeContent
+        }
+      }
+    ]
+  }) }}
 {% endblock %}
 
 {% block footer %}

diff --git a/app/components/character-count/index.njk b/app/components/character-count/index.njk
@@ -0,0 +1,30 @@
+{% set html_style = 'background-color: #f0f4f5;' %}
+{% set title = 'Character Count - max characters' %}
+{% from 'components/character-count/macro.njk' import characterCount %}
+{% extends 'layout.njk' %}
+
+{% block body %}
+
+  <div class="nhsuk-width-container">
+    <main class="nhsuk-main-wrapper" id="maincontent">
+
+      <div class="nhsuk-grid-row">
+        <div class="nhsuk-grid-column-two-thirds">
+          {{ characterCount({
+            "name": "more-detail",
+            "id": "more-detail",
+            "maxlength": 10,
+            "label": {
+              "text": "Can you provide more detail?"
+            },
+            "hint": {
+              "text": "Don't include personal or financial information, eg your National Insurance number or credit card details."
+            }
+          }) }}
+        </div>
+      </div>
+
+    </main>
+  </div>
+
+{% endblock %}
diff --git a/app/components/character-count/with-default-value-exceeding-limit.njk b/app/components/character-count/with-default-value-exceeding-limit.njk
@@ -0,0 +1,31 @@
+{% set html_style = 'background-color: #f0f4f5;' %}
+{% set title = 'Character Count - with default value exceeding limit' %}
+{% from 'components/character-count/macro.njk' import characterCount %}
+{% extends 'layout.njk' %}
+
+{% block body %}
+
+  <div class="nhsuk-width-container">
+    <main class="nhsuk-main-wrapper" id="maincontent">
+
+      <div class="nhsuk-grid-row">
+        <div class="nhsuk-grid-column-two-thirds">
+          {{ characterCount({
+            "name": "more-detail",
+            "id": "more-detail",
+            "maxlength": 10,
+            "value": "012345678901234567890123456789123",
+            "label": {
+              "text": "Can you provide more detail?"
+            },
+            "hint": {
+              "text": "Don't include personal or financial information, eg your National Insurance number or credit card details."
+            }
+          }) }}
+        </div>
+      </div>
+
+    </main>
+  </div>
+
+{% endblock %}
diff --git a/app/components/character-count/with-default-value.njk b/app/components/character-count/with-default-value.njk
@@ -0,0 +1,31 @@
+{% set html_style = 'background-color: #f0f4f5;' %}
+{% set title = 'Character Count - with default value exceeding limit' %}
+{% from 'components/character-count/macro.njk' import characterCount %}
+{% extends 'layout.njk' %}
+
+{% block body %}
+
+  <div class="nhsuk-width-container">
+    <main class="nhsuk-main-wrapper" id="maincontent">
+
+      <div class="nhsuk-grid-row">
+        <div class="nhsuk-grid-column-two-thirds">
+          {{ characterCount({
+            "name": "more-detail",
+            "id": "more-detail",
+            "maxlength": 70,
+            "value": "123",
+            "label": {
+              "text": "Can you provide more detail?"
+            },
+            "hint": {
+              "text": "Don't include personal or financial information, eg your National Insurance number or credit card details."
+            }
+          }) }}
+        </div>
+      </div>
+
+    </main>
+  </div>
+
+{% endblock %}
diff --git a/app/components/character-count/with-textarea-maxlength-attribute.njk b/app/components/character-count/with-textarea-maxlength-attribute.njk
@@ -0,0 +1,33 @@
+{% set html_style = 'background-color: #f0f4f5;' %}
+{% set title = 'Character Count - with maxlength attribute' %}
+{% from 'components/character-count/macro.njk' import characterCount %}
+{% extends 'layout.njk' %}
+
+{% block body %}
+
+  <div class="nhsuk-width-container">
+    <main class="nhsuk-main-wrapper" id="maincontent">
+
+      <div class="nhsuk-grid-row">
+        <div class="nhsuk-grid-column-two-thirds">
+          {{ characterCount({
+            "name": "more-detail",
+            "id": "more-detail",
+            "maxlength": 11,
+            "attributes": {
+                "maxlength": 11
+            },
+            "label": {
+              "text": "Can you provide more detail?"
+            },
+            "hint": {
+              "text": "Don't include personal or financial information, eg your National Insurance number or credit card details."
+            }
+          }) }}
+        </div>
+      </div>
+
+    </main>
+  </div>
+
+{% endblock %}
diff --git a/app/components/character-count/with-threshold.njk b/app/components/character-count/with-threshold.njk
@@ -0,0 +1,31 @@
+{% set html_style = 'background-color: #f0f4f5;' %}
+{% set title = 'Character Count - with threshold' %}
+{% from 'components/character-count/macro.njk' import characterCount %}
+{% extends 'layout.njk' %}
+
+{% block body %}
+
+  <div class="nhsuk-width-container">
+    <main class="nhsuk-main-wrapper" id="maincontent">
+
+      <div class="nhsuk-grid-row">
+        <div class="nhsuk-grid-column-two-thirds">
+          {{ characterCount({
+            "name": "more-detail",
+            "id": "more-detail",
+            "maxlength": 10,
+            "threshold": 8,
+            "label": {
+              "text": "Can you provide more detail?"
+            },
+            "hint": {
+              "text": "Don't include personal or financial information, eg your National Insurance number or credit card details."
+            }
+          }) }}
+        </div>
+      </div>
+
+    </main>
+  </div>
+
+{% endblock %}
diff --git a/app/components/character-count/with-word-count.njk b/app/components/character-count/with-word-count.njk
@@ -0,0 +1,30 @@
+{% set html_style = 'background-color: #f0f4f5;' %}
+{% set title = 'Character Count - max words' %}
+{% from 'components/character-count/macro.njk' import characterCount %}
+{% extends 'layout.njk' %}
+
+{% block body %}
+
+  <div class="nhsuk-width-container">
+    <main class="nhsuk-main-wrapper" id="maincontent">
+
+      <div class="nhsuk-grid-row">
+        <div class="nhsuk-grid-column-two-thirds">
+          {{ characterCount({
+            "name": "more-detail",
+            "id": "more-detail",
+            "maxwords": 10,
+            "label": {
+              "text": "Can you provide more detail?"
+            },
+            "hint": {
+              "text": "Don't include personal or financial information, eg your National Insurance number or credit card details."
+            }
+          }) }}
+        </div>
+      </div>
+
+    </main>
+  </div>
+
+{% endblock %}