playbook_ui 14.0.0 → 14.1.0.pre.alpha.PA1477timestampkit3536

Sign up to get free protection for your applications and to get access to all the features.
Files changed (98) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_advanced_table/Components/TableHeaderCell.tsx +5 -2
  3. data/app/pb_kits/playbook/pb_advanced_table/SubKits/TableBody.tsx +24 -20
  4. data/app/pb_kits/playbook/pb_advanced_table/SubKits/TableHeader.tsx +17 -12
  5. data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss +86 -1
  6. data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx +5 -1
  7. data/app/pb_kits/playbook/pb_advanced_table/advanced_table.test.jsx +30 -0
  8. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_responsive.jsx +67 -0
  9. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_responsive.md +1 -0
  10. data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +1 -0
  11. data/app/pb_kits/playbook/pb_advanced_table/docs/index.js +2 -1
  12. data/app/pb_kits/playbook/pb_avatar/_avatar.scss +0 -30
  13. data/app/pb_kits/playbook/pb_avatar/_avatar.tsx +19 -1
  14. data/app/pb_kits/playbook/pb_avatar/avatar.rb +44 -1
  15. data/app/pb_kits/playbook/pb_avatar/avatar.test.js +17 -0
  16. data/app/pb_kits/playbook/pb_date_picker/docs/_description.md +3 -1
  17. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.scss +1 -1
  18. data/app/pb_kits/playbook/pb_form/docs/_form_form_with.html.erb +1 -0
  19. data/app/pb_kits/playbook/pb_icon/_icon.tsx +3 -0
  20. data/app/pb_kits/playbook/pb_icon/icon.rb +2 -0
  21. data/app/pb_kits/playbook/pb_icon_circle/_icon_circle.tsx +2 -1
  22. data/app/pb_kits/playbook/pb_icon_circle/icon_circle.rb +2 -2
  23. data/app/pb_kits/playbook/pb_icon_stat_value/_icon_stat_value.scss +0 -11
  24. data/app/pb_kits/playbook/pb_icon_stat_value/_icon_stat_value.tsx +3 -2
  25. data/app/pb_kits/playbook/pb_icon_stat_value/docs/_icon_stat_value_color.html.erb +1 -0
  26. data/app/pb_kits/playbook/pb_icon_stat_value/icon_stat_value.rb +2 -2
  27. data/app/pb_kits/playbook/pb_icon_stat_value/icon_stat_value.test.js +5 -4
  28. data/app/pb_kits/playbook/pb_nav/_horizontal_nav.scss +1 -1
  29. data/app/pb_kits/playbook/pb_online_status/_online_status.scss +52 -5
  30. data/app/pb_kits/playbook/pb_online_status/_online_status.tsx +6 -1
  31. data/app/pb_kits/playbook/pb_online_status/docs/_online_status_no_border.html.erb +1 -0
  32. data/app/pb_kits/playbook/pb_online_status/docs/_online_status_no_border.jsx +14 -0
  33. data/app/pb_kits/playbook/pb_online_status/docs/_online_status_size.html.erb +3 -0
  34. data/app/pb_kits/playbook/pb_online_status/docs/_online_status_size.jsx +25 -0
  35. data/app/pb_kits/playbook/pb_online_status/docs/example.yml +6 -2
  36. data/app/pb_kits/playbook/pb_online_status/docs/index.js +2 -0
  37. data/app/pb_kits/playbook/pb_online_status/online_status.rb +11 -1
  38. data/app/pb_kits/playbook/pb_online_status/online_status.test.js +31 -0
  39. data/app/pb_kits/playbook/pb_overlay/docs/_overlay_toggle.html.erb +61 -0
  40. data/app/pb_kits/playbook/pb_overlay/docs/_overlay_toggle.jsx +70 -0
  41. data/app/pb_kits/playbook/pb_overlay/docs/_overlay_toggle.md +1 -0
  42. data/app/pb_kits/playbook/pb_overlay/docs/example.yml +4 -2
  43. data/app/pb_kits/playbook/pb_overlay/docs/index.js +1 -0
  44. data/app/pb_kits/playbook/pb_star_rating/_star_rating.scss +83 -6
  45. data/app/pb_kits/playbook/pb_star_rating/docs/example.yml +3 -1
  46. data/app/pb_kits/playbook/pb_star_rating/index.js +73 -4
  47. data/app/pb_kits/playbook/pb_star_rating/star_rating.html.erb +1 -1
  48. data/app/pb_kits/playbook/pb_star_rating/star_rating.rb +2 -2
  49. data/app/pb_kits/playbook/pb_star_rating/stars/utils.tsx +5 -1
  50. data/app/pb_kits/playbook/pb_star_rating/subcomponents/_star_rating_interactive.tsx +50 -21
  51. data/app/pb_kits/playbook/pb_table/_table.tsx +1 -1
  52. data/app/pb_kits/playbook/pb_table/index.ts +4 -4
  53. data/app/pb_kits/playbook/pb_table/subcomponents/_table_body.tsx +1 -1
  54. data/app/pb_kits/playbook/pb_table/subcomponents/_table_cell.tsx +1 -1
  55. data/app/pb_kits/playbook/pb_table/subcomponents/_table_head.tsx +1 -1
  56. data/app/pb_kits/playbook/pb_table/subcomponents/_table_header.tsx +1 -1
  57. data/app/pb_kits/playbook/pb_table/subcomponents/_table_row.tsx +1 -1
  58. data/app/pb_kits/playbook/pb_table/table.test.js +2 -0
  59. data/app/pb_kits/playbook/pb_text_input/_text_input.tsx +1 -1
  60. data/app/pb_kits/playbook/pb_text_input/docs/_text_input_default.jsx +1 -1
  61. data/app/pb_kits/playbook/pb_textarea/_textarea.tsx +45 -27
  62. data/app/pb_kits/playbook/pb_textarea/index.ts +3 -3
  63. data/app/pb_kits/playbook/pb_time/_time.tsx +3 -3
  64. data/app/pb_kits/playbook/pb_time_range_inline/_time_range_inline.tsx +1 -1
  65. data/app/pb_kits/playbook/pb_timeline/_item.tsx +1 -1
  66. data/app/pb_kits/playbook/pb_timeline/_timeline.tsx +1 -1
  67. data/app/pb_kits/playbook/pb_timestamp/timestamp.rb +37 -2
  68. data/app/pb_kits/playbook/pb_title_detail/_title_detail.tsx +10 -10
  69. data/app/pb_kits/playbook/pb_toggle/_toggle.tsx +1 -1
  70. data/app/pb_kits/playbook/pb_tooltip/_tooltip.tsx +2 -2
  71. data/app/pb_kits/playbook/pb_treemap_chart/_treemap_chart.tsx +1 -2
  72. data/app/pb_kits/playbook/pb_treemap_chart/treemapChart.test.js +2 -0
  73. data/app/pb_kits/playbook/pb_typeahead/_typeahead.tsx +2 -2
  74. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_multi_kit.html.erb +1 -1
  75. data/app/pb_kits/playbook/pb_typeahead/typeahead.rb +1 -0
  76. data/app/pb_kits/playbook/pb_user/_user.tsx +1 -1
  77. data/app/pb_kits/playbook/pb_user_badge/_user_badge.tsx +6 -6
  78. data/app/pb_kits/playbook/pb_user_badge/badges/million-dollar.tsx +236 -235
  79. data/app/pb_kits/playbook/pb_user_badge/badges/veteran.tsx +1 -1
  80. data/app/pb_kits/playbook/pb_walkthrough/_walkthrough.tsx +68 -63
  81. data/app/pb_kits/playbook/pb_weekday_stacked/_weekday_stacked.tsx +1 -1
  82. data/app/pb_kits/playbook/utilities/_positioning.scss +26 -15
  83. data/dist/chunks/_typeahead-D-4y9pbv.js +22 -0
  84. data/dist/chunks/_weekday_stacked-Cax4nrUa.js +45 -0
  85. data/dist/chunks/lazysizes-DHz07jlL.js +1 -0
  86. data/dist/chunks/{lib-Bf_E03gc.js → lib-BE0Z3F7x.js} +1 -1
  87. data/dist/chunks/{pb_form_validation-D0dhqeN2.js → pb_form_validation-TzZQ0Flx.js} +1 -1
  88. data/dist/chunks/vendor.js +1 -1
  89. data/dist/playbook-doc.js +1 -1
  90. data/dist/playbook-rails-react-bindings.js +1 -1
  91. data/dist/playbook-rails.js +1 -1
  92. data/dist/playbook.css +1 -1
  93. data/lib/playbook/version.rb +2 -2
  94. metadata +20 -11
  95. data/app/pb_kits/playbook/pb_online_status/_online_status_mixins.scss +0 -32
  96. data/dist/chunks/_typeahead-COUJ88EA.js +0 -22
  97. data/dist/chunks/_weekday_stacked-BAkwel5p.js +0 -45
  98. data/dist/chunks/lazysizes-B7xYodB-.js +0 -1
