From 2b2e3bea4a29ad86fec23a054f086cc300514210 Mon Sep 17 00:00:00 2001
From: Michael Jones <michaelj@kainos.com>
Date: Mon, 4 Mar 2019 10:48:56 +0000
Subject: [PATCH 1/7] added checkoboxes demo

---
 .../components/checkboxes/README.md           |  1 +
 .../components/checkboxes/demos/demo.html     | 39 +++++++++++++++++++
 .../components/checkboxes/macro.html          |  6 +++
 3 files changed, 46 insertions(+)
 create mode 100644 hmlr_design_system/components/checkboxes/README.md
 create mode 100644 hmlr_design_system/components/checkboxes/demos/demo.html
 create mode 100644 hmlr_design_system/components/checkboxes/macro.html

diff --git a/hmlr_design_system/components/checkboxes/README.md b/hmlr_design_system/components/checkboxes/README.md
new file mode 100644
index 0000000..3ab2f80
--- /dev/null
+++ b/hmlr_design_system/components/checkboxes/README.md
@@ -0,0 +1 @@
+# Checkboxes
diff --git a/hmlr_design_system/components/checkboxes/demos/demo.html b/hmlr_design_system/components/checkboxes/demos/demo.html
new file mode 100644
index 0000000..5f7e0ba
--- /dev/null
+++ b/hmlr_design_system/components/checkboxes/demos/demo.html
@@ -0,0 +1,39 @@
+{% from 'components/checkboxes/macro.html' import hmlrCheckboxes %}
+{% extends 'app/layout.html' %}
+
+{% 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": "govuk-fieldset__legend--xl"
+        }
+      },
+      "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"
+        }
+      ]
+    }) }}
+    </div>
+  </div>
+{% endblock %}
diff --git a/hmlr_design_system/components/checkboxes/macro.html b/hmlr_design_system/components/checkboxes/macro.html
new file mode 100644
index 0000000..ff59479
--- /dev/null
+++ b/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 %}

From 803ddfc26809d124b6d3f0be7e0bfbe27ce83019 Mon Sep 17 00:00:00 2001
From: Michael Jones <michaelj@kainos.com>
Date: Mon, 4 Mar 2019 14:17:17 +0000
Subject: [PATCH 2/7] added styles for checkboxes

---
 demo/assets/src/scss/main.scss                |  1 +
 .../components/checkboxes/demos/demo.html     | 39 ++++++++++++++++++-
 .../components/checkboxes/style.scss          | 36 +++++++++++++++++
 hmlr_design_system/settings/global.scss       |  8 ++--
 4 files changed, 79 insertions(+), 5 deletions(-)
 create mode 100644 hmlr_design_system/components/checkboxes/style.scss

diff --git a/demo/assets/src/scss/main.scss b/demo/assets/src/scss/main.scss
index 63c8e6d..7c4197f 100644
--- a/demo/assets/src/scss/main.scss
+++ b/demo/assets/src/scss/main.scss
@@ -17,5 +17,6 @@ $govuk-font-family: "Arial", sans-serif;
 @import '../../../../hmlr_design_system/components/header/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/footer/style';
diff --git a/hmlr_design_system/components/checkboxes/demos/demo.html b/hmlr_design_system/components/checkboxes/demos/demo.html
index 5f7e0ba..2d2af60 100644
--- a/hmlr_design_system/components/checkboxes/demos/demo.html
+++ b/hmlr_design_system/components/checkboxes/demos/demo.html
@@ -13,7 +13,7 @@
         "legend": {
           "text": "Which types of waste do you transport?",
           "isPageHeading": False,
-          "classes": "govuk-fieldset__legend--xl"
+          "classes": "hmlr-fieldset__legend--l"
         }
       },
       "hint": {
@@ -34,6 +34,43 @@
         }
       ]
     }) }}
+
+    <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"
+          }
+        },
+        {
+          "value": "irish",
+          "text": "Irish",
+          "label": {
+            "classes": "hmlr-checkboxes__label"
+          }
+        },
+        {
+          "value": "other",
+          "text": "Citizen of another country"
+        }
+      ]
+    }) }}
     </div>
   </div>
 {% endblock %}
