playbook_ui 5.3.0 → 5.5.1.pre.alpha2

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_error.html.erb

@@ -0,0 +1,4 @@
+<%= pb_rails("date_picker", props: { 
+  error: "Invalid date. Please pick a valid date.",
+  picker_id: "date-picker-error"
+}) %>

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_error.jsx

@@ -0,0 +1,13 @@
+import React from 'react'
+import { DatePicker } from '../../'
+
+const DatePickerError = () => (
+  <div>
+    <DatePicker
+        error="Invalid date. Please pick a valid date."
+        pickerId="date-picker-error"
+    />
+  </div>
+)
+
+export default DatePickerError

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_format.html.erb

@@ -0,0 +1,19 @@
+<%= pb_rails("date_picker", props: {
+  format: "m-d-Y",
+  picker_id: "date-picker-format1"
+}) %>
+
+<%= pb_rails("date_picker", props: {
+  format: "m/d/y",
+  picker_id: "date-picker-format2"
+}) %>
+
+<%= pb_rails("date_picker", props: {
+  format: "n-j-y",
+  picker_id: "date-picker-format3"
+}) %>
+
+<%= pb_rails("date_picker", props: {
+  format: "Y-d-m",
+  picker_id: "date-picker-format4"
+}) %>

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_format.jsx

@@ -0,0 +1,25 @@
+import React from 'react'
+import { DatePicker } from '../../'
+
+const DatePickerFormat = () => (
+  <div>
+    <DatePicker
+        format="m-d-Y"
+        pickerId="date-picker-format1"
+    />
+    <DatePicker
+        format="m/d/y"
+        pickerId="date-picker-format2"
+    />
+    <DatePicker
+        format="n-j-y"
+        pickerId="date-picker-format3"
+    />
+    <DatePicker
+        format="Y-d-m"
+        pickerId="date-picker-format4"
+    />
+  </div>
+)
+
+export default DatePickerFormat

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_label.html.erb

@@ -0,0 +1,4 @@
+<%= pb_rails("date_picker", props: {
+  label: "Your Label Here",
+  picker_id: "date-picker-label"
+}) %>

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_label.jsx

@@ -0,0 +1,13 @@
+import React from 'react'
+import { DatePicker } from '../../'
+
+const DatePickerLabel = () => (
+  <div>
+    <DatePicker
+        label="Your Label Here"
+        pickerId="date-picker-label"
+    />
+  </div>
+)
+
+export default DatePickerLabel

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_min_max.html.erb

@@ -0,0 +1,14 @@
+<%= pb_rails("date_picker", props: {
+  label: "Dynamic dates.",
+  max_date: (Date.today + 3).httpdate,
+  min_date: (Date.today - 3).httpdate,
+  picker_id: "date-picker-min-max1"
+}) %>
+
+<%= pb_rails("date_picker", props: {
+  format: "m/d/Y",
+  label: "Absolute formatted dates.",
+  max_date: "10/20/2020",
+  min_date: "10/10/2020",
+  picker_id: "date-picker-min-max2"
+}) %>

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_min_max.jsx

@@ -0,0 +1,22 @@
+import React from 'react'
+import { DatePicker } from '../../'
+
+const DatePickerMinMax = () => (
+  <div>
+    <DatePicker
+        label="Dynamic dates using flatpickr increment function."
+        maxDate={new Date().fp_incr(3)}
+        minDate={new Date().fp_incr(-3)}
+        pickerId="date-picker-min-max1"
+    />
+    <DatePicker
+        format="m/d/Y"
+        label="Absolute formatted dates."
+        maxDate="10/20/2020"
+        minDate="10/10/2020"
+        pickerId="date-picker-min-max2"
+    />
+  </div>
+)
+
+export default DatePickerMinMax

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range.html.erb

@@ -0,0 +1,4 @@
+<%= pb_rails("date_picker", props: {
+  mode: "range",
+  picker_id: "date-picker-range"
+}) %>

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range.jsx

@@ -0,0 +1,13 @@
+import React from 'react'
+import { DatePicker } from '../../'
+
+const DatePickerRange = () => (
+  <div>
+    <DatePicker
+        mode="range"
+        pickerId="date-picker-range"
+    />
+  </div>
+)
+
+export default DatePickerRange

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

@@ -0,0 +1,23 @@
+examples:
+  
+  rails:
+  - date_picker_default: Default
+  - date_picker_default_date: Default Date
+  - date_picker_label: Label
+  - date_picker_range: Range
+  - date_picker_format: Format
+  - date_picker_disabled: Disabled Dates
+  - date_picker_min_max: Min Max
+  - date_picker_error: Error
+  
+  
+  react:
+  - date_picker_default: Default
+  - date_picker_default_date: Default Date
+  - date_picker_label: Label
+  - date_picker_range: Range
+  - date_picker_format: Format
+  - date_picker_disabled: Disabled Dates
+  - date_picker_min_max: Min Max
+  - date_picker_error: Error
+  

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

