playbook_ui_docs 14.17.0.pre.alpha.PLAY1967bracketlayoutphase27205 → 14.17.0.pre.alpha.PLAY20267223

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_columns.jsx +58 -0
  3. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_columns.md +6 -0
  4. data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +1 -0
  5. data/app/pb_kits/playbook/pb_advanced_table/docs/index.js +2 -1
  6. data/app/pb_kits/playbook/pb_layout/docs/_layout_bracket.jsx +118 -318
  7. data/app/pb_kits/playbook/pb_layout/docs/_layout_bracket.md +1 -1
  8. data/dist/playbook-doc.js +1 -1
  9. metadata +3 -1
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 7cb24319a2f412933a136b212fe79de4013904250079c4cf3da09224c4ff3d5d
4
- data.tar.gz: 8a3ef9c95985d948cd289335c8c155496dbe82a215c7aecaaadcc9fbca3555d7
3
+ metadata.gz: 64b4be8c2e4c9114486d9ff358008e3c106e7cc6003f1bd3fa28397467771dbc
4
+ data.tar.gz: 7f156246e737078a61e6a2da41cbede51efed88e9b5726e7b3772a078e6fd253
5
5
  SHA512:
6
- metadata.gz: 753a4c6bafb363fea20230311539d492cab89cce21c9ce4ce5ba9c098881fddc85385a6530d5dc228e0d7658649ea463589796693f4abbb5d4b8b5bb606ced7b
7
- data.tar.gz: c679b682bb896f564605fd72bb2d1683a7e7ad79d64fc3f420be36d7004c667149e6e09fa0a6af33becb90c023b3162557002ca813ae0f54257f08484cb2a233
6
+ metadata.gz: 3d62e9465b0bec13c52d3ae27bbb4e88512146b5857f839c07711b3b23b7d11b5239d48d3fb5af48937b08d249d1bd9bd2856f89c9a53017d54071df34fd0053
7
+ data.tar.gz: 4b64a03780c80f024867b7ef3be42ef1df32db0f7602c8ee94c44d9dc8356a9f85aa059f7ead6d27376c62ed579b5ba060f555fac1844f0a0c4643a8b06c7d38
data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_columns.jsx ADDED
@@ -0,0 +1,58 @@
1
+ import React from "react"
2
+ import AdvancedTable from '../../pb_advanced_table/_advanced_table'
3
+ import MOCK_DATA from "./advanced_table_mock_data.json"
4
+
5
+ const AdvancedTableStickyColumns = (props) => {
6
+ const columnDefinitions = [
7
+ {
8
+ accessor: "year",
9
+ label: "Year",
10
+ id: "year",
11
+ cellAccessors: ["quarter", "month", "day"],
12
+ },
13
+ {
14
+ accessor: "newEnrollments",
15
+ label: "New Enrollments",
16
+ id: "newEnrollments",
17
+ },
18
+ {
19
+ accessor: "scheduledMeetings",
20
+ label: "Scheduled Meetings",
21
+ id: "scheduledMeetings",
22
+ },
23
+ {
24
+ accessor: "attendanceRate",
25
+ label: "Attendance Rate",
26
+ id: "attendanceRate",
27
+ },
28
+ {
29
+ accessor: "completedClasses",
30
+ label: "Completed Classes",
31
+ id: "completedClasses",
32
+ },
33
+ {
34
+ accessor: "classCompletionRate",
35
+ label: "Class Completion Rate",
36
+ id: "classCompletionRate",
37
+ },
38
+ {
39
+ accessor: "graduatedStudents",
40
+ label: "Graduated Students",
41
+ id: "graduatedStudents",
42
+ },
43
+ ]
44
+
45
+ return (
46
+ <div>
47
+ <AdvancedTable
48
+ columnDefinitions={columnDefinitions}
49
+ responsive="none"
50
+ stickyLeftColumn={["year", "newEnrollments"]}
51
+ tableData={MOCK_DATA}
52
+ {...props}
53
+ />
54
+ </div>
55
+ )
56
+ }
57
+
58
+ export default AdvancedTableStickyColumns
data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_columns.md ADDED
@@ -0,0 +1,6 @@
1
+ To render sticky columns for the Advanced Table, you can use the `stickyLeftColumn` prop. This prop expects an array of the column ids you want to be sticky.
2
+
3
+ To achieve this:
4
+ - Make sure to provide an id for each column via columnDefinitions as shown below. Id can be any string.
5
+ - One or multiple columns can be made sticky, it is recommended to set the ids within `stickyLeftColumn` in the order in which the columns are rendered.
6
+ - It is recommended to set `responsive` to none when using `stickyLeftColumn` since responsive just makes the first column sticky and the slightly different styling for `responsive` and `stickyLeftColumn` may override each other in unexpected ways.
data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml CHANGED
@@ -25,6 +25,7 @@ examples:
25
25
  - advanced_table_collapsible_trail: Collapsible Trail
