playbook_ui 11.1.2 → 11.2.0

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_status.jsx

@@ -0,0 +1,130 @@
+/* eslint-disable react/jsx-handler-names */
+/* @flow */
+
+import React, { useState } from "react"
+import { Button, Dialog, Flex } from "../.."
+
+const useDialog = (visible = false) => {
+  const [opened, setOpened] = useState(visible)
+  const toggle = () => setOpened(!opened)
+  return [opened, toggle]
+
+}
+
+const DialogStatus = () => {
+  const [infoAlertOpened, toggleInfoAlert] = useDialog()
+  const [cautionAlertOpened, toggleCautionAlert] = useDialog()
+  const [successAlertOpened, toggleSuccessAlert] = useDialog()
+  const [errorAlertOpened, toggleErrorAlert] = useDialog()
+  const [deleteAlertOpened, toggleDeleteAlert] = useDialog()
+
+  const dialogs = [
+    {
+      status: "info",
+      text: "Text explaining why there is an alert",
+      title: "Are you Sure?",
+      toggle: toggleInfoAlert,
+      visible: infoAlertOpened,
+      buttonOneText:"No, Cancel",
+      buttonTwoText: "Yes, Action"
+    },
+    {
+      status: "caution",
+      text: "This is the action you will be taking",
+      title: "Are you Sure?",
+      toggle: toggleCautionAlert,
+      visible: cautionAlertOpened,
+      buttonOneText:"No, Cancel",
+      buttonTwoText: "Yes, Action"
+    },
+    {
+      status: "delete",
+      text: "You are about to delete ...",
+      title: "Delete",
+      toggle: toggleDeleteAlert,
+      visible: deleteAlertOpened,
+      buttonOneText:"No, Cancel",
+      buttonTwoText: "Yes, Delete"
+    },
+    {
+      status: "error",
+      text: "Text explaining the error",
+      title: "Error Message",
+      toggle: toggleErrorAlert,
+      visible: errorAlertOpened,
+      buttonOneText:"No, Cancel",
+      buttonTwoText: "Ok, Thanks"
+    },
+    {
+      status: "success",
+      text: "Text explaining what is successful",
+      title: "Success!",
+      toggle: toggleSuccessAlert,
+      visible: successAlertOpened,
+      buttonOneText:"No, Cancel",
+      buttonTwoText: "Ok, Thanks"
+    },
+  ]
+
+  return (
+    <div>
+      <Flex>
+        <Button
+            marginRight="md"
+            onClick={toggleInfoAlert}
+        >
+          {"Information Status"}
+        </Button>
+        <Button
+            marginRight="md"
+            onClick={toggleCautionAlert}
+        >
+          {"Caution Status"}
+        </Button>
+        <Button
+            marginRight="md"
+            onClick={toggleSuccessAlert}
+        >
+          {"Success Status"}
+        </Button>
+        <Button onClick={toggleErrorAlert}>
+          {"Error Status"}
+        </Button>
+        <Button
+            marginRight="md"
+            onClick={toggleDeleteAlert}
+        >
+          {"Delete Status"}
+        </Button>
+      </Flex>
+      <Flex>
+        {dialogs.map((dialog) => (
+          <Dialog
+              key={dialog.status}
+              onClose={dialog.toggle}
+              opened={dialog.visible}
+              status={dialog.status}
+              text={dialog.text}
+              title={dialog.title}
+          >
+          <Dialog.Footer>
+            <Button
+                onClick={dialog.toggle}
+                variant="secondary"
+            >
+            {dialog.buttonOneText}
+            </Button>
+            <Button
+                onClick={dialog.toggle}
+            >
+            {dialog.buttonTwoText}
+            </Button>
+          </Dialog.Footer>
+          </Dialog>
+        ))}
+      </Flex>
+    </div>
+  )
+}
+
+export default DialogStatus

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_status.md

@@ -0,0 +1 @@
+This shows the different alert statuses that can be used for dialog boxes. These all have two buttons which is a default

data/app/pb_kits/playbook/pb_dialog/docs/example.yml

@@ -8,3 +8,5 @@ examples:
   - dialog_sizes: Sizes
   - dialog_scrollable: Scrollable
   - dialog_should_close_on_overlay: Overlay Click
+  - dialog_status: Status Alert
+  - dialog_stacked_alert: Stacked Button Alert

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

@@ -4,3 +4,5 @@ export { default as DialogSizes } from './_dialog_sizes.jsx'
 export { default as DialogScrollable } from './_dialog_scrollable.jsx'
 export { default as DialogSeparators } from './_dialog_separators.jsx'
 export { default as DialogShouldCloseOnOverlay } from './_dialog_should_close_on_overlay.jsx'
+export { default as DialogStatus } from './_dialog_status.jsx'
+export { default as DialogStackedAlert } from './_dialog_stacked_alert.jsx'

data/app/pb_kits/playbook/pb_flex/_flex_item.tsx

@@ -0,0 +1,50 @@
+import React from 'react'
+import classnames from 'classnames'
+import { buildCss } from '../utilities/props'
+import { globalProps, GlobalProps } from '../utilities/globalProps'
+type FlexItemPropTypes = {
+  children: React.ReactNode[] | React.ReactNode,
+  fixedSize?: string,
+  grow?: boolean,
+  shrink?: boolean,
+  className?: string,
+  overflow?: "auto" | "hidden" | "initial" | "inherit" | "scroll" | "visible",
+  order?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 'first' | 'none',
+  alignSelf?: "start" | "end" | "center" | "stretch" | null,
+  displayFlex?: boolean
+} & GlobalProps
+
+const FlexItem = (props: FlexItemPropTypes): React.ReactElement => {
+  const {
+    children,
+    className,
+    fixedSize,
+    grow,
+    overflow = null,
+    shrink,
+    flex = 'none',
+    order = 'none',
+    alignSelf,
+    displayFlex
+  } = props
+  const growClass = grow === true ? 'grow' : ''
+  const displayFlexClass = displayFlex === true ? `display_flex_${displayFlex}` : ''
+  const flexClass = flex !== 'none' ? `flex_${flex}` : ''
+  const overflowClass = overflow ? `overflow_${overflow}` : ''
+  const shrinkClass = shrink === true ? 'shrink' : ''
+  const alignSelfClass = alignSelf ? `align_self_${alignSelf}` : ''
+  const fixedStyle =
+    fixedSize !== undefined ? { flexBasis: `${fixedSize}` } : null
+  const orderClass = order !== 'none' ? `order_${order}` : null
+
+  return (
+    <div
+        className={classnames(buildCss('pb_flex_item_kit', growClass, shrinkClass, flexClass, displayFlexClass), overflowClass, orderClass, alignSelfClass, globalProps(props), className)}
+        style={fixedStyle}
+    >
+      {children}
+    </div>
+  )
+}
+
+export default FlexItem

data/app/pb_kits/playbook/pb_icon/_icon.tsx

@@ -3,6 +3,20 @@ import classnames from 'classnames'
 import { buildAriaProps, buildDataProps } from '../utilities/props'
 import { GlobalProps, globalProps } from '../utilities/globalProps'
 
+export type IconSizes = "lg"
+| "xs"
+| "sm"
+| "1x"
+| "2x"
+| "3x"
+| "4x"
+| "5x"
+| "6x"
+| "7x"
+| "8x"
+| "9x"
+| "10x"
+
 type IconProps = {
   aria?: {[key: string]: string},
   border?: string,
@@ -18,19 +32,7 @@ type IconProps = {
   pull?: "left" | "right" | "none",
   pulse?: boolean,
   rotation?: 90 | 180 | 270,
-  size?: | "lg"
-    | "xs"
-    | "sm"
-    | "1x"
-    | "2x"
-    | "3x"
-    | "4x"
-    | "5x"
-    | "6x"
-    | "7x"
-    | "8x"
-    | "9x"
-    | "10x",
+  size?: IconSizes,
   spin?: boolean,
 } & GlobalProps
 

data/app/pb_kits/playbook/pb_lightbox/Carousel/Slide.tsx

@@ -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: boolean) => void,
+  zooming: boolean,
+  url: string,
+}
+
+export default function Slide({
+  alt,
+  onClick = noop,
+  onZoom = noop,
+  url,
+  zooming = false,
+}: SlideType): React.ReactElement {
+  const handlePinchingStop = ({state}: {state: any}) => {
+    const isZooming = 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 wrapperClass="TransformComponent">
+          <Image
+              alt={alt}
+              url={url}
+              zIndex={3}
+          />
+        </TransformComponent>
+      </button>
+    </TransformWrapper>
+  )
+}

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

