tungsten 0.1.34 → 0.1.35

data/app/helpers/tungsten/content_helper.rb

@@ -55,10 +55,10 @@ module Tungsten
       options[:data] ||= {}
       options[:data]['timeago'] = options.delete(:timeago_style) || 'long'
       options[:data][:mode] = options.delete(:start)
+      options[:icon] = 'sync-circle'
 
       content_tag(:span, class: 'time-wrapper') {
-        concat time_tag(date, options)
-        concat use_svg 'sync-circle'
+        time_tag(date, options)
       }
     end
 
@@ -73,18 +73,25 @@ module Tungsten
     end
 
     def time_tag(date, options={})
-      date = DateTime.parse(date.to_s).iso8601
+      iso_date = DateTime.parse(date.to_s).new_offset(0).iso8601
+
+      options[:datetime] = iso_date
 
-      options[:datetime] = date
+      icon = use_svg(options.delete(:icon)) if options[:icon]
       
       unless options.delete(:toggle) || options.delete(:timeago)
         options[:class] = 'has-tooltip'
-        options['aria-label'] = time_ago_in_words(date) + ' ago'
+        options['aria-label'] = time_ago_in_words(iso_date) + ' ago'
       end
 
       content_tag(:time, options) {
-        ('<span class="date">' + date.sub('T','</span> <span class="time">').sub('+00:00','</span> <span class="timezone">UTC</span>')).html_safe
+        concat content_tag(:span, class: 'date-text') {
+          ('<span class="date">' + iso_date.sub('T','</span> <span class="time">').sub('+00:00','</span> <span class="timezone">UTC</span>')).html_safe
+        }
+        concat ' '
+        concat icon
       }
+
     end
 
     def timeago_tag(date, options={})

data/app/helpers/tungsten/form_for_helper.rb

@@ -0,0 +1,25 @@
+module Tungsten
+  module FormForHelper
+    class TungstenFormBuilder
+      def initialize(template, values, errors)
+        @template = template
+        @values = values
+        @errors = errors
+      end
+
+      def method_missing(method, field_name, options = {})
+        @template.send(method, field_name, options.merge({
+          value: @values[field_name],
+          errors: @errors[field_name]
+        }.compact))
+      end
+    end
+
+    def tungsten_form_for(values, options = {}, &block)
+      errors = options.delete(:errors) || values.try(:errors) || {}
+
+      body = capture TungstenFormBuilder.new(self, values, errors), &block
+      form_tag_with_body options, body
+    end
+  end
+end

data/app/helpers/tungsten/form_helper.rb

@@ -369,6 +369,10 @@ module Tungsten
       options[:data] ||= {}
       options[:data][:message] ||= options.delete(:message)
 
+      if errors = options.delete(:errors)
+        options[:data]['invalid-value'] = value
+      end
+
       if options.delete(:copy)
         copy_class = "copy-input-#{SecureRandom.hex(8)}"
         copy = copy_button ".#{copy_class}"
@@ -378,7 +382,7 @@ module Tungsten
       options[:type] ||= type
 
       label_options = { 
-        class: "#{label_class(options[:type])} #{options.delete(:class)}"
+        class: "#{label_class(options[:type])} #{options.delete(:class)} #{'remotely-invalid' if errors}"
       }
 
       if options[:type] != :textarea && placeholder = options[:placeholder]
@@ -390,11 +394,14 @@ module Tungsten
         label_text = content_tag(:span, class: 'label-text') { label_text }
       end
 
+      
       options[:class] = "#{options[:class]} #{copy_class}".strip if copy_class
+
       tag = base_tag(name, value, options, type, &block)
 
       label = content_tag(:label, label_options) {
         concat label_text
+
         if type == :select
           concat tag
           concat placeholder
@@ -404,6 +411,24 @@ module Tungsten
             concat placeholder
           }
         end
