playbook_ui 10.19.0 → 10.21.0.pre.alpha.lightbox

data/app/pb_kits/playbook/pb_popover/docs/_popover_close.html.erb

@@ -1,23 +1,23 @@
 <%= pb_rails("flex", props: {classname: "flex-container", spacing: "between"}) do %>
   <span>
-    <%= pb_rails("button", props: { text: "Click Inside", variant: "secondary", id: 'inside-popover-1' }) %>
+    <%= pb_rails("button", props: { text: "Click Inside", variant: "secondary", id: "inside-popover-1" }) %>
     <%= pb_rails("popover", props: {
       close_on_click: "inside",
       trigger_element_id: "inside-popover-1",
       tooltip_id: "inside-tooltip-1",
-      position: 'bottom',
+      position: "bottom",
       offset: true
     }) do %>
       Click on me!
     <% end %>
   </span>
   <span>
-    <%= pb_rails("button", props: { text: "Click Outside", variant: "secondary", id: 'outside-popover-1' }) %>
+    <%= pb_rails("button", props: { text: "Click Outside", variant: "secondary", id: "outside-popover-1" }) %>
     <%= pb_rails("popover", props: {
       close_on_click: "outside",
       trigger_element_id: "outside-popover-1",
       tooltip_id: "outside-tooltip-1",
-      position: 'left',
+      position: "left",
       offset: true
     }) do %>
         Click anywhere but me!
@@ -27,16 +27,16 @@
     <%= pb_rails("button", props: {
       text: "Click Anywhere",
       variant: "secondary",
-      id: 'any-popover-1'
+      id: "any-popover-1"
     }) %>
     <%= pb_rails("popover", props: {
       close_on_click: "any",
       trigger_element_id: "any-popover-1",
       tooltip_id: "any-tooltip-1",
-      position: 'top',
+      position: "top",
       offset: true
     }) do %>
       Click anything!
     <% end %>
   </span>
-<% end %>
+<% end %>

data/app/pb_kits/playbook/pb_popover/index.js

@@ -36,15 +36,14 @@ export default class PbPopover extends PbEnhancedElement {
       }
 
       setTimeout(() => {
-        this.popper.update()
         this.toggleTooltip()
+        this.popper.update()
       }, 0)
     })
   }
 
   checkCloseTooltip() {
     document.querySelector('body').addEventListener('click', ({ target }) => {
-      const isTriggerElement = target.closest(`#${this.triggerElementId}`) !== null
       const isTooltipElement = target.closest(`#${this.tooltipId}`) !== null
 
       switch (this.closeOnClick) {
@@ -52,21 +51,17 @@ export default class PbPopover extends PbEnhancedElement {
         this.hideTooltip()
         break
       case 'outside':
-        if (isTooltipElement) {
-          this.checkCloseTooltip()
-        } else {
+        if (!isTooltipElement) {
           this.hideTooltip()
         }
         break
       case 'inside':
-        if (isTooltipElement || isTriggerElement) {
+        if (isTooltipElement) {
           this.hideTooltip()
-        } else {
-          this.checkCloseTooltip()
         }
         break
       }
-    }, { once: true })
+    }, true)
   }
 
   hideTooltip() {

data/app/pb_kits/playbook/pb_popover/popover.html.erb

@@ -3,7 +3,7 @@
   class: object.classname,
   data: object.data,
   id: object.id) do %>
-  <div class="pb_popover_tooltip" id="<%= object.tooltip_id %>" role="tooltip" style="<%= object.z_index_helper %>">
+  <div class="pb_popover_tooltip hide" id="<%= object.tooltip_id %>" role="tooltip" style="<%= object.z_index_helper %>">
     <div class="pb_popover_body <%= object.width_height_class_helper %> <%= object.popover_spacing_helper %>" style="<%= object.width_height_helper %>">
       <%= content.presence %>
     </div>

data/app/pb_kits/playbook/pb_rich_text_editor/_rich_text_editor.jsx

@@ -129,6 +129,10 @@ const RichTextEditor = (props: RichTextEditorProps) => {
     trixRef.current.addEventListener('click', handleClick)
   }, [])
 
+  useEffect(() => {
+    trixRef.current.editor.loadHTML(value)
+  }, [value])
+
   const RichTextEditorClass = 'pb_rich_text_editor_kit'
   const SimpleClass = simple ? 'simple' : ''
   const FocusClass = focus ? 'focus-editor-targets' : ''

data/app/pb_kits/playbook/pb_text_input/_text_input.scss

