playbook_ui 12.25.0 → 12.26.0.pre.alpha.PLAY603datepickerquickpickinputpresetdropdown813

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,10 +20,11 @@ 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,
+  thisRangesEndToday?: boolean,
   timeCaption?: string,
   timeFormat?: string,
   yearRange: number[]
@@ -51,6 +53,7 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
     selectionType,
     showTimezone,
     staticPosition = true,
+    thisRangesEndToday = false,
     timeCaption = 'Select Time',
     timeFormat = 'at h:i K',
     yearRange,
@@ -89,19 +92,24 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
     }
   }
 
-  const setPlugins = () => {
-    let pluginList = []
+  const setPlugins = (thisRangesEndToday: boolean) => {
+    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(thisRangesEndToday))
     }
 
     // time selection
     if (enableTime) pluginList.push(timeSelectPlugin({ caption: timeCaption, showTimezone: showTimezone}))
 
+
     return pluginList
   }
 
@@ -144,6 +152,9 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
       },
     ] : disabledParser(),
     enableTime,
+    locale: {
+      rangeSeparator: ' → '
+    },
     maxDate,
     minDate,
     mode,
@@ -164,17 +175,40 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
     onYearChange: [() => {
       yearChangeHook()
     }],
-    plugins: setPlugins(),
+    plugins: setPlugins(thisRangesEndToday),
     position,
     positionElement: getPositionElement(positionElement),
     prevArrow: '<i class="far fa-angle-left"></i>',
     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/_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/example.yml

@@ -8,6 +8,7 @@ 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
@@ -33,6 +34,7 @@ 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,4 +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 DatePickerOnClose } from './_date_picker_on_close.jsx'
+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.tsx

@@ -0,0 +1,168 @@
+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/_calendar_input_icon.scss

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

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

@@ -0,0 +1,75 @@
+@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;
+  }
+}

data/app/pb_kits/playbook/pb_detail/_detail.scss

@@ -0,0 +1,44 @@
+@import "./detail_mixins";
+@import "../tokens/titles";
+@import "../tokens/typography";
+
+[class^=pb_detail_kit]{
+  @include pb_detail;
+
+  @each $color_name, $color_value in $pb_detail_colors {
+    &[class*=_#{$color_name}] {
+      @include pb_detail($color_value);
+    }
+  }
+
+  @each $dark_color_name, $dark_color_value in $pb_dark_detail_colors{
+    &[class*=_#{$dark_color_name}][class*=dark]{
+      @include pb_detail($dark_color_value)
+    }
+  }
+
+  // Styles
+  &.bold,
+  &.bold.dark,
+  b,
+  strong {
+    font-weight: $bold;
+  }
+
+  a {
+    color: $primary;
+    &:hover {
+      cursor: pointer;
+      color: $text_lt_default;
+    }
+  }
+
+  em {
+    font-weight: $bold;
+  }
+
+  small {
+    font-size: $font_smaller;
+    letter-spacing: $lspace_loose;
+  }
+}

data/app/pb_kits/playbook/pb_detail/_detail.tsx

@@ -0,0 +1,55 @@
+import React from 'react'
+import classnames from 'classnames'
+import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
+import { globalProps, GlobalProps } from '../utilities/globalProps'
+
+type DetailProps = {
+  aria?: { [key: string]: string },
+  bold?: boolean,
+  children?: React.ReactChild[] | React.ReactChild,
+  className?: string,
+  color?: 'light' | 'default' | 'lighter' | 'link' | 'error' | 'success',
+  dark?: boolean,
+  data?: { [key: string]: string },
+  id?: string,
+  tag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'div',
+  text?: string,
+} & GlobalProps
+
+const Detail = (props: DetailProps) => {
+  const {
+    aria = {},
+    bold = false,
+    children,
+    className,
+    color = 'light',
+    data = {},
+    id = '',
+    tag = 'div',
+    text= ''
+  } = props
+
+  const ariaProps: {[key: string]: any} = buildAriaProps(aria)
+  const dataProps: {[key: string]: any} = buildDataProps(data)
+  const isBold = bold ? "bold" : null
+  const classes = classnames(
+    buildCss('pb_detail_kit', color),
+    isBold,
+    globalProps(props),
+    className
+  )
+  const Tag: React.ReactElement | any = `${tag}`
+
+  return (
+    <Tag
+        {...ariaProps}
+        {...dataProps}
+        className={classes}
+        id={id}
+    >
+      {text || children}
+    </Tag>
+  )
+}
+
+export default Detail

