playbook_ui 11.7.0.pre.alpha.pre.guagechart1 → 11.7.0.pre.alpha.table1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: b3c15ebbe9a1fbfc39421f5a48270f09e9992eb440be598fd6913e9e24ed9afd
-  data.tar.gz: 813c6e5d1511ffc6a343afb19670c1ade1466802b2ac1d5447537f771861f3fd
+  metadata.gz: 5a597ccc53d17f5143937b374fde05737a395b7a51779710084e0686a1379474
+  data.tar.gz: 3edde9b9509bf7ffe7fe91c3c2d68896e2d0896472b5586cc61603ec11b7a132
 SHA512:
-  metadata.gz: 10c3cae3f5fb56ee7cf2f4c3f663902c9af9d9126aae1da0901b5a26fb8f1612dc404cf352d2f2ba4cfe09c3f91eab740c566581d99773cc5de38cc72c772d2a
-  data.tar.gz: bfad6320a42c988dfec679e35737390a16e09be1b5b07cf0aa7617e452c971b1f63539a60c62e592e08695c081787c05885cd1150c04e6c950099ca24749700f
+  metadata.gz: 169d37b8fcd4ec92d6b6ddc37f1e10f70f605b0a52f1a056801f35d8efc0a7b582e4f80a8b7b11587a5e85edec1a17c64b8d9b4c0efde3e4e8be2dc38b812332
+  data.tar.gz: eb144e741e4eabddc61bed50ebc2bc0d81eae1908d9e2505737239830cb352f865a2aa0e53d519996a8b8278296a370ac689b45444821ad371229ba119c2a068

data/app/pb_kits/playbook/index.js

@@ -115,7 +115,7 @@ export { default as dashboardValueSettings } from './pb_dashboard_value/dashboar
 
 // Other JS/Plugins
 export { default as pbChart } from './plugins/pb_chart.js'
-export { default as datePickerHelper } from './pb_date_picker/date_picker_helper.js'
+export { default as datePickerHelper } from './pb_date_picker/date_picker_helper'
 export { default as PbPopover } from './pb_popover'
 export { default as PbTable } from './pb_table'
 export { default as PbTextarea } from './pb_textarea'

data/app/pb_kits/playbook/pb_date_picker/{_date_picker.jsx → _date_picker.tsx}

@@ -1,10 +1,8 @@
-/* @flow */
-
 import React, { useEffect } from 'react'
 import classnames from 'classnames'
 
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
-import { deprecatedProps, globalProps } from '../utilities/globalProps'
+import { deprecatedProps, globalProps, GlobalProps } from '../utilities/globalProps'
 
 import datePickerHelper from './date_picker_helper'
 
@@ -12,46 +10,42 @@ import Icon from '../pb_icon/_icon'
 import TextInput from '../pb_text_input/_text_input'
 
 type DatePickerProps = {
-  allowInput?: Boolean,
-  aria?: object,
-  className?: String,
-  dark?: Boolean,
+  allowInput?: boolean,
+  aria?: {[key: string]: string},
+  className?: string,
+  dark?: boolean,
   data?: object,
-  defaultDate?: String,
-  disableDate?: Array,
-  disableInput?: Boolean,
-  disableRange?: Array,
-  disableWeekdays?: Array,
-  enableTime?: Boolean,
-  error?: String,
-  format?: String,
-  hideIcon?: Boolean,
-  hideLabel?: Boolean,
-  id?: String,
-  inLine?: Boolean,
+  defaultDate?: string,
+  disableDate?: number[],
+  disableInput?: boolean,
+  disableRange?: number[],
+  disableWeekdays?: number[],
+  enableTime?: boolean,
+  error?: string,
+  format?: string,
+  hideIcon?: boolean,
+  hideLabel?: boolean,
+  id?: string,
+  inLine?: boolean,
   inputAria?: object,
   inputData?: object,
-  inputOnChange?: (String) => void,
+  inputOnChange?: (arg: string) => void,
   inputValue?: any,
-  label?: String,
-  maxDate: String,
-  minDate: String,
-  mode?: String,
-  name: String,
-  onChange: (String) => void,
-  pickerId?: String,
-  placeholder?: String,
-  plugins: Boolean,
-  position: String,
+  label?: string,
+  maxDate: string,
+  minDate: string,
+  name: string,
+  pickerId?: ArrayLike<Node> | Node | string,
+  placeholder?: string,
   positionElement?: HTMLElement | null,
-  scrollContainer?: String,
+  scrollContainer?: string,
   selectionType?: "month" | "week",
-  showTimezone?: Boolean,
-  staticPosition: Boolean,
-  timeFormat?: String,
-  type?: String,
-  yearRange?: Array,
-}
+  showTimezone?: boolean,
+  staticPosition: boolean,
+  timeFormat?: string,
+  type?: string,
+  yearRange?: number[],
+} & GlobalProps
 
 const DatePicker = (props: DatePickerProps) => {
   if (props.plugins) deprecatedProps('Date Picker', ['plugins'])
@@ -128,6 +122,7 @@ const DatePicker = (props: DatePickerProps) => {
       showTimezone,
       staticPosition,
       yearRange,
+      required: false,
     }, scrollContainer)
   })
 
