fleetio_spark 0.2.48 → 1.0.0.rc.1

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

@@ -92,7 +92,10 @@ $elevation-ambient-map: (
   6: "0px 10px 48px 10px"
 );
 
-$card-shadow: 0px 1px 2px -2px rgba(0,0,0,0.1), 
-0px 1px 2px 0px rgba(0,0,0,0.04), 
-0px 2px 5px 0px rgba(0,0,0,0.06), 
+$card-shadow: 0px 1px 2px -2px rgba(0,0,0,0.1),
+0px 1px 2px 0px rgba(0,0,0,0.04),
+0px 2px 5px 0px rgba(0,0,0,0.06),
 0px 0px 0px 1px rgba(0,0,0,0.03);
+
+// Gutters
+$gutter-sizes : ['base', $pad-base], ['small', $pad-sm], ['medium', $pad-md], ['large', $pad-lg], ['xl', $pad-xl];

data/app/components/spark/badge.html.slim

@@ -0,0 +1,4 @@
+- classname.add("color-#{@color}")
+- classname.add(@outline ? :outline : :fill)
+span *tag_attrs
+  = @text

data/app/components/spark/badge.rb

@@ -0,0 +1,15 @@
+module Spark
+  class Badge < Spark::Component::Base
+    COLOR = %i[red yellow green teal blue purple gray].freeze
+    attribute :text, :outline, color: :gray
+
+    validates_attr :text, presence: true
+    validates_attr :color, choices: COLOR
+
+    def initialize(*)
+      super
+
+      classname.add("spark-badge")
+    end
+  end
+end

data/app/components/spark/banner.html.slim

@@ -0,0 +1,7 @@
+header *tag_attrs
+  .app-banner-content
+    = render(Spark::Icon, name: theme_icon, class: "app-banner-icon")
+    .app-banner-message = @message || content
+  - if @href
+    .app-banner-action
+      = link_to(@action_text, @href, class: "app-banner-action-item", target: @target)

data/app/components/spark/banner.rb

@@ -0,0 +1,28 @@
+module Spark
+  class Banner < Spark::Component::Base
+    THEME = %i[message alert admin].freeze
+
+    attribute :message, :href, :icon, :target
+    attribute action_text: "Learn more", theme: "message"
+
+    validates_attr :theme, choices: THEME
+
+    def initialize(*)
+      super
+
+      tag_attrs.add(role: "banner")
+      classname.add("app-banner", "theme-#{@theme}")
+    end
+
+    def to_partial_path
+    end
+
+    def theme_icon
+      case @theme.to_sym
+      when :message then "message-text"
+      when :alert then "message-alert"
+      when :admin then "admin-user"
+      end
+    end
+  end
+end

data/app/components/spark/button.html.slim

@@ -0,0 +1,9 @@
+- if @href
+  = link_to(@href, tag_attrs)
+    = render(Spark::Icon, name: @icon) if @icon
+    span.spark-button-label = @text || @content
+- else
+  button *tag_attrs.add(type: @type) 
+    = render(Spark::Icon, name: @icon) if @icon
+    - unless @theme == :icon
+      span.spark-button-label = @text || @content

data/app/components/spark/button.rb

@@ -0,0 +1,68 @@
+module Spark
+  class Button < Spark::Component::Base
+
+    COLORS = %i[blue green yellow red purple]
+    SIZES  = %i[xs small base medium large]
+    THEME  = %i[add default danger icon primary text]
+    TYPE   = %i[button submit reset]
+
+    attribute :text, :color, :size, :icon, :href, :hidden,
+      :value, :disabled, :name, :target, type: :button, theme: :default
+
+    validates_attr :size, choices: SIZES, allow_nil: true
+    validates_attr :color, choices: COLORS, allow_nil: true
+    validates_attr :theme, choices: THEME
+    validates_attr :type, choices: TYPE
+    validates_attr :text, presence: true, if: -> { @content.nil? }
+
+    # Icon button validation
+    validates_attr :icon, presence: true, if: -> { @type == :icon }
+
+    def initialize(*)
+      super
+      tag_attrs.add attr_hash(:value, :disabled, :name, :target)
+
+      if (@href && (data[:remote] || data[:method]))
+        tag_attrs.add rel: "nofollow"
+      end
+
+      aria.add attr_hash(:hidden)
+
+      tag_attrs.add(type: :button)
+      set_button_type unless @theme == :default
+      classname.base = "spark-button"
+      classname.add("size-#{@size}") if @size
+      classname.add("color-#{@color}") if @color
+    end
+
+    private
+
+    def set_button_type
+      send(:"#{@theme}_button")
+    end
+
+    def primary_button
+      classname.add("theme-primary")
+    end
+
+    def danger_button
+      primary_button
+      @color = :red
+    end
+
+    def icon_button
+      aria.add label: @text
+      classname.add("theme-icon-only")
+    end
+
+    def add_button
+      primary_button
+      @color = 'green'
+      @icon ||= 'plus'
+    end
+
+    def text_button
+      classname.add("theme-text")
+    end
+  end
+end

