playbook_ui 12.39.0.pre.alpha.PLAY966collapsiblenav41115 → 12.39.0.pre.alpha.salesbookmismatchingdate1114

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: bf4167e4358045e1ef6c706b26d0e1893336ef2e673212b907abf2e2bfd7d37f
-  data.tar.gz: f43205d27b1ceffd14ba706a9faf3285b650e220a71e889a78c0f55d41356737
+  metadata.gz: 53e1efed14125432de973864540db434bd15d7ca728af5bfd7facb459c42f3a5
+  data.tar.gz: 8ea21f9bdf376162e82ab98a9d14b3f186e8438d81a979faa663ffad1f3b57f7
 SHA512:
-  metadata.gz: 2f2ecc613d9a31db4877c93101a664ddf9922ad0b46361971792336e51ee8f36f9b5aaa325893b26530a6ccf1b2dfb13af5f8f87309ad3e0c8bdc6501d8214da
-  data.tar.gz: c4b92e867f72479651eee9d82afa551fd717fd66d7ced9a4997dbcec133d6e3b1e2916f5197ccc5e9c6c9b8c8a16db1931f6aca42dd758427e5a2c076abfc7f1
+  metadata.gz: 5b78591f4053df9f189134735a3689c5e010f823220d0217c65f222240a1aed961f8cdb79df3f91e771f7336717031dfd2594064388e3f9478549d0281f78724
+  data.tar.gz: 93d06173adcc6db7672b2580de009a31d530c0135802524b0d5514d09939737230c38dd845f47c862a9be503eb6c42916372498afc5481d54f7c2afe495f6644

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

@@ -17,6 +17,7 @@ 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 {
@@ -26,6 +27,7 @@ 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 {
@@ -34,52 +36,53 @@ 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.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(undefined, { 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()
+      const date = new Date(formatDate(newDate).toLocaleString(undefined, { timeZone }));
+      return date.getFullYear()
     } else {
-      const date = new Date(newDate)
-      return date.getUTCFullYear()
+      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];
   } else {
@@ -88,21 +91,23 @@ 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 => {
@@ -111,8 +116,8 @@ 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 => {

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

@@ -116,9 +116,6 @@
             font-weight: $regular !important;
           }
         }
-          .icon_wrapper:hover {
-            background-color: mix($primary, $card_light, 40%);
-          }
       }
     }
   }
@@ -128,25 +125,30 @@
     [class*="pb_collapsible_nav_item"] {
       &[class*="_active"] {
         .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 {
-        &[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;
+          }
+        }
+
+        .icon_wrapper {
+          &:hover {
+            background-color: mix($primary, $card_light, 40%);
+            .pb_icon_kit {
+              color: $primary !important;
             }
           }
         }
@@ -195,6 +197,7 @@
     // 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 {
@@ -271,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*="pb_collapsible_nav_item"][class*="_collapsible_trail"] {
         .pb_collapsible_content_kit {
-          &::after {
-            background-color: $border_dark;
-          }
+          border-color: $border_dark;
         }
       }
     }

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

@@ -44,7 +44,7 @@ $selector: ".pb_nav_list";
 
       [class*=_text] {
         font-size: $font_base;
-        // font-weight: $bold;
+        font-weight: $bold;
         color: $text_lt_default;
       }
 

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

@@ -1,71 +1,42 @@
-import React from "react";
-import classnames from "classnames";
+import React from 'react'
+import classnames from 'classnames'
 
-import { buildAriaProps, buildCss, buildDataProps } from "../utilities/props";
-import { globalProps, GlobalProps } from "../utilities/globalProps";
+import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
+import { globalProps, GlobalProps } from '../utilities/globalProps'
 
-import Icon from "../pb_icon/_icon";
-import Image from "../pb_image/_image";
-import Collapsible from "../pb_collapsible/_collapsible";
-import { NavChildProps } from "./navTypes";
-import { Spacing } from "../types";
+import Icon from '../pb_icon/_icon'
+import Image from '../pb_image/_image'
+import Collapsible from '../pb_collapsible/_collapsible'
 
 type NavItemProps = {
-  active?: boolean;
-  aria?: { [key: string]: string };
-  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;
-  onIconLeftClick?: () => void;
-  id?: string;
-  imageUrl?: string;
-  link?: string;
-  onClick?: () => void;
-  target?: "_blank" | "_self" | "_parent" | "_top";
-  text: string;
-  collapsibleTrail?: boolean;
-  collapsed?: boolean;
-  paddingBottom?: Spacing;
-  paddingTop?: Spacing;
-  paddingLeft?: Spacing;
-  paddingRight?: Spacing;
-  paddingX?: Spacing;
-  paddingY?: Spacing;
-  padding?: Spacing;
-  margin?: Spacing,
-  marginBottom?: Spacing,
-  marginTop?: Spacing,
-  marginRight?: Spacing,
-  marginLeft?: Spacing,
-  marginX?: Spacing,
-  marginY?: Spacing,
-  orientation?: "vertical" | "horizontal";
-  variant?: "normal" | "subtle";
-} & GlobalProps;
+  active?: boolean,
+  aria?: { [key: string]: string },
+  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,
+  onIconLeftClick?: () => void,
+  id?: string,
+  imageUrl?: string,
+  link?: string,
+  onClick?: () => void,
+  target?: '_blank' | '_self' | '_parent' | '_top',
+  text: string,
+  collapsibleTrail?: boolean,
+  collapsed?: boolean
+} & GlobalProps
 
 const NavItem = (props: NavItemProps) => {
-  
-  const fontWeightDefault = (orientation: string, variant: string) => {
-    return orientation === "horizontal" && variant === "subtle"
-      ? "regular "
-      : orientation === "horizontal" && variant === "normal"
-      ? "bold"
-      : "regular";
-  };
-
   const {
     active = false,
     aria = {},
-    orientation,
-    variant,
-    fontWeight = fontWeightDefault(orientation, variant),
+    fontWeight = "regular",
     children,
     className,
     collapsible,
@@ -79,188 +50,129 @@ const NavItem = (props: NavItemProps) => {
     id,
     imageUrl,
     link,
-    onClick = () => {},
-    target = "_self",
-    text = "",
+    onClick = () => { },
+    target = '_self',
+    text = '',
     collapsibleTrail,
-    collapsed,
-    itemSpacing,
-    padding,
-    paddingX,
-    paddingY,
-    paddingBottom,
-    paddingTop,
-    paddingLeft,
-    paddingRight,
-    margin,
-    marginBottom,
-    marginTop,
-    marginRight,
-    marginLeft,
-    marginX,
-    marginY
-  } = props;
-
-  const filteredProps = { ...props };
-  [
-    "padding",
-    "paddingX",
-    "paddingY",
-    "paddingBottom",
-    "paddingTop",
-    "paddingRight",
-    "paddingLeft",
-    "margin",
-    "marginX",
-    "marginY",
-    "marginBottom",
-    "marginTop",
-    "marginRight",
-    "marginLeft",
-  ].forEach((prop) => delete filteredProps[prop]);
-
-  const Tag = link ? "a" : "div";
-  const activeClass = active === true ? "active" : "";
-  const collapsibleTrailClass =
-    collapsible && collapsibleTrail ? "collapsible_trail" : "";
-  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)
-      : "",
-    fontSizeClass,
-    fontWeightClass,
-    globalProps(filteredProps),
-    className
-  );
-
-  const spacingProps = {
-    padding,
-    paddingBottom,
-    paddingTop,
-    paddingRight,
-    paddingLeft,
-    paddingX,
-    paddingY,
-    margin,
-    marginBottom,
-    marginTop,
-    marginRight,
-    marginLeft,
-    marginX,
-    marginY,
-  };
-
-  const finalItemSpacing = {
-    ...(itemSpacing || {}),
-    ...Object.entries(spacingProps).reduce((acc: any, [prop, value]) => {
-      if (value) {
-        acc[prop] = value;
-      }
-      return acc;
-    }, {}),
-  };
-
-  const tagClasses = classnames(
-    collapsible ? "pb_nav_list_item_link_collapsible" : "pb_nav_list_item_link",
-    globalProps({ ...finalItemSpacing })
-  );
-
-  const handleIconClick = (e: any) => {
+    collapsed
+  } = props
+
+  const Tag = link ? 'a' : 'div'
+  const activeClass = active === true ? 'active' : ''
+  const collapsibleTrailClass = collapsible && collapsibleTrail ? 'collapsible_trail' : ''
+  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) : '', 
+                  fontSizeClass,
+                  fontWeightClass,
+                  globalProps(props), 
+                  className)
+
+
+  const handleIconClick = (e:any) => {
     if (onIconLeftClick) {
-      e.stopPropagation();
-      onIconLeftClick();
-    }
-  };
-
-  // Map over the children and clone them with itemSpacing prop so nested navItems all get itemSpacing
-  const childrenWithProps = React.Children.map(children, (child) => {
-    if (React.isValidElement(child)) {
-      const childProps: NavChildProps = {
-        itemSpacing: itemSpacing,
-      };
-      return React.cloneElement(child, childProps);
+    e.stopPropagation();
+    onIconLeftClick()
     }
-    return child;
-  });
+  }
 
   return (
-    <li {...ariaProps} {...dataProps} className={classes} id={id}>
-      {collapsible ? (
-        <Collapsible
-          icon={iconRight ? iconRight : ["plus", "minus"]}
-          iconSize="xs"
-          id={id}
-          collapsed={collapsed}
-          onIconClick={onIconRightClick}
-          onClick={onClick}
-        >
+    <li
+      {...ariaProps}
+      {...dataProps}
+      className={classes}
+      id={id}
+    >
+      {
+        collapsible ? (
+          <Collapsible icon={iconRight ? iconRight : ['plus','minus']} 
+            iconSize="xs" 
+            id={id}
+            collapsed={collapsed}
+            onIconClick={onIconRightClick}
+            onClick={onClick}
+          >
           <Collapsible.Main dark={dark}>
-            <Tag className={tagClasses} href={link} target={target}>
-              {imageUrl && (
-                <div
-                  className="pb_nav_list_item_icon_section_collapsible"
-                  key={imageUrl}
-                  onClick={(e) => handleIconClick(e)}
-                >
-                  <Image className="pb_nav_img_wrapper" url={imageUrl} />
-                </div>
-              )}
-
-              {iconLeft && (
-                <div
-                  className="pb_nav_list_item_icon_section_collapsible"
-                  key={iconLeft}
-                  onClick={(e) => handleIconClick(e)}
-                >
-                  <Icon
-                    className="pb_nav_list_item_icon_left_collapsible"
-                    fixedWidth
-                    icon={iconLeft}
-                  />
-                </div>
-              )}
-              <span className="pb_nav_list_item_text_collapsible">{text}</span>
-            </Tag>
-          </Collapsible.Main>
-          <Collapsible.Content>{childrenWithProps}</Collapsible.Content>
+          <Tag
+          className="pb_nav_list_item_link_collapsible"
+          href={link}
+          target={target}
+        >
+          {imageUrl &&
+            <div
+              className="pb_nav_list_item_icon_section_collapsible"
+              key={imageUrl}
+              onClick={(e)=>handleIconClick(e)}
+            >
+              <Image
+                className="pb_nav_img_wrapper"
+                url={imageUrl}
+              />
+            </div>
+          }
+  
+          {iconLeft &&
+            <div
+              className="pb_nav_list_item_icon_section_collapsible"
+              key={iconLeft}
+              onClick={(e)=>handleIconClick(e)}
+            >
+              <Icon
+                className="pb_nav_list_item_icon_left_collapsible"
+                fixedWidth
+                icon={iconLeft}
+              />
+            </div>
+          }
+           <span className="pb_nav_list_item_text_collapsible">
+            {text}
+          </span>
+        </Tag>
+        </Collapsible.Main>
+        <Collapsible.Content>
+        {children}
+        </Collapsible.Content>
         </Collapsible>
-      ) : (
+        ) : (
         <Tag
-          className={tagClasses}
+          className="pb_nav_list_item_link"
           href={link}
           onClick={onClick}
           target={target}
         >
-          {imageUrl && (
-            <div className="pb_nav_list_item_icon_section" key={imageUrl}>
-              <Image className="pb_nav_img_wrapper" url={imageUrl} />
+          {imageUrl &&
+            <div
+              className="pb_nav_list_item_icon_section"
+              key={imageUrl}
+            >
+              <Image
+                className="pb_nav_img_wrapper"
+                url={imageUrl}
+              />
             </div>
-          )}
-
-          {iconLeft && (
-            <div className="pb_nav_list_item_icon_section" key={iconLeft}>
+          }
+  
+          {iconLeft &&
+            <div
+              className="pb_nav_list_item_icon_section"
+              key={iconLeft}
+            >
               <Icon
                 className="pb_nav_list_item_icon_left"
                 fixedWidth
                 icon={iconLeft}
               />
             </div>
-          )}
-
-          <span className="pb_nav_list_item_text">{text || children}</span>
-
-          {iconRight && (
+          }
+  
+          <span className="pb_nav_list_item_text">
+            {text || children}
+          </span>
+  
+          {iconRight &&
             <div
               className="pb_nav_list_item_icon_section"
               key={iconRight as string}
@@ -271,11 +183,12 @@ const NavItem = (props: NavItemProps) => {
                 icon={iconRight as string}
               />
             </div>
-          )}
+          }
         </Tag>
-      )}
+        )
+      }
     </li>
-  );
-};
+  )
+}
 
-export default NavItem;
+export default NavItem

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

@@ -1,14 +1,5 @@
 @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;
-      }
+      border-color: $border_light;
     }
   }