playbook_ui 11.6.1.pre.alpha.rubocop.pre.performance1 → 11.7.0.pre.alpha.table1

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_picker/sass_partials/_flatpickr_styles.scss

@@ -659,9 +659,6 @@ span.flatpickr-weekday {
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
   overflow: hidden;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
 }
 .flatpickr-time:after {
   content: "";

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")
+    })
+
+
+})

data/app/pb_kits/playbook/pb_date_stacked/_date_stacked.tsx

@@ -0,0 +1,90 @@
+import React from "react";
+
+import classnames from "classnames";
+import DateTime from "../pb_kit/dateTime";
+import { buildCss, buildDataProps } from "../utilities/props";
+import { globalProps } from "../utilities/globalProps";
+
+import Caption from "../pb_caption/_caption";
+import Title from "../pb_title/_title";
+
+type DateStackedProps = {
+  align?: "left" | "center" | "right";
+  bold?: boolean;
+  className?: string | string[];
+  dark?: boolean;
+  data?: string;
+  date: string;
+  size?: "sm" | "md";
+  id?: string;
+  reverse?: boolean;
+};
+
+const sizes: {sm: 4, md: 3} = {
+  sm: 4,
+  md: 3,
+};
+
+const DateStacked = (props: DateStackedProps) => {
+  const {
+    align = "left",
+    bold = false,
+    reverse = false,
+    className,
+    dark = false,
+    date,
+    data={},
+    size = "sm",
+  } = props;
+  const classes = classnames(
+    buildCss("pb_date_stacked_kit", align, size, {
+      dark: dark,
+      reverse: reverse,
+    }),
+    globalProps(props),
+    className
+  );
+
+  const currentYear = new Date().getFullYear().toString();
+  const dateTimestamp = new DateTime({ value: date });
+  const inputYear = dateTimestamp.toYear().toString();
+  const dataProps = buildDataProps(data)
+
+  return (
+    <>
+      {bold == false ? (
+        <div {...dataProps} className={classes}>
+          <div className="pb_date_stacked_day_month">
+            <Caption text={dateTimestamp.toMonth().toUpperCase()} />
+            <Title
+              dark={dark}
+              size={sizes[size]}
+              text={dateTimestamp.toDay()}
+            />
+          </div>
+          {currentYear != inputYear && <Caption size="xs">{inputYear}</Caption>}
+        </div>
+      ) : (
+          <div {...dataProps} className={classes}>
+            <div className="pb_date_stacked_day_month">
+              <Title 
+                bold 
+                dark={dark} 
+                size="4" 
+                text={dateTimestamp.toMonth()} 
+              />
+              <Title 
+                bold 
+                dark={dark} 
+                size="4" 
+                text={dateTimestamp.toDay()} 
+              />
+              {currentYear != inputYear && <Title size="4">{inputYear}</Title>}
+            </div>
+          </div>
+      )}
+    </>
+  );
+};
+
+export default DateStacked;

data/app/pb_kits/playbook/pb_date_stacked/date_stacked.test.js

