playbook_ui 5.5.1.pre.alpha3 → 6.0.1.pre.alpha3

data/app/pb_kits/playbook/pb_date_picker/date_picker.rb

@@ -22,12 +22,15 @@ module Playbook
                    default: "Date Picker"
       prop :max_date, type: Playbook::Props::String
       prop :min_date, type: Playbook::Props::String
+      prop :name, type: Playbook::Props::String
       prop :mode, type: Playbook::Props::String,
                   default: "single"
       prop :picker_id, type: Playbook::Props::String
+      prop :required, type: Playbook::Props::Boolean,
+                      default: false
 
       def classname
-        generate_classname("pb_date_picker")
+        generate_classname("pb_date_picker_kit")
       end
 
       def error_class

data/app/pb_kits/playbook/pb_form/docs/_form_form_with.html.erb

@@ -24,7 +24,7 @@
   <%= form.text_area :example_text_area, props: { label: true } %>
   <%= form.select :example_select, [ ["Yes", 1], ["No", 2] ], props: { label: true } %>
   <%= form.collection_select :example_collection_select, example_collection, :value, :name, props: { label: true } %>
-  <%= form.date_picker :example_date_picker, props: { picker_id: 'date-picker', default_date: 'blank' } %>
+  <%= form.date_picker :example_date_picker, props: { default_date: 'blank', name: "example[example_date_picker]", picker_id: "example_example_date_picker1" } %>
 
   <%= form.actions do |action| %>
     <%= action.submit %>

data/app/pb_kits/playbook/pb_form/docs/_form_form_with_validate.html.erb

@@ -27,6 +27,7 @@
   <%= form.text_area :example_text_area, props: { label: true, required: true } %>
   <%= form.select :example_select, [ ["Yes", 1], ["No", 2] ], props: { label: true, blank_selection: "Select One...", required: true } %>
   <%= form.collection_select :example_collection_select, example_collection, :value, :name, props: { label: true, blank_selection: "Select One...", required: true } %>
+  <%= form.date_picker :example_date_picker, props: { default_date: 'blank', name: "example[example_date_picker]", picker_id: "example_example_date_picker2", required: true } %>
 
   <%= form.actions do |action| %>
     <%= action.submit %>

data/app/pb_kits/playbook/pb_form/docs/_form_simple_form.html.erb

@@ -14,7 +14,7 @@
     :example_text_area,
     :example_select_field,
     :example_collection_select_field,
-    :example_date_picker
+    :example_date_picker_field
 
 
     def self.model_name
@@ -50,7 +50,7 @@
   <%= form.input :example_text_area, as: :text %>
   <%= form.select :example_select_field, [["Yes", 1], ["No", 2]], props: { label: true } %>
   <%= form.collection_select :example_collection_select_field, example_collection, :value, :name, props: { label: true } %>
-  <%= form.date_picker :example_date_picker, props: { picker_id: 'date-picker', default_date: 'blank' } %>
+  <%= form.date_picker :example_date_picker_field, props: { default_date: 'blank', name: "example[example_date_picker]", picker_id: "example_example_date_picker3" } %>
 
   <%= form.actions do |action| %>
     <%= action.submit %>

data/app/pb_kits/playbook/pb_form/docs/_form_simple_form_validate.html.erb

@@ -13,7 +13,8 @@
     :example_url_field,
     :example_text_area,
     :example_select_field,
-    :example_collection_select_field
+    :example_collection_select_field,
+    :example_date_picker_field
 
 
     def self.model_name
@@ -49,6 +50,7 @@
   <%= form.input :example_text_area, {as: :text, input_html: {props: {required: true}}} %>
   <%= form.select :example_select_field, [["Yes", 1], ["No", 2]], props: { required: true, blank_selection: "Select One...", label: true } %>
   <%= form.collection_select :example_collection_select_field, example_collection, :value, :name, props: { required: true, blank_selection: "Select One...", label: true } %>
+  <%= form.date_picker :example_date_picker_field, props: { default_date: 'blank', name: "example[example_date_picker]", picker_id: "example_example_date_picker4", required: true } %>
 
   <%= form.actions do |action| %>
     <%= action.submit %>

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

@@ -4,9 +4,28 @@ module Playbook
   module PbForm
     module FormBuilder
       module DatePickerField
-        def date_picker(name, props: {})
-          props[:name] = name
+        # 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: {})
           @template.pb_rails("date_picker", props: props)
         end
       end

data/app/pb_kits/playbook/pb_image/_image.html.erb

@@ -3,4 +3,5 @@
     data: object.data.merge(src: object.url),
     class: object.classname,
     aria: object.aria,
-    alt: object.alt) %>
+    src: object.url,
+    alt: object.alt) %>

data/app/pb_kits/playbook/pb_image/_image.jsx

@@ -2,21 +2,44 @@
 
 import React from 'react'
 import classnames from 'classnames'
