playbook_ui 12.13.0 → 12.14.0.pre.alpha.PLAY603datepickerquickpickinputpresetdropdown456

Sign up to get free protection for your applications and to get access to all the features.
Files changed (44) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_card/_card.scss +2 -3
  3. data/app/pb_kits/playbook/pb_card/card.rb +1 -1
  4. data/app/pb_kits/playbook/pb_card/docs/_card_background.html.erb +22 -35
  5. data/app/pb_kits/playbook/pb_card/docs/_card_background.jsx +34 -37
  6. data/app/pb_kits/playbook/pb_card/docs/_card_header.html.erb +27 -44
  7. data/app/pb_kits/playbook/pb_card/docs/_card_header.jsx +21 -33
  8. data/app/pb_kits/playbook/pb_card/docs/_card_highlight.html.erb +7 -7
  9. data/app/pb_kits/playbook/pb_card/docs/_card_highlight.jsx +6 -8
  10. data/app/pb_kits/playbook/pb_date_picker/_date_picker.scss +26 -0
  11. data/app/pb_kits/playbook/pb_date_picker/_date_picker.tsx +105 -95
  12. data/app/pb_kits/playbook/pb_date_picker/date_picker.html.erb +1 -1
  13. data/app/pb_kits/playbook/pb_date_picker/date_picker.rb +60 -1
  14. data/app/pb_kits/playbook/pb_date_picker/date_picker_helper.ts +16 -3
  15. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_on_close.jsx +43 -0
  16. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_on_close.md +3 -0
  17. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick.html.erb +8 -0
  18. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick.jsx +18 -0
  19. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range.jsx +1 -0
  20. data/app/pb_kits/playbook/pb_date_picker/docs/example.yml +3 -0
  21. data/app/pb_kits/playbook/pb_date_picker/docs/index.js +2 -0
  22. data/app/pb_kits/playbook/pb_date_picker/plugins/quickPick.ts +166 -0
  23. data/app/pb_kits/playbook/pb_date_picker/sass_partials/_quick_pick_styles.scss +56 -0
  24. data/app/pb_kits/playbook/pb_layout/_layout.tsx +6 -1
  25. data/app/pb_kits/playbook/pb_legend/docs/_legend_colors.html.erb +4 -4
  26. data/app/pb_kits/playbook/pb_legend/docs/_legend_colors.jsx +5 -5
  27. data/app/pb_kits/playbook/pb_legend/docs/_legend_custom_colors.html.erb +3 -3
  28. data/app/pb_kits/playbook/pb_legend/docs/_legend_custom_colors.jsx +3 -3
  29. data/app/pb_kits/playbook/pb_nav/_item.tsx +5 -5
  30. data/app/pb_kits/playbook/pb_nav/_nav.tsx +2 -2
  31. data/app/pb_kits/playbook/pb_nav/_subtle_mixin.scss +1 -1
  32. data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.tsx +23 -9
  33. data/app/pb_kits/playbook/pb_table/docs/_table_side_highlight.html.erb +6 -6
  34. data/app/pb_kits/playbook/pb_table/docs/_table_side_highlight.jsx +6 -6
  35. data/app/pb_kits/playbook/tokens/_colors.scss +55 -15
  36. data/app/pb_kits/playbook/tokens/_positioning.scss +13 -0
  37. data/app/pb_kits/playbook/utilities/_colors.scss +7 -13
  38. data/app/pb_kits/playbook/utilities/_positioning.scss +20 -0
  39. data/app/pb_kits/playbook/utilities/globalProps.ts +11 -2
  40. data/lib/playbook/classnames.rb +1 -0
  41. data/lib/playbook/kit_base.rb +2 -0
  42. data/lib/playbook/position.rb +33 -0
  43. data/lib/playbook/version.rb +2 -2
  44. metadata +14 -7
