playbook_ui 7.0.0.pre.alpha10 → 7.0.0.pre.alpha15

data/app/pb_kits/playbook/pb_currency/docs/_currency_medium.jsx

@@ -1,15 +1,17 @@
 import React from 'react'
 import { Currency } from '../../'
 
-const CurrencyMedium = () => {
+const CurrencyMedium = (props) => {
   return (
     <>
       <Currency
+          {...props}
           amount="2,000.50"
           label="Caption"
           size="md"
       />
       <Currency
+          {...props}
           align="center"
           amount="342"
           label="Caption"
@@ -17,6 +19,7 @@ const CurrencyMedium = () => {
           symbol="€"
       />
       <Currency
+          {...props}
           align="right"
           amount="45"
           label="Caption"

data/app/pb_kits/playbook/pb_currency/docs/_currency_small.jsx

@@ -1,15 +1,17 @@
 import React from 'react'
 import { Currency } from '../../'
 
-const CurrencySmall = () => {
+const CurrencySmall = (props) => {
   return (
     <>
       <Currency
+          {...props}
           amount="2,000.50"
           label="Caption"
           size="sm"
       />
       <Currency
+          {...props}
           align="center"
           amount="342"
           label="Caption"
@@ -17,6 +19,7 @@ const CurrencySmall = () => {
           symbol="€"
       />
       <Currency
+          {...props}
           align="right"
           amount="45"
           label="Caption"

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

@@ -4,9 +4,8 @@ examples:
   - currency_small: Small
   - currency_medium: Medium
   - currency_large: Large
-  - currency_dark: Dark
+
   react:
   - currency_small: Small
   - currency_medium: Medium
   - currency_large: Large
-  - currency_dark: Dark

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

@@ -1,4 +1,3 @@
 export { default as CurrencySmall } from './_currency_small.jsx'
 export { default as CurrencyLarge } from './_currency_large.jsx'
 export { default as CurrencyMedium } from './_currency_medium.jsx'
-export { default as CurrencyDark } from './_currency_dark.jsx'

data/app/pb_kits/playbook/pb_dashboard_value/_dashboard_value.jsx

@@ -41,7 +41,11 @@ const DashboardValue = (props: DashboardValueProps) => {
 
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
-  const classes = classnames(buildCss('pb_dashboard_value_kit', align), className, globalProps(props))
+  const classes = classnames(
+    buildCss('pb_dashboard_value_kit', align),
+    globalProps(props),
+    className
+  )
 
   return (
     <div

data/app/pb_kits/playbook/pb_dashboard_value/docs/_dashboard_value_align.jsx

@@ -1,10 +1,11 @@
 import React from 'react'
 import { DashboardValue } from '../../'
 
-const DashboardValueAlign = () => {
+const DashboardValueAlign = (props) => {
   return (
     <div>
       <DashboardValue
+          {...props}
           statChange={{ change: 'decrease', value: '26.1' }}
           statLabel="Top Title Value"
           statValue={{ value: '1,428', unit: 'appts' }}
@@ -14,6 +15,7 @@ const DashboardValueAlign = () => {
       <br />
 
       <DashboardValue
+          {...props}
           align="center"
           statChange={{ change: 'decrease', value: 56.1 }}
           statLabel="Top Title Value"
@@ -24,6 +26,7 @@ const DashboardValueAlign = () => {
       <br />
 
       <DashboardValue
+          {...props}
           align="right"
           statChange={{ change: 'decrease', value: 86 }}
           statLabel="Top Title Value"

data/app/pb_kits/playbook/pb_dashboard_value/docs/_dashboard_value_default.jsx

@@ -1,10 +1,11 @@
 import React from 'react'
 import { DashboardValue } from '../../'
 
-const DashboardValueDefault = () => {
+const DashboardValueDefault = (props) => {
   return (
     <div>
       <DashboardValue
+          {...props}
           statChange={{ change: 'decrease', value: '26.1' }}
           statLabel="Decreased Value"
           statValue={{ value: '1,428', unit: 'appts' }}
@@ -14,6 +15,7 @@ const DashboardValueDefault = () => {
       <br />
 
       <DashboardValue
+          {...props}
           statChange={{ change: 'increase', value: 56.1 }}
           statLabel="Increased Value"
           statValue={{ value: '938', unit: 'homes' }}
@@ -23,6 +25,7 @@ const DashboardValueDefault = () => {
       <br />
 
       <DashboardValue
+          {...props}
           statChange={{ value: 86 }}
           statLabel="Neutral Value"
           statValue={{ value: '261', unit: 'windows' }}

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
 
@@ -71,9 +70,9 @@ const DatePicker = (props: DatePickerProps) => {
   const dataProps = buildDataProps(data)
   const classes = classnames(
     buildCss('pb_date_picker_kit'),
-    className,
     globalProps(props),
     error ? 'error' : null,
+    className
   )
 
   useEffect(() => {
@@ -88,6 +87,7 @@ const DatePicker = (props: DatePickerProps) => {
       maxDate: maxDate,
       minDate: minDate,
       mode: mode,
+      onChange: onChange,
       pickerId: pickerId,
       yearRange: yearRange,
     })
@@ -126,9 +126,7 @@ const DatePicker = (props: DatePickerProps) => {
             id={pickerId}
             label={hideLabel ? null : label}
             name={name}
-            onChange={onChange}
             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,7 +11,9 @@ const datePickerHelper = (config) => {
     maxDate,
     minDate,
     mode,
+    onChange = () => {},
     pickerId,
+    required,
     yearRange,
   } = config
 
@@ -20,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 = () => {
@@ -99,7 +91,12 @@ const datePickerHelper = (config) => {
     onClose: [() => {
       window.removeEventListener('resize', calendarResizer)
     }],
-    onYearChange: [],
+    onChange: [(selectedDates, dateStr) => {
+      onChange(dateStr, selectedDates)
+    }],
+    onYearChange: [() => {
+      yearChangeHook()
+    }],
     prevArrow: '<i class="far fa-angle-left"></i>',
     static: true,
   })
@@ -121,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
@@ -133,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"
 }) %>

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

@@ -4,18 +4,22 @@ 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: {
-  default_date: "blank",
+  label: "Custom Placeholder",
   picker_id: "date-picker-input2",
-  placeholder: "Select Date",
+  placeholder: "custom-placeholder",
 }) %>
 
 <%= pb_rails("date_picker", props: {
-  default_date: "blank",
-  disable_input: true,
+  label: "Blank Placeholder",
   picker_id: "date-picker-input3",
-  placeholder: "Disabled Input"
+  placeholder: ""
 }) %>
 
 <%= pb_rails("date_picker", props: {
-  dark: true,
-  hide_label: true,
-  picker_id: "date-picker-input4"
+  disable_input: true,
+  label: "Disable Input",
+  picker_id: "date-picker-input4",
+  placeholder: "Disabled Input"
 }) %>

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

@@ -6,25 +6,25 @@ const DatePickerInput = () => (
     <DatePicker
         inputAria={{ label: 'input-field' }}
         inputData={{ key: 'value', key2: 'value2' }}
+        label="Aria, Name, and Data Attributes"
         name="date-field"
         pickerId="date-picker-input1"
-        type="date"
     />
     <DatePicker
-        defaultDate="blank"
+        label="Custom Placeholder"
         pickerId="date-picker-input2"
-        placeholder="Select Date"
+        placeholder="custom-placeholder"
     />
     <DatePicker
-        defaultDate="blank"
-        disableInput
+        label="Blank Placeholder"
         pickerId="date-picker-input3"
-        placeholder="Disabled Input"
+        placeholder=""
     />
     <DatePicker
-        dark
-        hideLabel
+        disableInput
+        label="Disable Input"
         pickerId="date-picker-input4"
+        placeholder="Disabled Input"
     />
   </div>
 )