playbook_ui 10.21.0.pre.alpha.lightbox → 10.21.0.pre.alpha.lightbox.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 8c75501fe979ac41342124f523c7746d81bdab2ece4c13d8a9b3fc8808c5c445
-  data.tar.gz: 63f5a9fc07a22b4e1ca25819e3db56e20927f073f6774bde288a38110694227a
+  metadata.gz: d8de309283f70eb32584fd45cd9c8c1d86eb4379dd3268b32c04961a3c1eb78c
+  data.tar.gz: 5d658516cec5f8eae57b9a5c04375524b9f03bb091171941a30776390130418c
 SHA512:
-  metadata.gz: df78b95db1bf1cc80316580d79d38b5d96e02f8161d9b67dfb8d7195894e9f27c2eceb132920d56c21a924082fedb48bc86df78a15f941941587c8ab60d81c6b
-  data.tar.gz: 6f39130d39966ff49e67d5ad511e4c0447b767de0ded3fa22da749802a5552d2102cbb6e01b7f5cb8d05f3717ae35ad6b4acfb47e0598a6c69bc06135df18fe0
+  metadata.gz: 4ed16f1d8e6ab09e07dfc3f397700e4f41e90716ad91b61dbc33cc31615325a399affdcfb39448b7f5550784c4706ebeac6dfe1b0e4679a8bdd7207d956effaa
+  data.tar.gz: 634bc7cdb80465bb4c226a3b8f8f938380d57c44be6d94e0605c3ba3b357724d251c6a014e766b2173d35c2a22cac965637f953a5864f63ecd73eb466b6614b2

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

@@ -5,8 +5,6 @@ import { noop } from 'lodash'
 import { TransformComponent, TransformWrapper } from 'react-zoom-pan-pinch'
 import Image from '../../pb_image/_image'
 
