playbook_ui_docs 14.17.0.pre.alpha.PBNTR935draggablelinedesign7118 → 14.17.0.pre.alpha.PLAY1967bracketlayoutphase27205

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 (6) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_line.jsx +30 -35
  3. data/app/pb_kits/playbook/pb_layout/docs/_layout_bracket.jsx +318 -118
  4. data/app/pb_kits/playbook/pb_layout/docs/_layout_bracket.md +1 -1
  5. data/dist/playbook-doc.js +1 -1
  6. metadata +2 -2
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 812d52324274150f272111494fbd9b2f5e9885235c949b0ae7352e00f8d2b3ef
4
- data.tar.gz: 8d1496d8828359b57158693c91f788a905600f42de4c47da98ab8764b23a2a5f
3
+ metadata.gz: 7cb24319a2f412933a136b212fe79de4013904250079c4cf3da09224c4ff3d5d
4
+ data.tar.gz: 8a3ef9c95985d948cd289335c8c155496dbe82a215c7aecaaadcc9fbca3555d7
5
5
  SHA512:
6
- metadata.gz: 542d0ae1814624cd8fb9b5c64488dc3141e05ca7adfa917ae4a1fed35f504c985e172a42ea194168623db52554d03c3dd5706f5d09b272a098890474c60a9c44
7
- data.tar.gz: 529f05e4859528b59a4a8ad471c07889c752cbaa838a8b6f75a71a186087c2800bbdad4208941824320eed91b213daee891e13151521533bb9c09bb94436f997
6
+ metadata.gz: 753a4c6bafb363fea20230311539d492cab89cce21c9ce4ce5ba9c098881fddc85385a6530d5dc228e0d7658649ea463589796693f4abbb5d4b8b5bb606ced7b
7
+ data.tar.gz: c679b682bb896f564605fd72bb2d1683a7e7ad79d64fc3f420be36d7004c667149e6e09fa0a6af33becb90c023b3162557002ca813ae0f54257f08484cb2a233
data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_line.jsx CHANGED
@@ -1,7 +1,5 @@
1
1
  import React, { useState } from "react";
2
- import Body from '../../pb_body/_body'
3
2
  import Flex from '../../pb_flex/_flex'
4
- import Card from '../../pb_card/_card'
5
3
  import Caption from '../../pb_caption/_caption'
6
4
  import Draggable from '../_draggable'
7
5
  import { DraggableProvider } from '../context'
@@ -26,16 +24,16 @@ const dataLineVertical = [
26
24
 
27
25
  const dataLineHorizontal = [
28
26
  {
29
- id: "221",
30
- text: "Task 1",
27
+ id: "2111",
28
+ url: "https://unsplash.it/500/400/?image=633",
31
29
  },
32
30
  {
33
- id: "222",
34
- text: "Task 2",
31
+ id: "2122",
32
+ url: "https://unsplash.it/500/400/?image=634",
35
33
  },
36
34
  {
37
- id: "223",
38
- text: "Task 3",
35
+ id: "2133",
36
+ url: "https://unsplash.it/500/400/?image=637",
39
37
  },
40
38
  ];
41
39
 
@@ -54,7 +52,7 @@ const DraggableDropZones = (props) => {
54
52
  initialItems={dataLineVertical}
55
53
  onReorder={(items) => setInitialLineVerticalState(items)}
56
54
  >
57
- <Draggable.Container {...props}>
55
+ <Draggable.Container {...props}>
58
56
  <Flex flexDirection="column"
59
57
  height="367px"
60
58
  >
@@ -70,43 +68,40 @@ const DraggableDropZones = (props) => {
70
68
  </Draggable.Item>
71
69
  ))}
72
70
  </Flex>
73
- </Draggable.Container>
71
+ </Draggable.Container>
74
72
  </DraggableProvider>
75
73
  <Caption marginBottom="xs"
76
74
  marginTop="xl"
77
75
  text="Horizontal"
78
76
  />
79
77
  <Flex>
80
- <DraggableProvider
81
- dropZone={{ type: "line", direction: "horizontal" }}
82
- initialItems={dataLineHorizontal}
83
- onReorder={(items) => setInitialLineHorizontalState(items)}
84
- >
78
+ <DraggableProvider
79
+ dropZone={{ type: "line", direction: "horizontal" }}
80
+ initialItems={dataLineHorizontal}
81
+ onReorder={(items) => setInitialLineHorizontalState(items)}
82
+ >
85
83
  <Draggable.Container
86
84
  htmlOptions={{style:{ width: "285px"}}}
87
85
  {...props}
88
86
  >
