From 8e6251e68ebd28d4ac83f555c71bf6a329c0da9f Mon Sep 17 00:00:00 2001
From: Chuck Scott <cscott@gaslightmedia.com>
Date: Fri, 12 Jul 2019 16:14:14 -0400
Subject: [PATCH] Continuing work on UI elements and fields.

---
 views/adminServerStatsConfig.html | 219 ++++++++++++++++++------------
 views/ui/f6/LayoutNotes.txt       |   2 +-
 views/ui/f6/checkbox.html         |  32 +++--
 views/ui/f6/editor.html           |  25 ++--
 views/ui/f6/grid-start.html       |   6 +
 views/ui/f6/number.html           |  80 +++++------
 views/ui/f6/section-start.html    |   9 +-
 views/ui/f6/text-line.html        |  15 ++
 views/ui/f6/text.html             |  59 ++++----
 9 files changed, 267 insertions(+), 180 deletions(-)
 create mode 100644 views/ui/f6/text-line.html

diff --git a/views/adminServerStatsConfig.html b/views/adminServerStatsConfig.html
index 316bc6d..3b46844 100755
--- a/views/adminServerStatsConfig.html
+++ b/views/adminServerStatsConfig.html
@@ -21,17 +21,20 @@
 
                     {* Section Start *}
                         {$ui = [
-                            'title' => 'Database Connection'
+                            'title' => 'Database Connection',
+                            'tip'   => "
+                                        If you need help with these settings, please contact the Gaslight Media network engineering department.
+                                        "
                         ]}
                         {include file="ui/f6/section-start.html"}
 
                         {* db_name *}
                             {$ui = [
                                 'field'         => 'db_name',
+                                'value'         => {$db_name},
                                 'label'         => 'Database Name',
                                 'placeholder'   => 'Provided by Gaslight Media Engineering',
                                 'required'      => true,
-                                'helpText'      => 'We be here!',
                                 'errorText'     => 'The database name is required for connecting to the usage database.'
                             ]}
                             {include file="ui/f6/text.html"}
@@ -39,10 +42,10 @@
                         {* db_host *}
                             {$ui = [
                                 'field'         => 'db_host',
+                                'value'         => {$db_host},
                                 'label'         => 'Database Server Hostname',
                                 'placeholder'   => 'Provided by Gaslight Media Engineering',
                                 'required'      => true,
-                                'helpText'      => 'We be there!',
                                 'maxWidth'      => 20
                             ]}
                             {include file="ui/f6/text.html"}
