fleetio_spark 0.2.48 → 1.0.0.rc.1

data/app/components/spark/embed/wistia_media.rb

@@ -0,0 +1,22 @@
+module Spark
+  module Embed
+    class WistiaMedia < Spark::Component::Base
+      attribute :video_id, :background_image_url, :title, :subtitle, :height, :width
+
+      validates_attr :video_id, presence: true
+      validates_attr :background_image_url, presence: true
+      validates_attr :height, presence: true, numericality: { only_integer: true }
+      validates_attr :width, numericality: { only_integer: true }, allow_blank: true
+
+      def initialize(*)
+        super
+
+        classname.base = "spark-wistia-media"
+
+        unless @height.blank?
+          tag_attrs.merge!(style: "height: #{@height}px;max-width: #{@width}px")
+        end
+      end
+    end
+  end
+end

data/app/components/spark/embed/wistia_media_component.rb

@@ -1,43 +1,29 @@
-class Embed::WistiaMediaComponent < SparkComponents::Component
-  base_class 'spark-wistia-media'
-  attribute :video_id, :background_image_url, :title, :subtitle, :height, :width
+module Embed
+  class WistiaMedia < Spark::Component::Base
+    attribute :video_id, :background_image_url, :title, :subtitle, :height, :width
 
-  validates :video_id, presence: true
-  validates :background_image_url, presence: true
-  validates :height, presence: true, numericality: { only_integer: true }
-  validates :width, numericality: { only_integer: true }, allow_blank: true
+    validates_attr :video_id, presence: true
+    validates_attr :background_image_url, presence: true
+    validates_attr :height, presence: true, numericality: { only_integer: true }
+    validates_attr :width, numericality: { only_integer: true }, allow_blank: true
 
-  def render
-    wistia_embed_options = {
-      class: "wistia_embed wistia_async_#{video_id} popover=true seo=false popoverContent=link popoverAnimation=none",
-      style: 'height:100%;width:100%'
-    }
+    def initialize(*)
+      super
 
-    wistia_embed_background_options = {
-      class: 'wistia-embed-background',
-      style: "background-image: url('#{background_image_url}')"
-    }
-
-    unless height.blank?
-      tag_attrs.merge!(style: "height: #{height}px;max-width: #{width}px")
-    end
+      classname.base = 'spark-wistia-media'
+      wistia_embed_options = {
+        class: "wistia_embed wistia_async_#{video_id} popover=true seo=false popoverContent=link popoverAnimation=none",
+        style: 'height:100%;width:100%'
+      }
 
