fleetio_spark 0.2.40 → 0.2.41

data/app/assets/stylesheets/spark/core/_text.scss

@@ -1,4 +1,4 @@
 body {
   font-family: $base-font;
-  color: $fl-gray-900;
+  color: $base-text-color;
 }

data/app/assets/stylesheets/spark/core/_vars.scss

@@ -10,7 +10,8 @@ $radius-lg:                 8px;
 $base-font: -apple-system, BlinkMacSystemFont, 'Avenir Next', Avenir, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
 $mono-font: 'Roboto Mono', Consolas, 'Andale Mono WT', 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Liberation Mono', 'Nimbus Mono L', Monaco, 'Courier New', Courier, monospace;
 
-// Links
+// Text colors
+$base-text-color:           $fl-gray-900;
 $link-color:                $fl-blue-600;
 $link-hover-color:          $fl-blue-700;
 

data/app/components/spark/app/sidebar_component.rb

@@ -7,7 +7,7 @@ class App::SidebarComponent < Nav::SidebarComponent
 
   element :nav, component: "nav/tree" do
     root_attr id: "app-sidebar-nav"
-    attribute root_icon_size: "18px"
+    attribute root_icon_size: :medium
   end
 
   def render

data/app/components/spark/button/add_component.rb

@@ -0,0 +1,9 @@
+class Button::AddComponent < Button::PrimaryComponent
+  attribute color: 'green'
+  attribute icon: 'plus'
+
+  def before_render
+    super
+  end
+
+end

data/app/components/spark/button/base_component.rb

@@ -0,0 +1,39 @@
+class Button::BaseComponent < SparkComponents::Component
+  COLORS = %i(blue green yellow red)
+  SIZES = %i(small base medium large)
+
+  attribute :text, :color, :size, :icon, :href
+  root_attr :value, :disabled, :name, :target, type: :button
+  aria_attr :hidden
+
+  base_class "spark-button"
+
+  validates_choice :size, SIZES.dup, required: false
+  validates_choice :color, COLORS.dup, required: false
+  validates :text, presence: true, if: -> { @yield.nil? }
+
+  def before_render
+    add_class("size-#{size}") if size
+    add_class("color-#{color}") if color
+    if (href && (data_attr[:remote] || data_attr[:method]))
+      root_attr rel: "nofollow"
+    end
+  end
+
+  def render
+    content_tag(:div, class: join_class("wrapper")) do
+      if href
+        link_to(button_content, href, tag_attrs)
+      else
+        tag.button(button_content, tag_attrs)
+      end
+    end
+  end
+
+  def button_content
+    capture {
+      concat component("ui/icon", name: icon) if icon
+      concat tag.span(text || @yield, class: join_class(:label))
+    }
+  end
+end

data/app/components/spark/button/cancel_component.rb

@@ -0,0 +1,8 @@
+class Button::CancelComponent < Button::TextComponent
+  aria_attr hidden: true
+
+  def before_render
+    super
+  end
+
+end

data/app/components/spark/button/danger_component.rb

@@ -0,0 +1,8 @@
+class Button::DangerComponent < Button::PrimaryComponent
+  attribute color: :red
+
+  def before_render
+    super
+  end
+
+end

data/app/components/spark/button/group_component.rb

@@ -0,0 +1,24 @@
+class Button::GroupComponent < SparkComponents::Component
+  COLORS = Button::BaseComponent::COLORS
+  SIZES = Button::BaseComponent::SIZES
+
+  attribute :color, :size
+  root_attr role: "group"
+
+  base_class "spark-button-group"
+
+  validates_choice :color, COLORS, required: false
+  validates_choice :size, SIZES, required: false
+
+  element :button, multiple: true, component: "button/base"
+
+  def render
+    unless buttons.empty?
+      content_tag(:div, tag_attrs) do
+        buttons.each { |button|
+          concat button
+        }
+      end
+    end
+  end
+end

data/app/components/spark/button/icon_component.rb

