playbook_ui 10.16.0 → 10.19.0.pre.popover.alpha1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (160) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/_playbook.scss +4 -0
  3. data/app/pb_kits/playbook/pb_background/background.test.js +22 -0
  4. data/app/pb_kits/playbook/pb_bar_graph/_bar_graph.jsx +3 -0
  5. data/app/pb_kits/playbook/pb_bar_graph/bar_graph.rb +3 -0
  6. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_colors.html.erb +26 -0
  7. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_colors.jsx +37 -0
  8. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_colors.md +2 -0
  9. data/app/pb_kits/playbook/pb_bar_graph/docs/example.yml +2 -0
  10. data/app/pb_kits/playbook/pb_bar_graph/docs/index.js +1 -0
  11. data/app/pb_kits/playbook/pb_body/_body.jsx +1 -1
  12. data/app/pb_kits/playbook/pb_body/_body_mixins.scss +2 -1
  13. data/app/pb_kits/playbook/pb_body/body.rb +1 -1
  14. data/app/pb_kits/playbook/pb_body/body.test.js +29 -0
  15. data/app/pb_kits/playbook/pb_body/docs/_body_light.html.erb +5 -0
  16. data/app/pb_kits/playbook/pb_body/docs/_body_light.jsx +5 -0
  17. data/app/pb_kits/playbook/pb_body/docs/_body_light.md +6 -0
  18. data/app/pb_kits/playbook/pb_button/_button.jsx +3 -3
  19. data/app/pb_kits/playbook/pb_button/_button.scss +17 -0
  20. data/app/pb_kits/playbook/pb_button/button.rb +6 -3
  21. data/app/pb_kits/playbook/pb_button/button.test.js +13 -0
  22. data/app/pb_kits/playbook/pb_button/docs/_button_size.html.erb +3 -0
  23. data/app/pb_kits/playbook/pb_button/docs/_button_size.jsx +26 -0
  24. data/app/pb_kits/playbook/pb_button/docs/_button_size.md +1 -0
  25. data/app/pb_kits/playbook/pb_button/docs/example.yml +2 -0
  26. data/app/pb_kits/playbook/pb_button/docs/index.js +1 -0
  27. data/app/pb_kits/playbook/pb_caption/_caption.jsx +21 -8
  28. data/app/pb_kits/playbook/pb_caption/_caption.scss +14 -8
  29. data/app/pb_kits/playbook/pb_caption/_caption_mixin.scss +27 -0
  30. data/app/pb_kits/playbook/pb_caption/caption.rb +6 -4
  31. data/app/pb_kits/playbook/pb_caption/caption.test.js +29 -0
  32. data/app/pb_kits/playbook/pb_caption/docs/_caption_colors.html.erb +3 -0
  33. data/app/pb_kits/playbook/pb_caption/docs/_caption_colors.jsx +25 -0
  34. data/app/pb_kits/playbook/pb_caption/docs/_caption_colors.md +6 -0
  35. data/app/pb_kits/playbook/pb_caption/docs/example.yml +7 -4
  36. data/app/pb_kits/playbook/pb_caption/docs/index.js +1 -1
  37. data/app/pb_kits/playbook/pb_card/_card.jsx +1 -3
  38. data/app/pb_kits/playbook/pb_card/_card.scss +0 -6
  39. data/app/pb_kits/playbook/pb_card/_card_mixin.scss +1 -8
  40. data/app/pb_kits/playbook/pb_card/card.html.erb +2 -0
  41. data/app/pb_kits/playbook/pb_card/card.rb +0 -8
  42. data/app/pb_kits/playbook/pb_card/docs/_card_background.html.erb +1 -1
  43. data/app/pb_kits/playbook/pb_card/docs/_card_content.html.erb +3 -1
  44. data/app/pb_kits/playbook/pb_card/docs/_card_content.jsx +9 -2
  45. data/app/pb_kits/playbook/pb_circle_chart/circle_chart.rb +4 -0
  46. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_colors.md +2 -0
  47. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default_date.md +3 -1
  48. data/app/pb_kits/playbook/pb_date_time_stacked/date_time_stacked.test.js +13 -4
  49. data/app/pb_kits/playbook/pb_docs/kit_example.rb +4 -0
  50. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/fixed_confirmation_toast.rb +4 -0
  51. data/app/pb_kits/playbook/pb_flex/_flex.jsx +4 -0
  52. data/app/pb_kits/playbook/pb_flex/_flex.scss +17 -1
  53. data/app/pb_kits/playbook/pb_flex/_flex_item.jsx +6 -2
  54. data/app/pb_kits/playbook/pb_flex/_flex_item.scss +22 -0
  55. data/app/pb_kits/playbook/pb_flex/docs/_flex_item.html.erb +12 -1
  56. data/app/pb_kits/playbook/pb_flex/docs/_flex_item.md +2 -0
  57. data/app/pb_kits/playbook/pb_flex/docs/_flex_item_align_self.html.erb +89 -0
  58. data/app/pb_kits/playbook/pb_flex/docs/_flex_item_align_self.jsx +210 -0
  59. data/app/pb_kits/playbook/pb_flex/docs/_flex_item_align_self.md +5 -0
  60. data/app/pb_kits/playbook/pb_flex/docs/_flex_item_example.jsx +27 -0
  61. data/app/pb_kits/playbook/pb_flex/docs/_flex_item_example.md +2 -0
  62. data/app/pb_kits/playbook/pb_flex/docs/example.yml +2 -0
  63. data/app/pb_kits/playbook/pb_flex/docs/index.js +1 -0
  64. data/app/pb_kits/playbook/pb_flex/flex.rb +14 -1
  65. data/app/pb_kits/playbook/pb_flex/flex_item.rb +16 -1
  66. data/app/pb_kits/playbook/pb_gauge/_gauge.jsx +3 -0
  67. data/app/pb_kits/playbook/pb_gauge/docs/_gauge_colors.html.erb +12 -0
  68. data/app/pb_kits/playbook/pb_gauge/docs/_gauge_colors.jsx +19 -0
  69. data/app/pb_kits/playbook/pb_gauge/docs/_gauge_colors.md +2 -0
  70. data/app/pb_kits/playbook/pb_gauge/docs/example.yml +2 -0
  71. data/app/pb_kits/playbook/pb_gauge/docs/index.js +1 -0
  72. data/app/pb_kits/playbook/pb_gauge/gauge.rb +2 -0
  73. data/app/pb_kits/playbook/pb_icon/icon.rb +4 -0
  74. data/app/pb_kits/playbook/pb_icon_circle/_icon_circle.scss +2 -2
  75. data/app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_color.html.erb +1 -1
  76. data/app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_color.jsx +1 -1
  77. data/app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_color.md +1 -0
  78. data/app/pb_kits/playbook/pb_icon_circle/icon_circle.rb +1 -1
  79. data/app/pb_kits/playbook/pb_icon_stat_value/icon_stat_value.rb +2 -0
  80. data/app/pb_kits/playbook/pb_image/_image.jsx +4 -1
  81. data/app/pb_kits/playbook/pb_image/_image.scss +24 -8
  82. data/app/pb_kits/playbook/pb_image/docs/_transition_image.html.erb +54 -0
  83. data/app/pb_kits/playbook/pb_image/docs/_transition_image.jsx +77 -0
  84. data/app/pb_kits/playbook/pb_image/docs/_transition_image.md +1 -0
  85. data/app/pb_kits/playbook/pb_image/docs/example.yml +2 -0
  86. data/app/pb_kits/playbook/pb_image/docs/index.js +1 -0
  87. data/app/pb_kits/playbook/pb_image/image.html.erb +1 -1
  88. data/app/pb_kits/playbook/pb_image/image.rb +8 -1
  89. data/app/pb_kits/playbook/pb_image/image.test.js +9 -4
  90. data/app/pb_kits/playbook/pb_line_graph/_line_graph.jsx +4 -1
  91. data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_colors.html.erb +26 -0
  92. data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_colors.jsx +37 -0
  93. data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_colors.md +2 -0
  94. data/app/pb_kits/playbook/pb_line_graph/docs/example.yml +2 -0
  95. data/app/pb_kits/playbook/pb_line_graph/docs/index.js +1 -0
  96. data/app/pb_kits/playbook/pb_line_graph/line_graph.rb +3 -0
  97. data/app/pb_kits/playbook/pb_list/list.rb +2 -0
  98. data/app/pb_kits/playbook/pb_nav/_bold_mixin.scss +22 -0
  99. data/app/pb_kits/playbook/pb_nav/_horizontal_nav.scss +17 -1
  100. data/app/pb_kits/playbook/pb_nav/_vertical_nav.scss +9 -2
  101. data/app/pb_kits/playbook/pb_nav/docs/_bold_horizontal_nav.html.erb +6 -0
  102. data/app/pb_kits/playbook/pb_nav/docs/_bold_horizontal_nav.jsx +39 -0
  103. data/app/pb_kits/playbook/pb_nav/docs/_bold_vertical_nav.html.erb +6 -0
  104. data/app/pb_kits/playbook/pb_nav/docs/_bold_vertical_nav.jsx +39 -0
  105. data/app/pb_kits/playbook/pb_nav/docs/_horizontal_nav.html.erb +1 -1
  106. data/app/pb_kits/playbook/pb_nav/docs/_subtle_nav.html.erb +1 -1
  107. data/app/pb_kits/playbook/pb_nav/docs/example.yml +4 -0
  108. data/app/pb_kits/playbook/pb_nav/docs/index.js +2 -0
  109. data/app/pb_kits/playbook/pb_nav/nav.rb +1 -1
  110. data/app/pb_kits/playbook/pb_popover/_popover.jsx +2 -4
  111. data/app/pb_kits/playbook/pb_popover/docs/_popover_close.html.erb +7 -7
  112. data/app/pb_kits/playbook/pb_popover/docs/_popover_scroll_height.jsx +3 -0
  113. data/app/pb_kits/playbook/pb_popover/docs/_popover_z_index.jsx +1 -0
  114. data/app/pb_kits/playbook/pb_popover/index.js +4 -9
  115. data/app/pb_kits/playbook/pb_popover/popover.html.erb +1 -1
  116. data/app/pb_kits/playbook/pb_select/select.rb +3 -0
  117. data/app/pb_kits/playbook/pb_source/source.rb +3 -0
  118. data/app/pb_kits/playbook/pb_text_input/_text_input.scss +63 -14
  119. data/app/pb_kits/playbook/pb_text_input/docs/_text_input_error.html.erb +21 -2
  120. data/app/pb_kits/playbook/pb_text_input/docs/_text_input_error.jsx +12 -3
  121. data/app/pb_kits/playbook/pb_text_input/text_input.rb +2 -0
  122. data/app/pb_kits/playbook/pb_title/_title.jsx +6 -4
  123. data/app/pb_kits/playbook/pb_title/_title.scss +5 -5
  124. data/app/pb_kits/playbook/pb_title/_title_mixin.scss +17 -0
  125. data/app/pb_kits/playbook/pb_title/docs/_title_colors.html.erb +4 -0
  126. data/app/pb_kits/playbook/pb_title/docs/_title_colors.jsx +37 -0
  127. data/app/pb_kits/playbook/pb_title/docs/_title_colors.md +6 -0
  128. data/app/pb_kits/playbook/pb_title/docs/_title_light.html.erb +4 -1
  129. data/app/pb_kits/playbook/pb_title/docs/_title_light.md +3 -0
  130. data/app/pb_kits/playbook/pb_title/docs/example.yml +2 -2
  131. data/app/pb_kits/playbook/pb_title/docs/index.js +1 -1
  132. data/app/pb_kits/playbook/pb_title/title.html.erb +4 -2
  133. data/app/pb_kits/playbook/pb_title/title.rb +5 -4
  134. data/app/pb_kits/playbook/pb_title/title.test.js +29 -0
  135. data/app/pb_kits/playbook/plugins/pb_chart.js +16 -24
  136. data/app/pb_kits/playbook/tokens/_colors.scss +3 -1
  137. data/app/pb_kits/playbook/utilities/_cursor.scss +3 -0
  138. data/app/pb_kits/playbook/utilities/_display.scss +23 -0
  139. data/app/pb_kits/playbook/utilities/_line_height.scss +11 -0
  140. data/app/pb_kits/playbook/utilities/_shadow.scss +11 -0
  141. data/app/pb_kits/playbook/utilities/globalProps.js +25 -1
  142. data/lib/playbook/classnames.rb +4 -0
  143. data/lib/playbook/cursor.rb +29 -0
  144. data/lib/playbook/display.rb +29 -0
  145. data/lib/playbook/engine.rb +0 -1
  146. data/lib/playbook/kit_base.rb +8 -0
  147. data/lib/playbook/line_height.rb +29 -0
  148. data/lib/playbook/markdown/helper.rb +2 -2
  149. data/lib/playbook/pb_doc_helper.rb +4 -0
  150. data/lib/playbook/props/base.rb +2 -2
  151. data/lib/playbook/shadow.rb +29 -0
  152. data/lib/playbook/version.rb +2 -2
  153. data/lib/playbook.rb +3 -0
  154. metadata +62 -23
  155. data/app/pb_kits/playbook/pb_caption/docs/_caption_variants.html.erb +0 -1
  156. data/app/pb_kits/playbook/pb_caption/docs/_caption_variants.jsx +0 -17
  157. data/app/pb_kits/playbook/pb_caption/docs/_caption_variants.md +0 -3
  158. data/app/pb_kits/playbook/pb_title/docs/_title_variants.html.erb +0 -1
  159. data/app/pb_kits/playbook/pb_title/docs/_title_variants.jsx +0 -19
  160. data/app/pb_kits/playbook/pb_title/docs/_title_variants.md +0 -3
