playbook_ui 14.17.0.pre.alpha.PBNTR935draggablelinedesign7118 → 14.17.0.pre.alpha.PLAY1967bracketlayoutphase27198
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.
- checksums.yaml +4 -4
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_line.jsx +30 -35
- data/app/pb_kits/playbook/pb_layout/_layout.scss +35 -0
- data/app/pb_kits/playbook/pb_layout/_layout.tsx +2 -0
- data/app/pb_kits/playbook/pb_layout/docs/_layout_bracket.jsx +318 -118
- data/app/pb_kits/playbook/pb_layout/docs/_layout_bracket.md +1 -1
- data/app/pb_kits/playbook/pb_layout/subcomponents/_game.tsx +58 -41
- data/app/pb_kits/playbook/pb_layout/subcomponents/_participant.tsx +73 -0
- data/app/pb_kits/playbook/pb_table/styles/_headers.scss +19 -7
- data/dist/chunks/{_typeahead-HqfDnjRe.js → _typeahead-DZZ1n1Oe.js} +1 -1
- data/dist/chunks/{_weekday_stacked-DVQITtQ9.js → _weekday_stacked-P4lpbU7P.js} +2 -2
- data/dist/chunks/vendor.js +1 -1
- data/dist/playbook-doc.js +1 -1
- data/dist/playbook-rails-react-bindings.js +1 -1
- data/dist/playbook-rails.js +1 -1
- data/dist/playbook.css +1 -1
- data/lib/playbook/version.rb +1 -1
- metadata +5 -4
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 3100b608b037f647a2eb7817eb8e611835fd567929948cd07bc2702f44f5d762
|
|
4
|
+
data.tar.gz: 0a3d7c8b581cdfcfa5d7c9840e0ed0cb97873a9baa0780919917142ed49835a3
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 394d412a523574becd28011bdaf9c7d5391e38a1c5d5e063ccc0a70b7a085aba66107aa696ffe084139dff0f61c279c4f52b0ffac36511c64bd5140cb7b500c2
|
|
7
|
+
data.tar.gz: d720ef007c16b4a8645b57b09b4f1dde46fe2046b19294fb1a0ff91e62fdd08a608de4ea049d7aa087e09ba1f63b8fb477e6510f2ba57c567f28c25e4d25502d
|
|
@@ -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: "
|
|
30
|
-
|
|
27
|
+
id: "2111",
|
|
28
|
+
url: "https://unsplash.it/500/400/?image=633",
|
|
31
29
|
},
|
|
32
30
|
{
|
|
33
|
-
id: "
|
|
34
|
-
|
|
31
|
+
id: "2122",
|
|
32
|
+
url: "https://unsplash.it/500/400/?image=634",
|
|
35
33
|
},
|
|
36
34
|
{
|
|
37
|
-
id: "
|
|
38
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
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
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
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
|
-
|
|
104
|
+
</DraggableProvider>
|
|
110
105
|
</Flex>
|
|
111
106
|
</>
|
|
112
107
|
);
|
|
@@ -210,10 +210,45 @@ $bracket-border-width: 4px;
|
|
|
210
210
|
border-right: $bracket-border-width solid $border_light;
|
|
211
211
|
}
|
|
212
212
|
|
|
213
|
+
.polygon_node {
|
|
214
|
+
position: absolute;
|
|
215
|
+
top: calc(50% - 5px);
|
|
216
|
+
right: -10px;
|
|
217
|
+
|
|
218
|
+
width: 0;
|
|
219
|
+
height: 0;
|
|
220
|
+
border-top: 5px solid transparent;
|
|
221
|
+
border-bottom: 5px solid transparent;
|
|
222
|
+
border-left: 10px solid $border_light;
|
|
223
|
+
}
|
|
224
|
+
|
|
213
225
|
.layout_round_label {
|
|
214
226
|
display: none;
|
|
215
227
|
}
|
|
216
228
|
|
|
229
|
+
.layout_participant_winner,
|
|
230
|
+
.layout_participant_self {
|
|
231
|
+
position: relative;
|
|
232
|
+
|
|
233
|
+
&::after {
|
|
234
|
+
content: "";
|
|
235
|
+
position: absolute;
|
|
236
|
+
top: 0;
|
|
237
|
+
width: 4px;
|
|
238
|
+
height: 100%;
|
|
239
|
+
}
|
|
240
|
+
}
|
|
241
|
+
|
|
242
|
+
.layout_participant_winner::after {
|
|
243
|
+
right: 0;
|
|
244
|
+
background: $product_6_highlight;
|
|
245
|
+
}
|
|
246
|
+
|
|
247
|
+
.layout_participant_self::after {
|
|
248
|
+
left: 0;
|
|
249
|
+
background: $category_1;
|
|
250
|
+
}
|
|
251
|
+
|
|
217
252
|
@media (max-width: $screen-md-max) {
|
|
218
253
|
flex-direction: column;
|
|
219
254
|
.layout_round_label {
|
|
@@ -6,6 +6,7 @@ import { GlobalProps, globalProps, globalInlineProps } from '../utilities/global
|
|
|
6
6
|
|
|
7
7
|
import { Round, RoundLabel } from "./subcomponents/_round";
|
|
8
8
|
import Game from "./subcomponents/_game";
|
|
9
|
+
import Participant from "./subcomponents/_participant";
|
|
9
10
|
|
|
10
11
|
type LayoutPropTypes = {
|
|
11
12
|
aria?: {[key: string]: string},
|
|
@@ -219,5 +220,6 @@ Layout.Footer = Footer
|
|
|
219
220
|
Layout.Round = Round
|
|
220
221
|
Layout.Game = Game
|
|
221
222
|
Layout.RoundLabel = RoundLabel
|
|
223
|
+
Layout.Participant = Participant
|
|
222
224
|
|
|
223
225
|
export default Layout
|