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

data/lib/playbook/forms/builder/intl_telephone_field.rb

@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+
+module Playbook
+  module Forms
+    class Builder
+      def intl_telephone(name, props: {})
+        props[:name] = name
+        @template.pb_rails("phone_number_input", props: props)
+      end
+    end
+  end
+end

data/lib/playbook/forms/builder.rb

@@ -10,6 +10,7 @@ module Playbook
       require_relative "builder/form_field_builder"
       require_relative "builder/select_field"
       require_relative "builder/typeahead_field"
+      require_relative "builder/intl_telephone_field"
 
       prepend(FormFieldBuilder.new(:email_field, kit_name: "text_input"))
       prepend(FormFieldBuilder.new(:number_field, kit_name: "text_input"))

data/lib/playbook/version.rb

@@ -2,5 +2,5 @@
 
 module Playbook
   PREVIOUS_VERSION = "12.26.1"
-  VERSION = "12.26.1.pre.alpha.PLAY603datepickerquickpickinputpresetdropdown831"
+  VERSION = "12.26.1.pre.alpha.PLAY860PhoneNumInputOptions836"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 12.26.1.pre.alpha.PLAY603datepickerquickpickinputpresetdropdown831
+  version: 12.26.1.pre.alpha.PLAY860PhoneNumInputOptions836
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2023-06-23 00:00:00.000000000 Z
+date: 2023-06-26 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -723,13 +723,6 @@ files:
 - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_positions.md
 - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_positions_element.html.erb
 - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_positions_element.jsx
-- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_rails.html.erb
-- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_rails.md
-- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_range_limit.html.erb
-- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_range_limit.jsx
-- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_range_limit.md
-- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_react.jsx
-- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_react.md
 - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range.html.erb
 - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range.jsx
 - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_time.html.erb
@@ -744,7 +737,6 @@ files:
 - app/pb_kits/playbook/pb_date_picker/docs/_description.md
 - app/pb_kits/playbook/pb_date_picker/docs/example.yml
 - app/pb_kits/playbook/pb_date_picker/docs/index.js
-- app/pb_kits/playbook/pb_date_picker/plugins/quickPick.tsx
 - app/pb_kits/playbook/pb_date_picker/plugins/timeSelect.ts
 - app/pb_kits/playbook/pb_date_picker/sass_partials/_calendar_input_icon.scss
 - app/pb_kits/playbook/pb_date_picker/sass_partials/_day_styles.scss
@@ -754,7 +746,6 @@ files:
 - app/pb_kits/playbook/pb_date_picker/sass_partials/_input_styles.scss
 - app/pb_kits/playbook/pb_date_picker/sass_partials/_month_and_year_styles.scss
 - app/pb_kits/playbook/pb_date_picker/sass_partials/_overrides.scss
-- app/pb_kits/playbook/pb_date_picker/sass_partials/_quick_pick_styles.scss
 - app/pb_kits/playbook/pb_date_picker/sass_partials/_time_selection_styles.scss
 - app/pb_kits/playbook/pb_date_picker/sass_partials/_week_styles.scss
 - app/pb_kits/playbook/pb_date_range_inline/_date_range_inline.scss
@@ -1597,6 +1588,10 @@ files:
 - app/pb_kits/playbook/pb_person_contact/person_contact.test.js
 - app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.scss
 - app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.tsx
+- app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_access_input_element.jsx
+- app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_access_input_element.md
+- app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_clear_field.jsx
+- app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_clear_field.md
 - app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_default.html.erb
 - app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_default.jsx
 - app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_default.md
@@ -1609,6 +1604,8 @@ files:
 - app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_preferred_countries.html.erb
 - app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_preferred_countries.jsx
 - app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_preferred_countries.md
+- app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_validation.html.erb
+- app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_validation.jsx
 - app/pb_kits/playbook/pb_phone_number_input/docs/example.yml
 - app/pb_kits/playbook/pb_phone_number_input/docs/index.js
 - app/pb_kits/playbook/pb_phone_number_input/phone_number_input.html.erb
