shipyard-framework 0.3.3 → 0.3.4

Sign up to get free protection for your applications and to get access to all the features.
Files changed (48) hide show
  1. checksums.yaml +4 -4
  2. data/app/helpers/shipyard/alert_helper.rb +52 -0
  3. data/app/helpers/shipyard/button_helper.rb +34 -0
  4. data/app/helpers/shipyard/form_helper.rb +16 -0
  5. data/app/helpers/shipyard/icon_helper.rb +49 -0
  6. data/app/helpers/shipyard/layout_helper.rb +31 -0
  7. data/assets/stylesheets/shipyard/components/_alerts.sass +1 -0
  8. data/assets/stylesheets/shipyard/components/_boxes.sass +3 -0
  9. data/assets/stylesheets/shipyard/components/_tooltips.sass +1 -1
  10. data/assets/stylesheets/shipyard/core/_type.sass +4 -1
  11. data/assets/stylesheets/shipyard/utilities/_colors.sass +4 -0
  12. data/assets/stylesheets/shipyard/variables/_colors.scss +72 -9
  13. data/lib/shipyard-framework.rb +2 -0
  14. data/lib/shipyard-framework/jekyll/alert_tag.rb +20 -0
  15. data/lib/shipyard-framework/jekyll/button_tag.rb +2 -2
  16. data/lib/shipyard-framework/rails/railtie.rb +0 -14
  17. data/lib/shipyard-framework/version.rb +1 -1
  18. data/shipyard.gemspec +1 -1
  19. data/styleguide/.gitignore +3 -0
  20. data/styleguide/.nojekyll +0 -0
  21. data/styleguide/.ruby-version +1 -0
  22. data/styleguide/Gemfile +6 -0
  23. data/styleguide/Gemfile.lock +87 -0
  24. data/styleguide/_config.yml +43 -0
  25. data/styleguide/_layouts/application.html +24 -0
  26. data/styleguide/_sass/layout.sass +35 -0
  27. data/styleguide/_sass/views.sass +27 -0
  28. data/styleguide/assets/css/application.sass +8 -0
  29. data/styleguide/components/alerts.html +12 -0
  30. data/styleguide/components/boxes.html +37 -0
  31. data/styleguide/components/buttons.html +67 -0
  32. data/styleguide/components/empty-states.html +12 -0
  33. data/styleguide/components/forms.html +82 -0
  34. data/styleguide/components/grid.html +44 -0
  35. data/styleguide/components/index.html +16 -0
  36. data/styleguide/components/modals.html +15 -0
  37. data/styleguide/components/tooltips.html +19 -0
  38. data/styleguide/index.html +6 -0
  39. data/styleguide/utilities/colors.html +24 -0
  40. data/styleguide/utilities/index.html +16 -0
  41. data/styleguide/utilities/responsive.html +19 -0
  42. data/styleguide/utilities/typography.html +56 -0
  43. metadata +43 -18
  44. data/lib/shipyard-framework/rails/alert_helper.rb +0 -45
  45. data/lib/shipyard-framework/rails/button_helper.rb +0 -36
  46. data/lib/shipyard-framework/rails/form_helper.rb +0 -18
  47. data/lib/shipyard-framework/rails/icon_helper.rb +0 -51
  48. data/lib/shipyard-framework/rails/layout_helpers.rb +0 -33
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA1:
3
- metadata.gz: 1eba9b663f45366fc84d75ad142eac6af37a3d60
4
- data.tar.gz: cfeed210cf0c3ef595e830b33d65641ff6d84fd7
3
+ metadata.gz: 777bd0cb3ddd5256b5c8b7160abd550fdb621990
4
+ data.tar.gz: 5ba5cad0b8607e9821380cfd128205962cd99e91
5
5
  SHA512:
