@moduk/frontend 1.2.0 → 1.3.0

package/nunjucks/moduk/components/notification-banner/__examples__/success.njk

@@ -0,0 +1,13 @@
+{% from "moduk/components/notification-banner/macro.njk" import modukNotificationBanner -%}
+
+{% set html %}
+  <h3 class="govuk-notification-banner__heading">
+    Training outcome recorded and trainee withdrawn
+  </h3>
+  <p class="govuk-body">Contact <a class="govuk-notification-banner__link" href="#">example@department.gov.uk</a> if you think there’s a problem.</p>
+{% endset -%}
+
+{{ modukNotificationBanner({
+  html: html,
+  type: 'success'
+}) -}}

package/nunjucks/moduk/components/notification-banner/__examples__/with-html.njk

@@ -0,0 +1,12 @@
+{% from "moduk/components/notification-banner/macro.njk" import modukNotificationBanner -%}
+
+{% set html %}
+  <p class="govuk-notification-banner__heading">
+    You have 7 days left to send your application.
+    <a class="govuk-notification-banner__link" href="#">View application</a>.
+  </p>
+{% endset -%}
+
+{{ modukNotificationBanner({
+  html: html
+}) -}}

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

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

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

@@ -0,0 +1,25 @@
+{% from "moduk/components/pagination/macro.njk" import modukPagination -%}
+
+{{ modukPagination({
+  previous: {
+    href: "#"
+  },
+  next: {
+    href: "#"
+  },
+  items: [
+    {
+      number: 1,
+      href: "#"
+    },
+    {
+      number: 2,
+      current: true,
+      href: "#"
+    },
+    {
+      number: 3,
+      href: "#"
+    }
+  ]
+}) -}}

package/nunjucks/moduk/components/pagination/__examples__/on-the-first-page.njk

@@ -0,0 +1,22 @@
+{% from "moduk/components/pagination/macro.njk" import modukPagination -%}
+
+{{ modukPagination({
+  next: {
+    href: "#"
+  },
+  items: [
+    {
+      number: 1,
+      current: true,
+      href: "#"
+    },
+    {
+      number: 2,
+      href: "#"
+    },
+    {
+      number: 3,
+      href: "#"
+    }
+  ]
+}) -}}

package/nunjucks/moduk/components/pagination/__examples__/on-the-last-page.njk

@@ -0,0 +1,22 @@
+{% from "moduk/components/pagination/macro.njk" import modukPagination -%}
+
+{{ modukPagination({
+  previous: {
+    href: "#"
+  },
+  items: [
+    {
+      number: 1,
+      href: "#"
+    },
+    {
+      number: 2,
+      href: "#"
+    },
+    {
+      number: 3,
+      current: true,
+      href: "#"
+    }
+  ]
+}) -}}

package/nunjucks/moduk/components/pagination/__examples__/with-ellipses.njk

@@ -0,0 +1,39 @@
+{% from "moduk/components/pagination/macro.njk" import modukPagination -%}
+
+{{ modukPagination({
+  previous: {
+    href: "#"
+  },
+  next: {
+    href: "#"
+  },
+  items: [
+    {
+      number: 1,
+      href: "#"
+    },
+    {
+      ellipsis: true
+    },
+    {
+      number: 6,
+      href: "#"
+    },
+    {
+      number: 7,
+      current: true,
+      href: "#"
+    },
+    {
+      number: 8,
+      href: "#"
+    },
+    {
+      ellipsis: true
+    },
+    {
+      number: 42,
+      href: "#"
+    }
+  ]
+}) -}}

package/nunjucks/moduk/components/pagination/__examples__/with-link-labels.njk

@@ -0,0 +1,12 @@
+{% from "moduk/components/pagination/macro.njk" import modukPagination -%}
+
+{{ modukPagination({
+  previous: {
+    labelText: "Understanding military personnel",
+    href: "#"
+  },
+  next: {
+    labelText: "Find user research participants across Defence",
+    href: "#"
+  }
+}) -}}

package/nunjucks/moduk/components/pagination/__examples__/with-next-and-previous-only.njk

@@ -0,0 +1,12 @@
+{% from "moduk/components/pagination/macro.njk" import modukPagination -%}
+
+{{ modukPagination({
+  previous: {
+    labelText: "1 of 3",
+    href: "#"
+  },
+  next: {
+    labelText: "3 of 3",
+    href: "#"
+  }
+}) -}}

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

@@ -0,0 +1,5 @@
+{% from "govuk/components/pagination/macro.njk" import govukPagination %}
+
+{% macro modukPagination(params) -%}
+  {{- govukPagination(params) -}}
+{%- endmacro %}

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