@@ -2420,6 +2417,7 @@ files:
 - app/pb_kits/playbook/utilities/flexbox_global_props/_justify_self.scss
 - app/pb_kits/playbook/utilities/flexbox_global_props/_order.scss
 - app/pb_kits/playbook/utilities/globalProps.ts
+- app/pb_kits/playbook/utilities/object.ts
 - app/pb_kits/playbook/utilities/props.ts
 - app/pb_kits/playbook/utilities/test-utils.js
 - app/pb_kits/playbook/utilities/test/globalProps/alignContent.test.js
@@ -2458,6 +2456,7 @@ files:
 - lib/playbook/forms/builder/collection_select_field.rb
 - lib/playbook/forms/builder/date_picker_field.rb
 - lib/playbook/forms/builder/form_field_builder.rb
+- lib/playbook/forms/builder/intl_telephone_field.rb
 - lib/playbook/forms/builder/select_field.rb
 - lib/playbook/forms/builder/typeahead_field.rb
 - lib/playbook/justify_content.rb

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_rails.html.erb

@@ -1,12 +0,0 @@
-<%= pb_rails("date_picker", props: {
-  allow_input: true,
-  end_date_id: "quick-pick-end-date",
-  end_date_name: "quick-pick-end-date",
-  mode: "range",
-  picker_id: "date-picker-quick-pick",
-  placeholder: "mm/dd/yyyy → mm/dd/yyyy",
-  selection_type: "quickpick",
-  start_date_id: "quick-pick-start-date",
-  start_date_name: "quick-pick-start-date"
-}) %>
-

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_rails.md

@@ -1,3 +0,0 @@
-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.
-
-Like all other date pickers, the quick pick does require a `picker_id`.

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_range_limit.html.erb

@@ -1,12 +0,0 @@
-<%= pb_rails("date_picker", props: {
-  allow_input: true,
-  end_date_id: "range-limit-end-date",
-  end_date_name: "range-limit-end-date",
-  mode: "range",
-  picker_id: "thisRangesEndToday",
-  placeholder: "mm/dd/yyyy → mm/dd/yyyy",
-  selection_type: "quickpick",
-  start_date_id: "range-limit-start-date",
-  start_date_name: "range-limit-start-date",
-  this_ranges_end_today: true
-}) %>

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_range_limit.jsx

@@ -1,18 +0,0 @@
-import React from 'react'
-import DatePicker from '../_date_picker'
-
-const DatePickerQuickPickRangeLimit = (props) => (
-  <>
-    <DatePicker
-        allowInput
-        mode="range"
-        pickerId="thisRangesEndToday"
-        placeholder="mm/dd/yyyy → mm/dd/yyyy"
-        selectionType="quickpick"
-        thisRangesEndToday
-        {...props}
-    />
-  </>
-)
-
-export default DatePickerQuickPickRangeLimit

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_range_limit.md

@@ -1 +0,0 @@
-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.

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_react.jsx

@@ -1,17 +0,0 @@
-import React from 'react'
-import DatePicker from '../_date_picker'
-
-const DatePickerQuickPickReact = (props) => (
-  <>
-    <DatePicker
-        allowInput
-        mode="range"
-        pickerId="date-picker-quick-pick"
-        placeholder="mm/dd/yyyy → mm/dd/yyyy"
-        selectionType="quickpick"
-        {...props}
-    />
-  </>
-)
-
-export default DatePickerQuickPickReact

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_react.md

@@ -1 +0,0 @@
-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.

data/app/pb_kits/playbook/pb_date_picker/plugins/quickPick.tsx

