playbook_ui 10.19.0.pre.lightbox → 10.19.0.pre.popover.alpha1

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

@@ -1,54 +0,0 @@
-/* eslint-disable jsx-control-statements/jsx-use-if-tag */
-/* @flow */
-
-import { noop } from 'lodash'
-import React, { useState } from 'react'
-
-import Slides from './Slides'
-import Thumbnails from './Thumbnails'
-import useUnscrollableBody from './useUnscrollableBody'
-
-import styles from './styles.scss'
-
-type CarouselType = {
-  initialPhoto: string,
-  onClose: Function,
-  icon: string,
-  iconSize: number,
-  current: number,
-  photos: Array<string>,
-  onChange: (index: number) => void,
-  onClick: (index: number) => void,
-}
-
-export default function Carousel({
-  current = 0,
-  photos,
-  onClick = noop,
-  onChange = noop,
-}: CarouselType) {
-  useUnscrollableBody()
-  const [currentIndex, setCurrentIndex] = useState(current)
-  const handleChange = (index) => {
-    setCurrentIndex(index)
-    onChange(index)
-  }
-
-  return (
-    <div className={styles.Lightbox}>
-      <Slides
-          current={currentIndex}
-          onChange={handleChange}
-          onClick={onClick}
-          urls={photos.map((photo) => photo.url)}
-      />
-      {photos.length > 1 ? (
-        <Thumbnails
-            current={currentIndex}
-            onChange={handleChange}
-            urls={photos.map((photo) => photo.thumbnail)}
-        />
-      ) : null}
-    </div>
-  )
-}

data/app/pb_kits/playbook/pb_lightbox/Carousel/styles.scss

@@ -1,110 +0,0 @@
-.Lightbox {
-    width: 100vw;
-    height: 100vh;
-    position: fixed;
-    left: 0;
-    top: 0;
-    display: flex;
-    align-items: center;
-    flex-direction: column;
-    background-color: black;
-    z-index: 1;
-    overflow: hidden;
-  }
-  
-  .Slides {
-    display: flex;
-    flex-grow: 1;
-    height: calc(100% - 100px);
-    width: 100%;
-    z-index: 1;
-  
-    [class^="react-transform-wrapper"] {
-      flex-shrink: 0;
-      width: 100%;
-      height: 100%;
-    }
-  
-    [class^="react-transform-content"] {
-      width: 100%;
-      height: 100%;
-    }
-  }
-  
-  .Slide,
-  .Thumbnail {
-    flex-shrink: 0;
-    border: none;
-    margin: 0;
-    padding: 0;
-    cursor: pointer;
-    background-color: transparent;
-  }
-  
-  .Slide {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    width: 100%;
-    height: 100%;
-    overflow: hidden;
-  
-    img {
-      width: 100vw;
-      height: 100vh;
-      object-fit: contain;
-    }
-  }
-  
-  .BackBtn,
-  .NextBtn {
-    z-index: 2;
-    color: black;
-    position: absolute;
-    width: 50px;
-    height: 50px;
-    top: calc(50vh - 5px);
-    border: none;
-    border-radius: 50%;
-    background-color: white;
-  }
-  
-  .BackBtn::before,
-  .NextBtn::before {
-    content: "▸";
-  }
-  
-  .BackBtn {
-    left: 30px;
-    transform: rotate(180deg);
-  }
-  
-  .NextBtn {
-    right: 30px;
-  }
-  
-  .Thumbnails {
-    display: flex;
-    padding: 3px;
-  }
-  
-  .Thumbnails.draggable {
-    align-self: flex-start;
-  }
-  
-  .Thumbnail {
-    padding: 3px;
-    height: 100%;
-  
-    img {
-      width: 100%;
-      height: 100%;
-    }
-  }
-  
-  .Thumbnail.active {
-    padding: 6px;
-    background-color: white;
-    box-shadow: 0 0 6px white;
-  }
-  

data/app/pb_kits/playbook/pb_lightbox/Carousel/useSlides.js

