playbook_ui_docs 13.19.0.pre.alpha.PBNTR207tabledivsupport2261 → 13.19.0.pre.alpha.PBNTR211tablekitsubcomponentsreact2318

Sign up to get free protection for your applications and to get access to all the features.
Files changed (13) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_icon/docs/_icon_custom.html.erb +5 -11
  3. data/app/pb_kits/playbook/pb_icon/docs/_icon_custom.jsx +44 -18
  4. data/app/pb_kits/playbook/pb_icon/docs/_icon_custom.md +4 -8
  5. data/app/pb_kits/playbook/pb_table/docs/_table_side_highlight.jsx +24 -25
  6. data/app/pb_kits/playbook/pb_table/docs/_table_with_subcomponents.html.erb +34 -0
  7. data/app/pb_kits/playbook/pb_table/docs/_table_with_subcomponents.jsx +47 -0
  8. data/app/pb_kits/playbook/pb_table/docs/_table_with_subcomponents_as_divs.html.erb +34 -0
  9. data/app/pb_kits/playbook/pb_table/docs/_table_with_subcomponents_as_divs.jsx +48 -0
  10. data/app/pb_kits/playbook/pb_table/docs/example.yml +7 -2
  11. data/app/pb_kits/playbook/pb_table/docs/index.js +2 -0
  12. data/dist/playbook-doc.js +10 -10
  13. metadata +6 -2
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 371298dc24bb6261c47235a1a1fc96535f40895bf2e367d2c74a0a2f2194856b
4
- data.tar.gz: 27af54cb4a1555edd946811c6a9d790f9d15a12ffb83755bde53a51814147ad6
3
+ metadata.gz: 639d8add731fcd49d52b2b886e59010f149d8885556a6929335d13987ff2b22d
4
+ data.tar.gz: 4e76cf73da05763edf436140d195fabd9a1a2650c845ee0b759b369edf87ba4d
5
5
  SHA512:
6
- metadata.gz: af4a307e32b77ee025b590b0c8e4c050b85c56a828d79ebdc526687503be7eaf3f609f766a7e6111294fb01d166433123de1a7481f84b9baf5eb11632fe74849
7
- data.tar.gz: 00d49100858c5b291a86fb2bfe30be7bbbebaf5c7c447d07b31c8077036bf9694ee7881b4092cc23e2487a6e97b5131780515f32a1d2ff7fe5612437966cf5ac
6
+ metadata.gz: a77069196e4316d1b468665a3a533a7854fb1bcfa4a31208af840055939d40ba393522a01d7ef0d4f4a18b9abd016b76b782bfcacb1c65b585a3b8946846464b
7
+ data.tar.gz: fbbd0b7de851e91b4cbce7c8c5752db0737945f53dc669d791972ae8ab17838e685fc784fcf98b9a2769b531d5f7aea04da2fc0925327313045fdce5d6ae8d3e
data/app/pb_kits/playbook/pb_icon/docs/_icon_custom.html.erb CHANGED
@@ -2,15 +2,9 @@
2
2
  <div class="icon-wrapper">
3
3
 
4
4
  <% svg_url = "https://upload.wikimedia.org/wikipedia/commons/3/3b/Wrench_font_awesome.svg" %>
5
- <p><%= pb_rails("icon", props: { custom_icon: svg_url } ) %></p>
6
- <p><%= pb_rails("icon", props: { rotation: 90, custom_icon: svg_url, size: "2x" } ) %></p>
7
- <p><%= pb_rails("icon", props: { spin: true, custom_icon: svg_url, size: "3x" } ) %></p>
8
- <p><%= pb_rails("icon", props: { size: "5x", custom_icon: svg_url } ) %></p>
9
- <p><%= pb_rails("icon", props: { flip: "horizontal", size: "5x", custom_icon: svg_url } ) %></p>
10
-
11
- <%= pb_rails("body", props: {
12
- text: "Custom icons are compatible with other icon props (size, rotation,
13
- spin, flip, etc). Their SVG fill colors will be inherited from
14
- parent element's css color properties."
15
- } ) %>
5
+ <p><%= pb_rails("icon", props: { icon: svg_url } ) %></p>
6
+ <p><%= pb_rails("icon", props: { rotation: 90, icon: svg_url, size: "2x" } ) %></p>
7
+ <p><%= pb_rails("icon", props: { spin: true, icon: svg_url, size: "3x" } ) %></p>
8
+ <p><%= pb_rails("icon", props: { size: "5x", icon: svg_url } ) %></p>
9
+ <p><%= pb_rails("icon", props: { flip: "horizontal", size: "5x", icon: svg_url } ) %></p>
16
10
  </div>
data/app/pb_kits/playbook/pb_icon/docs/_icon_custom.jsx CHANGED
@@ -1,33 +1,59 @@
1
1
  import React from 'react'
2
2
  import { Icon } from '../../'
3
3
 
4
- // import Icons as config from 'power-icons'
5
4
  const config = {
6
- moon: (
7
- <svg
8
- ariaHidden="true"
9
- focusable="false"
10
- role="img"
11
- viewBox="0 0 512 512"
5
+ icon: (
6
+ <svg viewBox="0 -256 1792 1792"
12
7
  xmlns="http://www.w3.org/2000/svg"
13
8
  >
14
- <path
15
- d="M448 0H64C28.7 0 0 28.7 0 64v288c0 35.3 28.7 64 64 64h96v84c0 7.1 5.8 12 12 12 2.4 0 4.9-.7 7.1-2.4L304 416h144c35.3 0 64-28.7 64-64V64c0-35.3-28.7-64-64-64zm16 352c0 8.8-7.2 16-16 16H288l-12.8 9.6L208 428v-60H64c-8.8 0-16-7.2-16-16V64c0-8.8 7.2-16 16-16h384c8.8 0 16 7.2 16 16v288zM336 184h-56v-56c0-8.8-7.2-16-16-16h-16c-8.8 0-16 7.2-16 16v56h-56c-8.8 0-16 7.2-16 16v16c0 8.8 7.2 16 16 16h56v56c0 8.8 7.2 16 16 16h16c8.8 0 16-7.2 16-16v-56h56c8.8 0 16-7.2 16-16v-16c0-8.8-7.2-16-16-16z"
16
- fill="currentColor"
17
- />
9
+ <g transform="matrix(1,0,0,-1,53.152542,1217.0847)">
10
+ <path d="m 384,64 q 0,26 -19,45 -19,19 -45,19 -26,0 -45,-19 -19,-19 -19,-45 0,-26 19,-45 19,-19 45,-19 26,0 45,19 19,19 19,45 z m 644,420 -682,-682 q -37,-37 -90,-37 -52,0 -91,37 L 59,-90 Q 21,-54 21,0 21,53 59,91 L 740,772 Q 779,674 854.5,598.5 930,523 1028,484 z m 634,435 q 0,-39 -23,-106 Q 1592,679 1474.5,595.5 1357,512 1216,512 1031,512 899.5,643.5 768,775 768,960 q 0,185 131.5,316.5 131.5,131.5 316.5,131.5 58,0 121.5,-16.5 63.5,-16.5 107.5,-46.5 16,-11 16,-28 0,-17 -16,-28 L 1152,1120 V 896 l 193,-107 q 5,3 79,48.5 74,45.5 135.5,81 61.5,35.5 70.5,35.5 15,0 23.5,-10 8.5,-10 8.5,-25 z" />
11
+ </g>
18
12
  </svg>
19
13
  ),
20
14
  }
21
15
 
22
16
  const IconCustom = (props) => {
23
17
  return (
24
- <div>
25
- <Icon
26
- customIcon={config.moon}
27
- size="7x"
28
- {...props}
29
- />
30
- </div>
18
+ <React.Fragment>
19
+ <p>
20
+ <Icon
21
+ icon={config.icon}
22
+ {...props}
23
+ />
24
+ </p>
25
+ <p>
26
+ <Icon
27
+ icon={config.icon}
28
+ rotation={90}
29
+ size="2x"
30
+ {...props}
31
+ />
32
+ </p>
33
+ <p>
34
+ <Icon
35
+ icon={config.icon}
36
+ size="3x"
37
+ spin
38
+ {...props}
39
+ />
40
+ </p>
41
+ <p>
42
+ <Icon
43
+ icon={config.icon}
44
+ size="5x"
45
+ {...props}
46
+ />
47
+ </p>
48
+ <p>
49
+ <Icon
50
+ flip="horizontal"
51
+ icon={config.icon}
52
+ size="5x"
53
+ {...props}
54
+ />
55
+ </p>
56
+ </React.Fragment>
31
57
  )
32
58
  }
33
59
 
data/app/pb_kits/playbook/pb_icon/docs/_icon_custom.md CHANGED
@@ -4,16 +4,12 @@ When using custom icons it is important to introduce a "clean" SVG. In order to
4
4
 
5
5
  Attributes must be React compatible e.g. <code>xmlns:xlink</code> should be <code>xmlnsXlink</code> and so on. <strong>There should be no hyphenated attributes and no semi-colons!.</strong>
6
6
 
7
- Fill colors with regards to <code>g</code> or <code>path</code> nodes, e.g. <code>fill="black"</code>, should be replaced with <code>currentColor</code> ala <code>fill="currentColor"</code>. Your mileage may vary depending on the complexity of your SVG.
7
+ Fill colors with regards to <code>g</code> or <code>path</code> nodes, e.g. <code>fill="black"</code>, should be replaced with <code>currentColor</code> ala <code>fill="currentColor"</code>. Your mileage may vary depending on the complexity of your SVG.
8
8
 
9
- Pay attention to your custom icon's dimensions and `viewBox` attribute. It is best to use a `viewBox="0 0 512 512"` starting point __when designing instead of trying to retrofit the viewbox afterwards__!
9
+ Pay attention to your custom icon's dimensions and `viewBox` attribute. It is best to use a `viewBox="0 0 512 512"` starting point **when designing instead of trying to retrofit the viewbox afterwards**!
10
10
 
11
- You must source *your own SVG into component/view* you are working on. This can easily be done in programmatic and maintainable ways.
12
-
13
- ### React
14
-
15
- So long as you have a valid React `<SVG>` node, you can send it as the `customIcon` prop and the kit will take care of the rest.
11
+ You must source _your own SVG into component/view_ you are working on. This can easily be done in programmatic and maintainable ways.
16
12
 
17
13
  ### Rails
18
14
 
19
- Some Rails applications use only webpack(er) which means using `image_url` will be successful over `image_path` in most cases especially development where Webpack Dev Server is serving assets over HTTP. Rails applications still using Asset Pipeline may use `image_path` or `image_url`. Of course, YMMV depending on any custom configurations in your Rails application.
15
+ Sending the absolute path to the `icon` prop results in an `<SVG>` tag within the working view.
data/app/pb_kits/playbook/pb_table/docs/_table_side_highlight.jsx CHANGED
@@ -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>
data/app/pb_kits/playbook/pb_table/docs/_table_with_subcomponents.html.erb ADDED
@@ -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 %>
data/app/pb_kits/playbook/pb_table/docs/_table_with_subcomponents.jsx ADDED
@@ -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
data/app/pb_kits/playbook/pb_table/docs/_table_with_subcomponents_as_divs.html.erb ADDED
@@ -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 %>
data/app/pb_kits/playbook/pb_table/docs/_table_with_subcomponents_as_divs.jsx ADDED
@@ -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
data/app/pb_kits/playbook/pb_table/docs/example.yml CHANGED
@@ -1,6 +1,8 @@
1
1
  examples:
2
2
  rails:
3
- - table_div: Div
3
+ - table_with_subcomponents: Table with Sub Components (Table Elements)
4
+ - table_with_subcomponents_as_divs: Table with Sub Components (Divs)
5
+ # - table_div: Div
4
6
  - table_sm: Small
5
7
  - table_md: Medium
6
8
  - table_lg: Large
@@ -27,7 +29,7 @@ examples:
27
29
  - table_striped: Striped Table
28
30
 
29
31
  react:
30
- - table_div: Div
32
+ # - table_div: Div
31
33
  - table_sm: Small
32
34
  - table_md: Medium
33
35
  - table_lg: Large
@@ -51,3 +53,6 @@ examples:
51
53
  - table_with_background_kit: Table With Background Kit
52
54
  - table_vertical_border: Vertical Borders
53
55
  - table_striped: Striped Table
56
+ - table_with_subcomponents: Table with Sub Components (Table Elements)
57
+ - table_with_subcomponents_as_divs: Table with Sub Components (Divs)
58
+
data/app/pb_kits/playbook/pb_table/docs/index.js CHANGED
@@ -22,3 +22,5 @@ export { default as TableWithBackgroundKit } from './_table_with_background_kit.
22
22
  export { default as TableVerticalBorder } from './_table_vertical_border.jsx'
23
23
  export { default as TableStriped } from './_table_striped.jsx'
24
24
  export { default as TableDiv } from './_table_div.jsx'
25
+ export { default as TableWithSubcomponents } from './_table_with_subcomponents.jsx'
26
+ export { default as TableWithSubcomponentsAsDivs } from './_table_with_subcomponents_as_divs.jsx'