playbook_ui 7.14.0 → 7.16.0.pre.alpha3

data/app/pb_kits/playbook/pb_textarea/docs/_textarea_resize.jsx

@@ -4,6 +4,15 @@ import { Textarea } from '../../'
 const TextareaResize = (props) => {
   return (
     <div>
+      <Textarea
+          label="auto"
+          placeholder="Resize Auto"
+          resize="auto"
+          {...props}
+      />
+
+      <br />
+
       <Textarea
           label="vertical"
           placeholder="Resize Vertical"
@@ -28,7 +37,6 @@ const TextareaResize = (props) => {
           resize="horizontal"
           {...props}
       />
-
     </div>
   )
 }

data/app/pb_kits/playbook/pb_textarea/index.js

@@ -0,0 +1,17 @@
+import PbEnhancedElement from '../pb_enhanced_element'
+
+export default class PbTextarea extends PbEnhancedElement {
+  static get selector() {
+    return '.resize_auto textarea'
+  }
+
+  onInput() {
+    this.style.height = 'auto'
+    this.style.height = (this.scrollHeight) + 'px'
+  }
+
+  connect() {
+    this.element.setAttribute('style', 'height:' + (this.element.scrollHeight) + 'px;overflow-y:hidden;')
+    this.element.addEventListener('input', this.onInput, false)
+  }
+}

data/app/pb_kits/playbook/pb_textarea/{_textarea.html.erb → textarea.html.erb}

@@ -5,10 +5,10 @@
   <% if object.label.present? %>
     <%= pb_rails("caption", props: {text: object.label, dark: object.dark}) %>
   <% end %>
-  <% if object.children %>
-    <%= capture(&object.children) %>
+  <% if content.present? %>
+    <%= content %>
     <% if object.error %>
-      <%= pb_rails("body", props: {dark: object.dark, status: "negative", text: object.error}) %>
+      <%= pb_rails("body", props: { dark: object.dark, status: "negative", text: object.error }) %>
     <% end %>
   <% else %>
     <%= text_area(
@@ -20,7 +20,7 @@
         :onkeyup => object.onkeyup,
         :placeholder => object.placeholder,
         :rows => object.rows,
-        :value => object.value )%>
+        :value => object.value) %>
     <% if object.error %>
       <% if object.character_count %>
         <%= pb_rails("flex", props: { spacing: "between", vertical: "center" }) do %>

data/app/pb_kits/playbook/pb_textarea/textarea.rb

@@ -2,22 +2,17 @@
 
 module Playbook
   module PbTextarea
-    class Textarea
-      include Playbook::Props
-
-      partial "pb_textarea/textarea"
-
+    class Textarea < Playbook::KitBase
       prop :error
-      prop :object
       prop :label
       prop :method
       prop :name
       prop :placeholder
       prop :resize, type: Playbook::Props::Enum,
-            values: %w[none both horizontal vertical],
-            default: "none"
+                    values: %w[none both horizontal vertical auto],
+                    default: "none"
       prop :rows, type: Playbook::Props::Number,
-            default: 4
+                  default: 4
       prop :value
       prop :character_count
       prop :onkeyup
@@ -40,7 +35,6 @@ module Playbook
       def resize_class
         " resize_#{resize}"
       end
-
     end
   end
 end

data/app/pb_kits/playbook/pb_time/time.rb

@@ -2,11 +2,7 @@
 
 module Playbook
   module PbTime
-    class Time
-      include Playbook::Props
-
-      partial "pb_time/time"
-
+    class Time < Playbook::KitBase
       prop :time, required: true
       prop :size, type: Playbook::Props::Enum,
                   values: %w[xs sm md lg],

data/app/pb_kits/playbook/pb_time_range_inline/time_range_inline.rb

@@ -2,11 +2,7 @@
 
 module Playbook
   module PbTimeRangeInline
-    class TimeRangeInline
-      include Playbook::Props
-
-      partial "pb_time_range_inline/time_range_inline"
-
+    class TimeRangeInline < Playbook::KitBase
       prop :start_time, required: true
       prop :end_time, required: true
       prop :alignment, type: Playbook::Props::Enum,

data/app/pb_kits/playbook/pb_time_stacked/time_stacked.rb

@@ -2,14 +2,7 @@
 
 module Playbook
   module PbTimeStacked
