@moduk/frontend 1.2.0 → 1.3.0

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

@@ -0,0 +1,45 @@
+{% from "moduk/components/input/macro.njk" import modukInput -%}
+{% from "moduk/components/fieldset/macro.njk" import modukFieldset -%}
+
+{% call modukFieldset({
+  legend: {
+    text: "What is your address?",
+    classes: "govuk-fieldset__legend--l",
+    isPageHeading: true
+  }
+}) -%}
+  {{ modukInput({
+    label: {
+      text: 'Address line 1'
+    },
+    id: "address-line-1",
+    name: "address-line-1",
+    autocomplete: "address-line1"
+  }) -}}
+  {{ modukInput({
+    label: {
+      text: 'Address line 2 (optional)'
+    },
+    id: "address-line-2",
+    name: "address-line-2",
+    autocomplete: "address-line2"
+  }) -}}
+  {{ modukInput({
+    label: {
+      text: "Town or city"
+    },
+    classes: "govuk-!-width-two-thirds",
+    id: "address-town",
+    name: "address-town",
+    autocomplete: "address-level2"
+  }) -}}
+  {{ modukInput({
+    label: {
+      text: "Postcode"
+    },
+    classes: "govuk-input--width-10",
+    id: "address-postcode",
+    name: "address-postcode",
+    autocomplete: "postal-code"
+  }) -}}
+{% endcall -%}

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

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

package/nunjucks/moduk/components/file-upload/__examples__/default.njk

@@ -0,0 +1,9 @@
+{% from "moduk/components/file-upload/macro.njk" import modukFileUpload -%}
+
+{{ modukFileUpload({
+  id: "file-upload-1",
+  name: "file-upload-1",
+  label: {
+    text: "Upload a file"
+  }
+}) -}}

package/nunjucks/moduk/components/file-upload/__examples__/with-error.njk

@@ -0,0 +1,12 @@
+{% from "moduk/components/file-upload/macro.njk" import modukFileUpload -%}
+
+{{ modukFileUpload({
+  id: "file-upload-with-error",
+  name: "file-upload-with-error",
+  label: {
+    text: "Upload a file"
+  },
+  errorMessage: {
+    text: "The CSV must be smaller than 2MB"
+  }
+}) -}}

package/nunjucks/moduk/components/file-upload/macro.njk

@@ -0,0 +1,5 @@
+{% from "govuk/components/file-upload/macro.njk" import govukFileUpload %}
+
+{% macro modukFileUpload(params) -%}
+  {{ govukFileUpload(params) }}
+{%- endmacro %}

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

@@ -0,0 +1,3 @@
+{% from "moduk/components/footer/macro.njk" import modukFooter -%}
+
+{{ modukFooter({}) -}}

package/nunjucks/moduk/components/footer/__examples__/with-links.njk

@@ -0,0 +1,20 @@
+{% from "moduk/components/footer/macro.njk" import modukFooter -%}
+
+{{ modukFooter({
+  meta: {
+    items: [
+      {
+        href: "#1",
+        text: "Item 1"
+      },
+      {
+        href: "#2",
+        text: "Item 2"
+      },
+      {
+        href: "#3",
+        text: "Item 3"
+      }
+    ]
+  }
+}) -}}

package/nunjucks/moduk/components/footer/__examples__/with-secondary-navigation-and-links.njk

@@ -0,0 +1,72 @@
+{% from "moduk/components/footer/macro.njk" import modukFooter -%}
+
+{{ modukFooter({
+  navigation: [
+    {
+      title: "Two column list",
+      width: "two-thirds",
+      columns: 2,
+      items: [
+        {
+          href: "#1",
+          text: "Navigation item 1"
+        },
+        {
+          href: "#2",
+          text: "Navigation item 2"
+        },
+        {
+          href: "#3",
+          text: "Navigation item 3"
+        },
+        {
+          href: "#4",
+          text: "Navigation item 4"
+        },
+        {
+          href: "#5",
+          text: "Navigation item 5"
+        },
+        {
+          href: "#6",
+          text: "Navigation item 6"
+        }
+      ]
+    },
+    {
+      title: "Single column list",
+      width: "one-third",
+      items: [
+        {
+          href: "#1",
+          text: "Navigation item 1"
+        },
+        {
+          href: "#2",
+          text: "Navigation item 2"
+        },
+        {
+          href: "#3",
+          text: "Navigation item 3"
+        }
+      ]
+    }
+  ],
+  meta: {
+    items: [
+      {
+        href: "#1",
+        text: "Item 1"
+      },
+      {
+        href: "#2",
+        text: "Item 2"
+      },
+      {
+        href: "#3",
+        text: "Item 3"
+      }
+    ],
+    html: 'Built by <a href="#" class="govuk-footer__link">Defence Digital</a>'
+  }
+}) -}}

