playbook_ui 10.20.0 → 10.21.0.pre.alpha.lightbox.2

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,53 @@
+/* @flow */
+
+import React from 'react'
+import { noop } from 'lodash'
+import { TransformComponent, TransformWrapper } from 'react-zoom-pan-pinch'
+import Image from '../../pb_image/_image'
+
+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="Slide"
+          onClick={onClick}
+          onDoubleClick={() => onZoom(false)}
+          tabIndex={-1}
+      >
+        <TransformComponent className="TransformComponent">
+          <Image
+              alt={alt}
+              url={url}
+              zIndex="3"
+          />
+        </TransformComponent>
+      </button>
+    </TransformWrapper>
+  )
+}

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

@@ -0,0 +1,53 @@
+/* @flow */
+
+import { noop } from 'lodash'
+import { motion } from 'framer-motion'
+import React, { useState } from 'react'
+
+import Slide from './Slide'
+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="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,38 @@
+/* @flow */
+
+import React from 'react'
+import { noop } from 'lodash'
+import classnames from 'classnames'
+import Image from '../../pb_image/_image'
+
+type ThumbnailType = {
+  active?: boolean,
+  alt?: string,
+  onClick: () => void,
+  url: string,
+  width?: string,
+}
+
+export default function Thumbnail({
+  active = false,
+  alt,
+  width,
+  url,
+  onClick = noop,
+}: ThumbnailType) {
+  const activeClasses = classnames('Thumbnail', { active })
+  return (
+    <button
+        className={classnames(activeClasses)}
+        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,78 @@
+/* @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'
+
+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('Thumbnails', { 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,58 @@
+/* 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'
+
+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="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/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,
+  }
+}

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

@@ -0,0 +1,112 @@
+/* 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 LightboxHeader from './_lightbox_header'
+import { LightboxContext } from './_lightbox_context'
+
+import Carousel from './Carousel/index.jsx'
+
+type LightboxType = {
+  aria?: object,
+  children: array<React.ReactNode> | React.ReactNode | string,
+  className?: string,
+  data?: object,
+  description?: string,
+  id?: string,
+  photos: [],
+  initialPhoto: string,
+  onClose: Function,
+  opened: boolean,
+  icon: string,
+  iconSize: number,
+  trigger?: string,
+}
+
+const Lightbox = (props: LightboxType) => {
+  const {
+    aria = {},
+    children,
+    className,
+    data = {},
+    description,
+    id = '',
+    photos,
+    initialPhoto,
+    onClose,
+    opened,
+    icon,
+    iconSize,
+    trigger,
+  } = 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])
+  }
+
+  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',
+      () => {
+        setTriggerOpened(true)
+        document
+          .querySelector('#cancel-button')
+          .addEventListener('click', () => {
+            setTriggerOpened(false)
+          })
+      },
+      { once: true }
+    )
+  }
+  return (
+    <LightboxContext.Provider value={api}>
+      <div
+          {...ariaProps}
+          {...dataProps}
+          className={classes}
+          id={id}
+      >
+        <div className="carousel">
+          <Lightbox.Header>{children}</Lightbox.Header>
+          <Carousel
+              current={photos.indexOf(initialPhoto)}
+              onChange={handleOnSlide}
+              photos={photos.map((photo) => ({
+              url: photo,
+              thumbnail: photo,
+            }))}
+          />
+        </div>
+      </div>
+    </LightboxContext.Provider>
+  )
+}
+
+Lightbox.Header = LightboxHeader
+
+export default Lightbox

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

@@ -0,0 +1,3 @@
+import React from 'react'
+
+export const LightboxContext = React.createContext()

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

@@ -0,0 +1,71 @@
+/* @flow */
+import React, { useContext } from 'react'
+import classnames from 'classnames'
+import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
+import { globalProps } from '../utilities/globalProps.js'
+import { LightboxContext } from './_lightbox_context'
+import { LightboxHeaderIcon } from './_lightbox_header_icon'
+import Flex from '../pb_flex/_flex'
+import FlexItem from '../pb_flex/_flex_item'
+
+type LightboxHeaderProps = {
+  aria?: object,
+  children: array<React.ReactNode> | React.ReactNode | string,
+  className?: string,
+  closeable: boolean,
+  data?: object,
+  icon?: string,
+  iconSize?: string,
+  id?: string,
+  padding?: string,
+  spacing?: string,
+  text?: string,
+  title?: string,
+}
+
+const LightboxHeader = (props: LightboxHeaderProps) => {
+  const {
+    aria = {},
+    children,
+    className,
+    data = {},
+    padding = 'sm',
+    spacing = 'between',
+    closeable = true,
+    icon = 'times',
+    iconSize = '2x',
+  } = props
+
+  const ariaProps = buildAriaProps(aria)
+  const dataProps = buildDataProps(data)
+  const api = useContext(LightboxContext)
+  const headerCSS = buildCss('lightbox_header')
+  const headerSpacing = globalProps(props, { padding })
+
+  /* eslint-disable react/jsx-handler-names */
+
+  return (
+    <div className="carousel-header">
+      <Flex
+          {...ariaProps}
+          {...dataProps}
+          className={classnames(headerCSS, headerSpacing, className)}
+          spacing={spacing}
+      >
+        <If condition={closeable}>
+          <FlexItem flex={1}>
+            <LightboxHeaderIcon
+                className="close-icon"
+                icon={icon}
+                iconSize={iconSize}
+                onClose={api.onClose}
+            />
+          </FlexItem>
+        </If>
+        {children}
+      </Flex>
+    </div>
+  )
+}
+
+export default LightboxHeader

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

@@ -0,0 +1,26 @@
+/* @flow */
+
+import React from 'react'
+import Icon from '../pb_icon/_icon'
+
+type LightboxHeaderIconProps = {
+  onClose: () => mixed,
+  icon: string,
+  iconSize: string,
+}
+
+export const LightboxHeaderIcon = (props: LightboxHeaderIconProps) => {
+  const { onClose, icon, iconSize } = props
+  return (
+    <div
+        className="close-icon"
+        onClick={onClose}
+    >
+      <Icon
+          fixedWidth
+          icon={icon}
+          size={iconSize}
+      />
+    </div>
+  )
+}