@@ -1,3 +1,5 @@
1
+ /* eslint-disable react/no-multi-comp */
2
+
1
3
  import React from 'react'
2
4
  import classnames from 'classnames'
3
5
  import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
@@ -24,7 +26,7 @@ type WalkthroughProps = {
24
26
  disableOverlay?: boolean,
25
27
  disableOverlayClose?: boolean,
26
28
  disableScrolling?: boolean,
27
- floaterProps?: object,
29
+ floaterProps?: Record<string, unknown>,
28
30
  hideBackButton?: boolean,
29
31
  hideCloseButton?: boolean,
30
32
  showProgress?: boolean,
@@ -58,89 +60,92 @@ type TooltipProps = {
58
60
  disableBeacon?: boolean,
59
61
  },
60
62
  skip?: boolean,
61
- backProps?: object,
62
- closeProps?: object,
63
- primaryProps?: object,
64
- skipProps?: object,
65
- tooltipProps?: object,
63
+ backProps?: Record<string, unknown>,
64
+ closeProps?: Record<string, unknown>,
65
+ primaryProps?: Record<string, unknown>,
66
+ skipProps?: Record<string, unknown>,
67
+ tooltipProps?: Record<string, unknown>,
66
68
  }
67
69
 
70
+ // eslint-disable-next-line react/display-name
68
71
  const Tooltip = React.forwardRef((props: TooltipProps) => (
69
- <div
72
+ <div
70
73
  className="pb_card_kit_border_none p_none"
71
74
  {...props.tooltipProps}
75
+ >
76
+ {props.step.title && <div>
77
+ <Flex
78
+ align="center"
79
+ justify="between"
80
+ padding="xs"
72
81
  >
73
- {props.step.title && <div>
74
- <Flex
75
- align="center"
76
- justify="between"
77
- padding="xs"
78
- >
79
- <Title
82
+ <Title
80
83
  paddingLeft="xs"
81
84
  size={4}
82
- >
83
- {props.step.title}
84
- </Title>
85
- {props.skip && (<Button
85
+ >
86
+ {props.step.title}
87
+ </Title>
88
+ {props.skip && (
89
+ <Button
86
90
  {...props.skipProps}
87
91
  id="skip"
88
92
  text="Skip Tour"
89
93
  variant="link"
90
- />)}
91
- <Button
94
+ />
95
+ )}
96
+ <Button
92
97
  {...props.skipProps}
93
98
  id="skip"
94
99
  text="Skip Tour"
95
100
  variant="link"
96
- />
97
- </Flex>
98
- <SectionSeparator />
99
- </div>}
101
+ />
102
+ </Flex>
103
+ <SectionSeparator />
104
+ </div>}
100
105
 
101
- <Flex padding="sm">{props.step.content}</Flex>
102
- <SectionSeparator />
103
- <Flex
106
+ <Flex padding="sm">{props.step.content}</Flex>
107
+ <SectionSeparator />
108
+ <Flex
104
109
  justify={props.index == 0 ? 'end' : 'between'}
105
110
  padding="xs"
106
- >
111
+ >
107
112
 
108
- {props.index > 0 && (
109
- <Button
113
+ {props.index > 0 && (
114
+ <Button
110
115
  {...props.backProps}
111
116
  id="back"
112
117
  text="Back"
113
- />
114
- )}
118
+ />
119
+ )}
115
120
 
116
- {props.continuous && !props.isLastStep &&
117
- <Button
121
+ {props.continuous && !props.isLastStep &&
122
+ <Button
118
123
  {...props.primaryProps}
119
124
  id="next"
120
125
  text="Next"
121
- />
122
- }
126
+ />
127
+ }
123
128
 
124
- {!props.continuous &&
125
- <Button
129
+ {!props.continuous &&
130
+ <Button
126
131
  {...props.closeProps}
127
132
  id="close"
128
133
  text="Close"
129
- />
130
- }
134
+ />
135
+ }
131
136
 
132
- {!((props.continuous && !props.isLastStep) || (!props.continuous)) &&
133
- <Button
137
+ {!((props.continuous && !props.isLastStep) || (!props.continuous)) &&
138
+ <Button
134
139
  {...props.closeProps}
135
140
  id="close"
136
141
  text="Close"
137
- />
138
- }
139
- </Flex>
140
- </div>
142
+ />
143
+ }
144
+ </Flex>
145
+ </div>
141
146
  )) as unknown as React.ForwardRefRenderFunction<HTMLDivElement, TooltipRenderProps>