package/nunjucks/moduk/components/footer/__examples__/with-secondary-navigation.njk

@@ -0,0 +1,55 @@
+{% from "moduk/components/footer/macro.njk" import modukFooter -%}
+
+{{ modukFooter({
+  navigation: [
+    {
+      title: "Two column list",
+      width: "two-thirds",
+      columns: 2,
+      items: [
+        {
+          href: "#1",
+          text: "Navigation item 1"
+        },
+        {
+          href: "#2",
+          text: "Navigation item 2"
+        },
+        {
+          href: "#3",
+          text: "Navigation item 3"
+        },
+        {
+          href: "#4",
+          text: "Navigation item 4"
+        },
+        {
+          href: "#5",
+          text: "Navigation item 5"
+        },
+        {
+          href: "#6",
+          text: "Navigation item 6"
+        }
+      ]
+    },
+    {
+      title: "Single column list",
+      width: "one-third",
+      items: [
+        {
+          href: "#1",
+          text: "Navigation item 1"
+        },
+        {
+          href: "#2",
+          text: "Navigation item 2"
+        },
+        {
+          href: "#3",
+          text: "Navigation item 3"
+        }
+      ]
+    }
+  ]
+}) -}}

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

@@ -0,0 +1,5 @@
+{% from "govuk/components/footer/macro.njk" import govukFooter %}
+
+{% macro modukFooter(params) -%}
+  {{ govukFooter(params) }}
+{%- endmacro %}

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

@@ -0,0 +1,3 @@
+{% from "moduk/components/header/macro.njk" import modukHeader -%}
+
+{{ modukHeader({}) -}}

package/nunjucks/moduk/components/header/__examples__/with-service-name-and-navigation.njk

@@ -0,0 +1,26 @@
+{% from "moduk/components/header/macro.njk" import modukHeader -%}
+
+{{ modukHeader({
+  homepageUrl: "#",
+  serviceName: "Service name",
+  serviceUrl: "#",
+  navigation: [
+    {
+      href: "#1",
+      text: "Navigation item 1",
+      active: true
+    },
+    {
+      href: "#2",
+      text: "Navigation item 2"
+    },
+    {
+      href: "#3",
+      text: "Navigation item 3"
+    },
+    {
+      href: "#4",
+      text: "Navigation item 4"
+    }
+  ]
+}) -}}

package/nunjucks/moduk/components/header/__examples__/with-service-name-and-no-service-url.njk

@@ -0,0 +1,6 @@
+{% from "moduk/components/header/macro.njk" import modukHeader -%}
+
+{{ modukHeader({
+  homepageUrl: "#",
+  serviceName: "Service name"
+}) -}}

package/nunjucks/moduk/components/header/__examples__/with-service-name.njk

@@ -0,0 +1,7 @@
+{%- from "moduk/components/header/macro.njk" import modukHeader -%}
+
+{{ modukHeader({
+  homepageUrl: "#",
+  serviceName: "Service name",
+  serviceUrl: "#"
+}) -}}

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