-    class TimeStacked
-      include ActionView::Helpers::TagHelper
-      include ActionView::Context
-      include Playbook::Props
-      include Playbook::Props
-
-      partial "pb_time_stacked/time_stacked"
-
+    class TimeStacked < Playbook::KitBase
       prop :align, type: Playbook::Props::Enum,
                    values: %w[left center right],
                    default: "left"

data/app/pb_kits/playbook/pb_timeline/{_item.html.erb → item.html.erb}

@@ -2,11 +2,11 @@
   id: object.id,
   data: object.data,
   class: object.classname) do %>
-  
+
   <div class="pb_timeline_item_left_block">
     <% if object.date.present? %>
-      <%= pb_rails("date_stacked", props: { 
-        date: object.date, 
+      <%= pb_rails("date_stacked", props: {
+        date: object.date,
         size: "sm",
         align: "center"
       }) %>
@@ -18,11 +18,11 @@
       icon: object.icon,
       variant: object.icon_color,
       size: "xs"
-    }) %> 
+    }) %>
     <div class="pb_timeline_item_connector"></div>
   </div>
+
   <div class="pb_timeline_item_right_block">
-    <%= capture(&object.children) %>
+    <%= content.presence %>
   </div>
-
 <% end %>

data/app/pb_kits/playbook/pb_timeline/item.rb

@@ -2,11 +2,7 @@
 
 module Playbook
   module PbTimeline
-    class Item
-      include Playbook::Props
-
-      partial "pb_timeline/item"
-
+    class Item < Playbook::KitBase
       prop :date
       prop :icon, type: Playbook::Props::String,
                   default: "user"

data/app/pb_kits/playbook/pb_timeline/timeline.html.erb

@@ -0,0 +1,6 @@
+<%= content_tag(:div,
+    id: object.id,
+    data: object.data,
+    class: object.classname) do %>
+  <%= content.presence %>
+<% end %>

data/app/pb_kits/playbook/pb_timeline/timeline.rb

@@ -2,11 +2,7 @@
 
 module Playbook
   module PbTimeline
-    class Timeline
-      include Playbook::Props
-
-      partial "pb_timeline/timeline"
-
+    class Timeline < Playbook::KitBase
       prop :orientation, type: Playbook::Props::Enum,
                          values: %w[vertical horizontal],
                          default: "horizontal"

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

@@ -2,36 +2,112 @@
 
 import React from 'react'
 import classnames from 'classnames'
-
+import DateTime from '../pb_kit/dateTime.js'
+import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
 import { Caption } from '../'
-
-import { buildCss, buildDataProps } from '../utilities/props'
-
 import { globalProps } from '../utilities/globalProps.js'
 
 type TimestampProps = {
+  align?: "left" | "center" | "right",
+  aria?: object,
+  className?: string | array<string>,
+  dark?: boolean,
+  data?: string,
+  text: string,
+  timestamp: string,
+  timezone: string,
   id?: string,
-  data?: object,
-  className?: string,
-  text?: string,
+  showDate?: boolean,
+  showUser?: boolean,
+  showTimezone?: boolean,
+  variant?: "default" | "elapsed" | "updated"
 }
 
 const Timestamp = (props: TimestampProps) => {
-  const { id, className, data = {}, text } = props
+  const {
+    align = 'left',
+    aria = {},
+    className,
+    dark = false,
+    data = {},
+    text,
+    timestamp,
+    timezone,
+    showDate = true,
+    showUser = false,
+    showTimezone = false,
+    variant = 'default',
+  } = props
+
+  const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
-  const pbCss = buildCss('pb_timestamp_kit')
+  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 shouldShowUser = showUser == true && text.length > 0
+  const shouldShowTimezone = showTimezone == true && timezone.length > 0
+  const userDisplay = shouldShowUser ? ` by ${text}` : ''
+
+  let timeDisplay = `${dateTimestamp.toHour()}:${dateTimestamp.toMinute()}${dateTimestamp.toMeridian()}`
+
+  const fullTimeDisplay = () => {
+    if (shouldShowTimezone) {
+      timeDisplay = `${timeDisplay} ${dateTimestamp.toTimezone()}`
+    }
+    return timeDisplay
+  }
+
+  const fullDateDisplay = () => {
+    let fullDisplay = `${dateTimestamp.toMonth()} ${dateTimestamp.toDay()}`
+    if (dateTimestamp.toYear() > currentYear) {
+      fullDisplay = `${fullDisplay}, ${dateTimestamp.toYear()}`
+    }
+    return `${fullDisplay} ${' \u00b7 '} ${fullTimeDisplay()}`
+  }
+
+  const formatUpdatedString = () => {
+    return `Last updated ${userDisplay} on ${dateDisplay} at ${timeDisplay}`
+  }
+
+  const formatElapsedString = () => {
+    return `Last updated ${userDisplay} ${dateTimestamp.value.fromNow()}`
+  }
+
+  const datetimeOrText = timestamp ? fullDateDisplay() : text
+
+  const captionText = () => {
+    switch (variant) {
+    case 'updated':
+      return formatUpdatedString(userDisplay, dateTimestamp)
+    case 'elapsed':
+      return formatElapsedString(userDisplay, timeDisplay)
+    default:
+      return showDate ? datetimeOrText : fullTimeDisplay()
+    }
+  }
 
   return (
     <div
+        {...ariaProps}
         {...dataProps}
-        className={classnames(pbCss, globalProps(props), className)}
-        id={id}
+        className={classes}
     >
-      <Caption
-          size="xs"
-          tag="span"
-          text={text}
-      />
+      <div className="pb_timestamp_kit">
+        <Caption
+            dark={dark}
+            size="xs"
+            text={captionText()}
+        />
+      </div>
     </div>
   )
 }

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/_description.md

