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

playbook_ui 12.36.0 → 12.37.0.pre.alpha.PLAYaddingdatapropselectkit1071

Files changed (73) 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_timestamp/docs/_timestamp_align_swift.md ADDED Viewed

@@ -0,0 +1,45 @@
+![timestamp-align](https://github.com/powerhome/playbook/assets/92755007/9107e699-218e-4a15-a0f9-b1a8f4710c37)
+```swiftå
+VStack(alignment: .leading, spacing: Spacing.small) {
+  Group {
+    PBTimestamp(
+      Date(),
+      showDate: false
+    )
+    .frame(minWidth: minWidth, maxWidth: .infinity, alignment: .leading)
+    PBTimestamp(Date())
+      .frame(minWidth: minWidth, maxWidth: .infinity, alignment: .leading)
+    PBTimestamp(Date().addingTimeInterval(addThreeYear))
+      .frame(minWidth: minWidth, maxWidth: .infinity, alignment: .leading)
+    PBTimestamp(Date().addingTimeInterval(subOneYear))
+      .frame(minWidth: minWidth, maxWidth: .infinity, alignment: .leading)
+  }
+  Group {
+    PBTimestamp(
+      Date(),
+      showDate: false
+    )
+      .frame(minWidth: minWidth, maxWidth: .infinity, alignment: .center)
+    PBTimestamp(Date())
+      .frame(minWidth: minWidth, maxWidth: .infinity, alignment: .center)
+    PBTimestamp(Date().addingTimeInterval(addThreeYear))
+      .frame(minWidth: minWidth, maxWidth: .infinity, alignment: .center)
+    PBTimestamp(Date().addingTimeInterval(subOneYear))
+      .frame(minWidth: minWidth, maxWidth: .infinity, alignment: .center)
+  }
+  Group {
+    PBTimestamp(
+      Date(),
+      showDate: false
+    )
+    .frame(minWidth: minWidth, maxWidth: .infinity, alignment: .trailing)
+    PBTimestamp(Date())
+      .frame(minWidth: minWidth, maxWidth: .infinity, alignment: .trailing)
+    PBTimestamp(Date().addingTimeInterval(addThreeYear))
+      .frame(minWidth: minWidth, maxWidth: .infinity, alignment: .trailing)
+    PBTimestamp(Date().addingTimeInterval(subOneYear))
+      .frame(minWidth: minWidth, maxWidth: .infinity, alignment: .trailing)
+  }
+}
+```

data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_default_swift.md ADDED Viewed

@@ -0,0 +1,26 @@
+![timestamp-default](https://github.com/powerhome/playbook/assets/92755007/064c6a98-4bdd-4160-8f4b-589233762c80)
+```swift
+VStack(alignment: .leading, spacing: Spacing.small) {
+  PBTimestamp(
+    Date(),
+    showDate: false
+  )
+  .frame(minWidth: minWidth, maxWidth: .infinity, alignment: .leading)
+  PBTimestamp(
+    Date()
+  )
+  .frame(minWidth: minWidth, maxWidth: .infinity, alignment: .leading)
+  PBTimestamp(
+    Date().addingTimeInterval(addThreeYear)
+  )
+  .frame(minWidth: minWidth, maxWidth: .infinity, alignment: .leading)
+  PBTimestamp(
+    Date().addingTimeInterval(subOneYear)
+  )
+  .frame(minWidth: minWidth, maxWidth: .infinity, alignment: .leading)
+}
+```

data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_elapsed_swift.md ADDED Viewed

@@ -0,0 +1,25 @@
+![timestamp-elapsed](https://github.com/powerhome/playbook/assets/92755007/bb10a951-b536-41cc-aa6c-b343e826af20)
+```swift
+VStack(alignment: .leading, spacing: Spacing.small) {
+  PBTimestamp(
+    Date().addingTimeInterval(-10),
+    showUser: true,
+    text: "Maricris Nanota",
+        variant: .elapsed
+  )
+  .frame(minWidth: minWidth, maxWidth: .infinity, alignment: .leading)
+  PBTimestamp(
+    Date().addingTimeInterval(-36000),
+        variant: .elapsed
+  )
+  .frame(minWidth: minWidth, maxWidth: .infinity, alignment: .leading)
+  PBTimestamp(
+    Date().addingTimeInterval(-36000),
+        variant: .hideUserElapsed
+  )
+  .frame(minWidth: minWidth, maxWidth: .infinity, alignment: .leading)
+}
+```

data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_props_swift.md ADDED Viewed

@@ -0,0 +1,10 @@
+### Props
+| Name | Type | Description | Default | Values |
+| --- | ----------- | --------- | --------- | --------- |
+| **amPmStyle** | `AmPmStyle` | Displays shortened or full version of "am" and "pm" | `.short` | `.short` `.full` |
+| **showDate** | `Bool` | Displays date | `true` |  |
+| **showTimeZone** | `Bool` | Displays time zone | `false` |  |
+| **showUser** | `Bool` | Displays user's name | `false` |  |
+| **text** | `String` | Specifies which user to display | `nil` |  |
+| **timeZone** | `String` | Specifies which time zone to display | `nil` |  |
+| **variant** | `Variant` | Specifies copy for last upadted | `.standard` | `.elapsed` `.standard`  `.updated` `.hideUserElapsed` |

data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_timezones_swift.md ADDED Viewed

@@ -0,0 +1,67 @@
+![timestamp-timezones](https://github.com/powerhome/playbook/assets/92755007/119f0838-e912-473b-83de-626db1fd0d61)
+```swift
+VStack(alignment: .leading, spacing: Spacing.small) {
+  Group {
+    PBTimestamp(
+      Date(),
+      showDate: false,
+      showTimeZone: true,
+      timeZone: "America/New_York"
+    )
+    .frame(minWidth: minWidth, maxWidth: .infinity, alignment: .leading)
+    PBTimestamp(
+      Date(),
+      showTimeZone: true,
+      timeZone: "America/New_York"
+    )
+    .frame(minWidth: minWidth, maxWidth: .infinity, alignment: .leading)
+    PBTimestamp(
+      Date().addingTimeInterval(addThreeYear),
+      showTimeZone: true,
+      timeZone: "America/New_York"
+    )
+    .frame(minWidth: minWidth, maxWidth: .infinity, alignment: .leading)
+    PBTimestamp(
+      Date().addingTimeInterval(subOneYear),
+      showTimeZone: true,
+      timeZone: "America/New_York"
+    )
+    .frame(minWidth: minWidth, maxWidth: .infinity, alignment: .leading)
+  }
+  Group {
+    PBTimestamp(
+      Date(),
+      showDate: false,
+      showTimeZone: true,
+      timeZone: "Asia/Hong_Kong"
+    )
+    .frame(minWidth: minWidth, maxWidth: .infinity, alignment: .leading)
+    PBTimestamp(
+      Date(),
+      showTimeZone: true,
+      timeZone: "Asia/Hong_Kong"
+    )
+    .frame(minWidth: minWidth, maxWidth: .infinity, alignment: .leading)
+    PBTimestamp(
+      Date().addingTimeInterval(addThreeYear),
+      showTimeZone: true,
+      timeZone: "Asia/Hong_Kong"
+    )
+    .frame(minWidth: minWidth, maxWidth: .infinity, alignment: .leading)
+    PBTimestamp(
+      Date().addingTimeInterval(subOneYear),
+      showTimeZone: true,
+      timeZone: "Asia/Hong_Kong"
+    )
+    .frame(minWidth: minWidth, maxWidth: .infinity, alignment: .leading)
+  }
+}
+```

data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated_swift.md ADDED Viewed

@@ -0,0 +1,19 @@
+![timestamp-updated](https://github.com/powerhome/playbook/assets/92755007/14717880-c584-4413-9d9b-c569392595b7)
+```swift
+VStack(alignment: .leading, spacing: Spacing.small) {
+  PBTimestamp(
+    Date().addingTimeInterval(-12),
+    showUser: true,
+    text: "Maricris Nanota",
+    variant: .updated
+  )
+  .frame(minWidth: minWidth, maxWidth: .infinity, alignment: .leading)
+  PBTimestamp(
+    Date().addingTimeInterval(-12),
+    variant: .updated
+  )
+  .frame(minWidth: minWidth, maxWidth: .infinity, alignment: .leading)
+}
+```

data/app/pb_kits/playbook/pb_timestamp/docs/example.yml CHANGED Viewed

@@ -13,3 +13,11 @@ examples:
   - timestamp_timezones: Timezones
   - timestamp_updated: Last Updated by
   - timestamp_elapsed: Time Ago
+  swift:
+  - timestamp_default_swift: Default
+  - timestamp_align_swift: Alignments
+  - timestamp_timezones_swift: Timezones
+  - timestamp_updated_swift: Last Updated by
+  - timestamp_elapsed_swift: Time Ago
+  - timestamp_props_swift: ""

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