-import styles from './styles.scss'
-
 type SlideType = {
   alt: string,
   current: number,
@@ -37,12 +35,12 @@ export default function Slide({
         panning={{ disabled: !zooming }}
     >
       <button
-          className={styles.Slide}
+          className="Slide"
           onClick={onClick}
           onDoubleClick={() => onZoom(false)}
           tabIndex={-1}
       >
-        <TransformComponent className={styles.TransformComponent}>
+        <TransformComponent className="TransformComponent">
           <Image
               alt={alt}
               url={url}

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

@@ -5,7 +5,6 @@ import { motion } from 'framer-motion'
 import React, { useState } from 'react'
 
 import Slide from './Slide'
-import styles from './styles.scss'
 import useSlides from './useSlides'
 
 type SlidesType = {
@@ -33,7 +32,7 @@ export default function Slides({
   return (
     <motion.div
         animate={controls}
-        className={styles.Slides}
+        className="Slides"
         drag={!zooming && 'x'}
         dragConstraints={dragConstraints}
         dragElastic={0.05}

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

@@ -5,8 +5,6 @@ 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,
@@ -22,9 +20,10 @@ export default function Thumbnail({
   url,
   onClick = noop,
 }: ThumbnailType) {
+  const activeClasses = classnames('Thumbnail', { active })
   return (
     <button
-        className={classnames(styles.Thumbnail, { [styles.active]: active })}
+        className={classnames(activeClasses)}
         onClick={onClick}
         style={{ width }}
         type="button"

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

@@ -8,8 +8,6 @@ import { useWindowSize } from '../hooks/useWindowSize'
 
 import Thumbnail from './Thumbnail'
 
-import styles from './styles.scss'
-
 export const indexWithinBounds = (
   current: number,
   min: number,
@@ -35,9 +33,7 @@ export default function Thumbnails({
   const viewportSize = useWindowSize()
   const thumbnailWidth = viewportSize.width / 8
   const draggable = thumbnailWidth * urls.length > viewportSize.width
-  const css = classnames(styles.Thumbnails, {
-    [styles.draggable]: draggable,
-  })
+  const css = classnames('Thumbnails', { draggable })
   const dragConstraints = {
     left: -1 * (thumbnailWidth * urls.length - viewportSize.width),
     right: 0,

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

@@ -6,7 +6,6 @@ import React, { useEffect, useState } from 'react'
 
 import Slides from './Slides'
 import Thumbnails from './Thumbnails'
-import styles from './styles.scss'
 
 type CarouselType = {
   initialPhoto: string,
@@ -40,7 +39,7 @@ export default function Carousel({
   }
 
   return (
-    <div className={styles.Lightbox}>
+    <div className="Lightbox">
       <Slides
           current={currentIndex}
           onChange={handleChange}

data/app/pb_kits/playbook/pb_lightbox/lightbox.scss

@@ -88,3 +88,115 @@
       pointer-events: none;
     }
   }
+
+
+  .Lightbox {
+    width: 100vw;
+    height: 100vh;
+    position: fixed;
+    left: 0;
+    top: 0;
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    background-color: black;
+    z-index: 1;
+    overflow: hidden;
+  }
+  
+  .Slides {
+    display: flex;
+    flex-grow: 1;
+    height: calc(100% - 100px);
+    width: 100%;
+    z-index: 1;
+  
+    [class^="react-transform-wrapper"] {
+      flex-shrink: 0;
+      width: 100%;
+      height: 100%;
+    }
+  
+    [class^="react-transform-content"] {
+      width: 100%;
+      height: 100%;
+    }
+  }
+  
+  .Slide,
+  .Thumbnail {
+    flex-shrink: 0;
+    border: none;
+    margin: 0;
+    padding: 0;
+    cursor: pointer;
+    background-color: transparent;
+  }
+  
+  .Slide {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+  
+    img {
+      width: 100vw;
+      height: 100vh;
+      object-fit: contain;
+    }
+  }
+  
+  .BackBtn,
+  .NextBtn {
+    z-index: 2;
+    color: black;
+    position: absolute;
+    width: 50px;
+    height: 50px;
+    top: calc(50vh - 5px);
+    border: none;
+    border-radius: 50%;
+    background-color: white;
+  }
+  
+  .BackBtn::before,
+  .NextBtn::before {
+    content: "▸";
+  }
+  
+  .BackBtn {
+    left: 30px;
+    transform: rotate(180deg);
+  }
+  
+  .NextBtn {
+    right: 30px;
+  }
+  
+  .Thumbnails {
+    display: flex;
+    padding: 3px;
+  }
+  
+  .Thumbnails.draggable {
+    align-self: flex-start;
+  }
+  
+  .Thumbnail {
+    padding: 3px;
+    height: 100%;
+  
+    img {
+      width: 100%;
+      height: 100%;
+    }
+  }
+  
+  .Thumbnail.active {
+    padding: 6px;
+    background-color: white;
+    box-shadow: 0 0 6px white;
+  }
+  

data/lib/playbook/version.rb

@@ -2,5 +2,5 @@
 
 module Playbook
   PREVIOUS_VERSION = "10.19.0"
-  VERSION = "10.21.0.pre.alpha.lightbox"
+  VERSION = "10.21.0.pre.alpha.lightbox.2"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 10.21.0.pre.alpha.lightbox
+  version: 10.21.0.pre.alpha.lightbox.2
 platform: ruby
 authors:
 - Power UX
@@ -1186,7 +1186,6 @@ files:
 - 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/_lightbox.jsx
 - app/pb_kits/playbook/pb_lightbox/_lightbox_context.jsx

data/app/pb_kits/playbook/pb_lightbox/Carousel/styles.scss

@@ -1,110 +0,0 @@
-.Lightbox {
-    width: 100vw;
-    height: 100vh;
-    position: fixed;
-    left: 0;
-    top: 0;
-    display: flex;
-    align-items: center;
-    flex-direction: column;
-    background-color: black;
-    z-index: 1;
-    overflow: hidden;
-  }
-  
-  .Slides {
-    display: flex;
-    flex-grow: 1;
-    height: calc(100% - 100px);
-    width: 100%;
-    z-index: 1;
-  
-    [class^="react-transform-wrapper"] {
-      flex-shrink: 0;
-      width: 100%;
-      height: 100%;
-    }
-  
-    [class^="react-transform-content"] {
-      width: 100%;
-      height: 100%;
-    }
-  }
-  
-  .Slide,
-  .Thumbnail {
-    flex-shrink: 0;
-    border: none;
-    margin: 0;
-    padding: 0;
-    cursor: pointer;
-    background-color: transparent;
-  }
-  
-  .Slide {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    width: 100%;
-    height: 100%;
-    overflow: hidden;
-  
-    img {
-      width: 100vw;
-      height: 100vh;
-      object-fit: contain;
-    }
-  }
-  
-  .BackBtn,
-  .NextBtn {
-    z-index: 2;
-    color: black;
-    position: absolute;
-    width: 50px;
-    height: 50px;
-    top: calc(50vh - 5px);
-    border: none;
-    border-radius: 50%;
-    background-color: white;
-  }
-  
-  .BackBtn::before,
-  .NextBtn::before {
-    content: "▸";
-  }
-  
-  .BackBtn {
-    left: 30px;
-    transform: rotate(180deg);
-  }
-  
-  .NextBtn {
-    right: 30px;
-  }
-  
-  .Thumbnails {
-    display: flex;
-    padding: 3px;
-  }
-  
-  .Thumbnails.draggable {
-    align-self: flex-start;
-  }
-  
-  .Thumbnail {
-    padding: 3px;
-    height: 100%;
-  
-    img {
-      width: 100%;
-      height: 100%;
-    }
-  }
-  
-  .Thumbnail.active {
-    padding: 6px;
-    background-color: white;
-    box-shadow: 0 0 6px white;
-  }
-