playbook_ui 12.17.0.pre.alpha.lightboxcurrentPhotoIndex582 → 12.17.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: bed2313044d6ca33a9bb666afe1c6305e5d99b9f1de9d809d28b6978b45637a8
-  data.tar.gz: ca47d98d665b8112837f2e39f57ee39fc10cd3f3440e56e1c986d424bcb4bddc
+  metadata.gz: cd6838e0560cc93f906cf9adc9ca3b2ddf760b04eb217a758de88cf4d55f5921
+  data.tar.gz: 7fe4be39b88ef061b65beb11d35680d3faf0ffe9eea5696f4cffdb0385eff6a5
 SHA512:
-  metadata.gz: 71e5a51e29e811bd4b5170728cf2bf8ee1dd80147d33697edd13a334206119fe9bae3ae9e16e107bdc557027208d6b17e46d4976e9a222582d72849a9ed917af
-  data.tar.gz: 5bf261e0aeaf57de2c6d6807b205302e0beedf6943f53d65d1338dff3ba81ff4e068cd51f574b122c292bda0bbe6ce6dda06476596e2c69f4e22cdb091a5859b
+  metadata.gz: 50fb6671787a4142632f88b003d143dc5731ca71e06e8c3cbe94ecf6e4650c803466e79365047133bd9eb43049c0f0731b504ee8d013c73ab03f0cca7794dc46
+  data.tar.gz: 7965856ed4ff7d6c7197f5bdaead0960549c67673c94da1f659b4d1a65cb2c179c0fa8800900c6323675afb823e06a5ab24d1735d58a7d8fadc28b9cc843e4ac

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

@@ -47,15 +47,12 @@ const Lightbox = (props: LightboxType): React.ReactNode => {
   } = props
 
   const [activePhoto, setActivePhoto] = useState(initialPhoto)
-
   useEffect(() => {
     onChange(activePhoto)
   },[activePhoto])
 
   useEffect(() => {
-    currentPhotoIndex !== undefined && currentPhotoIndex !== null && (
     setActivePhoto(currentPhotoIndex)
-    )
   },[currentPhotoIndex])
 
   const ariaProps = buildAriaProps(aria)

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

@@ -118,4 +118,4 @@ const LightboxCurrentPhoto = (props) => {
   )
 }
 
-export default LightboxCurrentPhoto
+export default LightboxCurrentPhoto

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/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/lib/playbook/version.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
 module Playbook
-  PREVIOUS_VERSION = "12.17.0"
-  VERSION = "12.17.0.pre.alpha.lightboxcurrentPhotoIndex582"
+  PREVIOUS_VERSION = "12.16.0"
+  VERSION = "12.17.0"
 end

metadata

@@ -1,15 +1,15 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 12.17.0.pre.alpha.lightboxcurrentPhotoIndex582
+  version: 12.17.0
 platform: ruby
 authors:
 - Power UX
 - Power Devs
-autorequire: 
+autorequire:
 bindir: bin
 cert_chain: []
-date: 2023-04-30 00:00:00.000000000 Z
+date: 2023-04-27 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -2474,7 +2474,7 @@ homepage: http://playbook.powerapp.cloud
 licenses:
 - ISC
 metadata: {}
-post_install_message: 
+post_install_message:
 rdoc_options: []
 require_paths:
 - lib
@@ -2485,12 +2485,12 @@ required_ruby_version: !ruby/object:Gem::Requirement
       version: '0'
 required_rubygems_version: !ruby/object:Gem::Requirement
   requirements:
-  - - ">"
+  - - ">="
     - !ruby/object:Gem::Version
-      version: 1.3.1
+      version: '0'
 requirements: []
 rubygems_version: 3.3.7
-signing_key: 
+signing_key:
 specification_version: 4
 summary: Playbook Design System
 test_files: []