playbook_ui 7.0.0.pre.alpha15 → 7.0.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 748e8b8bd2267aeeebe8fa55a3ca6bb5404fbd8d4133b80b22c7bb37217ff9b8
-  data.tar.gz: 011e14d3bf83bdba2ac94c9c719ab0b31ad026616df14c9e79cb0ae62ab932f6
+  metadata.gz: bb42b349eaada511eb34ad28e5941b0de5f2e491b979450744340b94dcce6d14
+  data.tar.gz: 74810184318871129e9ece088f516143a74db76a0f69f9d5a327d1c872f43fc1
 SHA512:
-  metadata.gz: 6962424a2fdb0aafedda050a5dd2620b614107e6744631bd2f36d1be3065f6a27c76e11ceb20261ae2f47ecbcfc35cdaddd3a50cb9441afdf9819a116d3b2682
-  data.tar.gz: 9201beceb3d221d4af35cdf45fffc49fa66c289ded941774ee80bc5bd5876e138cd608b99a0d9a6700bc79e9ab1ed25b90aa27c4d8f4ec4e1d017419f7757b50
+  metadata.gz: 3843d81864f1d56428a211a5f8c9baedc06aee0bb7674a9c513b1297deb36786e76714acad0996a07748b6dc34e3a846473373a57cc853f1cd3d52fba34c6644
+  data.tar.gz: '03822a87e908c2cd21c6911592a26120ace405f613edef75780060bde453ba911f678d33a90063bc0d01f5c06b6f5ef0c9a661d1b1502da18ba767019b343aae'

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"
 }) %>

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
-        label="Custom Placeholder"
+        defaultDate="blank"
         pickerId="date-picker-input2"
-        placeholder="custom-placeholder"
+        placeholder="Select Date"
     />
     <DatePicker
-        label="Blank Placeholder"
+        defaultDate="blank"
+        disableInput
         pickerId="date-picker-input3"
-        placeholder=""
+        placeholder="Disabled Input"
     />
     <DatePicker
-        disableInput
-        label="Disable Input"
+        dark
+        hideLabel
         pickerId="date-picker-input4"
-        placeholder="Disabled Input"
     />
   </div>
 )

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

@@ -1,5 +1,3 @@
 The date picker is built with the text input kit.  Text input props you pass to the date picker kit will be forwarded to the input, with a few exceptions.  The `value` attribute is automatically handled and bound to whatever date string is contained by the input field.  You cannot pass a custom value prop.  `id` props passed to the date picker kit will be assigned to it's parent/wrapper div.  The `pickerId` prop is passed directly to the input and is required to instatiate the date picker.
 
-You must use `inputAria` or `input_aria` and `inputData` or `input_data` props if you wish to pass data or aria attributes to the text input kit.  If you use `data` or `aria` props they will be passed to the date picker kit itself instead.  Also be aware the default behavior of text input aria and data props is to pass those props to attributes on the wrapping div not on the input itself.
-
-The placeholder prop has a default string value: "Select Date".  You can replace this with your own string or an empty string if you'd prefer it blank.
+You must use `inputAria` or `input_aria` and `inputData` or `input_data` props if you wish to pass data or aria attributes to the text input kit.  If you use `data` or `aria` props they will be passed to the date picker kit itself instead.  Also be aware the default behavior of text input aria and data props is to pass those props to attributes on the wrapping div not on the input itself.

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

@@ -1,5 +1,4 @@
 <%= pb_rails("date_picker", props: {
-  default_date: [(Date.today).httpdate, (Date.today + 7).httpdate],
   mode: "range",
   picker_id: "date-picker-range"
 }) %>

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

