playbook_ui 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 (18) 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/_layout.scss +43 -1
  4. data/app/pb_kits/playbook/pb_layout/_layout.tsx +2 -0
  5. data/app/pb_kits/playbook/pb_layout/docs/_layout_bracket.jsx +318 -118
  6. data/app/pb_kits/playbook/pb_layout/docs/_layout_bracket.md +1 -1
  7. data/app/pb_kits/playbook/pb_layout/subcomponents/_game.tsx +78 -41
  8. data/app/pb_kits/playbook/pb_layout/subcomponents/_participant.tsx +73 -0
  9. data/app/pb_kits/playbook/pb_table/styles/_headers.scss +19 -7
  10. data/dist/chunks/{_typeahead-HqfDnjRe.js → _typeahead-DZZ1n1Oe.js} +1 -1
  11. data/dist/chunks/{_weekday_stacked-DVQITtQ9.js → _weekday_stacked-DO7xRd7g.js} +2 -2
  12. data/dist/chunks/vendor.js +1 -1
  13. data/dist/playbook-doc.js +1 -1
  14. data/dist/playbook-rails-react-bindings.js +1 -1
  15. data/dist/playbook-rails.js +1 -1
  16. data/dist/playbook.css +1 -1
  17. data/lib/playbook/version.rb +1 -1
  18. metadata +5 -4
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: ee5a8f7236c5915641d49888d1b31358596a366e9e22a281b560dcaa31bb8936
4
- data.tar.gz: ad235c43f83f72d5d31a9a99e02d662cb7db5b5b5c270d9c1bbe3c9392e9d9ae
3
+ metadata.gz: d66338cc66f0244b82fbcd320f8782c19196ab6f91e17e3a9a0f02bacac3a46b
4
+ data.tar.gz: c25ca063d64d0da5ef17477f3691a3af6eca383c23ac9ebfe8c2c26a03edb7ba
5
5
  SHA512:
6
- metadata.gz: 198ec85648866bcbcb816b91bc9a54e8ea126596c036bc5af0d8fb9ddad100b1cfca65a032a24cc65211f0679495cbbc5ab0f0708cf2751c9e75d1f19fac35bd
7
- data.tar.gz: 9ca8b30bda370751ff399531e4e22879a39beae908d79dedac31dfe5f30159aa501b1a3ed620d80f44e74d1c619ac1517e31c304d8583c9d86862a74a157ba99
6
+ metadata.gz: 9375a05bb12f712de5cc1fa577fe559c1d1687372ecfdebb8b7026bd7b79f05bffc2d9cad088ac2db201b01d33dcf7c13f4736b17e2fa93fe90f1407b53aac45
7
+ data.tar.gz: 9add4571be2cbc89fba49d754332f70a05e7baa7997a18baec842c876b06bac37a4a58c5492fe310a2193205814880486ed35a60a5464b6898aa2d74fcbf5bf7
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/_layout.scss CHANGED
@@ -210,10 +210,51 @@ $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,
230
+ .layout_participant_winner,
231
+ .layout_participant_self {
232
+ height: 60px;
233
+ }
234
+
235
+ .layout_participant_winner,
236
+ .layout_participant_self {
237
+ position: relative;
238
+
239
+ &::after {
240
+ content: "";
241
+ position: absolute;
242
+ top: 0;
243
+ width: 4px;
244
+ height: 100%;
245
+ }
246
+ }
247
+
248
+ .layout_participant_winner::after {
249
+ right: 0;
250
+ background: $product_6_highlight;
251
+ }
252
+
253
+ .layout_participant_self::after {
254
+ left: 0;
255
+ background: $category_1;
256
+ }
257
+
217
258
  @media (max-width: $screen-md-max) {
218
259
  flex-direction: column;
219
260
  .layout_round_label {
@@ -221,7 +262,8 @@ $bracket-border-width: 4px;
221
262
  }
222
263
  .layout_round .layout_game::after,
223
264
  .connector_container,
224
- .half_box {
265
+ .half_box,
266
+ .polygon_node {
225
267
  display: none !important;
226
268
  }
227
269
  }
data/app/pb_kits/playbook/pb_layout/_layout.tsx CHANGED
@@ -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