playbook_ui 12.26.1.pre.alpha.PLAY603datepickerquickpickinputpresetdropdown831 → 12.26.1.pre.alpha.PLAY860PhoneNumInputOptions836

Sign up to get free protection for your applications and to get access to all the features.
Files changed (38) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_date_picker/_date_picker.scss +0 -26
  3. data/app/pb_kits/playbook/pb_date_picker/_date_picker.tsx +95 -102
  4. data/app/pb_kits/playbook/pb_date_picker/date_picker.html.erb +2 -18
  5. data/app/pb_kits/playbook/pb_date_picker/date_picker.rb +4 -15
  6. data/app/pb_kits/playbook/pb_date_picker/date_picker.test.js +1 -84
  7. data/app/pb_kits/playbook/pb_date_picker/date_picker_helper.ts +4 -38
  8. data/app/pb_kits/playbook/pb_date_picker/docs/example.yml +0 -4
  9. data/app/pb_kits/playbook/pb_date_picker/docs/index.js +1 -3
  10. data/app/pb_kits/playbook/pb_date_picker/sass_partials/_calendar_input_icon.scss +2 -3
  11. data/app/pb_kits/playbook/pb_nav/_item.tsx +1 -1
  12. data/app/pb_kits/playbook/pb_nav/_subtle_mixin.scss +1 -1
  13. data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.tsx +132 -45
  14. data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_access_input_element.jsx +26 -0
  15. data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_access_input_element.md +3 -0
  16. data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_clear_field.jsx +30 -0
  17. data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_clear_field.md +3 -0
  18. data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_validation.html.erb +14 -0
  19. data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_validation.jsx +60 -0
  20. data/app/pb_kits/playbook/pb_phone_number_input/docs/example.yml +5 -1
  21. data/app/pb_kits/playbook/pb_phone_number_input/docs/index.js +3 -0
  22. data/app/pb_kits/playbook/pb_phone_number_input/phone_number_input.rb +6 -0
  23. data/app/pb_kits/playbook/pb_phone_number_input/phone_number_input.test.js +110 -62
  24. data/app/pb_kits/playbook/utilities/object.ts +3 -0
  25. data/dist/playbook-rails.js +7 -279
  26. data/lib/playbook/forms/builder/intl_telephone_field.rb +12 -0
  27. data/lib/playbook/forms/builder.rb +1 -0
  28. data/lib/playbook/version.rb +1 -1
  29. metadata +10 -11
  30. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_rails.html.erb +0 -12
  31. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_rails.md +0 -3
  32. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_range_limit.html.erb +0 -12
  33. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_range_limit.jsx +0 -18
  34. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_range_limit.md +0 -1
  35. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_react.jsx +0 -17
  36. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_react.md +0 -1
  37. data/app/pb_kits/playbook/pb_date_picker/plugins/quickPick.tsx +0 -168
  38. data/app/pb_kits/playbook/pb_date_picker/sass_partials/_quick_pick_styles.scss +0 -75
@@ -0,0 +1,12 @@
1
+ # frozen_string_literal: true
2
+
3
+ module Playbook
4
+ module Forms
5
+ class Builder
6
+ def intl_telephone(name, props: {})
7
+ props[:name] = name
8
+ @template.pb_rails("phone_number_input", props: props)
9
+ end
10
+ end
11
+ end
12
+ end
@@ -10,6 +10,7 @@ module Playbook
10
10
  require_relative "builder/form_field_builder"
11
11
  require_relative "builder/select_field"
12
12
  require_relative "builder/typeahead_field"
13
+ require_relative "builder/intl_telephone_field"
13
14
 
14
15
  prepend(FormFieldBuilder.new(:email_field, kit_name: "text_input"))
15
16
  prepend(FormFieldBuilder.new(:number_field, kit_name: "text_input"))
@@ -2,5 +2,5 @@
2
2
 
3
3
  module Playbook
4
4
  PREVIOUS_VERSION = "12.26.1"
5
- VERSION = "12.26.1.pre.alpha.PLAY603datepickerquickpickinputpresetdropdown831"
5
+ VERSION = "12.26.1.pre.alpha.PLAY860PhoneNumInputOptions836"
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.26.1.pre.alpha.PLAY603datepickerquickpickinputpresetdropdown831
4
+ version: 12.26.1.pre.alpha.PLAY860PhoneNumInputOptions836
5
5
  platform: ruby
6
6
  authors:
7
7
  - Power UX
@@ -9,7 +9,7 @@ authors:
9
9
  autorequire:
10
10
  bindir: bin
11
11
  cert_chain: []
12
- date: 2023-06-23 00:00:00.000000000 Z
12
+ date: 2023-06-26 00:00:00.000000000 Z
13
13
  dependencies:
14
14
  - !ruby/object:Gem::Dependency
15
15
  name: actionpack
@@ -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
@@ -1597,6 +1588,10 @@ files:
1597
1588
  - app/pb_kits/playbook/pb_person_contact/person_contact.test.js
1598
1589
  - app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.scss
1599
1590
  - app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.tsx
1591
+ - app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_access_input_element.jsx
1592
+ - app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_access_input_element.md
1593
+ - app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_clear_field.jsx
1594
+ - app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_clear_field.md
1600
1595
  - app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_default.html.erb
1601
1596
  - app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_default.jsx
1602
1597
  - app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_default.md
@@ -1609,6 +1604,8 @@ files:
1609
1604
  - app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_preferred_countries.html.erb
1610
1605
  - app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_preferred_countries.jsx
1611
1606
  - app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_preferred_countries.md
1607
+ - app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_validation.html.erb
1608
+ - app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_validation.jsx
1612
1609
  - app/pb_kits/playbook/pb_phone_number_input/docs/example.yml
1613
1610
  - app/pb_kits/playbook/pb_phone_number_input/docs/index.js
1614
1611
  - app/pb_kits/playbook/pb_phone_number_input/phone_number_input.html.erb
@@ -2420,6 +2417,7 @@ files:
2420
2417
  - app/pb_kits/playbook/utilities/flexbox_global_props/_justify_self.scss
2421
2418
  - app/pb_kits/playbook/utilities/flexbox_global_props/_order.scss
2422
2419
  - app/pb_kits/playbook/utilities/globalProps.ts
2420
+ - app/pb_kits/playbook/utilities/object.ts
2423
2421
  - app/pb_kits/playbook/utilities/props.ts
2424
2422
  - app/pb_kits/playbook/utilities/test-utils.js
2425
2423
  - app/pb_kits/playbook/utilities/test/globalProps/alignContent.test.js
@@ -2458,6 +2456,7 @@ files:
2458
2456
  - lib/playbook/forms/builder/collection_select_field.rb
2459
2457
  - lib/playbook/forms/builder/date_picker_field.rb
2460
2458
  - lib/playbook/forms/builder/form_field_builder.rb
2459
+ - lib/playbook/forms/builder/intl_telephone_field.rb
2461
2460
  - lib/playbook/forms/builder/select_field.rb
2462
2461
  - lib/playbook/forms/builder/typeahead_field.rb
2463
2462
  - lib/playbook/justify_content.rb
@@ -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 → 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 → 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 → 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 → 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,168 +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<string>) => {
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
- if (selectedDates.length > 0 && activeLabel) {
107
- // const selected = pluginData.rangesNav.querySelectorAll(".nav-item-link")
108
- // selected.forEach(el => {
109
- // if (el.innerHTML === activeLabel)
110
- // el.classList.add('active')
111
- // return
112
- // })
113
-
114
- pluginData.rangesButtons[activeLabel].classList.add('active');
115
- }
116
- }
117
-
118
-
119
- return {
120
- // onReady is a hook from flatpickr that runs when calender is in a ready state
121
- onReady(selectedDates: Array<string>) {
122
- // 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
123
- for (const [label, range] of Object.entries(pluginData.ranges)) {
124
- addRangeButton(label).addEventListener('click', function () {
125
-
126
- const start = moment(range[0]).toDate();
127
- const end = moment(range[1]).toDate();
128
-
129
- if (!start) {
130
- fp.clear();
131
- }
132
- else {
133
- activeLabel = label
134
- fp.setDate([start, end], true);
135
- fp.close();
136
- }
137
- });
138
- }
139
- // conditional to check if there is a dropdown to add it to the calendar container and get it the classes it needs
140
- if (pluginData.rangesNav.children.length > 0) {
141
-
142
- fp.calendarContainer.prepend(pluginData.rangesNav);
143
- pluginData.rangesNav.classList.add('quick-pick-ul')
144
- fp.calendarContainer.classList.add('quick-pick-drop-down');
145
-
146
- /**
147
- *
148
- * @param {Array} selectedDates
149
- */
150
- // function to give the active button the active class
151
- selectActiveRangeButton(selectedDates);
152
- }
153
- },
154
- onValueUpdate(selectedDates: Array<string>) {
155
- selectActiveRangeButton(selectedDates);
156
- },
157
-
158
- onClose(selectedDates: Array<string>) {
159
- // set the input value to the selected dates when the dropdown is closed
160
- if (selectedDates.length < 2 && selectedDates.length > 0) {
161
- fp.input.placeholder = fp.formatDate(this.selectedDates[0], fp.config.dateFormat);
162
- }
163
- }
164
- };
165
- };
166
- }
167
-
168
- 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
- }