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

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()}
                       />
                     )}
                   </>