playbook_ui 11.1.2.pre.alpha1 → 11.2.1

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

@@ -0,0 +1,124 @@
+import React from 'react'
+import { fireEvent, render, screen, waitForElementToBeRemoved } from '../utilities/test-utils'
+
+import { Lightbox } from '../'
+
+const testId = 'customId',
+  kitClass = 'pb_lightbox_kit',
+  TEST_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',
+  ]
+
+test('Kit renders', () => {
+  render(
+    <Lightbox
+        className="customClass"
+        data={{ testid: testId }}
+        icon="close"
+        iconSize="3x"
+        id="test1"
+        initialPhoto={1}
+        onClose={() => {}}
+        photos={TEST_PHOTOS}
+    />
+  )
+  const kit = screen.getByTestId(testId)
+  expect(kit).toHaveClass(`${kitClass} customClass`)
+  expect(kit).toBeInTheDocument()
+})
+
+test('Shows selected images', () => {
+  render(
+    <Lightbox
+        data={{ testid: testId }}
+        icon="close"
+        iconSize="3x"
+        id="test1"
+        initialPhoto={1}
+        onClose={() => {}}
+        photos={TEST_PHOTOS}
+    />
+  )
+  const kit = screen.getByTestId(testId)
+  const slide = kit.getElementsByClassName('Slide')[0]
+  const image = slide.getElementsByTagName('img')[0]
+  expect(image).toHaveAttribute('src', TEST_PHOTOS[1])
+
+  const thumbnails = kit.getElementsByClassName('Thumbnail')
+
+  fireEvent(
+    thumbnails[2],
+    new MouseEvent('click', {
+      bubbles: true,
+      cancelable: true,
+    }),
+  )
+
+  expect(image).toHaveAttribute('src', TEST_PHOTOS[2])
+
+  fireEvent(
+    thumbnails[0],
+    new MouseEvent('click', {
+      bubbles: true,
+      cancelable: true,
+    }),
+  )
+
+  expect(image).toHaveAttribute('src', TEST_PHOTOS[0])
+})
+
+test('Closes on escape key', async () => {
+  render(
+    <Lightbox
+        data={{ testid: testId }}
+        icon="close"
+        iconSize="3x"
+        id="test1"
+        initialPhoto={0}
+        onClose={() => {}}
+        photos={TEST_PHOTOS}
+    />
+  )
+
+  const kit = screen.getByTestId(testId)
+
+  fireEvent(
+    document.body,
+    new KeyboardEvent('keydown', {
+      keyCode: 27, //escape
+    })
+  )
+
+  waitForElementToBeRemoved(kit)
+    .then(() => expect(kit).not.toBeInTheDocument())
+})
+
+test('Closes on close button', () => {
+  render(
+    <Lightbox
+        data={{ testid: testId }}
+        icon="close"
+        iconSize="3x"
+        id="test1"
+        initialPhoto={0}
+        onClose={() => {}}
+        photos={TEST_PHOTOS}
+    />
+  )
+
+  const kit = screen.getByTestId(testId)
+  const closeIcon = kit.getElementsByClassName('close-icon')[0]
+
+  fireEvent(
+    closeIcon,
+    new MouseEvent('click', {
+      bubbles: true,
+      cancelable: true,
+    }),
+  )
+
+  waitForElementToBeRemoved(kit)
+    .then(() => expect(kit).not.toBeInTheDocument())
+})

data/app/pb_kits/playbook/playbook-doc.js

@@ -51,6 +51,7 @@ import * as LabelPill from 'pb_label_pill/docs'
 import * as LabelValue from 'pb_label_value/docs'
 import * as Layout from 'pb_layout/docs'
 import * as LegendDocs from 'pb_legend/docs'
+import * as Lightbox from 'pb_lightbox/docs'
 import * as LineGraphDocs from 'pb_line_graph/docs'
 import * as List from 'pb_list/docs'
 import * as LoadingInline from 'pb_loading_inline/docs'
