@moduk/frontend 1.2.0 → 1.3.0

package/nunjucks/moduk/components/summary-list/__examples__/cards-with-action.njk

@@ -0,0 +1,83 @@
+{% from "moduk/components/summary-list/macro.njk" import modukSummaryList -%}
+
+<div>
+{{ modukSummaryList({
+  card: {
+    title: {
+      text: "University of Gloucestershire"
+    },
+    actions: {
+      items: [
+        {
+          href: "#",
+          text: "Delete choice",
+          visuallyHiddenText: "of University of Gloucestershire"
+        },
+        {
+          href: "#",
+          text: "Withdraw",
+          visuallyHiddenText: "from University of Gloucestershire"
+        }
+      ]
+    }
+  },
+  rows: [
+    {
+      key: {
+        text: "Course"
+      },
+      value: {
+        html: "English (3DMD)<br>PGCE with QTS full time"
+      }
+    },
+    {
+      key: {
+        text: "Location"
+      },
+      value: {
+        html: "School name<br>Road, City, SW1 1AA"
+      }
+    }
+  ]
+}) -}}
+
+{{ modukSummaryList({
+  card: {
+    title: {
+      text: "University of Bristol"
+    },
+    actions: {
+      items: [
+        {
+          href: "#",
+          text: "Delete choice",
+          visuallyHiddenText: "of University of Bristol"
+        },
+        {
+          href: "#",
+          text: "Withdraw",
+          visuallyHiddenText: "from University of Bristol"
+        }
+      ]
+    }
+  },
+  rows: [
+    {
+      key: {
+        text: "Course"
+      },
+      value: {
+        html: "English (Q3X1)<br>PGCE with QTS full time"
+      }
+    },
+    {
+      key: {
+        text: "Location"
+      },
+      value: {
+        html: "School name<br>Road, City, SW2 1AA"
+      }
+    }
+  ]
+}) -}}
+</div>

package/nunjucks/moduk/components/summary-list/__examples__/cards.njk

@@ -0,0 +1,221 @@
+{% from "moduk/components/summary-list/macro.njk" import modukSummaryList -%}
+
+<div>
+
+{{ modukSummaryList({
+  card: {
+    title: {
+      text: "Lead tenant"
+    }
+  },
+  rows: [
+    {
+      key: {
+        text: "Age"
+      },
+      value: {
+        html: "38"
+      },
+      actions: {
+        items: [
+          {
+            href: "#",
+            text: "Change",
+            visuallyHiddenText: "age"
+          }
+        ]
+      }
+    },
+    {
+      key: {
+        text: "Nationality"
+      },
+      value: {
+        html: "UK national resident in UK"
+      },
+      actions: {
+        items: [
+          {
+            href: "#",
+            text: "Change",
+            visuallyHiddenText: "nationality"
+          }
+        ]
+      }
+    },
+    {
+      key: {
+        text: "Working situation"
+      },
+      value: {
+        html: "Part time – less than 30 hours a week"
+      },
+      actions: {
+        items: [
+          {
+            href: "#",
+            text: "Change",
+            visuallyHiddenText: "working situation"
+          }
+        ]
+      }
+    }
+  ]
+}) -}}
+
+{{ modukSummaryList({
+  card: {
+    title: {
+      text: "Person 2"
+    }
+  },
+  rows: [
+    {
+      key: {
+        text: "Details known"
+      },
+      value: {
+        html: "Yes"
+      },
+      actions: {
+        items: [
+          {
+            href: "#",
+            text: "Change",
+            visuallyHiddenText: "whether details are known"
+          }
+        ]
+      }
+    },
+    {
+      key: {
+        text: "Relationship to lead tenant"
+      },
+      value: {
+        html: "Partner"
+      },
+      actions: {
+        items: [
+          {
+            href: "#",
+            text: "Change",
+            visuallyHiddenText: "relationship to lead tenant"
+          }
+        ]
+      }
+    },
+    {
+      key: {
+        text: "Age"
+      },
+      value: {
+        html: "42"
+      },
+      actions: {
+        items: [
+          {
+            href: "#",
+            text: "Change",
+            visuallyHiddenText: "age"
+          }
+        ]
+      }
+    },
+    {
+      key: {
+        text: "Working situation"
+      },
+      value: {
+        html: "Unable to work because of long-term sickness or disability"
+      },
+      actions: {
+        items: [
+          {
+            href: "#",
+            text: "Change",
+            visuallyHiddenText: "working situation"
+          }
+        ]
+      }
+    }
+  ]
+}) -}}
+
+{{ modukSummaryList({
+  card: {
+    title: {
+      text: "Person 3"
+    }
+  },
+  rows: [
+    {
+      key: {
+        text: "Details known"
+      },
+      value: {
+        html: "Yes"
+      },
+      actions: {
+        items: [
+          {
+            href: "#",
+            text: "Change",
+            visuallyHiddenText: "whether details are known"
+          }
+        ]
+      }
+    },
+    {
+      key: {
+        text: "Relationship to lead tenant"
+      },
+      value: {
+        html: "Child"
+      },
+      actions: {
+        items: [
+          {
+            href: "#",
+            text: "Change",
+            visuallyHiddenText: "relationship to lead tenant"
+          }
+        ]
+      }
+    },
+    {
+      key: {
+        text: "Age"
+      },
+      value: {
+        html: "7"
+      },
+      actions: {
+        items: [
+          {
+            href: "#",
+            text: "Change",
+            visuallyHiddenText: "age"
+          }
+        ]
+      }
+    },
+    {
+      key: {
+        text: "Working situation"
+      },
+      value: {
+        html: "Child under 16"
+      },
+      actions: {
+        items: [
+          {
+            href: "#",
+            text: "Change",
+            visuallyHiddenText: "working situation"
+          }
+        ]
+      }
+    }
+  ]
+}) -}}
+</div>