142
147
 
143
- const Walkthrough = (props: WalkthroughProps) => {
148
+ const Walkthrough = (props: WalkthroughProps): React.ReactElement => {
144
149
  const {
145
150
  aria = {},
146
151
  callback,
@@ -170,24 +175,24 @@ const Walkthrough = (props: WalkthroughProps) => {
170
175
 
171
176
  return (
172
177
  <div
173
- {...ariaProps}
174
- {...dataProps}
175
- {...htmlProps}
176
- className={classes}
177
- id={id}
178
+ {...ariaProps}
179
+ {...dataProps}
180
+ {...htmlProps}
181
+ className={classes}
182
+ id={id}
178
183
  >
179
184
  <Joyride
180
- callback={callback}
181
- continuous={continuous}
182
- disableOverlay={disableOverlay}
183
- disableScrolling
184
- floaterProps={floaterProps}
185
- run={run}
186
- showSkipButton={showSkipButton}
187
- steps={steps}
188
- styles={styles}
189
- tooltipComponent={Tooltip}
190
- {...props}
185
+ callback={callback}
186
+ continuous={continuous}
187
+ disableOverlay={disableOverlay}
188
+ disableScrolling
189
+ floaterProps={floaterProps}
190
+ run={run}
191
+ showSkipButton={showSkipButton}
192
+ steps={steps}
193
+ styles={styles}
194
+ tooltipComponent={Tooltip}
195
+ {...props}
191
196
  />
192
197
  </div>
193
198
 
@@ -38,7 +38,7 @@ const getFormattedDate = (value: Date, variant: "day_only" | "month_day" | "expa
38
38
  }
39
39
  }
40
40
 
41
- const WeekdayStacked = (props: WeekdayStackedProps) => {
41
+ const WeekdayStacked = (props: WeekdayStackedProps): React.ReactElement => {
42
42
  const {
43
43
  align = 'left',
44
44
  aria = {},
@@ -19,55 +19,66 @@
19
19
  }
20
20
 
21
21
  .z_index_1 {
22
- z-index: 100;
22
+ z-index: $z_1 !important;
23
23
  }
24
24
 
25
25
  .z_index_2 {
26
- z-index: 200;
26
+ z-index: $z_2 !important;
27
27
  }
28
28
 
29
29
  .z_index_3 {
30
- z-index: 300;
30
+ z-index: $z_3 !important;
31
31
  }
32
32
 
33
33
  .z_index_4 {
34
- z-index: 400;
34
+ z-index: $z_4 !important;
35
35
  }
36
36
 
37
37
  .z_index_5 {
38
- z-index: 500;
38
+ z-index: $z_5 !important;
39
39
  }
40
40
 
41
41
  .z_index_6 {
42
- z-index: 600;
42
+ z-index: $z_6 !important;
43
43
  }
44
44
 
45
45
  .z_index_7 {
46
- z-index: 700;
46
+ z-index: $z_7 !important;
47
47
  }
48
48
 
49
49
  .z_index_8 {
50
- z-index: 800;
50
+ z-index: $z_8 !important;
51
51
  }
52
52
 
53
53
  .z_index_9 {
54
- z-index: 900;
54
+ z-index: $z_9 !important;
55
55
  }
56
56
 
57
57
  .z_index_10 {
58
- z-index: 1000;
59
- }
60
-
61
- $zIndex_values: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10;
58
+ z-index: $z_10 !important;
59
+ }
60
+
61
+ $zIndex_values: (
62
+ 1: $z_1,
63
+ 2: $z_2,
64
+ 3: $z_3,
65
+ 4: $z_4,
66
+ 5: $z_5,
67
+ 6: $z_6,
68
+ 7: $z_7,
69
+ 8: $z_8,
70
+ 9: $z_9,
71
+ 10: $z_10
72
+ );
62
73
 
63
74
  @each $size, $size_value in $breakpoints_grid {
64
- @each $zIndex_value in $zIndex_values {
75
+ @each $zIndex_value, $zIndex_variable in $zIndex_values {
65
76
  $min_size: map-get($size_value, "min");
66
77
  $max_size: map-get($size_value, "max");
67
78
 
68
79
  .z_index_#{$size}_#{$zIndex_value} {
69
80
  @include break_on($min_size, $max_size) {
70
- z-index: #{$zIndex_value * 100} !important;
81
+ z-index: $zIndex_variable !important;
71
82
  }
72
83
  }
73
84
  }