@@ -4,7 +4,6 @@ import { DatePicker } from '../../'
 const DatePickerRange = () => (
   <div>
     <DatePicker
-        defaultDate={[new Date(), new Date().fp_incr(6)]}
         mode="range"
         pickerId="date-picker-range"
     />

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

@@ -12,7 +12,9 @@ examples:
   - date_picker_min_max: Min Max
   - date_picker_error: Error
   - date_picker_hooks: Hooks
+  # - date_picker_allow_input: Allow Input
   - date_picker_year_range: Year Range
+  - date_picker_dark: Dark
   
   
   react:
@@ -28,5 +30,7 @@ examples:
   - date_picker_min_max: Min Max
   - date_picker_error: Error
   - date_picker_hooks: Hooks
+  # - date_picker_allow_input: Allow Input
   - date_picker_year_range: Year Range
+  - date_picker_dark: Dark
   

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

@@ -10,4 +10,6 @@ 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'
 export { default as DatePickerHooks } from './_date_picker_hooks.jsx'
+// export { default as DatePickerAllowInput } from './_date_picker_allow_input.jsx'
 export { default as DatePickerYearRange } from './_date_picker_year_range.jsx'
+export { default as DatePickerDark } from './_date_picker_dark.jsx'

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

@@ -33,7 +33,7 @@
     name: "checkbox-name",
     class: "checkbox-class" 
   %>
-  <%= form.date_picker :example_date_picker_1, props: { default_date: "blank", label: true } %>
+  <%= form.date_picker :example_date_picker1, props: { default_date: "blank" } %>
 
   <%= form.actions do |action| %>
     <%= action.submit %>

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

@@ -28,7 +28,7 @@
   <%= 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.check_box :example_checkbox, props: { text: "Example Checkbox", label: true, required: true } %>
-  <%= form.date_picker :example_date_picker_2, props: { default_date: 'blank', label: true, required: true } %>
+  <%= form.date_picker :example_date_picker2, props: { default_date: 'blank', required: true } %>
 
   <%= form.actions do |action| %>
     <%= action.submit %>

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

@@ -14,8 +14,8 @@
     :example_text_area,
     :example_select_field,
     :example_collection_select_field,
-    :example_checkbox_field,
-    :example_date_picker_field_1
+    :example_checkbox_field
+    :example_date_picker_field1
 
 
     def self.model_name
@@ -52,7 +52,7 @@
   <%= 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.check_box :example_checkbox_field, props: { text: "Example Checkbox", label: true } %>
-  <%= form.date_picker :example_date_picker_field_1, props: { default_date: 'blank', label: true } %>
+  <%= form.date_picker :example_date_picker_field1, props: { default_date: 'blank' } %>
 
   <%= form.actions do |action| %>
     <%= action.submit %>

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

@@ -14,8 +14,8 @@
     :example_text_area,
     :example_select_field,
     :example_collection_select_field,
-    :example_checkbox_field,
-    :example_date_picker_field_2
+    :example_checkbox_field
+    :example_date_picker_field2
 
 
     def self.model_name
@@ -52,7 +52,7 @@
   <%= 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.check_box :example_checkbox_field, props: { text: "Example Checkbox", label: true, required: true } %>
-  <%= form.date_picker :example_date_picker_field_2, props: { default_date: 'blank', label: true, required: true } %>
+  <%= form.date_picker :example_date_picker_field2, props: { default_date: 'blank', required: true } %>
 
   <%= form.actions do |action| %>
     <%= action.submit %>

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

@@ -8,7 +8,6 @@ module Playbook
           prefix = @object_name
           html_attribute_name = "#{prefix}[#{name}]"
           html_id = "#{prefix}_#{name}"
-          props[:label] = @template.label(@object_name, name) if props[:label] == true
 
           props[:name] = html_attribute_name
           props[:picker_id] = html_id

data/lib/playbook/version.rb

@@ -1,4 +1,4 @@
 # frozen_string_literal: true
 module Playbook
-  VERSION = "7.0.0.pre.alpha15"
+  VERSION = "7.0.0"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 7.0.0.pre.alpha15
+  version: 7.0.0
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2020-10-08 00:00:00.000000000 Z
+date: 2020-09-29 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -680,11 +680,15 @@ files:
 - app/pb_kits/playbook/pb_date_picker/_date_picker.scss
 - app/pb_kits/playbook/pb_date_picker/date_picker.rb
 - app/pb_kits/playbook/pb_date_picker/date_picker_helper.js
+- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_allow_input.html.erb
+- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_allow_input.jsx
+- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_allow_input.md
+- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_dark.html.erb
+- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_dark.jsx
 - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default.html.erb
 - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default.jsx
 - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default_date.html.erb
 - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default_date.jsx
-- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default_date.md
 - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_disabled.html.erb
 - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_disabled.jsx
 - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_error.html.erb
@@ -1847,11 +1851,12 @@ required_ruby_version: !ruby/object:Gem::Requirement
       version: '0'
 required_rubygems_version: !ruby/object:Gem::Requirement
   requirements:
-  - - ">"
+  - - ">="
     - !ruby/object:Gem::Version
-      version: 1.3.1
+      version: '0'
 requirements: []
-rubygems_version: 3.1.4
+rubyforge_project: 
+rubygems_version: 2.7.3
 signing_key: 
 specification_version: 4
 summary: Playbook Design System

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

@@ -1 +0,0 @@
-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.