RubyGems - playbook_ui - Versions diffs - 12.36.0.pre.alpha.PLAY936momentjs1058 → 12.36.0.pre.alpha.PLAY942collapsiblenav21035 - Mend

playbook_ui 12.36.0.pre.alpha.PLAY936momentjs1058 → 12.36.0.pre.alpha.PLAY942collapsiblenav21035

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (66) hide show

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

@@ -25,7 +25,7 @@ type MessageProps = {
   label?: string,
   message: string,
   timestamp?: string,
-  timestampObject?: Date,
+  timestampObject?: string,
   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,27 @@
+@import "../tokens/spacing";
+@import "../tokens/colors";
+@import "../tokens/border_radius";
 [class^="pb_nav_list"] {
+  .pb_collapsible_nav_item {
   .pb_collapsible_main_kit,
-  .pb_collapsible_content_kit {
+  .pb_collapsible_content_kit,
+  .pb_collapsible_kit {
     padding: 0 !important;
   }
+  .icon_wrapper {
+    border-radius: $border_radius_rounded;
+    width: 19px;
+    height: 19px;
+    display:flex;
+    align-items: center;
+    justify-content: center;
+    margin-right: $space_xs;
+    &:hover {
+      background-color: rgba($primary_action, $opacity_3);
+    }
+  }
+}
 }

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

@@ -14,15 +14,19 @@ type NavItemProps = {
   children?: React.ReactNode[] | React.ReactNode,
   className?: string,
   collapsible?: boolean,
+  collapsibleClick?: () => void,
   data?: object,
   iconLeft?: string,
   iconRight?: string | string[],
+  iconRightClick?: () => void,
+  iconLeftClick?: () => void,
   id?: string,
   imageUrl?: string,
   link?: string,
   onClick?: React.MouseEventHandler<HTMLElement>,
   target?: '_blank' | '_self' | '_parent' | '_top',
   text: string,
+  toggleCollapsed?: any
 } & GlobalProps
 const NavItem = (props: NavItemProps) => {
@@ -32,22 +36,34 @@ const NavItem = (props: NavItemProps) => {
     children,
     className,
     collapsible,
+    collapsibleClick,
     data = {},
     iconLeft,
     iconRight,
+    iconRightClick,
+    iconLeftClick,
     id,
     imageUrl,
     link,
     onClick = () => { },
     target = '_self',
     text = '',
+    toggleCollapsed
   } = props
   const Tag = link ? 'a' : 'div'
   const activeClass = active === true ? 'active' : ''
   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 ? 'pb_collapsible_nav_item' : '', globalProps(props), className)
+  const handleIconClick = (e:any) => {
+    if (iconLeftClick) {
+    e.stopPropagation();
+    iconLeftClick()
+    }
+  }
   return (
     <li
@@ -58,7 +74,13 @@ const NavItem = (props: NavItemProps) => {
     >
       {
         collapsible ? (
-          <Collapsible icon={iconRight ? iconRight : ['plus','minus']} iconSize="xs">
+          <Collapsible icon={iconRight ? iconRight : ['plus','minus']}
+            iconSize="xs"
+            id={id}
+            collapsed={toggleCollapsed}
+            iconClick={iconRightClick}
+            onClick={collapsibleClick}
+          >
           <Collapsible.Main>
           <Tag
           className="pb_nav_list_item_link"
@@ -70,6 +92,7 @@ const NavItem = (props: NavItemProps) => {
             <div
               className="pb_nav_list_item_icon_section"
               key={imageUrl}
+              onClick={(e)=>handleIconClick(e)}
             >
               <Image
                 className="pb_nav_img_wrapper"
@@ -82,6 +105,7 @@ const NavItem = (props: NavItemProps) => {
             <div
               className="pb_nav_list_item_icon_section"
               key={iconLeft}
+              onClick={(e)=>handleIconClick(e)}
             >
               <Icon
                 className="pb_nav_list_item_icon_left"

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

@@ -1,83 +1,63 @@
-import React from "react";
-import Nav from "../_nav";
-import NavItem from "../_item";
+import React from "react"
+import { Nav, NavItem, useCollapsible } from "../.."
 const CollapsibleNav = (props) => {
+  const navItems = ["Overview", "Albums", "Similar Artists"]
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const collapsibles = navItems.map(() => useCollapsible(true))
+  const handleMainClick = (index) => {
+    collapsibles.forEach(([, , setCollapsed], idx) => {
+      if (idx === index) {
+        setCollapsed(false)
+      } else {
+        setCollapsed(true)
+      }
+    })
+  }
+  const handleIconRightClick = (index) => {
+    const [isCollapsed, setCollapsed] = collapsibles[index]
+    setCollapsed(!isCollapsed)
+  }
   return (
-    <Nav variant="subtle">
-      <NavItem
-          collapsible
-          iconLeft="city"
-          link="#"
-          text="Overview"
-          {...props}
-      >
-        <NavItem
-            link="#"
-            text="City"
-            {...props}
-        />
-        <NavItem
-            link="#"
-            text="People"
-            {...props}
-        />
-        <NavItem
-            link="#"
-            text="Business"
-            {...props}
-        />
-      </NavItem>
-      <NavItem
-          active
-          collapsible
-          iconLeft="theater-masks"
-          link="#"
-          text="Albums"
-          {...props}
-      >
-        <NavItem
-            link="#"
-            text="Entertainment"
-            {...props}
-        />
-        <NavItem
-            link="#"
-            text="Food"
-            {...props}
-        />
-        <NavItem
-            link="#"
-            text="Style"
-            {...props}
-        />
-      </NavItem>
-      <NavItem
-          collapsible
-          iconLeft="city"
-          link="#"
-          text="Similar Artists"
-          {...props}
-      >
-        <NavItem
-            link="#"
-            text="City"
-            {...props}
-        />
-        <NavItem
-            link="#"
-            text="People"
-            {...props}
-        />
-        <NavItem
-            link="#"
-            text="Business"
-            {...props}
-        />
-      </NavItem>
-    </Nav>
-  );
-};
+    <>
+      <Nav variant='subtle'>
+        {navItems.map((text, index) => {
+          const [collapsed] = collapsibles[index]
+          return (
+            <NavItem
+                collapsible
+                collapsibleClick={() => handleMainClick(index)}
+                iconLeft="chevron-down"
+                iconRightClick={() => handleIconRightClick(index)}
+                id={`collapsible-nav-item-${index + 1}`}
+                key={index}
+                link="#"
+                text={text}
+                toggleCollapsed={collapsed}
+                {...props}
+            >
+              <NavItem link="#"
+                  text="City"
+                  {...props}
+              />
+              <NavItem link="#"
+                  text="People"
+                  {...props}
+              />
+              <NavItem link="#"
+                  text="Business"
+                  {...props}
+              />
+            </NavItem>
+          );
+        })}
+      </Nav>
+    </>
+  )
+}
-export default CollapsibleNav;
+export default CollapsibleNav

data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_custom_icons.jsx CHANGED Viewed

@@ -1,7 +1,5 @@
 import React from "react";
-import Nav from "../_nav";
-import NavItem from "../_item";
+import { Nav, NavItem } from '../..'
 const CollapsibleNavCustomIcons = (props) => {
   return (
@@ -9,7 +7,7 @@ const CollapsibleNavCustomIcons = (props) => {
       <NavItem
           collapsible
           iconLeft="city"
-          iconRight={["chevron-down", "chevron-up"]}
+          iconRight={["plus", "minus"]}
           link="#"
           text="Overview"
           {...props}
@@ -34,7 +32,7 @@ const CollapsibleNavCustomIcons = (props) => {
           active
           collapsible
           iconLeft="theater-masks"
-          iconRight={["chevron-down", "chevron-up"]}
+          iconRight={["plus", "minus"]}
           link="#"
           text="Albums"
           {...props}
@@ -58,7 +56,7 @@ const CollapsibleNavCustomIcons = (props) => {
       <NavItem
           collapsible
           iconLeft="city"
-          iconRight={["chevron-down", "chevron-up"]}
+          iconRight={["plus", "minus"]}
           link="#"
           text="Similar Artists"
           {...props}

data/app/pb_kits/playbook/pb_nav/docs/example.yml CHANGED Viewed

@@ -25,8 +25,8 @@ examples:
   - borderless_nav: No Borders
   - subtle_nav: Subtle Variant
   - subtle_with_icons_nav: Subtle With Icons
-  # - collapsible_nav: Subtle With Collapsible
-  # - collapsible_nav_custom_icons: Subtle With Collapsible (Custom Toggle Icons)
+  - collapsible_nav: Subtle With Collapsible
+  - collapsible_nav_custom_icons: Subtle With Collapsible (No custom toggling)
   - subtle_no_highlight_nav: Subtle No Highlight
   - bold_vertical_nav: Bold Variant
   - horizontal_nav: Horizontal Nav

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

@@ -14,7 +14,11 @@ module Playbook
                     values: %w[_blank _self _parent _top],
                     default: "_self"
       def classname
-        generate_classname("pb_nav_list_kit_item", active_class)
+        if collapsible
+          "pb_collapsible_nav_item #{generate_classname('pb_nav_list_kit_item', active_class)}"
+        else
+          generate_classname("pb_nav_list_kit_item", active_class)
+        end
       end
       def tag

data/app/pb_kits/playbook/pb_pill/docs/example.yml CHANGED Viewed

@@ -11,8 +11,3 @@ examples:
   - pill_default: Default
   - pill_variants: Variants
   - pill_example: Example
-  swift:
-  - pill_default_swift: Default
-  - pill_variants_swift: Variants
-  - pill_props_swift: ""

data/app/pb_kits/playbook/pb_radio/docs/example.yml CHANGED Viewed

@@ -12,14 +12,3 @@ examples:
   - radio_custom: Custom
   - radio_error: With Error
   - radio_alignment: Alignment
-  swift:
-  - radio_default_swift: Default
-  - radio_custom_swift: Custom
-  - radio_error_swift: With Error
-  - radio_orientation_swift: Orientation
-  - radio_alignment_swift: Alignment
-  - radio_spacing_swift: Spacing
-  - radio_padding_swift: Padding
-  - radio_subtitle_swift: Subtitle
-  - radio_props_swift: ""

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

@@ -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: Date;
+  date: string;
   dark?: boolean;
   id?: string;
   showIcon?: boolean;
@@ -41,6 +41,8 @@ const Time = (props: TimeProps) => {
     className
   );
+  const dateTimestamp = new DateTime({ value: date, zone: timeZone });
   return (
     <div className={classes}>
       {showIcon && (
@@ -68,18 +70,18 @@ const Time = (props: TimeProps) => {
             )
       )}
-      <time dateTime={date.toString()}>
+      <time dateTime={date}>
         <span>
           {unstyled
             ? (
                 <>
                   <span>
-                    {DateTime.toTimeWithMeridiem(date, timeZone)}
+                    {dateTimestamp.toTimeWithMeridian()}
                   </span>
                   {" "}
                   {showTimezone && (
                     <span>
-                      {DateTime.toTimeZone(date, timeZone)}
+                      {dateTimestamp.toTimezone()}
                     </span>
                   )}
                 </>
@@ -90,13 +92,13 @@ const Time = (props: TimeProps) => {
                     <Body
                         className="pb_time"
                         tag="span"
-                        text={DateTime.toTimeWithMeridiem(date, timeZone)}
+                        text={dateTimestamp.toTimeWithMeridian()}
                     />{" "}
                     {showTimezone && (
                       <Body
                           color="light"
                           tag="span"
-                          text={DateTime.toTimeZone(date, timeZone)}
+                          text={dateTimestamp.toTimezone()}
                       />
                     )}
                   </>
@@ -106,13 +108,13 @@ const Time = (props: TimeProps) => {
                     <Caption
                         color="light"
                         tag="span"
-                        text={DateTime.toTimeWithMeridiem(date, timeZone)}
+                        text={dateTimestamp.toTimeWithMeridian()}
                     />{" "}
                     {showTimezone && (
                       <Caption
                           color="light"
                           tag="span"
-                          text={DateTime.toTimeZone(date, timeZone)}
+                          text={dateTimestamp.toTimezone()}
                       />
                     )}
                   </>