data/app/components/spark/button/group.html.slim

@@ -0,0 +1,4 @@
+- unless buttons.empty?
+  div *tag_attrs
+    - buttons.each do |button|
+      = button.yield

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

@@ -0,0 +1,22 @@
+module Spark
+  class Button
+    class Group < Spark::Component::Base
+
+      COLORS = Spark::Button::COLORS
+      SIZES = Spark::Button::SIZES
+
+      attribute :color, :size, role: "group"
+
+      validates_attr :color, choices: COLORS, allow_nil: true
+      validates_attr :size, choices: SIZES, allow_nil: true
+
+      element :button, multiple: true, component: Spark::Button
+
+      def initialize(*)
+        super
+
+        classname.base = "spark-button-group"
+      end
+    end
+  end
+end

data/app/components/spark/card.html.slim

@@ -0,0 +1,7 @@
+div *tag_attrs
+  - if header
+    - header.classname.add("spark-card-header")
+    = header.yield
+  - if body
+    .spark-card-content
+      = body.yield

data/app/components/spark/card.rb

@@ -0,0 +1,13 @@
+module Spark
+  class Card < Spark::Component::Base
+
+    element :header, component: Spark::Layout::Block
+
+    element :body
+
+    def initialize(*)
+      super
+      classname.add("spark-card")
+    end
+  end
+end

data/app/components/spark/checklist.html.slim

@@ -0,0 +1,14 @@
+- classname.add('completed') if complete?
+- classname.add('collapsed') if can_collapse?
+div *tag_attrs
+  - if complete?
+    = complete_content.yield if complete_content.present?
+  - else
+    - sort_items.each do |item|
+      = item.yield
+
+    - if can_collapse?
+      .item-collapser
+        / these can use translated text/i18n later from a new attribute
+        = render(Spark::Button, text: "View full list", class: 'view-list', data: { toggle_class: button_toggle})
+        = render(Spark::Button, text: "Collapse list", class: 'collapse-list', data: { toggle_class: button_toggle})

data/app/components/spark/checklist.rb

