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

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