playbook_ui 7.14.0.pre.alpha1 → 7.14.0

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

@@ -0,0 +1,177 @@
+<%= pb_rails("timestamp", props: {
+  timestamp: DateTime.now,
+  show_date: false,
+  show_timezone: true,
+  timezone: "America/New_York",
+  align: "left"
+}) %>
+
+<br>
+
+<%= pb_rails("timestamp", props: {
+  timestamp: DateTime.now,
+  show_date: true,
+  show_timezone: true,
+  timezone: "America/New_York",
+  align: "left"
+}) %>
+
+<br>
+
+<%= pb_rails("timestamp", props: {
+  timestamp: DateTime.now + 4.years,
+  show_date: true,
+  show_timezone: true,
+  timezone: "America/New_York",
+  align: "left"
+}) %>
+
+<br>
+
+<%= pb_rails("timestamp", props: {
+  timestamp: DateTime.now,
+  show_date: false,
+  show_timezone: true,
+  timezone: "Asia/Hong_Kong",
+  align: "left"
+}) %>
+
+<br>
+
+<%= pb_rails("timestamp", props: {
+  timestamp: DateTime.now,
+  show_date: true,
+  show_timezone: true,
+  timezone: "Asia/Hong_Kong",
+  align: "left"
+}) %>
+
+<br>
+
+<%= pb_rails("timestamp", props: {
+  timestamp: DateTime.now + 4.years,
+  show_date: true,
+  show_timezone: true,
+  timezone: "Asia/Hong_Kong",
+  align: "left"
+}) %>
+
+<br><br>
+
+<%= pb_rails("timestamp", props: {
+  timestamp: DateTime.now,
+  show_date: false,
+  show_timezone: true,
+  timezone: "America/New_York",
+  align: "center"
+}) %>
+
+<br>
+
+<%= pb_rails("timestamp", props: {
+  timestamp: DateTime.now,
+  show_date: true,
+  show_timezone: true,
+  timezone: "America/New_York",
+  align: "center"
+}) %>
+
+<br>
+
+<%= pb_rails("timestamp", props: {
+  timestamp: DateTime.now + 4.years,
+  show_date: true,
+  show_timezone: true,
+  timezone: "America/New_York",
+  align: "center"
+}) %>
+
+<br>
+
+<%= pb_rails("timestamp", props: {
+  timestamp: DateTime.now,
+  show_date: false,
+  show_timezone: true,
+  timezone: "Asia/Hong_Kong",
+  align: "center"
+}) %>
+
+<br>
+
+<%= pb_rails("timestamp", props: {
+  timestamp: DateTime.now,
+  show_date: true,
+  show_timezone: true,
+  timezone: "Asia/Hong_Kong",
+  align: "center"
+}) %>
+
+<br>
+
+<%= pb_rails("timestamp", props: {
+  timestamp: DateTime.now + 4.years,
+  show_date: true,
+  show_timezone: true,
+  timezone: "Asia/Hong_Kong",
+  align: "center"
+}) %>
+
+<br><br>
+
+<%= pb_rails("timestamp", props: {
+  timestamp: DateTime.now,
+  show_date: false,
+  show_timezone: true,
+  timezone: "America/New_York",
+  align: "right"
+}) %>
+
+<br>
+
+<%= pb_rails("timestamp", props: {
+  timestamp: DateTime.now,
+  show_date: true,
+  show_timezone: true,
+  timezone: "America/New_York",
+  align: "right"
+}) %>
+
+<br>
+
+<%= pb_rails("timestamp", props: {
+  timestamp: DateTime.now + 4.years,
+  show_date: true,
+  show_timezone: true,
+  timezone: "America/New_York",
+  align: "right"
+}) %>
+
+<br>
+
+<%= pb_rails("timestamp", props: {
+  timestamp: DateTime.now,
+  show_date: false,
+  show_timezone: true,
+  timezone: "Asia/Hong_Kong",
+  align: "right"
+}) %>
+
+<br>
+
+<%= pb_rails("timestamp", props: {
+  timestamp: DateTime.now,
+  show_date: true,
+  show_timezone: true,
+  timezone: "Asia/Hong_Kong",
+  align: "right"
+}) %>
+
+<br>
+
+<%= pb_rails("timestamp", props: {
+  timestamp: DateTime.now + 4.years,
+  show_date: true,
+  show_timezone: true,
+  timezone: "Asia/Hong_Kong",
+  align: "right"
+}) %>

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