@@ -1 +1 @@
-This kit is a small indicator for the user to know s timestamp
+This low profile kit displays time.  Elapsed, current, future, or otherwise.

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

@@ -1,13 +1,21 @@
 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 TimestampAlign = (props) => {
   return (
     <div>
       <Timestamp
           align="left"
-          showDate="false"
-          timestamp={new Date().getTime()}
+          showDate={false}
+          timestamp={todaysDate}
           {...props}
       />
 
@@ -15,8 +23,8 @@ const TimestampAlign = (props) => {
 
       <Timestamp
           align="left"
-          showDate="true"
-          timestamp={new Date().getTime()}
+          showDate
+          timestamp={todaysDate}
           {...props}
       />
 
@@ -24,8 +32,8 @@ const TimestampAlign = (props) => {
 
       <Timestamp
           align="left"
-          showDate="true"
-          timestamp={new Date((new Date()).getFullYear() + 4, (new Date().getMonth()), (new Date().getDate() + 1)).getTime()}
+          showDate
+          timestamp={customDate}
           {...props}
       />
 
@@ -34,8 +42,8 @@ const TimestampAlign = (props) => {
 
       <Timestamp
           align="center"
-          showDate="false"
-          timestamp={new Date().getTime()}
+          showDate={false}
+          timestamp={todaysDate}
           {...props}
       />
 
@@ -43,8 +51,8 @@ const TimestampAlign = (props) => {
 
       <Timestamp
           align="center"
-          showDate="true"
-          timestamp={new Date().getTime()}
+          showDate
+          timestamp={todaysDate}
           {...props}
       />
 
@@ -52,8 +60,8 @@ const TimestampAlign = (props) => {
 
       <Timestamp
           align="center"
-          showDate="true"
-          timestamp={new Date((new Date()).getFullYear() + 4, (new Date().getMonth()), (new Date().getDate() + 1)).getTime()}
+          showDate
+          timestamp={customDate}
           {...props}
       />
 
@@ -62,8 +70,8 @@ const TimestampAlign = (props) => {
 
       <Timestamp
           align="right"
-          showDate="false"
-          timestamp={new Date().getTime()}
+          showDate={false}
+          timestamp={todaysDate}
           {...props}
       />
 
@@ -71,8 +79,8 @@ const TimestampAlign = (props) => {
 
       <Timestamp
           align="right"
-          showDate="true"
-          timestamp={new Date().getTime()}
+          showDate
+          timestamp={todaysDate}
           {...props}
       />
 
@@ -80,8 +88,8 @@ const TimestampAlign = (props) => {
 
       <Timestamp
           align="right"
-          showDate="true"
-          timestamp={new Date((new Date()).getFullYear() + 4, (new Date().getMonth()), (new Date().getDate() + 1)).getTime()}
+          showDate
+          timestamp={customDate}
           {...props}
       />
     </div>