playbook_ui 12.13.0.pre.alpha.addingProductTokens439 → 12.14.0.pre.alpha.PLAY603datepickerquickpickinputpresetdropdown456

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 5810ed238e19013cd9913f7751d768a9b0e8c29cb9fb12e7b94f040eb90252ec
-  data.tar.gz: '08a0f2529b37414524c4dbb79c3ea1c7efa4a388ade459dc6a77836f93ab1c0e'
+  metadata.gz: d134719af99c9b743c91b79eaf9df31ec4f190b0ee63eef43ca0371f45285bae
+  data.tar.gz: 9548d090839568767077f07961bc410807d7f658c0b9c26bc732192f39f98740
 SHA512:
-  metadata.gz: 64c3596d0dd7835e6ee4ae6b1bfd55be5a8f87f4be5f90d0a584e60c5c3d0dc89c49b82ba8936417d210daeed87487bf99a218430bf9fec5084c0074601408bb
-  data.tar.gz: 7a51f19a279eca809c072cd7b34b39b4efc30a766d28538e1548715036076438c00d442134d26d31357239b24f9ccb4c787b2cea4015c2445d165848e1e8718b
+  metadata.gz: fe57e92aa08c99eba690fe145d67f01f7bdc07bea84a3697445a8231c80a3d1ce10196f4dc9239d147eefa54064334d3f065772b62414218e28d8c0b9befcc76
+  data.tar.gz: b61b2412844e71772d46587d98803aa254e43e100466345873958cbfe093faa37a7242be2a8b5cd0202a5e1716bd88cb63d8647f63d302d99aafe05f12bdf878

data/app/pb_kits/playbook/pb_date_picker/_date_picker.scss

@@ -6,6 +6,7 @@
 @import "./sass_partials/month_and_year_styles";
 @import "./sass_partials/time_selection_styles";
 @import "./sass_partials/input_styles";
+@import "./sass_partials/quick_pick_styles";
 
 [class^=pb_date_picker_kit] {
   .input_wrapper {
@@ -26,7 +27,32 @@
       @include transition_default;
       border-color: $primary;
     }
+    .add-on-card {
+      border-color: $primary;
+    }
+  }
+
+  @media (hover: hover) {
+    &:hover {
+      .add-on-card {
+        cursor: pointer;
+        background-color: rgba($focus_input_light,$opacity_5);
+      }
+    }
+  }
+  .text_input_wrapper_add_on .add-on-icon {
+    color: $text_lt_light
   }
