playbook_ui_docs 14.17.0.pre.alpha.play1906overlaykitaddopacityandgradient7232 → 14.17.0.pre.alpha.play2065passphrasewithselect7273

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 (23) 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/_advanced_table_sticky_columns_and_header.jsx +64 -0
  5. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_columns_and_header.md +8 -0
  6. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_header.jsx +55 -0
  7. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_header.md +3 -0
  8. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_header_rails.html.erb +33 -0
  9. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_header_rails.md +3 -0
  10. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props.html.erb +1 -1
  11. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props.jsx +1 -2
  12. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_rails.md +2 -2
  13. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_react.md +1 -1
  14. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_sticky_header_rails.md +6 -2
  15. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_sticky_header_react.md +6 -2
  16. data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +6 -2
  17. data/app/pb_kits/playbook/pb_advanced_table/docs/index.js +4 -1
  18. data/app/pb_kits/playbook/pb_form_group/docs/_form_group_select.html.erb +15 -5
  19. data/app/pb_kits/playbook/pb_form_group/docs/_form_group_select.jsx +39 -6
  20. data/app/pb_kits/playbook/pb_layout/docs/_layout_bracket.jsx +322 -118
  21. data/app/pb_kits/playbook/pb_layout/docs/_layout_bracket.md +1 -1
  22. data/dist/playbook-doc.js +1 -1
  23. metadata +10 -2
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://images.unsplash.com/photo-1628703117067-fb7c9c20946e?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8ZWFnbGVzfGVufDB8fDB8fHww",
10
+ name:"Eagles",
11
+ rank:"#1 NFC East",
12
+ territory:"PHI",
13
+ },
14
+ packers: {
15
+ avatar:"https://images.unsplash.com/photo-1486297678162-eb2a19b0a32d?q=80&w=500&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
16
+ name:"Packers",
17
+ rank:"#3 NFC North",
18
+ territory:"GB",
19
+ },
20
+ vikings: {
21
+ avatar:"https://images.unsplash.com/photo-1525540796810-55f9fbc5592f?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTV8fHZpa2luZ3xlbnwwfHwwfHx8MA%3D%3D",
22
+ name:"Vikings",
23
+ rank:"#2 NFC North",
24
+ territory:"MIN",
25
+ },
26
+ rams: {
27
+ avatar:"https://images.unsplash.com/photo-1490739043913-239b6cdf4084?q=80&w=500&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
28
+ name:"Rams",
29
+ rank:"#1 NFC West",
30
+ territory:"LAR",
31
+ },
32
+ lions: {
33
+ avatar:"https://images.unsplash.com/photo-1614027164847-1b28cfe1df60?q=80&w=500&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
34
+ name:"Lions",
35
+ rank:"#1 NFC North",
36
+ territory:"DET",
37
+ },
38
+ commanders: {
39
+ avatar:"https://images.unsplash.com/photo-1501466044931-62695aada8e9?q=80&w=500&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
40
+ name:"Commanders",
41
+ rank:"#2 NFC East",
42
+ territory:"WAS",
43
+ },
44
+ buccaneers: {
45
+ avatar:"https://images.unsplash.com/photo-1584116843008-46d529f04145?q=80&w=500&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
46
+ name:"Buccaneers",
47
+ rank:"#1 NFC South",
48
+ territory:"TB",
49
+ },
50
+ chiefs: {
51
+ avatar:"https://plus.unsplash.com/premium_photo-1697729864667-57f5f29e946b?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MXx8a2Fuc2FzJTIwY2l0eXxlbnwwfHwwfHx8MA%3D%3D",
52
+ name:"Chiefs",
53
+ rank:"#1 AFC West",
54
+ territory:"KC",
55
+ },
56
+ chargers: {
57
+ avatar:"https://images.unsplash.com/photo-1529310399831-ed472b81d589?q=80&w=500&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
58
+ name:"Chargers",
59
+ rank:"#2 AFC West",
60
+ territory:"LAC",
61
+ },
62
+ texans: {
63
+ avatar:"https://images.unsplash.com/photo-1545345540-ea5d968030af?q=80&w=500&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
64
+ name:"Texans",
65
+ rank:"#1 AFC South",
66
+ territory:"HOU",
67
+ },
68
+ broncos: {
69
+ avatar:"https://images.unsplash.com/photo-1553284965-83fd3e82fa5a?q=80&w=500&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
70
+ name:"Broncos",
71
+ rank:"#3 AFC West",
72
+ territory:"DEN",
73
+ },
74
+ bills: {
75
+ avatar:"https://images.unsplash.com/photo-1575414914265-ebc9aa2637f4?q=80&w=500&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
76
+ name:"Bills",
77
+ rank:"#1 AFC East",
78
+ territory:"BUF",
79
+ },
80
+ steelers: {
81
+ avatar:"https://plus.unsplash.com/premium_photo-1697730155764-cc8ca8f78cbe?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MXx8cGl0dHNidXJnaHxlbnwwfHwwfHx8MA%3D%3D",
82
+ name:"Steelers",
83
+ rank:"#2 AFC North",
84
+ territory:"PIT",
85
+ },
86
+ ravens: {
87
+ avatar:"https://images.unsplash.com/photo-1433888376991-1297486ba3f5?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8cmF2ZW58ZW58MHx8MHx8fDA%3D",
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,141 @@ 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
+ self
125
+ territory={teamData.eagles.territory}
126
+ winner
127
+ />
29
128
  </Layout.Game>
30
129
  <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>
130
+ <Layout.Participant
131
+ avatar={teamData.vikings.avatar}
132
+ name={teamData.vikings.name}
133
+ points="9"
134
+ rank={teamData.vikings.rank}
135
+ territory={teamData.vikings.territory}
136
+ />
137
+ <Layout.Participant
138
+ avatar={teamData.rams.avatar}
139
+ name={teamData.rams.name}
140
+ points="27"
141
+ rank={teamData.rams.rank}
142
+ territory={teamData.rams.territory}
143
+ winner
144
+ />
39
145
  </Layout.Game>
40
146
  <Layout.Game>
41
- <Flex justify="between">
42
- <Body><strong>Lions</strong></Body>
43
- </Flex>
44
- <Flex justify="between">
45
- <Body>BYE</Body>
46
- </Flex>
147
+ <Layout.Participant
148
+ avatar={teamData.lions.avatar}
149
+ name={teamData.lions.name}
150
+ points=""
151
+ rank={teamData.lions.rank}
152
+ territory={teamData.lions.territory}
153
+ winner
154
+ />
155
+ <Layout.Participant
156
+ avatar={teamData.bye.avatar}
157
+ name={teamData.bye.name}
158
+ points=""
159
+ rank={teamData.bye.rank}
160
+ territory={teamData.bye.territory}
161
+ />
47
162
  </Layout.Game>
48
163
  <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>
164
+ <Layout.Participant
165
+ avatar={teamData.commanders.avatar}
166
+ name={teamData.commanders.name}
167
+ points="23"
168
+ rank={teamData.commanders.rank}
169
+ territory={teamData.commanders.territory}
170
+ winner
171
+ />
172
+ <Layout.Participant
173
+ avatar={teamData.buccaneers.avatar}
174
+ name={teamData.buccaneers.name}
175
+ points="20"
176
+ rank={teamData.buccaneers.rank}
177
+ territory={teamData.buccaneers.territory}
178
+ />
57
179
  </Layout.Game>
58
180
  <Layout.Game>
59
- <Flex justify="between">
60
- <Body><strong>Chiefs</strong></Body>
61
- </Flex>
62
- <Flex justify="between">
63
- <Body>BYE</Body>
64
- </Flex>
181
+ <Layout.Participant
182
+ avatar={teamData.chiefs.avatar}
183
+ name={teamData.chiefs.name}
184
+ points=""
185
+ rank={teamData.chiefs.rank}
186
+ territory={teamData.chiefs.territory}
187
+ winner
188
+ />
189
+ <Layout.Participant
190
+ avatar={teamData.bye.avatar}
191
+ name={teamData.bye.name}
192
+ points=""
193
+ rank={teamData.bye.rank}
194
+ territory={teamData.bye.territory}
195
+ />
65
196
  </Layout.Game>
66
197
  <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>
198
+ <Layout.Participant
199
+ avatar={teamData.chargers.avatar}
200
+ name={teamData.chargers.name}
201
+ points="12"
202
+ rank={teamData.chargers.rank}
203
+ territory={teamData.chargers.territory}
204
+ />
205
+ <Layout.Participant
206
+ avatar={teamData.texans.avatar}
207
+ name={teamData.texans.name}
208
+ points="32"
209
+ rank={teamData.texans.rank}
210
+ territory={teamData.texans.territory}
211
+ winner
212
+ />
75
213
  </Layout.Game>
76
214
  <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>
215
+ <Layout.Participant
216
+ avatar={teamData.broncos.avatar}
217
+ name={teamData.broncos.name}
218
+ points="7"
219
+ rank={teamData.broncos.rank}
220
+ territory={teamData.broncos.territory}
221
+ />
222
+ <Layout.Participant
223
+ avatar={teamData.bills.avatar}
224
+ name={teamData.bills.name}
225
+ points="31"
226
+ rank={teamData.bills.rank}
227
+ territory={teamData.bills.territory}
228
+ winner
229
+ />
85
230
  </Layout.Game>
86
231
  <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>
232
+ <Layout.Participant
233
+ avatar={teamData.steelers.avatar}
234
+ name={teamData.steelers.name}
235
+ points="14"
236
+ rank={teamData.steelers.rank}
237
+ territory={teamData.steelers.territory}
238
+ />
239
+ <Layout.Participant
240
+ avatar={teamData.ravens.avatar}
241
+ name={teamData.ravens.name}
242
+ points="28"
243
+ rank={teamData.ravens.rank}
244
+ territory={teamData.ravens.territory}
245
+ winner
246
+ />
95
247
  </Layout.Game>
96
248
  </Layout.Round>
97
249
  <Layout.RoundLabel>
@@ -100,44 +252,73 @@ const LayoutBracket = () => {
100
252
  </Layout.RoundLabel>
101
253
  <Layout.Round marginBottom={{ xs: "md", sm: "md" }}>
102
254
  <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>
255
+ <Layout.Participant
256
+ avatar={teamData.rams.avatar}
257
+ name={teamData.rams.name}
258
+ points="22"
259
+ rank={teamData.rams.rank}
260
+ territory={teamData.rams.territory}
261
+ />
262
+ <Layout.Participant
263
+ avatar={teamData.eagles.avatar}
264
+ name={teamData.eagles.name}
265
+ points="28"
266
+ rank={teamData.eagles.rank}
267
+ self
268
+ territory={teamData.eagles.territory}
269
+ winner
270
+ />
111
271
  </Layout.Game>
112
272
  <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>
273
+ <Layout.Participant
274
+ avatar={teamData.commanders.avatar}
275
+ name={teamData.commanders.name}
276
+ points="45"
277
+ rank={teamData.commanders.rank}
278
+ territory={teamData.commanders.territory}
279
+ winner
280
+ />
281
+ <Layout.Participant
282
+ avatar={teamData.lions.avatar}
283
+ name={teamData.lions.name}
284
+ points="31"
285
+ rank={teamData.lions.rank}
286
+ territory={teamData.lions.territory}
287
+ />
121
288
  </Layout.Game>
122
289
  <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>
290
+ <Layout.Participant
291
+ avatar={teamData.texans.avatar}
292
+ name={teamData.texans.name}
293
+ points="14"
294
+ rank={teamData.texans.rank}
295
+ territory={teamData.texans.territory}
296
+ />
297
+ <Layout.Participant
298
+ avatar={teamData.chiefs.avatar}
299
+ name={teamData.chiefs.name}
300
+ points="23"
301
+ rank={teamData.chiefs.rank}
302
+ territory={teamData.chiefs.territory}
303
+ winner
304
+ />
131
305
  </Layout.Game>
132
306
  <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>
307
+ <Layout.Participant
308
+ avatar={teamData.ravens.avatar}
309
+ name={teamData.ravens.name}
310
+ points="25"
311
+ rank={teamData.ravens.rank}
312
+ territory={teamData.ravens.territory}
313
+ />
314
+ <Layout.Participant
315
+ avatar={teamData.bills.avatar}
316
+ name={teamData.bills.name}
317
+ points="27"
318
+ rank={teamData.bills.rank}
319
+ territory={teamData.bills.territory}
320
+ winner
321
+ />
141
322
  </Layout.Game>
142
323
  </Layout.Round>
143
324
  <Layout.RoundLabel>
@@ -146,24 +327,39 @@ const LayoutBracket = () => {
146
327
  </Layout.RoundLabel>
147
328
  <Layout.Round marginBottom={{ xs: "md", sm: "md" }}>
148
329
  <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>
330
+ <Layout.Participant
331
+ avatar={teamData.commanders.avatar}
332
+ name={teamData.commanders.name}
333
+ points="23"
334
+ rank={teamData.commanders.rank}
335
+ territory={teamData.commanders.territory}
336
+ />
337
+ <Layout.Participant
338
+ avatar={teamData.eagles.avatar}
339
+ name={teamData.eagles.name}
340
+ points="55"
341
+ rank={teamData.eagles.rank}
342
+ self
343
+ territory={teamData.eagles.territory}
344
+ winner
345
+ />
157
346
  </Layout.Game>
158
347
  <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>
348
+ <Layout.Participant
349
+ avatar={teamData.bills.avatar}
350
+ name={teamData.bills.name}
351
+ points="29"
352
+ rank={teamData.bills.rank}
353
+ territory={teamData.bills.territory}
354
+ />
355
+ <Layout.Participant
356
+ avatar={teamData.chiefs.avatar}
357
+ name={teamData.chiefs.name}
358
+ points="32"
359
+ rank={teamData.chiefs.rank}
360
+ territory={teamData.chiefs.territory}
361
+ winner
362
+ />
167
363
  </Layout.Game>
168
364
  </Layout.Round>
169
365
  <Layout.RoundLabel>
@@ -172,14 +368,22 @@ const LayoutBracket = () => {
172
368
  </Layout.RoundLabel>
173
369
  <Layout.Round>
174
370
  <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>
371
+ <Layout.Participant
372
+ avatar={teamData.chiefs.avatar}
373
+ name={teamData.chiefs.name}
374
+ points="22"
375
+ rank={teamData.chiefs.rank}
376
+ territory={teamData.chiefs.territory}
377
+ />
378
+ <Layout.Participant
379
+ avatar={teamData.eagles.avatar}
380
+ name={teamData.eagles.name}
381
+ points="40"
382
+ rank={teamData.eagles.rank}
383
+ self
384
+ territory={teamData.eagles.territory}
385
+ winner
386
+ />
183
387
  </Layout.Game>
184
388
  </Layout.Round>
185
389
  </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