Merge pull request #94 from dod-ccpo/ui/form-fields

Ui/form fields

atst/ui_modules.py

@@ -1,4 +1,6 @@
 from tornado.web import UIModule
+# from tornado.template import raw
+import re
 
 class Alert(UIModule):
     def render(self, title, message=None, actions=None, level='info'):
@@ -9,6 +11,26 @@ class Alert(UIModule):
           actions=actions,
           level=level)
 
+class TextInput(UIModule):
+    def render(self, field, placeholder=''):
+        return self.render_string(
+          "components/text_input.html.to",
+          field=field,
+          label=re.sub('<[^<]+?>', '', str(field.label)),
+          errors=field.errors,
+          placeholder=placeholder,
+          description=field.description)
+
+class OptionsInput(UIModule):
+    def render(self, field, inline=False):
+        return self.render_string(
+          "components/options_input.html.to",
+          field=field,
+          label=re.sub('<[^<]+?>', '', str(field.label)),
+          errors=field.errors,
+          description=field.description,
+          inline=inline)
+
 class Icon(UIModule):
     def render(self, name, classes=''):
         with open('static/icons/%s.svg' % name) as svg:

scss/atat.scss

@@ -5,12 +5,12 @@
 @import 'core/util';
 
 @import 'elements/typography';
+@import 'elements/icons';
 @import 'elements/inputs';
 @import 'elements/buttons';
 @import 'elements/panels';
 @import 'elements/block_lists';
 @import 'elements/tables';
-@import 'elements/icons';
 @import 'elements/sidenav';
 @import 'elements/action_group';
 

scss/core/_util.scss

@@ -23,3 +23,7 @@
   position: unset;
   width: unset;
 }
+
+@mixin line-max {
+  max-width: 45em;
+}

scss/elements/_inputs.scss

@@ -4,6 +4,157 @@
  * @source https://github.com/uswds/uswds/blob/develop/src/stylesheets/elements/_inputs.scss
  */
 
+@mixin input-icon {
+  width: 1.6rem;
+  height: 1.6rem;
+  display: block;
+}
+
+@mixin input-state($state) {
+  $border-width: 1px;
+  $state-color: $color-gray;
+
+  @if $state == 'error' {
+    $border-width: 2px;
+    $state-color: $color-red;
+
+  } @else if $state == 'warning' {
+    $border-width: 2px;
+    $state-color: $color-gold;
+
+  } @else if $state == 'success' {
+    $border-width: 2px;
+    $state-color: $color-green;
+  }
+
+  .icon {
+    @include icon-color($state-color);
+  }
+
+  .usa-input__message {
+    color: $state-color;
+  }
+
+  input,
+  textarea,
+  select {
+    border-color: $state-color;
+    border-width: $border-width;
+  }
+
+  fieldset {
+    input[type='radio'] {
+      + label::before {
+        box-shadow: 0 0 0 1px $color-white, 0 0 0 3px $color-red;
+      }
+    }
+
+    input[type='checkbox'] {
+      + label::before {
+        box-shadow: 0 0 0 2px $color-red;
+      }
+    }
+  }
+}
+
+.usa-input {
+  margin:  ($gap * 4) ($gap * 2) ($gap * 4) 0;
+
+  @includ media($medium-screen) {
+    margin: ($gap * 4) 0;
+  }
+
+  label {
+    padding: 0 0 $gap 0;
+    @include h4;
+    @include line-max;
+    position: relative;
+
+    .usa-input__help {
+      display: block;
+      @include h5;
+      font-weight: normal;
+      padding-top: $gap / 2;
+      @include line-max;
+    }
+
+    .icon {
+      position: absolute;
+      left: 100%;
+      top: 100%;
+      margin-top: 1.4rem;
+      margin-left: $gap;
+    }
+  }
+
+  input,
+  textarea,
+  select {
+    @include line-max;
+    margin: 0;
+  }
+
+  .usa-input__choices { // checkbox & radio sets
+    legend {
+      padding: 0 0 $gap 0;
+      @include h4;
+
+      .icon {
+        vertical-align: middle;
+      }
+    }
+
+    ul {
+      list-style: none;
+      margin: 0;
+      padding: 0;
+
+      > li {
+        margin: 0;
+
+        [type='radio'] + label,
+        [type='checkbox'] + label {
+          margin: 0;
+        }
+      }
+    }
+
+    label {
+      font-weight: normal;
+      margin: 0;
+    }
+
+    .usa-input__message {
+      display: block;
+    }
+
+    &.usa-input__choices--inline {
+      label {
+        display: inline-block;
+        padding-right: $gap * 3;
+      }
+    }
+  }
+
+  .usa-input__message {
+    @include h5;
+    display: inline-block;
+    padding-top: $gap;
+  }
+
+  &.usa-input--error {
+    @include input-state('error');
+  }
+
+  &.usa-input--warning {
+    @include input-state('warning');
+  }
+
+  &.usa-input--success {
+    @include input-state('success');
+  }
+}
+
 select {
   border-radius: 0;
   -webkit-appearance: none;
@@ -39,4 +190,33 @@ select {
     min-height: 4.4rem;
   }
 
-}
+}
+
+
+// Form Grid
+.form-row {
+  margin: ($gap * 4) 0;
+
+  .form-col {
+    flex-grow: 1;
+
+    &:first-child .usa-input {
+      margin-top: 0;
+    }
+
+    &:last-child .usa-input {
+      margin-bottom: 0;
+    }
+  }
+
+  @include media($medium-screen) {
+    @include grid-row;
+    align-items: flex-start;
+
+    .form-col {
+      .usa-input {
+        margin: 0 ($gap * 4) 0 0;
+      }
+    }
+  }
+}

