playbook_ui_docs 13.19.0 → 13.20.0.pre.alpha.PLAY12572402

Sign up to get free protection for your applications and to get access to all the features.
Files changed (30) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_collapsible_trail.md +1 -1
  3. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_default.md +1 -1
  4. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_loading.md +1 -1
  5. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_subrow_headers.md +1 -1
  6. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_options.md +1 -1
  7. data/app/pb_kits/playbook/pb_date/docs/_date_alignment_swift.md +26 -6
  8. data/app/pb_kits/playbook/pb_date/docs/_date_default_swift.md +27 -8
  9. data/app/pb_kits/playbook/pb_icon/docs/_icon_custom.html.erb +5 -11
  10. data/app/pb_kits/playbook/pb_icon/docs/_icon_custom.jsx +44 -18
  11. data/app/pb_kits/playbook/pb_icon/docs/_icon_custom.md +4 -8
  12. data/app/pb_kits/playbook/pb_message/docs/_description.md +1 -1
  13. data/app/pb_kits/playbook/pb_table/docs/_table_div.html.erb +34 -0
  14. data/app/pb_kits/playbook/pb_table/docs/_table_div.jsx +47 -0
  15. data/app/pb_kits/playbook/pb_table/docs/_table_side_highlight.jsx +24 -25
  16. data/app/pb_kits/playbook/pb_table/docs/_table_with_subcomponents.jsx +47 -0
  17. data/app/pb_kits/playbook/pb_table/docs/_table_with_subcomponents.md +7 -0
  18. data/app/pb_kits/playbook/pb_table/docs/_table_with_subcomponents_as_divs.html.erb +34 -0
  19. data/app/pb_kits/playbook/pb_table/docs/_table_with_subcomponents_as_divs.jsx +48 -0
  20. data/app/pb_kits/playbook/pb_table/docs/_table_with_subcomponents_as_divs.md +3 -0
  21. data/app/pb_kits/playbook/pb_table/docs/_table_with_subcomponents_rails.html.erb +34 -0
  22. data/app/pb_kits/playbook/pb_table/docs/_table_with_subcomponents_rails.md +7 -0
  23. data/app/pb_kits/playbook/pb_table/docs/example.yml +6 -0
  24. data/app/pb_kits/playbook/pb_table/docs/index.js +3 -0
  25. data/app/pb_kits/playbook/pb_text_input/docs/_text_input_add_on.jsx +20 -0
  26. data/app/pb_kits/playbook/pb_user/docs/_user_presence_indicator_swift.md +30 -0
  27. data/app/pb_kits/playbook/pb_user/docs/_user_props_table.md +2 -1
  28. data/app/pb_kits/playbook/pb_user/docs/example.yml +1 -0
  29. data/dist/playbook-doc.js +10 -10
  30. metadata +16 -6
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 9eeff004a877b4b2a9c9b62917bf09020bb6132cc1940ba8399079ca07146b35
4
- data.tar.gz: cb9f138868190020ac845c816f765d920f3609aeed33dbe5d3d87f9ccfb5a080
3
+ metadata.gz: 453a5be392866349d109b4e34bd9289727826afbb2c78e6cd9e0eb1144262848
4
+ data.tar.gz: 1566ab402cc4a26ac7c4095ee76e33fc9821cf378c034119627b844170aaeeef
5
5
  SHA512:
