playbook_ui 12.23.0.pre.alpha.play698responsivespacingglobalprop703 → 12.24.0.pre.alpha.PLAY603datepickerquickpickinputpresetdropdown752

Sign up to get free protection for your applications and to get access to all the features.
Files changed (34) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_avatar/docs/_avatar_swift.md +1 -0
  3. data/app/pb_kits/playbook/pb_avatar/docs/example.yml +2 -0
  4. data/app/pb_kits/playbook/pb_card/_card.tsx +1 -0
  5. data/app/pb_kits/playbook/pb_date_picker/_date_picker.scss +26 -0
  6. data/app/pb_kits/playbook/pb_date_picker/_date_picker.tsx +99 -95
  7. data/app/pb_kits/playbook/pb_date_picker/date_picker.html.erb +3 -2
  8. data/app/pb_kits/playbook/pb_date_picker/date_picker.rb +1 -1
  9. data/app/pb_kits/playbook/pb_date_picker/date_picker.test.js +44 -1
  10. data/app/pb_kits/playbook/pb_date_picker/date_picker_helper.ts +34 -2
  11. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick.html.erb +8 -0
  12. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick.jsx +18 -0
  13. data/app/pb_kits/playbook/pb_date_picker/docs/example.yml +2 -0
  14. data/app/pb_kits/playbook/pb_date_picker/docs/index.js +2 -1
  15. data/app/pb_kits/playbook/pb_date_picker/plugins/quickPick.tsx +168 -0
  16. data/app/pb_kits/playbook/pb_date_picker/sass_partials/_calendar_input_icon.scss +3 -2
  17. data/app/pb_kits/playbook/pb_date_picker/sass_partials/_quick_pick_styles.scss +75 -0
  18. data/app/pb_kits/playbook/pb_docs/kit_example.html.erb +6 -1
  19. data/app/pb_kits/playbook/pb_docs/kit_example.rb +13 -4
  20. data/app/pb_kits/playbook/pb_nav/_item.tsx +1 -1
  21. data/app/pb_kits/playbook/pb_nav/_subtle_mixin.scss +1 -1
  22. data/app/pb_kits/playbook/pb_title/_title.scss +1 -0
  23. data/app/pb_kits/playbook/pb_title/docs/_title_light_weight.html.erb +1 -0
  24. data/app/pb_kits/playbook/pb_title/docs/_title_light_weight.jsx +11 -6
  25. data/app/pb_kits/playbook/pb_title/docs/_title_light_weight.md +2 -2
  26. data/dist/playbook-rails.js +323 -0
  27. data/lib/playbook/pb_doc_helper.rb +4 -1
  28. data/lib/playbook/version.rb +2 -2
  29. data/lib/playbook.rb +1 -2
  30. metadata +12 -36
  31. data/app/pb_kits/playbook/pb_docs/kit_api.html.erb +0 -311
  32. data/app/pb_kits/playbook/pb_docs/kit_api.rb +0 -149
  33. data/lib/playbook/markdown/helper.rb +0 -132
  34. data/lib/playbook/markdown.rb +0 -3
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 8b6a15cabfa01aa2e44305a74b64bccad017a2bf3281ccd588bf5314200951a5
4
- data.tar.gz: f6b92f0a2d92245cefc1bc3f5e6d185be43e7eeff52cfed9f06999a1839c2fbd
3
+ metadata.gz: 0f8b40ca25f48cad70dda69151a876d4bd376462c1311c67ebe0d7cf6dcb5aa5
4
+ data.tar.gz: 77b7d5128b9161ce0cf7086549f6145d18cb2b5dca7c4e7bae4fdd367a818648
5
5
  SHA512:
6
- metadata.gz: 90f06d4bd1dea2ac4a157cf542268f0a318a07e0d6608924ebd63b474fa8da543293987bfeb4f49c498f09b241c5f4cd0618cf75cea1505eecead9306d99a2f2
7
- data.tar.gz: 1ce67914400c0bed66b4fe05bd9676c5f038494071b8761c0b3191ff9d1125c8d5cedcfe71da806d8de95e19c8596aa4e31482355320cb1ecbbf5361667ce47f
6
+ metadata.gz: f64196a74910d9d4d6e6568fc502897497403997f502da53a243715f9d80a04508f8a4103074bd571dbe088d7289f9f9245dd62e4f07a767c9a92a6fbe82b358
7
+ data.tar.gz: '084ff9993eecc00ad4685f6f8993e93ed41690ccce4524dea4ea87a7880cd13019984384bec8002f654b082db4019dc8fb8a10711ae0a45d0c2bbfb6da9cc789'
@@ -0,0 +1 @@
1
+ ![image for avatar](https://images.unsplash.com/photo-1684237276530-a562fa8338b1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=580&q=80)
@@ -9,3 +9,5 @@ examples:
9
9
  - avatar_monogram: Monogram
10
10
  - avatar_no_image: "Bad Image Link"
11
11
  - avatar_status: Status
12
+ swift:
13
+ - avatar_swift: Default
@@ -54,6 +54,7 @@ const Header = (props: CardHeaderProps) => {
54
54
  )
55
55
  }
