@moduk/frontend 1.2.0 → 1.3.0

package/nunjucks/moduk/components/accordion/__examples__/with-expanded-items.njk

@@ -0,0 +1,41 @@
+{% from "moduk/components/accordion/macro.njk" import modukAccordion -%}
+
+{{ modukAccordion({
+  id: "accordion-default",
+  items: [
+    {
+      heading: {
+        text: "Writing well for the web"
+      },
+      content: {
+        html: "<p class='govuk-body'>This is the content for Writing well for the web.</p>"
+      },
+      expanded: true
+    },
+    {
+      heading: {
+        text: "Writing well for specialists"
+      },
+      content: {
+        html: "<p class='govuk-body'>This is the content for Writing well for specialists.</p>"
+      },
+      expanded: true
+    },
+    {
+      heading: {
+        text: "Know your audience"
+      },
+      content: {
+        html: "<p class='govuk-body'>This is the content for Know your audience.</p>"
+      }
+    },
+    {
+      heading: {
+        text: "How people read"
+      },
+      content: {
+        html: "<p class='govuk-body'>This is the content for How people read.</p>"
+      }
+    }
+  ]
+}) -}}

package/nunjucks/moduk/components/accordion/__examples__/with-h3-headings.njk

@@ -0,0 +1,40 @@
+{% from "moduk/components/accordion/macro.njk" import modukAccordion -%}
+
+{{ modukAccordion({
+  id: "accordion-default",
+  headingLevel: 3,
+  items: [
+    {
+      heading: {
+        text: "Writing well for the web"
+      },
+      content: {
+        text: "This is the content for Writing well for the web."
+      }
+    },
+    {
+      heading: {
+        text: "Writing well for specialists"
+      },
+      content: {
+        text: "This is the content for Writing well for specialists."
+      }
+    },
+    {
+      heading: {
+        text: "Know your audience"
+      },
+      content: {
+        text: "This is the content for Know your audience."
+      }
+    },
+    {
+      heading: {
+        text: "How people read"
+      },
+      content: {
+        text: "This is the content for How people read."
+      }
+    }
+  ]
+}) -}}

package/nunjucks/moduk/components/accordion/__examples__/with-remember-expanded-off.njk

@@ -0,0 +1,40 @@
+{% from "moduk/components/accordion/macro.njk" import modukAccordion -%}
+
+{{ modukAccordion({
+  id: "accordion-with-remember-expanded-off",
+  rememberExpanded: false,
+  items: [
+    {
+      heading: {
+        text: "Writing well for the web"
+      },
+      content: {
+        html: "<p class='govuk-body'>This is the content for Writing well for the web.</p>"
+      }
+    },
+    {
+      heading: {
+        text: "Writing well for specialists"
+      },
+      content: {
+        html: "<p class='govuk-body'>This is the content for Writing well for specialists.</p>"
+      }
+    },
+    {
+      heading: {
+        text: "Know your audience"
+      },
+      content: {
+        html: "<p class='govuk-body'>This is the content for Know your audience.</p>"
+      }
+    },
+    {
+      heading: {
+        text: "How people read"
+      },
+      content: {
+        html: "<p class='govuk-body'>This is the content for How people read.</p>"
+      }
+    }
+  ]
+}) -}}

package/nunjucks/moduk/components/accordion/__examples__/with-summary-lines.njk