6
- metadata.gz: 4363af91b88a8aec6bdfc67dae5cae3b2e06856d4f1277588f567c833371d33261eec1a0a2b45114d4b8f0a9dd6a8ded4ccfa60a5bab55f631528fc03ec3ebdf
7
- data.tar.gz: c9e9bf434d61f11e9cd30e1d01d1ada6b9b877ef2af56577dc6382cc6f50579bfcc3140c9170a90f3118dfdeb6b46eec16fc417dbaaf09be6d668c7e8c36c505
6
+ metadata.gz: 5021d2cab6d69a5de25ad262e8c5583a392b83a61007d8579a4c97d48be33477beeab6ea610123148f01cc3975277488674cdeedbf7ed76074b3c63073d509f2
7
+ data.tar.gz: c77c094a593cc6923072f9d9be3969bcb3734d7c58e24d00b271b9079df7caecaf045b451dab983649cc5243addcd99360140e2c1adcf61d6ab3e79c9287b899
@@ -0,0 +1,52 @@
1
+ module Shipyard
2
+ module AlertHelper
3
+ include ActionView::Context
4
+ include ActionView::Helpers::TagHelper
5
+ include ActionView::Helpers::TextHelper
6
+
7
+ def flash_alert(*args, &block)
8
+ alert_txt = capture(&block) if block_given?
9
+ options = {}
10
+ options[:role] ||= 'alert'
11
+ options[:data] ||= {}
12
+ options[:data][:shipyard] = 'alert'
13
+ options['v-show'] = 'visible'
14
+ class_list = ['alert']
15
+
16
+ args.each do |arg|
17
+ if arg.is_a? Symbol
18
+ class_list << "alert-#{alert_type(arg)}"
19
+ elsif arg.is_a? Hash
20
+ options = options.merge(arg) if arg.is_a?(Hash)
21
+ else
22
+ alert_txt = arg
23
+ end
24
+ end
25
+
26
+ options[:class] = "#{class_list.join(' ')} #{options[:class]}"
27
+
28
+ content_tag :div, options do
29
+ concat content_tag(:p, raw(alert_txt), class: 'alert-txt')
30
+ if defined? icon
31
+ svg_html = icon('x', class: 'alert-close-icon icon-outline-inverse center')
32
+ else
33
+ svg_html = 'x'
34
+ end
35
+ concat content_tag(:button,
36
+ svg_html,
37
+ class: 'alert-close v-center',
38
+ '@click': 'close')
39
+ end
40
+ end
41
+
42
+ private
43
+
44
+ def alert_type(type)
45
+ case type.to_sym
46
+ when :notice then :success
47
+ when :alert then :error
48
+ else type.to_s.tr('_', '-')
49
+ end
50
+ end
51
+ end
52
+ end
@@ -0,0 +1,34 @@
1
+ module Shipyard
2
+ module ButtonHelper
3
+ include ActionView::Helpers::TagHelper
4
+
5
+ def btn(text, *args, &block)
6
+ if block_given?
7
+ args << text
8
+ text = capture(&block)
9
+ end
10
+
11
+ # Save any options that were passed in.
12
+ options = {}
13
+ args.each do |arg|
14
+ options = options.merge(arg) if arg.is_a?(Hash)
15
+ end
16
+
17
+ # Output the appropriate button.
18
+ tag = options.key?(:href) ? :a : :button
19
+ content_tag tag, text, btn_options(args, options)
20
+ end
21
+
22
+ private
23
+
24
+ def btn_options(args, options)
25
+ options[:class] ||= ''
26
+ options[:class] += ' btn'
27
+ args.each do |arg|
28
+ options[:class] += " btn-#{arg.to_s.tr('_', '-')}" if arg.is_a?(Symbol)
29
+ end
30
+ options[:class].strip!
31
+ options
32
+ end
33
+ end
34
+ end
@@ -0,0 +1,16 @@
1
+ module Shipyard
2
+ module FormHelper
3
+ def input_text(name, value=nil, options={})
4
+ options[:class] = "input input-text #{options[:class]}"
5
+ text_field_tag name, value, options
6
+ end
7
+
8
+ def input_select_tag(name, choices, container_options={}, select_options={})
9
+ container_options[:class] = "input-select-container #{container_options[:class]}"
10
+ content_tag :div, container_options do
11
+ select_options[:class] = "input input-select #{select_options[:class]}"
12
+ select_tag name, choices, select_options
13
+ end
14
+ end
15
+ end
16
+ end
@@ -0,0 +1,49 @@
1
+ module Shipyard
2
+ module IconHelper
3
+ include ActionView::Context
4
+ include ActionView::Helpers::TagHelper
5
+
6
+ def icon(name, options={})
7
+ if name.is_a? Symbol
8
+ svg = Icons.instance.find_by(symbol: name)
9
+ svg_use_tag svg, options
10
+ else
11
+ svg = Icons.instance.find_by(id: name)
12
+ svg_tag svg, options
13
+ end
14
+ end
15
+
16
+ private
17
+
18
+ def svg_options(svg, options)
19
+ options[:class] = svg_classes(svg, options)
20
+ options[:viewBox] ||= svg[:view_box]
21
+ options[:preserveAspectRatio] ||= 'xMinYMin meet'
22
+ options.delete(:prefix)
23
+ options
24
+ end
25
+
26
+ def svg_classes(svg, options)
27
+ css_classes = []
28
+ css_classes << 'icon'
29
+ css_classes << "icon-#{svg[:id]}"
30
+ css_classes << 'icon-outline' if svg[:is_outlined] == true
31
+ css_classes << "#{options[:prefix]}-icon" if options[:prefix]
32
+ css_classes << "#{options[:prefix]}-icon-#{svg[:id]}" if options[:prefix]
33
+ css_classes << options[:class]
34
+ css_classes.join(' ').strip
35
+ end
36
+
37
+ def svg_use_tag(svg, options)
38
+ content_tag :svg, svg_options(svg, options) do
39
+ content_tag :use, nil, 'xlink:href' => Icons.instance.asset_path(svg[:id])
40
+ end
41
+ end
42
+
43
+ def svg_tag(svg, options)
44
+ html = svg[:inner_html]
45
+ html = html.gsub(/class="([\s\w-]+)"/, "class=\"#{options[:prefix]}-\\1 \\1\"") if options[:prefix]
46
+ content_tag :svg, raw(html), svg_options(svg, options)
47
+ end
48
+ end
49
+ end
@@ -0,0 +1,31 @@
1
+ module Shipyard
2
+ module LayoutHelper
3
+ def shipyard_css_classes
4
+ css_classes = []
5
+ css_classes << current_page
6
+ css_classes << current_controller
7
+ css_classes << "env-#{::Rails.env}"
8
+ css_classes.join(' ')
9
+ end
10
+
11
+ def current_controller
12
+ controller.controller_name.dasherize
13
+ end
14
+
15
+ def current_action
16
+ controller.action_name.dasherize
17
+ end
18
+
19
+ def current_page
20
+ "#{current_controller}-#{current_action}"
21
+ end
22
+
23
+ def current_route
24
+ "#{controller.controller_name}##{controller.action_name}"
25
+ end
26
+
27
+ def current_route_is?(routes)
28
+ routes.tr(' ', '').split(',').include? current_route
29
+ end
30
+ end
31
+ end
@@ -51,6 +51,7 @@
51
51
  position: absolute