56
56
 
57
+
57
58
  // Body component
58
59
  const Body = (props: CardBodyProps) => {
59
60
  const { children, padding = 'md', className } = props
@@ -6,6 +6,7 @@
6
6
  @import "./sass_partials/month_and_year_styles";
7
7
  @import "./sass_partials/time_selection_styles";
8
8
  @import "./sass_partials/input_styles";
9
+ @import "./sass_partials/quick_pick_styles";
9
10
 
10
11
  [class^=pb_date_picker_kit] {
11
12
  .input_wrapper {
@@ -26,7 +27,32 @@
26
27
  @include transition_default;
27
28
  border-color: $primary;
28
29
  }
30
+ .add-on-card {
31
+ border-color: $primary;
32
+ }
33
+ }
34
+
35
+ @media (hover: hover) {
36
+ &:hover {
37
+ .add-on-card {
38
+ cursor: pointer;
39
+ background-color: rgba($focus_input_light,$opacity_5);
40
+ }
41
+ }
42
+ }
43
+ .text_input_wrapper_add_on .add-on-icon {
44
+ color: $text_lt_light
29
45
  }
46
+
47
+ .text_input_wrapper_add_on .add-on-right .text_input{
48
+ cursor: pointer;
49
+ }
50
+
51
+ }
52
+
53
+
54
+ .pb_popover_reference_wrapper {
55
+ display: unset !important
30
56
  }
31
57
 
