playbook_ui 14.9.0.pre.alpha.PBNTR702stickyleftcolrails4806 → 14.9.0.pre.alpha.PBNTR738collapsiblewithintablekit4855

Sign up to get free protection for your applications and to get access to all the features.
Files changed (59) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_advanced_table/table_header.html.erb +5 -3
  3. data/app/pb_kits/playbook/pb_avatar/_avatar.scss +0 -2
  4. data/app/pb_kits/playbook/pb_body/_body.scss +14 -13
  5. data/app/pb_kits/playbook/pb_body/_body_mixins.scss +22 -16
  6. data/app/pb_kits/playbook/pb_bread_crumbs/docs/_bread_crumbs_default.jsx +6 -0
  7. data/app/pb_kits/playbook/pb_caption/_caption_mixin.scss +2 -1
  8. data/app/pb_kits/playbook/pb_card/_card_mixin.scss +1 -1
  9. data/app/pb_kits/playbook/pb_collapsible/_collapsible.tsx +9 -4
  10. data/app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleContent.tsx +2 -2
  11. data/app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleMain.tsx +2 -2
  12. data/app/pb_kits/playbook/pb_file_upload/_file_upload.scss +5 -0
  13. data/app/pb_kits/playbook/pb_file_upload/_file_upload.tsx +7 -2
  14. data/app/pb_kits/playbook/pb_file_upload/file_upload.html.erb +8 -2
  15. data/app/pb_kits/playbook/pb_nav/_bold_mixin.scss +11 -1
  16. data/app/pb_kits/playbook/pb_nav/_collapsible_nav.scss +16 -2
  17. data/app/pb_kits/playbook/pb_nav/_vertical_nav.scss +1 -1
  18. data/app/pb_kits/playbook/pb_selectable_card/_selectable_card.scss +4 -4
  19. data/app/pb_kits/playbook/pb_selectable_card/selectable_card.html.erb +1 -1
  20. data/app/pb_kits/playbook/pb_stat_change/_stat_change.tsx +44 -36
  21. data/app/pb_kits/playbook/pb_stat_change/stat_change.html.erb +4 -4
  22. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible.jsx +75 -0
  23. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible.md +1 -0
  24. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_click.jsx +108 -0
  25. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_click.md +2 -0
  26. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_content.jsx +94 -0
  27. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_content.md +0 -0
  28. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_rows.jsx +83 -0
  29. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_rows.md +3 -0
  30. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_table.jsx +120 -0
  31. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_table.md +1 -0
  32. data/app/pb_kits/playbook/pb_table/docs/example.yml +5 -0
  33. data/app/pb_kits/playbook/pb_table/docs/index.js +5 -0
  34. data/app/pb_kits/playbook/pb_table/index.ts +26 -100
  35. data/app/pb_kits/playbook/pb_table/styles/_all.scss +2 -1
  36. data/app/pb_kits/playbook/pb_table/styles/_collapsible.scss +35 -0
  37. data/app/pb_kits/playbook/pb_table/subcomponents/_table_row.tsx +106 -1
  38. data/app/pb_kits/playbook/pb_table/table.html.erb +1 -1
  39. data/app/pb_kits/playbook/pb_table/table.rb +2 -17
  40. data/app/pb_kits/playbook/pb_title/_title.scss +6 -5
  41. data/app/pb_kits/playbook/pb_title/_title_mixin.scss +13 -0
  42. data/app/pb_kits/playbook/tokens/_titles.scss +0 -8
  43. data/app/pb_kits/playbook/utilities/_hover.scss +11 -2
  44. data/app/pb_kits/playbook/utilities/globalProps.ts +2 -0
  45. data/app/pb_kits/playbook/utilities/test/globalProps/hover.test.js +15 -0
  46. data/dist/chunks/{_typeahead-CCDoUmRR.js → _typeahead-ClJHKLj6.js} +3 -3
  47. data/dist/chunks/_weekday_stacked-DaVTrOfA.js +45 -0
  48. data/dist/chunks/{lib-CVPInSs5.js → lib-CtS0DLMo.js} +3 -3
  49. data/dist/chunks/{pb_form_validation-CDLJ5eAG.js → pb_form_validation-C3vQKj7-.js} +1 -1
  50. data/dist/chunks/vendor.js +1 -1
  51. data/dist/playbook-doc.js +1 -1
  52. data/dist/playbook-rails-react-bindings.js +1 -1
  53. data/dist/playbook-rails.js +1 -1
  54. data/dist/playbook.css +1 -1
  55. data/lib/playbook/hover.rb +7 -1
  56. data/lib/playbook/version.rb +1 -1
  57. metadata +17 -7
  58. data/app/pb_kits/playbook/pb_table/docs/_table_sticky_left_columns.html.erb +0 -95
  59. data/dist/chunks/_weekday_stacked-CxjKLoMr.js +0 -45
