playbook_ui 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 (42) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_advanced_table/Components/RegularTableView.tsx +23 -3
  3. data/app/pb_kits/playbook/pb_advanced_table/Components/TableHeaderCell.tsx +11 -1
  4. data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss +60 -128
  5. data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx +3 -0
  6. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_columns.jsx +58 -0
  7. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_columns.md +6 -0
  8. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_columns_and_header.jsx +64 -0
  9. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_columns_and_header.md +8 -0
  10. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_header.jsx +55 -0
  11. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_header.md +3 -0
  12. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_header_rails.html.erb +33 -0
  13. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_header_rails.md +3 -0
  14. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props.html.erb +1 -1
  15. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props.jsx +1 -2
  16. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_rails.md +2 -2
  17. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_react.md +1 -1
  18. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_sticky_header_rails.md +6 -2
  19. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_sticky_header_react.md +6 -2
  20. data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +6 -2
  21. data/app/pb_kits/playbook/pb_advanced_table/docs/index.js +4 -1
  22. data/app/pb_kits/playbook/pb_advanced_table/scss_partials/advanced_table_sticky_mixin.scss +97 -0
  23. data/app/pb_kits/playbook/pb_form_group/_form_group.scss +23 -3
  24. data/app/pb_kits/playbook/pb_form_group/docs/_form_group_select.html.erb +15 -5
  25. data/app/pb_kits/playbook/pb_form_group/docs/_form_group_select.jsx +39 -6
  26. data/app/pb_kits/playbook/pb_layout/_layout.scss +70 -1
  27. data/app/pb_kits/playbook/pb_layout/_layout.tsx +29 -2
  28. data/app/pb_kits/playbook/pb_layout/docs/_layout_bracket.jsx +322 -118
  29. data/app/pb_kits/playbook/pb_layout/docs/_layout_bracket.md +1 -1
  30. data/app/pb_kits/playbook/pb_layout/subcomponents/_game.tsx +74 -43
  31. data/app/pb_kits/playbook/pb_layout/subcomponents/_participant.tsx +79 -0
  32. data/app/pb_kits/playbook/pb_layout/subcomponents/_round.tsx +21 -4
  33. data/dist/chunks/{_typeahead-C2GOKWtm.js → _typeahead-BY6AFq1l.js} +1 -1
  34. data/dist/chunks/_weekday_stacked-BwWArBYi.js +45 -0
  35. data/dist/chunks/vendor.js +1 -1
  36. data/dist/playbook-doc.js +1 -1
  37. data/dist/playbook-rails-react-bindings.js +1 -1
  38. data/dist/playbook-rails.js +1 -1
  39. data/dist/playbook.css +1 -1
  40. data/lib/playbook/version.rb +1 -1
  41. metadata +14 -4
  42. data/dist/chunks/_weekday_stacked-Cw9LuHnt.js +0 -45
data/app/pb_kits/playbook/pb_layout/subcomponents/_participant.tsx ADDED
@@ -0,0 +1,79 @@
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, hasLastWinnerAndSelf } = props
27
+ const dynamicInlineProps = globalInlineProps(props)
28
+ const isLastWinnerAndSelf = hasLastWinnerAndSelf && self && winner
29
+ const classes = classnames(buildCss('layout_participant', winner ? 'winner' : '', self ? 'self' : '', isLastWinnerAndSelf ? 'last' : ''), globalProps(props), className)
30
+ return (
31
+ <Background
32
+ backgroundColor={winner ? "success_subtle" : "white"}
33
+ className={classes}
34
+ padding="xs"
35
+ style={dynamicInlineProps}
36
+ >
37
+ <Flex justify="between">
38
+ <Avatar
39
+ imageUrl={avatar}
40
+ marginRight="sm"
41
+ name={name}
42
+ size="sm"
43
+ />
44
+ <Body flexGrow={1}>
45
+ <Flex justify="between">
46
+ <Body
47
+ color={winner && !isLastWinnerAndSelf ? "success" : "default"}
48
+ truncate={1}
49
+ >
50
+ {winner ? <strong>{name}{self ? ' (You)' : ''}</strong> : name + (self && !isLastWinnerAndSelf ? ' (You)' : '')}
51
+ </Body>
52
+ <Body
53
+ color={winner && !isLastWinnerAndSelf ? "success" : "light"}
54
+ display="flex"
55
+ >
56
+ {points && (<>
57
+ <strong>{points}</strong>
58
+ <Detail
59
+ color={winner && !isLastWinnerAndSelf ? "success" : "light"}
60
+ text="pts"
61
+ />
62
+ </>)}
63
+ </Body>
64
+ </Flex>
65
+ <Body color="light">
66
+ {territory}
67
+ &nbsp;
68
+ <Badge
69
+ text={rank}
70
+ variant={winner && !isLastWinnerAndSelf ? "success" : self ? "notification" : "neutral"}
71
+ />
72
+ </Body>
73
+ </Body>
74
+ </Flex>
75
+ </Background>
76
+ )
77
+ }
78
+
79
+ export default Participant
data/app/pb_kits/playbook/pb_layout/subcomponents/_round.tsx CHANGED
@@ -25,16 +25,33 @@ type LayoutRoundProps = {
25
25
  children: React.ReactNode[] | React.ReactNode,
26
26
  className?: string,
27
27
  numberOfRounds: number,
28
+ lastRoundWithSelf: number,
28
29
  } & GlobalProps
29
30
 
30
31
  export const Round = (props: LayoutRoundProps) => {
31
- const { children, className, numberOfRounds } = props
32
+ const { children, className, numberOfRounds, lastRoundWithSelf } = props
32
33
  const dynamicInlineProps = globalInlineProps(props)
33
34
  const numberOfChildren = Array.isArray(children) ? children.length : 0
34
35
 
35
- const childrenWithProps = Array.isArray(children) ? children.map((child, index) =>
36
- React.isValidElement(child) ? React.cloneElement(child, { numberOfRounds, numberOfGames: numberOfChildren, isOdd: index % 2 === 0, key: `child_${index}` }) : child
37
- ) : children
36
+ const childrenWithProps = Array.isArray(children)
37
+ ? children.map((child, index) =>
38
+ React.isValidElement(child)
39
+ ? React.cloneElement(child, {
40
+ numberOfRounds,
41
+ numberOfGames: numberOfChildren,
42
+ isOdd: index % 2 === 0,
43
+ key: `child_${index}`,
44
+ lastRoundWithSelf
45
+ })
46
+ : child
47
+ )
48
+ : React.isValidElement(children)
49
+ ? React.cloneElement(children, {
50
+ numberOfRounds,
51
+ numberOfGames: numberOfChildren,
52
+ lastRoundWithSelf
53
+ })
54
+ : children
38
55
 
39
56
  const rightConnectors = Array.from({ length: numberOfChildren / 2 }, (_, index) => (
40
57
  <div