32
58
  .flatpickr-calendar {
@@ -30,7 +30,7 @@ type DatePickerProps = {
30
30
  inputAria?: { [key: string]: string },
31
31
  inputData?: { [key: string]: string },
32
32
  inputOnChange?: (e: React.FormEvent<HTMLInputElement>) => void,
33
- inputValue?: any,
33
+ inputValue?: string,
34
34
  label?: string,
35
35
  maxDate: string,
36
36
  minDate: string,
@@ -39,7 +39,7 @@ type DatePickerProps = {
39
39
  placeholder?: string,
40
40
  positionElement?: HTMLElement | null,
41
41
  scrollContainer?: string,
42
- selectionType?: "month" | "week",
42
+ selectionType?: "month" | "week"| "quickpick",
43
43
  showTimezone?: boolean,
44
44
  staticPosition: boolean,
45
45
  timeFormat?: string,
@@ -96,46 +96,46 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
96
96
  const inputAriaProps = buildAriaProps(inputAria)
97
97
  const inputDataProps = buildDataProps(inputData)
98
98
 
99
+ useEffect(() => {
100
+ datePickerHelper({
101
+ allowInput,
102
+ defaultDate,
103
+ disableDate,
104
+ disableRange,
105
+ disableWeekdays,
106
+ enableTime,
107
+ format,
108
+ hideIcon,
109
+ inLine,
110
+ maxDate,
111
+ minDate,
112
+ mode,
113
+ onChange,
114
+ onClose,
115
+ pickerId,
116
+ plugins,
117
+ // eslint-disable-next-line @typescript-eslint/ban-ts-comment
118
+ // @ts-ignore
119
+ position,
120
+ positionElement,
121
+ selectionType,
122
+ showTimezone,
123
+ staticPosition,
124
+ yearRange,
125
+ required: false,
126
+ }, scrollContainer)
127
+ })
99
128
  const filteredProps = {...props}
100
129
  delete filteredProps?.position
101
130
 
102
131
  const classes = classnames(
103
132
  buildCss('pb_date_picker_kit'),
133
+ // eslint-disable-next-line @typescript-eslint/ban-ts-comment
104
134
  //@ts-ignore
105
135
  globalProps(filteredProps),
106
136
  error ? 'error' : null,
107
137
  className
108
138
  )
109
-
110
- useEffect(() => {
111
- datePickerHelper({
112
- allowInput,
113
- defaultDate,
114
- disableDate,
115
- disableRange,
116
- disableWeekdays,
117
- enableTime,
118
- format,
119
- hideIcon,
120
- inLine,
121
- maxDate,
122
- minDate,
123
- mode,
124
- onChange,
125
- onClose,
126
- pickerId,
127
- plugins,
128
- // @ts-ignore
129
- position,
130
- positionElement,
131
- selectionType,
132
- showTimezone,
133
- staticPosition,
134
- yearRange,
135
- required: false,
136
- }, scrollContainer)
137
- })
138
-
139
139
  const iconWrapperClass = () => {
140
140
  let base = 'cal_icon_wrapper'
141
141
  if (dark) {
@@ -150,80 +150,84 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
150
150
  return base
151
151
  }
152
152
 
153
+
153
154
  return (
154
155
  <div
155
- {...ariaProps}
156
- {...dataProps}
157
- className={classes}
158
- id={id}
156
+ {...ariaProps}
157
+ {...dataProps}
158
+ className={classes}
159
+ id={id}
159
160
  >
160
161
  <div
161
- {...inputAriaProps}
162
- {...inputDataProps}
163
- className="input_wrapper">
162
+ {...inputAriaProps}
163
+ {...inputDataProps}
164
+ className="input_wrapper"
165
+ >
164
166
 
165
167
  <Caption
166
- className="pb_date_picker_kit_label"
167
- text={hideLabel ? null : label}
168
+ className="pb_date_picker_kit_label"
169
+ text={hideLabel ? null : label}
168
170
  />
169
-
170
- <div className="date_picker_input_wrapper">
171
- <input
172
- autoComplete="off"
173
- className="date_picker_input"
174
- disabled={disableInput}
175
- id={pickerId}
176
- name={name}
177
- onChange={inputOnChange}
178
- placeholder={placeholder}
179
- value={inputValue}
180
- />
181
-
182
- {error && <Body
183
- status="negative"
184
- text={error}
185
- variant={null}
186
- />
187
- }
188
- </div>
189
-
190
- {!hideIcon &&
191
- <div
192
- className={iconWrapperClass()}
193
- id={`cal-icon-${pickerId}`}
194
- >
195
- <Icon
196
- className="cal_icon"
197
- icon="calendar-alt"
198
- />
199
- </div>
200
- }
201
-
202
- {hideIcon && inLine ?
203
- <div>
204
- <div
205
- className={iconWrapperClass()}
206
- id={`${pickerId}-icon-plus`}
207
- >
208
- <Icon
209
- className="date-picker-plus-icon"
210
- icon="plus"
211
- />
212
- </div>
213
- <div
214
- className={iconWrapperClass()}
215
- id={`${pickerId}-angle-down`}
216
- >
217
- <Icon
218
- className="angle_down_icon"
219
- icon="angle-down"
171
+ <>
172
+ <div className="date_picker_input_wrapper">
173
+ <input
174
+ autoComplete="off"
175
+ className="date_picker_input"
176
+ disabled={disableInput}
177
+ id={pickerId}
178
+ name={name}
179
+ onChange={inputOnChange}
180
+ placeholder={placeholder}
181
+ value={inputValue}
220
182
  />
183
+
184
+ {error &&
185
+ <Body
186
+ status="negative"
187
+ text={error}
188
+ variant={null}
189
+ />
190
+ }
221
191
  </div>
222
- </div>
223
- : null}
192
+
193
+ {!hideIcon &&
194
+ <div
195
+ className={iconWrapperClass()}
196
+ id={`cal-icon-${pickerId}`}
197
+ >
198
+ <Icon
199
+ className="cal_icon"
200
+ icon="calendar-alt"
201
+ />
202
+ </div>
203
+ }
204
+
205
+ {hideIcon && inLine ?
206
+ <div>
207
+ <div
208
+ className={iconWrapperClass()}
209
+ id={`${pickerId}-icon-plus`}
210
+ >
211
+ <Icon
212
+ className="date-picker-plus-icon"
213
+ icon="plus"
214
+ />
215
+ </div>
216
+ <div
217
+ className={iconWrapperClass()}
218
+ id={`${pickerId}-angle-down`}
219
+ >
220
+ <Icon
221
+ className="angle_down_icon"
222
+ icon="angle-down"
223
+ />
224
+ </div>
225
+ </div>
226
+ : null
227
+ }
228
+ </>
224
229
  </div>
225
230
  </div>
226
231
  )
227
232
  }
228
-
229
233
  export default DatePicker
@@ -61,7 +61,8 @@
61
61
 
62
62
  <%= javascript_tag do %>
63
63
  window.addEventListener("DOMContentLoaded", () => {
64
- datePickerHelper(<%= object.date_picker_config %>, "<%= object.scroll_container %>")
64
+ datePickerHelper(<%= object.date_picker_config %>, "<%= object.scroll_container %>")
65
65
  })
66
+
66
67
  <% end %>
67
- <% end %>
68
+ <% end %>
@@ -51,7 +51,7 @@ module Playbook
51
51
  prop :position_element, type: Playbook::Props::String
52
52
  prop :scroll_container, type: Playbook::Props::String
53
53
  prop :selection_type, type: Playbook::Props::Enum,
54
- values: %w[week month none],
54
+ values: %w[week month quickpick none],
55
55
  default: "none"
56
56
  prop :show_timezone, type: Playbook::Props::Boolean,
57
57
  default: false
@@ -1,5 +1,6 @@
1
1
  /* eslint-disable no-console */
2
2
  import React from 'react'
3
+ import moment from 'moment'
3
4
  import { fireEvent, render, screen, waitFor, within } from '../utilities/test-utils'
4
5
 
5
6
  import DatePicker from './_date_picker'
@@ -10,7 +11,6 @@ import { getTimezoneText } from './plugins/timeSelect'
10
11
  jest.setSystemTime(new Date('01/01/2020'));
11
12
  const DEFAULT_DATE = new Date()
12
13
 
13
-
14
14
  describe('DatePicker Kit', () => {
15
15
  beforeEach(() => {
16
16
  jest.spyOn(console, 'error').mockImplementation(() => { });
@@ -158,4 +158,47 @@ describe('DatePicker Kit', () => {
158
158
  expect(input).toHaveValue('01/01/2020 at 12:00 PM')
159
159
  })
160
160
  })
161
+ test('shows DatePicker QuickPick dropdown and adds correct date to input', async () => {
162
+ const testId = 'datepicker-quick-pick'
163
+ render(
164
+ <DatePicker
165
+ allowInput
166
+ data={{ testid: testId }}
167
+ mode="range"
168
+ pickerId="date-picker-quick-pick"
169
+ placeholder="mm/dd/yyyy → mm/dd/yyyy"
170
+ selectionType="quickpick"
171
+ />
172
+ )
173
+
174
+ const kit = screen.getByTestId(testId)
175
+ const input = within(kit).getByPlaceholderText('mm/dd/yyyy → mm/dd/yyyy')
176
+
177
+ fireEvent(
178
+ input,
179
+ new MouseEvent('click', {
180
+ bubbles: true,
181
+ cancelable: true,
182
+ }),
183
+ )
184
+ const today = within(kit).getByText('Today')
185
+ const thisYear = within(kit).getByText('This year')
186
+ await waitFor(() => {
187
+ expect(today).toBeInTheDocument()
188
+ expect(thisYear).toBeInTheDocument()
189
+ })
190
+
191
+ fireEvent(
192
+ thisYear,
193
+ new MouseEvent('click', {
194
+ bubbles: true,
195
+ cancelable: true,
196
+ }),
197
+ )
198
+
199
+ await waitFor(() => {
200
+ expect(input).toHaveValue(moment().startOf('year').format('MM/DD/YYYY') + " → " + moment().format('MM/DD/YYYY'))
201
+ })
202
+
203
+ })
161
204
  })
@@ -3,6 +3,7 @@ import { BaseOptions } from 'flatpickr/dist/types/options'
3
3
  import monthSelectPlugin from 'flatpickr/dist/plugins/monthSelect'
4
4
  import weekSelect from "flatpickr/dist/plugins/weekSelect/weekSelect"
5
5
  import timeSelectPlugin from './plugins/timeSelect'
6
+ import quickPickPlugin from './plugins/quickPick'
6
7
 
7
8
  const getPositionElement = (element: string | Element) => {
8
9
  return (typeof element === 'string') ? document.querySelectorAll(element)[0] : element
@@ -19,8 +20,8 @@ type DatePickerConfig = {
19
20
  hideIcon?: boolean;
20
21
  inLine?: boolean,
21
22
  onChange: (dateStr: string, selectedDates: Date[]) => void,
23
+ selectionType?: "month" | "week" | "quickpick" | "",
22
24
  onClose: (dateStr: Date[] | string, selectedDates: Date[] | string) => void,
23
- selectionType?: "month" | "week" | "",
24
25
  showTimezone?: boolean,
25
26
  staticPosition: boolean,
26
27
  timeCaption?: string,
@@ -90,18 +91,23 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
90
91
  }
91
92
 
92
93
  const setPlugins = () => {
93
- let pluginList = []
94
+ const pluginList = []
94
95
 
95
96
  // month and week selection
96
97
  if (selectionType === "month" || plugins.length > 0) {
97
98
  pluginList.push(monthSelectPlugin({ shorthand: true, dateFormat: 'F Y', altFormat: 'F Y' }))
98
99
  } else if ( selectionType === "week") {
99
100
  pluginList.push(weekSelect())
101
+
102
+ } else if (selectionType === "quickpick") {
103
+ //------- QUICKPICK VARIANT PLUGIN -------------//
104
+ pluginList.push(quickPickPlugin())
100
105
  }
101
106
 
102
107
  // time selection
103
108
  if (enableTime) pluginList.push(timeSelectPlugin({ caption: timeCaption, showTimezone: showTimezone}))
104
109
 
110
+
105
111
  return pluginList
106
112
  }
107
113
 
@@ -144,6 +150,9 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
144
150
  },
145
151
  ] : disabledParser(),
146
152
  enableTime,
153
+ locale: {
154
+ rangeSeparator: ' → '
155
+ },
147
156
  maxDate,
148
157
  minDate,
149
158
  mode,
@@ -171,10 +180,33 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
171
180
  static: staticPosition,
172
181
  })
