primer_view_components 0.0.9 → 0.0.14

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.
Files changed (48) hide show
  1. checksums.yaml +4 -4
  2. data/CHANGELOG.md +31 -1
  3. data/README.md +2 -175
  4. data/app/components/primer/avatar_component.rb +22 -11
  5. data/app/components/primer/base_component.rb +56 -11
  6. data/app/components/primer/blankslate_component.html.erb +1 -1
  7. data/app/components/primer/blankslate_component.rb +71 -116
  8. data/app/components/primer/border_box_component.html.erb +5 -5
  9. data/app/components/primer/border_box_component.rb +45 -33
  10. data/app/components/primer/box_component.rb +6 -4
  11. data/app/components/primer/breadcrumb_component.html.erb +2 -2
  12. data/app/components/primer/breadcrumb_component.rb +23 -30
  13. data/app/components/primer/button_component.rb +26 -9
  14. data/app/components/primer/component.rb +1 -0
  15. data/app/components/primer/counter_component.rb +13 -9
  16. data/app/components/primer/details_component.html.erb +1 -1
  17. data/app/components/primer/details_component.rb +18 -18
  18. data/app/components/primer/dropdown_menu_component.html.erb +1 -1
  19. data/app/components/primer/dropdown_menu_component.rb +6 -6
  20. data/app/components/primer/flash_component.html.erb +2 -2
  21. data/app/components/primer/flash_component.rb +42 -12
  22. data/app/components/primer/flex_component.rb +5 -5
  23. data/app/components/primer/flex_item_component.rb +5 -5
  24. data/app/components/primer/heading_component.rb +4 -4
  25. data/app/components/primer/label_component.rb +37 -14
  26. data/app/components/primer/layout_component.html.erb +1 -1
  27. data/app/components/primer/layout_component.rb +22 -5
  28. data/app/components/primer/link_component.rb +17 -7
  29. data/app/components/primer/octicon_component.rb +20 -7
  30. data/app/components/primer/popover_component.html.erb +1 -1
  31. data/app/components/primer/popover_component.rb +61 -23
  32. data/app/components/primer/progress_bar_component.html.erb +2 -2
  33. data/app/components/primer/progress_bar_component.rb +40 -30
  34. data/app/components/primer/slot.rb +1 -0
  35. data/app/components/primer/spinner_component.html.erb +6 -0
  36. data/app/components/primer/spinner_component.rb +39 -0
  37. data/app/components/primer/state_component.rb +26 -14
  38. data/app/components/primer/subhead_component.html.erb +4 -4
  39. data/app/components/primer/subhead_component.rb +68 -43
  40. data/app/components/primer/text_component.rb +10 -4
  41. data/app/components/primer/timeline_item_component.html.erb +4 -4
  42. data/app/components/primer/timeline_item_component.rb +48 -24
  43. data/app/components/primer/underline_nav_component.html.erb +1 -1
  44. data/app/components/primer/underline_nav_component.rb +5 -5
  45. data/app/components/primer/view_components.rb +1 -0
  46. data/lib/primer/classify.rb +2 -4
  47. data/lib/primer/view_components/version.rb +1 -1
  48. metadata +4 -2
@@ -1,6 +1,7 @@
1
1
  # frozen_string_literal: true
2
2
 
3
3
  module Primer
4
+ # Use `TimelineItem` to display items on a vertical timeline, connected by badge elements.
4
5
  class TimelineItemComponent < Primer::Component
5
6
  include ViewComponent::Slotable
6
7
 
@@ -8,14 +9,26 @@ module Primer
8
9
  with_slot :badge, class_name: "Badge"
9
10
  with_slot :body, class_name: "Body"
10
11
 
