Merge pull request #99 from hmcts/selection-buttons-description

Added an optional selection button description to fields.njk
hmcts · Sep 17, 2018 · bef091d · bef091d
2 parents 353c0b4 + 16cbfea
commit bef091d
Show file tree

Hide file tree

Showing 7 changed files with 135 additions and 13 deletions.
diff --git a/.gitignore b/.gitignore
@@ -2,3 +2,4 @@
 node_modules
 yarn-error.log
 .idea
+examples/test-app/dist
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,8 @@
+<a name="1.19.2"></a>
+## 1.19.2 (2018-09-14)
+
+* Added support for description in selectionButtons ([6a4d5cd](https://github.com/hmcts/look-and-feel/commit/6a4d5cd))
+
 <a name="1.13.1"></a>
 ## 1.13.1 (2018-03-07)
 

diff --git a/examples/test-app/assets/scss/main.scss b/examples/test-app/assets/scss/main.scss
@@ -81,4 +81,15 @@
     }
   }
 
+  .choice-description-sample {
+    .multiple-choice {
+      label {
+        font-weight: bold;
+      }
+      .choice-description {
+        font-weight: normal;
+        display: block;
+      }
+    }
+  }
 }
diff --git a/examples/test-app/views/SelectionButtons.html b/examples/test-app/views/SelectionButtons.html
@@ -204,6 +204,42 @@
   </div>
 
 
+  {% set field = { id: 'response', name: 'response' } %}
+
+  {{ header("Choice description", size="medium") }}
+
+  <div class="example">
+    <div class="choice-description-sample">
+        {{ selectionButtons(field, "How do you want to respond?",
+            options = [
+                { label: "I will let the divorce proceed", value: "proceed", description: "Choose this option if you don't want to try to prevent the divorce" },
+                { label: "I disagree with the application for divorce", value: "disagree", description: "Choose this option if you want to try to prevent the divorce" }
+            ],
+            type='radio'
+        ) }}
+    </div>
+  </div>
+
+  <div class="panel panel-border-wide">
+    {{ header('Code', size='small') }}
+    <pre><code>
+{% raw %}{{ selectionButtons(field, "How do you want to respond?",
+  options = [
+      {
+        label: "I will let the divorce proceed",
+        value: "proceed",
+        description: "Choose this option if you don't want to try to prevent the divorce"
+      },
+      {
+        label: "I disagree with the application for divorce",
+        value: "disagree",
+        description: "Choose this option if you want to try to prevent the divorce"
+      }
+  ],
+  type='radio'
+)}}{% endraw %}
+    </code></pre>
+  </div>
 
 {%- endblock %}
 
diff --git a/examples/test-app/yarn.lock b/examples/test-app/yarn.lock
@@ -3,16 +3,17 @@
 
 
 "@hmcts/look-and-feel@./../../":
-  version "1.9.1"
+  version "1.19.2"
   dependencies:
     babel-core "^6.26.0"
     babel-loader "^7.1.2"
     babel-preset-env "^1.6.0"
     check-types "^7.3.0"
+    colors "^1.1.2"
     config "^1.26.1"
     copy-webpack-plugin "^4.0.1"
     css-loader "^0.28.4"
-    deepmerge "^2.0.0"
+    deepmerge "2.0.1"
     diff-so-fancy "^1.1.1"
     exports-loader "^0.7.0"
     express "^4.15.3"
@@ -26,6 +27,7 @@
     node-sass "^4.5.3"
     nunjucks "^3.0.1"
     sass-loader "^6.0.6"
+    serve-static "^1.13.2"
     style-loader "^0.20.1"
     webpack "^3.4.1"
     webpack-dev-middleware "^2.0.4"
@@ -1070,6 +1072,10 @@ colors@1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/colors/-/colors-1.0.3.tgz#0433f44d809680fdeb60ed260f1b0c262e82a40b"
 
+colors@^1.1.2:
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/colors/-/colors-1.3.2.tgz#2df8ff573dfbf255af562f8ce7181d6b971a359b"
+
 colors@~1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/colors/-/colors-1.1.2.tgz#168a4701756b6a7f51a12ce0c97bfa28c084ed63"
@@ -1331,7 +1337,7 @@ debug@2.6.8, debug@^2.2.0:
   dependencies:
     ms "2.0.0"
 