@@ -0,0 +1,122 @@
+{% from "moduk/components/accordion/macro.njk" import modukAccordion -%}
+
+{{ modukAccordion({
+  id: "accordion-with-summary-sections",
+  items: [
+    {
+      heading: {
+        text: "Understanding agile project management"
+      },
+      summary: {
+        text: "Introductions, methods, core features."
+      },
+      content: {
+        html:
+        '<ul class="govuk-list">
+            <li>
+              <a class="govuk-link" href="#">Agile and government services: an introduction</a>
+            </li>
+            <li>
+              <a class="govuk-link" href="#">Agile methods: an introduction</a>
+            </li>
+            <li>
+              <a class="govuk-link" href="#">Core principles of agile</a>
+            </li>
+        </ul>'
+      }
+    },
+    {
+      heading: {
+        text: "Working with agile methods"
+      },
+      summary: {
+        text: "Workspaces, tools and techniques, user stories, planning."
+      },
+      content: {
+        html:
+        '<ul class="govuk-list">
+            <li>
+              <a class="govuk-link" href="#">Creating an agile working environment</a>
+            </li>
+            <li>
+              <a class="govuk-link" href="#">Agile tools and techniques</a>
+            </li>
+            <li>
+              <a class="govuk-link" href="#">Set up a team wall</a>
+            </li>
+            <li>
+              <a class="govuk-link" href="#">Writing user stories</a>
+            </li>
+            <li>
+              <a class="govuk-link" href="#">Planning in agile</a>
+            </li>
+            <li>
+              <a class="govuk-link" href="#">Deciding on priorities</a>
+            </li>
+            <li>
+              <a class="govuk-link" href="#">Developing a roadmap</a>
+            </li>
+        </ul>'
+      }
+    },
+    {
+      heading: {
+        text: "Governing agile services"
+      },
+      summary: {
+        text: "Principles, measuring progress, spending money."
+      },
+      content: {
+        html:
+        '<ul class="govuk-list">
+            <li>
+              <a class="govuk-link" href="#">Governance principles for agile service delivery</a>
+            </li>
+            <li>
+              <a class="govuk-link" href="#">Measuring and reporting progress</a>
+            </li>
+            <li>
+              <a class="govuk-link" href="#">Spend controls: check if you need approval to spend money on a service</a>
+            </li>
+            <li>
+              <a class="govuk-link" href="#">Spend controls: apply for approval to spend money on a service</a>
+            </li>
+            <li>
+              <a class="govuk-link" href="#">Spend controls: the new pipeline process</a>
+            </li>
+            <li>
+              <a class="govuk-link" href="#">Working across organisational boundaries</a>
+            </li>
+        </ul>'
+      }
+    },
+    {
+      heading: {
+        text: "Phases of an agile project"
+      },
+      summary: {
+        text: "Discovery, alpha, beta, live and retirement."
+      },
+      content: {
+        html:
+        '<ul class="govuk-list">
+            <li>
+              <a class="govuk-link" href="#">How the discovery phase works</a>
+            </li>
+            <li>
+              <a class="govuk-link" href="#">How the alpha phase works</a>
+            </li>
+            <li>
+              <a class="govuk-link" href="#">How the beta phase works</a>
+            </li>
+            <li>
+              <a class="govuk-link" href="#">How the live phase works</a>
+            </li>
+            <li>
+              <a class="govuk-link" href="#">Retiring your service</a>
+            </li>
+        </ul>'
+      }
+    }
+  ]
+}) -}}

package/nunjucks/moduk/components/accordion/__examples__/with-text-items.njk

@@ -0,0 +1,41 @@
+{% from "moduk/components/accordion/macro.njk" import modukAccordion -%}
+
+{{ modukAccordion({
+  id: "accordion-default",
+  items: [
+    {
+      heading: {
+        text: "Writing well for the web"
+      },
+      content: {
+        text: "This is the content for Writing well for the web."
+      },
+      expanded: true
+    },
+    {
+      heading: {
+        text: "Writing well for specialists"
+      },
+      content: {
+        text: "This is the content for Writing well for specialists."
+      },
+      expanded: true
+    },
+    {
+      heading: {
+        text: "Know your audience"
+      },
+      content: {
+        text: "This is the content for Know your audience."
+      }
+    },
+    {
+      heading: {
+        text: "How people read"
+      },
+      content: {
+        text: "This is the content for How people read."
+      }
+    }
+  ]
+}) -}}

package/nunjucks/moduk/components/accordion/macro.njk

@@ -0,0 +1,5 @@
+{% from "govuk/components/accordion/macro.njk" import govukAccordion %}
+
+{% macro modukAccordion(params) -%}
+  {{ govukAccordion(params) }}
+{%- endmacro %}

package/nunjucks/moduk/components/back-link/__examples__/default.njk

@@ -0,0 +1,6 @@
+{% from "moduk/components/back-link/macro.njk" import modukBackLink -%}
+
+{{ modukBackLink({
+  text: "Back",
+  href: "#"
+}) -}}

package/nunjucks/moduk/components/back-link/macro.njk

@@ -0,0 +1,5 @@
+{% from "govuk/components/back-link/macro.njk" import govukBackLink %}
+
+{% macro modukBackLink(params) -%}
+  {{ govukBackLink(params) }}
+{%- endmacro %}

package/nunjucks/moduk/components/breadcrumbs/__examples__/default.njk

@@ -0,0 +1,18 @@
+{% from "moduk/components/breadcrumbs/macro.njk" import modukBreadcrumbs -%}
+
+{{ modukBreadcrumbs({
+  items: [
+    {
+      text: "Home",
+      href: "#"
+    },
+    {
+      text: "Components",
+      href: "#"
+    },
+    {
+      text: "Breadcrumbs",
+      href: "#"
+    }
+  ]
+}) -}}

package/nunjucks/moduk/components/breadcrumbs/macro.njk

@@ -0,0 +1,5 @@
+{% from "govuk/components/breadcrumbs/macro.njk" import govukBreadcrumbs %}
+
+{%- macro modukBreadcrumbs(params) -%}
+  {{ govukBreadcrumbs(params) }}
+{%- endmacro %}

