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

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

@@ -0,0 +1,95 @@
+/* @flow */
+/* eslint-disable jsx-control-statements/jsx-use-if-tag */
+import React, { useState } from 'react'
+import { Caption, Flex, FlexItem, Image, Title } from '../../'
+import Lightbox from '../_lightbox'
+
+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(photos[0])
+  const [showLightbox, toggleShowLightbox] = useState(false)
+
+  const handleCloseLightbox = () => {
+    toggleShowLightbox(!showLightbox)
+    setSelectedPhoto(null)
+  }
+
+  const onPhotoClick = (photo) => {
+    toggleShowLightbox(!showLightbox)
+    setSelectedPhoto(photo)
+  }
+
+  return (
+    <>
+      <div>
+        {showLightbox ? (
+          <Lightbox
+              icon="times"
+              iconSize="2x"
+              initialPhoto={selectedPhoto}
+              onClose={handleCloseLightbox}
+              photos={photos}
+              {...props}
+          >
+            <Lightbox.Header>
+              <FlexItem flex={5}>
+                <Flex justify="center">
+                  <Flex
+                      align="center"
+                      orientation="column"
+                  >
+                    <Title
+                        dark
+                        paddingBottom="xs"
+                        size={4}
+                        text="Windows, Sidings, & Gutters"
+                    />
+
+                    <Caption dark>{'Dyamic Count goes here.'}</Caption>
+                  </Flex>
+                </Flex>
+              </FlexItem>
+              <FlexItem flex={1}>
+                <Flex justify="end">
+                  <Title
+                      dark
+                      size={4}
+                      text="All Photos"
+                  />
+                </Flex>
+              </FlexItem>
+            </Lightbox.Header>
+          </Lightbox>
+        ) : (
+          <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 LightboxCompoundComponent

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

@@ -0,0 +1,64 @@
+/* @flow */
+/* eslint-disable jsx-control-statements/jsx-use-if-tag */
+import React, { useState } from 'react'
+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] = useState(false)
+
+  const handleCloseLightbox = () => {
+    toggleShowLightbox(!showLightbox)
+    setSelectedPhoto(null)
+  }
+
+  const onPhotoClick = (photo) => {
+    toggleShowLightbox(!showLightbox)
+    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,64 @@
+/* @flow */
+/* eslint-disable jsx-control-statements/jsx-use-if-tag */
+import React, { useState } from 'react'
+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] = useState(false)
+
+  const handleCloseLightbox = () => {
+    toggleLight(!light)
+    setSelectedPhoto(null)
+  }
+
+  const onPhotoClick = (photo) => {
+    toggleLight(!light)
+    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,7 @@
+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/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,202 @@
+@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;
+      align-items: center;
+      padding: $space-sm;
+      transition: all .5s;
+
+      .close-icon {
+        color: white;
+        margin-left: 16px;
+        top: 16px;
+      }
+    }
+  }
+
+  .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;
+    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/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_line_graph/_line_graph.jsx

@@ -8,6 +8,7 @@ import pbChart from '../plugins/pb_chart'
 
 type LineGraphProps = {
   axisTitle?: string,
+  dark?: Boolean,
   xAxisCategories: array,
   yAxisMin: number,
   yAxisMax: number,
@@ -31,6 +32,7 @@ type LineGraphProps = {
 export default class LineGraph extends React.Component<LineGraphProps> {
   static defaultProps = {
     className: 'pb_bar_graph',
+    dark: false,
     gradient: false,
     type: 'line',
     legend: false,
@@ -40,6 +42,7 @@ export default class LineGraph extends React.Component<LineGraphProps> {
   componentDidMount() {
     const {
       axisTitle,
+      dark,
       xAxisCategories,
       yAxisMin,
       yAxisMax,
@@ -60,6 +63,7 @@ export default class LineGraph extends React.Component<LineGraphProps> {
       axisTitle: axisTitle,
       chartData: chartData,
       colors: colors,
+      dark,
       id: id,
       pointStart: pointStart,
       subtitle: subTitle,

data/app/pb_kits/playbook/pb_line_graph/line_graph.rb

@@ -32,6 +32,7 @@ module Playbook
           id: id,
           className: classname,
           chartData: chart_data,
+          dark: dark ? "dark" : "",
           type: chart_type,
           title: title,
           subtitle: subtitle,

data/app/pb_kits/playbook/pb_popover/_popover.jsx

@@ -150,16 +150,14 @@ export default class PbReactPopover extends React.Component<PbPopoverProps> {
       const targetIsReference =
         target.closest('.pb_popover_reference_wrapper') !== null
 
-      if (targetIsReference) return
-
       switch (closeOnClick) {
       case 'outside':
-        if (!targetIsPopover) {
+        if (!targetIsPopover || targetIsReference) {
           shouldClosePopover(true)
         }
         break
       case 'inside':
-        if (targetIsPopover) {
+        if (targetIsPopover || targetIsReference) {
           shouldClosePopover(true)
         }
         break

data/app/pb_kits/playbook/pb_popover/docs/_popover_close.html.erb

@@ -1,23 +1,23 @@
 <%= pb_rails("flex", props: {classname: "flex-container", spacing: "between"}) do %>
   <span>
-    <%= pb_rails("button", props: { text: "Click Inside", variant: "secondary", id: 'inside-popover-1' }) %>
+    <%= pb_rails("button", props: { text: "Click Inside", variant: "secondary", id: "inside-popover-1" }) %>
     <%= pb_rails("popover", props: {
       close_on_click: "inside",
       trigger_element_id: "inside-popover-1",
       tooltip_id: "inside-tooltip-1",
-      position: 'bottom',
+      position: "bottom",
       offset: true
     }) do %>
       Click on me!
     <% end %>
   </span>
   <span>
-    <%= pb_rails("button", props: { text: "Click Outside", variant: "secondary", id: 'outside-popover-1' }) %>
+    <%= pb_rails("button", props: { text: "Click Outside", variant: "secondary", id: "outside-popover-1" }) %>
     <%= pb_rails("popover", props: {
       close_on_click: "outside",
       trigger_element_id: "outside-popover-1",
       tooltip_id: "outside-tooltip-1",
-      position: 'left',
+      position: "left",
       offset: true
     }) do %>
         Click anywhere but me!
@@ -27,16 +27,16 @@
     <%= pb_rails("button", props: {
       text: "Click Anywhere",
       variant: "secondary",
-      id: 'any-popover-1'
+      id: "any-popover-1"
     }) %>
     <%= pb_rails("popover", props: {
       close_on_click: "any",
       trigger_element_id: "any-popover-1",
       tooltip_id: "any-tooltip-1",
-      position: 'top',
+      position: "top",
       offset: true
     }) do %>
       Click anything!
     <% end %>
   </span>
-<% end %>
+<% end %>

data/app/pb_kits/playbook/pb_popover/index.js

@@ -36,15 +36,14 @@ export default class PbPopover extends PbEnhancedElement {
       }
 
       setTimeout(() => {
-        this.popper.update()
         this.toggleTooltip()
+        this.popper.update()
       }, 0)
     })
   }
 
   checkCloseTooltip() {
     document.querySelector('body').addEventListener('click', ({ target }) => {
-      const isTriggerElement = target.closest(`#${this.triggerElementId}`) !== null
       const isTooltipElement = target.closest(`#${this.tooltipId}`) !== null
 
       switch (this.closeOnClick) {
@@ -52,21 +51,17 @@ export default class PbPopover extends PbEnhancedElement {
         this.hideTooltip()
         break
       case 'outside':
-        if (isTooltipElement) {
-          this.checkCloseTooltip()
-        } else {
+        if (!isTooltipElement) {
           this.hideTooltip()
         }
         break
       case 'inside':
-        if (isTooltipElement || isTriggerElement) {
+        if (isTooltipElement) {
           this.hideTooltip()
-        } else {
-          this.checkCloseTooltip()
         }
         break
       }
-    }, { once: true })
+    }, true)
   }
 
   hideTooltip() {

data/app/pb_kits/playbook/pb_popover/popover.html.erb

@@ -3,7 +3,7 @@
   class: object.classname,
   data: object.data,
   id: object.id) do %>
-  <div class="pb_popover_tooltip" id="<%= object.tooltip_id %>" role="tooltip" style="<%= object.z_index_helper %>">
+  <div class="pb_popover_tooltip hide" id="<%= object.tooltip_id %>" role="tooltip" style="<%= object.z_index_helper %>">
     <div class="pb_popover_body <%= object.width_height_class_helper %> <%= object.popover_spacing_helper %>" style="<%= object.width_height_helper %>">
       <%= content.presence %>
     </div>