@@ -0,0 +1,35 @@
1
+ @import "../../tokens/colors";
2
+
3
+ .table_collapsible_side_highlight {
4
+ border-left: 4px solid $primary;
5
+ &.dark {
6
+ border-left: 4px solid $active_dark;
7
+ }
8
+ }
9
+
10
+ [class^="pb_table"] {
11
+ &.table-sm,
12
+ &.table-md,
13
+ &.table-lg {
14
+ &.table-card {
15
+ tbody,
16
+ .pb_table_tbody {
17
+ tr,
18
+ .pb_table_tr {
19
+ &.collapsible_table_row {
20
+ td,
21
+ .pb_table_td {
22
+ border-bottom-color: transparent;
23
+ }
24
+ &:hover {
25
+ td,
26
+ .pb_table_td {
27
+ border-bottom-color: darken($border_light, 10%);
28
+ }
29
+ }
30
+ }
31
+ }
32
+ }
33
+ }
34
+ }
35
+ }
@@ -7,14 +7,21 @@ import {
7
7
  buildHtmlProps,
8
8
  } from "../../utilities/props";
9
9
  import { globalProps } from "../../utilities/globalProps";
10
+ import Collapsible from "../../pb_collapsible/_collapsible";
11
+ import useCollapsible from "../../pb_collapsible/useCollapsible";
10
12
 
11
13
  type TableRowPropTypes = {
12
14
  aria?: { [key: string]: string };
13
15
  children: React.ReactNode[] | React.ReactNode;
14
16
  className: string;
17
+ collapsible?: boolean;
18
+ collapsibleContent?: React.ReactNode[] | React.ReactNode;
19
+ collapsibleSideHighlight?: boolean;
15
20
  data?: { [key: string]: string };
21
+ dark?: boolean;
16
22
  htmlOptions?: { [key: string]: string | number | boolean | (() => void) };
17
23
  id?: string;
24
+ toggleCellId?: string;
18
25
  sideHighlightColor: string;
19
26
  tag?: "table" | "div";
20
27
  };
