From eea8dcdd9e121420dd3ac6262a79682de998da4c Mon Sep 17 00:00:00 2001
From: Malcolm Hire <malcolm.hire@dwp.gsi.gov.uk>
Date: Tue, 4 Sep 2018 11:04:19 +0100
Subject: [PATCH 1/2] Ability to add attributes to select option

---
 src/components/select/README.md        | 12 +++++++++
 src/components/select/README.njk       | 14 +++++++++++
 src/components/select/template.njk     |  5 +++-
 src/components/select/template.test.js | 34 ++++++++++++++++++++++++++
 4 files changed, 64 insertions(+), 1 deletion(-)

diff --git a/src/components/select/README.md b/src/components/select/README.md
index d39bd93a5e..40e33734da 100644
--- a/src/components/select/README.md
+++ b/src/components/select/README.md
@@ -355,6 +355,18 @@ If you are using Nunjucks,then macros take the following arguments
 
 <tr class="govuk-table__row">
 
+<th class="govuk-table__header" scope="row">item.attributes</th>
+
+<td class="govuk-table__cell ">object</td>
+
+<td class="govuk-table__cell ">No</td>
+
+<td class="govuk-table__cell ">Any extra HTML attributes (for example data attributes) to the select option tag.</td>
+
+</tr>
+
+<tr class="govuk-table__row">
+
 <th class="govuk-table__header" scope="row">label</th>
 
 <td class="govuk-table__cell ">object</td>
diff --git a/src/components/select/README.njk b/src/components/select/README.njk
index 9babd6c947..1f3f4cea0e 100644
--- a/src/components/select/README.njk
+++ b/src/components/select/README.njk
@@ -128,6 +128,20 @@ The HTML <code>&lt;select&gt;</code> element represents a control that provides
         text: 'Sets the option item as disabled.'
       }
     ],
+    [
+      {
+        text: 'item.attributes'
+      },
+      {
+        text: 'object'
+      },
+      {
+        text: 'No'
+      },
+      {
+        text: 'Any extra HTML attributes (for example data attributes) to the select option tag.'
+      }
+    ],
     [
       {
         text: 'label'
diff --git a/src/components/select/template.njk b/src/components/select/template.njk
index 844176e484..43c7a03741 100644
--- a/src/components/select/template.njk
+++ b/src/components/select/template.njk
@@ -38,7 +38,10 @@
   <select class="govuk-select
     {%- if params.classes %} {{ params.classes }}{% endif %}{%- if params.errorMessage %} govuk-select--error{% endif %}" id="{{ params.id }}" name="{{ params.name }}" {%- if describedBy %} aria-describedby="{{ describedBy }}"{% endif %} {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
   {% for item in params.items %}
-    <option value="{{ item.value }}"{{" selected" if item.selected}}{{" disabled" if item.disabled}}>{{ item.text }}</option>
+    <option value="{{ item.value }}"
+      {{-" selected" if item.selected }}
+      {{-" disabled" if item.disabled }}
+      {%- for attribute, value in item.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>{{ item.text }}</option>
   {% endfor %}
   </select>
 </div>
diff --git a/src/components/select/template.test.js b/src/components/select/template.test.js
index 6638417167..c676f15dc4 100644
--- a/src/components/select/template.test.js
+++ b/src/components/select/template.test.js
@@ -151,6 +151,40 @@ describe('Select', () => {
     })
   })
 
+  describe('when they include option attributes', () => {
+    it('renders the option attributes', () => {
+      const $ = render('select', {
+        value: '2',
+        items: [
+          {
+            text: 'Option 1',
+            attributes: {
+              'data-attribute': 'ABC',
+              'data-second-attribute': 'DEF'
+            }
+          },
+          {
+            text: 'Options 2',
+            attributes: {
+              'data-attribute': 'GHI',
+              'data-second-attribute': 'JKL'
+            }
+          }
+        ]
+      })
+
+      const $component = $('.govuk-select')
+
+      const $firstInput = $component.find('option:first-child')
+      expect($firstInput.attr('data-attribute')).toEqual('ABC')
+      expect($firstInput.attr('data-second-attribute')).toEqual('DEF')
+
+      const $secondInput = $component.find('option:last-child')
+      expect($secondInput.attr('data-attribute')).toEqual('GHI')
+      expect($secondInput.attr('data-second-attribute')).toEqual('JKL')
+    })
+  })
+
   describe('when it includes a hint', () => {
     it('renders the hint', () => {
       const $ = render('select', {

From 7e04169ce717ee5353ec2b41cb405ae5b4d059a9 Mon Sep 17 00:00:00 2001
From: Malcolm Hire <malcolmhire@gmail.com>
Date: Fri, 7 Sep 2018 09:11:26 +0100
Subject: [PATCH 2/2] Added entry into change log

---
 CHANGELOG.md | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index fd91065a8c..56e516ffe2 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -141,11 +141,12 @@
 
   ([PR #960](https://github.com/alphagov/govuk-frontend/pull/960))
 
-- Pull Request Title goes here
+- Allow attributes on select items
 
-  Description goes here (optional)
+  You can now provide attributes on select items
+  `attributes: { 'data-attribute': 'value' }`
 
-  ([PR #N](https://github.com/alphagov/govuk-frontend/pull/N))
+  ([PR #977](https://github.com/alphagov/govuk-frontend/pull/977))
 
 🔧 Fixes: