playbook_ui 7.13.0 → 7.14.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (64) hide show
  1. checksums.yaml +4 -4
  2. data/app/helpers/playbook/application_helper.rb +4 -0
  3. data/app/pb_kits/playbook/_playbook.scss +1 -0
  4. data/app/pb_kits/playbook/pb_card/_card.jsx +3 -1
  5. data/app/pb_kits/playbook/pb_card/_card.scss +3 -2
  6. data/app/pb_kits/playbook/pb_card/_card_mixin.scss +6 -0
  7. data/app/pb_kits/playbook/pb_card/card.rb +9 -1
  8. data/app/pb_kits/playbook/pb_card/docs/_card_border_radius.html.erb +53 -0
  9. data/app/pb_kits/playbook/pb_card/docs/_card_border_radius.jsx +71 -0
  10. data/app/pb_kits/playbook/pb_card/docs/_card_border_radius.md +1 -0
  11. data/app/pb_kits/playbook/pb_card/docs/_card_light.md +1 -0
  12. data/app/pb_kits/playbook/pb_card/docs/example.yml +2 -0
  13. data/app/pb_kits/playbook/pb_card/docs/index.js +1 -0
  14. data/app/pb_kits/playbook/pb_filter/Filter/FiltersPopover.jsx +5 -1
  15. data/app/pb_kits/playbook/pb_filter/docs/_filter_close_popover.jsx +61 -0
  16. data/app/pb_kits/playbook/pb_filter/docs/_filter_default.md +1 -0
  17. data/app/pb_kits/playbook/pb_filter/docs/example.yml +1 -0
  18. data/app/pb_kits/playbook/pb_filter/docs/index.js +1 -0
  19. data/app/pb_kits/playbook/pb_form_pill/_form_pill.scss +2 -0
  20. data/app/pb_kits/playbook/pb_image/_image.scss +1 -0
  21. data/app/pb_kits/playbook/pb_layout/docs/_layout_collection.html.erb +4 -4
  22. data/app/pb_kits/playbook/pb_layout/docs/_layout_collection.md +1 -0
  23. data/app/pb_kits/playbook/pb_radio/_radio.scss +1 -0
  24. data/app/pb_kits/playbook/pb_selectable_card/_selectable_card.html.erb +54 -11
  25. data/app/pb_kits/playbook/pb_selectable_card/_selectable_card.jsx +53 -6
  26. data/app/pb_kits/playbook/pb_selectable_card/_selectable_card.scss +48 -9
  27. data/app/pb_kits/playbook/pb_selectable_card/docs/_selectable_card_block.jsx +41 -44
  28. data/app/pb_kits/playbook/pb_selectable_card/docs/_selectable_card_default.html.erb +2 -2
  29. data/app/pb_kits/playbook/pb_selectable_card/docs/_selectable_card_default.jsx +53 -62
  30. data/app/pb_kits/playbook/pb_selectable_card/docs/_selectable_card_image.jsx +43 -53
  31. data/app/pb_kits/playbook/pb_selectable_card/docs/_selectable_card_input.html.erb +105 -0
  32. data/app/pb_kits/playbook/pb_selectable_card/docs/_selectable_card_input.jsx +158 -0
  33. data/app/pb_kits/playbook/pb_selectable_card/docs/_selectable_card_input.md +1 -0
  34. data/app/pb_kits/playbook/pb_selectable_card/docs/_selectable_card_single_select.html.erb +2 -2
  35. data/app/pb_kits/playbook/pb_selectable_card/docs/_selectable_card_single_select.jsx +46 -53
  36. data/app/pb_kits/playbook/pb_selectable_card/docs/example.yml +2 -0
  37. data/app/pb_kits/playbook/pb_selectable_card/docs/index.js +1 -0
  38. data/app/pb_kits/playbook/pb_selectable_card/selectable_card.rb +27 -2
  39. data/app/pb_kits/playbook/pb_selectable_card_icon/_selectable_card_icon.scss +8 -8
  40. data/app/pb_kits/playbook/pb_table/docs/_table_sm.md +2 -0
  41. data/app/pb_kits/playbook/pb_typeahead/_typeahead.html.erb +1 -1
  42. data/app/pb_kits/playbook/pb_typeahead/_typeahead.jsx +6 -1
  43. data/app/pb_kits/playbook/pb_typeahead/_typeahead.scss +38 -2
  44. data/app/pb_kits/playbook/pb_typeahead/components/Control.jsx +1 -0
  45. data/app/pb_kits/playbook/pb_typeahead/components/Option.jsx +8 -3
  46. data/app/pb_kits/playbook/pb_typeahead/docs/{_typeahead_with_context_dark.html.erb → _typeahead_with_context.html.erb} +10 -2
  47. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills.html.erb +1 -1
  48. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async.jsx +13 -1
  49. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async_custom_options.jsx +111 -0
  50. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async_custom_options.md +1 -0
  51. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async_users.html.erb +1 -1
  52. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async_users.jsx +1 -0
  53. data/app/pb_kits/playbook/pb_typeahead/docs/example.yml +3 -2
  54. data/app/pb_kits/playbook/pb_typeahead/docs/index.js +1 -0
  55. data/app/pb_kits/playbook/pb_typeahead/typeahead.rb +2 -1
  56. data/app/pb_kits/playbook/tokens/_border_radius.scss +21 -7
  57. data/app/pb_kits/playbook/utilities/_max_width.scss +15 -0
  58. data/app/pb_kits/playbook/utilities/_spacing.scss +20 -20
  59. data/app/pb_kits/playbook/utilities/globalProps.js +7 -1
  60. data/lib/playbook.rb +11 -0
  61. data/lib/playbook/engine.rb +15 -0
  62. data/lib/playbook/props.rb +23 -1
  63. data/lib/playbook/version.rb +1 -1
  64. metadata +22 -10