+import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
 import { spacing } from '../utilities/spacing.js'
 
 type ImageProps = {
-  url: string,
-  alt?: string,
+  alt?: String,
+  aria?: object,
+  className?: String,
+  data?: object,
+  id?: String,
+  url: String,
 }
 
 const Image = (props: ImageProps) => {
-  const { alt = '', url = '' } = props
+  const {
+    alt = '',
+    aria = {},
+    className,
+    data = {},
+    id,
+    url = '',
+  } = props
+
+  const ariaProps = buildAriaProps(aria)
+  const classes = classnames(buildCss('pb_image lazyload blur_up'), className, spacing(props))
+  const dataProps = buildDataProps(data)
+
   return (
-    <img
-        alt={alt}
-        className={classnames('pb_image_kit lazyload blur_up', spacing(props))}
-        data-src={url}
-    />
+    <div>
+      <img
+          {...ariaProps}
+          {...dataProps}
+          alt={alt}
+          className={classes}
+          data-src={url}
+          id={id}
+          src={url}
+      />
+    </div>
   )
 }
 

data/app/pb_kits/playbook/pb_image/docs/_default_image.jsx

@@ -3,9 +3,9 @@ import { Image } from '../../'
 
 const DefaultImage = () => {
   return (
-    <div>
-      <Image url="https://unsplash.it/500/400/?image=634" />
-    </div>
+    <Image
+        url="https://unsplash.it/500/400/?image=634"
+    />
   )
 }
 

data/app/pb_kits/playbook/pb_label_value/_label_value.html.erb

@@ -3,6 +3,24 @@
     id: object.id,
     data: object.data,
     class: object.classname) do %>
-  <%= pb_rails("caption", props: { text: object.label }) %>
-  <%= pb_rails("body", props: { text: object.value }) %>
+    <%= pb_rails("caption", props: { text: object.label, dark: object.dark }) %>
+    <% if object.variant == "details" %>
+        <%= pb_rails("flex", props: {inline: true, vertical: "center"}) do %>
+            <%= pb_rails("body", props: { color: "light", dark: object.dark }) do %>
+                <%= pb_rails("icon", props: { icon: object.icon, fixed_width: true, margin_right: "xs", }) if object.icon.present? %>
+            <% end %>
+            <%= pb_rails("body", props: { text: object.description, color: "light", margin_right: "xs", dark: object.dark }) if object.description.present? %>
+            <% if object.active %>
+                <%= pb_rails("flex", props: {inline: true, vertical: "center"}) do %>
+                    <%= pb_rails("title", props: { text: object.title, tag: "h4", size: 4, variant: "link", dark: object.dark }) if object.title.present? %> 
+                    <%= pb_rails("title", props: { text: object.date_element, tag: "span", size: 4, margin_left: "xs", variant: "link", dark: object.dark }) if object.date.present? %>
+                <% end %>
+            <% else %>
+                <%= pb_rails("title", props: { text: object.title, tag: "h4", size: 4, dark: object.dark }) if object.title.present? %> 
+                <%= pb_rails("title", props: { text: object.date_element, tag: "span", size: 4, margin_left: "xs", dark: object.dark }) if object.date.present? %>
+            <% end %>
+        <% end %>
+    <% else %>
+        <%= pb_rails("body", props: { text: object.value, dark: object.dark }) if object.value.present? %>
+    <% end %>
 <% end %>

data/app/pb_kits/playbook/pb_label_value/_label_value.jsx

@@ -2,8 +2,9 @@
 
 import React from 'react'
 import classnames from 'classnames'
+import DateTime from '../pb_kit/dateTime.js'
 import { buildAriaProps, buildDataProps } from '../utilities/props'
