form-jekyll 0.4.1 → 0.4.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 97dd4f33155557306f4316bd09c9318f1fb676f8c99354b7a471c90233be97aa
-  data.tar.gz: 3f60eda698b979bee207915fa4e94a3152d8670f0e4d3b6d83c0f11bb430f90f
+  metadata.gz: 1e45546fe7f704b3781861c946e21f369761d572724f1476977df834ccb63b5e
+  data.tar.gz: 1bb01c8be4ee7a95d3e2089e7ab0d72210a0f6307fbd426233faf016076a0738
 SHA512:
-  metadata.gz: fe672f308a40ef6260ec162c920006ee201d2149c6efb0a5839616058fede6fa51516dcb97bdc69e647b4f553707e180891ba939cf2d2ce1e0c9a1f55d0d8b1a
-  data.tar.gz: ea94e049f4bd7a2d6fcb1febc10ccb57f69f5a02372a688da5e58437ba7debd3f7ed5b2d6f4f34828b81ab1666dd4fe2d0eaa406c6de121914cca2993f2c38f3
+  metadata.gz: eedf2b33692e184c218042aa7d6cdb82e6d635c2fad2f35cb65172772fdabc0a6f80b00e8d030ee22dbef1e67de77ca8e2f557de305e7a1a32c108b5096763b9
+  data.tar.gz: 69a48cb0d587dafd55a1802a2c03049e11702c2f9b5674b8d3a6f5f85cfca06bf5f2f44366ea3c0506fd734d32d361c48607a3e51d114766173f215de3d262fc

data/_includes/elements/annotation.html

@@ -0,0 +1,3 @@
+{% if annotation %}
+  <div class="field-annotation">{{ annotation | markdownify | improve}}</div>
+{% endif %}

data/_includes/fields/address.html

@@ -1,38 +1,47 @@
-{% assign address-error = "You need to fill in a complete address." %}
-
 <fieldset class="field-address">
   <legend>{% include elements/label.html %}</legend>
 
   {% if address-fields contains 'street' or address-fields == 'full' %}
-    <label for="{{ name}}-line1">Address Line 1</label>
-    <input type="text" id="{{ name}}-line1" {% unless optional %}required="required" data-error="{{ address-error }}"{% endunless %}>
+    <div class="form-group">
+      <label for="{{ name}}-line1">Address Line 1</label>
+      <input type="text" id="{{ name}}-line1" {% unless optional %}required="required"{% endunless %}>
+      <p class="help-block with-errors with-errors-inline"></p>
+    </div>
 
-    <label for="{{ name}}-line2">Address Line 2 {% unless optional %}<span class="optional">(optional)</span>{% endunless %}</label>
-    <input type="text" id="{{ name }}-line2">
+    <div class="form-group">
+      <label for="{{ name}}-line2">Address Line 2 {% unless optional %}<span class="optional">(optional)</span>{% endunless %}</label>
+      <input type="text" id="{{ name }}-line2">
+      <p class="help-block with-errors with-errors-inline"></p>
+    </div>
   {% endif %}
 
 
   {% if address-fields contains 'city' or address-fields == 'full' %}
-    <label for="{{ name}}-city">City</label>
-    <input type="text" id="{{ name}}-city" {% unless optional %}required="required" data-error="{{ address-error }}"{% endunless %}>
+    <div class="form-group">
+      <label for="{{ name}}-city">City</label>
+      <input type="text" id="{{ name}}-city" {% unless optional %}required="required" data-error="Please enter a city."{% endunless %}>
+      <p class="help-block with-errors with-errors-inline"></p>
+    </div>
   {% endif %}
 
   {% if address-fields contains 'state' or address-fields == 'full' %}
-    <div class="field-address-state">
+    <div class="field-address-state form-group">
       <label for="{{ name}}-state">State</label>
-      <select id="{{ name}}-state" {% unless optional %}required="required" data-error="{{ address-error }}"{% endunless %}>
+      <select id="{{ name}}-state" {% unless optional %}required="required" data-error="Please choose a state."{% endunless %}>
         <option value="">Choose a state</option>
         {% for state in layout.address-states %}
           <option value="{{ state.value }}">{{ state.text }}</option>
         {% endfor %}
       </select>
+      <p class="help-block with-errors with-errors-inline"></p>
     </div>
   {% endif %}
 
   {% if address-fields contains 'zip' or address-fields == 'full' %}
-    <div class="field-address-zip">
-      <label for="{{ name}}-zip" {% unless optional %}required="required" data-error="{{ address-error }}"{% endunless %}>ZIP Code</label>
+    <div class="field-address-zip form-group">
+      <label for="{{ name}}-zip" {% unless optional %}required="required" data-error="Please enter a ZIP code."{% endunless %}>ZIP code</label>
       <input type="number" id="{{ name}}-zip" maxlength="5" class="length-5">
+      <p class="help-block with-errors with-errors-inline"></p>
     </div>
   {% endif %}
 

data/_includes/fields/date.html

@@ -0,0 +1,7 @@
+<div class="form-group" data-id="date">
+  <label for="{{ name }}" class="control-label">{% include elements/label.html %}</label>
+  <div class="field-wrapper">
+    <input formtype="d02" class="length-13" id="{{ name}}" name="{{ name }}" type="date" step="any" data-required-error="Please enter a valid date." pattern="\d{4}-\d{2}-\d{2}">
+    <p class="help-block with-errors"></p>
+  </div>
+</div>

data/_includes/render_field.html

@@ -9,11 +9,13 @@
     {% assign address-fields = 'full' %}
   {% endif %}
 
+  {% assign annotation = field.annotation %}
   {% assign description = field.description %}
   {% assign error = field.error %}
   {% assign fields = field.fields %}
   {% assign group = field.group %}
   {% assign helptext = field.helptext %}
