playbook_ui 7.4.0.pre.alpha2 → 7.4.0

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

data/app/pb_kits/playbook/pb_tooltip/_tooltip.scss

@@ -1,6 +1,8 @@
 @import "../tokens/positioning";
 @import "../tokens/colors";
 
+$tooltip_shadow: rgba(60, 106, 172, 0.18);
+
 @keyframes fadeIn {
   from {
     opacity: 0;
@@ -33,19 +35,8 @@
     &.flipped {
       margin-top: 15px;
       .arrow {
-        top: -35%;
         border-color: transparent transparent $white transparent;
-      }
-    }
-
-    &.react {
-      .arrow {
-        top: 78%;
-      }
-      &.flipped {
-        .arrow {
-          top: -8%;
-        }
+        transform: rotate(180deg);
       }
     }
 
@@ -66,7 +57,7 @@
       z-index: $z_9;
       margin-bottom: $space_sm;
       background-color: $white;
-      padding: $space_xs $space_sm $space_xs $space_sm;
+      padding: $space_xs $space_sm;
       box-shadow: $shadow_deeper;
       border-radius: $border_rad_light;
 
@@ -82,10 +73,6 @@
     .tooltip_tooltip{
       color: $white;
       background-color: rgba($black, $opacity_9);
-
-
-      &.show {
-      }
       .arrow {
         border-color: $black transparent transparent transparent;
         opacity: $opacity_9;
@@ -100,6 +87,46 @@
   }
 }
 
-.tooltip_tooltip.top {
-  padding: ($space_xs - 3px) 0;
+// Right
+[class^="pb_tooltip_kit"] .tooltip_tooltip {
+
+  &[x-placement="right"] {
+    box-shadow: -8px 0 28px 0 $tooltip_shadow;
+    margin: 0 0 0 $space_sm;
+    .arrow {
+      left: -#{$space_xs};
+      margin-bottom: 0;
+      transform: rotate(90deg);
+    }
+    &.flipped .arrow {
+        transform: rotate(270deg);
+    }
+  }
+
+  &[x-placement="bottom"] {
+    box-shadow: 0 -12px 28px 0 $tooltip_shadow;
+    margin: $space_sm 0 0 0;
+    .arrow {
+      top: -18px;
+      margin-bottom: 0;
+      transform: rotate(180deg);
+    }
+    &.flipped .arrow {
+      transform: rotate(0deg);
+    }
+  }
+
+  &[x-placement="left"] {
+    box-shadow: 8px 0 28px 0 $tooltip_shadow;
+    margin: 0 $space_sm 0 0;
+    .arrow {
+      margin-bottom: 0;
+      right: -18px;
+      left: auto;
+      transform: rotate(270deg);
+    }
+    &.flipped .arrow {
+      transform: rotate(90deg);
+    }
+  }
 }