@@ -0,0 +1,15 @@
1
+ .max_width_sm {
2
+ max-width: 540px;
3
+ }
4
+
5
+ .max_width_md {
6
+ max-width: 720px;
7
+ }
8
+
9
+ .max_width_lg {
10
+ max-width: 960px;
11
+ }
12
+
13
+ .max_width_xl {
14
+ max-width: 1140px;
15
+ }
@@ -1,28 +1,28 @@
1
1
  @import "../tokens/spacing";
2
2
 
3
- $space_classes: (
4
- xs: $space_xs,
5
- sm: $space_sm,
6
- md: $space_md,
7
- lg: $space_lg,
8
- xl: $space_xl,
3
+ $space_classes: (
4
+ xs: $space_xs,
5
+ sm: $space_sm,
6
+ md: $space_md,
7
+ lg: $space_lg,
8
+ xl: $space_xl,
9
9
  none: 0
10
10
  );
11
11
 
12
- $positions: (
13
- m: "margin",
14
- mr: "margin-right",
15
- ml: "margin-left",
16
- mt: "margin-top",
17
- mb: "margin-bottom",
18
- mx: ("margin-left", "margin-right"),
12
+ $positions: (
13
+ m: "margin",
14
+ mr: "margin-right",
15
+ ml: "margin-left",
16
+ mt: "margin-top",
17
+ mb: "margin-bottom",
18
+ mx: ("margin-left", "margin-right"),
19
19
  my: ("margin-top", "margin-bottom"),
20
- p: "padding",
21
- pr: "padding-right",
22
- pl: "padding-left",
23
- pt: "padding-top",
24
- pb: "padding-bottom",
25
- px: ("padding-left", "padding-right"),
20
+ p: "padding",
21
+ pr: "padding-right",
22
+ pl: "padding-left",
23
+ pt: "padding-top",
24
+ pb: "padding-bottom",
25
+ px: ("padding-left", "padding-right"),
26
26
  py: ("padding-top", "padding-bottom")
27
27
  );
28
28
 
@@ -39,4 +39,4 @@ $positions: (
39
39
  }
40
40
  }
41
41
  }