@@ -0,0 +1,11 @@
1
+ @import "../tokens/exports/shadows";
2
+
3
+ @mixin shadow-classes($shadows-list) {
4
+ @each $name, $shadow in $shadows-list {
5
+ .#{$name} {
6
+ box-shadow: $shadow;
7
+ }
8
+ }
9
+ }
10
+ @include shadow-classes($box_shadows);
11
+
@@ -57,10 +57,34 @@ const zIndexProps = ({ zIndex }) => {
57
57
  return css
58
58
  }
59
59
 
60
+ const shadowProps = ({ shadow }) => {
61
+ let css = ''
62
+ css += shadow ? `shadow_${shadow} ` : ''
63
+ return css
64
+ }
65
+
66
+ const lineHeightProps = ({ lineHeight }) => {
67
+ let css = ''
68
+ css += lineHeight ? `line_height_${lineHeight} ` : ''
69
+ return css
70
+ }
71
+
72
+ const displayProps = ({ display }) => {
73
+ let css = ''
74
+ css += display ? `display_${display} ` : ''
75
+ return css
76
+ }
77
+
78
+ const cursorProps = ({ cursor }) => {
79
+ let css = ''
80
+ css += cursor ? `cursor_${cursor} ` : ''
81
+ return css
82
+ }
83
+
60
84
  // All Exported as a single function