52
52
  transform: translatey(-50%)
53
53
  &-close
54
+ color: #fff
54
55
  position: absolute
55
56
  display: inline-block
56
57
  transition: opacity 300ms ease
@@ -13,6 +13,9 @@
13
13
  &-secondary
14
14
  background: $gray-lighter
15
15
 
16
+ &-rounded
17
+ border-radius: 50%
18
+
16
19
  &-link
17
20
  color: $blue
18
21
  cursor: pointer
@@ -1,4 +1,4 @@
1
- +component('tooltip')
1
+ [tooltip]
2
2
  overflow: visible
3
3
  position: relative
4
4
  &:before
@@ -62,7 +62,7 @@ button
62
62
  color: desaturate(darken($purple, 15%), 25%)
63
63
  background: darken($gray-lightest, 3%)
64
64
  border: 1px solid darken($gray-lighter, 5%)
65
- border-radius: 3px
65
+ border-radius: 4px
66
66
  padding: 2px 4px
67
67
  margin: 0 2px
68
68
 
@@ -136,6 +136,8 @@ h1, h2, h3, h4, h5, h6
136
136
  overflow: visible
137
137
 
138
138
  // Font Colors
139
+ &-normal
140
+ color: $text-color
139
141
  &-light
140
142
  color: $text-color-light
141
143
  &-lighter
@@ -143,6 +145,7 @@ h1, h2, h3, h4, h5, h6
143
145
  &-lightest
144
146
  color: $text-color-lightest
145
147
  &-inverse
148
+ color: #fff
146
149
  &-light