package/nunjucks/moduk/components/button/__examples__/default.njk

@@ -0,0 +1,5 @@
+{% from "moduk/components/button/macro.njk" import modukButton -%}
+
+{{ modukButton({
+  text: "Save and continue"
+}) -}}

package/nunjucks/moduk/components/button/__examples__/disabled.njk

@@ -0,0 +1,6 @@
+{% from "moduk/components/button/macro.njk" import modukButton -%}
+
+{{ modukButton({
+  text: "Disabled button",
+  disabled: true
+}) -}}

package/nunjucks/moduk/components/button/__examples__/group-link.njk

@@ -0,0 +1,9 @@
+{% from "moduk/components/button/macro.njk" import modukButton -%}
+
+<div class="govuk-button-group">
+  {{ modukButton({
+    text: "Continue"
+  }) -}}
+
+  <a class="govuk-link" href="#">Cancel</a>
+</div>

package/nunjucks/moduk/components/button/__examples__/grouping.njk

@@ -0,0 +1,12 @@
+{% from "moduk/components/button/macro.njk" import modukButton -%}
+
+<div class="govuk-button-group">
+  {{ modukButton({
+    text: "Save and continue"
+  }) -}}
+
+  {{- modukButton({
+    text: "Save as draft",
+    classes: "govuk-button--secondary"
+  }) -}}
+</div>

package/nunjucks/moduk/components/button/__examples__/prevent-double-click.njk

@@ -0,0 +1,30 @@
+{% from "moduk/components/button/macro.njk" import modukButton -%}
+
+<form id="testForm">
+  {{ modukButton({
+    text: "Confirm and send",
+    preventDoubleClick: true
+  }) }}
+</form>
+
+<div class="govuk-body" data-testid="submitCountDisplay"></div>
+<div class="govuk-body" data-testid="buttonCountDisplay"></div>
+
+<script>
+  var submitCount = 0
+  var buttonCount = 0
+  
+  var submitCountDisplay = document.querySelector('[data-testid="submitCountDisplay"]')
+  var buttonCountDisplay = document.querySelector('[data-testid="buttonCountDisplay"]')
+
+  document.getElementById('testForm').addEventListener('click', function () {
+    buttonCount += 1
+    buttonCountDisplay.innerText = 'Button click count ' + buttonCount;
+  })
+  
+  document.getElementById('testForm').addEventListener('submit', function (event) {
+    event.preventDefault()
+    submitCount += 1
+    submitCountDisplay.innerText = 'Form submit count ' + submitCount;
+  })
+</script>

package/nunjucks/moduk/components/button/__examples__/secondary.njk

@@ -0,0 +1,6 @@
+{% from "moduk/components/button/macro.njk" import modukButton -%}
+
+{{ modukButton({
+  text: "Find address",
+  classes: "govuk-button--secondary"
+}) -}}

package/nunjucks/moduk/components/button/__examples__/start.njk

@@ -0,0 +1,7 @@
+{% from "moduk/components/button/macro.njk" import modukButton -%}
+
+{{ modukButton({
+  text: "Start now",
+  href: "#",
+  isStartButton: true
+}) -}}

package/nunjucks/moduk/components/button/__examples__/warning.njk

@@ -0,0 +1,6 @@
+{% from "moduk/components/button/macro.njk" import modukButton -%}
+
+{{ modukButton({
+  text: "Delete account",
+  classes: "govuk-button--warning"
+}) -}}

package/nunjucks/moduk/components/button/macro.njk

@@ -0,0 +1,5 @@
+{% from "govuk/components/button/macro.njk" import govukButton %}
+
+{% macro modukButton(params) -%}
+  {{ govukButton(params) }}
+{%- endmacro %}

package/nunjucks/moduk/components/character-count/__examples__/default.njk

@@ -0,0 +1,15 @@
+{% from "moduk/components/character-count/macro.njk" import modukCharacterCount -%}
+
+{{ modukCharacterCount({
+  name: "with-hint",
+  id: "with-hint",
+  maxlength: 200,
+  label: {
+    text: "Can you provide more detail?",
+    classes: "govuk-label--l",
+    isPageHeading: true
+  },
+  hint: {
+    text: "Do not include personal information like your service number."
+  }
+}) -}}

package/nunjucks/moduk/components/character-count/__examples__/not-as-page-heading.njk

@@ -0,0 +1,10 @@
+{% from "moduk/components/character-count/macro.njk" import modukCharacterCount -%}
+
+{{ modukCharacterCount({
+  name: "not-as-page-heading",
+  id: "not-as-page-heading",
+  maxlength: 200,
+  label: {
+    text: "Describe the nature of your event"
+  }
+}) -}}

package/nunjucks/moduk/components/character-count/__examples__/with-error-message.njk

