playbook_ui 7.0.1.pre.alpha8 → 7.0.1.pre.alpha14

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

@@ -0,0 +1,39 @@
+<%= content_tag(:div,
+    aria: object.aria,
+    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.hide_icon %>
+          <div
+              class="<%= object.icon_wrapper_class %>"
+              id="cal-icon-<%= object.picker_id %>"
+          >
+            <%= pb_rails("icon", props: { 
+              classname: "cal_icon",
+              icon: "calendar-alt"
+            }) %>
+          </div>
+        <% end %>
+      </div>
+
+      <%= javascript_tag do %>
+      window.addEventListener("DOMContentLoaded", () => {
+          datePickerHelper(<%= object.date_picker_config %>)
+      })
+      <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_date_picker/_date_picker.jsx

@@ -0,0 +1,149 @@
+/* @flow */
+
+import React, { useEffect } from 'react'
+import classnames from 'classnames'
+import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
+import { globalProps } from '../utilities/globalProps.js'
+import { Icon, TextInput } from '../'
+import datePickerHelper from './date_picker_helper.js'
+
+type DatePickerProps = {
+  allowInput?: Boolean,
+  aria?: object,
+  className?: String,
+  dark?: Boolean,
+  data?: object,
+  defaultDate?: String,
+  disableDate?: Array,
+  disableInput?: Boolean,
+  disableRange?: Array,
+  disableWeekdays?: Array,
+  error?: String,
+  format?: String,
+  hideIcon?: Boolean,
+  hideLabel?: Boolean,
+  id?: String,
+  inputAria?: object,
+  inputData?: object,
+  label?: String,
+  maxDate: String,
+  minDate: String,
+  mode?: String,
+  name: String,
+  onChange: (String) => void,
+  pickerId?: String,
+  placeholder?: String,
+  type?: String,
+  yearRange?: Array,
+}
+const DatePicker = (props: DatePickerProps) => {
+  const {
+    allowInput = false,
+    aria = {},
+    className,
+    dark = false,
+    data = {},
+    defaultDate = '',
+    disableDate = null,
+    disableInput,
+    disableRange = null,
+    disableWeekdays = null,
+    error,
+    format = 'm/d/Y',
+    hideIcon = false,
+    hideLabel = false,
+    id,
+    inputAria,
+    inputData,
+    label = 'Date Picker',
+    maxDate,
+    minDate,
+    mode = 'single',
+    name,
+    onChange = () => {},
+    pickerId,
+    placeholder,
+    type,
+    yearRange = [ 1900, 2100 ],
+  } = props
+
+  const ariaProps = buildAriaProps(aria)
+  const dataProps = buildDataProps(data)
+  const classes = classnames(
+    buildCss('pb_date_picker_kit'),
+    globalProps(props),
+    error ? 'error' : null,
+    className
+  )
+
+  useEffect(() => {
+    datePickerHelper({
+      allowInput: allowInput,
+      defaultDate: defaultDate,
+      disableDate: disableDate,
+      disableRange: disableRange,
+      disableWeekdays: disableWeekdays,
+      format: format,
+      hideIcon: hideIcon,
+      maxDate: maxDate,
+      minDate: minDate,
+      mode: mode,
+      onChange: onChange,
+      pickerId: pickerId,
+      yearRange: yearRange,
+    })
+  }, [])
+
+  const iconWrapperClass = () => {
+    let base = 'cal_icon_wrapper'
+    if (dark){
+      base += ' dark'
+    }
+    if (hideLabel){
+      base += ' no_label_shift'
+    }
+    if (error){
+      base += ' error'
+    }
+    return base
+  }
+
+  return (
+    <div
+        {...ariaProps}
+        {...dataProps}
+        className={classes}
+        id={id}
+    >
+      {className}
+      <div className="input_wrapper">
+        <TextInput
+            aria={inputAria}
+            autoComplete="off"
+            dark={dark}
+            data={inputData}
+            disabled={disableInput}
+            error={error}
+            id={pickerId}
+            label={hideLabel ? null : label}
+            name={name}
+            placeholder={placeholder}
+            type={type}
+        />
+        <If condition={!hideIcon}>
+          <div
+              className={iconWrapperClass()}
+              id={`cal-icon-${pickerId}`}
+          >
+            <Icon
+                className="cal_icon"
+                icon="calendar-alt"
+            />
+          </div>
+        </If>
+      </div>
+    </div>
+  )
+}
+
+export default DatePicker

data/app/pb_kits/playbook/pb_date_picker/_date_picker.scss

@@ -0,0 +1,33 @@
+@import "../pb_caption/caption_mixin";
+@import "../pb_textarea/textarea_mixin";
+@import "../tokens/colors";
+@import "./sass_partials/flatpickr_styles";
+
+[class^=pb_date_picker_kit] {
+  .input_wrapper {
+    margin-bottom: $space_sm;
+    position: relative;
+    @import "./sass_partials/calendar_input_icon";
+    @import "./sass_partials/day_styles";
+    @import "./sass_partials/header_styles";
+    @import "./sass_partials/overrides";
+
+    .flatpickr-wrapper {
+      display: block;
+      .text_input.flatpickr-input {
+        text-overflow: ellipsis;
+        padding-right: $space_xl + 10 !important;
+      }
+      // Calendar Shadow and Border
+      .flatpickr-calendar {
+        box-shadow: $shadow_deeper;
+        border: 1px solid $border_light;
+      }
+      // Hide Caret
+      .flatpickr-calendar:before,
+      .flatpickr-calendar:after {
+        content: none;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,85 @@
+# frozen_string_literal: true
+
+module Playbook
+  module PbDatePicker
+    class DatePicker
+      include Playbook::Props
+
+      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,
+                          default: ""
+      prop :disable_date, type: Playbook::Props::Array,
+                          default: []
+      prop :disable_input, type: Playbook::Props::Boolean,
+                           default: false
+      prop :disable_range, type: Playbook::Props::Array,
+                           default: []
+      prop :disable_weekdays, type: Playbook::Props::Array,
+                              default: []
+      prop :error, type: Playbook::Props::String
+      prop :format, type: Playbook::Props::String,
+                    default: "m/d/Y"
+      prop :hide_icon, type: Playbook::Props::Boolean,
+                       default: false
+      prop :hide_label, type: Playbook::Props::Boolean,
+                        default: false
+      prop :label, type: Playbook::Props::String,
+                   default: "Date Picker"
+      prop :input_aria, type: Playbook::Props::Hash,
+                        default: {}
+      prop :input_data, type: Playbook::Props::Hash,
+                        default: {}
+      prop :max_date, type: Playbook::Props::String
+      prop :min_date, type: Playbook::Props::String
+      prop :name, type: Playbook::Props::String
+      prop :mode, type: Playbook::Props::String,
+                  default: "single"
+      prop :picker_id, type: Playbook::Props::String,
+                       required: true
+      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]
+
+      def classname
+        generate_classname("pb_date_picker_kit")
+      end
+
+      def date_picker_config
+        {
+          allowInput: allow_input,
+          defaultDate: default_date,
+          disableDate: disable_date,
+          disableRange: disable_range,
+          disableWeekdays: disable_weekdays,
+          format: format,
+          hideIcon: hide_icon,
+          maxDate: max_date,
+          minDate: min_date,
+          mode: mode,
+          pickerId: picker_id,
+          yearRange: year_range,
+        }.to_json.html_safe
+      end
+
+      def error_class
+        error ? " error" : ""
+      end
+
+      def icon_wrapper_class
+        class_string = "cal_icon_wrapper"
+        class_string += " dark" if dark
+        class_string += " no_label_shift" if hide_label
+        class_string += error_class
+        class_string
+      end
+    end
+  end
+end

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

@@ -0,0 +1,169 @@
+import flatpickr from 'flatpickr'
+
+const datePickerHelper = (config) => {
+  const {
+    allowInput,
+    defaultDate,
+    disableDate,
+    disableRange,
+    disableWeekdays,
+    format,
+    maxDate,
+    minDate,
+    mode,
+    onChange,
+    pickerId,
+    yearRange,
+  } = config
+
+  // ===========================================================
+  // |                   Hook Definitions                      |
+  // ===========================================================
+
+  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]
+    }
+  }
+  const disabledParser = () => {
+    if (disableDate && disableDate.length > 0) {
+      return disableDate
+    } else if (disableRange && disableRange.length > 0) {
+      return disableRange
+    } else {
+      return []
+    }
+  }
+  const calendarResizer = () => {
+    const cal = document.querySelector(`#cal-${pickerId}.open`)
+    const parentInput = cal.parentElement
+    if (cal.getBoundingClientRect().right > window.innerWidth) {
+      parentInput.style.display = 'flex'
+      parentInput.style.justifyContent = 'center'
+    }
+    if (cal.offsetWidth <= parentInput.offsetWidth) {
+      parentInput.style.display = ''
+      parentInput.style.justifyContent = ''
+    }
+  }
+
+  // ===========================================================
+  // |             Flatpickr initializer w/ config             |
+  // ===========================================================
+
+  flatpickr(`#${pickerId}`, {
+    disableMobile: true,
+    dateFormat: format,
+    defaultDate: defaultDateGetter(),
+    disable: disableWeekdays && disableWeekdays.length > 0 ? [
+      (date) => {
+        const weekdayObj = {
+          Sunday: 0,
+          Monday: 1,
+          Tuesday: 2,
+          Wednesday: 3,
+          Thursday: 4,
+          Friday: 5,
+          Saturday: 6,
+        }
+        return (
+          date.getDay() === weekdayObj[disableWeekdays[0]] ||
+          date.getDay() === weekdayObj[disableWeekdays[1]] ||
+          date.getDay() === weekdayObj[disableWeekdays[2]] ||
+          date.getDay() === weekdayObj[disableWeekdays[3]] ||
+          date.getDay() === weekdayObj[disableWeekdays[4]] ||
+          date.getDay() === weekdayObj[disableWeekdays[5]] ||
+          date.getDay() === weekdayObj[disableWeekdays[6]]
+        )
+      },
+    ] : disabledParser(),
+    maxDate: maxDate,
+    minDate: minDate,
+    mode: mode,
+    nextArrow: '<i class="far fa-angle-right"></i>',
+    onOpen: [() => {
+      calendarResizer()
+      window.addEventListener('resize', calendarResizer)
+    }],
+    onClose: [() => {
+      window.removeEventListener('resize', calendarResizer)
+    }],
+    onChange: [(selectedDates, dateStr) => {
+      onChange(dateStr, selectedDates)
+    }],
+    onYearChange: [],
+    prevArrow: '<i class="far fa-angle-left"></i>',
+    static: true,
+  })
+
+  // ===========================================================
+  //                 Additional JS Functionality               |
+  // ===========================================================
+
+  // Assign dynamically sourced flatpickr instance to variable
+  const picker = document.querySelector(`#${pickerId}`)._flatpickr
+  picker.innerContainer.parentElement.id = `cal-${pickerId}`
+
+  // replace year selector with dropdown
+  picker.yearElements[0].parentElement.innerHTML = `<select class="numInput cur-year" type="number" tabIndex="-1" aria-label="Year" id="year-${pickerId}"></select>`
+
+  // create html option tags for desired years
+  let years = ''
+  for (let year = yearRange[1]; year >= yearRange[0]; year--) {
+    years += `<option value="${year}">${year}</option>`
+  }
+
+  // variablize each dropdown selecttor
+  const dropdown = document.querySelector(`#year-${pickerId}`)
+
+  // inject year options into dropdown and assign it the flatpickr's current year value
+  dropdown.innerHTML = years
+  dropdown.value = picker.currentYear
+
+  // whenever a new year is selected from dropdown update flatpickr's current year value
+  dropdown.addEventListener('input', (e) => {
+    picker.changeYear(Number(e.target.value))
+  })
+
+  // 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
+    }
+  })
+  if (allowInput){
+    picker.input.removeAttribute('readonly')
+  }
+}
+
+export default datePickerHelper