6
- metadata.gz: 9fa5d81c3a0bde9c250ae1bcd531a4d145b8ce799c8736328ae618260c5fe7a4ccb3f18ebed003c4b8dc299b0728b15ffe8bba10a3e187dbed33e61c9bccb5bf
7
- data.tar.gz: 2038b8cb20ba23ef8519dd8588c8a33d622b83c8563ebc6d35861bf28519a823e653fc755b0627ebec35d1c7d1eebc1d469dc0c19c7a9426038ef985a7d52d1b
6
+ metadata.gz: f1fc52b995d36e60ff78ec95bcb9f88f012cb54529bcd40ccab6ed39695b2f1711bf56aa531ca9d833b0ca870f9556a5bccc6c4551218c3f949f6800c3c3c827
7
+ data.tar.gz: b1f2fe25a29ac0bd40027b7f056fff29f3e84848f94bcba99eef918c0511eed270ee82ca11f6f4b9ceab2044a0e44e96d998e3924a5458c506222a9a9b423410
data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_collapsible_trail.md CHANGED
@@ -1 +1 @@
1
- `collapsibleTrail` is an optional prop that is set to 'true' by default. If set to 'false', it will remove the trail on the left of rows when subRows are toggled open.
1
+ `collapsibleTrail` is an optional prop that is set to 'true' by default. If set to 'false', it will remove the trail on the left of the rows when subRows are toggled open.
data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_default.md CHANGED
@@ -8,7 +8,7 @@ For a visual of the data structure needed for `tableData`, see [here](https://gi
8
8
 
9
9
  ### columnDefinitions
10
10
 
11
- `columnDefinitions` maps to the columns prop on the Tanstack table. Column definitions are the single most important part of building a table as they are responsible for building the underlying data model that is used for all sorting, expansion, etc. `ColumnDefinitions` in the AdvancedTable kit is a array of objects as seen in the code snippet below. Each object within the array has two REQUIRED items:
11
+ `columnDefinitions` maps to the columns prop on the Tanstack table. Column definitions are the single most important part of building a table as they are responsible for building the underlying data model that is used for all sorting, expansion, etc. `ColumnDefinitions` in the AdvancedTable kit is an array of objects as seen in the code snippet below. Each object within the array has two REQUIRED items:
12
12
 
13
13
  - `accessor`: this is the key from your data for the value you want rendered in that column
14
14
  - `label`: this is what will be rendered as the column header label
data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_loading.md CHANGED
@@ -1,3 +1,3 @@
1
1
  the optional `loading` prop takes a boolean value that can be managed using state. If loading is true, the table will display the loading skeleton and once loading is false, the table will render with the data provided.
2
2
 
3
- By default, the inital row count of the loading skeleton is set to 10. If you want more control over this initial row count, the optional `initialLoadingRowCount` prop can be used to to pass in a number. __NOTE__: This is only for the first render of the table, subsequent loading skeleton row count logic is handled within the kit itself.
3
+ By default, the inital row count of the loading skeleton is set to 10. If you want more control over this initial row count, the optional `initialLoadingRowCount` prop can be used to pass in a number. __NOTE__: This is only for the first render of the table, subsequent loading skeleton row count logic is handled within the kit itself.
data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_subrow_headers.md CHANGED
@@ -1,3 +1,3 @@
1
1
  `subRowHeaders` is an optional prop that if present will add header rows at each level of the nested data. The prop takes an array of strings, each string being the text for each header row. The array of strings must be in the order in which they need to be rendered in the UI according to depth.
2
2
 
3
- `enableToggleExpansion` is an additional optional prop that can be used in conjunction with the subRowHeaders prop. `enableToggleExpansion` is a string that can be 'all' or 'header". If set to 'all', the toggle exapansion button will appear in the table header as well as in the subRow headers. If set to 'header' button will only appear in header and NOT in subRow headers. This is set to 'headeer' by default.
3
+ `enableToggleExpansion` is an additional optional prop that can be used in conjunction with the subRowHeaders prop. `enableToggleExpansion` is a string that can be 'all', 'header" or "none". If set to 'all', the toggle exapansion button will appear in the table header as well as in the subRow headers. If set to 'header' button will only appear in header and NOT in subRow headers. This is set to 'header' by default.
data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_options.md CHANGED
@@ -1,3 +1,3 @@
1
1
  The Tanstack table consumes the useReactTable hook to create the table. This hook takes an object that can contain any of the functions that the Tanstack table provides. The advancedTable's optional `tableOptions` can be used to pass tanstack options to the kit.
2
2
 
3
- In the above example, we are using the initialState option provided by tanstack that takes sort as one of it's values. Setting it to true for the first column is reversing the sort order on first render of the table. For a complete list of possible options and hoe to use them, see [here](https://tanstack.com/table/v8/docs/api/core/table#usereacttable--createsolidtable--usevuetable--createsveltetable)
3
+ In the above example, we are using the initialState option provided by tanstack that takes sort as one of it's values. Setting it to true for the first column is reversing the sort order on first render of the table. For a complete list of possible options and how to use them, see [here](https://tanstack.com/table/v8/docs/api/core/table#usereacttable--createsolidtable--usevuetable--createsveltetable)
data/app/pb_kits/playbook/pb_date/docs/_date_alignment_swift.md CHANGED
@@ -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
  ```
data/app/pb_kits/playbook/pb_date/docs/_date_default_swift.md CHANGED
@@ -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
  ```
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_message/docs/_description.md CHANGED
@@ -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.
data/app/pb_kits/playbook/pb_table/docs/_table_div.html.erb ADDED
@@ -0,0 +1,34 @@
1
+ <%= pb_rails("table", props: { size: "sm", tag: "div" }) do %>
2
+ <div class="pb_table_thead">
3
+ <div class="pb_table_tr">
4
+ <div class="pb_table_th">Column 1</div>
5
+ <div class="pb_table_th">Column 2</div>
6
+ <div class="pb_table_th">Column 3</div>
7
+ <div class="pb_table_th">Column 4</div>
8
+ <div class="pb_table_th">Column 5</div>
9
+ </div>
10
+ </div>
11
+ <div class="pb_table_tbody">
12
+ <div class="pb_table_tr">
13
+ <div class="pb_table_td">Value 1</div>
14
+ <div class="pb_table_td">Value 2</div>
15
+ <div class="pb_table_td">Value 3</div>
16
+ <div class="pb_table_td">Value 4</div>
17
+ <div class="pb_table_td">Value 5</div>
18
+ </div>
19
+ <div class="pb_table_tr">
20
+ <div class="pb_table_td">Value 1</div>
21
+ <div class="pb_table_td">Value 2</div>
22
+ <div class="pb_table_td">Value 3</div>
23
+ <div class="pb_table_td">Value 4</div>
24
+ <div class="pb_table_td">Value 5</div>
25
+ </div>
26
+ <div class="pb_table_tr">
27
+ <div class="pb_table_td">Value 1</div>
28
+ <div class="pb_table_td">Value 2</div>
29
+ <div class="pb_table_td">Value 3</div>
30
+ <div class="pb_table_td">Value 4</div>
31
+ <div class="pb_table_td">Value 5</div>
32
+ </div>
33
+ </div>
34
+ <% end %>
data/app/pb_kits/playbook/pb_table/docs/_table_div.jsx ADDED
@@ -0,0 +1,47 @@
1
+ import React from 'react'
2
+ import Table from '../_table'
3
+
4
+ const TableDiv = (props) => {
5
+ return (
6
+ <Table
7
+ size="sm"
8
+ tag="div"
9
+ {...props}
10
+ >
11
+ <div className="pb_table_thead">
12
+ <div className="pb_table_tr">
13
+ <div className="pb_table_th">{'Column 1'}</div>
14
+ <div className="pb_table_th">{'Column 2'}</div>
15
+ <div className="pb_table_th">{'Column 3'}</div>
16
+ <div className="pb_table_th">{'Column 4'}</div>
17
+ <div className="pb_table_th">{'Column 5'}</div>
18
+ </div>
19
+ </div>
20
+ <div className="pb_table_tbody">
21
+ <div className="pb_table_tr">
22
+ <div className="pb_table_td">{'Value 1'}</div>
23
+ <div className="pb_table_td">{'Value 2'}</div>
24
+ <div className="pb_table_td">{'Value 3'}</div>
25
+ <div className="pb_table_td">{'Value 4'}</div>
26
+ <div className="pb_table_td">{'Value 5'}</div>
27
+ </div>
28
+ <div className="pb_table_tr">
29
+ <div className="pb_table_td">{'Value 1'}</div>
30
+ <div className="pb_table_td">{'Value 2'}</div>
31
+ <div className="pb_table_td">{'Value 3'}</div>
32
+ <div className="pb_table_td">{'Value 4'}</div>
33
+ <div className="pb_table_td">{'Value 5'}</div>
34
+ </div>
35
+ <div className="pb_table_tr">
36
+ <div className="pb_table_td">{'Value 1'}</div>
37
+ <div className="pb_table_td">{'Value 2'}</div>
38
+ <div className="pb_table_td">{'Value 3'}</div>
39
+ <div className="pb_table_td">{'Value 4'}</div>
40
+ <div className="pb_table_td">{'Value 5'}</div>
41
+ </div>
42
+ </div>
43
+ </Table>
44
+ )
45
+ }
46
+
47
+ export default TableDiv
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.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.md ADDED
@@ -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`
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