@@ -4,12 +4,12 @@
 
 
 [class^=pb_text_input_kit] {
+  margin-bottom: $space_sm;
   .pb_text_input_kit_label {
     margin-bottom: $space_xs;
     display: block;
   }
   .text_input_wrapper {
-    margin-bottom: $space_sm;
     display: block;
     input::placeholder,
     .text_input .placeholder {
@@ -169,7 +169,7 @@
     &-card {
       height: 45px;
       margin: 0;
-      padding: 0 !important;
+      padding: 0;
       align-items: center;
       justify-content: center;
       width: 45px;

data/app/pb_kits/playbook/pb_text_input/text_input.test.js

@@ -75,3 +75,17 @@ test('returns additional class name', () => {
   const kit = screen.getByTestId(testId)
   expect(kit).toHaveClass(`${kitClass} dark error`)
 })
+
+test('returns additional class name', () => {
+  render(
+    <TextInput
+        data={{ testid: testId }}
+        label="First Name"
+        marginBottom="lg"
+        placeholder="Enter first name"
+    />
+  )
+
+  const kit = screen.getByTestId(testId)
+  expect(kit).toHaveClass(`${kitClass} mb_lg`)
+})

data/app/pb_kits/playbook/pb_title/_title.jsx

@@ -30,12 +30,13 @@ const Title = (props: TitleProps) => {
     size = 3,
     tag = 'h3',
     text,
+    variant = null,
   } = props
 
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
   const classes = classnames(
-    buildCss('pb_title_kit', size, color),
+    buildCss('pb_title_kit', size, variant, color),
     globalProps(props),
     className,
   )

data/app/pb_kits/playbook/pb_title/title.rb

@@ -13,10 +13,13 @@ module Playbook
                  values: %w[h1 h2 h3 h4 h5 h6 p div span],
                  default: "h3"
       prop :text
-      prop :variant, deprecated: true
+      prop :variant, type: Playbook::Props::Enum,
+                     values: [nil, "link"],
+                     default: nil,
+                     deprecated: true
 
       def classname
-        generate_classname("pb_title_kit", size, color)
+        generate_classname("pb_title_kit", size, variant, color)
       end
     end
   end

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'
@@ -145,6 +146,7 @@ WebpackerReact.setup({
   ...LabelValue,
   ...Layout,
   ...LegendDocs,
+  ...Lightbox,
   ...LineGraphDocs,
   ...List,
   ...LoadingInline,

data/app/pb_kits/playbook/plugins/pb_chart.js

@@ -1,6 +1,7 @@
 import Highcharts from 'highcharts'
 
 import { highchartsTheme } from '../pb_dashboard/pbChartsLightTheme'
+import { highchartsDarkTheme } from '../pb_dashboard/pbChartsDarkTheme'
 import colors from '../tokens/exports/_colors.scss'
 
 import pie from 'highcharts/modules/variable-pie'
@@ -67,10 +68,14 @@ class pbChart {
     }
   }
 
+  setupTheme() {
+    this.options.dark ? Highcharts.setOptions(highchartsDarkTheme) :  Highcharts.setOptions(highchartsTheme)
+  }
+
   setupGauge(options) {
     highchartsMore(Highcharts)
     solidGauge(Highcharts)
-    Highcharts.setOptions(highchartsTheme)
+    this.setupTheme()
 
     Highcharts.chart(this.defaults.id, {
       chart: {
@@ -140,7 +145,7 @@ class pbChart {
   }
 
   setupPieChart(options) {
-    Highcharts.setOptions(highchartsTheme)
+    this.setupTheme()
     Highcharts.chart(this.defaults.id, {
       title: {
         text: this.defaults.title,
@@ -187,8 +192,7 @@ class pbChart {
   }
 
   setupChart(options) {
-    Highcharts.setOptions(highchartsTheme)
-
+    this.setupTheme()
     const configOptions = {
       title: {
         text: this.defaults.title,

data/lib/playbook/version.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
 module Playbook
-  PREVIOUS_VERSION = "10.18.0"
-  VERSION = "10.19.0"
+  PREVIOUS_VERSION = "10.19.0"
+  VERSION = "10.21.0.pre.alpha.lightbox"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 10.19.0
+  version: 10.21.0.pre.alpha.lightbox
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2022-01-31 00:00:00.000000000 Z
+date: 2022-02-15 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -426,6 +426,9 @@ files:
 - app/pb_kits/playbook/pb_button/docs/_button_loading.md
 - app/pb_kits/playbook/pb_button/docs/_button_options.html.erb
 - app/pb_kits/playbook/pb_button/docs/_button_options.jsx
+- app/pb_kits/playbook/pb_button/docs/_button_size.html.erb
+- app/pb_kits/playbook/pb_button/docs/_button_size.jsx
+- app/pb_kits/playbook/pb_button/docs/_button_size.md
 - 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
@@ -602,6 +605,7 @@ files:
 - app/pb_kits/playbook/pb_currency/docs/example.yml
 - app/pb_kits/playbook/pb_currency/docs/index.js
 - app/pb_kits/playbook/pb_dashboard/commonSettings.js
+- app/pb_kits/playbook/pb_dashboard/pbChartsDarkTheme.js
 - app/pb_kits/playbook/pb_dashboard/pbChartsLightTheme.js
 - app/pb_kits/playbook/pb_dashboard_value/_dashboard_value.jsx
 - app/pb_kits/playbook/pb_dashboard_value/_dashboard_value.scss
@@ -804,6 +808,7 @@ files:
 - app/pb_kits/playbook/pb_file_upload/docs/_file_upload_default.jsx
 - app/pb_kits/playbook/pb_file_upload/docs/example.yml
 - app/pb_kits/playbook/pb_file_upload/docs/index.js
+- app/pb_kits/playbook/pb_file_upload/fileupload.test.js
 - app/pb_kits/playbook/pb_filter/Filter/CurrentFilters.jsx
 - app/pb_kits/playbook/pb_filter/Filter/FilterBackground.jsx
 - app/pb_kits/playbook/pb_filter/Filter/FilterDouble.jsx
@@ -1176,6 +1181,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.jsx
+- app/pb_kits/playbook/pb_lightbox/Carousel/Slides.jsx
+- 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
+- app/pb_kits/playbook/pb_lightbox/_lightbox_header.jsx
+- app/pb_kits/playbook/pb_lightbox/_lightbox_header_icon.jsx
+- app/pb_kits/playbook/pb_lightbox/docs/_lightbox_compound_component.jsx
+- 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/useVisibility.js
+- app/pb_kits/playbook/pb_lightbox/hooks/useWindowSize.js
+- 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
@@ -2130,9 +2156,9 @@ required_ruby_version: !ruby/object:Gem::Requirement
       version: '0'
 required_rubygems_version: !ruby/object:Gem::Requirement
   requirements:
-  - - ">="
+  - - ">"
     - !ruby/object:Gem::Version
-      version: '0'
+      version: 1.3.1
 requirements: []
 rubygems_version: 3.1.6
 signing_key: