playbook_ui 7.0.1.pre.alpha15 → 7.0.1

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

@@ -0,0 +1,11 @@
+<div class="pb--doc-demo-row">
+  <div>
+    <%= pb_rails("button_toolbar", props: { orientation: "vertical", connected: true }) do %>
+      <%= pb_rails("button", props: { text: "Field" }) %>
+      <%= pb_rails("button", props: { text: "Retail"}) %>
+      <%= pb_rails("button", props: { text: "Event"}) %>
+      <%= pb_rails("button", props: { text: "Training"}) %>
+      <%= pb_rails("button", props: { text: "Not Working"}) %>
+    <% end %>
+  </div>
+</div>

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

@@ -0,0 +1,29 @@
+import React from 'react'
+import { Button, ButtonToolbar } from '../..'
+
+const ButtonToolbarVertical = () => (
+  <div>
+    <ButtonToolbar
+        connected
+        orientation="vertical"
+    >
+      <Button
+          text="Field"
+      />
+      <Button
+          text="Retail"
+      />
+      <Button
+          text="Event"
+      />
+      <Button
+          text="Training"
+      />
+      <Button
+          text="Not Working"
+      />
+    </ButtonToolbar>
+  </div>
+)
+
+export default ButtonToolbarVertical

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

@@ -0,0 +1,11 @@
+<div class="pb--doc-demo-row">
+  <div>
+    <%= pb_rails("button_toolbar", props: { orientation: "vertical", 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>
+</div>

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

@@ -0,0 +1,34 @@
+import React from 'react'
+import { Button, ButtonToolbar } from '../..'
+
+const ButtonToolbarVerticalSecondary = () => (
+  <div>
+    <ButtonToolbar
+        connected
+        orientation="vertical"
+    >
+      <Button
+          text="Field"
+          variant="secondary"
+      />
+      <Button
+          text="Retail"
+          variant="secondary"
+      />
+      <Button
+          text="Event"
+          variant="secondary"
+      />
+      <Button
+          text="Training"
+          variant="secondary"
+      />
+      <Button
+          text="Not Working"
+          variant="secondary"
+      />
+    </ButtonToolbar>
+  </div>
+)
+
+export default ButtonToolbarVerticalSecondary

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

@@ -1,11 +1,15 @@
 examples:
   
   rails:
-  - button_toolbar_default: Default
-  - button_toolbar_secondary: Secondary
+  - 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
   
   
   react:
   - button_toolbar_default: Default
-  - button_toolbar_secondary: Secondary
+  - button_toolbar_vertical: Vertical Button Toolbar
+  - button_toolbar_secondary: Horizontal Secondary Button Toolbar
+  - button_toolbar_vertical_secondary: Vertical Secondary Button Toolbar
   

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

@@ -1,2 +1,4 @@
 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,7 +1,5 @@
-<%= 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 %>
+<%= content_tag(object.tag, object.text,
+    id: object.id,
+    data: object.data,
+    class: object.classname,
+    aria: object.aria) %>

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

@@ -1,7 +1,5 @@
 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,3 +1,2 @@
 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,7 +15,8 @@
           label: object.hide_label ? nil : object.label,
           name: object.name,
           placeholder: object.placeholder,
-          required: object.required
+          required: object.required,
+          type: object.type
         }) %>
         <% if !object.hide_icon %>
           <div

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

@@ -62,7 +62,8 @@ const DatePicker = (props: DatePickerProps) => {
     name,
     onChange = () => {},
     pickerId,
-    placeholder = 'Select Date',
+    placeholder,
+    type,
     yearRange = [ 1900, 2100 ],
   } = props
 
@@ -127,6 +128,7 @@ 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,
-                         default: "Select Date"
+      prop :placeholder, type: Playbook::Props::String
       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,7 +65,6 @@ 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,9 +11,8 @@ const datePickerHelper = (config) => {
     maxDate,
     minDate,
     mode,
-    onChange = () => {},
+    onChange,
     pickerId,
-    required,
     yearRange,
   } = config
 
@@ -22,10 +21,20 @@ const datePickerHelper = (config) => {
   // ===========================================================
 
   const defaultDateGetter = () => {
-    if (defaultDate === '') {
-      return null
-    } else {
-      return defaultDate
+    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]
     }
   }
   const disabledParser = () => {
@@ -94,9 +103,7 @@ const datePickerHelper = (config) => {
     onChange: [(selectedDates, dateStr) => {
       onChange(dateStr, selectedDates)
     }],
-    onYearChange: [() => {
-      yearChangeHook()
-    }],
+    onYearChange: [],
     prevArrow: '<i class="far fa-angle-left"></i>',
     static: true,
   })
@@ -118,7 +125,7 @@ const datePickerHelper = (config) => {
     years += `<option value="${year}">${year}</option>`
   }
 
-  // variablize each dropdown selector
+  // variablize each dropdown selecttor
   const dropdown = document.querySelector(`#year-${pickerId}`)
 
   // inject year options into dropdown and assign it the flatpickr's current year value
@@ -130,42 +137,33 @@ 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>')
 
-  // Remove readonly attribute for validation and or text input
+  // 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
+    }
+  })
   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_allow_input.html.erb

@@ -0,0 +1,4 @@
+<%= pb_rails("date_picker", props: {
+  allow_input: true,
+  picker_id: "date-picker-read-only"
+}) %>

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

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

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

@@ -0,0 +1 @@
+By default the date picker input can only be modified by picking a date on the calendar.  This prop allows your users to manually type in the date.

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

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

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

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

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

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

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

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

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

@@ -1,23 +1,19 @@
 <%= 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"
 }) %>

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

@@ -4,22 +4,18 @@ import { DatePicker } from '../../'
 const DatePickerFormat = () => (
   <div>
     <DatePicker
-        defaultDate={new Date()}
         format="m-d-Y"
         pickerId="date-picker-format1"
     />
     <DatePicker
-        defaultDate={new Date()}
         format="m/d/y"
         pickerId="date-picker-format2"
     />
     <DatePicker
-        defaultDate={new Date()}
         format="n-j-y"
         pickerId="date-picker-format3"
     />
     <DatePicker
-        defaultDate={new Date()}
         format="Y-d-m"
         pickerId="date-picker-format4"
     />

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

@@ -1,26 +1,26 @@
 <%= pb_rails("date_picker", props: {
   input_aria: { label: "input-field" },
   input_data: { key: "value", key2: "value2" },
-  label: "Aria, Name, and Data Attributes",
   name: "date-field",
   picker_id: "date-picker-input1",
+  type: "date"
 }) %>
 
 <%= pb_rails("date_picker", props: {
-  label: "Custom Placeholder",
+  default_date: "blank",
   picker_id: "date-picker-input2",
-  placeholder: "custom-placeholder",
+  placeholder: "Select Date",
 }) %>
 
 <%= pb_rails("date_picker", props: {
-  label: "Blank Placeholder",
+  default_date: "blank",
+  disable_input: true,
   picker_id: "date-picker-input3",
-  placeholder: ""
+  placeholder: "Disabled Input"
 }) %>
 
 <%= pb_rails("date_picker", props: {
-  disable_input: true,
-  label: "Disable Input",
-  picker_id: "date-picker-input4",
-  placeholder: "Disabled Input"
+  dark: true,
+  hide_label: true,
+  picker_id: "date-picker-input4"
 }) %>