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

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

@@ -1,202 +0,0 @@
-@import "../tokens/spacing";
-
-  .carousel {
-    .home-tour-main-content {
-      overflow-y: hidden;
-    }
-
-    .image-gallery-slide-wrapper {
-      width: 1024px;
-      height: 686px;
-    }
-
-    .image-gallery-slide div {
-      height: auto;
-    }
-
-    .image-gallery-slide .image-gallery-image {
-      max-height: 100% !important;
-      max-width: 100% !important;
-      height: 692px !important;
-      width: 100% !important;
-      object-fit: cover;
-    }
-
-    .image-gallery-left-nav .image-gallery-svg, .image-gallery-right-nav .image-gallery-svg {
-      height: 120px;
-      width: 30px;
-      opacity: 0.4;
-    }
-    .image-gallery-thumbnails {
-      overflow-x: auto;
-    }
-
-    .image-gallery-thumbnails-container {
-      width: 1024px;
-      padding-left: 4px;
-    }
-
-    .image-gallery-thumbnails {
-      padding-top: 3px;
-      background: #000;
-    }
-
-    .image-gallery-thumbnail-image {
-      height: 64px;
-      width: 93px;
-    }
-
-    .image-gallery-thumbnail + .image-gallery-thumbnail {
-      margin-left: 2px;
-      margin-top: 2px;
-    }
-
-    .carousel-header {
-      background: rgb(0, 0, 0);
-      border-radius: 0px;
-      min-height: 51px;
-      width: 100%;
-      position: fixed;
-      top: 0;
-      left: 0;
-      z-index: 2;
-      align-items: center;
-      padding: $space-sm;
-      transition: all .5s;
-
-      .close-icon {
-        color: white;
-        margin-left: 16px;
-        top: 16px;
-      }
-    }
-  }
-
-  .photo-cards {
-    .overlay {
-      width: 100% !important;
-      height: 50% !important;
-      bottom: 0;
-      position: absolute !important;
-      border-radius: 0px 0px 5px 5px;
-      background: linear-gradient(-180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.77) 100%);
-    }
-
-    .overlay,
-    .overlay ~ .key-photo-icon,
-    .overlay ~ .tag-counter {
-      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/app/pb_kits/playbook/pb_lightbox/lightbox.test.jsx

@@ -1,30 +0,0 @@
-import React from 'react'
-import { render, screen } from '../utilities/test-utils'
-
-import { Lightbox } from '../'
-
-const testId = 'customId',
-  kitClass = 'pb_lightbox_kit'
-
-test('Lightbox Test', () => {
-  render(
-    <Lightbox
-        className="customClass"
-        data={{ testid: testId }}
-        icon="close"
-        iconSize="3x"
-        id="test1"
-        initialPhoto="https://images.unsplash.com/photo-1518791841217-8f162f1e1131?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60"
-        onClose={() => {}}
-        photos={[
-        'https://images.unsplash.com/photo-1518791841217-8f162f1e1131?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60',
-        'https://images.unsplash.com/photo-1518791841217-8f162f1e1131?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60',
-        'https://images.unsplash.com/photo-1518791841217-8f162f1e1131?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60',
-        'https://images.unsplash.com/photo-1518791841217-8f162f1e1131?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60',
-      ]}
-    />
-  )
-  const kit = screen.getByTestId(testId)
-  expect(kit).toHaveClass(`${kitClass} customClass`)
-  expect(kit).toBeInTheDocument()
-})