playbook_ui 13.0.0.pre.alpha.PLAY966collapsiblenav41129 → 13.0.0.pre.alpha.salesbookmismatchingdate1120

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 638d5a75d744078e39a7d6255ce45cc3918c8622936d7cec1a3f4f3486a363b2
-  data.tar.gz: 22f67327b571610f91750715cf9ac75c055579952903d802d3a913d6cd64a4f2
+  metadata.gz: a5e814815e52260f723ffe7d60a15296ebe7c522dbaf99e1635aa32d72c30264
+  data.tar.gz: 91ddc7e14810c34ecb755a4036e059d771ac84532b73d050a5ddb8fb9b02d659
 SHA512:
-  metadata.gz: 2e5464deffe48754c4515f4051e8120fdf5e88d0ebbb74ee89bd2b9b91d4e001a2d1cab0376b421b719614231723522abebaa2543c1dfafe95b638777e6148db
-  data.tar.gz: 2c422a6629601db2e0ceb64848e60e4eb5a421a1caa86bf5d3cd94786976a321d6b7f529a53798501bf13d3887df5d16a141acba7084e1a9ccebf65f075f0890
+  metadata.gz: 40f47045dd3d5db61e4b75d1015cbb10229bf6a22a44af748a77db1084ae9f610699b882cd15d32cc969eb401ea6f89f83803cbc6a449cb4a46a2bda8d44d3e1
+  data.tar.gz: 79237b4941b973520b016f302f8170f91893855a748da55c9b3c5e21ce42eea6331b41201ae31cb196de215dbffc51c35231d086afe3c2c879ec4fbb541e9899

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

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

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

@@ -17,92 +17,97 @@ 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);
+    return date.toLocaleTimeString("en-US", { timeZone, hour: "2-digit", minute: "2-digit" }).slice(3, 5);
   } else {
-    return date.toLocaleTimeString(undefined, { hour: "2-digit", minute: "2-digit" }).slice(3, 5);
+    return date.toLocaleTimeString("en-US", { hour: "2-digit", minute: "2-digit" }).slice(3, 5);
   }
 }
 
 export const toHour = (newDate: Date | string, timeZone?: string): string => {
   const date = formatDate(newDate)
+
   if (timeZone) {
-    return date.toLocaleTimeString(undefined, { timeZone, hour: "numeric" }).split(' ')[0];
+    return date.toLocaleTimeString("en-US", { timeZone, hour: "numeric" }).split(' ')[0];
   } else {
-    return date.toLocaleTimeString(undefined, { hour: "numeric" }).split(' ')[0];
+    return date.toLocaleTimeString("en-US", { hour: "numeric" }).split(' ')[0];
   }
 }
 
 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("en-US", { 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("en-US", { 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("en-US", { 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];
+    return date.toLocaleTimeString("en-US", { timeZone, timeStyle: "short" }).split(' ')[0];
   } else {
-    return date.toLocaleTimeString(undefined, { timeStyle: "short" }).split(' ')[0];
+    return date.toLocaleTimeString("en-US", { timeStyle: "short" }).split(' ')[0];
   }
 }
 
 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("en-US", { timeZone, hour12: true }).slice(-2).charAt(0).toLocaleLowerCase();
+  } else {
+    return date.toLocaleString("en-US", { 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("en-US", { timeZone, timeZoneName: "short" }).split(' ')[3];
+  } else {
+    return date.toLocaleString("en-US", { timeZoneName: "short" }).split(' ')[3];
+  }
 }
 
 export const toTimeWithMeridiem = (newDate: Date | string, timeZone: string): string => {
@@ -111,15 +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
@@ -130,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
   ];
 
@@ -149,7 +156,7 @@ export const toCustomFormat = (newDate: Date | string, format = 'month_day'): st
   if (format == "month_day") {
     return `${toMonthNum(date)}/${toDay(date)}`
   } else {
-    return `${date.toLocaleString(undefined, { month: "short" })} ${toDay(date)}`
+    return `${date.toLocaleString("en-US", { month: "short" })} ${toDay(date)}`
   }
 }
 

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

@@ -1,24 +1,22 @@
 @mixin bold {
   @include subtle;
 
-  [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*=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*=_text],[class*=_icon] {
-          font-weight: $bolder;
-        }
       }
-   }
+      [class*=_text],[class*=_icon] {
+        font-weight: $bolder;
+      }
+    }
   }
 }

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

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