playbook_ui 6.0.1.pre.alpha6 → 6.1.0.pre.alpha4

data/app/pb_kits/playbook/pb_form/form_builder/date_picker_field.rb

@@ -0,0 +1,41 @@
+# frozen_string_literal: true
+
+module Playbook
+  module PbForm
+    module FormBuilder
+      module DatePickerField
+        # def date_field(name, props: {})
+        #   # props[:name] = name
+
+        #   input = super(name)
+        #   puts name
+        #   puts input
+
+        #   @template.pb_rails("date_picker", props: props) do
+        #     input
+        #   end
+        # end
+        # def date_picker(name, props: {})
+        #   predicate = name.to_s.split("_")[0]
+        #   html_name = "#{predicate}[#{name}]"
+        #   id = predicate + "_" + name.to_s
+
+        #   props[:name] = html_name
+        #   props[:picker_id] = id
+
+        #   @template.pb_rails("date_picker", props: props)
+        # end
+        def date_picker(name, props: {})
+          prefix = @object_name
+          html_attribute_name = "#{prefix}[#{name}]"
+          html_id = "#{prefix}_#{name}"
+
+          props[:name] = html_attribute_name
+          props[:picker_id] = html_id
+
+          @template.pb_rails("date_picker", props: props)
+        end
+      end
+    end
+  end
+end

data/app/pb_kits/playbook/pb_form/form_builder/form_field_builder.rb

@@ -12,7 +12,6 @@ module Playbook
             options[:skip_default_ids] = false unless options.key?(:skip_default_ids)
             options[:required] = true if props[:required]
             options[:placeholder] = props[:placeholder] || ""
-            options[:value] = props[:value]
 
             if props.key?(:validation)
               validation = props[:validation]

data/app/pb_kits/playbook/pb_kit/dateTime.js