@@ -0,0 +1,14 @@
+class Button::IconComponent < Button::BaseComponent
+
+  def before_render
+    aria_attr label: text
+    add_class("theme-icon-only")
+    super
+  end
+
+  validates :icon, presence: true
+
+  def button_content
+    concat component("ui/icon", name: icon, class: join_class('icon')) if icon
+  end
+end

data/app/components/spark/button/primary_component.rb

@@ -0,0 +1,8 @@
+class Button::PrimaryComponent < Button::BaseComponent
+
+  def before_render
+    add_class("theme-primary")
+    super
+  end
+
+end

data/app/components/spark/button/text_component.rb

@@ -0,0 +1,8 @@
+class Button::TextComponent < Button::BaseComponent
+
+  def before_render
+    add_class("theme-text")
+    super
+  end
+
+end

data/app/components/spark/form/input_component.rb

@@ -3,4 +3,7 @@ class Form::InputComponent < SparkComponents::Component
   attribute :label
   add_class "spark-input"
 
+  # TODO: Add aria attribute validation when component attribute features are fixed.
+  # If a label is not passed, require an aria-label for accessibility
+  #validates :label, presence: { message: %q(a label or `aria: { label: "text" }` is required for accessiblity) }, unless: -> { @aria.present? && @aria[:label].present? }
 end

data/app/components/spark/form/label_component.rb

@@ -1,10 +1,10 @@
 class Form::LabelComponent < SparkComponents::Component
   attribute :text
-  base_class "label"
+  base_class "spark-label"
 
   def render
-    content_tag(:label, tag_attrs) do
-      concat content_tag(:div, text, class: join_class("text"))
+    tag.label(tag_attrs) do
+      concat tag.div(text, class: "label-text") if text
       concat @yield
     end
 

data/app/components/spark/form/switch_component.rb

@@ -1,12 +1,15 @@
 class Form::SwitchComponent < Form::CheckboxComponent
+  SIZE      = %i[small medium].freeze
+  ALIGNMENT = %i[left right].freeze
+
   base_class "spark-switch"
-  attribute :size, align: :left
+  attribute size: :medium, align: :left, value: true
 
-  validates_choice :size, %i[small medium], required: false
-  validates_choice :align, %i[left right]
+  validates_choice :size, SIZE
+  validates_choice :align, ALIGNMENT
 
   def before_render
-    add_class(size) if size
+    add_class(size)
     add_class(join_class("align-#{align}")) if align
   end
 

data/app/components/spark/layout/grid/column_component.rb

@@ -1,18 +1,18 @@
 class Layout::Grid::ColumnComponent < SparkComponents::Component
-  SPAN_CLASSES = (1..12).to_a
-  base_class "spark-grid-column"
-  attribute :fill
+  SPAN_NAME = { half: 6, third: 4, fourth: 3, sixth: 2 }.freeze
+  SPAN      = [*(1..12), *SPAN_NAME.keys].freeze
+  OFFSET    = [*(1..11), *SPAN_NAME.keys].freeze
 
   data_attr :span, :offset
 
-  validates_choice :span, (1..12).to_a.concat(%w(half third fourth sixth)), required: false
-  validates_choice :offset, (1..11).to_a.concat(%w(half third fourth sixth)), required: false
+  validates_choice :span, SPAN, required: false
+  validates_choice :offset, OFFSET, required: false
 
   def before_render
+    base_class "spark-grid-column"
     @span ||= parent.span if parent && parent.respond_to?(:span)
     data_attr span: span_name(span) || 0
     data_attr offset: span_name(offset)
-    add_class "fill-column" if @fill
   end
 
   def render
@@ -20,19 +20,13 @@ class Layout::Grid::ColumnComponent < SparkComponents::Component
   end
 
   def span_name(size)
+    return if size.nil?
     if size.is_a? Integer
-      SPAN_CLASSES[size - 1]
+      SPAN[size - 1]
     elsif size.is_a? Float