+
+  .text_input_wrapper_add_on .add-on-right .text_input{
+    cursor: pointer;
+  }
+  
+}
+
+
+.pb_popover_reference_wrapper {
+  display: unset !important
 }
 
 .flatpickr-calendar {

data/app/pb_kits/playbook/pb_date_picker/_date_picker.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react'
+import React, { useEffect} from 'react'
 import classnames from 'classnames'
 
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
@@ -30,7 +30,7 @@ type DatePickerProps = {
   inputAria?: { [key: string]: string },
   inputData?: { [key: string]: string },
   inputOnChange?: (e: React.FormEvent<HTMLInputElement>) => void,
-  inputValue?: any,
+  inputValue?: string,
   label?: string,
   maxDate: string,
   minDate: string,
@@ -39,7 +39,7 @@ type DatePickerProps = {
   placeholder?: string,
   positionElement?: HTMLElement | null,
   scrollContainer?: string,
-  selectionType?: "month" | "week",
+  selectionType?: "month" | "week"| "quickpick",
   showTimezone?: boolean,
   staticPosition: boolean,
   timeFormat?: string,
@@ -78,6 +78,7 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
     mode = 'single',
     name,
     onChange = () => { void 0 },
+    onClose,
     pickerId,
     placeholder = 'Select Date',
     plugins = false,
@@ -95,40 +96,46 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
   const inputAriaProps = buildAriaProps(inputAria)
   const inputDataProps = buildDataProps(inputData)
 
+useEffect(() => {
+  datePickerHelper({
+    allowInput,
+    defaultDate,
+    disableDate,
+    disableRange,
+    disableWeekdays,
+    enableTime,
+    format,
+    hideIcon,
+    inLine,
+    maxDate,
+    minDate,
+    mode,
+    onChange,
+    onClose,
+    pickerId,
+    plugins,
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    position,
+    positionElement,
+    selectionType,
+    showTimezone,
+    staticPosition,
+    yearRange,
+    required: false,
+  }, scrollContainer)
+})
+  const filteredProps = {...props}
+  delete filteredProps?.position
+
   const classes = classnames(
     buildCss('pb_date_picker_kit'),
-    globalProps(props),
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    //@ts-ignore
+    globalProps(filteredProps),
     error ? 'error' : null,
     className
   )
-
-  useEffect(() => {
-    datePickerHelper({
-      allowInput,
-      defaultDate,
-      disableDate,
-      disableRange,
-      disableWeekdays,
-      enableTime,
-      format,
-      hideIcon,
-      inLine,
-      maxDate,
-      minDate,
-      mode,
-      onChange,
-      pickerId,
-      plugins,
-      position,
-      positionElement,
-      selectionType,
-      showTimezone,
-      staticPosition,
-      yearRange,
-      required: false,
-    }, scrollContainer)
-  })
-
   const iconWrapperClass = () => {
     let base = 'cal_icon_wrapper'
     if (dark) {
@@ -145,78 +152,81 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
 
   return (
     <div
-      {...ariaProps}
-      {...dataProps}
-      className={classes}
-      id={id}
+        {...ariaProps}
+        {...dataProps}
+        className={classes}
+        id={id}
     >
       <div
-        {...inputAriaProps}
-        {...inputDataProps}
-        className="input_wrapper">
+          {...inputAriaProps}
+          {...inputDataProps}
+          className="input_wrapper"
+      >
 
         <Caption
-          className="pb_date_picker_kit_label"
-          text={hideLabel ? null : label}
+            className="pb_date_picker_kit_label"
+            text={hideLabel ? null : label}
         />
-
-        <div className="date_picker_input_wrapper">
-          <input
-            autoComplete="off"
-            className="date_picker_input"
-            disabled={disableInput}
-            id={pickerId}
-            name={name}
-            onChange={inputOnChange}
-            placeholder={placeholder}
-            value={inputValue}
-          />
-
-          {error && <Body
-            status="negative"
-            text={error}
-            variant={null}
-          />
-          }
-        </div>
-
-        {!hideIcon &&
-          <div
-            className={iconWrapperClass()}
-            id={`cal-icon-${pickerId}`}
-          >
-            <Icon
-              className="cal_icon"
-              icon="calendar-alt"
-            />
-          </div>
-        }
-
-        {hideIcon && inLine ?
-          <div>
-            <div
-              className={iconWrapperClass()}
-              id={`${pickerId}-icon-plus`}
-            >
-              <Icon
-                className="date-picker-plus-icon"
-                icon="plus"
-              />
-            </div>
-            <div
-              className={iconWrapperClass()}
-              id={`${pickerId}-angle-down`}
-            >
-              <Icon
-                className="angle_down_icon"
-                icon="angle-down"
+          <> 
+            <div className="date_picker_input_wrapper">
+              <input
+                  autoComplete="off"
+                  className="date_picker_input"
+                  disabled={disableInput}
+                  id={pickerId}
+                  name={name}
+                  onChange={inputOnChange}
+                  placeholder={placeholder}
+                  value={inputValue}
               />
+
+              {error && 
+                  <Body
+                      status="negative"
+                      text={error}
+                      variant={null}
+                  />
+              }
             </div>
-          </div>
-          : null}
+        
+            {!hideIcon && 
+              <div
+                  className={iconWrapperClass()}
+                  id={`cal-icon-${pickerId}`}
+              >
+                <Icon
+                    className="cal_icon"
+                    icon="calendar-alt"
+                />
+              </div>
+            }
+
+            {hideIcon && inLine ?
+              <div>
+                <div
+                    className={iconWrapperClass()}
+                    id={`${pickerId}-icon-plus`}
+                >
+                  <Icon
+                      className="date-picker-plus-icon"
+                      icon="plus"
+                  />
+                </div>
+                <div
+                    className={iconWrapperClass()}
+                    id={`${pickerId}-angle-down`}
+                >
+                  <Icon
+                      className="angle_down_icon"
+                      icon="angle-down"
+                  />
+                </div>
+              </div>
+              : null
+            }
+          </>
       </div>
     </div>
   )
 }
-
 export default DatePicker

data/app/pb_kits/playbook/pb_date_picker/date_picker.html.erb

@@ -64,4 +64,4 @@
         datePickerHelper(<%= object.date_picker_config %>, "<%= object.scroll_container %>")
     })
   <% end %>
-<% end %>
+<% end %>

data/app/pb_kits/playbook/pb_date_picker/date_picker.rb

@@ -51,7 +51,7 @@ module Playbook
       prop :position_element, type: Playbook::Props::String
       prop :scroll_container, type: Playbook::Props::String
       prop :selection_type, type: Playbook::Props::Enum,
-                            values: %w[week month none],
+                            values: %w[week month quickpick none],
                             default: "none"
       prop :show_timezone, type: Playbook::Props::Boolean,
                            default: false
@@ -103,6 +103,65 @@ module Playbook
         class_string += error_class
         class_string
       end
+
+      def format_date(date)
+        date.strftime("%m/%d/%Y")
+      end
+
+      def date_ranges
+        [
+          {
+            label: "Today",
+            start_date: format_date(::Date.current),
+            end_date: format_date(::Date.current),
+          },
+          {
+            label: "Yesterday",
+            start_date: format_date(::Date.current.yesterday),
+            end_date: format_date(::Date.current.yesterday),
+          },
+          {
+            label: "This Week",
+            start_date: format_date(::Date.current.beginning_of_week),
+            end_date: format_date(::Date.current.end_of_week),
+          },
+          {
+            label: "This Month",
+            start_date: format_date(::Date.current.beginning_of_month),
+            end_date: format_date(::Date.current),
+          },
+          {
+            label: "This Quarter",
+            start_date: format_date(::Date.current.beginning_of_quarter),
+            end_date: format_date(::Date.current),
+          },
+          {
+            label: "This Year",
+            start_date: format_date(::Date.current.beginning_of_year),
+            end_date: format_date(::Date.current),
+          },
+          {
+            label: "Last Week",
+            start_date: format_date(::Date.current.last_week.beginning_of_week),
+            end_date: format_date(::Date.current.last_week.end_of_week),
+          },
+          {
+            label: "Last Month",
+            start_date: format_date(::Date.current.last_month.beginning_of_month),
+            end_date: format_date(::Date.current.last_month.end_of_month),
+          },
+          {
+            label: "Last Quarter",
+            start_date: format_date(::Date.current.last_quarter.beginning_of_quarter),
+            end_date: format_date(::Date.current.last_quarter.end_of_quarter),
+          },
+          {
+            label: "Last Year",
+            start_date: format_date(::Date.current.last_year.beginning_of_year),
+            end_date: format_date(::Date.current.last_year.end_of_year),
+          },
+        ]
+      end
     end
   end
 end

data/app/pb_kits/playbook/pb_date_picker/date_picker_helper.ts

@@ -3,6 +3,7 @@ import { BaseOptions } from 'flatpickr/dist/types/options'
 import monthSelectPlugin from 'flatpickr/dist/plugins/monthSelect'
 import weekSelect from "flatpickr/dist/plugins/weekSelect/weekSelect"
 import timeSelectPlugin from './plugins/timeSelect'
+import quickPickPlugin from './plugins/quickPick'
 
 const getPositionElement = (element: string | Element) => {
   return (typeof element === 'string') ? document.querySelectorAll(element)[0] : element
@@ -19,7 +20,8 @@ type DatePickerConfig = {
   hideIcon?: boolean;
   inLine?: boolean,
   onChange: (dateStr: string, selectedDates: Date[]) => void,
-  selectionType?: "month" | "week" | "",
+  selectionType?: "month" | "week" | "quickpick" | "",
+  onClose: (dateStr: Date[] | string, selectedDates: Date[] | string) => void,
   showTimezone?: boolean,
   staticPosition: boolean,
   timeCaption?: string,
@@ -41,6 +43,7 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
     minDate,
     mode,
     onChange = () => {},
+    onClose = () => {},
     pickerId,
     plugins,
     position = "auto",
@@ -88,18 +91,23 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
   }
 
   const setPlugins = () => {
-    let pluginList = []
+    const pluginList = []
 
     // month and week selection
     if (selectionType === "month" || plugins.length > 0) {
       pluginList.push(monthSelectPlugin({ shorthand: true, dateFormat: 'F Y', altFormat: 'F Y' }))
     } else if ( selectionType === "week") {
       pluginList.push(weekSelect())
+
+    } else if (selectionType === "quickpick") {
+    //------- QUICKPICK VARIANT PLUGIN -------------//
+    pluginList.push(quickPickPlugin())
     }
 
     // time selection
     if (enableTime) pluginList.push(timeSelectPlugin({ caption: timeCaption, showTimezone: showTimezone}))
 
+
     return pluginList
   }
 
@@ -142,6 +150,9 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
       },
     ] : disabledParser(),
     enableTime,
+    locale: {
+      rangeSeparator: ' → '
+    },
     maxDate,
     minDate,
     mode,
@@ -151,9 +162,10 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
       window.addEventListener('resize', calendarResizer)
       if (!staticPosition && scrollContainer) attachToScroll(scrollContainer)
     }],
-    onClose: [() => {
+    onClose: [(selectedDates, dateStr) => {
       window.removeEventListener('resize', calendarResizer)
       if (!staticPosition && scrollContainer) detachFromScroll(scrollContainer as HTMLElement)
+      onClose(selectedDates, dateStr)
     }],
     onChange: [(selectedDates, dateStr) => {
       onChange(dateStr, selectedDates)
@@ -168,6 +180,7 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
     static: staticPosition,
   })
 
+
   // ===========================================================
   //                 Additional JS Functionality               |
   // ===========================================================

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

@@ -0,0 +1,43 @@
+/* eslint-disable react/no-multi-comp */
+import React, { useState } from 'react'
+import { DatePicker,LabelValue } from '../..'
+
+
+const DatePickerOnClose = (props) => {
+  const today = new Date()
+  const [dateString, setDateString] = useState(today.toLocaleDateString())
+  const [dateObj, setDateObj] = useState([today])
+
+  const handleOnClose = (selectedDates, dateStr) => {
+    setDateString(dateStr)
+    setDateObj(selectedDates)
+  }
+
+
+  return (
+    <div>
+        <DatePicker
+            defaultDate={dateString}
+            enableTime
+            marginBottom="lg"
+            onClose={handleOnClose}
+            pickerId="date-picker-on-close"
+            showTimezone
+            {...props}
+        />
+        <LabelValue
+            label="Date Object"
+            marginBottom="lg"
+            value={dateObj[0] ? dateObj[0].toString() : ''}
+            {...props}
+        />
+        <LabelValue
+            label="Date String"
+            value={dateString}
+            {...props}
+        />
+    </div>
+  )
+}
+
+export default DatePickerOnClose

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

@@ -0,0 +1,3 @@
+The `onClose` handler function has access to two arguments: `dateStr` and `selectedDates`.
+
+The first, `dateStr`, is a string of the chosen date.  The second, `selectedDates`, is an array of selected date objects. In many use cases `selectedDates` will have only one value but you'll still need to access it from index 0.

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

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

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

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

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

@@ -5,6 +5,7 @@ import DatePicker from '../_date_picker'
 const DatePickerRange = (props) => (
   <div>
     <DatePicker
+        allowInput
         defaultDate={[new Date(), new Date().fp_incr(7)]}
         mode="range"
         pickerId="date-picker-range"

data/app/pb_kits/playbook/pb_date_picker/docs/example.yml

@@ -21,6 +21,7 @@ examples:
   - date_picker_week: Week
   - date_picker_time: Time Selection
   - date_picker_positions: Custom Positions
+  - date_picker_quick_pick: Quick Pick
   - date_picker_positions_element: Custom Position (based on element)
 
   react:
@@ -31,6 +32,7 @@ examples:
   - date_picker_input: Input Field
   - date_picker_label: Label
   - date_picker_on_change: onChange
+  - date_picker_on_close: onClose
   - date_picker_range: Range
   - date_picker_format: Format
   - date_picker_disabled: Disabled Dates
@@ -44,4 +46,5 @@ examples:
   - date_picker_week: Week
   - date_picker_time: Time Selection
   - date_picker_positions: Custom Positions
+  - date_picker_quick_pick: Quick Pick
   - date_picker_positions_element: Custom Position (based on element)

data/app/pb_kits/playbook/pb_date_picker/docs/index.js

@@ -19,3 +19,5 @@ export { default as DatePickerWeek } from './_date_picker_week.jsx'
 export { default as DatePickerPositions } from './_date_picker_positions.jsx'
 export { default as DatePickerPositionsElement } from './_date_picker_positions_element.jsx'
 export { default as DatePickerAllowInput } from './_date_picker_allow_input'
+export { default as DatePickerQuickPick } from './_date_picker_quick_pick'
+export { default as DatePickerOnClose } from './_date_picker_on_close.jsx'

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

@@ -0,0 +1,166 @@
+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,
+}
+
+const quickPickPlugin = () => {
+  return function (fp: FpTypes & any): any {
+
+  // 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('week').toDate(), moment().endOf('week').toDate()],
+      'This month': [moment().startOf('month').toDate(), moment().endOf('month').toDate()],
+      'This quarter': [moment().startOf('quarter').toDate(), moment().endOf('quarter').toDate()],
+      'This year': [moment().startOf('year').toDate(), moment().endOf('year').toDate()],
+      'Last week': [
+          moment().subtract(1, 'week').startOf('week').toDate(),
+          moment().subtract(1, 'week').endOf('week').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
+ */
+
+  //funciton for creating the range buttons in the nav
+  const addRangeButton = (label: string) => {
+
+    // create the button element and add class and text
+    const button = document.createElement('a');
+    button.className = "nav-item-link";
+    const itemLabel = document.createElement('span')
+    itemLabel.className = "nav-item-text"
+    itemLabel.innerHTML = label;
+
+    // create li elements inside the dropdown
+    const item = document.createElement('li');
+    item.className = "nav-item";
+
+    pluginData.rangesButtons[label] = button;
+
+    // append span text to anchor tag
+    pluginData.rangesButtons[label].appendChild(itemLabel)
+
+    // append those anchor tags 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) {
+
+      const startDate = moment(selectedDates[0]);
+      const endDate = selectedDates.length > 1 ? moment(selectedDates[1]) : startDate;
+
+      for (const [label, range] of Object.entries(pluginData.ranges)) {
+        if (startDate.isSame(moment(range[0]), 'day') && endDate.isSame(moment(range[1]), 'day')) {
+          pluginData.rangesButtons[label].classList.add('active');
+          break;
+        }
+      }
+    }
+
+  }
+
+    
+    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 listiner 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 {
+                fp.setDate([start, end], true);
+              }
+
+              fp.close();
+            });
+        }
+
+        // conditional to check if there is a dropdown to add it to the calendar container and git 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 butto the active class
+          selectActiveRangeButton(selectedDates);
+        }
+        
+      },
+      onValueUpdate(selectedDates: Array<string>) {
+        selectActiveRangeButton(selectedDates);
+      }
+    };
+  };
+}
+
+export default quickPickPlugin;

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

