playbook_ui 10.19.0.pre.lightbox → 10.19.0.pre.popover.alpha1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: baa1f6f416384a560ac9d4e03d4aed20b4d01a980f4384c24a29a6a48ee19a60
-  data.tar.gz: 79ba5f8ef47057ac2e187c46676d559c59149afda9ecfb934debaab366104728
+  metadata.gz: '090e97cafaabff3f06f58cca0ce4a1416d09f6baea9f828e51c93059f279f292'
+  data.tar.gz: 580359a862a8567240f9759e2ab80b708688d528ddc054789e6f658352cc21e1
 SHA512:
-  metadata.gz: edaa286cf749d9fdaa8b3ae854f59bc62681f0baffb90718b335a6774eec4133357f4eb7190b9f4545ec55b6cf41856052a0bc58ccedbd1d7c707b580654095a
-  data.tar.gz: a37e1263c2648e1bb032d49dc971871e7d5df0bd64091d4e61cdaf8e97f5df5915b2c6eb96f9b22508e3b3dc7c609206be70a979ccafd86616fa83b3cb005d38
+  metadata.gz: 85c349d66339b000e6d7cb9077621b9e8d40852538d6e9eb7111947fabd0df9e11b3d2448a67609727c9fb915393ddf903140f43375be0947d5d749ffb6fb85a
+  data.tar.gz: b3774dfcbf0315c3b2fde5e145e7e0e33c3ceb23e5371aa01120ccca6f7294e7883e1f19c89dc73cdc3af2664d7b3484f0d9de5835119e862424902ee153bbc9

data/app/pb_kits/playbook/_playbook.scss

@@ -47,7 +47,6 @@
 @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';

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

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

data/app/pb_kits/playbook/index.js

@@ -4,6 +4,7 @@ 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'
@@ -54,7 +55,6 @@ 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,7 +101,6 @@ 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_button/_button.jsx