@@ -0,0 +1,19 @@
+{% from "moduk/components/character-count/macro.njk" import modukCharacterCount -%}
+
+{{ modukCharacterCount({
+  id: "exceeding-characters",
+  name: "exceeding",
+  maxlength: 200,
+  value: "I would like to request my service record and have a question about what proof of address is acceptable. The guidance doesn’t say if a digital bank statement will be accepted. Can someone please confirm if",
+  label: {
+    text: "Can you provide more detail?",
+    classes: "govuk-label--l",
+    isPageHeading: true
+  },
+  hint: {
+    text: "Do not include personal information like your service number."
+  },
+  errorMessage: {
+    text: "Detail must be 200 characters or less"
+  }
+}) -}}

package/nunjucks/moduk/components/character-count/__examples__/with-threshold.njk

@@ -0,0 +1,14 @@
+{% from "moduk/components/character-count/macro.njk" import modukCharacterCount -%}
+
+{{ modukCharacterCount({
+  name: "threshold",
+  id: "threshold",
+  maxlength: 112,
+  threshold: 75,
+  value: "Type another letter into this field after this message to see the threshold feature",
+  label: {
+    text: "Can you provide more detail?",
+    classes: "govuk-label--l",
+    isPageHeading: true
+  }
+}) -}}

package/nunjucks/moduk/components/character-count/__examples__/word-count.njk

@@ -0,0 +1,12 @@
+{% from "moduk/components/character-count/macro.njk" import modukCharacterCount -%}
+
+{{ modukCharacterCount({
+  name: "word-count",
+  id: "word-count",
+  maxwords: 150,
+  label: {
+    text: "Enter a job description",
+    classes: "govuk-label--l",
+    isPageHeading: true
+  }
+}) -}}

package/nunjucks/moduk/components/character-count/macro.njk

@@ -0,0 +1,5 @@
+{% from "govuk/components/character-count/macro.njk" import govukCharacterCount %}
+
+{% macro modukCharacterCount(params) -%}
+  {{ govukCharacterCount(params) }}
+{%- endmacro %}

package/nunjucks/moduk/components/checkboxes/__examples__/default.njk

@@ -0,0 +1,37 @@
+{% from "moduk/components/checkboxes/macro.njk" import modukCheckboxes -%}
+
+{{ modukCheckboxes({
+  name: "incident-default",
+  fieldset: {
+    legend: {
+      text: "Who did you report the incident to?",
+      isPageHeading: true,
+      classes: "govuk-fieldset__legend--l"
+    }
+  },
+  hint: {
+    text: "Select all that apply."
+  },
+  items: [
+    {
+      value: "unit-medic",
+      text: "Unit medic"
+    },
+    {
+      value: "hospital",
+      text: "Hospital"
+    },
+    {
+      value: "chain-of-command",
+      text: "Chain of command"
+    },
+    {
+      value: "colleague",
+      text: "Colleague"
+    },
+    {
+      value: "other-person",
+      text: "Other person"
+    }
+  ]
+}) -}}

package/nunjucks/moduk/components/checkboxes/__examples__/not-as-page-heading.njk

@@ -0,0 +1,35 @@
+{% from "moduk/components/checkboxes/macro.njk" import modukCheckboxes -%}
+
+{{ modukCheckboxes({
+  name: "incident-not-as-page-heading",
+  fieldset: {
+    legend: {
+      text: "Who did you report the incident to?"
+    }
+  },
+  hint: {
+    text: "Select all that apply."
+  },
+  items: [
+    {
+      value: "unit-medic",
+      text: "Unit medic"
+    },
+    {
+      value: "hospital",
+      text: "Hospital"
+    },
+    {
+      value: "chain-of-command",
+      text: "Chain of command"
+    },
+    {
+      value: "colleague",
+      text: "Colleague"
+    },
+    {
+      value: "other-person",
+      text: "Other person"
+    }
+  ]
+}) -}}

package/nunjucks/moduk/components/checkboxes/__examples__/small.njk

@@ -0,0 +1,31 @@
+{% from "moduk/components/checkboxes/macro.njk" import modukCheckboxes -%}
+
+{{ modukCheckboxes({
+  name: "organisation-small",
+  classes: "govuk-checkboxes--small",
+  fieldset: {
+    legend: {
+      text: "Organisation",
+      isPageHeading: true,
+      classes: "govuk-fieldset__legend--m"
+    }
+  },
+  items: [
+    {
+      value: "royal-navy",
+      text: "Royal Navy"
+    },
+    {
+      value: "british-army",
+      text: "British Army"
+    },
+    {
+      value: "royal-air-force",
+      text: "Royal Air Force"
+    },
+    {
+      value: "strategic-command",
+      text: "Strategic Command"
+    }
+  ]
+}) -}}