42
- }
42
+ }
@@ -39,10 +39,16 @@ const darkProps = ({ dark }) => {
39
39
  return css
40
40
  }
41
41
 
42
+ const maxWidthProps = ({ maxWidth }) => {
43
+ let css = ''
44
+ css += maxWidth ? `max_width_${maxWidth } ` : ''
45
+ return css
46
+ }
47
+
42
48
  // All Exported as a single function
43
49
  export const globalProps = (props, defaultProps = {}) => {
44
50
  const allProps = { ...props, ...defaultProps }
45
- return spacingProps(allProps) + darkProps(allProps)
51
+ return spacingProps(allProps) + darkProps(allProps) + maxWidthProps(allProps)
46
52
  }
47
53
 
48
54
  export const deprecatedProps = (kit, props = []) => {
@@ -11,6 +11,17 @@ require "playbook/engine" if defined?(Rails)
11
11
  require "playbook/markdown/template_handler"
12
12
 
13
13
  module Playbook
14
+ ROOT_PATH = Pathname.new(File.join(__dir__, ".."))
15
+
14
16
  class ConflictingPropsError < StandardError; end
15
17
  class MissingPropError < StandardError; end
18
+
19
+ class << self
20
+ def webpacker
21
+ @webpacker ||= ::Webpacker::Instance.new(
22
+ root_path: ROOT_PATH,
23
+ config_path: ROOT_PATH.join("config/webpacker.yml")
24
+ )
25
+ end
26
+ end
16
27
  end
@@ -23,5 +23,20 @@ module Playbook
23
23
  append_view_path "#{Gem.loaded_specs['playbook_ui'].full_gem_path}/app/pb_kits/playbook/config"
24
24
  end
25
25
  end
26
+
27
+ initializer "webpacker.proxy" do |app|
28
+ insert_middleware = begin
29
+ Playbook.webpacker.config.dev_server.present?
30
+ rescue
31
+ nil
32
+ end
33
+ next unless insert_middleware
34
+
35
+ app.middleware.insert_before(
36
+ 0, Webpacker::DevServerProxy,
37
+ ssl_verify_none: true,
38
+ webpacker: Playbook.webpacker
39
+ )
40
+ end
26
41
  end
27
42
  end
@@ -47,12 +47,23 @@ module Playbook
47
47
  dark ? "dark" : nil
48
48
  end
49
49
 
50
+ def max_width_props
51
+ selected_mw_props = max_width_options.keys.select { |sk| try(sk) }
52
+ return nil unless selected_mw_props.present?
53
+
54
+ selected_mw_props.map do |k|
55
+ width_value = send(k)
56
+ "max_width_#{width_value}" if max_width_values.include? width_value
57
+ end.compact.join(" ")
58
+ end
59
+
50
60
  def generate_classname(*name_parts, separator: "_")
51
61
  [
52
62
  name_parts.compact.join(separator),
53
63
  prop(:classname),
54
64
  spacing_props,
55
- dark_props
65
+ dark_props,
66
+ max_width_props,
56
67
  ].compact.join(" ")
57
68
  end
58
69
 
@@ -79,6 +90,7 @@ module Playbook
79
90
  prop :margin_top
80
91
  prop :margin_x
81
92
  prop :margin_y
93
+ prop :max_width
82
94
  prop :padding
83
95
  prop :padding_bottom
84
96
  prop :padding_left
@@ -108,6 +120,16 @@ module Playbook
108
120
  }
109
121
  end
110
122
 
123
+ def max_width_options
124
+ {
125
+ max_width: "mw",
126
+ }
127
+ end
128
+
129
+ def max_width_values
130
+ %w[sm md lg xl]
131
+ end
132
+
111
133
  def spacing_values
112
134
  %w[none xs sm md lg xl]
113
135
  end
@@ -1,5 +1,5 @@
1
1
  # frozen_string_literal: true
2
2
 
3
3
  module Playbook