@@ -0,0 +1,62 @@
+{#
+ This macro is based on the GOV.UK equivalent from the GOV.UK Frontend:
+ https://github.com/alphagov/govuk-frontend/blob/cdfc281bebf0afb6ea121ee8f52eb332dfc40615/src/govuk/components/header/template.njk
+
+ The logo has been changed, some CSS classes have been added and there are some slight markup changes.
+#}
+
+{% macro modukHeader(params) -%}
+
+{% set menuButtonText = params.menuButtonText if params.menuButtonText else 'Menu' -%}
+
+<header class="govuk-header {{ params.classes if params.classes }}" role="banner" data-module="govuk-header"
+        {%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}>
+  <div class="govuk-header__container {{ params.containerClasses | default('govuk-width-container') }}">
+    <div class="moduk-header__logo govuk-header__logo">
+      <a href="{{ params.homepageUrl | default('/') }}" class="govuk-header__link govuk-header__link--homepage" title="Home">
+        <span class="govuk-header__logotype">
+          {#- Note that this is deliberately an inline SVG, so that currentColor is used.
+            See the original macro in GOV.UK Frontend for more details. #}
+          {% MODUKincludeSVG 'moduk-header-logo' %}
+        </span>
+      </a>
+    </div>
+    {%- if params.serviceName or params.navigation %}
+    <div class="govuk-header__content">
+    {%- if params.serviceName %}
+    {%- if params.serviceUrl %}
+      <a href="{{ params.serviceUrl }}" class="govuk-header__link moduk-header__service-name govuk-header__service-name">
+        {{ params.serviceName }}
+      </a>
+    {%- else %}
+      <span class="moduk-header__service-name govuk-header__service-name">
+        {{ params.serviceName }}
+      </span>
+    {% endif -%}
+    {%- endif -%}
+    {%- if params.navigation %}
+      <nav aria-label="{{ params.navigationLabel | default(menuButtonText) }}" class="govuk-header__navigation {{ params.navigationClasses if params.navigationClasses }}">
+        <button type="button" class="govuk-header__menu-button govuk-js-header-toggle" aria-controls="navigation" aria-label="{{ params.menuButtonLabel | default('Show or hide menu') }}" hidden>{{ menuButtonText }}</button>
+        <ul id="navigation" class="govuk-header__navigation-list">
+        {%- for item in params.navigation -%}
+        {%- if item.text or item.html %}
+          <li class="govuk-header__navigation-item{{ ' govuk-header__navigation-item--active moduk-header__navigation-item--active' if item.active }}">
+            {% if item.href -%}
+              <a class="govuk-header__link" href="{{ item.href }}"{% for attribute, value in item.attributes %} {{attribute}}="{{value}}"{% endfor %}>
+            {%- endif -%}
+              {{ item.html | safe if item.html else item.text }}
+            {%- if item.href -%}
+              </a>
+            {%- endif %}
+          </li>
+        {%- endif %}
+        {%- endfor %}
+        </ul>
+      </nav>
+    {%- endif %}
+    </div>
+    {%- endif %}
+  </div>
+</header>
+
+{%- endmacro -%}

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

@@ -0,0 +1,11 @@
+{% from "moduk/components/input/macro.njk" import modukInput -%}
+
+{{ modukInput({
+  label: {
+    text: "What is the name of the event?",
+    classes: "govuk-label--l",
+    isPageHeading: true
+  },
+  id: "default",
+  name: "event-name-default"
+}) -}}

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

@@ -0,0 +1,9 @@
+{% from "moduk/components/input/macro.njk" import modukInput  -%}
+
+{{ modukInput({
+  label: {
+    text: "What is the name of the event?"
+  },
+  id: "with-not-as-page-heading",
+  name: "event-name-with-not-as-page-heading"
+}) -}}

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

@@ -0,0 +1,17 @@
+{% from "moduk/components/input/macro.njk" import modukInput  -%}
+
+{{ modukInput({
+  label: {
+    text: "What is the name of the event?",
+    classes: "govuk-label--l",
+    isPageHeading: true
+  },
+  id: "with-error",
+  name: "event-name-with-error",
+  hint: {
+    text: "The name you’ll use on promotional material"
+  },
+  errorMessage: {
+    text: "Enter an event name"
+  }
+}) -}}

package/nunjucks/moduk/components/input/__examples__/with-fixed-width.njk

@@ -0,0 +1,57 @@
+{% from "moduk/components/input/macro.njk" import modukInput  -%}
+
+<div>
+  {{- modukInput({
+    label: {
+      text: "20 character width"
+    },
+    classes: "govuk-input--width-20",
+    id: "width-20",
+    name: "width-20"
+  }) -}}
+
+  {{ modukInput({
+    label: {
+      text: "10 character width"
+    },
+    classes: "govuk-input--width-10",
+    id: "width-10",
+    name: "width-10"
+  }) -}}
+
+  {{ modukInput({
+    label: {
+      text: "5 character width"
+    },
+    classes: "govuk-input--width-5",
+    id: "width-5",
+    name: "width-5"
+  }) -}}
+
+  {{ modukInput({
+    label: {
+      text: "4 character width"
+    },
+    classes: "govuk-input--width-4",
+    id: "width-4",
+    name: "width-4"
+  }) -}}
+
+  {{ modukInput({
+    label: {
+      text: "3 character width"
+    },
+    classes: "govuk-input--width-3",
+    id: "width-3",
+    name: "width-3"
+  }) -}}
+
+  {{ modukInput({
+    label: {
+      text: "2 character width"
+    },
+    classes: "govuk-input--width-2",
+    id: "width-2",
+    name: "width-2"
+  }) -}}
+</div>

package/nunjucks/moduk/components/input/__examples__/with-fluid-width.njk

@@ -0,0 +1,57 @@
+{% from "moduk/components/input/macro.njk" import modukInput  -%}
+
+<div>
+  {{- modukInput({
+    label: {
+      text: "Full width"
+    },
+    classes: "govuk-!-width-full",
+    id: "full",
+    name: "full"
+  }) -}}
+
+  {{ modukInput({
+    label: {
+      text: "Three-quarters width"
+    },
+    classes: "govuk-!-width-three-quarters",
+    id: "three-quarters",
+    name: "three-quarters"
+  }) -}}
+
+  {{ modukInput({
+    label: {
+      text: "Two-thirds width"
+    },
+    classes: "govuk-!-width-two-thirds",
+    id: "two-thirds",
+    name: "two-thirds"
+  }) -}}
+
+  {{ modukInput({
+    label: {
+      text: "One-half width"
+    },
+    classes: "govuk-!-width-one-half",
+    id: "one-half",
+    name: "one-half"
+  }) -}}
+
+  {{ modukInput({
+    label: {
+      text: "One-third width"
+    },
+    classes: "govuk-!-width-one-third",
+    id: "one-third",
+    name: "one-third"
+  }) -}}
+
+  {{ modukInput({
+    label: {
+      text: "One-quarter width"
+    },
+    classes: "govuk-!-width-one-quarter",
+    id: "one-quarter",
+    name: "one-quarter"
+  }) -}}
+</div>

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

@@ -0,0 +1,14 @@
+{% from "moduk/components/input/macro.njk" import modukInput  -%}
+
+{{ modukInput({
+  label: {
+    text: "What is the name of the event?",
+    classes: "govuk-label--l",
+    isPageHeading: true
+  },
+  hint: {
+    text: "The name you’ll use on promotional material"
+  },
+  id: "with-hint",
+  name: "event-name-with-hint"
+}) -}}

package/nunjucks/moduk/components/input/__examples__/with-numeric.njk

@@ -0,0 +1,17 @@
+{% from "moduk/components/input/macro.njk" import modukInput  -%}
+
+{{ modukInput({
+  label: {
+    text: "What is your account number?",
+    classes: "govuk-label--l",
+    isPageHeading: true
+  },
+  classes: "govuk-input--width-10",
+  hint: {
+    text: "Must be between 6 and 8 digits long"
+  },
+  id: "with-numeric",
+  name: "account-number-with-numeric",
+  inputmode: "numeric",
+  spellcheck: false
+}) -}}

package/nunjucks/moduk/components/input/__examples__/with-prefix-and-suffix-error.njk

@@ -0,0 +1,22 @@
+{% from "moduk/components/input/macro.njk" import modukInput  -%}
+
+{{ modukInput({
+  id: "with-prefix-and-suffix-error",
+  name: "cost-per-item-with-prefix-and-suffix-error",
+  label: {
+    text: "What is the cost per item, in pounds?",
+    classes: "govuk-label--l",
+    isPageHeading: true
+  },
+  prefix: {
+    text: "£"
+  },
+  suffix: {
+    text: "per item"
+  },
+  errorMessage: {
+    text: "Enter a cost per item, in pounds"
+  },
+  classes: "govuk-input--width-5",
+  spellcheck: false
+}) -}}

package/nunjucks/moduk/components/input/__examples__/with-prefix-and-suffix.njk

@@ -0,0 +1,19 @@
+{% from "moduk/components/input/macro.njk" import modukInput  -%}
+
+{{ modukInput({
+  id: "with-prefix-and-suffix",
+  name: "cost-per-item-with-prefix-and-suffix",
+  label: {
+    text: "What is the cost per item, in pounds?",
+    classes: "govuk-label--l",
+    isPageHeading: true
+  },
+  prefix: {
+    text: "£"
+  },
+  suffix: {
+    text: "per item"
+  },
+  classes: "govuk-input--width-5",
+  spellcheck: false
+}) -}}

package/nunjucks/moduk/components/input/__examples__/with-prefix.njk

@@ -0,0 +1,16 @@
+{% from "moduk/components/input/macro.njk" import modukInput  -%}
+
+{{ modukInput({
+  id: "with-prefix",
+  name: "cost-with-prefix",
+  label: {
+    text: "What is the cost in pounds?",
+    classes: "govuk-label--l",
+    isPageHeading: true
+  },
+  prefix: {
+    text: "£"
+  },
+  classes: "govuk-input--width-5",
+  spellcheck: false
+}) -}}

package/nunjucks/moduk/components/input/__examples__/with-suffix.njk

@@ -0,0 +1,16 @@
+{% from "moduk/components/input/macro.njk" import modukInput  -%}
+
+{{ modukInput({
+  id: "with-suffix",
+  name: "weight-with-suffix",
+  label: {
+    text: "What is the weight in kilograms?",
+    classes: "govuk-label--l",
+    isPageHeading: true
+  },
+  suffix: {
+    text: "kg"
+  },
+  classes: "govuk-input--width-5",
+  spellcheck: false
+}) -}}

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

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

package/nunjucks/moduk/components/inset-text/__examples__/default.njk

@@ -0,0 +1,5 @@
+{% from "moduk/components/inset-text/macro.njk" import modukInsetText -%}
+
+{{ modukInsetText({
+  text: "You’ll get confirmation that we have received your report within 5 working days."
+}) -}}

package/nunjucks/moduk/components/inset-text/macro.njk

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

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

@@ -0,0 +1,5 @@
+{% from "moduk/components/notification-banner/macro.njk" import modukNotificationBanner -%}
+
+{{ modukNotificationBanner({
+  text: 'There may be a delay in processing your application because of the coronavirus outbreak.'
+}) -}}