@@ -0,0 +1,151 @@
+import React from 'react'
+import { render, screen } from '../utilities/test-utils'
+
+import DateStacked from './_date_stacked'
+
+const TEST_DATE = "01/01/2020 00:00:000 GMT-0500";
+jest.setSystemTime(new Date(TEST_DATE));
+const futureDate = new Date(
+  new Date().getFullYear() - 4,
+  new Date().getMonth(),
+  new Date().getDate(),
+  new Date().getHours(),
+  new Date().getMinutes()
+);
+
+const testId = "datestacked-kit";
+
+describe("DateStacked Kit", () => {
+    test("renders DateStacked className", () => {
+        render(
+            <DateStacked
+                align="left"
+                data={{ testid: testId }}
+                date={new Date()}
+                size="sm"      
+            />
+        )
+
+        const kit = screen.getByTestId(testId)
+        expect(kit).toHaveClass("pb_date_stacked_kit_left_sm")
+    })
+
+    test("renders top text", () => {
+        render(
+            <DateStacked
+                align="left"
+                data={{ testid: testId }}
+                date={new Date()}
+                size="sm"      
+            />
+        )
+
+        const kit = screen.getByTestId(testId)
+        const text = kit.querySelector(".pb_caption_kit_md")
+        expect(text.textContent).toEqual("JAN")
+    })
+
+    test("renders bottom text", () => {
+        render(
+            <DateStacked
+                align="left"
+                data={{ testid: testId }}
+                date={new Date()}
+                size="sm"      
+            />
+        )
+
+        const kit = screen.getByTestId(testId)
+        const text = kit.querySelector(".pb_title_kit_size_4")
+        expect(text.textContent).toEqual("1")
+    })
+
+    test("renders correct size", () => {
+        render(
+            <DateStacked
+                align="left"
+                data={{ testid: testId }}
+                date={new Date()}
+                size="md"      
+            />
+        )
+
+        const kit = screen.getByTestId(testId)
+        expect(kit).toHaveClass("pb_date_stacked_kit_left_md")
+    })
+
+    test("renders year when non-current year", () => {
+        render(
+            <DateStacked
+                align="left"
+                data={{ testid: testId }}
+                date={futureDate}
+                size="sm"      
+            />
+        )
+
+        const kit = screen.getByTestId(testId)
+        const text = kit.querySelector(".pb_caption_kit_xs")
+        expect(text.textContent).toEqual("2016")
+    })
+
+    test("renders correct className when order reversed", () => {
+        render(
+            <DateStacked
+                align="left"
+                data={{ testid: testId }}
+                date={futureDate}
+                reverse
+                size="sm"      
+            />
+        )
+        const kit = screen.getByTestId(testId)
+        expect(kit).toHaveClass("pb_date_stacked_kit_left_sm_reverse")
+    })
+
+    test("renders bold prop", () => {
+        render(
+            <DateStacked
+                align="left"
+                bold
+                data={{ testid: testId }}
+                date={futureDate}
+                size="md"      
+            />
+        )
+
+        const kit = screen.getByTestId(testId)
+        const text = kit.querySelector(".pb_title_kit_size_4")
+        expect(text).toBeInTheDocument()
+    })
+
+    test("renders center alignment prop", () => {
+        render(
+            <DateStacked
+                align="center"
+                data={{ testid: testId }}
+                date={futureDate}
+                size="md"      
+            />
+        )
+
+        const kit = screen.getByTestId(testId)
+        expect(kit).toHaveClass("pb_date_stacked_kit_center_md")
+    })
+
+    test("renders right alignment prop", () => {
+        render(
+            <DateStacked
+                align="right"
+                data={{ testid: testId }}
+                date={futureDate}
+                size="md"      
+            />
+        )
+
+        const kit = screen.getByTestId(testId)
+        expect(kit).toHaveClass("pb_date_stacked_kit_right_md")
+    })
+
+
+})

data/app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_align.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import DateStacked from '../_date_stacked.jsx'
+import DateStacked from '../_date_stacked'
 
 const DateStackedAlign = (props) => {
   return (

data/app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_bold.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import DateStacked from '../_date_stacked.jsx'
+import DateStacked from '../_date_stacked'
 
 const DateStackedBold = (props) => {
   return (

data/app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_default.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import DateStacked from '../_date_stacked.jsx'
+import DateStacked from '../_date_stacked'
 
 const DateStackedDefault = (props) => {
   return (

data/app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_not_current_year.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import DateStacked from '../_date_stacked.jsx'
+import DateStacked from '../_date_stacked'
 
 const DateStackedNotCurrentYear = (props) => {
   return (

data/app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_reverse.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import DateStacked from '../_date_stacked.jsx'
+import DateStacked from '../_date_stacked'
 
 const DateStackedDefault = (props) => {
   return (

data/app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_sizes.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import DateStacked from '../_date_stacked.jsx'
+import DateStacked from '../_date_stacked'
 
 const DateStackedSizes = (props) => {
   return (

data/app/pb_kits/playbook/pb_dialog/{_close_icon.jsx → _close_icon.tsx}

@@ -1,10 +1,8 @@
-/* @flow */
-
 import React from 'react'
 import Icon from '../pb_icon/_icon'
 
 type CloseIconProps = {
-  onClose: () => mixed,
+  onClose: () => any,
 }
 
 export const CloseIcon = (props: CloseIconProps) => {