RubyGems - playbook_ui - Versions diffs - 11.1.2 → 11.2.0 - Mend

playbook_ui 11.1.2 → 11.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (48) hide show

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

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -1,2 +1,61 @@
-*{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}
+/* 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; }

data/lib/playbook/version.rb CHANGED Viewed

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

metadata CHANGED Viewed

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 11.1.2
+  version: 11.2.0
 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-07-28 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