@@ -1,168 +0,0 @@
-import moment from 'moment'
-
-type FpTypes = {
-  setDate: (arg0: any, arg1: boolean) => void,
-  config: { [key: string]: string },
-  clear: (arg0: boolean, arg1: boolean) => void,
-  close: () => void,
-  calendarContainer?: {
-    classList: { add: (arg0: string) => void };
-    prepend: (arg0: HTMLDivElement) => void;
-    append: (arg0: HTMLDivElement) => void;
-  },
-  loadedPlugins: string[],
-};
-
-type pluginDataType = {
-  ranges: { [key: string]: Date[] },
-  rangesNav: HTMLUListElement,
-  rangesButtons: [] | any,
-}
-
-let activeLabel = ""
-
-const quickPickPlugin = (thisRangesEndToday: boolean) => {
-  return function (fp: FpTypes & any): any {
-    const thisWeekEndDate = thisRangesEndToday ? new Date() : moment().endOf('isoWeek').toDate()
-    const thisMonthEndDate = thisRangesEndToday ? new Date() : moment().endOf('month').toDate()
-    const thisQuarterEndDate = thisRangesEndToday ? new Date() : moment().endOf('quarter').toDate()
-    const thisYearEndDate = thisRangesEndToday ? new Date() : moment().endOf('year').toDate()
-
-    // variable that holds the ranges available
-    const ranges = {
-      'Today': [new Date(), new Date()],
-      'Yesterday': [moment().subtract(1, 'days').toDate(), moment().subtract(1, 'days').toDate()],
-      'This week': [moment().startOf('isoWeek').toDate(), thisWeekEndDate],
-      'This month': [moment().startOf('month').toDate(), thisMonthEndDate],
-      'This quarter': [moment().startOf('quarter').toDate(), thisQuarterEndDate],
-      'This year': [moment().startOf('year').toDate(), thisYearEndDate],
-      'Last week': [
-        moment().subtract(1, 'week').startOf('isoWeek').toDate(),
-        moment().subtract(1, 'week').endOf('isoWeek').toDate()
-      ],
-      'Last month': [
-        moment().subtract(1, 'month').startOf('month').toDate(),
-        moment().subtract(1, 'month').endOf('month').toDate()
-      ],
-      'Last quarter': [
-        moment().subtract(1, 'quarter').startOf('quarter').toDate(),
-        moment().subtract(1, 'quarter').endOf('quarter').toDate()
-      ],
-      'Last year': [
-        moment().subtract(1, 'year').startOf('year').toDate(),
-        moment().subtract(1, 'year').endOf('year').toDate()
-      ]
-    }
-    //creating the ul element for the nav dropdown and giving it classnames
-    const rangesNav = document.createElement('ul');
-
-    // creating the pluginData object that will hold the properties of this plugin
-    const pluginData: pluginDataType = {
-      ranges: ranges,
-      rangesNav: rangesNav,
-      rangesButtons: [],
-    };
-
-    /**
-   *    @param {string} label
-   *    @returns HTML Element
-   */
-
-    //function for creating the range buttons in the nav
-    const addRangeButton = (label: string) => {
-
-      // creating new elements to mimick selectable card component
-      const div2 = document.createElement('div');
-      div2.className = "nav-item-link"
-      div2.innerHTML = label;
-
-      pluginData.rangesButtons[label] = div2;
-
-      // create li elements inside the dropdown
-      const item = document.createElement('li');
-      item.className = "nav-item";
-
-      // append those nav items to the li items
-      item.appendChild(pluginData.rangesButtons[label]);
-
-      // append the li item to the ul rangeNav prop
-      pluginData.rangesNav.appendChild(item);
-
-      // return the ranges buton prop
-      return pluginData.rangesButtons[label];
-    };
-
-    const selectActiveRangeButton = (selectedDates: Array<string>) => {
-      const current = pluginData.rangesNav.querySelector('.active');
-
-      if (current) {
-        current.classList.remove('active');
-      }
-      /** conditional statment to extract start and end dates from selectedDates,
-      *   then loop through ranges prop in pluginData
-      *   and check if chosen dates equal to a date in the ranges prop
-      *   if they are equal, add the active class
-      */
-      if (selectedDates.length > 0 && activeLabel) {
-        // const selected = pluginData.rangesNav.querySelectorAll(".nav-item-link")
-        // selected.forEach(el => {
-        //   if (el.innerHTML === activeLabel)
-        //   el.classList.add('active')
-        //   return
-        // })
-
-        pluginData.rangesButtons[activeLabel].classList.add('active');
-      }
-    }
-
-
-    return {
-      // onReady is a hook from flatpickr that runs when calender is in a ready state
-      onReady(selectedDates: Array<string>) {
-        // 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
-        for (const [label, range] of Object.entries(pluginData.ranges)) {
-          addRangeButton(label).addEventListener('click', function () {
-
-            const start = moment(range[0]).toDate();
-            const end = moment(range[1]).toDate();
-
-            if (!start) {
-              fp.clear();
-            }
-            else {
-              activeLabel = label
-              fp.setDate([start, end], true);
-              fp.close();
-            }
-          });
-        }
-        // conditional to check if there is a dropdown to add it to the calendar container and get it the classes it needs
-        if (pluginData.rangesNav.children.length > 0) {
-
-          fp.calendarContainer.prepend(pluginData.rangesNav);
-          pluginData.rangesNav.classList.add('quick-pick-ul')
-          fp.calendarContainer.classList.add('quick-pick-drop-down');
-
-          /**
-           *
-           * @param {Array} selectedDates
-           */
-          // function to give the active button the active class
-          selectActiveRangeButton(selectedDates);
-        }
-      },
-      onValueUpdate(selectedDates: Array<string>) {
-        selectActiveRangeButton(selectedDates);
-      },
-
-      onClose(selectedDates: Array<string>) {
-        // set the input value to the selected dates when the dropdown is closed
-        if (selectedDates.length < 2 && selectedDates.length > 0) {
-          fp.input.placeholder = fp.formatDate(this.selectedDates[0], fp.config.dateFormat);
-        }
-      }
-    };
-  };
-}
-
-export default quickPickPlugin;

