playbook_ui 10.21.0.pre.alpha.jg1 → 10.21.0.pre.alpha.lightbox

data/app/pb_kits/playbook/pb_dashboard/pbChartsDarkTheme.js

@@ -0,0 +1,215 @@
+import colors from '../tokens/exports/_colors.scss'
+import typography from '../tokens/exports/_typography.scss'
+
+import Highcharts from 'highcharts'
+
+const highchartsDarkTheme = {
+  lang: {
+    thousandsSep: ',',
+  },
+  colors: [
+    colors.data_1,
+    colors.data_2,
+    colors.data_3,
+    colors.data_4,
+    colors.data_5,
+    colors.data_6,
+    colors.data_7,
+  ],
+  chart: {
+    borderWidth: 0,
+    borderRadius: 0,
+    plotBackgroundColor: null,
+    plotShadow: false,
+    plotBorderWidth: 0,
+  },
+  title: {
+    style: {
+      color: colors.text_dk_default,
+      fontFamily: typography.font_family_base,
+      fontWeight: typography.regular,
+      fontSize: typography.heading_3,
+    },
+  },
+  subtitle: {
+    style: {
+      fontFamily: typography.font_family_base,
+      color: colors.text_dk_light,
+      fontWeight: typography.regular,
+      fontSize: typography.text_base,
+    },
+  },
+  xAxis: {
+    gridLineWidth: 0,
+    lineColor: colors.border_dark,
+    tickColor: colors.border_dark,
+    labels: {
+      style: {
+        fontFamily: typography.font_family_base,
+        color: colors.text_dk_lighter,
+        fontWeight: typography.bold,
+        fontSize: typography.text_smaller,
+      },
+    },
+    title: {
+      style: {
+        color: colors.text_dk_default,
+        fontFamily: typography.font_family_base,
+        fontWeight: typography.regular,
+        fontSize: typography.heading_4,
+      },
+    },
+  },
+  yAxis: {
+    alternateGridColor: null,
+    minorTickInterval: null,
+    gridLineColor: colors.border_dark,
+    minorGridLineColor: colors.border_dark,
+    lineWidth: 0,
+    tickWidth: 0,
+    labels: {
+      style: {
+        fontFamily: typography.font_family_base,
+        color: colors.text_dk_lighter,
+        fontWeight: typography.bold,
+        fontSize: typography.text_smaller,
+      },
+    },
+    title: {
+      style: {
+        fontFamily: typography.font_family_base,
+        color: colors.text_dk_lighter,
+        fontWeight: typography.bold,
+        fontSize: typography.text_smaller,
+      },
+    },
+  },
+  legend: {
+    layout: 'horizontal',
+    align: 'center',
+    verticalAlign: 'bottom',
+    itemStyle: {
+      fontFamily: typography.font_family_base,
+      color: colors.text_dk_light,
+      fontWeight: typography.regular,
+      fontSize: typography.text_smaller,
+    },
+    itemHoverStyle: {
+      color: colors.text_dk_default,
+    },
+    itemHiddenStyle: {
+      color: colors.text_dk_lighter,
+    },
+  },
+  labels: {
+    style: {
+      color: colors.primary,
+    },
+  },
+  tooltip: {
+    backgroundColor: {
+      linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
+      stops: [
+        [0, colors.card_light],
+        [1, colors.card_light],
+      ],
+    },
+    shadow: false,
+    borderWidth: 0,
+    borderRadius: 10,
+    style: {
+      fontFamily: typography.font_family_base,
+      color: colors.text_lt_default,
+      fontWeight: typography.regular,
+      fontSize: typography.text_smaller,
+    },
+  },
+  // specific to gauge
+  // unfilled gauge color
+  pane: {
+    background: {
+      borderColor: colors.border_dark,
+    },
+  },
+
+  plotOptions: {
+    series: {
+      type: 'area',
+      nullColor: colors.text_dk_lighter,
+      fillColor: {
+        linearGradient: {
+          x1: 0,
+          y1: 0,
+          x2: 0,
+          y2: 1,
+        },
+        stops: [
+          [0, Highcharts.getOptions().colors[0]],
+          [1, 'white'],
+        ],
+      },
+      threshold: null,
+    },
+
+    // GAUGE STYLES
+    solidgauge: {
+      borderColor: colors.primary,
+      borderWidth: 20,
+      radius: 90,
+      innerRadius: '90%',
+      dataLabels: {
+        borderWidth: 0,
+        color: colors.text_dk_default,
+        enabled: true,
+        style: {
+          fontFamily: typography.font_family_base,
+          fontWeight: typography.regular,
+          fontSize: typography.heading_2,
+        },
+        y: -26,
+      },
+    },
+
+    // PIE STYLES
+    pie: {
+      colors: [
+        colors.data_1,
+        colors.data_2,
+        colors.data_3,
+        colors.data_4,
+        colors.data_5,
+        colors.data_6,
+        colors.data_7,
+      ],
+      dataLabels: {
+        style: {
+          fontFamily: typography.font_family_base,
+          fontSize: typography.text_smaller,
+          color: colors.text_dk_light,
+          fontWeight: typography.regular,
+        },
+      },
+    },
+
+    // LINE CHART STYLES
+    line: {
+      dataLabels: {
+        color: colors.text_dk_light,
+      },
+      marker: {
+        lineColor: colors.border_dark,
+      },
+      area: {
+        shadow: false,
+        states: {
+          hover: {
+            lineWidth: 1,
+          },
+        },
+        threshold: null,
+      },
+    },
+  },
+}
+
+export { highchartsDarkTheme }

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>
+  )
+}