playbook_ui 7.0.0.pre.alpha11 → 7.0.0.pre.alpha12

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: e23c8fdddf3856d91cd2669f81dfeb607eb5cdd8eb78036ee8d25f369789cd86
-  data.tar.gz: 644b79c7f3e469781e44390f426f889919ac950aa21cf441d477bd2302d1898c
+  metadata.gz: 94ac0232046d608bf8ae158596a7734d1b67f23fb91b1c64b30baede6f4ad758
+  data.tar.gz: eed40c32073db9ff048cb4c7b965dbef077058dacaff858e9a753da281fcf881
 SHA512:
-  metadata.gz: 73a27538028125d8e714c9c7e61536a190f9dbcf84178b405d7b47d44d20f3656b6cf5f0024fcc6b13794293f4704883bccd6f34838d814780f9449929ffa99d
-  data.tar.gz: d2058ae5504a9ce734f94fccd9ae69096dbb1683f4096e4db14416aa7bfb207c9700002d748d4f8ffba72492e35e280e5787cbe7f04f0c92a027c2b69f8b28e7
+  metadata.gz: ea8f2b075e31b0bdc0cf3d9dea2b386912492c3d046095e86775e6b54e8368f3af077446962cb0cdf8ba06046ee5d7153cc354cf331f6dd8bc3308888dff529c
+  data.tar.gz: 771928c8397ce43f9f038b9d64c8e358e1380e7f41fa51770df2742ccef8aee5de38dbd9cf0ec139accf029be26d8d7db8baacda51b7efcb5fc1efaf7845537b

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

@@ -3,21 +3,25 @@
     class: object.classname + object.error_class,
     data: object.data,
     id: object.id) do %>
-      <div class="input_wrapper">
-        <%= pb_rails("text_input", props: {
-          aria: object.input_aria,
-          autocomplete: false,
-          dark: object.dark,
-          data: object.input_data,
-          disabled: object.disable_input,
-          error: object.error,
-          id: object.picker_id,
-          label: object.hide_label ? nil : object.label,
-          name: object.name,
-          placeholder: object.placeholder,
-          required: object.required,
-          type: object.type
-        }) %>
+      <% if object.children %>
+        <div class="input_wrapper">
+          <%= capture(&object.children) %>
+      <% else %>
+        <div class="input_wrapper">
+          <%= pb_rails("text_input", props: {
+            aria: object.input_aria,
+            autocomplete: false,
+            dark: object.dark,
+            data: object.input_data,
+            disabled: object.disable_input,
+            error: object.error,
+            id: object.picker_id,
+            label: object.hide_label ? nil : object.label,
+            name: object.name,
+            placeholder: object.placeholder,
+            required: object.required,
+          }) %>
+        <% end %>
         <% if !object.hide_icon %>
           <div
               class="<%= object.icon_wrapper_class %>"

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]
 

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

@@ -11,7 +11,7 @@ const datePickerHelper = (config) => {
     maxDate,
     minDate,
     mode,
-    onChange,
+    onChange = () => {},
     pickerId,
     yearRange,
   } = config
@@ -21,20 +21,25 @@ 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 !== '') {
+  //     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 = () => {
@@ -102,7 +107,11 @@ const datePickerHelper = (config) => {
     }],
     onChange: [(selectedDates, dateStr) => {
       onChange(dateStr, selectedDates)
-    }],
+    },
+    (selectedDates, dateStr) => {
+      updateValueOnChange(dateStr)
+    },
+    ],
     onYearChange: [],
     prevArrow: '<i class="far fa-angle-left"></i>',
     static: true,
@@ -161,6 +170,10 @@ const datePickerHelper = (config) => {
       dropdown.value = picker.currentYear
     }
   })
+  // Update input value attribute on Change
+  const updateValueOnChange = (pickerValue) => {
+    picker.input.setAttribute('value', pickerValue)
+  }
   if (allowInput){
     picker.input.removeAttribute('readonly')
   }

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>
 )

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

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

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

@@ -1,4 +1,5 @@
 <%= 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,6 +4,7 @@ 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_form/docs/_form_form_with.html.erb

@@ -33,7 +33,7 @@
     name: "checkbox-name",
     class: "checkbox-class" 
   %>
