playbook_ui 10.18.2 → 10.19.0.pre.lightbox

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 2e3cbc0cd92e9520cc384a83a63b0c7929db90e80ee3c14545f4cb59cea7e908
-  data.tar.gz: 3dbd612141159027a9da789d6a371cc8e8f2dccb9eaabff33f4c4ddea0c1e473
+  metadata.gz: baa1f6f416384a560ac9d4e03d4aed20b4d01a980f4384c24a29a6a48ee19a60
+  data.tar.gz: 79ba5f8ef47057ac2e187c46676d559c59149afda9ecfb934debaab366104728
 SHA512:
-  metadata.gz: e5a15bb11978d3ac1e8bc98c067cfc39ca9012e8e995e758d5debe9073db0dad4b63b2222c6bf687bc739c5dfaca5e249e12b2b89345c711284000d177f00ea7
-  data.tar.gz: f5f8ad98e52dde53cd3c634757aa6ffeb9c9e6d53a4081c3861e839d1ab6b210d26dd63691be86d9c946cc7c6b4760f006b772e5bb3924be97de70d19f320ac1
+  metadata.gz: edaa286cf749d9fdaa8b3ae854f59bc62681f0baffb90718b335a6774eec4133357f4eb7190b9f4545ec55b6cf41856052a0bc58ccedbd1d7c707b580654095a
+  data.tar.gz: a37e1263c2648e1bb032d49dc971871e7d5df0bd64091d4e61cdaf8e97f5df5915b2c6eb96f9b22508e3b3dc7c609206be70a979ccafd86616fa83b3cb005d38

data/app/pb_kits/playbook/_playbook.scss

@@ -47,6 +47,7 @@
 @import 'pb_label_value/label_value';
 @import 'pb_layout/layout';
 @import 'pb_legend/legend';
+@import 'pb_lightbox/lightbox';
 @import 'pb_line_graph/line_graph';
 @import 'pb_list/list';
 @import 'pb_loading_inline/loading_inline';
@@ -98,4 +99,5 @@
 @import './utilities/positioning';
 @import './utilities/number_spacing';
 @import './utilities/shadow';
+@import './utilities/line_height';
 @import './utilities/display';

data/app/pb_kits/playbook/data/menu.yml

@@ -102,3 +102,4 @@ kits:
     - title_detail
   - user_badge
   - walkthrough
+  - lightbox

data/app/pb_kits/playbook/index.js

@@ -4,7 +4,6 @@ import 'lazysizes/plugins/attrchange/ls.attrchange'
 import 'lazysizes'
 
 // vvv React Component JSX Imports from the React Kits vvv
-export { default as Walkthrough } from './pb_walkthrough/_walkthrough'
 export { default as Avatar } from './pb_avatar/_avatar'
 export { default as AvatarActionButton } from './pb_avatar_action_button/_avatar_action_button'
 export { default as Background } from './pb_background/_background'
@@ -55,6 +54,7 @@ export { default as Layout } from './pb_layout/_layout'
 export { default as Legend } from './pb_legend/_legend'
 export { default as LineGraph } from './pb_line_graph/_line_graph'
 export { default as List } from './pb_list/_list'
+export { default as Lightbox } from './pb_lightbox/_lightbox'
 export { default as ListItem } from './pb_list/_list_item'
 export { default as LoadingInline } from './pb_loading_inline/_loading_inline'
 export { default as Message } from './pb_message/_message'
@@ -101,6 +101,7 @@ export { default as Toggle } from './pb_toggle/_toggle'
 export { default as Typeahead } from './pb_typeahead/_typeahead'
 export { default as User } from './pb_user/_user'
 export { default as UserBadge } from './pb_user_badge/_user_badge'
+export { default as Walkthrough } from './pb_walkthrough/_walkthrough'
 export { default as WeekdayStacked } from './pb_weekday_stacked/_weekday_stacked'
 // ^^^ React Component JSX Imports from the React Kits ^^^
 

data/app/pb_kits/playbook/pb_body/_body.jsx

@@ -12,7 +12,7 @@ type BodyProps = {
   aria?: object,
   className?: string,
   children?: array<React.ReactChild>,
-  color?: 'default' | 'light' | 'lighter',
+  color?: 'default' | 'light' | 'lighter' | 'link',
   dark?: boolean,
   data?: object,
   highlightedText?: array<string>,

data/app/pb_kits/playbook/pb_body/_body_mixins.scss

@@ -6,6 +6,7 @@ $pb_body_colors: (
   default:        $text_lt_default,
   light:          $text_lt_light,
   lighter:        $text_lt_lighter,
+  link:           $primary,
 );
 
 $pb_dark_body_colors: (
@@ -63,4 +64,4 @@ $pb_body_status: (
 
 @mixin pb_body_positive {
   @include pb_body($success);
-}
+}

data/app/pb_kits/playbook/pb_body/body.rb

@@ -4,7 +4,7 @@ module Playbook
   module PbBody
     class Body < Playbook::KitBase
       prop :color, type: Playbook::Props::Enum,
-                   values: %w[default light lighter],
+                   values: %w[default light lighter link],
                    default: "default"
       prop :status, type: Playbook::Props::Enum,
                     values: %w[neutral negative positive],

data/app/pb_kits/playbook/pb_body/body.test.js

@@ -0,0 +1,29 @@
+import React from 'react'
+import { render, screen } from '../utilities/test-utils'
+
+import Body from './_body'
+
+test('returns namespaced class name', () => {
+  render(
+    <Body
+        data={{ testid: 'primary-test' }}
+        text="Test colors"
+    />
+  )
+
+  const kit = screen.getByTestId('primary-test')
+  expect(kit).toHaveClass('pb_body_kit')
+})
+
+test('with colors', () => {
+  render(
+    <Body
+        color="success"
+        data={{ testid: 'primary-test' }}
+        text="Test colors"
+    />
+  )
+
+  const kit = screen.getByTestId('primary-test')
+  expect(kit).toHaveClass('pb_body_kit_success')
+})

data/app/pb_kits/playbook/pb_body/docs/_body_light.html.erb

@@ -12,6 +12,11 @@
   color: "lighter"
 }) %>
 
