playbook_ui 12.37.0.pre.alpha.PLAYaddingdatapropselectkit1071 → 12.37.0.pre.alpha.svgiconmethods1064

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

@@ -1,173 +1,90 @@
-const ABBR_DAYS = ['SU', 'M', 'T', 'W', 'TH', 'F', 'S']
 
-const days = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
+import moment, { Moment } from 'moment'
+import 'moment-strftime'
+import 'moment-timezone'
 
-const months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
+type DateTimeType = {
+  value: string | Date,
+  zone?: string,
+}
 
-const formatDate = (newDate: Date | string) => {
-  const isTimelessStringDate = typeof newDate === "string" && !newDate.includes("T")
+const ABBR_DAYS = ['SU', 'M', 'T', 'W', 'TH', 'F', 'S']
 
-  if (isTimelessStringDate) {
-    const unhyphenatedDate = new Date((newDate as string).replace(/-/g, "/"))
-    return unhyphenatedDate
+export default class DateTime {
+  value: Moment & any
+  constructor({ value, zone = 'America/New_York' }: DateTimeType) {
+    this.value = this.convertToTimestampZone(value, zone)
   }
 
-  return new Date(newDate)
-}
+  convertToTimestampZone(value: string | Date, zone: string) {
+    return moment(value).tz(zone)
+  }
 
-export const toMinute = (newDate: Date | string, timeZone?: string): string => {
-  const date = formatDate(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 = formatDate(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(formatDate(newDate).toLocaleString(undefined, { timeZone }));
-      return date.getDate()
-    } else {
-      const date = formatDate(newDate)
-      return date.getDate()
-    }
-}
+  toYear() {
+    return this.value.strftime('%Y')
+  }
 
-export const toDayAbbr = (newDate: Date | string): string => {
-  const date = formatDate(newDate)
-  return ABBR_DAYS[date.getUTCDay()]
-}
+  toMonth() {
+    return this.value.strftime('%b')
+  }
 
-export const toWeekday = (newDate: Date | string): string => {
-    const date = formatDate(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(formatDate(newDate).toLocaleString(undefined, { timeZone }));
-      return months[date.getUTCMonth()]
-    } else {
-      const date = formatDate(newDate)
-      return months[date.getUTCMonth()]
-    }
-}
+  toMonthFull() {
+    return this.value.strftime('%B')
+  }
 
-export const toMonthNum = (newDate: Date | string): number => {
-  const date = formatDate(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 = formatDate(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 = formatDate(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 = formatDate(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 = formatDate(newDate)
-  return `${toTime(date, timeZone)}${toMeridiem(date, timeZone)}`;
-}
+  toMeridian() {
+    return this.value.strftime('%P')[0]
+  }
 
-export const toIso = (newDate: Date | string): string => {
-    const date = formatDate(newDate)
-    return date.toISOString()
-}
+  toIso() {
+    return this.value.toISOString()
+  }
 
-export const fromNow = (newDate: Date | string): string => {
-
-  const startDate = formatDate(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 = formatDate(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
+  }
+
+  toTimezone() {
+    return this.value.strftime('%Z')
   }
-}
 
-export default {
-  toMinute,
-  toHour,
-  toDay,
-  toDayAbbr,
-  toWeekday,
-  toMonth,
-  toMonthNum,
-  toYear,
-  toTime,
-  toMeridiem,
-  toTimeZone,
-  toTimeWithMeridiem,
-  toIso,
-  fromNow,
-  toCustomFormat,
+  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>
   );

data/app/pb_kits/playbook/pb_logistic/_logistic.jsx

@@ -0,0 +1,120 @@
+/* @flow */
+
+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 Body from '../pb_body/_body'
+import Caption from '../pb_caption/_caption'
+import Icon from '../pb_icon/_icon'
+import Title from '../pb_title/_title'
+
+const dateString = (value: DateTime) => {
+  const month = value.toMonthNum()
+  const day = value.toDay()
+
+  return ` · ${month}/${day}`
+}
+
+type LogisticProps = {
+  aria?: object,
+  className?: string,
+  dark?: boolean,
+  data?: object,
+  date: string,
+  id?: string,
+  link?: string,
+  projectName?: string,
+  projectNumber?: number,
+}
+
+const Logistic = (props: LogisticProps) => {
+  const { aria = {},
+    className,
+    dark = false,
+    data = {},
+    date,
+    id,
+    link,
+    projectName,
+    projectNumber } = props
+
+  const ariaProps = buildAriaProps(aria)
+  const dataProps = buildDataProps(data)
+  const formattedDate = new DateTime({ value: date })
+  const classes = classnames(
+    buildCss('pb_logistic_kit', { dark }),
+    globalProps(props),
+    className
+  )
+
+  return (
+    <div
+        {...ariaProps}
+        {...dataProps}
+        className={classes}
+        id={id}
+    >
+      <Body color="light">
+        <Caption text="Project" />
+        <Icon
+            fixedWidth
+            icon="home"
+        />
+
+        {` ${projectNumber}`}
+
+        <Choose>
+          <When condition={link}>
+            <a
+                className="pb_logistic_kit_links"
+                href={link}
+            >
+              <Choose>
+                <When condition={date}>
+                  <Title
+                      size={4}
+                      tag="span"
+                      text={' ' + projectName + dateString(formattedDate)}
+                  />
+                </When>
+                <Otherwise>
+                  <Title
+                      size={4}
+                      tag="span"
+                      text={' ' + projectName}
+                  />
+                </Otherwise>
+              </Choose>
+            </a>
+          </When>
+          <Otherwise>
+            <Choose>
+              <When condition={date}>
+                <Title
+                    dark={dark}
+                    size={4}
+                    tag="span"
+                    text={' ' + projectName + dateString(formattedDate)}
+                />
+              </When>
+              <Otherwise>
+                <Title
+                    dark={dark}
+                    size={4}
+                    tag="span"
+                    text={' ' + projectName}
+                />
+              </Otherwise>
+            </Choose>
+          </Otherwise>
+        </Choose>
+      </Body>
+    </div>
+  )
+}
+
+export default Logistic

data/app/pb_kits/playbook/pb_message/_message.tsx

@@ -25,7 +25,7 @@ type MessageProps = {
   label?: string,
   message: string,
   timestamp?: string,
-  timestampObject?: Date,
+  timestampObject?: string,
   timezone?: string,
   alignTimestamp?: string,
 }
@@ -62,50 +62,50 @@ const Message = (props: MessageProps) => {
 
   return (
     <div
-        {...ariaProps}
-        {...dataProps}
-        className={classes}
-        id={id}
+      {...ariaProps}
+      {...dataProps}
+      className={classes}
+      id={id}
     >
       {shouldDisplayAvatar &&
         <Avatar
-            imageUrl={avatarUrl}
-            name={avatarName}
-            size="xs"
-            status={avatarStatus}
+          imageUrl={avatarUrl}
+          name={avatarName}
+          size="xs"
+          status={avatarStatus}
         />
       }
       <div className="content_wrapper">
         <Flex
-            justify={alignTimestamp === 'left' ? 'none' : 'between'}
-            orientation="row"
+          justify={alignTimestamp === 'left' ? 'none' : 'between'}
+          orientation="row"
         >
           {label &&
             <Title
-                className="message_title"
-                size={4}
-                text={label}
+              className="message_title"
+              size={4}
+              text={label}
             />
           }
           <Timestamp
-              className={`pull-${alignTimestamp} ${timestampObject ? 'message_humanized_time' : null}`}
-              text={timestamp}
-              timestamp={''}
-              timezone={timezone}
+            className={`pull-${alignTimestamp} ${timestampObject ? 'message_humanized_time' : null}`}
+            text={timestamp}
+            timestamp={''}
+            timezone={timezone}
           />
           {timestampObject &&
             <Timestamp
-                className={`pull-${alignTimestamp} message_timestamp`}
-                text={''}
-                timestamp={timestampObject}
-                timezone={timezone}
+              className={`pull-${alignTimestamp} message_timestamp`}
+              text={''}
+              timestamp={timestampObject}
+              timezone={timezone}
             />
           }
         </Flex>
         {message &&
           <Body
-              className="pb_message_body"
-              text={message}
+            className="pb_message_body"
+            text={message}
           />
         }
         {children}

data/app/pb_kits/playbook/pb_select/docs/example.yml

@@ -11,7 +11,6 @@ examples:
   - select_error: Select w/ Error
   - select_inline: Select Inline
   - select_inline_compact: Select Inline Compact
-  - select_data_attributes: Select W/ Data Attributes
 
 
 

data/app/pb_kits/playbook/pb_select/select.html.erb

@@ -1,4 +1,5 @@
 <%= content_tag(:div,
+  data: object.data,
   aria: object.aria,
   class: object.classnames) do %>
   <% if object.label %>
@@ -23,7 +24,6 @@
         disabled: object.disabled,
         required: object.required,
         multiple: object.multiple,
-        data: object.data,
         onchange: object.onchange,
         include_blank: object.include_blank,
       )