@@ -0,0 +1,35 @@
+/* @flow */
+
+import { noop } from 'lodash'
+import React, { useState } from 'react'
+
+import Slide from './Slide'
+
+type SlidesType = {
+  urls: Array<string>,
+  current: number,
+  onChange: (index: number) => void,
+  onClick: (index: number) => void,
+}
+
+export default function Slides({
+  urls = [],
+  current = 0,
+  onChange = noop,
+}: SlidesType): React.ReactElement {
+  const [zooming, setZooming] = useState(false)
+
+  const handleZoom = (isZooming: boolean) => setZooming(isZooming)
+  return (
+    <div
+        className="Slides"
+    >
+      <Slide
+          onClick={() => onChange(current)}
+          onZoom={handleZoom}
+          url={urls[current]}
+          zooming={zooming}
+      />
+    </div>
+  )
+}

data/app/pb_kits/playbook/pb_lightbox/Carousel/Thumbnail.tsx

@@ -0,0 +1,39 @@
+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,
+  buttonRef?: React.RefObject<HTMLButtonElement>,
+  url: string,
+  width?: string,
+}
+
+export default function Thumbnail({
+  active = false,
+  alt,
+  width,
+  url,
+  onClick = noop,
+  buttonRef,
+}: ThumbnailType): React.ReactElement {
+  const activeClasses = classnames('Thumbnail', { active })
+  return (
+    <button
+        className={classnames(activeClasses)}
+        onClick={onClick}
+        ref={buttonRef}
+        style={{ width }}
+        type="button"
+    >
+      <Image
+          alt={alt}
+          size="sm"
+          url={url}
+      />
+    </button>
+  )
+}

data/app/pb_kits/playbook/pb_lightbox/Carousel/Thumbnails.tsx

@@ -0,0 +1,75 @@
+import { noop } from 'lodash'
+import classnames from 'classnames'
+import React, { useLayoutEffect } from 'react'
+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: (index: number) => void,
+  urls: string[],
+}
+
+export default function Thumbnails({
+  current = 0,
+  onChange = noop,
+  urls = [],
+}: ThumbnailsType): React.ReactElement {
+  const viewportSize = useWindowSize()
+  const thumbnailWidth = viewportSize.width / 8
+  const draggable = thumbnailWidth * urls.length > viewportSize.width
+  const shouldBeCentered = (thumbnailWidth * urls.length) < (viewportSize.width * 0.9)
+  const css = classnames('Thumbnails', { draggable }, { centered: shouldBeCentered })
+
+  const otherProps: { buttonRef?: React.RefObject<HTMLButtonElement> } = {}
+
+  const thumbnailsRef: React.RefObject<HTMLDivElement>  = React.createRef()
+
+  useLayoutEffect(() => {
+    if (shouldBeCentered) return
+
+    const currentThumbnail = otherProps.buttonRef.current
+
+    const thumbWidth = currentThumbnail.clientWidth,
+    scrollLeft = thumbWidth * current,
+    firstThumb: HTMLButtonElement = thumbnailsRef.current.querySelector('.Thumbnail:first-child'),
+    lastThumb: HTMLButtonElement = thumbnailsRef.current.querySelector('.Thumbnail:last-child')
+
+    firstThumb.style.marginLeft = `${(thumbnailsRef.current?.clientWidth / 2) - (thumbWidth / 2)}px`
+    lastThumb.style.marginRight = `${(thumbnailsRef.current?.clientWidth / 2) - (thumbWidth / 2)}px`
+    thumbnailsRef.current?.scrollTo(scrollLeft, 0)
+  })
+
+  return (
+    <div
+        className={css}
+        ref={thumbnailsRef}
+    >
+      {urls.map((url, i) => {
+        const active = i === current
+        if (active) otherProps.buttonRef = React.createRef()
+        return (
+          <Thumbnail
+              active={active}
+              alt={i.toString()}
+              key={i}
+              onClick={() => onChange(i)}
+              url={url}
+              {...otherProps}
+          />
+        )
+      })}
+    </div>
+  )
+}

