playbook_ui 12.28.0.pre.alpha.PLAY603datepickerquickpickinputpresetdropdown869 → 12.28.0.pre.alpha.PLAY814removemomentjs871

Sign up to get free protection for your applications and to get access to all the features.
Files changed (42) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_date/_date.tsx +7 -8
  3. data/app/pb_kits/playbook/pb_date_picker/_date_picker.scss +0 -26
  4. data/app/pb_kits/playbook/pb_date_picker/_date_picker.tsx +95 -102
  5. data/app/pb_kits/playbook/pb_date_picker/date_picker.html.erb +2 -18
  6. data/app/pb_kits/playbook/pb_date_picker/date_picker.rb +4 -15
  7. data/app/pb_kits/playbook/pb_date_picker/date_picker.test.js +1 -84
  8. data/app/pb_kits/playbook/pb_date_picker/date_picker_helper.ts +4 -38
  9. data/app/pb_kits/playbook/pb_date_picker/docs/example.yml +0 -4
  10. data/app/pb_kits/playbook/pb_date_picker/docs/index.js +1 -3
  11. data/app/pb_kits/playbook/pb_date_picker/sass_partials/_calendar_input_icon.scss +2 -3
  12. data/app/pb_kits/playbook/pb_date_range_inline/_date_range_inline.tsx +45 -31
  13. data/app/pb_kits/playbook/pb_date_range_stacked/_date_range_stacked.tsx +5 -3
  14. data/app/pb_kits/playbook/pb_date_stacked/_date_stacked.tsx +24 -21
  15. data/app/pb_kits/playbook/pb_date_time/_date_time.tsx +1 -1
  16. data/app/pb_kits/playbook/pb_date_time/dateTime.test.js +1 -1
  17. data/app/pb_kits/playbook/pb_date_time_stacked/_date_time_stacked.tsx +2 -2
  18. data/app/pb_kits/playbook/pb_date_time_stacked/date_time_stacked.test.js +1 -1
  19. data/app/pb_kits/playbook/pb_date_year_stacked/_date_year_stacked.tsx +6 -8
  20. data/app/pb_kits/playbook/pb_kit/dateTime.ts +139 -67
  21. data/app/pb_kits/playbook/pb_label_value/_label_value.tsx +52 -31
  22. data/app/pb_kits/playbook/pb_message/_message.tsx +25 -25
  23. data/app/pb_kits/playbook/pb_nav/_item.tsx +1 -1
  24. data/app/pb_kits/playbook/pb_nav/_subtle_mixin.scss +1 -1
  25. data/app/pb_kits/playbook/pb_time/_time.tsx +9 -11
  26. data/app/pb_kits/playbook/pb_time_range_inline/_time_range_inline.tsx +46 -49
  27. data/app/pb_kits/playbook/pb_time_stacked/_time_stacked.tsx +4 -6
  28. data/app/pb_kits/playbook/pb_timestamp/_timestamp.tsx +10 -10
  29. data/app/pb_kits/playbook/pb_weekday_stacked/_weekday_stacked.tsx +8 -11
  30. data/dist/playbook-rails.js +7 -279
  31. data/lib/playbook/version.rb +1 -1
  32. metadata +1 -11
  33. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_rails.html.erb +0 -12
  34. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_rails.md +0 -3
  35. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_range_limit.html.erb +0 -12
  36. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_range_limit.jsx +0 -18
  37. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_range_limit.md +0 -1
  38. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_react.jsx +0 -17
  39. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_react.md +0 -1
  40. data/app/pb_kits/playbook/pb_date_picker/plugins/quickPick.tsx +0 -185
  41. data/app/pb_kits/playbook/pb_date_picker/sass_partials/_quick_pick_styles.scss +0 -75
  42. data/app/pb_kits/playbook/pb_logistic/_logistic.jsx +0 -120
@@ -2,5 +2,5 @@
2
2
 
3
3
  module Playbook