@@ -0,0 +1,56 @@
+@import "../../tokens/animation-curves";
+@import "../../tokens/colors";
+@import "../../tokens/typography";
+@import "../../tokens/titles";
+
+// used to display dropdown on the left of the calender
+.quick-pick-drop-down {
+  width: auto;
+  display: grid;
+}
+
+.quick-pick-ul {
+  padding: 0;
+  margin: 0;
+  list-style: none;
+}
+
+.nav-item {
+  list-style: none;
+  border-radius: 6px;
+  border-bottom: 0;
+  margin: 8px 14px;
+}
+
+.nav-item-link {
+  text-decoration: none;
+  display: flex;
+  align-items: center;
+  border: none;
+  padding: 8px 14px;
+  transition-property: color, background-color;
+  transition-duration: 0.15s;
+  transition-timing-function: $bezier;
+  border-radius: 6px;
+  line-height: 1.4;
+  color: $charcoal;
+  font-size: $font_default;
+  font-weight: $regular;
+  &.active {
+    background-color: rgba($primary, 0.03);
+    color: $primary;
+    letter-spacing: normal;
+  }
+  @media (hover:hover) {
+    &:hover {
+      cursor: pointer;
+      background-color: rgba($primary, 0.03);
+      color: $primary;
+    }
+  }
+}
+
+// Hide the calendar
+.quick-pick-drop-down > .flatpickr-months, .quick-pick-drop-down > .flatpickr-innerContainer {
+  display: none;
+}

