playbook_ui 13.16.0 → 13.17.0.pre.alpha.nodealphaupgrade2157

Sign up to get free protection for your applications and to get access to all the features.
Files changed (97) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/_playbook.scss +14 -12
  3. data/app/pb_kits/playbook/_reset.scss +2 -2
  4. data/app/pb_kits/playbook/index.js +2 -1
  5. data/app/pb_kits/playbook/pb_advanced_table/Components/CollapsibleTrail.tsx +30 -0
  6. data/app/pb_kits/playbook/pb_advanced_table/Components/CustomCell.tsx +62 -0
  7. data/app/pb_kits/playbook/pb_advanced_table/Components/LoadingCell.tsx +5 -0
  8. data/app/pb_kits/playbook/pb_advanced_table/Components/SortIconButton.tsx +30 -0
  9. data/app/pb_kits/playbook/pb_advanced_table/Components/SubRowHeaderRow.tsx +61 -0
  10. data/app/pb_kits/playbook/pb_advanced_table/Components/TableHeaderCell.tsx +127 -0
  11. data/app/pb_kits/playbook/pb_advanced_table/Components/ToggleIconButton.tsx +28 -0
  12. data/app/pb_kits/playbook/pb_advanced_table/Context/AdvancedTableContext.tsx +5 -0
  13. data/app/pb_kits/playbook/pb_advanced_table/README.md +288 -0
  14. data/app/pb_kits/playbook/pb_advanced_table/SubKits/TableBody.tsx +95 -0
  15. data/app/pb_kits/playbook/pb_advanced_table/SubKits/TableHeader.tsx +51 -0
  16. data/app/pb_kits/playbook/pb_advanced_table/Utilities/BrowserCheck.tsx +5 -0
  17. data/app/pb_kits/playbook/pb_advanced_table/Utilities/ExpansionControlHelpers.tsx +63 -0
  18. data/app/pb_kits/playbook/pb_advanced_table/Utilities/IconHelpers.tsx +8 -0
  19. data/app/pb_kits/playbook/pb_advanced_table/Utilities/types.ts +8 -0
  20. data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss +98 -0
  21. data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx +246 -0
  22. data/app/pb_kits/playbook/pb_advanced_table/advanced_table.test.jsx +345 -0
  23. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_collapsible_trail.jsx +52 -0
  24. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_collapsible_trail.md +1 -0
  25. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_default.jsx +49 -0
  26. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_default.md +18 -0
  27. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_expanded_control.jsx +59 -0
  28. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_expanded_control.md +18 -0
  29. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_loading.jsx +60 -0
  30. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_loading.md +3 -0
  31. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort.jsx +52 -0
  32. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort.md +5 -0
  33. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort_control.jsx +63 -0
  34. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort_control.md +3 -0
  35. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_subrow_headers.jsx +57 -0
  36. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_subrow_headers.md +3 -0
  37. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_options.jsx +61 -0
  38. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_options.md +3 -0
  39. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props.jsx +55 -0
  40. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props.md +1 -0
  41. data/app/pb_kits/playbook/pb_advanced_table/docs/_description.md +1 -0
  42. data/app/pb_kits/playbook/pb_advanced_table/docs/_mock_data.js +278 -0
  43. data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +12 -0
  44. data/app/pb_kits/playbook/pb_advanced_table/docs/index.js +9 -0
  45. data/app/pb_kits/playbook/pb_advanced_table/scss_partials/_loading.scss +72 -0
  46. data/app/pb_kits/playbook/pb_advanced_table/scss_partials/_pseudo_states.scss +12 -0
  47. data/app/pb_kits/playbook/pb_collapsible/_collapsible.scss +2 -2
  48. data/app/pb_kits/playbook/pb_date_picker/sass_partials/_flatpickr_styles.scss +1 -1
  49. data/app/pb_kits/playbook/pb_flex/_flex.tsx +1 -1
  50. data/app/pb_kits/playbook/pb_label_value/_label_value.tsx +1 -1
  51. data/app/pb_kits/playbook/pb_layout/_layout.tsx +2 -1
  52. data/app/pb_kits/playbook/pb_layout/layout.test.js +8 -4
  53. data/app/pb_kits/playbook/pb_legend/_legend.tsx +6 -6
  54. data/app/pb_kits/playbook/pb_lightbox/Carousel/Slides.tsx +4 -4
  55. data/app/pb_kits/playbook/pb_lightbox/Carousel/Thumbnail.tsx +1 -1
  56. data/app/pb_kits/playbook/pb_lightbox/Carousel/index.tsx +3 -3
  57. data/app/pb_kits/playbook/pb_lightbox/Header/_lightbox_header.tsx +30 -22
  58. data/app/pb_kits/playbook/pb_lightbox/_lightbox.tsx +5 -5
  59. data/app/pb_kits/playbook/pb_line_graph/_line_graph.tsx +4 -4
  60. data/app/pb_kits/playbook/pb_list/_list.tsx +15 -15
  61. data/app/pb_kits/playbook/pb_list/_list_item.tsx +1 -1
  62. data/app/pb_kits/playbook/pb_loading_inline/_loading_inline.tsx +9 -9
  63. data/app/pb_kits/playbook/pb_map/_map.tsx +8 -8
  64. data/app/pb_kits/playbook/pb_map/_map_controls.tsx +15 -7
  65. data/app/pb_kits/playbook/pb_map/_map_custom_button.tsx +4 -2
  66. data/app/pb_kits/playbook/pb_message/_message.tsx +1 -1
  67. data/app/pb_kits/playbook/pb_message/_message_mention.tsx +6 -6
  68. data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.tsx +46 -42
  69. data/app/pb_kits/playbook/pb_multiple_users_stacked/_multiple_users_stacked.tsx +20 -20
  70. data/app/pb_kits/playbook/pb_nav/_item.tsx +56 -47
  71. data/app/pb_kits/playbook/pb_nav/_nav.tsx +15 -15
  72. data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_validation.html.erb +5 -7
  73. data/app/pb_kits/playbook/pb_popover/_popover.tsx +12 -14
  74. data/app/pb_kits/playbook/pb_popover/docs/_popover_actionable_content.html.erb +30 -0
  75. data/app/pb_kits/playbook/pb_popover/docs/_popover_actionable_content.jsx +57 -0
  76. data/app/pb_kits/playbook/pb_popover/docs/example.yml +2 -1
  77. data/app/pb_kits/playbook/pb_popover/docs/index.js +1 -0
  78. data/app/pb_kits/playbook/pb_popover/popover.test.js +29 -31
  79. data/app/pb_kits/playbook/pb_table/_table.tsx +32 -29
  80. data/app/pb_kits/playbook/pb_table/docs/_table_striped.html.erb +48 -0
  81. data/app/pb_kits/playbook/pb_table/docs/_table_striped.jsx +58 -0
  82. data/app/pb_kits/playbook/pb_table/docs/_table_striped.md +1 -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 +1 -0
  85. data/app/pb_kits/playbook/pb_table/styles/_all.scss +1 -0
  86. data/app/pb_kits/playbook/pb_table/styles/_striped.scss +19 -0
  87. data/app/pb_kits/playbook/pb_table/table.rb +7 -1
  88. data/app/pb_kits/playbook/pb_table/table.test.js +5 -0
  89. data/app/pb_kits/playbook/pb_typeahead/_typeahead.scss +1 -1
  90. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_highlight.jsx +4 -2
  91. data/app/pb_kits/playbook/playbook-doc.js +2 -0
  92. data/app/pb_kits/playbook/utilities/globalProps.ts +1 -1
  93. data/dist/menu.yml +105 -3
  94. data/dist/playbook-rails.js +14 -6
  95. data/dist/reset.css +1 -2
  96. data/lib/playbook/version.rb +2 -2
  97. metadata +55 -7