173
182
 
183
+
174
184
  // ===========================================================
175
185
  // Additional JS Functionality |
176
186
  // ===========================================================
177
187
 
188
+ // opens flatpickr instance when calander icon is clicked so we can have a hover state on icon
189
+ // window.addEventListener("DOMContentLoaded", (event) => {
190
+ // event.preventDefault();
191
+ // function attachIconClickHandler() {
192
+ // const variantArr = document.querySelectorAll(`#cal-icon-${pickerId}`)
193
+ // if (!variantArr) {
194
+ // setTimeout(attachIconClickHandler, 100);
195
+ // return;
196
+ // }
197
+
198
+ // const instance = document.querySelector<HTMLElement & { [x: string]: any }>(`#${pickerId}`)._flatpickr
199
+ // variantArr.forEach((icon) => {
200
+ // icon.addEventListener("click", function(event) {
201
+ // event.preventDefault();
202
+ // instance.open()
203
+ // });
204
+ // })
205
+ // }
206
+
207
+ // attachIconClickHandler();
208
+ // });
209
+
178
210
  // Assign dynamically sourced flatpickr instance to variable
179
211
  const picker = document.querySelector<HTMLElement & { [x: string]: any }>(`#${pickerId}`)._flatpickr
180
212
  picker.innerContainer.parentElement.id = `cal-${pickerId}`
