playbook_ui 12.15.0 → 12.16.0.pre.alpha.lightboxcurrentphotoprop531

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: '03281cc1b427fa58d12d5fdda8a4c4d2cc8084c2bb8b57d1f8eab0666b833571'
-  data.tar.gz: 6b12d9e8c14770af46560d1c47600ae8866973a96dbde010998f86de8fad929d
+  metadata.gz: accf792d3ae05665b499210171ab0a2401b7d89109b53f18904bbb23a73a7d5a
+  data.tar.gz: 5d2ceb2031b2a4fcc38245e5584dcd94da4a97b61a5eb6fe4324163a91938b30
 SHA512:
-  metadata.gz: 9711f9bbac20056a5d7e66a5f2ce1385c520ab8a25d7d4505f23ab04e015d251f7eda1f561d7e9becaf8eefd9d04d9cf35dd5fabba5711397240f79318ce39ca
-  data.tar.gz: d8d4f3c94fe38322ebbf9c14e607cb35f0834bd064795a235664551c56ee593b5ee5d9a0f1d175a826f93a50e5733e18ebef507281015c1e3eb88010ced4942c
+  metadata.gz: 1f44a2e628700f4579afa50346aa506b6a57e43ddbc50e30685b5b977f81f49c9fcfb864df1e08adc27788d487316ae475cf740f7522ebe9ceca4c829d3ac567
+  data.tar.gz: dc0ee866dd0e92ba69c8688fb331535a743d6f4f362de42ed5641d3151a5485533cbb05b6296ba665360385df839322f59d38fa76d2763a5c2a43c8fe3e1ec88

data/app/pb_kits/playbook/pb_background/_background.tsx

@@ -24,7 +24,7 @@ type BackgroundProps = {
   id?: string,
   imageUrl?: string,
   padding?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl',
-  tag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'div',
+  tag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'div' | 'tr' | 'th' | 'td',
   transition?: 'fade' | 'blur' | 'scale',
 } & GlobalProps
 

data/app/pb_kits/playbook/pb_background/background.rb

@@ -91,7 +91,7 @@ module Playbook
       prop :image_url
 
       prop :tag, type: Playbook::Props::Enum,
-                  values: %w[h1 h2 h3 h4 h5 h6 p div span],
+                  values: %w[h1 h2 h3 h4 h5 h6 p div span tr th td],
                   default: "div"
 
       prop :transition, type: Playbook::Props::Enum,

data/app/pb_kits/playbook/pb_badge/_badge.scss

@@ -43,6 +43,7 @@
     @each $color_name, $color_value in $status_colors {
       &[class*=_#{$color_name}]  {
         background: rgba(mix($bg_dark, $color_value, 10%), $opacity_2);
+        color: map-get($status_color_text_dark, $color_name);
       }
     }
   }

data/app/pb_kits/playbook/pb_badge/_badge.tsx