-import { Body, Caption } from '../'
+import { Body, Caption, Flex, Icon, Title } from '../'
 import { spacing } from '../utilities/spacing.js'
 
 type LabelValueProps = {
@@ -13,21 +14,42 @@ type LabelValueProps = {
   data?: object,
   id?: String,
   label: String,
-  value: String,
+  value?: String,
+  variant?: "default" | "details",
+  icon?: String,
+  description?: String,
+  title?: String,
+  date?: Date,
+  active?: Boolean
+}
+
+const dateString = (value: DateTime) => {
+  const month = value.toMonthNum()
+  const day = value.toDay()
+
+  return ` · ${month}/${day}`
 }
 
 const LabelValue = (props: LabelValueProps) => {
   const {
+    active = false,
     aria = {},
     className,
     dark = false,
     data = {},
+    date,
+    description,
+    icon,
     id,
     label,
-    value } = props
+    title,
+    value,
+    variant = 'default',
+  } = props
 
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
+  const formattedDate = new DateTime({ value: date })
   const themeStyle = dark === true ? '_dark' : ''
   const css = classnames(
     ['pb_label_value_kit' + themeStyle, className],
@@ -39,10 +61,92 @@ const LabelValue = (props: LabelValueProps) => {
         {...ariaProps}
         {...dataProps}
         className={css}
+        dark={dark}
+        description={description}
+        icon={icon}
         id={id}
+        title={title}
     >
-      <Caption text={label} />
-      <Body text={value} />
+      <Caption
+          dark={dark}
+          text={label}
+      />
+      <If condition={variant === 'details'}>
+        <Flex
+            inline
+            vertical="center"
+        >
+          <If condition={icon}>
+            <Body
+                color="light"
+                dark={dark}
+                marginRight="xs"
+            >
+              <Icon
+                  dark={dark}
+                  fixedWidth
+                  icon={icon}
+              />
+            </Body>
+          </If>
+          <If condition={description}>
+            <Body
+                color="light"
+                dark={dark}
+                marginRight="xs"
+                text={description}
+            />
+          </If>
+          <Choose>
+            <When condition={active === true}>
+              <Flex
+                  inline
+                  vertical="center"
+              >
+                <If condition={title}>
+                  <Title
+                      dark={dark}
+                      size={4}
+                      text={title}
+                      variant="link"
+                  />
+                </If>
+                <If condition={date}>
+                  <Title
+                      dark={dark}
+                      marginLeft="xs"
+                      size={4}
+                      text={' ' + dateString(formattedDate)}
+                      variant="link"
+                  />
+                </If>
+              </Flex>
+            </When>
+            <Otherwise>
+              <If condition={title}>
+                <Title
+                    dark={dark}
+                    size={4}
+                    text={title}
+                />
+              </If>
+              <If condition={date}>
+                <Title
+                    dark={dark}
+                    marginLeft="xs"
+                    size={4}
+                    text={' ' + dateString(formattedDate)}
+                />
+              </If>
+            </Otherwise>
+          </Choose>
+        </Flex>
+        <Else />
+        <Body
+            dark={dark}
+            text={value}
+        />
+      </If>
     </div>
   )
 }

data/app/pb_kits/playbook/pb_label_value/_label_value.scss

@@ -1,17 +1,7 @@
 @import "../tokens/spacing";
-@import "../pb_caption/caption";
-@import "../pb_body/body";
 
 [class^=pb_label_value_kit] {
   [class^=pb_caption_kit]  {
     margin-bottom: $space-xs/1.5;
   }
-  &[class*=_dark]  {
-    [class^=pb_caption_kit] {
-      color: $text_dk_light;
-    }
-    [class^=pb_body_kit] {
-      color: $text_dk_default;
-    }
-  }
 }

data/app/pb_kits/playbook/pb_label_value/docs/_description.md

@@ -1 +1,3 @@
-This kit can be very versatile when used to display text data. It includes the caption kit and the body text kit. 
+This kit can be very versatile when used to display text data.
+
+Variant `default` includes a label and text. However, variant `details` can be used if multiple elements are necessary in order to make it more descriptive. Variant `details` may include icon, light text, title and date, as well as the option to make it active (with link color) for clickability purposes.

data/app/pb_kits/playbook/pb_label_value/docs/_label_value_details.html.erb

@@ -0,0 +1,39 @@
+<%= pb_rails("label_value", props: {
+  variant: "details",
+  label: "Installer",
+  icon: "truck",
+  title: "JD Installations LLC",
+}) %>
+
+<br>
+
+<%= pb_rails("label_value", props: {
+  variant: "details",
+  label: "Project",
+  icon: "home",
+  description: "33-12345",
+  title: "Jefferson-Smith",
+}) %>
+
+<br>
+
+<%= pb_rails("label_value", props: {
+  variant: "details",
+  label: "Project",
+  icon: "home",
+  description: "33-12345",
+  title: "Jefferson-Smith",
+  date: Date.new(2019, 11, 18)
+}) %>
+
+<br>
+
+<%= pb_rails("label_value", props: {
+  variant: "details",
+  active: true,
+  label: "Project",
+  icon: "home",
+  description: "33-12345",
+  title: "Jefferson-Smith",
+  date: Date.new(2019, 11, 18)
+}) %>

data/app/pb_kits/playbook/pb_label_value/docs/_label_value_details.jsx

@@ -0,0 +1,50 @@
+import React from 'react'
+import { LabelValue } from '../../'
+
+const LabelValueDetails = () => {
+  return (
+    <div>
+      <LabelValue
+          icon="truck"
+          label="Installer"
+          title="JD Installations LLC"
+          variant="details"
+      />
+
+      <br />
+
+      <LabelValue
+          description="33-12345"
+          icon="home"
+          label="Project"
+          title="Jefferson-Smith"
+          variant="details"
+      />
+
+      <br />
+
+      <LabelValue
+          date={new Date('18 Nov 2019')}
+          description="33-12345"
+          icon="home"
+          label="Project"
+          title="Jefferson-Smith"
+          variant="details"
+      />
+
+      <br />
+
+      <LabelValue
+          active
+          date={new Date('18 Nov 2019')}
+          description="33-12345"
+          icon="home"
+          label="Project"
+          title="Jefferson-Smith"
+          variant="details"
+      />
+    </div>
+  )
+}
+
+export default LabelValueDetails