data/app/pb_kits/playbook/pb_layout/_layout.tsx

@@ -151,6 +151,10 @@ const Layout = (props: LayoutPropTypes) => {
   const nonSideChildren = layoutChildren.filter(
     (child: React.ReactElement & {type: {displayName: string}}) => child.type?.displayName !== 'Side'
   )
+
+  const filteredProps = {...props}
+  delete filteredProps?.position
+
   return (
     <div
         {...ariaProps}
@@ -159,7 +163,8 @@ const Layout = (props: LayoutPropTypes) => {
         layoutCss,
         layoutCollapseCss,
         className,
-        globalProps(props)
+        //@ts-ignore
+        globalProps(filteredProps)
       )}
     >
       {subComponentTags('Side')}

data/app/pb_kits/playbook/pb_nav/_item.tsx

@@ -13,14 +13,14 @@ type NavItemProps = {
   children?: React.ReactNode[] | React.ReactNode,
   className?: string,
   data?: object,
-  iconLeft: string,
-  iconRight: string,
+  iconLeft?: string,
+  iconRight?: string,
   id?: string,
-  imageUrl: string,
-  link: string,
+  imageUrl?: string,
+  link?: string,
   onClick?: React.MouseEventHandler<HTMLElement>,
   target?: '_blank' | '_self' | '_parent' | '_top',
-  text: string,
+  text?: string,
 }
 
 const NavItem = (props: NavItemProps) => {

data/app/pb_kits/playbook/pb_nav/_nav.tsx

@@ -17,8 +17,8 @@ type NavProps = {
   id?: string,
   onClick?: React.MouseEventHandler<HTMLElement>,
   orientation?: "vertical" | "horizontal",
-  link: string,
-  title: string,
+  link?: string,
+  title?: string,
   variant?: "normal" | "subtle",
 }
 

data/app/pb_kits/playbook/pb_nav/_subtle_mixin.scss

@@ -44,7 +44,7 @@
     &[class*=_active] [class*=_link] {
       @include pb_title_4;
       color: $primary;
-       letter-spacing: normal;
+      letter-spacing: normal;
     }
   }
 }

