playbook_ui 11.1.2 → 11.2.2

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

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

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 11.1.2
+  version: 11.2.2
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2022-07-19 00:00:00.000000000 Z
+date: 2022-08-04 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