playbook_ui 7.13.0.pre.alpha1 → 7.16.0

data/app/pb_kits/playbook/pb_table/styles/_tablet_collapse.scss

@@ -0,0 +1,135 @@
+@import "../../tokens/border_radius";
+@import "../../pb_caption/caption_mixin";
+
+@media only screen and (max-width: $screen-lg-min) {
+  [class^=pb_table] {
+    &.table-sm.table-collapse-md,
+    &.table-md.table-collapse-md,
+    &.table-lg.table-collapse-md {
+      width: 100%;
+      background: none !important;
+
+      thead {
+        tr {
+          left: -9999px;
+          position: absolute;
+          top: -9999px;
+
+          th {
+            display: block;
+            visibility: visible;
+          }
+        }
+      }
+      tbody {
+        tr {
+          td {
+            display: block;
+            visibility: visible;
+            border-left-width: 1px !important;
+            border-right-width: 1px !important;
+            border-bottom-width: 0 !important;
+            border-color: $border_light !important;
+            min-height: 2.2em;
+            position: relative;
+            text-align:left;
+            white-space: normal;
+            &:before {
+              content: attr(data-title);
+              @include caption;
+              width: 100% !important;
+              white-space: nowrap !important;
+              text-overflow: ellipsis !important;
+              position: relative !important;
+              top: 0 !important;
+              left: 0 !important;
+              height: 100% !important;
+              padding-left: 0 !important;
+              display: block !important;
+            }
+
+            &:first-child {
+              margin-top: $space_md !important;
+              border-top-width: 1px !important;
+              border-top-color: $border_light !important;
+              border-radius: $border_rad_light $border_rad_light 0 0;
+            }
+
+            &:last-child {
+              border-radius: 0 0 $border_rad_light $border_rad_light;
+              border-bottom-width: 1px !important;
+            }
+          }
+
+          &:first-child {
+            td {
+              &:first-child {
+                margin-top: $space-xs !important;
+              }
+            }
+          }
+        }
+      }
+      &.table-card {
+        background: none !important;
+
+        tbody {
+          tr {
+            td {
+              background: $white !important;
+              border-left-width: 1px !important;
+              border-right-width: 1px !important;
+              border-top-width: 1px !important;
+
+              &:first-child {
+                border-radius: $border_rad_light $border_rad_light 0 0 !important;
+              }
+              &:last-child {
+                border-radius: 0 0 $border_rad_light $border_rad_light !important;
+              }
+            }
+          }
+        }
+      }
+      @media (hover:hover) {
+        &:hover {
+          tbody {
+            tr {
+              box-shadow: 0 0 0 $white !important;
+            }
+          }
+        }
+      }
+      // reset the first and last to normalize
+      @each $name, $value in $cell-pad-list {
+        &.#{$name} {
+          tbody {
+            tr {
+              td {
+                &:first-child,
+                &:last-child {
+                  padding: $value $cell-gutter !important;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+  &.hide-labels {
+    tbody {
+      tr {
+        td {
+          &::before {
+            content: '';
+            left: 0;
+            padding-right: 0;
+            position: relative;
+            width: 0;
+          }
+        }
+      }
+    }
+  }
+}

data/app/pb_kits/playbook/pb_table/table.rb

@@ -21,12 +21,15 @@ module Playbook
       prop :responsive, type: Playbook::Props::Enum,
                         values: %w[collapse scroll none],
                         default: "collapse"
+      prop :collapse, type: Playbook::Props::Enum,
+                      values: %w[sm md lg],
+                      default: "sm"
       prop :text
 
       def classname
         generate_classname(
           "pb_table", "table-#{size}", single_line_class, dark_class,
-          disable_hover_class, container_class, data_table_class,
+          disable_hover_class, container_class, data_table_class, collapse_class,
           "table-responsive-#{responsive}", separator: " "
         )
       end
@@ -52,6 +55,10 @@ module Playbook
       def container_class
         container ? "table-card" : nil
       end
+
+      def collapse_class
+        responsive != "none" ? "table-collapse-#{collapse}" : ""
+      end
     end
   end
 end

data/app/pb_kits/playbook/pb_textarea/_textarea.jsx

@@ -1,10 +1,11 @@
 /* @flow */
 
-import React, { forwardRef } from 'react'
+import React, { forwardRef, useEffect, useRef } from 'react'
 import classnames from 'classnames'
 import { Body, Caption, Flex, FlexItem } from '../'
 import type { InputCallback } from '../types.js'
 import { globalProps } from '../utilities/globalProps.js'
+import PbTextarea from './'
 
 type TextareaProps = {
   characterCount?: string,
@@ -22,7 +23,7 @@ type TextareaProps = {
   name?: string,
   required?: boolean,
   rows?: number,
-  resize: 'none' | 'both' | 'horizontal' | 'vertical',
+  resize: 'none' | 'both' | 'horizontal' | 'vertical' | 'auto',
   onChange?: InputCallback<HTMLTextAreaElement>,
 }
 
@@ -43,6 +44,13 @@ const Textarea = ({
   value,
   ...props
 }: TextareaProps, ref: React.ElementRef<"textarea">) => {
+  ref = ref || useRef(false)
+  useEffect(() => {
+    if (ref.current && resize === 'auto') {
+      PbTextarea.addMatch(ref.current)
+    }
+  })
+
   const errorClass = error ? 'error' : null
   const resizeClass = `resize_${resize}`
   const classes = classnames('pb_textarea_kit', errorClass, resizeClass, globalProps(props), className)

data/app/pb_kits/playbook/pb_textarea/docs/_textarea_resize.html.erb

@@ -1,6 +1,6 @@
+<%= pb_rails("textarea", props: { label: "auto", placeholder: "Resize Auto", resize: "auto" }) %>
 
-
-
+<br/>
 
 <%= pb_rails("textarea", props: { label: "vertical", placeholder: "Resize Vertical", resize: "vertical" }) %>
 

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.rb

@@ -14,10 +14,10 @@ module Playbook
       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 +40,6 @@ module Playbook
       def resize_class
         " resize_#{resize}"
       end
-
     end
   end
 end

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

@@ -1,6 +1,8 @@
 <%= content_tag(:div,
-    id: object.id,
-    data: object.data,
-    class: object.classname) do %>
-  <%= pb_rails("caption", props: { text: object.text, tag: 'span', size: 'xs' }) %>
+  aria: object.aria,
+  id: object.id,
+  data: object.data,
+  class: object.classname) do %>
+
+  <%= pb_rails("caption", props: { text: object.caption_text, size: 'xs', dark: object.dark }) %>
 <% end %>

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>