playbook_ui 14.10.0.pre.alpha.PBNTR775formmatingmaskdefaultvalue5137 → 14.10.0.pre.alpha.PLAY1750pbcontenttagkitbutton5308

Sign up to get free protection for your applications and to get access to all the features.
Files changed (116) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/_playbook.scss +1 -0
  3. data/app/pb_kits/playbook/pb_advanced_table/Components/TableHeaderCell.tsx +32 -19
  4. data/app/pb_kits/playbook/pb_advanced_table/SubKits/TableBody.tsx +3 -1
  5. data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss +35 -3
  6. data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx +32 -18
  7. data/app/pb_kits/playbook/pb_advanced_table/advanced_table.html.erb +1 -1
  8. data/app/pb_kits/playbook/pb_advanced_table/advanced_table.rb +8 -1
  9. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_beta_sort.html.erb +1 -3
  10. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_beta_subrow_headers.html.erb +1 -1
  11. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_beta_subrow_headers.md +1 -1
  12. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_headers.html.erb +43 -0
  13. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_headers.jsx +60 -0
  14. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_headers.md +1 -0
  15. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_headers_multiple.html.erb +58 -0
  16. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_headers_multiple.jsx +74 -0
  17. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_headers_multiple.md +1 -0
  18. data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +5 -0
  19. data/app/pb_kits/playbook/pb_advanced_table/docs/index.js +2 -0
  20. data/app/pb_kits/playbook/pb_advanced_table/index.js +185 -92
  21. data/app/pb_kits/playbook/pb_advanced_table/table_body.html.erb +1 -1
  22. data/app/pb_kits/playbook/pb_advanced_table/table_body.rb +55 -8
  23. data/app/pb_kits/playbook/pb_advanced_table/table_header.html.erb +17 -14
  24. data/app/pb_kits/playbook/pb_advanced_table/table_header.rb +78 -0
  25. data/app/pb_kits/playbook/pb_advanced_table/table_row.html.erb +4 -3
  26. data/app/pb_kits/playbook/pb_advanced_table/table_row.rb +13 -2
  27. data/app/pb_kits/playbook/pb_advanced_table/table_subrow_header.html.erb +2 -6
  28. data/app/pb_kits/playbook/pb_advanced_table/table_subrow_header.rb +6 -4
  29. data/app/pb_kits/playbook/pb_button/button.html.erb +2 -3
  30. data/app/pb_kits/playbook/pb_card/_card.scss +21 -3
  31. data/app/pb_kits/playbook/pb_card/docs/_card_header.html.erb +18 -0
  32. data/app/pb_kits/playbook/pb_card/docs/_card_header.jsx +40 -0
  33. data/app/pb_kits/playbook/pb_checkbox/checkbox.html.erb +1 -6
  34. data/app/pb_kits/playbook/pb_circle_icon_button/_circle_icon_button.tsx +3 -0
  35. data/app/pb_kits/playbook/pb_circle_icon_button/circle_icon_button.html.erb +1 -1
  36. data/app/pb_kits/playbook/pb_circle_icon_button/circle_icon_button.rb +1 -0
  37. data/app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_link.html.erb +8 -0
  38. data/app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_link.jsx +9 -0
  39. data/app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_link.md +1 -0
  40. data/app/pb_kits/playbook/pb_date_picker/date_picker.html.erb +1 -6
  41. data/app/pb_kits/playbook/pb_dropdown/dropdown.html.erb +7 -12
  42. data/app/pb_kits/playbook/pb_dropdown/dropdown_container.html.erb +9 -14
  43. data/app/pb_kits/playbook/pb_dropdown/dropdown_option.html.erb +6 -11
  44. data/app/pb_kits/playbook/pb_dropdown/dropdown_trigger.html.erb +8 -14
  45. data/app/pb_kits/playbook/pb_file_upload/_file_upload.tsx +24 -15
  46. data/app/pb_kits/playbook/pb_file_upload/docs/_file_upload_accept.jsx +3 -1
  47. data/app/pb_kits/playbook/pb_file_upload/docs/_file_upload_custom_description.jsx +4 -1
  48. data/app/pb_kits/playbook/pb_file_upload/docs/_file_upload_max_size.jsx +1 -1
  49. data/app/pb_kits/playbook/pb_icon_circle/_icon_circle.scss +1 -13
  50. data/app/pb_kits/playbook/pb_section_separator/_section_separator.scss +64 -1
  51. data/app/pb_kits/playbook/pb_section_separator/_section_separator.tsx +3 -1
  52. data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_color.html.erb +10 -0
  53. data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_color.jsx +42 -0
  54. data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_color.md +3 -0
  55. data/app/pb_kits/playbook/pb_section_separator/docs/example.yml +2 -0
  56. data/app/pb_kits/playbook/pb_section_separator/docs/index.js +1 -0
  57. data/app/pb_kits/playbook/pb_section_separator/section_separator.rb +4 -1
  58. data/app/pb_kits/playbook/pb_skeleton_loading/_skeleton_loading.scss +2 -2
  59. data/app/pb_kits/playbook/pb_skeleton_loading/docs/_description.md +3 -0
  60. data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_border_radius.html.erb +9 -0
  61. data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_border_radius_rails.md +1 -0
  62. data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_color.html.erb +7 -0
  63. data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_default.html.erb +1 -1
  64. data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_filter.html.erb +119 -0
  65. data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_filter.jsx +10 -2
  66. data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_height_width.html.erb +15 -0
  67. data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_height_width.jsx +6 -2
  68. data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_height_width_rails.md +3 -0
  69. data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_layout.html.erb +3 -0
  70. data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_user.html.erb +63 -0
  71. data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_user.jsx +11 -3
  72. data/app/pb_kits/playbook/pb_skeleton_loading/docs/example.yml +7 -2
  73. data/app/pb_kits/playbook/pb_skeleton_loading/skeleton_loading.html.erb +8 -12
  74. data/app/pb_kits/playbook/pb_skeleton_loading/skeleton_loading.rb +48 -1
  75. data/app/pb_kits/playbook/pb_table/_table.tsx +74 -18
  76. data/app/pb_kits/playbook/pb_table/docs/_table_sticky_columns.jsx +88 -0
  77. data/app/pb_kits/playbook/pb_table/docs/_table_sticky_columns_react.md +3 -0
  78. data/app/pb_kits/playbook/pb_table/docs/_table_sticky_left_columns.jsx +1 -1
  79. data/app/pb_kits/playbook/pb_table/docs/_table_sticky_left_columns_rails.md +2 -0
  80. data/app/pb_kits/playbook/pb_table/docs/_table_sticky_left_columns_react.md +4 -1
  81. data/app/pb_kits/playbook/pb_table/docs/_table_sticky_right_columns.jsx +87 -0
  82. data/app/pb_kits/playbook/pb_table/docs/_table_sticky_right_columns_react.md +5 -0
  83. data/app/pb_kits/playbook/pb_table/docs/example.yml +2 -0
  84. data/app/pb_kits/playbook/pb_table/docs/index.js +2 -0
  85. data/app/pb_kits/playbook/pb_table/index.ts +17 -17
  86. data/app/pb_kits/playbook/pb_table/styles/_scroll.scss +38 -2
  87. data/app/pb_kits/playbook/pb_table/styles/_sticky_columns.scss +17 -3
  88. data/app/pb_kits/playbook/pb_text_input/docs/_text_input_mask.jsx +18 -0
  89. data/app/pb_kits/playbook/pb_text_input/inputMask.ts +22 -1
  90. data/app/pb_kits/playbook/pb_text_input/text_input.test.js +80 -0
  91. data/app/pb_kits/playbook/pb_timeline/_timeline.tsx +5 -5
  92. data/app/pb_kits/playbook/pb_timeline/docs/_timeline_with_gap.html.erb +4 -5
  93. data/app/pb_kits/playbook/pb_timeline/docs/_timeline_with_gap.jsx +4 -4
  94. data/app/pb_kits/playbook/pb_timeline/docs/_timeline_with_gap.md +1 -1
  95. data/app/pb_kits/playbook/pb_timeline/timeline.rb +6 -6
  96. data/app/pb_kits/playbook/utilities/_gap.scss +29 -0
  97. data/app/pb_kits/playbook/utilities/globalPropNames.mjs +1 -0
  98. data/app/pb_kits/playbook/utilities/globalProps.ts +18 -9
  99. data/dist/chunks/_typeahead-C2iCBqxQ.js +36 -0
  100. data/dist/chunks/_weekday_stacked-CWnbnW7m.js +45 -0
  101. data/dist/chunks/{lib-sMFo2JZy.js → lib-B7sgJtGS.js} +1 -1
  102. data/dist/chunks/{pb_form_validation-CgvjWbOK.js → pb_form_validation-C5Cc0-1v.js} +1 -1
  103. data/dist/chunks/vendor.js +1 -1
  104. data/dist/menu.yml +1 -1
  105. data/dist/playbook-doc.js +1 -1
  106. data/dist/playbook-rails-react-bindings.js +1 -1
  107. data/dist/playbook-rails.js +1 -1
  108. data/dist/playbook.css +1 -1
  109. data/lib/playbook/classnames.rb +1 -0
  110. data/lib/playbook/spacing.rb +21 -0
  111. data/lib/playbook/version.rb +1 -1
  112. metadata +32 -8
  113. data/dist/chunks/_typeahead-CoIYBETL.js +0 -22
  114. data/dist/chunks/_weekday_stacked-Qj3GFYzA.js +0 -45
  115. /data/app/pb_kits/playbook/pb_skeleton_loading/docs/{_skeleton_loading_border_radius.md → _skeleton_loading_border_radius_react.md} +0 -0
  116. /data/app/pb_kits/playbook/pb_skeleton_loading/docs/{_skeleton_loading_height_width.md → _skeleton_loading_height_width_react.md} +0 -0