-    tag.div(tag_attrs) {
-      concat tag.script(src: 'https://fast.wistia.com/assets/external/E-v1.js')
-      concat tag.div(wistia_embed_options) {
-        concat tag.div(wistia_embed_background_options) {
-          concat tag.div(class: 'wistia-thumbnail-cover')
-          concat tag.div(class: 'wistia-thumbnail-container') {
-            tag.div {
-              concat tag.p(title, class: 'title') unless title.blank?
-              concat tag.p(subtitle, class: 'subtitle') unless subtitle.blank?
-            }
-          }
-          concat tag.div(class: 'wistia-thumbnail-play') {
-            component('ui/icon', name: 'play', size: :large)
-          }
-        }
+      wistia_embed_background_options = {
+        class: 'wistia-embed-background',
+        style: "background-image: url('#{background_image_url}')"
       }
-    }
+
+      unless height.blank?
+        tag_attrs.merge!(style: "height: #{height}px;max-width: #{width}px")
+      end
+    end
   end
 end

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

@@ -0,0 +1,4 @@
+div *tag_attrs
+  div class=classname.join_base(:columns)
+    - columns.each do |column|
+      = column.yield

data/app/components/spark/grid.rb

@@ -0,0 +1,31 @@
+module Spark
+  class Grid < Spark::Component::Base
+    COLUMN = [1,2,3,4,6,12].freeze
+    GUTTER = %i[small base medium large xl].freeze
+
+    attribute :span, :columns, :gutter, :gutter_match, :min, wrap: true
+
+    validates_attr :span, choices: Spark::Grid::Column::SPAN, allow_nil: true
+    validates_attr :columns, choices: COLUMN, allow_nil: true
+    validates_attr :gutter, choices: GUTTER, allow_nil: true
+
+    element :column, multiple: true, component: Spark::Grid::Column
+
+    def initialize(*)
+      super
+
+      raise "Grids do not support both cols and span. Set `span` (default span for columns), or `cols` (the number of columns per row)" if @span && @columns
+      @gutter ||= :base if @gutter_match
+      @span = 12 / @columns if @columns
+
+      data.add column_min: @min if @min
+
+      classname.base = "spark-grid"
+      classname.add("gutter-#{@gutter}") if @gutter
+      classname.add("gutter-#{@gutter}-match") if @gutter && @gutter_match
+      classname.add("no-wrap") unless @wrap
+
+      set_element_attribute_default(:column, span: @span)
+    end
+  end
+end

data/app/components/spark/grid/column.html.slim

@@ -0,0 +1 @@
+div *tag_attrs = @content

data/app/components/spark/grid/column.rb

@@ -0,0 +1,34 @@
+module Spark
+  class Grid
+    class Column < Spark::Component::Base
+      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
+
+      attribute :span, :offset
+
+      validates_attr :span, choices: SPAN, allow_nil: true
+      validates_attr :offset, choices: OFFSET, allow_nil: true
+
+      def initialize(*)
+        super
+        data.add span: span_name(@span) || 0
+        data.add offset: span_name(@offset) if @offset
+
+        classname.base = "spark-grid-column"
+
+      end
+
+      def span_name(size)
+        return if size.nil?
+        if size.is_a? Integer
+          SPAN[size - 1]
+        elsif size.is_a? Float
+          SPAN[(SPAN.size * size) - 1]
+        elsif size = SPAN_NAME[size.to_sym]
+          SPAN[(12 / size) - 1]
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1 @@
+= Esvg.use(@name, tag_attrs)

data/app/components/spark/icon.rb

@@ -0,0 +1,34 @@
+module Spark
+  class Icon < ActionView::Component::Base
+    include Spark::Component
+
+    SIZE = { xsmall: 10, small: 14, base: 16, text: "1em", medium: 18, large: 24, xlarge: 32 }
+
+    attribute :name, :width, :height, size: :base
+
+    validates_attr :size, choices: SIZE.keys
+
+    def initialize(*)
+      super
+
+      raise no_icon_found if !Rails.env.production? && !Esvg.find_symbol(@name)
+      tag_attrs.add width: icon_width, height: icon_height, content: @yield
+
+      classname.base = "spark-icon"
+    end
+
+    private
+
+    def no_icon_found
+      %(Cannot find icon "#{@name}". A list of available icons can be found at http://spark.fleetio.com/resources/icons)
+    end
+
+    def icon_width
+      @width || @height || SIZE[@size]
+    end
+
+    def icon_height
+      @height || @width || SIZE[@size]
+    end
+  end
+end

data/app/components/spark/icon/placeholder.html.slim

@@ -0,0 +1,20 @@
+- if @content.present?
+  = @content
+- elsif @remote
+  = image_tag(remote_image_url, **remote_attrs)
+- else
+  svg *tag_attrs
+    - if gradient?
+      defs
+        linearGradient id=gradient_id x1=0 y1=0 x2=1 y2=1
+          stop offset=0 stop-color=gradient.first
+          stop offset=1 stop-color=gradient.last
+    - if @circle
+      circle cy=(@height/2) cx=(@width/2) r=(@width/2) fill=background
+    - else
+      rect width=@width height=@height ry=4 fill=background
+    - if @icon
+      = Esvg.use(@icon, icon_attrs)
+    - elsif @text
+      text *text_attrs
+        = @text

data/app/components/spark/icon/placeholder.rb

@@ -0,0 +1,139 @@
+module Spark
+  class Icon
+    class Placeholder < Spark::Component::Base
+      SIZE = { sm: 24, md: 32, lg: 44, xl: 84 }
+      THEME = {
+        default: {
+          text: "#ffffff",
+          fill: "#78858A"
+        },
+        gradient: {
+          gradient: %w[#616c70 #959fa3],
+          fill: "#78858A"
+        },
+        wisteria: {
+          gradient: %w[#A8A2EC #5853AE]
+        }
+      }
+
+      attribute :alt, :text, :circle, :font_size, :width, :height, :icon, size: :md, theme: :default
+      attribute remote: false
+
+      validates_attr :theme, choices: THEME.keys
+
+      def initialize(*)
+        super
+
+        aria.add(hidden: true)
+        classname.base = "spark-icon-placeholder-wrapper" unless @remote
+
+        @height ||= @width ||= SIZE[@size]
+        tag_attrs.add(attr_hash(:width, :height))
+        aria.add attr_hash(:alt)
+
+        return if @remote
+
+        raise no_icon_found if @icon && !Rails.env.production? && !Esvg.find_symbol(@icon)
+
+        classname.add("spark-icon-placeholder")
+        tag_attrs.add(svg_attrs)
+      end
+
+      def options
+        return @options if @options
+
+        @options ||= attr_hash(:width, :height, :alt, :text)
+        @options[:class] = shape_class
+        @options
+      end
+
+      private
+
+      def remote_image_url
+        fill       = background_fill.sub('#','')
+        text_color = text_fill.sub('#','')
+        "https://via.placeholder.com/#{@width * 2}x#{@height * 2}/#{fill}/#{text_color}?text=#{@text || "%20"}"
+      end
+
+      def remote_attrs
+        classname.add(shape_class)
+        tag_attrs
+      end
+
+      def shape_class
+        @circle ? "spark-circle-crop" : "spark-roundrect-crop"
+      end
+
+      def svg_attrs
+        {
+          class: "ui-placeholder",
+          aria: { presentation: :true, label: @alt },
+          viewBox: "0 0 #{@width} #{@height}",
+          version: "1.1",
+          xmlns: "http://www.w3.org/2000/svg"
+        }
+      end
+
+      def icon_attrs
+        svg_scale = 0.63
+        center_scale = (1 - svg_scale) / 2
+        # make size proportional to container
+        {
+          color: text_fill,
+          width: (@width * svg_scale).round,
+          height: (@height * svg_scale).round,
+          x: (@width * center_scale).round,
+          y: (@height * center_scale).round
+        }
+      end
+
+      def text_attrs
+        {
+          x: @width/2,
+          y: @height/2,
+          fill: text_fill,
+          "font-size" => @font_size || "#{@width/3}px",
+          "text-anchor" => :middle,
+          "dominant-baseline" => :central,
+          "alignment-baseline" => :central
+        }
+      end
+
+      def theme
+        THEME[@theme]
+      end
+
+      def text_fill
+        theme[:text] || THEME[:default][:text]
+      end
+
+      def background_fill
+        theme[:fill] || theme[:gradient].first
+      end
+
+      def background
+        if gradient?
+          "url(##{gradient_id})"
+        else
+          background_fill
+        end
+      end
+
+      def gradient_id
+        "placeholder-gradient-#{@theme}"
+      end
+
+      def gradient
+        theme[:gradient]
+      end
+
+      def gradient?
+        !!gradient
+      end
+
+      def no_icon_found
+        %(Cannot find icon "#{@icon}". A list of available icons can be found at http://spark.fleetio.com/resources/icons)
+      end
+    end
+  end
+end

data/app/components/spark/input/base.html.slim

@@ -0,0 +1 @@
+input *tag_attrs

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

@@ -0,0 +1,17 @@
+module Spark
+  module Input
+    class Base < Spark::Component::Base
+      attribute :value, :disabled, :required, :name, :label
+
+      # If a label is not passed, require an aria-label for accessibility
+      validates_attr :label, presence: { message: %q(A label or `aria: { label: "text" }` is required for accessiblity.) }, unless: -> { @aria.present? && @aria[:label].present? }
+
+      def initialize(*)
+        super
+
+        tag_attrs.add attr_hash(:value, :disabled, :required, :name)
+        classname.add "spark-input"
+      end
+    end
+  end
+end

data/app/components/spark/input/checkbox.html.slim

@@ -0,0 +1,2 @@
+= render Spark::Input::Label, text: @label
+  input *tag_attrs

data/app/components/spark/input/checkbox.rb

@@ -0,0 +1,14 @@
+module Spark
+  module Input
+    class Checkbox < Spark::Input::Base
+      attribute :checked, :toggle
+
+      def initialize(*)
+        super
+
+        tag_attrs.add attr_hash(:checked)
+        tag_attrs.add type: :checkbox
+      end
+    end
+  end
+end

data/app/components/spark/input/label.html.slim

@@ -0,0 +1,4 @@
+label *tag_attrs
+  - if @text
+    .label-text = @text
+  = content

data/app/components/spark/input/label.rb

@@ -0,0 +1,13 @@
+module Spark
+  module Input
+    class Label < Spark::Component::Base
+      attribute :text
+
+      def initialize(*)
+        super
+
+        classname.add("spark-label")
+      end
+    end
+  end
+end

data/app/components/spark/input/switch.html.slim

@@ -0,0 +1,5 @@
+div class= switch_class
+  = render(Spark::Input::Label, text: @label, class: "spark-input-switch-label") do
+    input *tag_attrs
+    span.spark-input-switch-panel
+      span.spark-input-switch-tick

data/app/components/spark/input/switch.rb

@@ -0,0 +1,24 @@
+module Spark
+  module Input
+    class Switch < Spark::Input::Checkbox
+      SIZE      = %i[small medium].freeze
+      ALIGNMENT = %i[left right].freeze
+
+      attribute size: :medium, align: :left, value: :true
+
+      validates_attr :size, choices: SIZE
+      validates_attr :align, choices: ALIGNMENT
+
+      def initialize(*)
+        super
+
+        switch_class.add("size-#{@size}")
+        switch_class.add("align-#{@align}") if @align
+      end
+
+      def switch_class
+        @switch_class ||= Classname.new(base: "spark-input-switch")
+      end
+    end
+  end
+end