data/app/pb_kits/playbook/pb_detail/_detail_mixins.scss

@@ -0,0 +1,29 @@
+@import "../tokens/colors";
+@import "../tokens/line_height";
+@import "../tokens/typography";
+
+$pb_detail_colors: (
+  light:          $text_lt_light,
+  default:        $text_lt_default,
+  lighter:        $text_lt_lighter,
+  link:           $primary,
+  error:          $error,
+  success:        $text_lt_success_sm,
+);
+
+$pb_dark_detail_colors: (
+  light:          $text_dk_light,
+  default:        $text_dk_default,
+  lighter:        $text_dk_lighter,
+  link:           $primary,
+  error:          $error_dark,
+  success:        $text_dk_success_sm,
+);
+
+@mixin pb_detail($color: $text_lt_light) {
+  line-height: $lh_tight;
+  color: $color;
+  font-size: $text_small;
+  font-weight: $regular;
+  font-family: $font-family-base;
+}

data/app/pb_kits/playbook/pb_detail/detail.html.erb

@@ -0,0 +1,7 @@
+<%= content_tag(object.tag,
+    aria: object.aria,
+    class: object.classname,
+    data: object.data,
+    id: object.id) do %>
+  <%= object.content %>
+<% end %>

data/app/pb_kits/playbook/pb_detail/detail.rb

@@ -0,0 +1,31 @@
+# frozen_string_literal: true
+
+module Playbook
+  module PbDetail
+    class Detail < Playbook::KitBase
+      prop :bold, type: Playbook::Props::Boolean,
+                  default: false
+      prop :color, type: Playbook::Props::Enum,
+                   values: %w[light default lighter link error success],
+                   default: "light"
+      prop :tag, type: Playbook::Props::Enum,
+                 values: %w[h1 h2 h3 h4 h5 h6 p span div],
+                 default: "div"
+      prop :text
+
+      def classname
+        generate_classname("pb_detail_kit", color) + is_bold
+      end
+
+      def content
+        super.presence || text
+      end
+
+    private
+
+      def is_bold
+        bold ? " bold" : ""
+      end
+    end
+  end
+end

data/app/pb_kits/playbook/pb_detail/detail.test.jsx

@@ -0,0 +1,46 @@
+import React from 'react'
+import { render, screen } from '../utilities/test-utils'
+
+import Detail from './_detail'
+
+test('returns namespaced class name', () => {
+  render(
+    <Detail
+        data={{ testid: 'primary-test' }}
+        text="Test class name"
+    />
+  )
+
+  const kit = screen.getByTestId('primary-test')
+  expect(kit).toHaveClass('pb_detail_kit_light')
+})
+
+test('with colors', () => {
+  ['light', 'default', 'lighter', 'link', 'success', 'error'].forEach((color) => {
+    const testId = `colors-test-${color}`
+
+    render(
+      <Detail
+          color={color}
+          data={{ testid: testId }}
+          text="Test colors"
+      />
+    )
+
+    const kit = screen.getByTestId(testId)
+    expect(kit).toHaveClass(`pb_detail_kit_${color}`)
+  })
+})
+
+test('bold font-weight should be 600', () => {
+  render(
+    <Detail
+        bold
+        data={{ testid: 'primary-test' }}
+        text="Test bold prop"
+    />
+  )
+
+  const kit = screen.getByTestId('primary-test')
+  expect(kit).toHaveClass("bold")
+})

data/app/pb_kits/playbook/pb_detail/docs/_description.md

@@ -0,0 +1 @@
+Used for tables or designs with large amounts of data or text.

data/app/pb_kits/playbook/pb_detail/docs/_detail_bold.html.erb

@@ -0,0 +1,34 @@
+<%= pb_rails("detail", props: {
+  bold: true,
+  text: "I am a bold detail kit"
+}) %>
+
+<%= pb_rails("detail", props: {
+  bold: true,
+  color: "default",
+  text: "I am a bold detail kit"
+}) %>
+
+<%= pb_rails("detail", props: {
+  bold: true,
+  color: "lighter",
+  text: "I am a bold detail kit"
+}) %>
+
+<%= pb_rails("detail", props: {
+  bold: true,
+  color: "link",
+  text: "I am a bold detail kit"
+}) %>
+
+<%= pb_rails("detail", props: {
+  bold: true,
+  color: "error",
+  text: "I am a bold detail kit"
+}) %>
+
+<%= pb_rails("detail", props: {
+  bold: true,
+  color: "success",
+  text: "I am a bold detail kit"
+}) %>