@@ -21,6 +21,14 @@
21
21
  border-width: 0px;
22
22
  }
23
23
 
24
+ @function ends-with($string, $suffix) {
25
+ $suffix-length: str-length($suffix);
26
+ @if $suffix-length == 0 {
27
+ @return true;
28
+ }
29
+ @return str-slice($string, -$suffix-length) == $suffix;
30
+ }
31
+
24
32
  [class^=pb_card_header_kit] {
25
33
  flex-grow: 0;
26
34
  flex-shrink: 0;
@@ -30,9 +38,19 @@
30
38
  border: 0;
31
39
  border-radius: $pb_card_header_border_radius $pb_card_header_border_radius 0px 0px;
32
40
  @each $color_name, $color_value in $pb_card_header_colors {
33
- &[class*=_#{"" + $color_name}] {
34
- @include pb_card_header_color($color_value);
35
- color: lightenText($color_value);
41
+ @if not ends-with($color_name, '_subtle') {
42
+ &[class*="_#{$color_name}"] {
43
+ @include pb_card_header_color($color_value);
44
+ color: lightenText($color_value);
45
+ }
46
+ }
47
+ }
48
+ @each $color_name, $color_value in $pb_card_header_colors {
49
+ @if ends-with($color_name, '_subtle') {
50
+ &[class*="_#{$color_name}"] {
51
+ @include pb_card_header_color($color_value);
52
+ color: lightenText($color_value);
53
+ }
36
54
  }
37
55
  }
38
56
  @each $color_name, $color_value in $pb_card_header_colors {
@@ -88,3 +88,21 @@
88
88
  Body
89
89
  <% end %>
90
90
  <% end %>
91
+
92
+ <%= pb_rails("card", props: { padding: "none", header: true, margin_bottom: "sm"}) do %>
93
+ <%= pb_rails("card/card_header", props: { padding: "sm", header_color: "success_subtle" }) do %>
94
+ <%= pb_rails("body", props: { text: "Success Subtle" }) %>
95
+ <% end %>
96
+ <%= pb_rails("card/card_body", props: { padding: "md" }) do %>
97
+ Body
98
+ <% end %>
99
+ <% end %>
100
+
101
+ <%= pb_rails("card", props: { padding: "none", header: true, margin_bottom: "sm"}) do %>
102
+ <%= pb_rails("card/card_header", props: { padding: "sm", header_color: "error_subtle" }) do %>
103
+ <%= pb_rails("body", props: { text: "Error Subtle"}) %>
104
+ <% end %>
105
+ <%= pb_rails("card/card_body", props: { padding: "md" }) do %>
106
+ Body
107
+ <% end %>
108
+ <% end %>
@@ -231,6 +231,46 @@ const CardHeader = (props) => {
231
231
  />
232
232
  </Card.Body>
233
233
  </Card>
234
+
235
+ <Card
236
+ {...props}
237
+ marginBottom='sm'
238
+ padding="none"
239
+ >
240
+ <Card.Header
241
+ headerColor="success_subtle"
242
+ >
243
+ <Body
244
+ text="Success Subtle"
245
+ />
246
+ </Card.Header>
247
+ <Card.Body>
248
+ <Body
249
+ {...props}
250
+ text="Body"
251
+ />
252
+ </Card.Body>
253
+ </Card>
254
+
255
+ <Card
256
+ {...props}
257
+ marginBottom='sm'
258
+ padding="none"
259
+ >
260
+ <Card.Header
261
+ headerColor="error_subtle"
262
+ >
263
+ <Body
264
+ text="Error Subtle"
265
+ />
266
+ </Card.Header>
267
+ <Card.Body>
268
+ <Body
269
+ {...props}
270
+ text="Body"
271
+ />
272
+ </Card.Body>
273
+ </Card>
234
274
  </>
235
275
  )
236
276
  }
@@ -1,9 +1,4 @@
1
- <%= content_tag(:label, aria: object.aria,
2
- id: object.id,
3
- data: object.data,
4
- class: object.classname,
5
- **combined_html_options
6
- ) do %>
1
+ <%= pb_content_tag(:label) do %>
7
2
  <%= content.presence || object.input %>
8
3
  <% if object.indeterminate %>
9
4
  <span data-pb-checkbox-icon-span="true" class="pb_checkbox_indeterminate">
@@ -20,6 +20,7 @@ type CircleIconButtonProps = {
20
20
  onClick?: React.MouseEventHandler<HTMLElement>,
21
21
  newWindow?: boolean,
22
22
  type?: 'button' | 'submit' | 'reset' | undefined,
23
+ target?: string
23
24
  variant?: 'primary' | 'secondary' | 'link',
24
25
  }
25
26
 
@@ -36,6 +37,7 @@ const CircleIconButton = (props: CircleIconButtonProps): React.ReactElement => {
36
37
  loading = false,
37
38
  onClick = noop,
38
39
  type,
40
+ target,
39
41
  link,
40
42
  newWindow,
41
43
  variant,
@@ -66,6 +68,7 @@ const CircleIconButton = (props: CircleIconButtonProps): React.ReactElement => {
66
68
  loading={loading}
67
69
  newWindow={newWindow}
68
70
  onClick={onClick}
71
+ target={target}
69
72
  text={null}
70
73
  variant={variant}
71
74
  >
@@ -1,5 +1,5 @@
1
1
  <%= pb_content_tag do %>
2
- <%= pb_rails("button", props: {type: object.type, loading: object.loading, link: object.link, new_window:object.new_window, variant: object.variant, disabled: object.disabled, dark: object.dark}) do %>
2
+ <%= pb_rails("button", props: {type: object.type, loading: object.loading, link: object.link, new_window:object.new_window, variant: object.variant, target: object.target, disabled: object.disabled, dark: object.dark}) do %>
3
3
  <%= pb_rails("icon", props: {icon: object.icon, fixed_width: true, dark: object.dark}) %>
4
4
  <% end %>
5
5
  <% end %>
@@ -17,6 +17,7 @@ module Playbook
17
17
  prop :link
18
18
  prop :new_window, type: Playbook::Props::Boolean,
19
19
  default: false
20
+ prop :target
20
21
  def classname
21
22
  generate_classname("pb_circle_icon_button_kit")
22
23
  end
@@ -10,3 +10,11 @@
10
10
  link: "https://google.com",
11
11
  new_window: true
12
12
  }) %>
13
+ <br/>
14
+ <%= pb_rails("circle_icon_button", props: {
15
+ icon: "info",
16
+ variant: "secondary",
17
+ aria: { label: "Link to Playbook in new window" },
18
+ link: "https://playbook.powerapp.cloud/",
19
+ target: "child"
20
+ }) %>
@@ -21,6 +21,15 @@ const CircleIconButtonLink = (props) => (
21
21
  {...props}
22
22
  />
23
23
 
24
+ <br/>
25
+
26
+ <CircleIconButton
27
+ aria={{ label: "Link to Playbook in new window" }}
28
+ icon="info"
29
+ link="https://playbook.powerapp.cloud/"
30
+ target="child"
31
+ variant="secondary"
32
+ />
24
33
  </div>
25
34
  )
26
35
 
@@ -0,0 +1 @@
1
+ The `link` prop accepts a string that is used as an href value and causes the button to act as a link. The default behavior of a link is to open in the current window. You can optionally alter the link behavior by adding the `newWindow` prop (boolean), which will open the link in a new window, or by calling the `target` prop, which accepts `_self`, `_blank`, `_parent`, `_top`, `child`, or any string, allowing you to specify any link target.
@@ -1,9 +1,4 @@
1
- <%= content_tag(:div,
2
- aria: object.aria,
3
- class: object.classname + object.error_class,
4
- data: object.data,
5
- id: object.id,
6
- **combined_html_options) do %>
1
+ <%= pb_content_tag do %>
7
2
  <div class="input_wrapper">
8
3
  <% if content.present? %>
9
4
  <%= content %>
@@ -1,19 +1,14 @@
1
- <%= content_tag(:div,
2
- aria: object.aria,
3
- class: object.classname,
4
- data: object.data,
5
- id: object.id,
6
- **combined_html_options) do %>
1
+ <%= pb_content_tag do %>
7
2
  <% if object.label.present? %>
8
3
  <%= pb_rails("caption", props: {text: object.label, margin_bottom:"xs"}) %>
9
4
  <% end %>
10
5
  <div class="dropdown_wrapper<%= error_class %>" style="position: relative">
11
- <input
12
- data-default-value="<%= input_default_value %>"
13
- id="dropdown-selected-option"
14
- name="<%= object.name %>"
15
- style="display: none"
16
- <%= object.required ? "required" : ""%>
6
+ <input
7
+ data-default-value="<%= input_default_value %>"
8
+ id="dropdown-selected-option"
9
+ name="<%= object.name %>"
10
+ style="display: none"
11
+ <%= object.required ? "required" : ""%>
17
12
  />
18
13
  <% if content.present? %>
19
14
  <%= content.presence %>
@@ -1,20 +1,15 @@
1
- <%= content_tag(:div,
2
- aria: object.aria,
3
- class: object.classname,
4
- data: object.data,
5
- id: object.id,
6
- **combined_html_options) do %>
1
+ <%= pb_content_tag do %>
7
2
  <%= pb_rails("list", props: {ordered: false, borderless: false}) do %>
8
- <% if content.present? %>
3
+ <% if content.present? %>
9
4
  <%= content.presence %>
10
- <% else %>
5
+ <% else %>
11
6
  <%= pb_rails("list/item", props: {
12
- display: "flex",
13
- justify_content: "center",
14
- padding:"xs",
15
- }) do %>
7
+ display: "flex",
8
+ justify_content: "center",
9
+ padding:"xs",
10
+ }) do %>
16
11
  <%= pb_rails("body", props: {text: "No option"}) %>