61
85
  export const globalProps = (props, defaultProps = {}) => {
62
86
  const allProps = { ...props, ...defaultProps }
63
- return spacingProps(allProps) + darkProps(allProps) + maxWidthProps(allProps) + zIndexProps(allProps) + numberSpacingProps(allProps)
87
+ return spacingProps(allProps) + darkProps(allProps) + maxWidthProps(allProps) + zIndexProps(allProps) + numberSpacingProps(allProps) + shadowProps(allProps) + lineHeightProps(allProps) + cursorProps(allProps) + displayProps(allProps)
64
88
  }
65
89
 
66
90
  export const deprecatedProps = (kit, props = []) => {
@@ -16,6 +16,10 @@ module Playbook
16
16
  max_width_props,
17
17
  z_index_props,
18
18
  number_spacing_props,
19
+ shadow_props,
20
+ line_height_props,
21
+ display_props,
22
+ cursor_props,
19
23
  ].compact.join(" ")
20
24
  end
21
25
 
@@ -0,0 +1,29 @@
1
+ # frozen_string_literal: true
2
+
3
+ module Playbook
4
+ module Cursor
5
+ def self.included(base)
6
+ base.prop :cursor
7
+ end
8
+
9
+ def cursor_props
10
+ selected_props = cursor_options.keys.select { |sk| try(sk) }
11
+ return nil unless selected_props.present?
12
+
13
+ selected_props.map do |k|
14
+ cursor_value = send(k)
15
+ "cursor_#{cursor_value}" if cursor_values.include? cursor_value
16
+ end.compact.join(" ")
17
+ end
18
+
19
+ def cursor_options
20
+ {
21
+ cursor: "cursor",
22
+ }
23
+ end
24
+
25
+ def cursor_values
26
+ %w[pointer]
27
+ end
28
+ end
29
+ end
@@ -0,0 +1,29 @@
1
+ # frozen_string_literal: true
2
+
3
+ module Playbook
4
+ module Display
5
+ def self.included(base)
6
+ base.prop :display
7
+ end
8
+
9
+ def display_props
10
+ selected_props = display_options.keys.select { |sk| try(sk) }
11
+ return nil unless selected_props.present?
12
+
13
+ selected_props.map do |k|
14
+ display_value = send(k)
15
+ "display_#{display_value}" if display_values.include? display_value
16
+ end.compact.join(" ")
17
+ end
18
+
19
+ def display_options
20
+ {
21
+ display: "display",
22
+ }
23
+ end
24
+
25
+ def display_values
26
+ %w[block inline_block inline flex inline_flex hidden]
27
+ end
28
+ end
29
+ end
@@ -1,7 +1,6 @@
1
1
  # frozen_string_literal: true