@@ -0,0 +1,8 @@
+export { default as DatePickerDefault } from './_date_picker_default.jsx'
+export { default as DatePickerDefaultDate } from './_date_picker_default_date.jsx'
+export { default as DatePickerLabel } from './_date_picker_label.jsx'
+export { default as DatePickerRange } from './_date_picker_range.jsx'
+export { default as DatePickerFormat } from './_date_picker_format.jsx'
+export { default as DatePickerDisabled } from './_date_picker_disabled.jsx'
+export { default as DatePickerMinMax } from './_date_picker_min_max.jsx'
+export { default as DatePickerError } from './_date_picker_error.jsx'

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

@@ -0,0 +1,11 @@
+import PbEnhancedElement from '../pb_enhanced_element'
+
+export default class PbDatePicker extends PbEnhancedElement {
+  static get selector() {
+    return '[data-pb-date-picker-kit]'
+  }
+
+  connect() {
+    this.element.addEventListener('keydown', (event) => this.handleKeydown(event))
+  }
+}

data/app/pb_kits/playbook/pb_filter/docs/_filter_default.html.erb

@@ -30,6 +30,7 @@
   <%= pb_rails("form", props: { form_system_options: { scope: :example, method: :get } }) do |form| %>
     <%= form.text_field :example_text_field, props: { label: true } %>
     <%= form.collection_select :example_collection_select, example_collection, :value, :name, props: { label: true } %>
+    <%= form.date_picker :example_date_picker %>
 
     <%= form.actions do |action| %>
       <%= action.submit props: { text: "Apply", data: { disable_with: "<i class='far fa-spinner fa-spin mr-3'></i>Searching...".html_safe },}%>

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

@@ -24,6 +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.actions do |action| %>
     <%= action.submit %>

data/app/pb_kits/playbook/pb_form/docs/_form_simple_form.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
 
 
     def self.model_name
@@ -49,6 +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.actions do |action| %>
     <%= action.submit %>

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

@@ -17,6 +17,7 @@ module Playbook
         prepend(TypeaheadField)
         prepend(SelectField)
         prepend(CollectionSelectField)
+        prepend(DatePickerField)
 
         def actions(&block)
           ActionArea.new(self).wrapper(&block)

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

@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+module Playbook
+  module PbForm
+    module FormBuilder
+      module DatePickerField
+        def date_picker(name, props: {})
+          props[:name] = name
+
+          @template.pb_rails("date_picker", props: props)
+        end
+      end
+    end
+  end
+end

data/app/pb_kits/playbook/pb_highlight/docs/_highlight_default.html.erb

@@ -10,7 +10,7 @@ This an example<%= pb_rails("highlight") do%>Highlight Example<% end %>around.
 <br>
 <br>
 <%= pb_rails("title", props: {text: "Search",size: 4})%>
-</br>
+<br>
 <%= pb_rails("body", props: {text: "hello helpers are great even highlighting this", highlighting: true, highlighted_text: ["hello","great"]})%>
 
 <br>

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