17
12
  <% end %>
18
13
  <% end %>
19
- <% end %>
20
- <% end %>
14
+ <% end %>
15
+ <% end %>
@@ -1,15 +1,10 @@
1
- <%= content_tag(:div,
2
- aria: object.aria,
3
- class: object.classname,
4
- data: object.data,
5
- id: object.option[:id],
6
- **combined_html_options) do %>
1
+ <%= pb_content_tag do %>
7
2
  <%= pb_rails("list/item", props: {
8
- display: "flex",
9
- justify_content: "center",
10
- padding:"none",
3
+ display: "flex",
4
+ justify_content: "center",
5
+ padding:"none",
11
6
  cursor: "pointer"
12
- }) do %>
7
+ }) do %>
13
8
  <div class="dropdown_option_wrapper">
14
9
  <% if content.present? %>
15
10
  <%= content.presence %>
@@ -18,4 +13,4 @@
18
13
  <% end %>
19
14
  </div>
20
15
  <% end %>
21
- <% end %>
16
+ <% end %>
@@ -1,21 +1,16 @@
1
- <%= content_tag(:div,
2
- aria: object.aria,
3
- class: object.classname,
4
- data: object.data,
5
- id: object.id,
6
- **combined_html_options) do %>
1
+ <%= pb_content_tag do %>
7
2
  <% if content.present? %>