-  <%= form.date_picker :example_date_picker1, props: { default_date: "blank" } %>
+  <%= form.date_picker :example_date_picker1, props: { default_date: "blank", label: true } %>
 
   <%= 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_picker2, props: { default_date: 'blank', required: true } %>
+  <%= form.date_picker :example_date_picker2, props: { default_date: 'blank', required: true, label: "hello-label" } %>
 
   <%= form.actions do |action| %>
     <%= action.submit %>

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

@@ -14,13 +14,24 @@
     :example_text_area,
     :example_select_field,
     :example_collection_select_field,
-    :example_checkbox_field
-    :example_date_picker_field1
+    :example_checkbox_field,
+    :example_checkbox_field_2,
+    :example_date_picker_field_1,
+    :example_date_picker_field_3
+
+    # for local testing only
+    # will be removed before merging
+    def initialize
+      # @example_number_field = 123
+      @example_date_picker_field_1 = "10/02/1993"
+      @example_date_picker_field_3 = Date.today.httpdate
+    end
 
 
     def self.model_name
       ActiveModel::Name.new(self, nil, "ExampleFormModel")
     end
+
   end
 %>
 
@@ -41,6 +52,7 @@
 
 
 <%= pb_rails("form", props: { form_system: "simple_form", form_system_options: [example_form_model.new, url: "", method: :get] }) do |form| %>
+
   <%= form.input :example_text_field, as: :string %>
   <%= form.input :example_phone_field, as: :tel %>
   <%= form.input :example_email_field, as: :email %>
@@ -52,7 +64,9 @@
   <%= 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_field1, props: { default_date: 'blank' } %>
+  <%= form.check_box :example_checkbox_field_2, 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_field_3, props: { default_date: 'blank', label: true } %>
 
   <%= 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_field2
+    :example_checkbox_field,
+    :example_date_picker_field_2
 
 
     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_field2, props: { default_date: 'blank', required: true } %>
+  <%= form.date_picker :example_date_picker_field_2, 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

@@ -11,10 +11,41 @@ module Playbook
 
           props[:name] = html_attribute_name
           props[:picker_id] = html_id
+          props[:label] = @template.label(@object_name, name) if props[:label] == true
 
-          @template.pb_rails("date_picker", props: props)
+          puts @object.to_json
+
+          input = text_field(
+            name,
+            autocomplete: "off",
+            disabled: props[:disable_input],
+            data: props[:input_data],
+            aria: props[:input_aria],
+            props: {
+              error: props[:error],
+              label: props[:label],
+              placeholder: props[:placeholder],
+              required: props[:required],
+            }
+          )
+          puts input
+
+          @template.pb_rails("date_picker", props: props) do
+            input
+          end
         end
       end
     end
   end
 end
+
+# Create text input with rails form helper
+# pass options to text input
+
+# add hidden, implicit prop identifying it as form helper
+# inside dp erb, create conditional if check to leave out text_input kit
+
+# pass that input as a block to @template.pb_rails("date_picker")
+# let rails do the magic
+
+# null value handling

data/lib/playbook/version.rb

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

data/lib/tasks/pb_release.rake

@@ -62,10 +62,14 @@ namespace :pb_release do
     `rm -rf playbook_ui-*.gem`
 
     # NPM
+    puts "\nGenerating distribution files"
+    `docker-compose run web yarn release`
+    puts "\nOrganizing distribution files"
+    `rm dist/playbook-rails.css && mv dist/playbook-react.css dist/playbook.css`
     puts "\nCreating NPM package..."
     `npm pack`
     puts "\nPublishing to NPM..."
-    `npm publish`
+    `npm publish playbook-ui-#{version}.tgz`
     puts "\nPublished to NPM. Now lets clean up..."
     `rm -rf playbook-ui-*.tgz`
 

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 7.0.0.pre.alpha11
+  version: 7.0.0.pre.alpha12
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2020-09-29 00:00:00.000000000 Z
+date: 2020-10-06 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -689,6 +689,7 @@ files:
 - 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
@@ -1855,8 +1856,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: 1.3.1
 requirements: []
-rubyforge_project: 
-rubygems_version: 2.7.3
+rubygems_version: 3.1.4
 signing_key: 
 specification_version: 4
 summary: Playbook Design System