@@ -1,66 +0,0 @@
-// @flow
-
-import { noop } from 'lodash'
-import { useEffect, useState } from 'react'
-import { useAnimation } from 'framer-motion/dist/framer-motion'
-import { useWindowSize } from '../hooks/useWindowSize'
-
-const cycleIndex = (current: number, min: number, max: number): number => {
-  if (current < min) return max
-  if (current > max) return min
-  return current
-}
-
-const swipeConfidenceThreshold = 10000
-const swipePower = (offset: number, velocity: number) => {
-  return Math.abs(offset) * velocity
-}
-
-export default function useSlides({
-  current = 0,
-  pagesCount = 0,
-  onChange = noop,
-}) {
-  const controls = useAnimation()
-  const viewportSize = useWindowSize()
-  const [currentIndex, setCurrentIndex] = useState(current)
-  const dragConstraints = {
-    left: -viewportSize.width * (pagesCount - 1),
-    right: 0,
-  }
-
-  const paginate = (newDirection: number) => {
-    const nextIndex = currentIndex + newDirection
-    const cycledNextIndex = cycleIndex(nextIndex, 0, pagesCount - 1)
-    setCurrentIndex(cycledNextIndex)
-    return cycledNextIndex
-  }
-
-  const handleDragEnd = (e, { offset, velocity }) => {
-    let nextIndex = currentIndex
-    const swipe = swipePower(offset.x, velocity.x)
-
-    if (swipe < -swipeConfidenceThreshold) {
-      nextIndex = paginate(1)
-    } else if (swipe > swipeConfidenceThreshold) {
-      nextIndex = paginate(-1)
-    }
-
-    controls.start({ x: -viewportSize.width * nextIndex })
-
-    if (nextIndex !== currentIndex) {
-      onChange(nextIndex)
-    }
-  }
-
-  useEffect(() => {
-    controls.set({ x: -viewportSize.width * current })
-    setCurrentIndex(current)
-  }, [controls, current, viewportSize.width])
-
-  return {
-    controls,
-    dragConstraints,
-    handleDragEnd,
-  }
-}

data/app/pb_kits/playbook/pb_lightbox/Carousel/useUnscrollableBody.js

@@ -1,11 +0,0 @@
-import { useEffect } from 'react'
-
-export default function useUnscrollableBody() {
-  useEffect(() => {
-    document.body.style.overflow = 'hidden'
-
-    return () => {
-      document.body.style.overflow = 'initial'
-    }
-  }, [])
-}

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

@@ -1,81 +0,0 @@
-/* eslint-disable no-unused-vars */
-/* @flow */
-
-import React, { useState } from 'react'
-import classnames from 'classnames'
-import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props.js'
-import { globalProps } from '../utilities/globalProps.js'
-import Icon from '../pb_icon/_icon'
-
-import Carousel from './Carousel/index.jsx'
-
-type LightboxType = {
-  aria?: object,
-  className?: string,
-  data?: object,
-  id?: string,
-  photos: [],
-  initialPhoto: string,
-  onClose: Function,
-  icon: string,
-  iconSize: number,
-}
-
-const Lightbox = (props: LightboxType) => {
-  const {
-    aria = {},
-    className,
-    data = {},
-    id = '',
-    photos,
-    initialPhoto,
-    onClose,
-    icon,
-    iconSize,
-  } = props
-  const [activePhoto, setActivePhoto] = useState(initialPhoto)
-
-  const ariaProps = buildAriaProps(aria)
-  const dataProps = buildDataProps(data)
-  const classes = classnames(
-    buildCss('pb_lightbox_kit'),
-    globalProps(props),
-    className
-  )
-  const handleOnSlide = (index) => {
-    setActivePhoto(photos[index])
-  }
-  return (
-    <div
-        {...ariaProps}
-        {...dataProps}
-        className={classes}
-        id={id}
-    >
-      <div className="carousel">
-        <div className="carousel-header">
-          <div
-              className="close-icon"
-              onClick={onClose}
-          >
-            <Icon
-                icon={icon}
-                size={iconSize}
-            />
-          </div>
-          <div className="active-photo-overlay" />
-        </div>
-        <Carousel
-            current={photos.indexOf(initialPhoto)}
-            onChange={handleOnSlide}
-            photos={photos.map((photo) => ({
-            url: photo,
-            thumbnail: photo,
-          }))}
-        />
-      </div>
-    </div>
-  )
-}
-
-export default Lightbox

data/app/pb_kits/playbook/pb_lightbox/docs/_lightbox_default.jsx

