playbook_ui 10.19.0 → 10.21.0.pre.alpha.lightbox

data/app/pb_kits/playbook/pb_file_upload/_file_upload.jsx

@@ -4,7 +4,7 @@ import React, { useCallback } from 'react'
 import { useDropzone } from 'react-dropzone'
 import classnames from 'classnames'
 
-import { buildCss, noop } from '../utilities/props'
+import { buildCss, buildDataProps, noop } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps'
 import type { Callback } from '../types'
 
@@ -14,15 +14,17 @@ import Card from '../pb_card/_card'
 type FileUploadProps = {
   accept?: array<string>,
   className?: string,
+  data?: object,
   acceptedFilesDescription?: string,
   onFilesAccepted: Callback,
 }
 
 const FileUpload = (props: FileUploadProps) => {
   const {
-    accept = ['*'],
+    accept = null,
     acceptedFilesDescription = '',
     className,
+    data = {},
     onFilesAccepted = noop,
   } = props
   const onDrop = useCallback((files) => {
@@ -34,17 +36,22 @@ const FileUpload = (props: FileUploadProps) => {
     onDrop,
   })
 
-  const acceptedFileTypes = accept.map((fileType) => {
-    if (fileType.startsWith('image/')) {
-      return fileType.replace('image/', ' ')
-    } else {
-      return fileType
-    }
-  })
+  const acceptedFileTypes = () => {
+    return accept.map((fileType) => {
+      if (fileType.startsWith('image/')) {
+        return fileType.replace('image/', ' ')
+      } else {
+        return fileType
+      }
+    })
+  }
+
+  const dataProps = buildDataProps(data)
 
   return (
     <div
         className={classnames(buildCss('pb_file_upload_kit'), globalProps(props), className)}
+        {...dataProps}
         {...getRootProps()}
     >
       <Card>
@@ -53,7 +60,7 @@ const FileUpload = (props: FileUploadProps) => {
           <If condition={isDragActive}>
             <p>{'Drop the files here ...'}</p>
             <Else />
-            <p>{`Choose a file or drag it here. The accepted file types are: ${acceptedFilesDescription || acceptedFileTypes}`}</p>
+            <p>{accept === null ? 'Choose a file or drag it here' : `Choose a file or drag it here. The accepted file types are: ${acceptedFilesDescription || acceptedFileTypes()}`}</p>
           </If>
         </Body>
       </Card>

data/app/pb_kits/playbook/pb_file_upload/fileupload.test.js

@@ -0,0 +1,40 @@
+import React from 'react'
+import { render, screen } from '../utilities/test-utils'
+
+import FileUpload from './_file_upload'
+
+const testid = 'fileupload-test'
+
+test('returns namespaced class name', () => {
+  render(
+    <FileUpload
+        data={{ testid: testid }}
+    />
+  )
+
+  const kit = screen.getByTestId(testid)
+  expect(kit).toHaveClass('pb_file_upload_kit')
+})
+
+test('shows default drag text', () => {
+  render(
+    <FileUpload
+        data={{ testid: testid }}
+    />
+  )
+
+  const kit = screen.getByTestId(testid)
+  expect(kit).toHaveTextContent('Choose a file or drag it here')
+})
+
+test('shows type-specific drag text', () => {
+  render(
+    <FileUpload
+        accept={['image/svg+xml']}
+        data={{ testid: testid }}
+    />
+  )
+
+  const kit = screen.getByTestId(testid)
+  expect(kit).toHaveTextContent('Choose a file or drag it here. The accepted file types are: svg+xml')
+})

data/app/pb_kits/playbook/pb_gauge/_gauge.jsx

@@ -12,6 +12,7 @@ type GaugeProps = {
   aria: Object,
   className?: string,
   chartData?: array,
+  dark?: Boolean,
   data?: Object,
   disableAnimation: boolean,
   fullCircle: boolean,
@@ -33,6 +34,7 @@ const Gauge = (props: GaugeProps) => {
     aria = {},
     className,
     chartData = [{ name: 'Name', value: 0 }],
+    dark = false,
     data = {},
     disableAnimation = false,
     fullCircle = false,
@@ -67,6 +69,7 @@ const Gauge = (props: GaugeProps) => {
       id: id,
       chartData: formattedChartData,
       circumference: fullCircle ? [0, 360] : [-100, 100],
+      dark,
       disableAnimation: disableAnimation,
       height: height,
       min: min,

data/app/pb_kits/playbook/pb_gauge/gauge.rb

@@ -32,6 +32,7 @@ module Playbook
           id: id,
           chartData: chart_data_formatted,
           circumference: full_circle ? [0, 360] : [-100, 100],
+          dark: dark ? "dark" : "",
           disableAnimation: disable_animation,
           height: height,
           min: min,

data/app/pb_kits/playbook/pb_image/_image.jsx

@@ -34,7 +34,7 @@ const Image = (props: ImageProps) => {
 
   const ariaProps = buildAriaProps(aria)
   const classes = classnames(
-    buildCss('pb_image_kit', size),
+    buildCss('pb_image_kit', size ? `size_${size}` : null),
     'lazyload',
     transition,
     { rounded },

data/app/pb_kits/playbook/pb_image/_image.scss

@@ -14,7 +14,7 @@ $image-sizes: (
   object-fit: cover;
 
   @each $name, $size in $image-sizes {
-    &[class*=_#{$name}] {
+    &[class*=size_#{$name}] {
       width: $size;
       height: $size;
       object-fit: cover;
@@ -35,7 +35,7 @@ $image-sizes: (
         transition: opacity 300ms ease-in;
       }
     }
-    
+
     &.blur {
       filter: blur(5px);
       &.lazyloaded {
@@ -44,7 +44,7 @@ $image-sizes: (
         transition: filter 300ms ease-in;
       }
     }
-    
+
     &.scale {
       opacity: 0;
       transform: scale(0.9);

data/app/pb_kits/playbook/pb_image/image.rb

@@ -27,7 +27,7 @@ module Playbook
       end
 
       def size_class
-        size == "none" ? nil : "_#{size}"
+        size == "none" ? nil : "_size_#{size}"
       end
 
       def transition_class

data/app/pb_kits/playbook/pb_image/image.test.js

@@ -26,7 +26,7 @@ test('default classname', () => {
 
 test('size = xs', () => {
   const kit = renderKit(Image, props, { size: 'xs' })
-  expect(kit).toHaveClass('pb_image_kit_xs lazyload')
+  expect(kit).toHaveClass('pb_image_kit_size_xs lazyload')
 })
 
 test('transition = blur', () => {

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

@@ -0,0 +1,55 @@
+/* @flow */
+
+import React from 'react'
+import { noop } from 'lodash'
+import { TransformComponent, TransformWrapper } from 'react-zoom-pan-pinch'
+import Image from '../../pb_image/_image'
+
+import styles from './styles.scss'
+
+type SlideType = {
+  alt: string,
+  current: number,
+  onClick: () => void,
+  onChange: (index: number) => void,
+  onZoom: (zoom: number) => void,
+  zooming: boolean,
+  url: string,
+}
+
+export default function Slide({
+  alt,
+  onClick = noop,
+  onZoom = noop,
+  url,
+  zooming = false,
+}: SlideType) {
+  const handlePinchingStop = (e) => {
+    const isZooming = e.state.scale > 1
+    onZoom(isZooming)
+  }
+
+  return (
+    <TransformWrapper
+        doubleClick={{ mode: 'reset' }}
+        initialScale={1}
+        onPinchingStop={handlePinchingStop}
+        panning={{ disabled: !zooming }}
+    >
+      <button
+          className={styles.Slide}
+          onClick={onClick}
+          onDoubleClick={() => onZoom(false)}
+          tabIndex={-1}
+      >
+        <TransformComponent className={styles.TransformComponent}>
+          <Image
+              alt={alt}
+              url={url}
+              zIndex="3"
+          />
+        </TransformComponent>
+      </button>
+    </TransformWrapper>
+  )
+}

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

@@ -0,0 +1,54 @@
+/* @flow */
+
+import { noop } from 'lodash'
+import { motion } from 'framer-motion'
+import React, { useState } from 'react'
+
+import Slide from './Slide'
+import styles from './styles.scss'
+import useSlides from './useSlides'
+
+type SlidesType = {
+  urls: Array<string>,
+  current: number,
+  onChange: (index: number) => void,
+  onClick: (index: number) => void,
+}
+
+export default function Slides({
+  urls = [],
+  current = 0,
+  onClick = noop,
+  onChange = noop,
+}: SlidesType) {
+  const [zooming, setZooming] = useState(false)
+  const { controls, dragConstraints, handleDragEnd } = useSlides({
+    current,
+    pagesCount: urls.length,
+    onChange,
+  })
+
+  const handleZoom = (isZooming) => setZooming(isZooming)
+
+  return (
+    <motion.div
+        animate={controls}
+        className={styles.Slides}
+        drag={!zooming && 'x'}
+        dragConstraints={dragConstraints}
+        dragElastic={0.05}
+        onDragEnd={handleDragEnd}
+        transition={{ type: 'spring', bounce: 0 }}
+    >
+      {urls.map((url, i) => (
+        <Slide
+            key={i}
+            onClick={() => onClick(i)}
+            onZoom={handleZoom}
+            url={url}
+            zooming={zooming}
+        />
+      ))}
+    </motion.div>
+  )
+}

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

@@ -0,0 +1,39 @@
+/* @flow */
+
+import React from 'react'
+import { noop } from 'lodash'
+import classnames from 'classnames'
+import Image from '../../pb_image/_image'
+
+import styles from './styles.scss'
+
+type ThumbnailType = {
+  active?: boolean,
+  alt?: string,
+  onClick: () => void,
+  url: string,
+  width?: string,
+}
+
+export default function Thumbnail({
+  active = false,
+  alt,
+  width,
+  url,
+  onClick = noop,
+}: ThumbnailType) {
+  return (
+    <button
+        className={classnames(styles.Thumbnail, { [styles.active]: active })}
+        onClick={onClick}
+        style={{ width }}
+        type="button"
+    >
+      <Image
+          alt={alt}
+          size="sm"
+          url={url}
+      />
+    </button>
+  )
+}

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

@@ -0,0 +1,82 @@
+/* @flow */
+
+import { noop } from 'lodash'
+import classnames from 'classnames'
+import React, { useEffect } from 'react'
+import { motion, useAnimation } from 'framer-motion'
+import { useWindowSize } from '../hooks/useWindowSize'
+
+import Thumbnail from './Thumbnail'
+
+import styles from './styles.scss'
+
+export const indexWithinBounds = (
+  current: number,
+  min: number,
+  max: number
+): number => {
+  if (current < min) return 0
+  if (current > max) return max
+  return current
+}
+
+type ThumbnailsType = {
+  current: number,
+  onChange: () => null,
+  urls: [],
+}
+
+export default function Thumbnails({
+  current = 0,
+  onChange = noop,
+  urls = [],
+}: ThumbnailsType) {
+  const controls = useAnimation()
+  const viewportSize = useWindowSize()
+  const thumbnailWidth = viewportSize.width / 8
+  const draggable = thumbnailWidth * urls.length > viewportSize.width
+  const css = classnames(styles.Thumbnails, {
+    [styles.draggable]: draggable,
+  })
+  const dragConstraints = {
+    left: -1 * (thumbnailWidth * urls.length - viewportSize.width),
+    right: 0,
+  }
+
+  const modifyTarget = (target) => {
+    const nextIndex = Math.round(Math.abs(target) / thumbnailWidth)
+    const snapTargetIndex = indexWithinBounds(nextIndex, 0, urls.length)
+    const snapTarget = snapTargetIndex * thumbnailWidth
+    const direction = Math.sign(target)
+    return direction * snapTarget
+  }
+
+  useEffect(() => {
+    if (draggable) {
+      const x = Math.max(-current * thumbnailWidth, dragConstraints.left)
+      controls.start({ x })
+    }
+  }, [controls, current, draggable, dragConstraints.left, thumbnailWidth])
+
+  return (
+    <motion.div
+        animate={controls}
+        className={css}
+        drag={draggable && 'x'}
+        dragConstraints={dragConstraints}
+        dragElastic={0.05}
+        dragTransition={{ modifyTarget }}
+        transition={{ type: 'spring', bounce: 0 }}
+    >
+      {urls.map((url, i) => (
+        <Thumbnail
+            active={i === current}
+            alt={i}
+            key={i}
+            onClick={() => onChange(i)}
+            url={url}
+        />
+      ))}
+    </motion.div>
+  )
+}

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

@@ -0,0 +1,59 @@
+/* eslint-disable jsx-control-statements/jsx-use-if-tag */
+/* @flow */
+
+import { noop } from 'lodash'
+import React, { useEffect, useState } from 'react'
+
+import Slides from './Slides'
+import Thumbnails from './Thumbnails'
+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) {
+  useEffect(() => {
+    document.body.style.overflow = 'hidden'
+
+    return () => {
+      document.body.style.overflow = 'initial'
+    }
+  }, [])
+
+  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

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

@@ -0,0 +1,66 @@
+// @flow
+
+import { noop } from 'lodash'
+import { useEffect, useState } from 'react'
+import { useAnimation } from '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,
+  }
+}