playbook_ui 11.7.0.pre.alpha.pre.guagechart1 → 11.7.0

data/app/pb_kits/playbook/pb_lightbox/Carousel/Slides.tsx

@@ -10,19 +10,52 @@ type SlidesType = {
   current: number,
   onChange: (index: number) => void,
   onClick: (index: number) => void,
+  setIndex?: (index: number)=> void,
+
+
 }
 
 export default function Slides({
   urls = [],
   current = 0,
   onChange = noop,
+  setIndex,
+
 }: SlidesType): React.ReactElement {
   const [zooming, setZooming] = useState(false)
 
+  const [touchStart, setTouchStart] = useState(null)
+  const [touchEnd, setTouchEnd] = useState(null)
+
+const minSwipeDistance = 40 
+const onTouchStart = (e: React.TouchEvent) => {
+  setTouchEnd(null)
+  setTouchStart(e.targetTouches[0].clientX)
+}
+
+const onTouchMove = (e: React.TouchEvent) => setTouchEnd(e.targetTouches[0].clientX)
+
+const onTouchEnd = () => {
+  if (!touchStart || !touchEnd) return
+  const distance = touchStart - touchEnd
+  const isLeftSwipe = distance > minSwipeDistance
+  const isRightSwipe = distance < -minSwipeDistance
+  if (isLeftSwipe) {
+    setIndex(current < urls.length - 1 ? current + 1 : urls.length - 1)
+  } else if (isRightSwipe) {
+    setIndex(current > 0 ? current - 1 : 0)
+  }
+}
+
+
+
   const handleZoom = (isZooming: boolean) => setZooming(isZooming)
   return (
     <div
         className="Slides"
+        onTouchStart={onTouchStart} 
+        onTouchMove={onTouchMove} 
+        onTouchEnd={onTouchEnd}
     >
       <Slide
           onClick={() => onChange(current)}

data/app/pb_kits/playbook/pb_lightbox/Carousel/Thumbnails.tsx

@@ -28,10 +28,8 @@ export default function Thumbnails({
 }: ThumbnailsType): React.ReactElement {
   const viewportSize = useWindowSize()
   const thumbnailWidth = viewportSize.width / 8
-  const draggable = thumbnailWidth * urls.length > viewportSize.width
   const shouldBeCentered = (thumbnailWidth * urls.length) < (viewportSize.width * 0.9)
-  const css = classnames('Thumbnails', { draggable }, { centered: shouldBeCentered })
-
+  const css = classnames('Thumbnails', { centered: shouldBeCentered })
   const otherProps: { buttonRef?: React.RefObject<HTMLButtonElement> } = {}
 
   const thumbnailsRef: React.RefObject<HTMLDivElement>  = React.createRef()

data/app/pb_kits/playbook/pb_lightbox/Carousel/index.tsx

@@ -1,7 +1,6 @@
 /* eslint-disable jsx-control-statements/jsx-use-if-tag */
 import { noop } from 'lodash'
 import React, { useEffect } from 'react'
-
 import Slides from './Slides'
 import Thumbnails from './Thumbnails'
 
@@ -17,6 +16,7 @@ type CarouselType = {
   }[],
   onChange: (index: number) => void,
   onClick?: (index: number) => void,
+  setIndex?: (index: number)=> void,
 }
 
 export default function Carousel({
@@ -24,6 +24,7 @@ export default function Carousel({
   photos,
   onClick = noop,
   onChange = noop,
+  setIndex,
 }: CarouselType): React.ReactElement {
   useEffect(() => {
     document.body.style.overflow = 'hidden'
@@ -40,6 +41,7 @@ export default function Carousel({
   return (
     <div className="Lightbox">
       <Slides
+          setIndex={setIndex}
           current={currentIndex}
           onChange={handleChange}
           onClick={onClick}

data/app/pb_kits/playbook/pb_lightbox/{_lightbox_header.tsx → Header/_lightbox_header.tsx}

@@ -2,16 +2,16 @@
 /* @flow */
 import React, { useContext } from 'react'
 import classnames from 'classnames'
-import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
-import { globalProps, GlobalProps } from '../utilities/globalProps'
-import { LightboxContext } from './_lightbox_context'
+import { buildAriaProps, buildCss, buildDataProps } from '../../utilities/props'
+import { globalProps, GlobalProps } from '../../utilities/globalProps'
+import { LightboxContext } from '../_lightbox_context'
 import { LightboxHeaderIcon } from './_lightbox_header_icon'
-import { IconSizes } from '../pb_icon/_icon'
+import { IconSizes } from '../../pb_icon/_icon'
 
-import Caption from '../pb_caption/_caption'
-import Flex from '../pb_flex/_flex'
-import FlexItem from '../pb_flex/_flex_item'
-import Title from '../pb_title/_title'
+import Caption from '../../pb_caption/_caption'
+import Flex from '../../pb_flex/_flex'
+import FlexItem from '../../pb_flex/_flex_item'
+import Title from '../../pb_title/_title'
 
 type LightboxHeaderProps = {
   aria?: {[key: string]: string},

data/app/pb_kits/playbook/pb_lightbox/{_lightbox_header_icon.tsx → Header/_lightbox_header_icon.tsx}

@@ -1,8 +1,8 @@
 /* @flow */
 
 import React from 'react'
-import Icon from '../pb_icon/_icon'
-import {IconSizes} from '../pb_icon/_icon'
+import Icon from '../../pb_icon/_icon'
+import {IconSizes} from '../../pb_icon/_icon'
 
 type LightboxHeaderIconProps = {
   onClose: () => void,

data/app/pb_kits/playbook/pb_lightbox/_lightbox.tsx

@@ -3,7 +3,7 @@ import { useKbdControls } from './hooks/useKbdControls'
 import classnames from 'classnames'
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps'
-import LightboxHeader from './_lightbox_header'
+import LightboxHeader from './Header/_lightbox_header'
 import { LightboxContext } from './_lightbox_context'
 import { IconSizes } from '../pb_icon/_icon'
 
@@ -99,6 +99,7 @@ const Lightbox = (props: LightboxType): React.ReactNode => {
           />
             {children}
             <Carousel
+                setIndex={setActivePhoto}
                 currentIndex={activePhoto}
                 onChange={handleOnSlide}
                 photos={photosMap}

data/app/pb_kits/playbook/pb_lightbox/lightbox.scss

@@ -3,56 +3,7 @@
 
 $slides-margin: $space-md;
 
-.carousel {
-  .home-tour-main-content {
-    overflow-y: hidden;
-  }
-
-  .image-gallery-slide-wrapper {
-    width: 1024px;
-    height: 686px;
-  }
-
-  .image-gallery-slide div {
-    height: auto;
-  }
-
-  .image-gallery-slide .image-gallery-image {
-    max-height: 100% !important;
-    max-width: 100% !important;
-    height: 692px !important;
-    width: 100% !important;
-    object-fit: cover;
-  }
-
-  .image-gallery-left-nav .image-gallery-svg, .image-gallery-right-nav .image-gallery-svg {
-    height: 120px;
-    width: 30px;
-    opacity: 0.4;
-  }
-  .image-gallery-thumbnails {
-    overflow-x: auto;
-  }
-
-  .image-gallery-thumbnails-container {
-    width: 1024px;
-    padding-left: 4px;
-  }
-
-  .image-gallery-thumbnails {
-    padding-top: 3px;
-    background: #000;
-  }
-
-  .image-gallery-thumbnail-image {
-    height: 64px;
-    width: 93px;
-  }
-
-  .image-gallery-thumbnail + .image-gallery-thumbnail {
-    margin-left: 2px;
-    margin-top: 2px;
-  }
+ .carousel {
 
   .carousel-header {
     background: rgb(0, 0, 0);
@@ -92,12 +43,13 @@ $slides-margin: $space-md;
 
 .Lightbox {
   width: 100vw;
-  height: 100vh;
+  height: 100%;
   position: fixed;
   left: 0;
   top: 0;
   display: flex;
   align-items: center;
+  justify-content: space-between;
   flex-direction: column;
   background-color: black;
   z-index: 1;
@@ -189,21 +141,15 @@ $slides-margin: $space-md;
 
 .Thumbnails {
   display: flex;
+  width: 100vw;
   padding: 3px;
-  overflow: auto;
-  position: absolute;
-  z-index: 1;
-  left: 0;
-  right: 0;
-  bottom: 0;
+  overflow: scroll;
+  z-index: 20;
   &.centered {
     justify-content: center;
   }
 }
 
-.Thumbnails.draggable {
-  align-self: flex-start;
-}
 
 .Thumbnail {
   padding: 3px;
@@ -217,6 +163,8 @@ $slides-margin: $space-md;
 
 .Thumbnail.active {
   padding: 6px;
+  display: flex;
+  align-items: center;
   background-color: white;
   box-shadow: 0 0 6px white;
 }

data/app/pb_kits/playbook/pb_section_separator/_section_separator.tsx

@@ -7,13 +7,13 @@ import { globalProps } from '../utilities/globalProps'
 import Caption from '../pb_caption/_caption'
 
 type SectionSeparatorProps = {
-  aria: { [key: string]: string; },
-  className: string,
+  aria?: { [key: string]: string; },
+  className?: string,
   dark?: boolean,
-  data: { [key: string]: string; },
-  id: string,
+  data?: { [key: string]: string; },
+  id?: string,
   orientation?: "horizontal" | "vertical",
-  text: string,
+  text?: string,
   variant?: "card" | "background",
 }
 

data/app/pb_kits/playbook/pb_title/_title.tsx

@@ -10,7 +10,7 @@ type TitleProps = {
   color?: "default" | "light" | "lighter" | "success" | "error" | "link",
   data?: {[key: string]: string},
   id?: string,
-  size?: 1 | 2 | 3 | 4,
+  size?: 1 | 2| 3| 4 | "1" | "2" | "3" | "4",
   tag?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "div" | "span",
   text?: string,
   variant?: null | "link",

data/app/pb_kits/playbook/playbook-rails.js

@@ -6,7 +6,7 @@ window.pbChart = pbChart
 import './pb_form/pb_form_validation'
 
 // Date Picker
-import datePickerHelper from './pb_date_picker/date_picker_helper.js'
+import datePickerHelper from './pb_date_picker/date_picker_helper'
 window.datePickerHelper = datePickerHelper
 
 // Lazy image loading

data/app/pb_kits/playbook/tokens/_spacing.scss

@@ -1,9 +1,11 @@
+$space_xxs:   4px;
 $space_xs:    8px;
 $space_sm:    16px;
 $space_md:    24px;
 $space_lg:    32px;
 $space_xl:    40px;
 $spaces:(
+  space_xxs:  $space_xxs,
   space_xs:   $space_xs,
   space_sm:   $space_sm,
   space_md:   $space_md,

data/app/pb_kits/playbook/utilities/_spacing.scss

@@ -1,6 +1,7 @@
 @import "../tokens/spacing";
 
 $space_classes: (
+	xxs: $space_xxs,
 	xs: $space_xs,
 	sm: $space_sm,
 	md: $space_md,

data/lib/playbook/spacing.rb

@@ -40,7 +40,7 @@ module Playbook
     end
 
     def spacing_values
-      %w[none xs sm md lg xl]
+      %w[none xxs xs sm md lg xl]
     end
 
     def spacing_props

data/lib/playbook/version.rb

@@ -2,5 +2,5 @@
 
 module Playbook
   PREVIOUS_VERSION = "11.6.0"
-  VERSION = "11.7.0.pre.alpha-guagechart1"
+  VERSION = "11.7.0"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 11.7.0.pre.alpha.pre.guagechart1
+  version: 11.7.0
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2022-09-26 00:00:00.000000000 Z
+date: 2022-09-30 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -653,12 +653,12 @@ files:
 - app/pb_kits/playbook/pb_date/docs/_description.md
 - app/pb_kits/playbook/pb_date/docs/example.yml
 - app/pb_kits/playbook/pb_date/docs/index.js
-- app/pb_kits/playbook/pb_date_picker/_date_picker.jsx
 - app/pb_kits/playbook/pb_date_picker/_date_picker.scss
+- app/pb_kits/playbook/pb_date_picker/_date_picker.tsx
 - app/pb_kits/playbook/pb_date_picker/date_picker.html.erb
 - app/pb_kits/playbook/pb_date_picker/date_picker.rb
 - app/pb_kits/playbook/pb_date_picker/date_picker.test.js
-- app/pb_kits/playbook/pb_date_picker/date_picker_helper.js
+- app/pb_kits/playbook/pb_date_picker/date_picker_helper.ts
 - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_anti_patterns.html.erb
 - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default.html.erb
 - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default.jsx
@@ -713,7 +713,7 @@ files:
 - app/pb_kits/playbook/pb_date_picker/docs/_description.md
 - app/pb_kits/playbook/pb_date_picker/docs/example.yml
 - app/pb_kits/playbook/pb_date_picker/docs/index.js
-- app/pb_kits/playbook/pb_date_picker/plugins/timeSelect.js
+- app/pb_kits/playbook/pb_date_picker/plugins/timeSelect.ts
 - app/pb_kits/playbook/pb_date_picker/sass_partials/_calendar_input_icon.scss
 - app/pb_kits/playbook/pb_date_picker/sass_partials/_day_styles.scss
 - app/pb_kits/playbook/pb_date_picker/sass_partials/_flatpickr_styles.scss
@@ -733,18 +733,20 @@ files:
 - app/pb_kits/playbook/pb_date_range_inline/docs/_description.md
 - app/pb_kits/playbook/pb_date_range_inline/docs/example.yml
 - app/pb_kits/playbook/pb_date_range_inline/docs/index.js
-- app/pb_kits/playbook/pb_date_range_stacked/_date_range_stacked.jsx
 - app/pb_kits/playbook/pb_date_range_stacked/_date_range_stacked.scss
+- app/pb_kits/playbook/pb_date_range_stacked/_date_range_stacked.tsx
 - app/pb_kits/playbook/pb_date_range_stacked/date_range_stacked.html.erb
 - app/pb_kits/playbook/pb_date_range_stacked/date_range_stacked.rb
+- app/pb_kits/playbook/pb_date_range_stacked/date_range_stacked.test.js
 - app/pb_kits/playbook/pb_date_range_stacked/docs/_date_range_stacked_default.html.erb
 - app/pb_kits/playbook/pb_date_range_stacked/docs/_date_range_stacked_default.jsx
 - app/pb_kits/playbook/pb_date_range_stacked/docs/example.yml
 - app/pb_kits/playbook/pb_date_range_stacked/docs/index.js
-- app/pb_kits/playbook/pb_date_stacked/_date_stacked.jsx
 - app/pb_kits/playbook/pb_date_stacked/_date_stacked.scss
+- app/pb_kits/playbook/pb_date_stacked/_date_stacked.tsx
 - app/pb_kits/playbook/pb_date_stacked/date_stacked.html.erb
 - app/pb_kits/playbook/pb_date_stacked/date_stacked.rb
+- app/pb_kits/playbook/pb_date_stacked/date_stacked.test.js
 - app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_align.html.erb
 - app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_align.jsx
 - app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_bold.html.erb
@@ -796,14 +798,14 @@ files:
 - app/pb_kits/playbook/pb_date_year_stacked/docs/_footer.md
 - app/pb_kits/playbook/pb_date_year_stacked/docs/example.yml
 - app/pb_kits/playbook/pb_date_year_stacked/docs/index.js
-- app/pb_kits/playbook/pb_dialog/_close_icon.jsx
+- app/pb_kits/playbook/pb_dialog/_close_icon.tsx
 - app/pb_kits/playbook/pb_dialog/_dialog.html.erb
-- app/pb_kits/playbook/pb_dialog/_dialog.jsx
 - app/pb_kits/playbook/pb_dialog/_dialog.scss
-- app/pb_kits/playbook/pb_dialog/_dialog_context.jsx
-- app/pb_kits/playbook/pb_dialog/child_kits/_dialog_body.jsx
-- app/pb_kits/playbook/pb_dialog/child_kits/_dialog_footer.jsx
-- app/pb_kits/playbook/pb_dialog/child_kits/_dialog_header.jsx
+- app/pb_kits/playbook/pb_dialog/_dialog.tsx
+- app/pb_kits/playbook/pb_dialog/_dialog_context.tsx
+- app/pb_kits/playbook/pb_dialog/child_kits/_dialog_body.tsx
+- app/pb_kits/playbook/pb_dialog/child_kits/_dialog_footer.tsx
+- app/pb_kits/playbook/pb_dialog/child_kits/_dialog_header.tsx
 - app/pb_kits/playbook/pb_dialog/dialog.rb
 - app/pb_kits/playbook/pb_dialog/dialog.test.jsx
 - app/pb_kits/playbook/pb_dialog/dialog_header.rb
@@ -1251,10 +1253,10 @@ files:
 - app/pb_kits/playbook/pb_lightbox/Carousel/Thumbnail.tsx
 - app/pb_kits/playbook/pb_lightbox/Carousel/Thumbnails.tsx
 - app/pb_kits/playbook/pb_lightbox/Carousel/index.tsx
+- app/pb_kits/playbook/pb_lightbox/Header/_lightbox_header.tsx
+- app/pb_kits/playbook/pb_lightbox/Header/_lightbox_header_icon.tsx
 - app/pb_kits/playbook/pb_lightbox/_lightbox.tsx
 - app/pb_kits/playbook/pb_lightbox/_lightbox_context.tsx
-- app/pb_kits/playbook/pb_lightbox/_lightbox_header.tsx
-- app/pb_kits/playbook/pb_lightbox/_lightbox_header_icon.tsx
 - app/pb_kits/playbook/pb_lightbox/docs/_lightbox_compound_component.jsx
 - app/pb_kits/playbook/pb_lightbox/docs/_lightbox_compound_component.md
 - app/pb_kits/playbook/pb_lightbox/docs/_lightbox_default.jsx
@@ -2300,9 +2302,9 @@ required_ruby_version: !ruby/object:Gem::Requirement
       version: '0'
 required_rubygems_version: !ruby/object:Gem::Requirement
   requirements:
-  - - ">"
+  - - ">="
     - !ruby/object:Gem::Version
-      version: 1.3.1
+      version: '0'
 requirements: []
 rubygems_version: 3.3.7
 signing_key:

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

@@ -1,137 +0,0 @@
-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