+  {% assign hidden = field.hidden %}
   {% assign if = field.if %}
   {% assign label = field.label %}
   {% assign level = field.level %}
@@ -41,8 +43,18 @@
     {% include {{ includepath }} %}
   {% elsif field.type == 'link' %}
     {% include {{ includepath }} %}
+  {% elsif field.type == 'address' %}
+    <div class="field-address {% if field.hidden %}field-hidden{% endif %}">
+
+      {% include elements/annotation.html %}
+      {% include {{ includepath }} %}
+
+    </div>
   {% else %}
-    <div class="form-group field-{{ field.type }}">
+    <div class="form-group field-{{ field.type }} {% if field.hidden %}field-hidden{% endif %}">
+
+      {% include elements/annotation.html %}
+
       {% if field.type %}
         {% include {{ includepath }} %}
       {% else %}

data/_layouts/default.html

@@ -20,7 +20,7 @@ layout: base
 </div>
 
 <div class="form-settings">
-  <h5>Settings</h5>
+  <h5>Show&hellip;</h5>
 
   <a href="javascript:void(0);" class="form-settings-toggle" title="Toggle settings">
     <img src="/assets/images/settings-toggle.svg" alt="Toggle settings" />
@@ -29,16 +29,26 @@ layout: base
 
   <label class="checkbox">
     <input type="checkbox" id="settings-all-pages">
-    <span>Show all pages</span>
+    <span>Every page</span>
   </label>
 
   <label class="checkbox">
     <input type="checkbox" id="settings-all-conditionals">
-    <span>Show hidden conditionals</span>
+    <span>All conditionals</span>
+  </label>
+
+  <label class="checkbox">
+    <input type="checkbox" id="settings-all-annotations">
+    <span>Annotations</span>
+  </label>
+
+  <label class="checkbox">
+    <input type="checkbox" id="settings-show-hidden">
+    <span>Hidden fields</span>
   </label>
 
   <label class="checkbox">
     <input type="checkbox" id="settings-top-nav">
-    <span>Show navigation on top</span>
+    <span>Page navigation on top</span>
   </label>
 </div>

data/assets/css/main.scss

@@ -694,6 +694,16 @@ h5 {
   display: inline-block;
   @include font-smoothing;
 
+  &.with-errors-inline {
+    @include fs-small-text;
+    padding: 0;
+    background: transparent;
+    color: $red-4;
+    position: relative;
+    top: -0.25rem;
+    margin: 0 0 1rem;
+  }
+
   li {
     list-style-type: none;
   }
@@ -758,7 +768,24 @@ h5 {
   }
 }
 
+.field-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px; // Fix for https://github.com/twbs/bootstrap/issues/25686
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
 .field-address {
+
+  .form-group {
+    margin-bottom: 0;
+  }
+
   label {
     font-size: (15rem / 17);
     margin: 0 0 0.25rem;

data/assets/css/style.scss

@@ -135,10 +135,33 @@ $shadow: 0 1px 4px rgba(#000, 0.06);
   }
 }
 
+.field-annotation {
+  display: none;
+  background: $yellow-1;
+  padding: 0.75rem;
+  font-size: 0.875rem;
+  position: absolute;
+  top: 2.5rem;
+  left: 0;
+  box-shadow: 0 3px 0 $slate-blue;
+  border: 1px solid $slate-blue;
+  z-index: 20;
+  border-radius: 2px;
+
+  p {
+    margin: 0 0 0.25rem;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+}
+
+
 // Settings body classes
 
 .all-pages {
-  background: #ddd;
+  background: $grey-4;
 
   .pagination,
   .sfgov-alpha-banner,
@@ -154,13 +177,12 @@ $shadow: 0 1px 4px rgba(#000, 0.06);
     background: #fff;
     box-shadow: $shadow;
     padding: $padding;
-    margin-bottom: 2rem;
+    margin: 0.5rem 0.5rem 1.5rem;
   }
 
   div[data-group] {
     display: none;
   }
-
 }
 
 .all-conditionals {
@@ -169,6 +191,28 @@ $shadow: 0 1px 4px rgba(#000, 0.06);
   }
 }
 
+.all-annotations {
+  .form-group,
+  .field-address {
+    position: relative;
+  }
+  .field-annotation {
+    display: block;
+  }
+}
+
+.show-hidden .field-hidden {
+  position: static;
+  width: inherit;
+  height: inherit;
+  padding: inherit;
+  margin: inherit;
+  overflow: visible;
+  clip: unset;
+  white-space: inherit;
+  border: inherit;
+}
+
 .nav-on-top {
   display: none;
   .top-nav & {

data/assets/js/script.js

@@ -33,6 +33,8 @@ $(document).ready(function(){
 
   settingInit('all-pages');
   settingInit('all-conditionals');
+  settingInit('all-annotations');
+  settingInit('show-hidden');
   settingInit('top-nav');
 
   // Show / hide settings modal

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: form-jekyll
 version: !ruby/object:Gem::Version
-  version: 0.4.1
+  version: 0.4.2
 platform: ruby
 authors:
 - Josh Rubenoff
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2019-08-30 00:00:00.000000000 Z
+date: 2019-10-05 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: jekyll
@@ -66,10 +66,12 @@ extensions: []
 extra_rdoc_files: []
 files:
 - README.md
+- _includes/elements/annotation.html
 - _includes/elements/helptext.html
 - _includes/elements/label.html
 - _includes/fields/address.html
 - _includes/fields/checkbox.html
+- _includes/fields/date.html
 - _includes/fields/email.html
 - _includes/fields/file.html
 - _includes/fields/group.html