@moduk/frontend 0.2.0-alpha.1 → 0.2.0

package/dist/lib/nunjucks/moduk/components/error-summary/__examples__/default.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/dist/lib/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/dist/lib/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/dist/lib/nunjucks/moduk/components/error-summary/__tests__/macro.test.ts

@@ -0,0 +1,55 @@
+import { describe, expect, it } from 'vitest'
+
+import { render, renderFile } from '../../../../../test-utils'
+
+describe('error summary', async () => {
+  it('renders the content when using the text property', () => {
+    const element = renderFile('moduk/components/error-summary/__examples__/default.njk')
+    expect(element).toHaveTextContent('There is a problem')
+  })
+
+  it('renders the error description when using the descriptionHtml property', () => {
+    const element = render(`
+{% from "moduk/components/error-summary/macro.njk" import modukErrorSummary %}
+
+{{ modukErrorSummary({
+    titleText: "There is a problem",
+    descriptionHtml: "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"
+      }
+    ]
+  }) }}
+`)
+    expect(element).toHaveTextContent('There have been some errors when trying to submit your application.')
+  })
+
+  it('renders the content when using a call block', () => {
+    const element = render(`
+{% from "moduk/components/error-summary/macro.njk" import modukErrorSummary %}
+
+{% call 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"
+      }
+    ]
+  }) %}
+  There have been some errors<br> when trying to submit your application.
+{% endcall %}
+`)
+    expect(element).toContainHTML('There have been some errors<br> when')
+  })
+})

package/dist/lib/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 %}

package/dist/lib/nunjucks/moduk/components/summary-list/__examples__/default.njk

@@ -0,0 +1,74 @@
+{% from "moduk/components/summary-list/macro.njk" import modukSummaryList %}
+
+{{ modukSummaryList({
+  rows: [
+    {
+      key: {
+        text: "Name"
+      },
+      value: {
+        text: "Sarah Philips"
+      },
+      actions: {
+        items: [
+          {
+            href: "#",
+            text: "Change",
+            visuallyHiddenText: "name"
+          }
+        ]
+      }
+    },
+    {
+      key: {
+        text: "Date of birth"
+      },
+      value: {
+        text: "5 January 1978"
+      },
+      actions: {
+        items: [
+          {
+            href: "#",
+            text: "Change",
+            visuallyHiddenText: "date of birth"
+          }
+        ]
+      }
+    },
+    {
+      key: {
+        text: "Address"
+      },
+      value: {
+        html: "72 Guild Street<br>London<br>SE23 6FH"
+      },
+      actions: {
+        items: [
+          {
+            href: "#",
+            text: "Change",
+            visuallyHiddenText: "address"
+          }
+        ]
+      }
+    },
+    {
+      key: {
+        text: "Contact details"
+      },
+      value: {
+        html: '<p class="govuk-body">07700 900457</p><p class="govuk-body">sarah.phillips@example.com</p>'
+      },
+      actions: {
+        items: [
+          {
+            href: "#",
+            text: "Change",
+            visuallyHiddenText: "contact details"
+          }
+        ]
+      }
+    }
+  ]
+}) }}

package/dist/lib/nunjucks/moduk/components/summary-list/__examples__/with-no-actions.njk

@@ -0,0 +1,38 @@
+{% from "moduk/components/summary-list/macro.njk" import modukSummaryList %}
+
+{{ modukSummaryList({
+  rows: [
+    {
+      key: {
+        text: "Name"
+      },
+      value: {
+        text: "Sarah Philips"
+      }
+    },
+    {
+      key: {
+        text: "Date of birth"
+      },
+      value: {
+        text: "5 January 1978"
+      }
+    },
+    {
+      key: {
+        text: "Address"
+      },
+      value: {
+        html: "72 Guild Street<br>London<br>SE23 6FH"
+      }
+    },
+    {
+      key: {
+        text: "Contact details"
+      },
+      value: {
+        html: '<p class="govuk-body">07700 900457</p><p class="govuk-body">sarah.phillips@example.com</p>'
+      }
+    }
+  ]
+}) }}

package/dist/lib/nunjucks/moduk/components/summary-list/__examples__/with-no-border.njk

@@ -0,0 +1,39 @@
+{% from "moduk/components/summary-list/macro.njk" import modukSummaryList %}
+
+{{ modukSummaryList({
+  classes: 'govuk-summary-list--no-border',
+  rows: [
+    {
+      key: {
+        text: "Name"
+      },
+      value: {
+        text: "Sarah Philips"
+      }
+    },
+    {
+      key: {
+        text: "Date of birth"
+      },
+      value: {
+        text: "5 January 1978"
+      }
+    },
+    {
+      key: {
+        text: "Address"
+      },
+      value: {
+        html: "72 Guild Street<br>London<br>SE23 6FH"
+      }
+    },
+    {
+      key: {
+        text: "Contact details"
+      },
+      value: {
+        html: '<p class="govuk-body">07700 900457</p><p class="govuk-body">sarah.phillips@example.com</p>'
+      }
+    }
+  ]
+}) }}

package/dist/lib/nunjucks/moduk/components/summary-list/__tests__/macro.test.ts

@@ -0,0 +1,9 @@
+import { describe, expect, it } from 'vitest'
+
+import { renderFile } from '../../../../../test-utils'
+
+describe('Summary list', async () => {
+  it('renders the content', () => {
+    expect(() => renderFile('moduk/components/summary-list/__examples__/default.njk')).not.toThrowError()
+  })
+})

package/dist/lib/nunjucks/moduk/components/summary-list/macro.njk

@@ -0,0 +1,5 @@
+{% from "govuk/components/summary-list/macro.njk" import govukSummaryList %}
+
+{% macro modukSummaryList(params) %}
+  {{ govukSummaryList(params) }}
+{% endmacro %}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moduk/frontend",
-  "version": "0.2.0-alpha.1",
+  "version": "0.2.0",
   "description": "The MOD.UK Frontend contains the code you need to start building a user interface for Ministry of Defence platforms and services.",
   "main": "dist/lib/index.js",
   "sass": "src/css/index.scss",