playbook_ui_docs 14.17.0.pre.alpha.PLAY1967bracketlayoutphase27198 → 14.17.0.pre.alpha.alphaforaudiences7167

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 (26) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones.jsx +105 -102
  3. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones.md +3 -3
  4. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_colors.jsx +48 -50
  5. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_colors.md +1 -1
  6. data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_with_table.jsx → _draggable_with_table_react.jsx} +1 -1
  7. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_table_react.md +1 -3
  8. data/app/pb_kits/playbook/pb_draggable/docs/example.yml +6 -9
  9. data/app/pb_kits/playbook/pb_draggable/docs/index.js +1 -4
  10. data/app/pb_kits/playbook/pb_layout/docs/_layout_bracket.jsx +118 -318
  11. data/app/pb_kits/playbook/pb_layout/docs/_layout_bracket.md +1 -1
  12. data/dist/playbook-doc.js +1 -1
  13. metadata +14 -16
  14. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_line.jsx +0 -110
  15. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_line.md +0 -5
  16. /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_default_react.md → _draggable_default.md} +0 -0
  17. /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_default.html.erb → _draggable_default_rails.html.erb} +0 -0
  18. /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_multiple_containers_react.md → _draggable_multiple_containers.md} +0 -0
  19. /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_multiple_containers.html.erb → _draggable_multiple_containers_rails.html.erb} +0 -0
  20. /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_with_cards_react.md → _draggable_with_cards.md} +0 -0
  21. /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_with_cards.html.erb → _draggable_with_cards_rails.html.erb} +0 -0
  22. /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_with_list_react.md → _draggable_with_list.md} +0 -0
  23. /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_with_list.html.erb → _draggable_with_list_rails.html.erb} +0 -0
  24. /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_with_selectable_list_react.md → _draggable_with_selectable_list.md} +0 -0
  25. /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_with_selectable_list.html.erb → _draggable_with_selectable_list_rails.html.erb} +0 -0
  26. /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_with_table_rails.md → _draggable_with_table.md} +0 -0
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