From a1f84f1d3e7136cabea82ed2302886517aa130e1 Mon Sep 17 00:00:00 2001
From: Gemma Leigh <hello@gemmaleigh.com>
Date: Wed, 24 May 2017 15:07:22 +0100
Subject: [PATCH 1/3] Add a textarea example

Add a textarea snippet
Include the snippet on the form element page
---
 app/views/guide_form_elements.html    | 20 ++++++++++++++++++++
 app/views/snippets/form_textarea.html |  4 ++++
 assets/sass/elements/_forms.scss      |  9 +++++++--
 3 files changed, 31 insertions(+), 2 deletions(-)
 create mode 100644 app/views/snippets/form_textarea.html

diff --git a/app/views/guide_form_elements.html b/app/views/guide_form_elements.html
index 5bcc66152..0d8b0b2cc 100755
--- a/app/views/guide_form_elements.html
+++ b/app/views/guide_form_elements.html
@@ -24,6 +24,7 @@ <h2 class="heading-small heading-contents">Contents:</h2>
         <li><a href="#form-optional-fields">Optional and mandatory fields</a></li>
         <li><a href="#form-labels">Labels</a></li>
         <li><a href="#form-fields">Form fields</a></li>
+        <li><a href="#form-textarea">Textarea</a></li>
         <li><a href="#form-focus-states">Form focus states</a></li>
         <li><a href="#form-hint-text">Hint text</a></li>
         <li><a href="#form-spacing">Spacing</a></li>
@@ -86,6 +87,25 @@ <h3 class="heading-medium" id="form-fields">Form fields</h3>
     </a>
   </p>
 
+  <h3 class="heading-medium" id="form-textarea">Textarea</h3>
+  <div class="text">
+    <p>
+      Make the height of a textarea proportional to the amount of text to be entered.
+    </p>
+  </div>
+
+  <div class="example">
+    {% include "snippets/form_textarea.html" %}
+  </div>
+
+<pre>
+<code class="language-markup">
+  {% filter escape %}
+    {% include "snippets/form_textarea.html" %}
+  {% endfilter %}
+</code>
+</pre>
+
   <h3 class="heading-medium" id="form-focus-states">Form focus states</h3>
   <div class="text">
     <p>
diff --git a/app/views/snippets/form_textarea.html b/app/views/snippets/form_textarea.html
new file mode 100644
index 000000000..171267c30
--- /dev/null
+++ b/app/views/snippets/form_textarea.html
@@ -0,0 +1,4 @@
+<label class="form-label" for="textarea">
+  This is the label text
+</label>
+<textarea class="form-control" name="textarea" id="textarea"></textarea>
diff --git a/assets/sass/elements/_forms.scss b/assets/sass/elements/_forms.scss
index e57e4dfc2..4e3dcaaac 100644
--- a/assets/sass/elements/_forms.scss
+++ b/assets/sass/elements/_forms.scss
@@ -163,11 +163,16 @@ textarea {
 // scss-lint:disable QualifyingElement
 input.form-control,
 textarea.form-control {
-  // Remove inner shadow
+  // Disable inner shadow and remove rounded corners
   -webkit-appearance: none;
-  // Remove rounded corners
   border-radius: 0;
 }
+
+textarea.form-control {
+  // Disable opacity and background image for Firefox
+  opacity: 1;
+  background-image: none;
+}
 // scss-lint:enable QualifyingElement
 
 

From bda9c5f6fbe8e29a2dd72af56ae34e497f7664f5 Mon Sep 17 00:00:00 2001
From: Gemma Leigh <hello@gemmaleigh.com>
Date: Wed, 24 May 2017 15:16:59 +0100
Subject: [PATCH 2/3] Update example to use Register to vote text

---
 app/views/snippets/form_textarea.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/views/snippets/form_textarea.html b/app/views/snippets/form_textarea.html
index 171267c30..831e19fd7 100644
--- a/app/views/snippets/form_textarea.html
+++ b/app/views/snippets/form_textarea.html
@@ -1,4 +1,4 @@
 <label class="form-label" for="textarea">
-  This is the label text
+  Why can't you provide a National Insurance number?
 </label>
 <textarea class="form-control" name="textarea" id="textarea"></textarea>

From 7d144f533143b832791f9176fb2fd3565f1c6f2e Mon Sep 17 00:00:00 2001
From: Gemma Leigh <hello@gemmaleigh.com>
Date: Wed, 24 May 2017 17:32:52 +0100
Subject: [PATCH 3/3] Make textareas wider than standard form controls
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Form controls are 50% of the page width, make textures 75% of the page
width - to better fit paragraphs of text.

Add rows=“5” to increase the height of the textarea. The alternative is
to set a height - but this could be a breaking change (unless it’s a
set via a new optional class).
---
 app/views/snippets/form_textarea.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/views/snippets/form_textarea.html b/app/views/snippets/form_textarea.html
index 831e19fd7..b2ef7d96e 100644
--- a/app/views/snippets/form_textarea.html
+++ b/app/views/snippets/form_textarea.html
@@ -1,4 +1,4 @@
 <label class="form-label" for="textarea">
   Why can't you provide a National Insurance number?
 </label>
-<textarea class="form-control" name="textarea" id="textarea"></textarea>
+<textarea class="form-control form-control-3-4" name="textarea" id="textarea" rows="5"></textarea>