@@ -0,0 +1,6 @@
+{% from "moduk/components/panel/macro.njk" import modukPanel -%}
+
+{{ modukPanel({
+  titleText: "Application complete",
+  html: "Your reference number<br><strong>HDJ2123F</strong>"
+}) -}}

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

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

package/nunjucks/moduk/components/phase-banner/__examples__/beta.njk

@@ -0,0 +1,8 @@
+{% from "moduk/components/phase-banner/macro.njk" import modukPhaseBanner -%}
+
+{{ modukPhaseBanner({
+  tag: {
+    text: "beta"
+  },
+  html: 'This is a new service – your <a class="govuk-link" href="#">feedback</a> will help us to improve it.'
+}) -}}

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

@@ -0,0 +1,12 @@
+{% from "moduk/components/phase-banner/macro.njk" import modukPhaseBanner -%}
+
+{{ modukPhaseBanner({
+  tag: {
+    text: "alpha"
+  },
+  classes: "custom-class",
+  attributes: {
+    "data-testid": "phase-banner"
+  },
+  html: 'This is a new service – your <a class="govuk-link" href="#">feedback</a> will help us to improve it.'
+}) -}}

package/nunjucks/moduk/components/phase-banner/__examples__/with-tag-override.njk

@@ -0,0 +1,9 @@
+{% from "moduk/components/phase-banner/macro.njk" import modukPhaseBanner -%}
+
+{{ modukPhaseBanner({
+  tag: {
+    text: "beta",
+    classes: "govuk-tag--grey"
+  },
+  html: 'This is a new service – your <a class="govuk-link" href="#">feedback</a> will help us to improve it.'
+}) -}}

package/nunjucks/moduk/components/phase-banner/__examples__/with-text.njk

@@ -0,0 +1,8 @@
+{% from "moduk/components/phase-banner/macro.njk" import modukPhaseBanner -%}
+
+{{ modukPhaseBanner({
+  tag: {
+    text: "beta"
+  },
+  text: 'This is a new service'
+}) -}}

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

@@ -0,0 +1,5 @@
+{% from "govuk/components/phase-banner/macro.njk" import govukPhaseBanner %}
+
+{% macro modukPhaseBanner(params) -%}
+  {{- govukPhaseBanner(params | addCustomMODUKClass("moduk-tag--default", { not: r/^govuk-tag--/, path: "tag.classes" })) -}}
+{%- endmacro %}

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

@@ -0,0 +1,30 @@
+{% from "moduk/components/radios/macro.njk" import modukRadios -%}
+
+{{ modukRadios({
+  name: "organisation-default",
+  fieldset: {
+    legend: {
+      text: "Which organisation do you work for?",
+      isPageHeading: true,
+      classes: "govuk-fieldset__legend--l"
+    }
+  },
+  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"
+    }
+  ]
+}) -}}

package/nunjucks/moduk/components/radios/__examples__/inline.njk

@@ -0,0 +1,26 @@
+{% from "moduk/components/radios/macro.njk" import modukRadios -%}
+
+{{ modukRadios({
+  classes: "govuk-radios--inline",
+  name: "changed-name",
+  fieldset: {
+    legend: {
+      text: "Have you changed your name?",
+      isPageHeading: true,
+      classes: "govuk-fieldset__legend--l"
+    }
+  },
+  hint: {
+    text: "This includes changing your last name or spelling your name differently."
+  },
+  items: [
+    {
+      value: "yes",
+      text: "Yes"
+    },
+    {
+      value: "no",
+      text: "No"
+    }
+  ]
+}) -}}

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

@@ -0,0 +1,29 @@
+{% from "moduk/components/radios/macro.njk" import modukRadios -%}
+
+{{ modukRadios({
+  name: "organisation-not-as-page-heading",
+  fieldset: {
+    legend: {
+      text: "Which organisation do you work for?"
+    }
+  },
+  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"
+    }
+  ]
+}) -}}
+

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

@@ -0,0 +1,31 @@
+{% from "moduk/components/radios/macro.njk" import modukRadios -%}
+
+{{ modukRadios({
+  name: "organisation-small",
+  classes: "govuk-radios--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"
+    }
+  ]
+}) -}}

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

@@ -0,0 +1,80 @@
+{% from "moduk/components/radios/macro.njk" import modukRadios -%}
+{% 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 -%}
+
+{{ modukRadios({
+  name: "contact",
+  fieldset: {
+    legend: {
+      text: "How would you like to be contacted?",
+      isPageHeading: true,
+      classes: "govuk-fieldset__legend--l"
+    }
+  },
+  hint: {
+    text: "Select one option."
+  },
+  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/radios/__examples__/with-divider-option.njk

@@ -0,0 +1,29 @@
+{% from "moduk/components/radios/macro.njk" import modukRadios -%}
+
+{{ modukRadios({
+  name: "with-divider-option",
+  fieldset: {
+    legend: {
+      text: "How do you want to sign in?",
+      isPageHeading: true,
+      classes: "govuk-fieldset__legend--l"
+    }
+  },
+  items: [
+    {
+      value: "biometric",
+      text: "Sign in with a security key"
+    },
+    {
+      value: "userpass",
+      text: "Sign in with a username and password"
+    },
+    {
+      divider: "or"
+    },
+    {
+      value: "register",
+      text: "Register for a new account"
+    }
+  ]
+}) -}}

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

@@ -0,0 +1,33 @@
+{% from "moduk/components/radios/macro.njk" import modukRadios -%}
+
+{{ modukRadios({
+  name: "organisation-with-error",
+  fieldset: {
+    legend: {
+      text: "Which organisation do you work for?",
+      isPageHeading: true,
+      classes: "govuk-fieldset__legend--l"
+    }
+  },
+  errorMessage: {
+    text: "Select an organisation"
+  },
+  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"
+    }
+  ]
+}) -}}

package/nunjucks/moduk/components/radios/__examples__/with-item-hint.njk

@@ -0,0 +1,31 @@
+{% from "moduk/components/radios/macro.njk" import modukRadios -%}
+
+{{ modukRadios({
+  name: "sign-in-with-hint",
+  fieldset: {
+    legend: {
+      text: "How do you want to sign in?",
+      isPageHeading: true,
+      classes: "govuk-fieldset__legend--l"
+    }
+  },
+  hint: {
+    text: "You need an account to use this service."
+  },
+  items: [
+    {
+      value: "biometric",
+      text: "Sign in with a security key",
+      hint: {
+        text: "You’ll need a registered USB security key."
+      }
+    },
+    {
+      value: "userpass",
+      text: "Sign in with a username and password",
+      hint: {
+        text: "You’ll need access to your two-factor authentication device."
+      }
+    }
+  ]
+}) -}}

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

@@ -0,0 +1,5 @@
+{% from "govuk/components/radios/macro.njk" import govukRadios -%}
+
+{% macro modukRadios(params) -%}
+  {{ govukRadios(params) }}
+{%- endmacro %}

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

@@ -0,0 +1,28 @@
+{% from "moduk/components/select/macro.njk" import modukSelect -%}
+
+{{ modukSelect({
+  id: "sort",
+  name: "sort",
+  label: {
+    text: "Sort by"
+  },
+  items: [
+    {
+      value: "published",
+      text: "Recently published"
+    },
+    {
+      value: "updated",
+      text: "Recently updated",
+      selected: true
+    },
+    {
+      value: "views",
+      text: "Most views"
+    },
+    {
+      value: "comments",
+      text: "Most comments"
+    }
+  ]
+}) -}}

package/nunjucks/moduk/components/select/__examples__/with-hint.njk

@@ -0,0 +1,55 @@
+{% from "moduk/components/select/macro.njk" import modukSelect -%}
+
+{{ modukSelect({
+  id: "subject",
+  name: "subject",
+  label: {
+    text: "Choose location"
+  },
+    hint: {
+    text: "This can be different to where you went before"
+  },
+  items: [
+    {
+      value: "choose",
+      text: "Choose location",
+      selected: true
+    },
+    {
+      value: "eastmidlands",
+      text: "East Midlands"
+    },
+    {
+      value: "eastofengland",
+      text: "East of England"
+    },
+    {
+      value: "london",
+      text: "London"
+    },
+    {
+      value: "northeast",
+      text: "North East"
+    },
+    {
+      value: "northwest",
+      text: "North West"
+    },
+    {
+      value: "southeast",
+      text: "South East"
+    },
+    {
+      value: "southwest",
+      text: "South West"
+    },
+    {
+      value: "westmidlands",
+      text: "West Midlands"
+    },
+    {
+      value: "yorkshire",
+      text: "Yorkshire and the Humber"
+    }
+   ]
+}) -}}

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

@@ -0,0 +1,5 @@
+{% from "govuk/components/select/macro.njk" import govukSelect -%}
+
+{% macro modukSelect(params) -%}
+  {{ govukSelect(params) }}
+{%- endmacro %}

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

@@ -0,0 +1,11 @@
+{%- from "moduk/components/skip-link/macro.njk" import modukSkipLink -%}
+
+{# Wrapped in a <div> so there is one root element, for visual regression tests to use -#}
+
+<div>
+  <p class="govuk-body" id="content">To view the skip link component tab to this example, or click inside this example and press tab.</p>
+  {{ modukSkipLink({
+    text: "Skip to main content",
+    href: "#content"
+  }) -}}
+</div>

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

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