playbook_ui 7.4.0.pre.alpha4 → 7.4.0.pre.alpha5

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

@@ -0,0 +1,74 @@
+import React from 'react'
+import Timestamp from '../_timestamp.jsx'
+
+const TimestampTimezones = (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}
+      />
+    </div>
+  )
+}
+
+export default TimestampTimezones

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