RubyGems - playbook_ui - Versions diffs - 12.33.0 → 12.33.1.pre.alpha.PLAY933navkitcollapsible994 - Mend

playbook_ui 12.33.0 → 12.33.1.pre.alpha.PLAY933navkitcollapsible994

Files changed (51) hide show

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

@@ -24,7 +24,7 @@ type MessageProps = {
   label?: string,
   message: string,
   timestamp?: string,
-  timestampObject?: Date,
+  timestampObject?: string,
   timezone?: string,
   alignTimestamp?: string,
 }
@@ -61,50 +61,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 ADDED Viewed

@@ -0,0 +1,6 @@
+[class^="pb_nav_list"] {
+  .pb_collapsible_main_kit,
+  .pb_collapsible_content_kit {
+    padding: 0 !important;
+  }
+}

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

@@ -6,15 +6,17 @@ import { globalProps, GlobalProps } from '../utilities/globalProps'
 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 },
   children?: React.ReactNode[] | React.ReactNode,
   className?: string,
+  collapsible?: boolean,
   data?: object,
   iconLeft?: string,
-  iconRight?: string,
+  iconRight?: string | string[],
   id?: string,
   imageUrl?: string,
   link?: string,
@@ -29,6 +31,7 @@ const NavItem = (props: NavItemProps) => {
     aria = {},
     children,
     className,
+    collapsible,
     data = {},
     iconLeft,
     iconRight,
@@ -53,54 +56,100 @@ const NavItem = (props: NavItemProps) => {
       className={classes}
       id={id}
     >
-      <Tag
-        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}
-            />
-          </div>
-        }
-        {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 &&
-          <div
-            className="pb_nav_list_item_icon_section"
-            key={iconRight}
-          >
-            <Icon
-              className="pb_nav_list_item_icon_right"
-              fixedWidth
-              icon={iconRight}
-            />
-          </div>
-        }
-      </Tag>
+      {
+        collapsible ? (
+          <Collapsible icon={iconRight ? iconRight : ['plus','minus']} iconSize="xs" padding="none">
+          <Collapsible.Main>
+          <Tag
+          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}
+              />
+            </div>
+          }
+          {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}
+          </span>
+        </Tag>
+        </Collapsible.Main>
+        <Collapsible.Content>
+        {children}
+        </Collapsible.Content>
+        </Collapsible>
+        ) : (
+        <Tag
+          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}
+              />
+            </div>
+          }
+          {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 &&
+            <div
+              className="pb_nav_list_item_icon_section"
+              key={iconRight as string}
+            >
+              <Icon
+                className="pb_nav_list_item_icon_right"
+                fixedWidth
+                icon={iconRight as string}
+              />
+            </div>
+          }
+        </Tag>
+        )
+      }
     </li>
   )
 }

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

@@ -4,3 +4,4 @@
 @import "../tokens/colors";
 @import "./vertical_nav";
 @import "./horizontal_nav";
+@import "./collapsible_nav";

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

@@ -29,22 +29,20 @@
         flex: 1;
         font-weight: $regular;
       }
-      @media (hover:hover) {
-        &:hover {
-          background-color: rgba($primary, 0.03);
-          [class*=_icon] {
-            color: $primary;
-          }
-          [class*=_text] {
-            color: $primary;
-          }
-        }
-      }
     }
     &[class*=_active] [class*=_link] {
       @include pb_title_4;
       color: $primary;
       letter-spacing: normal;
     }
+      &:hover {
+        background-color: rgba($primary, 0.03);
+        [class*=_icon] {
+          color: $primary;
+        }
+        [class*=_text] {
+          color: $primary;
+        }
+      }
   }
 }

data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav.html.erb ADDED Viewed

@@ -0,0 +1,24 @@
+<%= pb_rails("nav", props: { variant: "subtle" }) do %>
+    <%= pb_rails("nav/item", props: { text: "Overview", link: "#", collapsible: true, icon_left:"city" }) 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: "#", active: true, collapsible: true, icon_left: "theater-masks" }) 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: "#", collapsible: true, icon_left: "city" }) 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 %>
+  <% end %>

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

@@ -0,0 +1,83 @@
+import React from "react";
+import Nav from "../_nav";
+import NavItem from "../_item";
+const CollapsibleNav = (props) => {
+  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>
+  );
+};
+export default CollapsibleNav;

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

@@ -0,0 +1,86 @@
+import React from "react";
+import Nav from "../_nav";
+import NavItem from "../_item";
+const CollapsibleNavCustomIcons = (props) => {
+  return (
+    <Nav variant="subtle">
+      <NavItem
+          collapsible
+          iconLeft="city"
+          iconRight={["chevron-down", "chevron-up"]}
+          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"
+          iconRight={["chevron-down", "chevron-up"]}
+          link="#"
+          text="Albums"
+          {...props}
+      >
+        <NavItem
+            link="#"
+            text="Entertainment"
+            {...props}
+        />
+        <NavItem
+            link="#"
+            text="Food"
+            {...props}
+        />
+        <NavItem
+            link="#"
+            text="Style"
+            {...props}
+        />
+      </NavItem>
+      <NavItem
+          collapsible
+          iconLeft="city"
+          iconRight={["chevron-down", "chevron-up"]}
+          link="#"
+          text="Similar Artists"
+          {...props}
+      >
+        <NavItem
+            link="#"
+            text="City"
+            {...props}
+        />
+        <NavItem
+            link="#"
+            text="People"
+            {...props}
+        />
+        <NavItem
+            link="#"
+            text="Business"
+            {...props}
+        />
+      </NavItem>
+    </Nav>
+  );
+};
+export default CollapsibleNavCustomIcons;

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

