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
|
@@ -0,0 +1,73 @@
|
|
|
1
|
+
import React from 'react'
|
|
2
|
+
import classnames from 'classnames'
|
|
3
|
+
|
|
4
|
+
import { buildCss } from '../../utilities/props'
|
|
5
|
+
import { GlobalProps, globalProps, globalInlineProps } from '../../utilities/globalProps'
|
|
6
|
+
|
|
7
|
+
import Avatar from "../../pb_avatar/_avatar";
|
|
8
|
+
import Body from "../../pb_body/_body";
|
|
9
|
+
import Flex from "../../pb_flex/_flex";
|
|
10
|
+
import Badge from "../../pb_badge/_badge";
|
|
11
|
+
import Detail from "../../pb_detail/_detail";
|
|
12
|
+
import Background from "../../pb_background/_background";
|
|
13
|
+
|
|
14
|
+
type LayoutParticipantProps = {
|
|
15
|
+
className?: string,
|
|
16
|
+
name?: string,
|
|
17
|
+
territory?: string,
|
|
18
|
+
points?: string,
|
|
19
|
+
rank?: string,
|
|
20
|
+
avatar?: string,
|
|
21
|
+
winner?: boolean,
|
|
22
|
+
self?: boolean,
|
|
23
|
+
} & GlobalProps
|
|
24
|
+
|
|
25
|
+
export const Participant = (props: LayoutParticipantProps) => {
|
|
26
|
+
const { className, name = 'To be determined...', territory = '', points, rank, avatar, winner, self } = props
|
|
27
|
+
const dynamicInlineProps = globalInlineProps(props)
|
|
28
|
+
const classes = classnames(buildCss('layout_participant', winner ? 'winner' : '', self ? 'self' : ''), globalProps(props), className)
|
|
29
|
+
return (
|
|
30
|
+
<Background
|
|
31
|
+
backgroundColor={winner ? "success_subtle" : "white"}
|
|
32
|
+
className={classes}
|
|
33
|
+
padding="xs"
|
|
34
|
+
style={dynamicInlineProps}
|
|
35
|
+
>
|
|
36
|
+
<Flex justify="between">
|
|
37
|
+
<Avatar
|
|
38
|
+
imageUrl={avatar}
|
|
39
|
+
marginRight="sm"
|
|
40
|
+
name={name}
|
|
41
|
+
size="sm"
|
|
42
|
+
/>
|
|
43
|
+
<Body flexGrow={1}>
|
|
44
|
+
<Flex justify="between">
|
|
45
|
+
<Body color={winner ? "success" : "default"}>{winner ? <strong>{name}</strong> : name}{self ? ' (You)' : ''}</Body>
|
|
46
|
+
<Body
|
|
47
|
+
color={winner ? "success" : "light"}
|
|
48
|
+
display="flex"
|
|
49
|
+
>
|
|
50
|
+
{points && (<>
|
|
51
|
+
<strong>{points}</strong>
|
|
52
|
+
<Detail
|
|
53
|
+
color={winner ? "success" : "light"}
|
|
54
|
+
text="pts"
|
|
55
|
+
/>
|
|
56
|
+
</>)}
|
|
57
|
+
</Body>
|
|
58
|
+
</Flex>
|
|
59
|
+
<Body color="light">
|
|
60
|
+
{territory}
|
|
61
|
+
|
|
62
|
+
<Badge
|
|
63
|
+
text={rank}
|
|
64
|
+
variant={winner ? "success" : self ? "notification" : "neutral"}
|
|
65
|
+
/>
|
|
66
|
+
</Body>
|
|
67
|
+
</Body>
|
|
68
|
+
</Flex>
|
|
69
|
+
</Background>
|
|
70
|
+
)
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
export default Participant
|
|
@@ -6,8 +6,20 @@
|
|
|
6
6
|
&.table-lg {
|
|
7
7
|
thead, .pb_table_thead {
|
|
8
8
|
tr, .pb_table_tr {
|
|
9
|
-
th
|
|
9
|
+
th:not(:has(
|
|
10
|
+
[class*="pb_body_kit"],
|
|
11
|
+
[class*="pb_detail_kit"],
|
|
12
|
+
[class*="pb_title_kit"]
|
|
13
|
+
)),
|
|
14
|
+
.pb_table_th:not(:has(
|
|
15
|
+
[class*="pb_body_kit"],
|
|
16
|
+
[class*="pb_detail_kit"],
|
|
17
|
+
[class*="pb_title_kit"]
|
|
18
|
+
)) {
|
|
10
19
|
@include caption;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
th, .pb_table_th {
|
|
11
23
|
border-bottom: 1px solid $border_light;
|
|
12
24
|
}
|
|
13
25
|
}
|
|
@@ -83,10 +95,10 @@
|
|
|
83
95
|
|
|
84
96
|
// flatten out corners for floating headerstyle variant to avoid small triangle of white/empty space
|
|
85
97
|
.header-floating > thead > tr:first-child > th:first-child,
|
|
86
|
-
.header-floating > .pb_table_thead > .pb_table_tr:first-child > .pb_table_th:first-child {
|
|
87
|
-
border-top-left-radius: 0 !important;
|
|
88
|
-
}
|
|
89
|
-
.header-floating > thead > tr:first-child > th:last-child,
|
|
90
|
-
.header-floating > .pb_table_thead > .pb_table_tr:first-child > .pb_table_th:last-child {
|
|
91
|
-
border-top-right-radius: 0 !important;
|
|
98
|
+
.header-floating > .pb_table_thead > .pb_table_tr:first-child > .pb_table_th:first-child {
|
|
99
|
+
border-top-left-radius: 0 !important;
|
|
100
|
+
}
|
|
101
|
+
.header-floating > thead > tr:first-child > th:last-child,
|
|
102
|
+
.header-floating > .pb_table_thead > .pb_table_tr:first-child > .pb_table_th:last-child {
|
|
103
|
+
border-top-right-radius: 0 !important;
|
|
92
104
|
}
|