playbook_ui 12.14.0.pre.alpha.lightboxcurrentphotoprop460 → 12.14.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: ea7957ed8d699800c355f334304b484be3773ec1a0c5c21699f9bccf9b3c0a50
-  data.tar.gz: 694efd1b41b1917430963c58e8cffb427bde2351a49a3293bd81c121be47344a
+  metadata.gz: a42d45fa9c0cb3563d9253c5c676edcd535e813873bca8f31162258372554bb9
+  data.tar.gz: 162a8abeed8d622e81d218e90c6a1d693a17d068d489234cbd0fb39f2c50ac7e
 SHA512:
-  metadata.gz: e562d349fbb3dda65376d35efc1cef28bf8f1fdcc7e1028c48ee9ec4ff3943963f8286f81d347cdaf545a5d28fb9d7be03bd78324f0e44a1920dd89ff2731597
-  data.tar.gz: b8ad8ac157fdbc56d039f4033742cc9707876f15275ab88c5a1a50f7c5b50539916312590a2f1e016b3b84871b16f4a29e577a448cb8733ccab5833eb2661ded
+  metadata.gz: de1b0f03c8ca91aedae5581617fab0920bde4bfbaa034137021a0f3fe87932a6cb963231f9add0470a606046341d3c5a0b8d3819803ae7eb34af9415f4c340b6
+  data.tar.gz: e5f9702e6a3f812e3ae0080cc604406fbc7f115f2b1fcf7f83e2537e9502a833d93436abe3f3c9c0795d013791f62ba43631be32298891143a8fbf58728f2ef4

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

@@ -12,7 +12,6 @@ type LightboxType = {
   aria?: {[key: string]: string},
   children: React.ReactNode[] | React.ReactNode | string,
   className?: string,
-  currentPhoto?: number,
   data?: {[key: string]: string | number},
   description?: string | any,
   id?: string,
@@ -32,7 +31,6 @@ const Lightbox = (props: LightboxType): React.ReactNode => {
     aria = {},
     children,
     className,
-    currentPhoto,
     data = {},
     description,
     id = '',
@@ -47,14 +45,11 @@ const Lightbox = (props: LightboxType): React.ReactNode => {
   } = props
 
   const [activePhoto, setActivePhoto] = useState(initialPhoto)
+
   useEffect(() => {
     onChange(activePhoto)
   },[activePhoto])
 
-  useEffect(() => {
-    setActivePhoto(currentPhoto)
-  },[currentPhoto])
-
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
   const classes = classnames(

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

@@ -5,4 +5,3 @@ 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,4 +2,3 @@ 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

@@ -35,7 +35,7 @@ test('Shows selected images', () => {
         data={{ testid: testId }}
         icon="close"
         id="test1"
-        initialPhoto={0}
+        initialPhoto={1}
         onClose={() => {}}
         photos={TEST_PHOTOS}
     />
@@ -43,7 +43,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[0])
+  expect(image).toHaveAttribute('src', TEST_PHOTOS[1])
 
   const thumbnails = kit.getElementsByClassName('Thumbnail')
 

data/lib/playbook/version.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
 module Playbook
-  PREVIOUS_VERSION = "12.14.0"
-  VERSION = "12.14.0.pre.alpha.lightboxcurrentphotoprop460"
+  PREVIOUS_VERSION = "12.13.0"
+  VERSION = "12.14.0"
 end

metadata

@@ -1,15 +1,15 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 12.14.0.pre.alpha.lightboxcurrentphotoprop460
+  version: 12.14.0
 platform: ruby
 authors:
 - Power UX
 - Power Devs
-autorequire: 
+autorequire:
 bindir: bin
 cert_chain: []
-date: 2023-04-11 00:00:00.000000000 Z
+date: 2023-04-06 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -1333,8 +1333,6 @@ files:
 - app/pb_kits/playbook/pb_lightbox/docs/_description.md
 - app/pb_kits/playbook/pb_lightbox/docs/_lightbox_compound_component.jsx
 - app/pb_kits/playbook/pb_lightbox/docs/_lightbox_compound_component.md
-- app/pb_kits/playbook/pb_lightbox/docs/_lightbox_current_photo.jsx
-- app/pb_kits/playbook/pb_lightbox/docs/_lightbox_current_photo.md
 - app/pb_kits/playbook/pb_lightbox/docs/_lightbox_custom_header.jsx
 - app/pb_kits/playbook/pb_lightbox/docs/_lightbox_custom_header.md
 - app/pb_kits/playbook/pb_lightbox/docs/_lightbox_default.jsx
@@ -2467,7 +2465,7 @@ homepage: http://playbook.powerapp.cloud
 licenses:
 - ISC
 metadata: {}
-post_install_message: 
+post_install_message:
 rdoc_options: []
 require_paths:
 - lib
@@ -2478,12 +2476,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: []

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

@@ -1,115 +0,0 @@
-/* @flow */
-/* eslint-disable jsx-control-statements/jsx-use-if-tag */
-import React, { useState } from 'react'
-import { Flex, Image, Button } 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 [selectedPhoto, setSelectedPhoto] = useState(0)
-  const [light, toggleLight] = useState(false)
-  //Setting state with the index of the current slide exposed by the onChange prop
-  const [active, setActive] = useState(selectedPhoto)
-  //Setting state for the current photo to pass to the kit
-  const [currentPhoto, setCurrentPhoto] = useState(active)
-
-  const handleCloseLightbox = () => {
-    toggleLight(!light)
-    setSelectedPhoto(null)
-  }
-
-  const onPhotoClick = (photo) => {
-    toggleLight(!light)
-    setSelectedPhoto(photo)
-  }
-
-  const exampleStyles = {
-    width: "100%",
-    overflow: "auto"
-  }
-
-  return (
-    <div>
-      {light ? (
-        <>
-          <div style={{width: '200px', height: '50px', position: 'fixed', top: 0, right: 0, zIndex: 1000000000000000}}>
-            <div style={{position: 'absolute',right: '100px'}}>
-              <Button 
-                  onClick={()=> setCurrentPhoto(active > 0 ? active - 1 : 0)}
-              >
-                Back
-              </Button>
-            </div>
-            <div style={{position: 'absolute', right: 0}}>
-              <Button
-                  onClick={() => setCurrentPhoto(active < photos.length - 1 ? active + 1 : photos.length - 1)}
-              >
-                Next
-              </Button>
-            </div>
-          </div>
-          <Lightbox
-              currentPhoto={currentPhoto}
-              icon="times"
-              initialPhoto={selectedPhoto}
-              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

@@ -1 +0,0 @@
-The `currentPhoto` 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.