@@ -0,0 +1,56 @@
1
+ @import "../../tokens/animation-curves";
2
+ @import "../../tokens/colors";
3
+ @import "../../tokens/typography";
4
+ @import "../../tokens/titles";
5
+
6
+ // used to display dropdown on the left of the calender
7
+ .quick-pick-drop-down {
8
+ width: auto;
9
+ display: grid;
10
+ }
11
+
12
+ .quick-pick-ul {
13
+ padding: 0;
14
+ margin: 0;
15
+ list-style: none;
16
+ }
17
+
18
+ .nav-item {
19
+ list-style: none;
20
+ border-radius: 6px;
21
+ border-bottom: 0;
22
+ margin: 8px 14px;
23
+ }
24
+
25
+ .nav-item-link {
26
+ text-decoration: none;
27
+ display: flex;
28
+ align-items: center;
29
+ border: none;
30
+ padding: 8px 14px;
31
+ transition-property: color, background-color;
32
+ transition-duration: 0.15s;
33
+ transition-timing-function: $bezier;
34
+ border-radius: 6px;
35
+ line-height: 1.4;
36
+ color: $charcoal;
37
+ font-size: $font_default;
38
+ font-weight: $regular;
39
+ &.active {
40
+ background-color: rgba($primary, 0.03);
41
+ color: $primary;
42
+ letter-spacing: normal;
43
+ }
44
+ @media (hover:hover) {
45
+ &:hover {
46
+ cursor: pointer;
47
+ background-color: rgba($primary, 0.03);
48
+ color: $primary;
49
+ }
50
+ }
51
+ }
52
+
53
+ // Hide the calendar
54
+ .quick-pick-drop-down > .flatpickr-months, .quick-pick-drop-down > .flatpickr-innerContainer {
55
+ display: none;
56
+ }
@@ -151,6 +151,10 @@ const Layout = (props: LayoutPropTypes) => {
151
151
  const nonSideChildren = layoutChildren.filter(
152
152
  (child: React.ReactElement & {type: {displayName: string}}) => child.type?.displayName !== 'Side'
153
153
  )
154
+
155
+ const filteredProps = {...props}
156
+ delete filteredProps?.position
157
+
154
158
  return (
155
159
  <div
156
160
  {...ariaProps}
@@ -159,7 +163,8 @@ const Layout = (props: LayoutPropTypes) => {
159
163
  layoutCss,
160
164
  layoutCollapseCss,
161
165
  className,
162
- globalProps(props)
166
+ //@ts-ignore
167
+ globalProps(filteredProps)
163
168
  )}
164
169
  >
165
170
  {subComponentTags('Side')}
@@ -1,4 +1,4 @@
1
- <%= pb_rails("legend", props: { color: "data_8", text: "Windows" }) %>
2
- <%= pb_rails("legend", props: { color: "warning", text: "Windows" }) %>
3
- <%= pb_rails("legend", props: { color: "windows", text: "Windows" }) %>
4
- <%= pb_rails("legend", props: { color: "category_7", text: "Windows" }) %>
1
+ <%= pb_rails("legend", props: { color: "data_8", text: "Data 8" }) %>
2
+ <%= pb_rails("legend", props: { color: "warning", text: "Warning" }) %>
3
+ <%= pb_rails("legend", props: { color: "product_6_highlight", text: "Product 6 (highlight)" }) %>
4
+ <%= pb_rails("legend", props: { color: "category_7", text: "Category 7" }) %>
@@ -5,22 +5,22 @@ const LegendColors = (props) => (
5
5
  <div>
6
6
  <Legend
7
7
  color="data_8"
8
- text="Windows"
8
+ text="Data 8"
9
9
  {...props}
10
10
  />
11
11
  <Legend
12
12
  color="warning"
13
- text="Windows"
13
+ text="Warning"
14
14
  {...props}
15
15
  />
16
16
  <Legend
17
- color="windows"
18
- text="Windows"
17
+ color="product_6_highlight"
18
+ text="Product 6 (highlight)"
19
19
  {...props}
20
20
  />
21
21
  <Legend
22
22
  color="category_7"
23
- text="Windows"
23
+ text="Category 7"
24
24
  {...props}
25
25
  />
26
26
  </div>
@@ -1,3 +1,3 @@
1
- <%= pb_rails("legend", props: { color: "#dc418a", text: "Windows" }) %>
2
- <%= pb_rails("legend", props: { color: "#3ef0b8", text: "Windows" }) %>
3
- <%= pb_rails("legend", props: { color: "#ab8b04", text: "Windows" }) %>
1
+ <%= pb_rails("legend", props: { color: "#dc418a", text: "Custom Legend Color 1" }) %>
2
+ <%= pb_rails("legend", props: { color: "#3ef0b8", text: "Custom Legend Color 2" }) %>
3
+ <%= pb_rails("legend", props: { color: "#ab8b04", text: "Custom Legend Color 3" }) %>
@@ -5,17 +5,17 @@ const LegendCustomColors = (props) => (
5
5
  <div>
6
6
  <Legend
7
7
  color="#dc418a"
8
- text="Windows"
8
+ text="Custom Legend Color 1"
9
9
  {...props}
10
10
  />
11
11
  <Legend
12
12
  color="#3ef0b8"
13
- text="Windows"
13
+ text="Custom Legend Color 2"
14
14
  {...props}
15
15
  />
16
16
  <Legend
17
17
  color="#ab8b04"
18
- text="Windows"
18
+ text="Custom Legend Color 3"
19
19
  {...props}
20
20
  />
21
21
  </div>
@@ -13,14 +13,14 @@ type NavItemProps = {
13
13
  children?: React.ReactNode[] | React.ReactNode,
14
14
  className?: string,
15
15
  data?: object,
16
- iconLeft: string,
17
- iconRight: string,
16
+ iconLeft?: string,
17
+ iconRight?: string,
18
18
  id?: string,
19
- imageUrl: string,
20
- link: string,
19
+ imageUrl?: string,
20
+ link?: string,
21
21
  onClick?: React.MouseEventHandler<HTMLElement>,
22
22
  target?: '_blank' | '_self' | '_parent' | '_top',
23
- text: string,
23
+ text?: string,
24
24
  }
25
25
 
26
26
  const NavItem = (props: NavItemProps) => {
@@ -17,8 +17,8 @@ type NavProps = {
17
17
  id?: string,
18
18
  onClick?: React.MouseEventHandler<HTMLElement>,
19
19
  orientation?: "vertical" | "horizontal",
20
- link: string,
21
- title: string,
20
+ link?: string,
21
+ title?: string,
22
22
  variant?: "normal" | "subtle",
23
23
  }
24
24
 
@@ -44,7 +44,7 @@
44
44
  &[class*=_active] [class*=_link] {
45
45
  @include pb_title_4;
46
46
  color: $primary;
47
- letter-spacing: normal;
47
+ letter-spacing: normal;
48
48
  }
49
49
  }
50
50
  }
@@ -89,6 +89,7 @@ const PhoneNumberInput = (props: PhoneNumberInputProps) => {
89
89
  const [itiInit, setItiInit] = useState<any>()
90
90
  const [error, setError] = useState('')
91
91
  const [dropDownIsOpen, setDropDownIsOpen] = useState(false)
92
+ const [selectedData, setSelectedData] = useState()
92
93
 
93
94
  const validateTooLongNumber = (itiInit: any) => {
94
95
  const error = itiInit.getValidationError()
@@ -121,10 +122,16 @@ const PhoneNumberInput = (props: PhoneNumberInputProps) => {
121
122
  validateOnlyNumbers()
122
123
  }
123
124
 
125
+ const getCurrentSelectedData = (itiInit: any, inputValue: string) => {
126
+ return { ...itiInit.getSelectedCountryData(), number: inputValue }
127
+ }
128
+
124
129
  const handleOnChange = (evt: React.ChangeEvent<HTMLInputElement>) => {
125
130
  setInputValue(evt.target.value)
126
131
  validateTooLongNumber(itiInit)
127
- onChange(evt)
132
+ const phoneNumberData = getCurrentSelectedData(itiInit, evt.target.value)
133
+ setSelectedData(phoneNumberData)
134
+ onChange(phoneNumberData)
128
135
  isValid(itiInit.isValidNumber())
129
136
  }
130
137
 
@@ -136,15 +143,21 @@ const PhoneNumberInput = (props: PhoneNumberInputProps) => {
136
143
 
137
144
  useEffect(() => {
138
145
  const telInputInit = new intlTelInput(inputRef.current, {
139
- separateDialCode: true,
140
- preferredCountries,
141
- allowDropdown: !disabled,
142
- initialCountry,
143
- onlyCountries,
144
- }
146
+ separateDialCode: true,
147
+ preferredCountries,
148
+ allowDropdown: !disabled,
149
+ initialCountry,
150
+ onlyCountries,
151
+ }
145
152
  )
146
-
147
- inputRef.current.addEventListener("countrychange", () => validateTooLongNumber(telInputInit))
153
+
154
+ inputRef.current.addEventListener("countrychange", (evt: Event) => {
155
+ validateTooLongNumber(telInputInit)
156
+ const phoneNumberData = getCurrentSelectedData(telInputInit, (evt.target as HTMLInputElement).value)
157
+ setSelectedData(phoneNumberData)
158
+ onChange(phoneNumberData)
159
+ })
160
+
148
161
  inputRef.current.addEventListener("open:countrydropdown", () => setDropDownIsOpen(true))
149
162
  inputRef.current.addEventListener("close:countrydropdown", () => setDropDownIsOpen(false))
150
163
 
@@ -156,6 +169,7 @@ const PhoneNumberInput = (props: PhoneNumberInputProps) => {
156
169
  <TextInput
157
170
  className={dropDownIsOpen ? 'dropdown_open' : ''}
158
171
  dark={dark}
172
+ data-phone-number={JSON.stringify(selectedData)}
159
173
  disabled={disabled}
160
174
  error={error}
161
175
  id={id}
@@ -9,22 +9,22 @@
9
9
  </tr>
10
10
  </thead>
11
11
  <tbody>
12
- <%= pb_rails("table/table_row", props: { side_highlight_color: "solar" }) do %>
13
- <td>Solar</td>
12
+ <%= pb_rails("table/table_row", props: { side_highlight_color: "product_1_highlight" }) do %>
13
+ <td>Product 1</td>
14
14
  <td>Value 2</td>
15
15
  <td>Value 3</td>
16
16
  <td>Value 4</td>
17
17
  <td>Value 5</td>
18
18
  <% end %>
19
- <%= pb_rails("table/table_row", props: { side_highlight_color: "roofing" }) do %>
20
- <td>Roofing</td>
19
+ <%= pb_rails("table/table_row", props: { side_highlight_color: "product_2_highlight" }) do %>
20
+ <td>Product 2</td>
21
21
  <td>Value 2</td>
22
22
  <td>Value 3</td>
23
23
  <td>Value 4</td>
24
24
  <td>Value 5</td>
25
25
  <% end %>
26
- <%= pb_rails("table/table_row", props: { side_highlight_color: "gutters" }) do %>
27
- <td>Gutters</td>
26
+ <%= pb_rails("table/table_row", props: { side_highlight_color: "product_3_highlight" }) do %>
27
+ <td>Product 3</td>
28
28
  <td>Value 2</td>
29
29
  <td>Value 3</td>
30
30
  <td>Value 4</td>
@@ -21,30 +21,30 @@ const TableSideHighlight = (props) => {
21
21
  </thead>
22
22
  <tbody>
23
23
  <TableRow
24
- sideHighlightColor="solar"
24
+ sideHighlightColor="product_1_highlight"
25
25
  {...props}
26
26
  >
27
- <td>{'Solar'}</td>
27
+ <td>{'Product 1'}</td>
28
28
  <td>{'Value 2'}</td>
29
29
  <td>{'Value 3'}</td>
30
30
  <td>{'Value 4'}</td>
31
31
  <td>{'Value 5'}</td>
32
32
  </TableRow>
33
33
  <TableRow
34
- sideHighlightColor="roofing"
34
+ sideHighlightColor="product_2_highlight"
35
35
  {...props}
36
36
  >
37
- <td>{'Roofing'}</td>
37
+ <td>{'Product 2'}</td>
38
38
  <td>{'Value 2'}</td>
39
39
  <td>{'Value 3'}</td>
40
40
  <td>{'Value 4'}</td>
41
41
  <td>{'Value 5'}</td>
42
42
  </TableRow>
43
43
  <TableRow
44
- sideHighlightColor="gutters"
44
+ sideHighlightColor="product_3_highlight"
45
45
  {...props}
46
46
  >
47
- <td>{'Gutters'}</td>
47
+ <td>{'Product 3'}</td>
48
48
  <td>{'Value 2'}</td>
49
49
  <td>{'Value 3'}</td>
50
50
  <td>{'Value 4'}</td>
@@ -213,22 +213,62 @@ $status_color_text: (
213
213
  $primary_action: $primary !default;
214
214
 
215
215
  /* Product colors ---------------------*/
216
- $windows: $royal !default;
217
- $siding: $yellow !default;
218
- $doors: $teal !default;
219
- $solar: $green !default;
220
- $roofing: $slate !default;
221
- $gutters: $purple !default;
222
- $insulation: $red !default;
216
+ $product_1_background: #003DB2 !default;
217
+ $product_1_highlight: #0057FF !default;
218
+ $product_2_background: #6000AC !default;
219
+ $product_2_highlight: #8200E9 !default;
220
+ $product_3_background: #B85C00 !default;
221
+ $product_3_highlight: #CE7500 !default;
222
+ $product_4_background: #007E8F !default;
223
+ $product_4_highlight: #00B9D2 !default;
224
+ $product_5_background: #760B24 !default;
225
+ $product_5_highlight: #B8032E !default;
226
+ $product_6_background: #008540 !default;
227
+ $product_6_highlight: #00A851 !default;
228
+ $product_7_background: #96006C !default;
229
+ $product_7_highlight: #CD0094 !default;
230
+ $product_8_background: #144075 !default;
231
+ $product_8_highlight: #1A569E !default;
232
+ $product_9_background: #fcc419 !default;
233
+ $product_9_highlight: #ffd43b !default;
234
+ $product_10_background: #20c997 !default;
235
+ $product_10_highlight: #38d9a9 !default;
236
+ $windows: $product_1_background !default; // deprecated
237
+ $siding: $product_2_background !default; // deprecated
238
+ $doors: $product_3_background !default; // deprecated
239
+ $solar: $product_4_background !default; // deprecated
240
+ $roofing: $product_5_background !default; // deprecated
241
+ $gutters: $product_6_background !default; // deprecated
242
+ $insulation: $product_7_background !default; // deprecated
223
243
  $product_colors: (
224
- windows: $windows,
225
- siding: $siding,
226
- doors: $doors,
227
- solar: $solar,
228
- roofing: $roofing,
229
- gutters: $gutters,
230
- insulation: $insulation
231
- );
244
+ windows: $windows,
245
+ siding: $siding,
246
+ doors: $doors,
247
+ solar: $solar,
248
+ roofing: $roofing,
249
+ gutters: $gutters,
250
+ insulation: $insulation,
251
+ product_1_background: $product_1_background,
252
+ product_1_highlight: $product_1_highlight,
253
+ product_2_background: $product_2_background,
254
+ product_2_highlight: $product_2_highlight,
255
+ product_3_background: $product_3_background,
256
+ product_3_highlight: $product_3_highlight,
257
+ product_4_background: $product_4_background,
258
+ product_4_highlight: $product_4_highlight,
259
+ product_5_background: $product_5_background,
260
+ product_5_highlight: $product_5_highlight,
261
+ product_6_background: $product_6_background,
262
+ product_6_highlight: $product_6_highlight,
263
+ product_7_background: $product_7_background,
264
+ product_7_highlight: $product_7_highlight,
265
+ product_8_background: $product_8_background,
266
+ product_8_highlight: $product_8_highlight,
267
+ product_9_background: $product_9_background,
268
+ product_9_highlight: $product_9_highlight,
269
+ product_10_background: $product_10_background,
270
+ product_10_highlight: $product_10_highlight
271
+ ) !default;
232
272
 
233
273
  /* Category colors ---------------------*/
234
274
  $category_1: $royal !default;
@@ -1,3 +1,16 @@
1
+ $relative: relative !default;
2
+ $absolute: absolute !default;
3
+ $fixed: fixed !default;
4
+ $sticky: sticky !default;
5
+ $static: static !default;
6
+ $position: (
7
+ relative: $relative,
8
+ absolute: $absolute,
9
+ fixed: $fixed,
10
+ sticky: $sticky,
11
+ static: $static
12
+ );
13
+
1
14
  // z_index variables
2
15
  $z_1: 100 !default;
3
16
  $z_2: 200 !default;
@@ -1,3 +1,5 @@
1
+ // Color Helper Utilities
2
+
1
3
  @function shade($color, $percentage) {
2
4
  @return mix($charcoal, $color, $percentage);
3
5
  }
@@ -14,9 +16,12 @@
14
16
  @return $text_color;
15
17
  }
16
18
 
19
+
20
+ // Generate Color Helper Classes
21
+
17
22
  @mixin background-color($colors-list) {
18
23
  @each $name, $color in $colors-list {
19
- .#{$name} {
24
+ .pb_web_#{$name} {
20
25
  background-color: $color !important;
21
26
  }
22
27
  }
@@ -28,15 +33,4 @@
28
33
  color: $color !important;
29
34
  }
30
35
  }
31
- }
32
-
33
- .bg_gradient {
34
- background: $gradient_start;
35
- background: -moz-linear-gradient(-45deg, $gradient_start 0%, $gradient_end 100%);
36
- background: -webkit-linear-gradient(-45deg, $gradient_start 0%, $gradient_end 100%);
37
- background: linear-gradient(135deg, $gradient_start 0%, $gradient_end 100%);
38
- filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#{$gradient_start}', endColorstr='#{$gradient_end}',GradientType=1 );
39
- }
40
-
41
- @include text-color($text_colors);
42
- @include background-color($background_colors);
36
+ }
@@ -1,3 +1,23 @@
1
+ .position_relative {
2
+ position: relative;
3
+ }
4
+
5
+ .position_absolute {
6
+ position: absolute;
7
+ }
8
+
9
+ .position_fixed {
10
+ position: fixed;
11
+ }
12
+
13
+ .position_sticky {
14
+ position: sticky;
15
+ }
16
+
17
+ .position_static {
18
+ position: static;
19
+ }
20
+
1
21
  .z_index_1 {
2
22
  z-index: 100;
3
23
  }
@@ -100,6 +100,10 @@ type Padding = {
100
100
  padding?: AllSizes,
101
101
  }
102
102
 
103
+ type Position = {
104
+ position?: "relative" | "absolute" | "fixed" | "sticky" | "static",
105
+ }
106
+
103
107
  type Shadow = {
104
108
  shadow?: "none" | "deep" | "deeper" | "deepest",
105
109
  }
@@ -115,7 +119,7 @@ export type GlobalProps = AlignContent & AlignItems & AlignSelf &
115
119
  BorderRadius & Cursor & Dark & Display & DisplaySizes & Flex & FlexDirection &
116
120
  FlexGrow & FlexShrink & FlexWrap & JustifyContent & JustifySelf &
117
121
  LineHeight & Margin & MaxWidth & NumberSpacing & Order & Padding &
118
- Shadow & ZIndex
122
+ Position & Shadow & ZIndex
119
123
 
120
124
  const getResponsivePropClasses = (prop: {[key: string]: string}, classPrefix: string) => {
121
125
  const keys: string[] = Object.keys(prop)
@@ -283,7 +287,12 @@ const PROP_CATEGORIES: {[key:string]: (props: {[key: string]: any}) => string} =
283
287
  } else {
284
288
  return order ? `flex_order_${order}` : ''
285
289
  }
286
- }
290
+ },
291
+ positionProps: ({ position }: Position) => {
292
+ let css = ''
293
+ css += position && position !== 'static' ? `position_${position}` : ''
294
+ return css
295
+ },
287
296
  }
