fleetio_spark 0.2.31 → 0.2.32

data/app/components/spark/app/layout_component.rb

@@ -6,7 +6,7 @@ class App::LayoutComponent < SparkComponents::Component
 
     def render
       data_attr scroll: true
-      content_tag(:div, attrs) do
+      content_tag(:div, tag_attrs) do
         concat header
         concat nav
         concat @yield
@@ -15,13 +15,13 @@ class App::LayoutComponent < SparkComponents::Component
 
     element :header do
       def render
-        content_tag(:div, @yield, class: 'app-content-header') unless @yield.blank?
+        content_tag(:div, @yield, class: "app-content-header") unless @yield.blank?
       end
     end
 
     element :nav do
       def render
-        content_tag(:div, @yield, class: 'app-content-nav') unless @yield.blank?
+        content_tag(:div, @yield, class: "app-content-nav") unless @yield.blank?
       end
     end
   end
@@ -30,7 +30,7 @@ class App::LayoutComponent < SparkComponents::Component
     add_class @sidebar ? "with-sidebar" : "without-sidebar"
     @view.capture do
       @banner.each { |item| concat(item) } if @banner
-      concat content_tag(:div, attrs) {
+      concat content_tag(:div, tag_attrs) {
         concat ie_fix
         concat @sidebar
         concat content_tag(:div, class: "app-main") {
@@ -38,21 +38,37 @@ class App::LayoutComponent < SparkComponents::Component
           concat content
         }
       }
-      concat content_tag(:div, content_for(:modals), class: 'app-modals') if @view.content_for?(:modals)
+      #concat content_tag(:div, content_for(:modals), class: "app-modals") if @view.content_for?(:modals)
+    end
+  end
+
+  def render
+    add_class @sidebar ? "with-sidebar" : "without-sidebar"
+    @view.capture do
+      @banner.each { |item| concat(item) } if @banner
+      concat content_tag(:div, tag_attrs) {
+        concat ie_fix
+        concat @sidebar
+        concat content_tag(:div, class: "app-main") {
+          concat @header
+          concat content
+        }
+      }
+      concat content_tag(:div, content_for(:modals), class: "app-modals") if @view.content_for?(:modals)
     end
   end
 
   def sidebar(options, &block)
-    @sidebar = compose('app/sidebar', options, &block)
+    @sidebar = compose("app/sidebar", options, &block)
   end
 
   def header(options, &block)
-    @header = compose('app/header', options, &block)
+    @header = compose("app/header", options, &block)
   end
 
   def banner(options, &block)
     @banner ||= []
-    @banner.push compose('app/banner', options, &block)
+    @banner.push compose("app/banner", options, &block)
   end
 
   def compose(name, options, &block)

data/app/components/spark/app/sidebar/header_component.rb

@@ -5,16 +5,18 @@ class App::Sidebar::HeaderComponent < SparkComponents::Component
 
   def render
     @view.capture do
-      concat content_tag(:header, attrs) {
-        concat content_tag(:a, class: "dropdown-toggle", href: "javascript:void(0)", "data-toggle" => "dropdown") {
-          concat content_tag(:div, class: "details") {
-            concat account_tag
-            concat icon
-            concat user_tag
+      concat content_tag(:header, tag_attrs) {
+        if account && contact && avatar
+          concat content_tag(:a, class: "dropdown-toggle", href: "javascript:void(0)", "data-toggle" => "dropdown") {
+            concat content_tag(:div, class: "details") {
+              concat account_tag
+              concat icon
+              concat user_tag
+            }
+            concat avatar_tag
           }
-          concat avatar_tag
-        }
-        concat self
+        end
+        concat @yield
       }
     end
   end

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

@@ -1,19 +1,20 @@
 class App::SidebarComponent < Nav::SidebarComponent
   aria_attr label: "primary navigation"
   base_class "app-sidebar"
-  data_attr scroll: true
+  data_attr scroll: true, toggled_by: ".app-sidebar-toggle"
 
   element :header, component: "app/sidebar/header"
 
-  element :footer do
-    base_class "app-sidebar-footer"
-    
-    def render
-      content_tag(:div, @yield, attrs)
-    end
+  element :nav, component: "nav/tree" do
+    root_attr id: "app-sidebar-nav"
+    attribute root_icon_size: "18px"
   end
 
-  element :nav, component: "nav/tree" do
-    attribute id: "app-sidebar-nav"
+  def render
+    content_tag(:nav, tag_attrs) do
+      concat header
+      concat nav
+      concat footer_tag unless footer.blank?
+    end
   end
 end

data/app/components/spark/display/tooltip_component.rb

@@ -0,0 +1,13 @@
+class Display::TooltipComponent < SparkComponents::Component
+  base_class "spark-tooltip"
+  root_attr :id
+  attribute :text
+  validates :text, presence: true
+
+  def render
+    content_tag(:div, tag_attrs){
+      concat @view.use_svg('information-circle', height: '14')
+      concat content_tag(:span, text, class: "tooltip-text")
+    }
+  end
+end

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

@@ -0,0 +1,16 @@
+class Form::CheckboxComponent < Form::InputComponent
+  root_attr :checked
+  data_attr :toggle
+
+  def render
+    component "form/label", text: label do
+      concat tag(:input, input_attrs)
+    end
+  end
+
+  def input_attrs
+    tag_attrs.merge({
+      type: "checkbox"
+    })
+  end
+end

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

@@ -0,0 +1,6 @@
+class Form::InputComponent < SparkComponents::Component
+  root_attr :value, :id, :disabled, :required
+  attribute :label
+  add_class "spark-input"
+
+end

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

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

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

@@ -0,0 +1,29 @@
+class Form::SwitchComponent < Form::CheckboxComponent
+  base_class "spark-switch"
+  attribute :size, align: :left
+
+  validates_choice :size, %i[small medium], required: false
+  validates_choice :align, %i[left right]
+
+  def before_render
+    add_class(size) if size
+    add_class(join_class("align-#{align}")) if align
+  end
+
+  def render
+    content_tag(:div, class: classnames) do
+      component("form/label", text: label, class: join_class("label")) do
+        concat(tag(:input, input_attrs))
+        concat content_tag(:span, class: join_class("panel")) {
+          content_tag(:span, nil, class: join_class("tick"))
+        }
+      end
+    end
+  end
+
+  def input_attrs
+    super.merge({
+      class: join_class("input")
+    })
+  end
+end

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

@@ -0,0 +1,2 @@
+class Layout::BaseComponent < SparkComponents::Component
+end

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

@@ -0,0 +1,26 @@
+class Layout::HeaderComponent < SparkComponents::Component
+  base_class "spark-header"
+  attribute :title, :badge, :tooltip
+  aria_attr :described_by
+  element :action, multiple: true
+
+  def before_render
+    aria_attr(described_by: %(tooltip-#{SecureRandom.hex(10)})) if tooltip
+  end
+
+  def render
+    content_tag(:header, tag_attrs) {
+      concat content_tag(:div, class: join_class("title")) {
+        concat if_content_tag(:div, title, join_class: "title-content")
+        concat tooltip_tag if tooltip
+        concat if_content_tag(:div, badge, join_class: "badge")
+      }
+      concat if_content_tags(:div, actions, join_class: "action")
+    }
+  end
+
+  def tooltip_tag
+    component("display/tooltip", text: tooltip, id: aria_attr[:described_by], class: join_class("tooltip"))
+  end
+end
+

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

@@ -0,0 +1,31 @@
+class Layout::PageComponent < SparkComponents::Component
+  element :nav
+  element :title
+  element :header
+  element :body
+  element :footer
+  element :main, component: "layout/base"
+  element :action, multiple: true
+
+  def render
+    @view.capture do
+      if title || nav || header
+        concat(component("page/header") { |page_header|
+          concat(page_header.nav { nav.yield }) if nav
+          concat component("layout/header", title: title) { |ui_header|
+            actions.each { |a| ui_header.action { a.yield } }
+          }
+          concat(page_header.body { header.yield }) if header
+        })
+      end
+      concat(content_tag(:div, main, class: "spark-page-main-wrapper")) if main
+      concat(content_tag(:div, body, class: "spark-page-body")) unless body.blank?
+      concat(content_tag(:div, footer, class: "spark-page-footer")) unless footer.blank?
+      concat content_for(:modal)
+    end
+  end
+
+  def modal(&block)
+    content_for(:modals, &block)
+  end
+end

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

@@ -24,6 +24,10 @@ class Nav::GroupComponent < SparkComponents::Component
     items.any?(&:beta?)
   end
 
+  def active_item
+    items.find(&:active?)
+  end
+
   def active?
     items.any?(&:active?)
   end

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

@@ -1,17 +1,17 @@
 class Nav::ItemComponent < SparkComponents::Component
-  attribute :text, :icon, :detail, :badge, :active, :beta, :new, :href
-  attribute icon_size: '18px'
-  tag_attr :role, :id
+  attribute :text, :icon, :detail, :badge, :active, :beta, :new
+  attribute icon_size: "12px"
+  root_attr :href, :role, :id, :tabindex, :target
   base_class "nav-item"
 
   def before_render
-    tag_attr(href: href || "#")
+    #root_attr(href: href || "#")
     add_class "active" if active?
   end
 
   def render
-    content_tag(:a, attrs) do
-      concat @view.use_svg(icon, width: icon_size, class: join_class("icon")) if icon
+    content_tag(:a, tag_attrs) do
+      concat @view.use_svg(icon, width: icon_size, height: icon_size, class: join_class("icon")) if icon
       concat content_tag(:span, class: join_class("content")) {
         concat content_tag(:span, text || self, class: join_class("text"))
         concat content_tag(:span, label.upcase, class: [join_class("label"), label]) if label
@@ -39,6 +39,6 @@ class Nav::ItemComponent < SparkComponents::Component
   end
 
   def active?
-    tag_attr[:href] != "#" && @view.current_page?(tag_attr[:href]) || active
+    root_attr[:href] != "#" && @view.current_page?(root_attr[:href]) || active
   end
 end

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

@@ -1,15 +1,21 @@
 class Nav::PillsComponent < SparkComponents::Component
   base_class "spark-nav-pills"
-  tag_attr role: "navigation"
+  root_attr role: "navigation"
+  attribute layout: :flush
 
   aria_attr :label
   validates :label, presence: true
+  validates_choice :layout, %i[padded flush]
 
   element :item, multiple: true, component: "nav/item"
 
+  def before_render
+    add_class %(layout-#{layout})
+  end
+
   def render
     return if items.empty?
-    content_tag(:nav, attrs) do
+    content_tag(:nav, tag_attrs) do
       content_tag(:div, class: "nav-pills-wrapper") {
         concat content_tag(:ul, class: "nav-group") {
           items.each { |item|

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

@@ -1,16 +1,62 @@
 class Nav::SidebarComponent < SparkComponents::Component
   aria_attr :label
-  base_class "sidebar-nav"
+  validates :label, presence: true
+
+  base_class "spark-nav-sidebar"
 
   element :header
-  element :nav, component: "nav/group"
   element :footer
+  element :nav, component: "nav/group", multiple: true do
+    attribute :title
+
+    def render
+      @view.capture do
+        concat content_tag(:h4, title, class: parent.join_class("title")) unless title.blank?
+        concat super
+      end
+    end
+  end
+
+  def before_render
+    data_attr nav_id: %(sidebar-#{SecureRandom.hex(10)})
+  end
 
   def render
-    content_tag(:nav, attrs) do
-      concat header
-      concat nav
-      concat footer
+    content_tag(:nav, tag_attrs) do
+      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
+        concat footer_tag unless footer.blank?
+      }
     end
   end
+
+  private
+
+  def header_tag
+    content_tag(:div, header, class: join_class("header"))
+  end
+
+  def footer_tag
+    content_tag(:div, footer, class: join_class("footer"))
+  end
+  
+  def sidebar_toggle_tag
+    component("nav/toggle", target: %([data-nav-id="#{data_attr[: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
+    }
+
+    # Use the active item text or the label for the sidebar
+    active_nav&.active_item&.text || label
+  end
 end

data/app/components/spark/nav/tab_panels/panel_component.rb

@@ -4,7 +4,7 @@ class Nav::TabPanels::PanelComponent < SparkComponents::Component
   element :tab, component: "nav/tab_panels/tab"
 
   def after_init
-    tag_attr id: "panel-#{SecureRandom.hex(8)}", role: "tabpanel"
+    root_attr id: "panel-#{SecureRandom.hex(8)}", role: "tabpanel"
     aria_attr labeledby: tab_id
   end
 
@@ -12,23 +12,19 @@ class Nav::TabPanels::PanelComponent < SparkComponents::Component
     if bool
       add_class 'active'
     else
-      tag_attr(hidden: true)
+      root_attr(hidden: true)
     end
   end
 
-  def id
-    tag_attr[:id]
-  end
-
   def tab_id
-    "tab-for-#{id}"
+    "tab-for-#{root_attr[:id]}"
   end
 
   def tab_wrapper_id
     "wrapper-for-#{tab_id}"
   end
 
-  def new_tab(active=false)
+  def new_tab(active: false)
     tab = Nav::TabPanels::TabComponent.new(@view, text: text, href: href, icon: icon, active: active)
     tab.parent = self
     tab.before_render