playbook_ui 7.11.1 → 7.14.0.pre.alpha1

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

@@ -1,14 +1,22 @@
 import React from 'react'
 import Timestamp from '../_timestamp.jsx'
 
+const todaysDate = new Date()
+const year = new Date().getFullYear() + 4
+const month = new Date().getMonth()
+const date = new Date().getDate()
+const hours = new Date().getHours()
+const minutes = new Date().getMinutes()
+const customDate = new Date(year, month, date, hours, minutes)
+
 const TimestampTimezones = (props) => {
   return (
     <div>
       <Timestamp
           align="left"
-          showDate="false"
-          showTimezone="true"
-          timestamp={new Date().getTime()}
+          showDate={false}
+          showTimezone
+          timestamp={todaysDate}
           timezone="America/New_York"
           {...props}
       />
@@ -17,9 +25,9 @@ const TimestampTimezones = (props) => {
 
       <Timestamp
           align="left"
-          showDate="true"
-          showTimezone="true"
-          timestamp={new Date().getTime()}
+          showDate
+          showTimezone
+          timestamp={todaysDate}
           timezone="America/New_York"
           {...props}
       />
@@ -28,9 +36,9 @@ const TimestampTimezones = (props) => {
 
       <Timestamp
           align="left"
-          showDate="true"
-          showTimezone="true"
-          timestamp={new Date((new Date()).getFullYear() + 4, (new Date().getMonth()), (new Date().getDate() + 1)).getTime()}
+          showDate
+          showTimezone
+          timestamp={customDate}
           timezone="America/New_York"
           {...props}
       />
@@ -39,9 +47,9 @@ const TimestampTimezones = (props) => {
 
       <Timestamp
           align="left"
-          showDate="false"
-          showTimezone="true"
-          timestamp={new Date().getTime()}
+          showDate={false}
+          showTimezone
+          timestamp={todaysDate}
           timezone="Asia/Hong_Kong"
           {...props}
       />
@@ -50,9 +58,9 @@ const TimestampTimezones = (props) => {
 
       <Timestamp
           align="left"
-          showDate="true"
-          showTimezone="true"
-          timestamp={new Date().getTime()}
+          showDate
+          showTimezone
+          timestamp={todaysDate}
           timezone="Asia/Hong_Kong"
           {...props}
       />
@@ -61,9 +69,9 @@ const TimestampTimezones = (props) => {
 
       <Timestamp
           align="left"
-          showDate="true"
-          showTimezone="true"
-          timestamp={new Date((new Date()).getFullYear() + 4, (new Date().getMonth()), (new Date().getDate() + 1)).getTime()}
+          showDate
+          showTimezone
+          timestamp={customDate}
           timezone="Asia/Hong_Kong"
           {...props}
       />

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

@@ -12,24 +12,3 @@
   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

@@ -1,35 +1,15 @@
 import React from 'react'
 import Timestamp from '../_timestamp.jsx'
 
+const todaysDate = new Date()
+
 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"
+          showUser
           text="Maricris Nonato"
-          timestamp={new Date().getTime()}
-          timezone="America/New_York"
+          timestamp={todaysDate}
           variant="updated"
           {...props}
       />
@@ -37,10 +17,8 @@ const TimestampUpdated = (props) => {
       <br />
 
       <Timestamp
-          showTimezone="true"
-          showUser="false"
-          timestamp={new Date().getTime()}
-          timezone="America/New_York"
+          showUser={false}
+          timestamp={todaysDate}
           variant="updated"
           {...props}
       />

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

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

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

@@ -1 +1,5 @@
 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 TimestampUpdated } from './_timestamp_updated.jsx'
+export { default as TimestampElapsed } from './_timestamp_elapsed.jsx'

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

@@ -3,14 +3,96 @@
 module Playbook
   module PbTimestamp
     class Timestamp
+      include ActionView::Helpers::DateHelper
       include Playbook::Props
 
       partial "pb_timestamp/timestamp"
 
       prop :text
+      prop :timestamp
+
+      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 caption_text
+        case variant
+        when "updated"
+          format_updated_string
+        when "elapsed"
+          format_elapsed_string
+        else
+          show_date ? datetime_or_text : format_time_string
+        end
+      end
+
+    private
+
+      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}" : ""
+        datetime_string = " on #{format_date_string} at #{format_time_string}"
+
+        "Last updated#{user_string}#{datetime_string}"
+      end
+
+      def format_elapsed_string
+        user_string = show_user ? " by #{text}" : ""
+        datetime_string = " #{time_ago_in_words(pb_date_time.convert_to_timestamp)} ago"
+
+        "Last updated#{user_string}#{datetime_string}"
+      end
+
+      def datetime_or_text
+        timestamp ? format_datetime_string : text
+      end
+
+      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_title/docs/_title_light.jsx

@@ -1,30 +1,37 @@
 import React from 'react'
 import { Title } from '../../'
 
-const TitleLight = () => {
+const TitleLight = (props) => {
   return (
     <div>
-      <Title text="Default Title" />
+      <Title
+          text="Default Title"
+          {...props}
+      />
       <br />
       <Title
           size={4}
           tag="h4"
           text="Title 4"
+          {...props}
       />
       <Title
           size={3}
           tag="h3"
           text="Title 3"
+          {...props}
       />
       <Title
           size={2}
           tag="h2"
           text="Title 2"
+          {...props}
       />
       <Title
           size={1}
           tag="h1"
           text="Title 1"
+          {...props}
       />
     </div>
   )

data/app/pb_kits/playbook/pb_title/docs/_title_variants.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { Title } from '../../'
 
-const TitleVariants = () => {
+const TitleVariants = (props) => {
   return (
     <div>
       <Title
@@ -9,6 +9,7 @@ const TitleVariants = () => {
           tag="h4"
           text="Title 4 (link)"
           variant="link"
+          {...props}
       />
     </div>
   )

data/app/pb_kits/playbook/pb_title_count/docs/_title_count_align.jsx

@@ -1,12 +1,13 @@
 import React from 'react'
 import { TitleCount } from '../../'
 
-const TitleCountAlign = () => {
+const TitleCountAlign = (props) => {
   return (
     <>
       <TitleCount
           count={527}
           title="Remodeling Consultants"
+          {...props}
       />
 
       <br />
@@ -15,6 +16,7 @@ const TitleCountAlign = () => {
           align="center"
           count={527}
           title="Remodeling Consultants"
+          {...props}
       />
 
       <br />
@@ -23,6 +25,7 @@ const TitleCountAlign = () => {
           align="right"
           count={527}
           title="Remodeling Consultants"
+          {...props}
       />
     </>
   )

data/app/pb_kits/playbook/pb_title_count/docs/_title_count_default.jsx

@@ -1,12 +1,13 @@
 import React from 'react'
 import { TitleCount } from '../../'
 
-const TitleCountDefault = () => {
+const TitleCountDefault = (props) => {
   return (
     <>
       <TitleCount
           count={35.78}
           title="Appointments"
+          {...props}
       />
 
       <br />
@@ -15,6 +16,7 @@ const TitleCountDefault = () => {
           count={7399}
           size="lg"
           title="Appointments"
+          {...props}
       />
 
       <br />
@@ -23,6 +25,7 @@ const TitleCountDefault = () => {
           count={-379503.372}
           size="lg"
           title="Appointments"
+          {...props}
       />
     </>
   )

data/app/pb_kits/playbook/pb_title_detail/docs/_title_detail_default.jsx

@@ -1,23 +1,26 @@
 import React from 'react'
 import { TitleDetail } from '../../'
 
-const TitleDetailDefault = () => (
+const TitleDetailDefault = (props) => (
   <div>
     <TitleDetail
         detail="Commits data and history"
         title="Email Notifications"
+        {...props}
     />
 
     <TitleDetail
         align="center"
         detail="Commits data and history"
         title="Email Notifications"
+        {...props}
     />
 
     <TitleDetail
         align="right"
         detail="Commits data and history"
         title="Email Notifications"
+        {...props}
     />
 
   </div>

data/app/pb_kits/playbook/pb_typeahead/_typeahead.html.erb

@@ -26,4 +26,4 @@
       <% end %>
     </template>
   <% end %>
-<% end %>
+<% end %>

data/app/pb_kits/playbook/pb_typeahead/_typeahead.jsx

@@ -4,6 +4,7 @@ import React from 'react'
 import Select from 'react-select'
 import AsyncSelect from 'react-select/async'
 import { get } from 'lodash'
+import { globalProps } from '../utilities/globalProps.js'
 
 import Control from './components/Control'
 import ClearIndicator from './components/ClearIndicator'
@@ -25,6 +26,7 @@ import { noop } from '../utilities/props'
 
 type Props = {
   async?: boolean,
+  dark?: boolean,
   label?: string,
   loadOptions?: noop | string,
   getOptionLabel?: () => any,
@@ -81,9 +83,12 @@ const Typeahead = (props: Props) => {
     }
   }
 
+  const classes = `pb_typeahead_kit react-select ${globalProps(props)}`
+
   return (
-    <div className="pb_typeahead_kit react-select">
+    <div className={classes}>
       <Tag
+          classNamePrefix="typeahead-kit-select"
           onChange={handleOnChange}
           {...selectProps}
       />