playbook_ui 12.33.0.pre.alpha.revert2650closedialogonoutsideclick977 → 12.33.1.pre.alpha.PLAY933navkitcollapsible994

data/app/pb_kits/playbook/pb_date_stacked/_date_stacked.tsx

@@ -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: Date;
+  date: string | Date;
   size?: "sm" | "md";
   id?: string;
   reverse?: boolean;
@@ -45,42 +45,39 @@ const DateStacked = (props: DateStackedProps) => {
     className
   );
 
-  const currentYear = new Date().getFullYear()
-  const inputYear = DateTime.toYear(date);
+  const currentYear = new Date().getFullYear().toString();
+  const dateTimestamp = new DateTime({ value: date });
+  const inputYear = dateTimestamp.toYear().toString();
   const dataProps = buildDataProps(data)
 
   return (
     <>
       {bold == false ? (
-        <div {...dataProps}
-            className={classes}
-        >
+        <div {...dataProps} className={classes}>
           <div className="pb_date_stacked_day_month">
-            <Caption text={DateTime.toMonth(date).toUpperCase()} />
+            <Caption text={dateTimestamp.toMonth().toUpperCase()} />
             <Title
-                dark={dark}
-                size={sizes[size]}
-                text={DateTime.toDay(date).toString()}
+              dark={dark}
+              size={sizes[size]}
+              text={dateTimestamp.toDay()}
             />
           </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={DateTime.toMonth(date)}
+              <Title 
+                bold 
+                dark={dark} 
+                size="4" 
+                text={dateTimestamp.toMonth()} 
               />
-              <Title
-                  bold
-                  dark={dark}
-                  size="4"
-                  text={DateTime.toDay(date).toString()}
+              <Title 
+                bold 
+                dark={dark} 
+                size="4" 
+                text={dateTimestamp.toDay()} 
               />
               {currentYear != inputYear && <Title size="4">{inputYear}</Title>}
             </div>

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

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

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

@@ -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 GMT+9')
+    expect(text.textContent).toEqual('2:00p JST')
   })
   test('renders DatePicker size', () => {
     render(

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

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

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

@@ -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:00aGMT+9`)
+  expect(kit).toHaveTextContent(`${monthDayYear}2:00aJST`)
 })
 
 test('renders time in timezone', () => {

data/app/pb_kits/playbook/pb_date_year_stacked/_date_year_stacked.tsx

@@ -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,12 +13,13 @@ type DateYearStackedProps = {
   className?: string | string[],
   dark?: boolean,
   data?: string,
-  date: Date,
+  date: string,
   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),
@@ -28,14 +29,15 @@ const DateYearStacked = (props: DateYearStackedProps) => {
 
   return (
     <div {...dataProps}
-        className={css}
-    >
+    className={css}>
       <Title
           dark={dark}
           size={4}
-          text={`${DateTime.toDay(date)} ${DateTime.toMonth(date).toUpperCase()}`}
+          text={`${dateTimestamp.toDay()} ${dateTimestamp
+          .toMonth()
+          .toUpperCase()}`}
       />
-      <Body color="light">{DateTime.toYear(date)}</Body>
+      <Body color="light">{dateTimestamp.toYear()}</Body>
     </div>
   )
 }

data/app/pb_kits/playbook/pb_dialog/dialogHelper.js

@@ -1,6 +1,7 @@
 const dialogHelper = () => {
   const openTrigger = document.querySelectorAll("[data-open-dialog]");
   const closeTrigger = document.querySelectorAll("[data-close-dialog]");
+  const dialogs = document.querySelectorAll(".pb_dialog_rails")
 
   openTrigger.forEach((open) => {
     open.addEventListener("click", () => {
@@ -8,21 +9,6 @@ const dialogHelper = () => {
       var targetDialog = document.getElementById(openTriggerData)
       if (targetDialog.open) return;
       targetDialog.showModal();
-
-      //the following allows you to close dialog by clicking on overlay
-      targetDialog.addEventListener('click',((event) => {
-        var dialogContainerData = targetDialog.parentElement.dataset
-         if (dialogContainerData.overlayClick === "overlay_close") return;
-          let rect = event.target.getBoundingClientRect();
-                if (rect.left > event.clientX ||
-              rect.right < event.clientX ||
-              rect.top > event.clientY ||
-              rect.bottom < event.clientY
-          ) {
-              targetDialog.close();
-          }
-        })
-      );
     });
   });
 
@@ -32,6 +18,21 @@ const dialogHelper = () => {
       document.getElementById(closeTriggerData).close();
     });
   });
+
+  // Close dialog box on outside click
+  dialogs.forEach((dialogElement) => {
+    dialogElement.addEventListener("click", (event) => {
+      const dialogParentDataset = dialogElement.parentElement.dataset
+      if (dialogParentDataset.overlayClick === "overlay_close") return
+
+      const clickedOutsideDialogBox = event.target.classList.contains("pb_dialog_rails")
+
+      if (clickedOutsideDialogBox) {
+        dialogElement.close()
+        event.stopPropagation()
+      }
+    })
+  })
 };
 
 export default dialogHelper;

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

@@ -1,162 +1,90 @@
+
+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']
 
-const days = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
+export default class DateTime {
+  value: Moment & any
+  constructor({ value, zone = 'America/New_York' }: DateTimeType) {
+    this.value = this.convertToTimestampZone(value, zone)
+  }
 
-const months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
+  convertToTimestampZone(value: string | Date, zone: string) {
+    return moment(value).tz(zone)
+  }
 
-export const toMinute = (newDate: Date | string, 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);
+  convertToTimezone() {
+    return this.value.strftime('%Z')
   }
-}
 
-export const toHour = (newDate: Date | string, 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];
+  toCustomFormat(format = '%-m/%-d') {
+    return this.value.strftime(format)
   }
-}
 
-export const toDay = (newDate: Date | string, timeZone?: string): number => {
-    if (timeZone) {
-      const date = new Date(newDate.toLocaleString(undefined, { timeZone }));
-      return date.getDate()
-    } else {
-      const date = new Date(newDate)
-      return date.getDate()
-    }
-}
+  toYear() {
+    return this.value.strftime('%Y')
+  }
 
-export const toDayAbbr = (newDate: Date | string): string => {
-  const date = new Date(newDate)
-  return ABBR_DAYS[date.getUTCDay()]
-}
+  toMonth() {
+    return this.value.strftime('%b')
+  }
 
-export const toWeekday = (newDate: Date | string): string => {
-    const date = new Date(newDate)
-    return days[date.getUTCDay()]
-}
+  toMonthNum() {
+    return this.value.strftime('%-m')
+  }
 
-export const toMonth = (newDate: Date | string, 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()]
-    }
-}
+  toMonthFull() {
+    return this.value.strftime('%B')
+  }
 
-export const toMonthNum = (newDate: Date | string): number => {
-  const date = new Date(newDate)
-  return date.getUTCMonth() +1
-}
+  toDay() {
+    return this.value.strftime('%e')
+  }
 
-export const toYear = (newDate: Date | string, 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()
-    }
-}
+  toDayAbbr() {
+    return ABBR_DAYS[this.value.day()]
+  }
 
-export const toTime = (newDate: Date | string, 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];
+  toWeekday() {
+    return this.value.strftime('%a')
   }
-}
 
-export const toMeridiem = (newDate: Date | string, 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();
-    }
-}
+  toHour() {
+    return this.value.strftime('%l')
+  }
 
-export const toTimeZone = (newDate: Date | string, 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];
-    }
-}
+  toMinute() {
+    return this.value.strftime('%M')
+  }
 
-export const toTimeWithMeridiem = (newDate: Date | string, timeZone: string): string => {
-  const date = new Date(newDate)
-  return `${toTime(date, timeZone)}${toMeridiem(date, timeZone)}`;
-}
+  toMeridian() {
+    return this.value.strftime('%P')[0]
+  }
 
-export const toIso = (newDate: Date | string): string => {
-    const date = new Date(newDate)
-    return date.toISOString()
-}
+  toIso() {
+    return this.value.toISOString()
+  }
 
-export const fromNow = (newDate: Date | string): 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
-}
+  toTime() {
+    const time = this.value.strftime('%I:%M')
 
-export const toCustomFormat = (newDate: Date | string, 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)}`
+    // 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 default {
-  toMinute,
-  toHour,
-  toDay,
-  toDayAbbr,
-  toWeekday,
-  toMonth,
-  toMonthNum,
-  toYear,
-  toTime,
-  toMeridiem,
-  toTimeZone,
-  toTimeWithMeridiem,
-  toIso,
-  fromNow,
-  toCustomFormat,
-}
+  toTimezone() {
+    return this.value.strftime('%Z')
+  }
+
+  toTimeWithMeridian() {
+    return this.toTime() + this.toMeridian()
+  }
+}

data/app/pb_kits/playbook/pb_label_value/_label_value.tsx

@@ -1,8 +1,8 @@
 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 Body from "../pb_body/_body";
 import Caption from "../pb_caption/_caption";
@@ -26,9 +26,9 @@ type LabelValueProps = {
   title?: string;
 };
 
-const dateString = (value: Date) => {
-  const month = DateTime.toMonthNum(value);
-  const day = DateTime.toDay(value);
+const dateString = (value: DateTime) => {
+  const month = value.toMonthNum();
+  const day = value.toDay();
 
   return ` · ${month}/${day}`;
 };
@@ -52,6 +52,7 @@ const LabelValue = (props: LabelValueProps) => {
 
   const ariaProps = buildAriaProps(aria);
   const dataProps = buildDataProps(data);
+  const formattedDate = new DateTime({ value: date });
   const variantClass = variant === "details" ? "details" : "";
   const classes = classnames(
     buildCss("pb_label_value_kit", variantClass),
@@ -61,81 +62,59 @@ const LabelValue = (props: LabelValueProps) => {
 
   return (
     <div
-        {...ariaProps}
-        {...dataProps}
-        className={classes}
-        id={id}
-        title={title}
+      {...ariaProps}
+      {...dataProps}
+      className={classes}
+      id={id}
+      title={title}
     >
-      <Caption dark={dark}
-          text={label}
-      />
+      <Caption dark={dark} text={label} />
       {variant === "details" ? (
-        <Flex inline
-            vertical="center"
-        >
+        <Flex inline vertical="center">
           {icon && (
-            <Body color="light"
-                dark={dark}
-                marginRight="xs"
-            >
-              <Icon dark={dark}
-                  fixedWidth
-                  icon={icon}
-              />
+            <Body color="light" dark={dark} marginRight="xs">
+              <Icon dark={dark} fixedWidth icon={icon} />
             </Body>
           )}
           {description && (
             <Body
-                color="light"
-                dark={dark}
-                marginRight="xs"
-                text={description}
+              color="light"
+              dark={dark}
+              marginRight="xs"
+              text={description}
             />
           )}
           {active === true ? (
-            <Flex inline
-                vertical="center"
-            >
+            <Flex inline vertical="center">
               {title && (
-                <Title dark={dark}
-                    size={4}
-                    text={title}
-                    variant="link"
-                />
+                <Title dark={dark} size={4} text={title} variant="link" />
               )}
               {date && (
                 <Title
-                    dark={dark}
-                    marginLeft="xs"
-                    size={4}
-                    text={" " + dateString(date)}
-                    variant="link"
+                  dark={dark}
+                  marginLeft="xs"
+                  size={4}
+                  text={" " + dateString(formattedDate)}
+                  variant="link"
                 />
               )}
             </Flex>
           ) : (
             <>
-              {title && <Title dark={dark}
-                  size={4}
-                  text={title}
-                        />
-              }
+              {title && <Title dark={dark} size={4} text={title} />}
               {date && (
                 <Title
-                    dark={dark}
-                    marginLeft="xs"
-                    size={4}
-                    text={" " + dateString(date)}
+                  dark={dark}
+                  marginLeft="xs"
+                  size={4}
+                  text={" " + dateString(formattedDate)}
                 />
               )}
             </>
           )}
         </Flex>
       ) : (
-        <Body dark={dark}
-            text={value}
-        />
+        <Body dark={dark} text={value} />
       )}
     </div>
   );