Add question mode for date inputs (#210)

* Add question mode for date inputs

* Change date input non question legend size

src/components/date-input/_macro-options.md

@@ -9,6 +9,7 @@
 | year              | DateField                                                     | false    | Config for the year field. If this isn't provided then a year field will not render                          |
 | mutuallyExclusive | `MutuallyExclusive` [_(ref)_](/components/mutually-exclusive) | false    | Configuration object if this is a mutually exclusive list                                                    |
 | legendClasses     | string                                                        | false    | Classes to apply to the legend                                                                               |
+| questionMode      | boolean                                                       | false    | Whether to change the visual layout of the input to a survey question                                        |
 
 ## DateField
 

src/components/date-input/_template.njk

@@ -6,11 +6,20 @@
     {% set exclusiveClass = " js-exclusive-group" %}
 {% endif %}
 
+{% if params.questionMode %}
+    {% set legend = "<h1>" + params.legend + "</h1>" %}
+    {% set classes = "field--question" + (" " + params.classes if params.classes) %}
+{% else %}
+    {% set legend = params.legend %}
+    {% set classes = "field--date" + (" " + params.classes if params.classes) %}
+{% endif %}
+
 {% call onsField({
     "id": params.id,
-    "legend": params.legend,
+    "legend": legend,
     "description": params.description,
-    "classes": params.classes,
+    "classes": classes,
+    "descriptionClasses": descriptionClasses | default(""),
     "legendClasses": params.legendClasses,
     "mutuallyExclusive": params.mutuallyExclusive
 }) %}
@@ -27,8 +36,7 @@
                     "max": 31,
                     "attributes": params.day.attributes,
                     "label": {
-                        "text": params.day.label,
-                        "classes": "u-fs-r"
+                        "text": params.day.label
                     },
                     "value": params.day.value
                 })
@@ -47,8 +55,7 @@
                     "max": 12,
                     "attributes": params.month.attributes,
                     "label": {
-                        "text": params.month.label,
-                        "classes": "u-fs-r"
+                        "text": params.month.label
                     },
                     "value": params.month.value
                 })
@@ -67,8 +74,7 @@
                     "max": 3000,
                     "attributes": params.year.attributes,
                     "label": {
-                        "text": params.year.label,
-                        "classes": "u-fs-r"
+                        "text": params.year.label
                     },
                     "value": params.year.value
                 })

src/components/date-input/examples/date-input-question/index.njk

@@ -0,0 +1,22 @@
+{% from "components/date-input/_macro.njk" import onsDateInput %}
+
+{{
+    onsDateInput({
+        "id": "date-question",
+        "questionMode": true,
+        "legend": "What is your date of birth?",
+        "description": "For example, 31 3 1980",
+        "day": {
+            "label": "Day",
+            "name": "day"
+        },
+        "month": {
+            "label": "Month",
+            "name": "month"
+        },
+        "year": {
+            "label": "Year",
+            "name": "year"
+        }
+    })
+}}

src/components/date-input/index.njk

@@ -25,6 +25,14 @@ A `<div>` with `field_description` class is used to provide an example of the re
 
 Each field uses the `input--w-<number>` class to set the known number of digits required for each field.
 