26
26
  - advanced_table_table_options: Table Options
27
27
  - advanced_table_table_props: Table Props
28
+ - advanced_table_sticky_columns: Sticky Columns
28
29
  - advanced_table_table_props_sticky_header: Table Props Sticky Header
29
30
  - advanced_table_inline_row_loading: Inline Row Loading
30
31
  - advanced_table_responsive: Responsive Tables
data/app/pb_kits/playbook/pb_advanced_table/docs/index.js CHANGED
@@ -22,4 +22,5 @@ export { default as AdvancedTableSelectableRowsActions } from './_advanced_table
22
22
  export { default as AdvancedTableTablePropsStickyHeader } from './_advanced_table_table_props_sticky_header.jsx'
23
23
  export { default as AdvancedTableColumnHeadersCustomCell } from './_advanced_table_column_headers_custom_cell.jsx'
24
24
  export { default as AdvancedTableInlineEditing } from './_advanced_table_inline_editing.jsx'
25
- export { default as AdvancedTableFullscreen } from './_advanced_table_fullscreen.jsx'
25
+ export { default as AdvancedTableFullscreen } from './_advanced_table_fullscreen.jsx'
26
+ export { default as AdvancedTableStickyColumns } from './_advanced_table_sticky_columns.jsx'
data/app/pb_kits/playbook/pb_layout/docs/_layout_bracket.jsx CHANGED
@@ -1,102 +1,11 @@
1
1
  import React from 'react'
2
2
 
3
3
  import Layout from '../../pb_layout/_layout'
4
+ import Flex from '../../pb_flex/_flex'
5
+ import Body from '../../pb_body/_body'
4
6
  import Caption from '../../pb_caption/_caption'
5
7
  import SectionSeparator from '../../pb_section_separator/_section_separator'
6
8
 