4
4
  PREVIOUS_VERSION = "12.28.0"
5
- VERSION = "12.28.0.pre.alpha.PLAY603datepickerquickpickinputpresetdropdown869"
5
+ VERSION = "12.28.0.pre.alpha.PLAY814removemomentjs871"
6
6
  end
metadata CHANGED
@@ -1,7 +1,7 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: playbook_ui
3
3
  version: !ruby/object:Gem::Version
4
- version: 12.28.0.pre.alpha.PLAY603datepickerquickpickinputpresetdropdown869
4
+ version: 12.28.0.pre.alpha.PLAY814removemomentjs871
5
5
  platform: ruby
6
6
  authors:
7
7
  - Power UX
@@ -723,13 +723,6 @@ files:
723
723
  - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_positions.md
724
724
  - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_positions_element.html.erb
725
725
  - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_positions_element.jsx
726
- - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_rails.html.erb
727
- - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_rails.md
728
- - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_range_limit.html.erb
729
- - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_range_limit.jsx
730
- - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_range_limit.md
731
- - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_react.jsx
732
- - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_react.md
733
726
  - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range.html.erb
734
727
  - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range.jsx
735
728
  - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_time.html.erb
@@ -744,7 +737,6 @@ files:
744
737
  - app/pb_kits/playbook/pb_date_picker/docs/_description.md
745
738
  - app/pb_kits/playbook/pb_date_picker/docs/example.yml
746
739
  - app/pb_kits/playbook/pb_date_picker/docs/index.js
747
- - app/pb_kits/playbook/pb_date_picker/plugins/quickPick.tsx
748
740
  - app/pb_kits/playbook/pb_date_picker/plugins/timeSelect.ts
749
741
  - app/pb_kits/playbook/pb_date_picker/sass_partials/_calendar_input_icon.scss
750
742
  - app/pb_kits/playbook/pb_date_picker/sass_partials/_day_styles.scss
@@ -754,7 +746,6 @@ files:
754
746
  - app/pb_kits/playbook/pb_date_picker/sass_partials/_input_styles.scss
755
747
  - app/pb_kits/playbook/pb_date_picker/sass_partials/_month_and_year_styles.scss
756
748
  - app/pb_kits/playbook/pb_date_picker/sass_partials/_overrides.scss
757
- - app/pb_kits/playbook/pb_date_picker/sass_partials/_quick_pick_styles.scss
758
749
  - app/pb_kits/playbook/pb_date_picker/sass_partials/_time_selection_styles.scss
759
750
  - app/pb_kits/playbook/pb_date_picker/sass_partials/_week_styles.scss
760
751
  - app/pb_kits/playbook/pb_date_range_inline/_date_range_inline.scss
@@ -1408,7 +1399,6 @@ files:
1408
1399
  - app/pb_kits/playbook/pb_loading_inline/loading_inline.html.erb
1409
1400
  - app/pb_kits/playbook/pb_loading_inline/loading_inline.rb
1410
1401
  - app/pb_kits/playbook/pb_loading_inline/loading_inline.test.js
1411
- - app/pb_kits/playbook/pb_logistic/_logistic.jsx
1412
1402
  - app/pb_kits/playbook/pb_map/_map.scss
1413
1403
  - app/pb_kits/playbook/pb_map/_map.tsx
1414
1404
  - app/pb_kits/playbook/pb_map/_pb_map_button_mixin.scss
