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

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

@@ -0,0 +1,35 @@
+<%= pb_rails("timestamp", props: {
+  timestamp: DateTime.now,
+  variant: "updated",
+  show_user: true,
+  text: "Maricris Nonato"
+}) %>
+
+<br>
+
+<%= pb_rails("timestamp", props: {
+  timestamp: DateTime.now,
+  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

@@ -0,0 +1,51 @@
+import React from 'react'
+import Timestamp from '../_timestamp.jsx'
+
+const TimestampUpdated = (props) => {
+  return (
+    <div>
+      <Timestamp
+          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={new Date().getTime()}
+          timezone="America/New_York"
+          variant="updated"
+          {...props}
+      />
+
+      <br />
+
+      <Timestamp
+          showTimezone="true"
+          showUser="false"
+          timestamp={new Date().getTime()}
+          timezone="America/New_York"
+          variant="updated"
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default TimestampUpdated

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

@@ -0,0 +1,123 @@
+<%= pb_rails("timestamp", props: {
+  timestamp: DateTime.now,
+  variant: "updated",
+  align: "left",
+  show_user: true,
+  text: "Maricris Nonato"
+}) %>
+
+<br>
+
+<%= pb_rails("timestamp", props: {
+  timestamp: DateTime.now,
+  variant: "updated",
+  align: "left",
+  show_user: false
+}) %>
+
+<br>
+
+<%= pb_rails("timestamp", props: {
+  timestamp: DateTime.now,
+  variant: "updated",
+  align: "left",
+  show_user: true,
+  show_timezone: true,
+  text: "Maricris Nonato",
+  timezone: "America/New_York"
+}) %>
+
+<br>
+
+<%= pb_rails("timestamp", props: {
+  timestamp: DateTime.now,
+  variant: "updated",
+  align: "left",
+  show_user: false,
+  show_timezone: true,
+  timezone: "America/New_York"
+}) %>
+
+<br><br>
+
+<%= pb_rails("timestamp", props: {
+  timestamp: DateTime.now,
+  variant: "updated",
+  align: "center",
+  show_user: true,
+  text: "Maricris Nonato"
+}) %>
+
+<br>
+
+<%= pb_rails("timestamp", props: {
+  timestamp: DateTime.now,
+  variant: "updated",
+  align: "center",
+  show_user: false
+}) %>
+
+<br>
+
+<%= pb_rails("timestamp", props: {
+  timestamp: DateTime.now,
+  variant: "updated",
+  align: "center",
+  show_user: true,
+  show_timezone: true,
+  text: "Maricris Nonato",
+  timezone: "America/New_York"
+}) %>
+
+<br>
+
+<%= pb_rails("timestamp", props: {
+  timestamp: DateTime.now,
+  variant: "updated",
+  align: "center",
+  show_user: false,
+  show_timezone: true,
+  timezone: "America/New_York"
+}) %>
+
+<br><br>
+
+<%= pb_rails("timestamp", props: {
+  timestamp: DateTime.now,
+  variant: "updated",
+  align: "right",
+  show_user: true,
+  text: "Maricris Nonato"
+}) %>
+
+<br>
+
+<%= pb_rails("timestamp", props: {
+  timestamp: DateTime.now,
+  variant: "updated",
+  align: "right",
+  show_user: false
+}) %>
+
+<br>
+
+<%= pb_rails("timestamp", props: {
+  timestamp: DateTime.now,
+  variant: "updated",
+  align: "right",
+  show_user: true,
+  show_timezone: true,
+  text: "Maricris Nonato",
+  timezone: "America/New_York"
+}) %>
+
+<br>
+
+<%= pb_rails("timestamp", props: {
+  timestamp: DateTime.now,
+  variant: "updated",
+  align: "right",
+  show_user: false,
+  show_timezone: true,
+  timezone: "America/New_York"
+}) %>

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

@@ -0,0 +1,146 @@
+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="updated"
+          {...props}
+      />
+
+      <br />
+
+      <Timestamp
+          align="left"
+          showUser="false"
+          timestamp={new Date().getTime()}
+          variant="updated"
+          {...props}
+      />
+
+      <br />
+
+      <Timestamp
+          showTimezone="true"
+          showUser="true"
+          text="Maricris Nonato"
+          timestamp={new Date().getTime()}
+          timezone="America/New_York"
+          variant="updated"
+          {...props}
+      />
+
+      <br />
+
+      <Timestamp
+          showTimezone="true"
+          showUser="false"
+          timestamp={new Date().getTime()}
+          timezone="America/New_York"
+          variant="updated"
+          {...props}
+      />
+
+      <br />
+      <br />
+
+      <Timestamp
+          align="center"
+          showUser="true"
+          text="Maricris Nonato"
+          timestamp={new Date().getTime()}
+          variant="updated"
+          {...props}
+      />
+
+      <br />
+
+      <Timestamp
+          align="center"
+          showUser="false"
+          timestamp={new Date().getTime()}
+          variant="updated"
+          {...props}
+      />
+
+      <br />
+
+      <Timestamp
+          align="center"
+          showTimezone="true"
+          showUser="true"
+          text="Maricris Nonato"
+          timestamp={new Date().getTime()}
+          timezone="America/New_York"
+          variant="updated"
+          {...props}
+      />
+
+      <br />
+
+      <Timestamp
+          align="center"
+          showTimezone="true"
+          showUser="false"
+          timestamp={new Date().getTime()}
+          timezone="America/New_York"
+          variant="updated"
+          {...props}
+      />
+
+      <br />
+      <br />
+
+      <Timestamp
+          align="right"
+          showUser="true"
+          text="Maricris Nonato"
+          timestamp={new Date().getTime()}
+          variant="updated"
+          {...props}
+      />
+
+      <br />
+
+      <Timestamp
+          align="right"
+          showUser="false"
+          timestamp={new Date().getTime()}
+          variant="updated"
+          {...props}
+      />
+
+      <br />
+
+      <Timestamp
+          align="right"
+          showTimezone="true"
+          showUser="true"
+          text="Maricris Nonato"
+          timestamp={new Date().getTime()}
+          timezone="America/New_York"
+          variant="updated"
+          {...props}
+      />
+
+      <br />
+
+      <Timestamp
+          align="right"
+          showTimezone="true"
+          showUser="false"
+          timestamp={new Date().getTime()}
+          timezone="America/New_York"
+          variant="updated"
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default TimestampUpdatedAlign

data/app/pb_kits/playbook/pb_timestamp/docs/example.yml

@@ -2,6 +2,20 @@ examples:
 
   rails:
   - timestamp_default: Default
+  - timestamp_align: Alignments
+  - timestamp_timezones: Timezones
+  - timestamp_timezones_align: Timezones - Alignments
+  - timestamp_updated: Last Updated by
+  - timestamp_updated_align: Last Updated by - Alignments
+  - timestamp_elapsed: Time Ago
+  - timestamp_elapsed_align: Time Ago - Alignments
 
   react:
   - timestamp_default: Default
+  - timestamp_align: Alignments
+  - timestamp_timezones: Timezones
+  - timestamp_timezones_align: Timezones - Alignments
+  - timestamp_updated: Last Updated by
+  - timestamp_updated_align: Last Updated by - Alignments
+  - timestamp_elapsed: Time Ago
+  - timestamp_elapsed_align: Time Ago - Alignments

data/app/pb_kits/playbook/pb_timestamp/docs/index.js

@@ -1 +1,8 @@
 export { default as TimestampDefault } from './_timestamp_default.jsx'
+export { default as TimestampAlign } from './_timestamp_align.jsx'
+export { default as TimestampTimezones } from './_timestamp_timezones.jsx'
+export { default as TimestampTimezonesAlign } from './_timestamp_timezones_align.jsx'
+export { default as TimestampUpdated } from './_timestamp_updated.jsx'
+export { default as TimestampUpdatedAlign } from './_timestamp_updated_align.jsx'
+export { default as TimestampElapsed } from './_timestamp_elapsed.jsx'
+export { default as TimestampElapsedAlign } from './_timestamp_elapsed_align.jsx'

data/app/pb_kits/playbook/pb_timestamp/timestamp.rb

@@ -3,14 +3,80 @@
 module Playbook
   module PbTimestamp
     class Timestamp
+      include ActionView::Helpers::DateHelper
       include Playbook::Props
 
       partial "pb_timestamp/timestamp"
 
       prop :text
+      prop :timestamp, required: true
+
+      prop :dark, type: Playbook::Props::Boolean,
+                  default: false
+      prop :align,  type: Playbook::Props::Enum,
+                    values: %w[left center right],
+                    default: "left"
+      prop :show_date, type: Playbook::Props::Boolean,
+                       default: true
+      prop :show_timezone, type: Playbook::Props::Boolean,
+                           default: false
+      prop :show_user, type: Playbook::Props::Boolean,
+                       default: false
+      prop :timezone, default: "America/New_York"
+      prop :variant, type: Playbook::Props::Enum,
+                     values: %w[default elapsed updated],
+                     default: "default"
 
       def classname
-        generate_classname("pb_timestamp_kit")
+        generate_classname("pb_timestamp_kit", variant_class, align)
+      end
+
+      def format_year_string
+        pb_date_time.to_year != DateTime.now.year.to_s ? ", #{pb_date_time.to_year}" : ""
+      end
+
+      def format_time_string
+        "#{pb_date_time.to_hour}:#{pb_date_time.to_minutes}#{pb_date_time.to_meridian} #{format_timezone_string}".strip
+      end
+
+      def format_timezone_string
+        timezone && show_timezone ? pb_date_time.to_timezone.to_s : ""
+      end
+
+      def format_date_string
+        "#{pb_date_time.to_month_downcase} #{pb_date_time.to_unpadded_day}#{format_year_string}"
+      end
+
+      def format_datetime_string
+        "#{format_date_string} · #{format_time_string}".html_safe
+      end
+
+      def format_updated_string
+        user_string = show_user ? " by #{text}" : ""
+
+        case variant
+        when "updated"
+          datetime_string = " on #{format_date_string} at #{format_time_string}"
+        when "elapsed"
+          datetime_string = " #{time_ago_in_words(pb_date_time.convert_to_timestamp)} ago"
+        end
+
+        "Last updated#{user_string}#{datetime_string}"
+      end
+
+    private
+
+      def pb_date_time
+        Playbook::PbKit::PbDateTime.new(timestamp, timezone)
+      end
+
+      def variant_class
+        case variant
+        when "updated"
+          "updated"
+        when "elapsed"
+          "elapsed"
+        end
       end
     end
   end