Merge pull request #749 from CityOfBoston/DIG-4058

DIG-4058: Text Box treatments for data entry states and required fields

components/base/form/textbox/textbox--input-states.hbs

@@ -0,0 +1,22 @@
+{{#each states as |textbox|}}
+  <label class="txt">
+    <span class="txt-l">
+      {{label}}
+      {{#if required}}
+        <span class="t--req">Required</span>
+      {{/if}}
+      {{#if soft-required}}
+        <span class="t--req">Required</span>
+      {{/if}}
+    </span>
+    <input
+      type="{{#if type}}{{type}}{{else}}text{{/if}}"
+      value="{{#if value}} {{value}}{{/if}}"
+      placeholder="{{placeholder}}"
+      class="txt-f{{#if error }} txt-f--err{{#if soft-required}} txt-f--sr{{/if}}{{/if}}{{#if classes}} {{classes}}{{/if}}"
+    >
+    {{#if error }}
+      <div class="t--subinfo t--err m-t100">{{ error }}</div>
+    {{/if}}
+  </label>
+{{/each}}

components/base/form/textbox/textbox.config.yml

@@ -26,6 +26,18 @@ context:
       id: password
       type: password
       value: "password"
+  states:
+    - label: Default
+      type: text
+    - label: Input Label
+      required: true
+    - label: Soft Require - Required/Validation on Submit
+      error: Please enter an email address
+      soft-required: true
+    - label: Error
+      placeholder: Your email address
+      value: "Not an email address string"
+      error: Please enter an email address
 variants:
   - name: Combo
     context:

components/base/form/textbox/textbox.hbs

@@ -2,7 +2,14 @@
   <div class="txt">
     <label for="{{id}}" class="txt-l{{#if error }} t--err{{/if}}">{{label}}</label>
     {{#if ../inputType }}
-      <input id="{{id}}" type="{{#if type}}{{type}}{{else}}text{{/if}}" value="{{value}}" placeholder="{{placeholder}}" class="txt-f{{#if error }} txt-f--err{{/if}}{{#if classes}} {{classes}}{{/if}}"{{#if size }} size="{{ size }}"{{/if}}>
+      <input
+        id="{{id}}"
+        type="{{#if type}}{{type}}{{else}}text{{/if}}"
+        value="{{value}}"
+        placeholder="{{placeholder}}"
+        class="txt-f{{#if error }} txt-f--err{{/if}}{{#if classes}} {{classes}}{{/if}}"{{#if size }}
+        size="{{ size }}"{{/if}}
+      >
     {{/if}}
     {{#if ../textareaType }}
       <textarea id="{{id}}" placeholder="{{placeholder}}" class="txt-f" rows="10">{{value}}</textarea>

stylesheets/components/form/_textbox.styl

@@ -43,6 +43,14 @@
     padding-left: $sizing-300
     padding-right: $sizing-300
 
+    &--sr
+      border-width: $border-150
+      border-color: $error-border-color
+
+    &--focused
+      box-shadow: 0 0 0 3px $focus-indicator-color
+      border-color: $focus-indicator-color
+
     &--sm
       field-height-sm = "calc(%srem + %s * 2)" % ($line-height-400 $border-200)
 
@@ -92,10 +100,13 @@
 
     &:focus
       box-shadow: 0 0 0 3px $focus-indicator-color
+      border-color: $focus-indicator-color
 
     &--combo
       border-right: 0
       float: left
+    :focus
+      outline: none;
 
   &-l
     color: $charles-blue