playbook_ui 7.0.1.pre.alpha9 → 7.0.1.pre.alpha15

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

@@ -0,0 +1,9 @@
+export { default as CircleChartDefault } from './_circle_chart_default.jsx'
+export { default as CircleChartLiveData } from './_circle_chart_live_data.jsx'
+export { default as CircleChartRounded } from './_circle_chart_rounded.jsx'
+export { default as CircleChartBlock } from './_circle_chart_block.jsx'
+export { default as CircleChartColors } from './_circle_chart_colors.jsx'
+export { default as CircleChartWithLabels } from './_circle_chart_with_labels.jsx'
+export { default as CircleChartWithLegendKit } from './_circle_chart_with_legend_kit.jsx'
+export { default as CircleChartWithTitle } from './_circle_chart_with_title.jsx'
+export { default as CircleChartInnerSizes } from './_circle_chart_inner_sizes.jsx'

data/app/pb_kits/playbook/pb_circle_icon_button/_circle_icon_button.jsx

@@ -46,7 +46,11 @@ const CircleIconButton = (props: CircleIconButtonProps) => {
 
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
-  const classes = classnames(buildCss('pb_circle_icon_button_kit'), className, globalProps(props))
+  const classes = classnames(
+    buildCss('pb_circle_icon_button_kit'),
+    globalProps(props),
+    className
+  )
 
   return (
     <div

data/app/pb_kits/playbook/pb_contact/_contact.jsx

@@ -58,7 +58,11 @@ const Contact = (props: ContactProps) => {
     id } = props
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
-  const classes = classnames(buildCss('pb_contact_kit'), className, globalProps(props))
+  const classes = classnames(
+    buildCss('pb_contact_kit'),
+    globalProps(props),
+    className
+  )
 
   return (
     <div

data/app/pb_kits/playbook/pb_currency/_currency.jsx

@@ -45,7 +45,11 @@ const Currency = (props: CurrencyProps) => {
   const [whole, decimal = '00'] = amount.split('.')
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
-  const classes = classnames(buildCss('pb_currency_kit', align, size, { dark: dark }), className, globalProps(props))
+  const classes = classnames(
+    buildCss('pb_currency_kit', align, size, { dark }),
+    globalProps(props),
+    className
+  )
 
   return (
     <div

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_date/date.rb

@@ -13,6 +13,7 @@ module Playbook
       prop :size, type: Playbook::Props::Enum,
                   values: %w[lg sm xs],
                   default: "sm"
+      prop :timezone, default: "America/New_York"
 
       def classname
         generate_classname("pb_date_kit")
@@ -33,7 +34,7 @@ module Playbook
     private
 
       def pb_date_time
-        Playbook::PbKit::PbDateTime.new(date)
+        Playbook::PbKit::PbDateTime.new(date, timezone)
       end
     end
   end

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

@@ -12,6 +12,13 @@
 <br>
 
 <%= pb_rails("date", props: {
-  date: "2012-08-02T15:49:29Z",
+  date: DateTime.now,
+  timezone: "Asia/Tokyo"
+}) %>
+
+<br>
+
+<%= pb_rails("date", props: {
+  date: Date.new(2010, 11, 12),
   size: "xs"
 }) %>

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

@@ -0,0 +1,51 @@
+<%= pb_rails("caption", props: { text: "East Coast (Default)"}) %>
+<%= pb_rails("date", props: {
+  date: DateTime.now,
+  timezone: "America/New_York"
+}) %>
+
+<br>
+
+<%= pb_rails("caption", props: { text: "West Coast"}) %>
+<%= pb_rails("date", props: {
+  date: DateTime.now,
+  timezone: "America/Los_Angeles"
+}) %>
+
+<br>
+
+<%= pb_rails("caption", props: { text: "Toyko, Japan"}) %>
+<%= pb_rails("date", props: {
+  date: DateTime.now,
+  timezone: "Asia/Tokyo"
+}) %>
+
+<br>
+
+<%= pb_rails("caption", props: { text: "Anti-pattern example"}) %>
+
+<%= pb_rails("date", props: {
+  date: Date.today,
+  timezone: "Australia/Sydney"
+}) %>
+<%= pb_rails("body", props: { text: "Date.today ignores Timezone"}) %>
+
+<br>
+
+<%= pb_rails("caption", props: { text: "DateTime respects Timezone"}) %>
+
+<%= pb_rails("date", props: {
+  date: DateTime.now,
+  timezone: "Australia/Sydney"
+}) %>
+
+<%= pb_rails("body", props: { text: "'.now' in Australia is tomorrow (if you're EST after 10am)"}) %>
+
+<br>
+
+<%= pb_rails("caption", props: { text: "String Dates"}) %>
+<%= pb_rails("date", props: {
+  date: "2012-08-02T00:49:29Z",
+}) %>
+
+<%= pb_rails("body", props: { text: "Defaults to UTC, then changes due to EST Timezone."}) %>

data/app/pb_kits/playbook/pb_date/docs/_date_timezone.md

@@ -0,0 +1,6 @@
+Depending on the data you send to the `date` prop you might have unexpected results due to ruby `Date` and `DateTime` classes.
+
+Don't care about timezones? Use `Date`.
+
+If you need a date that recognizes a timezone, especially when paired with the [Time kit](/kits/time), leverage `DateTime`.
+

data/app/pb_kits/playbook/pb_date/docs/_description.md

@@ -1 +1,3 @@
 Use to display the date. Year will not display if it is the current year.
+
+`DateTime` defaults to the "America/New_York" timezone. `Date` ignores timezone.

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

@@ -2,6 +2,7 @@ examples:
   
   rails:
   - date_default: Default
+  - date_timezone: Timezones
   
   
   react:

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

@@ -8,6 +8,7 @@ import { Icon, TextInput } from '../'
 import datePickerHelper from './date_picker_helper.js'
 
 type DatePickerProps = {
+  allowInput?: Boolean,
   aria?: object,
   className?: String,
   dark?: Boolean,
@@ -29,14 +30,15 @@ type DatePickerProps = {
   minDate: String,
   mode?: String,
   name: String,
+  onChange: (String) => void,
   pickerId?: String,
   placeholder?: String,
-  readOnly?: Boolean,
   type?: String,
   yearRange?: Array,
 }
 const DatePicker = (props: DatePickerProps) => {
   const {
+    allowInput = false,
     aria = {},
     className,
     dark = false,
@@ -58,10 +60,9 @@ const DatePicker = (props: DatePickerProps) => {
     minDate,
     mode = 'single',
     name,
+    onChange = () => {},
     pickerId,
-    placeholder,
-    readOnly = false,
-    type,
+    placeholder = 'Select Date',
     yearRange = [ 1900, 2100 ],
   } = props
 
@@ -69,13 +70,14 @@ const DatePicker = (props: DatePickerProps) => {
   const dataProps = buildDataProps(data)
   const classes = classnames(
     buildCss('pb_date_picker_kit'),
-    className,
     globalProps(props),
     error ? 'error' : null,
+    className
   )
 
   useEffect(() => {
     datePickerHelper({
+      allowInput: allowInput,
       defaultDate: defaultDate,
       disableDate: disableDate,
       disableRange: disableRange,
@@ -85,8 +87,8 @@ const DatePicker = (props: DatePickerProps) => {
       maxDate: maxDate,
       minDate: minDate,
       mode: mode,
+      onChange: onChange,
       pickerId: pickerId,
-      readOnly: readOnly,
       yearRange: yearRange,
     })
   }, [])
@@ -125,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.scss

@@ -31,7 +31,3 @@
     }
   }
 }
-// Ensures picker remains visible inside filter kit
-.pb_popover_body {
-  overflow: visible !important;
-}

data/app/pb_kits/playbook/pb_date_picker/date_picker.rb

@@ -7,6 +7,8 @@ module Playbook
 
       partial "pb_date_picker/date_picker"
 
+      prop :allow_input, type: Playbook::Props::Boolean,
+                         default: false
       prop :dark, type: Playbook::Props::Boolean,
                   default: false
       prop :default_date, type: Playbook::Props::String,
@@ -39,12 +41,10 @@ module Playbook
                   default: "single"
       prop :picker_id, type: Playbook::Props::String,
                        required: true
-      prop :placeholder, type: Playbook::Props::String
-      prop :read_only, type: Playbook::Props::Boolean,
-                       default: false
+      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]
 
@@ -54,6 +54,7 @@ module Playbook
 
       def date_picker_config
         {
+          allowInput: allow_input,
           defaultDate: default_date,
           disableDate: disable_date,
           disableRange: disable_range,
@@ -64,7 +65,7 @@ module Playbook
           minDate: min_date,
           mode: mode,
           pickerId: picker_id,
-          readOnly: read_only,
+          required: required,
           yearRange: year_range,
         }.to_json.html_safe
       end

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

@@ -2,17 +2,18 @@ import flatpickr from 'flatpickr'
 
 const datePickerHelper = (config) => {
   const {
+    allowInput,
     defaultDate,
     disableDate,
     disableRange,
     disableWeekdays,
     format,
-    hideIcon,
     maxDate,
     minDate,
     mode,
+    onChange = () => {},
     pickerId,
-    readOnly,
+    required,
     yearRange,
   } = config
 
@@ -21,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 = () => {
@@ -65,7 +56,6 @@ const datePickerHelper = (config) => {
 
   flatpickr(`#${pickerId}`, {
     disableMobile: true,
-    allowInput: !readOnly,
     dateFormat: format,
     defaultDate: defaultDateGetter(),
     disable: disableWeekdays && disableWeekdays.length > 0 ? [
@@ -101,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,
   })
@@ -123,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
@@ -135,37 +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)
-
-  // click handling for Calendar Icon
-  if (!hideIcon){
-    document.querySelector(`#cal-icon-${pickerId}`).addEventListener('click', () => {
-      picker.toggle()
-    })
-  }
 
   // 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"
 }) %>