diff --git a/hmlr_design_system/components/checkboxes/style.scss b/hmlr_design_system/components/checkboxes/style.scss
new file mode 100644
index 0000000..18aba32
--- /dev/null
+++ b/hmlr_design_system/components/checkboxes/style.scss
@@ -0,0 +1,36 @@
+.hmlr-checkboxes {
+
+  .govuk-checkboxes__item {
+    min-height: 26px;
+    padding: 0 0 0 26px;
+
+    .govuk-checkboxes__input {
+      width: 26px;
+      height: 26px;
+
+      +.govuk-checkboxes__label {
+
+        &:before {
+          width: 26px !important;
+          height: 26px !important;
+        }
+
+        &:after {
+          top: 7px !important;
+          left: 6px !important;
+          border-width: 0 0 3px 3px !important;
+        }
+      }
+    }
+  }
+
+  .govuk-checkboxes__label {
+    font-size: $font-size;
+    padding: 0px 10px;
+  }
+}
+
+.govuk-checkboxes__input+.govuk-checkboxes__label:before {
+  width: 26px !important;
+  height: 26px !important;
+}
diff --git a/hmlr_design_system/settings/global.scss b/hmlr_design_system/settings/global.scss
index 1a5a565..1dd207f 100644
--- a/hmlr_design_system/settings/global.scss
+++ b/hmlr_design_system/settings/global.scss
@@ -12,10 +12,6 @@ html {
   font-size: 28px;
 }
 
-.govuk-fieldset__heading {
-  font-size: 28px;
-}
-
 .hmlr-heading-m {
   @extend %govuk-heading-m;
   font-size: 24px;
@@ -26,6 +22,10 @@ html {
   font-size: 19px;
 }
 
+.govuk-fieldset__heading {
+  font-size: 28px;
+}
+
 .hmlr-body {
   font-size: $font-size;
 }

From a8219ce4d1851cb3f5639e2d2b3abcfa03275ce2 Mon Sep 17 00:00:00 2001
From: Michael Jones <michaelj@kainos.com>
Date: Mon, 4 Mar 2019 15:30:49 +0000
Subject: [PATCH 3/7] added conditional content (wip)

---
 .../components/checkboxes/demos/demo.html     | 93 ++++++++++++++++++-
 .../components/checkboxes/style.scss          | 26 +++---
 hmlr_design_system/components/input/README.md |  1 +
 .../components/input/demos/demo.html          |  0
 .../components/input/macro.html               |  6 ++
 5 files changed, 112 insertions(+), 14 deletions(-)
 create mode 100644 hmlr_design_system/components/input/README.md
 create mode 100644 hmlr_design_system/components/input/demos/demo.html
 create mode 100644 hmlr_design_system/components/input/macro.html

diff --git a/hmlr_design_system/components/checkboxes/demos/demo.html b/hmlr_design_system/components/checkboxes/demos/demo.html
index 2d2af60..0af6aa8 100644
--- a/hmlr_design_system/components/checkboxes/demos/demo.html
+++ b/hmlr_design_system/components/checkboxes/demos/demo.html
@@ -1,4 +1,5 @@
 {% from 'components/checkboxes/macro.html' import hmlrCheckboxes %}
+{% from "components/input/macro.html" import hmlrInput %}
 {% extends 'app/layout.html' %}
 
 {% block inner_content %}
@@ -55,7 +56,8 @@ <h2 class="hmlr-heading-l">Checkbox items with hints</h2>
           "value": "british",
           "text": "British",
           "hint": {
-            "text": "including English, Scottish, Welsh and Northern Irish"
+            "text": "including English, Scottish, Welsh and Northern Irish",
+            "classes": "hmlr-hint"
           }
         },
         {
@@ -71,6 +73,95 @@ <h2 class="hmlr-heading-l">Checkbox items with hints</h2>
         }
       ]
     }) }}
+
+    <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 address"
+        },
+        "attributes": {
+          "spellcheck": "false"
+        }
+      }) }}
+    {% endset -%}
+
+    {% set PhoneHtml %}
+      {{ hmlrInput({
+        "id": "contact-by-phone",
+        "name": "contact-by-phone",
+        "type": "tel",
+        "classes": "govuk-!-width-one-third",
+        "label": {
+          "text": "Phone number"
+        }
+      }) }}
+    {% endset -%}
+
+    {% set TextHtml %}
+      {{ hmlrInput({
+        "id": "contact-by-text",
+        "name": "contact-by-text",
+        "type": "tel",
+        "classes": "govuk-!-width-one-third",
+        "label": {
+          "text": "Mobile phone number"
+        }
+      }) }}
+    {% endset -%}
+
+    {{ hmlrCheckboxes({
+      "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
+          }
+        }
+      ]
+    }) }}
+
+    {{ hmlrInput({
+        "id": "contact-by-text",
+        "name": "contact-by-text",
+        "type": "tel",
+        "classes": "govuk-!-width-one-third",
+        "label": {
+          "text": "Mobile phone number"
+        }
+      }) }}
     </div>
   </div>
 {% endblock %}
