Working on UI Elements

Starting to work in Chuck's ui elements

diff --git a/views/ui/f6/checkbox.html b/views/ui/f6/checkbox.html
index 01fd03b..a5b535a 100644 (file)
--- a/views/ui/f6/checkbox.html
+++ b/views/ui/f6/checkbox.html
@@ -16,18 +16,11 @@
         'dataError'     => string   Error from data Abstract Class
     ]}
 *}
-<div class="cell small-12">
+<div class="cell small-12 glm-f6-ui-field">
     <div class="grid-x grid-margin-x">
-        <div class="cell shrink">
+        <div class="cell shrink glm-f6-ui-field-input">
             <div class="switch">
-                <input
-                    id="{$ui.field}"
-                    name="{$ui.field}"
-                    type="checkbox"
-                    class="switch-input"
-                    {if $ui.required}required{/if}
-                    {if $ui.value} checked{/if}
-                    >
+                <input class="switch-input" id="{$ui.field}" type="checkbox" name="{$ui.field}"{if $ui.value} checked{/if}{if $ui.required} required{/if}>
                 <label for="{$ui.field}" class="switch-paddle">
                     <span class="show-for-sr">{$ui.label}</span>
                     <span class="switch-active" aria-hidden>{if isset($ui.active)}{$ui.active}{else}On{/if}</span>
@@ -36,13 +29,13 @@
             </div>
 
         </div>
-        <div class="cell auto">
-            <p>
-                <label for="{$ui.field}"> {$ui.label} </label>
-            </p>
+        <div class="cell auto glm-f6-ui-label-container-right">
+            <label for="{$ui.field}" class="{if $ui.required} glm-required{/if} glm-f6-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.dataError) && $ui.dataError}<span class="form-error is-visible glm-f6-ui-field-data-error">{$ui.dataError}</span>{/if}
+            {if isset($ui.errorText)}<span id="{$ui.field}_ErrorText" class="form-error glm-f6-ui-field-error-text" data-form-error-for="{$ui.field}">{$ui.errorText}</span>{/if}
+            {if isset($ui.helpText)}<span class="glm-f6-ui-field-help-text" id="{$ui.field}_HelpText">{$ui.helpText}</span]>{/if}
         </div>
     </div>
 </div>

diff --git a/views/ui/f6/pagination.html b/views/ui/f6/pagination.html
new file mode 100644 (file)
index 0000000..fd76808
--- /dev/null
+++ b/views/ui/f6/pagination.html
@@ -0,0 +1,23 @@
+{*
+    Foundation 6 Pagination
+
+    {$ui = [
+        'limit'     => integer
+        'total'     => integer
+        'prevStart' => integer
+        'nextStart' => integer
+    ]}
+*}
+<nav aria-label="Pagination">
+    <ul class="pagination">
+        <li class="pagination-previous disabled">Previous <span class="show-for-sr">page</span></li>
+        <li class="current"><span class="show-for-sr">You're on page</span> 1</li>
+        <li><a href="#" aria-label="Page 2">2</a></li>
+        <li><a href="#" aria-label="Page 3">3</a></li>
+        <li><a href="#" aria-label="Page 4">4</a></li>
+        <li class="ellipsis" aria-hidden="true"></li>
+        <li><a href="#" aria-label="Page 12">12</a></li>
+        <li><a href="#" aria-label="Page 13">13</a></li>
+        <li class="pagination-next"><a href="#" aria-label="Next page">Next <span class="show-for-sr">page</span></a></li>
+      </ul>
+</nav>

diff --git a/views/ui/f6/text.html b/views/ui/f6/text.html
index 99833c5..00af318 100644 (file)
--- a/views/ui/f6/text.html
+++ b/views/ui/f6/text.html
@@ -1,43 +1,55 @@
 {*
-    Foundation 6 Text Input 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.
+    Foundation 6 - Text Input Field
+
+    Do not list parameters if they're false. (We're not checking for false).
 
     {$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,
-        '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', ...),
-        'maxlength'     => integer  Maximum number of characters that may be entered,
-        '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
+        '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,
+        'required'      => boolean              True if required,
+        'maxWidth'      => string               Size of input field using standard style notation ('900px', '15rem', ...),
+        'maxlength'     => integer              Maximum number of characters that may be entered,
+        '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">
-    <label for="{$ui.field}" class="{if $ui.required} glm-required{/if}">{$ui.label}</label>
-    <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}
-    />
-    {if isset($ui.dataError) && $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="cell small-12 glm-f6-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="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-f6-ui-field-label">{$ui.label}</label>
+            </div>
+            <div class="cell small-12">
+                <input
+                    class="glm-f6-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-f6-ui-field-data-error">{$ui.dataError}</span>{/if}
+                {if isset($ui.errorText)}<span id="{$ui.field}_ErrorText" class="form-error glm-f6-ui-field-error-text" data-form-error-for="{$ui.field}">{$ui.errorText}</span>{/if}
+                {if isset($ui.helpText)}<span class="glm-f6-ui-field-help-text" id="{$ui.field}_HelpText">{$ui.helpText}</span>{/if}
+            </div>
+        </div>
+    {/if}
 </div>