+### Using a date input as a question
+
+If you need to use a date input as a question (e.g. in eq-runner), you can tell the macro that the component is being used as a question which will change the layout of the component. This can be achieved by setting the `questionMode` parameter to true.
+
+{{
+    patternlibExample({"path": "components/date-input/examples/date-input-question/index.njk"})
+}}
+
 {% from "components/panel/_macro.njk" import onsPanel %}
 {{
     onsPanel({

src/components/field/_field.scss

@@ -1,30 +1,30 @@
 .field {
   background: none;
-}
 
-.field__legend {
-  margin-bottom: 0.5rem;
-  font-size: 1rem;
-  font-weight: $font-weight-bold;
-}
+  &__legend {
+    margin-bottom: 0.5rem;
+    font-size: 1rem;
+    font-weight: $font-weight-bold;
+  }
 
-.field__label {
-  margin-bottom: 0.5rem;
-}
+  &__label {
+    margin-bottom: 0.5rem;
+  }
 
-.field__description {
-  margin-bottom: 0.5em;
-}
+  &__description {
+    margin-bottom: 0.5em;
+  }
 
-.field__group {
-  @extend .u-cf;
-}
+  &__group {
+    @extend .u-cf;
+  }
 
-.field__item {
-  display: table;
-  position: relative;
+  &__item {
+    display: table;
+    position: relative;
+  }
 
-  .field > & {
+  & > &__item {
     margin: 0 0.5rem 0.5rem 0;
     width: 100%;
 
@@ -36,31 +36,43 @@
     }
   }
 
-  .field__group > & {
+  &__group > &__item {
     float: left;
     margin: 0 1rem 1rem 0;
+
+    &:last-of-type {
+      margin-right: 0;
+    }
   }
 
-  .field__group > &:last-of-type {
-    margin-right: 0;
+  &__other {
+    display: none;
+    clear: both;
+    padding: 0 0.5rem 0.5rem;
+    background-color: $color-grey-4;
+
+    input:checked ~ & {
+      display: block;
+    }
   }
-}
 
-@include input-width('field__item--w-{x}');
+  // Modifiers
+  &--question & {
+    &__legend h1 {
+      @extend .u-fs-l;
+      margin-bottom: 0;
+    }
 
-.field:not(.field--cols) {
-  .field__item:last-of-type {
-    margin-bottom: 0;
+    &__description {
+      @extend .u-mb-m;
+    }
   }
-}
 
-.field__other {
-  display: none;
-  clear: both;
-  background-color: $color-grey-4;
-  padding: 0 0.5rem 0.5rem;
+  &--date & {
+    &__legend {
+      @extend .u-fs-m;
+    }
+  }
 }
 
-input:checked ~ .field__other {
-  display: block;
-}
+@include input-width('field__item--w-{x}');

src/components/field/_template.njk

@@ -2,7 +2,7 @@
     <fieldset{% if params.id %} id="{{ params.id }}"{% endif %} class="field{% if params.mutuallyExclusive %} field--exclusive{% endif %}{% if params.classes %} {{ params.classes }}{% endif %}"{% if params.description %} aria-describedby="{{ params.id }}-description"{% endif %}>
         <legend class="field__legend {{ params.legendClasses }}">{{ params.legend | safe }}</legend>
         {% if params.description %}
-            <div id="{{ params.id }}-description" class="field__description u-fs-s--b u-fw-n">{{ params.description }}</div>
+            <div id="{{ params.id }}-description" class="field__description">{{ params.description }}</div>
         {% endif %}
         {{ caller() }}
         {% if params.mutuallyExclusive %}
@@ -30,7 +30,7 @@
         <div{% if params.id %} id="{{ params.id }}"{% endif %} class="field{% if params.classes %} {{ params.classes }}{% endif %}">
     {% endif %}
         {% if params.description %}
-            <div class="field__description u-fs-s--b u-fw-n">{{ params.description }}</div>
+            <div class="field__description">{{ params.description }}</div>
         {% endif %}
         {{ caller() }}
     {% if not params.noField %}

src/scss/utilities/_typography.scss

@@ -1,10 +1,15 @@
 @mixin font-size($props, $base) {
-  font-size: rems(map-get($props, small), $base);
+  $small-size: map-get($props, small);
+  $large-size: map-get($props, large);
+
+  font-size: rems($small-size, $base);
   font-weight: map-get($props, weight);
   line-height: map-get($props, line-height);
 
-  @include mq(m) {
-    font-size: rems(map-get($props, large), $base);
+  @if $small-size != $large-size {
+    @include mq(m) {
+      font-size: rems($large-size, $base);
+    }
   }
 }