-debug@^2.6.8:
+debug@2.6.9, debug@^2.6.8:
   version "2.6.9"
   resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
   dependencies:
@@ -1345,9 +1351,9 @@ deep-extend@~0.4.0:
   version "0.4.2"
   resolved "https://registry.yarnpkg.com/deep-extend/-/deep-extend-0.4.2.tgz#48b699c27e334bf89f10892be432f6e4c7d34a7f"
 
-deepmerge@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-2.0.0.tgz#35f7ee08e8bde1173b3a529f732dcda67ce82e29"
+deepmerge@2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-2.0.1.tgz#25c1c24f110fb914f80001b925264dd77f3f4312"
 
 defined@^1.0.0:
   version "1.0.0"
@@ -1365,6 +1371,10 @@ depd@1.1.1, depd@~1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/depd/-/depd-1.1.1.tgz#5783b4e1c459f06fa5ca27f991f3d06e7a310359"
 
+depd@~1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/depd/-/depd-1.1.2.tgz#9bcd52e14c097763e749b274c4346ed2e560b5a9"
+
 des.js@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/des.js/-/des.js-1.0.0.tgz#c074d2e2aa6a8a9a07dbd61f9a15c2cd83ec8ecc"
@@ -1446,6 +1456,10 @@ encodeurl@~1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/encodeurl/-/encodeurl-1.0.1.tgz#79e3d58655346909fe6f0f45a5de68103b294d20"
 
+encodeurl@~1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/encodeurl/-/encodeurl-1.0.2.tgz#ad3ff4c86ec2d029322f5a02c3a9a606c95b3f59"
+
 enhanced-resolve@^3.4.0:
   version "3.4.1"
   resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-3.4.1.tgz#0421e339fd71419b3da13d129b3979040230476e"
@@ -1577,6 +1591,10 @@ etag@~1.8.0:
   version "1.8.0"
   resolved "https://registry.yarnpkg.com/etag/-/etag-1.8.0.tgz#6f631aef336d6c46362b51764044ce216be3c051"
 
+etag@~1.8.1:
+  version "1.8.1"
+  resolved "https://registry.yarnpkg.com/etag/-/etag-1.8.1.tgz#41ae2eeb65efa62268aebfea83ac7d79299b0887"
+
 event-emitter@~0.3.5:
   version "0.3.5"
   resolved "https://registry.yarnpkg.com/event-emitter/-/event-emitter-0.3.5.tgz#df8c69eef1647923c7157b9ce83840610b02cc39"
@@ -1797,6 +1815,10 @@ fresh@0.5.0:
   version "0.5.0"
   resolved "https://registry.yarnpkg.com/fresh/-/fresh-0.5.0.tgz#f474ca5e6a9246d6fd8e0953cfa9b9c805afa78e"
 
+fresh@0.5.2:
+  version "0.5.2"
+  resolved "https://registry.yarnpkg.com/fresh/-/fresh-0.5.2.tgz#3d8cadd90d976569fa835ab1f8e4b23a105605a7"
+
 fs-extra@^0.26.4:
   version "0.26.7"
   resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-0.26.7.tgz#9ae1fdd94897798edab76d0918cf42d0c3184fa9"
@@ -2706,6 +2728,10 @@ mime@1.3.4:
   version "1.3.4"
   resolved "https://registry.yarnpkg.com/mime/-/mime-1.3.4.tgz#115f9e3b6b3daf2959983cb38f149a2d40eb5d53"
 
+mime@1.4.1:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/mime/-/mime-1.4.1.tgz#121f9ebc49e3766f311a76e1fa1c8003c4b03aa6"
+
 mime@^2.1.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/mime/-/mime-2.2.0.tgz#161e541965551d3b549fa1114391e3a3d55b923b"
@@ -3082,6 +3108,10 @@ parseurl@~1.3.1:
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/parseurl/-/parseurl-1.3.1.tgz#c8ab8c9223ba34888aa64a297b28853bec18da56"
 
+parseurl@~1.3.2:
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/parseurl/-/parseurl-1.3.2.tgz#fc289d4ed8993119460c156253262cdc8de65bf3"
+
 path-browserify@0.0.0:
   version "0.0.0"
   resolved "https://registry.yarnpkg.com/path-browserify/-/path-browserify-0.0.0.tgz#a0b870729aae214005b7d5032ec2cbbb0fb4451a"