@@ -1,65 +0,0 @@
-/* @flow */
-/* eslint-disable jsx-control-statements/jsx-use-if-tag */
-import React, { useState } from 'react'
-import { useToggler } from '../hooks/useToggler.js'
-import { Flex, Image } from '../../'
-import Lightbox from '../_lightbox'
-
-const LightboxDefault = (props) => {
-  const photos = [
-    'https://images.unsplash.com/photo-1638727228877-d2a79ab75e68?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2668&q=80',
-  ]
-  const [selectedPhoto, setSelectedPhoto] = useState(photos[0])
-  const [showLightbox, toggleShowLightbox] = useToggler()
-
-  const handleCloseLightbox = () => {
-    toggleShowLightbox()
-    setSelectedPhoto(null)
-  }
-
-  const onPhotoClick = (photo) => {
-    toggleShowLightbox()
-    setSelectedPhoto(photo)
-  }
-
-  return (
-    <>
-      <div>
-        {showLightbox ? (
-          <Lightbox
-              icon="times"
-              iconSize="2x"
-              initialPhoto={selectedPhoto}
-              onClose={handleCloseLightbox}
-              photos={photos}
-              {...props}
-          />
-        ) : (
-          <div className="PhotoViewer">
-            <Flex>
-              {photos.map((photo, index) => {
-                return (
-                  <div
-                      key={photo[index]}
-                      onClick={() => onPhotoClick(photo)}
-                  >
-                    <Image
-                        marginRight="xl"
-                        rounded
-                        size="lg"
-                        url={photo}
-                    />
-
-                    <div className="overlay" />
-                  </div>
-                )
-              })}
-            </Flex>
-          </div>
-        )}
-      </div>
-    </>
-  )
-}
-
-export default LightboxDefault

data/app/pb_kits/playbook/pb_lightbox/docs/_lightbox_default.md

@@ -1 +0,0 @@
-Lightbox contains 5 props: `photos` (an array of urls), `initialPhoto` (a number ), an `onClose` callback function, an `icon` prop that matches to our `Icon` kit, and an `iconSize` prop that also corresponds to our icon kit. 

data/app/pb_kits/playbook/pb_lightbox/docs/_lightbox_multiple.jsx

@@ -1,65 +0,0 @@
-/* @flow */
-/* eslint-disable jsx-control-statements/jsx-use-if-tag */
-import React, { useState } from 'react'
-import { useToggler } from '../hooks/useToggler.js'
-import { Flex, Image } from '../../'
-import Lightbox from '../_lightbox.jsx'
-
-const LightboxMultiple = (props) => {
-  const photos = [
-    'https://images.unsplash.com/photo-1638727228877-d2a79ab75e68?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2668&q=80',
-    'https://images.unsplash.com/photo-1526657782461-9fe13402a841?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1984&q=80',
-    'https://images.unsplash.com/photo-1523057530100-383d7fbc77a1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2669&q=80',
-  ]
-  const [selectedPhoto, setSelectedPhoto] = useState(photos[0])
-  const [light, toggleLight] = useToggler()
-
-  const handleCloseLightbox = () => {
-    toggleLight()
-    setSelectedPhoto(null)
-  }
-
-  const onPhotoClick = (photo) => {
-    toggleLight()
-    setSelectedPhoto(photo)
-  }
-
-  return (
-    <div>
-      {light ? (
-        <Lightbox
-            icon="times"
-            iconSize="2x"
-            initialPhoto={selectedPhoto}
-            onClose={handleCloseLightbox}
-            photos={photos}
-            {...props}
-        />
-      ) : (
-        <div className="PhotoViewer">
-          <Flex>
-            {photos.map((photo, index) => {
-              return (
-                <div
-                    key={photos[index]}
-                    onClick={() => onPhotoClick(photo)}
-                >
-                  <Image
-                      marginRight="xl"
-                      rounded
-                      size="lg"
-                      url={photo}
-                  />
-
-                  <div className="overlay" />
-                </div>
-              )
-            })}
-          </Flex>
-        </div>
-      )}
-    </div>
-  )
-}
-
-export default LightboxMultiple

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

@@ -1,6 +0,0 @@
-examples:
-  
-  react:
-  - lightbox_default: Default
-  - lightbox_multiple: Multiple
-  

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