8
3
  <div style="display: inline-block" tabindex="0" data-dropdown-custom-trigger>
9
4
  <%= content.presence %>
10
5
  </div>
11
6
  <% else %>
12
7
  <%= pb_rails("flex", props: {
13
- align: "center",
14
- border_radius:"lg",
15
- classname: object.trigger_wrapper_classes,
16
- cursor: "pointer",
17
- justify: "between",
18
- padding_x:"sm",
8
+ align: "center",
9
+ border_radius:"lg",
10
+ classname: object.trigger_wrapper_classes,
11
+ cursor: "pointer",
12
+ justify: "between",
13
+ padding_x:"sm",
19
14
  padding_y:"xs",
20
15
  html_options: {tabindex:"0"}
21
16
  }) do %>
@@ -23,7 +18,7 @@
23
18
  <%= pb_rails("flex", props: {align: "center"}) do %>
24
19
  <% if object.custom_display.present? %>
25
20
  <%= pb_rails("flex", props: {align: "center"}) do %>
26
- <div id="dropdown_trigger_custom_display" style="display: none;">
21
+ <div id="dropdown_trigger_custom_display" style="display: none;">
27
22
  <%= object.custom_display %>
28
23
  </div>
29
24
  <%= pb_rails("body", props: {text: object.default_display_placeholder, id: "dropdown_trigger_display"}) %>