4
- VERSION = "7.13.0"
4
+ VERSION = "7.14.0"
5
5
  end
metadata CHANGED
@@ -1,15 +1,15 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: playbook_ui
3
3
  version: !ruby/object:Gem::Version
4
- version: 7.13.0
4
+ version: 7.14.0
5
5
  platform: ruby
6
6
  authors:
7
7
  - Power UX
8
8
  - Power Devs
9
- autorequire:
9
+ autorequire:
10
10
  bindir: bin
11
11
  cert_chain: []
12
- date: 2021-01-12 00:00:00.000000000 Z
12
+ date: 2021-01-20 00:00:00.000000000 Z
13
13
  dependencies:
14
14
  - !ruby/object:Gem::Dependency
15
15
  name: actionpack
@@ -105,14 +105,14 @@ dependencies:
105
105
  requirements:
106
106
  - - '='
107
107
  - !ruby/object:Gem::Version
108
- version: 3.4.0
108
+ version: 3.5.1
109
109
  type: :runtime
110
110
  prerelease: false
111
111
  version_requirements: !ruby/object:Gem::Requirement
112
112
  requirements:
113
113
  - - '='
114
114
  - !ruby/object:Gem::Version
115
- version: 3.4.0
115
+ version: 3.5.1
116
116
  - !ruby/object:Gem::Dependency
117
117
  name: rouge
118
118
  requirement: !ruby/object:Gem::Requirement
@@ -576,6 +576,9 @@ files:
576
576
  - app/pb_kits/playbook/pb_card/docs/_card_border_none.html.erb
577
577
  - app/pb_kits/playbook/pb_card/docs/_card_border_none.jsx
578
578
  - app/pb_kits/playbook/pb_card/docs/_card_border_none.md
579
+ - app/pb_kits/playbook/pb_card/docs/_card_border_radius.html.erb
580
+ - app/pb_kits/playbook/pb_card/docs/_card_border_radius.jsx
581
+ - app/pb_kits/playbook/pb_card/docs/_card_border_radius.md
579
582
  - app/pb_kits/playbook/pb_card/docs/_card_content.html.erb
580
583
  - app/pb_kits/playbook/pb_card/docs/_card_content.jsx
581
584
  - app/pb_kits/playbook/pb_card/docs/_card_header.html.erb
@@ -586,6 +589,7 @@ files:
586
589
  - app/pb_kits/playbook/pb_card/docs/_card_highlight.md
587
590
  - app/pb_kits/playbook/pb_card/docs/_card_light.html.erb
588
591
  - app/pb_kits/playbook/pb_card/docs/_card_light.jsx
592
+ - app/pb_kits/playbook/pb_card/docs/_card_light.md
589
593
  - app/pb_kits/playbook/pb_card/docs/_card_padding.html.erb
590
594
  - app/pb_kits/playbook/pb_card/docs/_card_padding.jsx
591
595
  - app/pb_kits/playbook/pb_card/docs/_card_selected.html.erb
@@ -858,8 +862,10 @@ files:
858
862
  - app/pb_kits/playbook/pb_filter/_filter.jsx
859
863
  - app/pb_kits/playbook/pb_filter/_filter.scss
860
864
  - app/pb_kits/playbook/pb_filter/docs/_description.md
865
+ - app/pb_kits/playbook/pb_filter/docs/_filter_close_popover.jsx
861
866
  - app/pb_kits/playbook/pb_filter/docs/_filter_default.html.erb
862
867
  - app/pb_kits/playbook/pb_filter/docs/_filter_default.jsx
868
+ - app/pb_kits/playbook/pb_filter/docs/_filter_default.md
863
869
  - app/pb_kits/playbook/pb_filter/docs/_filter_min_width.html.erb
864
870
  - app/pb_kits/playbook/pb_filter/docs/_filter_min_width.jsx
865
871
  - app/pb_kits/playbook/pb_filter/docs/_filter_no_background.html.erb
