RubyGems - playbook_ui - Versions diffs - 12.37.0.pre.alpha.PLAY951collapsiblenav31062 → 12.37.0.pre.alpha.PLAY951collapsiblenav31073 - Mend

playbook_ui 12.37.0.pre.alpha.PLAY951collapsiblenav31062 → 12.37.0.pre.alpha.PLAY951collapsiblenav31073

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 (38) hide show

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

@@ -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,23 +19,20 @@ type TimeRangeInlineProps = {
   dark?: boolean,
   icon?: boolean,
   timezone?: boolean,
-  startTime: string,
-  endTime: string,
+  startTime: Date,
+  endTime: Date,
 } & GlobalProps
-const timezoneString = (dateValue: string) => {
-  const date = new DateTime({ value: dateValue })
-  return `${date.convertToTimezone()}`
+const timezoneString = (dateValue: Date) => {
+  return `${DateTime.toTimeZone(dateValue)}`
 }
-const dateTimestamp = (dateValue: string) => {
-  const date = new DateTime({ value: dateValue })
-  return `${date.toHour()}:${date.toMinute()}${date.toMeridian()}`
+const dateTimestamp = (dateValue: Date) => {
+  return `${DateTime.toHour(dateValue)}:${DateTime.toMinute(dateValue)}${DateTime.toMeridiem(dateValue)}`
 }
-const dateTimeIso = (dateValue: string) => {
-  const date = new DateTime({ value: dateValue })
-  return date.toIso()
+const dateTimeIso = (dateValue: Date) => {
+  return DateTime.toIso(dateValue)
 }
 const TimeRangeInline = (props: TimeRangeInlineProps) => {
@@ -59,10 +56,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>
   )
@@ -71,16 +68,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>
     )
@@ -88,17 +85,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)}>
@@ -108,15 +105,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(
@@ -126,9 +123,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>
@@ -138,8 +135,8 @@ const TimeRangeInline = (props: TimeRangeInlineProps) => {
         {size == 'sm' &&
           <>
             <Body
-              dark={dark}
-              tag="span"
+                dark={dark}
+                tag="span"
             >
               {iconContent()}
               <time dateTime={dateTimeIso(startTime)}>
@@ -149,15 +146,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(
@@ -167,10 +164,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 CHANGED Viewed

@@ -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?: string,
+  date?: Date,
   id?: string,
   time?: number | Date,
   timeZone?: string,
@@ -39,8 +39,6 @@ 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}
@@ -52,13 +50,13 @@ const TimeStackedDefault = (props: TimeStackedProps): React.ReactElement => {
           dark={dark}
       >
         <time>
-          {dateTimestamp.toTimeWithMeridian()}
+          {DateTime.toTimeWithMeridiem(date ? date : new Date(time), timeZone)}
           <Caption
               className="pb_time_stacked"
               color="light"
               dark={dark}
               tag="span"
-              text={dateTimestamp.toTimezone()}
+              text={DateTime.toTimeZone(date ? date : new Date(time), timeZone)}
           />
         </time>
       </Body>

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

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

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

@@ -7,8 +7,7 @@ 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",
@@ -22,22 +21,20 @@ type WeekdayStackedProps = {
   compact?: boolean,
 }
-const getDayOfWeek = (value: Date | string, compact: boolean) => {
-  const dateTime = new DateTime({ value })
+const getDayOfWeek = (value: Date, compact: boolean) => {
   if (compact) {
-    return dateTime.toDayAbbr()
+    return DateTime.toDayAbbr(value)
   } else {
-    return dateTime.toWeekday()
+    return DateTime.toWeekday(value)
   }
 }
-const getFormattedDate = (value: Date | string, variant: "day_only" | "month_day" | "expanded") => {
-  const dateTime = new DateTime({ value })
+const getFormattedDate = (value: Date, variant: "day_only" | "month_day" | "expanded")  => {
   if (variant === 'day_only') {
-    return dateTime.toDay()
+    return DateTime.toDay(value).toString()
   } else {
-    const format = variant === 'expanded' ? '%b %-d' : '%-m/%-d'
-    return dateTime.toCustomFormat(format)
+    const format = variant === 'expanded' ? 'expanded' : 'month_day'
+    return DateTime.toCustomFormat(value, format)
   }
 }