@@ -1,12 +0,0 @@
1
- <%= pb_rails("date_picker", props: {
2
- allow_input: true,
3
- end_date_id: "quick-pick-end-date",
4
- end_date_name: "quick-pick-end-date",
5
- mode: "range",
6
- picker_id: "date-picker-quick-pick",
7
- placeholder: "mm/dd/yyyy to mm/dd/yyyy",
8
- selection_type: "quickpick",
9
- start_date_id: "quick-pick-start-date",
10
- start_date_name: "quick-pick-start-date"
11
- }) %>
12
-
@@ -1,3 +0,0 @@
1
- This date range variant uses hidden inputs to handle start and end dates. While they are not required props, it is advisable to specify a unique `start_date_id`, `start_date_name`, `end_date_id`, and `end_date_name` for each quick pick instance you place in a form and/or on a page.
2
-
3
- Like all other date pickers, the quick pick does require a `picker_id`.
@@ -1,12 +0,0 @@
1
- <%= pb_rails("date_picker", props: {
2
- allow_input: true,
3
- end_date_id: "range-limit-end-date",
4
- end_date_name: "range-limit-end-date",
5
- mode: "range",
6
- picker_id: "thisRangesEndToday",
7
- placeholder: "mm/dd/yyyy to mm/dd/yyyy",
8
- selection_type: "quickpick",
9
- start_date_id: "range-limit-start-date",
10
- start_date_name: "range-limit-start-date",
11
- this_ranges_end_today: true
12
- }) %>
@@ -1,18 +0,0 @@
1
- import React from 'react'
2
- import DatePicker from '../_date_picker'
3
-
4
- const DatePickerQuickPickRangeLimit = (props) => (
5
- <>
6
- <DatePicker
7
- allowInput
8
- mode="range"
9
- pickerId="thisRangesEndToday"
10
- placeholder="mm/dd/yyyy to mm/dd/yyyy"
11
- selectionType="quickpick"
12
- thisRangesEndToday
13
- {...props}
14
- />
15
- </>
16
- )
17
-
18
- export default DatePickerQuickPickRangeLimit
@@ -1 +0,0 @@
1
- Applying `this_ranges_end_today` (Rails) or `thisRangesEndToday` (React) causes all “This” preset ranges (i.e., this week, this month, this quarter, this year) to use an endDate of today, instead of their natural end date in the future.
@@ -1,17 +0,0 @@
1
- import React from 'react'
2
- import DatePicker from '../_date_picker'
3
-
4
- const DatePickerQuickPickReact = (props) => (
5
- <>
6
- <DatePicker
7
- allowInput
8
- mode="range"
9
- pickerId="date-picker-quick-pick"
10
- placeholder="mm/dd/yyyy to mm/dd/yyyy"
11
- selectionType="quickpick"
12
- {...props}
13
- />
14
- </>
15
- )
16
-
17
- export default DatePickerQuickPickReact
@@ -1 +0,0 @@
1
- Use the `onChange` handler function to access the startDate and endDate values. Check the [`onChange` example](https://playbook.powerapp.cloud/kits/date_picker/react#onchange) for more information.
@@ -1,185 +0,0 @@
1
- import moment from 'moment'
2
-
3
- type FpTypes = {
4
- setDate: (arg0: any, arg1: boolean) => void,
5
- config: { [key: string]: string },
6
- clear: (arg0: boolean, arg1: boolean) => void,
7
- close: () => void,
8
- calendarContainer?: {
9
- classList: { add: (arg0: string) => void };
10
- prepend: (arg0: HTMLDivElement) => void;
11
- append: (arg0: HTMLDivElement) => void;
12
- },
13
- loadedPlugins: string[],
14
- };
15
-
16
- type pluginDataType = {
17
- ranges: { [key: string]: Date[] },
18
- rangesNav: HTMLUListElement,
19
- rangesButtons: [] | any,
20
- }
21
-
22
- let activeLabel = ""
23
-
24
- const quickPickPlugin = (thisRangesEndToday: boolean) => {
25
- return function (fp: FpTypes & any): any {
26
- const thisWeekEndDate = thisRangesEndToday ? new Date() : moment().endOf('isoWeek').toDate()
27
- const thisMonthEndDate = thisRangesEndToday ? new Date() : moment().endOf('month').toDate()
28
- const thisQuarterEndDate = thisRangesEndToday ? new Date() : moment().endOf('quarter').toDate()
29
- const thisYearEndDate = thisRangesEndToday ? new Date() : moment().endOf('year').toDate()
30
-
31
- // variable that holds the ranges available
32
- const ranges = {
33
- 'Today': [new Date(), new Date()],
34
- 'Yesterday': [moment().subtract(1, 'days').toDate(), moment().subtract(1, 'days').toDate()],
35
- 'This week': [moment().startOf('isoWeek').toDate(), thisWeekEndDate],
36
- 'This month': [moment().startOf('month').toDate(), thisMonthEndDate],
37
- 'This quarter': [moment().startOf('quarter').toDate(), thisQuarterEndDate],
38
- 'This year': [moment().startOf('year').toDate(), thisYearEndDate],
39
- 'Last week': [
40
- moment().subtract(1, 'week').startOf('isoWeek').toDate(),
41
- moment().subtract(1, 'week').endOf('isoWeek').toDate()
42
- ],
43
- 'Last month': [
44
- moment().subtract(1, 'month').startOf('month').toDate(),
45
- moment().subtract(1, 'month').endOf('month').toDate()
46
- ],
47
- 'Last quarter': [
48
- moment().subtract(1, 'quarter').startOf('quarter').toDate(),
49
- moment().subtract(1, 'quarter').endOf('quarter').toDate()
50
- ],
51
- 'Last year': [
52
- moment().subtract(1, 'year').startOf('year').toDate(),
53
- moment().subtract(1, 'year').endOf('year').toDate()
54
- ]
55
- }
56
- //creating the ul element for the nav dropdown and giving it classnames
57
- const rangesNav = document.createElement('ul');
58
-
59
- // creating the pluginData object that will hold the properties of this plugin
60
- const pluginData: pluginDataType = {
61
- ranges: ranges,
62
- rangesNav: rangesNav,
63
- rangesButtons: [],
64
- };
65
-
66
- /**
67
- * @param {string} label
68
- * @returns HTML Element
69
- */
70
-
71
- //function for creating the range buttons in the nav
72
- const addRangeButton = (label: string) => {
73
-
74
- // creating new elements to mimick selectable card component
75
- const div2 = document.createElement('div');
76
- div2.className = "nav-item-link"
77
- div2.innerHTML = label;
78
-
79
- pluginData.rangesButtons[label] = div2;
80
-
81
- // create li elements inside the dropdown
82
- const item = document.createElement('li');
83
- item.className = "nav-item";
84
-
85
- // append those nav items to the li items
86
- item.appendChild(pluginData.rangesButtons[label]);
87
-
88
- // append the li item to the ul rangeNav prop
89
- pluginData.rangesNav.appendChild(item);
90
-
91
- // return the ranges buton prop
92
- return pluginData.rangesButtons[label];
93
- };
94
-
95
- const selectActiveRangeButton = (selectedDates: Array<Date>) => {
96
- const current = pluginData.rangesNav.querySelector('.active');
97
-
98
- if (current) {
99
- current.classList.remove('active');
100
- }
101
- /** conditional statment to extract start and end dates from selectedDates,
102
- * then loop through ranges prop in pluginData
103
- * and check if chosen dates equal to a date in the ranges prop
104
- * if they are equal, add the active class
105
- */
106
-
107
- if (selectedDates.length > 0 && activeLabel) {
108
- // const selected = pluginData.rangesNav.querySelectorAll(".nav-item-link")
109
- // selected.forEach(el => {
110
- // if (el.innerHTML === activeLabel)
111
- // el.classList.add('active')
112
- // return
113
- // })
114
-
115
- pluginData.rangesButtons[activeLabel].classList.add('active');
116
- }
117
- }
118
-
119
- const isLabelMatchingSelectedDates = (selectedDates: Array<Date>) => {
120
- return activeLabel && selectedDates[0].toDateString() === pluginData.ranges[activeLabel][0].toDateString() &&
121
- selectedDates[1].toDateString() === pluginData.ranges[activeLabel][1].toDateString()
122
- }
123
-
124
-
125
- return {
126
- // onReady is a hook from flatpickr that runs when calender is in a ready state
127
- onReady(selectedDates: Array<Date>) {
128
- // loop through the ranges and create an anchor tag for each range and add an event listener to set the date when user clicks on a date range
129
- for (const [label, range] of Object.entries(pluginData.ranges)) {
130
- addRangeButton(label).addEventListener('click', function () {
131
-
132
- const start = moment(range[0]).toDate();
133
- const end = moment(range[1]).toDate();
134
-
135
- if (!start) {
136
- fp.clear();
137
- }
138
- else {
139
- activeLabel = label
140
- fp.setDate([start, end], true);
141
- fp.close();
142
- }
143
- });
144
- }
145
- // conditional to check if there is a dropdown to add it to the calendar container and get it the classes it needs
146
- if (pluginData.rangesNav.children.length > 0) {
147
-
148
- fp.calendarContainer.prepend(pluginData.rangesNav);
149
- pluginData.rangesNav.classList.add('quick-pick-ul')
150
- fp.calendarContainer.classList.add('quick-pick-drop-down');
151
-
152
- /**
153
- *
154
- * @param {Array} selectedDates
155
- */
156
- // function to give the active button the active class
157
- selectActiveRangeButton(selectedDates);
158
- }
159
- },
160
- onValueUpdate(selectedDates: Array<Date>) {
161
- selectActiveRangeButton(selectedDates)
162
- },
163
-
164
- onClose(selectedDates: Array<Date>) {
165
- // remove the active class from the button if the selected dates don't match the label
166
- if (!isLabelMatchingSelectedDates(selectedDates)) {
167
- pluginData.rangesButtons[activeLabel]?.classList.remove('active');
168
- activeLabel = ""
169
- }
170
-
171
- // set the date to the first date in the array if the user types only one date
172
- if (selectedDates.length === 1) {
173
- fp.setDate([selectedDates[0], selectedDates[0]], true);
174
- }
175
-
176
- // set the input value to the selected dates when the dropdown is closed
177
- if (selectedDates.length < 2 && selectedDates.length > 0) {
178
- fp.input.placeholder = fp.formatDate(this.selectedDates[0], fp.config.dateFormat);
179
- }
180
- }
181
- };
182
- };
183
- }
184
-
185
- export default quickPickPlugin;
@@ -1,75 +0,0 @@
1
- @import "../../tokens/animation-curves";
2
- @import "../../tokens/colors";
3
- @import "../../tokens/typography";
4
- @import "../../tokens/titles";
5
- @import "../../tokens/spacing";
6
-
7
- $pb_card_border_width: 1px;
8
- $pb_card_border_radius: $border_rad_heavier;
9
-
10
- // used to display dropdown on the left of the calender
11
- .quick-pick-drop-down {
12
- width: auto;
13
- display: grid;
14
- }
15
-
16
- .quick-pick-ul {
17
- padding: $space_xs 0px;
18
- margin: 0;
19
- list-style: none;
20
- }
21
-
22
- .nav-item {
23
- list-style: none;
24
- border-radius: 6px;
25
- border-bottom: 0;
26
- margin: $space_xs $space_sm;
27
- }
28
-
29
- .nav-item-link {
30
- text-decoration: none;
31
- border-width: $pb_card_border_width;
32
- border-style: solid;
33
- border-color: $border_light;
34
- border-radius: $pb_card_border_radius;
35
- padding: $space_xs 14px;
36
- transition-property: color, background-color;
37
- transition-duration: 0.15s;
38
- transition-timing-function: $bezier;
39
- line-height: 1.4;
40
- color: $charcoal;
41
- font-size: $font_default;
42
- font-weight: $regular;
43
- &.active {
44
- border-width: 2px;
45
- border-color: $primary;
46
- }
47
- @media (hover:hover) {
48
- &:hover {
49
- cursor: pointer;
50
- box-shadow: $shadow-deep;
51
- border-color: $slate;
52
- }
53
- }
54
- }
55
-
56
- // Hide the calendar
57
- .quick-pick-drop-down > .flatpickr-months, .quick-pick-drop-down > .flatpickr-innerContainer {
58
- display: none;
59
- }
60
-
61
- @media only screen and (max-width: 767px) {
62
- .quick-pick-ul {
63
- padding: $space_xs $space_xs;
64
- display: grid;
65
- grid-template-columns: 1fr 1fr;
66
- }
67
-
68
- .nav-item {
69
- margin: $space_xxs $space_xs;
70
- }
71
-
72
- .nav-item-link {
73
- padding: $space_xs $space_xxs;
74
- }
75
- }
@@ -1,120 +0,0 @@
1
- /* @flow */
2
-
3
- import React from 'react'
4
- import classnames from 'classnames'
5
-
6
- import DateTime from '../pb_kit/dateTime'
7
- import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
8
- import { globalProps } from '../utilities/globalProps'
9
-
10
- import Body from '../pb_body/_body'
11
- import Caption from '../pb_caption/_caption'
12
- import Icon from '../pb_icon/_icon'
13
- import Title from '../pb_title/_title'
14
-
15
- const dateString = (value: DateTime) => {
16
- const month = value.toMonthNum()
17
- const day = value.toDay()
18
-
19
- return ` · ${month}/${day}`
20
- }
21
-
22
- type LogisticProps = {
23
- aria?: object,
24
- className?: string,
25
- dark?: boolean,
26
- data?: object,
27
- date: string,
28
- id?: string,
29
- link?: string,
30
- projectName?: string,
31
- projectNumber?: number,
32
- }
33
-
34
- const Logistic = (props: LogisticProps) => {
35
- const { aria = {},
36
- className,
37
- dark = false,
38
- data = {},
39
- date,
40
- id,
41
- link,
42
- projectName,
43
- projectNumber } = props
44
-
45
- const ariaProps = buildAriaProps(aria)
46
- const dataProps = buildDataProps(data)
47
- const formattedDate = new DateTime({ value: date })
48
- const classes = classnames(
49
- buildCss('pb_logistic_kit', { dark }),
50
- globalProps(props),
51
- className
52
- )
53
-
54
- return (
55
- <div
56
- {...ariaProps}
57
- {...dataProps}
58
- className={classes}
59
- id={id}
60
- >
61
- <Body color="light">
62
- <Caption text="Project" />
63
- <Icon
64
- fixedWidth
65
- icon="home"
66
- />
67
-
68
- {` ${projectNumber}`}
69
-
70
- <Choose>
71
- <When condition={link}>
72
- <a
73
- className="pb_logistic_kit_links"
74
- href={link}
75
- >
76
- <Choose>
77
- <When condition={date}>
78
- <Title
79
- size={4}
80
- tag="span"
81
- text={' ' + projectName + dateString(formattedDate)}
82
- />
83
- </When>
84
- <Otherwise>
85
- <Title
86
- size={4}
87
- tag="span"
88
- text={' ' + projectName}
89
- />
90
- </Otherwise>
91
- </Choose>
92
- </a>
93
- </When>
94
- <Otherwise>
95
- <Choose>
96
- <When condition={date}>
97
- <Title
98
- dark={dark}
99
- size={4}
100
- tag="span"
101
- text={' ' + projectName + dateString(formattedDate)}
102
- />
103
- </When>
104
- <Otherwise>
105
- <Title
106
- dark={dark}
107
- size={4}
108
- tag="span"
109
- text={' ' + projectName}
110
- />
111
- </Otherwise>
112
- </Choose>
113
- </Otherwise>
114
- </Choose>
115
- </Body>
116
- </div>
117
- )
118
- }
119
-
120
- export default Logistic