@@ -22,7 +22,7 @@ type ButtonPropTypes = {
   loading?: boolean,
   newWindow?: boolean,
   onClick?: EventHandler,
-  size: 'large' | 'medium' | 'small',
+  size?: 'sm' | 'md' | 'lg',
   text?: string,
   type: 'inline' | null,
   htmlType: string | 'button',
@@ -36,16 +36,16 @@ const buttonClassName = (props: ButtonPropTypes) => {
     disabled = false,
     fullWidth = false,
     loading = false,
-    size = null,
     type = 'inline',
     variant = 'primary',
+    size = null,
   } = props
 
   let className = 'pb_button_kit'
 
+  className += `${size !== null ? `_${size}` : ''}`
   className += `${variant !== null ? `_${variant}` : ''}`
   className += `${type !== null ? `_${type}` : ''}`
-  className += `${size !== null ? `_${size}` : ''}`
   className += `${fullWidth ? '_block' : ''}`
   className += disabled ? '_disabled' : '_enabled'
   className += loading ? '_loading' : ''

data/app/pb_kits/playbook/pb_button/_button.scss

@@ -1,7 +1,24 @@
 @import "./button_mixins";
 
+$pb_button_sizes: (
+  "sm":   0.75rem,
+  "md":   0.875rem,
+  "lg":   1.125rem,
+);
+
 [class^=pb_button_kit]{
   @include pb_button;
+  // Size =================
+  @each $name, $size in $pb_button_sizes {
+    &[class*=_#{$name}] {
+      font-size: $size;
+      padding: calc(#{$size} / 2) calc(#{$size} * 2.42) !important;
+    }
+  }
+  &[class*=_sm] {
+    min-height: 0;
+  }
+
   // Variants =================
   &[class*=_primary]  {
     @include pb_button_primary;

data/app/pb_kits/playbook/pb_button/button.rb

@@ -18,6 +18,9 @@ module Playbook
       prop :text
       prop :type
       prop :value
+      prop :size, type: Playbook::Props::Enum,
+                  values: ["sm", "md", "lg", nil],
+                  default: nil
 
       def options
         {
@@ -44,12 +47,12 @@ module Playbook
         link ? "a" : "button"
       end
 
-    private
-
       def classname
-        generate_classname("pb_button_kit", variant, full_width_class, disabled_class, loading_class)
+        generate_classname("pb_button_kit", size, variant, full_width_class, disabled_class, loading_class)
       end
 
+    private
+
       def disabled_class
         disabled ? "disabled" : "enabled"
       end

data/app/pb_kits/playbook/pb_button/button.test.js

@@ -89,3 +89,16 @@ test('click event', async () => {
 
   expect(screen.getByText('clicked button!')).toBeInTheDocument()
 })
+
+test('size prop', () => {
+  render(
+    <Button
+        data={{ testid: 'size-test' }}
+        size="sm"
+    />
+  )
+
+  const kit = screen.getByTestId('size-test')
+
+  expect(kit).toHaveClass('pb_button_kit_sm_primary_inline_enabled')
+})

data/app/pb_kits/playbook/pb_button/docs/_button_size.html.erb

@@ -0,0 +1,3 @@
+<%= pb_rails("button", props: { text: "Button sm size", size: "sm" }) %>
+<%= pb_rails("button", props: { text: "Button md size", size: "md" }) %>
+<%= pb_rails("button", props: { text: "Button lg size", size: "lg" }) %>

data/app/pb_kits/playbook/pb_button/docs/_button_size.jsx

@@ -0,0 +1,26 @@
+import React from 'react'
+import { Button } from '../../'
+
+const ButtonSize = (props) => (
+  <div>
+    <Button
+        size="sm"
+        text="Button sm size"
+        {...props}
+    />
+    {' '}
+    <Button
+        size="md"
+        text="Button md size"
+        {...props}
+    />
+    {' '}
+    <Button
+        size="lg"
+        text="Button lg size"
+        {...props}
+    />
+  </div>
+)
+
+export default ButtonSize

data/app/pb_kits/playbook/pb_button/docs/_button_size.md

@@ -0,0 +1 @@
+By default button has the `md` size style, even if you don't explicitly pass a size prop.

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

@@ -7,6 +7,7 @@ examples:
   - button_block_content: Button Block Content
   - button_accessibility: Button Accessibility Options
   - button_options: Button Additional Options
+  - button_size: Button Size
   react:
   - button_default: Button Variants
   - button_full_width: Button Full Width
@@ -15,3 +16,4 @@ examples:
   - button_block_content: Button Block Content
   - button_accessibility: Button Accessibility Options
   - button_options: Button Additional Options (onClick)
+  - button_size: Button Size

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

@@ -5,3 +5,4 @@ export { default as ButtonLoading } from './_button_loading.jsx'
 export { default as ButtonBlockContent } from './_button_block_content.jsx'
 export { default as ButtonAccessibility } from './_button_accessibility.jsx'
 export { default as ButtonOptions } from './_button_options.jsx'
+export { default as ButtonSize } from './_button_size.jsx'

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 })
+    }, { once: true, capture: 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>

data/app/pb_kits/playbook/pb_text_input/_text_input.scss

@@ -92,13 +92,13 @@
       .add-on {
         &-right {
           .add-on-card {
-            border: 1px solid $error;
+            border: 1px solid red;
             border-left: 0;
           }
         }
         &-left {
           .add-on-card {
-            border: 1px solid $error;
+            border: 1px solid red;
             border-right: 0;
           }
         }
@@ -169,7 +169,7 @@
     &-card {
       height: 45px;
       margin: 0;
-      padding: 0 !important;
+      padding: 0;
       align-items: center;
       justify-content: center;
       width: 45px;

data/app/pb_kits/playbook/pb_title/title.html.erb

@@ -2,5 +2,6 @@
     aria: object.aria,
     id: object.id,
     data: object.data,
-    class: object.classname) do %><%= content.presence || object.text %><% end %>
-    
+    class: object.classname) do %>
+        <%= content.presence || object.text %>
+<% end %>

data/app/pb_kits/playbook/playbook-doc.js

@@ -51,7 +51,6 @@ import * as LabelPill from 'pb_label_pill/docs'
 import * as LabelValue from 'pb_label_value/docs'
 import * as Layout from 'pb_layout/docs'
 import * as LegendDocs from 'pb_legend/docs'
-import * as Lightbox from 'pb_lightbox/docs'
 import * as LineGraphDocs from 'pb_line_graph/docs'
 import * as List from 'pb_list/docs'
 import * as LoadingInline from 'pb_loading_inline/docs'
@@ -146,7 +145,6 @@ WebpackerReact.setup({
   ...LabelValue,
   ...Layout,
   ...LegendDocs,
-  ...Lightbox,
   ...LineGraphDocs,
   ...List,
   ...LoadingInline,

data/lib/playbook/version.rb

@@ -2,5 +2,5 @@
 
 module Playbook
   PREVIOUS_VERSION = "10.18.1"
-  VERSION = "10.19.0.pre.lightbox"
+  VERSION = "10.19.0.pre.popover.alpha1"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 10.19.0.pre.lightbox
+  version: 10.19.0.pre.popover.alpha1
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2022-01-27 00:00:00.000000000 Z
+date: 2022-01-24 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -426,6 +426,9 @@ files:
 - app/pb_kits/playbook/pb_button/docs/_button_loading.md
 - app/pb_kits/playbook/pb_button/docs/_button_options.html.erb
 - app/pb_kits/playbook/pb_button/docs/_button_options.jsx
+- app/pb_kits/playbook/pb_button/docs/_button_size.html.erb
+- app/pb_kits/playbook/pb_button/docs/_button_size.jsx
+- app/pb_kits/playbook/pb_button/docs/_button_size.md
 - app/pb_kits/playbook/pb_button/docs/_footer.md
 - app/pb_kits/playbook/pb_button/docs/example.yml
 - app/pb_kits/playbook/pb_button/docs/index.js
@@ -1168,25 +1171,6 @@ files:
 - app/pb_kits/playbook/pb_legend/docs/index.js
 - app/pb_kits/playbook/pb_legend/legend.html.erb
 - app/pb_kits/playbook/pb_legend/legend.rb
-- app/pb_kits/playbook/pb_lightbox/Carousel/Slide.jsx
-- app/pb_kits/playbook/pb_lightbox/Carousel/Slides.jsx
-- app/pb_kits/playbook/pb_lightbox/Carousel/Thumbnail.jsx
-- app/pb_kits/playbook/pb_lightbox/Carousel/Thumbnails.jsx
-- app/pb_kits/playbook/pb_lightbox/Carousel/index.jsx
-- app/pb_kits/playbook/pb_lightbox/Carousel/styles.scss
-- app/pb_kits/playbook/pb_lightbox/Carousel/useSlides.js
-- app/pb_kits/playbook/pb_lightbox/Carousel/useUnscrollableBody.js
-- app/pb_kits/playbook/pb_lightbox/_lightbox.jsx
-- app/pb_kits/playbook/pb_lightbox/docs/_lightbox_default.jsx
-- app/pb_kits/playbook/pb_lightbox/docs/_lightbox_default.md
-- app/pb_kits/playbook/pb_lightbox/docs/_lightbox_multiple.jsx
-- app/pb_kits/playbook/pb_lightbox/docs/example.yml
-- app/pb_kits/playbook/pb_lightbox/docs/index.js
-- app/pb_kits/playbook/pb_lightbox/hooks/useToggler.js
-- app/pb_kits/playbook/pb_lightbox/hooks/useVisibility.js
-- app/pb_kits/playbook/pb_lightbox/hooks/useWindowSize.js
-- app/pb_kits/playbook/pb_lightbox/lightbox.scss
-- app/pb_kits/playbook/pb_lightbox/lightbox.test.jsx
 - app/pb_kits/playbook/pb_line_graph/_line_graph.jsx
 - app/pb_kits/playbook/pb_line_graph/_line_graph.scss
 - app/pb_kits/playbook/pb_line_graph/docs/_description.md

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

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

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

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

@@ -1,82 +0,0 @@
-/* @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>
-  )
-}