RubyGems - playbook_ui - Versions diffs - 12.30.1.pre.alpha.play846responsivespacingglobalpropsneedsdefault924 → 12.31.0.pre.alpha.PLAY814removemomentjs933 - Mend

playbook_ui 12.30.1.pre.alpha.play846responsivespacingglobalpropsneedsdefault924 → 12.31.0.pre.alpha.PLAY814removemomentjs933

Files changed (88) hide show

data/app/pb_kits/playbook/pb_date_range_inline/_date_range_inline.tsx CHANGED Viewed

@@ -3,7 +3,7 @@ import classnames from "classnames";
 import { globalProps } from "../utilities/globalProps";
 import { buildCss, buildDataProps } from "../utilities/props";
-import DateTime from "../pb_kit/dateTime";
+import DateTime from '../pb_kit/dateTime';
 import Body from "../pb_body/_body";
 import Caption from "../pb_caption/_caption";
@@ -21,18 +21,16 @@ type DateRangeInlineProps = {
   endDate?: Date;
 };
-const dateTimestamp = (dateValue: Date | string, includeYear: boolean) => {
-  const date = new DateTime({ value: dateValue });
+const dateTimestamp = (dateValue: Date, includeYear: boolean) => {
   if (includeYear) {
-    return `${date.toMonth()} ${date.toDay()}, ${date.toYear()}`;
+    return `${DateTime.toMonth(dateValue)} ${DateTime.toDay(dateValue)}, ${DateTime.toYear(dateValue)}`;
   } else {
-    return `${date.toMonth()} ${date.toDay()}`;
+    return `${DateTime.toMonth(dateValue)} ${DateTime.toDay(dateValue)}`;
   }
 };
-const dateTimeIso = (dateValue: Date | string) => {
-  const date = new DateTime({ value: dateValue });
-  return date.toIso();
+const dateTimeIso = (dateValue: Date) => {
+  return DateTime.toIso(dateValue);
 };
 const DateRangeInline = (props: DateRangeInlineProps) => {
@@ -52,14 +50,17 @@ const DateRangeInline = (props: DateRangeInlineProps) => {
       <>
         {icon && (
           <>
-            <Body color="light" key={Math.random()} tag="span">
-              <Icon
-                className="pb_date_range_inline_icon"
-                dark={dark}
-                fixedWidth
-                icon="calendar-alt"
-                size={size}
+            <Body color="light"
+                key={Math.random()}
                 tag="span"
+            >
+              <Icon
+                  className="pb_date_range_inline_icon"
+                  dark={dark}
+                  fixedWidth
+                  icon="calendar-alt"
+                  size={size}
+                  tag="span"
               />
             </Body>
           </>
@@ -78,7 +79,7 @@ const DateRangeInline = (props: DateRangeInlineProps) => {
   const dateRangeClasses = buildCss("pb_date_range_inline_kit", align);
   const dataProps = buildDataProps(data)
-  const renderTime = (date: Date | string) => {
+  const renderTime = (date: Date) => {
     return (
       <time dateTime={dateTimeIso(date)}>
         {dateInCurrentYear() ? (
@@ -92,24 +93,30 @@ const DateRangeInline = (props: DateRangeInlineProps) => {
   return (
     <div
-    {...dataProps}
-      className={classnames(dateRangeClasses, globalProps(props), className)}
+        {...dataProps}
+        className={classnames(dateRangeClasses, globalProps(props), className)}
     >
       <div className="pb_date_range_inline_wrapper">
         {size == "xs" && (
           <>
             {iconContent()}
-            <Caption dark={dark} tag="span">
+            <Caption dark={dark}
+                tag="span"
+            >
               {renderTime(startDate)}
             </Caption>
-            <Caption dark={dark} tag="span">
+            <Caption dark={dark}
+                tag="span"
+            >
               <Icon
-                className="pb_date_range_inline_arrow"
-                fixedWidth
-                icon="long-arrow-right"
+                  className="pb_date_range_inline_arrow"
+                  fixedWidth
+                  icon="long-arrow-right"
               />
             </Caption>
-            <Caption dark={dark} tag="span">
+            <Caption dark={dark}
+                tag="span"
+            >
               {renderTime(endDate)}
             </Caption>
           </>
@@ -118,18 +125,25 @@ const DateRangeInline = (props: DateRangeInlineProps) => {
         {size == "sm" && (
           <>
             {iconContent()}
-            <Body dark={dark} tag="span">
+            <Body dark={dark}
+                tag="span"
+            >
               {renderTime(startDate)}
             </Body>
-            <Body color="light" dark={dark} tag="span">
-              <Icon
-                className="pb_date_range_inline_arrow"
+            <Body color="light"
                 dark={dark}
-                fixedWidth
-                icon="long-arrow-right"
+                tag="span"
+            >
+              <Icon
+                  className="pb_date_range_inline_arrow"
+                  dark={dark}
+                  fixedWidth
+                  icon="long-arrow-right"
               />
             </Body>
-            <Body dark={dark} tag="span">
+            <Body dark={dark}
+                tag="span"
+            >
               {renderTime(endDate)}
             </Body>
           </>

data/app/pb_kits/playbook/pb_date_range_stacked/_date_range_stacked.tsx CHANGED Viewed

@@ -14,9 +14,9 @@ type DateRangeStackedProps = {
   className?: string | string[],
   data?: string,
   dark?: boolean,
-  endDate: string,
+  endDate: Date,
   id?: string,
-  startDate: string,
+  startDate: Date,
 }
 const DateRangeStacked = (props: DateRangeStackedProps) => {
@@ -29,7 +29,9 @@ const DateRangeStacked = (props: DateRangeStackedProps) => {
   const dataProps = buildDataProps(data)
   return (
-    <div {...dataProps} className={css}>
+    <div {...dataProps}
+        className={css}
+    >
       <Flex vertical="center">
         <FlexItem>
           <DateYearStacked

data/app/pb_kits/playbook/pb_date_stacked/_date_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 { globalProps } from "../utilities/globalProps";
+import DateTime from '../pb_kit/dateTime';
 import Caption from "../pb_caption/_caption";
 import Title from "../pb_title/_title";
@@ -14,7 +14,7 @@ type DateStackedProps = {
   className?: string | string[];
   dark?: boolean;
   data?: string;
-  date: string | Date;
+  date: Date;
   size?: "sm" | "md";
   id?: string;
   reverse?: boolean;
@@ -45,39 +45,42 @@ const DateStacked = (props: DateStackedProps) => {
     className
   );
-  const currentYear = new Date().getFullYear().toString();
-  const dateTimestamp = new DateTime({ value: date });
-  const inputYear = dateTimestamp.toYear().toString();
+  const currentYear = new Date().getFullYear()
+  const inputYear = DateTime.toYear(date);
   const dataProps = buildDataProps(data)
   return (
     <>
       {bold == false ? (
-        <div {...dataProps} className={classes}>
+        <div {...dataProps}
+            className={classes}
+        >
           <div className="pb_date_stacked_day_month">
-            <Caption text={dateTimestamp.toMonth().toUpperCase()} />
+            <Caption text={DateTime.toMonth(date).toUpperCase()} />
             <Title
-              dark={dark}
-              size={sizes[size]}
-              text={dateTimestamp.toDay()}
+                dark={dark}
+                size={sizes[size]}
+                text={DateTime.toDay(date).toString()}
             />
           </div>
           {currentYear != inputYear && <Caption size="xs">{inputYear}</Caption>}
         </div>
       ) : (
-          <div {...dataProps} className={classes}>
+          <div {...dataProps}
+              className={classes}
+          >
             <div className="pb_date_stacked_day_month">
-              <Title
-                bold
-                dark={dark}
-                size="4"
-                text={dateTimestamp.toMonth()}
+              <Title
+                  bold
+                  dark={dark}
+                  size="4"
+                  text={DateTime.toMonth(date)}
               />
-              <Title
-                bold
-                dark={dark}
-                size="4"
-                text={dateTimestamp.toDay()}
+              <Title
+                  bold
+                  dark={dark}
+                  size="4"
+                  text={DateTime.toDay(date).toString()}
               />
               {currentYear != inputYear && <Title size="4">{inputYear}</Title>}
             </div>

data/app/pb_kits/playbook/pb_date_time/_date_time.tsx CHANGED Viewed

@@ -13,7 +13,7 @@ type DateTimeProps = {
   aria?: { [key: string]: string; },
   className?: string,
   data?: { [key: string]: string; },
-  datetime: string,
+  datetime: Date,
   id?: string,
   size?: "sm" | "md",
   showDayOfWeek: boolean,

data/app/pb_kits/playbook/pb_date_time/dateTime.test.js CHANGED Viewed

@@ -89,7 +89,7 @@ describe('DateTime Kit', () => {
     const kit = screen.getByTestId(testId)
     const text = kit.querySelector('.pb_time_kit_md.ml_sm')
-    expect(text.textContent).toEqual('2:00p JST')
+    expect(text.textContent).toEqual('2:00p GMT+9')
   })
   test('renders DatePicker size', () => {
     render(

data/app/pb_kits/playbook/pb_date_time_stacked/_date_time_stacked.tsx CHANGED Viewed

@@ -12,8 +12,8 @@ import DateStacked from '../pb_date_stacked/_date_stacked'
 type DateTimeStackedProps = {
   id?: string,
-  date: string,
-  datetime: string,
+  date: Date,
+  datetime: Date,
   dark: boolean,
   timeZone?: string,
 }

data/app/pb_kits/playbook/pb_date_time_stacked/date_time_stacked.test.js CHANGED Viewed

@@ -34,7 +34,7 @@ test('renders time in default timezone', () => {
 test('renders time in timezone', () => {
   props.timeZone = 'Asia/Tokyo'
   const kit = renderKit(DateTimeStacked, props)
-  expect(kit).toHaveTextContent(`${monthDayYear}2:00aJST`)
+  expect(kit).toHaveTextContent(`${monthDayYear}2:00aGMT+9`)
 })
 test('renders time in timezone', () => {

data/app/pb_kits/playbook/pb_date_year_stacked/_date_year_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 { globalProps } from '../utilities/globalProps'
+import DateTime from '../pb_kit/dateTime';
 import Body from '../pb_body/_body'
 import Title from '../pb_title/_title'
@@ -13,13 +13,12 @@ type DateYearStackedProps = {
   className?: string | string[],
   dark?: boolean,
   data?: string,
-  date: string,
+  date: Date,
   id?: string,
 }
 const DateYearStacked = (props: DateYearStackedProps) => {
   const { align = 'left', className, dark = false, date, data={} } = props
-  const dateTimestamp = new DateTime({ value: date })
   const css = classnames(
     buildCss('pb_date_year_stacked', align),
     globalProps(props),
@@ -29,15 +28,14 @@ const DateYearStacked = (props: DateYearStackedProps) => {
   return (
     <div {...dataProps}
-    className={css}>
+        className={css}
+    >
       <Title
           dark={dark}
           size={4}
-          text={`${dateTimestamp.toDay()} ${dateTimestamp
-          .toMonth()
-          .toUpperCase()}`}
+          text={`${DateTime.toDay(date)} ${DateTime.toMonth(date).toUpperCase()}`}
       />
-      <Body color="light">{dateTimestamp.toYear()}</Body>
+      <Body color="light">{DateTime.toYear(date)}</Body>
     </div>
   )
 }

data/app/pb_kits/playbook/pb_dialog/_dialog.scss CHANGED Viewed

@@ -263,18 +263,6 @@
 	}
 }
-[class*="dialog_body"] {
-  padding: $space_sm;
-}
-[class*="dialog_header"] {
-  padding: $space_sm;
-}
-[class*="dialog_footer"] {
-  padding: $space_sm;
-}
 //styles specific to rails version of kit
 // rails version has own wrapper because of the way the overlay functions for the HTML dialog used to create this
 .pb_dialog_wrapper_rails {

data/app/pb_kits/playbook/pb_dialog/child_kits/_dialog_body.tsx CHANGED Viewed

@@ -11,9 +11,9 @@ type DialogBodyProps = {
 // Body component
 const DialogBody = (props: DialogBodyProps) => {
-  const { children, className } = props
+  const { children, padding = "sm", className } = props
   const bodyCSS = buildCss("dialog_body")
-  const bodySpacing = globalProps(props)
+  const bodySpacing = globalProps(props, { padding })
   return (
     <div className={classnames(bodyCSS, bodySpacing, className)}>

data/app/pb_kits/playbook/pb_dialog/child_kits/_dialog_footer.tsx CHANGED Viewed

@@ -25,13 +25,16 @@ type DialogFooterProps = {
 const DialogFooter = (props: DialogFooterProps) => {
   const {
     children,
+    padding = "sm",
+    paddingBottom = "sm",
+    paddingX = "sm",
     className,
     spacing = "between",
     separator = false,
   } = props
   const footerCSS = buildCss("dialog_footer")
-  const footerSpacing = globalProps(props)
+  const footerSpacing = globalProps(props, { padding, paddingBottom, paddingX })
   return (
     <>

data/app/pb_kits/playbook/pb_dialog/child_kits/_dialog_header.tsx CHANGED Viewed

@@ -28,6 +28,7 @@ const DialogHeader = (props: DialogHeaderProps) => {
     children,
     className,
     data = {},
+    padding = "sm",
     spacing = "between",
     closeable = true,
     separator = true,
@@ -37,7 +38,7 @@ const DialogHeader = (props: DialogHeaderProps) => {
   const dataProps = buildDataProps(data)
   const api = useContext(DialogContext)
   const headerCSS = buildCss("dialog_header")
-  const headerSpacing = globalProps(props)
+  const headerSpacing = globalProps(props, { padding })
   /* eslint-disable react/jsx-handler-names */

data/app/pb_kits/playbook/pb_kit/dateTime.ts CHANGED Viewed

@@ -1,90 +1,162 @@
-import moment, { Moment } from 'moment'
-import 'moment-strftime'
-import 'moment-timezone'
-type DateTimeType = {
-  value: string | Date,
-  zone?: string,
-}
 const ABBR_DAYS = ['SU', 'M', 'T', 'W', 'TH', 'F', 'S']
-export default class DateTime {
-  value: Moment & any
-  constructor({ value, zone = 'America/New_York' }: DateTimeType) {
-    this.value = this.convertToTimestampZone(value, zone)
-  }
-  convertToTimestampZone(value: string | Date, zone: string) {
-    return moment(value).tz(zone)
-  }
-  convertToTimezone() {
-    return this.value.strftime('%Z')
-  }
+const days = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
-  toCustomFormat(format = '%-m/%-d') {
-    return this.value.strftime(format)
-  }
+const months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
-  toYear() {
-    return this.value.strftime('%Y')
+export const toMinute = (newDate: Date, timeZone?: string): string => {
+  const date = new Date(newDate)
+  if (timeZone) {
+    return date.toLocaleTimeString(undefined, {timeZone, hour: "2-digit", minute: "2-digit"}).slice(3, 5);
+  } else {
+    return date.toLocaleTimeString(undefined, {hour: "2-digit", minute: "2-digit"}).slice(3, 5);
   }
+}
-  toMonth() {
-    return this.value.strftime('%b')
+export const toHour = (newDate: Date, timeZone?: string): string => {
+  const date = new Date(newDate)
+  if (timeZone) {
+    return date.toLocaleTimeString(undefined, {timeZone, hour: "numeric"}).split(' ')[0];
+  } else {
+    return date.toLocaleTimeString(undefined, {hour: "numeric"}).split(' ')[0];
   }
+}
-  toMonthNum() {
-    return this.value.strftime('%-m')
-  }
+export const toDay = (newDate: Date, timeZone?: string): number => {
+    if (timeZone) {
+      const date = new Date(newDate.toLocaleString(undefined, { timeZone }));
+      return date.getUTCDate()
+    } else {
+      const date = new Date(newDate)
+      return date.getUTCDate()
+    }
+}
-  toMonthFull() {
-    return this.value.strftime('%B')
-  }
+export const toDayAbbr = (newDate: Date): string => {
+  const date = new Date(newDate)
+  return ABBR_DAYS[date.getUTCDay()]
+}
-  toDay() {
-    return this.value.strftime('%e')
-  }
+export const toWeekday = (newDate: Date): string => {
+    const date = new Date(newDate)
+    return days[date.getUTCDay()]
+}
-  toDayAbbr() {
-    return ABBR_DAYS[this.value.day()]
-  }
+export const toMonth = (newDate: Date, timeZone?: string): string => {
+    if (timeZone) {
+      const date = new Date(newDate.toLocaleString(undefined, { timeZone }));
+      return months[date.getUTCMonth()]
+    } else {
+      const date = new Date(newDate)
+      return months[date.getUTCMonth()]
+    }
+}
-  toWeekday() {
-    return this.value.strftime('%a')
-  }
+export const toMonthNum = (newDate: Date): number => {
+  const date = new Date(newDate)
+  return date.getUTCMonth() +1
+}
-  toHour() {
-    return this.value.strftime('%l')
-  }
+export const toYear = (newDate: Date, timeZone?: string): number => {
+    if (timeZone) {
+      const date = new Date(newDate.toLocaleString(undefined, { timeZone }));
+      return date.getUTCFullYear()
+    } else {
+      const date = new Date(newDate)
+      return date.getUTCFullYear()
+    }
+}
-  toMinute() {
-    return this.value.strftime('%M')
+export const toTime = (newDate: Date, timeZone?: string): string => {
+  const date = new Date(newDate)
+  if (timeZone) {
+    return date.toLocaleTimeString(undefined, {timeZone, timeStyle: "short"}).split(' ')[0];
+  } else {
+    return date.toLocaleTimeString(undefined, {timeStyle: "short"}).split(' ')[0];
   }
+}
-  toMeridian() {
-    return this.value.strftime('%P')[0]
-  }
+export const toMeridiem = (newDate: Date, timeZone?: string): string => {
+    const date = new Date(newDate)
+    if (timeZone) {
+      return date.toLocaleString(undefined, {timeZone, hour12: true }).slice(-2).charAt(0).toLocaleLowerCase();
+    } else {
+      return date.toLocaleString(undefined, {hour12: true }).slice(-2).charAt(0).toLocaleLowerCase();
+    }
+}
-  toIso() {
-    return this.value.toISOString()
-  }
+export const toTimeZone = (newDate: Date, timeZone?: string): string => {
+    const date = new Date(newDate)
+    if (timeZone) {
+      return date.toLocaleString(undefined, {timeZone, timeZoneName: "short"}).split(' ')[3];
+    } else {
+      return date.toLocaleString(undefined, {timeZoneName: "short"}).split(' ')[3];
+    }
+}
-  toTime() {
-    const time = this.value.strftime('%I:%M')
+export const toTimeWithMeridiem = (newDate: Date, timeZone: string): string => {
+  const date = new Date(newDate)
+  return `${toTime(date, timeZone)}${toMeridiem(date, timeZone)}`;
+}
-    // strftime adds a leading 0 on single hour times. ie 08:31.
-    // this removes that 0 to match the rails kit.
-    return time.charAt() === '0' ? time.slice(1) : time
-  }
+export const toIso = (newDate: Date): string => {
+    const date = new Date(newDate)
+    return date.toISOString()
+}
-  toTimezone() {
-    return this.value.strftime('%Z')
-  }
+export const fromNow = (newDate: Date): string => {
+  const startDate = new Date(newDate).getTime()
+  const endDate = new Date().getTime()
+  const elapsedTime = endDate - startDate
+  let elapsedTimeString = `${Math.round(elapsedTime / (365.25 * 24 * 60 * 60 * 1000))} years ago.`; // 730+ days
+  const elapsedTimeData = [
+    { min: 0, max: 44999, value: "a few seconds ago" }, // 0-44 seconds
+    { min: 45000, max: 89999, value: "a minute ago" }, // 45-89 seconds
+    { min: 90000, max: 2649999, value: `${Math.round(elapsedTime / 60000)} minutes ago`}, //  90s-44 minutes
+    { min: 2650000, max: 7299999, value: "an hour ago" }, // 45-120 minutes
+    { min: 7300000, max: 75699999, value: `${Math.round(elapsedTime / 3600000)} hours ago`}, // 2-21 hours
+    { min: 75700000, max: 172899999, value: "a day ago" }, // 22-48 hours
+    { min: 172900000, max: 2169999999, value: `${Math.round(elapsedTime / 86400000)} days ago`}, // 2-25 days
+    { min: 2170000000, max: 5184999999, value: "a month ago"}, // 26-60 days
+    { min: 5185000000, max: 27561699999, value: `${Math.round(elapsedTime / 30.44 * 24 * 60 * 60 * 1000)} months ago`}, // 60-319 days
+    { min: 27561700000, max: 63072999999, value: "a year ago"}, // 320-730 days
+  ];
+  for (const timeDate of elapsedTimeData) {
+    if (elapsedTime >= timeDate.min && elapsedTime <= timeDate.max) {
+      elapsedTimeString = timeDate.value;
+      break;
+    }
+  }
+  return elapsedTimeString
+}
-  toTimeWithMeridian() {
-    return this.toTime() + this.toMeridian()
+export const toCustomFormat = (newDate: Date, format = 'month_day'): string => {
+  const date = new Date(newDate)
+  if (format == "month_day") {
+    return `${toMonthNum(date)}/${toDay(date)}`
+  } else {
+    return `${date.toLocaleString(undefined, {month: "short"})} ${toDay(date)}`
   }
 }
+export default {
+  toMinute,
+  toHour,
+  toDay,
+  toDayAbbr,
+  toWeekday,
+  toMonth,
+  toMonthNum,
+  toYear,
+  toTime,
+  toMeridiem,
+  toTimeZone,
+  toTimeWithMeridiem,
+  toIso,
+  fromNow,
+  toCustomFormat,
+}