@@ -1173,6 +1179,7 @@ files:
1173
1179
  - app/pb_kits/playbook/pb_layout/docs/_description.md
1174
1180
  - app/pb_kits/playbook/pb_layout/docs/_layout_collection.html.erb
1175
1181
  - app/pb_kits/playbook/pb_layout/docs/_layout_collection.jsx
1182
+ - app/pb_kits/playbook/pb_layout/docs/_layout_collection.md
1176
1183
  - app/pb_kits/playbook/pb_layout/docs/_layout_collection_detail.html.erb
1177
1184
  - app/pb_kits/playbook/pb_layout/docs/_layout_collection_detail.jsx
1178
1185
  - app/pb_kits/playbook/pb_layout/docs/_layout_collection_detail.md
@@ -1551,6 +1558,9 @@ files:
1551
1558
  - app/pb_kits/playbook/pb_selectable_card/docs/_selectable_card_image.html.erb
1552
1559
  - app/pb_kits/playbook/pb_selectable_card/docs/_selectable_card_image.jsx
1553
1560
  - app/pb_kits/playbook/pb_selectable_card/docs/_selectable_card_image.md
1561
+ - app/pb_kits/playbook/pb_selectable_card/docs/_selectable_card_input.html.erb
1562
+ - app/pb_kits/playbook/pb_selectable_card/docs/_selectable_card_input.jsx
1563
+ - app/pb_kits/playbook/pb_selectable_card/docs/_selectable_card_input.md
1554
1564
  - app/pb_kits/playbook/pb_selectable_card/docs/_selectable_card_options.html.erb
1555
1565
  - app/pb_kits/playbook/pb_selectable_card/docs/_selectable_card_single_select.html.erb
1556
1566
  - app/pb_kits/playbook/pb_selectable_card/docs/_selectable_card_single_select.jsx
@@ -1916,13 +1926,15 @@ files:
1916
1926
  - app/pb_kits/playbook/pb_typeahead/docs/_footer.md
1917
1927
  - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_default.html.erb
1918
1928
  - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_default.jsx
1919
- - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_context_dark.html.erb
1929
+ - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_context.html.erb
1920
1930
  - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills.html.erb
1921
1931
  - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills.jsx
1922
1932
  - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills.md
1923
1933
  - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async.html.erb
1924
1934
  - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async.jsx
1925
1935
  - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async.md
1936
+ - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async_custom_options.jsx
1937
+ - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async_custom_options.md
1926
1938
  - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async_users.html.erb
1927
1939
  - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async_users.jsx
1928
1940
  - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async_users.md
@@ -1995,6 +2007,7 @@ files:
1995
2007
  - app/pb_kits/playbook/types.js
1996
2008
  - app/pb_kits/playbook/utilities/_background_colors.scss
1997
2009
  - app/pb_kits/playbook/utilities/_colors.scss
2010
+ - app/pb_kits/playbook/utilities/_max_width.scss
1998
2011
  - app/pb_kits/playbook/utilities/_spacing.scss
1999
2012
  - app/pb_kits/playbook/utilities/globalProps.js
2000
2013
  - app/pb_kits/playbook/utilities/props.js
@@ -2026,7 +2039,7 @@ homepage: http://playbook.powerapp.cloud
2026
2039
  licenses:
2027
2040
  - MIT
2028
2041
  metadata: {}
2029
- post_install_message:
2042
+ post_install_message:
2030
2043
  rdoc_options: []
2031
2044
  require_paths:
2032
2045
  - lib
@@ -2041,9 +2054,8 @@ required_rubygems_version: !ruby/object:Gem::Requirement
2041
2054
  - !ruby/object:Gem::Version
2042
2055
  version: '0'
2043
2056
  requirements: []
2044
- rubyforge_project:
2045
- rubygems_version: 2.7.3
2046
- signing_key:
2057
+ rubygems_version: 3.1.4
2058
+ signing_key:
2047
2059
  specification_version: 4
2048
2060
  summary: Playbook Design System
2049
2061
  test_files: []