playbook_ui 12.39.0 → 13.0.0.pre.alpha.PLAY966collapsiblenav41126

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 4474115903d0053dd049ba1fce7b6d33f1be8490a518e49a9422acf83427a6b0
-  data.tar.gz: 3b6259cc14efe5dbcc98c8cd23ca8d8befa087e6c1751c8062f4aa97b946b1aa
+  metadata.gz: ef5b8148534fcbf48ac52ba770e58098903388c1dc4ce464942e24f8040e3c8b
+  data.tar.gz: 1d531d6e7d387766082aad0cad62919458b6fe29156978dda1bf9a5ac4bf9f55
 SHA512:
-  metadata.gz: be41e2bcd1e5eee5501a8142c22a6326f980baa0e9e6f939ee67330f56d478ccf92b390e4a59261a37daf69898611f6e30905e2a733efcc17115f2b03a2b22c1
-  data.tar.gz: 4630db5119496f55cf137a925dd54a989947fd9ae914d5574c4014082f9ff2f99bb2141e7ac73564ec5c5487cde472c796f09ffd61e1d6ddf7511ed6ed64e1d2
+  metadata.gz: 66f21574ca6d7f574cfdbd5e668e3864406ecf6a0deaa31be8d4d9dbfa46f542080bbad77000f1494341704be10de927cef400d2997d2c0967f61865932c21de
+  data.tar.gz: 54a928e4a732a060712c8c319561b2e73a011959233c04df4c14b15af18de4ebadbf02136dafdf5dc14132a35e8e4121a933d6dc609be1ac494e71538065b5d6

data/app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleMain.tsx

