playbook_ui 11.0.0.pre.alpha.2 → 11.1.0

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

@@ -1,5 +1,7 @@
 import flatpickr from 'flatpickr'
 import monthSelectPlugin from 'flatpickr/dist/plugins/monthSelect'
+import weekSelect from "flatpickr/dist/plugins/weekSelect/weekSelect"
+import timeSelectPlugin from './plugins/timeSelect'
 
 const datePickerHelper = (config) => {
   const {
@@ -8,6 +10,7 @@ const datePickerHelper = (config) => {
     disableDate,
     disableRange,
     disableWeekdays,
+    enableTime,
     format,
     maxDate,
     minDate,
@@ -16,6 +19,10 @@ const datePickerHelper = (config) => {
     pickerId,
     plugins,
     required,
+    selectionType,
+    showTimezone,
+    timeCaption = 'Select Time',
+    timeFormat = 'at h:i K',
     yearRange,
   } = config
 
@@ -52,9 +59,25 @@ const datePickerHelper = (config) => {
     }
   }
 
-  const setMonthAndYearPlugin = () => (
-    plugins ? [ monthSelectPlugin({ shorthand: true, dateFormat: 'F Y', altFormat: 'F Y' }) ] : []
-  )
+  const setPlugins = () => {
+    let pluginList = []
+
+    // month and week selection
+    if (selectionType === "month" || plugins === true) {
+      pluginList.push(monthSelectPlugin({ shorthand: true, dateFormat: 'F Y', altFormat: 'F Y' }))
+    } else if ( selectionType === "week") {
+      pluginList.push(weekSelect({}))
+    }
+
+    // time selection
+    if (enableTime) pluginList.push(timeSelectPlugin({ caption: timeCaption, showTimezone: showTimezone}))
+
+    return pluginList
+  }
+
+  const getDateFormat = () => {
+    return enableTime ? `${format} ${timeFormat}` : format
+  }
 
   // ===========================================================
   // |             Flatpickr initializer w/ config             |
@@ -62,7 +85,7 @@ const datePickerHelper = (config) => {
 
   flatpickr(`#${pickerId}`, {
     disableMobile: true,
-    dateFormat: format,
+    dateFormat: getDateFormat(),
     defaultDate: defaultDateGetter(),
     disable: disableWeekdays && disableWeekdays.length > 0 ? [
       (date) => {
@@ -86,9 +109,10 @@ const datePickerHelper = (config) => {
         )
       },
     ] : disabledParser(),
-    maxDate: maxDate,
-    minDate: minDate,
-    mode: mode,
+    enableTime,
+    maxDate,
+    minDate,
+    mode,
     nextArrow: '<i class="far fa-angle-right"></i>',
     onOpen: [() => {
       calendarResizer()
@@ -98,12 +122,12 @@ const datePickerHelper = (config) => {
       window.removeEventListener('resize', calendarResizer)
     }],
     onChange: [(selectedDates, dateStr) => {
-      onChange(dateStr, selectedDates)
+      onChange(dateStr, selectedDates) 
     }],
     onYearChange: [() => {
       yearChangeHook()
     }],
-    plugins: setMonthAndYearPlugin(),
+    plugins: setPlugins(),
     prevArrow: '<i class="far fa-angle-left"></i>',
     static: true,
   })
@@ -162,8 +186,10 @@ const datePickerHelper = (config) => {
   // Adding dropdown icons to year and month selects
   dropdown.insertAdjacentHTML('afterend', '<i class="far fa-angle-down year-dropdown-icon" id="test-id"></i>')
   if (picker.monthElements[0].parentElement) {
-    return picker.monthElements[0].insertAdjacentHTML('afterend', '<i class="far fa-angle-down month-dropdown-icon"></i>')
-  }
+    return picker.monthElements[0].insertAdjacentHTML('afterend', '<i class="far fa-angle-down month-dropdown-icon"></i>')}
+  // if (picker.weekElements[0].parentElement){
+  //   return  picker.weekElements[0].insertAdjacentHTML('afterend', '<i class="far fa-angle-down year-dropdown-icon" id="test-id"></i>')
+  // }
 
   // Remove readonly attribute for validation and or text input
   if (allowInput){

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

@@ -1 +1 @@
-<%= pb_rails("date_picker", props: { picker_id: "date-picker-default" }) %>
+<%= pb_rails("date_picker", props: { picker_id: "date-picker-default"}) %>

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

@@ -1,5 +1,5 @@
 <%= pb_rails("date_picker", props: {
   label: "Date Picker",
-  plugins: true,
-  picker_id: "disabled_date"
+  picker_id: "disabled_date",
+   selection_type: "month"
 }) %>

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

@@ -8,7 +8,7 @@ const DatePickerMonthAndYear = (props) => {
       <DatePicker
           label="Date Picker"
           pickerId="disabled-date"
-          plugins
+          selectionType="month"
           {...props}
       />
     </div>

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

@@ -1 +1 @@
-By default month&year plugin is disabled. To activate it set `plugins` prop to `true`.  If you're using React just pass a `plugins` prop to the kit.
+By default selectType prop is disabled. To activate it set `selectionType` prop in JSX/TSX to `month`. To activate it set `selection_type` prop in a rails file to `month`.

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

@@ -0,0 +1,6 @@
+<%= pb_rails("date_picker", props: {
+  default_date: DateTime.now.utc.iso8601,
+  picker_id: "date-picker-time",
+  enable_time: true,
+  show_timezone: true
+}) %>

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

@@ -0,0 +1,21 @@
+import React from 'react'
+
+import DatePicker from '../_date_picker'
+
+const DEFAULT_DATE = new Date()
+DEFAULT_DATE.setHours(12)
+DEFAULT_DATE.setMinutes(0)
+
+const DatePickerTime = (props) => (
+  <div>
+    <DatePicker
+        defaultDate={DEFAULT_DATE}
+        enableTime
+        pickerId="date-picker-time"
+        showTimezone
+        {...props}
+    />
+  </div>
+)
+
+export default DatePickerTime

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

@@ -0,0 +1 @@
+To select time as well, you should pass the `enableTime` boolean prop. You can also enable timezone display by passing `showTimezone`.

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

@@ -0,0 +1,5 @@
+<%= pb_rails("date_picker", props: {
+  label: "Date Picker",
+  picker_id: "week_date_picker",
+  selection_type: "week"
+}) %>

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

@@ -0,0 +1,18 @@
+import React from 'react'
+
+import DatePicker from '../_date_picker'
+
+const DatePickerWeek = (props) => {
+  return (
+    <div>
+      <DatePicker
+          label="Date Picker"
+          pickerId="week-date-picker" 
+          selectionType="week"
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default DatePickerWeek

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

@@ -0,0 +1 @@
+By default selectType prop is disabled. To activate it set `selectionType` prop in JSX/TSX to `week`. To activate it set `selection_type` prop in a rails file to `week`.

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

@@ -17,6 +17,8 @@ examples:
   - date_picker_anti_patterns: Anti-Patterns
   - date_picker_inline: Inline
   - date_picker_month_and_year: Month & Year Only
+  - date_picker_week: Week
+  - date_picker_time: Time Selection
 
 
   react:
@@ -36,3 +38,5 @@ examples:
   - date_picker_year_range: Year Range
   - date_picker_inline: Inline
   - date_picker_month_and_year: Month & Year Only
+  - date_picker_week: Week
+  - date_picker_time: Time Selection

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

@@ -14,3 +14,5 @@ export { default as DatePickerFlatpickrMethods } from './_date_picker_flatpickr_
 export { default as DatePickerYearRange } from './_date_picker_year_range.jsx'
 export { default as DatePickerInline } from './_date_picker_inline.jsx'
 export { default as DatePickerMonthAndYear } from './_date_picker_month_and_year.jsx'
+export { default as DatePickerTime } from './_date_picker_time.jsx'
+export { default as DatePickerWeek } from './_date_picker_week.jsx'

data/app/pb_kits/playbook/pb_date_picker/plugins/timeSelect.js

@@ -0,0 +1,137 @@
+export const getTimezoneText = (inputDate) => {
+  const tzAbbr = inputDate.toLocaleDateString('en-US', {
+    day: '2-digit',
+    timeZoneName: 'short',
+  }).slice(4)
+  const tzText = inputDate.toLocaleDateString('en-US', {
+    day: '2-digit',
+    timeZoneName: 'long',
+  }).slice(4)
+  return `${tzAbbr} (${tzText})`
+}
+
+function timeSelectPlugin(props) {
+  return function(fp) {
+
+    const generateMeridiemCard = (text) => {
+      const selectableCard = document.createElement('div')
+      selectableCard.className = 'pb_selectable_card_kit_enabled'
+
+      const cardInput = document.createElement('input'),
+          cardInputId = `datePicker${text}`
+
+      cardInput.id = cardInputId
+      cardInput.name = 'datepicker-ampm'
+      cardInput.type = 'radio'
+      cardInput.value = text
+
+      const cardLabel = document.createElement('label'),
+      cardLabelBuffer = document.createElement('div')
+      cardLabel.className = `label-${text.toLowerCase()}`
+      cardLabel.setAttribute('for', cardInputId)
+      cardLabelBuffer.className = 'buffer'
+      cardLabelBuffer.innerHTML = text
+
+      cardLabel.append(cardLabelBuffer)
+      selectableCard.prepend(cardInput)
+      selectableCard.append(cardLabel)
+
+      return selectableCard
+    }
+
+    const generateMeridiemToggle = () => {
+      fp.amPM.style.display = 'none'
+      const formGroupKit = document.createElement('div')
+      formGroupKit.className = 'pb_form_group_kit'
+
+      const amCard = generateMeridiemCard('AM')
+      amCard.addEventListener('click', () => {
+        fp.selectedDates[0].setHours((fp.selectedDates[0].getHours() % 12) + 12 * 0)
+        fp.setDate(fp.selectedDates[0], true)
+      })
+
+      const pmCard = generateMeridiemCard('PM')
+      pmCard.addEventListener('click', () => {
+        fp.selectedDates[0].setHours((fp.selectedDates[0].getHours() % 12) + 12 * 1)
+        fp.setDate(fp.selectedDates[0], true)
+      })
+
+      formGroupKit.prepend(amCard)
+      formGroupKit.append(pmCard)
+
+      const meridiemContainer = document.createElement('div')
+      meridiemContainer.className = 'meridiem'
+      meridiemContainer.append(formGroupKit)
+      document.querySelector('.pb_time_selection').append(meridiemContainer)
+    }
+
+    const getMeridiem = (dateObj) => {
+      return dateObj[0].getHours() < 12 ? 'AM' : 'PM'
+    }
+
+    const updateMeridiemToggle = (forceClick) => {
+      if (!fp.selectedDates.length) return
+
+      const uncheckedClass = 'pb_selectable_card_kit_enabled',
+        checkedClass = 'pb_selectable_card_kit_checked_enabled',
+        pickerAM = document.getElementById('datePickerAM'),
+        pickerPM = document.getElementById('datePickerPM'),
+        meridiem = getMeridiem(fp.selectedDates)
+
+      if (forceClick) {
+        pickerAM.checked = false
+        pickerPM.checked = false
+        pickerPM.checked = meridiem === 'PM'
+        pickerAM.checked = meridiem === 'AM'
+      }
+
+      if (meridiem === 'PM') {
+        pickerPM.parentElement.className = checkedClass
+        pickerAM.parentElement.className = uncheckedClass
+      } else if (meridiem === 'AM') {
+        pickerAM.parentElement.className = checkedClass
+        pickerPM.parentElement.className = uncheckedClass
+      }
+    }
+
+    return {
+      onValueUpdate() {
+        updateMeridiemToggle()
+      },
+      onReady() {
+        const id = fp.input.id
+
+        if (!id || !fp?.timeContainer) return
+
+        fp.timeContainer.classList.add('pb_time_selection')
+
+        // allow single minutes
+        fp.minuteElement.step = '1'
+
+        // add caption text
+        if (props.caption) {
+          const captionContainer = document.createElement('div')
+          captionContainer.className = 'pb_caption_kit_md'
+          captionContainer.innerHTML = props?.caption
+          fp.timeContainer.prepend(captionContainer)
+        }
+
+        // add meridiem toggle
+        generateMeridiemToggle()
+        updateMeridiemToggle(true)
+
+        // add timezone text
+        if (props.showTimezone) {
+          const subcaptionContainer = document.createElement('div')
+          subcaptionContainer.className = 'pb_caption_kit_xs'
+          subcaptionContainer.innerHTML = getTimezoneText(fp._initialDate)
+          fp.timeContainer.append(subcaptionContainer)
+        }
+
+        fp.loadedPlugins.push("timeSelectPlugin")
+      }
+    }
+  }
+}
+
+export default timeSelectPlugin

data/app/pb_kits/playbook/pb_date_picker/sass_partials/_day_styles.scss

@@ -4,7 +4,7 @@
   @media (hover: hover) {
     &:hover {
       transition-duration: $transition_short;
-      transition-timing-function: $easeIn;    
+      transition-timing-function: $easeIn;
       background-color: #F6FAFF;
       border-color: #F6FAFF;
       box-shadow: $shadow_deep;
@@ -24,7 +24,7 @@
   background-color: $primary;
   border-color: $primary;
   box-shadow: $shadow_deep;
-  font-weight: $bold; 
+  font-weight: $bold;
 }
 .flatpickr-day.startRange {
   box-shadow: $space_sm + 1 0 0 #F7FBFF
@@ -37,6 +37,31 @@
   border: 2px;
   box-shadow: -$space_xs + 4 0 0 #F7FBFF, $space_xs - 3 0 0 #F7FBFF;
 }
+/*
+Plugin author didn't consider providing a class context, so
+instead we have to use the id! ¯\_(ツ)_/¯
+*/
+#cal-week-date-picker {
+  .flatpickr-day.inRange:not(.selected) {
+    &:nth-of-type(1),
+    &:nth-of-type(7n+1) {
+      border-radius: 30px 0 0 30px;
+    }
+    &:nth-of-type(7n) {
+      border-radius: 0 30px 30px 0;
+    }
+  }
+  .flatpickr-day.inRange {
+    &.selected {
+      background-color: $primary;
+      box-shadow: none;
+      color: #ffffff;
+    }
+  }
+  .flatpickr-day.selected:hover {
+    transition: none;
+  }
+}
 .flatpickr-innerContainer {
   overflow: visible;
 }

data/app/pb_kits/playbook/pb_date_picker/sass_partials/_flatpickr_styles.scss

@@ -655,17 +655,13 @@ span.flatpickr-weekday {
 .flatpickr-time {
   text-align: center;
   outline: 0;
-  display: block;
-  height: 0;
   line-height: 40px;
-  max-height: 40px;
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
   overflow: hidden;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
-  display: flex;
 }
 .flatpickr-time:after {
   content: "";
@@ -677,7 +673,7 @@ span.flatpickr-weekday {
   -webkit-flex: 1;
       -ms-flex: 1;
           flex: 1;
-  width: 40%;
+  width: 22%;
   height: 40px;
   float: left;
 }

data/app/pb_kits/playbook/pb_date_picker/sass_partials/_time_selection_styles.scss

@@ -0,0 +1,63 @@
+@import "../../tokens/typography";
+@import "../../tokens/spacing";
+@import "../../tokens/colors";
+
+[class^=pb_date_picker_kit] {
+  .pb_time_selection {
+    color: inherit;
+    text-align: left;
+    margin-left: $space_sm;
+    .numInputWrapper {
+      width: auto;
+      input.numInput {
+        border: 1px solid $border_light !important;
+        border-radius: 5px;
+        text-align: center;
+        width: 60px;
+        margin-left: 0;
+        padding: 0;
+        &:focus {
+          border-color: $primary_action !important;
+        }
+      }
+      span {
+        &.arrowUp, &.arrowDown {
+          display: none;
+        }
+      }
+    }
+    [class^=pb_caption_kit_md], [class^=pb_caption_kit_xs] {
+      line-height: $text_larger;
+    }
+    [class^=pb_caption_kit_xs] {
+      clear: both;
+      display: block;
+    }
+    .flatpickr {
+      &-time-separator {
+        margin: 0 $space_xs;
+        text-align: center;
+      }
+    }
+    .meridiem {
+      [class^=pb_form_group_kit] {
+        margin-left: $space_sm;
+      }
+
+      #datePickerAM, #datePickerPM {
+        display: none;
+      }
+      &:focus, &:hover {
+        background: transparent;
+      }
+
+      [class^=pb_selectable_card_kit] > label {
+        padding: 0;
+        margin: 0;
+        width: 60px;
+        height: 40px;
+        text-align: center;
+      }
+    }
+  }
+}

data/app/pb_kits/playbook/pb_date_picker/sass_partials/_week_styles.scss

@@ -0,0 +1,127 @@
+@import "../../tokens/colors";
+
+
+.numInput {
+  border-left: none !important;
+}
+
+// Manual Import
+.flatpickr-monthSelect-months {
+  margin: 10px 1px 3px 1px;
+  flex-wrap: wrap;
+}
+
+.flatpickr-monthSelect-month {
+  background: none;
+  border: 1px solid transparent;
+  border-radius: 4px;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  color: $text_lt_default;
+  cursor: pointer;
+  display: inline-block;
+  font-weight: 400;
+  margin: 0.5px;
+  justify-content: center;
+  padding: 10px;
+  position: relative;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  text-align: center;
+  width: 33%;
+}
+
+.flatpickr-monthSelect-month.flatpickr-disabled {
+	color: #eee;
+}
+
+.flatpickr-monthSelect-month.flatpickr-disabled:hover,
+.flatpickr-monthSelect-month.flatpickr-disabled:focus {
+	cursor: not-allowed;
+	background: none !important;
+}
+
+.flatpickr-monthSelect-theme-dark {
+  background: #3f4458;
+}
+
+.flatpickr-monthSelect-theme-dark .flatpickr-current-month input.cur-year {
+  color: #fff;
+}
+
+.flatpickr-monthSelect-theme-dark .flatpickr-months .flatpickr-prev-month,
+.flatpickr-monthSelect-theme-dark .flatpickr-months .flatpickr-next-month {
+  color: #fff;
+  fill: #fff;
+}
+
+.flatpickr-monthSelect-theme-dark .flatpickr-monthSelect-month {
+  color: rgba(255, 255, 255, 0.95);
+}
+
+.flatpickr-monthSelect-month.today {
+  border-color: #959ea9;
+}
+
+.flatpickr-monthSelect-month.inRange,
+.flatpickr-monthSelect-month.inRange.today,
+.flatpickr-monthSelect-month:hover,
+.flatpickr-monthSelect-month:focus {
+  background: $active_light;
+  font-weight: $bold;
+  color: $text_lt_default;
+  cursor: pointer;
+  outline: 0;
+}
+
+.flatpickr-monthSelect-theme-dark .flatpickr-monthSelect-month.inRange,
+.flatpickr-monthSelect-theme-dark .flatpickr-monthSelect-month:hover,
+.flatpickr-monthSelect-theme-dark .flatpickr-monthSelect-month:focus {
+  background: #646c8c;
+  border-color: #646c8c;
+}
+
+.flatpickr-monthSelect-month.today:hover,
+.flatpickr-monthSelect-month.today:focus {
+  background: #959ea9;
+  border-color: #959ea9;
+  color: #fff;
+}
+
+.flatpickr-monthSelect-month.selected,
+.flatpickr-monthSelect-month.startRange,
+.flatpickr-monthSelect-month.endRange {
+  background-color: $primary;
+  font-weight: $bold;
+  box-shadow: none;
+  color: #fff;
+  border-color: $primary;
+}
+
+.flatpickr-monthSelect-month.startRange {
+  border-radius: 50px 0 0 50px;
+}
+
+.flatpickr-monthSelect-month.endRange {
+  border-radius: 0 50px 50px 0;
+}
+
+.flatpickr-monthSelect-month.startRange.endRange {
+  border-radius: 50px;
+}
+
+.flatpickr-monthSelect-month.inRange {
+  border-radius: 0;
+  box-shadow: -5px 0 0 #e6e6e6, 5px 0 0 #e6e6e6;
+}
+
+.flatpickr-monthSelect-theme-dark .flatpickr-monthSelect-month.selected,
+.flatpickr-monthSelect-theme-dark .flatpickr-monthSelect-month.startRange,
+.flatpickr-monthSelect-theme-dark .flatpickr-monthSelect-month.endRange {
+  background: #80cbc4;
+  -webkit-box-shadow: none;
+  box-shadow: none;
+  color: #fff;
+  border-color: #80cbc4;
+}

data/app/pb_kits/playbook/pb_form_pill/{_form_pill.jsx → _form_pill.tsx}

@@ -4,24 +4,24 @@ import classnames from 'classnames'
 import Title from '../pb_title/_title'
 import Icon from '../pb_icon/_icon'
 import Avatar from '../pb_avatar/_avatar'
-import { globalProps } from '../utilities/globalProps'
+import { globalProps, GlobalProps } from '../utilities/globalProps'
 
 type FormPillProps = {
   className?: string,
   id?: string,
   text: string,
   name: string,
-  onClick?: EventHandler,
+  onClick?: React.MouseEventHandler<HTMLSpanElement>,
   avatar?: boolean,
   avatarUrl?: string,
   size?: string,
-  textTransform?: "none" | "lowercase",
+  textTransform?: 'none' | 'lowercase',
   closeProps?: {
-    onClick?: EventHandler,
-    onMouseDown?: EventHandler,
-    onTouchEnd?: EventHandler,
-  },
-}
+    onClick?: React.MouseEventHandler<HTMLSpanElement>,
+    onMouseDown?: React.MouseEventHandler<HTMLSpanElement>,
+    onTouchEnd?: React.TouchEventHandler<HTMLSpanElement>,
+  }, 
+} & GlobalProps
 const FormPill = (props: FormPillProps) => {
   const {
     className,
@@ -42,25 +42,29 @@ const FormPill = (props: FormPillProps) => {
   )
   return (
     <div className={css}>
-      <If condition={name}>
+        {name &&
+        <>
         <Avatar
             imageUrl={avatarUrl}
             name={name}
             size="xs"
+            status={null}
         />
         <Title
             className="pb_form_pill_text"
             size={4}
             text={name}
         />
-      </If>
-      <If condition={text}>
+        </>
+        }
+
+      {text &&
         <Title
             className="pb_form_pill_tag"
             size={4}
             text={text}
         />
-      </If>
+      }
       <div
           className="pb_form_pill_close"
           onClick={onClick}