@@ -40,4 +35,3 @@
40
35
  <% end %>
41
36
  <% end %>
42
37
  <% end %>
43
-
@@ -1,5 +1,5 @@
1
1
  import React, { useEffect, useCallback, useRef } from 'react'
2
- import { useDropzone, DropzoneInputProps, DropzoneRootProps } from 'react-dropzone'
2
+ import { useDropzone, DropzoneInputProps, DropzoneRootProps, FileRejection } from 'react-dropzone'
3
3
  import classnames from 'classnames'
4
4
 
5
5
  import { buildCss, buildDataProps, noop, buildHtmlProps } from '../utilities/props'
@@ -9,8 +9,10 @@ import type { Callback } from '../types'
9
9
  import Body from '../pb_body/_body'
10
10
  import Card from '../pb_card/_card'
11
11
 
12
+ import { isEmpty } from '../utilities/object'
13
+
12
14
  type FileUploadProps = {
13
- accept?: string[],
15
+ accept?: Record<string, string[]>,
14
16
  className?: string,
15
17
  customMessage?: string,
16
18
  dark?: boolean,
@@ -19,7 +21,7 @@ type FileUploadProps = {
19
21
  acceptedFilesDescription?: string,
20
22
  maxSize?: number,
21
23
  onFilesAccepted: Callback<File, File>,
22
- onFilesRejected: (error: string, files: File[]) => void,
24
+ onFilesRejected: (error: string, files: readonly FileRejection[]) => void,
23
25
  }
24
26
 
25
27
  const getFormattedFileSize = (fileSize: number): string => {
@@ -28,7 +30,7 @@ const getFormattedFileSize = (fileSize: number): string => {
28
30
 
29
31
  const FileUpload = (props: FileUploadProps): React.ReactElement => {
30
32
  const {
31
- accept = null,
33
+ accept = {},
32
34
  acceptedFilesDescription = '',
33
35
  className,
34
36
  customMessage,
@@ -48,30 +50,37 @@ const FileUpload = (props: FileUploadProps): React.ReactElement => {
48
50
  getRootProps: () => DropzoneRootProps & any;
49
51
  getInputProps: () => DropzoneInputProps & any;
50
52
  isDragActive: boolean;
51
- rejectedFiles: File[];
53
+ fileRejections: readonly FileRejection[];
52
54
  }
53
55
 
54
- const { getRootProps, getInputProps, isDragActive, rejectedFiles }: DropZoneProps = useDropzone({
56
+ const { getRootProps, getInputProps, isDragActive, fileRejections }: DropZoneProps = useDropzone({
55
57
  accept,
56
58
  maxSize,
57
59
  onDrop,
58
60
  })
59
61
 
60
- const prevRejected = useRef<File[] | null>(null);
62
+ const prevRejected = useRef<readonly FileRejection[] | null>(null);
61
63
 
62
- const maxFileSizeText = `Max file size is ${getFormattedFileSize(maxSize)}.`
64
+ let maxFileSizeText = ''
65
+ if (maxSize !== undefined) {
66
+ maxFileSizeText = `Max file size is ${getFormattedFileSize(maxSize)}.`
67
+ }
63
68
 
64
69
  useEffect(() => {
65
- if (rejectedFiles === prevRejected.current) return
66
- const isFileTooLarge = maxSize && rejectedFiles.length > 0 && rejectedFiles[0].size > maxSize;
70
+ if (fileRejections === prevRejected.current) return
71
+ const isFileTooLarge = maxSize && fileRejections.length > 0 && fileRejections[0].file.size > maxSize;
67
72
  if (isFileTooLarge) {
68
- onFilesRejected(`File size is too large! ${maxFileSizeText}`, rejectedFiles)
73
+ onFilesRejected(`File size is too large! ${maxFileSizeText}`, fileRejections)
69
74
  }
70
- prevRejected.current = rejectedFiles
71
- }, [maxFileSizeText, maxSize, onFilesRejected, rejectedFiles])
75
+ prevRejected.current = fileRejections
76
+ }, [maxFileSizeText, maxSize, onFilesRejected, fileRejections])
72
77
 
73
78
  const acceptedFileTypes = () => {
74
- return accept.map((fileType) => {
79
+ if (!accept) {
80
+ return []
81
+ }
82
+
83
+ return Object.keys(accept).map((fileType) => {
75
84
  if (fileType.startsWith('image/')) {
76
85
  return fileType.replace('image/', ' ')
77
86
  } else {
@@ -86,7 +95,7 @@ const FileUpload = (props: FileUploadProps): React.ReactElement => {
86
95
  const getDescription = () => {
87
96
  return customMessage
88
97
  ? customMessage
89
- : `Choose a file or drag it here.${accept === null ? '' : ` The accepted file types are: ${acceptedFilesDescription || acceptedFileTypes()}.`}${maxSize ? ` ${maxFileSizeText}` : ''}`;
98
+ : `Choose a file or drag it here.${isEmpty(accept) ? '' : ` The accepted file types are: ${acceptedFilesDescription || acceptedFileTypes()}.`}${maxSize ? ` ${maxFileSizeText}` : ''}`;
90
99
  }
91
100
 
92
101
  return (
@@ -28,7 +28,9 @@ const FileUploadAccept = (props) => {
28
28
  {...props}
29
29
  />
30
30
  <FileUpload
31
- accept={['image/svg+xml']}
31
+ accept={{
32
+ "image/svg+xml": [".svg", ".xml"],
33
+ }}
32
34
  onFilesAccepted={handleOnFilesAccepted}
33
35
  {...props}
34
36
  />
@@ -25,7 +25,10 @@ const FileUploadCustomDescription = (props) => {
25
25
  {...props}
26
26
  />
27
27
  <FileUpload
28
- accept={['application/pdf','application/vnd.openxmlformats-officedocument.spreadsheetml.sheet']}
28
+ accept={{
29
+ "application/pdf": [".pdf"],
30
+ "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet": [".xlsx"],
31
+ }}
29
32
  acceptedFilesDescription="Adobe (.pdf) and Microsoft (.xslx)"
30
33
  onFilesAccepted={handleOnFilesAccepted}
31
34
  {...props}
@@ -18,7 +18,7 @@ const AcceptedFilesList = ({ files }) => (
18
18
  const RejectedFilesList = ({ files }) => (
19
19
  <List>
20
20
  {files.map((file) => (
21
- <ListItem key={file.name}><Body color="error">{`${file.name} (file too large)`}</Body></ListItem>
21
+ <ListItem key={file.file.name}><Body color="error">{`${file.file.name} (file too large)`}</Body></ListItem>
22
22
  ))}
23
23
  </List>
24
24
  )
@@ -14,16 +14,6 @@ $pb_icon_circle_sizes: (
14
14
  "xl": 100px,
15
15
  );
16
16
 
17
- @mixin svg_size($name, $match, $adjust) {
18
- @if $name == $match {
19
- $svg_xy: $adjust;
20
- & > svg {
21
- width: #{$svg_xy};
22
- height: #{$svg_xy};
23
- }
24
- }
25
- }
26
-
27
17
  [class^=pb_icon_circle_kit] {
28
18
  display: flex;
29
19
  justify-content: center;
@@ -57,13 +47,11 @@ $pb_icon_circle_sizes: (
57
47
  border-radius: $size/2;
58
48
  background: $silver;
59
49
  color: $text_lt_light;
60
- font-size: $size * 0.38;
50
+ font-size: if($name == "xxs", $size - 6px, $size * 0.38);
61
51
  line-height: $size;
62
52
  flex-shrink: 0;
63
53
  flex-grow: 0;
64
54
  flex-basis: $size;
65
-
66
- @include svg_size($name, "xxs", $size - 6px);
67
55
  }
68
56
  }
69
57
 
@@ -3,6 +3,11 @@
3
3
  @import "../tokens/opacity";
4
4
  @import "./section_separator_mixin";
5
5
 
6
+ $merge_kits1: map-merge($status_colors, $category_colors);
7
+ $merge_kits2: map-merge($merge_kits1, $product_colors);
8
+ $merge_kits3: map-merge($merge_kits2, $text_colors);
9
+ $section_selector_colors: map-merge($merge_kits3, $data_colors);
10
+
6
11
  $section_colors_light: (
7
12
  background: $bg_light,
8
13
  card: $card_light,
@@ -19,8 +24,11 @@ $section_colors_dark: (
19
24
  align-items: center;
20
25
  position: relative;
21
26
  span {
22
- padding: 0 $space_xs;
27
+ padding: 0;
23
28
  display: flex;
29
+ [class*="pb_caption_kit"] {
30
+ padding: 0 $space_xs;
31
+ }
24
32
  }
25
33
  &::before {
26
34
  content: "";
@@ -34,12 +42,40 @@ $section_colors_dark: (
34
42
  flex: 1;
35
43
  @include section_separator_horizontal;
36
44
  }
45
+ @each $color_name, $color_value in $section_selector_colors {
46
+ &[class*="color_#{$color_name}"] {
47
+ &::before, &::after {
48
+ background: $color_value;
49
+ }
50
+
51
+ &[class*=_vertical] {
52
+ &::after {
53
+ background: $color_value;
54
+ }
55
+ }
56
+ &[class*=_dashed] {
57
+ &::before, &::after {
58
+ border: 1px dashed $color_value;
59
+ }
60
+ &[class*=_vertical] {
61
+ &::after {
62
+ border: 1px dashed $color_value;
63
+ background: none;
64
+ }
65
+ }
66
+ }
67
+ }
68
+ }
69
+
37
70
  &[class*=_horizontal] {
38
71
  justify-content: center;
39
72
  }
40
73
  &[class*=_vertical] {
41
74
  margin-left: $space_xs;
42
75
  margin-right: $space_xs;
76
+ &::before {
77
+ display: none;
78
+ }
43
79
  &::after {
44
80
  @include section_separator_vertical(false);
45
81
  }
@@ -54,6 +90,33 @@ $section_colors_dark: (
54
90
  // Dark =========================
55
91
 
56
92
  &.dark {
93
+ @each $color_name, $color_value in $section_selector_colors {
94
+ &[class*="color_#{$color_name}"] {
95
+ &::before, &::after {
96
+ background: $color_value;
97
+ }
98
+
99
+ &[class*=_vertical] {
100
+ &::after {
101
+ @include section_separator_vertical(false);
102
+ background: $color_value;
103
+ }
104
+ }
105
+
106
+ &[class*=_dashed] {
107
+ &::before, &::after {
108
+ border: 1px dashed $color_value;
109
+ background: none;
110
+ }
111
+ &[class*=_vertical] {
112
+ &::after {
113
+ border: 1px dashed $color_value;
114
+ background: none;
115
+ }
116
+ }
117
+ }
118
+ }
119
+ }
57
120
  &::before {
58
121
  @include section_separator_horizontal(true);
59
122
  }
@@ -10,6 +10,7 @@ type SectionSeparatorProps = {
10
10
  aria?: { [key: string]: string; },
11
11
  children?: React.ReactChild[] | React.ReactChild,
12
12
  className?: string,
13
+ color?: "default" | "primary",
13
14
  dark?: boolean,
14
15
  data?: { [key: string]: string; },
15
16
  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
@@ -25,6 +26,7 @@ const SectionSeparator = (props: SectionSeparatorProps): React.ReactElement => {
25
26
  aria = {},
26
27
  children,
27
28
  className,
29
+ color ="default",
28
30
  data = {},
29
31
  htmlOptions = {},
30
32
  id,
@@ -37,7 +39,7 @@ const SectionSeparator = (props: SectionSeparatorProps): React.ReactElement => {
37
39
  const ariaProps = buildAriaProps(aria)
38
40
  const dataProps = buildDataProps(data)
39
41
  const htmlProps = buildHtmlProps(htmlOptions)
40
- const classes = classnames(buildCss('pb_section_separator_kit', variant, orientation, lineStyle === "dashed" ? lineStyle : ""), globalProps(props), className)
42
+ const classes = classnames(buildCss('pb_section_separator_kit', variant, orientation, lineStyle === "dashed" ? lineStyle : "", color !== "default" ? `color_${color}` : ''), globalProps(props), className)
41
43
  const dynamicInlineProps = globalInlineProps(props)
42
44
 
43
45
  return (
@@ -0,0 +1,10 @@
1
+ <%= pb_rails("section_separator", props: { text: "Default Separator" }) %>
2
+ <%= pb_rails("section_separator", props: { color: "primary", text: "Primary Separator" }) %>
3
+ <%= pb_rails("section_separator", props: { color: "primary", line_style: "dashed", text: "Primary Dashed Separator" }) %>
4
+ <%= pb_rails("section_separator", props: { color: "primary" }) do %>
5
+ <%= pb_rails("flex", props: { padding: "xs" }) do %>
6
+ <%= pb_rails("icon", props: { color: "primary", icon: "arrow-down" }) %>
7
+ <%= pb_rails("detail", props: { text: "Children", size: "sm", color: "link" }) %>
8
+ <% end %>
9
+ <% end %>
10
+