@@ -14,7 +14,7 @@ const Image = (props: ImageProps) => {
   return (
     <img
         alt={alt}
-        className={classnames('pb_image lazyload blur_up', spacing(props))}
+        className={classnames('pb_image_kit lazyload blur_up', spacing(props))}
         data-src={url}
     />
   )

data/app/pb_kits/playbook/pb_layout/_layout.scss

@@ -35,10 +35,25 @@ $card-border-radius: $border_rad_lightest;
       display: grid;
       width: 100%;
       height: 100%;
+      padding: $space_lg;
       grid-template-areas: 
       "side-bar collection";
       grid-template-columns: .25fr 1fr;
       grid-column-gap: $space_sm;
+      div.layout_body{
+        @media screen and (min-width: $screen-md-min) {
+        margin-left: $space_md;        
+        }
+        @media screen and (max-width: $screen-lg-min) {
+          grid-template-columns: repeat(3, 1fr);
+        }
+        @media screen and (max-width: $screen-md-min) {
+          grid-template-columns: repeat(2, 1fr) !important;
+        }
+         @media screen and (max-width: $screen-xs-min) {
+          grid-template-columns: repeat(1, 1fr) !important;
+        }
+      }
 
       @media screen and (max-width: $screen-md-min) {
         grid-template-areas: "side-bar"
@@ -46,6 +61,7 @@ $card-border-radius: $border_rad_lightest;
         grid-template-columns: 1fr;
         grid-row-gap: $space_sm;
       }
+      
   }
 
   &[class*=_kanban]{

data/app/pb_kits/playbook/pb_legend/_legend.html.erb

@@ -1,4 +1,5 @@
 <%= content_tag(:div, object.text,
+    aria: object.aria,
     id: object.id,
     data: object.data,
     class: object.classname) do %>

data/app/pb_kits/playbook/pb_legend/_legend.jsx

@@ -2,12 +2,14 @@
 
 import React from 'react'
 import classnames from 'classnames'
-import { buildCss } from '../utilities/props'
+import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
 import { spacing } from '../utilities/spacing.js'
 
 import { Body, Title } from '../'
 
 type LegendProps = {
+  aria?: object,
+  className?: String,
   color?: | "data_1"
     | "data_2"
     | "data_3"
@@ -16,20 +18,39 @@ type LegendProps = {
     | "data_6"
     | "data_7",
   dark?: Boolean,
+  data?: object,
+  id?: String,
   prefixText?: String,
   text: String,
 }
 
 const Legend = (props: LegendProps) => {
-  const { color = 'data_1', dark = false, prefixText, text } = props
+  const {
+    aria = {},
+    className,
+    color = 'data_1',
+    dark = false,
+    data = {},
+    id,
+    prefixText,
+    text,
+  } = props
+
+  const ariaProps = buildAriaProps(aria)
+  const dataProps = buildDataProps(data)
   const darkClass = dark ? 'dark' : 'light'
   const bodyCSS = classnames(
-    buildCss('pb_legend_kit', color, darkClass),
+    buildCss('pb_legend_kit', color, darkClass), className,
     spacing(props)
   )
 
   return (
-    <div className={bodyCSS}>
+    <div
+        {...ariaProps}
+        {...dataProps}
+        className={bodyCSS}
+        id={id}
+    >
       <Body color={dark ? 'lighter' : 'light'}>
         <span className="pb_legend_indicator_circle" />
         <If condition={prefixText}>

data/app/pb_kits/playbook/pb_nav/_item.jsx

@@ -32,21 +32,31 @@ const NavItem = ({
           onClick={onClick}
       >
         <If condition={iconLeft}>
-          <Icon
-              className="pb_nav_list_item_icon_left"
-              fixedWidth
-              icon={iconLeft}
-          />
+          <div
+              className="pb_nav_list_item_icon_section"
+              key={iconLeft}
+          >
+            <Icon
+                className="pb_nav_list_item_icon_left"
+                fixedWidth
+                icon={iconLeft}
+            />
+          </div>
         </If>
         <span className="pb_nav_list_item_text">
           {text || children}
         </span>
         <If condition={iconRight}>
-          <Icon
-              className="pb_nav_list_item_icon_right"
-              fixedWidth
-              icon={iconRight}
-          />
+          <div
+              className="pb_nav_list_item_icon_section"
+              key={iconRight}
+          >
+            <Icon
+                className="pb_nav_list_item_icon_right"
+                fixedWidth
+                icon={iconRight}
+            />
+          </div>
         </If>
       </Tag>
     </li>

data/app/pb_kits/playbook/pb_nav/_vertical_nav.scss

@@ -32,6 +32,7 @@ $selector: ".pb_nav_list";
           }
           [class*=_item_text] {
             color: $primary;
+            font-weight: $bold;
           }
         }
       }
@@ -90,6 +91,7 @@ $selector: ".pb_nav_list";
         text-decoration: none;
         display: flex;
         align-items: center;
+        border: none;
         padding: $space_xs ($space_sm - 2px);
         transition-property: color, background-color;
         transition-duration: 0.15s;
@@ -106,6 +108,7 @@ $selector: ".pb_nav_list";
         }
         [class*=_text] {
           flex: 1;
+          font-weight: $regular;
         }
         &:hover {
           background-color: rgba($primary, 0.03);

data/app/pb_kits/playbook/pb_popover/_popover.html.erb

@@ -3,7 +3,7 @@
   data: object.data,
   class: object.classname) do %>
     <div class="pb_popover_tooltip" id="<%= object.tooltip_id %>" role="tooltip" style="<%= object.z_index_helper %>">
-      <div class="pb_popover_body <%= object.popover_spacing_helper %>" style="<%= object.width_height_helper %>">
+      <div class="pb_popover_body <%= object.width_height_class_helper %> <%= object.popover_spacing_helper %>" style="<%= object.width_height_helper %>">
         <%= capture(&object.children) %>
       </div>
     </div>