playbook_ui 12.37.0.pre.alpha.PLAY951collapsiblenav31062 → 12.37.0.pre.alpha.PLAY951collapsiblenav31074

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

@@ -3,59 +3,188 @@
 @import "../tokens/border_radius";
 @import "../tokens/titles";
 @import "../tokens/typography";
+@import "./mixins";
 
 [class^="pb_nav_list"] {
-  [class*="pb_collapsible_nav_item"] {
-    @mixin collapsible_trail_class {
-      .pb_collapsible_content_kit {
-        margin-left: $space_md - 2 !important;
-        border-left: 2px solid $border_light;
+  .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;
       }
     }
+  }
 
-    @mixin bold_class {
-      .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;
       }
     }
+  }
 
-    &[class*="_active"] {
-      background-color: unset !important;
-      .pb_nav_list_item_link {
-        color: unset !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 {
-        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;
+        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;
+          }
         }
       }
 
-      &:hover {
-        background-color: unset;
+      &.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;
+            }
+          }
+        }
       }
-      .pb_collapsible_main_kit:hover {
-        .pb_nav_list_item_text_collapsible {
-          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;
+          }
         }
       }
+    }
+  }
 
-      .icon_wrapper {
-        &:hover {
-          background-color: mix($primary, $card_light, 40%);
+  //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: $primary !important;
+            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"] {
+    &[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 {
       .pb_nav_list_item_link_collapsible {
@@ -63,12 +192,23 @@
       }
     }
 
-    .pb_collapsible_main_kit:hover {
+    // 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;
-      background-color: mix($primary, $card_light, 10%);
-      .pb_nav_list_item_text_collapsible,
-      svg {
-        color: $primary !important;
+      &:hover {
+        background-color: mix($primary, $card_light, 10%);
+        .pb_nav_list_item_text_collapsible,
+        svg {
+          color: $primary !important;
+        }
       }
     }
 
@@ -82,15 +222,6 @@
       @include collapsible_trail_class;
     }
 
-    &[class*="_bold_text"] {
-      @include bold_class;
-    }
-
-    &[class*="_emphasized"] {
-      @include collapsible_trail_class;
-      @include bold_class;
-    }
-
     .icon_wrapper {
       border-radius: $border_radius_rounded;
       width: $space_sm + 3;
@@ -105,6 +236,12 @@
     }
 
     &.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;
@@ -141,7 +278,6 @@
         }
       }
 
-      &[class*="pb_collapsible_nav_item"][class*="_emphasized"],
       &[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] {

data/app/pb_kits/playbook/pb_nav/_item.tsx

@@ -11,13 +11,13 @@ import Collapsible from '../pb_collapsible/_collapsible'
 type NavItemProps = {
   active?: boolean,
   aria?: { [key: string]: string },
-  bold?: boolean,
-  emphasized?: boolean,
+  fontWeight?: "regular" | "bold" | "bolder",
   children?: React.ReactNode[] | React.ReactNode,
   className?: string,
   collapsible?: boolean,
   data?: object,
   dark?: boolean,
+  fontSize?: "normal" | "small",
   iconLeft?: string,
   iconRight?: string | string[],
   onIconRightClick?: () => void,
@@ -36,13 +36,13 @@ const NavItem = (props: NavItemProps) => {
   const {
     active = false,
     aria = {},
-    bold,
-    emphasized,
+    fontWeight = "regular",
     children,
     className,
     collapsible,
     data = {},
     dark = false,
+    fontSize = "normal",
     iconLeft,
     iconRight,
     onIconRightClick,
@@ -60,12 +60,14 @@ const NavItem = (props: NavItemProps) => {
   const Tag = link ? 'a' : 'div'
   const activeClass = active === true ? 'active' : ''
   const collapsibleTrailClass = collapsible && collapsibleTrail ? 'collapsible_trail' : ''
-  const boldClass = collapsible && bold ? 'bold' : ''
-  const emphasizedClass = collapsible && emphasized ? 'emphasized' : ''
+  const fontSizeClass = fontSize === 'small' ? "font_size_small" : "font_size_normal"
+  const fontWeightClass = fontWeight === 'bold' ? "font_bold" : fontWeight === 'bolder' ? "font_bolder" : "font_regular"
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
   const classes = classnames(buildCss('pb_nav_list_kit_item', activeClass), 
-                  collapsible ? buildCss('pb_collapsible_nav_item', activeClass, collapsibleTrailClass, boldClass, emphasizedClass) : '', 
+                  collapsible ? buildCss('pb_collapsible_nav_item', activeClass, collapsibleTrailClass) : '', 
+                  fontSizeClass,
+                  fontWeightClass,
                   globalProps(props), 
                   className)
 

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

@@ -0,0 +1,5 @@
+@mixin collapsible_trail_class {
+    .pb_collapsible_content_kit {
+      border-color: $border_light;
+    }
+  }

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

@@ -27,7 +27,6 @@
       }
       [class*=_text] {
         flex: 1;
-        font-weight: $regular;
       }
       &:hover {
         background-color: rgba($primary, 0.03);

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

@@ -56,7 +56,7 @@ $selector: ".pb_nav_list";
               color: $primary;
             }
             [class*=_text] {
-              color: $primary;
+              color: $primary !important;
             }
           }
         }

data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav.jsx

@@ -3,9 +3,12 @@ import { Nav, NavItem } from '../..'
 
 const CollapsibleNav = (props) => {
   return (
-    <Nav variant="subtle">
+    <Nav>
       <NavItem
+          active
           collapsible 
+          collapsibleTrail
+          fontWeight="bolder"
           iconLeft="city" 
           iconRight={["plus", "minus"]}
           link="#" 
@@ -29,8 +32,9 @@ const CollapsibleNav = (props) => {
         />
       </NavItem>
       <NavItem 
-          active 
           collapsible 
+          collapsibleTrail
+          fontWeight="bolder"
           iconLeft="theater-masks"
           iconRight={["plus", "minus"]}
           link="#" 
@@ -55,6 +59,8 @@ const CollapsibleNav = (props) => {
       </NavItem>
       <NavItem 
           collapsible 
+          collapsibleTrail
+          fontWeight="bolder"
           iconLeft="city" 
           iconRight={["plus", "minus"]}
           link="#" 

data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_custom.jsx

@@ -18,14 +18,15 @@ const CollapsibleNavCustom = (props) => {
 
   return (
     <>
-      <Nav variant='subtle'>
+      <Nav variant='bold'>
         {navItems.map((text, index) => {
           const [collapsed] = collapsibles[index]
           return (
             <NavItem
                 collapsed={collapsed}
                 collapsible
-                emphasized
+                collapsibleTrail
+                fontWeight="bolder"
                 iconLeft="chevron-down"
                 id={`collapsible-nav-item-${index + 1}`}
                 key={index}

data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_emphasize.html.erb

@@ -1,19 +1,19 @@
 <%= pb_rails("nav", props: { variant: "subtle" }) do %>
-    <%= pb_rails("nav/item", props: { text: "Overview", link: "#", emphasized: true, collapsible: true, icon_left:"city" }) do %>
+    <%= pb_rails("nav/item", props: { text: "Overview", link: "#", font_weight:"bolder", font_size:"small", collapsible: true, icon_left:"city", collapsible_trail: true }) do %>
         <%= pb_rails("nav", props: { variant: "subtle" }) do %>
             <%= pb_rails("nav/item", props: { text: "City", link: "#" }) %>
             <%= pb_rails("nav/item", props: { text: "People", link: "#" }) %>
             <%= pb_rails("nav/item", props: { text: "Business", link: "#" }) %>
         <% end %>
     <% end %>
-    <%= pb_rails("nav/item", props: { text: "Albums", link: "#", emphasized: true, collapsible: true, icon_left: "theater-masks" }) do %>
+    <%= pb_rails("nav/item", props: { text: "Albums", link: "#", font_weight:"bolder", font_size:"small", collapsible: true, icon_left: "theater-masks", collapsible_trail:true }) do %>
         <%= pb_rails("nav", props: { variant: "subtle" }) do %>
             <%= pb_rails("nav/item", props: { text: "Entertainment", link: "#" }) %>
             <%= pb_rails("nav/item", props: { text: "Food", link: "#" }) %>
             <%= pb_rails("nav/item", props: { text: "Style", link: "#" }) %>
         <% end %>
     <% end %>
-    <%= pb_rails("nav/item", props: { text: "Similar Artists", link: "#", emphasized: true, collapsible: true, icon_left: "city" }) do %>
+    <%= pb_rails("nav/item", props: { text: "Similar Artists", link: "#", font_weight:"bolder", font_size:"small", collapsible: true, icon_left: "city", collapsible_trail:true }) do %>
         <%= pb_rails("nav", props: { variant: "subtle" }) do %>
             <%= pb_rails("nav/item", props: { text: "City", link: "#" }) %>
             <%= pb_rails("nav/item", props: { text: "People", link: "#" }) %>

data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_emphasize.jsx

@@ -3,10 +3,13 @@ import { Nav, NavItem } from '../..'
 
 const CollapsibleNavEmphasize = (props) => {
   return (
-    <Nav variant="subtle">
+    <Nav variant="bold">
       <NavItem
-          collapsible 
-          emphasized
+          active 
+          collapsible
+          collapsibleTrail
+          fontSize="small"
+          fontWeight="bolder"
           iconLeft="city" 
           iconRight={["plus", "minus"]}
           link="#" 
@@ -31,7 +34,9 @@ const CollapsibleNavEmphasize = (props) => {
       </NavItem>
       <NavItem 
           collapsible 
-          emphasized
+          collapsibleTrail
+          fontSize="small"
+          fontWeight="bolder"
           iconLeft="theater-masks"
           iconRight={["plus", "minus"]}
           link="#" 
@@ -56,7 +61,9 @@ const CollapsibleNavEmphasize = (props) => {
       </NavItem>
       <NavItem 
           collapsible 
-          emphasized
+          collapsibleTrail
+          fontSize="small"
+          fontWeight="bolder"
           iconLeft="city" 
           iconRight={["plus", "minus"]}
           link="#" 

data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_emphasize.md

@@ -1 +1 @@
-The `emphasized` prop can be passed to NavItem for a more emphasized look for the collapsible Nav.
+The ` navBold` prop can be passed to NavItem

data/app/pb_kits/playbook/pb_nav/item.rb

@@ -4,9 +4,13 @@ module Playbook
   module PbNav
     class Item < Playbook::KitBase
       prop :active, type: Playbook::Props::Boolean, default: false
-      prop :bold, type: Playbook::Props::Boolean, default: false
+      prop :font_size, type: Playbook::Props::Enum,
+                       values: %w[normal small],
+                       default: "normal"
+      prop :font_weight, type: Playbook::Props::Enum,
+                         values: %w[bold regular bolder],
+                         default: "regular"
       prop :collapsible, type: Playbook::Props::Boolean, default: false
-      prop :emphasized, type: Playbook::Props::Boolean, default: false
       prop :link
       prop :text
       prop :collapsible_trail, type: Playbook::Props::Boolean, default: false
@@ -18,9 +22,9 @@ module Playbook
                     default: "_self"
       def classname
         if collapsible
-          "pb_collapsible_nav_item #{generate_classname('pb_nav_list_kit_item', active_class, bold_class, collapsible_trail_class, emphasized_class)}"
+          "#{generate_classname('pb_nav_list_kit_item', active_class)} #{generate_classname('pb_collapsible_nav_item', active_class, collapsible_trail_class)} #{font_size_class} #{font_weight_class}"
         else
-          generate_classname("pb_nav_list_kit_item", active_class)
+          "#{generate_classname('pb_nav_list_kit_item', active_class)} #{font_size_class} #{font_weight_class}"
         end
       end
 
@@ -51,16 +55,23 @@ module Playbook
         active ? "active" : nil
       end
 
-      def bold_class
-        bold ? "bold" : nil
+      def font_weight_class
+        case font_weight
+        when "bold"
+          "font_bold"
+        when "bolder"
+          "font_bolder"
+        else
+          "font_regular"
+        end
       end
 
       def collapsible_trail_class
         collapsible_trail ? "collapsible_trail" : nil
       end
 
-      def emphasized_class
-        emphasized ? "emphasized" : nil
+      def font_size_class
+        font_size === "small" ? "font_size_small" : "font_size_normal"
       end
     end
   end

data/app/pb_kits/playbook/pb_time/_time.tsx

@@ -1,9 +1,9 @@
 import React from "react";
 import classnames from "classnames";
 
-import DateTime from "../pb_kit/dateTime";
 import { buildCss } from "../utilities/props";
 import { globalProps, GlobalProps } from "../utilities/globalProps";
+import DateTime from '../pb_kit/dateTime';
 
 import Body from "../pb_body/_body";
 import Caption from "../pb_caption/_caption";
@@ -13,7 +13,7 @@ type TimeProps = {
   align?: "left" | "center" | "right";
   className?: string | string[];
   data?: string;
-  date: string;
+  date: Date;
   dark?: boolean;
   id?: string;
   showIcon?: boolean;
@@ -41,8 +41,6 @@ const Time = (props: TimeProps) => {
     className
   );
 
-  const dateTimestamp = new DateTime({ value: date, zone: timeZone });
-
   return (
     <div className={classes}>
       {showIcon && (
@@ -70,18 +68,18 @@ const Time = (props: TimeProps) => {
             )
       )}
 
-      <time dateTime={date}>
+      <time dateTime={date.toString()}>
         <span>
           {unstyled
             ? (
                 <>
                   <span>
-                    {dateTimestamp.toTimeWithMeridian()}
+                    {DateTime.toTimeWithMeridiem(date, timeZone)}
                   </span>
                   {" "}
                   {showTimezone && (
                     <span>
-                      {dateTimestamp.toTimezone()}
+                      {DateTime.toTimeZone(date, timeZone)}
                     </span>
                   )}
                 </>
@@ -92,13 +90,13 @@ const Time = (props: TimeProps) => {
                     <Body
                         className="pb_time"
                         tag="span"
-                        text={dateTimestamp.toTimeWithMeridian()}
+                        text={DateTime.toTimeWithMeridiem(date, timeZone)}
                     />{" "}
                     {showTimezone && (
                       <Body
                           color="light"
                           tag="span"
-                          text={dateTimestamp.toTimezone()}
+                          text={DateTime.toTimeZone(date, timeZone)}
                       />
                     )}
                   </>
@@ -108,13 +106,13 @@ const Time = (props: TimeProps) => {
                     <Caption
                         color="light"
                         tag="span"
-                        text={dateTimestamp.toTimeWithMeridian()}
+                        text={DateTime.toTimeWithMeridiem(date, timeZone)}
                     />{" "}
                     {showTimezone && (
                       <Caption
                           color="light"
                           tag="span"
-                          text={dateTimestamp.toTimezone()}
+                          text={DateTime.toTimeZone(date, timeZone)}
                       />
                     )}
                   </>