data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.tsx

@@ -89,6 +89,7 @@ const PhoneNumberInput = (props: PhoneNumberInputProps) => {
   const [itiInit, setItiInit] = useState<any>()
   const [error, setError] = useState('')
   const [dropDownIsOpen, setDropDownIsOpen] = useState(false)
+  const [selectedData, setSelectedData] = useState()
 
   const validateTooLongNumber = (itiInit: any) => {
     const error = itiInit.getValidationError()
@@ -121,10 +122,16 @@ const PhoneNumberInput = (props: PhoneNumberInputProps) => {
     validateOnlyNumbers()
   }
 
+  const getCurrentSelectedData = (itiInit: any, inputValue: string) => {
+    return { ...itiInit.getSelectedCountryData(), number: inputValue }
+  }
+
   const handleOnChange = (evt: React.ChangeEvent<HTMLInputElement>) => {
     setInputValue(evt.target.value)
     validateTooLongNumber(itiInit)
-    onChange(evt)
+    const phoneNumberData = getCurrentSelectedData(itiInit, evt.target.value)
+    setSelectedData(phoneNumberData)
+    onChange(phoneNumberData)
     isValid(itiInit.isValidNumber())
   }
 
@@ -136,15 +143,21 @@ const PhoneNumberInput = (props: PhoneNumberInputProps) => {
 
   useEffect(() => {
     const telInputInit = new intlTelInput(inputRef.current, {
-        separateDialCode: true,
-        preferredCountries,
-        allowDropdown: !disabled,
-        initialCountry,
-        onlyCountries,
-      }
+      separateDialCode: true,
+      preferredCountries,
+      allowDropdown: !disabled,
+      initialCountry,
+      onlyCountries,
+    }
     )
-    
-    inputRef.current.addEventListener("countrychange", () => validateTooLongNumber(telInputInit))
+
+    inputRef.current.addEventListener("countrychange", (evt: Event) => {
+      validateTooLongNumber(telInputInit)
+      const phoneNumberData = getCurrentSelectedData(telInputInit, (evt.target as HTMLInputElement).value)
+      setSelectedData(phoneNumberData)
+      onChange(phoneNumberData)
+    })
+
     inputRef.current.addEventListener("open:countrydropdown", () => setDropDownIsOpen(true))
     inputRef.current.addEventListener("close:countrydropdown", () => setDropDownIsOpen(false))
 
@@ -156,6 +169,7 @@ const PhoneNumberInput = (props: PhoneNumberInputProps) => {
       <TextInput
         className={dropDownIsOpen ? 'dropdown_open' : ''}
         dark={dark}
+        data-phone-number={JSON.stringify(selectedData)}
         disabled={disabled}
         error={error}
         id={id}

data/app/pb_kits/playbook/tokens/_positioning.scss

@@ -1,3 +1,16 @@
+$relative: relative !default;
+$absolute: absolute !default;
+$fixed: fixed !default;
+$sticky: sticky !default;
+$static: static !default;
+$position: (
+  relative: $relative,
+  absolute: $absolute,
+  fixed: $fixed,
+  sticky: $sticky,
+  static: $static
+);
+
 // z_index variables
 $z_1: 100 !default;
 $z_2: 200 !default;

data/app/pb_kits/playbook/utilities/_positioning.scss

@@ -1,3 +1,23 @@
+.position_relative {
+  position: relative;
+}
+
+.position_absolute {
+  position: absolute;
+}
+
+.position_fixed {
+  position: fixed;
+}
+
+.position_sticky {
+  position: sticky;
+}
+
+.position_static {
+  position: static;
+}
+
 .z_index_1 {
   z-index: 100;
 }

data/app/pb_kits/playbook/utilities/globalProps.ts

@@ -100,6 +100,10 @@ type Padding = {
   padding?: AllSizes,
 }
 
+type Position = {
+  position?: "relative" | "absolute" | "fixed" | "sticky" | "static",
+}
+
 type Shadow = {
   shadow?: "none" | "deep" | "deeper" | "deepest",
 }
@@ -115,7 +119,7 @@ export type GlobalProps = AlignContent & AlignItems & AlignSelf &
   BorderRadius & Cursor & Dark & Display & DisplaySizes & Flex & FlexDirection &
   FlexGrow & FlexShrink & FlexWrap & JustifyContent & JustifySelf &
   LineHeight & Margin & MaxWidth & NumberSpacing & Order & Padding &
-  Shadow & ZIndex
+  Position & Shadow & ZIndex
 
 const getResponsivePropClasses = (prop: {[key: string]: string}, classPrefix: string) => {
   const keys: string[] = Object.keys(prop)
@@ -283,7 +287,12 @@ const PROP_CATEGORIES: {[key:string]: (props: {[key: string]: any}) => string} =
     } else {
       return order ? `flex_order_${order}` : ''
     }
-  }
+  }, 
+  positionProps: ({ position }: Position) => {
+    let css = ''
+    css += position && position !== 'static' ? `position_${position}` : ''
+    return css
+  },
 }
 
 type DefaultProps = {[key: string]: string} | Record<string, unknown>

data/lib/playbook/classnames.rb

@@ -31,6 +31,7 @@ module Playbook
         flex_grow_props,
         flex_shrink_props,
         order_props,
+        position_props,
       ].compact.join(" ")
     end
 

data/lib/playbook/kit_base.rb

@@ -19,6 +19,7 @@ require "playbook/flex"
 require "playbook/flex_grow"
 require "playbook/flex_shrink"
 require "playbook/order"
+require "playbook/position"
 
 module Playbook
   class KitBase < ViewComponent::Base
@@ -43,6 +44,7 @@ module Playbook
     include Playbook::FlexGrow
     include Playbook::FlexShrink
     include Playbook::Order
+    include Playbook::Position
 
     prop :id
     prop :data, type: Playbook::Props::Hash, default: {}

data/lib/playbook/position.rb

@@ -0,0 +1,33 @@
+# frozen_string_literal: true
+
+module Playbook
+  module Position
+    def self.included(base)
+      base.prop :position
+    end
+
+  private
+
+    def position_props
+      selected_props = position_options.keys.select { |sk| try(sk) }
+      return nil unless selected_props.present?
+
+      selected_props.map do |k|
+        value = send(k)
+        return nil unless position_values.include? value
+
+        "position_#{value}"
+      end.compact.join(" ")
+    end
+
+    def position_options
+      {
+        position: "position",
+      }
+    end
+
+    def position_values
+      %w[relative absolute fixed sticky]
+    end
+  end
+end

data/lib/playbook/version.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
 module Playbook
-  PREVIOUS_VERSION = "12.13.0"
-  VERSION = "12.13.0.pre.alpha.addingProductTokens439"
+  PREVIOUS_VERSION = "12.14.0"
+  VERSION = "12.14.0.pre.alpha.PLAY603datepickerquickpickinputpresetdropdown456"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 12.13.0.pre.alpha.addingProductTokens439
+  version: 12.14.0.pre.alpha.PLAY603datepickerquickpickinputpresetdropdown456
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2023-04-06 00:00:00.000000000 Z
+date: 2023-04-10 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -738,11 +738,15 @@ files:
 - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_month_and_year.md
 - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_on_change.jsx
 - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_on_change.md
+- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_on_close.jsx
+- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_on_close.md
 - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_positions.html.erb
 - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_positions.jsx
 - 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.html.erb
+- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick.jsx
 - 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
@@ -757,6 +761,7 @@ 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.ts
 - 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
@@ -766,6 +771,7 @@ 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
@@ -2438,6 +2444,7 @@ files:
 - lib/playbook/pb_doc_helper.rb
 - lib/playbook/pb_forms_helper.rb
 - lib/playbook/pb_kit_helper.rb
+- lib/playbook/position.rb
 - lib/playbook/props.rb
 - lib/playbook/props/array.rb
 - lib/playbook/props/base.rb