playbook_ui 12.19.0.pre.alpha.PLAY603datepickerquickpickinputpresetdropdown638 → 12.19.0.pre.alpha.PLAY699zindexresponsive650

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 453164dea66b229cdd84038a46f6178bf1008bbf17b5838d2f319e94f1f8fd55
-  data.tar.gz: 8cec3bedef3f08dda63bae0c5faa319542743c9c0e9ebaeef085d868510925e1
+  metadata.gz: 79e97a67011051e8187bac717ed8b2cc199f71e734a3d239384343489dc52c0b
+  data.tar.gz: 0c8a7f21df4e5190feee41f12a69513721bff189a83d9d41184bd25930effb6e
 SHA512:
-  metadata.gz: e3982d4582e7c91ec22107b1bd2288f943dd22fe8d054060d56d4193e067a5041a0947e02a940f9873457c7566db4a1ec020858d2bee8aa78985e2430e7c7a6b
-  data.tar.gz: 4af1dfb8a83b8e74411aac7bf618f0f5f946facb7636e560eb87918aec8210ebb91a644d8ede92fbab461d61ba20d125f660a8f5497cd9fd8622af8e39dc2b72
+  metadata.gz: 854df41d949dee72464fc27f20827fc741399c06af493e40f49e18e55e61d0e419f5a70a061f9be357f9f466e981f39b7b3b95f89da7a46d6ae85820f93fcd3c
+  data.tar.gz: '09057a46d7390ad744d988ec907ddb53e4e1fd0d3afd8945b04c1c59e5b3c77c98beca823c3341e5ce054649ba487647ce42cc5f003fd99bc63bb6cdeb917981'

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

@@ -6,7 +6,6 @@
 @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 {
@@ -27,32 +26,7 @@
       @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

@@ -30,7 +30,7 @@ type DatePickerProps = {
   inputAria?: { [key: string]: string },
   inputData?: { [key: string]: string },
   inputOnChange?: (e: React.FormEvent<HTMLInputElement>) => void,
-  inputValue?: string,
+  inputValue?: any,
   label?: string,
   maxDate: string,
   minDate: string,
@@ -39,7 +39,7 @@ type DatePickerProps = {
   placeholder?: string,
   positionElement?: HTMLElement | null,
   scrollContainer?: string,
-  selectionType?: "month" | "week"| "quickpick",
+  selectionType?: "month" | "week",
   showTimezone?: boolean,
   staticPosition: boolean,
   timeFormat?: string,
@@ -96,46 +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'),
-    // 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,
+      onClose,
+      pickerId,
+      plugins,
+      // @ts-ignore
+      position,
+      positionElement,
+      selectionType,
+      showTimezone,
+      staticPosition,
+      yearRange,
+      required: false,
+    }, scrollContainer)
+  })
+
   const iconWrapperClass = () => {
     let base = 'cal_icon_wrapper'
     if (dark) {
@@ -150,84 +150,80 @@ useEffect(() => {
     return base
   }
 
-
   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>
+        <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>
-              </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

@@ -61,8 +61,7 @@
 
   <%= javascript_tag do %>
     window.addEventListener("DOMContentLoaded", () => {
-      datePickerHelper(<%= object.date_picker_config %>, "<%= object.scroll_container %>")
+        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 quickpick none],
+                            values: %w[week month none],
                             default: "none"
       prop :show_timezone, type: Playbook::Props::Boolean,
                            default: false

data/app/pb_kits/playbook/pb_date_picker/date_picker.test.js

@@ -1,6 +1,5 @@
 /* eslint-disable no-console */
 import React from 'react'
-import moment from 'moment'
 import { fireEvent, render, screen, waitFor, within } from '../utilities/test-utils'
 
 import DatePicker from './_date_picker'
@@ -11,6 +10,7 @@ import { getTimezoneText } from './plugins/timeSelect'
 jest.setSystemTime(new Date('01/01/2020'));
 const DEFAULT_DATE = new Date()
 
+
 describe('DatePicker Kit', () => {
   beforeEach(() => {
     jest.spyOn(console, 'error').mockImplementation(() => { });
@@ -158,47 +158,4 @@ describe('DatePicker Kit', () => {
       expect(input).toHaveValue('01/01/2020 at 12:00 PM')
     })
   })
-  test('shows DatePicker QuickPick dropdown and adds correct date to input', async () => {
-    const testId = 'datepicker-quick-pick'
-    render(
-      <DatePicker
-          allowInput
-          data={{ testid: testId }}
-          mode="range"
-          pickerId="date-picker-quick-pick"
-          placeholder="mm/dd/yyyy → mm/dd/yyyy"
-          selectionType="quickpick"
-      />
-    )
-
-    const kit = screen.getByTestId(testId)
-    const input = within(kit).getByPlaceholderText('mm/dd/yyyy → mm/dd/yyyy')
-
-    fireEvent(
-      input,
-      new MouseEvent('click', {
-        bubbles: true,
-        cancelable: true,
-      }),
-    )
-    const today = within(kit).getByText('Today')
-    const thisYear = within(kit).getByText('This year')
-    await waitFor(() => {
-      expect(today).toBeInTheDocument()
-      expect(thisYear).toBeInTheDocument()
-    })
-
-    fireEvent(
-      thisYear,
-      new MouseEvent('click', {
-        bubbles: true,
-        cancelable: true,
-      }),
-    )
-
-    await waitFor(() => {
-      expect(input).toHaveValue(moment().startOf('year').format('MM/DD/YYYY') + " → " + moment().format('MM/DD/YYYY'))
-    })
-
-  })
 })

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

@@ -3,7 +3,6 @@ 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
@@ -20,8 +19,8 @@ type DatePickerConfig = {
   hideIcon?: boolean;
   inLine?: boolean,
   onChange: (dateStr: string, selectedDates: Date[]) => void,
-  selectionType?: "month" | "week" | "quickpick" | "",
   onClose: (dateStr: Date[] | string, selectedDates: Date[] | string) => void,
+  selectionType?: "month" | "week" | "",
   showTimezone?: boolean,
   staticPosition: boolean,
   timeCaption?: string,
@@ -91,23 +90,18 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
   }
 
   const setPlugins = () => {
-    const pluginList = []
+    let 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
   }
 
@@ -150,9 +144,6 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
       },
     ] : disabledParser(),
     enableTime,
-    locale: {
-      rangeSeparator: ' → '
-    },
     maxDate,
     minDate,
     mode,
@@ -180,33 +171,10 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
     static: staticPosition,
   })
 