scss/elements/_typography.scss

@@ -11,7 +11,7 @@
 
 p {
   margin: 0 0 ($gap * 2) 0;
-  max-width: 45em;
+  @include line-max;
 }
 
 h1, h2, h3, h4, h5, h6 {

templates/components/options_input.html.to

@@ -0,0 +1,24 @@
+<div class='usa-input {% if errors %}usa-input--error{% end %}'>
+  <fieldset class="usa-input__choices {% if inline %}usa-input__choices--inline{% end %}">
+    <legend>
+      {{ label }}
+
+      {% if description %}
+        <span class='usa-input__help'>{% raw description %}</span>
+      {% end %}
+
+      {% if errors %}
+        {% module Icon('alert') %}
+      {% end %}
+    </legend>
+
+    {% raw field() %}
+
+    {% if errors %}
+      {% for error in errors %}
+        <span class='usa-input__message'>{{ error }}</span>
+      {% end %}
+    {% end %}
+
+  </fieldset>
+</div>

templates/components/text_input.html.to

@@ -0,0 +1,21 @@
+<div class='usa-input {% if errors %}usa-input--error{% end %}'>
+  <label for={{input.name}}>
+    {{ label }}
+
+    {% if description %}
+      <span class='usa-input__help'>{% raw description %}</span>
+    {% end %}
+
+    {% if errors %}
+      {% module Icon('alert') %}
+    {% end %}
+  </label>
+
+  {% raw field(placeholder=placeholder) %}
+
+  {% if errors %}
+    {% for error in errors %}
+      <span class='usa-input__message'>{{ error }}</span>
+    {% end %}
+  {% end %}
+</div>

templates/styleguide.html.to

@@ -127,6 +127,148 @@
         <div class='col col--grow'>col 11</div>
         <div class='col col--grow'>col 12</div>
       </div>
+
+
+      <form>
+        <div class='usa-input'>
+          <label for='basic-text-1'>
+            Basic Text Input
+            <span class='usa-input__help'>
+              This is some help text to explain what this form field is and why you should fill it out.
+            </span>
+          </label>
+          <input id='basic-text-1' type='text' placeholder='this is a sample of what you should enter'/>
+        </div>
+
+        <div class='usa-input usa-input--error'>
+          <label for='basic-text-2'>
+            Erroneous Text Input
+            <span class='usa-input__help'>
+              This is some help text to explain what this form field is and why you should fill it out.
+            </span>
+            {% module Icon('alert') %}
+          </label>
+          <input id='basic-text-2' type='text' placeholder='this is a sample of what you should enter' aria-invalid='true' aria-describedby='basic-text-2__errors'/>
+          <span id='basic-text-2__errors' class='usa-input__message'>Oh boy you really screwed up big time, didn't you!</span>
+        </div>
+
+        <div class='usa-input usa-input--warning'>
+          <label for='basic-text-3'>
+            Warning Text Input
+            <span class='usa-input__help'>
+              This is some help text to explain what this form field is and why you should fill it out.
+            </span>
+            {% module Icon('alert') %}
+          </label>
+          <input id='basic-text-3' type='text' placeholder='this is a sample of what you should enter' aria-describedby='basic-text-3__errors'/>
+          <span id='basic-text-3__errors' class='usa-input__message'>Oh boy you really screwed up big time, didn't you!</span>
+        </div>
+
+        <div class='usa-input usa-input--success'>
+          <label for='basic-text-4'>
+            Success Text Input
+            <span class='usa-input__help'>
+              This is some help text to explain what this form field is and why you should fill it out.
+            </span>
+            {% module Icon('ok') %}
+          </label>
+          <input id='basic-text-4' type='text' placeholder='this is a sample of what you should enter'/>
+        </div>
+
+        <div class='usa-input'>
+          <label for='basic-text'>
+            Basic Text Input with a really long label that wraps and wraps and wraps and should really be separated into a label + help text
+          </label>
+          <textarea placeholder='this is a sample of what you should enter'/></textarea>
+        </div>
+
+        <div class='usa-input'>
+          <label for='selects'>Select Menu</label>
+          <select name='selects'>
+            <option selected disabled>Select an option</option>
+            <option value='1'>One</option>
+            <option value='2'>Two</option>
+            <option value='3'>Three</option>
+            <option value='4'>Four</option>
+            <option value='5'>Five</option>
+          </select>
+        </div>
+
+        <div class='form-row'>
+          <div class='form-col'>
+            <div class='usa-input'>
+              <fieldset class='usa-input__choices'>
+                <legend>Checkboxes</legend>
+                <input type='checkbox' id='checkbox-1' checked/>
+                <label for='checkbox-1'>Checkbox One</label>
+
+                <input type='checkbox' id='checkbox-2' />
+                <label for='checkbox-2'>Checkbox Two</label>
+
+                <input type='checkbox' id='checkbox-3' disabled />
+                <label for='checkbox-3'>Checkbox Three</label>
+              </fieldset>
+            </div>
+          </div>
+
+          <div class='form-col'>
+            <div class='usa-input usa-input--error'>
+              <fieldset class='usa-input__choices usa-input__choices--inline'>
+                <legend>Inline Checkboxes {% module Icon('alert') %}</legend>
+                <input type='checkbox' id='checkbox-4'/>
+                <label for='checkbox-4'>Checkbox Four</label>
+
+                <input type='checkbox' id='checkbox-5' />
+                <label for='checkbox-5'>Checkbox Five</label>
+
+                <input type='checkbox' id='checkbox-6' disabled />
+                <label for='checkbox-6'>Checkbox Six</label>
+
+                <span class='usa-input__message'>This is an error</span>
+              </fieldset>
+            </div>
+          </div>
+        </div>
+
+        <div class='form-row'>
+          <div class='form-col'>
+            <div class='usa-input usa-input--error'>
+              <fieldset class='usa-input__choices' >
+                <legend>Problem Radio Buttons {% module Icon('alert') %}</legend>
+
+                <input type='radio' name='radio' id='radio-1' />
+                <label for='radio-1'>Radio One</label>
+
+                <input type='radio' name='radio' id='radio-2' />
+                <label for='radio-2'>Radio Two</label>
+
+                <input type='radio' name='radio' id='radio-3' />
+                <label for='radio-3'>Radio Three</label>
+
+                <span class='usa-input__message'>This is an error</span>
+              </fieldset>
+            </div>
+          </div>
+
+          <div class='form-col'>
+            <div class='usa-input'>
+              <fieldset class='usa-input__choices usa-input__choices--inline'>
+                <legend>Radio Buttons</legend>
+
+                <input type='radio' name='radio-2' id='radio-4' checked />
+                <label for='radio-4'>Radio Four</label>
+
+                <input type='radio' name='radio-2' id='radio-5' />
+                <label for='radio-5'>Radio Five</label>
+
+                <input type='radio' name='radio-2' id='radio-6' />
+                <label for='radio-6'>Radio Six</label>
+              </fieldset>
+            </div>
+          </div>
+        </div>
+
+      </form>
     </div>
   </div>