-      SPAN_CLASSES[(SPAN_CLASSES.size * size) - 1]
-    else
-      size = case size
-        when :half then 2
-        when :third then 3
-        when :fourth then 4
-        when :sixth then 6
-        else return size
-      end 
-      SPAN_CLASSES[(SPAN_CLASSES.size / size) - 1]
+      SPAN[(SPAN.size * size) - 1]
+    elsif size = SPAN_NAME[size.to_sym]
+      SPAN[(12 / size) - 1]
     end
   end
 end

data/app/components/spark/layout/grid_component.rb

@@ -1,32 +1,35 @@
 class Layout::GridComponent < SparkComponents::Component
-  attribute :gutter, :gutter_match, :reverse, :cols, :span, :break, :min, wrap: true
+  COLUMN = [1,2,3,4,6,12].freeze
+  GUTTER = %i[small base medium large xl].freeze
 
-  base_class "spark-grid"
+  attribute :span, :cols, :gutter, :gutter_match, :min, wrap: true
 
-  element :column, multiple: true, component: "layout/grid/column"
+  validates_choice :span, Layout::Grid::ColumnComponent::SPAN, required: false
+  validates_choice :cols, COLUMN, required: false
+  validates_choice :gutter, GUTTER, required: false
 
-  validates_choice :span, (1..12).to_a.concat(%w(half third fourth sixth)), required: false
-  validates_choice :cols, [1,2,3,4,6,12], required: false
-  validates_choice :gutter, %i[default small medium large xl], required: false
+  element :column, multiple: true, component: "layout/grid/column"
 
   def after_init
+    raise "Grids do not support both cols and span. Set `span` (default span for colums), or `cols` (the number of columns per row)" if span && cols
+    @gutter ||= :base if gutter_match
     @span = 12 / @cols if @cols
   end
 
   def before_render
+    base_class "spark-grid"
+
     add_class(join_class("gutter-#{gutter}")) if gutter
     add_class(join_class("gutter-#{gutter}-match")) if gutter && gutter_match
     data_attr column_min: min
-    data_attr column_break: @break
     add_class join_class("no-wrap") unless wrap
-    add_class join_class("reverse") if reverse
   end
 
   def render
     content_tag(:div, tag_attrs) do