89
- <Flex alignItems="stretch"
90
- flexDirection="row"
91
- height="42px"
92
- >
93
- {initialLineHorizontalState.map(({ id, text }) => (
94
- <Card dragId={id}
95
- draggableItem
96
- key={id}
97
- marginRight="xs"
98
- padding="xs"
99
- {...props}
100
- >
101
- <Body
102
- text={text}
103
- {...props}
104
- />
105
- </Card>
106
- ))}
107
- </Flex>
87
+ <Flex alignItems="stretch"
88
+ flexDirection="row"
89
+ height="110px"
90
+ >
91
+ {initialLineHorizontalState.map(({ id, url }) => (
92
+ <Draggable.Item dragId={id}
93
+ key={id}
94
+ marginRight="sm"
95
+ >
96
+ <Image alt={id}
97
+ size="md"
98
+ url={url}
99
+ />
100
+ </Draggable.Item>
101
+ ))}
102
+ </Flex>
108
103
  </Draggable.Container>
109
- </DraggableProvider>
104
+ </DraggableProvider>
110
105
  </Flex>
111
106
  </>
112
107
  );
data/app/pb_kits/playbook/pb_layout/docs/_layout_bracket.jsx CHANGED
@@ -1,11 +1,102 @@
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'
6
4
  import Caption from '../../pb_caption/_caption'
7
5
  import SectionSeparator from '../../pb_section_separator/_section_separator'
8
6
 
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
+
9
100
  const LayoutBracket = () => {
10
101
  return (
11
102
  <div>
@@ -18,80 +109,140 @@ const LayoutBracket = () => {
18
109
  </Layout.RoundLabel>
19
110
  <Layout.Round marginBottom={{ xs: "md", sm: "md" }}>
20
111
  <Layout.Game>
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>
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
+ />
29
127
  </Layout.Game>
30
128
  <Layout.Game>
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>
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
+ />
39
144
  </Layout.Game>
40
145
  <Layout.Game>
41
- <Flex justify="between">
42
- <Body><strong>Lions</strong></Body>
43
- </Flex>
44
- <Flex justify="between">
45
- <Body>BYE</Body>
46
- </Flex>
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
+ />
47
161
  </Layout.Game>
48
162
  <Layout.Game>
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>
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
+ />
57
178
  </Layout.Game>
58
179
  <Layout.Game>
59
- <Flex justify="between">
60
- <Body><strong>Chiefs</strong></Body>
61
- </Flex>
62
- <Flex justify="between">
63
- <Body>BYE</Body>
64
- </Flex>
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
+ />
65
195
  </Layout.Game>
66
196
  <Layout.Game>
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>
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
+ />
75
212
  </Layout.Game>
76
213
  <Layout.Game>
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>
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
+ />
85
229
  </Layout.Game>
86
230
  <Layout.Game>
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>
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
+ />
95
246
  </Layout.Game>
96
247
  </Layout.Round>
97
248
  <Layout.RoundLabel>
@@ -100,44 +251,72 @@ const LayoutBracket = () => {
100
251
  </Layout.RoundLabel>
101
252
  <Layout.Round marginBottom={{ xs: "md", sm: "md" }}>
102
253
  <Layout.Game>
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>
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
+ />
111
269
  </Layout.Game>
112
270
  <Layout.Game>
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>
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
+ />
121
286
  </Layout.Game>
122
287
  <Layout.Game>
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>
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
+ />
131
303
  </Layout.Game>
132
304
  <Layout.Game>
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>
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
+ />
141
320
  </Layout.Game>
142
321
  </Layout.Round>
143
322
  <Layout.RoundLabel>
@@ -146,24 +325,38 @@ const LayoutBracket = () => {
146
325
  </Layout.RoundLabel>
147
326
  <Layout.Round marginBottom={{ xs: "md", sm: "md" }}>
148
327
  <Layout.Game>
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>
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
+ />
157
343
  </Layout.Game>
158
344
  <Layout.Game>
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>
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
+ />
167
360
  </Layout.Game>
168
361
  </Layout.Round>
169
362
  <Layout.RoundLabel>
@@ -172,14 +365,21 @@ const LayoutBracket = () => {
172
365
  </Layout.RoundLabel>
173
366
  <Layout.Round>
174
367
  <Layout.Game>
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>
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
+ />
183
383
  </Layout.Game>
184
384
  </Layout.Round>
185
385
  </Layout>
data/app/pb_kits/playbook/pb_layout/docs/_layout_bracket.md CHANGED
@@ -1,4 +1,4 @@
1
- Use `<Layout.RoundLabel>`, `<Layout.Round>`, and `<Layout.Game>` to make a bracket layout.
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.
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