@@ -3798,6 +3828,24 @@ send@0.15.4:
     range-parser "~1.2.0"
     statuses "~1.3.1"
 
+send@0.16.2:
+  version "0.16.2"
+  resolved "https://registry.yarnpkg.com/send/-/send-0.16.2.tgz#6ecca1e0f8c156d141597559848df64730a6bbc1"
+  dependencies:
+    debug "2.6.9"
+    depd "~1.1.2"
+    destroy "~1.0.4"
+    encodeurl "~1.0.2"
+    escape-html "~1.0.3"
+    etag "~1.8.1"
+    fresh "0.5.2"
+    http-errors "~1.6.2"
+    mime "1.4.1"
+    ms "2.0.0"
+    on-finished "~2.3.0"
+    range-parser "~1.2.0"
+    statuses "~1.4.0"
+
 serve-static@1.12.4:
   version "1.12.4"
   resolved "https://registry.yarnpkg.com/serve-static/-/serve-static-1.12.4.tgz#9b6aa98eeb7253c4eedc4c1f6fdbca609901a961"
@@ -3807,6 +3855,15 @@ serve-static@1.12.4:
     parseurl "~1.3.1"
     send "0.15.4"
 
+serve-static@^1.13.2:
+  version "1.13.2"
+  resolved "https://registry.yarnpkg.com/serve-static/-/serve-static-1.13.2.tgz#095e8472fd5b46237db50ce486a43f4b86c6cec1"
+  dependencies:
+    encodeurl "~1.0.2"
+    escape-html "~1.0.3"
+    parseurl "~1.3.2"
+    send "0.16.2"
+
 set-blocking@^2.0.0, set-blocking@~2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/set-blocking/-/set-blocking-2.0.0.tgz#045f9782d011ae9a6803ddd382b24392b3d890f7"
@@ -3936,6 +3993,10 @@ sshpk@^1.7.0:
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/statuses/-/statuses-1.3.1.tgz#faf51b9eb74aaef3b3acf4ad5f61abf24cb7b93e"
 
+statuses@~1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/statuses/-/statuses-1.4.0.tgz#bb73d446da2796106efcc1b601a253d6c46bd087"
+
 stdout-stream@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/stdout-stream/-/stdout-stream-1.4.0.tgz#a2c7c8587e54d9427ea9edb3ac3f2cd522df378b"

diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@hmcts/look-and-feel",
   "description": "One question per page apps made easy",
-  "version": "1.19.1",
+  "version": "1.19.2",
   "main": "./src/main.js",
   "dependencies": {
     "babel-core": "^6.26.0",

diff --git a/templates/look-and-feel/components/fields.njk b/templates/look-and-feel/components/fields.njk
@@ -48,13 +48,15 @@
 
 {#
   selectionButton
-    field          - (required) A field object containing name, id and value
-    option         - (required) Options used to populate the possible answers
+    field                - (required) A field object containing name, id and value
+    option               - (required) Options used to populate the possible answers
 
-    options.label  - (required) The label text to display for this option
-    options.value  - (default = label.lowercase()) The value to be sent on post for this option
-    options.target - (default = '') Id of the panel to expand if selected
-    type           - (default = 'radio') The type of the input, either radio or checkbox
+    options.label        - (required) The label text to display for this option
+    options.description  - (default = '') Additional information displayed below the label
+    options.value        - (default = label.lowercase()) The value to be sent on post for this option
+    options.disabled     - (default = false) If the option should be initially disabled
+    options.target       - (default = '') Id of the panel to expand if selected
+    type                 - (default = 'radio') The type of the input, either radio or checkbox
 
   Renders multiple option radio buttons
 #}
@@ -63,6 +65,7 @@
                          type='radio') %}
   {% set option_value = option.value or option.label|lower %}
   {% set option_disabled = option.disabled or false %}
+  {% set option_description = option.description or false %}
   <div class="multiple-choice"
     {% if option.target -%}
     data-target="{{ option.target }}"
@@ -85,6 +88,11 @@
            value="{{ option_value }}">
     <label for="{{ field.id }}-{{ option_value }}">
       {{ option.label }}
+      {% if option_description %}
+          <span class="choice-description">
+            {{ option.description }}
+          </span>
+      {% endif %}
     </label>
   </div>
 {% endmacro %}