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_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,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 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?: 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 CHANGED Viewed

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

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