@@ -104,7 +104,7 @@ const CollapsibleMain = ({
   }
 
   return (
-    <div className={classnames(mainCSS, className, mainSpacing)}>
+    <div className={classnames(mainCSS, mainSpacing, className)}>
       <div onClick={handleCollapsibleClick}>
         <Flex
             spacing="between"

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

@@ -1,16 +1,26 @@
 /* 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'
+import DateTime from "../pb_kit/dateTime.ts"
 import { getTimezoneText } from './plugins/timeSelect'
 
-
-
 jest.setSystemTime(new Date('01/01/2020'));
 const DEFAULT_DATE = new Date()
 
+const formatDate = (date) => {
+  const month = (date.getMonth() + 1).toString().padStart(2, "0")
+  const day = (date.getDate()).toString().padStart(2, "0")
+  const year = date.getFullYear()
+
+  return `${month}/${day}/${year}`
+}
+
+Date.prototype.formatDate = function () {
+  return formatDate(this)
+}
+
 describe('DatePicker Kit', () => {
   beforeEach(() => {
     jest.spyOn(console, 'error').mockImplementation(() => { });
@@ -158,6 +168,7 @@ 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(
@@ -197,10 +208,10 @@ describe('DatePicker Kit', () => {
     )
 
     await waitFor(() => {
-      expect(input).toHaveValue(moment().startOf('year').format('MM/DD/YYYY') + " to " + moment().endOf('year').format('MM/DD/YYYY'))
+      expect(input).toHaveValue(DateTime.getYearStartDate(new Date()).formatDate() + " to " + DateTime.getYearEndDate(new Date()).formatDate())
     })
-
   })
+
   test('shows DatePicker QuickPick ranges ending today', async () => {
     const testId = 'datepicker-quick-pick-ends-today'
     render(
@@ -225,7 +236,7 @@ describe('DatePicker Kit', () => {
         cancelable: true,
       }),
     )
-    
+
     const thisYear = within(kit).getByText('This year')
 
     fireEvent(
@@ -237,8 +248,7 @@ describe('DatePicker Kit', () => {
     )
 
     await waitFor(() => {
-      expect(input).toHaveValue(moment().startOf('year').format('MM/DD/YYYY') + " to " + moment().format('MM/DD/YYYY'))
+      expect(input).toHaveValue(DateTime.getYearStartDate(new Date()).formatDate() + " to " + new Date().formatDate())
     })
-
   })
 })

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

@@ -1,4 +1,4 @@
-import moment from 'moment'
+import DateTime from '../../pb_kit/dateTime';
 
 type FpTypes = {
   setDate: (arg0: any, arg1: boolean) => void,
@@ -23,37 +23,44 @@ 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()
+    const today = new Date()
+    const yesterday = DateTime.getYesterdayDate(new Date())
+
+    const thisWeekStartDate = DateTime.getFirstDayOfWeek(new Date())
+    const thisWeekEndDate = thisRangesEndToday ? new Date() : DateTime.getLastDayOfWeek(new Date())
+    const lastWeekStartDate = DateTime.getPreviousWeekStartDate(new Date())
+    const lastWeekEndDate = DateTime.getPreviousWeekEndDate(new Date())
+
+    const thisMonthStartDate = DateTime.getMonthStartDate(new Date())
+    const thisMonthEndDate = thisRangesEndToday ? new Date() : DateTime.getMonthEndDate(new Date())
+    const lastMonthStartDate = DateTime.getPreviousMonthStartDate(new Date())
+    const lastMonthEndDate = DateTime.getPreviousMonthEndDate(new Date())
+
+    const thisQuarterStartDate = DateTime.getQuarterStartDate(new Date())
+    const thisQuarterEndDate = thisRangesEndToday ? new Date() : DateTime.getQuarterEndDate(new Date())
+    const lastQuarterStartDate = DateTime.getPreviousQuarterStartDate(new Date())
+    const lastQuarterEndDate = DateTime.getPreviousQuarterEndDate(new Date())
+
+    const thisYearStartDate = DateTime.getYearStartDate(new Date())
+    const thisYearEndDate = thisRangesEndToday ? new Date() : DateTime.getYearEndDate(new Date())
+    const lastYearStartDate = DateTime.getPreviousYearStartDate(new Date())
+    const lastYearEndDate = DateTime.getPreviousYearEndDate(new Date())
 
     // 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()
-      ]
+      'Today': [today, today],
+      'Yesterday': [yesterday, yesterday],
+      'This week': [thisWeekStartDate, thisWeekEndDate],
+      'This month': [thisMonthStartDate, thisMonthEndDate],
+      'This quarter': [thisQuarterStartDate, thisQuarterEndDate],
+      'This year': [thisYearStartDate, thisYearEndDate],
+      'Last week': [lastWeekStartDate, lastWeekEndDate],
+      'Last month': [lastMonthStartDate, lastMonthEndDate],
+      'Last quarter': [lastQuarterStartDate, lastQuarterEndDate],
+      'Last year': [lastYearStartDate, lastYearEndDate]
     }
-    //creating the ul element for the nav dropdown and giving it classnames
+
+    // 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
@@ -64,11 +71,11 @@ const quickPickPlugin = (thisRangesEndToday: boolean) => {
     };
 
     /**
-   *    @param {string} label
-   *    @returns HTML Element
-   */
+      * @param {string} label
+      * @returns HTML Element
+      */
 
-    //function for creating the range buttons in the nav
+    // function for creating the range buttons in the nav
     const addRangeButton = (label: string) => {
 
       // creating new elements to mimick selectable card component
@@ -88,7 +95,7 @@ const quickPickPlugin = (thisRangesEndToday: boolean) => {
       // append the li item to the ul rangeNav prop
       pluginData.rangesNav.appendChild(item);
 
-      // return the ranges buton prop
+      // return the ranges button prop
       return pluginData.rangesButtons[label];
     };
 
@@ -98,7 +105,7 @@ const quickPickPlugin = (thisRangesEndToday: boolean) => {
       if (current) {
         current.classList.remove('active');
       }
-     
+
       if (selectedDates.length > 0 && activeLabel) {
         pluginData.rangesButtons[activeLabel].classList.add('active');
       }
@@ -109,16 +116,15 @@ const quickPickPlugin = (thisRangesEndToday: boolean) => {
         selectedDates[1].toDateString() === pluginData.ranges[activeLabel][1].toDateString()
     }
 
-
     return {
-      // onReady is a hook from flatpickr that runs when calender is in a ready state
+      // onReady is a hook from flatpickr that runs when calendar is in a ready state
       onReady(selectedDates: Array<Date>) {
         // 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();
+            const start = new Date(range[0]);
+            const end = new Date(range[1]);
 
             if (!start) {
               fp.clear();
@@ -170,4 +176,4 @@ const quickPickPlugin = (thisRangesEndToday: boolean) => {
   };
 }
 
-export default quickPickPlugin;
+export default quickPickPlugin;

data/app/pb_kits/playbook/pb_kit/dateTime.ts

@@ -116,7 +116,6 @@ export const toIso = (newDate: Date | string): string => {
 }
 
 export const fromNow = (newDate: Date | string): string => {
-
   const startDate = formatDate(newDate).getTime()
   const endDate = new Date().getTime()
   const elapsedTime = endDate - startDate
@@ -154,6 +153,193 @@ export const toCustomFormat = (newDate: Date | string, format = 'month_day'): st
   }
 }
 
+// For quickPick.tsx
+// Yesterday
+export const getYesterdayDate = (newDate: Date | string): Date => {
+  const today = formatDate(newDate)
+  const yesterday = new Date()
+  yesterday.setDate(today.getDate() - 1)
+
+  return yesterday
+}
+
+// Weeks
+export const getFirstDayOfWeek = (newDate: Date | string): Date => {
+  const today = formatDate(newDate)
+  const dayOfWeek = today.getDay()
+  // Replicate Moment.js: Start of week (Monday) has a time of 00:00:00
+  const firstDayOfWeek = new Date(today.setHours(0, 0, 0))
+  const isSunday = dayOfWeek === 0
+
+  const daysToSubtract = isSunday ? 6 : (dayOfWeek - 1)
+  firstDayOfWeek.setDate(today.getDate() - daysToSubtract)
+
+  return firstDayOfWeek
+}
+
+export const getLastDayOfWeek = (newDate: Date | string): Date => {
+  const today = formatDate(newDate)
+  const dayOfWeek = today.getDay()
+  // Replicate Moment.js: End of week (Sunday) has a time of 23:59:59
+  const lastDayOfWeek = new Date(today.setHours(23, 59, 59, 0))
+  const isSunday = dayOfWeek === 0
+
+  const daysToAdd = isSunday ? 0 : (7 - dayOfWeek)
+  lastDayOfWeek.setDate(today.getDate() + daysToAdd)
+
+  return lastDayOfWeek
+}
+
+export const getPreviousWeekStartDate = (newDate: Date | string): Date => {
+  const firstDayOfWeek = getFirstDayOfWeek(newDate)
+  const firstDayOfPreviousWeek = new Date(
+    firstDayOfWeek.getFullYear(),
+    firstDayOfWeek.getMonth(),
+    firstDayOfWeek.getDate() - 7
+  )
+
+  return firstDayOfPreviousWeek
+}
+
+export const getPreviousWeekEndDate = (newDate: Date | string): Date => {
+  const lastDayOfWeek = getLastDayOfWeek(newDate)
+  const lastDayOfPreviousWeek = new Date(
+    lastDayOfWeek.getFullYear(),
+    lastDayOfWeek.getMonth(),
+    lastDayOfWeek.getDate() - 7,
+    lastDayOfWeek.getHours(),
+    lastDayOfWeek.getMinutes(),
+    lastDayOfWeek.getSeconds()
+  )
+
+  return lastDayOfPreviousWeek
+}
+
+// Months
+export const getMonthStartDate = (newDate: Date | string): Date => {
+  const date = formatDate(newDate)
+  const firstDayOfMonth = new Date(date.getFullYear(), date.getMonth(), 1)
+
+  return firstDayOfMonth
+}
+
+export const getMonthEndDate = (newDate: Date | string): Date => {
+  const date = formatDate(newDate)
+  // Replicate Moment.js: End of month has a time of 23:59:59
+  const lastDayOfMonth = new Date(date.getFullYear(), date.getMonth() + 1, 0, 23, 59, 59)
+
+  return lastDayOfMonth
+}
+
+export const getPreviousMonthStartDate = (newDate: Date | string): Date => {
+  const firstDayOfMonth = getMonthStartDate(newDate)
+  const firstDayOfPreviousMonth = new Date(
+    firstDayOfMonth.getFullYear(),
+    firstDayOfMonth.getMonth() - 1,
+    firstDayOfMonth.getDate()
+  )
+
+  return firstDayOfPreviousMonth
+}
+
+export const getPreviousMonthEndDate = (newDate: Date | string): Date => {
+  const lastDayOfMonth = getMonthEndDate(newDate)
+  const lastDayOfPreviousMonth = new Date(
+    lastDayOfMonth.getFullYear(),
+    lastDayOfMonth.getMonth() - 1,
+    lastDayOfMonth.getDate(),
+    lastDayOfMonth.getHours(),
+    lastDayOfMonth.getMinutes(),
+    lastDayOfMonth.getSeconds()
+  )
+
+  return lastDayOfPreviousMonth
+}
+
+// Quarters
+export const getQuarterStartDate = (newDate: Date | string): Date => {
+  const date = formatDate(newDate)
+  const quarter = Math.floor(date.getMonth() / 3)
+  const startOfQuarter = new Date(date.getFullYear(), quarter * 3, 1)
+
+  return startOfQuarter
+}
+
+export const getQuarterEndDate = (newDate: Date | string): Date => {
+  const date = formatDate(newDate)
+  const quarter = Math.floor(date.getMonth() / 3)
+  const startOfNextQuarter = new Date(date.getFullYear(), (quarter + 1) * 3, 1)
+  // Replicate Moment.js: End of quarter has a time of 23:59:59
+  const endOfQuarter = new Date(startOfNextQuarter.getTime() - 1)
+
+  return endOfQuarter
+}
+
+export const getPreviousQuarterStartDate = (newDate: Date | string): Date => {
+  const startOfQuarter = getQuarterStartDate(newDate)
+  const firstDayOfPreviousQuarter = new Date(
+    startOfQuarter.getFullYear(),
+    startOfQuarter.getMonth() - 3,
+    startOfQuarter.getDate()
+  )
+
+  return firstDayOfPreviousQuarter
+}
+
+export const getPreviousQuarterEndDate = (newDate: Date | string): Date => {
+  const endOfQuarter = getQuarterEndDate(newDate)
+  const lastDayOfPreviousQuarter = new Date(
+    endOfQuarter.getFullYear(),
+    endOfQuarter.getMonth() - 3,
+    endOfQuarter.getDate(),
+    endOfQuarter.getHours(),
+    endOfQuarter.getMinutes(),
+    endOfQuarter.getSeconds()
+  )
+
+  return lastDayOfPreviousQuarter
+}
+
+// Years
+export const getYearStartDate = (newDate: Date | string): Date => {
+  const date = formatDate(newDate)
+  const startOfYear = new Date(date.getFullYear(), 0, 1)
+
+  return startOfYear
+}
+
+export const getYearEndDate = (newDate: Date | string): Date => {
+  const date = formatDate(newDate)
+  const endOfYear = new Date(date.getFullYear(), 11, 31, 23, 59, 59)
+
+  return endOfYear
+}
+
+export const getPreviousYearStartDate = (newDate: Date | string): Date => {
+  const startOfYear = getYearStartDate(newDate)
+  const firstDayOfPreviousYear = new Date(
+    startOfYear.getFullYear() - 1,
+    startOfYear.getMonth(),
+    startOfYear.getDate()
+  )
+
+  return firstDayOfPreviousYear
+}
+
+export const getPreviousYearEndDate = (newDate: Date | string): Date => {
+  const endOfYear = getYearEndDate(newDate)
+  const lastDayOfPreviousYear = new Date(
+    endOfYear.getFullYear() - 1,
+    endOfYear.getMonth(),
+    endOfYear.getDate(),
+    endOfYear.getHours(),
+    endOfYear.getMinutes(),
+    endOfYear.getSeconds()
+  )
+
+  return lastDayOfPreviousYear
+}
+
 export default {
   toMinute,
   toHour,
@@ -170,4 +356,21 @@ export default {
   toIso,
   fromNow,
   toCustomFormat,
+  getYesterdayDate,
+  getFirstDayOfWeek,
+  getLastDayOfWeek,
+  getPreviousWeekStartDate,
+  getPreviousWeekEndDate,
+  getMonthStartDate,
+  getMonthEndDate,
+  getPreviousMonthStartDate,
+  getPreviousMonthEndDate,
+  getQuarterStartDate,
+  getQuarterEndDate,
+  getPreviousQuarterStartDate,
+  getPreviousQuarterEndDate,
+  getYearStartDate,
+  getYearEndDate,
+  getPreviousYearStartDate,
+  getPreviousYearEndDate
 }

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

@@ -1,22 +1,24 @@
 @mixin bold {
   @include subtle;
 
-  [class*=pb_nav_list_kit_item] {
-    &[class*=_active] [class*=_link] {
-      background-color: $primary;
-      color: $white;
-      box-shadow: $shadow_deep;
-      @media (hover:hover) {
-        &:hover {
-          background-color: darken($primary, 4%);
-          [class*=_text],[class*=_icon] {
-            color: $white;
+  [class*=pb_nav_list_kit_item][class*=pb_nav_list_item]{
+    &[class*=_link] {
+      &[class*=_active] {
+        background-color: $primary;
+        color: $white;
+        box-shadow: $shadow_deep;
+        @media (hover:hover) {
+          &:hover {
+            background-color: darken($primary, 4%);
+            [class*=_text],[class*=_icon] {
+              color: $white;
+            }
           }
         }
+        [class*=_text],[class*=_icon] {
+          font-weight: $bolder;
+        }
       }
-      [class*=_text],[class*=_icon] {
-        font-weight: $bolder;
-      }
-    }
+   }
   }
 }