288
297
 
289
298
  type DefaultProps = {[key: string]: string} | Record<string, unknown>
@@ -31,6 +31,7 @@ module Playbook
31
31
  flex_grow_props,
32
32
  flex_shrink_props,
33
33
  order_props,
34
+ position_props,
34
35
  ].compact.join(" ")
35
36
  end
36
37
 
@@ -19,6 +19,7 @@ require "playbook/flex"
19
19
  require "playbook/flex_grow"
20
20
  require "playbook/flex_shrink"
21
21
  require "playbook/order"
22
+ require "playbook/position"
22
23
 
23
24
  module Playbook
24
25
  class KitBase < ViewComponent::Base
@@ -43,6 +44,7 @@ module Playbook
43
44
  include Playbook::FlexGrow
44
45
  include Playbook::FlexShrink
45
46
  include Playbook::Order
47
+ include Playbook::Position
46
48
 
47
49
  prop :id
48
50
  prop :data, type: Playbook::Props::Hash, default: {}
@@ -0,0 +1,33 @@
1
+ # frozen_string_literal: true
2
+
3
+ module Playbook
4
+ module Position
5
+ def self.included(base)
6
+ base.prop :position
7
+ end
8
+
9
+ private
10
+
11
+ def position_props
12
+ selected_props = position_options.keys.select { |sk| try(sk) }
13
+ return nil unless selected_props.present?
14
+
15
+ selected_props.map do |k|
16
+ value = send(k)
17
+ return nil unless position_values.include? value
18
+
19
+ "position_#{value}"
20
+ end.compact.join(" ")
21
+ end
22
+
23
+ def position_options
24
+ {
25
+ position: "position",
26
+ }
27
+ end
28
+
29
+ def position_values
30
+ %w[relative absolute fixed sticky]
31
+ end
32
+ end
33
+ end
@@ -1,6 +1,6 @@
1
1
  # frozen_string_literal: true
