playbook_ui 7.4.1 → 7.4.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 8d8c8cd1ac5b29ad3f0f0e914a5c1b37078f1be829e4dfbcef6e83c036238348
-  data.tar.gz: 75ae2e39412a73d7f1d285e65b077473b6fd59e7782f0a28091d5b13ab9c35cc
+  metadata.gz: 5bad418755af10f625ed47faeaca637b4dccb55a63c8a0fd88002d7dda064b2f
+  data.tar.gz: c5f64a5804486d5f10cb804a3d868e3d7fb6185a9497615ed1a6ab46d0476d59
 SHA512:
-  metadata.gz: a606892b74e9fd2da31362d46ddb6f8bb34b608f94f876c0c37e7320d2162eef96aba302d265892008b261d24d369af18d4eab5ca8874e20a493c50ca461dcc8
-  data.tar.gz: bf4e5f312aeeb75f12fdb99e3863f6b4fca07ea0f33cfa48d320fc52fca17195e028609a459b5a2d97513d741c516b2fd22571c49a99f8bd46c6fd3b4d1562bc
+  metadata.gz: 98b489931e51a8fc9be743b5bdcef1d1723e15cefd3f35db99ebd5bc905d967c808dc0802ba3a2c656c640e75f3fdf1dc98797f959200a58599082ffd4c088ae
+  data.tar.gz: 375b19e66790f8ae24f8bf67d1eecb061c36dcbdca53040e7dd8133f0042439d62858235546a61b5ece430142ba474f6bfb570a8d729138190ef78bfd8d090a7

data/app/pb_kits/playbook/pb_timestamp/_timestamp.html.erb

@@ -2,17 +2,5 @@
     id: object.id,
     data: object.data,
     class: object.classname) do %>
-
-    <% case object.variant
-        when "updated" %>
-        <%= pb_rails("caption", props: { text: object.format_updated_string, size: 'xs', dark: object.dark }) %>
-    <% when "elapsed" %>
-      <%= pb_rails("caption", props: { text: object.format_updated_string, size: 'xs', dark: object.dark }) %>
-    <% else %>
-      <% if object.show_date %>
-        <%= pb_rails("caption", props: { text: object.format_datetime_string, size: 'xs', dark: object.dark }) %>
-      <% else %>
-        <%= pb_rails("caption", props: { text: object.format_time_string, size: 'xs', dark: object.dark }) %>
-      <% end %>
-    <% end %>
+  <%= pb_rails("caption", props: { text: object.text, tag: 'span', size: 'xs' }) %>
 <% end %>

data/app/pb_kits/playbook/pb_timestamp/_timestamp.jsx

@@ -2,112 +2,36 @@
 
 import React from 'react'
 import classnames from 'classnames'
-import DateTime from '../pb_kit/dateTime.js'
-import { buildCss } from '../utilities/props'
+
 import { Caption } from '../'
+
+import { buildCss, buildDataProps } from '../utilities/props'
+
 import { globalProps } from '../utilities/globalProps.js'
 
 type TimestampProps = {
-  align?: "left" | "center" | "right",
-  className?: string | array<string>,
-  dark?: boolean,
-  data?: string,
-  text: string,
-  timestamp: string,
-  timezone: string,
   id?: string,
-  showDate?: boolean,
-  showUser?: boolean,
-  showTimezone?: boolean,
-  variant?: "default" | "elapsed" | "updated"
+  data?: object,
+  className?: string,
+  text?: string,
 }
 
 const Timestamp = (props: TimestampProps) => {
-  const {
-    align = 'left',
-    className,
-    dark = false,
-    text,
-    timestamp,
-    timezone,
-    showDate = true,
-    showUser = false,
-    showTimezone = false,
-    variant = 'default',
-  } = props
-  const classes = classnames(
-    buildCss('pb_timestamp_kit', align, {
-      dark: dark,
-      variant: variant,
-    }),
-    globalProps(props),
-    className
-  )
-
-  const currentYear = new Date().getFullYear().toString()
-  const dateTimestamp = new DateTime({ value: timestamp, zone: timezone })
-  const dateDisplay = dateTimestamp.toMonth() + ' ' + dateTimestamp.toDay()
-  const timeDisplay = dateTimestamp.toHour() + ':' + dateTimestamp.toMinute() + dateTimestamp.toMeridian()
-
-  var fullTimeDisplay = function fullTimeDisplay(dateTimestamp, timeDisplay, timezone, showTimezone) {
-    if (showTimezone == 'true' && timezone.length > 0) {
-      timeDisplay = timeDisplay + ' ' + dateTimestamp.toTimezone()
-    }
-    return timeDisplay
-  }
-
-  var fullDateDisplay = function fullDateDisplay(dateTimestamp, currentYear, dateDisplay, timezone, showTimezone) {
-    var fullDisplay = dateTimestamp.toMonth() + ' ' + dateTimestamp.toDay()
-    if (dateTimestamp.toYear() > currentYear) {
-      fullDisplay = fullDisplay + ', ' + dateTimestamp.toYear().toString()
-    }
-    return fullDisplay + ' \u00b7 ' + fullTimeDisplay(dateTimestamp, timeDisplay, timezone, showTimezone)
-  }
-
-  var fullElapsedDisplay = function fullElapsedDisplay(showUser, text, dateTimestamp){
-    var userDisplay = (showUser == 'true' && text.length > 0) ? ' by ' + text : ''
-    return 'Last updated' + userDisplay + ' ' + dateTimestamp.value.fromNow()
-  }
-
-  var fullUpdatedDisplay = function fullUpdatedDisplay(showUser, text, timeDisplay, timezone, showTimezone){
-    var userDisplay = (showUser == 'true' && text.length > 0) ? ' by ' + text : ''
-    return 'Last updated' + userDisplay + ' at ' + fullTimeDisplay(dateTimestamp, timeDisplay, timezone, showTimezone)
-  }
+  const { id, className, data = {}, text } = props
+  const dataProps = buildDataProps(data)
+  const pbCss = buildCss('pb_timestamp_kit')
 
   return (
-    <div className={classes}>
-      <div className="pb_timestamp_kit">
-        <If condition={variant == 'updated'}>
-          <Caption
-              dark={dark}
-              size="xs"
-              text={fullUpdatedDisplay(showUser, text, timeDisplay, timezone, showTimezone)}
-          />
-        </If>
-        <If condition={variant == 'elapsed'}>
-          <Caption
-              dark={dark}
-              size="xs"
-              text={fullElapsedDisplay(showUser, text, dateTimestamp)}
-          />
-        </If>
-        <If condition={variant == 'default'}>
-          <If condition={showDate == 'true'}>
-            <Caption
-                dark={dark}
-                size="xs"
-                text={fullDateDisplay(dateTimestamp, currentYear, dateDisplay, timezone, showTimezone)}
-            />
-          </If>
-          <If condition={showDate == 'false'}>
-            <Caption
-                dark={dark}
-                size="xs"
-                text={timeDisplay}
-            />
-          </If>
-        </If>
-      </div>
+    <div
+        {...dataProps}
+        className={classnames(pbCss, globalProps(props), className)}
+        id={id}
+    >
+      <Caption
+          size="xs"
+          tag="span"
+          text={text}
+      />
     </div>
   )
 }