diff --git a/hmlr_design_system/components/checkboxes/style.scss b/hmlr_design_system/components/checkboxes/style.scss
index 18aba32..9ddc684 100644
--- a/hmlr_design_system/components/checkboxes/style.scss
+++ b/hmlr_design_system/components/checkboxes/style.scss
@@ -9,28 +9,28 @@
       height: 26px;
 
       +.govuk-checkboxes__label {
+        font-size: $font-size;
+        padding: 0px 10px;
 
         &:before {
-          width: 26px !important;
-          height: 26px !important;
+          width: 26px;
+          height: 26px;
         }
 
         &:after {
-          top: 7px !important;
-          left: 6px !important;
-          border-width: 0 0 3px 3px !important;
+          top: 8px;
+          left: 6px;
+          border-width: 0 0 4px 4px;
+          width: 14px;
+          height: 7px;
         }
       }
     }
-  }
 
-  .govuk-checkboxes__label {
-    font-size: $font-size;
-    padding: 0px 10px;
+    .govuk-checkboxes__hint {
+      padding: 0 10px;
+    }
+
   }
 }
 
-.govuk-checkboxes__input+.govuk-checkboxes__label:before {
-  width: 26px !important;
-  height: 26px !important;
-}
diff --git a/hmlr_design_system/components/input/README.md b/hmlr_design_system/components/input/README.md
new file mode 100644
index 0000000..135b6af
--- /dev/null
+++ b/hmlr_design_system/components/input/README.md
@@ -0,0 +1 @@
+# Input
diff --git a/hmlr_design_system/components/input/demos/demo.html b/hmlr_design_system/components/input/demos/demo.html
new file mode 100644
index 0000000..e69de29
diff --git a/hmlr_design_system/components/input/macro.html b/hmlr_design_system/components/input/macro.html
new file mode 100644
index 0000000..ae5355f
--- /dev/null
+++ b/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 %}

From 872fdd329e6dcac18c69ea00e1f3d8d13f0137bf Mon Sep 17 00:00:00 2001
From: Michael Jones <michaelj@kainos.com>
Date: Tue, 5 Mar 2019 07:16:23 +0000
Subject: [PATCH 4/7] conditionally revealed content

---
 .../components/checkboxes/demos/demo.html       | 17 ++++-------------
 1 file changed, 4 insertions(+), 13 deletions(-)

diff --git a/hmlr_design_system/components/checkboxes/demos/demo.html b/hmlr_design_system/components/checkboxes/demos/demo.html
index 0af6aa8..9b6f192 100644
--- a/hmlr_design_system/components/checkboxes/demos/demo.html
+++ b/hmlr_design_system/components/checkboxes/demos/demo.html
@@ -77,18 +77,7 @@ <h2 class="hmlr-heading-l">Checkbox items with hints</h2>
     <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 address"
-        },
-        "attributes": {
-          "spellcheck": "false"
-        }
-      }) }}
+      <p>test</p>
     {% endset -%}
 
     {% set PhoneHtml %}
@@ -147,7 +136,7 @@ <h2 class="hmlr-heading-m">Conditionally revealing content</h2>
           "value": "text message",
           "text": "Text message",
           "conditional": {
-            "html": TextHtml
+            Html: TextHtml
           }
         }
       ]
@@ -162,6 +151,8 @@ <h2 class="hmlr-heading-m">Conditionally revealing content</h2>
           "text": "Mobile phone number"
         }
       }) }}
+
+      {{ TextHtml }}
     </div>
   </div>
 {% endblock %}

From d327e78047dc18d0f2ed43766d3717b012fb096b Mon Sep 17 00:00:00 2001
From: Michael Jones <michaelj@kainos.com>
Date: Tue, 5 Mar 2019 07:17:40 +0000
Subject: [PATCH 5/7] removed variables output

---
 hmlr_design_system/components/checkboxes/demos/demo.html | 2 --
 1 file changed, 2 deletions(-)

diff --git a/hmlr_design_system/components/checkboxes/demos/demo.html b/hmlr_design_system/components/checkboxes/demos/demo.html
index 9b6f192..7ddd916 100644
--- a/hmlr_design_system/components/checkboxes/demos/demo.html
+++ b/hmlr_design_system/components/checkboxes/demos/demo.html
@@ -151,8 +151,6 @@ <h2 class="hmlr-heading-m">Conditionally revealing content</h2>
           "text": "Mobile phone number"
         }
       }) }}
-
-      {{ TextHtml }}
     </div>
   </div>
 {% endblock %}

From 49b24d4ff1e7eaa19c7e02fdcf374108f7cbd622 Mon Sep 17 00:00:00 2001
From: Michael Jones <michaelj@kainos.com>
Date: Tue, 12 Mar 2019 08:30:13 +0000
Subject: [PATCH 6/7] added conditional content for checkboxes

---
 .../components/checkboxes/demos/demo.html     | 35 +++++++++++--------
 .../components/checkboxes/style.scss          |  5 +++
 hmlr_design_system/settings/variables.scss    |  1 +
 3 files changed, 27 insertions(+), 14 deletions(-)