-      concat content_tag(:div, class: join_class("columns")) {
-        columns.each { |column| 
-          concat column 
+      concat content_tag(:div, class: join_class(:columns)) {
+        columns.each { |column|
+          concat column
         }
       }
     end

data/app/components/spark/nav/group_component.rb

@@ -1,16 +1,18 @@
 class Nav::GroupComponent < SparkComponents::Component
-  element :item, multiple: true, component: "nav/item"
+  attribute role: 'group'
   attribute item_role: 'menuitem'
 
+  element :item, multiple: true, component: "nav/item"
+
   def before_render
     add_class "active" if active?
   end
 
   def render
     unless items.empty?
-      content_tag(:ul, class: "nav-group", role: "group") do
-        items.each { |item| 
-          concat content_tag(:li, item, class: "nav-item-wrapper", role: item_role)
+      tag.ul(class: "spark-nav-group", role: role) do
+        items.each { |item|
+          concat tag.li(item, class: "nav-item-wrapper", role: item_role)
         }
       end
     end

data/app/components/spark/nav/item_component.rb

@@ -1,6 +1,6 @@
 class Nav::ItemComponent < SparkComponents::Component
   attribute :text, :icon, :detail, :badge, :active, :beta, :new
-  attribute icon_size: "12px"
+  attribute icon_size: :small
   root_attr :href, :role, :id, :tabindex, :target
   base_class "nav-item"
 
@@ -11,7 +11,7 @@ class Nav::ItemComponent < SparkComponents::Component
 
   def render
     content_tag(:a, tag_attrs) do
-      concat @view.use_svg(icon, width: icon_size, height: icon_size, class: join_class("icon")) if icon
+      concat component("ui/icon", name: icon, size: icon_size, class: join_class("icon")) if icon
       concat tag.span(class: join_class("content")) {
         concat tag.span(text || @yield, class: join_class("text"))
         concat tag.span(label.upcase, class: [join_class("label"), label]) if label

data/app/components/spark/nav/pills_component.rb

@@ -17,7 +17,7 @@ class Nav::PillsComponent < SparkComponents::Component
     return if items.empty?
     content_tag(:nav, tag_attrs) do
       content_tag(:div, class: "nav-pills-wrapper") {
-        concat content_tag(:ul, class: "nav-group") {
+        concat content_tag(:ul, class: "spark-nav-group") {
           items.each { |item|
             concat content_tag(:li, item, class: "nav-pill-wrapper #{item.active? ? "active" : nil}")
           }

data/app/components/spark/nav/sidebar_component.rb

@@ -6,7 +6,7 @@ class Nav::SidebarComponent < SparkComponents::Component
 
   element :header
   element :footer
-  element :nav, component: "nav/group", multiple: true do
+  element :group, component: "nav/group", multiple: true do
     attribute :title
 
     def render
@@ -26,11 +26,7 @@ class Nav::SidebarComponent < SparkComponents::Component
       concat sidebar_toggle_tag
       concat content_tag(:div, class: join_class("wrapper")) {
         concat header_tag unless header.blank?
-        if nav.is_a?(Array)
-          navs.each { |nav| concat nav }
-        else
-          concat nav
-        end
+        groups.each { |group| concat group }
         concat footer_tag unless footer.blank?
       }
     end
@@ -49,11 +45,12 @@ class Nav::SidebarComponent < SparkComponents::Component
   def sidebar_toggle_tag
     component("nav/toggle", target: selector(:data, :nav_id), class: join_class("toggle"), text: sidebar_button_text)
   end
+
   # Tries to find the text for the active nav item, otherwise shows sidebar label text
   def sidebar_button_text
     # Find any navs which have active items
-    active_nav = navs.find { |nav|
-      nav.active_item
+    active_nav = groups.find { |group|
+      group.active_item
     }
 
     # Use the active item text or the label for the sidebar

data/app/components/spark/nav/tabs_component.rb

@@ -1,11 +1,13 @@
 class Nav::TabsComponent < SparkComponents::Component
+  LAYOUT = %i[flush padded]
+
   base_class "spark-nav-tabs"
   root_attr role: "navigation"
   attribute layout: :flush
 
   aria_attr :label
   validates :label, presence: true
-  validates_choice :layout, %i[padded flush]
+  validates_choice :layout, LAYOUT
 
   element :item, multiple: true, component: "nav/item" do
     def render
@@ -51,7 +53,7 @@ class Nav::TabsComponent < SparkComponents::Component
   end
 
   def tab_group(options={}, &block)
-    options[:class] = "nav-group #{options[:class]}"
+    options[:class] = "spark-nav-group #{options[:class]}"
     content_tag(:ul, options, &block)
   end
 end

data/app/components/spark/nav/tree/group_component.rb

@@ -1,7 +1,6 @@
 class Nav::Tree::GroupComponent < Nav::GroupComponent
   attribute :icon, :text, expanded: false
   attribute :group_icon_size
-  root_attr role: "treeitem"
   base_class "nav-item-wrapper"
 
   def before_render
@@ -14,6 +13,7 @@ class Nav::Tree::GroupComponent < Nav::GroupComponent
 
   def render
     unless items.empty?
+      root_attr role: "treeitem"
       content_tag(:li, tag_attrs) do
         concat component("nav/item", text: text, icon: icon, icon_size: group_icon_size, class: "tree-trigger", tabindex: 0, href: "#") { expand_icon }
         concat super

data/app/components/spark/nav/tree_component.rb

@@ -2,7 +2,7 @@ class Nav::TreeComponent < SparkComponents::Component
   base_class "nav-tree"
   root_attr :id, role: "tree"
   aria_attr :label
-  attribute root_icon_size: "14px"
+  attribute root_icon_size: :small
 
   def before_render
     data_attr tree: id
@@ -29,7 +29,6 @@ class Nav::TreeComponent < SparkComponents::Component
       parent.items << super unless items.empty?
     end
 
-
     def expanded?
       parent.group_expanded?(node) || active? || expanded
     end