playbook_ui 11.1.1 → 11.2.0

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

@@ -0,0 +1,109 @@
+/* eslint-disable react/no-multi-comp */
+/* @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 { LightboxHeaderIcon } from './_lightbox_header_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'
+
+type LightboxHeaderProps = {
+  aria?: {[key: string]: string},
+  children?: React.ReactNode[] | React.ReactNode | string,
+  className?: string,
+  closeable?: boolean,
+  data?: {[key: string]: string | number},
+  icon?: string,
+  iconSize?: IconSizes,
+  id?: string,
+  text?: string,
+  textRight?: string,
+  title?: string,
+} & GlobalProps
+
+const LightboxHeader = (props: LightboxHeaderProps): React.ReactElement => {
+  const {
+    aria = {},
+    children,
+    className,
+    data = {},
+    spacing = 'between',
+    text,
+    textRight = 'All Photos',
+    title,
+    closeable = true,
+    icon = 'times',
+    iconSize = '2x',
+  } = props
+
+  const ariaProps = buildAriaProps(aria)
+  const dataProps = buildDataProps(data)
+  const api: any = useContext(LightboxContext)
+  const headerCSS = buildCss('lightbox_header')
+  const headerSpacing = globalProps(props, { paddingY: 'sm' })
+
+  const handleOnLightboxClose = () => api.onClose()
+
+  const HeaderBody = () => (
+    <React.Fragment>
+      <FlexItem flex="1">
+        <LightboxHeaderIcon
+            icon={icon}
+            iconSize={iconSize}
+            onClose={handleOnLightboxClose}
+        />
+      </FlexItem>
+      {(title && text) && (
+        <FlexItem flex="5">
+          <Flex justify="center">
+            <Flex
+                align="center"
+                orientation="column"
+            >
+              <Title
+                  dark
+                  paddingBottom="xs"
+                  size={4}
+                  text={title}
+              />
+              <Caption dark>{text}</Caption>
+            </Flex>
+          </Flex>
+        </FlexItem>
+      ) }
+      <FlexItem flex="1">
+        <Flex justify="end">
+          <Title
+              dark
+              marginRight="md"
+              marginTop="xs"
+              size={4}
+              text={textRight}
+          />
+        </Flex>
+      </FlexItem>
+    </React.Fragment>
+  )
+
+  return (
+    <div className="carousel-header">
+      <Flex
+          {...ariaProps}
+          {...dataProps}
+          className={classnames(headerCSS, headerSpacing, className)}
+          spacing={spacing}
+      >
+        {closeable && <HeaderBody/>}
+        {children}
+      </Flex>
+    </div>
+  )
+}
+
+export default LightboxHeader

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

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

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

@@ -0,0 +1,66 @@
+/* @flow */
+/* eslint-disable jsx-control-statements/jsx-use-if-tag */
+import React, { useState } from 'react'
+import { Flex, Image } from '../../'
+import Lightbox from '../_lightbox.tsx'
+
+const LightboxCompoundComponent = (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-1501045337096-542a73dafa4f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2052&q=80',
+    'https://images.unsplash.com/photo-1563693998336-93c10e5d8f91?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80,',
+  ]
+  const [selectedPhoto, setSelectedPhoto] = useState(0)
+  const [showLightbox, toggleShowLightbox] = useState(false)
+
+  const handleCloseLightbox = () => {
+    toggleShowLightbox(!showLightbox)
+    setSelectedPhoto(null)
+  }
+
+  const onPhotoClick = (photo) => {
+    toggleShowLightbox(!showLightbox)
+    setSelectedPhoto(photo)
+  }
+
+  return (
+    <>
+      <div>
+        {showLightbox ? (
+          <Lightbox
+              description='Description Content Goes Here.'
+              initialPhoto={selectedPhoto}
+              onClose={handleCloseLightbox}
+              photos={photos}
+              title='Windows, Sidings, & Gutters'
+              {...props}
+          />
+        ) : (
+          <div className="PhotoViewer">
+            <Flex>
+              {photos.map((photo, index) => {
+                return (
+                  <div
+                      key={photo[index]}
+                      onClick={() => onPhotoClick(index)}
+                  >
+                    <Image
+                        marginRight="xl"
+                        rounded
+                        size="lg"
+                        url={photo}
+                    />
+
+                    <div className="overlay" />
+                  </div>
+                )
+              })}
+            </Flex>
+          </div>
+        )}
+      </div>
+    </>
+  )
+}
+
+export default LightboxCompoundComponent

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

@@ -0,0 +1 @@
+To get the title and description to appear pass in the `title` and `description` props.

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

