playbook_ui 11.7.0 → 11.8.1

data/app/pb_kits/playbook/pb_filter/docs/_filter_no_background.html.erb

@@ -1,5 +1,6 @@
 <%=
   pb_rails("filter", props: {
+    min_width: "375px",
     id: "3",
     background: false,
     filters: [
@@ -16,17 +17,12 @@
   }) do
 %>
   <%
-    example_collection = [
-      OpenStruct.new(name: "Alabama", value: 1),
-      OpenStruct.new(name: "Alaska", value: 2),
-      OpenStruct.new(name: "Arizona", value: 3),
-      OpenStruct.new(name: "Arkansas", value: 4),
-      OpenStruct.new(name: "California", value: 5),
-      OpenStruct.new(name: "Colorado", value: 6),
-      OpenStruct.new(name: "Connecticut", value: 7),
-      OpenStruct.new(name: "Delaware", value: 8),
-      OpenStruct.new(name: "Florida", value: 9),
-      OpenStruct.new(name: "Georgia", value: 10),
+     example_collection = [
+      OpenStruct.new(name: "USA", value: 1),
+      OpenStruct.new(name: "Canada", value: 2),
+      OpenStruct.new(name: "Brazil", value: 3),
+      OpenStruct.new(name: "Philippines", value: 4),
+      OpenStruct.new(name: "A galaxy far far away, like really far away...", value: 5)
     ]
   %>
 
@@ -45,6 +41,7 @@
 
 <%=
   pb_rails("filter", props: {
+    min_width: "375px",
     id: "4",
     background: false,
     filters: [
@@ -61,16 +58,11 @@
 %>
   <%
     example_collection = [
-      OpenStruct.new(name: "Alabama", value: 1),
-      OpenStruct.new(name: "Alaska", value: 2),
-      OpenStruct.new(name: "Arizona", value: 3),
-      OpenStruct.new(name: "Arkansas", value: 4),
-      OpenStruct.new(name: "California", value: 5),
-      OpenStruct.new(name: "Colorado", value: 6),
-      OpenStruct.new(name: "Connecticut", value: 7),
-      OpenStruct.new(name: "Delaware", value: 8),
-      OpenStruct.new(name: "Florida", value: 9),
-      OpenStruct.new(name: "Georgia", value: 10),
+      OpenStruct.new(name: "USA", value: 1),
+      OpenStruct.new(name: "Canada", value: 2),
+      OpenStruct.new(name: "Brazil", value: 3),
+      OpenStruct.new(name: "Philippines", value: 4),
+      OpenStruct.new(name: "A galaxy far far away, like really far away...", value: 5)
     ]
   %>
   <%= pb_rails("form", props: { form_system_options: { scope: :example, method: :get } }) do |form| %>

data/app/pb_kits/playbook/pb_filter/docs/_filter_no_background.jsx

@@ -7,7 +7,7 @@ const FilterNoBackground = (props) => {
     { value: 'Canada' },
     { value: 'Brazil' },
     { value: 'Philippines' },
-    { value: 'A Galaxy Far Far Away Like Really Far Away' },
+    { value: 'A galaxy far far away, like really far away...' },
   ]
   return (
     <>
@@ -17,6 +17,7 @@ const FilterNoBackground = (props) => {
           'Full Name': 'John Wick',
           'City': 'Las Vegas',
         }}
+          minWidth="375px"
           results={3}
           sortOptions={{
           popularity: 'Popularity',
@@ -64,6 +65,7 @@ const FilterNoBackground = (props) => {
           'Full Name': 'John Wick',
           'City': 'Las Vegas',
         }}
+          minWidth="375px"
           results={3}
           sortOptions={{
           popularity: 'Popularity',

data/app/pb_kits/playbook/pb_filter/docs/_filter_no_sort.html.erb

@@ -1,5 +1,6 @@
 <%=
   pb_rails("filter", props: {
+    min_width: "375px",
     id: "nosort",
     filters: [
       { name: "name", value: "John Wick" }
@@ -9,17 +10,12 @@
   }) do
 %>
   <%
-    example_collection = [
-      OpenStruct.new(name: "Alabama", value: 1),
-      OpenStruct.new(name: "Alaska", value: 2),
-      OpenStruct.new(name: "Arizona", value: 3),
-      OpenStruct.new(name: "Arkansas", value: 4),
-      OpenStruct.new(name: "California", value: 5),
-      OpenStruct.new(name: "Colorado", value: 6),
-      OpenStruct.new(name: "Connecticut", value: 7),
-      OpenStruct.new(name: "Delaware", value: 8),
-      OpenStruct.new(name: "Florida", value: 9),
-      OpenStruct.new(name: "Georgia", value: 10),
+   example_collection = [
+      OpenStruct.new(name: "USA", value: 1),
+      OpenStruct.new(name: "Canada", value: 2),
+      OpenStruct.new(name: "Brazil", value: 3),
+      OpenStruct.new(name: "Philippines", value: 4),
+      OpenStruct.new(name: "A galaxy far far away, like really far away...", value: 5)
     ]
   %>
 

data/app/pb_kits/playbook/pb_filter/docs/_filter_no_sort.jsx

@@ -7,13 +7,14 @@ const FilterNoSort = (props) => {
     { value: 'Canada' },
     { value: 'Brazil' },
     { value: 'Philippines' },
-    { value: 'A Galaxy Far Far Away Like Really Far Away' },
+    { value: 'A galaxy far far away, like really far away...' },
   ]
   return (
     <Filter
         filters={{
           'Full Name': 'John Wick',
         }}
+        minWidth="375px"
         results={546}
         sortValue={[{ name: 'popularity', dir: 'desc' }]}
         {...props}

data/app/pb_kits/playbook/pb_filter/docs/_filter_only.html.erb

@@ -1,5 +1,6 @@
 <%=
   pb_rails("filter", props: {
+    min_width: "375px",
     id: "fo",
     filters: [
       { name: "name", value: "John Wick" }
@@ -8,17 +9,12 @@
   }) do
 %>
   <%
-    example_collection = [
-      OpenStruct.new(name: "Alabama", value: 1),
-      OpenStruct.new(name: "Alaska", value: 2),
-      OpenStruct.new(name: "Arizona", value: 3),
-      OpenStruct.new(name: "Arkansas", value: 4),
-      OpenStruct.new(name: "California", value: 5),
-      OpenStruct.new(name: "Colorado", value: 6),
-      OpenStruct.new(name: "Connecticut", value: 7),
-      OpenStruct.new(name: "Delaware", value: 8),
-      OpenStruct.new(name: "Florida", value: 9),
-      OpenStruct.new(name: "Georgia", value: 10),
+   example_collection = [
+      OpenStruct.new(name: "USA", value: 1),
+      OpenStruct.new(name: "Canada", value: 2),
+      OpenStruct.new(name: "Brazil", value: 3),
+      OpenStruct.new(name: "Philippines", value: 4),
+      OpenStruct.new(name: "A galaxy far far away, like really far away...", value: 5)
     ]
   %>
   <%= pb_rails("form", props: { form_system_options: { scope: :example, method: :get } }) do |form| %>

data/app/pb_kits/playbook/pb_filter/docs/_filter_only.jsx

@@ -7,11 +7,12 @@ const FilterOnly = (props) => {
     { value: 'Canada' },
     { value: 'Brazil' },
     { value: 'Philippines' },
-    { value: 'A Galaxy Far Far Away Like Really Far Away' },
+    { value: 'A galaxy far far away, like really far away...' },
   ]
   return (
     <Filter
         filters={{ 'Full Name': 'John Wick' }}
+        minWidth="375px"
         {...props}
     >
       <TextInput

data/app/pb_kits/playbook/pb_filter/docs/_filter_placement.html.erb

@@ -1,5 +1,6 @@
 <%=
   pb_rails("filter", props: {
+    min_width: "375px",
     id: "pla",
     filters: [
       { name: "name", value: "John Wick" }
@@ -9,17 +10,12 @@
   }) do
 %>
   <%
-    example_collection = [
-      OpenStruct.new(name: "Alabama", value: 1),
-      OpenStruct.new(name: "Alaska", value: 2),
-      OpenStruct.new(name: "Arizona", value: 3),
-      OpenStruct.new(name: "Arkansas", value: 4),
-      OpenStruct.new(name: "California", value: 5),
-      OpenStruct.new(name: "Colorado", value: 6),
-      OpenStruct.new(name: "Connecticut", value: 7),
-      OpenStruct.new(name: "Delaware", value: 8),
-      OpenStruct.new(name: "Florida", value: 9),
-      OpenStruct.new(name: "Georgia", value: 10),
+   example_collection = [
+      OpenStruct.new(name: "USA", value: 1),
+      OpenStruct.new(name: "Canada", value: 2),
+      OpenStruct.new(name: "Brazil", value: 3),
+      OpenStruct.new(name: "Philippines", value: 4),
+      OpenStruct.new(name: "A galaxy far far away, like really far away...", value: 5)
     ]
   %>
   <%= pb_rails("form", props: { form_system_options: { scope: :example, method: :get } }) do |form| %>

data/app/pb_kits/playbook/pb_filter/docs/_filter_placement.jsx

@@ -11,13 +11,14 @@ const FilterPlacement = (props) => {
     { value: 'Canada' },
     { value: 'Brazil' },
     { value: 'Philippines' },
-    { value: 'A Galaxy Far Far Away Like Really Far Away' },
+    { value: 'A galaxy far far away, like really far away...' },
   ]
   return (
 
     <>
       <Filter
           double
+          minWidth="375px"
           onSortChange={SortingChangeCallback}
           placement={"right"}
           results={1}

data/app/pb_kits/playbook/pb_filter/docs/_filter_single.html.erb

@@ -1,5 +1,6 @@
 <%=
   pb_rails("filter", props: {
+    min_width: "375px",
     id: "2",
     filters: [
       { name: "name", value: "John Wick" }
@@ -14,17 +15,12 @@
   }) do
 %>
   <%
-    example_collection = [
-      OpenStruct.new(name: "Alabama", value: 1),
-      OpenStruct.new(name: "Alaska", value: 2),
-      OpenStruct.new(name: "Arizona", value: 3),
-      OpenStruct.new(name: "Arkansas", value: 4),
-      OpenStruct.new(name: "California", value: 5),
-      OpenStruct.new(name: "Colorado", value: 6),
-      OpenStruct.new(name: "Connecticut", value: 7),
-      OpenStruct.new(name: "Delaware", value: 8),
-      OpenStruct.new(name: "Florida", value: 9),
-      OpenStruct.new(name: "Georgia", value: 10),
+   example_collection = [
+      OpenStruct.new(name: "USA", value: 1),
+      OpenStruct.new(name: "Canada", value: 2),
+      OpenStruct.new(name: "Brazil", value: 3),
+      OpenStruct.new(name: "Philippines", value: 4),
+      OpenStruct.new(name: "A galaxy far far away, like really far away...", value: 5)
     ]
   %>
 

data/app/pb_kits/playbook/pb_filter/docs/_filter_single.jsx

@@ -13,13 +13,14 @@ const FilterSingle = (props) => {
     { value: 'Canada' },
     { value: 'Brazil' },
     { value: 'Philippines' },
-    { value: 'A Galaxy Far Far Away Like Really Far Away' },
+    { value: 'A galaxy far far away, like really far away...' },
   ]
   return (
     <Filter
         filters={{
           'Full Name': 'John Wick',
         }}
+        minWidth="375px"
         results={546}
         sortOptions={{
           popularity: 'Popularity',

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

@@ -2,6 +2,7 @@
 
 import { noop } from 'lodash'
 import React, { useState } from 'react'
+import CircleIconButton from '../../pb_circle_icon_button/_circle_icon_button'
 
 import Slide from './Slide'
 
@@ -47,6 +48,8 @@ const onTouchEnd = () => {
   }
 }
 
+const arrowLeft = () => setIndex(current > 0 ? current - 1 : 0)
+const arrowRight = () => setIndex(current < urls.length - 1 ? current + 1 : urls.length - 1)
 
 
   const handleZoom = (isZooming: boolean) => setZooming(isZooming)
@@ -57,12 +60,35 @@ const onTouchEnd = () => {
         onTouchMove={onTouchMove} 
         onTouchEnd={onTouchEnd}
     >
+      {
+        urls.length > 1 && (
+        <CircleIconButton
+            className='carousel-arrow-left'
+            dark={true}
+            icon="chevron-left"
+            onClick={arrowLeft}
+            variant="link"
+        />
+      )
+     }
       <Slide
           onClick={() => onChange(current)}
           onZoom={handleZoom}
           url={urls[current]}
           zooming={zooming}
       />
+      {
+        urls.length > 1 && (
+        <CircleIconButton
+            className='carousel-arrow-right'
+            dark={true}
+            icon="chevron-right"
+            onClick={arrowRight}
+            variant="link"
+        />
+        )
+      }
+
     </div>
   )
 }

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

@@ -1,5 +1,4 @@
 import React from 'react'
-import { noop } from 'lodash'
 import classnames from 'classnames'
 import Image from '../../pb_image/_image'
 
@@ -17,7 +16,7 @@ export default function Thumbnail({
   alt,
   width,
   url,
-  onClick = noop,
+  onClick = ()=>{},
   buttonRef,
 }: ThumbnailType): React.ReactElement {
   const activeClasses = classnames('Thumbnail', { active })

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

@@ -1,5 +1,4 @@
 /* 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'
@@ -8,7 +7,6 @@ type CarouselType = {
   initialPhoto?: string,
   onClose?: () => void,
   icon?: string,
-  iconSize?: number,
   currentIndex: number,
   photos: {
     url: string,
@@ -22,8 +20,8 @@ type CarouselType = {
 export default function Carousel({
   currentIndex,
   photos,
-  onClick = noop,
-  onChange = noop,
+  onClick = ()=>{},
+  onChange = ()=>{},
   setIndex,
 }: CarouselType): React.ReactElement {
   useEffect(() => {

data/app/pb_kits/playbook/pb_lightbox/Header/_lightbox_header.tsx

@@ -1,31 +1,36 @@
 /* eslint-disable react/no-multi-comp */
 /* @flow */
-import React, { useContext } from 'react'
-import classnames from 'classnames'
-import { buildAriaProps, buildCss, buildDataProps } from '../../utilities/props'
-import { globalProps, GlobalProps } from '../../utilities/globalProps'
-import { LightboxContext } from '../_lightbox_context'
-import { LightboxHeaderIcon } from './_lightbox_header_icon'
-import { IconSizes } from '../../pb_icon/_icon'
+import React, { useContext } from "react";
+import classnames from "classnames";
+import {
+  buildAriaProps,
+  buildCss,
+  buildDataProps,
+} from "../../utilities/props";
+import { globalProps, GlobalProps } from "../../utilities/globalProps";
+import { LightboxContext } from "../_lightbox_context";
 
-import Caption from '../../pb_caption/_caption'
-import Flex from '../../pb_flex/_flex'
-import FlexItem from '../../pb_flex/_flex_item'
-import Title from '../../pb_title/_title'
+import CircleIconButton from "../../pb_circle_icon_button/_circle_icon_button";
+import Caption from "../../pb_caption/_caption";
+import Flex from "../../pb_flex/_flex";
+import FlexItem from "../../pb_flex/_flex_item";
+import Title from "../../pb_title/_title";
+import Button from "../../pb_button/_button";
 
 type LightboxHeaderProps = {
-  aria?: {[key: string]: string},
-  children?: React.ReactNode[] | React.ReactNode | string,
-  className?: string,
-  closeable?: boolean,
-  data?: {[key: string]: string | number},
-  icon?: string,
-  iconSize?: IconSizes,
-  id?: string,
-  text?: string,
-  textRight?: string,
-  title?: string,
-} & GlobalProps
+  aria?: { [key: string]: string };
+  children?: React.ReactNode[] | React.ReactNode | string;
+  className?: string;
+  closeable?: boolean;
+  data?: { [key: string]: string | number };
+  icon?: string;
+  id?: string;
+  onClickRight?: () => void;
+  onClose?: () => void;
+  text?: string;
+  navRight?: string;
+  title?: string;
+} & GlobalProps;
 
 const LightboxHeader = (props: LightboxHeaderProps): React.ReactElement => {
   const {
@@ -33,77 +38,88 @@ const LightboxHeader = (props: LightboxHeaderProps): React.ReactElement => {
     children,
     className,
     data = {},
-    spacing = 'between',
+    onClickRight,
+    spacing = "between",
     text,
-    textRight = 'All Photos',
+    navRight,
     title,
     closeable = true,
-    icon = 'times',
-    iconSize = '2x',
-  } = props
+    icon = "times",
+  } = props;
 
-  const ariaProps = buildAriaProps(aria)
-  const dataProps = buildDataProps(data)
-  const api: any = useContext(LightboxContext)
-  const headerCSS = buildCss('lightbox_header')
-  const headerSpacing = globalProps(props, { paddingY: 'sm' })
+  const ariaProps = buildAriaProps(aria);
+  const dataProps = buildDataProps(data);
+  const api: any = useContext(LightboxContext);
+  const headerCSS = buildCss("lightbox_header");
+  const headerSpacing = globalProps(props, { paddingY: "sm" });
 
-  const handleOnLightboxClose = () => api.onClose()
+  const handleOnLightboxClose = () => api.onClose();
 
   const HeaderBody = () => (
     <React.Fragment>
-      <FlexItem flex="1">
-        <LightboxHeaderIcon
-            icon={icon}
-            iconSize={iconSize}
-            onClose={handleOnLightboxClose}
+      <FlexItem flex="1" marginLeft="sm">
+        <CircleIconButton
+          onClick={handleOnLightboxClose}
+          dark={true}
+          variant="link"
+          icon={icon}
         />
       </FlexItem>
-      {(title && text) && (
+      {title && text && (
         <FlexItem flex="5">
           <Flex justify="center">
-            <Flex
-                align="center"
-                orientation="column"
-            >
-              <Title
-                  dark
-                  paddingBottom="xs"
-                  size={4}
-                  text={title}
-              />
-              <Caption dark>{text}</Caption>
+            <Flex align="center" orientation="column">
+              {typeof title === "string" ? (
+                <Title dark paddingBottom="xxs" size={4} text={title} />
+              ) : (
+                <Flex justify="center"
+                   className="custom-header"
+                >
+                  {title}
+                  </Flex>
+              )}
+
+              {typeof text === "string" ? (
+                <Caption dark>{text}</Caption>
+              ) : (
+                <Flex justify="center"
+                className="custom-header"
+                >
+                  {text}
+                </Flex>
+              )}
             </Flex>
           </Flex>
         </FlexItem>
-      ) }
+      )}
       <FlexItem flex="1">
         <Flex justify="end">
-          <Title
-              dark
-              marginRight="md"
-              marginTop="xs"
-              size={4}
-              text={textRight}
+          <Button
+            className="nav-right-btn"
+            htmlType="button"
+            onClick={onClickRight}
+            dark
+            variant="link"
+            text={navRight}
           />
         </Flex>
       </FlexItem>
     </React.Fragment>
-  )
+  );
 
   return (
     <div className="carousel-header">
       <Flex
-          {...ariaProps}
-          {...dataProps}
-          className={classnames(headerCSS, headerSpacing, className)}
-          spacing={spacing}
+        {...ariaProps}
+        {...dataProps}
+        className={classnames(headerCSS, headerSpacing, className)}
+        spacing={spacing}
       >
-        {closeable && <HeaderBody/>}
+        {closeable && <HeaderBody />}
         {children}
       </Flex>
     </div>
-  )
-}
+  );
+};
 
-export default LightboxHeader
+export default LightboxHeader;

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

@@ -1,11 +1,10 @@
-import React, { Fragment, useMemo, useRef, useState } from 'react'
+import React, { Fragment, useMemo, useRef, useState, useEffect } 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 './Header/_lightbox_header'
 import { LightboxContext } from './_lightbox_context'
-import { IconSizes } from '../pb_icon/_icon'
 
 import Carousel from './Carousel/index'
 
@@ -14,17 +13,17 @@ type LightboxType = {
   children: React.ReactNode[] | React.ReactNode | string,
   className?: string,
   data?: {[key: string]: string | number},
-  description?: string,
+  description?: string | any,
   id?: string,
   photos: [],
   initialPhoto?: number,
-  onClose: () => void,
+  onChange?: (index: number)=> {},
+  onClickRight?: () => void,
+  onClose?: () => void,
   icon: string,
-  iconSize: IconSizes,
-  showCount?: boolean,
-  textRight?: string,
+  navRight?: string,
   trigger?: string,
-  title?: string,
+  title?: string | any,
 }
 
 const Lightbox = (props: LightboxType): React.ReactNode => {
@@ -37,15 +36,20 @@ const Lightbox = (props: LightboxType): React.ReactNode => {
     id = '',
     initialPhoto = 0,
     photos,
+    onChange = ()=>{},
     onClose,
+    onClickRight,
     icon = 'times',
-    iconSize = '2x',
-    showCount = true,
-    textRight = 'All Photos',
+    navRight,
     title,
   } = props
+
   const [activePhoto, setActivePhoto] = useState(initialPhoto)
 
+  useEffect(() => {
+    onChange(activePhoto)
+  },[activePhoto])
+
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
   const classes = classnames(
@@ -77,7 +81,6 @@ const Lightbox = (props: LightboxType): React.ReactNode => {
 
   const lightboxRef: any = useRef()
 
-  const headerTextRight = showCount ? `${activePhoto + 1} / ${photos.length}` : textRight
 
   return (
     <Fragment>
@@ -92,9 +95,10 @@ const Lightbox = (props: LightboxType): React.ReactNode => {
           <div className="carousel">
           <Lightbox.Header
               icon={icon}
-              iconSize={iconSize}
+              onClose={onClose}
+              onClickRight={onClickRight}
               text={description}
-              textRight={headerTextRight}
+              navRight={navRight}
               title={title}
           />
             {children}

data/app/pb_kits/playbook/pb_lightbox/docs/_description.md

@@ -0,0 +1 @@
+The Lightbox kit is a popup window overlay that will appear on top of your webpage and cover the entirety of the screen. It can be used to display a group of images that the user can swipe through, zoom into and view. The button in the top left of the header can be used to close the overlay and exit back to your webpage. Click the images in the examples below to see Lightbox in action.