2
2
 
3
3
  module Playbook
4
- PREVIOUS_VERSION = "12.12.0"
5
- VERSION = "12.13.0"
4
+ PREVIOUS_VERSION = "12.14.0"
5
+ VERSION = "12.14.0.pre.alpha.PLAY603datepickerquickpickinputpresetdropdown456"
6
6
  end
metadata CHANGED
@@ -1,15 +1,15 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: playbook_ui
3
3
  version: !ruby/object:Gem::Version
4
- version: 12.13.0
4
+ version: 12.14.0.pre.alpha.PLAY603datepickerquickpickinputpresetdropdown456
5
5
  platform: ruby
6
6
  authors:
7
7
  - Power UX
8
8
  - Power Devs
9
- autorequire:
9
+ autorequire:
10
10
  bindir: bin
11
11
  cert_chain: []
12
- date: 2023-04-04 00:00:00.000000000 Z
12
+ date: 2023-04-10 00:00:00.000000000 Z
13
13
  dependencies:
14
14
  - !ruby/object:Gem::Dependency
15
15
  name: actionpack
@@ -738,11 +738,15 @@ files:
738
738
  - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_month_and_year.md
739
739
  - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_on_change.jsx
740
740
  - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_on_change.md
741
+ - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_on_close.jsx
742
+ - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_on_close.md
741
743
  - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_positions.html.erb
