playbook_ui 7.11.1 → 7.14.0.pre.alpha1

data/app/pb_kits/playbook/pb_timeline/docs/_timeline_with_date.jsx

@@ -2,40 +2,47 @@ import React from 'react'
 import Timeline from '../_timeline.jsx'
 import { TitleDetail } from '../../'
 
-const TimelineWithDate = () => (
+const TimelineWithDate = (props) => (
   <div>
     <Timeline
         orientation="horizontal"
         showDate
+        {...props}
     >
       <Timeline.Item
           date={new Date()}
           icon="user"
           iconColor="royal"
+          {...props}
       >
         <TitleDetail
             detail="37-27 74th Street"
-            title="Jackson heights"
+            title="Jackson Heights"
+            {...props}
         />
       </Timeline.Item>
       <Timeline.Item
           icon="check"
           iconColor="teal"
           lineStyle="dotted"
+          {...props}
       >
         <TitleDetail
             detail="81 Gate St Brooklyn"
             title="Greenpoint"
+            {...props}
         />
       </Timeline.Item>
       <Timeline.Item
           date={new Date().setDate(new Date().getDate() + 1)}
           icon="map-marker-alt"
           iconColor="purple"
+          {...props}
       >
         <TitleDetail
             detail="72 E St Astoria"
             title="Society Hill"
+            {...props}
         />
       </Timeline.Item>
     </Timeline>
@@ -47,35 +54,42 @@ const TimelineWithDate = () => (
     <Timeline
         orientation="vertical"
         showDate
+        {...props}
     >
       <Timeline.Item
           date={new Date()}
           icon="user"
           iconColor="royal"
+          {...props}
       >
         <TitleDetail
             detail="37-27 74th Street"
-            title="Jackson heights"
+            title="Jackson Heights"
+            {...props}
         />
       </Timeline.Item>
       <Timeline.Item
           icon="check"
           iconColor="teal"
           lineStyle="dotted"
+          {...props}
       >
         <TitleDetail
             detail="81 Gate St Brooklyn"
             title="Greenpoint"
+            {...props}
         />
       </Timeline.Item>
       <Timeline.Item
           date={new Date().setDate(new Date().getDate() + 1)}
           icon="map-marker-alt"
           iconColor="purple"
+          {...props}
       >
         <TitleDetail
             detail="72 E St Astoria"
             title="Society Hill"
+            {...props}
         />
       </Timeline.Item>
     </Timeline>

data/app/pb_kits/playbook/pb_timestamp/_timestamp.html.erb

@@ -1,6 +1,8 @@
 <%= content_tag(:div,
-    id: object.id,
-    data: object.data,
-    class: object.classname) do %>
-  <%= pb_rails("caption", props: { text: object.text, tag: 'span', size: 'xs' }) %>
+  aria: object.aria,
+  id: object.id,
+  data: object.data,
+  class: object.classname) do %>
+
+  <%= pb_rails("caption", props: { text: object.caption_text, size: 'xs', dark: object.dark }) %>
 <% end %>

data/app/pb_kits/playbook/pb_timestamp/_timestamp.jsx

@@ -2,36 +2,112 @@
 
 import React from 'react'
 import classnames from 'classnames'
-
+import DateTime from '../pb_kit/dateTime.js'
+import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
 import { Caption } from '../'
-
-import { buildCss, buildDataProps } from '../utilities/props'
-
 import { globalProps } from '../utilities/globalProps.js'
 
 type TimestampProps = {
+  align?: "left" | "center" | "right",
+  aria?: object,
+  className?: string | array<string>,
+  dark?: boolean,
+  data?: string,
+  text: string,
+  timestamp: string,
+  timezone: string,
   id?: string,
-  data?: object,
-  className?: string,
-  text?: string,
+  showDate?: boolean,
+  showUser?: boolean,
+  showTimezone?: boolean,
+  variant?: "default" | "elapsed" | "updated"
 }
 
 const Timestamp = (props: TimestampProps) => {
-  const { id, className, data = {}, text } = props
+  const {
+    align = 'left',
+    aria = {},
+    className,
+    dark = false,
+    data = {},
+    text,
+    timestamp,
+    timezone,
+    showDate = true,
+    showUser = false,
+    showTimezone = false,
+    variant = 'default',
+  } = props
+
+  const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
-  const pbCss = buildCss('pb_timestamp_kit')
+  const classes = classnames(
+    buildCss('pb_timestamp_kit', align, {
+      dark: dark,
+      variant: variant,
+    }),
+    globalProps(props),
+    className
+  )
+
+  const currentYear = new Date().getFullYear().toString()
+  const dateTimestamp = new DateTime({ value: timestamp, zone: timezone })
+  const dateDisplay = `${dateTimestamp.toMonth()} ${dateTimestamp.toDay()}`
+  const shouldShowUser = showUser == true && text.length > 0
+  const shouldShowTimezone = showTimezone == true && timezone.length > 0
+  const userDisplay = shouldShowUser ? ` by ${text}` : ''
+
+  let timeDisplay = `${dateTimestamp.toHour()}:${dateTimestamp.toMinute()}${dateTimestamp.toMeridian()}`
+
+  const fullTimeDisplay = () => {
+    if (shouldShowTimezone) {
+      timeDisplay = `${timeDisplay} ${dateTimestamp.toTimezone()}`
+    }
+    return timeDisplay
+  }
+
+  const fullDateDisplay = () => {
+    let fullDisplay = `${dateTimestamp.toMonth()} ${dateTimestamp.toDay()}`
+    if (dateTimestamp.toYear() > currentYear) {
+      fullDisplay = `${fullDisplay}, ${dateTimestamp.toYear()}`
+    }
+    return `${fullDisplay} ${' \u00b7 '} ${fullTimeDisplay()}`
+  }
+
+  const formatUpdatedString = () => {
+    return `Last updated ${userDisplay} on ${dateDisplay} at ${timeDisplay}`
+  }
+
+  const formatElapsedString = () => {
+    return `Last updated ${userDisplay} ${dateTimestamp.value.fromNow()}`
+  }
+
+  const datetimeOrText = timestamp ? fullDateDisplay() : text
+
+  const captionText = () => {
+    switch (variant) {
+    case 'updated':
+      return formatUpdatedString(userDisplay, dateTimestamp)
+    case 'elapsed':
+      return formatElapsedString(userDisplay, timeDisplay)
+    default:
+      return showDate ? datetimeOrText : fullTimeDisplay()
+    }
+  }
 
   return (
     <div
+        {...ariaProps}
         {...dataProps}
-        className={classnames(pbCss, globalProps(props), className)}
-        id={id}
+        className={classes}
     >
-      <Caption
-          size="xs"
-          tag="span"
-          text={text}
-      />
+      <div className="pb_timestamp_kit">
+        <Caption
+            dark={dark}
+            size="xs"
+            text={captionText()}
+        />
+      </div>
     </div>
   )
 }

data/app/pb_kits/playbook/pb_timestamp/_timestamp.scss

@@ -1,5 +1,16 @@
 @import "timestamp-mixins";
+@import "../tokens/colors";
 
-[class^=pb_timestamp_kit] {
+[class^=pb_timestamp_kit]{
   @include pb_timestamp;
+
+  &[class*=_center]  {
+    text-align: center;
+  }
+  &[class*=_right]  {
+    text-align: right;
+  }
+  &[class*=_dark] {
+    color: $text_dk_default;
+  }
 }

data/app/pb_kits/playbook/pb_timestamp/docs/_description.md

@@ -1 +1 @@
-This kit is a small indicator for the user to know s timestamp
+This low profile kit displays time.  Elapsed, current, future, or otherwise.

data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_align.jsx

@@ -1,13 +1,21 @@
 import React from 'react'
 import Timestamp from '../_timestamp.jsx'
 
+const todaysDate = new Date()
+const year = new Date().getFullYear() + 4
+const month = new Date().getMonth()
+const date = new Date().getDate()
+const hours = new Date().getHours()
+const minutes = new Date().getMinutes()
+const customDate = new Date(year, month, date, hours, minutes)
+
 const TimestampAlign = (props) => {
   return (
     <div>
       <Timestamp
           align="left"
-          showDate="false"
-          timestamp={new Date().getTime()}
+          showDate={false}
+          timestamp={todaysDate}
           {...props}
       />
 
@@ -15,8 +23,8 @@ const TimestampAlign = (props) => {
 
       <Timestamp
           align="left"
-          showDate="true"
-          timestamp={new Date().getTime()}
+          showDate
+          timestamp={todaysDate}
           {...props}
       />
 
@@ -24,8 +32,8 @@ const TimestampAlign = (props) => {
 
       <Timestamp
           align="left"
-          showDate="true"
-          timestamp={new Date((new Date()).getFullYear() + 4, (new Date().getMonth()), (new Date().getDate() + 1)).getTime()}
+          showDate
+          timestamp={customDate}
           {...props}
       />
 
@@ -34,8 +42,8 @@ const TimestampAlign = (props) => {
 
       <Timestamp
           align="center"
-          showDate="false"
-          timestamp={new Date().getTime()}
+          showDate={false}
+          timestamp={todaysDate}
           {...props}
       />
 
@@ -43,8 +51,8 @@ const TimestampAlign = (props) => {
 
       <Timestamp
           align="center"
-          showDate="true"
-          timestamp={new Date().getTime()}
+          showDate
+          timestamp={todaysDate}
           {...props}
       />
 
@@ -52,8 +60,8 @@ const TimestampAlign = (props) => {
 
       <Timestamp
           align="center"
-          showDate="true"
-          timestamp={new Date((new Date()).getFullYear() + 4, (new Date().getMonth()), (new Date().getDate() + 1)).getTime()}
+          showDate
+          timestamp={customDate}
           {...props}
       />
 
@@ -62,8 +70,8 @@ const TimestampAlign = (props) => {
 
       <Timestamp
           align="right"
-          showDate="false"
-          timestamp={new Date().getTime()}
+          showDate={false}
+          timestamp={todaysDate}
           {...props}
       />
 
@@ -71,8 +79,8 @@ const TimestampAlign = (props) => {
 
       <Timestamp
           align="right"
-          showDate="true"
-          timestamp={new Date().getTime()}
+          showDate
+          timestamp={todaysDate}
           {...props}
       />
 
@@ -80,8 +88,8 @@ const TimestampAlign = (props) => {
 
       <Timestamp
           align="right"
-          showDate="true"
-          timestamp={new Date((new Date()).getFullYear() + 4, (new Date().getMonth()), (new Date().getDate() + 1)).getTime()}
+          showDate
+          timestamp={customDate}
           {...props}
       />
     </div>

data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_default.html.erb

@@ -1 +1,21 @@
-<%= pb_rails("timestamp", props: { text: "20 seconds ago" }) %>
+<%= pb_rails("timestamp", props: {
+  timestamp: DateTime.now,
+  show_date: false,
+  align: "left"
+}) %>
+
+<br>
+
+<%= pb_rails("timestamp", props: {
+  timestamp: DateTime.now,
+  show_date: true,
+  align: "left"
+}) %>
+
+<br>
+
+<%= pb_rails("timestamp", props: {
+  timestamp: DateTime.now + 4.years,
+  show_date: true,
+  align: "left"
+}) %>

data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_default.jsx

@@ -1,8 +1,43 @@
 import React from 'react'
-import { Timestamp } from '../../'
+import Timestamp from '../_timestamp.jsx'
 
-const TimestampDefault = () => (
-  <Timestamp text="20 seconds ago" />
-)
+const todaysDate = new Date()
+const year = new Date().getFullYear() + 4
+const month = new Date().getMonth()
+const date = new Date().getDate()
+const hours = new Date().getHours()
+const minutes = new Date().getMinutes()
+const customDate = new Date(year, month, date, hours, minutes)
+
+const TimestampDefault = (props) => {
+  return (
+    <div>
+      <Timestamp
+          align="left"
+          showDate={false}
+          timestamp={todaysDate}
+          {...props}
+      />
+
+      <br />
+
+      <Timestamp
+          align="left"
+          showDate
+          timestamp={todaysDate}
+          {...props}
+      />
+
+      <br />
+
+      <Timestamp
+          align="left"
+          showDate
+          timestamp={customDate}
+          {...props}
+      />
+    </div>
+  )
+}
 
 export default TimestampDefault

data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_elapsed.jsx

@@ -1,13 +1,21 @@
 import React from 'react'
 import Timestamp from '../_timestamp.jsx'
 
+const todaysDate = new Date()
+const year = new Date().getFullYear()
+const month = new Date().getMonth()
+const date = new Date().getDate()
+const hours = new Date().getHours() - 10
+const minutes = new Date().getMinutes()
+const customDate = new Date(year, month, date, hours, minutes)
+
 const TimestampElapsed = (props) => {
   return (
     <div>
       <Timestamp
-          showUser="true"
+          showUser
           text="Maricris Nonato"
-          timestamp={new Date().getTime()}
+          timestamp={todaysDate}
           variant="elapsed"
           {...props}
       />
@@ -15,8 +23,8 @@ const TimestampElapsed = (props) => {
       <br />
 
       <Timestamp
-          showUser="false"
-          timestamp={new Date((new Date()).getFullYear(), new Date().getMonth(), new Date().getDate()).getTime()}
+          showUser={false}
+          timestamp={customDate}
           variant="elapsed"
           {...props}
       />