@@ -146,6 +147,7 @@ WebpackerReact.setup({
   ...LabelValue,
   ...Layout,
   ...LegendDocs,
+  ...Lightbox,
   ...LineGraphDocs,
   ...List,
   ...LoadingInline,

data/app/pb_kits/playbook/utilities/globalProps.ts

@@ -22,7 +22,7 @@ type AlignItems = {
 type AlignSelf = {
   alignSelf?: Alignment & ("auto" | "stretch" | "baseline")
 }
-type AllSizes = None & Sizes
+type AllSizes = None | Sizes
 
 type BorderRadius = {
   borderRadius?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "rounded",

data/dist/reset.css

@@ -1,61 +1,2 @@
-/* CLEAN UP AND REMOVE */
-/* Headings */
-/* Standard Font Weights */
-/* Non_Standard Font Weights */
-/*=====================================
-Base colors should not be documented.
-Only document color use.
-
-Colors -----------------------------*/
-/* Specialty Gradient -----------------*/
-/* Interface colors -------------------*/
-/* Main colors ------------------------*/
-/*=====================================
-
-Background colors ------------------*/
-/* Card colors ------------------*/
-/* Active colors ----------------------*/
-/* Hover colors -----------------------*/
-/* Focus colors -----------------------*/
-/* Border colors ----------------------*/
-/* Shadow colors ----------------------*/
-/* Text colors ------------------------*/
-/* Data colors ------------------------*/
-/* Status colors ----------------------*/
-/* Link colors ------------------------*/
-/* Product colors ---------------------*/
-/* Category colors ---------------------*/
-* {
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0; }
-  *:before, *:after {
-    box-sizing: border-box; }
-
-html {
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-  height: 100vh;
-  overflow-x: hidden; }
-
-body {
-  font-family: "Proxima Nova", "Helvetica Neue", Helvetica, Arial, sans_serif;
-  font-size: 16px;
-  line-height: 1.5;
-  background-color: #F3F7FB;
-  height: 100%;
-  letter-spacing: 0;
-  font-weight: 400;
-  font-style: normal;
-  text-rendering: optimizeLegibility;
-  -moz-font-feature-settings: "liga" on;
-  color: #242B42;
-  margin: 0 !important;
-  padding: 0 !important;
-  box-sizing: border-box;
-  min-height: 100vh;
-  padding: 50px; }
-
-a {
-  text-decoration: none;
-  color: #0056CF; }
+*{box-sizing:border-box;margin:0;padding:0}*:before,*:after{box-sizing:border-box}html{-webkit-tap-highlight-color:rgba(0,0,0,0);height:100vh;overflow-x:hidden}body{font-family:"Proxima Nova","Helvetica Neue",Helvetica,Arial,sans_serif;font-size:16px;line-height:1.5;background-color:#F3F7FB;height:100%;letter-spacing:0;font-weight:400;font-style:normal;text-rendering:optimizeLegibility;-moz-font-feature-settings:"liga" on;color:#242B42;margin:0 !important;padding:0 !important;box-sizing:border-box;min-height:100vh;padding:50px}a{text-decoration:none;color:#0056CF}
 

data/lib/playbook/version.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
 module Playbook
-  PREVIOUS_VERSION = "11.1.1"
-  VERSION = "11.1.2.pre.alpha1"
+  PREVIOUS_VERSION = "11.2.0"
+  VERSION = "11.2.1"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 11.1.2.pre.alpha1
+  version: 11.2.1
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2022-07-18 00:00:00.000000000 Z
+date: 2022-08-01 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -438,8 +438,8 @@ files:
 - app/pb_kits/playbook/pb_button/docs/_footer.md
 - app/pb_kits/playbook/pb_button/docs/example.yml
 - app/pb_kits/playbook/pb_button/docs/index.js
-- app/pb_kits/playbook/pb_button_toolbar/_button_toolbar.jsx
 - app/pb_kits/playbook/pb_button_toolbar/_button_toolbar.scss
+- app/pb_kits/playbook/pb_button_toolbar/_button_toolbar.tsx
 - app/pb_kits/playbook/pb_button_toolbar/_button_toolbar_dark.scss
 - app/pb_kits/playbook/pb_button_toolbar/_button_toolbar_mixins.scss
 - app/pb_kits/playbook/pb_button_toolbar/button_toolbar.html.erb
@@ -588,6 +588,7 @@ files:
 - app/pb_kits/playbook/pb_contact/_contact.scss
 - app/pb_kits/playbook/pb_contact/contact.html.erb
 - app/pb_kits/playbook/pb_contact/contact.rb
+- app/pb_kits/playbook/pb_contact/contact.test.js
 - app/pb_kits/playbook/pb_contact/docs/_contact_default.html.erb
 - app/pb_kits/playbook/pb_contact/docs/_contact_default.jsx
 - app/pb_kits/playbook/pb_contact/docs/_contact_with_detail.html.erb
@@ -802,6 +803,10 @@ files:
 - app/pb_kits/playbook/pb_dialog/docs/_dialog_should_close_on_overlay.jsx
 - app/pb_kits/playbook/pb_dialog/docs/_dialog_should_close_on_overlay.md
 - app/pb_kits/playbook/pb_dialog/docs/_dialog_sizes.jsx
+- app/pb_kits/playbook/pb_dialog/docs/_dialog_stacked_alert.jsx
+- app/pb_kits/playbook/pb_dialog/docs/_dialog_stacked_alert.md
+- app/pb_kits/playbook/pb_dialog/docs/_dialog_status.jsx
+- app/pb_kits/playbook/pb_dialog/docs/_dialog_status.md
 - app/pb_kits/playbook/pb_dialog/docs/example.yml
 - app/pb_kits/playbook/pb_dialog/docs/index.js
 - app/pb_kits/playbook/pb_distribution_bar/_distribution_bar.jsx
@@ -886,6 +891,7 @@ files:
 - app/pb_kits/playbook/pb_flex/_flex.tsx
 - app/pb_kits/playbook/pb_flex/_flex_item.jsx
 - app/pb_kits/playbook/pb_flex/_flex_item.scss
+- app/pb_kits/playbook/pb_flex/_flex_item.tsx
 - app/pb_kits/playbook/pb_flex/docs/_description.md
 - app/pb_kits/playbook/pb_flex/docs/_flex_align.html.erb
 - app/pb_kits/playbook/pb_flex/docs/_flex_align.jsx
@@ -1206,6 +1212,27 @@ files:
 - app/pb_kits/playbook/pb_legend/legend.html.erb
 - app/pb_kits/playbook/pb_legend/legend.rb
 - app/pb_kits/playbook/pb_legend/legend.test.js
+- app/pb_kits/playbook/pb_lightbox/Carousel/Slide.tsx
+- app/pb_kits/playbook/pb_lightbox/Carousel/Slides.tsx
+- app/pb_kits/playbook/pb_lightbox/Carousel/Thumbnail.tsx
+- app/pb_kits/playbook/pb_lightbox/Carousel/Thumbnails.tsx
+- app/pb_kits/playbook/pb_lightbox/Carousel/index.tsx
+- app/pb_kits/playbook/pb_lightbox/_lightbox.tsx
+- app/pb_kits/playbook/pb_lightbox/_lightbox_context.tsx
+- app/pb_kits/playbook/pb_lightbox/_lightbox_header.tsx
+- app/pb_kits/playbook/pb_lightbox/_lightbox_header_icon.tsx
+- 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_default.jsx
+- app/pb_kits/playbook/pb_lightbox/docs/_lightbox_default.md
+- app/pb_kits/playbook/pb_lightbox/docs/_lightbox_multiple.jsx
+- app/pb_kits/playbook/pb_lightbox/docs/example.yml
+- app/pb_kits/playbook/pb_lightbox/docs/index.js
+- app/pb_kits/playbook/pb_lightbox/hooks/useKbdControls.ts
+- app/pb_kits/playbook/pb_lightbox/hooks/useVisibility.js
+- app/pb_kits/playbook/pb_lightbox/hooks/useWindowSize.ts
+- app/pb_kits/playbook/pb_lightbox/lightbox.scss
+- app/pb_kits/playbook/pb_lightbox/lightbox.test.jsx
 - app/pb_kits/playbook/pb_line_graph/_line_graph.jsx
 - app/pb_kits/playbook/pb_line_graph/_line_graph.scss
 - app/pb_kits/playbook/pb_line_graph/docs/_description.md
@@ -2224,9 +2251,9 @@ 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: