RubyGems - playbook_ui - Versions diffs - 12.36.0 → 12.37.0.pre.alpha.PLAY951collapsiblenav31073 - Mend

playbook_ui 12.36.0 → 12.37.0.pre.alpha.PLAY951collapsiblenav31073

Files changed (88) hide show

data/app/pb_kits/playbook/pb_label_value/_label_value.tsx CHANGED Viewed

@@ -1,8 +1,8 @@
 import React from "react";
 import classnames from "classnames";
-import DateTime from "../pb_kit/dateTime";
 import { buildAriaProps, buildCss, buildDataProps } from "../utilities/props";
 import { globalProps } from "../utilities/globalProps";
+import DateTime from '../pb_kit/dateTime';
 import Body from "../pb_body/_body";
 import Caption from "../pb_caption/_caption";
@@ -26,9 +26,9 @@ type LabelValueProps = {
   title?: string;
 };
-const dateString = (value: DateTime) => {
-  const month = value.toMonthNum();
-  const day = value.toDay();
+const dateString = (value: Date) => {
+  const month = DateTime.toMonthNum(value);
+  const day = DateTime.toDay(value);
   return ` · ${month}/${day}`;
 };
@@ -52,7 +52,6 @@ const LabelValue = (props: LabelValueProps) => {
   const ariaProps = buildAriaProps(aria);
   const dataProps = buildDataProps(data);
-  const formattedDate = new DateTime({ value: date });
   const variantClass = variant === "details" ? "details" : "";
   const classes = classnames(
     buildCss("pb_label_value_kit", variantClass),
@@ -62,59 +61,81 @@ const LabelValue = (props: LabelValueProps) => {
   return (
     <div
-      {...ariaProps}
-      {...dataProps}
-      className={classes}
-      id={id}
-      title={title}
+        {...ariaProps}
+        {...dataProps}
+        className={classes}
+        id={id}
+        title={title}
     >
-      <Caption dark={dark} text={label} />
+      <Caption dark={dark}
+          text={label}
+      />
       {variant === "details" ? (
-        <Flex inline vertical="center">
+        <Flex inline
+            vertical="center"
+        >
           {icon && (
-            <Body color="light" dark={dark} marginRight="xs">
-              <Icon dark={dark} fixedWidth icon={icon} />
+            <Body color="light"
+                dark={dark}
+                marginRight="xs"
+            >
+              <Icon dark={dark}
+                  fixedWidth
+                  icon={icon}
+              />
             </Body>
           )}
           {description && (
             <Body
-              color="light"
-              dark={dark}
-              marginRight="xs"
-              text={description}
+                color="light"
+                dark={dark}
+                marginRight="xs"
+                text={description}
             />
           )}
           {active === true ? (
-            <Flex inline vertical="center">
+            <Flex inline
+                vertical="center"
+            >
               {title && (
-                <Title dark={dark} size={4} text={title} variant="link" />
+                <Title dark={dark}
+                    size={4}
+                    text={title}
+                    variant="link"
+                />
               )}
               {date && (
                 <Title
-                  dark={dark}
-                  marginLeft="xs"
-                  size={4}
-                  text={" " + dateString(formattedDate)}
-                  variant="link"
+                    dark={dark}
+                    marginLeft="xs"
+                    size={4}
+                    text={" " + dateString(date)}
+                    variant="link"
                 />
               )}
             </Flex>
           ) : (
             <>
-              {title && <Title dark={dark} size={4} text={title} />}
+              {title && <Title dark={dark}
+                  size={4}
+                  text={title}
+                        />
+              }
               {date && (
                 <Title
-                  dark={dark}
-                  marginLeft="xs"
-                  size={4}
-                  text={" " + dateString(formattedDate)}
+                    dark={dark}
+                    marginLeft="xs"
+                    size={4}
+                    text={" " + dateString(date)}
                 />
               )}
             </>
           )}
         </Flex>
       ) : (
-        <Body dark={dark} text={value} />
+        <Body dark={dark}
+            text={value}
+        />
       )}
     </div>
   );

data/app/pb_kits/playbook/pb_message/_message.tsx CHANGED Viewed

@@ -25,7 +25,7 @@ type MessageProps = {
   label?: string,
   message: string,
   timestamp?: string,
-  timestampObject?: string,
+  timestampObject?: Date,
   timezone?: string,
   alignTimestamp?: string,
 }
@@ -62,50 +62,50 @@ const Message = (props: MessageProps) => {
   return (
     <div
-      {...ariaProps}
-      {...dataProps}
-      className={classes}
-      id={id}
+        {...ariaProps}
+        {...dataProps}
+        className={classes}
+        id={id}
     >
       {shouldDisplayAvatar &&
         <Avatar
-          imageUrl={avatarUrl}
-          name={avatarName}
-          size="xs"
-          status={avatarStatus}
+            imageUrl={avatarUrl}
+            name={avatarName}
+            size="xs"
+            status={avatarStatus}
         />
       }
       <div className="content_wrapper">
         <Flex
-          justify={alignTimestamp === 'left' ? 'none' : 'between'}
-          orientation="row"
+            justify={alignTimestamp === 'left' ? 'none' : 'between'}
+            orientation="row"
         >
           {label &&
             <Title
-              className="message_title"
-              size={4}
-              text={label}
+                className="message_title"
+                size={4}
+                text={label}
             />
           }
           <Timestamp
-            className={`pull-${alignTimestamp} ${timestampObject ? 'message_humanized_time' : null}`}
-            text={timestamp}
-            timestamp={''}
-            timezone={timezone}
+              className={`pull-${alignTimestamp} ${timestampObject ? 'message_humanized_time' : null}`}
+              text={timestamp}
+              timestamp={''}
+              timezone={timezone}
           />
           {timestampObject &&
             <Timestamp
-              className={`pull-${alignTimestamp} message_timestamp`}
-              text={''}
-              timestamp={timestampObject}
-              timezone={timezone}
+                className={`pull-${alignTimestamp} message_timestamp`}
+                text={''}
+                timestamp={timestampObject}
+                timezone={timezone}
             />
           }
         </Flex>
         {message &&
           <Body
-            className="pb_message_body"
-            text={message}
+              className="pb_message_body"
+              text={message}
           />
         }
         {children}

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

@@ -1,6 +1,276 @@
+@import "../tokens/spacing";
+@import "../tokens/colors";
+@import "../tokens/border_radius";
+@import "../tokens/titles";
+@import "../tokens/typography";
+@import "./mixins";
 [class^="pb_nav_list"] {
-  .pb_collapsible_main_kit,
-  .pb_collapsible_content_kit {
-    padding: 0 !important;
+  .font_size_small {
+    .pb_nav_list_item_text,
+    .pb_nav_list_item_text_collapsible {
+      font-size: $font_small !important;
+    }
+  }
+  .font_bold {
+    .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_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;
+      }
+      &[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;
+        .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;
+            }
+          }
+        }
+      }
+    }
+  }
+  //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;
+          }
+        }
+      }
+    }
+  }
+  //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: $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 {
+        background-color: unset !important;
+      }
+    }
+    // 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;
+      &:hover {
+        background-color: mix($primary, $card_light, 10%);
+        .pb_nav_list_item_text_collapsible,
+        svg {
+          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;
+      height: $space_sm + 3;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-right: $space_xs;
+      &:hover {
+        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;
+        }
+      }
+      &[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;
+      }
+      .pb_nav_list_kit_item:hover {
+        background-color: #ffffff33;
+        color: $white;
+      }
+      .pb_icon_kit {
+        color: $text_dk_light;
+      }
+      .pb_collapsible_main_kit:hover {
+        background-color: mix($white, $card_dark, 20%);
+        .pb_nav_list_item_text_collapsible,
+        svg {
+          color: $white !important;
+        }
+      }
+      .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 {
+          border-color: $border_dark;
+        }
+      }
+    }
   }
 }

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

@@ -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 CHANGED Viewed

@@ -11,43 +11,73 @@ import Collapsible from '../pb_collapsible/_collapsible'
 type NavItemProps = {
   active?: boolean,
   aria?: { [key: string]: string },
+  fontWeight?: "regular" | "bold",
   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?: React.MouseEventHandler<HTMLElement>,
+  onClick?: () => void,
   target?: '_blank' | '_self' | '_parent' | '_top',
   text: string,
+  collapsibleTrail?: boolean,
+  collapsed?: boolean
 } & GlobalProps
 const NavItem = (props: NavItemProps) => {
   const {
     active = false,
     aria = {},
+    fontWeight = "regular",
     children,
     className,
     collapsible,
     data = {},
+    dark = false,
+    fontSize = "normal",
     iconLeft,
     iconRight,
+    onIconRightClick,
+    onIconLeftClick,
     id,
     imageUrl,
     link,
     onClick = () => { },
     target = '_self',
     text = '',
+    collapsibleTrail,
+    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" : "font_regular"
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
-  const classes = classnames(buildCss('pb_nav_list_kit_item', activeClass), globalProps(props), className)
+  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()
+    }
+  }
   return (
     <li
@@ -58,18 +88,24 @@ const NavItem = (props: NavItemProps) => {
     >
       {
         collapsible ? (
-          <Collapsible icon={iconRight ? iconRight : ['plus','minus']} iconSize="xs">
-          <Collapsible.Main>
+          <Collapsible icon={iconRight ? iconRight : ['plus','minus']}
+            iconSize="xs"
+            id={id}
+            collapsed={collapsed}
+            onIconClick={onIconRightClick}
+            onClick={onClick}
+          >
+          <Collapsible.Main dark={dark}>
           <Tag
-          className="pb_nav_list_item_link"
+          className="pb_nav_list_item_link_collapsible"
           href={link}
-          onClick={onClick}
           target={target}
         >
           {imageUrl &&
             <div
-              className="pb_nav_list_item_icon_section"
+              className="pb_nav_list_item_icon_section_collapsible"
               key={imageUrl}
+              onClick={(e)=>handleIconClick(e)}
             >
               <Image
                 className="pb_nav_img_wrapper"
@@ -80,17 +116,18 @@ const NavItem = (props: NavItemProps) => {
           {iconLeft &&
             <div
-              className="pb_nav_list_item_icon_section"
+              className="pb_nav_list_item_icon_section_collapsible"
               key={iconLeft}
+              onClick={(e)=>handleIconClick(e)}
             >
               <Icon
-                className="pb_nav_list_item_icon_left"
+                className="pb_nav_list_item_icon_left_collapsible"
                 fixedWidth
                 icon={iconLeft}
               />
             </div>
           }
-           <span className="pb_nav_list_item_text">
+           <span className="pb_nav_list_item_text_collapsible">
             {text}
           </span>
         </Tag>

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

@@ -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 CHANGED Viewed

@@ -27,14 +27,7 @@
       }
       [class*=_text] {
         flex: 1;
-        font-weight: $regular;
       }
-    }
-    &[class*=_active] [class*=_link] {
-      @include pb_title_4;
-      color: $primary;
-      letter-spacing: normal;
-    }
       &:hover {
         background-color: rgba($primary, 0.03);
         [class*=_icon] {
@@ -44,5 +37,11 @@
           color: $primary;
         }
       }
+    }
+    &[class*=_active] [class*=_link] {
+      @include pb_title_4;
+      color: $primary;
+      letter-spacing: normal;
+    }
   }
 }

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

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