From c55ae498a478fd81729e89ee4f32868aa71a4b47 Mon Sep 17 00:00:00 2001
From: Steve Sutton <steve@gaslightmedia.com>
Date: Thu, 4 Jul 2019 10:12:43 -0400
Subject: [PATCH] Updating foundation ui elements

update each element
---
 views/ui/f6/errorCallout.html    |  3 +++
 views/ui/f6/f6-select.html       | 18 -------------
 views/ui/f6/multicheckboxes.html | 40 +++++++++++++++++++++++++++++
 views/ui/f6/select.html          | 43 ++++++++++++++++++++++++++++++++
 views/ui/f6/text.html            | 11 ++++----
 5 files changed, 92 insertions(+), 23 deletions(-)
 create mode 100644 views/ui/f6/errorCallout.html
 delete mode 100644 views/ui/f6/f6-select.html
 create mode 100644 views/ui/f6/multicheckboxes.html
 create mode 100644 views/ui/f6/select.html

diff --git a/views/ui/f6/errorCallout.html b/views/ui/f6/errorCallout.html
new file mode 100644
index 00000000..670b4d25
--- /dev/null
+++ b/views/ui/f6/errorCallout.html
@@ -0,0 +1,3 @@
+<div data-abide-error class="alert callout" style="display: none;">
+    <p><i class="fi-alert"></i> There are some errors in your form.</p>
+</div>
diff --git a/views/ui/f6/f6-select.html b/views/ui/f6/f6-select.html
deleted file mode 100644
index 288e233e..00000000
--- a/views/ui/f6/f6-select.html
+++ /dev/null
@@ -1,18 +0,0 @@
-{* Foundation 6 Select *}
-{* setup $data *}
-{* setup $field *}
-{* setup $fieldLabel *}
-<div class="grid-x grid-margin-x">
-    <div class="cell small-12 medium-3">
-        <label for="{$field}" class="text-right middle{if $data.fieldRequired.$field} glm-required{/if}">{$fieldLabel}</label>
-    </div>
-    <div class="cell small-12 medium-9">
-        <select id="{$field}" name="{$field}" required>
-            <option value=""></option>
-            {foreach from=$data.fieldData.$field.list item=v}
-                <option value="{$v.value}"{if isset($v.default) && $v.default} selected="selected"{/if}>{$v.name}</option>
-            {/foreach}
-        </select>
-        {if $data.fieldFail.$field}<span class="form-error is-visible">{$data.fieldFail.$field}</span>{/if}
-    </div>
-</div>
diff --git a/views/ui/f6/multicheckboxes.html b/views/ui/f6/multicheckboxes.html
new file mode 100644
index 00000000..7a1d08c5
--- /dev/null
+++ b/views/ui/f6/multicheckboxes.html
@@ -0,0 +1,40 @@
+{*
+    Foundation 6 Multi Checkboxes Field
+    All parameters are required.
+    Do not list parameters if they're false. (We're not checking for false)
+    If supplying field data (formData) from the data abstract, supply a
+    name of that in the "field" parameter. Also then certain parameters like
+    "required" will be supplied by the abstract rather than in a parameter in
+    this array.
+
+    {$ui = [
+        'field'         => string   Name of field that holds the data if not using data abstract,
+        'label'         => string   Label text for this field,
+        'list'          => array    Array of list key=value pairs value=>label
+        'required'      => boolean  True if required,
+        'helpText'      => string   Help text for this input,
+        'errortext'     => string   Error text that appears when the field doesn't validate,
+        'dataError'     => string   Error from data Abstract Class
+    ]}
+*}
+<div class="grid-x grid-margin-x">
+    <div class="cell small-12">
+        <label>{$ui.label}</label>
+        {if isset($ui.list) && $ui.list}
+            {foreach $ui.list as $checkbox => $checkboxLabel}
+                <label class="{if $ui.reouired} glm-required{/if}">
+                    <input
+                        type="checkbox"
+                        id="{$checkbox}"
+                        name="{$checkbox}"
+                        {if $ui.value.$checkbox} checked{/if} />
+                    {$checkboxLabel}
+                </label>
+            {/foreach}
+        {/if}
+
+        {if $ui.dataError}<span class="form-error is-visible">{$ui.dataErrror}</span>{/if}
+        {if isset($ui.helpText)}<p class="help-text" id="{$field}_HelpText">{$ui.helpText}</p>{/if}
+        {if isset($ui.errorText)}<span id="{$field}_ErrorText" class="form-error">{$ui.errorText}</span>{/if}
+    </div>
+</div>
diff --git a/views/ui/f6/select.html b/views/ui/f6/select.html
new file mode 100644
index 00000000..99247be2
--- /dev/null
+++ b/views/ui/f6/select.html
@@ -0,0 +1,43 @@
+{*
+    Foundation 6 Select Field
+    All parameters are required.
+    Do not list parameters if they're false. (We're not checking for false)
+    If supplying field data (formData) from the data abstract, supply a
+    name of that in the "field" parameter. Also then certain parameters like
+    "required" will be supplied by the abstract rather than in a parameter in
+    this array.
+
+    {$ui = [
+        'value'         => string  Value of the element
+        'field'         => string  Name of field that holds the data if not using data abstract,
+        'label'         => string  Label text for this field,
+        'l_label'       => string  Field name to use for the option textNode
+        'l_value'       => string  Field name to use for the option value
+        'l_blank'       => string  Add empty option
+        'required'      => boolean True if required,
+        'helpText'      => string  Help text for this input,
+        'errortext'     => string  Error text that appears when the field doesn't validate,
+        'dataError'     => string  Error from data Abstract Class
+    ]}
+*}
+<div class="grid-x grid-margin-x">
+    <div class="cell small-12">
+        <label for="{$ui.field}" class="{if $ui.required} glm-required{/if}">{$ui.label}</label>
+        <select
+            id="{$ui.field}"
+            name="{$ui.field}"
+            {if $ui.required}required{/if} >
+
+            {if $ui.l_blank}<option value=""></option>{/if}
+
+            {foreach $ui.list as $v}
+                <option value="{$v[$ui.l_value]}"{if $ui.value == $v[$ui.l_value]} selected="selected"{/if}>{$v[$ui.l_label]}</option>
+            {/foreach}
+        </select>
+
+        {if $ui.dataError}<span class="form-error is-visible">{$ui.dataErrror}</span>{/if}
+        {if isset($ui.helpText)}<p class="help-text" id="{$field}_HelpText">{$ui.helpText}</p>{/if}
+        {if isset($ui.errorText)}<span id="{$field}_ErrorText" class="form-error">{$ui.errorText}</span>{/if}
+
+    </div>
+</div>
diff --git a/views/ui/f6/text.html b/views/ui/f6/text.html
index e102e2ed..c28d3f73 100644
--- a/views/ui/f6/text.html
+++ b/views/ui/f6/text.html
@@ -11,6 +11,7 @@
         'value'         => string   Value of the element
         'field'         => string   Name of field that holds the data if not using data abstract,
         'label'         => string   Label text for this field,