data/app/pb_kits/playbook/pb_timestamp/_timestamp.scss

@@ -1,16 +1,5 @@
 @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_default.html.erb

@@ -1,21 +1 @@
-<%= 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"
-}) %>
+<%= pb_rails("timestamp", props: { text: "20 seconds ago" }) %>

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

@@ -1,35 +1,8 @@
 import React from 'react'
-import Timestamp from '../_timestamp.jsx'
+import { Timestamp } from '../../'
 
-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>
-  )
-}
+const TimestampDefault = () => (
+  <Timestamp text="20 seconds ago" />
+)
 
 export default TimestampDefault

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

@@ -2,20 +2,6 @@ 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,8 +1 @@
 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,80 +3,14 @@
 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", 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
+        generate_classname("pb_timestamp_kit")
       end
     end
   end

data/lib/playbook/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module Playbook
-  VERSION = "7.4.1"
+  VERSION = "7.4.2"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 7.4.1
+  version: 7.4.2
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2020-10-30 00:00:00.000000000 Z
+date: 2020-11-02 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -1705,22 +1705,8 @@ files:
 - app/pb_kits/playbook/pb_timestamp/docs/_description.md
 - app/pb_kits/playbook/pb_timestamp/docs/_footer.md
 - app/pb_kits/playbook/pb_timestamp/docs/_time_stamp_default.md
-- app/pb_kits/playbook/pb_timestamp/docs/_timestamp_align.html.erb
-- app/pb_kits/playbook/pb_timestamp/docs/_timestamp_align.jsx
 - app/pb_kits/playbook/pb_timestamp/docs/_timestamp_default.html.erb
 - app/pb_kits/playbook/pb_timestamp/docs/_timestamp_default.jsx
-- app/pb_kits/playbook/pb_timestamp/docs/_timestamp_elapsed.html.erb
-- app/pb_kits/playbook/pb_timestamp/docs/_timestamp_elapsed.jsx
-- app/pb_kits/playbook/pb_timestamp/docs/_timestamp_elapsed_align.html.erb
-- app/pb_kits/playbook/pb_timestamp/docs/_timestamp_elapsed_align.jsx
-- app/pb_kits/playbook/pb_timestamp/docs/_timestamp_timezones.html.erb
-- app/pb_kits/playbook/pb_timestamp/docs/_timestamp_timezones.jsx
-- app/pb_kits/playbook/pb_timestamp/docs/_timestamp_timezones_align.html.erb
-- app/pb_kits/playbook/pb_timestamp/docs/_timestamp_timezones_align.jsx
-- app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated.html.erb
-- app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated.jsx
-- app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated_align.html.erb
-- app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated_align.jsx
 - app/pb_kits/playbook/pb_timestamp/docs/example.yml
 - app/pb_kits/playbook/pb_timestamp/docs/index.js
 - app/pb_kits/playbook/pb_timestamp/timestamp.rb

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

@@ -1,69 +0,0 @@
-<%= 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"
-}) %>