@@ -23,10 +30,15 @@ const TableRow = (props: TableRowPropTypes): React.ReactElement => {
23
30
  const {
24
31
  aria = {},
25
32
  children,
33
+ collapsible,
34
+ collapsibleContent,
35
+ collapsibleSideHighlight = true,
26
36
  className,
27
37
  data = {},
38
+ dark = false,
28
39
  htmlOptions = {},
29
40
  id,
41
+ toggleCellId,
30
42
  sideHighlightColor = "none",
31
43
  tag = "table",
32
44
  } = props;
@@ -36,17 +48,110 @@ const TableRow = (props: TableRowPropTypes): React.ReactElement => {
36
48
  const htmlProps = buildHtmlProps(htmlOptions);
37
49
  const sideHighlightClass =
38
50
  sideHighlightColor != "" ? `side_highlight_${sideHighlightColor}` : null;
51
+
52
+ const [isCollapsed, setIsCollapsed] = useCollapsible(true);
53
+
54
+ const collapsibleRow = collapsible && isCollapsed === true ? "collapsible_table_row" : null;
39
55
  const classes = classnames(
40
56
  buildCss("pb_table_row_kit", sideHighlightClass),
41
57
  "pb_table_tr",
58
+ collapsibleRow,
42
59
  globalProps(props),
43
60
  className
44
61
  );
45
62
  const isTableTag = tag === "table";
46
63
 
64
+ // const [isCollapsed, setIsCollapsed] = useCollapsible(true);
65
+
66
+ const colSpan = React.Children.count(children);
67
+
68
+ const handleRowClick = (event: React.MouseEvent) => {
69
+ if (toggleCellId) {
70
+ const target = event.target as HTMLElement;
71
+ const clickedCell = target.closest(`#${toggleCellId}`);
72
+ const isIconClick =
73
+ target instanceof SVGElement &&
74
+ (target.matches("svg.pb_custom_icon") || target.closest("svg.pb_custom_icon"));
75
+
76
+ if (clickedCell || isIconClick) {
77
+ setIsCollapsed(!isCollapsed);
78
+ }
79
+ } else {
80
+ setIsCollapsed(!isCollapsed);
81
+ }
82
+ };
83
+
47
84
  return (
48
85
  <>
49
- {isTableTag ? (
86
+ {collapsible ? (
87
+ isTableTag ? (
88
+ <>
89
+ <tr
90
+ {...ariaProps}
91
+ {...dataProps}
92
+ {...htmlProps}
93
+ className={classes}
94
+ id={id}
95
+ onClick={(e)=>handleRowClick(e)}
96
+ style={{ cursor: toggleCellId ? "default" : "pointer" }}
97
+ >
98
+ {children}
99
+ </tr>
100
+ <tr>
101
+ <Collapsible
102
+ collapsed={isCollapsed}
103
+ dark={dark}
104
+ htmlOptions={{ colSpan: colSpan }}
105
+ padding="none"
106
+ tag="td"
107
+ >
108
+ <tr/>
109
+ <Collapsible.Content
110
+ className={collapsibleSideHighlight ? `table_collapsible_side_highlight` : ''}
111
+ dark={dark}
112
+ margin="none"
113
+ padding="none"
114
+ >
115
+ {collapsibleContent}
116
+ </Collapsible.Content>
117
+ </Collapsible>
118
+ </tr>
119
+ </>
120
+ ) : (
121
+ <>
122
+ <div
123
+ {...ariaProps}
124
+ {...dataProps}
125
+ {...htmlProps}
126
+ className={classes}
127
+ id={id}
128
+ onClick={handleRowClick}
129
+ style={{ cursor: "pointer" }}
130
+ >
131
+ {children}
132
+ </div>
133
+ <tr>
134
+ <Collapsible
135
+ collapsed={isCollapsed}
136
+ dark={dark}
137
+ htmlOptions={{ colSpan: colSpan }}
138
+ padding="none"
139
+ tag="td"
140
+ >
141
+ <tr/>
142
+ <Collapsible.Content
143
+ className={collapsibleSideHighlight ? `table_collapsible_side_highlight` : ''}
144
+ dark={dark}
145
+ margin="none"
146
+ padding="none"
147
+ >
148
+ {collapsibleContent}
149
+ </Collapsible.Content>
150
+ </Collapsible>
151
+ </tr>
152
+ </>
153
+ )
154
+ ) : isTableTag ? (
50
155
  <tr
51
156
  {...ariaProps}
52
157
  {...dataProps}
@@ -18,4 +18,4 @@
18
18
  <%= content.presence %>
19
19
  <% end %>
20
20
  <% end %>
21
- <% end %>
21
+ <% end %>
@@ -23,8 +23,6 @@ module Playbook
23
23
  prop :text
24
24
  prop :sticky, type: Playbook::Props::Boolean,
25
25
  default: false
26
- prop :sticky_left_column, type: Playbook::Props::Array,
27
- default: []
28
26
  prop :vertical_border, type: Playbook::Props::Boolean,
29
27
  default: false
30
28
  prop :striped, type: Playbook::Props::Boolean,
@@ -39,8 +37,8 @@ module Playbook
39
37
  def classname
40
38
  generate_classname(
41
39
  "pb_table", "table-#{size}", single_line_class, dark_class,
42
- disable_hover_class, container_class, data_table_class, sticky_class, sticky_left_column_class,
43
- collapse_class, vertical_border_class, striped_class, outer_padding_class,
40
+ disable_hover_class, container_class, data_table_class, sticky_class, collapse_class,
41
+ vertical_border_class, striped_class, outer_padding_class,
44
42
  "table-responsive-#{responsive}", separator: " "
45
43
  )
46
44
  end
@@ -75,19 +73,6 @@ module Playbook
75
73
  sticky ? "sticky-header" : nil
76
74
  end
77
75
 
78
- def sticky_left_column_class
79
- if sticky_left_column.empty?
80
- nil
81
- else
82
- sticky_col_classname = "sticky-left-column sticky-columns"
83
- sticky_left_column.each do |id|
84
- sticky_col_classname += "-#{id}"
85
- end
86
-
87
- sticky_col_classname
88
- end
89
- end
90
-
91
76
  def striped_class
92
77
  striped ? "striped" : nil
93
78
  end
@@ -49,10 +49,11 @@
49
49
  }
50
50
 
51
51
  &.dark {
52
- @include pb_title_dark;
53
- }
54
-
55
- &.dark[class*=_link] {
56
- @include pb_title_dark_link;
52
+ @include title_dark;
53
+ @each $name, $color in $pb_dark_title_colors {
54
+ &[class*="_#{$name}"] {
55
+ color: $color;
56
+ }
57
+ }
57
58
  }
58
59
  }
@@ -9,6 +9,15 @@ $pb_title_colors: (
9
9
  link: $primary
10
10
  );
11
11
 
12
+ $pb_dark_title_colors: (
13
+ default: $text_dk_default,
14
+ light: $text_dk_light,
15
+ lighter: $text_dk_lighter,
16
+ success: $success,
17
+ error: $error_dark,
18
+ link: $active_dark
19
+ );
20
+
12
21
  @mixin title_colors {
13
22
  @each $name, $color in $pb_title_colors {
14
23
  &[class*=_#{$name}] {
@@ -16,3 +25,7 @@ $pb_title_colors: (
16
25
  }
17
26
  }
18
27
  }
28
+
29
+ @mixin title_dark {
30
+ color: $text_dk_default;
31
+ }
@@ -33,14 +33,6 @@
33
33
  @include pb_title($heading_4, $bolder, $letterSpacing: $lspace_normal);
34
34
  }
35
35
 
36
- @mixin pb_title_dark {
37
- color: $text_dk_default;
38
- }
39
-
40
- @mixin pb_title_dark_link {
41
- color: $active_dark;
42
- }
43
-
44
36
  @mixin pb_title_bold {
45
37
  font-weight: $bolder;
46
38
  }
@@ -20,6 +20,13 @@
20
20
  }
21
21
  }
22
22
 
23
+ @mixin hover-underline {
24
+ .hover_underline:hover {
25
+ text-decoration: underline;
26
+ transition: text-decoration $transition-speed ease;
27
+ }
28
+ }
29
+
23
30
  @mixin hover-color-classes($colors-list) {
24
31
  @each $name, $color in $colors-list {
25
32
  .hover_background-#{"" + $name}:hover {
@@ -32,7 +39,9 @@
32
39
  }
33
40
  }
34
41
  }
35
-
42
+
43
+
44
+ @include hover-underline;
36
45
  @include hover-scale-classes($scales);
37
46
  @include hover-shadow-classes($box_shadows);
38
47
  @include hover-color-classes($product_colors);
@@ -64,4 +73,4 @@
64
73
  .group_hover.hover_visibility {
65
74
  opacity: 1;
66
75
  }
67
- }
76
+ }
@@ -64,6 +64,7 @@ type Hover = Shadow & {
64
64
  background?: string,
65
65
  color?: string,
66
66
  scale?: "sm" | "md" | "lg",
67
+ underline?: boolean,
67
68
  visibility?: boolean,
68
69
  }