+        'pattern'       => string   Pattern attribute ( number, etc. )
         'placeholder'   => string   Placeholder string,
         'required'      => boolean  True if required,
         'maxWidth'      => string   Size of input field using standard style notation ('900px', '15rem', ...),
@@ -35,18 +36,18 @@
                 type="text"
                 id="{$ui.field}"
                 name="{$ui.field}"
-                value="{$ui.$value|escape}"
+                value="{$ui.value|escape}"
+                {if $ui.pattern}pattern="{$ui.pattern}"{/if}
+                {if $ui.required}required{/if}
                 placeholder="{$ui.placeholder}"
                 {if isset($ui.errorText)}aria-errormessage="{$ui.field}_ErrorText"{/if}
                 {if isset($ui.helpText)}aria-describedby="{$ui.field}_HelpText"{/if}
-                {if isset($ui.required)}required{/if}
                 {if isset($ui.maxWidth)}style="max-width: {$ui.maxWidth}"{/if}
                 {if isset($ui.maxLength)}max-length="{$ui.maxLength}"{/if}
-                {if $ui.required}required{/if}
             />
             {if $ui.dataError}<span class="form-error is-visible">{$ui.dataErrror}</span>{/if}
-            {if isset($ui.helpText)}<p class="help-text" id="{$field}_HelpText">{$ui.helpText}</p>{/if}
-            {if isset($ui.errorText)}<span id="{$field}_ErrorText" class="form-error">{$ui.errorText}</span>{/if}
+            {if isset($ui.helpText)}<p class="help-text" id="{$ui.field}_HelpText">{$ui.helpText}</p>{/if}
+            {if isset($ui.errorText)}<span id="{$ui.field}_ErrorText" class="form-error">{$ui.errorText}</span>{/if}
         </div>
     </div>
 {/if}
-- 
2.17.1