@@ -0,0 +1,209 @@
+import React from 'react'
+import Timestamp from '../_timestamp.jsx'
+
+const TimestampTimezonesAlign = (props) => {
+  return (
+    <div>
+      <Timestamp
+          align="left"
+          showDate="false"
+          showTimezone="true"
+          timestamp={new Date().getTime()}
+          timezone="America/New_York"
+          {...props}
+      />
+
+      <br />
+
+      <Timestamp
+          align="left"
+          showDate="true"
+          showTimezone="true"
+          timestamp={new Date().getTime()}
+          timezone="America/New_York"
+          {...props}
+      />
+
+      <br />
+
+      <Timestamp
+          align="left"
+          showDate="true"
+          showTimezone="true"
+          timestamp={new Date((new Date()).getFullYear() + 4, (new Date().getMonth()), (new Date().getDate() + 1)).getTime()}
+          timezone="America/New_York"
+          {...props}
+      />
+
+      <br />
+
+      <Timestamp
+          align="left"
+          showDate="false"
+          showTimezone="true"
+          timestamp={new Date().getTime()}
+          timezone="Asia/Hong_Kong"
+          {...props}
+      />
+
+      <br />
+
+      <Timestamp
+          align="left"
+          showDate="true"
+          showTimezone="true"
+          timestamp={new Date().getTime()}
+          timezone="Asia/Hong_Kong"
+          {...props}
+      />
+
+      <br />
+
+      <Timestamp
+          align="left"
+          showDate="true"
+          showTimezone="true"
+          timestamp={new Date((new Date()).getFullYear() + 4, (new Date().getMonth()), (new Date().getDate() + 1)).getTime()}
+          timezone="Asia/Hong_Kong"
+          {...props}
+      />
+
+      <br />
+      <br />
+
+      <Timestamp
+          align="center"
+          showDate="false"
+          showTimezone="true"
+          timestamp={new Date().getTime()}
+          timezone="America/New_York"
+          {...props}
+      />
+
+      <br />
+
+      <Timestamp
+          align="center"
+          showDate="true"
+          showTimezone="true"
+          timestamp={new Date().getTime()}
+          timezone="America/New_York"
+          {...props}
+      />
+
+      <br />
+
+      <Timestamp
+          align="center"
+          showDate="true"
+          showTimezone="true"
+          timestamp={new Date((new Date()).getFullYear() + 4, (new Date().getMonth()), (new Date().getDate() + 1)).getTime()}
+          timezone="America/New_York"
+          {...props}
+      />
+
+      <br />
+
+      <Timestamp
+          align="center"
+          showDate="false"
+          showTimezone="true"
+          timestamp={new Date().getTime()}
+          timezone="Asia/Hong_Kong"
+          {...props}
+      />
+
+      <br />
+
+      <Timestamp
+          align="center"
+          showDate="true"
+          showTimezone="true"
+          timestamp={new Date().getTime()}
+          timezone="Asia/Hong_Kong"
+          {...props}
+      />
+
+      <br />
+
+      <Timestamp
+          align="center"
+          showDate="true"
+          showTimezone="true"
+          timestamp={new Date((new Date()).getFullYear() + 4, (new Date().getMonth()), (new Date().getDate() + 1)).getTime()}
+          timezone="Asia/Hong_Kong"
+          {...props}
+      />
+
+      <br />
+      <br />
+
+      <Timestamp
+          align="right"
+          showDate="false"
+          showTimezone="true"
+          timestamp={new Date().getTime()}
+          timezone="America/New_York"
+          {...props}
+      />
+
+      <br />
+
+      <Timestamp
+          align="right"
+          showDate="true"
+          showTimezone="true"
+          timestamp={new Date().getTime()}
+          timezone="America/New_York"
+          {...props}
+      />
+
+      <br />
+
+      <Timestamp
+          align="right"
+          showDate="true"
+          showTimezone="true"
+          timestamp={new Date((new Date()).getFullYear() + 4, (new Date().getMonth()), (new Date().getDate() + 1)).getTime()}
+          timezone="America/New_York"
+          {...props}
+      />
+
+      <br />
+
+      <Timestamp
+          align="right"
+          showDate="false"
+          showTimezone="true"
+          timestamp={new Date().getTime()}
+          timezone="Asia/Hong_Kong"
+          {...props}
+      />
+
+      <br />
+
+      <Timestamp
+          align="right"
+          showDate="true"
+          showTimezone="true"
+          timestamp={new Date().getTime()}
+          timezone="Asia/Hong_Kong"
+          {...props}
+      />
+
+      <br />
+
+      <Timestamp
+          align="right"
+          showDate="true"
+          showTimezone="true"
+          timestamp={new Date((new Date()).getFullYear() + 4, (new Date().getMonth()), (new Date().getDate() + 1)).getTime()}
+          timezone="Asia/Hong_Kong"
+          {...props}
+      />
+
+    </div>
+  )
+}
+
+export default TimestampTimezonesAlign

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

@@ -12,3 +12,24 @@
   variant: "updated",
   show_user: false
 }) %>
+
+<br><br>
+
+<%= pb_rails("timestamp", props: {
+  timestamp: DateTime.now,
+  variant: "updated",
+  show_user: true,
+  show_timezone: true,
+  text: "Maricris Nonato",
+  timezone: "America/New_York"
+}) %>
+
+<br>
+
+<%= pb_rails("timestamp", props: {
+  timestamp: DateTime.now,
+  variant: "updated",
+  show_user: false,
+  show_timezone: true,
+  timezone: "America/New_York"
+}) %>

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

@@ -1,15 +1,35 @@
 import React from 'react'
 import Timestamp from '../_timestamp.jsx'
 
-const todaysDate = new Date()
-
 const TimestampUpdated = (props) => {
   return (
     <div>
       <Timestamp
-          showUser
+          showUser="true"
+          text="Maricris Nonato"
+          timestamp={new Date().getTime()}
+          variant="updated"
+          {...props}
+      />
+
+      <br />
+
+      <Timestamp
+          showUser="false"
+          timestamp={new Date().getTime()}
+          variant="updated"
+          {...props}
+      />
+
+      <br />
+      <br />
+
+      <Timestamp
+          showTimezone="true"
+          showUser="true"
           text="Maricris Nonato"
-          timestamp={todaysDate}
+          timestamp={new Date().getTime()}
+          timezone="America/New_York"
           variant="updated"
           {...props}
       />
@@ -17,8 +37,10 @@ const TimestampUpdated = (props) => {
       <br />
 
       <Timestamp
-          showUser={false}
-          timestamp={todaysDate}
+          showTimezone="true"
+          showUser="false"
+          timestamp={new Date().getTime()}
+          timezone="America/New_York"
           variant="updated"
           {...props}
       />