playbook_ui 10.18.2 → 10.19.0.pre.lightbox

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/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

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

@@ -0,0 +1,81 @@
+/* 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

@@ -0,0 +1,65 @@
+/* @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

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

@@ -0,0 +1,65 @@
+/* @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

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

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

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

@@ -0,0 +1,10 @@
+/* @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

@@ -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.js

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

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

@@ -0,0 +1,30 @@
+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()
+})

data/app/pb_kits/playbook/pb_nav/_bold_mixin.scss

@@ -0,0 +1,22 @@
+@mixin bold {
+  @include subtle;
+
+  [class*=pb_nav_list_kit_item] {
+    &[class*=_active] [class*=_link] {
+      background-color: $primary;
+      color: $white;
+      box-shadow: $shadow_deep;
+      @media (hover:hover) {
+        &:hover {
+          background-color: darken($primary, 4%);
+          [class*=_text],[class*=_icon] {
+            color: $white;
+          }
+        }
+      }
+      [class*=_text],[class*=_icon] {
+        font-weight: $bolder;
+      }
+    }
+  }
+}

data/app/pb_kits/playbook/pb_nav/_horizontal_nav.scss

@@ -3,6 +3,8 @@
 @import "../tokens/animation-curves";
 @import "../tokens/typography";
 @import "./subtle_mixin";
+@import "./bold_mixin";
+@import "../tokens/shadows";
 
 $selector: ".pb_nav_list";
 
@@ -92,7 +94,21 @@ $selector: ".pb_nav_list";
       }
     }
   }
-  
+
+  // Bold Variant
+  &[class*=_bold] {
+    @include bold;
+    // Horizontal Overrides
+    [class*=pb_nav_list_kit_item] {
+      margin: 0;
+    }
+    [class*=_active] {
+      [class*=_text] {
+        color: $white;
+      }
+    }
+  }
+
   &[class*=dark]{
     [class*=pb_nav_list_kit_item]{
       [class*=_link]{

data/app/pb_kits/playbook/pb_nav/_vertical_nav.scss

@@ -6,6 +6,8 @@
 @import "../tokens/titles";
 @import "../pb_body/body_mixins";
 @import "./subtle_mixin";
+@import "./bold_mixin";
+@import "../tokens/shadows";
 
 $selector: ".pb_nav_list";
 
@@ -87,12 +89,17 @@ $selector: ".pb_nav_list";
   }
 
   // Subtle Variant
-  &[class*=_subtle]  {
+  &[class*=_subtle] {
     @include subtle;
   }
 
+  // Bold Variant
+  &[class*=_bold] {
+    @include bold;
+  }
+
   // Show Highlight
-  &[class*=_highlight]  {
+  &[class*=_highlight] {
     [class*=_active] {
       background-color: $active_light;
     }

data/app/pb_kits/playbook/pb_nav/docs/_bold_horizontal_nav.html.erb

@@ -0,0 +1,6 @@
+<%= pb_rails("nav", props: { orientation: "horizontal", variant: "bold" }) do %>
+  <%= pb_rails("nav/item", props: { text: "About", link: "#" }) %>
+  <%= pb_rails("nav/item", props: { text: "Case Studies", link: "#", active: true }) %>
+  <%= pb_rails("nav/item", props: { text: "Service ", link: "#" }) %>
+  <%= pb_rails("nav/item", props: { text: "Contacts", link: "#" }) %>
+<% end %>