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

playbook_ui 12.37.0.pre.alpha.PLAY951collapsiblenav31062 → 12.37.0.pre.alpha.PLAYaddingdatapropselectkit1071

Files changed (56) hide show

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: string;
+  date: Date;
   dark?: boolean;
   id?: string;
   showIcon?: boolean;
@@ -41,8 +41,6 @@ const Time = (props: TimeProps) => {
     className
   );
-  const dateTimestamp = new DateTime({ value: date, zone: timeZone });
   return (
     <div className={classes}>
       {showIcon && (
@@ -70,18 +68,18 @@ const Time = (props: TimeProps) => {
             )
       )}
-      <time dateTime={date}>
+      <time dateTime={date.toString()}>
         <span>
           {unstyled
             ? (
                 <>
                   <span>
-                    {dateTimestamp.toTimeWithMeridian()}
+                    {DateTime.toTimeWithMeridiem(date, timeZone)}
                   </span>
                   {" "}
                   {showTimezone && (
                     <span>
-                      {dateTimestamp.toTimezone()}
+                      {DateTime.toTimeZone(date, timeZone)}
                     </span>
                   )}
                 </>
@@ -92,13 +90,13 @@ const Time = (props: TimeProps) => {
                     <Body
                         className="pb_time"
                         tag="span"
-                        text={dateTimestamp.toTimeWithMeridian()}
+                        text={DateTime.toTimeWithMeridiem(date, timeZone)}
                     />{" "}
                     {showTimezone && (
                       <Body
                           color="light"
                           tag="span"
-                          text={dateTimestamp.toTimezone()}
+                          text={DateTime.toTimeZone(date, timeZone)}
                       />
                     )}
                   </>
@@ -108,13 +106,13 @@ const Time = (props: TimeProps) => {
                     <Caption
                         color="light"
                         tag="span"
-                        text={dateTimestamp.toTimeWithMeridian()}
+                        text={DateTime.toTimeWithMeridiem(date, timeZone)}
                     />{" "}
                     {showTimezone && (
                       <Caption
                           color="light"
                           tag="span"
-                          text={dateTimestamp.toTimezone()}
+                          text={DateTime.toTimeZone(date, timeZone)}
                       />
                     )}
                   </>

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