playbook_ui 13.1.0 → 13.2.0.pre.alpha.PLAY986dateTimeRounding1150

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: ebfbb350f5457ca825d0c7991f1e2fff2dd63e1a925523715b154af8f9b3b233
-  data.tar.gz: 96c352b2239aa01b2b30446b23520322494ca2d72cd62c456b6835f9f1a6656e
+  metadata.gz: 29507bd994a736c71238be60bea9b2b269b5f1a40ebabac51280e93f20d493b2
+  data.tar.gz: fb81b0db3f2615422f9d827859951373dd50d34b5a94aa06f9bc42324d7942a5
 SHA512:
-  metadata.gz: 681a3e6dc4fd90450765d3fd35d34b7dd08b67c67ae79f529b6f18498a8fe986b73360cb06c310eac254307139a2405b51b67d7488ed5983a8cc3daf0130c26f
-  data.tar.gz: af4a5c732a179ca234c04c2dad6835fb3201687233cc49353f0e73f1cf49ddc408b5570b9846d297d109c2a012b62534ba8f669dba5c6a5f006aeaa5f80a7c44
+  metadata.gz: ed2c60ef1307bb8c3ba61cb9d8983a219c6e82568e86ec9e8608ae7efe057094f6307da32f77c4ad5a08d11f9fd5ee5f2b568c1502d3426d2a82416795c846ff
+  data.tar.gz: e96648e381e82365ec5b439cdc3166f08c6c33e7cfc71d42a79415f46a5e3c1f696ccda273952633e858c7802a6746ff45a009ac164e5211ab8af18f7646805d

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

@@ -121,30 +121,61 @@ 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 today = new Date()
+  const formattedDate = formatDate(newDate)
+
+  const startDate = formattedDate.getTime()
+  const endDate = today.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
-
-  const elapsedTimeData = [
-    { min: 0, max: 44999, value: "a few seconds ago" }, // 0-44 seconds
-    { min: 45000, max: 89999, value: "a minute ago" }, // 45-89 seconds
-    { min: 90000, max: 2649999, value: `${Math.round(elapsedTime / 60000)} minutes ago`}, //  90s-44 minutes
-    { min: 2650000, max: 7299999, value: "an hour ago" }, // 45-120 minutes
-    { min: 7300000, max: 75699999, value: `${Math.round(elapsedTime / 3600000)} hours ago`}, // 2-21 hours
-    { 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: 27561700000, max: 63072999999, value: "a year ago"}, // 320-730 days
-  ];
-
-  for (const timeDate of elapsedTimeData) {
-    if (elapsedTime >= timeDate.min && elapsedTime <= timeDate.max) {
-      elapsedTimeString = timeDate.value;
-      break;
+
+  // For years/months, don't use elapsedTime due to rounding
+  const differenceInYears = today.getFullYear() - formattedDate.getFullYear()
+  const differenceInMonths = () => {
+    let months = differenceInYears * 12
+    months -= formattedDate.getMonth()
+    months += today.getMonth()
+    return months
+  }
+
+  const FOURTY_FIVE_SECONDS = 45000
+  const NINETY_SECONDS = 90000
+
+  const FOURTY_FIVE_MINUTES = 2670000
+  const NINETY_MINUTES = 5400000
+
+  const TWENTY_TWO_HOURS = 77400000
+  const THIRTY_SIX_HOURS = 129600000
+
+  const TWENTY_SIX_DAYS = 2203200000
+  const FOURTY_FIVE_DAYS = 3888000000
+
+  const TEN_AND_A_HALF_MONTHS = 27560000000
+
+  const MILLISECONDS_IN_A_MINUTE = 60000
+  const MILLISECONDS_IN_A_HOUR = 3600000
+  const MILLISECONDS_IN_A_DAY = 86400000
+
+  let elapsedTimeString = differenceInYears === 1 ? `${differenceInYears} year ago` : `${differenceInYears} years ago` // 320 days to 1+ year: "x year(s) ago"
+
+  // Inspiration: https://momentjs.com/docs/#/displaying/fromnow/
+  const intervals = [
+    { min: 0, max: FOURTY_FIVE_SECONDS, value: "a few seconds ago" }, // 0-44.99 seconds
+    { min: FOURTY_FIVE_SECONDS, max: NINETY_SECONDS, value: "a minute ago" }, // 45-89.99 seconds
+    { min: NINETY_SECONDS, max: FOURTY_FIVE_MINUTES, value: `${Math.round(elapsedTime / MILLISECONDS_IN_A_MINUTE)} minutes ago` }, // 90s-44.49 minutes: "2 minutes ago ... 44 minutes ago"
+    { min: FOURTY_FIVE_MINUTES, max: NINETY_MINUTES, value: "an hour ago" }, // 44.5-89.99 minutes
+    { min: NINETY_MINUTES, max: TWENTY_TWO_HOURS, value: `${Math.round(elapsedTime / MILLISECONDS_IN_A_HOUR)} hours ago` }, // 90m-21.49 hours: "2 hours ago ... 21 hours ago"
+    { min: TWENTY_TWO_HOURS, max: THIRTY_SIX_HOURS, value: "a day ago" }, // 21.5-35.99 hours
+    { min: THIRTY_SIX_HOURS, max: TWENTY_SIX_DAYS, value: `${Math.round(elapsedTime / MILLISECONDS_IN_A_DAY)} days ago` }, // 36h-25.49 days: "2 days ago ... 25 days ago"
+    { min: TWENTY_SIX_DAYS, max: FOURTY_FIVE_DAYS, value: "a month ago" }, // 25.5-44.99 days
+    { min: FOURTY_FIVE_DAYS, max: TEN_AND_A_HALF_MONTHS, value: `${differenceInMonths()} months ago` }, // 45 days to 319 days: "2 months ago ... 10 months ago"
+  ]
+
+  for (const interval of intervals) {
+    const { min, max, value } = interval
+
+    if (elapsedTime >= min && elapsedTime < max) {
+      elapsedTimeString = value
+      break
     }
   }
 

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,16 @@
+@import "../tokens/spacing";
+
+@mixin collapsible_trail_class {
+    .pb_collapsible_content_kit {
+      position: relative;
+      &::after {
+        content: "";
+        position: absolute;
+        top: $space_xxs;
+        bottom: $space_xxs;
+        left: $space_xxs + 1;
+        width: $space_xxs - 3; 
+        background-color: $border_light;
+      }
+    }
+  }

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

@@ -8,8 +8,8 @@
 
 $selector: ".pb_nav_list";
 
-[class^=pb_nav_list][class*=_horizontal] {
-  ul {
+[class^="pb_nav_list"][class*="_horizontal"] {
+  .pb_nav_wrapper {
     display: flex;
     align-items: center;
     padding: 0;
@@ -17,13 +17,13 @@ $selector: ".pb_nav_list";
     list-style: none;
   }
 
-  [class*=pb_nav_list_kit_item] {
+  [class*="pb_nav_list_kit_item"][class*="pb_nav_list_item"] {
     transition-property: border-color;
     transition-duration: 0.15s;
     transition-timing-function: $bezier;
     padding: 0;
 
-    [class*=_link] {
+    &[class*="_link"] {
       text-decoration: none;
       display: flex;
       align-items: center;
@@ -36,19 +36,18 @@ $selector: ".pb_nav_list";
       transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
       color: $text_lt_default;
 
-      [class*=_icon_left] {
+      [class*="_icon_left"] {
         font-size: $font_large;
         margin-right: $space_sm;
         color: $text_lt_lighter;
       }
 
-      [class*=_text] {
-        font-size: $font_base;
-        font-weight: $bold;
+      [class*="_text"] {
         color: $text_lt_default;
+        font-weight: $bold;
       }
 
-      @media (hover:hover) {
+      @media (hover: hover) {
         &:hover {
           color: $primary;
           #{$selector}_item_icon,
@@ -57,84 +56,85 @@ $selector: ".pb_nav_list";
           }
         }
       }
-    }
-  }
-
-  [class*=_active] {
-    #{$selector}_item_link {
-      border-color: $primary;
-
-      [class*=_item_icon] {
-        color: $text_lt_default;
-      }
-
-      [class*=_item_text] {
-        color: $text_lt_default;
-        font-weight: $bold;
+      &[class*="_active"] {
+        border-color: $primary;
+        [class*="_item_icon"] {
+          color: $text_lt_default;
+        }
+        [class*="_item_text"] {
+          color: $text_lt_default;
+          font-weight: $bold;
+        }
+        &:hover {
+          #{$selector}_item_icon,
+          #{$selector}_item_text {
+            color: $primary;
+          }
+        }
       }
     }
   }
 
   // Subtle Variant
-  &[class*=_subtle] {
+  &[class*="_subtle"] {
     @include subtle;
     // Horizontal Overrides
-    [class*=pb_nav_list_kit_item] {
+    [class*="pb_nav_list_kit_item"][class*="pb_nav_list_item"] {
       margin: 0;
-      [class*=_item_text]{
-        font-weight: $regular;
-      }
-    }
-    [class*=_active] {
-      background-color: $active_light;
-      &[class*=dark] {
-        background-color: rgba($white, $opacity_1);
+      [class*="_item_text"] {
+        font-weight: $regular !important;
       }
-      [class*=_item_link] {
-        [class*=_item_text]{
-          color: $primary;
+      &[class*="_active"] {
+        background-color: $active_light;
+        &[class*="dark"] {
+          background-color: rgba($white, $opacity_1);
+          [class*="_item_text"] {
+            color: $white !important;
+          }
+        }
+        [class*="_item_text"] {
+          color: $primary !important;
         }
       }
     }
   }
 
   // Bold Variant
-  &[class*=_bold] {
+  &[class*="_bold"] {
     @include bold;
     // Horizontal Overrides
-    [class*=pb_nav_list_kit_item] {
+    [class*="pb_nav_list_kit_item"][class*="pb_nav_list_item"] {
       margin: 0;
-      [class*=_item_text]{
+      [class*="_item_text"] {
         font-weight: $regular;
       }
     }
-    [class*=_active] {
-      [class*=_text] {
-        color: $white;
+    [class*="_active"] {
+      [class*="_text"] {
+        color: $white !important;
       }
     }
   }
 
-  &[class*=dark]{
-    [class*=pb_nav_list_kit_item]{
-      [class*=_link]{
-        border-color: rgba($white, $opacity_3);
-      }
-      &[class*=_active] [class*=_link]{
+  &[class*="dark"] {
+    [class*="pb_nav_list_kit_item"][class*="pb_nav_list_item"] {
+      border-color: rgba($white, $opacity_3);
+      &[class*="_active"] {
         border-color: $active_dark;
-        [class*=_text],[class*=_icon]{
+        [class*="_text"],
+        [class*="_icon"] {
           color: $text_dk_default;
         }
       }
-      [class*=_link] {
-        [class*=_text],[class*=_icon]{
-          color: $text_dk_lighter;
-        }
-        &:hover{
-          background-color: rgba($white, $opacity_1);
-          [class*=_icon],[class*=_text] {
-            color: $white;
-          }
+      [class*="_text"],
+      [class*="_icon"] {
+        color: $text_dk_lighter;
+      }
+      &:hover {
+        background-color: rgba($white, $opacity_1);
+        [class*="_icon"],
+        [class*="_text"] {
+          color: $white !important;
         }
       }
     }