playbook_ui 12.39.0.pre.alpha.salesbookmismatchingdate1117 → 13.0.0.pre.alpha.PLAY966collapsiblenav41126

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 6650ac3fb53a1c1a6d57ea4d4c08d61741e60c7aedd7149994b5f6a239a669e5
-  data.tar.gz: 0b0a15f6fe4e1d400bc78b5b74638c3ac6be8c9ef0804773edde1a3711fef286
+  metadata.gz: ef5b8148534fcbf48ac52ba770e58098903388c1dc4ce464942e24f8040e3c8b
+  data.tar.gz: 1d531d6e7d387766082aad0cad62919458b6fe29156978dda1bf9a5ac4bf9f55
 SHA512:
-  metadata.gz: 5eb5a4c90549d5f7f4dafb4455ff212573749b54c9734b09daa79a6a2d924587b820a8883fc6e340e31571515b935476e872344207b6e88b7be4f98ac1f25815
-  data.tar.gz: 8986120162f91c579c0574dd70ef13fb0bc190b687548edd456b33e2d9ff4447c9b122bf431719376390a2dc49e21d6c8714c4b53da362204b908b01ccd2b3d0
+  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_kit/dateTime.ts

@@ -17,7 +17,6 @@ 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 {
@@ -27,7 +26,6 @@ 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 {
@@ -36,53 +34,52 @@ 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.getDay()]
+  return ABBR_DAYS[date.getUTCDay()]
 }
 
 export const toWeekday = (newDate: Date | string): string => {
-  const date = formatDate(newDate)
-  return days[date.getDay()]
+    const date = formatDate(newDate)
+    return days[date.getUTCDay()]
 }
 
 export const toMonth = (newDate: Date | string, timeZone?: string): string => {
-  if (timeZone) {
-    const date = new Date(formatDate(newDate).toLocaleString(undefined, { timeZone }));
-    return months[date.getMonth()]
-  } else {
-    const date = formatDate(newDate)
-    return months[date.getMonth()]
-  }
+    if (timeZone) {
+      const date = new Date(formatDate(newDate).toLocaleString(undefined, { timeZone }));
+      return months[date.getUTCMonth()]
+    } else {
+      const date = formatDate(newDate)
+      return months[date.getUTCMonth()]
+    }
 }
 
 export const toMonthNum = (newDate: Date | string): number => {
   const date = formatDate(newDate)
-  return date.getMonth() + 1
+  return date.getUTCMonth() +1
 }
 
 export const toYear = (newDate: Date | string, timeZone?: string): number => {
-  if (timeZone) {
-    const date = new Date(formatDate(newDate).toLocaleString(undefined, { timeZone }));
-    return date.getFullYear()
-  } else {
-    const date = formatDate(newDate)
-    return date.getFullYear()
-  }
+    if (timeZone) {
+      const date = new Date(newDate.toLocaleString(undefined, { timeZone }));
+      return date.getUTCFullYear()
+    } else {
+      const date = new Date(newDate)
+      return date.getUTCFullYear()
+    }
 }
 
 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 {
@@ -91,23 +88,21 @@ 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 => {
@@ -116,17 +111,15 @@ 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
-
-  const MILLISECONDS_IN_A_MONTH = 30.44 * 24 * 60 * 60 * 1000
+  let elapsedTimeString = `${Math.round(elapsedTime / (365.25 * 24 * 60 * 60 * 1000))} years ago.`; // 730+ days
 
   const elapsedTimeData = [
     { min: 0, max: 44999, value: "a few seconds ago" }, // 0-44 seconds
@@ -137,7 +130,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 / MILLISECONDS_IN_A_MONTH)} months ago`}, // 60-319 days
+    { min: 5185000000, max: 27561699999, value: `${Math.round(elapsedTime / 30.44 * 24 * 60 * 60 * 1000)} months ago`}, // 60-319 days
     { min: 27561700000, max: 63072999999, value: "a year ago"}, // 320-730 days
   ];
 

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;
-      }
-    }
+   }
   }
 }

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

@@ -3,74 +3,43 @@
 @import "../tokens/border_radius";
 @import "../tokens/titles";
 @import "../tokens/typography";
-@import "./mixins";
+@import "./collapsible_trail_mixin";
 
-[class^="pb_nav_list"] {
-  .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;
-      }
-    }
+[class^="pb_nav_list"][class*="_vertical"] {
+  .pb_collapsible_main_kit,
+  .pb_collapsible_content_kit,
+  .pb_collapsible_kit {
+    padding: 0 !important;
   }
 
   //styling for default variant with collapsible
   &[class*="_normal"] {
-    [class*="pb_collapsible_nav_item"] {
+    .pb_collapsible_kit {
+      &[class*="_active"] {
+        background-color: unset;
+      }
+      &[class*="_collapsible_trail"] {
+        .pb_collapsible_content_kit {
+          &::after {
+            left: 0px !important;
+          }
+        }
+      }
       .pb_collapsible_content_kit {
         margin-left: $space_lg + 3;
       }
       .pb_collapsible_main_kit {
         border-radius: unset;
+        margin: 0;
       }
       &[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;
+    }
+    &.dark {
+      .pb_collapsible_kit {
         .pb_collapsible_main_kit:hover {
           .pb_nav_list_item_text_collapsible {
             color: $white !important;
@@ -91,16 +60,17 @@
 
   //styling bold variant to work with collapsible
   &[class*="_bold"] {
-    [class*="pb_collapsible_nav_item"] {
+    .pb_collapsible_kit {
       &[class*="_active"] {
+        background-color: unset;
         .pb_collapsible_main_kit {
-          background-color: $primary !important;
+          background-color: $primary;
           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;
+            color: $white;
           }
         }
         .pb_nav_list_item_link {
@@ -109,11 +79,28 @@
           &:hover {
             background-color: rgba($primary, 0.03) !important;
             .pb_nav_list_item_text {
-              color: $primary !important;
+              color: $primary;
             }
           }
           .pb_nav_list_item_text {
-            font-weight: $regular !important;
+            font-weight: $regular;
+          }
+        }
+        .icon_wrapper:hover {
+          background-color: mix($primary, $card_light, 40%);
+        }
+      }
+    }
+    &.dark {
+      .pb_collapsible_kit {
+        &[class*="_active"] {
+          .pb_collapsible_main_kit {
+            background-color: $primary;
+          }
+          .pb_nav_list_item_link {
+            &:hover {
+              background-color: rgba($white, $opacity_1) !important;
+            }
           }
         }
       }
@@ -122,33 +109,30 @@
 
   //styling for subtle variant with collapsible
   &[class*="_subtle"] {
-    [class*="pb_collapsible_nav_item"] {
+    .pb_collapsible_kit {
       &[class*="_active"] {
+        background-color: unset;
         .pb_collapsible_main_kit {
-          background-color: $primary !important;
+          background-color: $active_light;
           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_icon_collapsible {
+            color: $primary;
           }
         }
-
         &: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;
+      }
+    }
+    &.dark {
+      .pb_collapsible_kit {
+        &[class*="_active"] {
+          .pb_collapsible_main_kit {
+            background-color: mix($white, $card_dark, 20%) !important;
+            .pb_nav_list_item_text_collapsible,
+            svg {
+              color: $white !important;
             }
           }
         }
@@ -156,16 +140,20 @@
     }
   }
 
-  [class*="pb_collapsible_nav_item"] {
-    .pb_nav_list_kit_item {
-      margin-right: 0px !important;
+  .pb_collapsible_kit {
+    [class*="pb_collapsible_nav_item"][class*="pb_nav_list_item_link_collapsible"][class*="pb_nav_list_kit_item"] {
+      margin: 0px;
+      &[class*="_active"] {
+        background-color: unset;
+        box-shadow: unset;
+        .pb_nav_list_item_text_collapsible {
+          color: unset;
+        }
+      }
     }
 
-    &[class*="_active"] {
-      background-color: unset !important;
-      .pb_nav_list_item_link {
-        color: unset !important;
-      }
+    &[class*="_collapsible_trail"] {
+      @include collapsible_trail_class;
     }
 
     .pb_nav_list_item_link_collapsible {
@@ -175,6 +163,7 @@
     }
 
     .pb_collapsible_main_kit {
+      margin: $space_xs ($space_sm - 2px);
       &:focus-visible {
         box-shadow: 0px 0px 0px 2px $primary_action;
         border-radius: $border_rad_heavier;
@@ -194,10 +183,9 @@
       }
     }
 
-    // vertical line on left of collapsible content
+    // indention on left of collapsible content
     .pb_collapsible_content_kit {
-      margin-left: $space_sm + 2;
-      border-left: 1px solid transparent;
+      margin-left: $space_lg - 2;
     }
 
     .pb_collapsible_main_kit {
@@ -209,21 +197,11 @@
         background-color: mix($primary, $card_light, 10%);
         .pb_nav_list_item_text_collapsible,
         svg {
-          color: $primary !important;
+          color: $primary;
         }
       }
     }
 
-    .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;
@@ -236,22 +214,18 @@
         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;
-        }
-      }
+  }
+  &.dark {
+    .pb_collapsible_kit {
       &[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;
+      [class*="pb_collapsible_nav_item"][class*="pb_nav_list_item_link_collapsible"][class*="pb_nav_list_kit_item"] {
+        .pb_nav_list_item_text_collapsible {
+          color: $white !important;
+        }
       }
       .pb_nav_list_item_text {
         color: $text_dk_light;
@@ -274,15 +248,12 @@
       .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"] {
+      &[class*="_collapsible_trail"] {
         .pb_collapsible_content_kit {
-          border-color: $border_dark;
+          &::after {
+            background-color: $border_dark;
+          }
         }
       }
     }

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

@@ -0,0 +1,14 @@
+@mixin collapsible_trail_class {
+    .pb_collapsible_content_kit {
+      position: relative;
+      &::after {
+        content: "";
+        position: absolute;
+        top: 4px;
+        bottom: 4px;
+        left: 5px;
+        width: 1px; 
+        background-color: $border_light;
+      }
+    }
+  }