-
   // ===========================================================
   //                 Additional JS Functionality               |
   // ===========================================================
 
-  // opens flatpickr instance when calander icon is clicked so we can have a hover state on icon
-  // window.addEventListener("DOMContentLoaded", (event) => {
-  //   event.preventDefault();
-  //   function attachIconClickHandler() {
-  //     const variantArr = document.querySelectorAll(`#cal-icon-${pickerId}`)
-  //     if (!variantArr) {
-  //       setTimeout(attachIconClickHandler, 100);
-  //       return;
-  //     }
-
-  //     const instance = document.querySelector<HTMLElement & { [x: string]: any }>(`#${pickerId}`)._flatpickr
-  //     variantArr.forEach((icon) => {
-  //       icon.addEventListener("click", function(event) {
-  //         event.preventDefault();
-  //         instance.open()
-  //       });
-  //     })
-  //   }
-
-  //   attachIconClickHandler();
-  // });
-
   // Assign dynamically sourced flatpickr instance to variable
   const picker = document.querySelector<HTMLElement & { [x: string]: any }>(`#${pickerId}`)._flatpickr
   picker.innerContainer.parentElement.id = `cal-${pickerId}`

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

@@ -8,7 +8,6 @@ examples:
   - date_picker_input: Input Field
   - date_picker_label: Label
   - date_picker_range: Range
-  - date_picker_quick_pick: Range (Quick Pick)
   - date_picker_format: Format
   - date_picker_disabled: Disabled Dates
   - date_picker_min_max: Min Max
@@ -34,7 +33,6 @@ examples:
   - date_picker_on_change: onChange
   - date_picker_on_close: onClose
   - date_picker_range: Range
-  - date_picker_quick_pick: Range (Quick Pick)
   - date_picker_format: Format
   - date_picker_disabled: Disabled Dates
   - date_picker_min_max: Min Max

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

@@ -19,5 +19,4 @@ 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'
+export { default as DatePickerOnClose } from './_date_picker_on_close.jsx'

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