@@ -0,0 +1,65 @@
+/* @flow */
+/* eslint-disable jsx-control-statements/jsx-use-if-tag */
+import React, { useState } from 'react'
+import { Flex, Image } from '../../'
+import Lightbox from '../_lightbox.tsx'
+
+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(0)
+  const [showLightbox, toggleShowLightbox] = useState(false)
+
+  const handleCloseLightbox = () => {
+    toggleShowLightbox(!showLightbox)
+    setSelectedPhoto(null)
+  }
+
+  const onPhotoClick = (photoIndex) => {
+    toggleShowLightbox(!showLightbox)
+    setSelectedPhoto(photoIndex)
+  }
+
+  return (
+    <>
+      <div>
+        {showLightbox ? (
+          <Lightbox
+              icon="times"
+              iconSize="2x"
+              initialPhoto={selectedPhoto}
+              onClose={handleCloseLightbox}
+              photos={photos}
+              showCount={false}
+              {...props}
+          />
+        ) : (
+          <div className="PhotoViewer">
+            <Flex>
+              {photos.map((photo, index) => {
+                return (
+                  <div
+                      key={photo[index]}
+                      onClick={() => onPhotoClick(index)}
+                  >
+                    <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

@@ -0,0 +1 @@
+Lightbox contains 7 props: `photos` (an array of urls), `initialPhoto` (a number), an `onClose` callback function, a `title` and `description` string, 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

@@ -0,0 +1,91 @@
+/* @flow */
+/* eslint-disable jsx-control-statements/jsx-use-if-tag */
+import React, { useState } from 'react'
+import { Flex, Image } from '../../'
+import Lightbox from '../_lightbox.tsx'
+
+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',
+    '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',
+    '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',
+    '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',
+    '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',
+    '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',
+    'https://images.unsplash.com/photo-1523057530100-383d7fbc77a1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2669&q=80',
+    '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(0)
+  const [light, toggleLight] = useState(false)
+
+  const handleCloseLightbox = () => {
+    toggleLight(!light)
+    setSelectedPhoto(null)
+  }
+
+  const onPhotoClick = (photo) => {
+    toggleLight(!light)
+    setSelectedPhoto(photo)
+  }
+
+  const exampleStyles = {
+    width: "100%",
+    overflow: "auto"
+  }
+
+  return (
+    <div>
+      {light ? (
+        <Lightbox
+            icon="times"
+            iconSize="2x"
+            initialPhoto={selectedPhoto}
+            onClose={handleCloseLightbox}
+            photos={photos}
+            {...props}
+        />
+      ) : (
+        <div
+            className="PhotoViewer"
+            style={exampleStyles}
+        >
+          <Flex>
+            {photos.map((photo, index) => {
+              return (
+                <div
+                    key={photos[index]}
+                    onClick={() => onPhotoClick(index)}
+                >
+                  <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

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

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

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

data/app/pb_kits/playbook/pb_lightbox/hooks/useKbdControls.ts

@@ -0,0 +1,34 @@
+import { useEffect, useState } from 'react'
+
+export const useKbdControls = (api: {[key: string]: () => void}): string => {
+  const [cmdKey, setCmdKey] = useState('')
+
+  useEffect(() => {
+    const handleKeyDown = ({key}: {key: string}) => {
+      const keyCmd = key.toLowerCase()
+      setCmdKey(keyCmd)
+
+      switch(keyCmd) {
+        case 'escape': {
+          api.onClose()
+          break
+        }
+        case 'arrowleft': {
+          api.onArrowLeft()
+          break
+        }
+        case 'arrowright': {
+          api.onArrowRight()
+          break
+        }
+      }
+    }
+
+    window.addEventListener('keydown', handleKeyDown);
+
+    return () => {
+      window.removeEventListener('keydown', handleKeyDown);
+    }
+  }, [api])
+  return cmdKey
+}

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

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

@@ -0,0 +1,30 @@
+import { useEffect, useState } from 'react'
+
+type WindowSize = {
+  width: number,
+  height: number,
+}
+
+export const useWindowSize = (): WindowSize => {
+  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

@@ -0,0 +1,222 @@
+@import "../tokens/spacing";
+@import "../tokens/screen_sizes";
+
+$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-header {
+    background: rgb(0, 0, 0);
+    border-radius: 0px;
+    min-height: 51px;
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    z-index: 9999999;
+    align-items: center;
+    transition: all .5s;
+
+    .close-icon {
+      color: white;
+    }
+  }
+}
+
+.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;
+  }
+}
+
+
+.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;
+  height: calc(100% - 120px);
+  width: 100%;
+  z-index: 1;
+
+  [class^="react-transform-wrapper"] {
+    flex-shrink: 0;
+    width: 100%;
+    height: 100%;
+  }
+
+  [class^="react-transform-content"] {
+    width: 100%;
+    height: 100%;
+  }
+
+  [class^="react-transform-component"] {
+    width: 100%;
+    height: 100%;
+    img {
+      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;
+
+  @media only screen and (max-width: $screen-xs-max) {
+    margin-top: 30px;
+  }
+
+  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;
+  overflow: auto;
+  position: absolute;
+  z-index: 1;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  &.centered {
+    justify-content: center;
+  }
+}
+
+.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;
+}