playbook_ui 13.20.0 → 13.21.0.pre.alpha.PBNTR224letuserresetrowexpansion2441

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/index.js +1 -1
  3. data/app/pb_kits/playbook/pb_advanced_table/Components/CollapsibleTrail.tsx +6 -1
  4. data/app/pb_kits/playbook/pb_advanced_table/Components/CustomCell.tsx +5 -2
  5. data/app/pb_kits/playbook/pb_advanced_table/SubKits/TableBody.tsx +2 -0
  6. data/app/pb_kits/playbook/pb_advanced_table/SubKits/TableHeader.tsx +2 -0
  7. data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss +45 -0
  8. data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx +4 -0
  9. data/app/pb_kits/playbook/pb_date/docs/_date_alignment_swift.md +26 -6
  10. data/app/pb_kits/playbook/pb_date/docs/_date_default_swift.md +27 -8
  11. data/app/pb_kits/playbook/pb_message/docs/_description.md +1 -1
  12. data/app/pb_kits/playbook/pb_nav/_subtle_mixin.scss +4 -0
  13. data/app/pb_kits/playbook/pb_table/_table.tsx +13 -0
  14. data/app/pb_kits/playbook/pb_table/docs/_table_side_highlight.jsx +24 -25
  15. data/app/pb_kits/playbook/pb_table/docs/_table_with_subcomponents.jsx +47 -0
  16. data/app/pb_kits/playbook/pb_table/docs/_table_with_subcomponents.md +7 -0
  17. data/app/pb_kits/playbook/pb_table/docs/_table_with_subcomponents_as_divs.html.erb +34 -0
  18. data/app/pb_kits/playbook/pb_table/docs/_table_with_subcomponents_as_divs.jsx +48 -0
  19. data/app/pb_kits/playbook/pb_table/docs/_table_with_subcomponents_as_divs.md +3 -0
  20. data/app/pb_kits/playbook/pb_table/docs/_table_with_subcomponents_rails.html.erb +34 -0
  21. data/app/pb_kits/playbook/pb_table/docs/_table_with_subcomponents_rails.md +7 -0
  22. data/app/pb_kits/playbook/pb_table/docs/example.yml +6 -2
  23. data/app/pb_kits/playbook/pb_table/docs/index.js +2 -0
  24. data/app/pb_kits/playbook/pb_table/styles/_striped.scss +2 -2
  25. data/app/pb_kits/playbook/pb_table/styles/_structure.scss +4 -2
  26. data/app/pb_kits/playbook/pb_table/subcomponents/_table_body.tsx +64 -0
  27. data/app/pb_kits/playbook/pb_table/subcomponents/_table_cell.tsx +66 -0
  28. data/app/pb_kits/playbook/pb_table/subcomponents/_table_head.tsx +64 -0
  29. data/app/pb_kits/playbook/pb_table/subcomponents/_table_header.tsx +66 -0
  30. data/app/pb_kits/playbook/pb_table/subcomponents/_table_row.tsx +74 -0
  31. data/app/pb_kits/playbook/pb_table/subcomponents/index.tsx +5 -0
  32. data/app/pb_kits/playbook/pb_table/table.test.js +142 -1
  33. data/app/pb_kits/playbook/pb_table/table_body.html.erb +17 -0
  34. data/app/pb_kits/playbook/pb_table/table_body.rb +15 -0
  35. data/app/pb_kits/playbook/pb_table/table_cell.html.erb +17 -0
  36. data/app/pb_kits/playbook/pb_table/table_cell.rb +17 -0
  37. data/app/pb_kits/playbook/pb_table/table_head.html.erb +17 -0
  38. data/app/pb_kits/playbook/pb_table/table_head.rb +15 -0
  39. data/app/pb_kits/playbook/pb_table/table_header.html.erb +49 -39
  40. data/app/pb_kits/playbook/pb_table/table_header.rb +8 -1
  41. data/app/pb_kits/playbook/pb_table/table_row.html.erb +17 -7
  42. data/app/pb_kits/playbook/pb_table/table_row.rb +8 -1
  43. data/app/pb_kits/playbook/pb_text_input/_text_input.tsx +9 -5
  44. data/app/pb_kits/playbook/pb_text_input/docs/_text_input_add_on.jsx +20 -0
  45. data/app/pb_kits/playbook/pb_user/docs/_user_presence_indicator_swift.md +30 -0
  46. data/app/pb_kits/playbook/pb_user/docs/_user_props_table.md +2 -1
  47. data/app/pb_kits/playbook/pb_user/docs/example.yml +1 -0
  48. data/app/pb_kits/playbook/utilities/_positioning.scss +48 -7
  49. data/app/pb_kits/playbook/utilities/globalProps.ts +23 -1
  50. data/dist/playbook-rails.js +6 -6
  51. data/lib/playbook/bottom.rb +33 -0
  52. data/lib/playbook/classnames.rb +4 -0
  53. data/lib/playbook/kit_base.rb +8 -0
  54. data/lib/playbook/left.rb +33 -0
  55. data/lib/playbook/right.rb +33 -0
  56. data/lib/playbook/top.rb +33 -0
  57. data/lib/playbook/version.rb +2 -2
  58. metadata +31 -8
  59. data/app/pb_kits/playbook/pb_table/_table_row.tsx +0 -47
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 89bd4e938528cafc5784b31a33e8164edd9b132e4f63f2ebbf2ba1160b07738f
4
- data.tar.gz: b87c8966e25b1b0b6fc2a01b84ae7164436a4f2be860f49c7414f667d1c5d40f
3
+ metadata.gz: c791ef532b5ab0046b1f23ecb0ee10c42d252a03e82ff41aa6a9d975ba74a4c6
4
+ data.tar.gz: c160c5caed43fb098b0ff002f03f5864fc0fb5b0fadd9cc4beeba5b84a55ce43
5
5
  SHA512:
6
- metadata.gz: 7991e682deaf82d106bb0e2a29bb029a6299eba736a0c3e85de50366efa998db4f30026c9fcfc3cf4f7c2ac95f2fddaa38a90add59379d7c7b0890e070e8850a
7
- data.tar.gz: 6f649c427896f5010b9721ffd3a0e0c9f282f6eb6c65c666cdbd2487aab6132175a7660b7e48bc89cbe1133736ac4a79d9911f053bb481193096f6032220e6c9
6
+ metadata.gz: ed5e0daf589b941e3fdf81c9afb1b82f92d499694b4d887f29c3562c1d3161b4ad96a1dcb37b16467b27bc94e66a2601862ce0aa88e4f58b02d99848e2e2a6e3
7
+ data.tar.gz: 7a6cad2d2ff14437be085b01b78b1292dd14a464de5b27a2da662db19699050da4dbe7de3fbe7a6feac61d6032093db39a01ea38e862fe574ef8e6d85cbc5ab5
@@ -93,7 +93,7 @@ export { default as StarRating } from './pb_star_rating/_star_rating'
93
93
  export { default as StatChange } from './pb_stat_change/_stat_change'
94
94
  export { default as StatValue } from './pb_stat_value/_stat_value'
95
95
  export { default as Table } from './pb_table/_table'
96
- export { default as TableRow } from './pb_table/_table_row'
96
+ export { default as TableRow } from './pb_table/subcomponents/_table_row'
97
97
  export { default as TextInput } from './pb_text_input/_text_input'
98
98
  export { default as Textarea } from './pb_textarea/_textarea'
99
99
  export { default as Time } from './pb_time/_time'
@@ -11,7 +11,12 @@ const CollapsibleTrail = ({ leftOffset }: { leftOffset: number }) => {
11
11
  backgroundColor: "#E4E8F0",
12
12
  }
13
13
 
14
- return <div style={style} />
14
+ return (
15
+ <div
16
+ className="collapsible-trail"
17
+ style={style}
18
+ />
19
+ )
15
20
  }
16
21
 
17
22
  // Updated function to render multiple trails depending on depth