147
150
  color: rgba(#fff,.8)
148
151
  &-lighter
@@ -3,6 +3,10 @@
3
3
  @if $shade == base
4
4
  .#{$color}
5
5
  color: $value
6
+ .bg-#{$color}
7
+ background-color: $value
6
8
  @else
7
9
  .#{$color}-#{$shade}
8
10
  color: $value
11
+ .bg-#{$color}-#{$shade}
12
+ background-color: $value
@@ -1,11 +1,74 @@
1
1
  $colors: (
2
- "gray": (base: #788594, light: #bac5d2, lighter: #dfe6eb, lightest: #f2f5f7, dark: #313a44, darkest: #1e252c),
3
- "green": (base: #3acc7c, light: #97ffc6, lightest: #b5ffd6, dark: #2c995d, darkest: #1d663e),
4
- "blue": (base: #1ca1e3, light: #5eb9e6, lightest: #9ed8f5, dark: #0075b0, darkest: #004d73),
5
- "teal": (base: #20a5a8, light: #6ab7b9, lightest: #b2dbdc, dark: #0e6e70, darkest: #00494b),
6
- "red": (base: #e06158, light: #f7a09e, lightest: #ffc6cb, dark: #b13b39, darkest: #892120),
7
- "yellow": (base: #ffca49, light: #ffd87e, lightest: #ffe7b1, dark: #99782d, darker: #66501e, darkest: #33280f),
8
- "orange": (base: #ff9f49, light: #ffba7d, lightest: #ffd6b1, dark: #cc7f3a, darkest: #995f2c),
9
- "purple": (base: #bf84ff, light: lighten(#bf84ff, 10%), lighter: lighten(#bf84ff, 15%), lightest: lighten(#bf84ff, 20%), dark: darken(#bf84ff, 10%), darker: darken(#bf84ff, 15%), darkest: darken(#bf84ff, 20%)),
10
- "coral": (base: #f9657a, light: lighten(#f9657a, 10%), lighter: lighten(#f9657a, 15%), lightest: lighten(#f9657a, 20%), dark: darken(#f9657a, 10%), darker: darken(#f9657a, 15%), darkest: darken(#f9657a, 20%))
2
+ "gray": (
3
+ base: #788594,
4
+ light: #bac5d2,
5
+ lighter: #dfe6eb,
6
+ lightest: #f2f5f7,
7
+ dark: #313a44,
8
+ darkest: #1e252c
9
+ ),
10
+ "green": (
11
+ base: #3acc7c,
12
+ light: #97ffc6,
13
+ lightest: #b5ffd6,
14
+ dark: #2c995d,
15
+ darkest: #1d663e
16
+ ),
17
+ "blue": (
18
+ base: #1ca1e3,
19
+ light: #5eb9e6,
20
+ lightest: #9ed8f5,
21
+ dark: #0075b0,
22
+ darkest: #004d73
23
+ ),
24
+ "teal": (
25
+ base: #20a5a8,
26
+ light: #6ab7b9,
27
+ lightest: #b2dbdc,
28
+ dark: #0e6e70,
29
+ darkest: #00494b
30
+ ),
31
+ "red": (
32
+ base: #e06158,
33
+ light: #f7a09e,
34
+ lightest: #ffc6cb,
35
+ dark: #b13b39,
36
+ darkest: #892120
37
+ ),
38
+ "yellow": (
39
+ base: #ffca49,
40
+ light: lighten(#ffca49, 7%),
41
+ lighter: darken(#ffe7b1, 3%),
42
+ lightest: lighten(#ffe7b1, 7%),
43
+ dark: darken(#ffca49, 20%),
44
+ darker: darken(#ffca49, 30%),
45
+ darkest: darken(#ffca49, 40%)
46
+ ),
47
+ "orange": (
48
+ base: #ff9f49,
49
+ light: lighten(#ff9f49, 7%),
50
+ lighter: lighten(#ff9f49, 14%),
51
+ lightest: lighten(#ff9f49, 21%),
52
+ dark: desaturate(darken(#ff9f49, 10%), 35%),
53
+ darker: desaturate(darken(#ff9f49, 20%), 25%),
54
+ darkest: desaturate(darken(#ff9f49, 30%), 15%)
55
+ ),
56
+ "purple": (
57
+ base: #bf8df6,
58
+ light: lighten(#bf8df6, 10%),
59
+ lighter: lighten(#bf8df6, 15%),
60
+ lightest: lighten(#bf8df6, 20%),
61
+ dark: desaturate(darken(#bf8df6, 20%), 35%),
62
+ darker: desaturate(darken(#bf8df6, 35%), 35%),
63
+ darkest: desaturate(darken(#bf8df6, 50%), 35%)
64
+ ),
65
+ "coral": (
66
+ base: #f9657a,
67
+ light: lighten(#f9657a, 8%),
68
+ lighter: lighten(#f9657a, 16%),
69
+ lightest: lighten(#f9657a, 25%),
70
+ dark: desaturate(darken(#f9657a, 20%), 35%),
71
+ darker: desaturate(darken(#f9657a, 30%), 25%),
72
+ darkest: desaturate(darken(#f9657a, 40%), 15%)
73
+ )
11
74
  ) !default;
@@ -69,8 +69,10 @@ module Shipyard
69
69
 
70
70
  def register_jekyll_tags
71
71
  require 'shipyard-framework/jekyll/button_tag'
72
+ require 'shipyard-framework/jekyll/alert_tag'
72
73
  require 'shipyard-framework/jekyll/shipyard_version_tag'
73
74
  Liquid::Template.register_tag('btn', Shipyard::Jekyll::Button)
75
+ Liquid::Template.register_tag('alert', Shipyard::Jekyll::Alert)
74
76
  Liquid::Template.register_tag('shipyard_version', Shipyard::Jekyll::ShipyardVersion)
75
77
  end
76
78
  end
@@ -0,0 +1,20 @@
1
+ require '../app/helpers/shipyard/alert_helper'
2
+
3
+ module Shipyard
4
+ module Jekyll
5
+ class Alert < Liquid::Tag
6
+ include Shipyard::AlertHelper
7
+
8
+ def initialize(tag_name, params, options)
9
+ super
10
+ @params = params.split(',')
11
+ @type = @params[0].tr(':','').to_sym
12
+ @text = @params[1]
13
+ end
14
+
15
+ def render(context)
16
+ flash_alert @type, @text
17
+ end
18
+ end
19
+ end
20
+ end
@@ -1,9 +1,9 @@
1
- require 'shipyard-framework/rails/button_helper'
1
+ require '../app/helpers/shipyard/button_helper'
2
2
 
3
3
  module Shipyard
4
4
  module Jekyll
5
5
  class Button < Liquid::Tag
6
- include Shipyard::Rails::ButtonHelper
6
+ include Shipyard::ButtonHelper
7
7
 
8
8
  def initialize(tag_name, params, options)
9
9
  super
@@ -1,20 +1,6 @@
1
- require 'shipyard-framework/rails/layout_helpers'
2
- require 'shipyard-framework/rails/icon_helper'
3
- require 'shipyard-framework/rails/button_helper'
4
- require 'shipyard-framework/rails/alert_helper'
5
- require 'shipyard-framework/rails/form_helper'
6
-
7
1
  module Shipyard
8
2
  module Rails
9
3
  class Railtie < ::Rails::Railtie
10
- initializer 'shipyard.view_helpers' do
11
- ActionView::Base.send :include, LayoutHelpers
12
- ActionView::Base.send :include, IconHelper
13
- ActionView::Base.send :include, ButtonHelper
14
- ActionView::Base.send :include, AlertHelper
15
- ActionView::Base.send :include, FormHelper
16
- end
17
-
18
4
  initializer 'shipyard.reload_cached_icons' do
19
5
  if ::Rails.env.development?
20
6
  ::Rails.application.reloaders << Shipyard::Icons.instance
@@ -1,3 +1,3 @@
1
1
  module Shipyard
2
- VERSION = '0.3.3'
2
+ VERSION = '0.3.4'
3
3
  end
data/shipyard.gemspec CHANGED
@@ -15,7 +15,7 @@ Gem::Specification.new do |spec|
15
15
  # spec.add_runtime_dependency 'sassc-rails', '~> 1.3', '>= 1.3.0'
16
16
  # spec.add_runtime_dependency 'slim-rails', '~> 3.1', '>= 3.1.0'
17
17
  # spec.add_runtime_dependency 'sassc', '~> 1.11.4'
18
- spec.add_runtime_dependency 'actionview'
18
+ spec.add_runtime_dependency 'actionview', '~> 0'
19
19
 
20
20
  spec.add_development_dependency 'bundler', '~> 1.15', '>= 1.15.3'
21
21
 
@@ -0,0 +1,3 @@
1
+ _site
2
+ .sass-cache
3
+ .jekyll-metadata
File without changes