@@ -7,6 +7,7 @@ examples:
   - borderless_nav: No Borders
   - subtle_nav: Subtle Variant
   - subtle_with_icons_nav: Subtle With Icons
+  - collapsible_nav: Subtle With Collapsible
   - subtle_no_highlight_nav: Subtle No Highlight
   - bold_vertical_nav: Bold Variant
   - horizontal_nav: Horizontal Nav
@@ -24,6 +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)
   - subtle_no_highlight_nav: Subtle No Highlight
   - bold_vertical_nav: Bold Variant
   - horizontal_nav: Horizontal Nav

data/app/pb_kits/playbook/pb_nav/docs/index.js CHANGED Viewed

@@ -13,3 +13,5 @@ export { default as WithImgNav } from './_with_img_nav.jsx'
 export { default as NewTab } from './_new_tab.jsx'
 export { default as BoldHorizontalNav } from './_bold_horizontal_nav.jsx'
 export { default as BoldVerticalNav } from './_bold_vertical_nav.jsx'
+export { default as CollapsibleNav } from './_collapsible_nav.jsx'
+export { default as CollapsibleNavCustomIcons } from './_collapsible_nav_custom_icons.jsx'

data/app/pb_kits/playbook/pb_nav/item.html.erb CHANGED Viewed

@@ -3,19 +3,41 @@
   class: object.classname,
   data: object.data,
   id: object.id) do %>
-  <%= content_tag(object.tag,
-    object.link ? object.link_options : object.options) do %>
-    <% if object.image_url %>
-      <%= pb_rails("image", props: { url: object.image_url, classname: "pb_nav_img_wrapper" }) %>
+  <% if object.collapsible %>
+    <%= pb_rails("collapsible", props: { name: "collapsible-nav-example" }) do %>
+      <%= pb_rails("collapsible/collapsible_main", props: { name: "default-collapsible-nav", icon: object.collapsible_icons, size: "xs" }) do %>
+        <%= content_tag(object.tag,
+        object.link ? object.link_options : object.options) do %>
+          <% if object.image_url %>
+            <%= pb_rails("image", props: { url: object.image_url, classname: "pb_nav_img_wrapper" }) %>
+          <% end %>
+          <% if object.icon_left %>
+            <%= pb_rails("icon", props: { icon: object.icon_left, classname: "pb_nav_list_item_icon_left", fixed_width: true}) %>
+          <% end %>
+          <span class="pb_nav_list_item_text">
+            <%= object.text %>
+          </span>
+        <% end %>
+       <% end %>
+      <%= pb_rails("collapsible/collapsible_content") do %>
+        <%= content.presence %>
+      <% end %>
     <% end %>
-    <% if object.icon_left %>
-      <%= pb_rails("icon", props: { icon: object.icon_left, classname: "pb_nav_list_item_icon_left", fixed_width: true}) %>
-    <% end %>
-    <span class="pb_nav_list_item_text">
-      <%= object.text %><%= content.presence %>
-    </span>
-    <% if object.icon_right %>
-      <%= pb_rails("icon", props: { icon: object.icon_right, classname: "pb_nav_list_item_icon_right", fixed_width: true}) %>
+  <% else %>
+    <%= content_tag(object.tag,
+      object.link ? object.link_options : object.options) do %>
+      <% if object.image_url %>
+        <%= pb_rails("image", props: { url: object.image_url, classname: "pb_nav_img_wrapper" }) %>
+      <% end %>
+      <% if object.icon_left %>
+        <%= pb_rails("icon", props: { icon: object.icon_left, classname: "pb_nav_list_item_icon_left", fixed_width: true}) %>
+      <% end %>
+      <span class="pb_nav_list_item_text">
+        <%= object.text %><%= content.presence %>
+      </span>
+      <% if object.icon_right %>
+        <%= pb_rails("icon", props: { icon: object.icon_right, classname: "pb_nav_list_item_icon_right", fixed_width: true}) %>
+      <% end %>
     <% end %>
   <% end %>
 <% end %>

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

@@ -4,6 +4,7 @@ module Playbook
   module PbNav
     class Item < Playbook::KitBase
       prop :active, type: Playbook::Props::Boolean, default: false
+      prop :collapsible, type: Playbook::Props::Boolean, default: false
       prop :link
       prop :text
       prop :icon_left
@@ -33,6 +34,10 @@ module Playbook
         )
       end
+      def collapsible_icons
+        icon_right.present? ? icon_right : %w[plus minus]
+      end
     private
       def active_class

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