2
2
 
3
3
  require "action_view/railtie"
4
- require "view_component/engine"
5
4
  require "webpacker/react"
6
5
 
7
6
  module Playbook
@@ -4,6 +4,10 @@ require "playbook/classnames"
4
4
  require "playbook/spacing"
5
5
  require "playbook/z_index"
6
6
  require "playbook/number_spacing"
7
+ require "playbook/shadow"
8
+ require "playbook/line_height"
9
+ require "playbook/display"
10
+ require "playbook/cursor"
7
11
 
8
12
  module Playbook
9
13
  class KitBase < ViewComponent::Base
@@ -13,6 +17,10 @@ module Playbook
13
17
  include Playbook::Spacing
14
18
  include Playbook::ZIndex
15
19
  include Playbook::NumberSpacing
20
+ include Playbook::Shadow
21
+ include Playbook::LineHeight
22
+ include Playbook::Display
23
+ include Playbook::Cursor
16
24
 
17
25
  prop :id
18
26
  prop :data, type: Playbook::Props::Hash, default: {}
@@ -0,0 +1,29 @@
1
+ # frozen_string_literal: true
2
+
3
+ module Playbook
4
+ module LineHeight
5
+ def self.included(base)
6
+ base.prop :line_height
7
+ end
8
+
9
+ def line_height_props
10
+ selected_props = line_height_options.keys.select { |sk| try(sk) }
11
+ return nil unless selected_props.present?
12
+
13
+ selected_props.map do |k|
14
+ line_height_value = send(k)
15
+ "line_height_#{line_height_value}" if line_height_values.include? line_height_value
16
+ end.compact.join(" ")
17
+ end
18
+
19
+ def line_height_options
20
+ {
21
+ line_height: "line_height",
22
+ }
23
+ end
24
+
25
+ def line_height_values
26
+ %w[tightest tighter tight normal loose looser loosest]
27
+ end
28
+ end
29
+ end
@@ -80,7 +80,7 @@ module Playbook
80
80
  loop do
81
81
  break unless @headers.include?(permalink)
82
82
 
83
- permalink.gsub!(/\_(\d+)$/, "_#{Regexp.last_match(1).to_i + 1}")
83
+ permalink.gsub!(/_(\d+)$/, "_#{Regexp.last_match(1).to_i + 1}")
84
84
  end
85
85
  end
86
86
  @headers << permalink
@@ -121,7 +121,7 @@ module Playbook
121
121
  if @list_items[0].include?("[do]") || @list_items[0].include?("[dont]")
122
122
  @element_items = []
123
123
  @list_items.each do |item, _index|
124
- item.gsub(%r{\<li>(.*)\</li>}) do
124
+ item.gsub(%r{<li>(.*)</li>}) do
125
125
  @element_items.push(Regexp.last_match(1))
126
126
  end
127
127
  end
@@ -26,6 +26,7 @@ module Playbook
26
26
  end
27
27
 
28
28
  # Deal with lists of kits, used in Playbook doc and Externally
29
+ # rubocop:disable Style/StringConcatenation
29
30
  def pb_kits(type: "rails", limit_examples: false, dark_mode: false)
30
31
  display_kits = []
31
32
  kits = get_kits
@@ -40,6 +41,7 @@ module Playbook
40
41
  end
41
42
  raw("<div class='pb--docItem'>" + display_kits.join("</div><div class='pb--docItem'>") + "</div>")
42
43
  end
44
+ # rubocop:enable Style/StringConcatenation
43
45
 
44
46
  # rubocop:disable Naming/AccessorMethodName
45
47
  def get_kits
@@ -48,12 +50,14 @@ module Playbook
48
50
  end
49
51
  # rubocop:enable Naming/AccessorMethodName
50
52
 
53
+ # rubocop:disable Style/OptionalBooleanParameter
51
54
  def render_pb_doc_kit(kit, type, limit_examples, code = true, dark_mode = false)
52
55
  title = pb_doc_render_clickable_title(kit, type)