@@ -0,0 +1,49 @@
+module Spark
+  class Checklist < Spark::Component::Base
+    attribute :collapse_after
+
+    validates_attr :collapse_after, numericality: { only_integer: true }, allow_blank: true
+
+    element :item, multiple: true, component: Spark::Checklist::Item
+    element :complete_content
+
+    def initialize(*)
+      super
+      data.add checklist_id: unique_id
+
+      classname.base = 'spark-checklist-container'
+    end
+
+    def sort_items
+      items.sort_by! { |item| item.attribute_completed ? 1 : 0 }
+      add_collapse_item_class if @collapse_after
+      items
+    end
+
+    private
+
+    def complete?
+      completed_items.length == items.length
+    end
+
+    def completed_items
+      @completed_items ||= items.select do |item| 
+        item.attribute_completed == true
+      end
+    end
+
+    def can_collapse?
+      @collapse_after && @collapse_after < items.length
+    end
+
+    def add_collapse_item_class
+      items.slice(@collapse_after, items.size).each do |item|
+        item.classname.add("collapse-item")
+      end
+    end
+
+    def button_toggle
+      %(collapsed; #{selector(:data, :checklist_id)})
+    end
+  end
+end

data/app/components/spark/checklist/container.html.slim

@@ -0,0 +1,14 @@
+- classname.add('completed') if complete?
+- classname.add('collapsed') if can_collapse?
+div *tag_attrs
+  - if complete?
+    = complete_content.yield if complete_content.present?
+  - else
+    - sort_items.each do |item|
+      = item.yield
+
+    - if can_collapse?
+      .item-collapser
+        / these can use translated text/i18n later from a new attribute
+        = render(Spark::Button, text: "View full list", class: 'view-list', data: { toggle_class: button_toggle})
+        = render(Spark::Button, text: "Collapse list", class: 'collapse-list', data: { toggle_class: button_toggle})

data/app/components/spark/checklist/container.rb

@@ -0,0 +1,51 @@
+module Spark
+  class Checklist
+    class Container < Spark::Component::Base
+      attribute :collapse_after
+
+      validates_attr :collapse_after, numericality: { only_integer: true }, allow_blank: true
+
+      element :item, multiple: true, component: Spark::Checklist::Item
+      element :complete_content
+
+      def initialize(*)
+        super
+        data.add checklist_id: unique_id
+
+        classname.base = 'spark-checklist-container'
+      end
+
+      def sort_items
+        items.sort_by! { |item| item.attribute_completed ? 1 : 0 }
+        add_collapse_item_class if @collapse_after
+        items
+      end
+
+      private
+
+      def complete?
+        completed_items.length == items.length
+      end
+
+      def completed_items
+        @completed_items ||= items.select do |item| 
+          item.attribute_completed == true
+        end
+      end
+
+      def can_collapse?
+        @collapse_after && @collapse_after < items.length
+      end
+
+      def add_collapse_item_class
+        items.slice(@collapse_after, items.size).each do |item|
+          item.classname.add("collapse-item")
+        end
+      end
+
+      def button_toggle
+        %(collapsed; #{selector(:data, :checklist_id)})
+      end
+    end
+  end
+end

data/app/components/spark/checklist/item.html.slim

@@ -0,0 +1,9 @@
+div *tag_attrs
+  - if @icon
+    = render(Spark::Icon, name: @icon, class: "spark-checklist-item-icon #{complete_class}")
+  .spark-checklist-item-content class=complete_class
+    = @text
+  - unless @completed
+    .spark-checklist-item-action
+      a href="#{@href}" target="#{@target}" = @action_text
+

data/app/components/spark/checklist/item.rb

@@ -0,0 +1,24 @@
+module Spark
+  class Checklist
+    class Item < Spark::Component::Base
+      attribute :href, :target, :icon, :action_text, :text, completed: false
+
+      validates_attr :href, presence: true
+      validates_attr :icon, presence: true
+      validates_attr :action_text, presence: true
+      validates_attr :text, presence: true
+      validates_attr :completed, inclusion: [true, false]
+
+      def initialize(*)
+        super
+
+        classname.base = 'spark-checklist-item'
+        tag_attrs.add(rel: 'noopener noreferrer') if @target == "_blank"
+      end
+
+      def complete_class
+        'complete' if @completed
+      end
+    end
+  end
+end

data/app/components/spark/checklist/trigger.html.slim

@@ -0,0 +1,6 @@
+div *tag_attrs
+  .checklist-trigger-icon-wrapper
+    = render(Spark::Icon, name: @icon, class: "checklist-trigger-icon", size: :small)
+  .checklist-trigger-content
+    .checklist-trigger-title = @title
+    .checklist-trigger-subtitle = @subtitle

data/app/components/spark/checklist/trigger.rb

@@ -0,0 +1,13 @@
+module Spark
+  class Checklist
+    class Trigger < Spark::Component::Base
+      attribute :title, :subtitle, icon: :checklist, role: "button"
+
+      def initialize(*)
+        super
+
+        classname.base = "checklist-trigger"
+      end
+    end
+  end
+end

data/app/components/spark/component/base.rb

@@ -0,0 +1,27 @@
+module Spark
+  module Component
+    class Base < ActionView::Component::Base
+      include Spark::Component
+
+      def selector(root, sub = nil, val: nil)
+        sub = sub.to_s.dasherize if sub
+        val ||= case root
+        when :data, :aria then
+          tag_attrs[root][sub]
+        else
+          tag_attrs[root]
+        end
+
+        %([#{[root, sub].compact.join('-').dasherize}="#{val}"])
+      end
+
+      def unique_id(prefix = :id)
+        "#{prefix}-#{SecureRandom.hex(10)}"
+      end
+
+      def to_s
+        self.yield
+      end
+    end
+  end
+end

data/app/components/spark/embed/wistia_media.html.slim

@@ -0,0 +1,11 @@
+div *tag_attrs
+  script src="https://fast.wistia.com/assets/external/E-v1.js"
+  div class="wistia_embed wistia_async_#{@video_id} popover=true seo=false popoverContent=link popoverAnimation=none" style="height:100%;width:100%"
+    div.wistia-embed-background style="background-image: url('#{@background_image_url}')"
+      .wistia-thumbnail-cover
+      .wistia-thumbnail-container
+        div
+          p.title = @title unless @title.blank?
+          p.subtitle = @subtitle unless @subtitle.blank?
+      .wistia-thumbnail-play
+        = render(Spark::Icon, name: 'play', size: :large)