+
+        if errors
+          concat content_tag(:span, class: "remote-validation-message") {
+            content_tag(:span, class: "validation-message-text", role:"alert") {
+              if errors.size > 1
+                concat content_tag(:span, class: 'validation-error-notice') { 'There were some errors:' }
+                concat " "
+              end
+              errors.each do |error|
+                concat content_tag(:span, class: 'valdiation-error-item') {
+                  concat error
+                }
+                concat " "
+              end
+            }
+          }.html_safe
+
+        end
       }
 
       if copy

data/app/helpers/tungsten/icon_helper.rb

@@ -1,11 +1,11 @@
 module Tungsten
   module IconHelper
     def status_icon (status, options={})
-      options[:height] ||= '0.85em'
+      options[:height] ||= '1em'
       span_options = {}
 
       span_options['aria-label'] = status.titlecase
-      span_options[:class] = 'status-icon has-tooltip'
+      span_options[:class] = 'status-icon inline-icon has-tooltip'
       options[:desc] ||= status
 
       content_tag :span, span_options do

data/app/helpers/tungsten/table_helper.rb

@@ -0,0 +1,62 @@
+module Tungsten
+  module TableHelper
+    class TableDrawer < Tungsten::Helper
+
+      def initialize( options = {} )
+        @options = options
+        @id = "drawer-#{SecureRandom.hex(5)}"
+      end
+
+      def display( body )
+        options = {
+          class: 'table-drawer-handle',
+          id: @id,
+        }
+        options[:data] ||= {}
+
+        if @options.delete(:toggle)
+          options[:data]['toggle-class'] = 'open'
+          options[:role] = 'button'
+          options[:class] << ' handle-toggle'
+        end
+        content_tag(:tr, options) { body }
+      end
+
+      def drawer(options={}, &block)
+
+        colspan = options.delete(:colspan) || 100
+        options[:class] = "#{options[:class]} table-drawer-content".strip
+
+        content_tag(:tr, class: 'table-drawer') {
+          content_tag(:td, colspan: colspan) {
+            content_tag(:div, class: 'table-drawer-content-wrapper') {
+              content_tag(:div, options, &block)
+            }
+          }
+        }
+      end
+
+      def close( &block )
+        trigger_action( 'remove', &block )
+      end
+
+      def toggle( &block )
+        trigger_action( 'toggle', &block )
+      end
+
+      def open( &block )
+        trigger_action( 'add', &block )
+      end
+
+      def id
+        @id
+      end
+
+      private
+
+      def trigger_action( action, &block )
+        capture(&block).sub(/>/, " role='button' data-#{action}-class=\"open; ##{@id}\">").html_safe
+      end
+    end
+  end
+end

data/lib/tungsten/version.rb

@@ -1,3 +1,3 @@
 module Tungsten
-  VERSION = "0.1.34"
+  VERSION = "0.1.35"
 end

data/public/{code-0.1.34.js → code-0.1.35.js}

@@ -89,4 +89,4 @@ function move(o){document.documentElement.scrollTop=o,document.body.parentNode.s
 });
 
 
-//# sourceMappingURL=/assets/tungsten/code-0.1.34.map.json
+//# sourceMappingURL=/assets/tungsten/code-0.1.35.map.json

data/public/{tungsten-0.1.34.css → tungsten-0.1.35.css}

@@ -947,6 +947,8 @@ pre {
   background: rgba(255, 255, 255, 0.1);
   box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.3) inset;
   text-shadow: 0 1px 1px rgba(0, 0, 0, 0.15); }
+.application-banner .icon-nav-item {
+  text-decoration: none; }
 .application-banner .icon-nav-item:hover .deployment-icon-hex {
   fill: rgba(255, 255, 255, 0.05); }
 
@@ -1856,7 +1858,8 @@ select::-moz-focus-inner, textarea::-moz-focus-inner, textarea::-moz-focus-inner
   padding: 0; }
 
 .input-wrapper {
-  position: relative; }
+  position: relative;
+  display: inline; }
 
 input[type=search], input[type=search]::-webkit-search-decoration, input[type=search]::-webkit-search-cancel-button {
   -webkit-appearance: none; }