53
56
  ui = raw("<div class='pb--docItem-ui'>
54
57
  #{pb_kit(kit: kit, type: type, show_code: code, limit_examples: limit_examples, dark_mode: dark_mode)}</div>")
55
58
  title + ui
56
59
  end
60
+ # rubocop:enable Style/OptionalBooleanParameter
57
61
 
58
62
  private
59
63
 
@@ -7,7 +7,7 @@ module Playbook
7
7
  class Base
8
8
  attr_reader :default, :deprecated, :required, :name, :kit
9
9
 
10
- def initialize(default: nil, deprecated: false, required: false, name:, kit:)
10
+ def initialize(name:, kit:, default: nil, deprecated: false, required: false)
11
11
  @default = default
12
12
  @deprecated = deprecated
13
13
  @required = required
@@ -39,7 +39,7 @@ module Playbook
39
39
  end
40
40
 
41
41
  def log(message)
42
- logger = ActiveSupport::Logger.new(STDOUT)
42
+ logger = ActiveSupport::Logger.new($stdout)
43
43
  @logger ||= ActiveSupport::TaggedLogging.new(logger)
44
44
  @logger.log(0, message)
45
45
  end
@@ -0,0 +1,29 @@
1
+ # frozen_string_literal: true
2
+
3
+ module Playbook
4
+ module Shadow
5
+ def self.included(base)
6
+ base.prop :shadow
7
+ end
8
+
9
+ def shadow_props
10
+ selected_props = shadow_options.keys.select { |sk| try(sk) }
11
+ return nil unless selected_props.present?
12
+
13
+ selected_props.map do |k|
14
+ shadow_value = send(k)
15
+ "shadow_#{shadow_value}" if shadow_values.include? shadow_value
16
+ end.compact.join(" ")
17
+ end
18
+
19
+ def shadow_options
20
+ {
21
+ shadow: "shadow",
22
+ }
23
+ end
24
+
25
+ def shadow_values
26
+ %w[none deep deeper deepest]
27
+ end
28
+ end
29
+ end
@@ -1,6 +1,6 @@
1
1
  # frozen_string_literal: true
2
2
 
3
3
  module Playbook
4
- PREVIOUS_VERSION = "10.15.1"
5
- VERSION = "10.16.0"
4
+ PREVIOUS_VERSION = "10.18.1"
5
+ VERSION = "10.19.0.pre.popover.alpha1"
6
6
  end
data/lib/playbook.rb CHANGED
@@ -1,5 +1,7 @@
1
1
  # frozen_string_literal: true
2
2
 
3
+ require "view_component"
4
+
3
5
  require "playbook/version"
4
6
  require "playbook/engine"
5
7
  require "playbook/props"
@@ -15,6 +17,7 @@ module Playbook
15
17
  ROOT_PATH = Pathname.new(File.join(__dir__, ".."))
16
18
 
17
19
  class ConflictingPropsError < StandardError; end
20
+
18
21
  class MissingPropError < StandardError; end
19
22
 
20
23
  module_function
metadata CHANGED
@@ -1,7 +1,7 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: playbook_ui
3
3
  version: !ruby/object:Gem::Version
4
- version: 10.16.0
4
+ version: 10.19.0.pre.popover.alpha1
5
5
  platform: ruby
6
6
  authors:
7
7
  - Power UX
@@ -9,7 +9,7 @@ authors:
9
9
  autorequire:
10
10
  bindir: bin
11
11
  cert_chain: []
12
- date: 2021-11-30 00:00:00.000000000 Z
12
+ date: 2022-01-24 00:00:00.000000000 Z
13
13
  dependencies:
14
14
  - !ruby/object:Gem::Dependency
15
15
  name: actionpack
@@ -101,14 +101,14 @@ dependencies:
101
101
  requirements:
102
102
  - - "~>"
103
103
  - !ruby/object:Gem::Version
104
- version: '2.23'
104
+ version: '2.47'
105
105
  type: :runtime
106
106
  prerelease: false
107
107
  version_requirements: !ruby/object:Gem::Requirement
108
108
  requirements:
109
109
  - - "~>"
110
110
  - !ruby/object:Gem::Version
111
- version: '2.23'
111
+ version: '2.47'
112
112
  - !ruby/object:Gem::Dependency
113
113
  name: webpacker-react
114
114
  requirement: !ruby/object:Gem::Requirement
@@ -183,50 +183,50 @@ dependencies:
183
183
  name: rspec-rails
184
184
  requirement: !ruby/object:Gem::Requirement
185
185
  requirements:
186
- - - ">="
187
- - !ruby/object:Gem::Version
188
- version: 3.8.0
189
186
  - - "~>"
190
187
  - !ruby/object:Gem::Version
191
188
  version: '3.8'
189
+ - - ">="
190
+ - !ruby/object:Gem::Version
191
+ version: 3.8.0
192
192
  type: :development
193
193
  prerelease: false
194
194
  version_requirements: !ruby/object:Gem::Requirement
195
195
  requirements:
196
- - - ">="
197
- - !ruby/object:Gem::Version
198
- version: 3.8.0
199
196
  - - "~>"
200
197
  - !ruby/object:Gem::Version
201
198
  version: '3.8'
199
+ - - ">="
200
+ - !ruby/object:Gem::Version
201
+ version: 3.8.0
202
202
  - !ruby/object:Gem::Dependency
203
203
  name: rubocop
204
204
  requirement: !ruby/object:Gem::Requirement
205
205
  requirements:
206
206
  - - '='
207
207
  - !ruby/object:Gem::Version
208
- version: 0.93.1
208
+ version: 1.20.0
209
209
  type: :development
210
210
  prerelease: false
211
211
  version_requirements: !ruby/object:Gem::Requirement
212
212
  requirements:
213
213
  - - '='
214
214
  - !ruby/object:Gem::Version
215
- version: 0.93.1
215
+ version: 1.20.0
216
216
  - !ruby/object:Gem::Dependency
217
217
  name: rubocop-performance
218
218
  requirement: !ruby/object:Gem::Requirement
219
219
  requirements:
220
220
  - - "~>"
221
221
  - !ruby/object:Gem::Version
222
- version: 1.9.2
222
+ version: 1.11.5
223
223
  type: :development
224
224
  prerelease: false
225
225
  version_requirements: !ruby/object:Gem::Requirement
226
226
  requirements:
227
227
  - - "~>"
228
228
  - !ruby/object:Gem::Version
229
- version: 1.9.2
229
+ version: 1.11.5
230
230
  - !ruby/object:Gem::Dependency
231
231
  name: spring
232
232
  requirement: !ruby/object:Gem::Requirement
@@ -322,6 +322,7 @@ files:
322
322
  - app/pb_kits/playbook/pb_background/_background.scss
323
323
  - app/pb_kits/playbook/pb_background/background.html.erb
324
324
  - app/pb_kits/playbook/pb_background/background.rb
325
+ - app/pb_kits/playbook/pb_background/background.test.js
325
326
  - app/pb_kits/playbook/pb_background/docs/_background_category.html.erb
326
327
  - app/pb_kits/playbook/pb_background/docs/_background_category.jsx
327
328
  - app/pb_kits/playbook/pb_background/docs/_background_category.md
@@ -357,6 +358,9 @@ files:
357
358
  - app/pb_kits/playbook/pb_bar_graph/barGraphSettings.js
358
359
  - app/pb_kits/playbook/pb_bar_graph/bar_graph.html.erb
359
360
  - app/pb_kits/playbook/pb_bar_graph/bar_graph.rb
361
+ - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_colors.html.erb
362
+ - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_colors.jsx
363
+ - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_colors.md
360
364
  - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_default.html.erb
361
365
  - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_default.jsx
362
366
  - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_height.html.erb
@@ -376,10 +380,12 @@ files:
376
380
  - app/pb_kits/playbook/pb_body/_body_mixins.scss
377
381
  - app/pb_kits/playbook/pb_body/body.html.erb
378
382
  - app/pb_kits/playbook/pb_body/body.rb
383
+ - app/pb_kits/playbook/pb_body/body.test.js
379
384
  - app/pb_kits/playbook/pb_body/docs/_body_block.html.erb
380
385
  - app/pb_kits/playbook/pb_body/docs/_body_block.jsx
381
386
  - app/pb_kits/playbook/pb_body/docs/_body_light.html.erb
382
387
  - app/pb_kits/playbook/pb_body/docs/_body_light.jsx
388
+ - app/pb_kits/playbook/pb_body/docs/_body_light.md
383
389
  - app/pb_kits/playbook/pb_body/docs/_description.md
384
390
  - app/pb_kits/playbook/pb_body/docs/_footer.md
385
391
  - app/pb_kits/playbook/pb_body/docs/example.yml
@@ -420,6 +426,9 @@ files:
420
426
  - app/pb_kits/playbook/pb_button/docs/_button_loading.md
421
427
  - app/pb_kits/playbook/pb_button/docs/_button_options.html.erb
422
428
  - app/pb_kits/playbook/pb_button/docs/_button_options.jsx
429
+ - app/pb_kits/playbook/pb_button/docs/_button_size.html.erb
430
+ - app/pb_kits/playbook/pb_button/docs/_button_size.jsx
431
+ - app/pb_kits/playbook/pb_button/docs/_button_size.md
423
432
  - app/pb_kits/playbook/pb_button/docs/_footer.md
424
433
  - app/pb_kits/playbook/pb_button/docs/example.yml
425
434
  - app/pb_kits/playbook/pb_button/docs/index.js
@@ -442,13 +451,14 @@ files:
442
451
  - app/pb_kits/playbook/pb_caption/_caption_mixin.scss
443
452
  - app/pb_kits/playbook/pb_caption/caption.html.erb
444
453
  - app/pb_kits/playbook/pb_caption/caption.rb
454
+ - app/pb_kits/playbook/pb_caption/caption.test.js
445
455
  - app/pb_kits/playbook/pb_caption/docs/_caption_block.html.erb
446
456
  - app/pb_kits/playbook/pb_caption/docs/_caption_block.jsx
457
+ - app/pb_kits/playbook/pb_caption/docs/_caption_colors.html.erb
458
+ - app/pb_kits/playbook/pb_caption/docs/_caption_colors.jsx
459
+ - app/pb_kits/playbook/pb_caption/docs/_caption_colors.md
447
460
  - app/pb_kits/playbook/pb_caption/docs/_caption_light.html.erb
448
461
  - app/pb_kits/playbook/pb_caption/docs/_caption_light.jsx
449
- - app/pb_kits/playbook/pb_caption/docs/_caption_variants.html.erb
450
- - app/pb_kits/playbook/pb_caption/docs/_caption_variants.jsx
451
- - app/pb_kits/playbook/pb_caption/docs/_caption_variants.md
452
462
  - app/pb_kits/playbook/pb_caption/docs/_description.md
453
463
  - app/pb_kits/playbook/pb_caption/docs/_footer.md
454
464
  - app/pb_kits/playbook/pb_caption/docs/example.yml
@@ -521,6 +531,7 @@ files:
521
531
  - app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_block.jsx
522
532
  - app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_colors.html.erb
523
533
  - app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_colors.jsx
534
+ - app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_colors.md
524
535
  - app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_default.html.erb
525
536
  - app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_default.jsx
526
537
  - app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_inner_sizes.html.erb
@@ -861,6 +872,9 @@ files:
861
872
  - app/pb_kits/playbook/pb_flex/docs/_flex_inline.md
862
873
  - app/pb_kits/playbook/pb_flex/docs/_flex_item.html.erb
863
874
  - app/pb_kits/playbook/pb_flex/docs/_flex_item.md
875
+ - app/pb_kits/playbook/pb_flex/docs/_flex_item_align_self.html.erb
876
+ - app/pb_kits/playbook/pb_flex/docs/_flex_item_align_self.jsx
877
+ - app/pb_kits/playbook/pb_flex/docs/_flex_item_align_self.md
864
878
  - app/pb_kits/playbook/pb_flex/docs/_flex_item_example.jsx
865
879
  - app/pb_kits/playbook/pb_flex/docs/_flex_item_example.md
866
880
  - app/pb_kits/playbook/pb_flex/docs/_flex_justify.html.erb
@@ -930,6 +944,9 @@ files:
930
944
  - app/pb_kits/playbook/pb_form_pill/form_pill.rb
931
945
  - app/pb_kits/playbook/pb_gauge/_gauge.jsx
932
946
  - app/pb_kits/playbook/pb_gauge/_gauge.scss
947
+ - app/pb_kits/playbook/pb_gauge/docs/_gauge_colors.html.erb
948
+ - app/pb_kits/playbook/pb_gauge/docs/_gauge_colors.jsx
949
+ - app/pb_kits/playbook/pb_gauge/docs/_gauge_colors.md
933
950
  - app/pb_kits/playbook/pb_gauge/docs/_gauge_default.html.erb
934
951
  - app/pb_kits/playbook/pb_gauge/docs/_gauge_default.jsx
935
952
  - app/pb_kits/playbook/pb_gauge/docs/_gauge_disable_animation.html.erb
@@ -1024,6 +1041,7 @@ files:
1024
1041
  - app/pb_kits/playbook/pb_icon_circle/docs/_footer.md
1025
1042
  - app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_color.html.erb
1026
1043
  - app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_color.jsx
1044
+ - app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_color.md
1027
1045
  - app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_default.html.erb
1028
1046
  - app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_default.jsx
1029
1047
  - app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_sizes.html.erb
@@ -1066,6 +1084,9 @@ files:
1066
1084
  - app/pb_kits/playbook/pb_image/docs/_description.md
1067
1085
  - app/pb_kits/playbook/pb_image/docs/_rounded_image.html.erb
1068
1086
  - app/pb_kits/playbook/pb_image/docs/_rounded_image.jsx
1087
+ - app/pb_kits/playbook/pb_image/docs/_transition_image.html.erb
1088
+ - app/pb_kits/playbook/pb_image/docs/_transition_image.jsx
1089
+ - app/pb_kits/playbook/pb_image/docs/_transition_image.md
1069
1090
  - app/pb_kits/playbook/pb_image/docs/example.yml
1070
1091
  - app/pb_kits/playbook/pb_image/docs/index.js
1071
1092
  - app/pb_kits/playbook/pb_image/image.html.erb
@@ -1153,6 +1174,9 @@ files:
1153
1174
  - app/pb_kits/playbook/pb_line_graph/_line_graph.jsx
1154
1175
  - app/pb_kits/playbook/pb_line_graph/_line_graph.scss
1155
1176
  - app/pb_kits/playbook/pb_line_graph/docs/_description.md
1177
+ - app/pb_kits/playbook/pb_line_graph/docs/_line_graph_colors.html.erb
1178
+ - app/pb_kits/playbook/pb_line_graph/docs/_line_graph_colors.jsx
1179
+ - app/pb_kits/playbook/pb_line_graph/docs/_line_graph_colors.md
1156
1180
  - app/pb_kits/playbook/pb_line_graph/docs/_line_graph_default.html.erb
1157
1181
  - app/pb_kits/playbook/pb_line_graph/docs/_line_graph_default.jsx
1158
1182
  - app/pb_kits/playbook/pb_line_graph/docs/_line_graph_height.html.erb
@@ -1238,6 +1262,7 @@ files:
1238
1262
  - app/pb_kits/playbook/pb_multiple_users_stacked/docs/index.js
1239
1263
  - app/pb_kits/playbook/pb_multiple_users_stacked/multiple_users_stacked.html.erb
1240
1264
  - app/pb_kits/playbook/pb_multiple_users_stacked/multiple_users_stacked.rb
1265
+ - app/pb_kits/playbook/pb_nav/_bold_mixin.scss
1241
1266
  - app/pb_kits/playbook/pb_nav/_horizontal_nav.scss
1242
1267
  - app/pb_kits/playbook/pb_nav/_item.jsx
1243
1268
  - app/pb_kits/playbook/pb_nav/_nav.jsx
@@ -1248,6 +1273,10 @@ files:
1248
1273
  - app/pb_kits/playbook/pb_nav/docs/_block_nav.jsx
1249
1274
  - app/pb_kits/playbook/pb_nav/docs/_block_no_title_nav.html.erb
1250
1275
  - app/pb_kits/playbook/pb_nav/docs/_block_no_title_nav.jsx
1276
+ - app/pb_kits/playbook/pb_nav/docs/_bold_horizontal_nav.html.erb
1277
+ - app/pb_kits/playbook/pb_nav/docs/_bold_horizontal_nav.jsx
1278
+ - app/pb_kits/playbook/pb_nav/docs/_bold_vertical_nav.html.erb
1279
+ - app/pb_kits/playbook/pb_nav/docs/_bold_vertical_nav.jsx
1251
1280
  - app/pb_kits/playbook/pb_nav/docs/_borderless_nav.html.erb
1252
1281
  - app/pb_kits/playbook/pb_nav/docs/_borderless_nav.jsx
1253
1282
  - app/pb_kits/playbook/pb_nav/docs/_default_nav.html.erb
@@ -1838,15 +1867,17 @@ files:
1838
1867
  - app/pb_kits/playbook/pb_title/_title.scss
1839
1868
  - app/pb_kits/playbook/pb_title/_title_mixin.scss
1840
1869
  - app/pb_kits/playbook/pb_title/docs/_description.md
1870
+ - app/pb_kits/playbook/pb_title/docs/_title_colors.html.erb
1871
+ - app/pb_kits/playbook/pb_title/docs/_title_colors.jsx
1872
+ - app/pb_kits/playbook/pb_title/docs/_title_colors.md
1841
1873
  - app/pb_kits/playbook/pb_title/docs/_title_light.html.erb
1842
1874
  - app/pb_kits/playbook/pb_title/docs/_title_light.jsx
1843
- - app/pb_kits/playbook/pb_title/docs/_title_variants.html.erb
1844
- - app/pb_kits/playbook/pb_title/docs/_title_variants.jsx
1845
- - app/pb_kits/playbook/pb_title/docs/_title_variants.md
1875
+ - app/pb_kits/playbook/pb_title/docs/_title_light.md
1846
1876
  - app/pb_kits/playbook/pb_title/docs/example.yml
1847
1877
  - app/pb_kits/playbook/pb_title/docs/index.js
1848
1878
  - app/pb_kits/playbook/pb_title/title.html.erb
1849
1879
  - app/pb_kits/playbook/pb_title/title.rb
1880
+ - app/pb_kits/playbook/pb_title/title.test.js
1850
1881
  - app/pb_kits/playbook/pb_title_count/_title_count.jsx
1851
1882
  - app/pb_kits/playbook/pb_title_count/_title_count.scss
1852
1883
  - app/pb_kits/playbook/pb_title_count/docs/_description.md
@@ -2020,9 +2051,13 @@ files:
2020
2051
  - app/pb_kits/playbook/types.js
2021
2052
  - app/pb_kits/playbook/utilities/_background_colors.scss
2022
2053
  - app/pb_kits/playbook/utilities/_colors.scss
2054
+ - app/pb_kits/playbook/utilities/_cursor.scss
2055
+ - app/pb_kits/playbook/utilities/_display.scss
2056
+ - app/pb_kits/playbook/utilities/_line_height.scss
2023
2057
  - app/pb_kits/playbook/utilities/_max_width.scss
2024
2058
  - app/pb_kits/playbook/utilities/_number_spacing.scss
2025
2059
  - app/pb_kits/playbook/utilities/_positioning.scss
2060
+ - app/pb_kits/playbook/utilities/_shadow.scss
2026
2061
  - app/pb_kits/playbook/utilities/_spacing.scss
2027
2062
  - app/pb_kits/playbook/utilities/globalProps.js
2028
2063
  - app/pb_kits/playbook/utilities/props.js
@@ -2033,6 +2068,8 @@ files:
2033
2068
  - fonts/regular-min.js
2034
2069
  - lib/playbook.rb
2035
2070
  - lib/playbook/classnames.rb
2071
+ - lib/playbook/cursor.rb
2072
+ - lib/playbook/display.rb
2036
2073
  - lib/playbook/engine.rb
2037
2074
  - lib/playbook/forms.rb
2038
2075
  - lib/playbook/forms/builder.rb
@@ -2045,6 +2082,7 @@ files:
2045
2082
  - lib/playbook/forms/builder/typeahead_field.rb
2046
2083
  - lib/playbook/kit_base.rb
2047
2084
  - lib/playbook/kit_resolver.rb
2085
+ - lib/playbook/line_height.rb
2048
2086
  - lib/playbook/markdown.rb
2049
2087
  - lib/playbook/markdown/helper.rb
2050
2088
  - lib/playbook/markdown/template_handler.rb
@@ -2067,6 +2105,7 @@ files:
2067
2105
  - lib/playbook/props/percentage.rb
2068
2106
  - lib/playbook/props/proc.rb
2069
2107
  - lib/playbook/props/string.rb
2108
+ - lib/playbook/shadow.rb
2070
2109
  - lib/playbook/spacing.rb
2071
2110
  - lib/playbook/version.rb
2072
2111
  - lib/playbook/z_index.rb
@@ -2086,11 +2125,11 @@ required_ruby_version: !ruby/object:Gem::Requirement
2086
2125
  version: '0'
2087
2126
  required_rubygems_version: !ruby/object:Gem::Requirement
2088
2127
  requirements:
2089
- - - ">="
2128
+ - - ">"
2090
2129
  - !ruby/object:Gem::Version
2091
- version: '0'
2130
+ version: 1.3.1
2092
2131
  requirements: []
2093
- rubygems_version: 3.0.3
2132
+ rubygems_version: 3.1.6
2094
2133
  signing_key:
2095
2134
  specification_version: 4
2096
2135
  summary: Playbook Design System
@@ -1 +0,0 @@
1
- <%= pb_rails("caption", props: { text: "Subcaption (link)", size: 'xs', variant: "link" }) %>
@@ -1,17 +0,0 @@
1
- import React from 'react'
2
- import { Caption } from '../../'
3
-
4
- const CaptionVariants = (props) => {
5
- return (
6
- <div>
7
- <Caption
8
- size="xs"
9
- text="Subcaption (link)"
10
- variant="link"
11
- {...props}
12
- />
13
- </div>
14
- )
15
- }
16
-
17
- export default CaptionVariants
@@ -1,3 +0,0 @@
1
- Wrap anchor tags around the kit to make it clickable.
2
-
3
- Link variant can only be applied to size `xs`.
@@ -1 +0,0 @@
1
- <%= pb_rails("title", props: { text: "Title 4 (link)", tag: "h4", size: 4, variant: "link" }) %>
@@ -1,19 +0,0 @@
1
- import React from 'react'
2
-
3
- import Title from '../_title'
4
-
5
- const TitleVariants = (props) => {
6
- return (
7
- <div>
8
- <Title
9
- size={4}
10
- tag="h4"
11
- text="Title 4 (link)"
12
- variant="link"
13
- {...props}
14
- />
15
- </div>
16
- )
17
- }
18
-
19
- export default TitleVariants
@@ -1,3 +0,0 @@
1
- Wrap anchor tags around the kit to make it clickable.
2
-
3
- Link variant can only be applied to size `4`.