playbook_ui 7.14.0.pre.alpha1 → 7.14.0

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

@@ -1,16 +1,5 @@
 @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 low profile kit displays time.  Elapsed, current, future, or otherwise.
+This kit is a small indicator for the user to know s timestamp

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

@@ -1,21 +1,13 @@
 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={todaysDate}
+          showDate="false"
+          timestamp={new Date().getTime()}
           {...props}
       />
 
@@ -23,8 +15,8 @@ const TimestampAlign = (props) => {
 
       <Timestamp
           align="left"
-          showDate
-          timestamp={todaysDate}
+          showDate="true"
+          timestamp={new Date().getTime()}
           {...props}
       />
 
@@ -32,8 +24,8 @@ const TimestampAlign = (props) => {
 
       <Timestamp
           align="left"
-          showDate
-          timestamp={customDate}
+          showDate="true"
+          timestamp={new Date((new Date()).getFullYear() + 4, (new Date().getMonth()), (new Date().getDate() + 1)).getTime()}
           {...props}
       />
 
@@ -42,8 +34,8 @@ const TimestampAlign = (props) => {
 
       <Timestamp
           align="center"
-          showDate={false}
-          timestamp={todaysDate}
+          showDate="false"
+          timestamp={new Date().getTime()}
           {...props}
       />
 
@@ -51,8 +43,8 @@ const TimestampAlign = (props) => {
 
       <Timestamp
           align="center"
-          showDate
-          timestamp={todaysDate}
+          showDate="true"
+          timestamp={new Date().getTime()}
           {...props}
       />
 
@@ -60,8 +52,8 @@ const TimestampAlign = (props) => {
 
       <Timestamp
           align="center"
-          showDate
-          timestamp={customDate}
+          showDate="true"
+          timestamp={new Date((new Date()).getFullYear() + 4, (new Date().getMonth()), (new Date().getDate() + 1)).getTime()}
           {...props}
       />
 
@@ -70,8 +62,8 @@ const TimestampAlign = (props) => {
 
       <Timestamp
           align="right"
-          showDate={false}
-          timestamp={todaysDate}
+          showDate="false"
+          timestamp={new Date().getTime()}
           {...props}
       />
 
@@ -79,8 +71,8 @@ const TimestampAlign = (props) => {
 
       <Timestamp
           align="right"
-          showDate
-          timestamp={todaysDate}
+          showDate="true"
+          timestamp={new Date().getTime()}
           {...props}
       />
 
@@ -88,8 +80,8 @@ const TimestampAlign = (props) => {
 
       <Timestamp
           align="right"
-          showDate
-          timestamp={customDate}
+          showDate="true"
+          timestamp={new Date((new Date()).getFullYear() + 4, (new Date().getMonth()), (new Date().getDate() + 1)).getTime()}
           {...props}
       />
     </div>

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

@@ -1,21 +1 @@
-<%= 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"
-}) %>
+<%= pb_rails("timestamp", props: { text: "20 seconds ago" }) %>

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

@@ -1,43 +1,11 @@
 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 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>
-  )
-}
+import { Timestamp } from '../../'
+
+const TimestampDefault = (props) => (
+  <Timestamp
+      text="20 seconds ago"
+      {...props}
+  />
+)
 
 export default TimestampDefault

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

@@ -1,21 +1,13 @@
 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
+          showUser="true"
           text="Maricris Nonato"
-          timestamp={todaysDate}
+          timestamp={new Date().getTime()}
           variant="elapsed"
           {...props}
       />
@@ -23,8 +15,8 @@ const TimestampElapsed = (props) => {
       <br />
 
       <Timestamp
-          showUser={false}
-          timestamp={customDate}
+          showUser="false"
+          timestamp={new Date((new Date()).getFullYear(), new Date().getMonth(), new Date().getDate()).getTime()}
           variant="elapsed"
           {...props}
       />

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

@@ -0,0 +1,54 @@
+<%= pb_rails("timestamp", props: {
+  timestamp: DateTime.now,
+  variant: "elapsed",
+  show_user: true,
+  text: "Maricris Nonato",
+  align: "left"
+}) %>
+
+<br>
+
+<%= pb_rails("timestamp", props: {
+  timestamp: DateTime.now,
+  variant: "elapsed",
+  show_user: false,
+  align: "left"
+}) %>
+
+<br><br>
+
+<%= pb_rails("timestamp", props: {
+  timestamp: DateTime.now,
+  variant: "elapsed",
+  show_user: true,
+  text: "Maricris Nonato",
+  align: "center"
+}) %>
+
+<br>
+
+<%= pb_rails("timestamp", props: {
+  timestamp: DateTime.now,
+  variant: "elapsed",
+  show_user: false,
+  align: "center"
+}) %>
+
+<br><br>
+
+<%= pb_rails("timestamp", props: {
+  timestamp: DateTime.now,
+  variant: "elapsed",
+  show_user: true,
+  text: "Maricris Nonato",
+  align: "right"
+}) %>
+
+<br>
+
+<%= pb_rails("timestamp", props: {
+  timestamp: DateTime.now,
+  variant: "elapsed",
+  show_user: false,
+  align: "right"
+}) %>

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

@@ -0,0 +1,73 @@
+import React from 'react'
+import Timestamp from '../_timestamp.jsx'
+
+const TimestampUpdatedAlign = (props) => {
+  return (
+    <div>
+      <Timestamp
+          align="left"
+          showUser="true"
+          text="Maricris Nonato"
+          timestamp={new Date().getTime()}
+          variant="elapsed"
+          {...props}
+      />
+
+      <br />
+
+      <Timestamp
+          align="left"
+          showUser="false"
+          timestamp={new Date((new Date()).getFullYear(), new Date().getMonth(), new Date().getDate()).getTime()}
+          variant="elapsed"
+          {...props}
+      />
+
+      <br />
+      <br />
+
+      <Timestamp
+          align="center"
+          showUser="true"
+          text="Maricris Nonato"
+          timestamp={new Date().getTime()}
+          variant="elapsed"
+          {...props}
+      />
+
+      <br />
+
+      <Timestamp
+          align="center"
+          showUser="false"
+          timestamp={new Date((new Date()).getFullYear(), new Date().getMonth(), new Date().getDate()).getTime()}
+          variant="elapsed"
+          {...props}
+      />
+
+      <br />
+      <br />
+
+      <Timestamp
+          align="right"
+          showUser="true"
+          text="Maricris Nonato"
+          timestamp={new Date().getTime()}
+          variant="elapsed"
+          {...props}
+      />
+
+      <br />
+
+      <Timestamp
+          align="right"
+          showUser="false"
+          timestamp={new Date((new Date()).getFullYear(), new Date().getMonth(), new Date().getDate()).getTime()}
+          variant="elapsed"
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default TimestampUpdatedAlign

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

@@ -1,22 +1,14 @@
 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 TimestampTimezones = (props) => {
   return (
     <div>
       <Timestamp
           align="left"
-          showDate={false}
-          showTimezone
-          timestamp={todaysDate}
+          showDate="false"
+          showTimezone="true"
+          timestamp={new Date().getTime()}
           timezone="America/New_York"
           {...props}
       />
@@ -25,9 +17,9 @@ const TimestampTimezones = (props) => {
 
       <Timestamp
           align="left"
-          showDate
-          showTimezone
-          timestamp={todaysDate}
+          showDate="true"
+          showTimezone="true"
+          timestamp={new Date().getTime()}
           timezone="America/New_York"
           {...props}
       />
@@ -36,9 +28,9 @@ const TimestampTimezones = (props) => {
 
       <Timestamp
           align="left"
-          showDate
-          showTimezone
-          timestamp={customDate}
+          showDate="true"
+          showTimezone="true"
+          timestamp={new Date((new Date()).getFullYear() + 4, (new Date().getMonth()), (new Date().getDate() + 1)).getTime()}
           timezone="America/New_York"
           {...props}
       />
@@ -47,9 +39,9 @@ const TimestampTimezones = (props) => {
 
       <Timestamp
           align="left"
-          showDate={false}
-          showTimezone
-          timestamp={todaysDate}
+          showDate="false"
+          showTimezone="true"
+          timestamp={new Date().getTime()}
           timezone="Asia/Hong_Kong"
           {...props}
       />
@@ -58,9 +50,9 @@ const TimestampTimezones = (props) => {
 
       <Timestamp
           align="left"
-          showDate
-          showTimezone
-          timestamp={todaysDate}
+          showDate="true"
+          showTimezone="true"
+          timestamp={new Date().getTime()}
           timezone="Asia/Hong_Kong"
           {...props}
       />
@@ -69,9 +61,9 @@ const TimestampTimezones = (props) => {
 
       <Timestamp
           align="left"
-          showDate
-          showTimezone
-          timestamp={customDate}
+          showDate="true"
+          showTimezone="true"
+          timestamp={new Date((new Date()).getFullYear() + 4, (new Date().getMonth()), (new Date().getDate() + 1)).getTime()}
           timezone="Asia/Hong_Kong"
           {...props}
       />