playbook_ui 11.0.0.pre.alpha.2 → 11.0.0

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_dialog/_dialog.jsx

@@ -1,3 +1,5 @@
+/* eslint-disable react/jsx-handler-names */
+/* eslint-disable react/no-multi-comp */
 /* @flow */
 
 import React, { useState } from 'react'
@@ -7,13 +9,18 @@ import Modal from 'react-modal'
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps'
 
+import Body from '../pb_body/_body'
 import Button from '../pb_button/_button'
 import DialogHeader  from './child_kits/_dialog_header'
 import DialogFooter from './child_kits/_dialog_footer'
 import DialogBody from './child_kits/_dialog_body'
+import Flex from '../pb_flex/_flex'
+import IconCircle from '../pb_icon_circle/_icon_circle'
+import Title from '../pb_title/_title'
 import { DialogContext } from './_dialog_context'
 
 type DialogProps = {
+  alertStyle?: "link" | "single" | "stacked" | "default",
   aria?: object,
   cancelButton?: string,
   children: array<React.ReactNode> | React.ReactNode | string,
@@ -31,6 +38,7 @@ type DialogProps = {
   portalClassName?: string,
   shouldCloseOnOverlayClick: boolean,
   size?: "sm" | "md" | "lg" | "content",
+  status?: "info" | "caution" | "delete" | "error" | "success",
   text?: string,
   title?: string,
   trigger?: string
@@ -38,6 +46,7 @@ type DialogProps = {
 
 const Dialog = (props: DialogProps) => {
   const {
+    alertStyle = "default",
     aria = {},
     cancelButton,
     confirmButton,
@@ -53,6 +62,7 @@ const Dialog = (props: DialogProps) => {
     onClose = () => {},
     portalClassName,
     shouldCloseOnOverlayClick = true,
+    status,
     text,
     title,
     trigger,
@@ -78,15 +88,15 @@ const Dialog = (props: DialogProps) => {
     className
   )
 
+  const [triggerOpened, setTriggerOpened] = useState(false),
+  modalIsOpened = trigger ? triggerOpened : opened
+
   const api = {
     onClose: trigger ? function(){
       setTriggerOpened(false)
     } : onClose,
   }
 
-  const [triggerOpened, setTriggerOpened] = useState(false),
-    modalIsOpened = trigger ? triggerOpened : opened
-
   if (trigger) {
     const modalTrigger = document.querySelector(trigger)
     modalTrigger.addEventListener('click', () => {
@@ -97,6 +107,29 @@ const Dialog = (props: DialogProps) => {
     }, { once: true })
   }
 
+  const sweetAlertStatus = {
+    info: {
+      icon: "exclamation-circle",
+      variant: "default",
+    },
+    caution: {
+      icon: "triangle-warning",
+      variant: "yellow",
+    },
+    delete: {
+      icon: "trash",
+      variant: "red",
+    },
+    error: {
+      icon: "times-circle",
+      variant: "red",
+    },
+    success: {
+      icon: "check-circle",
+      variant: "green",
+    },
+  }
+
   return (
     <DialogContext.Provider value={api}>
       <div
@@ -105,6 +138,7 @@ const Dialog = (props: DialogProps) => {
           className={classes}
       >
         <Modal
+            alertStyle={alertStyle}
             ariaHideApp={false}
             className={dialogClassNames}
             closeTimeoutMS={200}
@@ -115,14 +149,28 @@ const Dialog = (props: DialogProps) => {
             overlayClassName={overlayClassNames}
             portalClassName={portalClassName}
             shouldCloseOnOverlayClick={shouldCloseOnOverlayClick}
+            status={status}
         >
-          <If condition={title}>
-            <Dialog.Header>{title}</Dialog.Header>
-          </If>
-          <If condition={text}>
-            <Dialog.Body>{text}</Dialog.Body>
-          </If>
-
+          <Dialog.Body>
+            <Flex align='center'
+                orientation='column'
+            >
+              <If condition = {sweetAlertStatus[status]}>
+                <IconCircle
+                    icon={sweetAlertStatus[status].icon}
+                    variant={sweetAlertStatus[status].variant}
+                />
+              </If>
+              <Title marginY='sm'
+                  size={3}
+              >
+                {title}
+              </Title>
+              <Body marginY='xs'
+                  text={text}
+              />
+            </Flex>
+          </Dialog.Body>
           <If condition={cancelButton && confirmButton}>
             <Dialog.Footer>
               <Button
@@ -131,16 +179,14 @@ const Dialog = (props: DialogProps) => {
               >
                 {confirmButton}
               </Button>
-              <Button
-                  id="cancel-button"
+              <Button id='cancel-button'
                   onClick={onCancel}
-                  variant="link"
+                  variant='link'
               >
                 {cancelButton}
               </Button>
             </Dialog.Footer>
           </If>
-
           {children}
         </Modal>
       </div>

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_default.jsx

@@ -11,7 +11,7 @@ const DialogDefault = () => {
     <>
       <Button onClick={open}>{'Open Dialog'}</Button>
       <Dialog
-          cancelButton="Cancel"
+          cancelButton="Cancel Button"
           className="wrapper"
           confirmButton="Okay"
           loading={isLoading}