@@ -1929,7 +1932,7 @@ form.button_to {
 .placeholder-label ::placeholder {
   opacity: 0;
   color: transparent; }
-.placeholder-label label:not(.valid):not(.invalid) input:focus + span, .placeholder-label label:not(.valid):not(.invalid) input:active + span {
+.placeholder-label label:not(.valid):not(.invalid) input:focus + .input-wrapper, .placeholder-label label:not(.valid):not(.invalid) input:active + .input-wrapper {
   color: #8c9ba5; }
 .placeholder-label input {
   z-index: 1;
@@ -2147,20 +2150,20 @@ input:checked + .check-switch-panel {
   -webkit-transform: scale(1.1) translate3d(16px, 0, 0);
           transform: scale(1.1) translate3d(16px, 0, 0); }
 
-label.valid {
+label.valid:not(.remotely-invalid) {
   color: #2ac84f; }
-label.valid input, label.valid select, label.valid textarea {
+label.valid:not(.remotely-invalid) input, label.valid:not(.remotely-invalid) select, label.valid:not(.remotely-invalid) textarea {
   -webkit-text-fill-color: currentColor;
   box-shadow: 0 0 0 1px #2ac84f inset, 0 0 0 transparent; }
-label.valid input:focus, label.valid input:hover:not([disabled]), label.valid input:active, label.valid select:focus, label.valid select:hover:not([disabled]), label.valid select:active, label.valid textarea:focus, label.valid textarea:hover:not([disabled]), label.valid textarea:active {
+label.valid:not(.remotely-invalid) input:focus, label.valid:not(.remotely-invalid) input:hover:not([disabled]), label.valid:not(.remotely-invalid) input:active, label.valid:not(.remotely-invalid) select:focus, label.valid:not(.remotely-invalid) select:hover:not([disabled]), label.valid:not(.remotely-invalid) select:active, label.valid:not(.remotely-invalid) textarea:focus, label.valid:not(.remotely-invalid) textarea:hover:not([disabled]), label.valid:not(.remotely-invalid) textarea:active {
   box-shadow: 0 0 0 1px #2ac84f inset, 0 1px 3px rgba(15, 33, 46, 0.3); }
 
-label.invalid {
+label.invalid, label.remotely-invalid:not(.valid) {
   color: #dd2f41; }
-label.invalid input, label.invalid select, label.invalid textarea {
+label.invalid input, label.invalid select, label.invalid textarea, label.remotely-invalid:not(.valid) input, label.remotely-invalid:not(.valid) select, label.remotely-invalid:not(.valid) textarea {
   -webkit-text-fill-color: currentColor;
   box-shadow: 0 0 0 1px #dd2f41 inset, 0 0 0 transparent; }
-label.invalid input:focus, label.invalid input:hover:not([disabled]), label.invalid input:active, label.invalid select:focus, label.invalid select:hover:not([disabled]), label.invalid select:active, label.invalid textarea:focus, label.invalid textarea:hover:not([disabled]), label.invalid textarea:active {
+label.invalid input:focus, label.invalid input:hover:not([disabled]), label.invalid input:active, label.invalid select:focus, label.invalid select:hover:not([disabled]), label.invalid select:active, label.invalid textarea:focus, label.invalid textarea:hover:not([disabled]), label.invalid textarea:active, label.remotely-invalid:not(.valid) input:focus, label.remotely-invalid:not(.valid) input:hover:not([disabled]), label.remotely-invalid:not(.valid) input:active, label.remotely-invalid:not(.valid) select:focus, label.remotely-invalid:not(.valid) select:hover:not([disabled]), label.remotely-invalid:not(.valid) select:active, label.remotely-invalid:not(.valid) textarea:focus, label.remotely-invalid:not(.valid) textarea:hover:not([disabled]), label.remotely-invalid:not(.valid) textarea:active {
   box-shadow: 0 0 0 1px #dd2f41 inset, 0 1px 3px rgba(15, 33, 46, 0.3); }
 
 @-webkit-keyframes expand-validation {
@@ -2192,7 +2195,7 @@ label.invalid input:focus, label.invalid input:hover:not([disabled]), label.inva
     opacity: 1;
     -webkit-transform: translate(-50%, 6px) scale(1);
             transform: translate(-50%, 6px) scale(1); } }
-.validation-message {
+.validation-message, .remote-validation-message {
   overflow: hidden;
   display: block;
   z-index: 3;
@@ -2200,7 +2203,8 @@ label.invalid input:focus, label.invalid input:hover:not([disabled]), label.inva
           animation: expand-validation 0.25s cubic-bezier(0.4, 0, 0.2, 1);
   position: relative;
   top: -1px; }
-.validation-message .validation-message-text {
+
+.validation-message-text {
   margin: 0;
   display: block;
   padding: .8em .8em;
@@ -2209,9 +2213,21 @@ label.invalid input:focus, label.invalid input:hover:not([disabled]), label.inva
   font-size: 12px;
   line-height: 1em;
   background: #8c9ba5; }
-.invalid .validation-message .validation-message-text {
+.invalid .validation-message-text, .remotely-invalid:not(.valid) .validation-message-text {
   background: #dd2f41; }
 
+.valdiation-error-item, .validation-error-notice {
+  display: block;
+  line-height: 1.3em; }
+
+.validation-error-notice {
+  font-weight: bold;
+  margin-bottom: .2em; }
+.validation-error-notice ~ .valdiation-error-item {
+  margin-left: .5em; }
+.validation-error-notice ~ .valdiation-error-item:before {
+  content: "• "; }
+
 .empty-label[data-slider-label] {
   display: none; }
 
@@ -2608,9 +2624,9 @@ input::-moz-focus-inner {
           flex-grow: 1; }
 .input-row > * ~ * {
   margin-left: 8px; }
-.input-row button {
+.input-row > .button-wrapper button {
   margin-top: 1px;
-  margin-bottom: 1px; }
+  height: 41px; }
 
 /* ========================================================================== *
  * Tables module
@@ -2639,6 +2655,14 @@ table.ruled tfoot th, table.ruled tbody tr:nth-child(n+2) th, table.ruled tbody
 table.ruled thead th {
   border-bottom: 1px solid #dfe3e6; }
 
+table.bordered {
+  border-top: 1px solid #dfe3e6;
+  border-bottom: 1px solid #dfe3e6; }
+table.bordered td:first-child, table.bordered th:first-child {
+  border-left: 1px solid #dfe3e6; }
+table.bordered td:last-child, table.bordered th:last-child {
+  border-right: 1px solid #dfe3e6; }
+
 table.outlined, table.doc-table {
   border-collapse: collapse; }
 table.outlined td, table.outlined th, table.doc-table td, table.doc-table th {
@@ -2666,16 +2690,53 @@ th.sub-heading {
   padding-top: 4px;
   padding-bottom: 4px; }
 
+@-webkit-keyframes open-table-drawer {
+  0% {
+    max-height: 0; }
+  100% {
+    max-height: 40vw; } }
+
+@keyframes open-table-drawer {
+  0% {
+    max-height: 0; }
+  100% {
+    max-height: 40vw; } }
+tr:not(.open) + .table-drawer {
+  display: none; }
+.table-drawer td {
+  padding: 0; }
+.table-drawer .table-drawer-content {
+  padding: 8px;
+  background: rgba(0, 0, 0, 0.05); }
+.table-drawer .table-drawer-content > :last-child {
+  margin-bottom: 0; }
+.open + .table-drawer .table-drawer-content-wrapper {
+  overflow: hidden;
+  -webkit-animation: open-table-drawer .4s ease-in;
+          animation: open-table-drawer .4s ease-in; }
+
+.rotate-icon svg {
+  -webkit-transform: rotate(180deg);
+          transform: rotate(180deg); }
+
+[data-toggle] {
+  cursor: pointer; }
+
 /* ========================================================================== *
  * Buttons module
  * -------------------------------------------------------------------------- */
 /* ===================================== *
  * Common
  * ------------------------------------- */
+[role=button] {
+  cursor: pointer; }
+
 .button {
   display: -webkit-inline-box;
   display: -ms-inline-flexbox;
   display: inline-flex;
+  -ms-flex-item-align: center;
+      align-self: center;
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
@@ -2780,9 +2841,25 @@ th.sub-heading {
 .button-group .button:last-child {
   border-radius: 0 3px 3px 0; }
 
-.button + .button {
+.button-wrapper + .button-wrapper {
   margin-left: 8px; }
 
+.button-wrapper + a {
+  -ms-flex-item-align: center;
+      -ms-grid-row-align: center;
+      align-self: center; }
+
+.link-button {
+  color: #152934;
+  -webkit-text-decoration-color: #8c9ba5;
+          text-decoration-color: #8c9ba5;
+  font-size: 14px; }
+.link-button:hover, .link-button:focus, .link-button:active {
+  color: #0094fd;
+  text-decoration: underline;
+  -webkit-text-decoration-color: #0094fd;
+          text-decoration-color: #0094fd; }
+
 /* ========================================================================== *
  * Badges module
  * -------------------------------------------------------------------------- */
@@ -2840,12 +2917,10 @@ th.sub-heading {
   -webkit-box-pack: center;
       -ms-flex-pack: center;
           justify-content: center; }
-.card-actions a, .card-actions .button {
+.card-actions a, .card-actions .button-wrapper {
   margin-left: 8px; }
-.card-actions a:last-child, .card-actions .button:last-child {
+.card-actions a:last-child, .card-actions .button-wrapper:last-child {
   margin-left: 0; }
-.card p, .card ul, .card ol, .card h1, .card h2, .card h3, .card h4, .card h5, .card h6, .card pre, .card table, .card .card {
-  margin-bottom: 20px; }
 .card:not([class*='columns']) {
   border-radius: 3px;
   box-shadow: 0 0 0 1px rgba(15, 33, 46, 0.05), 0 1px 3px rgba(15, 33, 46, 0.15); }
@@ -2870,7 +2945,12 @@ th.sub-heading {
   font-size: 16px;
   -webkit-box-align: top;
       -ms-flex-align: top;
-          align-items: top; }
+          align-items: top;
+  margin-bottom: 0; }
+.card-header {
+  margin-bottom: 20px; }
+.card-footer {
+  margin-top: 20px; }
 .card-header, .card-footer {
   display: -webkit-box;
   display: -ms-flexbox;
@@ -3239,18 +3319,26 @@ table.card {
   margin-right: 4px; }
 .time-wrapper svg {
   color: #5aaafa;
-  display: none;
   opacity: 0;
   height: 1em;
   width: 1em;
   position: relative;
-  top: .15em;
+  top: .17em;
   fill: currentColor;
   -webkit-transition: cubic-bezier(0.4, 0, 0.2, 1) 0.25s;
   transition: cubic-bezier(0.4, 0, 0.2, 1) 0.25s;
-  -webkit-transition-property: color, opacity;
-  transition-property: color, opacity; }
-.time-wrapper .time-toggle:hover + svg {
+  -webkit-transition-property: opacity;
+  transition-property: opacity; }
+.time-wrapper .time-toggle:hover svg {
   opacity: 1; }
-.time-wrapper .time-toggle + svg {
-  display: initial; }
+
+.inline-icon {
+  position: relative;
+  height: 1em;
+  width: 1em;
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex; }
+.inline-icon svg {
+  position: absolute;
+  bottom: -0.125em; }