playbook_ui 12.39.0.pre.alpha.PLAY966collapsiblenav41115 → 12.39.0.pre.alpha.salesbookmismatchingdate1117

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: bf4167e4358045e1ef6c706b26d0e1893336ef2e673212b907abf2e2bfd7d37f
-  data.tar.gz: f43205d27b1ceffd14ba706a9faf3285b650e220a71e889a78c0f55d41356737
+  metadata.gz: 6650ac3fb53a1c1a6d57ea4d4c08d61741e60c7aedd7149994b5f6a239a669e5
+  data.tar.gz: 0b0a15f6fe4e1d400bc78b5b74638c3ac6be8c9ef0804773edde1a3711fef286
 SHA512:
-  metadata.gz: 2f2ecc613d9a31db4877c93101a664ddf9922ad0b46361971792336e51ee8f36f9b5aaa325893b26530a6ccf1b2dfb13af5f8f87309ad3e0c8bdc6501d8214da
-  data.tar.gz: c4b92e867f72479651eee9d82afa551fd717fd66d7ced9a4997dbcec133d6e3b1e2916f5197ccc5e9c6c9b8c8a16db1931f6aca42dd758427e5a2c076abfc7f1
+  metadata.gz: 5eb5a4c90549d5f7f4dafb4455ff212573749b54c9734b09daa79a6a2d924587b820a8883fc6e340e31571515b935476e872344207b6e88b7be4f98ac1f25815
+  data.tar.gz: 8986120162f91c579c0574dd70ef13fb0bc190b687548edd456b33e2d9ff4447c9b122bf431719376390a2dc49e21d6c8714c4b53da362204b908b01ccd2b3d0

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

@@ -17,6 +17,7 @@ const formatDate = (newDate: Date | string) => {
 
 export const toMinute = (newDate: Date | string, timeZone?: string): string => {
   const date = formatDate(newDate)
+
   if (timeZone) {
     return date.toLocaleTimeString(undefined, { timeZone, hour: "2-digit", minute: "2-digit" }).slice(3, 5);
   } else {
@@ -26,6 +27,7 @@ export const toMinute = (newDate: Date | string, timeZone?: string): string => {
 
 export const toHour = (newDate: Date | string, timeZone?: string): string => {
   const date = formatDate(newDate)
+
   if (timeZone) {
     return date.toLocaleTimeString(undefined, { timeZone, hour: "numeric" }).split(' ')[0];
   } else {
@@ -34,52 +36,53 @@ export const toHour = (newDate: Date | string, timeZone?: string): string => {
 }
 
 export const toDay = (newDate: Date | string, timeZone?: string): number => {
-    if (timeZone) {
-      const date = new Date(formatDate(newDate).toLocaleString(undefined, { timeZone }));
-      return date.getDate()
-    } else {
-      const date = formatDate(newDate)
-      return date.getDate()
-    }
+  if (timeZone) {
+    const date = new Date(formatDate(newDate).toLocaleString(undefined, { timeZone }));
+    return date.getDate()
+  } else {
+    const date = formatDate(newDate)
+    return date.getDate()
+  }
 }
 
 export const toDayAbbr = (newDate: Date | string): string => {
   const date = formatDate(newDate)
-  return ABBR_DAYS[date.getUTCDay()]
+  return ABBR_DAYS[date.getDay()]
 }
 
 export const toWeekday = (newDate: Date | string): string => {
-    const date = formatDate(newDate)
-    return days[date.getUTCDay()]
+  const date = formatDate(newDate)
+  return days[date.getDay()]
 }
 
 export const toMonth = (newDate: Date | string, timeZone?: string): string => {
-    if (timeZone) {
-      const date = new Date(formatDate(newDate).toLocaleString(undefined, { timeZone }));
-      return months[date.getUTCMonth()]
-    } else {
-      const date = formatDate(newDate)
-      return months[date.getUTCMonth()]
-    }
+  if (timeZone) {
+    const date = new Date(formatDate(newDate).toLocaleString(undefined, { timeZone }));
+    return months[date.getMonth()]
+  } else {
+    const date = formatDate(newDate)
+    return months[date.getMonth()]
+  }
 }
 
 export const toMonthNum = (newDate: Date | string): number => {
   const date = formatDate(newDate)
-  return date.getUTCMonth() +1
+  return date.getMonth() + 1
 }
 
 export const toYear = (newDate: Date | string, timeZone?: string): number => {
-    if (timeZone) {
-      const date = new Date(newDate.toLocaleString(undefined, { timeZone }));
-      return date.getUTCFullYear()
-    } else {
-      const date = new Date(newDate)
-      return date.getUTCFullYear()
-    }
+  if (timeZone) {
+    const date = new Date(formatDate(newDate).toLocaleString(undefined, { timeZone }));
+    return date.getFullYear()
+  } else {
+    const date = formatDate(newDate)
+    return date.getFullYear()
+  }
 }
 
 export const toTime = (newDate: Date | string, timeZone?: string): string => {
   const date = formatDate(newDate)
+
   if (timeZone) {
     return date.toLocaleTimeString(undefined, { timeZone, timeStyle: "short" }).split(' ')[0];
   } else {
@@ -88,21 +91,23 @@ export const toTime = (newDate: Date | string, timeZone?: string): string => {
 }
 
 export const toMeridiem = (newDate: Date | string, timeZone?: string): string => {
-    const date = formatDate(newDate)
-    if (timeZone) {
-      return date.toLocaleString(undefined, { timeZone, hour12: true }).slice(-2).charAt(0).toLocaleLowerCase();
-    } else {
-      return date.toLocaleString(undefined, { hour12: true }).slice(-2).charAt(0).toLocaleLowerCase();
-    }
+  const date = formatDate(newDate)
+
+  if (timeZone) {
+    return date.toLocaleString(undefined, { timeZone, hour12: true }).slice(-2).charAt(0).toLocaleLowerCase();
+  } else {
+    return date.toLocaleString(undefined, { hour12: true }).slice(-2).charAt(0).toLocaleLowerCase();
+  }
 }
 
 export const toTimeZone = (newDate: Date | string, timeZone?: string): string => {
-    const date = formatDate(newDate)
-    if (timeZone) {
-      return date.toLocaleString(undefined, { timeZone, timeZoneName: "short" }).split(' ')[3];
-    } else {
-      return date.toLocaleString(undefined, { timeZoneName: "short" }).split(' ')[3];
-    }
+  const date = formatDate(newDate)
+
+  if (timeZone) {
+    return date.toLocaleString(undefined, { timeZone, timeZoneName: "short" }).split(' ')[3];
+  } else {
+    return date.toLocaleString(undefined, { timeZoneName: "short" }).split(' ')[3];
+  }
 }
 
 export const toTimeWithMeridiem = (newDate: Date | string, timeZone: string): string => {
@@ -111,16 +116,17 @@ export const toTimeWithMeridiem = (newDate: Date | string, timeZone: string): st
 }
 
 export const toIso = (newDate: Date | string): string => {
-    const date = formatDate(newDate)
-    return date.toISOString()
+  const date = formatDate(newDate)
+  return date.toISOString()
 }
 
 export const fromNow = (newDate: Date | string): string => {
-
   const startDate = formatDate(newDate).getTime()
   const endDate = new Date().getTime()
   const elapsedTime = endDate - startDate
-  let elapsedTimeString = `${Math.round(elapsedTime / (365.25 * 24 * 60 * 60 * 1000))} years ago.`; // 730+ days
+  let elapsedTimeString = `${Math.round(elapsedTime / (365.25 * 24 * 60 * 60 * 1000))} years ago`; // 730+ days
+
+  const MILLISECONDS_IN_A_MONTH = 30.44 * 24 * 60 * 60 * 1000
 
   const elapsedTimeData = [
     { min: 0, max: 44999, value: "a few seconds ago" }, // 0-44 seconds
@@ -131,7 +137,7 @@ export const fromNow = (newDate: Date | string): string => {
     { min: 75700000, max: 172899999, value: "a day ago" }, // 22-48 hours
     { min: 172900000, max: 2169999999, value: `${Math.round(elapsedTime / 86400000)} days ago`}, // 2-25 days
     { min: 2170000000, max: 5184999999, value: "a month ago"}, // 26-60 days
-    { min: 5185000000, max: 27561699999, value: `${Math.round(elapsedTime / 30.44 * 24 * 60 * 60 * 1000)} months ago`}, // 60-319 days
+    { min: 5185000000, max: 27561699999, value: `${Math.round(elapsedTime / MILLISECONDS_IN_A_MONTH)} months ago`}, // 60-319 days
     { min: 27561700000, max: 63072999999, value: "a year ago"}, // 320-730 days
   ];
 
@@ -154,6 +160,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 +363,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/_collapsible_nav.scss

@@ -116,9 +116,6 @@
             font-weight: $regular !important;
           }
         }
-          .icon_wrapper:hover {
-            background-color: mix($primary, $card_light, 40%);
-          }
       }
     }
   }
@@ -128,25 +125,30 @@
     [class*="pb_collapsible_nav_item"] {
       &[class*="_active"] {
         .pb_collapsible_main_kit {
-          background-color: $active_light;
+          background-color: $primary !important;
           border-radius: $border_rad_heavier;
           .pb_nav_list_item_text_collapsible,
-          .pb_nav_list_item_icon_collapsible
-           {
-            color: $primary;
+          .pb_nav_list_item_icon_collapsible,
+          .icon_wrapper,
+          .pb_icon_kit {
+            color: $white !important;
           }
         }
+
         &:hover {
           background-color: unset;
         }
-      }
-      &.dark {
-        &[class*="_active"] {
-          .pb_collapsible_main_kit {
-            background-color: mix($white, $card_dark, 20%);
-            .pb_nav_list_item_text_collapsible,
-            svg {
-              color: $white !important;
+        .pb_collapsible_main_kit:hover {
+          .pb_nav_list_item_text_collapsible {
+            color: $white !important;
+          }
+        }
+
+        .icon_wrapper {
+          &:hover {
+            background-color: mix($primary, $card_light, 40%);
+            .pb_icon_kit {
+              color: $primary !important;
             }
           }
         }
@@ -195,6 +197,7 @@
     // vertical line on left of collapsible content
     .pb_collapsible_content_kit {
       margin-left: $space_sm + 2;
+      border-left: 1px solid transparent;
     }
 
     .pb_collapsible_main_kit {
@@ -271,12 +274,15 @@
       .icon_wrapper:hover {
         background-color: mix($white, $card_dark, 40%);
       }
+      &[class*="_active"] {
+        .icon_wrapper:hover {
+          background-color: mix($primary, $card_light, 40%);
+        }
+      }
 
       &[class*="pb_collapsible_nav_item"][class*="_collapsible_trail"] {
         .pb_collapsible_content_kit {
-          &::after {
-            background-color: $border_dark;
-          }
+          border-color: $border_dark;
         }
       }
     }

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

@@ -44,7 +44,7 @@ $selector: ".pb_nav_list";
 
       [class*=_text] {
         font-size: $font_base;
-        // font-weight: $bold;
+        font-weight: $bold;
         color: $text_lt_default;
       }