data/app/pb_kits/playbook/pb_lightbox/Carousel/index.tsx

@@ -0,0 +1,57 @@
+/* eslint-disable jsx-control-statements/jsx-use-if-tag */
+import { noop } from 'lodash'
+import React, { useEffect } from 'react'
+
+import Slides from './Slides'
+import Thumbnails from './Thumbnails'
+
+type CarouselType = {
+  initialPhoto?: string,
+  onClose?: () => void,
+  icon?: string,
+  iconSize?: number,
+  currentIndex: number,
+  photos: {
+    url: string,
+    thumbnail: string,
+  }[],
+  onChange: (index: number) => void,
+  onClick?: (index: number) => void,
+}
+
+export default function Carousel({
+  currentIndex,
+  photos,
+  onClick = noop,
+  onChange = noop,
+}: CarouselType): React.ReactElement {
+  useEffect(() => {
+    document.body.style.overflow = 'hidden'
+
+    return () => {
+      document.body.style.overflow = 'initial'
+    }
+  }, [])
+
+  const handleChange = (index: number) => {
+    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/_lightbox.tsx

@@ -0,0 +1,115 @@
+import React, { Fragment, useMemo, useRef, useState } from 'react'
+import { useKbdControls } from './hooks/useKbdControls'
+import classnames from 'classnames'
+import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
+import { globalProps } from '../utilities/globalProps'
+import LightboxHeader from './_lightbox_header'
+import { LightboxContext } from './_lightbox_context'
+import { IconSizes } from '../pb_icon/_icon'
+
+import Carousel from './Carousel/index'
+
+type LightboxType = {
+  aria?: {[key: string]: string},
+  children: React.ReactNode[] | React.ReactNode | string,
+  className?: string,
+  data?: {[key: string]: string | number},
+  description?: string,
+  id?: string,
+  photos: [],
+  initialPhoto?: number,
+  onClose: () => void,
+  icon: string,
+  iconSize: IconSizes,
+  showCount?: boolean,
+  textRight?: string,
+  trigger?: string,
+  title?: string,
+}
+
+const Lightbox = (props: LightboxType): React.ReactNode => {
+  const {
+    aria = {},
+    children,
+    className,
+    data = {},
+    description,
+    id = '',
+    initialPhoto = 0,
+    photos,
+    onClose,
+    icon = 'times',
+    iconSize = '2x',
+    showCount = true,
+    textRight = 'All Photos',
+    title,
+  } = 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 = (photoIndex: number) => {
+    setActivePhoto(photoIndex)
+  }
+
+  const photosMap = useMemo(() => photos.map((photo) => ({
+    url: photo,
+    thumbnail: photo,
+  })), [photos])
+
+  const api = {
+    onClose: onClose,
+    onArrowLeft: () => {
+      setActivePhoto(activePhoto > 0 ? activePhoto - 1 : 0)
+    },
+    onArrowRight: () => {
+      const nextPhoto = activePhoto < photos.length - 1 ? activePhoto + 1 : photos.length - 1
+      setActivePhoto(nextPhoto)
+    },
+  }
+  useKbdControls(api)
+
+  const lightboxRef: any = useRef()
+
+  const headerTextRight = showCount ? `${activePhoto + 1} / ${photos.length}` : textRight
+
+  return (
+    <Fragment>
+      <LightboxContext.Provider value={api}>
+        <div
+            {...ariaProps}
+            {...dataProps}
+            className={classes}
+            id={id}
+            ref={lightboxRef}
+        >
+          <div className="carousel">
+          <Lightbox.Header
+              icon={icon}
+              iconSize={iconSize}
+              text={description}
+              textRight={headerTextRight}
+              title={title}
+          />
+            {children}
+            <Carousel
+                currentIndex={activePhoto}
+                onChange={handleOnSlide}
+                photos={photosMap}
+            />
+          </div>
+        </div>
+      </LightboxContext.Provider>
+    </Fragment>
+  )
+}
+
+Lightbox.Header = LightboxHeader
+
+export default Lightbox

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

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