69
70
 
@@ -236,6 +237,7 @@ const PROP_CATEGORIES: {[key:string]: (props: {[key: string]: any}) => string} =
236
237
  if (!hover) return css;
237
238
  css += hover.shadow ? `hover_shadow_${hover.shadow} ` : '';
238
239
  css += hover.background ? `hover_background-${hover.background } ` : '';
240
+ css += hover.underline ? `hover_underline ` : '';
239
241
  css += hover.scale ? `hover_scale_${hover.scale} ` : '';
240
242
  css += hover.color ? `hover_color-${hover.color } ` : '';
241
243
  css += hover.visibility ? `hover_visibility` : '';
@@ -57,6 +57,19 @@ test('Hover Props: returns proper class name', () => {
57
57
  expectedClassName = `hover_scale_xl`;
58
58
  expect(kit).toHaveClass(expectedClassName);
59
59
 
60
+ const testIdUnderline = `${testSubject}-hover-underline`;
61
+ render(
62
+ <Body
63
+ data={{ testid: testIdUnderline }}
64
+ hover={{ underline: true }}
65
+ text="Hi"
66
+ />
67
+ );
68
+
69
+ kit = screen.getByTestId(testIdUnderline);
70
+ expectedClassName = `hover_underline`;
71
+ expect(kit).toHaveClass(expectedClassName);
72
+
60
73
  const testIdMultiple = `${testSubject}-hover-multiple`;
61
74
  render(
62
75
  <Body
@@ -66,6 +79,7 @@ test('Hover Props: returns proper class name', () => {
66
79
  background: 'error',
67
80
  shadow: 'deeper',
68
81
  scale: 'xl',
82
+ underline: true,
69
83
  }}
70
84
  text="Hi"
71
85
  />
@@ -76,4 +90,5 @@ test('Hover Props: returns proper class name', () => {
76
90
  expect(kit).toHaveClass('hover_background-error');
77
91
  expect(kit).toHaveClass('hover_shadow_deeper');
78
92
  expect(kit).toHaveClass('hover_scale_xl');
93
+ expect(kit).toHaveClass('hover_underline');
79
94
  });