playbook_ui 7.4.0.pre.alpha6 → 7.4.1

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/_timestamp_align.html.erb

@@ -0,0 +1,69 @@
+<%= 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"
+}) %>
+
+<br><br>
+
+<%= pb_rails("timestamp", props: {
+  timestamp: DateTime.now,
+  show_date: false,
+  align: "center"
+}) %>
+
+<br>
+
+<%= pb_rails("timestamp", props: {
+  timestamp: DateTime.now,
+  show_date: true,
+  align: "center"
+}) %>
+
+<br>
+
+<%= pb_rails("timestamp", props: {
+  timestamp: DateTime.now + 4.years,
+  show_date: true,
+  align: "center"
+}) %>
+
+<br><br>
+
+<%= pb_rails("timestamp", props: {
+  timestamp: DateTime.now,
+  show_date: false,
+  align: "right"
+}) %>
+
+<br>
+
+<%= pb_rails("timestamp", props: {
+  timestamp: DateTime.now,
+  show_date: true,
+  align: "right"
+}) %>
+
+<br>
+
+<%= pb_rails("timestamp", props: {
+  timestamp: DateTime.now + 4.years,
+  show_date: true,
+  align: "right"
+}) %>

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

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

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,35 @@
 import React from 'react'
-import { Timestamp } from '../../'
+import Timestamp from '../_timestamp.jsx'
 
-const TimestampDefault = () => (
-  <Timestamp text="20 seconds ago" />
-)
+const TimestampDefault = (props) => {
+  return (
+    <div>
+      <Timestamp
+          align="left"
+          showDate="false"
+          timestamp={new Date().getTime()}
+          {...props}
+      />
+
+      <br />
+
+      <Timestamp
+          align="left"
+          showDate="true"
+          timestamp={new Date().getTime()}
+          {...props}
+      />
+
+      <br />
+
+      <Timestamp
+          align="left"
+          showDate="true"
+          timestamp={new Date((new Date()).getFullYear() + 4, (new Date().getMonth()), (new Date().getDate() + 1)).getTime()}
+          {...props}
+      />
+    </div>
+  )
+}
 
 export default TimestampDefault

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

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

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

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

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.html.erb

@@ -0,0 +1,59 @@
+<%= 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>