@@ -50,6 +53,7 @@
                         {* db_user *}
                             {$ui = [
                                 'field'         => 'db_user',
+                                'value'         => {$db_user},
                                 'label'         => 'Database Username',
                                 'placeholder'   => 'Provided by Gaslight Media Engineering',
                                 'required'      => true,
@@ -60,6 +64,7 @@
                         {* db_pass *}
                             {$ui = [
                                 'field'         => 'db_pass',
+                                'value'         => {$db_pass},
                                 'label'         => 'Database Password',
                                 'placeholder'   => 'Provided by Gaslight Media Engineering',
                                 'required'      => true
@@ -69,6 +74,7 @@
                         {* website *}
                             {$ui = [
                                 'field'         => 'website',
+                                'value'         => {$website},
                                 'label'         => 'Default Website Name',
                                 'placeholder'   => 'Provided by Gaslight Media Engineering',
                                 'required'      => true
@@ -79,13 +85,14 @@
 
                    {* Section Start *}
                         {$ui = [
-                            'title'         => 'Usage Notifications for All Sites'
+                            'title'         => 'Usage and Notifications'
                         ]}
                         {include file="ui/f6/section-start.html"}
 
                         {* show_usage *}
                             {$ui = [
                                 'field'         => 'show_usage',
+                                'value'         => {$show_usage},
                                 'label'         => 'Show Data Usage',
                                 'helpText'      => 'Check this box to have server display website usage information.'
 
@@ -95,6 +102,7 @@
                         {* send_usage *}
                             {$ui = [
                                 'field'         => 'send_usage',
+                                'value'         => {$send_usage},
                                 'label'         => 'Automatically Send Usage Notices Monthly',
                                 'helpText'      => 'More help stuff. Arent you excited?'
                             ]}
@@ -103,113 +111,154 @@
                         {* send_percent *}
                             {$ui = [
                                 'field'         => 'send_percent',
+                                'value'         => {$send_percent},
                                 'label'         => '% of Target for Notification',
                                 'required'      => true,
                                 'min'           => 0,
                                 'max'           => 150,
-                                'maxWidth'      => 3,
+                                'width'         => 5,
                                 'helpText'      => 'Send notification to customer contact if at this % of target or higher for usage or disk space.',
                                 'errorText'     => 'Im a fool.'
                             ]}
                             {include file="ui/f6/number.html"}
 
-                    {include file="ui/f6/section-end.html"}
+                        {* show_notifications *}
+                            {$ui = [
+                                'field'         => 'show_notifications',
+                                'value'         => {$show_notifications},
+                                'label'         => 'Customer Notiifications for This Site'
+                            ]}
+                            {include file="ui/f6/checkbox.html"}
 
-                {include file="ui/f6/grid-end.html"}
-<!--
-                {* Section Start *}
-                    {$ui = [
-                        'title'         => 'Usage Notifications for All Sites'
-                    ]}
-                    {include file="ui/f6/section-start.html"}
+                    {include file="ui/f6/section-end.html"}
 
-                    {* show_usage *}
+                    {* Section Start *}
                         {$ui = [
-                            'field'         => 'show_usage',
-                            'label'         => 'Show Data Usage',
-                            'helpText'      => 'Check this box to have server display website usage information.'
-
+                            'title'         => 'Cookie Pop-Ups for This Site'
                         ]}
-                        {include file="ui/f6/checkbox.html"}
+                        {include file="ui/f6/section-start.html"}
 
-                    {* send_usage *}
-                        {$ui = [
-                            'field'         => 'send_usage',
-                            'label'         => 'Automatically Send Usage Notices Monthly',
-                            'helpText'      => 'More help stuff. Arent you excited?'
-                        ]}
-                        {include file="ui/f6/checkbox.html"}
+                        {* show_cookie_popup *}
+                            {$ui = [
+                                'field'         => 'show_cookie_popup',
+                                'value'         => {$show_cookie_popup},
+                                'label'         => 'Show Cookie Pop-Up',
+                                'helpText'      => 'This is my help text'
+                            ]}
+                            {include file="ui/f6/checkbox.html"}
 
-                    {* send_percent *}
-                        {$ui = [
-                            'field'         => 'send_percent',
-                            'label'         => '% of Target for Notification',
-                            'required'      => true,
-                            'min'           => 0,
-                            'max'           => 150,
-                            'maxWidth'      => 3,
-                            'helpText'      => 'Send notification to customer contact if at this % of target or higher for usage or disk space.',
-                            'errorText'     => 'Im a fool.'
-                        ]}
-                        {include file="ui/f6/number.html"}
+                        {* cookie_popup_timeout *}
+                            {$ui = [
+                                'field'         => 'cookie_popup_timeout',
+                                'value'         => {$cookie_popup_timeout},
+                                'label'         => 'Cookie Pop-Up Re-Display Days',
+                                'required'      => true,
+                                'min'           => 0,
+                                'max'           => 90,
+                                'width'         => 5,
+                                'helpText'      => 'Number of days after user accepts the cookie pop-up that it will display again.
+                                                <b>Do not set to a real high number. Consider 10-30 days. Set to 0 to test Cookie Popups.</b>'
+                            ]}
+                            {include file="ui/f6/number.html"}
 
-                {include file="ui/f6/section-end.html"}
+                        {* cookie_message *}
+                            {$ui = [
+                                'field'         => 'cookie_message',
+                                'value'         => {$cookie_message},
+                                'label'         => 'Cookies Notice Text',
+                                'required'      => true,
+                                'height'        => 10,
+                                'rows'          => 5,
+                                'maxWidth'      => '900px',
+                                'helpText'      => 'My Help Text',
+                                'errorText'     => 'Im a fool.'
+                            ]}
+                            {include file="ui/f6/editor.html"}
 
-                {* Section Start *}
-                    {$ui = [
-                        'title'         => 'Usage Notifications for All Sites'
-                    ]}
-                    {include file="ui/f6/section-start.html"}
+                    {include file="ui/f6/section-end.html"}
 
-                    {* show_notifications *}
+                    {* Section Start *}
                         {$ui = [
-                            'field'         => 'show_notifications',
-                            'label'         => 'Customer Notiifications for This Site'
+                            'title'         => 'Addional Notices'
                         ]}
-                        {include file="ui/f6/checkbox.html"}
+                        {include file="ui/f6/section-start.html"}
 
-                {include file="ui/f6/section-end.html"}
+                        {* Text Line *}
+                            {$ui = [
+                                'text'         => 'These notices are displayed when the user clicks the "Show more" button.'
+                            ]}
+                            {include file="ui/f6/text-line.html"}
 
-                {* Section Start *}
-                    {$ui = [
-                        'title'         => 'Cookie Pop-Ups for This Site'
-                    ]}
-                    {include file="ui/f6/section-start.html"}
+                        {* cookie_opt_gdpr *}
+                            {$ui = [
+                                'field'         => 'cookie_opt_gdpr',
+                                'label'         => 'GDPR'
+                            ]}
+                            {include file="ui/f6/checkbox.html"}
 
-                    {* show_cookie_popup *}
-                        {$ui = [
-                            'field'         => 'show_cookie_popup',
-                            'label'         => 'Show Cookie Pop-Up'
-                        ]}
-                        {include file="ui/f6/checkbox.html"}
+                        {* cookie_opt_access_logs *}
+                            {$ui = [
+                                'field'         => 'cookie_opt_access_logs',
+                                'label'         => 'Access Logs'
+                            ]}
+                            {include file="ui/f6/checkbox.html"}
 
-                    {* cookie_popup_timeout *}
-                        {$ui = [
-                            'field'         => 'cookie_popup_timeout',
-                            'label'         => 'Cookie Pop-Up Re-Display Days',
-                            'required'      => true,
-                            'min'           => 0,
-                            'max'           => 90,
-                            'maxWidth'      => 5,
-                            'helpText'      => 'Number of days after user accepts the cookie pop-up that it will display again.
-                                            <b>Do not set to a real high number. Consider 10-30 days. Set to 0 to test Cookie Popups.</b>'
-                        ]}
-                        {include file="ui/f6/number.html"}
+                        {* cookie_opt_permanent *}
+                            {$ui = [
+                                'field'         => 'cookie_opt_permanent',
+                                'label'         => 'Permanent Cookies'
+                            ]}
+                            {include file="ui/f6/checkbox.html"}
 
-                    {* cookie_message *}
-                        {$ui = [
-                            'field'         => 'cookie_message',
-                            'label'         => 'Cookies Notice Text',
-                            'required'      => true,
-                            'height'        => 50,
-                            'rows'          => 5,
-                            'maxWidth'      => '900px',
-                            'helpText'      => 'My Help Text',
-                            'errorText'     => 'Im a fool.'
-                        ]}
-                        {include file="ui/f6/editor.html"}
+                        {* cookie_opt_tracking *}
+                            {$ui = [
+                                'field'         => 'cookie_opt_tracking',
+                                'label'         => 'Tracking Cookies'
+                            ]}
+                            {include file="ui/f6/checkbox.html"}
+
+                        {* cookie_opt_shared_tracking *}
+                            {$ui = [
+                                'field'         => 'cookie_opt_shared_tracking',
+                                'label'         => 'Shared Tracking Cookies'
+                            ]}
+                            {include file="ui/f6/checkbox.html"}
+
+                        {* cookie_opt_https *}
+                            {$ui = [
+                                'field'         => 'cookie_opt_https',
+                                'label'         => 'HTTPS'
+                            ]}
+                            {include file="ui/f6/checkbox.html"}
+
+                        {* cookie_opt_logged_in *}
+                            {$ui = [
+                                'field'         => 'cookie_opt_logged_in',
+                                'label'         => 'Logged-In Users'
+                            ]}
+                            {include file="ui/f6/checkbox.html"}
+
+                        {* cookie_opt_forms *}
+                            {$ui = [
+                                'field'         => 'cookie_opt_forms',
+                                'label'         => 'Submission Forms'
+                            ]}
+                            {include file="ui/f6/checkbox.html"}
+
+                        {* cookie_opt_payment *}
+                            {$ui = [
+                                'field'         => 'cookie_opt_payment',
+                                'label'         => 'Payment Forms'
+                            ]}
+                            {include file="ui/f6/checkbox.html"}
+
+                    {include file="ui/f6/section-end.html"}
+
+
+                {include file="ui/f6/grid-end.html"}
+
+<!--
 
-                {include file="ui/f6/section-end.html"}
 
                 {* Section Start *}
                     {$ui = [
diff --git a/views/ui/f6/LayoutNotes.txt b/views/ui/f6/LayoutNotes.txt
index b208d6c..036f273 100644
--- a/views/ui/f6/LayoutNotes.txt
+++ b/views/ui/f6/LayoutNotes.txt
@@ -27,4 +27,4 @@ section-end.html                            </div>
     .                           </div>
 
 grid-end.html               </div>
-    .                   </dic>
\ No newline at end of file
+    .                   </div>
\ No newline at end of file
diff --git a/views/ui/f6/checkbox.html b/views/ui/f6/checkbox.html
index 27e4f08..1b0f73d 100644
--- a/views/ui/f6/checkbox.html
+++ b/views/ui/f6/checkbox.html
@@ -1,11 +1,11 @@
 {*
-    Foundation 6 Checkbox Input Field
+    Foundation 6 - Checkbox Input Field
     All parameters are required.
     Only 0ne of $data or $field may be used.
     Do not list fields if they're false. (We're not checking for false)
 
     {$ui = [
-        'value'         => string   Value of the element
+        'value'         => string   True/False, 0/1
         'field'         => string   Name of field that holds the data if not using data abstract,
         'label'         => string   Label text for this field,
         'required'      => boolean  True if required,
@@ -16,15 +16,21 @@
 *}
 
 <div class="cell small-12 glm-foundation-6-ui-field">
-    <input
-        {if $ui.required}required{/if}
-        type="checkbox"
-        id="{$ui.field}"
-        name="{$ui.field}"{if $ui.value} checked{/if}>
-    <label for="{$ui.field}">{$ui.label}</label>
-
-    {if isset($ui.dataError)}<span class="form-error is-visible">{$ui.dataError}</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 class="grid-x grid-margin-x">
+        <div class="cell shrink ">
+            <div class="switch small glm-foundation-6-ui-field-input-switch">
+              <input class="switch-input" id="{$ui.field}" type="checkbox" name="{$ui.field}">
+              <label class="switch-paddle" for="{$ui.field}">
+                <span class="switch-active" aria-hidden="true">Yes</span>
+                <span class="switch-inactive" aria-hidden="true">No</span>
+              </label>
+            </div>
+        </div>
+        <div class="cell auto">
+            <label for="{$ui.field}" class="{if $ui.required} glm-required{/if} glm-foundation-6-ui-field-label">{$ui.label}</label>
+        </div>
+        <div class="cell small-12">
+            {if isset($ui.helpText)}<p class="glm-foundation-6-ui-field-help-text" id="{$ui.field}_HelpText">{$ui.helpText}</p>{/if}
+        </div>
+    </div>
 </div>
-
diff --git a/views/ui/f6/editor.html b/views/ui/f6/editor.html
index c30a571..c604261 100644
--- a/views/ui/f6/editor.html
+++ b/views/ui/f6/editor.html
@@ -25,24 +25,25 @@
     <div class="cell small-12">
         <label for="{$ui.field}" class="{if $ui.required} glm-required{/if}">{$ui.label}</label>
         {if isset($ui.value) && $ui.value}
-            {$textAreaContent = $ui.value|escape:quotes}
+            {$textAreaContent = $ui.value}
         {else}
             {$textAreaContent = ''}
         {/if}
         {$textAreaName = $ui.field}
-        {if isset($ui.height)} {$height = $ui.height} {else} {$height = 100} {/if}
+        {if isset($ui.height)} {$height = $ui.height} {else} {$height = 50} {/if}
         {if isset($ui.media)} {$media_buttons = $ui.media} {else} {$media_buttons = false} {/if}
         {if isset($ui.quicktags)} {$quicktags = $ui.quicktags} {else} {$quicktags = false} {/if}
-        {wp_editor(
-            $textAreaContent,
-            $textAreaName,
-            json_decode('{
-                "textarea_name": $textAreaContent,
-                "media_buttons": false,
-                "quicktags": false,
-                "editor_height": $height
-            }', true)
-        )}
+    {$settings = [
+        'textarea_name' => $textAreaName,
+        'editor_height' => $height,
+        'media_buttons' => $media_buttons,
+        'quicktags'     => $quicktags
+    ]}
+    {wp_editor(
+        $textAreaContent,
+        $textAreaName,
+        $settings
+    )}
         <br>
         {if $ui.dataError}<span class="form-error is-visible">{$ui.dataError}</span>{/if}
         {if isset($ui.helpText)}<p class="help-text" id="{$ui.field}_HelpText">{$ui.helpText}</p>{/if}
diff --git a/views/ui/f6/grid-start.html b/views/ui/f6/grid-start.html
index 34ada52..4abe48a 100644
--- a/views/ui/f6/grid-start.html
+++ b/views/ui/f6/grid-start.html
@@ -12,14 +12,20 @@
     .glm-foundation-6-ui-section-start {
     }
     .glm-foundation-6-ui-field {
+        margin-bottom: .5rem !important;
     }
     .glm-foundation-6-ui-field-label {
     }
     .glm-foundation-6-ui-field-input {
+        margin-bottom: 0 !important;
+    }
+    .glm-foundation-6-ui-field-input-switch {
+        margin-bottom: 0 !important;
     }
     .glm-foundation-6-ui-field-data-error {
     }
     .glm-foundation-6-ui-field-help-text {
+        margin-bottom: 0 !important;
     }
     .glm-foundation-6-ui-field-error-text {
     }
diff --git a/views/ui/f6/number.html b/views/ui/f6/number.html
index c7b4427..c381e05 100644
--- a/views/ui/f6/number.html
+++ b/views/ui/f6/number.html
@@ -1,63 +1,55 @@
 {*
-    Foundation 6 Number Input Field
-    All parameters are required.
-    Only 0ne of $data or $field may be used.
-    DO NOT include fields if they're false. (We're not checking for false)
+    Foundation 6 - Number Input Field
 
-    {$fieldData = [
-        'data'          => array    Data from data abstract if using that,
+    Do not include fields if they're false. (We're not checking for false)
+
+    {$ui = [
+        'value'          => array    Data from data abstract if using that,
         'field'         => string   Name of field that holds the data if not using data abstract,
         'label'         => string   Label text for this field,
         'placeholder'   => string   Placeholder string,
         'suffix'        => string   Suffix text to add after input field,
         'min'           => integer  Minimum numeric value
         'max'           => integer  Maximum numeric value
-        'maxWidth'      => integer  Size of input field in characters,
+        'width'         => integer  Size of input field in characters,
         'message'       => string   Message string to display between label and input,
         'helpText'      => string   Help text for this input,
         'errortext'       => string   Error text that appears when the field doesn't validate
     ]}
 *}
-
-
-{if (!isset($fieldData.data) && !isset($fieldData.field)) || !isset($fieldData.label)}
-    <div class="grid-x grid-margin-x">
-        <div class="cell small-12">
-            <span class="glm-required">Field Error: Required field information not supplied!</span>
-        </div>
-    </div>
+{if !isset($ui.width)}
+    {$ui.width = 5}
 {else}
-    {if isset($fieldData.data)} {* If using data abstract *}
-        <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">
-                <input type="number" id="{$field}" name="{$field}"{if $data.fieldData.$field.value} checked{/if}> Yes
-                {if $data.fieldFail.$field}<span class="form-error is-visible">{$data.fieldFail.$field}</span>{/if}
-            </div>
-        </div>
+    {$ui.width = $ui.width * .55 + 2.5}
+{/if}
+
+<div class="cell small-12 glm-foundation-6-ui-field">
+    {if (!isset($ui.value) && !isset($ui.field)) || !isset($ui.label)}
+        <span class="glm-required">Field Error: Required field information not supplied!</span>
     {else}
-        <div class="small-12 columns">
-            <label for="{$fieldData.field}_FieldID" class="{if $fieldData.required} glm-required{/if}">
+        <div class="grid-x grid-margin-x">
+            <div class="cell shrink">
                 <input
-                    id="{$fieldData.field}_FieldID"
-                    type="text"
-                    pattern="number"
-                    name="{$fieldData.field}"
-                    value="{${$fieldData.field}}"
-                    {if $fieldData.required}required{/if}
-                    {if isset($fieldData.errorText)}aria-errormessage="{$fieldData.field}_ErrorText"{/if}
-                    {if isset($fieldData.helpText)}aria-describedby="{$fieldData.field}_HelpText"{/if}
-                    {if isset($fieldData.placeholder)}placeholder="{$fieldData.placeholder}"{/if}
-                    {if isset($fieldData.min)}min="{$fieldData.min}"{/if}
-                    {if isset($fieldData.min)}max="{$fieldData.max}"{/if}
-                    {if isset($fieldData.maxWidth)}style="width: {$fieldData.maxWidth}rem !important;"{/if}
+                    id="{$ui.field}_FieldID"
+                    type="number"
+                    name="{$ui.field}"
+                    value="{$ui.value}"
+                    {if $ui.required}required{/if}
+                    {if isset($ui.errorText)}aria-errormessage="{$ui.field}_ErrorText"{/if}
+                    {if isset($ui.helpText)}aria-describedby="{$ui.field}_HelpText"{/if}
+                    {if isset($ui.placeholder)}placeholder="{$ui.placeholder}"{/if}
+                    {if isset($ui.min)}min="{$ui.min}"{/if}
+                    {if isset($ui.min)}max="{$ui.max}"{/if}
+                    style="width: {$ui.width}rem;"
                 >
-                {$fieldData.label}:
-                {if isset($fieldData.helpText)}<p class="help-text" id="{$fieldData.field}_HelpText">{$fieldData.helpText}</p>{/if}
-                {if isset($fieldData.errorText)}<span id="{$fieldData.field}_ErrorText" class="form-error">{$fieldData.errorText}</span>{/if}
-            </label>
+            </div>
+            <div class="cell auto">
+                <label for="{$ui.field}" class="{if $ui.required} glm-required{/if} glm-foundation-6-ui-field-label">{$ui.label}</label>
+            </div>
+            <div class="cell small-12">
+                {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}
-{/if}
+</div>
\ No newline at end of file
diff --git a/views/ui/f6/section-start.html b/views/ui/f6/section-start.html
index 3bdf57a..6f846d5 100644
--- a/views/ui/f6/section-start.html
+++ b/views/ui/f6/section-start.html
@@ -1,10 +1,10 @@
 {*
     Foundation 6 - Form Section Start
-    All parameters are required.
 
     {$ui = [
         'title'     => string Section title text,
-        'helpText'  => string Additional text to describe this section
+        'helpText'  => string Additional text to describe this section,
+        'tip'       => String to display when hover over question mark on right
     ]}
 *}
 <div class="cell small-12 large-6">
@@ -13,9 +13,14 @@
             <span class="glm-required">Field Error: Required field information not supplied!</span>
         {else}
             <div class="cell small-12 glm-foundation-6-ui-section-title">
+                {if isset($ui.tip)}
+                    <span style="float:right;" data-tooltip aria-haspopup="true" class="has-tip" data-disable-hover="false" tabindex=1 title="{$ui.tip}">?</span>
+                {/if}
                 <h3>{$ui.title}</h3>
                 {if isset($ui.helpText)}<p class="help-text">{$ui.helpText}</p>{/if}
             </div>
         {/if}
             <div class="cell small-12 callout glm-foundation-6-ui-section-start">
                 <div class="grid-x grid-margin-x">
+
+
diff --git a/views/ui/f6/text-line.html b/views/ui/f6/text-line.html
new file mode 100644
index 0000000..6f53f69
--- /dev/null
+++ b/views/ui/f6/text-line.html
@@ -0,0 +1,15 @@
+{*
+    Foundation 6 - Text Line (display only)
+
+    {$ui = [
+        'text'          => string   Required    Text to display,
+        'underline'     => boolean              True to show line below text
+    ]}
+*}
+
+<div class="cell small-12 glm-foundation-6-ui-field">
+    <p{if isset($ui.underline) && $ui.underline} style="text-decoration: underline;"{/if}>
+        {$ui.text}
+    </p>
+</div>
+
diff --git a/views/ui/f6/text.html b/views/ui/f6/text.html
index 2bc8243..e8d309a 100644
--- a/views/ui/f6/text.html
+++ b/views/ui/f6/text.html
@@ -1,15 +1,11 @@
 {*
-    Foundation 6 Text Input Field
+    Foundation 6 - Text Input Field
 
     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   Required    Name of field that holds the data or formData array,
+        'value'         => string   Required    Value of this text element
         'label'         => string   Required    Label text for this field,
         'pattern'       => string               Pattern attribute ( number, etc. )
         'placeholder'   => string               Placeholder string,
@@ -19,24 +15,41 @@
         '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
+        'tip'           => string               String to display when hover over question mark on right
     ]}
 *}
 <div class="cell small-12 glm-foundation-6-ui-field">
-    <label for="{$ui.field}" class="{if $ui.required} glm-required{/if} glm-foundation-6-ui-field-label">{$ui.label}</label>
-    <input
-        type="text"
-        id="{$ui.field}"
-        name="{$ui.field}"
-        value="{${$ui.field}|escape}"
-        {if isset($ui.pattern) && $ui.pattern}pattern="{$ui.pattern}"{/if}
-        {if $ui.required}required{/if}
-        {if isset($ui.placeholder) && $ui.placeholder}placeholder="{$ui.placeholder}"{/if}
-        {if isset($ui.errorText)}aria-errormessage="{$ui.field}_ErrorText"{/if}
-        {if isset($ui.helpText)}aria-describedby="{$ui.field}_HelpText"{/if}
-        {if isset($ui.maxWidth)}style="max-width: {$ui.maxWidth}"{/if}
-        {if isset($ui.maxLength)}max-length="{$ui.maxLength}"{/if}
-    />
-    {if isset($ui.dataError) && $ui.dataError}<span class="form-error is-visible glm-foundation-6-ui-field-data-error">{$ui.dataError}</span>{/if}
-    {if isset($ui.helpText)}<p class="glm-foundation-6-ui-field-help-text" id="{$ui.field}_HelpText">{$ui.helpText}</p>{/if}
-    {if isset($ui.errorText)}<span id="{$ui.field}_ErrorText" class="form-error glm-foundation-6-ui-field-error-text">{$ui.errorText}</span>{/if}
+    {if (!isset($ui.value) && !isset($ui.field)) || !isset($ui.label)}
+            <span class="glm-required">Field Error: Required field information not supplied!</span>
+    {else}
+        <div class="grid-x grid-margin-x">
+            <div class="cell small-12">
+                {if isset($ui.tip)}
+                    <span style="float:right;" data-tooltip aria-haspopup="true" class="has-tip" data-disable-hover="false" tabindex=1 title="{$ui.tip}">?</span>
+                {/if}
+                <label for="{$ui.field}" class="{if $ui.required} glm-required{/if} glm-foundation-6-ui-field-label">{$ui.label}</label>
+            </div>
+            <div class="cell small-12">
+                <input
+                    class="glm-foundation-6-ui-field-input"
+                    type="text"
+                    id="{$ui.field}"
+                    name="{$ui.field}"
+                    value="{$ui.value|escape}"
+                    {if isset($ui.pattern) && $ui.pattern}pattern="{$ui.pattern}"{/if}
+                    {if $ui.required}required{/if}
+                    {if isset($ui.placeholder) && $ui.placeholder}placeholder="{$ui.placeholder}"{/if}
+                    {if isset($ui.errorText)}aria-errormessage="{$ui.field}_ErrorText"{/if}
+                    {if isset($ui.helpText)}aria-describedby="{$ui.field}_HelpText"{/if}
+                    {if isset($ui.maxWidth)}style="max-width: {$ui.maxWidth}"{/if}
+                    {if isset($ui.maxLength)}max-length="{$ui.maxLength}"{/if}
+                />
+            </div>
+            <div class="cell small-12">
+                {if isset($ui.dataError) && $ui.dataError}<span class="form-error is-visible glm-foundation-6-ui-field-data-error">{$ui.dataError}</span>{/if}
+                {if isset($ui.helpText)}<p class="glm-foundation-6-ui-field-help-text" id="{$ui.field}_HelpText">{$ui.helpText}</p>{/if}
+                {if isset($ui.errorText)}<span id="{$ui.field}_ErrorText" class="form-error glm-foundation-6-ui-field-error-text">{$ui.errorText}</span>{/if}
+            </div>
+        </div>
+    {/if}
 </div>
-- 
2.17.1