data/app/pb_kits/playbook/pb_date_picker/sass_partials/_quick_pick_styles.scss

@@ -1,75 +0,0 @@
-@import "../../tokens/animation-curves";
-@import "../../tokens/colors";
-@import "../../tokens/typography";
-@import "../../tokens/titles";
-@import "../../tokens/spacing";
-
-$pb_card_border_width: 1px;
-$pb_card_border_radius: $border_rad_heavier;
-
-// used to display dropdown on the left of the calender
-.quick-pick-drop-down {
-  width: auto;
-  display: grid;
-}
-
-.quick-pick-ul {
-  padding: $space_xs 0px;
-  margin: 0;
-  list-style: none;
-}
-
-.nav-item {
-  list-style: none;
-  border-radius: 6px;
-  border-bottom: 0;
-  margin: $space_xs $space_sm;
-}
-
-.nav-item-link {
-  text-decoration: none;
-  border-width: $pb_card_border_width;
-  border-style: solid;
-  border-color: $border_light;
-  border-radius: $pb_card_border_radius;
-  padding: $space_xs 14px;
-  transition-property: color, background-color;
-  transition-duration: 0.15s;
-  transition-timing-function: $bezier;
-  line-height: 1.4;
-  color: $charcoal;
-  font-size: $font_default;
-  font-weight: $regular;
-  &.active {
-    border-width: 2px;
-    border-color: $primary;
-  }
-  @media (hover:hover) {
-    &:hover {
-      cursor: pointer;
-      box-shadow: $shadow-deep;
-      border-color: $slate;
-    }
-  }
-}
-
-// Hide the calendar
-.quick-pick-drop-down > .flatpickr-months, .quick-pick-drop-down > .flatpickr-innerContainer {
-  display: none;
-}
-
-@media only screen and (max-width: 767px) {
-  .quick-pick-ul {
-    padding: $space_xs $space_xs;
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-  }
-
-  .nav-item {
-    margin: $space_xxs $space_xs;
-  }
-
-  .nav-item-link {
-    padding: $space_xs $space_xxs;
-  }
-}