@moduk/frontend 1.2.0 → 1.3.0

package/nunjucks/moduk/components/checkboxes/__examples__/with-conditional-reveal.njk

@@ -0,0 +1,80 @@
+{% from "moduk/components/checkboxes/macro.njk" import modukCheckboxes -%}
+{% from "moduk/components/input/macro.njk" import modukInput -%}
+
+{% set emailHtml %}
+{{- modukInput({
+  id: "contact-by-email",
+  name: "contact-by-email",
+  type: "email",
+  autocomplete: "email",
+  spellcheck: false,
+  classes: "govuk-!-width-one-third",
+  label: {
+    text: "Email address"
+  }
+}) -}}
+{% endset -%}
+
+{% set phoneHtml %}
+{{- modukInput({
+  id: "contact-by-phone",
+  name: "contact-by-phone",
+  type: "tel",
+  autocomplete: "tel",
+  classes: "govuk-!-width-one-third",
+  label: {
+    text: "Phone number"
+  }
+}) -}}
+{% endset -%}
+
+{% set textHtml %}
+{{- modukInput({
+  id: "contact-by-text",
+  name: "contact-by-text",
+  type: "tel",
+  autocomplete: "tel",
+  classes: "govuk-!-width-one-third",
+  label: {
+    text: "Mobile phone number"
+  }
+}) -}}
+{% endset -%}
+
+{{ modukCheckboxes({
+  name: "contact-with-conditional-reveal",
+  fieldset: {
+    legend: {
+      text: "How would you like to be contacted?",
+      isPageHeading: true,
+      classes: "govuk-fieldset__legend--l"
+    }
+  },
+  hint: {
+    text: "Select all options that are relevant to you."
+  },
+  items: [
+    {
+      value: "email",
+      text: "Email",
+      checked: true,
+      conditional: {
+        html: emailHtml
+      }
+    },
+    {
+      value: "phone",
+      text: "Phone",
+      conditional: {
+        html: phoneHtml
+      }
+    },
+    {
+      value: "text message",
+      text: "Text message",
+      conditional: {
+        html: textHtml
+      }
+    }
+  ]
+}) -}}

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