11
- attr_reader :kwargs
12
- def initialize(condensed: false, **kwargs)
13
- @kwargs = kwargs
14
- @kwargs[:tag] = :div
15
- @kwargs[:classes] = class_names(
12
+ attr_reader :system_arguments
13
+
14
+ # @example 75|Default
15
+ # <div style="padding-left: 60px">
16
+ # <%= render(Primer::TimelineItemComponent.new) do |component| %>
17
+ # <% component.slot(:avatar, src: "https://github.com/github.png", alt: "github") %>
18
+ # <% component.slot(:badge, bg: :green, color: :white, icon: :check) %>
19
+ # <% component.slot(:body) { "Success!" } %>
20
+ # <% end %>
21
+ # </div>
22
+ #
23
+ # @param condensed [Boolean] Reduce the vertical padding and remove the background from the badge item. Most commonly used in commits.
24
+ # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
25
+ def initialize(condensed: false, **system_arguments)
26
+ @system_arguments = system_arguments
27
+ @system_arguments[:tag] = :div
28
+ @system_arguments[:classes] = class_names(
16
29
  "TimelineItem",
17
30
  condensed ? "TimelineItem--condensed" : "",
18
- kwargs[:classes]
31
+ system_arguments[:classes]
19
32
  )
20
33
  end
21
34
 
@@ -24,44 +37,55 @@ module Primer
24
37
  end
25
38
 
26
39
  class Avatar < Primer::Slot
27
- attr_reader :kwargs, :alt, :src, :size, :square
28
- def initialize(alt: nil, src: nil, size: 40, square: true, **kwargs)
40
+ attr_reader :system_arguments, :alt, :src, :size, :square
41
+
42
+ # @param alt [String] Alt text for avatar image.
43
+ # @param src [String] Src attribute for avatar image.
44
+ # @param size [Integer] Image size.
45
+ # @param square [Boolean] Whether to round the edges of the image.
46
+ # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
47
+ def initialize(alt: nil, src: nil, size: 40, square: true, **system_arguments)
29
48
  @alt = alt
30
49
  @src = src
31
50
  @size = size
32
51
  @square = square
33
52
 
34
- @kwargs = kwargs
35
- @kwargs[:tag] = :div
36
- @kwargs[:classes] = class_names(
53
+ @system_arguments = system_arguments
54
+ @system_arguments[:tag] = :div
55
+ @system_arguments[:classes] = class_names(
37
56
  "TimelineItem-avatar",
38
- kwargs[:classes]
57
+ system_arguments[:classes]
39
58
  )
40
59
  end
41
60
  end
42
61
 
43
62
  class Badge < Primer::Slot
44
- attr_reader :kwargs, :icon
45
- def initialize(icon: nil, **kwargs)
63
+ attr_reader :system_arguments, :icon
64
+
65
+ # @param icon [String] Name of [Octicon](https://primer.style/octicons/) to use.
66
+ # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
67
+ def initialize(icon: nil, **system_arguments)
46
68
  @icon = icon
47
69
 
48
- @kwargs = kwargs
49
- @kwargs[:tag] = :div
50
- @kwargs[:classes] = class_names(
70
+ @system_arguments = system_arguments
71
+ @system_arguments[:tag] = :div
72
+ @system_arguments[:classes] = class_names(
51
73
  "TimelineItem-badge",
52
- kwargs[:classes]
74
+ system_arguments[:classes]
53
75
  )
54
76
  end
55
77
  end
56
78
 
57
79
  class Body < Primer::Slot
58
- attr_reader :kwargs
59
- def initialize(**kwargs)
60
- @kwargs = kwargs
61
- @kwargs[:tag] = :div
62
- @kwargs[:classes] = class_names(
80
+ attr_reader :system_arguments
81
+
82
+ # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
83
+ def initialize(**system_arguments)
84
+ @system_arguments = system_arguments
85
+ @system_arguments[:tag] = :div
86
+ @system_arguments[:classes] = class_names(
63
87
  "TimelineItem-body",
64
- kwargs[:classes]
88
+ system_arguments[:classes]
65
89
  )
66
90
  end
67
91
  end
@@ -1,4 +1,4 @@
1
- <%= render Primer::BaseComponent.new(**@kwargs) do %>
1
+ <%= render Primer::BaseComponent.new(**@system_arguments) do %>
2
2
  <% if actions && @align == :right %>
3
3
  <%= actions %>
4
4
  <% end %>
@@ -7,13 +7,13 @@ module Primer
7
7
 
8
8
  with_content_areas :body, :actions
9
9
 
10
- def initialize(align: ALIGN_DEFAULT, **kwargs)
10
+ def initialize(align: ALIGN_DEFAULT, **system_arguments)
11
11
  @align = fetch_or_fallback(ALIGN_OPTIONS, align, ALIGN_DEFAULT)
12
12
 
13
- @kwargs = kwargs
14
- @kwargs[:tag] = :nav
15
- @kwargs[:classes] = class_names(
16
- @kwargs[:classes],
13
+ @system_arguments = system_arguments
14
+ @system_arguments[:tag] = :nav
15
+ @system_arguments[:classes] = class_names(
16
+ @system_arguments[:classes],
17
17
  "UnderlineNav",
18
18
  "UnderlineNav--right" => @align == :right
19
19
  )
@@ -43,6 +43,7 @@ require_relative "link_component"
43
43
  require_relative "octicon_component"
44
44
  require_relative "popover_component"
45
45
  require_relative "progress_bar_component"
46
+ require_relative "spinner_component"
46
47
  require_relative "state_component"
47
48
  require_relative "subhead_component"
48
49
  require_relative "text_component"
@@ -9,7 +9,7 @@ module Primer
9
9
  ALIGN_ITEMS_KEY = :align_items
10
10
  DISPLAY_KEY = :display
11
11
  RESPONSIVE_KEYS = ([DISPLAY_KEY, DIRECTION_KEY, JUSTIFY_CONTENT_KEY, ALIGN_ITEMS_KEY, :col, :float] + SPACING_KEYS).freeze
12
- BREAKPOINTS = ["", "-sm", "-md", "-lg"]
12
+ BREAKPOINTS = ["", "-sm", "-md", "-lg", "-xl"]
13
13
 
14
14
  # Keys where we can simply translate { key: value } into ".key-value"
15
15
  CONCAT_KEYS = SPACING_KEYS + [:hide, :position, :v, :float, :col, :text, :box_shadow].freeze
@@ -131,9 +131,7 @@ module Primer
131
131
 
132
132
  if invalid_class_names.any?
133
133
  raise ArgumentError.new(
134
- "Primer CSS class #{'name'.pluralize(invalid_class_names.length)} \
135
- #{invalid_class_names.to_sentence} #{'is'.pluralize(invalid_class_names.length)} \
136
- not allowed, use style arguments instead (https://github.com/primer/view_components#built-in-styling-arguments). This warning will not be raised in production.",
134
+ "Use System Arguments (https://primer.style/view-components/system-arguments) instead of Primer CSS class #{'name'.pluralize(invalid_class_names.length)} #{invalid_class_names.to_sentence}. This warning will not be raised in production.",
137
135
  )
138
136
  end
139
137
  end
@@ -5,7 +5,7 @@ module Primer
5
5
  module VERSION
6
6
  MAJOR = 0
7
7
  MINOR = 0
8
- PATCH = 9
8
+ PATCH = 14
9
9
 
10
10
  STRING = [MAJOR, MINOR, PATCH].join(".")
11
11
  end
metadata CHANGED
@@ -1,14 +1,14 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: primer_view_components
3
3
  version: !ruby/object:Gem::Version
4
- version: 0.0.9
4
+ version: 0.0.14
5
5
  platform: ruby
6
6
  authors:
7
7
  - GitHub Open Source
8
8
  autorequire:
9
9
  bindir: bin
10
10
  cert_chain: []
11
- date: 2020-10-12 00:00:00.000000000 Z
11
+ date: 2020-11-16 00:00:00.000000000 Z
12
12
  dependencies:
13
13
  - !ruby/object:Gem::Dependency
14
14
  name: rails
@@ -223,6 +223,8 @@ files:
223
223
  - app/components/primer/progress_bar_component.html.erb
224
224
  - app/components/primer/progress_bar_component.rb
225
225
  - app/components/primer/slot.rb
226
+ - app/components/primer/spinner_component.html.erb
227
+ - app/components/primer/spinner_component.rb
226
228
  - app/components/primer/state_component.rb
227
229
  - app/components/primer/subhead_component.html.erb
228
230
  - app/components/primer/subhead_component.rb