@@ -12,12 +12,12 @@ type NavProps = {
12
12
  borderless?: boolean,
13
13
  children?: React.ReactNode[] | React.ReactNode,
14
14
  className?: string | string[],
15
- data?: object,
15
+ data?: Record<string, unknown>,
16
16
  dark?: boolean,
17
17
  highlight?: boolean,
18
18
  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
19
19
  id?: string,
20
- onClick?: React.MouseEventHandler<HTMLElement>,
20
+ onClick?: () => void,
21
21
  orientation?: "vertical" | "horizontal",
22
22
  link?: string,
23
23
  title?: string,
@@ -25,7 +25,7 @@ type NavProps = {
25
25
  itemSpacing?: SpacingObject
26
26
  } & GlobalProps
27
27
 
28
- const Nav = (props: NavProps) => {
28
+ const Nav = (props: NavProps): React.ReactElement => {
29
29
  const {
30
30
  aria = {},
31
31
  borderless = false,
@@ -37,7 +37,7 @@ const Nav = (props: NavProps) => {
37
37
  htmlOptions = {},
38
38
  id,
39
39
  link = '#',
40
- onClick = () => { },
40
+ onClick,
41
41
  orientation = 'vertical',
42
42
  title = '',
43
43
  variant = 'normal',
@@ -71,23 +71,23 @@ const childrenWithProps = React.Children.map(children, (child) => {
71
71
 
72
72
  return (
73
73
  <nav
74
- {...ariaProps}
75
- {...dataProps}
76
- {...htmlProps}
77
- className={cardCss}
78
- id={id}
74
+ {...ariaProps}
75
+ {...dataProps}
76
+ {...htmlProps}
77
+ className={cardCss}
78
+ id={id}
79
79
  >
80
80
  {title &&
81
81
  <div className="pb_nav_list_title">
82
82
  <a
83
- className="pb_nav_list_item_link_text"
84
- href={link}
85
- onClick={onClick}
83
+ className="pb_nav_list_item_link_text"
84
+ href={link}
85
+ onClick={onClick}
86
86
  >
87
87
  <Caption
88
- dark={dark}
89
- size="md"
90
- text={`${title}`}
88
+ dark={dark}
89
+ size="md"
90
+ text={`${title}`}
91
91
  />
92
92
  </a>
93
93
  </div>
@@ -3,12 +3,10 @@
3
3
  <%= pb_rails("button", props: {html_type: "submit", text: "Save Phone Number"}) %>
4
4
  </form>
5
5
 
6
- <% content_for(:pb_js) do %>
7
- <%= javascript_tag do %>
8
- document.addEventListener('DOMContentLoaded', function () {
9
- document.querySelector('#example-form-validation').addEventListener('submit', function (e) {
10
- if (e.target.querySelectorAll('[error]:not([error=""])').length > 0) e.preventDefault();
11
- })
6
+ <%= javascript_tag do %>
7
+ document.addEventListener('DOMContentLoaded', function () {
8
+ document.querySelector('#example-form-validation').addEventListener('submit', function (e) {
9
+ if (e.target.querySelectorAll('[error]:not([error=""])').length > 0) e.preventDefault();
12
10
  })
13
- <% end %>
11
+ })
14
12
  <% end %>
@@ -171,29 +171,27 @@ const PbReactPopover = (props: PbPopoverProps): React.ReactElement => {
171
171
 
172
172
  document.body.addEventListener(
173
173
  "click",
174
- ({ target }) => {
174
+ (e: MouseEvent) => {
175
+ const target = e.target as HTMLElement
176
+
175
177
  const targetIsPopover =
176
- (target as HTMLElement).closest("#" + targetId) !==
177
- null;
178
+ target.closest("#" + targetId) !== null;
178
179
  const targetIsReference =
179
- (target as HTMLElement).closest("#reference-" + targetId) !==
180
- null;
180
+ target.closest("#reference-" + targetId) !== null;
181
+
182
+ const shouldClose = () => {
183
+ setTimeout(() => shouldClosePopover(true), 0);
184
+ }
181
185
 
182
186
  switch (closeOnClick) {
183
187
  case "outside":
184
- if (!targetIsPopover && !targetIsReference) {
185
- shouldClosePopover(true);
186
- }
188
+ if (!targetIsPopover && !targetIsReference) shouldClose();
187
189
  break;
188
190
  case "inside":
189
- if (targetIsPopover) {
190
- shouldClosePopover(true);
191
- }
191
+ if (targetIsPopover) shouldClose();
192
192
  break;
193
193
  case "any":
194
- if (targetIsPopover || !targetIsPopover && !targetIsReference) {
195
- shouldClosePopover(true);
196
- }
194
+ if (targetIsPopover || !targetIsPopover && !targetIsReference) shouldClose();
197
195
  break;
198
196
  }
199
197
  },
@@ -0,0 +1,30 @@
1
+ <%= pb_rails("flex", props: {
2
+ dark: true,
3
+ orientation: "row",
4
+ vertical: "center"
5
+ }) do %>
6
+ <%= pb_rails("body", props: { text: "Click info for more details" }) %>
7
+ &nbsp;
8
+ <%= pb_rails("circle_icon_button", props: {
9
+ variant: "secondary",
10
+ icon: "info",
11
+ id: "actionable-popover-1"
12
+ }) %>
13
+ <%= pb_rails("popover", props: {
14
+ close_on_click: "any",
15
+ trigger_element_id: "actionable-popover-1",
16
+ tooltip_id: "actionable-tooltip-1",
17
+ offset: true,
18
+ position: "top"
19
+ }) do %>
20
+ <%= pb_rails("button", props: { id: "actionable-tooltip-button", text: "Learn more" }) %>
21
+ <% end %>
22
+ <% end %>
23
+
24
+ <%= javascript_tag do %>
25
+ document.addEventListener('DOMContentLoaded', function () {
26
+ document.querySelector('#actionable-tooltip-button').addEventListener('click', function (e) {
27
+ alert("Let's do this")
28
+ }, { once: true })
29
+ })
30
+ <% end %>
@@ -0,0 +1,57 @@
1
+ import React, { useState } from 'react'
2
+ import {
3
+ Body,
4
+ Button,
5
+ CircleIconButton,
6
+ Flex,
7
+ PbReactPopover,
8
+ } from '../..'
9
+
10
+ const PopoverActionableContent = (props) => {
11
+ const [showPopover, setShowPopover] = useState(false)
12
+
13
+ const handleTogglePopover = () => {
14
+ setShowPopover(!showPopover)
15
+ }
16
+
17
+ const handleShouldClosePopover = (shouldClose) => {
18
+ setShowPopover(!shouldClose)
19
+ }
20
+
21
+ const popoverReference = (
22
+ <CircleIconButton
23
+ icon="info"
24
+ onClick={handleTogglePopover}
25
+ variant="secondary"
26
+ />
27
+ )
28
+
29
+ return (
30
+ <Flex
31
+ orientation="row"
32
+ vertical="center"
33
+ {...props}
34
+ >
35
+ <Body text="Click info for more details" />
36
+ &nbsp;
37
+ <PbReactPopover
38
+ closeOnClick="inside"
39
+ offset
40
+ placement="top"
41
+ reference={popoverReference}
42
+ shouldClosePopover={handleShouldClosePopover}
43
+ show={showPopover}
44
+ {...props}
45
+ >
46
+ <Body textAlign="center">
47
+ <Button
48
+ onClick={() => {alert("Let's do this!")}}
49
+ text="Learn More"
50
+ />
51
+ </Body>
52
+ </PbReactPopover>
53
+ </Flex>
54
+ )
55
+ }
56
+
57
+ export default PopoverActionableContent
@@ -5,6 +5,7 @@ examples:
5
5
  - popover_close: Close Options
6
6
  - popover_z_index: Set Z-Index
7
7
  - popover_scroll_height: Scroll and Height Settings
8
+ - popover_actionable_content: With Actionable Content
8
9
 
9
10
  react:
10
11
  - popover_default: Default
@@ -12,4 +13,4 @@ examples:
12
13
  - popover_close: Close Options
13
14
  - popover_z_index: Set Z-Index
14
15
  - popover_scroll_height: Scroll and Height Settings
15
-
16
+ - popover_actionable_content: With Actionable Content
@@ -3,3 +3,4 @@ export { default as PopoverList } from './_popover_list.jsx'
3
3
  export { default as PopoverClose } from './_popover_close.jsx'
4
4
  export { default as PopoverZIndex } from './_popover_z_index.jsx'
5
5
  export { default as PopoverScrollHeight } from './_popover_scroll_height.jsx'
6
+ export { default as PopoverActionableContent } from './_popover_actionable_content.jsx'
@@ -12,9 +12,9 @@ const PopoverTest = () => {
12
12
  }
13
13
 
14
14
  const popoverReference = (
15
- <Button onClick={togglePopover}
15
+ <Button onClick={togglePopover}
16
16
  text="Click Me"
17
- />
17
+ />
18
18
  );
19
19
  return (
20
20
  <PbReactPopover
@@ -34,9 +34,9 @@ const PopoverTestZIndex = () => {
34
34
  }
35
35
 
36
36
  const popoverReference = (
37
- <Button onClick={togglePopover}
37
+ <Button onClick={togglePopover}
38
38
  text="Click Me"
39
- />
39
+ />
40
40
  );
41
41
  return (
42
42
  <PbReactPopover
@@ -58,9 +58,9 @@ const PopoverTestHeight = () => {
58
58
  }
59
59
 
60
60
  const popoverReference = (
61
- <Button onClick={togglePopover}
61
+ <Button onClick={togglePopover}
62
62
  text="Click Me"
63
- />
63
+ />
64
64
  );
65
65
  return (
66
66
  <PbReactPopover
@@ -75,7 +75,7 @@ const PopoverTestHeight = () => {
75
75
  )
76
76
  };
77
77
 
78
- //Test Popover with click to close 'anywhere'
78
+ //Test Popover with click to close 'anywhere'
79
79
  const PopoverTestClicktoClose = () => {
80
80
  const [mockState, setMockState] = React.useState(false)
81
81
  const togglePopover = () => {
@@ -86,9 +86,9 @@ const PopoverTestClicktoClose = () => {
86
86
  }
87
87
 
88
88
  const popoverReference = (
89
- <Button onClick={togglePopover}
89
+ <Button onClick={togglePopover}
90
90
  text="Click Me"
91
- />
91
+ />
92
92
  );
93
93
  return (
94
94
  <PbReactPopover
@@ -103,7 +103,7 @@ const PopoverTestClicktoClose = () => {
103
103
  )
104
104
  };
105
105
 
106
- //Test Popover with click to close 'inside'
106
+ //Test Popover with click to close 'inside'
107
107
  const PopoverTestClicktoClose2 = () => {
108
108
  const [mockState, setMockState] = React.useState(false)
109
109
  const togglePopover = () => {
@@ -114,9 +114,9 @@ const PopoverTestClicktoClose2 = () => {
114
114
  }
115
115
 
116
116
  const popoverReference = (
117
- <Button onClick={togglePopover}
117
+ <Button onClick={togglePopover}
118
118
  text="Click Me"
119
- />
119
+ />
120
120
  );
121
121
  return (
122
122
  <PbReactPopover
@@ -131,7 +131,7 @@ const PopoverTestClicktoClose2 = () => {
131
131
  )
132
132
  };
133
133
 
134
- //Test Popover with click to close 'outside'
134
+ //Test Popover with click to close 'outside'
135
135
  const PopoverTestClicktoClose3 = () => {
136
136
  const [mockState, setMockState] = React.useState(false)
137
137
  const togglePopover = () => {
@@ -142,9 +142,9 @@ const PopoverTestClicktoClose3 = () => {
142
142
  }
143
143
 
144
144
  const popoverReference = (
145
- <Button onClick={togglePopover}
145
+ <Button onClick={togglePopover}
146
146
  text="Click Me"
147
- />
147
+ />
148
148
  );
149
149
  return (
150
150
  <PbReactPopover
@@ -165,7 +165,7 @@ const PopoverTestClicktoClose3 = () => {
165
165
  const btn = screen.getByText(/click me/i)
166
166
  fireEvent.click(btn);
167
167
  const kit = screen.getByText("Click Anywhere");
168
- expect(kit).toBeInTheDocument();
168
+ expect(kit).toBeInTheDocument();
169
169
  });
170
170
 
171
171
  test("renders Popover with z index", () => {
@@ -173,7 +173,7 @@ const PopoverTestClicktoClose3 = () => {
173
173
  const btn = screen.getByText(/click me/i)
174
174
  fireEvent.click(btn);
175
175
  const kit = screen.getByText("Click Anywhere");
176
- expect(kit).toHaveClass("pb_popover_body z_index_3");
176
+ expect(kit).toHaveClass("pb_popover_body z_index_3");
177
177
  });
178
178
 
179
179
  test("renders Popover with max height and max width", () => {
@@ -181,42 +181,40 @@ const PopoverTestClicktoClose3 = () => {
181
181
  const btn = screen.getByText(/click me/i)
182
182
  fireEvent.click(btn);
183
183
  const kit = screen.getByText("Click Anywhere");
184
- expect(kit).toHaveClass("pb_popover_body max_width_240px overflow_handling");
184
+ expect(kit).toHaveClass("pb_popover_body max_width_240px overflow_handling");
185
185
  });
186
186
 
187
- test("closes Popover on click anywhere", () => {
187
+ test("closes Popover on click anywhere", async () => {
188
188
  render(<PopoverTestClicktoClose data={{ testid: testId}}/>)
189
189
  const btn = screen.getByText(/click me/i)
190
190
  fireEvent.click(btn);
191
191
  const kit = screen.getByText("Click Anywhere");
192
- expect(kit).toBeInTheDocument();
193
- fireEvent.click(kit);
194
-
195
- expect(kit).not.toBeInTheDocument();
192
+ expect(kit).toBeInTheDocument();
193
+ fireEvent.click(document.body);
196
194
 
195
+ expect(kit).not.toBeInTheDocument;
197
196
  });
198
197
 
199
- test("closes Popover on click inside", () => {
198
+ test("closes Popover on click inside", async () => {
200
199
  render(<PopoverTestClicktoClose2 data={{ testid: testId}}/>)
201
200
  const btn = screen.getByText(/click me/i)
202
201
  fireEvent.click(btn);
203
202
  const kit = screen.getByText("Click Inside");
204
- expect(kit).toBeInTheDocument();
203
+ expect(kit).toBeInTheDocument();
205
204
  fireEvent.click(kit);
206
-
207
- expect(kit).not.toBeInTheDocument();
208
205
 
206
+ expect(kit).not.toBeInTheDocument;
209
207
  });
210
208
 
211
- test("closes Popover on click outside", () => {
209
+ test("closes Popover on click outside", async () => {
212
210
  render(<PopoverTestClicktoClose3 data={{ testid: testId}}/>)
213
211
  const btn = screen.getByText(/click me/i)
214
212
  fireEvent.click(btn);
215
213
  const kit = screen.getByText("Click Outside");
216
- expect(kit).toBeInTheDocument();
214
+ expect(kit).toBeInTheDocument();
217
215
  fireEvent.click(kit);
218
- expect(kit).toBeInTheDocument();
216
+ expect(kit).toBeInTheDocument();
219
217
  fireEvent.click(btn);
220
- expect(kit).not.toBeInTheDocument();
221
218
 
219
+ expect(kit).not.toBeInTheDocument;
222
220
  });
@@ -1,7 +1,7 @@
1
1
  import React, { useEffect } from 'react'
2
2
  import classnames from 'classnames'
3
3
  import { buildAriaProps, buildDataProps, buildHtmlProps } from '../utilities/props'
4
- import { globalProps } from '../utilities/globalProps'
4
+ import { globalProps, GlobalProps } from '../utilities/globalProps'
5
5
  import PbTable from '.'
6
6
 
7
7
  type TableProps = {
@@ -9,19 +9,20 @@ type TableProps = {
9
9
  children: React.ReactNode[] | React.ReactNode,
10
10
  className: string,
11
11
  collapse?: "sm" | "md" | "lg",
12
- container: boolean,
12
+ container?: boolean,
13
13
  dark?: boolean,
14
14
  data?: { [key: string]: string },
15
15
  dataTable: boolean,
16
- disableHover: boolean,
16
+ disableHover?: boolean,
17
17
  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
18
18
  id?: string,
19
- responsive: "collapse" | "scroll" | "none",
20
- singleLine: boolean,
21
- size: "sm" | "md" | "lg",
19
+ responsive?: "collapse" | "scroll" | "none",
20
+ singleLine?: boolean,
21
+ size?: "sm" | "md" | "lg",
22
22
  sticky?: boolean,
23
+ striped?: boolean,
23
24
  verticalBorder?: boolean,
24
- }
25
+ } & GlobalProps
25
26
 
26
27
  const Table = (props: TableProps) => {
27
28
  const {
@@ -40,6 +41,7 @@ const Table = (props: TableProps) => {
40
41
  singleLine = false,
41
42
  size = 'sm',
42
43
  sticky = false,
44
+ striped = false,
43
45
  verticalBorder = false,
44
46
  } = props
45
47
 
@@ -56,29 +58,30 @@ const Table = (props: TableProps) => {
56
58
 
57
59
  return (
58
60
  <table
59
- {...ariaProps}
60
- {...dataProps}
61
- {...htmlProps}
62
- className={classnames(
63
- 'pb_table',
64
- `table-${size}`,
65
- `table-responsive-${responsive}`,
66
- {
67
- 'table-card': container,
68
- 'table-dark': dark,
69
- 'data_table': dataTable,
70
- 'single-line': singleLine,
71
- 'no-hover': disableHover,
72
- 'sticky-header': sticky,
73
- },
74
- globalProps(props),
75
- tableCollapseCss,
76
- verticalBorderCss,
77
- className
78
- )}
79
- id={id}
61
+ {...ariaProps}
62
+ {...dataProps}
63
+ {...htmlProps}
64
+ className={classnames(
65
+ 'pb_table',
66
+ `table-${size}`,
67
+ `table-responsive-${responsive}`,
68
+ {
69
+ 'table-card': container,
70
+ 'table-dark': dark,
71
+ 'data_table': dataTable,
72
+ 'single-line': singleLine,
73
+ 'no-hover': disableHover,
74
+ 'sticky-header': sticky,
75
+ 'striped': striped,
76
+ },
77
+ globalProps(props),
78
+ tableCollapseCss,
79
+ verticalBorderCss,
80
+ className
81
+ )}
82
+ id={id}
80
83
  >
81
- {children}
84
+ {children}
82
85
  </table>
83
86
  )
84
87
  }
@@ -0,0 +1,48 @@
1
+ <%= pb_rails("table", props: { size: "sm", striped: true }) do %>
2
+ <thead>
3
+ <tr>
4
+ <th>Column 1</th>
5
+ <th>Column 2</th>
6
+ <th>Column 3</th>
7
+ <th>Column 4</th>
8
+ <th>Column 5</th>
9
+ </tr>
10
+ </thead>
11
+ <tbody>
12
+ <tr>
13
+ <td>Value 1</td>
14
+ <td>Value 2</td>
15
+ <td>Value 3</td>
16
+ <td>Value 4</td>
17
+ <td>Value 5</td>
18
+ </tr>
19
+ <tr>
20
+ <td>Value 1</td>
21
+ <td>Value 2</td>
22
+ <td>Value 3</td>
23
+ <td>Value 4</td>
24
+ <td>Value 5</td>
25
+ </tr>
26
+ <tr>
27
+ <td>Value 1</td>
28
+ <td>Value 2</td>
29
+ <td>Value 3</td>
30
+ <td>Value 4</td>
31
+ <td>Value 5</td>
32
+ </tr>
33
+ <tr>
34
+ <td>Value 1</td>
35
+ <td>Value 2</td>
36
+ <td>Value 3</td>
37
+ <td>Value 4</td>
38
+ <td>Value 5</td>
39
+ </tr>
40
+ <tr>
41
+ <td>Value 1</td>
42
+ <td>Value 2</td>
43
+ <td>Value 3</td>
44
+ <td>Value 4</td>
45
+ <td>Value 5</td>
46
+ </tr>
47
+ </tbody>
48
+ <% end %>
@@ -0,0 +1,58 @@
1
+ import React from "react"
2
+ import Table from "../_table"
3
+
4
+ const TableStriped = (props) => (
5
+ <Table
6
+ striped
7
+ {...props}
8
+ >
9
+ <thead>
10
+ <tr>
11
+ <th>{'Column 1'}</th>
12
+ <th>{'Column 2'}</th>
13
+ <th>{'Column 3'}</th>
14
+ <th>{'Column 4'}</th>
15
+ <th>{'Column 5'}</th>
16
+ </tr>
17
+ </thead>
18
+ <tbody>
19
+ <tr>
20
+ <td>{'Value 1'}</td>
21
+ <td>{'Value 2'}</td>
22
+ <td>{'Value 3'}</td>
23
+ <td>{'Value 4'}</td>
24
+ <td>{'Value 5'}</td>
25
+ </tr>
26
+ <tr>
27
+ <td>{'Value 1'}</td>
28
+ <td>{'Value 2'}</td>
29
+ <td>{'Value 3'}</td>
30
+ <td>{'Value 4'}</td>
31
+ <td>{'Value 5'}</td>
32
+ </tr>
33
+ <tr>
34
+ <td>{'Value 1'}</td>
35
+ <td>{'Value 2'}</td>
36
+ <td>{'Value 3'}</td>
37
+ <td>{'Value 4'}</td>
38
+ <td>{'Value 5'}</td>
39
+ </tr>
40
+ <tr>
41
+ <td>{'Value 1'}</td>
42
+ <td>{'Value 2'}</td>
43
+ <td>{'Value 3'}</td>
44
+ <td>{'Value 4'}</td>
45
+ <td>{'Value 5'}</td>
46
+ </tr>
47
+ <tr>
48
+ <td>{'Value 1'}</td>
49
+ <td>{'Value 2'}</td>
50
+ <td>{'Value 3'}</td>
51
+ <td>{'Value 4'}</td>
52
+ <td>{'Value 5'}</td>
53
+ </tr>
54
+ </tbody>
55
+ </Table>
56
+ )
57
+
58
+ export default TableStriped
@@ -0,0 +1 @@
1
+ Optionally pass the `striped` (boolean, defaults to false) prop to set odd rows to a contrasting background color. This helps with readability on larger tables with lots of data.
@@ -23,6 +23,7 @@ examples:
23
23
  - table_icon_buttons: Table with Icon Buttons
24
24
  - table_with_background_kit: Table With Background Kit
25
25
  - table_vertical_border: Vertical Borders
26
+ - table_striped: Striped Table
26
27
 
27
28
  react:
28
29
  - table_sm: Small
@@ -47,3 +48,4 @@ examples:
47
48
  - table_icon_buttons: Table with Icon Buttons
48
49
  - table_with_background_kit: Table With Background Kit
49
50
  - table_vertical_border: Vertical Borders
51
+ - table_striped: Striped Table
@@ -20,3 +20,4 @@ export { default as TableAlignmentShiftRow } from './_table_alignment_shift_row.
20
20
  export { default as TableAlignmentShiftData } from './_table_alignment_shift_data.jsx'
21
21
  export { default as TableWithBackgroundKit } from './_table_with_background_kit.jsx'
22
22
  export { default as TableVerticalBorder } from './_table_vertical_border.jsx'
23
+ export { default as TableStriped } from './_table_striped.jsx'
@@ -18,3 +18,4 @@
18
18
  @import "sticky_header";
19
19
  @import "vertical_border";
20
20
  @import "table_header";
21
+ @import "striped";
@@ -0,0 +1,19 @@
1
+ [class^=pb_table] {
2
+ &.striped {
3
+ tbody {
4
+ tr:nth-child(odd) {
5
+ background-color: $bg_light;
6
+ }
7
+ }
8
+ }
9
+
10
+ &.dark {
11
+ &.striped {
12
+ tbody {
13
+ tr:nth-child(odd) {
14
+ background-color: $bg_dark;
15
+ }
16
+ }
17
+ }
18
+ }
19
+ }