@@ -74,7 +74,11 @@ export default class DateTime {
   }
 
   toTime() {
-    return this.value.strftime('%I:%M')
+    const time = this.value.strftime('%I:%M')
+
+    // strftime adds a leading 0 on single hour times. ie 08:31.
+    // this removes that 0 to match the rails kit.
+    return time.charAt() === '0' ? time.slice(1) : time
   }
 
   toTimezone() {

data/app/pb_kits/playbook/pb_popover/docs/_popover_list.jsx

@@ -35,11 +35,11 @@ const PopoverWithButton = () => {
         show={showPopover}
     >
       <List xpadding>
-        <ListItem>{'Popularity'}</ListItem>
-        <ListItem>{'Title'}</ListItem>
-        <ListItem>{'Duration'}</ListItem>
-        <ListItem>{'Date Started'}</ListItem>
-        <ListItem>{'Date Ended'}</ListItem>
+        <ListItem><a>{'Popularity'}</a></ListItem>
+        <ListItem><a>{'Title'}</a></ListItem>
+        <ListItem><a>{'Duration'}</a></ListItem>
+        <ListItem><a>{'Date Started'}</a></ListItem>
+        <ListItem><a>{'Date Ended'}</a></ListItem>
       </List>
     </PbReactPopover>
   )

data/app/pb_kits/playbook/pb_selectable_card/_selectable_card.jsx

@@ -15,13 +15,12 @@ import {
 
 import { globalProps } from '../utilities/globalProps.js'
 
-type Props = {
-  aria: Object,
+type SelectableCardProps = {
+  aria?: object,
   checked: Boolean,
   children?: Array<React.ReactChild>,
   className?: String,
-  dark?: Boolean,
-  data: Object,
+  data: object,
   disabled?: Boolean,
   icon?: Boolean,
   id?: String,
@@ -38,7 +37,6 @@ const SelectableCard = ({
   checked = false,
   children,
   className,
-  dark = false,
   data = {},
   disabled = false,
   icon = false,
@@ -49,17 +47,15 @@ const SelectableCard = ({
   text,
   value,
   ...props
-}: Props) => {
+}: SelectableCardProps) => {
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
 
-  const css = buildCss({
-    'pb_selectable_card_kit': true,
-    checked: checked,
-    dark: dark,
-    disabled: disabled,
-    enabled: !disabled,
-  })
+  const classes = classnames(buildCss('pb_selectable_card_kit',
+    { 'checked': checked,
+      'disabled': disabled,
+      'enabled': !disabled },
+    className), globalProps(props))
 
   const displayIcon = () => {
     if (icon === true) {
@@ -82,7 +78,7 @@ const SelectableCard = ({
     <div
         {...ariaProps}
         {...dataProps}
-        className={classnames(css, className)}
+        className={classes}
     >
       <input
           {...props}

data/app/pb_kits/playbook/pb_selectable_card/_selectable_card.scss

@@ -65,7 +65,7 @@ $pb_selectable_card_border: 2px;
     }
   }
 
-  &[class*=_dark] {
+  &.dark {
     label {
       @include pb_card_dark;
       background: transparent;

data/app/pb_kits/playbook/pb_selectable_card/selectable_card.rb

@@ -9,8 +9,6 @@ module Playbook
 
       prop :checked, type: Playbook::Props::Boolean,
                   default: false
-      prop :dark, type: Playbook::Props::Boolean,
-                  default: false
       prop :disabled, type: Playbook::Props::Boolean,
                   default: false
       prop :icon, type: Playbook::Props::Boolean,
@@ -26,7 +24,7 @@ module Playbook
       
 
       def classname
-        generate_classname("pb_selectable_card_kit", checked_class, dark_class, enable_disabled_class)
+        generate_classname("pb_selectable_card_kit", checked_class, enable_disabled_class)
       end
 
       def input_id_present
@@ -39,10 +37,6 @@ module Playbook
         checked ? "checked" : nil 
       end
 
-      def dark_class
-        dark ? "dark" : nil
-      end
-
       def enable_disabled_class
         disabled ? "disabled" : "enabled"
       end

data/app/pb_kits/playbook/pb_selectable_card_icon/_selectable_card_icon.jsx

@@ -3,6 +3,7 @@
 import React from 'react'
 import classnames from 'classnames'
 import { Body, SelectableCard, SelectableIcon } from '../'
+import { globalProps } from '../utilities/globalProps.js'
 
 import {
   buildAriaProps,
@@ -28,39 +29,39 @@ type SelectableCardIconProps = {
   onChange?: (e) => void,
 }
 
-const SelectableCardIcon = ({
-  aria = {},
-  checkmark = false,
-  checked = false,
-  className,
-  dark = false,
-  data = {},
-  disabled = false,
-  icon,
-  inputId,
-  multi = true,
-  name,
-  titleText,
-  bodyText,
-  value,
-  onChange,
-}: SelectableCardIconProps) => {
+const SelectableCardIcon = (props: SelectableCardIconProps) => {
+  const {
+    aria = {},
+    checkmark = false,
+    checked = false,
+    className,
+    dark = false,
+    data = {},
+    disabled = false,
+    icon,
+    inputId,
+    multi = true,
+    name,
+    titleText,
+    bodyText,
+    value,
+    onChange,
+  } = props
+
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
 
-  const css = buildCss({
-    'pb_selectable_card_icon_kit': true,
-    'checked': checked,
-    'dark': dark,
-    'disabled': disabled,
-    'enabled': !disabled,
-  })
+  const classes = classnames(buildCss('pb_selectable_card_icon_kit',
+    { 'checked': checked,
+      'disabled': disabled,
+      'enabled': !disabled },
+    className), globalProps(props))
 
   return (
     <div
         {...ariaProps}
         {...dataProps}
-        className={classnames(css, className)}
+        className={classes}
     >
       <SelectableCard
           checked={checked}
@@ -76,7 +77,6 @@ const SelectableCardIcon = ({
         {
           <>
             <SelectableIcon
-                dark={dark}
                 icon={icon}
                 inputs="disabled"
                 size="2x"

data/app/pb_kits/playbook/pb_selectable_card_icon/_selectable_card_icon.scss

@@ -32,7 +32,7 @@
       }
     }
 
-  &[class*=_dark] {
+  &.dark {
 
     input[type="checkbox"],
     input[type="radio"] {       

data/app/pb_kits/playbook/pb_selectable_card_icon/selectable_card_icon.rb

@@ -25,11 +25,8 @@ module Playbook
                        default: false
       prop :value
 
-      prop :dark, type: Playbook::Props::Boolean,
-                  default: false
-
       def classname
-        generate_classname("pb_selectable_card_icon_kit", checked_class, dark_class, enabled_disabled_class)
+        generate_classname("pb_selectable_card_icon_kit", checked_class, enabled_disabled_class)
       end
 
     private
@@ -38,10 +35,6 @@ module Playbook
         checked ? "checked" : nil
       end
 
-      def dark_class
-        dark ? "dark" : nil
-      end
-
       def enabled_disabled_class
         disabled ? "disabled" : "enabled"
       end

data/app/pb_kits/playbook/pb_selectable_icon/_selectable_icon.jsx

@@ -10,12 +10,13 @@ import {
   buildDataProps,
 } from '../utilities/props'
 
+import { globalProps } from '../utilities/globalProps.js'
+
 type SelectableIconProps = {
   aria?: Object,
   checked?: Boolean,
   className?: String,
   disabled?: Boolean,
-  dark?: Boolean,
   data?: Object,
   icon: String,
   inputId: String,
@@ -30,7 +31,6 @@ const SelectableIcon = ({
   aria = {},
   className,
   checked = false,
-  dark = false,
   data = {},
   disabled = false,
   icon,
@@ -45,13 +45,11 @@ const SelectableIcon = ({
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
 
-  const css = buildCss({
-    'pb_selectable_icon_kit': true,
-    'checked': checked,
-    'dark': dark,
-    'disabled': disabled,
-    'enabled': !disabled,
-  })
+  const classes = classnames(buildCss('pb_selectable_icon_kit',
+    { 'checked': checked,
+      'disabled': disabled,
+      'enabled': !disabled },
+    className), globalProps(props))
 
   const inputType = multi === false ? 'radio' : 'checkbox'
 
@@ -61,7 +59,7 @@ const SelectableIcon = ({
     <div
         {...ariaProps}
         {...dataProps}
-        className={classnames(css, className)}
+        className={classes}
     >
       <If condition={inputs === 'disabled'}>
         <>

data/app/pb_kits/playbook/pb_selectable_icon/_selectable_icon.scss

@@ -53,7 +53,7 @@
 	}
 
 
-  &[class*=_dark] {
+  &.dark {
 
 		input[type="checkbox"],
 		input[type="radio"] {

data/app/pb_kits/playbook/pb_selectable_icon/selectable_icon.rb

@@ -9,8 +9,6 @@ module Playbook
 
       # Icon props
       prop :icon, type: Playbook::Props::String
-      prop :dark, type: Playbook::Props::Boolean,
-                  default: false
       # Title text
       prop :text, type: Playbook::Props::String
 
@@ -30,7 +28,7 @@ module Playbook
                     default: "enabled"
 
       def classname
-        generate_classname("pb_selectable_icon_kit", checked_class, dark_class, enabled_disabled_class)
+        generate_classname("pb_selectable_icon_kit", checked_class, enabled_disabled_class)
       end
 
       def input_id_present
@@ -43,10 +41,6 @@ module Playbook
         checked ? "checked" : nil
       end
 
-      def dark_class
-        dark ? "dark" : nil
-      end
-
       def enabled_disabled_class
         disabled ? "disabled" : "enabled"
       end

data/app/pb_kits/playbook/pb_textarea/_textarea.html.erb

@@ -3,7 +3,7 @@
     data: object.data,
     class: object.classname) do %>
   <% if object.label.present? %>
-    <%= pb_rails("caption", props: {text: object.label, dark: object.dark, classname: "pb_textarea_kit_label"}) %>
+    <%= pb_rails("caption", props: {text: object.label, dark: object.dark}) %>
   <% end %>
   <% if object.children %>
     <%= capture(&object.children) %>

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

@@ -1,10 +1,11 @@
 @import "../pb_body/body_mixins";
 @import "./textarea_mixin";
 @import "../pb_title/title_mixin";
+@import "../tokens/spacing";
 
 [class^=pb_textarea_kit] {
   margin-bottom: $space_sm;
-  .pb_textarea_kit_label {
+  [class^=pb_caption_kit] {
     margin-bottom: $space_xs;
     display: block;
   }

data/app/pb_kits/playbook/pb_time/_time.jsx

@@ -1,21 +1,64 @@
+/* @flow */
+
 import React from 'react'
-import PropTypes from 'prop-types'
+import classnames from 'classnames'
 
-const propTypes = {
-  className: PropTypes.string,
-  id: PropTypes.string,
-}
+import DateTime from '../pb_kit/dateTime.js'
+import { buildCss } from '../utilities/props'
+import { globalProps } from '../utilities/globalProps.js'
+
+import { Body, Icon, Title  } from '../'
 
-class Time extends React.Component {
-  render() {
-    return (
-      <div className="pb_time">
-        <span>{'TIME CONTENT'}</span>
-      </div>
-    )
-  }
+type TimeProps = {
+  align?: 'left" | "center' | 'right',
+  className?: String | Array<String>,
+  data?: String,
+  date: String,
+  id?: String,
+  showTimezone?: Boolean,
+  size?: 'lg' | 'sm' | 'xs',
 }
 
-Time.propTypes = propTypes
+const Time = (props: TimeProps) => {
+  const { align, className, date, showTimezone, size } = props
+  const classes = classnames(
+    className,
+    buildCss('pb_time_kit', align, size),
+    globalProps(props)
+  )
+
+  const dateTimestamp = new DateTime({ value: date })
+
+  return (
+    <div className={classes}>
+      <span className="pb_body_kit">
+        <If condition={size === 'sm'}>
+          <Icon
+              fixedWidth
+              icon="clock"
+          />
+          {' '}
+        </If>
+        <time dateTime={date}>
+          <span>
+            <If condition={size !== 'lg'}>
+              <Body
+                  tag="span"
+                  text={dateTimestamp.toTimeWithMeridian()}
+              />
+              <Else />
+              <Title
+                  size={3}
+                  tag="span"
+                  text={dateTimestamp.toTimeWithMeridian()}
+              />
+            </If>
+            { showTimezone && <span className="pb_time_timezone">{dateTimestamp.toTimezone()}</span> }
+          </span>
+        </time>
+      </span>
+    </div>
+  )
+}
 
 export default Time