742
744
  - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_positions.jsx
743
745
  - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_positions.md
744
746
  - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_positions_element.html.erb
745
747
  - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_positions_element.jsx
748
+ - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick.html.erb
749
+ - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick.jsx
746
750
  - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range.html.erb
747
751
  - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range.jsx
748
752
  - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_time.html.erb
@@ -757,6 +761,7 @@ files:
757
761
  - app/pb_kits/playbook/pb_date_picker/docs/_description.md
758
762
  - app/pb_kits/playbook/pb_date_picker/docs/example.yml
759
763
  - app/pb_kits/playbook/pb_date_picker/docs/index.js
764
+ - app/pb_kits/playbook/pb_date_picker/plugins/quickPick.ts
760
765
  - app/pb_kits/playbook/pb_date_picker/plugins/timeSelect.ts
761
766
  - app/pb_kits/playbook/pb_date_picker/sass_partials/_calendar_input_icon.scss
762
767
  - app/pb_kits/playbook/pb_date_picker/sass_partials/_day_styles.scss
@@ -766,6 +771,7 @@ files:
766
771
  - app/pb_kits/playbook/pb_date_picker/sass_partials/_input_styles.scss
767
772
  - app/pb_kits/playbook/pb_date_picker/sass_partials/_month_and_year_styles.scss