@@ -0,0 +1,40 @@
+{% from "moduk/components/checkboxes/macro.njk" import modukCheckboxes -%}
+
+{{ modukCheckboxes({
+  name: "incident-with-error-message",
+  fieldset: {
+    legend: {
+      text: "Who did you report the incident to?",
+      isPageHeading: true,
+      classes: "govuk-fieldset__legend--l"
+    }
+  },
+  hint: {
+    text: "Select all that apply."
+  },
+  errorMessage: {
+    text: "Select who you reported the incident to"
+  },
+  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__/with-item-hint.njk

@@ -0,0 +1,32 @@
+{% from "moduk/components/checkboxes/macro.njk" import modukCheckboxes -%}
+
+{{ modukCheckboxes({
+  name: "nationality-with-item-hint",
+  fieldset: {
+    legend: {
+      text: "What is your nationality?",
+      isPageHeading: true,
+      classes: "govuk-fieldset__legend--l"
+    }
+  },
+  hint: {
+    text: "If you have dual nationality, select all options that are relevant to you."
+  },
+  items: [
+    {
+      value: "british",
+      text: "British",
+      hint: {
+        text: "including English, Scottish, Welsh and Northern Irish"
+      }
+    },
+    {
+      value: "irish",
+      text: "Irish"
+    },
+    {
+      value: "another-country",
+      text: "Citizen of another country"
+    }
+  ]
+}) -}}

package/nunjucks/moduk/components/checkboxes/__examples__/with-none-option.njk

@@ -0,0 +1,45 @@
+{% from "moduk/components/checkboxes/macro.njk" import modukCheckboxes -%}
+
+{{ modukCheckboxes({
+  name: "incident-with-none-option",
+  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"
+    },
+    {
+      divider: "or"
+    },
+    {
+      value: "none",
+      text: "I did not report the incident",
+      behaviour: "exclusive"
+    }
+  ]
+}) -}}

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

@@ -0,0 +1,5 @@
+{% from "govuk/components/checkboxes/macro.njk" import govukCheckboxes %}
+
+{% macro modukCheckboxes(params) -%}
+  {{ govukCheckboxes(params) }}
+{%- endmacro %}

package/nunjucks/moduk/components/cookie-banner/__examples__/accepted.njk

@@ -0,0 +1,47 @@
+{%- from "moduk/components/cookie-banner/macro.njk" import modukCookieBanner -%}
+
+{% set html %}
+  <p class="govuk-body">We use some essential cookies to make this service work.</p>
+  <p class="govuk-body">We’d also like to use analytics cookies so we can understand how you use the service and make improvements.</p>
+{% endset -%}
+
+{%- set acceptHtml %}
+  <p class="govuk-body">You’ve accepted analytics cookies. You can <a class="govuk-link" href="#">change your cookie settings</a> at any time.</p>
+{% endset -%}
+
+{{ modukCookieBanner({
+  ariaLabel: "Cookies on the Defence Service Manual",
+  messages: [
+    {
+      headingText: "Cookies on the Defence Service Manual",
+      html: html,
+      hidden: true,
+      actions: [
+        {
+          text: "Accept analytics cookies",
+          type: "button",
+          name: "cookies",
+          value: "accept"
+        },
+        {
+          text: "Reject analytics cookies",
+          type: "button",
+          name: "cookies",
+          value: "reject"
+        },
+        {
+          text: "View cookies",
+          href: "#"
+        }
+      ]
+    },
+    {
+      html: acceptHtml,
+      actions: [
+       {
+          text: "Hide cookie message"
+        }
+      ]
+    }
+  ]
+}) -}}

package/nunjucks/moduk/components/cookie-banner/__examples__/default.njk

@@ -0,0 +1,34 @@
+{%- from "moduk/components/cookie-banner/macro.njk" import modukCookieBanner -%}
+
+{% set html %}
+  <p class="govuk-body">We use some essential cookies to make this service work.</p>
+  <p class="govuk-body">We’d also like to use analytics cookies so we can understand how you use the service and make improvements.</p>
+{% endset -%}
+
+{{ modukCookieBanner({
+  ariaLabel: "Cookies on [name of service]",
+  messages: [
+    {
+      headingText: "Cookies on [name of service]",
+      html: html,
+      actions: [
+        {
+          text: "Accept analytics cookies",
+          type: "button",
+          name: "cookies",
+          value: "accept"
+        },
+        {
+          text: "Reject analytics cookies",
+          type: "button",
+          name: "cookies",
+          value: "reject"
+        },
+        {
+          text: "View cookies",
+          href: "#"
+        }
+      ]
+    }
+  ]
+}) -}}

package/nunjucks/moduk/components/cookie-banner/__examples__/rejected.njk

@@ -0,0 +1,47 @@
+{%- from "moduk/components/cookie-banner/macro.njk" import modukCookieBanner -%}
+
+{%- set html %}
+  <p class="govuk-body">We use some essential cookies to make this service work.</p>
+  <p class="govuk-body">We’d also like to use analytics cookies so we can understand how you use the service and make improvements.</p>
+{% endset -%}
+
+{% set rejectHtml %}
+   <p class="govuk-body">You’ve rejected analytics cookies. You can <a class="govuk-link" href="#">change your cookie settings</a> at any time.</p>
+{% endset -%}
+
+{{ modukCookieBanner({
+  ariaLabel: "Cookies on the Defence Service Manual",
+  messages: [
+    {
+      headingText: "Cookies on the Defence Service Manual",
+      html: html,
+      hidden: true,
+      actions: [
+        {
+          text: "Accept analytics cookies",
+          type: "button",
+          name: "cookies",
+          value: "accept"
+        },
+        {
+          text: "Reject analytics cookies",
+          type: "button",
+          name: "cookies",
+          value: "reject"
+        },
+        {
+          text: "View cookies",
+          href: "#"
+        }
+      ]
+    },
+    {
+      html: rejectHtml,
+      actions: [
+       {
+          text: "Hide cookie message"
+        }
+      ]
+    }
+  ]
+}) -}}

package/nunjucks/moduk/components/cookie-banner/macro.njk

@@ -0,0 +1,5 @@
+{%- from "govuk/components/cookie-banner/macro.njk" import govukCookieBanner %}
+
+{%- macro modukCookieBanner(params) -%}
+  {{ govukCookieBanner(params) }}
+{%- endmacro %}

package/nunjucks/moduk/components/date-input/__examples__/default.njk

@@ -0,0 +1,16 @@
+{% from "moduk/components/date-input/macro.njk" import modukDateInput -%}
+
+{{ modukDateInput({
+  id: "contract-start-date-default",
+  namePrefix: "contract-start-date-default",
+  fieldset: {
+    legend: {
+      text: "When will the contract start?",
+      isPageHeading: true,
+      classes: "govuk-fieldset__legend--l"
+    }
+  },
+  hint: {
+    text: "For example, 27 3 2023"
+  }
+}) -}}

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

@@ -0,0 +1,14 @@
+{% from "moduk/components/date-input/macro.njk" import modukDateInput -%}
+
+{{ modukDateInput({
+  id: "contract-start-date-not-as-heading",
+  namePrefix: "contract-start-date-not-as-heading",
+  fieldset: {
+    legend: {
+      text: "When will the contract start?"
+    }
+  },
+  hint: {
+    text: "For example, 27 3 2023"
+  }
+}) -}}

package/nunjucks/moduk/components/date-input/__examples__/with-date-part-error.njk

@@ -0,0 +1,35 @@
+{% from "moduk/components/date-input/macro.njk" import modukDateInput -%}
+
+{{ modukDateInput({
+  id: "contract-start-date-with-part-error",
+  namePrefix: "contract-start-date-with-part-error",
+  fieldset: {
+    legend: {
+      text: "When will the contract start?",
+      isPageHeading: true,
+      classes: "govuk-fieldset__legend--l"
+    }
+  },
+  hint: {
+    text: "For example, 27 3 2023"
+  },
+     errorMessage: {
+       text: "The start date of the contract must include a year"
+     },
+     items: [
+       {
+         classes: "govuk-input--width-2",
+         name: "day",
+         value: "6"
+       },
+       {
+         classes: "govuk-input--width-2",
+         name: "month",
+         value: "3"
+       },
+       {
+         classes: "govuk-input--width-4 govuk-input--error",
+         name: "year"
+       }
+     ]
+}) -}}

package/nunjucks/moduk/components/date-input/__examples__/with-whole-date-error.njk

@@ -0,0 +1,36 @@
+{% from "moduk/components/date-input/macro.njk" import modukDateInput -%}
+
+{{ modukDateInput({
+  id: "contract-start-date-with-whole-error",
+  namePrefix: "contract-start-date-with-whole-error",
+  fieldset: {
+    legend: {
+      text: "When will the contract start?",
+      isPageHeading: true,
+      classes: "govuk-fieldset__legend--l"
+    }
+  },
+  hint: {
+    text: "For example, 27 3 2023"
+  },
+  errorMessage: {
+    text: "Contract start date must be in the future"
+  },
+  items: [
+    {
+      classes: "govuk-input--width-2 govuk-input--error",
+      name: "day",
+      value: "6"
+    },
+    {
+      classes: "govuk-input--width-2 govuk-input--error",
+      name: "month",
+      value: "3"
+    },
+    {
+      classes: "govuk-input--width-4 govuk-input--error",
+      name: "year",
+      value: "2001"
+    }
+  ]
+}) -}}

package/nunjucks/moduk/components/date-input/macro.njk

@@ -0,0 +1,5 @@
+{% from "govuk/components/date-input/macro.njk" import govukDateInput -%}
+
+{% macro modukDateInput(params) -%}
+  {{ govukDateInput(params) }}
+{%- endmacro %}

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

@@ -0,0 +1,6 @@
+{% from "moduk/components/details/macro.njk" import modukDetails -%}
+
+{{ modukDetails({
+  summaryText: "Help with organisation",
+  text: "We need to know the organisation you work for so we can forward your request to the correct team."
+}) -}}

package/nunjucks/moduk/components/details/__examples__/open.njk

@@ -0,0 +1,7 @@
+{% from "moduk/components/details/macro.njk" import modukDetails -%}
+
+{{ modukDetails({
+  summaryText: "Help with organisation",
+  text: "We need to know the organisation you work for so we can forward your request to the correct team.",
+  open: true
+}) -}}

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

@@ -0,0 +1,11 @@
+{% from "govuk/components/details/macro.njk" import govukDetails %}
+
+{% macro modukDetails(params) -%}
+  {% if caller -%}
+    {% call govukDetails(params) -%}
+      {{ caller() }}
+    {%- endcall %}
+  {%- else -%}
+    {{ govukDetails(params) }}
+  {%- endif %}
+{%- endmacro %}

package/nunjucks/moduk/components/error-message/__examples__/default.njk

@@ -0,0 +1,5 @@
+{% from "moduk/components/error-message/macro.njk" import modukErrorMessage -%}
+
+{{ modukErrorMessage({
+  text: "Enter a first name"
+}) -}}

package/nunjucks/moduk/components/error-message/macro.njk

@@ -0,0 +1,5 @@
+{% from "govuk/components/error-message/macro.njk" import govukErrorMessage %}
+
+{% macro modukErrorMessage(params) -%}
+  {{ govukErrorMessage(params) }}
+{%- endmacro %}

package/nunjucks/moduk/components/error-summary/__examples__/default.njk

@@ -0,0 +1,15 @@
+{% from "moduk/components/error-summary/macro.njk" import modukErrorSummary -%}
+
+{{ modukErrorSummary({
+  titleText: "There is a problem",
+  errorList: [
+    {
+      text: "The start date of the contract must include a year",
+      href: "#incorect-date-format"
+    },
+    {
+      text: "Enter your full name",
+      href: "#full-name-input"
+    }
+  ]
+}) -}}

package/nunjucks/moduk/components/error-summary/__examples__/with-description-and-error-list.njk

@@ -0,0 +1,16 @@
+{% from "moduk/components/error-summary/macro.njk" import modukErrorSummary -%}
+
+{{ modukErrorSummary({
+  titleText: "There is a problem",
+  descriptionText: "There have been some errors when trying to submit your application.",
+  errorList: [
+    {
+      text: "The start date of the contract must include a year",
+      href: "#incorect-date-format"
+    },
+    {
+      text: "Enter your full name",
+      href: "#full-name-input"
+    }
+  ]
+}) -}}

package/nunjucks/moduk/components/error-summary/__examples__/with-error-linked-to-checkbox.njk

@@ -0,0 +1,54 @@
+{% from "moduk/components/error-summary/macro.njk" import modukErrorSummary -%}
+{% from "moduk/components/checkboxes/macro.njk" import modukCheckboxes -%}
+
+<div>
+  {{ modukErrorSummary({
+    titleText: "There is a problem",
+    errorList: [
+      {
+        text: "Select which technologies you use in your role",
+        href: "#technologies"
+      }
+    ]
+  }) -}}
+
+{{ modukCheckboxes({
+  name: "technologies",
+  fieldset: {
+    legend: {
+      text: "Which technologies do you use in your role?",
+      isPageHeading: true,
+      classes: "govuk-fieldset__legend--l"
+    }
+  },
+  hint: {
+    text: "Select all that apply."
+  },
+  errorMessage: {
+    text: "Select which technologies you use in your role"
+  },
+  items: [
+    {
+      value: "angular",
+      text: "Angular"
+    },
+    {
+      value: "nunjucks",
+      text: "Nunjucks"
+    },
+    {
+      value: "react",
+      text: "React"
+    },
+    {
+      value: "web-components",
+      text: "Web components"
+    },
+    {
+      value: "another-technology",
+      text: "Another technology"
+    }
+  ]
+}) -}}
+
+</div>

package/nunjucks/moduk/components/error-summary/__examples__/with-error-linked-to-date-part.njk

@@ -0,0 +1,45 @@
+{% from "moduk/components/error-summary/macro.njk" import modukErrorSummary -%}
+{% from "moduk/components/date-input/macro.njk" import modukDateInput -%}
+
+<div>
+  {{ modukErrorSummary({
+    titleText: "There is a problem",
+    errorList: [
+      {
+        text: "The start date of the contract must include a year",
+        href: "#incorect-date-format-year"
+      }
+    ]
+  }) -}}
+
+  {{ modukDateInput({
+    id: "incorect-date-format",
+    namePrefix: "incorect-date-format",
+    fieldset: {
+      legend: {
+         isPageHeading: true,
+        text: "When will the contract start?",
+        classes: 'govuk-fieldset__legend--l'
+      }
+    },
+    errorMessage: {
+      text: "The start date of the contract must include a year"
+    },
+    items: [
+      {
+          classes: "govuk-input--width-2",
+          name: "day",
+          value: "6"
+      },
+      {
+          classes: "govuk-input--width-2",
+          name: "month",
+          value: "3"
+      },
+      {
+          classes: "govuk-input--width-4 govuk-input--error",
+          name: "year"
+      }
+    ]
+  }) }}
+</div>

package/nunjucks/moduk/components/error-summary/macro.njk

@@ -0,0 +1,11 @@
+{% from "govuk/components/error-summary/macro.njk" import govukErrorSummary %}
+
+{% macro modukErrorSummary(params) -%}
+  {% if caller -%}
+    {% call govukErrorSummary(params) -%}
+      {{ caller() }}
+    {%- endcall %}
+  {%- else -%}
+    {{ govukErrorSummary(params) }}
+  {%- endif %}
+{%- endmacro %}