Checkboxes demo

demo/assets/src/scss/main.scss

@@ -17,6 +17,7 @@ $govuk-fonts-path: '/ui/.govuk-frontend/fonts/';
 @import '../../../../hmlr_design_system/components/back-link/style';
 @import '../../../../hmlr_design_system/components/button/style';
 @import '../../../../hmlr_design_system/components/button-alt/style';
+@import '../../../../hmlr_design_system/components/checkboxes/style';
 @import '../../../../hmlr_design_system/components/radios/style';
 @import '../../../../hmlr_design_system/components/text-input/style';
 @import '../../../../hmlr_design_system/components/footer/style';

hmlr_design_system/components/checkboxes/README.md

@@ -0,0 +1 @@
+# Checkboxes

hmlr_design_system/components/checkboxes/demos/demo.html

@@ -0,0 +1,163 @@
+{% from 'components/checkboxes/macro.html' import hmlrCheckboxes %}
+{% from "components/input/macro.html" import hmlrInput %}
+{% extends 'app/layout.html' %}
+
+{% set backurl = "/" %}
+
+{% block inner_content %}
+  {{ readme|markdown }}
+
+  <div class="govuk-grid-row">
+    <div class="govuk-grid-column-full">
+     {{ hmlrCheckboxes({
+      "idPrefix": "waste",
+      "name": "waste",
+      "fieldset": {
+        "legend": {
+          "text": "Which types of waste do you transport?",
+          "isPageHeading": False,
+          "classes": "hmlr-fieldset__legend--l"
+        }
+      },
+      "hint": {
+        "text": "Select all that apply."
+      },
+      "items": [
+        {
+          "value": "carcasses",
+          "text": "Waste from animal carcasses"
+        },
+        {
+          "value": "mines",
+          "text": "Waste from mines or quarries"
+        },
+        {
+          "value": "farm",
+          "text": "Farm or agricultural waste"
+        }
+      ]
+    }) }}
+
+    <h2 class="hmlr-heading-l">Checkbox items with hints</h2>
+
+    {{ hmlrCheckboxes({
+      "idPrefix": "nationality",
+      "name": "nationality",
+      "fieldset": {
+        "legend": {
+          "text": "What is your nationality?",
+          "isPageHeading": False,
+          "classes": "hmlr-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",
+            "classes": "hmlr-hint"
+          }
+        },
+        {
+          "value": "irish",
+          "text": "Irish",
+          "label": {
+            "classes": "hmlr-checkboxes__label"
+          }
+        },
+        {
+          "value": "other",
+          "text": "Citizen of another country"
+        }
+      ]
+    }) }}
+
+    <h2 class="hmlr-heading-m">Conditionally revealing content</h2>
+
+    {% set EmailHtml %}
+       {{ hmlrInput({
+        "id": "contact-by-email",
+        "name": "contact-by-email",
+        "type": "email",
+        "classes": "govuk-!-width-one-third",
+        "label": {
+          "text": "Email",
+          "classes": "hmlr-label"
+        }
+      }) }}
+    {% endset -%}
+
+    {% set PhoneHtml %}
+      {{ hmlrInput({
+        "id": "contact-by-phone",
+        "name": "contact-by-phone",
+        "type": "tel",
+        "classes": "govuk-!-width-one-third",
+        "label": {
+          "text": "Phone number",
+          "classes": "hmlr-label"
+        }
+      }) }}
+    {% endset -%}
+
+    {% set TextHtml %}
+      {{ hmlrInput({
+        "id": "contact-by-text",
+        "name": "contact-by-text",
+        "type": "tel",
+        "classes": "govuk-!-width-one-third",
+        "label": {
+          "text": "Mobile phone number",
+          "classes": "hmlr-label"
+        }
+      }) }}
+    {% endset -%}
+
+    {{ hmlrCheckboxes({
+      "classes": "govuk-checkboxes--conditional",
+      "attributes": {
+        "data-module": "checkboxes"
+      },
+      "idPrefix": "citizenship-conditional",
+      "name": "citizen",
+      "fieldset": {
+        "legend": {
+          "text": "How would you like to be contacted?",
+          "isPageHeading": False,
+          "classes": "hmlr-fieldset__legend--l"
+        }
+      },
+      "hint": {
+        "text": "Select all options that are relevant to you."
+      },
+      "items": [
+        {
+          "value": "email",
+          "text": "Email",
+          "conditional": {
+            "html": EmailHtml
+          }
+        },
+        {
+          "value": "phone",
+          "text": "Phone",
+          "conditional": {
+            "html": PhoneHtml
+          }
+        },
+        {
+          "value": "text message",
+          "text": "Text message",
+          "conditional": {
+            "html": TextHtml
+          }
+        }
+      ]
+    }) }}
+    </div>
+  </div>
+{% endblock %}

hmlr_design_system/components/checkboxes/macro.html

@@ -0,0 +1,6 @@
+{% from "app/vendor/.govuk-frontend/components/checkboxes/macro.html" import govukCheckboxes %}
+
+{% macro hmlrCheckboxes(params={}) %}
+  {% set _ = params.update({'classes': ['hmlr-checkboxes', params.classes]|join(" ") }) %}
+  {{govukCheckboxes(params)}}
+{% endmacro %}

hmlr_design_system/components/checkboxes/style.scss

@@ -0,0 +1,41 @@
+.hmlr-checkboxes {
+
+  .govuk-checkboxes__item {
+    min-height: 26px;
+    padding: 0 0 0 26px;
+
+    .govuk-checkboxes__input {
+      width: 26px;
+      height: 26px;
+
+      +.govuk-checkboxes__label {
+        font-size: $font-size;
+        padding: 0px 10px;
+
+        &:before {
+          width: 26px;
+          height: 26px;
+        }
+
+        &:after {
+          top: 8px;
+          left: 6px;
+          border-width: 0 0 4px 4px;
+          width: 14px;
+          height: 7px;
+        }
+      }
+    }
+
+    .govuk-checkboxes__hint {
+      padding: 0 10px;
+    }
+  }
+
+  .govuk-checkboxes__conditional {
+    margin-left: 11px;
+    padding-left: 22px;
+    border-left: 3px solid $border;
+  }
+}
+

hmlr_design_system/components/input/README.md

@@ -0,0 +1 @@
+# Input

hmlr_design_system/components/input/macro.html

@@ -0,0 +1,6 @@
+{% from "app/vendor/.govuk-frontend/components/input/macro.html" import govukInput %}
+
+{% macro hmlrInput(params={}) %}
+  {% set _ = params.update({'classes': ['hmlr-input', params.classes]|join(" ") }) %}
+  {{govukInput(params)}}
+{% endmacro %}

hmlr_design_system/settings/global.scss

@@ -45,6 +45,10 @@ html {
   font-size: 19px;
 }
 
+.govuk-fieldset__heading {
+  font-size: 28px;
+}
+
 .hmlr-body {
   font-size: $font-size;
 }

hmlr_design_system/settings/variables.scss

@@ -14,3 +14,4 @@ $font-size: 16px;
 $meta-font-size: 14px;
 $font-color: #0b0c0c;
 $font-color--secondary: #6f777b;
+$border: #bfc1c3;