768
773
  - app/pb_kits/playbook/pb_date_picker/sass_partials/_overrides.scss
774
+ - app/pb_kits/playbook/pb_date_picker/sass_partials/_quick_pick_styles.scss
769
775
  - app/pb_kits/playbook/pb_date_picker/sass_partials/_time_selection_styles.scss
770
776
  - app/pb_kits/playbook/pb_date_picker/sass_partials/_week_styles.scss
771
777
  - app/pb_kits/playbook/pb_date_range_inline/_date_range_inline.scss
@@ -2438,6 +2444,7 @@ files:
2438
2444
  - lib/playbook/pb_doc_helper.rb
2439
2445
  - lib/playbook/pb_forms_helper.rb
2440
2446
  - lib/playbook/pb_kit_helper.rb
2447
+ - lib/playbook/position.rb
2441
2448
  - lib/playbook/props.rb
2442
2449
  - lib/playbook/props/array.rb
2443
2450
  - lib/playbook/props/base.rb
@@ -2462,7 +2469,7 @@ homepage: http://playbook.powerapp.cloud
2462
2469
  licenses:
2463
2470
  - ISC
2464
2471
  metadata: {}
2465
- post_install_message:
2472
+ post_install_message:
2466
2473
  rdoc_options: []
2467
2474
  require_paths:
2468
2475
  - lib
@@ -2473,12 +2480,12 @@ required_ruby_version: !ruby/object:Gem::Requirement
2473
2480
  version: '0'
2474
2481
  required_rubygems_version: !ruby/object:Gem::Requirement
2475
2482
  requirements:
2476
- - - ">="
2483
+ - - ">"
2477
2484
  - !ruby/object:Gem::Version
2478
- version: '0'
2485
+ version: 1.3.1
2479
2486
  requirements: []
2480
2487
  rubygems_version: 3.3.7
2481
- signing_key:
2488
+ signing_key:
2482
2489
  specification_version: 4
2483
2490
  summary: Playbook Design System
2484
2491
  test_files: []