@@ -1,4 +1,3 @@
-@import "../../tokens/colors";
 // Calendar Icon Styles
 .cal_icon_wrapper {
   pointer-events: none;
@@ -14,8 +13,8 @@
   padding-left: $space_sm - 1;
   color: $text_lt_light;
   @media (hover: hover) {
-    &:hover{
-      background-color: rgba($focus_input_light,$opacity_5);
+    &:hover {
+      cursor: pointer;
     }
   }
   &.dark {

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

@@ -87,7 +87,7 @@ const NavItem = (props: NavItemProps) => {
         <span className="pb_nav_list_item_text">
           {text || children}
         </span>
-
+        
         {iconRight &&
           <div
             className="pb_nav_list_item_icon_section"

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/utilities/_positioning.scss

@@ -48,3 +48,17 @@
 .z_index_10 {
   z-index: 1000;
 }
+
+$zIndex_values: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10;
+    
+@each $size, $size_value in $breakpoints_grid {
+  @each $zIndex_value in $zIndex_values {
+      $min_size: map-get($size_value, "min");
+      $max_size: map-get($size_value, "max");
+      .z_index_#{$size}_#{$zIndex_value} {
+        @include break_on($min_size, $max_size) {
+          z-index: #{$zIndex_value * 100} !important;
+        }
+      }
+  }
+}

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

@@ -113,9 +113,11 @@ type Shadow = {
 
 type Space = "spaceBetween" | "spaceAround" | "spaceEvenly"
 
+type ZIndexType = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10
+type ZIndexResponsiveType = {[key: string]: ZIndexType}
 type ZIndex = {
-  zIndex?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10,
-}
+  zIndex?: ZIndexType,
+} | ZIndexResponsiveType
 
 // keep this as the last type definition
 export type GlobalProps = AlignContent & AlignItems & AlignSelf &
@@ -178,9 +180,19 @@ const PROP_CATEGORIES: {[key:string]: (props: {[key: string]: any}) => string} =
     css += maxWidth ? `max_width_${maxWidth } ` : ''
     return css
   },
-  zIndexProps: ({ zIndex }: ZIndex) => {
+  zIndexProps: (zIndex: ZIndex) => {
     let css = ''
-    css += zIndex ? `z_index_${zIndex } ` : ''
+    Object.entries(zIndex).forEach((zIndexEntry) => {
+      if (zIndexEntry[0] == "zIndex") {
+        if (typeof zIndexEntry[1] == "number") {
+          css += `z_index_${zIndexEntry[1]} `
+        } else if (typeof zIndexEntry[1] == "object") {
+          Object.entries(zIndexEntry[1]).forEach((zIndexObj) => {
+            css += `z_index_${zIndexObj[0]}_${zIndexObj[1]} `
+          })
+        }
+      }
+    })
     return css
   },
   shadowProps: ({ shadow }: Shadow) => {

data/lib/playbook/version.rb

@@ -2,5 +2,5 @@
 
 module Playbook
   PREVIOUS_VERSION = "12.19.0"
-  VERSION = "12.19.0.pre.alpha.PLAY603datepickerquickpickinputpresetdropdown638"
+  VERSION = "12.19.0.pre.alpha.PLAY699zindexresponsive650"
 end

data/lib/playbook/z_index.rb

@@ -16,16 +16,29 @@ module Playbook
       }
     end
 
-  private
+    def screen_size_values
+      %w[xs sm md lg xl]
+    end
 
     def z_index_props
-      selected_index_props = z_index_options.keys.select { |sk| try(sk) }
-      return nil unless selected_index_props.present?
+      selected_props = z_index_options.keys.select { |sk| try(sk) }
+      return nil unless selected_props.present?
+
+      responsive = selected_props.present? && try(:z_index).is_a?(::Hash)
+      css = ""
+      if responsive
+        z_index_value = send(:z_index)
+        z_index_value.each do |key, value|
+          css += "z_index_#{key}_#{value} " if screen_size_values.include?(key.to_s) && z_index_values.include?(value.to_s)
+        end
+      else
+        selected_props.each do |k|
+          z_index_value = send(k)
+          css += "z_index_#{z_index_value} " if z_index_values.include? z_index_value
+        end
+      end
 
-      selected_index_props.map do |k|
-        index_value = send(k)
-        "z_index_#{index_value}" if z_index_values.include? index_value
-      end.compact.join(" ")
+      css unless css.blank?
     end
   end
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 12.19.0.pre.alpha.PLAY603datepickerquickpickinputpresetdropdown638
+  version: 12.19.0.pre.alpha.PLAY699zindexresponsive650
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2023-05-10 00:00:00.000000000 Z
+date: 2023-05-11 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -745,8 +745,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.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
@@ -761,7 +759,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
@@ -771,7 +768,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

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

@@ -1,8 +0,0 @@
-<%= 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

@@ -1,18 +0,0 @@
-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/plugins/quickPick.tsx

@@ -1,161 +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,
-}
-
-const quickPickPlugin = () => {
-  return function (fp: FpTypes & any): any {
-
-    let activeLabel = ""
-
-  // 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(), new Date()],
-      'This quarter': [moment().startOf('quarter').toDate(), new Date()],
-      'This year': [moment().startOf('year').toDate(), new Date()],
-      '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) => {
-
-    // 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) {
-      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 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 {
-                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 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);
-      },
-
-      // onClose(selectedDates: Array<string>) {
-      //   // set the input value to the selected dates when the dropdown is closed
-      //   // if (!selectedDates[1]) {
-      //   //   fp.input.value = fp.formatDate(this.selectedDates[0], fp.config.dateFormat) + ' → ' + fp.formatDate(this.selectedDates[1], 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;
-  }
-}