@@ -0,0 +1,8 @@
1
+ <%= pb_rails("date_picker", props: {
2
+ allow_input: true,
3
+ mode: "range",
4
+ picker_id: "date-picker-quick-pick",
5
+ placeholder: "mm/dd/yyyy → mm/dd/yyyy",
6
+ selection_type: "quickpick"
7
+ }) %>
8
+
@@ -0,0 +1,18 @@
1
+ import React from 'react'
2
+
3
+ import DatePicker from '../_date_picker'
4
+
5
+ const DatePickerQuickPick = (props) => (
6
+ <div>
7
+ <DatePicker
8
+ allowInput
9
+ mode="range"
10
+ pickerId="date-picker-quick-pick"
11
+ placeholder="mm/dd/yyyy → mm/dd/yyyy"
12
+ selectionType="quickpick"
13
+ {...props}
14
+ />
15
+ </div>
16
+ )
17
+
18
+ export default DatePickerQuickPick
@@ -8,6 +8,7 @@ examples:
8
8
  - date_picker_input: Input Field
9
9
  - date_picker_label: Label
10
10
  - date_picker_range: Range
11
+ - date_picker_quick_pick: Range (Quick Pick)
11
12
  - date_picker_format: Format
12
13
  - date_picker_disabled: Disabled Dates
13
14
  - date_picker_min_max: Min Max
@@ -33,6 +34,7 @@ examples:
33
34
  - date_picker_on_change: onChange
34
35
  - date_picker_on_close: onClose
35
36
  - date_picker_range: Range
37
+ - date_picker_quick_pick: Range (Quick Pick)
36
38
  - date_picker_format: Format
37
39
  - date_picker_disabled: Disabled Dates
38
40
  - date_picker_min_max: Min Max
@@ -19,4 +19,5 @@ export { default as DatePickerWeek } from './_date_picker_week.jsx'
19
19
  export { default as DatePickerPositions } from './_date_picker_positions.jsx'
20
20
  export { default as DatePickerPositionsElement } from './_date_picker_positions_element.jsx'
21
21
  export { default as DatePickerAllowInput } from './_date_picker_allow_input'
22
- export { default as DatePickerOnClose } from './_date_picker_on_close.jsx'
22
+ export { default as DatePickerQuickPick } from './_date_picker_quick_pick'
23
+ export { default as DatePickerOnClose } from './_date_picker_on_close.jsx'