fleetio_spark 0.2.40 → 0.2.41
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/app/assets/javascripts/spark/_icons.js +1 -1
- data/app/assets/javascripts/spark/components/nav/_tabs.js +1 -1
- data/app/assets/stylesheets/spark/components/_index.scss +3 -1
- data/app/assets/stylesheets/spark/components/app/_sidebar.scss +2 -2
- data/app/assets/stylesheets/spark/components/app/sidebar/_header.scss +1 -1
- data/app/assets/stylesheets/spark/components/button/_button.scss +84 -0
- data/app/assets/stylesheets/spark/components/button/_button_group.scss +32 -0
- data/app/assets/stylesheets/spark/components/button/_disabled.scss +11 -0
- data/app/assets/stylesheets/spark/components/button/_size.scss +60 -0
- data/app/assets/stylesheets/spark/components/button/_theme-base.scss +23 -0
- data/app/assets/stylesheets/spark/components/button/_theme-primary.scss +22 -0
- data/app/assets/stylesheets/spark/components/button/_theme-text.scss +28 -0
- data/app/assets/stylesheets/spark/components/form/_switch.scss +4 -2
- data/app/assets/stylesheets/spark/components/layout/_grid.scss +7 -1
- data/app/assets/stylesheets/spark/components/nav/_item.scss +3 -1
- data/app/assets/stylesheets/spark/components/nav/_pills.scss +1 -1
- data/app/assets/stylesheets/spark/components/nav/_sidebar.scss +2 -2
- data/app/assets/stylesheets/spark/components/nav/_tabs.scss +2 -2
- data/app/assets/stylesheets/spark/core/_text.scss +1 -1
- data/app/assets/stylesheets/spark/core/_vars.scss +2 -1
- data/app/components/spark/app/sidebar_component.rb +1 -1
- data/app/components/spark/button/add_component.rb +9 -0
- data/app/components/spark/button/base_component.rb +39 -0
- data/app/components/spark/button/cancel_component.rb +8 -0
- data/app/components/spark/button/danger_component.rb +8 -0
- data/app/components/spark/button/group_component.rb +24 -0
- data/app/components/spark/button/icon_component.rb +14 -0
- data/app/components/spark/button/primary_component.rb +8 -0
- data/app/components/spark/button/text_component.rb +8 -0
- data/app/components/spark/form/input_component.rb +3 -0
- data/app/components/spark/form/label_component.rb +3 -3
- data/app/components/spark/form/switch_component.rb +7 -4
- data/app/components/spark/layout/grid/column_component.rb +11 -17
- data/app/components/spark/layout/grid_component.rb +14 -11
- data/app/components/spark/nav/group_component.rb +6 -4
- data/app/components/spark/nav/item_component.rb +2 -2
- data/app/components/spark/nav/pills_component.rb +1 -1
- data/app/components/spark/nav/sidebar_component.rb +5 -8
- data/app/components/spark/nav/tabs_component.rb +4 -2
- data/app/components/spark/nav/tree/group_component.rb +1 -1
- data/app/components/spark/nav/tree_component.rb +1 -2
- data/app/components/spark/ui/icon_component.rb +4 -4
- data/lib/fleetio_spark/component.rb +6 -11
- data/lib/fleetio_spark/version.rb +1 -1
- data/public/code-0.2.41.js +2 -0
- data/public/code-0.2.41.js.gz +0 -0
- data/public/code-0.2.41.js.map +1 -0
- data/public/{spark-0.2.40.css → spark-0.2.41.css} +1 -1
- data/public/spark-0.2.41.css.gz +0 -0
- data/public/spark-0.2.41.js +2 -0
- data/public/spark-0.2.41.js.gz +0 -0
- data/public/spark-0.2.41.js.map +1 -0
- metadata +25 -12
- data/app/assets/stylesheets/spark/components/ui/_button.scss +0 -0
- data/app/components/spark/ui/button_component.rb +0 -15
- data/public/code-0.2.40.js +0 -2
- data/public/code-0.2.40.js.gz +0 -0
- data/public/code-0.2.40.js.map +0 -1
- data/public/spark-0.2.40.css.gz +0 -0
- data/public/spark-0.2.40.js +0 -2
- data/public/spark-0.2.40.js.gz +0 -0
- data/public/spark-0.2.40.js.map +0 -1
@@ -10,7 +10,8 @@ $radius-lg: 8px;
|
|
10
10
|
$base-font: -apple-system, BlinkMacSystemFont, 'Avenir Next', Avenir, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
|
11
11
|
$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;
|
12
12
|
|
13
|
-
//
|
13
|
+
// Text colors
|
14
|
+
$base-text-color: $fl-gray-900;
|
14
15
|
$link-color: $fl-blue-600;
|
15
16
|
$link-hover-color: $fl-blue-700;
|
16
17
|
|
@@ -0,0 +1,39 @@
|
|
1
|
+
class Button::BaseComponent < SparkComponents::Component
|
2
|
+
COLORS = %i(blue green yellow red)
|
3
|
+
SIZES = %i(small base medium large)
|
4
|
+
|
5
|
+
attribute :text, :color, :size, :icon, :href
|
6
|
+
root_attr :value, :disabled, :name, :target, type: :button
|
7
|
+
aria_attr :hidden
|
8
|
+
|
9
|
+
base_class "spark-button"
|
10
|
+
|
11
|
+
validates_choice :size, SIZES.dup, required: false
|
12
|
+
validates_choice :color, COLORS.dup, required: false
|
13
|
+
validates :text, presence: true, if: -> { @yield.nil? }
|
14
|
+
|
15
|
+
def before_render
|
16
|
+
add_class("size-#{size}") if size
|
17
|
+
add_class("color-#{color}") if color
|
18
|
+
if (href && (data_attr[:remote] || data_attr[:method]))
|
19
|
+
root_attr rel: "nofollow"
|
20
|
+
end
|
21
|
+
end
|
22
|
+
|
23
|
+
def render
|
24
|
+
content_tag(:div, class: join_class("wrapper")) do
|
25
|
+
if href
|
26
|
+
link_to(button_content, href, tag_attrs)
|
27
|
+
else
|
28
|
+
tag.button(button_content, tag_attrs)
|
29
|
+
end
|
30
|
+
end
|
31
|
+
end
|
32
|
+
|
33
|
+
def button_content
|
34
|
+
capture {
|
35
|
+
concat component("ui/icon", name: icon) if icon
|
36
|
+
concat tag.span(text || @yield, class: join_class(:label))
|
37
|
+
}
|
38
|
+
end
|
39
|
+
end
|
@@ -0,0 +1,24 @@
|
|
1
|
+
class Button::GroupComponent < SparkComponents::Component
|
2
|
+
COLORS = Button::BaseComponent::COLORS
|
3
|
+
SIZES = Button::BaseComponent::SIZES
|
4
|
+
|
5
|
+
attribute :color, :size
|
6
|
+
root_attr role: "group"
|
7
|
+
|
8
|
+
base_class "spark-button-group"
|
9
|
+
|
10
|
+
validates_choice :color, COLORS, required: false
|
11
|
+
validates_choice :size, SIZES, required: false
|
12
|
+
|
13
|
+
element :button, multiple: true, component: "button/base"
|
14
|
+
|
15
|
+
def render
|
16
|
+
unless buttons.empty?
|
17
|
+
content_tag(:div, tag_attrs) do
|
18
|
+
buttons.each { |button|
|
19
|
+
concat button
|
20
|
+
}
|
21
|
+
end
|
22
|
+
end
|
23
|
+
end
|
24
|
+
end
|
@@ -0,0 +1,14 @@
|
|
1
|
+
class Button::IconComponent < Button::BaseComponent
|
2
|
+
|
3
|
+
def before_render
|
4
|
+
aria_attr label: text
|
5
|
+
add_class("theme-icon-only")
|
6
|
+
super
|
7
|
+
end
|
8
|
+
|
9
|
+
validates :icon, presence: true
|
10
|
+
|
11
|
+
def button_content
|
12
|
+
concat component("ui/icon", name: icon, class: join_class('icon')) if icon
|
13
|
+
end
|
14
|
+
end
|
@@ -3,4 +3,7 @@ class Form::InputComponent < SparkComponents::Component
|
|
3
3
|
attribute :label
|
4
4
|
add_class "spark-input"
|
5
5
|
|
6
|
+
# TODO: Add aria attribute validation when component attribute features are fixed.
|
7
|
+
# If a label is not passed, require an aria-label for accessibility
|
8
|
+
#validates :label, presence: { message: %q(a label or `aria: { label: "text" }` is required for accessiblity) }, unless: -> { @aria.present? && @aria[:label].present? }
|
6
9
|
end
|
@@ -1,10 +1,10 @@
|
|
1
1
|
class Form::LabelComponent < SparkComponents::Component
|
2
2
|
attribute :text
|
3
|
-
base_class "label"
|
3
|
+
base_class "spark-label"
|
4
4
|
|
5
5
|
def render
|
6
|
-
|
7
|
-
concat
|
6
|
+
tag.label(tag_attrs) do
|
7
|
+
concat tag.div(text, class: "label-text") if text
|
8
8
|
concat @yield
|
9
9
|
end
|
10
10
|
|
@@ -1,12 +1,15 @@
|
|
1
1
|
class Form::SwitchComponent < Form::CheckboxComponent
|
2
|
+
SIZE = %i[small medium].freeze
|
3
|
+
ALIGNMENT = %i[left right].freeze
|
4
|
+
|
2
5
|
base_class "spark-switch"
|
3
|
-
attribute :
|
6
|
+
attribute size: :medium, align: :left, value: true
|
4
7
|
|
5
|
-
validates_choice :size,
|
6
|
-
validates_choice :align,
|
8
|
+
validates_choice :size, SIZE
|
9
|
+
validates_choice :align, ALIGNMENT
|
7
10
|
|
8
11
|
def before_render
|
9
|
-
add_class(size)
|
12
|
+
add_class(size)
|
10
13
|
add_class(join_class("align-#{align}")) if align
|
11
14
|
end
|
12
15
|
|
@@ -1,18 +1,18 @@
|
|
1
1
|
class Layout::Grid::ColumnComponent < SparkComponents::Component
|
2
|
-
|
3
|
-
|
4
|
-
|
2
|
+
SPAN_NAME = { half: 6, third: 4, fourth: 3, sixth: 2 }.freeze
|
3
|
+
SPAN = [*(1..12), *SPAN_NAME.keys].freeze
|
4
|
+
OFFSET = [*(1..11), *SPAN_NAME.keys].freeze
|
5
5
|
|
6
6
|
data_attr :span, :offset
|
7
7
|
|
8
|
-
validates_choice :span,
|
9
|
-
validates_choice :offset,
|
8
|
+
validates_choice :span, SPAN, required: false
|
9
|
+
validates_choice :offset, OFFSET, required: false
|
10
10
|
|
11
11
|
def before_render
|
12
|
+
base_class "spark-grid-column"
|
12
13
|
@span ||= parent.span if parent && parent.respond_to?(:span)
|
13
14
|
data_attr span: span_name(span) || 0
|
14
15
|
data_attr offset: span_name(offset)
|
15
|
-
add_class "fill-column" if @fill
|
16
16
|
end
|
17
17
|
|
18
18
|
def render
|
@@ -20,19 +20,13 @@ class Layout::Grid::ColumnComponent < SparkComponents::Component
|
|
20
20
|
end
|
21
21
|
|
22
22
|
def span_name(size)
|
23
|
+
return if size.nil?
|
23
24
|
if size.is_a? Integer
|
24
|
-
|
25
|
+
SPAN[size - 1]
|
25
26
|
elsif size.is_a? Float
|
26
|
-
|
27
|
-
|
28
|
-
size
|
29
|
-
when :half then 2
|
30
|
-
when :third then 3
|
31
|
-
when :fourth then 4
|
32
|
-
when :sixth then 6
|
33
|
-
else return size
|
34
|
-
end
|
35
|
-
SPAN_CLASSES[(SPAN_CLASSES.size / size) - 1]
|
27
|
+
SPAN[(SPAN.size * size) - 1]
|
28
|
+
elsif size = SPAN_NAME[size.to_sym]
|
29
|
+
SPAN[(12 / size) - 1]
|
36
30
|
end
|
37
31
|
end
|
38
32
|
end
|
@@ -1,32 +1,35 @@
|
|
1
1
|
class Layout::GridComponent < SparkComponents::Component
|
2
|
-
|
2
|
+
COLUMN = [1,2,3,4,6,12].freeze
|
3
|
+
GUTTER = %i[small base medium large xl].freeze
|
3
4
|
|
4
|
-
|
5
|
+
attribute :span, :cols, :gutter, :gutter_match, :min, wrap: true
|
5
6
|
|
6
|
-
|
7
|
+
validates_choice :span, Layout::Grid::ColumnComponent::SPAN, required: false
|
8
|
+
validates_choice :cols, COLUMN, required: false
|
9
|
+
validates_choice :gutter, GUTTER, required: false
|
7
10
|
|
8
|
-
|
9
|
-
validates_choice :cols, [1,2,3,4,6,12], required: false
|
10
|
-
validates_choice :gutter, %i[default small medium large xl], required: false
|
11
|
+
element :column, multiple: true, component: "layout/grid/column"
|
11
12
|
|
12
13
|
def after_init
|
14
|
+
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
|
15
|
+
@gutter ||= :base if gutter_match
|
13
16
|
@span = 12 / @cols if @cols
|
14
17
|
end
|
15
18
|
|
16
19
|
def before_render
|
20
|
+
base_class "spark-grid"
|
21
|
+
|
17
22
|
add_class(join_class("gutter-#{gutter}")) if gutter
|
18
23
|
add_class(join_class("gutter-#{gutter}-match")) if gutter && gutter_match
|
19
24
|
data_attr column_min: min
|
20
|
-
data_attr column_break: @break
|
21
25
|
add_class join_class("no-wrap") unless wrap
|
22
|
-
add_class join_class("reverse") if reverse
|
23
26
|
end
|
24
27
|
|
25
28
|
def render
|
26
29
|
content_tag(:div, tag_attrs) do
|
27
|
-
concat content_tag(:div, class: join_class(
|
28
|
-
columns.each { |column|
|
29
|
-
concat column
|
30
|
+
concat content_tag(:div, class: join_class(:columns)) {
|
31
|
+
columns.each { |column|
|
32
|
+
concat column
|
30
33
|
}
|
31
34
|
}
|
32
35
|
end
|
@@ -1,16 +1,18 @@
|
|
1
1
|
class Nav::GroupComponent < SparkComponents::Component
|
2
|
-
|
2
|
+
attribute role: 'group'
|
3
3
|
attribute item_role: 'menuitem'
|
4
4
|
|
5
|
+
element :item, multiple: true, component: "nav/item"
|
6
|
+
|
5
7
|
def before_render
|
6
8
|
add_class "active" if active?
|
7
9
|
end
|
8
10
|
|
9
11
|
def render
|
10
12
|
unless items.empty?
|
11
|
-
|
12
|
-
items.each { |item|
|
13
|
-
concat
|
13
|
+
tag.ul(class: "spark-nav-group", role: role) do
|
14
|
+
items.each { |item|
|
15
|
+
concat tag.li(item, class: "nav-item-wrapper", role: item_role)
|
14
16
|
}
|
15
17
|
end
|
16
18
|
end
|
@@ -1,6 +1,6 @@
|
|
1
1
|
class Nav::ItemComponent < SparkComponents::Component
|
2
2
|
attribute :text, :icon, :detail, :badge, :active, :beta, :new
|
3
|
-
attribute icon_size:
|
3
|
+
attribute icon_size: :small
|
4
4
|
root_attr :href, :role, :id, :tabindex, :target
|
5
5
|
base_class "nav-item"
|
6
6
|
|
@@ -11,7 +11,7 @@ class Nav::ItemComponent < SparkComponents::Component
|
|
11
11
|
|
12
12
|
def render
|
13
13
|
content_tag(:a, tag_attrs) do
|
14
|
-
concat
|
14
|
+
concat component("ui/icon", name: icon, size: icon_size, class: join_class("icon")) if icon
|
15
15
|
concat tag.span(class: join_class("content")) {
|
16
16
|
concat tag.span(text || @yield, class: join_class("text"))
|
17
17
|
concat tag.span(label.upcase, class: [join_class("label"), label]) if label
|
@@ -17,7 +17,7 @@ class Nav::PillsComponent < SparkComponents::Component
|
|
17
17
|
return if items.empty?
|
18
18
|
content_tag(:nav, tag_attrs) do
|
19
19
|
content_tag(:div, class: "nav-pills-wrapper") {
|
20
|
-
concat content_tag(:ul, class: "nav-group") {
|
20
|
+
concat content_tag(:ul, class: "spark-nav-group") {
|
21
21
|
items.each { |item|
|
22
22
|
concat content_tag(:li, item, class: "nav-pill-wrapper #{item.active? ? "active" : nil}")
|
23
23
|
}
|
@@ -6,7 +6,7 @@ class Nav::SidebarComponent < SparkComponents::Component
|
|
6
6
|
|
7
7
|
element :header
|
8
8
|
element :footer
|
9
|
-
element :
|
9
|
+
element :group, component: "nav/group", multiple: true do
|
10
10
|
attribute :title
|
11
11
|
|
12
12
|
def render
|
@@ -26,11 +26,7 @@ class Nav::SidebarComponent < SparkComponents::Component
|
|
26
26
|
concat sidebar_toggle_tag
|
27
27
|
concat content_tag(:div, class: join_class("wrapper")) {
|
28
28
|
concat header_tag unless header.blank?
|
29
|
-
|
30
|
-
navs.each { |nav| concat nav }
|
31
|
-
else
|
32
|
-
concat nav
|
33
|
-
end
|
29
|
+
groups.each { |group| concat group }
|
34
30
|
concat footer_tag unless footer.blank?
|
35
31
|
}
|
36
32
|
end
|
@@ -49,11 +45,12 @@ class Nav::SidebarComponent < SparkComponents::Component
|
|
49
45
|
def sidebar_toggle_tag
|
50
46
|
component("nav/toggle", target: selector(:data, :nav_id), class: join_class("toggle"), text: sidebar_button_text)
|
51
47
|
end
|
48
|
+
|
52
49
|
# Tries to find the text for the active nav item, otherwise shows sidebar label text
|
53
50
|
def sidebar_button_text
|
54
51
|
# Find any navs which have active items
|
55
|
-
active_nav =
|
56
|
-
|
52
|
+
active_nav = groups.find { |group|
|
53
|
+
group.active_item
|
57
54
|
}
|
58
55
|
|
59
56
|
# Use the active item text or the label for the sidebar
|
@@ -1,11 +1,13 @@
|
|
1
1
|
class Nav::TabsComponent < SparkComponents::Component
|
2
|
+
LAYOUT = %i[flush padded]
|
3
|
+
|
2
4
|
base_class "spark-nav-tabs"
|
3
5
|
root_attr role: "navigation"
|
4
6
|
attribute layout: :flush
|
5
7
|
|
6
8
|
aria_attr :label
|
7
9
|
validates :label, presence: true
|
8
|
-
validates_choice :layout,
|
10
|
+
validates_choice :layout, LAYOUT
|
9
11
|
|
10
12
|
element :item, multiple: true, component: "nav/item" do
|
11
13
|
def render
|
@@ -51,7 +53,7 @@ class Nav::TabsComponent < SparkComponents::Component
|
|
51
53
|
end
|
52
54
|
|
53
55
|
def tab_group(options={}, &block)
|
54
|
-
options[:class] = "nav-group #{options[:class]}"
|
56
|
+
options[:class] = "spark-nav-group #{options[:class]}"
|
55
57
|
content_tag(:ul, options, &block)
|
56
58
|
end
|
57
59
|
end
|
@@ -1,7 +1,6 @@
|
|
1
1
|
class Nav::Tree::GroupComponent < Nav::GroupComponent
|
2
2
|
attribute :icon, :text, expanded: false
|
3
3
|
attribute :group_icon_size
|
4
|
-
root_attr role: "treeitem"
|
5
4
|
base_class "nav-item-wrapper"
|
6
5
|
|
7
6
|
def before_render
|
@@ -14,6 +13,7 @@ class Nav::Tree::GroupComponent < Nav::GroupComponent
|
|
14
13
|
|
15
14
|
def render
|
16
15
|
unless items.empty?
|
16
|
+
root_attr role: "treeitem"
|
17
17
|
content_tag(:li, tag_attrs) do
|
18
18
|
concat component("nav/item", text: text, icon: icon, icon_size: group_icon_size, class: "tree-trigger", tabindex: 0, href: "#") { expand_icon }
|
19
19
|
concat super
|
@@ -2,7 +2,7 @@ class Nav::TreeComponent < SparkComponents::Component
|
|
2
2
|
base_class "nav-tree"
|
3
3
|
root_attr :id, role: "tree"
|
4
4
|
aria_attr :label
|
5
|
-
attribute root_icon_size:
|
5
|
+
attribute root_icon_size: :small
|
6
6
|
|
7
7
|
def before_render
|
8
8
|
data_attr tree: id
|
@@ -29,7 +29,6 @@ class Nav::TreeComponent < SparkComponents::Component
|
|
29
29
|
parent.items << super unless items.empty?
|
30
30
|
end
|
31
31
|
|
32
|
-
|
33
32
|
def expanded?
|
34
33
|
parent.group_expanded?(node) || active? || expanded
|
35
34
|
end
|