playbook_ui 12.33.0.pre.alpha.revert2650closedialogonoutsideclick977 → 12.33.1.pre.alpha.PLAY933navkitcollapsible994

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

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

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

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

data/app/pb_kits/playbook/pb_time_range_inline/_time_range_inline.tsx

@@ -1,9 +1,9 @@
 import React from 'react'
 import classnames from 'classnames'
 
+import DateTime from '../pb_kit/dateTime'
 import { globalProps, GlobalProps } from '../utilities/globalProps'
 import { buildAriaProps, buildDataProps } from '../utilities/props'
-import DateTime from '../pb_kit/dateTime';
 
 import Body from '../pb_body/_body'
 import Caption from '../pb_caption/_caption'
@@ -19,20 +19,23 @@ type TimeRangeInlineProps = {
   dark?: boolean,
   icon?: boolean,
   timezone?: boolean,
-  startTime: Date,
-  endTime: Date,
+  startTime: string,
+  endTime: string,
 } & GlobalProps
 
-const timezoneString = (dateValue: Date) => {
-  return `${DateTime.toTimeZone(dateValue)}`
+const timezoneString = (dateValue: string) => {
+  const date = new DateTime({ value: dateValue })
+  return `${date.convertToTimezone()}`
 }
 
-const dateTimestamp = (dateValue: Date) => {
-  return `${DateTime.toHour(dateValue)}:${DateTime.toMinute(dateValue)}${DateTime.toMeridiem(dateValue)}`
+const dateTimestamp = (dateValue: string) => {
+  const date = new DateTime({ value: dateValue })
+  return `${date.toHour()}:${date.toMinute()}${date.toMeridian()}`
 }
 
-const dateTimeIso = (dateValue: Date) => {
-  return DateTime.toIso(dateValue)
+const dateTimeIso = (dateValue: string) => {
+  const date = new DateTime({ value: dateValue })
+  return date.toIso()
 }
 
 const TimeRangeInline = (props: TimeRangeInlineProps) => {
@@ -56,10 +59,10 @@ const TimeRangeInline = (props: TimeRangeInlineProps) => {
   const separator = (
     <Body color="light">
       <Icon
-          className="pb_time_range_inline_arrow"
-          dark={dark}
-          fixedWidth
-          icon="long-arrow-right"
+        className="pb_time_range_inline_arrow"
+        dark={dark}
+        fixedWidth
+        icon="long-arrow-right"
       />
     </Body>
   )
@@ -68,16 +71,16 @@ const TimeRangeInline = (props: TimeRangeInlineProps) => {
     return (
       icon &&
       <Body
-          color="light"
-          tag="span"
+        color="light"
+        tag="span"
       >
         <Icon
-            className="pb_time_range_inline_icon"
-            dark={dark}
-            fixedWidth
-            icon="clock"
-            size={size}
-            tag="span"
+          className="pb_time_range_inline_icon"
+          dark={dark}
+          fixedWidth
+          icon="clock"
+          size={size}
+          tag="span"
         />
       </Body>
     )
@@ -85,17 +88,17 @@ const TimeRangeInline = (props: TimeRangeInlineProps) => {
 
   return (
     <div
-        {...ariaProps}
-        {...dataProps}
-        className={classnames('pb_time_range_inline_kit_' + alignment, globalProps(props), className)}
-        id={id}
+      {...ariaProps}
+      {...dataProps}
+      className={classnames('pb_time_range_inline_kit_' + alignment, globalProps(props), className)}
+      id={id}
     >
       <div className="pb_time_range_inline_wrapper">
         {size == 'xs' &&
           <>
             <Caption
-                dark={dark}
-                tag="span"
+              dark={dark}
+              tag="span"
             >
               {iconContent()}
               <time dateTime={dateTimeIso(startTime)}>
@@ -105,15 +108,15 @@ const TimeRangeInline = (props: TimeRangeInlineProps) => {
               </time>
             </Caption>
             <Caption
-                className="pb_time_range_inline_arrow"
-                dark={dark}
-                tag="span"
+              className="pb_time_range_inline_arrow"
+              dark={dark}
+              tag="span"
             >
               {separator}
             </Caption>
             <Caption
-                dark={dark}
-                tag="span"
+              dark={dark}
+              tag="span"
             >
               <time dateTime={dateTimeIso(endTime)}>
                 {` ${dateTimestamp(
@@ -123,9 +126,9 @@ const TimeRangeInline = (props: TimeRangeInlineProps) => {
             </Caption>
             {timezone &&
               <Caption
-                  className="pb_time_range_inline_timezone"
-                  dark={dark}
-                  tag="span"
+                className="pb_time_range_inline_timezone"
+                dark={dark}
+                tag="span"
               >
                 {timezoneString(endTime)}
               </Caption>
@@ -135,8 +138,8 @@ const TimeRangeInline = (props: TimeRangeInlineProps) => {
         {size == 'sm' &&
           <>
             <Body
-                dark={dark}
-                tag="span"
+              dark={dark}
+              tag="span"
             >
               {iconContent()}
               <time dateTime={dateTimeIso(startTime)}>
@@ -146,15 +149,15 @@ const TimeRangeInline = (props: TimeRangeInlineProps) => {
               </time>
             </Body>
             <Body
-                className="pb_time_range_inline_arrow"
-                dark={dark}
-                tag="span"
+              className="pb_time_range_inline_arrow"
+              dark={dark}
+              tag="span"
             >
               {separator}
             </Body>
             <Body
-                dark={dark}
-                tag="span"
+              dark={dark}
+              tag="span"
             >
               <time dateTime={dateTimeIso(endTime)}>
                 {` ${dateTimestamp(
@@ -164,10 +167,10 @@ const TimeRangeInline = (props: TimeRangeInlineProps) => {
             </Body>
             {timezone &&
               <Body
-                  className="pb_time_range_inline_timezone"
-                  color="light"
-                  dark={dark}
-                  tag="span"
+                className="pb_time_range_inline_timezone"
+                color="light"
+                dark={dark}
+                tag="span"
               >
                 {timezoneString(endTime)}
               </Body>

data/app/pb_kits/playbook/pb_time_stacked/_time_stacked.tsx

@@ -1,9 +1,9 @@
 import React from 'react'
 import classnames from 'classnames'
 
+import DateTime from '../pb_kit/dateTime'
 import { buildCss, buildDataProps } from '../utilities/props'
 import { deprecatedProps, 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 TimeStackedProps = {
   className?: string | string[],
   dark?: boolean,
   data?: { [key: string]: string },
-  date?: Date,
+  date?: string,
   id?: string,
   time?: number | Date,
   timeZone?: string,
@@ -39,6 +39,8 @@ const TimeStackedDefault = (props: TimeStackedProps): React.ReactElement => {
   )
   const dataProps = buildDataProps(data)
 
+  const dateTimestamp = new DateTime({ value: date ? date : new Date(time), zone: timeZone })
+
   return (
     <div
         className={classes}
@@ -50,13 +52,13 @@ const TimeStackedDefault = (props: TimeStackedProps): React.ReactElement => {
           dark={dark}
       >
         <time>
-          {DateTime.toTimeWithMeridiem(date ? date : new Date(time), timeZone)}
+          {dateTimestamp.toTimeWithMeridian()}
           <Caption
               className="pb_time_stacked"
               color="light"
               dark={dark}
               tag="span"
-              text={DateTime.toTimeZone(date ? date : new Date(time), timeZone)}
+              text={dateTimestamp.toTimezone()}
           />
         </time>
       </Body>

data/app/pb_kits/playbook/pb_timestamp/_timestamp.tsx

@@ -1,10 +1,9 @@
 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 Caption from '../pb_caption/_caption'
 
@@ -15,7 +14,7 @@ type TimestampProps = {
   dark?: boolean,
   data?: string,
   text: string,
-  timestamp: Date | string,
+  timestamp: string,
   timezone: string,
   id?: string,
   showDate?: boolean,
@@ -33,8 +32,8 @@ const Timestamp = (props: TimestampProps): React.ReactElement => {
     dark = false,
     data = {},
     text,
-    timezone,
     timestamp,
+    timezone,
     showDate = true,
     showUser = false,
     hideUpdated = false,
@@ -54,25 +53,26 @@ const Timestamp = (props: TimestampProps): React.ReactElement => {
   )
 
   const currentYear = new Date().getFullYear().toString()
-  const dateDisplay = `${DateTime.toMonth(timestamp, timezone)} ${DateTime.toDay(timestamp, timezone)}`
+  const dateTimestamp = new DateTime({ value: timestamp, zone: timezone })
+  const dateDisplay = `${dateTimestamp.toMonth()} ${dateTimestamp.toDay()}`
   const shouldShowUser = showUser == true && text.length > 0
   const shouldShowTimezone = showTimezone == true && timezone.length > 0
   const updatedText = hideUpdated ? "" : "Last updated"
   const userDisplay = shouldShowUser ? ` by ${text}` : ''
 
-  let timeDisplay = `${DateTime.toHour(timestamp, timezone)}:${DateTime.toMinute(timestamp, timezone)}${DateTime.toMeridiem(timestamp, timezone)}`
+  let timeDisplay = `${dateTimestamp.toHour()}:${dateTimestamp.toMinute()}${dateTimestamp.toMeridian()}`
 
   const fullTimeDisplay = () => {
     if (shouldShowTimezone) {
-      timeDisplay = `${timeDisplay} ${DateTime.toTimeZone(timestamp, timezone)}`
+      timeDisplay = `${timeDisplay} ${dateTimestamp.toTimezone()}`
     }
     return timeDisplay
   }
 
   const fullDateDisplay = () => {
-    let fullDisplay = `${DateTime.toMonth(timestamp, timezone)} ${DateTime.toDay(timestamp, timezone)}`
-    if (DateTime.toYear(timestamp, timezone).toString() !== currentYear) {
-      fullDisplay = `${fullDisplay}, ${DateTime.toYear(timestamp, timezone)}`
+    let fullDisplay = `${dateTimestamp.toMonth()} ${dateTimestamp.toDay()}`
+    if (dateTimestamp.toYear() !== currentYear) {
+      fullDisplay = `${fullDisplay}, ${dateTimestamp.toYear()}`
     }
     return `${fullDisplay} ${' \u00b7 '} ${fullTimeDisplay()}`
   }
@@ -82,7 +82,7 @@ const Timestamp = (props: TimestampProps): React.ReactElement => {
   }
 
   const formatElapsedString = () => {
-    return `${updatedText} ${userDisplay} ${DateTime.fromNow(timestamp)}`
+    return `${updatedText} ${userDisplay} ${dateTimestamp.value.fromNow()}`
   }
 
   const captionText = () => {

data/app/pb_kits/playbook/pb_weekday_stacked/_weekday_stacked.tsx

@@ -7,7 +7,8 @@ import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
 
 import Caption from '../pb_caption/_caption'
 import Title from '../pb_title/_title'
-import DateTime from '../pb_kit/dateTime';
+
+import DateTime from '../pb_kit/dateTime'
 
 type WeekdayStackedProps = {
   align?: "left" | "center" | "right",
@@ -21,20 +22,22 @@ type WeekdayStackedProps = {
   compact?: boolean,
 }
 
-const getDayOfWeek = (value: Date, compact: boolean) => {
+const getDayOfWeek = (value: Date | string, compact: boolean) => {
+  const dateTime = new DateTime({ value })
   if (compact) {
-    return DateTime.toDayAbbr(value)
+    return dateTime.toDayAbbr()
   } else {
-    return DateTime.toWeekday(value)
+    return dateTime.toWeekday()
   }
 }
 
-const getFormattedDate = (value: Date, variant: "day_only" | "month_day" | "expanded")  => {
+const getFormattedDate = (value: Date | string, variant: "day_only" | "month_day" | "expanded") => {
+  const dateTime = new DateTime({ value })
   if (variant === 'day_only') {
-    return DateTime.toDay(value).toString()
+    return dateTime.toDay()
   } else {
-    const format = variant === 'expanded' ? 'expanded' : 'month_day'
-    return DateTime.toCustomFormat(value, format)
+    const format = variant === 'expanded' ? '%b %-d' : '%-m/%-d'
+    return dateTime.toCustomFormat(format)
   }
 }