+<%= pb_rails("body", props: {
+  text: "I am a body kit (Link)",
+  color: "link"
+}) %>
+
 <%= pb_rails("body", props: {
   text: "I am a body kit (Status: negative)",
   status: "negative"

data/app/pb_kits/playbook/pb_body/docs/_body_light.jsx

@@ -18,6 +18,11 @@ const BodyLight = (props) => {
           text="I am a body kit (Lighter)"
           {...props}
       />
+      <Body
+          color="link"
+          text="I am a body kit (Link)"
+          {...props}
+      />
       <Body
           status="negative"
           text="I am a body kit (Status: negative)"

data/app/pb_kits/playbook/pb_body/docs/_body_light.md

@@ -0,0 +1,6 @@
+##### Prop
+This kit uses `default` color by default, and can be replaced with colors below:
+
+* `light` `lighter` `success` `error` `link`
+
+- These colors are not for standard usage. You can use the color prop to make fixes if colors are not appearing properly, but consult your UX team members if you are deciding to implement it

data/app/pb_kits/playbook/pb_caption/_caption.jsx

@@ -3,33 +3,33 @@
 import React from 'react'
 import classnames from 'classnames'
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
-import { globalProps } from '../utilities/globalProps.js'
+import { deprecatedProps, globalProps } from '../utilities/globalProps.js'
 
 type CaptionProps = {
   aria?: object,
-  className?: string,
   children: array<React.ReactNode> | React.ReactNode,
+  className?: string,
+  color?: "default" | "light" | "lighter" | "success" | "error" | "link",
   data?: object,
   id?: string,
   size?: "xs" | "sm" | "md" | "lg" | "xl",
   tag?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span" | "div" | "caption",
   text?: string,
   variant?: null | "link",
-  color?: "default" | "link" | "light",
 };
 
 const Caption = (props: CaptionProps) => {
+  if (props.variant) deprecatedProps('Title', ['variant']) //variant prop is deprecated, use color instead
   const {
     aria = {},
-    className,
     children,
+    className,
     color,
     data = {},
     id,
     size = 'md',
     tag = 'div',
     text,
-    variant = null,
   } = props
   const tagOptions = [
     'h1',
@@ -48,7 +48,7 @@ const Caption = (props: CaptionProps) => {
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
   const css = classnames(
-    buildCss('pb_caption_kit', size, variant, color),
+    buildCss('pb_caption_kit', size, color),
     globalProps(props),
     className,
   )

data/app/pb_kits/playbook/pb_caption/_caption.scss

@@ -10,26 +10,15 @@
 
   &[class^="pb_caption_kit_xs"] {
     @include caption_xs;
-    &[class*="_link"] {
-      color: $primary;}
   }
 
-  &[class*="light"] {
-    color: $text_lt_light;
-  }
-
-  &[class*="default"] {
-    color: $text_lt_default;
-  }
-
-  &[class*="link"] {
-    color: $primary;
-  }
+  @include pb_caption_kit_colors;
 
-  &[class*="dark"] {
-    @each $dark_color_name, $dark_color_value in $pb_dark_caption_colors {
-      &[class*="_#{$dark_color_name}"][class*="dark"] {
-      @include caption_color($dark_color_value);
+  &.dark {
+    @include caption_dark;
+    @each $name, $color in $pb_dark_caption_colors {
+      &[class*="_#{$name}"] {
+        color: $color;
       }
     }
   }

data/app/pb_kits/playbook/pb_caption/_caption_mixin.scss

@@ -4,13 +4,16 @@
 $pb_caption_colors: (
   default:        $text_lt_default,
   light:          $text_lt_light,
-  link:           $primary-action,
+  link:           $primary,
+  lighter:        $text_lt_lighter,
+  success:        $success,
+  error:          $error,
 );
 
 $pb_dark_caption_colors: (
-  default:        #fff,
+  default:        $text_dk_default,
   light:          $text_dk_light,
-  link:           $primary-action,
+  link:           $primary,
 );
 
 
@@ -39,3 +42,10 @@ $pb_dark_caption_colors: (
 @mixin caption_dark {
   color: $text_dk_light;
 }
+@mixin pb_caption_kit_colors {
+  @each $name, $color in $pb_caption_colors {
+    &[class*="#{$name}"] {
+      color: $color
+    }
+  }
+}

data/app/pb_kits/playbook/pb_caption/caption.rb

@@ -10,16 +10,14 @@ module Playbook
                  values: %w[h1 h2 h3 h4 h5 h6 p span div caption],
                  default: "div"
       prop :text
-      prop :variant, type: Playbook::Props::Enum,
-                     values: [nil, "link"],
-                     default: nil
+      prop :variant, deprecated: true
 
       prop :color, type: Playbook::Props::Enum,
-                   values: [nil, "light", "default", "link"],
+                   values: [nil, "default", "light", "lighter", "success", "error", "link"],
                    default: nil
 
       def classname
-        generate_classname("pb_caption_kit", size, variant, color)
+        generate_classname("pb_caption_kit", size, color)
       end
     end
   end

data/app/pb_kits/playbook/pb_caption/caption.test.js

@@ -0,0 +1,29 @@
+import React from 'react'
+import { render, screen } from '../utilities/test-utils'
+
+import Caption from './_caption'
+
+test('returns namespaced class name', () => {
+  render(
+    <Caption
+        data={{ testid: 'primary-test' }}
+        text="Test colors"
+    />
+  )
+
+  const kit = screen.getByTestId('primary-test')
+  expect(kit).toHaveClass('pb_caption_kit_md')
+})
+
+test('with colors', () => {
+  render(
+    <Caption
+        color="success"
+        data={{ testid: 'primary-test' }}
+        text="Test colors"
+    />
+  )
+
+  const kit = screen.getByTestId('primary-test')
+  expect(kit).toHaveClass('pb_caption_kit_md_success')
+})

data/app/pb_kits/playbook/pb_caption/docs/_caption_colors.html.erb

@@ -0,0 +1,3 @@
+<%= pb_rails("caption", props: { text: "Test colors" }) %>
+<%= pb_rails("caption", props: { text: "Test colors", color: "success" }) %>
+<%= pb_rails("caption", props: { text: "Test colors", color: "link" }) %>

data/app/pb_kits/playbook/pb_caption/docs/_caption_colors.jsx

@@ -0,0 +1,25 @@
+import React from 'react'
+import { Caption } from '../../'
+
+const CaptionColors = (props) => {
+  return (
+    <div>
+      <Caption
+          text="Test colors"
+          {...props}
+      />
+      <Caption
+          color="success"
+          text="Test colors"
+          {...props}
+      />
+      <Caption
+          color="link"
+          text="Test colors"
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default CaptionColors

data/app/pb_kits/playbook/pb_caption/docs/_caption_colors.md

@@ -0,0 +1,6 @@
+##### Prop
+Caption kit will use `light` color by default. Other available colors are: 
+
+* `default` `lighter` `success` `error` `link`
+
+- These colors are not for standard usage. You can use the color prop to make fixes if colors are not appearing properly, but consult your UX team members if you are deciding to implement it

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

@@ -2,9 +2,9 @@ examples:
   rails:
     - caption_light: Default
     - caption_block: Block
-    - caption_example: Color Variations
+    - caption_colors: Colors
 
   react:
     - caption_light: Default
     - caption_block: Block
-    - caption_example: Color Variations
+    - caption_colors: Colors

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

@@ -1,4 +1,3 @@
 export { default as CaptionLight } from './_caption_light.jsx'
-export { default as CaptionVariants } from './_caption_variants.jsx'
+export { default as CaptionColors } from './_caption_colors.jsx'
 export { default as CaptionBlock } from './_caption_block.jsx'
-export { default as CaptionExample } from './_caption_example.jsx'

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

@@ -0,0 +1,53 @@
+/* @flow */
+
+import React from 'react'
+import { noop } from 'lodash'
+import { TransformComponent, TransformWrapper } from 'react-zoom-pan-pinch'
+
+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}>
+          <img
+              alt={alt}
+              src={url}
+          />
+        </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/dist/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/dist/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,54 @@
+/* eslint-disable jsx-control-statements/jsx-use-if-tag */
+/* @flow */
+
+import { noop } from 'lodash'
+import React, { useState } from 'react'
+
+import Slides from './Slides'
+import Thumbnails from './Thumbnails'
+import useUnscrollableBody from './useUnscrollableBody'
+
+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) {
+  useUnscrollableBody()
+  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>
+  )
+}