@@ -42,7 +42,7 @@ const Badge = (props: BadgeProps) => {
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
   const css = classnames(
-    buildCss('pb_badge_kit', variant, rounded ? 'rounded' : null),
+    buildCss('pb_badge_kit', variant === "success" ? "success_sm" : variant, rounded ? 'rounded' : null),
     globalProps(props),
     className
   )

data/app/pb_kits/playbook/pb_badge/badge.rb

@@ -10,11 +10,15 @@ module Playbook
                      default: "neutral"
 
       def classname
-        generate_classname("pb_badge_kit", variant, rounded_class)
+        generate_classname("pb_badge_kit", variant_class, rounded_class)
       end
 
     private
 
+      def variant_class
+        variant === "success" ? "success_sm" : variant
+      end
+
       def rounded_class
         rounded ? "rounded" : nil
       end

data/app/pb_kits/playbook/pb_badge/badge.test.js

@@ -60,7 +60,6 @@ test('displays rounded corners', () => {
 
 test('displays color variants', () => {
   [
-    "success",
     "warning",
     "error",
     "info"
@@ -78,3 +77,19 @@ test('displays color variants', () => {
     cleanup()
   })
 })
+
+test('displays success variant', () => {
+    render(
+      <Badge
+          data={{ testid: testId }}
+          text={"success"}
+          variant={"success"}
+      />
+    )
+    const kit = screen.getByTestId(testId)
+    expect(kit).toHaveClass(`pb_badge_kit_success_sm
+    `)
+
+    cleanup()
+
+})

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

@@ -8,7 +8,7 @@ $pb_body_colors: (
   lighter:        $text_lt_lighter,
   link:           $primary,
   error:          $error,
-  success:        $success,
+  success:        $text_lt_success_sm,
 );
 
 $pb_dark_body_colors: (
@@ -16,7 +16,7 @@ $pb_dark_body_colors: (
   light:          $text_dk_light,
   lighter:        $text_dk_lighter,
   error:          $error,
-  success:        $success,
+  success:        $text_dk_success_sm,
 );
 
 // Order is important here!
@@ -24,7 +24,7 @@ $pb_body_status: (
   default:        $text_lt_default,
   negative:       $error,
   dark_error:     $error_dark_body,
-  positive:       $success,
+  positive:       $text_lt_success_sm,
 );
 
 @mixin pb_body($color: $text_lt_default) {

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

@@ -6,7 +6,7 @@ $pb_caption_colors: (
   light:          $text_lt_light,
   link:           $primary,
   lighter:        $text_lt_lighter,
-  success:        $success,
+  success:        $text_lt_success_sm,
   error:          $error,
 );
 
@@ -14,7 +14,7 @@ $pb_dark_caption_colors: (
   default:        $text_dk_default,
   light:          $text_dk_light,
   link:           $primary,
-  success:        $success,
+  success:        $text_dk_success_sm,
   error:          $error,
 );
 

data/app/pb_kits/playbook/pb_enhanced_element/index.ts

@@ -7,7 +7,7 @@ export default class PbEnhancedElement {
   static _observer: ElementObserver
   element: Element
 
-  constructor(element: Element) {
+  constructor(element?: Element) {
     this.element = element
   }
 

data/app/pb_kits/playbook/pb_icon_stat_value/_icon_stat_value.tsx

@@ -94,13 +94,13 @@ const IconStatValue = (props: IconStatValueProps) => {
 
       <div>
         <Flex
-            vertical="bottom"
+            align="baseline"
         >
-          {titleSize(size)}
+            {titleSize(size)}
           &nbsp;
-          <Body
-              text={unit}
-          />
+            <Body
+                text={unit}
+            />
         </Flex>
         <Caption text={text} />
       </div>

data/app/pb_kits/playbook/pb_icon_stat_value/icon_stat_value.html.erb

@@ -10,7 +10,7 @@
       variant: object.variant } %>
 
       <div>
-        <%= pb_rails("flex", props: { vertical: "bottom" }) do %>
+        <%= pb_rails("flex", props: { align: "baseline" }) do %>
             <%= pb_rails "title", props: {
                 tag: "span",
                 text: object.value_string,

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

@@ -4,7 +4,6 @@ import Slides from './Slides'
 import Thumbnails from './Thumbnails'
 
 type CarouselType = {
-  initialPhoto?: string,
   onClose?: () => void,
   icon?: string,
   currentIndex: number,

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

@@ -12,11 +12,11 @@ type LightboxType = {
   aria?: {[key: string]: string},
   children: React.ReactNode[] | React.ReactNode | string,
   className?: string,
+  currentPhotoIndex?: number,
   data?: {[key: string]: string | number},
   description?: string | any,
   id?: string,
   photos: [],
-  initialPhoto?: number,
   onChange?: (index: number)=> {},
   onClickRight?: () => void,
   onClose?: () => void,
@@ -31,10 +31,10 @@ const Lightbox = (props: LightboxType): React.ReactNode => {
     aria = {},
     children,
     className,
+    currentPhotoIndex,
     data = {},
     description,
     id = '',
-    initialPhoto = 0,
     photos,
     onChange = ()=>{},
     onClose,
@@ -44,12 +44,15 @@ const Lightbox = (props: LightboxType): React.ReactNode => {
     title,
   } = props
 
-  const [activePhoto, setActivePhoto] = useState(initialPhoto)
-
+  const [activePhoto, setActivePhoto] = useState(0)
   useEffect(() => {
     onChange(activePhoto)
   },[activePhoto])
 
+  useEffect(() => {
+    setActivePhoto(currentPhotoIndex)
+  },[currentPhotoIndex])
+
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
   const classes = classnames(

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

@@ -10,17 +10,14 @@ const LightboxCompoundComponent = (props) => {
     '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(0)
   const [showLightbox, toggleShowLightbox] = useState(false)
 
   const handleCloseLightbox = () => {
     toggleShowLightbox(!showLightbox)
-    setSelectedPhoto(null)
   }
 
-  const onPhotoClick = (photo) => {
+  const onPhotoClick = () => {
     toggleShowLightbox(!showLightbox)
-    setSelectedPhoto(photo)
   }
 
   const exampleStyles = {
@@ -34,7 +31,6 @@ const LightboxCompoundComponent = (props) => {
         {showLightbox ? (
           <Lightbox
               description='Description Content Goes Here.'
-              initialPhoto={selectedPhoto}
               onClose={handleCloseLightbox}
               photos={photos}
               title='Windows, Sidings, & Gutters'

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

@@ -0,0 +1,121 @@
+/* @flow */
+/* eslint-disable jsx-control-statements/jsx-use-if-tag */
+import React, { useState } from 'react'
+import { Flex, Image, Button, Body, FlexItem } from '../../'
+import Lightbox from '../_lightbox.tsx'
+
+const LightboxCurrentPhoto = (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',
+    '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',
+    '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',
+    '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',
+    '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',
+    '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',
+    'https://images.unsplash.com/photo-1523057530100-383d7fbc77a1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2669&q=80',
+    '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 [light, toggleLight] = useState(false)
+  //Setting state with the index of the current slide exposed by the onChange prop
+  const [active, setActive] = useState(0)
+  //Setting state for the current photo to pass to the kit
+  const [currentPhoto, setCurrentPhoto] = useState(active)
+
+  const handleCloseLightbox = () => {
+    toggleLight(!light)
+  }
+
+  const onPhotoClick = () => {
+    toggleLight(!light)
+  }
+
+  const exampleStyles = {
+    width: "100%",
+    overflow: "auto"
+  }
+
+  return (
+    <div className="lightbox_doc_example_custom">
+      {light ? (
+        <>
+          <Flex alignItems="center" 
+              className='custom_lightbox_sidebar'
+              justifyContent="center"
+          >
+            <Flex margin='lg'
+                orientation='column'
+            >
+              <Body marginBottom='md'>
+                This UI is for demonstration purposes only to demonstrate how external buttons can be used to change the slides.
+              </Body>
+              <FlexItem alignSelf="center">
+                <Flex justifyContent="center">
+                  <Button 
+                      onClick={()=> setCurrentPhoto(active > 0 ? active - 1 : 0)}
+                  >
+                    Back
+                  </Button>
+                  <Button marginLeft='sm'
+                      onClick={() => setCurrentPhoto(active < photos.length - 1 ? active + 1 : photos.length - 1)}
+                  >
+                    Next
+                  </Button>
+                </Flex>
+              </FlexItem>
+            </Flex>
+          </Flex>
+          <Lightbox
+              currentPhotoIndex={currentPhoto}
+              icon="times"
+              onChange={(index) => setActive(index)}
+              onClose={handleCloseLightbox}
+              photos={photos}
+              {...props}
+          />
+        </>
+      ) : (
+        <div
+            className="PhotoViewer"
+            style={exampleStyles}
+        >
+          <Flex>
+            {photos.map((photo, index) => {
+              return (
+                <div
+                    key={index}
+                    onClick={() => onPhotoClick(index)}
+                >
+                  <Image
+                      cursor="pointer"
+                      marginRight="xl"
+                      rounded
+                      size="lg"
+                      url={photo}
+                  />
+
+                  <div className="overlay" />
+                </div>
+              )
+            })}
+          </Flex>
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default LightboxCurrentPhoto

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

@@ -0,0 +1 @@
+The `currentPhotoIndex` prop allows the user to pass a number to the lightbox that will set the current slide by index. This can be leveraged if the user wants to change slides using custom buttons. To do this, the user must also make use of the current slide's index that is exposed by the `onChange` prop. 

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

@@ -10,17 +10,14 @@ const LightboxCustomHeader = (props) => {
     "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(0);
   const [showLightbox, toggleShowLightbox] = useState(false);
 
   const handleCloseLightbox = () => {
     toggleShowLightbox(!showLightbox);
-    setSelectedPhoto(null);
   };
 
-  const onPhotoClick = (photo) => {
+  const onPhotoClick = () => {
     toggleShowLightbox(!showLightbox);
-    setSelectedPhoto(photo);
   };
 
   const exampleStyles = {
@@ -55,7 +52,6 @@ const LightboxCustomHeader = (props) => {
       {showLightbox ? (
           <Lightbox
               description={customDescription}
-              initialPhoto={selectedPhoto}
               navRight="All Photos"
               onClickRight={()=> alert("Clicked!")}
               onClose={handleCloseLightbox}

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

@@ -8,17 +8,14 @@ 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(0)
   const [showLightbox, toggleShowLightbox] = useState(false)
 
   const handleCloseLightbox = () => {
     toggleShowLightbox(!showLightbox)
-    setSelectedPhoto(null)
   }
 
-  const onPhotoClick = (photoIndex) => {
+  const onPhotoClick = () => {
     toggleShowLightbox(!showLightbox)
-    setSelectedPhoto(photoIndex)
   }
 
   return (
@@ -27,7 +24,6 @@ const LightboxDefault = (props) => {
         {showLightbox ? (
           <Lightbox
               icon="times"
-              initialPhoto={selectedPhoto}
               onClose={handleCloseLightbox}
               photos={photos}
               {...props}

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

@@ -1 +1 @@
-Lightbox contains several props: `photos` (an array of urls), `initialPhoto` (a number), `onClickLeft` (an optional callback function for top left close button), `title` and `description` (string or custom components), `icon` ( optional prop for the close button in the top left of the header), `navRight` (optional prop that renders clickable text in the top right section of the header), `onClickRight` (optional callback function of navRight) and `onChange` (optional event handler prop exposing index of current photo).
+Lightbox contains several props: `photos` (an array of urls), `onClickLeft` (an optional callback function for top left close button), `title` and `description` (string or custom components), `icon` ( optional prop for the close button in the top left of the header), `navRight` (optional prop that renders clickable text in the top right section of the header), `onClickRight` (optional callback function of navRight) and `onChange` (optional event handler prop exposing index of current photo).

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

@@ -29,17 +29,14 @@ const LightboxMultiple = (props) => {
     '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(0)
   const [light, toggleLight] = useState(false)
 
   const handleCloseLightbox = () => {
     toggleLight(!light)
-    setSelectedPhoto(null)
   }
 
-  const onPhotoClick = (photo) => {
+  const onPhotoClick = () => {
     toggleLight(!light)
-    setSelectedPhoto(photo)
   }
 
   const exampleStyles = {
@@ -52,7 +49,6 @@ const LightboxMultiple = (props) => {
       {light ? (
         <Lightbox
             icon="times"
-            initialPhoto={selectedPhoto}
             onChange={(index) => console.log(`current photo index: ${index}`)}
             onClose={handleCloseLightbox}
             photos={photos}

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

@@ -5,3 +5,4 @@ examples:
   - lightbox_multiple: Multiple
   - lightbox_compound_component: Compound Component
   - lightbox_custom_header: Custom Header
+  - lightbox_current_photo: Current Photo

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

@@ -2,3 +2,4 @@ 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'
 export { default as LightboxCustomHeader } from './_lightbox_custom_header'
+export { default as LightboxCurrentPhoto } from './_lightbox_current_photo'

data/app/pb_kits/playbook/pb_lightbox/lightbox.test.jsx

@@ -18,7 +18,6 @@ test('Kit renders', () => {
         data={{ testid: testId }}
         icon="close"
         id="test1"
-        initialPhoto={1}
         onClose={() => {}}
         photos={TEST_PHOTOS}
     />
@@ -35,7 +34,6 @@ test('Shows selected images', () => {
         data={{ testid: testId }}
         icon="close"
         id="test1"
-        initialPhoto={1}
         onClose={() => {}}
         photos={TEST_PHOTOS}
     />
@@ -43,7 +41,7 @@ test('Shows selected images', () => {
   const kit = screen.getByTestId(testId)
   const slide = kit.getElementsByClassName('Slide')[0]
   const image = slide.getElementsByTagName('img')[0]
-  expect(image).toHaveAttribute('src', TEST_PHOTOS[1])
+  expect(image).toHaveAttribute('src', TEST_PHOTOS[0])
 
   const thumbnails = kit.getElementsByClassName('Thumbnail')
 
@@ -77,7 +75,6 @@ test('Closes on escape key', async () => {
         data={{ testid: testId }}
         icon="close"
         id="test1"
-        initialPhoto={0}
         onClose={mockClose}
         photos={TEST_PHOTOS}
     />
@@ -106,7 +103,6 @@ test('Closes on close button', async () => {
         data={{ testid: testId }}
         icon="close"
         id="test1"
-        initialPhoto={0}
         onClose={mockClose}
         photos={TEST_PHOTOS}
     />

data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.scss

@@ -1,7 +1,6 @@
 @import "../tokens/colors";
 
 $transform-rotate-deg: 135deg;
-$input-max-width: 284px;
 $dropdown-min-width: 340px;
 $flag-min-resolution: 192dpi;
 
@@ -10,10 +9,6 @@ $flag-min-resolution: 192dpi;
     color: $focus_input_light;
   }
 
-  .text_input {
-    max-width: $input-max-width;
-  }
-
   .dropdown_open {
     .text_input {
       border-color: $primary !important;

data/app/pb_kits/playbook/pb_phone_number_input/phone_number_input.rb

@@ -7,12 +7,10 @@ module Playbook
                       default: false
       prop :initial_country, type: Playbook::Props::String,
                              default: ""
-      prop :is_valid
       prop :label, type: Playbook::Props::String,
                    default: ""
       prop :name, type: Playbook::Props::String,
                   default: ""
-      prop :onchange
       prop :only_countries, type: Playbook::Props::Array,
                             default: []
       prop :preferred_countries, type: Playbook::Props::Array,
@@ -30,10 +28,8 @@ module Playbook
           dark: dark,
           disabled: disabled,
           initialCountry: initial_country,
-          isValid: is_valid,
           label: label,
           name: name,
-          onChange: onchange,
           onlyCountries: only_countries,
           preferredCountries: preferred_countries,
           value: value,

data/app/pb_kits/playbook/pb_table/{_table.jsx → _table.tsx}

@@ -1,19 +1,17 @@
-/* @flow */
-
-import React, { useEffect, type Node } from 'react'
+import React, { useEffect } from 'react'
 import classnames from 'classnames'
 import { buildAriaProps, buildDataProps } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps'
-import PbTable from './'
+import PbTable from '.'
 
 type TableProps = {
-  aria?: object,
-  children: array<Node> | Node,
+  aria?: { [key: string]: string },
+  children: React.ReactNode[] | React.ReactNode,
   className: string,
   collapse?: "sm" | "md" | "lg",
   container: boolean,
   dark?: boolean,
-  data?: object,
+  data?: { [key: string]: string },
   dataTable: boolean,
   disableHover: boolean,
   id?: string,
@@ -52,9 +50,9 @@ const Table = (props: TableProps) => {
 
   return (
     <table
-        {...ariaProps}
-        {...dataProps}
-        className={classnames(
+      {...ariaProps}
+      {...dataProps}
+      className={classnames(
         'pb_table',
         `table-${size}`,
         `table-responsive-${responsive}`,
@@ -70,7 +68,7 @@ const Table = (props: TableProps) => {
         tableCollapseCss,
         className
       )}
-        id={id}
+      id={id}
     >
       {children}
     </table>

data/app/pb_kits/playbook/pb_table/{_table_row.jsx → _table_row.tsx}

@@ -1,14 +1,13 @@
-/* @flow */
 import React from 'react'
 import classnames from 'classnames'
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps'
 
 type TableRowPropTypes = {
-  aria?: object,
-  children: array<React.ReactNode> | React.ReactNode,
+  aria?: { [key: string]: string },
+  children: React.ReactNode[] | React.ReactNode,
   className: string,
-  data?: object,
+  data?: { [key: string]: string },
   id?: string,
   sideHighlightColor: string,
 }
@@ -31,10 +30,10 @@ const TableRow = (props: TableRowPropTypes) => {
 
   return (
     <tr
-        {...ariaProps}
-        {...dataProps}
-        className={classes}
-        id={id}
+      {...ariaProps}
+      {...dataProps}
+      className={classes}
+      id={id}
     >
       {children}
     </tr>