playbook_ui_docs 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 (20) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_date/docs/_date_alignment_swift.md +26 -6
  3. data/app/pb_kits/playbook/pb_date/docs/_date_default_swift.md +27 -8
  4. data/app/pb_kits/playbook/pb_message/docs/_description.md +1 -1
  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.jsx +47 -0
  7. data/app/pb_kits/playbook/pb_table/docs/_table_with_subcomponents.md +7 -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/_table_with_subcomponents_as_divs.md +3 -0
  11. data/app/pb_kits/playbook/pb_table/docs/_table_with_subcomponents_rails.html.erb +34 -0
  12. data/app/pb_kits/playbook/pb_table/docs/_table_with_subcomponents_rails.md +7 -0
  13. data/app/pb_kits/playbook/pb_table/docs/example.yml +6 -2
  14. data/app/pb_kits/playbook/pb_table/docs/index.js +2 -0
  15. data/app/pb_kits/playbook/pb_text_input/docs/_text_input_add_on.jsx +20 -0
  16. data/app/pb_kits/playbook/pb_user/docs/_user_presence_indicator_swift.md +30 -0
  17. data/app/pb_kits/playbook/pb_user/docs/_user_props_table.md +2 -1
  18. data/app/pb_kits/playbook/pb_user/docs/example.yml +1 -0
  19. data/dist/playbook-doc.js +10 -10
  20. metadata +15 -7
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 5011fb31c9bf72b1b2be219af9b7a8f72c0c8f55c25ac10454cb7c255499bf44
4
- data.tar.gz: e2568fe54ac4c2fa1ec5666e5638674db33165cf71f2204c4b8289322547d6dd
3
+ metadata.gz: 57206d6baf0c02906c0826162d836efa4297ef7269214b9432619bb78c9c715d
4
+ data.tar.gz: c74b90986f5aed00b31e3555c83753ce23b4ace2b999e464bcbbe1967027ff79
5
5
  SHA512:
6
- metadata.gz: 109f4e1214b129a1f3c46bc38819f68550f4e84d59593eb9287fb6cf58e2b58008769fc6ebd506ab9b59bda021619a6944a4d177db3fcb6490a25d869ca66445
7
- data.tar.gz: acfc7dd64a983450095c0db2b32bf412dbb55f01adb4de1cbe5901d9d053e72de71146a0b13049ea265fd093b9225fc227ba70362655f9d64df3ad74cf192d4a
6
+ metadata.gz: f8c7397e1acf550fef601af9832d6be2d3006b639edd63d8d95d5b9b5176c6835a7503a4107f4a77bf37a7ea3416e6a3ea174f07da996b0e249641ddd48b3da0
7
+ data.tar.gz: 06256e5a336b059c69b33fd859d03c731a1dd46e2501ff4f9fc49d12cf296e89cf7799fbd84b6681f8a1e97437b0f2bd6f727a0525fd1fbe73ccd29e5b34a1c1
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_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_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
data/app/pb_kits/playbook/pb_table/docs/_table_with_subcomponents_as_divs.md ADDED
@@ -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.
data/app/pb_kits/playbook/pb_table/docs/_table_with_subcomponents_rails.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_rails.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/example.yml CHANGED
@@ -1,6 +1,5 @@
1
1
  examples:
2
2
  rails:
3
- # - table_div: Div
4
3
  - table_sm: Small
5
4
  - table_md: Medium
6
5
  - table_lg: Large
@@ -25,9 +24,11 @@ examples:
25
24
  - table_with_background_kit: Table With Background Kit
26
25
  - table_vertical_border: Vertical Borders
27
26
  - table_striped: Striped Table
27
+ - table_with_subcomponents_rails: Table with Sub Components (Table Elements)
28
+ - table_with_subcomponents_as_divs: Table with Sub Components (Divs)
29
+
28
30
 
29
31
  react:
30
- # - table_div: Div
31
32
  - table_sm: Small
32
33
  - table_md: Medium
33
34
  - table_lg: Large
@@ -51,3 +52,6 @@ examples:
51
52
  - table_with_background_kit: Table With Background Kit
52
53
  - table_vertical_border: Vertical Borders
53
54
  - table_striped: Striped Table
55
+ - table_with_subcomponents: Table with Sub Components (Table Elements)
56
+ - table_with_subcomponents_as_divs: Table with Sub Components (Divs)
57
+
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'
data/app/pb_kits/playbook/pb_text_input/docs/_text_input_add_on.jsx CHANGED
@@ -58,6 +58,16 @@ const TextInputAddOn = (props) => {
58
58
  {...props}
59
59
  />
60
60
  </div>
61
+ <div>
62
+ <TextInput
63
+ addOn={{ icon: 'frog', alignment: 'right', border: true }}
64
+ label="Right-Aligned Add On With Child Input"
65
+ onChange={handleUpdateFourthInput}
66
+ {...props}
67
+ >
68
+ <input />
69
+ </TextInput>
70
+ </div>
61
71
  <div>
62
72
  <TextInput
63
73
  addOn={{ icon: 'percent', alignment: 'left', border: false }}
@@ -76,6 +86,16 @@ const TextInputAddOn = (props) => {
76
86
  {...props}
77
87
  />
78
88
  </div>
89
+ <div>
90
+ <TextInput
91
+ addOn={{ icon: 'frog', alignment: 'left', border: true }}
92
+ label="Left-Aligned Add On With Child Input"
93
+ onChange={handleUpdateFourthInput}
94
+ {...props}
95
+ >
96
+ <input />
97
+ </TextInput>
98
+ </div>
79
99
  </>
80
100
  )
81
101
  }
data/app/pb_kits/playbook/pb_user/docs/_user_presence_indicator_swift.md ADDED
@@ -0,0 +1,30 @@
1
+ ![user-presence-indicator)](https://github.com/powerhome/playbook/assets/112719604/96ee8408-2e21-4aaf-ae65-9f023515cf8d)
2
+
3
+ ```swift
4
+ VStack(alignment: .leading, spacing: Spacing.small) {
5
+ PBUser(
6
+ name: name,
7
+
8
+ image: img,
9
+ size: .small,
10
+ territory: "PHL",
11
+ title: title,
12
+ status: .online
13
+ )
14
+ PBUser(
15
+ name: name,
16
+ image: img,
17
+ territory: "PHL",
18
+ title: title,
19
+ status: .away
20
+ )
21
+ PBUser(
22
+ name: name,
23
+ image: img,
24
+ size: .large,
25
+ territory: "PHL",
26
+ title: title,
27
+ status: .offline
28
+ )
29
+ }
30
+ ```
data/app/pb_kits/playbook/pb_user/docs/_user_props_table.md CHANGED
@@ -7,4 +7,5 @@
7
7
  | **orientation** | `Orientation` | Changes the orientation of the User | `.horizontal` | `.horizontal` `.verticle` |
8
8
  | **size** | `UserAvatarSize` | Changes the size of the User | `.medium` | `.small` `.medium` `.large` |
9
9
  | **territory** | `String` | Adds the User's territory | | |
10
- | **title** | `String` | Adds a title | | |
10
+ | **title** | `String` | Adds a title | | |
11
+ | **status** | `PBAvatar.PresenceStatus?` | An idicator for the current status of the user | `.none` | `.online` `.away` `.offline` |
data/app/pb_kits/playbook/pb_user/docs/example.yml CHANGED
@@ -23,4 +23,5 @@ examples:
23
23
  - user_vertical_size_swift: Vertical
24
24
  - user_text_only_swift: Text Only
25
25
  - user_size_swift: Horizontal Size
26
+ - user_presence_indicator_swift: Presence Indicator
26
27
  - user_props_table: ""