7
- const teamData = {
8
- eagles: {
9
- avatar:"https://upload.wikimedia.org/wikipedia/en/thumb/8/8e/Philadelphia_Eagles_logo.svg/1920px-Philadelphia_Eagles_logo.svg.png",
10
- name:"Eagles",
11
- rank:"#1 NFC East",
12
- territory:"PHI",
13
- },
14
- packers: {
15
- avatar:"https://upload.wikimedia.org/wikipedia/commons/thumb/5/50/Green_Bay_Packers_logo.svg/1920px-Green_Bay_Packers_logo.svg.png",
16
- name:"Packers",
17
- rank:"#3 NFC North",
18
- territory:"GB",
19
- },
20
- vikings: {
21
- avatar:"https://upload.wikimedia.org/wikipedia/en/thumb/4/48/Minnesota_Vikings_logo.svg/1024px-Minnesota_Vikings_logo.svg.png",
22
- name:"Vikings",
23
- rank:"#2 NFC North",
24
- territory:"MIN",
25
- },
26
- rams: {
27
- avatar:"https://upload.wikimedia.org/wikipedia/en/thumb/8/8a/Los_Angeles_Rams_logo.svg/1920px-Los_Angeles_Rams_logo.svg.png",
28
- name:"Rams",
29
- rank:"#1 NFC West",
30
- territory:"LAR",
31
- },
32
- lions: {
33
- avatar:"https://upload.wikimedia.org/wikipedia/en/thumb/7/71/Detroit_Lions_logo.svg/1920px-Detroit_Lions_logo.svg.png",
34
- name:"Lions",
35
- rank:"#1 NFC North",
36
- territory:"DET",
37
- },
38
- commanders: {
39
- avatar:"https://upload.wikimedia.org/wikipedia/commons/thumb/0/0c/Washington_Commanders_logo.svg/2560px-Washington_Commanders_logo.svg.png",
40
- name:"Commanders",
41
- rank:"#2 NFC East",
42
- territory:"WAS",
43
- },
44
- buccaneers: {
45
- avatar:"https://upload.wikimedia.org/wikipedia/en/thumb/a/a2/Tampa_Bay_Buccaneers_logo.svg/1920px-Tampa_Bay_Buccaneers_logo.svg.png",
46
- name:"Buccaneers",
47
- rank:"#1 NFC South",
48
- territory:"TB",
49
- },
50
- chiefs: {
51
- avatar:"https://upload.wikimedia.org/wikipedia/en/thumb/e/e1/Kansas_City_Chiefs_logo.svg/2560px-Kansas_City_Chiefs_logo.svg.png",
52
- name:"Chiefs",
53
- rank:"#1 AFC West",
54
- territory:"KC",
55
- },
56
- chargers: {
57
- avatar:"https://upload.wikimedia.org/wikipedia/commons/thumb/a/a6/Los_Angeles_Chargers_logo.svg/2560px-Los_Angeles_Chargers_logo.svg.png",
58
- name:"Chargers",
59
- rank:"#2 AFC West",
60
- territory:"LAC",
61
- },
62
- texans: {
63
- avatar:"https://upload.wikimedia.org/wikipedia/en/thumb/2/28/Houston_Texans_logo.svg/1280px-Houston_Texans_logo.svg.png",
64
- name:"Texans",
65
- rank:"#1 AFC South",
66
- territory:"HOU",
67
- },
68
- broncos: {
69
- avatar:"https://upload.wikimedia.org/wikipedia/en/thumb/4/44/Denver_Broncos_logo.svg/2560px-Denver_Broncos_logo.svg.png",
70
- name:"Broncos",
71
- rank:"#3 AFC West",
72
- territory:"DEN",
73
- },
74
- bills: {
75
- avatar:"https://upload.wikimedia.org/wikipedia/en/thumb/7/77/Buffalo_Bills_logo.svg/1920px-Buffalo_Bills_logo.svg.png",
76
- name:"Bills",
77
- rank:"#1 AFC East",
78
- territory:"BUF",
79
- },
80
- steelers: {
81
- avatar:"https://upload.wikimedia.org/wikipedia/commons/thumb/d/de/Pittsburgh_Steelers_logo.svg/1280px-Pittsburgh_Steelers_logo.svg.png",
82
- name:"Steelers",
83
- rank:"#2 AFC North",
84
- territory:"PIT",
85
- },
86
- ravens: {
87
- avatar:"https://upload.wikimedia.org/wikipedia/en/thumb/1/16/Baltimore_Ravens_logo.svg/2560px-Baltimore_Ravens_logo.svg.png",
88
- name:"Ravens",
89
- rank:"#1 AFC North",
90
- territory:"BAL",
91
- },
92
- bye: {
93
- avatar:"",
94
- name:"BYE",
95
- rank:"",
96
- territory:"",
97
- },
98
- }
99
-
100
9
  const LayoutBracket = () => {
101
10
  return (
102
11
  <div>
@@ -109,140 +18,80 @@ const LayoutBracket = () => {
109
18
  </Layout.RoundLabel>
110
19
  <Layout.Round marginBottom={{ xs: "md", sm: "md" }}>
111
20
  <Layout.Game>
112
- <Layout.Participant
113
- avatar={teamData.packers.avatar}
114
- name={teamData.packers.name}
115
- points="10"
116
- rank={teamData.packers.rank}
117
- territory={teamData.packers.territory}
118
- />
119
- <Layout.Participant
120
- avatar={teamData.eagles.avatar}
121
- name={teamData.eagles.name}
122
- points="22"
123
- rank={teamData.eagles.rank}
124
- territory={teamData.eagles.territory}
125
- winner
126
- />
21
+ <Flex justify="between">
22
+ <Body>Packers</Body>
23
+ <Body>10</Body>
24
+ </Flex>
25
+ <Flex justify="between">
26
+ <Body><strong>Eagles</strong></Body>
27
+ <Body>22</Body>
28
+ </Flex>
127
29
  </Layout.Game>
128
30
  <Layout.Game>
129
- <Layout.Participant
130
- avatar={teamData.vikings.avatar}
131
- name={teamData.vikings.name}
132
- points="9"
133
- rank={teamData.vikings.rank}
134
- territory={teamData.vikings.territory}
135
- />
136
- <Layout.Participant
137
- avatar={teamData.rams.avatar}
138
- name={teamData.rams.name}
139
- points="27"
140
- rank={teamData.rams.rank}
141
- territory={teamData.rams.territory}
142
- winner
143
- />
31
+ <Flex justify="between">
32
+ <Body>Vikings</Body>
33
+ <Body>9</Body>
34
+ </Flex>
35
+ <Flex justify="between">
36
+ <Body><strong>Rams</strong></Body>
37
+ <Body>27</Body>
38
+ </Flex>
144
39
  </Layout.Game>
145
40
  <Layout.Game>
146
- <Layout.Participant
147
- avatar={teamData.lions.avatar}
148
- name={teamData.lions.name}
149
- points=""
150
- rank={teamData.lions.rank}
151
- territory={teamData.lions.territory}
152
- winner
153
- />
154
- <Layout.Participant
155
- avatar={teamData.bye.avatar}
156
- name={teamData.bye.name}
157
- points=""
158
- rank={teamData.bye.rank}
159
- territory={teamData.bye.territory}
160
- />
41
+ <Flex justify="between">
42
+ <Body><strong>Lions</strong></Body>
43
+ </Flex>
44
+ <Flex justify="between">
45
+ <Body>BYE</Body>
46
+ </Flex>
161
47
  </Layout.Game>
162
48
  <Layout.Game>
163
- <Layout.Participant
164
- avatar={teamData.commanders.avatar}
165
- name={teamData.commanders.name}
166
- points="23"
167
- rank={teamData.commanders.rank}
168
- territory={teamData.commanders.territory}
169
- winner
170
- />
171
- <Layout.Participant
172
- avatar={teamData.buccaneers.avatar}
173
- name={teamData.buccaneers.name}
174
- points="20"
175
- rank={teamData.buccaneers.rank}
176
- territory={teamData.buccaneers.territory}
177
- />
49
+ <Flex justify="between">
50
+ <Body><strong>Commanders</strong></Body>
51
+ <Body>23</Body>
52
+ </Flex>
53
+ <Flex justify="between">
54
+ <Body>Buccaneers</Body>
55
+ <Body>20</Body>
56
+ </Flex>
178
57
  </Layout.Game>
179
58
  <Layout.Game>
180
- <Layout.Participant
181
- avatar={teamData.chiefs.avatar}
182
- name={teamData.chiefs.name}
183
- points=""
184
- rank={teamData.chiefs.rank}
185
- territory={teamData.chiefs.territory}
186
- winner
187
- />
188
- <Layout.Participant
189
- avatar={teamData.bye.avatar}
190
- name={teamData.bye.name}
191
- points=""
192
- rank={teamData.bye.rank}
193
- territory={teamData.bye.territory}
194
- />
59
+ <Flex justify="between">
60
+ <Body><strong>Chiefs</strong></Body>
61
+ </Flex>
62
+ <Flex justify="between">
63
+ <Body>BYE</Body>
64
+ </Flex>
195
65
  </Layout.Game>
196
66
  <Layout.Game>
197
- <Layout.Participant
198
- avatar={teamData.chargers.avatar}
199
- name={teamData.chargers.name}
200
- points="12"
201
- rank={teamData.chargers.rank}
202
- territory={teamData.chargers.territory}
203
- />
204
- <Layout.Participant
205
- avatar={teamData.texans.avatar}
206
- name={teamData.texans.name}
207
- points="32"
208
- rank={teamData.texans.rank}
209
- territory={teamData.texans.territory}
210
- winner
211
- />
67
+ <Flex justify="between">
68
+ <Body>Chargers</Body>
69
+ <Body>12</Body>
70
+ </Flex>
71
+ <Flex justify="between">
72
+ <Body><strong>Texans</strong></Body>
73
+ <Body>32</Body>
74
+ </Flex>
212
75
  </Layout.Game>
213
76
  <Layout.Game>
214
- <Layout.Participant
215
- avatar={teamData.broncos.avatar}
216
- name={teamData.broncos.name}
217
- points="7"
218
- rank={teamData.broncos.rank}
219
- territory={teamData.broncos.territory}
220
- />
221
- <Layout.Participant
222
- avatar={teamData.bills.avatar}
223
- name={teamData.bills.name}
224
- points="31"
225
- rank={teamData.bills.rank}
226
- territory={teamData.bills.territory}
227
- winner
228
- />
77
+ <Flex justify="between">
78
+ <Body>Broncos</Body>
79
+ <Body>7</Body>
80
+ </Flex>
81
+ <Flex justify="between">
82
+ <Body><strong>Bills</strong></Body>
83
+ <Body>31</Body>
84
+ </Flex>
229
85
  </Layout.Game>
230
86
  <Layout.Game>
231
- <Layout.Participant
232
- avatar={teamData.steelers.avatar}
233
- name={teamData.steelers.name}
234
- points="14"
235
- rank={teamData.steelers.rank}
236
- territory={teamData.steelers.territory}
237
- />
238
- <Layout.Participant
239
- avatar={teamData.ravens.avatar}
240
- name={teamData.ravens.name}
241
- points="28"
242
- rank={teamData.ravens.rank}
243
- territory={teamData.ravens.territory}
244
- winner
245
- />
87
+ <Flex justify="between">
88
+ <Body>Steelers</Body>
89
+ <Body>14</Body>
90
+ </Flex>
91
+ <Flex justify="between">
92
+ <Body><strong>Ravens</strong></Body>
93
+ <Body>28</Body>
94
+ </Flex>
246
95
  </Layout.Game>
247
96
  </Layout.Round>
248
97
  <Layout.RoundLabel>
@@ -251,72 +100,44 @@ const LayoutBracket = () => {
251
100
  </Layout.RoundLabel>
252
101
  <Layout.Round marginBottom={{ xs: "md", sm: "md" }}>
253
102
  <Layout.Game>
254
- <Layout.Participant
255
- avatar={teamData.rams.avatar}
256
- name={teamData.rams.name}
257
- points="22"
258
- rank={teamData.rams.rank}
259
- territory={teamData.rams.territory}
260
- />
261
- <Layout.Participant
262
- avatar={teamData.eagles.avatar}
263
- name={teamData.eagles.name}
264
- points="28"
265
- rank={teamData.eagles.rank}
266
- territory={teamData.eagles.territory}
267
- winner
268
- />
103
+ <Flex justify="between">
104
+ <Body>Rams</Body>
105
+ <Body>22</Body>
106
+ </Flex>
107
+ <Flex justify="between">
108
+ <Body><strong>Eagles</strong></Body>
109
+ <Body>28</Body>
110
+ </Flex>
269
111
  </Layout.Game>
270
112
  <Layout.Game>
271
- <Layout.Participant
272
- avatar={teamData.commanders.avatar}
273
- name={teamData.commanders.name}
274
- points="45"
275
- rank={teamData.commanders.rank}
276
- territory={teamData.commanders.territory}
277
- winner
278
- />
279
- <Layout.Participant
280
- avatar={teamData.lions.avatar}
281
- name={teamData.lions.name}
282
- points="31"
283
- rank={teamData.lions.rank}
284
- territory={teamData.lions.territory}
285
- />
113
+ <Flex justify="between">
114
+ <Body><strong>Commanders</strong></Body>
115
+ <Body>45</Body>
116
+ </Flex>
117
+ <Flex justify="between">
118
+ <Body>Lions</Body>
119
+ <Body>31</Body>
120
+ </Flex>
286
121
  </Layout.Game>
287
122
  <Layout.Game>
288
- <Layout.Participant
289
- avatar={teamData.texans.avatar}
290
- name={teamData.texans.name}
291
- points="14"
292
- rank={teamData.texans.rank}
293
- territory={teamData.texans.territory}
294
- />
295
- <Layout.Participant
296
- avatar={teamData.chiefs.avatar}
297
- name={teamData.chiefs.name}
298
- points="23"
299
- rank={teamData.chiefs.rank}
300
- territory={teamData.chiefs.territory}
301
- winner
302
- />
123
+ <Flex justify="between">
124
+ <Body>Texans</Body>
125
+ <Body>14</Body>
126
+ </Flex>
127
+ <Flex justify="between">
128
+ <Body><strong>Chiefs</strong></Body>
129
+ <Body>23</Body>
130
+ </Flex>
303
131
  </Layout.Game>
304
132
  <Layout.Game>
305
- <Layout.Participant
306
- avatar={teamData.ravens.avatar}
307
- name={teamData.ravens.name}
308
- points="25"
309
- rank={teamData.ravens.rank}
310
- territory={teamData.ravens.territory}
311
- />
312
- <Layout.Participant
313
- avatar={teamData.bills.avatar}
314
- name={teamData.bills.name}
315
- points="27"
316
- rank={teamData.bills.rank}
317
- territory={teamData.bills.territory}
318
- winner
319
- />
133
+ <Flex justify="between">
134
+ <Body>Ravens</Body>
135
+ <Body>25</Body>
136
+ </Flex>
137
+ <Flex justify="between">
138
+ <Body><strong>Bills</strong></Body>
139
+ <Body>27</Body>
140
+ </Flex>
320
141
  </Layout.Game>
321
142
  </Layout.Round>
322
143
  <Layout.RoundLabel>
@@ -325,38 +146,24 @@ const LayoutBracket = () => {
325
146
  </Layout.RoundLabel>
326
147
  <Layout.Round marginBottom={{ xs: "md", sm: "md" }}>
327
148
  <Layout.Game>
328
- <Layout.Participant
329
- avatar={teamData.commanders.avatar}
330
- name={teamData.commanders.name}
331
- points="23"
332
- rank={teamData.commanders.rank}
333
- territory={teamData.commanders.territory}
334
- />
335
- <Layout.Participant
336
- avatar={teamData.eagles.avatar}
337
- name={teamData.eagles.name}
338
- points="55"
339
- rank={teamData.eagles.rank}
340
- territory={teamData.eagles.territory}
341
- winner
342
- />
149
+ <Flex justify="between">
150
+ <Body>Commanders</Body>
151
+ <Body>23</Body>
152
+ </Flex>
153
+ <Flex justify="between">
154
+ <Body><strong>Eagles</strong></Body>
155
+ <Body>55</Body>
156
+ </Flex>
343
157
  </Layout.Game>
344
158
  <Layout.Game>
345
- <Layout.Participant
346
- avatar={teamData.bills.avatar}
347
- name={teamData.bills.name}
348
- points="29"
349
- rank={teamData.bills.rank}
350
- territory={teamData.bills.territory}
351
- />
352
- <Layout.Participant
353
- avatar={teamData.chiefs.avatar}
354
- name={teamData.chiefs.name}
355
- points="32"
356
- rank={teamData.chiefs.rank}
357
- territory={teamData.chiefs.territory}
358
- winner
359
- />
159
+ <Flex justify="between">
160
+ <Body>Bills</Body>
161
+ <Body>29</Body>
162
+ </Flex>
163
+ <Flex justify="between">
164
+ <Body><strong>Chiefs</strong></Body>
165
+ <Body>32</Body>
166
+ </Flex>
360
167
  </Layout.Game>
361
168
  </Layout.Round>
362
169
  <Layout.RoundLabel>
@@ -365,21 +172,14 @@ const LayoutBracket = () => {
365
172
  </Layout.RoundLabel>
366
173
  <Layout.Round>
367
174
  <Layout.Game>
368
- <Layout.Participant
369
- avatar={teamData.chiefs.avatar}
370
- name={teamData.chiefs.name}
371
- points="22"
372
- rank={teamData.chiefs.rank}
373
- territory={teamData.chiefs.territory}
374
- />
375
- <Layout.Participant
376
- avatar={teamData.eagles.avatar}
377
- name={teamData.eagles.name}
378
- points="40"
379
- rank={teamData.eagles.rank}
380
- self
381
- territory={teamData.eagles.territory}
382
- />
175
+ <Flex justify="between">
176
+ <Body>Chiefs</Body>
177
+ <Body>22</Body>
178
+ </Flex>
179
+ <Flex justify="between">
180
+ <Body><strong>Eagles</strong></Body>
181
+ <Body>40</Body>
182
+ </Flex>
383
183
  </Layout.Game>
384
184
  </Layout.Round>
385
185
  </Layout>
data/app/pb_kits/playbook/pb_layout/docs/_layout_bracket.md CHANGED
@@ -1,4 +1,4 @@
1
- Use `<Layout.RoundLabel>`, `<Layout.Round>`, `<Layout.Game>`, and/or `<Layout.Participant>` to make a bracket layout. Feel free to use custom components in place of the template components based on your needs.
1
+ Use `<Layout.RoundLabel>`, `<Layout.Round>`, and `<Layout.Game>` to make a bracket layout.
2
2
 
3
3
  On mobile devices, `<Layout.RoundLabel>` will display (on desktop these components are hidden) and the bracket will be in one column.
4
4