playbook_ui 12.38.0.pre.alpha.PLAY932removemomentqp1088 → 12.38.0.pre.alpha.PLAY966collapsiblenav41082

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

@@ -116,6 +116,7 @@ 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
@@ -153,193 +154,6 @@ 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,
@@ -356,21 +170,4 @@ 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

@@ -1,27 +1,290 @@
 @import "../tokens/spacing";
 @import "../tokens/colors";
 @import "../tokens/border_radius";
+@import "../tokens/titles";
+@import "../tokens/typography";
+@import "./mixins";
 
 [class^="pb_nav_list"] {
-  .pb_collapsible_nav_item {
-  .pb_collapsible_main_kit,
-  .pb_collapsible_content_kit,
-  .pb_collapsible_kit {
-    padding: 0 !important;
-  }
-
-  .icon_wrapper {
-    border-radius: $border_radius_rounded;
-    width: 19px;
-    height: 19px;
-    display:flex;
-    align-items: center;
-    justify-content: center;
-    margin-right: $space_xs;
+  .font_size_small {
+    .pb_nav_list_item_text,
+    .pb_nav_list_item_text_collapsible {
+      font-size: $font_small !important;
+    }
+  }
+
+  .font_bolder {
+    .pb_nav_list_item_text {
+      @include pb_title_4;
+    }
+    .pb_collapsible_main_kit {
+      .pb_nav_list_item_text_collapsible {
+        @include pb_title_4;
+        font-weight: $bolder !important;
+      }
+    }
+  }
+
+  .font_bold {
+    .pb_nav_list_item_text {
+      font-weight: $bold;
+    }
+    .pb_collapsible_main_kit {
+      .pb_nav_list_item_text_collapsible {
+        font-weight: $bold !important;
+      }
+    }
+  }
+
+  .font_regular {
+    .pb_nav_list_item_text {
+      font-weight: $regular;
+    }
+    .pb_collapsible_main_kit {
+      .pb_nav_list_item_text_collapsible {
+        font-weight: $regular !important;
+      }
+    }
+  }
+
+  //styling for default variant with collapsible
+  &[class*="_normal"] {
+    [class*="pb_collapsible_nav_item"] {
+      .pb_collapsible_content_kit {
+        margin-left: $space_lg + 3;
+      }
+      .pb_collapsible_main_kit {
+        border-radius: unset;
+      }
+      &[class*="_active"] {
+        .pb_collapsible_main_kit {
+          background-color: $active_light;
+        }
+        .pb_nav_list_item_link {
+          border-color: transparent !important;
+          .pb_nav_list_item_text {
+            color: unset !important;
+            font-weight: $regular !important;
+          }
+        }
+      }
+
+      &.dark {
+        border-color: $border_dark;
+        .pb_collapsible_main_kit:hover {
+          .pb_nav_list_item_text_collapsible {
+            color: $white !important;
+          }
+        }
+        &[class*="_active"] {
+          .pb_collapsible_main_kit {
+            background-color: mix($white, $card_dark, 20%);
+            .pb_nav_list_item_text_collapsible,
+            svg {
+              color: $white !important;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  //styling bold variant to work with collapsible
+  &[class*="_bold"] {
+    [class*="pb_collapsible_nav_item"] {
+      &[class*="_active"] {
+        .pb_collapsible_main_kit {
+          background-color: $primary !important;
+          border-radius: $border_rad_heavier;
+          .pb_nav_list_item_text_collapsible,
+          .pb_nav_list_item_icon_collapsible,
+          .icon_wrapper,
+          .pb_icon_kit {
+            color: $white !important;
+          }
+        }
+        .pb_nav_list_item_link {
+          background-color: unset !important;
+          box-shadow: unset !important;
+          &:hover {
+            background-color: rgba($primary, 0.03) !important;
+            .pb_nav_list_item_text {
+              color: $primary !important;
+            }
+          }
+          .pb_nav_list_item_text {
+            font-weight: $regular !important;
+          }
+        }
+      }
+    }
+  }
+
+  //styling for subtle variant with collapsible
+  &[class*="_subtle"] {
+    [class*="pb_collapsible_nav_item"] {
+      &[class*="_active"] {
+        .pb_collapsible_main_kit {
+          background-color: $primary !important;
+          border-radius: $border_rad_heavier;
+          .pb_nav_list_item_text_collapsible,
+          .pb_nav_list_item_icon_collapsible,
+          .icon_wrapper,
+          .pb_icon_kit {
+            color: $white !important;
+          }
+        }
+
+        &:hover {
+          background-color: unset;
+        }
+        .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;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  [class*="pb_collapsible_nav_item"] {
+    .pb_nav_list_kit_item {
+      margin-right: 0px !important;
+    }
+
+    &[class*="_active"] {
+      background-color: unset !important;
+      .pb_nav_list_item_link {
+        color: unset !important;
+      }
+    }
+
+    .pb_nav_list_item_link_collapsible {
+      &:focus-visible {
+        outline: none;
+      }
+    }
+
+    .pb_collapsible_main_kit {
+      &:focus-visible {
+        box-shadow: 0px 0px 0px 2px $primary_action;
+        border-radius: $border_rad_heavier;
+      }
+    }
+
+    //Make sure link is entire width of navitem when in collapsible
+    .pb_collapsible_main_kit {
+      .pb_flex_item_kit:first-child {
+        width: 100%;
+      }
+    }
+
     &:hover {
-      background-color: rgba($primary_action, $opacity_3);
+      .pb_nav_list_item_link_collapsible {
+        background-color: unset !important;
+      }
+    }
+
+    // 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 {
+      transition-property: color, border-color, background-color;
+      transition-duration: 0.15s;
+      transition-timing-function: $bezier;
+      border-radius: $border_rad_heavier;
+      &:hover {
+        background-color: mix($primary, $card_light, 10%);
+        .pb_nav_list_item_text_collapsible,
+        svg {
+          color: $primary !important;
+        }
+      }
+    }
+
+    .pb_collapsible_main_kit,
+    .pb_collapsible_content_kit,
+    .pb_collapsible_kit {
+      padding: 0 !important;
+    }
+
+    &[class*="_collapsible_trail"] {
+      @include collapsible_trail_class;
+    }
 
+    .icon_wrapper {
+      border-radius: $border_radius_rounded;
+      width: $space_sm + 3;
+      height: $space_sm + 3;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-right: $space_xs;
+      &:hover {
+        background-color: mix($primary, $card_light, 40%);
+      }
+    }
+
+    &.dark {
+      .pb_nav_list_kit_item {
+        border-color: $border_dark;
+        .pb_nav_list_item_text {
+          color: $text_dk_light !important;
+        }
+      }
+      &[class*="pb_nav_list_kit_item"] [class*="_link"]:hover {
+        .pb_nav_list_item_text {
+          color: $white !important;
+        }
+      }
+
+      .pb_nav_list_item_text_collapsible {
+        color: $white !important;
+      }
+      .pb_nav_list_item_text {
+        color: $text_dk_light;
+      }
+      .pb_nav_list_kit_item:hover {
+        background-color: #ffffff33;
+        color: $white;
+      }
+      .pb_icon_kit {
+        color: $text_dk_light;
+      }
+
+      .pb_collapsible_main_kit:hover {
+        background-color: mix($white, $card_dark, 20%);
+        .pb_nav_list_item_text_collapsible,
+        svg {
+          color: $white !important;
+        }
+      }
+      .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 {
+          border-color: $border_dark;
+        }
+      }
     }
   }
 }
-}

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

@@ -81,6 +81,9 @@ $selector: ".pb_nav_list";
     // Horizontal Overrides
     [class*=pb_nav_list_kit_item] {
       margin: 0;
+      [class*=_item_text]{
+        font-weight: $regular;
+      }
     }
     [class*=_active] {
       background-color: $active_light;
@@ -101,6 +104,9 @@ $selector: ".pb_nav_list";
     // Horizontal Overrides
     [class*=pb_nav_list_kit_item] {
       margin: 0;
+      [class*=_item_text]{
+        font-weight: $regular;
+      }
     }
     [class*=_active] {
       [class*=_text] {