Add Big variant of Dropdown component

CHANGELOG.md

@@ -1,3 +1,9 @@
+## 6.7.0
+
+### Improvements
+
+- Add new "Big" variant of Dropdown component. ([#328](https://github.com/18F/identity-style-guide/pull/328))
+
 ## 6.6.0
 
 ### Improvements

docs/_components/form-fields.md

@@ -96,6 +96,8 @@ Three text fields are the easiest way for users to enter most dates.
 
 ## Dropdowns
 
+### Default
+
 {% capture example %}
 <label for="ab84" class="usa-label">Dropdown label</label>
 <select id="ab84" class="usa-select">
@@ -107,6 +109,19 @@ Three text fields are the easiest way for users to enter most dates.
 {% endcapture %}
 {% include helpers/code-example.html code=example %}
 
+### Big
+
+{% capture example %}
+<label for="vg01" class="usa-label">Dropdown label</label>
+<select id="vg01" class="usa-select usa-select--big">
+  <option value>- Select -</option>
+  <option value="value1">Option A</option>
+  <option value="value2">Option B</option>
+  <option value="value3">Option C</option>
+</select>
+{% endcapture %}
+{% include helpers/code-example.html code=example %}
+
 ## Radio buttons
 
 Three styles of radio buttons are provided.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "identity-style-guide",
-  "version": "6.6.0",
+  "version": "6.7.0",
   "description": "The global style of Login.gov",
   "main": "./build/cjs/index.js",
   "module": "./build/esm/index.js",

src/scss/elements/form-controls/_all.scss

@@ -1,2 +1,3 @@
+@import 'dropdown';
 @import 'global';
 @import 'text-input';

src/scss/elements/form-controls/_dropdown.scss

@@ -0,0 +1,6 @@
+.usa-select.usa-select--big {
+  @include u-padding-x(2);
+  height: auto;
+  font-size: 1.25rem;
+  line-height: 1.5;
+}

src/scss/elements/form-controls/_text-input.scss

@@ -1,14 +1,14 @@
-.usa-input--big,
-.usa-textarea--big {
+.usa-input.usa-input--big,
+.usa-textarea.usa-textarea--big {
   font-size: units(2.5);
   line-height: 1.5;
 }
 
-.usa-input--big {
+.usa-input.usa-input--big {
   @include u-padding-x(2);
   height: auto;
 }
 
-.usa-textarea--big {
+.usa-textarea.usa-textarea--big {
   height: 15rem;
 }