@@ -1,2 +0,0 @@
-export { default as LightboxDefault } from './_lightbox_default.jsx'
-export { default as LightboxMultiple } from './_lightbox_multiple.jsx'

data/app/pb_kits/playbook/pb_lightbox/hooks/useToggler.js

@@ -1,10 +0,0 @@
-/* @flow */
-
-import { useState } from 'react'
-
-export const useToggler = (startValue: boolean = false) => {
-  const [show, toggle] = useState(startValue)
-  const toggler = () => toggle(!show)
-
-  return [show, toggler]
-}

data/app/pb_kits/playbook/pb_lightbox/hooks/useVisibility.js

@@ -1,21 +0,0 @@
-import { debounce } from 'lodash'
-import { useCallback, useMemo, useState } from 'react'
-
-export default function useVisibility(initialState = false) {
-  const [visible, setVisible] = useState(initialState)
-  const hide = useCallback(() => setVisible(false), [])
-  const show = useCallback(({ afterDelay = 0 } = {}) => {
-    debounce(() => setVisible(true), afterDelay)()
-  }, [])
-  const toggle = useCallback(() => setVisible((current) => !current), [])
-
-  return useMemo(
-    () => ({
-      hide,
-      show,
-      toggle,
-      visible,
-    }),
-    [hide, show, toggle, visible]
-  )
-}

data/app/pb_kits/playbook/pb_lightbox/hooks/useWindowSize.js

@@ -1,25 +0,0 @@
-import { useEffect, useState } from 'react'
-
-export const useWindowSize = () => {
-  const [size, setSize] = useState({
-    width: window.innerWidth,
-    height: window.innerHeight,
-  })
-
-  useEffect(() => {
-    const handleResize = () => {
-      setSize({
-        width: window.innerWidth,
-        height: window.innerHeight,
-      })
-    }
-
-    window.addEventListener('resize', handleResize)
-
-    handleResize()
-
-    return () => window.removeEventListener('resize', handleResize)
-  }, [])
-
-  return size
-}

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

@@ -1,92 +0,0 @@
-@import "../tokens/spacing";
-
-  .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-header {
-      background: rgb(0, 0, 0);
-      border-radius: 0px;
-      min-height: 51px;
-      width: 100%;
-      position: fixed;
-      top: 0;
-      left: 0;
-      z-index: 2;
-      display: flex;
-      align-items: center;
-      padding: $space-sm;
-      transition: all .5s;
-
-      .close-icon {
-        color: white;
-        margin-left: 16px;
-        top: 16px;
-        position: absolute;
-      }
-    }
-  }
-
-  .photo-cards {
-    .overlay {
-      width: 100% !important;
-      height: 50% !important;
-      bottom: 0;
-      position: absolute !important;
-      border-radius: 0px 0px 5px 5px;
-      background: linear-gradient(-180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.77) 100%);
-    }
-
-    .overlay,
-    .overlay ~ .key-photo-icon,
-    .overlay ~ .tag-counter {
-      pointer-events: none;
-    }
-  }

data/app/pb_kits/playbook/pb_lightbox/lightbox.test.jsx

@@ -1,30 +0,0 @@
-import React from 'react'
-import { render, screen } from '../utilities/test-utils'
-
-import { Lightbox } from '../'
-
-const testId = 'customId',
-  kitClass = 'pb_lightbox_kit'
-
-test('Lightbox Test', () => {
-  render(
-    <Lightbox
-        className="customClass"
-        data={{ testid: testId }}
-        icon="close"
-        iconSize="3x"
-        id="test1"
-        initialPhoto="https://images.unsplash.com/photo-1518791841217-8f162f1e1131?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60"
-        onClose={() => {}}
-        photos={[
-        'https://images.unsplash.com/photo-1518791841217-8f162f1e1131?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60',
-        'https://images.unsplash.com/photo-1518791841217-8f162f1e1131?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60',
-        'https://images.unsplash.com/photo-1518791841217-8f162f1e1131?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60',
-        'https://images.unsplash.com/photo-1518791841217-8f162f1e1131?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60',
-      ]}
-    />
-  )
-  const kit = screen.getByTestId(testId)
-  expect(kit).toHaveClass(`${kitClass} customClass`)
-  expect(kit).toBeInTheDocument()
-})