@@ -168,38 +163,35 @@ const DatePicker = (props: DatePickerProps) => {
             value={inputValue}
         />
 
-        <If condition={!hideIcon}>
+        {!hideIcon &&
           <div
-              className={iconWrapperClass()}
-              id={`cal-icon-${pickerId}`}
-          >
-            <Icon
-                className="cal_icon"
-                icon="calendar-alt"
-            />
-          </div>
-        </If>
+          className={iconWrapperClass()}
+          id={`cal-icon-${pickerId}`}
+      >
+        <Icon
+            className="cal_icon"
+            icon="calendar-alt"
+        />
+      </div>
+        }
+          
 
-        <If condition={hideIcon && inLine}>
-          <div
-              className={iconWrapperClass()}
-              id={`${pickerId}-icon-plus`}
-          >
-            <Icon
-                className="date-picker-plus-icon"
-                icon="plus"
-            />
-          </div>
-          <div
-              className={iconWrapperClass()}
-              id={`${pickerId}-angle-down`}
-          >
+        { hideIcon && inLine ? <><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>
-        </If>
+              className="angle_down_icon"
+              icon="angle-down" />
+          </div></> : null}
+          
 
       </div>
     </div>

data/app/pb_kits/playbook/pb_date_picker/{date_picker_helper.js → date_picker_helper.ts}

@@ -1,13 +1,32 @@
 import flatpickr from 'flatpickr'
+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'
 
-const getPositionElement = (element) => {
+const getPositionElement = (element: string | Element) => {
   return (typeof element === 'string') ? document.querySelectorAll(element)[0] : element
 }
 
-const datePickerHelper = (config, scrollContainer) => {
+type DatePickerConfig = {
+  disableDate?: number[],
+  disableRange?: number[],
+  disableWeekdays?: number[],
+  format?: string,
+  pickerId?: ArrayLike<Node> | Node | string,
+  required: boolean,
+  hideIcon?: boolean;
+  inLine?: boolean,
+  onChange: (dateStr: string, selectedDates: Date[]) => void,
+  selectionType?: "month" | "week" | "",
+  showTimezone?: boolean,
+  staticPosition: boolean,
+  timeCaption?: string,
+  timeFormat?: string,
+  yearRange: number[]
+} & Pick<BaseOptions, "allowInput" | "defaultDate" | "enableTime" | "maxDate" | "minDate" | "mode" | "plugins" | "position" | "positionElement" >
+
+const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HTMLElement) => {
   const {
     allowInput,
     defaultDate,
@@ -54,9 +73,9 @@ const datePickerHelper = (config, scrollContainer) => {
     }
   }
   const calendarResizer = () => {
-    const cal = document.querySelector(`#cal-${pickerId}.open`)
+    const cal = document.querySelector(`#cal-${pickerId}.open`) as HTMLElement
     const parentInput = cal.parentElement
-    if (cal.getBoundingClientRect().right > window.innerWidth) {
+    if (cal?.getBoundingClientRect().right > window.innerWidth) {
       parentInput.style.display = 'flex'
       parentInput.style.justifyContent = 'center'
     }
@@ -70,10 +89,10 @@ const datePickerHelper = (config, scrollContainer) => {
     let pluginList = []
 
     // month and week selection
-    if (selectionType === "month" || plugins === true) {
+    if (selectionType === "month" || plugins.length > 0) {
       pluginList.push(monthSelectPlugin({ shorthand: true, dateFormat: 'F Y', altFormat: 'F Y' }))
     } else if ( selectionType === "week") {
-      pluginList.push(weekSelect({}))
+      pluginList.push(weekSelect())
     }
 
     // time selection
@@ -96,7 +115,9 @@ const datePickerHelper = (config, scrollContainer) => {
     defaultDate: defaultDateGetter(),
     disable: disableWeekdays && disableWeekdays.length > 0 ? [
       (date) => {
-        const weekdayObj = {
+        const weekdayObj: {
+          [day: string]: number
+        } = {
           Sunday: 0,
           Monday: 1,
           Tuesday: 2,
@@ -128,7 +149,7 @@ const datePickerHelper = (config, scrollContainer) => {
     }],
     onClose: [() => {
       window.removeEventListener('resize', calendarResizer)
-      if (!staticPosition && scrollContainer) detachFromScroll(scrollContainer)
+      if (!staticPosition && scrollContainer) detachFromScroll(scrollContainer as HTMLElement)
     }],
     onChange: [(selectedDates, dateStr) => {
       onChange(dateStr, selectedDates)
@@ -148,18 +169,18 @@ const datePickerHelper = (config, scrollContainer) => {
   // ===========================================================
 
   // Assign dynamically sourced flatpickr instance to variable
-  const picker = document.querySelector(`#${pickerId}`)._flatpickr
+  const picker = document.querySelector<HTMLElement & { [x: string]: any }>(`#${pickerId}`)._flatpickr
   picker.innerContainer.parentElement.id = `cal-${pickerId}`
 
   // Attach / detach to / from scroll events
   const scrollEvent = () => {
     picker._positionCalendar()
   }
-  function attachToScroll(scrollParent) {
-    document.querySelectorAll(scrollParent)[0]?.addEventListener("scroll", scrollEvent, { passive: true })
+  function attachToScroll(scrollParent: string | HTMLElement) {
+    document.querySelectorAll(scrollParent as string)[0]?.addEventListener("scroll", scrollEvent, { passive: true })
   }
-  function detachFromScroll(scrollParent = document.body) {
-    document.querySelectorAll(scrollParent)[0]?.removeEventListener("scroll", scrollEvent)
+  function detachFromScroll(scrollParent: string | HTMLElement = document.body) {
+    document.querySelectorAll(scrollParent as string)[0]?.removeEventListener("scroll", scrollEvent)
   }
 
   // replace year selector with dropdown
@@ -172,14 +193,14 @@ const datePickerHelper = (config, scrollContainer) => {
   }
 
   // variablize each dropdown selector
-  const dropdown = document.querySelector(`#year-${pickerId}`)
+  const dropdown = document.querySelector<HTMLElement & { [x: string]: any }>(`#year-${pickerId}`)
 
   // inject year options into dropdown and assign it the flatpickr's current year value
   dropdown.innerHTML = years
   dropdown.value = picker.currentYear
 
   // whenever a new year is selected from dropdown update flatpickr's current year value
-  dropdown.addEventListener('input', (e) => {
+  dropdown.addEventListener('input', (e: Event & { target: { value: string}}) => {
     picker.changeYear(Number(e.target.value))
   })
 
@@ -219,7 +240,7 @@ const datePickerHelper = (config, scrollContainer) => {
   }
   if (required){
     picker.input.removeAttribute('readonly')
-    picker.input.addEventListener('keydown', (e) => e.preventDefault())
+    picker.input.addEventListener('keydown', (e: Event) => e.preventDefault())
     picker.input.style.caretColor = 'transparent'
     picker.input.style.cursor = 'pointer'
   }

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

@@ -0,0 +1,171 @@
+type FpTypes = {
+  amPM?: { style: { display: string } };
+  selectedDates: string | any[];
+  setDate: (arg0: any, arg1: boolean) => void;
+  input: { id: any };
+  timeContainer?: {
+    classList: { add: (arg0: string) => void };
+    prepend: (arg0: HTMLDivElement) => void;
+    append: (arg0: HTMLDivElement) => void;
+  };
+  minuteElement?: { step: string };
+  _initialDate: {
+    toLocaleDateString: (
+      arg0: string,
+      arg1: { day: string; timeZoneName: string }
+    ) => string | any[];
+  };
+  loadedPlugins: string[];
+};
+
+export const getTimezoneText = (inputDate: {
+  toLocaleDateString: (
+    arg0: string,
+    arg1: { day: string; timeZoneName: string }
+  ) => string | any[];
+}) => {
+  const tzAbbr = inputDate
+    .toLocaleDateString("en-US", {
+      day: "2-digit",
+      timeZoneName: "short",
+    })
+    .slice(4);
+  const tzText = inputDate
+    .toLocaleDateString("en-US", {
+      day: "2-digit",
+      timeZoneName: "long",
+    })
+    .slice(4);
+  return `${tzAbbr} (${tzText})`;
+};
+
+function timeSelectPlugin(props: { caption: string; showTimezone: boolean }) {
+  return function (fp: FpTypes) {
+    const generateMeridiemCard = (text: string) => {
+      const selectableCard = document.createElement("div");
+      selectableCard.className = "pb_selectable_card_kit_enabled";
+
+      const cardInput = document.createElement("input"),
+        cardInputId = `datePicker${text}`;
+
+      cardInput.id = cardInputId;
+      cardInput.name = "datepicker-ampm";
+      cardInput.type = "radio";
+      cardInput.value = text;
+
+      const cardLabel = document.createElement("label"),
+        cardLabelBuffer = document.createElement("div");
+      cardLabel.className = `label-${text.toLowerCase()}`;
+      cardLabel.setAttribute("for", cardInputId);
+      cardLabelBuffer.className = "buffer";
+      cardLabelBuffer.innerHTML = text;
+
+      cardLabel.append(cardLabelBuffer);
+      selectableCard.prepend(cardInput);
+      selectableCard.append(cardLabel);
+
+      return selectableCard;
+    };
+
+    const generateMeridiemToggle = () => {
+      fp.amPM.style.display = "none";
+      const formGroupKit = document.createElement("div");
+      formGroupKit.className = "pb_form_group_kit";
+
+      const amCard = generateMeridiemCard("AM");
+      amCard.addEventListener("click", () => {
+        fp.selectedDates[0].setHours(
+          (fp.selectedDates[0].getHours() % 12) + 12 * 0
+        );
+        fp.setDate(fp.selectedDates[0], true);
+      });
+
+      const pmCard = generateMeridiemCard("PM");
+      pmCard.addEventListener("click", () => {
+        fp.selectedDates[0].setHours(
+          (fp.selectedDates[0].getHours() % 12) + 12 * 1
+        );
+        fp.setDate(fp.selectedDates[0], true);
+      });
+
+      formGroupKit.prepend(amCard);
+      formGroupKit.append(pmCard);
+
+      const meridiemContainer = document.createElement("div");
+      meridiemContainer.className = "meridiem";
+      meridiemContainer.append(formGroupKit);
+      document.querySelector(".pb_time_selection").append(meridiemContainer);
+    };
+
+    const getMeridiem = (dateObj: string | any[]) => {
+      return dateObj[0].getHours() < 12 ? "AM" : "PM";
+    };
+
+    const updateMeridiemToggle = (forceClick: boolean) => {
+      if (!fp.selectedDates.length) return;
+
+      const uncheckedClass = "pb_selectable_card_kit_enabled",
+        checkedClass = "pb_selectable_card_kit_checked_enabled",
+        pickerAM: HTMLElement & { [x: string]: any } =
+          document.getElementById("datePickerAM"),
+        pickerPM: HTMLElement & { [x: string]: any } =
+          document.getElementById("datePickerPM"),
+        meridiem = getMeridiem(fp.selectedDates);
+
+      if (forceClick) {
+        pickerAM.checked = false;
+        pickerPM.checked = false;
+        pickerPM.checked = meridiem === "PM";
+        pickerAM.checked = meridiem === "AM";
+      }
+
+      if (meridiem === "PM") {
+        pickerPM.parentElement.className = checkedClass;
+        pickerAM.parentElement.className = uncheckedClass;
+      } else if (meridiem === "AM") {
+        pickerAM.parentElement.className = checkedClass;
+        pickerPM.parentElement.className = uncheckedClass;
+      }
+    };
+
+    return {
+      onValueUpdate() {
+        updateMeridiemToggle(true);
+      },
+      onReady() {
+        const id = fp.input.id;
+
+        if (!id || !fp?.timeContainer) return;
+
+        fp.timeContainer.classList.add("pb_time_selection");
+
+        // allow single minutes
+        fp.minuteElement.step = "1";
+
+        // add caption text
+        if (props.caption) {
+          const captionContainer = document.createElement("div");
+          captionContainer.className = "pb_caption_kit_md";
+          captionContainer.innerHTML = props?.caption;
+          fp.timeContainer.prepend(captionContainer);
+        }
+
+        // add meridiem toggle
+        generateMeridiemToggle();
+        updateMeridiemToggle(true);
+
+        // add timezone text
+        if (props.showTimezone) {
+          const subcaptionContainer = document.createElement("div");
+          subcaptionContainer.className = "pb_caption_kit_xs";
+          subcaptionContainer.innerHTML = getTimezoneText(fp._initialDate);
+          fp.timeContainer.append(subcaptionContainer);
+        }
+
+        fp.loadedPlugins.push("timeSelectPlugin");
+      },
+    };
+  };
+}
+
+export default timeSelectPlugin;

data/app/pb_kits/playbook/pb_date_range_stacked/{_date_range_stacked.jsx → _date_range_stacked.tsx}

@@ -1,9 +1,7 @@
-/* @flow */
-
 import React from 'react'
 import classnames from 'classnames'
 
-import { buildCss } from '../utilities/props'
+import { buildCss, buildDataProps } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps'
 
 import Body from '../pb_body/_body'
@@ -13,7 +11,7 @@ import DateYearStacked from '../pb_date_year_stacked/_date_year_stacked'
 import Icon from '../pb_icon/_icon'
 
 type DateRangeStackedProps = {
-  className?: string | array<string>,
+  className?: string | string[],
   data?: string,
   dark?: boolean,
   endDate: string,
@@ -22,15 +20,16 @@ type DateRangeStackedProps = {
 }
 
 const DateRangeStacked = (props: DateRangeStackedProps) => {
-  const { className, dark = false, endDate, startDate } = props
+  const { className, dark = false, endDate, startDate, data={} } = props
   const css = classnames(
     buildCss('pb_date_range_stacked'),
     globalProps(props),
     className
   )
+  const dataProps = buildDataProps(data)
 
   return (
-    <div className={css}>
+    <div {...dataProps} className={css}>
       <Flex vertical="center">
         <FlexItem>
           <DateYearStacked

data/app/pb_kits/playbook/pb_date_range_stacked/date_range_stacked.test.js

@@ -0,0 +1,127 @@
+import React from 'react'
+import { render, screen } from '../utilities/test-utils'
+
+import DateRangeStacked from './_date_range_stacked'
+
+jest.useFakeTimers()
+const testId = "daterangestacked-kit";
+
+describe("DateRangeStacked Kit", () => {
+    test("renders DateRangeStacked className", () => {
+        render(
+            <DateRangeStacked
+                data={{ testid: testId }}
+                endDate={new Date('20 Mar 2020')}
+                startDate={new Date('18 Jun 2019')}
+            />
+        )
+
+        const kit = screen.getByTestId(testId)
+        expect(kit).toHaveClass("pb_date_range_stacked")
+    })
+
+    test("renders DateRangeStacked start date container", () => {
+        render(
+            <DateRangeStacked
+                data={{ testid: testId }}
+                endDate={new Date('20 Mar 2020')}
+                startDate={new Date('18 Jun 2019')}
+            />
+        )
+
+        const kit = screen.getByTestId(testId)
+        const text = kit.querySelector('.pb_date_year_stacked_right')
+        expect(text).toBeInTheDocument()
+    })
+
+    test("renders DateRangeStacked end date container", () => {
+        render(
+            <DateRangeStacked
+                data={{ testid: testId }}
+                endDate={new Date('20 Mar 2020')}
+                startDate={new Date('18 Jun 2019')}
+            />
+        )
+
+        const kit = screen.getByTestId(testId)
+        const text = kit.querySelector('.pb_date_year_stacked_left')
+        expect(text).toBeInTheDocument()
+    })
+
+    test("renders arrow icon", () => {
+        render(
+            <DateRangeStacked
+                data={{ testid: testId }}
+                endDate={new Date('20 Mar 2020')}
+                startDate={new Date('18 Jun 2019')}
+            />
+        )
+
+        const kit = screen.getByTestId(testId)
+        const arrowicon = kit.querySelector('.pb_icon_kit.fa-fw.pb_date_range_stacked_arrow')
+        expect(arrowicon).toBeInTheDocument()
+    })
+
+
+    test("renders DateRangeInline start date", () => {
+        render(
+            <DateRangeStacked
+                data={{ testid: testId }}
+                endDate={new Date('20 Mar 2020')}
+                startDate={new Date('18 Jun 2019')}
+            />
+
+        )
+
+        const kit = screen.getByTestId(testId)
+        const text = kit.querySelector('.pb_date_year_stacked_right>.pb_title_kit_size_4')
+        expect(text.textContent).toEqual("18 JUN")
+    })
+
+    test("renders DateRangeInline start date year", () => {
+        render(
+            <DateRangeStacked
+                data={{ testid: testId }}
+                endDate={new Date('20 Mar 2020')}
+                startDate={new Date('18 Jun 2019')}
+            />
+
+        )
+
+        const kit = screen.getByTestId(testId)
+        const text = kit.querySelector(".pb_date_year_stacked_right>.pb_body_kit_light")
+        expect(text.textContent).toEqual("2019")
+    })
+
+    test("renders DateRangeInline end date", () => {
+        render(
+            <DateRangeStacked
+                data={{ testid: testId }}
+                endDate={new Date('20 Mar 2020')}
+                startDate={new Date('18 Jun 2019')}
+            />
+
+        )
+
+        const kit = screen.getByTestId(testId)
+        const text = kit.querySelector('.pb_date_year_stacked_left>.pb_title_kit_size_4')
+        expect(text.textContent).toEqual("20 MAR")
+    })
+
+    test("renders DateRangeInline end date year", () => {
+        render(
+            <DateRangeStacked
+                data={{ testid: testId }}
+                endDate={new Date('20 Mar 2020')}
+                startDate={new Date('18 Jun 2019')}
+            />
+
+        )
+
+        const kit = screen.getByTestId(testId)
+        const text = kit.querySelector(".pb_date_year_stacked_left>.pb_body_kit_light")
+        expect(text.textContent).toEqual("2020")
+    })
+
+
+})