diff --git a/hmlr_design_system/components/checkboxes/demos/demo.html b/hmlr_design_system/components/checkboxes/demos/demo.html
index 7ddd916..fa9155c 100644
--- a/hmlr_design_system/components/checkboxes/demos/demo.html
+++ b/hmlr_design_system/components/checkboxes/demos/demo.html
@@ -2,6 +2,8 @@
 {% from "components/input/macro.html" import hmlrInput %}
 {% extends 'app/layout.html' %}
 
+{% set backurl = "/" %}
+
 {% block inner_content %}
   {{ readme|markdown }}
 
@@ -77,7 +79,16 @@ <h2 class="hmlr-heading-l">Checkbox items with hints</h2>
     <h2 class="hmlr-heading-m">Conditionally revealing content</h2>
 
     {% set EmailHtml %}
-      <p>test</p>
+       {{ 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 %}
@@ -87,7 +98,8 @@ <h2 class="hmlr-heading-m">Conditionally revealing content</h2>
         "type": "tel",
         "classes": "govuk-!-width-one-third",
         "label": {
-          "text": "Phone number"
+          "text": "Phone number",
+          "classes": "hmlr-label"
         }
       }) }}
     {% endset -%}
@@ -99,12 +111,17 @@ <h2 class="hmlr-heading-m">Conditionally revealing content</h2>
         "type": "tel",
         "classes": "govuk-!-width-one-third",
         "label": {
-          "text": "Mobile phone number"
+          "text": "Mobile phone number",
+          "classes": "hmlr-label"
         }
       }) }}
     {% endset -%}
 
     {{ hmlrCheckboxes({
+      "classes": "govuk-checkboxes--conditional",
+      "attributes": {
+        "data-module": "checkboxes"
+      },
       "idPrefix": "citizenship-conditional",
       "name": "citizen",
       "fieldset": {
@@ -136,21 +153,11 @@ <h2 class="hmlr-heading-m">Conditionally revealing content</h2>
           "value": "text message",
           "text": "Text message",
           "conditional": {
-            Html: TextHtml
+            "html": TextHtml
           }
         }
       ]
     }) }}
-
-    {{ hmlrInput({
-        "id": "contact-by-text",
-        "name": "contact-by-text",
-        "type": "tel",
-        "classes": "govuk-!-width-one-third",
-        "label": {
-          "text": "Mobile phone number"
-        }
-      }) }}
     </div>
   </div>
 {% endblock %}
diff --git a/hmlr_design_system/components/checkboxes/style.scss b/hmlr_design_system/components/checkboxes/style.scss
index 9ddc684..4aa86cb 100644
--- a/hmlr_design_system/components/checkboxes/style.scss
+++ b/hmlr_design_system/components/checkboxes/style.scss
@@ -30,7 +30,12 @@
     .govuk-checkboxes__hint {
       padding: 0 10px;
     }
+  }
 
+  .govuk-checkboxes__conditional {
+    margin-left: 11px;
+    padding-left: 22px;
+    border-left: 3px solid $border;
   }
 }
 
diff --git a/hmlr_design_system/settings/variables.scss b/hmlr_design_system/settings/variables.scss
index 21c7d02..3229838 100644
--- a/hmlr_design_system/settings/variables.scss
+++ b/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;

From 274485259f3b92d5e59538e2f62b09a9d803927d Mon Sep 17 00:00:00 2001
From: Michael Jones <michaelj@kainos.com>
Date: Tue, 12 Mar 2019 11:52:24 +0000
Subject: [PATCH 7/7] change requests

---
 hmlr_design_system/components/checkboxes/style.scss | 4 ++--
 hmlr_design_system/settings/variables.scss          | 1 -
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/hmlr_design_system/components/checkboxes/style.scss b/hmlr_design_system/components/checkboxes/style.scss
index 4aa86cb..1b881f9 100644
--- a/hmlr_design_system/components/checkboxes/style.scss
+++ b/hmlr_design_system/components/checkboxes/style.scss
@@ -8,7 +8,7 @@
       width: 26px;
       height: 26px;
 
-      +.govuk-checkboxes__label {
+      + .govuk-checkboxes__label {
         font-size: $font-size;
         padding: 0px 10px;
 
@@ -35,7 +35,7 @@
   .govuk-checkboxes__conditional {
     margin-left: 11px;
     padding-left: 22px;
-    border-left: 3px solid $border;
+    border-width: 3px;
   }
 }
 
diff --git a/hmlr_design_system/settings/variables.scss b/hmlr_design_system/settings/variables.scss
index 3229838..21c7d02 100644
--- a/hmlr_design_system/settings/variables.scss
+++ b/hmlr_design_system/settings/variables.scss
@@ -14,4 +14,3 @@ $font-size: 16px;
 $meta-font-size: 14px;
 $font-color: #0b0c0c;
 $font-color--secondary: #6f777b;
-$border: #bfc1c3;