@@ -22,11 +22,14 @@ export const CustomCell = ({
22
22
  row,
23
23
  value,
24
24
  }: CustomCellProps & GlobalProps) => {
25
- const { setExpanded, expanded, inlineRowLoading } = useContext(AdvancedTableContext);
25
+ const { setExpanded, expanded, expandedControl, inlineRowLoading } = useContext(AdvancedTableContext);
26
26
 
27
27
  const handleOnExpand = (row: Row<DataType>) => {
28
28
  onRowToggleClick && onRowToggleClick(row);
29
- setExpanded({ ...expanded, [row.id]: !row.getIsExpanded() });
29
+
30
+ if (!expandedControl) {
31
+ setExpanded({ ...expanded, [row.id]: !row.getIsExpanded() });
32
+ }
30
33
  };
31
34
  const RowHasChildren = row.original.children ? true : false
32
35
  const renderButton = inlineRowLoading ? RowHasChildren : row.getCanExpand()
@@ -15,6 +15,7 @@ import { DataType } from "../Utilities/types"
15
15
  type TableBodyProps = {
16
16
  className?: string;
17
17
  collapsibleTrail?: boolean
18
+ dark?: boolean,
18
19
  id?: string;
19
20
  subRowHeaders?: string[]
20
21
  }
@@ -22,6 +23,7 @@ type TableBodyProps = {
22
23
  export const TableBody = ({
23
24
  className,
24
25
  collapsibleTrail = true,
26
+ dark = false,
25
27
  id,
26
28
  subRowHeaders,
27
29
  ...props
@@ -10,6 +10,7 @@ import { DataType } from "../Utilities/types"
10
10
  type TableHeaderProps = {
11
11
  children?: React.ReactNode | React.ReactNode[]
12
12
  className?: string
13
+ dark?: boolean,
13
14
  enableSorting?: boolean
14
15
  id?: string;
15
16
  sortIcon?: string | string[]
@@ -18,6 +19,7 @@ type TableHeaderProps = {
18
19
  export const TableHeader = ({
19
20
  children,
20
21
  className,
22
+ dark = false,
21
23
  enableSorting = false,
22
24
  id,
23
25
  sortIcon = ["arrow-up-short-wide", "arrow-down-short-wide"],
@@ -95,4 +95,49 @@
95
95
  border-right: $transparent !important;
96
96
  }
97
97
  }
98
+
99
+ &.dark {
100
+ .bg-white {
101
+ background: $bg_dark_card;
102
+ }
103
+
104
+ .bg-silver {
105
+ background: $bg_dark;
106
+ }
107
+
108
+ .table-header-cells:first-child, td:first-child {
109
+ box-shadow: 1px 0px 0px 0px $border_dark !important;
110
+ }
111
+
112
+ .collapsible-trail {
113
+ background-color: $border_dark !important;
114
+ }
115
+
116
+ .sort-button-icon, .header-sort-button > div {
117
+ color: $white !important;
118
+ }
119
+
120
+ .gray-icon {
121
+ color: $text_dk_light !important;
122
+ }
123
+
124
+ .sticky-header {
125
+ background-color: $bg_dark_card;
126
+ }
127
+
128
+ .loading-toggle-icon,
129
+ .loading-cell {
130
+ &::after {
131
+ background-color: $bg_dark !important;
132
+ background-image: linear-gradient(
133
+ to left,
134
+ $bg_dark 0%,
135
+ lighten($bg_dark, 1%) 50%,
136
+ lighten($bg_dark, 2%) 60%,
137
+ $bg_dark 80%,
138
+ $bg_dark 100%
139
+ ) !important;
140
+ }
141
+ }
142
+ }
98
143
  }
@@ -27,6 +27,7 @@ type AdvancedTableProps = {
27
27
  children?: React.ReactNode | React.ReactNode[];
28
28
  className?: string;
29
29
  columnDefinitions: DataType[];
30
+ dark?: boolean,
30
31
  data?: { [key: string]: string };
31
32
  enableToggleExpansion?: "all" | "header" | "none";
32
33
  expandedControl?: DataType;
@@ -50,6 +51,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
50
51
  children,
51
52
  className,
52
53
  columnDefinitions,
54
+ dark = false,
53
55
  data = {},
54
56
  enableToggleExpansion = "header",
55
57
  expandedControl,
@@ -220,6 +222,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
220
222
  columnDefinitions,
221
223
  enableToggleExpansion,
222
224
  expanded,
225
+ expandedControl,
223
226
  handleExpandOrCollapse,
224
227
  inlineRowLoading,
225
228
  loading,
@@ -231,6 +234,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
231
234
  >
232
235
  <Table
233
236
  className={`${loading ? "content-loading" : ""}`}
237
+ dark={dark}
234
238
  dataTable
235
239
  numberSpacing="tabular"
236
240
  responsive="none"
@@ -1,11 +1,31 @@
1
1
  ![date-alignment](https://github.com/powerhome/playbook/assets/92755007/094761cb-5151-4de5-a8e1-f905455c2aca)
2
2
 
3
3
  ```swift
4
-
5
- VStack(spacing: Spacing.small) {
6
- PBDate(Date(), variant: .standard, typography: .title4, alignment: .leading)
7
- PBDate(Date(), variant: .withIcon(isStandard: true), typography: .title4, iconSize: .x1, alignment: .center)
8
- PBDate(Date(), variant: .short, typography: .title4, alignment: .trailing)
4
+ VStack(spacing: Spacing.small) {
5
+ HStack {
6
+ PBDate(
7
+ Date().makeDate(year: 1995, month: 12, day: 25),
8
+ variant: .standard,
9
+ typography: .title4
10
+ )
11
+ }
12
+ .frame(maxWidth: .infinity, alignment: .leading)
13
+ HStack {
14
+ PBDate(
15
+ Date().makeDate(year: 2020, month: 12, day: 25),
16
+ variant: .withIcon(isStandard: true),
17
+ typography: .title4,
18
+ iconSize: .x1
19
+ )
20
+ }
21
+ .frame(maxWidth: .infinity, alignment: .center)
22
+ HStack {
23
+ PBDate(
24
+ Date(),
25
+ variant: .short,
26
+ typography: .title4
27
+ )
28
+ }
29
+ .frame(maxWidth: .infinity, alignment: .trailing)
9
30
  }
10
-
11
31
  ```
@@ -2,15 +2,34 @@
2
2
 
3
3
 
4
4
  ```swift
5
-
6
5
  VStack(alignment: .leading, spacing: Spacing.small) {
7
- PBDate(Date(), variant: .short)
8
- PBDate(Date(), variant: .dayDate)
9
- PBDate(Date(), variant: .standard)
6
+ PBDate(
7
+ Date(),
8
+ variant: .short
9
+ )
10
+ PBDate(
11
+ Date().makeDate(year: 2012, month: 8, day: 3),
12
+ variant: .standard
13
+ )
14
+ PBDate(
15
+ Date().makeDate(year: 2017, month: 12, day: 3),
16
+ variant: .dayDate(showYear: true)
17
+ )
10
18
  Spacer()
11
- PBDate(Date(), variant: .short, typography: .title4)
12
- PBDate(Date(), variant: .dayDate, typography: .title4)
13
- PBDate(Date(), variant: .standard, typography: .title4)
19
+ PBDate(
20
+ Date(),
21
+ variant: .short,
22
+ typography: .title4
23
+ )
24
+ PBDate(
25
+ Date().makeDate(year: 2012, month: 8, day: 3),
26
+ variant: .standard,
27
+ typography: .title4
28
+ )
29
+ PBDate(
30
+ Date().makeDate(year: 2017, month: 12, day: 3),
31
+ variant: .dayDate(showYear: true),
32
+ typography: .title4
33
+ )
14
34
  }
15
-
16
35
  ```
@@ -1 +1 @@
1
- This multi kit consist of a an avatar, a status, a caption, a body text, and a time stamp. All which can be optional.
1
+ This multi kit consists of a an avatar, a status, a caption, a body text, and a time stamp, all of which are optional.
@@ -40,6 +40,10 @@
40
40
  &[class*="_active"] {
41
41
  color: $primary;
42
42
  letter-spacing: normal;
43
+
44
+ [class*="_icon_right"] {
45
+ color: $white;
46
+ }
43
47
  }
44
48
  &[class*="dark"] {
45
49
  [class*="_item_text"],
@@ -3,6 +3,13 @@ import classnames from 'classnames'
3
3
  import { buildAriaProps, buildDataProps, buildHtmlProps } from '../utilities/props'
4
4
  import { globalProps, GlobalProps } from '../utilities/globalProps'
5
5
  import PbTable from '.'
6
+ import {
7
+ TableHead,
8
+ TableHeader,
9
+ TableBody,
10
+ TableRow,
11
+ TableCell,
12
+ } from "./subcomponents";
6
13
 
7
14
  type TableProps = {
8
15
  aria?: { [key: string]: string },
@@ -105,4 +112,10 @@ const Table = (props: TableProps) => {
105
112
  )
106
113
  }
107
114
 
115
+ Table.Head = TableHead
116
+ Table.Header = TableHeader
117
+ Table.Body = TableBody
118
+ Table.Row = TableRow
119
+ Table.Cell = TableCell
120
+
108
121
  export default Table
@@ -1,7 +1,6 @@
1
1
  import React from 'react'
2
2
 
3
3
  import Table from '../_table'
4
- import TableRow from '../_table_row'
5
4
 
6
5
  const TableSideHighlight = (props) => {
7
6
  return (
@@ -20,7 +19,7 @@ const TableSideHighlight = (props) => {
20
19
  </tr>
21
20
  </thead>
22
21
  <tbody>
23
- <TableRow
22
+ <Table.Row
24
23
  sideHighlightColor="product_1_highlight"
25
24
  {...props}
26
25
  >
@@ -29,8 +28,8 @@ const TableSideHighlight = (props) => {
29
28
  <td>{'Value 3'}</td>
30
29
  <td>{'Value 4'}</td>
31
30
  <td>{'Value 5'}</td>
32
- </TableRow>
33
- <TableRow
31
+ </Table.Row>
32
+ <Table.Row
34
33
  sideHighlightColor="product_2_highlight"
35
34
  {...props}
36
35
  >
@@ -39,8 +38,8 @@ const TableSideHighlight = (props) => {
39
38
  <td>{'Value 3'}</td>
40
39
  <td>{'Value 4'}</td>
41
40
  <td>{'Value 5'}</td>
42
- </TableRow>
43
- <TableRow
41
+ </Table.Row>
42
+ <Table.Row
44
43
  sideHighlightColor="product_3_highlight"
45
44
  {...props}
46
45
  >
@@ -49,8 +48,8 @@ const TableSideHighlight = (props) => {
49
48
  <td>{'Value 3'}</td>
50
49
  <td>{'Value 4'}</td>
51
50
  <td>{'Value 5'}</td>
52
- </TableRow>
53
- <TableRow
51
+ </Table.Row>
52
+ <Table.Row
54
53
  sideHighlightColor="none"
55
54
  {...props}
56
55
  >
@@ -59,7 +58,7 @@ const TableSideHighlight = (props) => {
59
58
  <td>{'Value 3'}</td>
60
59
  <td>{'Value 4'}</td>
61
60
  <td>{'Value 5'}</td>
62
- </TableRow>
61
+ </Table.Row>
63
62
  </tbody>
64
63
  </Table>
65
64
 
@@ -79,7 +78,7 @@ const TableSideHighlight = (props) => {
79
78
  </tr>
80
79
  </thead>
81
80
  <tbody>
82
- <TableRow
81
+ <Table.Row
83
82
  sideHighlightColor="success"
84
83
  {...props}
85
84
  >
@@ -88,8 +87,8 @@ const TableSideHighlight = (props) => {
88
87
  <td>{'Value 3'}</td>
89
88
  <td>{'Value 4'}</td>
90
89
  <td>{'Value 5'}</td>
91
- </TableRow>
92
- <TableRow
90
+ </Table.Row>
91
+ <Table.Row
93
92
  sideHighlightColor="warning"
94
93
  {...props}
95
94
  >
@@ -98,8 +97,8 @@ const TableSideHighlight = (props) => {
98
97
  <td>{'Value 3'}</td>
99
98
  <td>{'Value 4'}</td>
100
99
  <td>{'Value 5'}</td>
101
- </TableRow>
102
- <TableRow
100
+ </Table.Row>
101
+ <Table.Row
103
102
  sideHighlightColor="error"
104
103
  {...props}
105
104
  >
@@ -108,8 +107,8 @@ const TableSideHighlight = (props) => {
108
107
  <td>{'Value 3'}</td>
109
108
  <td>{'Value 4'}</td>
110
109
  <td>{'Value 5'}</td>
111
- </TableRow>
112
- <TableRow
110
+ </Table.Row>
111
+ <Table.Row
113
112
  sideHighlightColor="none"
114
113
  {...props}
115
114
  >
@@ -118,7 +117,7 @@ const TableSideHighlight = (props) => {
118
117
  <td>{'Value 3'}</td>
119
118
  <td>{'Value 4'}</td>
120
119
  <td>{'Value 5'}</td>
121
- </TableRow>
120
+ </Table.Row>
122
121
  </tbody>
123
122
  </Table>
124
123
 
@@ -138,7 +137,7 @@ const TableSideHighlight = (props) => {
138
137
  </tr>
139
138
  </thead>
140
139
  <tbody>
141
- <TableRow
140
+ <Table.Row
142
141
  sideHighlightColor="category_1"
143
142
  {...props}
144
143
  >
@@ -147,8 +146,8 @@ const TableSideHighlight = (props) => {
147
146
  <td>{'Value 3'}</td>
148
147
  <td>{'Value 4'}</td>
149
148
  <td>{'Value 5'}</td>
150
- </TableRow>
151
- <TableRow
149
+ </Table.Row>
150
+ <Table.Row
152
151
  sideHighlightColor="category_2"
153
152
  {...props}
154
153
  >
@@ -157,8 +156,8 @@ const TableSideHighlight = (props) => {
157
156
  <td>{'Value 3'}</td>
158
157
  <td>{'Value 4'}</td>
159
158
  <td>{'Value 5'}</td>
160
- </TableRow>
161
- <TableRow
159
+ </Table.Row>
160
+ <Table.Row
162
161
  sideHighlightColor="category_3"
163
162
  {...props}
164
163
  >
@@ -167,8 +166,8 @@ const TableSideHighlight = (props) => {
167
166
  <td>{'Value 3'}</td>
168
167
  <td>{'Value 4'}</td>
169
168
  <td>{'Value 5'}</td>
170
- </TableRow>
171
- <TableRow
169
+ </Table.Row>
170
+ <Table.Row
172
171
  sideHighlightColor="none"
173
172
  {...props}
174
173
  >
@@ -177,7 +176,7 @@ const TableSideHighlight = (props) => {
177
176
  <td>{'Value 3'}</td>
178
177
  <td>{'Value 4'}</td>
179
178
  <td>{'Value 5'}</td>
180
- </TableRow>
179
+ </Table.Row>
181
180
  </tbody>
182
181
  </Table>
183
182
  </div>
@@ -0,0 +1,47 @@
1
+ import React from 'react'
2
+
3
+ import Table from '../_table'
4
+
5
+ const TableWithSubcomponents = (props) => {
6
+ return (
7
+ <Table
8
+ size="sm"
9
+ {...props}
10
+ >
11
+ <Table.Head>
12
+ <Table.Row>
13
+ <Table.Header>{'Column 1'}</Table.Header>
14
+ <Table.Header>{'Column 2'}</Table.Header>
15
+ <Table.Header>{'Column 3'}</Table.Header>
16
+ <Table.Header>{'Column 4'}</Table.Header>
17
+ <Table.Header>{'Column 5'}</Table.Header>
18
+ </Table.Row>
19
+ </Table.Head>
20
+ <Table.Body>
21
+ <Table.Row>
22
+ <Table.Cell>{'Value 1'}</Table.Cell>
23
+ <Table.Cell>{'Value 2'}</Table.Cell>
24
+ <Table.Cell>{'Value 3'}</Table.Cell>
25
+ <Table.Cell>{'Value 4'}</Table.Cell>
26
+ <Table.Cell>{'Value 5'}</Table.Cell>
27
+ </Table.Row>
28
+ <Table.Row>
29
+ <Table.Cell>{'Value 1'}</Table.Cell>
30
+ <Table.Cell>{'Value 2'}</Table.Cell>
31
+ <Table.Cell>{'Value 3'}</Table.Cell>
32
+ <Table.Cell>{'Value 4'}</Table.Cell>
33
+ <Table.Cell>{'Value 5'}</Table.Cell>
34
+ </Table.Row>
35
+ <Table.Row>
36
+ <Table.Cell>{'Value 1'}</Table.Cell>
37
+ <Table.Cell>{'Value 2'}</Table.Cell>
38
+ <Table.Cell>{'Value 3'}</Table.Cell>
39
+ <Table.Cell>{'Value 4'}</Table.Cell>
40
+ <Table.Cell>{'Value 5'}</Table.Cell>
41
+ </Table.Row>
42
+ </Table.Body>
43
+ </Table>
44
+ )
45
+ }
46
+
47
+ export default TableWithSubcomponents
@@ -0,0 +1,7 @@
1
+ You can optionally build your table using our sub-components, which map to their respective html table elements:
2
+
3
+ `Table.Head` = `thead`
4
+ `Table.Body` = `tbody`
5
+ `Table.Row` = `tr`
6
+ `Table.Header` = `th`
7
+ `Table.Cell` = `td`
@@ -0,0 +1,34 @@
1
+ <%= pb_rails("table", props: { size: "sm", tag:"div" }) do %>
2
+ <%= pb_rails("table/table_head", props: {tag:"div"}) do %>
3
+ <%= pb_rails("table/table_row", props: {tag:"div"}) do %>
4
+ <%= pb_rails("table/table_header", props: { text: "Column 1", tag:"div"}) %>
5
+ <%= pb_rails("table/table_header", props: { text: "Column 2", tag:"div"}) %>
6
+ <%= pb_rails("table/table_header", props: { text: "Column 3", tag:"div"}) %>
7
+ <%= pb_rails("table/table_header", props: { text: "Column 4", tag:"div"}) %>
8
+ <%= pb_rails("table/table_header", props: { text: "Column 5", tag:"div"}) %>
9
+ <% end %>
10
+ <% end %>
11
+ <%= pb_rails("table/table_body", props: {tag:"div"}) do %>
12
+ <%= pb_rails("table/table_row", props: {tag:"div"}) do %>
13
+ <%= pb_rails("table/table_cell", props: { text: "Value 1", tag:"div"}) %>
14
+ <%= pb_rails("table/table_cell", props: { text: "Value 2", tag:"div"}) %>
15
+ <%= pb_rails("table/table_cell", props: { text: "Value 3", tag:"div"}) %>
16
+ <%= pb_rails("table/table_cell", props: { text: "Value 4", tag:"div"}) %>
17
+ <%= pb_rails("table/table_cell", props: { text: "Value 5", tag:"div"}) %>
18
+ <% end %>
19
+ <%= pb_rails("table/table_row", props: {tag:"div"}) do %>
20
+ <%= pb_rails("table/table_cell", props: { text: "Value 1", tag:"div"}) %>
21
+ <%= pb_rails("table/table_cell", props: { text: "Value 2", tag:"div"}) %>
22
+ <%= pb_rails("table/table_cell", props: { text: "Value 3", tag:"div"}) %>
23
+ <%= pb_rails("table/table_cell", props: { text: "Value 4", tag:"div"}) %>
24
+ <%= pb_rails("table/table_cell", props: { text: "Value 5", tag:"div"}) %>
25
+ <% end %>
26
+ <%= pb_rails("table/table_row", props: {tag:"div"}) do %>
27
+ <%= pb_rails("table/table_cell", props: { text: "Value 1", tag:"div"}) %>
28
+ <%= pb_rails("table/table_cell", props: { text: "Value 2", tag:"div"}) %>
29
+ <%= pb_rails("table/table_cell", props: { text: "Value 3", tag:"div"}) %>
30
+ <%= pb_rails("table/table_cell", props: { text: "Value 4", tag:"div"}) %>
31
+ <%= pb_rails("table/table_cell", props: { text: "Value 5", tag:"div"}) %>
32
+ <% end %>
33
+ <% end %>
34
+ <% end %>
@@ -0,0 +1,48 @@
1
+ import React from 'react'
2
+
3
+ import Table from '../_table'
4
+
5
+ const TableWithSubcomponentsAsDivs = (props) => {
6
+ return (
7
+ <Table
8
+ size="sm"
9
+ tag="div"
10
+ {...props}
11
+ >
12
+ <Table.Head tag="div">
13
+ <Table.Row tag="div">
14
+ <Table.Header tag="div">{'Column 1'}</Table.Header>
15
+ <Table.Header tag="div">{'Column 2'}</Table.Header>
16
+ <Table.Header tag="div">{'Column 3'}</Table.Header>
17
+ <Table.Header tag="div">{'Column 4'}</Table.Header>
18
+ <Table.Header tag="div">{'Column 5'}</Table.Header>
19
+ </Table.Row>
20
+ </Table.Head>
21
+ <Table.Body tag="div">
22
+ <Table.Row tag="div">
23
+ <Table.Cell tag="div">{'Value 1'}</Table.Cell>
24
+ <Table.Cell tag="div">{'Value 2'}</Table.Cell>
25
+ <Table.Cell tag="div">{'Value 3'}</Table.Cell>
26
+ <Table.Cell tag="div">{'Value 4'}</Table.Cell>
27
+ <Table.Cell tag="div">{'Value 5'}</Table.Cell>
28
+ </Table.Row>
29
+ <Table.Row tag="div">
30
+ <Table.Cell tag="div">{'Value 1'}</Table.Cell>
31
+ <Table.Cell tag="div">{'Value 2'}</Table.Cell>
32
+ <Table.Cell tag="div">{'Value 3'}</Table.Cell>
33
+ <Table.Cell tag="div">{'Value 4'}</Table.Cell>
34
+ <Table.Cell tag="div">{'Value 5'}</Table.Cell>
35
+ </Table.Row>
36
+ <Table.Row>
37
+ <Table.Cell tag="div">{'Value 1'}</Table.Cell>
38
+ <Table.Cell tag="div">{'Value 2'}</Table.Cell>
39
+ <Table.Cell tag="div">{'Value 3'}</Table.Cell>
40
+ <Table.Cell tag="div">{'Value 4'}</Table.Cell>
41
+ <Table.Cell tag="div">{'Value 5'}</Table.Cell>
42
+ </Table.Row>
43
+ </Table.Body>
44
+ </Table>
45
+ )
46
+ }
47
+
48
+ export default TableWithSubcomponentsAsDivs
@@ -0,0 +1,3 @@
1
+ Optionally build your table with divs by passing `div` to the `tag` prop of all* your sub-components.
2
+
3
+ *NOTE: The `tag` prop defaults to `table`, which returns html elements. If divs are desired, sub-components must be used and all table elements, including the initial kit call, must use `div` as their `tag` in order for the table to render properly.
@@ -0,0 +1,34 @@
1
+ <%= pb_rails("table", props: { size: "sm" }) do %>
2
+ <%= pb_rails("table/table_head") do %>
3
+ <%= pb_rails("table/table_row") do %>
4
+ <%= pb_rails("table/table_header", props: { text: "Column 1"}) %>
5
+ <%= pb_rails("table/table_header", props: { text: "Column 2"}) %>
6
+ <%= pb_rails("table/table_header", props: { text: "Column 3"}) %>
7
+ <%= pb_rails("table/table_header", props: { text: "Column 4"}) %>
8
+ <%= pb_rails("table/table_header", props: { text: "Column 5"}) %>
9
+ <% end %>
10
+ <% end %>
11
+ <%= pb_rails("table/table_body") do %>
12
+ <%= pb_rails("table/table_row") do %>
13
+ <%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
14
+ <%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
15
+ <%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
16
+ <%= pb_rails("table/table_cell", props: { text: "Value 4"}) %>
17
+ <%= pb_rails("table/table_cell", props: { text: "Value 5"}) %>
18
+ <% end %>
19
+ <%= pb_rails("table/table_row") do %>
20
+ <%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
21
+ <%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
22
+ <%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
23
+ <%= pb_rails("table/table_cell", props: { text: "Value 4"}) %>
24
+ <%= pb_rails("table/table_cell", props: { text: "Value 5"}) %>
25
+ <% end %>
26
+ <%= pb_rails("table/table_row") do %>
27
+ <%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
28
+ <%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
29
+ <%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
30
+ <%= pb_rails("table/table_cell", props: { text: "Value 4"}) %>
31
+ <%= pb_rails("table/table_cell", props: { text: "Value 5"}) %>
32
+ <% end %>
33
+ <% end %>
34
+ <% end %>
@@ -0,0 +1,7 @@
1
+ You can optionally build your table using our sub-components, which map to their respective html table elements:
2
+
3
+ `table_head` = `thead`
4
+ `table_body` = `tbody`
5
+ `table_row` = `tr`
6
+ `table_header` = `th`
7
+ `table_cell` = `td`