playbook_ui 7.3.0.pre.alpha1 → 7.3.0.pre.alpha2

data/app/pb_kits/playbook/pb_date/_date.scss

@@ -1,32 +1,2 @@
 @import "../pb_icon/icon";
 @import "../pb_title/title";
-
-[class^=pb_date_kit] {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    > div, .pb_icon_kit_container {
-        margin-right: 4px !important;
-    }
-
-    &[class*=_center] {
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        justify-content: center;
-        margin-right: 4px !important;
-    }
-
-    &[class*=_right] {
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        justify-content: flex-end;
-        margin-left: 4px !important;
-    }
-    &.dark {
-        [class^=pb_title_kit] {
-            color: $text_dk_default !important;
-        }
-    }
-}

data/app/pb_kits/playbook/pb_date/date.rb

@@ -10,37 +10,25 @@ module Playbook
       partial "pb_date/date"
 
       prop :date, required: true
-      prop :alignment, type: Playbook::Props::Enum,
-                       values: %w[left center right],
-                       default: "left"
-      prop :show_icon, type: Playbook::Props::Boolean,
-                       default: false
-      prop :show_day_of_week, type: Playbook::Props::Boolean,
-                              default: false
-      # Size to be deprecated.
       prop :size, type: Playbook::Props::Enum,
-                  values: %w[lg md sm xs],
-                  default: "md"
+                  values: %w[lg sm xs],
+                  default: "sm"
       prop :timezone, default: "America/New_York"
 
       def classname
-        generate_classname("pb_date_kit", alignment)
+        generate_classname("pb_date_kit")
       end
 
-      def day_of_week
-        pb_date_time.to_day_of_week
+      def xs_date
+        "#{pb_date_time.to_day_of_week.upcase} · #{pb_date_time.to_month.upcase} #{pb_date_time.to_day}".html_safe
       end
 
-      def day
-        pb_date_time.to_day
+      def lg_date
+        "#{pb_date_time.to_month.upcase} #{pb_date_time.to_day}"
       end
 
-      def month
-        pb_date_time.to_month.capitalize
-      end
-
-      def year
-        pb_date_time.to_year
+      def sm_date
+        "#{pb_date_time.to_day_of_week.upcase} · #{pb_date_time.to_month.upcase} #{pb_date_time.to_day}".html_safe
       end
 
     private

data/app/pb_kits/playbook/pb_date/docs/_date_default.html.erb

@@ -1,39 +1,24 @@
 <%= pb_rails("date", props: {
   date: Date.today,
-  size: "sm"
+  size: "lg"
 }) %>
 
 <br>
 
 <%= pb_rails("date", props: {
-  date: "2012-08-02T15:49:29Z",
-  size: "sm"
+  date: DateTime.now
 }) %>
 
 <br>
 
 <%= pb_rails("date", props: {
-  date: "2017-12-02T15:49:29Z",
-  show_day_of_week: true,
-  size: "sm"
-}) %>
-
-<br>
-<br>
-
-<%= pb_rails("date", props: {
-  date: Date.today,
-}) %>
-
-<br>
-
-<%= pb_rails("date", props: {
-  date: "2012-08-02T15:49:29Z",
+  date: DateTime.now,
+  timezone: "Asia/Tokyo"
 }) %>
 
 <br>
 
 <%= pb_rails("date", props: {
-  date: "2017-12-02T15:49:29Z",
-  show_day_of_week: true
+  date: Date.new(2010, 11, 12),
+  size: "xs"
 }) %>

data/app/pb_kits/playbook/pb_date/docs/_date_default.jsx

@@ -1,59 +1,28 @@
 import React from 'react'
-import { Date as FormattedDate } from '../../'
+import { Date } from '../../'
 
-const DateDefault = (props) => {
+const DateDefault = () => {
   return (
-    <>
-      <FormattedDate
-          size="sm"
-          value={new Date()}
-          {...props}
+    <div>
+      <Date
+          size="lg"
+          value="1995-12-25"
       />
 
       <br />
 
-      <FormattedDate
-          size="sm"
-          value="2012-08-03"
-          {...props}
+      <Date
+          value="17 Mar 69"
       />
 
       <br />
 
-      <FormattedDate
-          showDayOfWeek
-          size="sm"
-          value="2017-12-03"
-          {...props}
+      <Date
+          size="xs"
+          value="2020-04-20T04:20:00.000Z"
       />
-
-      <br />
-      <br />
-
-      <FormattedDate
-          value={new Date()}
-          {...props}
-      />
-
-      <br />
-
-      <FormattedDate
-          value="2012-08-03"
-          {...props}
-      />
-
-      <br />
-
-      <FormattedDate
-          showDayOfWeek
-          value="2017-12-03"
-          {...props}
-      />
-    </>
+    </div>
   )
 }
 
 export default DateDefault
-
-// *Development Note* -  We are reviewing this kit for a potential name change due to naming collisions when `new Date()` is used.
-// To avoid this bug, please use name spacing as shown in the code examples. ie `import { Date as AliasedComponentName } from '../../'

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

@@ -2,13 +2,9 @@ examples:
   
   rails:
   - date_default: Default
-  - date_variants: Variants
-  - date_alignment: Alignment
   - date_timezone: Timezones
   
   
   react:
   - date_default: Default
-  - date_variants: Variants
-  - date_alignment: Alignment
   

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

@@ -1,3 +1 @@
 export { default as DateDefault } from './_date_default.jsx'
-export { default as DateVariants } from './_date_variants.jsx'
-export { default as DateAlignment } from './_date_alignment.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
 
@@ -70,9 +71,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(() => {
@@ -87,7 +88,6 @@ const DatePicker = (props: DatePickerProps) => {
       maxDate: maxDate,
       minDate: minDate,
       mode: mode,
-      onChange: onChange,
       pickerId: pickerId,
       yearRange: yearRange,
     })
@@ -126,7 +126,9 @@ 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,
-                         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,7 @@ const datePickerHelper = (config) => {
     maxDate,
     minDate,
     mode,
-    onChange = () => {},
     pickerId,
-    required,
     yearRange,
   } = config
 
@@ -22,10 +20,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 = () => {
@@ -91,12 +99,7 @@ const datePickerHelper = (config) => {
     onClose: [() => {
       window.removeEventListener('resize', calendarResizer)
     }],
-    onChange: [(selectedDates, dateStr) => {
-      onChange(dateStr, selectedDates)
-    }],
-    onYearChange: [() => {
-      yearChangeHook()
-    }],
+    onYearChange: [],
     prevArrow: '<i class="far fa-angle-left"></i>',
     static: true,
   })
@@ -118,7 +121,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 +133,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