package/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/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/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/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/nunjucks/moduk/components/table/__examples__/default.njk

@@ -0,0 +1,41 @@
+{% from "moduk/components/table/macro.njk" import modukTable -%}
+
+{{ modukTable({
+  caption: "Dates and amounts",
+  captionClasses: "govuk-table__caption--m",
+  firstCellIsHeader: true,
+  head: [
+    {
+      text: "Date"
+    },
+    {
+      text: "Amount"
+    }
+  ],
+  rows: [
+    [
+      {
+        text: "First 6 weeks"
+      },
+      {
+        text: "£109.80 per week"
+      }
+    ],
+    [
+      {
+        text: "Next 33 weeks"
+      },
+      {
+        text: "£109.80 per week"
+      }
+    ],
+    [
+      {
+        text: "Total estimated pay"
+      },
+      {
+        text: "£4,282.20"
+      }
+    ]
+  ]
+}) -}}

package/nunjucks/moduk/components/table/__examples__/with-comparative-numbers.njk

@@ -0,0 +1,61 @@
+{% from "moduk/components/table/macro.njk" import modukTable -%}
+
+{{ modukTable({
+  caption: "Users by role",
+  captionClasses: "govuk-table__caption--m",
+  firstCellIsHeader: true,
+  head: [
+    {
+      text: "Role"
+    },
+    {
+      text: "Application A",
+      format: "numeric"
+    },
+    {
+      text: "Application B",
+      format: "numeric"
+    }
+  ],
+  rows: [
+    [
+      {
+        text: "Developer"
+      },
+      {
+        text: "10",
+        format: "numeric"
+      },
+      {
+        text: "25",
+        format: "numeric"
+      }
+    ],
+    [
+      {
+        text: "User researcher"
+      },
+      {
+        text: "25",
+        format: "numeric"
+      },
+      {
+        text: "10",
+        format: "numeric"
+      }
+    ],
+    [
+      {
+        text: "Delivery manager"
+      },
+      {
+        text: "5",
+        format: "numeric"
+      },
+      {
+        text: "10",
+        format: "numeric"
+      }
+    ]
+  ]
+}) -}}

package/nunjucks/moduk/components/table/__examples__/with-customised-column-widths.njk

@@ -0,0 +1,56 @@
+{% from "moduk/components/table/macro.njk" import modukTable -%}
+
+{{ modukTable({
+  caption: "Active users by role",
+  captionClasses: "govuk-table__caption--m",
+  firstCellIsHeader: true,
+  head: [
+    {
+      text: "Role",
+      classes: 'govuk-!-width-one-half'
+    },
+    {
+      text: "Application A",
+      classes: 'govuk-!-width-one-quarter'
+    },
+    {
+      text: "Application B",
+      classes: 'govuk-!-width-one-quarter'
+    }
+  ],
+  rows: [
+    [
+      {
+        text: "Developer"
+      },
+      {
+        text: "10 per day"
+      },
+      {
+        text: "25 per day"
+      }
+    ],
+    [
+      {
+        text: "User researcher"
+      },
+      {
+        text: "25 per day"
+      },
+      {
+        text: "10 per day"
+      }
+    ],
+    [
+      {
+        text: "Delivery manager"
+      },
+      {
+        text: "5 per day"
+      },
+      {
+        text: "10 per day"
+      }
+    ]
+  ]
+}) -}}

package/nunjucks/moduk/components/table/__examples__/with-large-caption.njk

@@ -0,0 +1,41 @@
+{% from "moduk/components/table/macro.njk" import modukTable -%}
+
+{{ modukTable({
+  caption: "Dates and amounts",
+  captionClasses: "govuk-table__caption--l",
+  firstCellIsHeader: true,
+  head: [
+    {
+      text: "Date"
+    },
+    {
+      text: "Amount"
+    }
+  ],
+  rows: [
+    [
+      {
+        text: "First 6 weeks"
+      },
+      {
+        text: "£109.80 per week"
+      }
+    ],
+    [
+      {
+        text: "Next 33 weeks"
+      },
+      {
+        text: "£109.80 per week"
+      }
+    ],
+    [
+      {
+        text: "Total estimated pay"
+      },
+      {
+        text: "£4,282.20"
+      }
+    ]
+  ]
+}) -}}

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

@@ -0,0 +1,5 @@
+{% from "govuk/components/table/macro.njk" import govukTable %}
+
+{% macro modukTable(params) -%}
+  {{ govukTable(params) }}
+{%- endmacro %}