playbook_ui 7.0.1.pre.alpha14 → 7.0.1.pre.alpha15

data/app/pb_kits/playbook/pb_button_toolbar/docs/_button_toolbar_default.jsx

@@ -1,26 +1,49 @@
 import React from 'react'
 import { Button, ButtonToolbar } from '../..'
 
-const ButtonToolbarDefault = () => (
-  <div>
+const ButtonToolbarDefault = (props) => (
+  <div className="pb--doc-demo-row">
     <ButtonToolbar
-        connected
-        orientation="horizontal"
+        {...props}
+        orientation="vertical"
     >
       <Button
-          text="Field"
+          {...props}
+          text="Create"
+      />
+      <Button
+          {...props}
+          text="Edit"
+      />
+      <Button
+          {...props}
+          text="Copy"
+      />
+      <Button
+          {...props}
+          text="Cut"
       />
+    </ButtonToolbar>
+
+    <ButtonToolbar
+        {...props}
+        orientation="horizontal"
+    >
       <Button
-          text="Retail"
+          {...props}
+          text="Create"
       />
       <Button
-          text="Event"
+          {...props}
+          text="Edit"
       />
       <Button
-          text="Training"
+          {...props}
+          text="Copy"
       />
       <Button
-          text="Not Working"
+          {...props}
+          text="Cut"
       />
     </ButtonToolbar>
   </div>

data/app/pb_kits/playbook/pb_button_toolbar/docs/_button_toolbar_secondary.html.erb

@@ -1,7 +1,18 @@
-<%= pb_rails("button_toolbar", props: { orientation: "horizontal", connected: true }) do %>
-    <%= pb_rails("button", props: { text: "Field", variant: "secondary" }) %>
-    <%= pb_rails("button", props: { text: "Retail", variant: "secondary"}) %>
-    <%= pb_rails("button", props: { text: "Event", variant: "secondary"}) %>
-    <%= pb_rails("button", props: { text: "Training", variant: "secondary"}) %>
-    <%= pb_rails("button", props: { text: "Not Working", variant: "secondary"}) %>
-  <% end %>
+
+<div class="pb--doc-demo-row">
+
+  <%= pb_rails("button_toolbar", props: { orientation: "vertical", variant: "secondary" }) do %>
+    <%= pb_rails("button", props: { text: "Create", variant: "secondary" }) %>
+    <%= pb_rails("button", props: { text: "Edit", variant: "secondary" }) %>
+    <%= pb_rails("button", props: { text: "Copy", variant: "secondary" }) %>
+    <%= pb_rails("button", props: { text: "Cut", variant: "secondary" }) %>
+  <% end %>
+
+  <%= pb_rails("button_toolbar", props: { orientation: "horizontal", variant: "secondary" }) do %>
+    <%= pb_rails("button", props: { text: "Create", variant: "secondary" }) %>
+    <%= pb_rails("button", props: { text: "Edit", variant: "secondary" }) %>
+    <%= pb_rails("button", props: { text: "Copy", variant: "secondary" }) %>
+    <%= pb_rails("button", props: { text: "Cut", variant: "secondary" }) %>
+  <% end %>
+
+</div>

data/app/pb_kits/playbook/pb_button_toolbar/docs/_button_toolbar_secondary.jsx

@@ -1,30 +1,58 @@
 import React from 'react'
 import { Button, ButtonToolbar } from '../..'
 
-const ButtonToolbarSecondary = () => (
-  <div>
+const ButtonToolbarSecondary = (props) => (
+  <div className="pb--doc-demo-row">
     <ButtonToolbar
-        connected
-        orientation="horizontal"
+        {...props}
+        orientation="vertical"
+        variant="secondary"
     >
       <Button
-          text="Field"
+          {...props}
+          text="Create"
+          variant="secondary"
+      />
+      <Button
+          {...props}
+          text="Edit"
           variant="secondary"
       />
       <Button
-          text="Retail"
+          {...props}
+          text="Copy"
+          variant="secondary"
+      />
+      <Button
+          {...props}
+          text="Cut"
+          variant="secondary"
+      />
+    </ButtonToolbar>
+
+    <ButtonToolbar
+        {...props}
+        orientation="horizontal"
+        variant="secondary"
+    >
+      <Button
+          {...props}
+          text="Create"
           variant="secondary"
       />
       <Button
-          text="Event"
+          {...props}
+          text="Edit"
           variant="secondary"
       />
       <Button
-          text="Training"
+          {...props}
+          text="Copy"
           variant="secondary"
       />
       <Button
-          text="Not Working"
+          {...props}
+          text="Cut"
           variant="secondary"
       />
     </ButtonToolbar>

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

@@ -1,15 +1,11 @@
 examples:
   
   rails:
-  - button_toolbar_default: Horizontal Button Toolbar
-  - button_toolbar_vertical: Vertical Button Toolbar
-  - button_toolbar_secondary: Horizontal Secondary Button Toolbar
-  - button_toolbar_vertical_secondary: Vertical Secondary Button Toolbar
+  - button_toolbar_default: Default
+  - button_toolbar_secondary: Secondary
   
   
   react:
   - button_toolbar_default: Default
-  - button_toolbar_vertical: Vertical Button Toolbar
-  - button_toolbar_secondary: Horizontal Secondary Button Toolbar
-  - button_toolbar_vertical_secondary: Vertical Secondary Button Toolbar
+  - button_toolbar_secondary: Secondary
   

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

@@ -1,4 +1,2 @@
 export { default as ButtonToolbarDefault } from './_button_toolbar_default.jsx'
-export { default as ButtonToolbarVertical } from './_button_toolbar_vertical.jsx'
 export { default as ButtonToolbarSecondary } from './_button_toolbar_secondary.jsx'
-export { default as ButtonToolbarVerticalSecondary } from './_button_toolbar_vertical_secondary.jsx'

data/app/pb_kits/playbook/pb_caption/_caption.html.erb

@@ -1,5 +1,7 @@
-<%= content_tag(object.tag, object.text,
-    id: object.id,
-    data: object.data,
-    class: object.classname,
-    aria: object.aria) %>
+<%= content_tag(object.tag,
+  aria: object.aria,
+  id: object.id,
+  data: object.data,
+  class: object.classname) do %>
+  <%= object.children.present? ? capture(&object.children) : object.text %>
+<% end %>

data/app/pb_kits/playbook/pb_caption/docs/_caption_block.html.erb

@@ -0,0 +1,11 @@
+<%= pb_rails("caption") do %>
+  Block
+<% end %>
+
+<%= pb_rails("caption", props: { size: 'lg' }) do %>
+  Large Block
+<% end %>
+
+<%= pb_rails("caption", props: { size: 'xs' }) do %>
+  Subcaption Block
+<% end %>

data/app/pb_kits/playbook/pb_caption/docs/_caption_block.jsx

@@ -0,0 +1,28 @@
+import React from 'react'
+import { Caption } from '../../'
+
+const CaptionBlock = (props) => {
+  return (
+    <div>
+      <Caption {...props}>
+        {'Block'}
+      </Caption>
+
+      <Caption
+          {...props}
+          size="lg"
+      >
+        {'Large Block'}
+      </Caption>
+
+      <Caption
+          {...props}
+          size="xs"
+      >
+        {'Subcaption Block'}
+      </Caption>
+    </div>
+  )
+}
+
+export default CaptionBlock

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

@@ -1,5 +1,7 @@
 examples:
   rails:
   - caption_light: Default
+  - caption_block: Block
   react:
   - caption_light: Default
+  - caption_block: Block

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

@@ -1,2 +1,3 @@
 export { default as CaptionLight } from './_caption_light.jsx'
 export { default as CaptionVariants } from './_caption_variants.jsx'
+export { default as CaptionBlock } from './_caption_block.jsx'

data/app/pb_kits/playbook/pb_date_picker/_date_picker.html.erb

@@ -15,8 +15,7 @@
           label: object.hide_label ? nil : object.label,
           name: object.name,
           placeholder: object.placeholder,
-          required: object.required,
-          type: object.type
+          required: object.required
         }) %>
         <% if !object.hide_icon %>
           <div

data/app/pb_kits/playbook/pb_date_picker/_date_picker.jsx

@@ -62,8 +62,7 @@ const DatePicker = (props: DatePickerProps) => {
     name,
     onChange = () => {},
     pickerId,
-    placeholder,
-    type,
+    placeholder = 'Select Date',
     yearRange = [ 1900, 2100 ],
   } = props
 
@@ -128,7 +127,6 @@ const DatePicker = (props: DatePickerProps) => {
             label={hideLabel ? null : label}
             name={name}
             placeholder={placeholder}
-            type={type}
         />
         <If condition={!hideIcon}>
           <div

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

@@ -41,10 +41,10 @@ module Playbook
                   default: "single"
       prop :picker_id, type: Playbook::Props::String,
                        required: true
-      prop :placeholder, type: Playbook::Props::String
+      prop :placeholder, type: Playbook::Props::String,
+                         default: "Select Date"
       prop :required, type: Playbook::Props::Boolean,
                       default: false
-      prop :type, type: Playbook::Props::String
       prop :year_range, type: Playbook::Props::Array,
                         default: [1900, 2100]
 
@@ -65,6 +65,7 @@ module Playbook
           minDate: min_date,
           mode: mode,
           pickerId: picker_id,
+          required: required,
           yearRange: year_range,
         }.to_json.html_safe
       end

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

@@ -11,8 +11,9 @@ const datePickerHelper = (config) => {
     maxDate,
     minDate,
     mode,
-    onChange,
+    onChange = () => {},
     pickerId,
+    required,
     yearRange,
   } = config
 
@@ -21,20 +22,10 @@ const datePickerHelper = (config) => {
   // ===========================================================
 
   const defaultDateGetter = () => {
-    if (defaultDate !== '') {
-      if (defaultDate === 'blank') {
-        return ''
-      } else {
-        return defaultDate
-      }
-    }
-    if (mode === 'single' && defaultDate === '') {
-      return new Date()
-    } else if (mode === 'range' && defaultDate === '') {
-      const today = new Date()
-      const tomorrow = new Date(today)
-      tomorrow.setDate(tomorrow.getDate() + 1)
-      return [today, tomorrow]
+    if (defaultDate === '') {
+      return null
+    } else {
+      return defaultDate
     }
   }
   const disabledParser = () => {
@@ -103,7 +94,9 @@ const datePickerHelper = (config) => {
     onChange: [(selectedDates, dateStr) => {
       onChange(dateStr, selectedDates)
     }],
-    onYearChange: [],
+    onYearChange: [() => {
+      yearChangeHook()
+    }],
     prevArrow: '<i class="far fa-angle-left"></i>',
     static: true,
   })
@@ -125,7 +118,7 @@ const datePickerHelper = (config) => {
     years += `<option value="${year}">${year}</option>`
   }
 
-  // variablize each dropdown selecttor
+  // variablize each dropdown selector
   const dropdown = document.querySelector(`#year-${pickerId}`)
 
   // inject year options into dropdown and assign it the flatpickr's current year value
@@ -137,33 +130,42 @@ const datePickerHelper = (config) => {
     picker.changeYear(Number(e.target.value))
   })
 
+  // Reverse month and year dropdown reset on form.reset()
+  if (picker.input.form) {
+    picker.input.form.addEventListener('reset', () => {
+      // Code block triggers after form.reset() is called and executed
+      setTimeout(() => {
+        dropdown.value = picker.currentYear
+        picker.monthsDropdownContainer.value = picker.currentMonth
+
+        /* Reset date picker to default value on form.reset() */
+        if (defaultDate){
+          picker.setDate(defaultDate)
+          yearChangeHook()
+        }
+      }, 0)
+    })
+  }
+
   // two way binding
   const yearChangeHook = () => {
     dropdown.value = picker.currentYear
   }
-  picker.config.onYearChange.push(yearChangeHook)
 
   // Adding dropdown icons to year and month selects
   picker.monthElements[0].insertAdjacentHTML('afterend', '<i class="far fa-angle-down month-dropdown-icon"></i>')
   dropdown.insertAdjacentHTML('afterend', '<i class="far fa-angle-down year-dropdown-icon" id="test-id"></i>')
 
-  // Set input value attribute on page load
-  picker.input.setAttribute('value', picker.input.value)
-  // logic for updating value when typing
-  document.querySelector(`#${pickerId}`).addEventListener('input', (e) => {
-    picker.input.setAttribute('value', e.target.value)
-    const variant = picker.config.mode
-    if (variant === 'single' && e.target.value.split('').length === 10) {
-      picker.setDate(e.target.value)
-      dropdown.value = picker.currentYear
-    } else if (variant === 'range' && e.target.value.split('').length === 24) {
-      picker.setDate(e.target.value)
-      dropdown.value = picker.currentYear
-    }
-  })
+  // Remove readonly attribute for validation and or text input
   if (allowInput){
     picker.input.removeAttribute('readonly')
   }
+  if (required){
+    picker.input.removeAttribute('readonly')
+    picker.input.addEventListener('keydown', (e) => e.preventDefault())
+    picker.input.style.caretColor = 'transparent'
+    picker.input.style.cursor = 'pointer'
+  }
 }
 
 export default datePickerHelper

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

@@ -18,7 +18,6 @@
 }) %>
 
 <%= pb_rails("date_picker", props: {
-  default_date: "blank",
-  label: "Blank",
+  label: "Default Behavior",
   picker_id: "date-picker-default-date4"
 }) %>

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

@@ -20,8 +20,7 @@ const DatePickerDefaultDate = () => (
         pickerId="date-picker-default-date3"
     />
     <DatePicker
-        defaultDate="blank"
-        label="Blank"
+        label="Default Behavior"
         pickerId="date-picker-default-date4"
     />
   </div>

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default_date.md

@@ -0,0 +1 @@
+The `defaultDate`/`default_date` prop has a null or empty string value by default.  You can pass a string or date object if you want a default value on page load.

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

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