playbook_ui 10.21.0.pre.alpha.jg1 → 10.21.0.pre.alpha.lightbox

Sign up to get free protection for your applications and to get access to all the features.
Files changed (70) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/_playbook.scss +1 -0
  3. data/app/pb_kits/playbook/data/menu.yml +1 -0
  4. data/app/pb_kits/playbook/index.js +2 -1
  5. data/app/pb_kits/playbook/pb_avatar/_avatar.jsx +1 -1
  6. data/app/pb_kits/playbook/pb_avatar/_avatar.scss +2 -2
  7. data/app/pb_kits/playbook/pb_avatar/avatar.rb +1 -1
  8. data/app/pb_kits/playbook/pb_avatar/avatar.test.js +1 -1
  9. data/app/pb_kits/playbook/pb_background/_background.jsx +2 -7
  10. data/app/pb_kits/playbook/pb_background/_background.scss +8 -24
  11. data/app/pb_kits/playbook/pb_background/background.rb +6 -6
  12. data/app/pb_kits/playbook/pb_background/docs/_background_image.html.erb +2 -50
  13. data/app/pb_kits/playbook/pb_background/docs/_background_image.jsx +28 -71
  14. data/app/pb_kits/playbook/pb_bar_graph/_bar_graph.jsx +4 -0
  15. data/app/pb_kits/playbook/pb_bar_graph/bar_graph.rb +1 -0
  16. data/app/pb_kits/playbook/pb_button/_button.jsx +3 -3
  17. data/app/pb_kits/playbook/pb_button/_button.scss +18 -1
  18. data/app/pb_kits/playbook/pb_button/button.rb +11 -3
  19. data/app/pb_kits/playbook/pb_button/button.test.js +13 -0
  20. data/app/pb_kits/playbook/pb_button/docs/_button_size.html.erb +3 -0
  21. data/app/pb_kits/playbook/pb_button/docs/_button_size.jsx +26 -0
  22. data/app/pb_kits/playbook/pb_button/docs/_button_size.md +1 -0
  23. data/app/pb_kits/playbook/pb_button/docs/example.yml +2 -0
  24. data/app/pb_kits/playbook/pb_button/docs/index.js +1 -0
  25. data/app/pb_kits/playbook/pb_circle_chart/_circle_chart.jsx +3 -0
  26. data/app/pb_kits/playbook/pb_circle_chart/circle_chart.rb +1 -0
  27. data/app/pb_kits/playbook/pb_dashboard/pbChartsDarkTheme.js +215 -0
  28. data/app/pb_kits/playbook/pb_file_upload/_file_upload.jsx +17 -10
  29. data/app/pb_kits/playbook/pb_file_upload/fileupload.test.js +40 -0
  30. data/app/pb_kits/playbook/pb_gauge/_gauge.jsx +3 -0
  31. data/app/pb_kits/playbook/pb_gauge/gauge.rb +1 -0
  32. data/app/pb_kits/playbook/pb_image/_image.jsx +1 -1
  33. data/app/pb_kits/playbook/pb_image/_image.scss +3 -3
  34. data/app/pb_kits/playbook/pb_image/image.rb +1 -1
  35. data/app/pb_kits/playbook/pb_image/image.test.js +1 -1
  36. data/app/pb_kits/playbook/pb_lightbox/Carousel/Slide.jsx +55 -0
  37. data/app/pb_kits/playbook/pb_lightbox/Carousel/Slides.jsx +54 -0
  38. data/app/pb_kits/playbook/pb_lightbox/Carousel/Thumbnail.jsx +39 -0
  39. data/app/pb_kits/playbook/pb_lightbox/Carousel/Thumbnails.jsx +82 -0
  40. data/app/pb_kits/playbook/pb_lightbox/Carousel/index.jsx +59 -0
  41. data/app/pb_kits/playbook/pb_lightbox/Carousel/styles.scss +110 -0
  42. data/app/pb_kits/playbook/pb_lightbox/Carousel/useSlides.js +66 -0
  43. data/app/pb_kits/playbook/pb_lightbox/_lightbox.jsx +112 -0
  44. data/app/pb_kits/playbook/pb_lightbox/_lightbox_context.jsx +3 -0
  45. data/app/pb_kits/playbook/pb_lightbox/_lightbox_header.jsx +71 -0
  46. data/app/pb_kits/playbook/pb_lightbox/_lightbox_header_icon.jsx +26 -0
  47. data/app/pb_kits/playbook/pb_lightbox/docs/_lightbox_compound_component.jsx +95 -0
  48. data/app/pb_kits/playbook/pb_lightbox/docs/_lightbox_default.jsx +64 -0
  49. data/app/pb_kits/playbook/pb_lightbox/docs/_lightbox_default.md +1 -0
  50. data/app/pb_kits/playbook/pb_lightbox/docs/_lightbox_multiple.jsx +64 -0
  51. data/app/pb_kits/playbook/pb_lightbox/docs/example.yml +7 -0
  52. data/app/pb_kits/playbook/pb_lightbox/docs/index.js +3 -0
  53. data/app/pb_kits/playbook/pb_lightbox/hooks/useVisibility.js +21 -0
  54. data/app/pb_kits/playbook/pb_lightbox/hooks/useWindowSize.js +25 -0
  55. data/app/pb_kits/playbook/pb_lightbox/lightbox.scss +90 -0
  56. data/app/pb_kits/playbook/pb_lightbox/lightbox.test.jsx +30 -0
  57. data/app/pb_kits/playbook/pb_line_graph/_line_graph.jsx +4 -0
  58. data/app/pb_kits/playbook/pb_line_graph/line_graph.rb +1 -0
  59. data/app/pb_kits/playbook/pb_popover/_popover.jsx +2 -4
  60. data/app/pb_kits/playbook/pb_popover/docs/_popover_close.html.erb +7 -7
  61. data/app/pb_kits/playbook/pb_popover/index.js +4 -9
  62. data/app/pb_kits/playbook/pb_popover/popover.html.erb +1 -1
  63. data/app/pb_kits/playbook/pb_rich_text_editor/_rich_text_editor.jsx +4 -0
  64. data/app/pb_kits/playbook/pb_text_input/_text_input.scss +2 -2
  65. data/app/pb_kits/playbook/pb_text_input/text_input.test.js +14 -0
  66. data/app/pb_kits/playbook/playbook-doc.js +2 -0
  67. data/app/pb_kits/playbook/plugins/pb_chart.js +8 -4
  68. data/lib/playbook/version.rb +2 -2
  69. metadata +28 -3
  70. data/app/pb_kits/playbook/pb_background/docs/_background_image.md +0 -1
@@ -0,0 +1,90 @@
1
+ @import "../tokens/spacing";
2
+
3
+ .carousel {
4
+ .home-tour-main-content {
5
+ overflow-y: hidden;
6
+ }
7
+
8
+ .image-gallery-slide-wrapper {
9
+ width: 1024px;
10
+ height: 686px;
11
+ }
12
+
13
+ .image-gallery-slide div {
14
+ height: auto;
15
+ }
16
+
17
+ .image-gallery-slide .image-gallery-image {
18
+ max-height: 100% !important;
19
+ max-width: 100% !important;
20
+ height: 692px !important;
21
+ width: 100% !important;
22
+ object-fit: cover;
23
+ }
24
+
25
+ .image-gallery-left-nav .image-gallery-svg, .image-gallery-right-nav .image-gallery-svg {
26
+ height: 120px;
27
+ width: 30px;
28
+ opacity: 0.4;
29
+ }
30
+ .image-gallery-thumbnails {
31
+ overflow-x: auto;
32
+ }
33
+
34
+ .image-gallery-thumbnails-container {
35
+ width: 1024px;
36
+ padding-left: 4px;
37
+ }
38
+
39
+ .image-gallery-thumbnails {
40
+ padding-top: 3px;
41
+ background: #000;
42
+ }
43
+
44
+ .image-gallery-thumbnail-image {
45
+ height: 64px;
46
+ width: 93px;
47
+ }
48
+
49
+ .image-gallery-thumbnail + .image-gallery-thumbnail {
50
+ margin-left: 2px;
51
+ margin-top: 2px;
52
+ }
53
+
54
+ .carousel-header {
55
+ background: rgb(0, 0, 0);
56
+ border-radius: 0px;
57
+ min-height: 51px;
58
+ width: 100%;
59
+ position: fixed;
60
+ top: 0;
61
+ left: 0;
62
+ z-index: 2;
63
+ align-items: center;
64
+ padding: $space-sm;
65
+ transition: all .5s;
66
+
67
+ .close-icon {
68
+ color: white;
69
+ margin-left: 16px;
70
+ top: 16px;
71
+ }
72
+ }
73
+ }
74
+
75
+ .photo-cards {
76
+ .overlay {
77
+ width: 100% !important;
78
+ height: 50% !important;
79
+ bottom: 0;
80
+ position: absolute !important;
81
+ border-radius: 0px 0px 5px 5px;
82
+ background: linear-gradient(-180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.77) 100%);
83
+ }
84
+
85
+ .overlay,
86
+ .overlay ~ .key-photo-icon,
87
+ .overlay ~ .tag-counter {
88
+ pointer-events: none;
89
+ }
90
+ }
@@ -0,0 +1,30 @@
1
+ import React from 'react'
2
+ import { render, screen } from '../utilities/test-utils'
3
+
4
+ import { Lightbox } from '../'
5
+
6
+ const testId = 'customId',
7
+ kitClass = 'pb_lightbox_kit'
8
+
9
+ test('Lightbox Test', () => {
10
+ render(
11
+ <Lightbox
12
+ className="customClass"
13
+ data={{ testid: testId }}
14
+ icon="close"
15
+ iconSize="3x"
16
+ id="test1"
17
+ initialPhoto="https://images.unsplash.com/photo-1518791841217-8f162f1e1131?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60"
18
+ onClose={() => {}}
19
+ photos={[
20
+ 'https://images.unsplash.com/photo-1518791841217-8f162f1e1131?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60',
21
+ 'https://images.unsplash.com/photo-1518791841217-8f162f1e1131?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60',
22
+ 'https://images.unsplash.com/photo-1518791841217-8f162f1e1131?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60',
23
+ 'https://images.unsplash.com/photo-1518791841217-8f162f1e1131?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60',
24
+ ]}
25
+ />
26
+ )
27
+ const kit = screen.getByTestId(testId)
28
+ expect(kit).toHaveClass(`${kitClass} customClass`)
29
+ expect(kit).toBeInTheDocument()
30
+ })
@@ -8,6 +8,7 @@ import pbChart from '../plugins/pb_chart'
8
8
 
9
9
  type LineGraphProps = {
10
10
  axisTitle?: string,
11
+ dark?: Boolean,
11
12
  xAxisCategories: array,
12
13
  yAxisMin: number,
13
14
  yAxisMax: number,
@@ -31,6 +32,7 @@ type LineGraphProps = {
31
32
  export default class LineGraph extends React.Component<LineGraphProps> {
32
33
  static defaultProps = {
33
34
  className: 'pb_bar_graph',
35
+ dark: false,
34
36
  gradient: false,
35
37
  type: 'line',
36
38
  legend: false,
@@ -40,6 +42,7 @@ export default class LineGraph extends React.Component<LineGraphProps> {
40
42
  componentDidMount() {
41
43
  const {
42
44
  axisTitle,
45
+ dark,
43
46
  xAxisCategories,
44
47
  yAxisMin,
45
48
  yAxisMax,
@@ -60,6 +63,7 @@ export default class LineGraph extends React.Component<LineGraphProps> {
60
63
  axisTitle: axisTitle,
61
64
  chartData: chartData,
62
65
  colors: colors,
66
+ dark,
63
67
  id: id,
64
68
  pointStart: pointStart,
65
69
  subtitle: subTitle,
@@ -32,6 +32,7 @@ module Playbook
32
32
  id: id,
33
33
  className: classname,
34
34
  chartData: chart_data,
35
+ dark: dark ? "dark" : "",
35
36
  type: chart_type,
36
37
  title: title,
37
38
  subtitle: subtitle,
@@ -150,16 +150,14 @@ export default class PbReactPopover extends React.Component<PbPopoverProps> {
150
150
  const targetIsReference =
151
151
  target.closest('.pb_popover_reference_wrapper') !== null
152
152
 
153
- if (targetIsReference) return
154
-
155
153
  switch (closeOnClick) {
156
154
  case 'outside':
157
- if (!targetIsPopover) {
155
+ if (!targetIsPopover || targetIsReference) {
158
156
  shouldClosePopover(true)
159
157
  }
160
158
  break
161
159
  case 'inside':
162
- if (targetIsPopover) {
160
+ if (targetIsPopover || targetIsReference) {
163
161
  shouldClosePopover(true)
164
162
  }
165
163
  break
@@ -1,23 +1,23 @@
1
1
  <%= pb_rails("flex", props: {classname: "flex-container", spacing: "between"}) do %>
2
2
  <span>
3
- <%= pb_rails("button", props: { text: "Click Inside", variant: "secondary", id: 'inside-popover-1' }) %>
3
+ <%= pb_rails("button", props: { text: "Click Inside", variant: "secondary", id: "inside-popover-1" }) %>
4
4
  <%= pb_rails("popover", props: {
5
5
  close_on_click: "inside",
6
6
  trigger_element_id: "inside-popover-1",
7
7
  tooltip_id: "inside-tooltip-1",
8
- position: 'bottom',
8
+ position: "bottom",
9
9
  offset: true
10
10
  }) do %>
11
11
  Click on me!
12
12
  <% end %>
13
13
  </span>
14
14
  <span>
15
- <%= pb_rails("button", props: { text: "Click Outside", variant: "secondary", id: 'outside-popover-1' }) %>
15
+ <%= pb_rails("button", props: { text: "Click Outside", variant: "secondary", id: "outside-popover-1" }) %>
16
16
  <%= pb_rails("popover", props: {
17
17
  close_on_click: "outside",
18
18
  trigger_element_id: "outside-popover-1",
19
19
  tooltip_id: "outside-tooltip-1",
20
- position: 'left',
20
+ position: "left",
21
21
  offset: true
22
22
  }) do %>
23
23
  Click anywhere but me!
@@ -27,16 +27,16 @@
27
27
  <%= pb_rails("button", props: {
28
28
  text: "Click Anywhere",
29
29
  variant: "secondary",
30
- id: 'any-popover-1'
30
+ id: "any-popover-1"
31
31
  }) %>
32
32
  <%= pb_rails("popover", props: {
33
33
  close_on_click: "any",
34
34
  trigger_element_id: "any-popover-1",
35
35
  tooltip_id: "any-tooltip-1",
36
- position: 'top',
36
+ position: "top",
37
37
  offset: true
38
38
  }) do %>
39
39
  Click anything!
40
40
  <% end %>
41
41
  </span>
42
- <% end %>
42
+ <% end %>
@@ -36,15 +36,14 @@ export default class PbPopover extends PbEnhancedElement {
36
36
  }
37
37
 
38
38
  setTimeout(() => {
39
- this.popper.update()
40
39
  this.toggleTooltip()
40
+ this.popper.update()
41
41
  }, 0)
42
42
  })
43
43
  }
44
44
 
45
45
  checkCloseTooltip() {
46
46
  document.querySelector('body').addEventListener('click', ({ target }) => {
47
- const isTriggerElement = target.closest(`#${this.triggerElementId}`) !== null
48
47
  const isTooltipElement = target.closest(`#${this.tooltipId}`) !== null
49
48
 
50
49
  switch (this.closeOnClick) {
@@ -52,21 +51,17 @@ export default class PbPopover extends PbEnhancedElement {
52
51
  this.hideTooltip()
53
52
  break
54
53
  case 'outside':
55
- if (isTooltipElement) {
56
- this.checkCloseTooltip()
57
- } else {
54
+ if (!isTooltipElement) {
58
55
  this.hideTooltip()
59
56
  }
60
57
  break
61
58
  case 'inside':
62
- if (isTooltipElement || isTriggerElement) {
59
+ if (isTooltipElement) {
63
60
  this.hideTooltip()
64
- } else {
65
- this.checkCloseTooltip()
66
61
  }
67
62
  break
68
63
  }
69
- }, { once: true })
64
+ }, true)
70
65
  }
71
66
 
72
67
  hideTooltip() {
@@ -3,7 +3,7 @@
3
3
  class: object.classname,
4
4
  data: object.data,
5
5
  id: object.id) do %>
6
- <div class="pb_popover_tooltip" id="<%= object.tooltip_id %>" role="tooltip" style="<%= object.z_index_helper %>">
6
+ <div class="pb_popover_tooltip hide" id="<%= object.tooltip_id %>" role="tooltip" style="<%= object.z_index_helper %>">
7
7
  <div class="pb_popover_body <%= object.width_height_class_helper %> <%= object.popover_spacing_helper %>" style="<%= object.width_height_helper %>">
8
8
  <%= content.presence %>
9
9
  </div>
@@ -129,6 +129,10 @@ const RichTextEditor = (props: RichTextEditorProps) => {
129
129
  trixRef.current.addEventListener('click', handleClick)
130
130
  }, [])
131
131
 
132
+ useEffect(() => {
133
+ trixRef.current.editor.loadHTML(value)
134
+ }, [value])
135
+
132
136
  const RichTextEditorClass = 'pb_rich_text_editor_kit'
133
137
  const SimpleClass = simple ? 'simple' : ''
134
138
  const FocusClass = focus ? 'focus-editor-targets' : ''
@@ -4,12 +4,12 @@
4
4
 
5
5
 
6
6
  [class^=pb_text_input_kit] {
7
+ margin-bottom: $space_sm;
7
8
  .pb_text_input_kit_label {
8
9
  margin-bottom: $space_xs;
9
10
  display: block;
10
11
  }
11
12
  .text_input_wrapper {
12
- margin-bottom: $space_sm;
13
13
  display: block;
14
14
  input::placeholder,
15
15
  .text_input .placeholder {
@@ -169,7 +169,7 @@
169
169
  &-card {
170
170
  height: 45px;
171
171
  margin: 0;
172
- padding: 0 !important;
172
+ padding: 0;
173
173
  align-items: center;
174
174
  justify-content: center;
175
175
  width: 45px;
@@ -75,3 +75,17 @@ test('returns additional class name', () => {
75
75
  const kit = screen.getByTestId(testId)
76
76
  expect(kit).toHaveClass(`${kitClass} dark error`)
77
77
  })
78
+
79
+ test('returns additional class name', () => {
80
+ render(
81
+ <TextInput
82
+ data={{ testid: testId }}
83
+ label="First Name"
84
+ marginBottom="lg"
85
+ placeholder="Enter first name"
86
+ />
87
+ )
88
+
89
+ const kit = screen.getByTestId(testId)
90
+ expect(kit).toHaveClass(`${kitClass} mb_lg`)
91
+ })
@@ -51,6 +51,7 @@ import * as LabelPill from 'pb_label_pill/docs'
51
51
  import * as LabelValue from 'pb_label_value/docs'
52
52
  import * as Layout from 'pb_layout/docs'
53
53
  import * as LegendDocs from 'pb_legend/docs'
54
+ import * as Lightbox from 'pb_lightbox/docs'
54
55
  import * as LineGraphDocs from 'pb_line_graph/docs'
55
56
  import * as List from 'pb_list/docs'
56
57
  import * as LoadingInline from 'pb_loading_inline/docs'
@@ -145,6 +146,7 @@ WebpackerReact.setup({
145
146
  ...LabelValue,
146
147
  ...Layout,
147
148
  ...LegendDocs,
149
+ ...Lightbox,
148
150
  ...LineGraphDocs,
149
151
  ...List,
150
152
  ...LoadingInline,
@@ -1,6 +1,7 @@
1
1
  import Highcharts from 'highcharts'
2
2
 
3
3
  import { highchartsTheme } from '../pb_dashboard/pbChartsLightTheme'
4
+ import { highchartsDarkTheme } from '../pb_dashboard/pbChartsDarkTheme'
4
5
  import colors from '../tokens/exports/_colors.scss'
5
6
 
6
7
  import pie from 'highcharts/modules/variable-pie'
@@ -67,10 +68,14 @@ class pbChart {
67
68
  }
68
69
  }
69
70
 
71
+ setupTheme() {
72
+ this.options.dark ? Highcharts.setOptions(highchartsDarkTheme) : Highcharts.setOptions(highchartsTheme)
73
+ }
74
+
70
75
  setupGauge(options) {
71
76
  highchartsMore(Highcharts)
72
77
  solidGauge(Highcharts)
73
- Highcharts.setOptions(highchartsTheme)
78
+ this.setupTheme()
74
79
 
75
80
  Highcharts.chart(this.defaults.id, {
76
81
  chart: {
@@ -140,7 +145,7 @@ class pbChart {
140
145
  }
141
146
 
142
147
  setupPieChart(options) {
143
- Highcharts.setOptions(highchartsTheme)
148
+ this.setupTheme()
144
149
  Highcharts.chart(this.defaults.id, {
145
150
  title: {
146
151
  text: this.defaults.title,
@@ -187,8 +192,7 @@ class pbChart {
187
192
  }
188
193
 
189
194
  setupChart(options) {
190
- Highcharts.setOptions(highchartsTheme)
191
-
195
+ this.setupTheme()
192
196
  const configOptions = {
193
197
  title: {
194
198
  text: this.defaults.title,
@@ -1,6 +1,6 @@
1
1
  # frozen_string_literal: true
2
2
 
3
3
  module Playbook
4
- PREVIOUS_VERSION = "10.20.0"
5
- VERSION = "10.21.0.pre.alpha.jg1"
4
+ PREVIOUS_VERSION = "10.19.0"
5
+ VERSION = "10.21.0.pre.alpha.lightbox"
6
6
  end
metadata CHANGED
@@ -1,7 +1,7 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: playbook_ui
3
3
  version: !ruby/object:Gem::Version
4
- version: 10.21.0.pre.alpha.jg1
4
+ version: 10.21.0.pre.alpha.lightbox
5
5
  platform: ruby
6
6
  authors:
7
7
  - Power UX
@@ -9,7 +9,7 @@ authors:
9
9
  autorequire:
10
10
  bindir: bin
11
11
  cert_chain: []
12
- date: 2022-02-03 00:00:00.000000000 Z
12
+ date: 2022-02-15 00:00:00.000000000 Z
13
13
  dependencies:
14
14
  - !ruby/object:Gem::Dependency
15
15
  name: actionpack
@@ -330,7 +330,6 @@ files:
330
330
  - app/pb_kits/playbook/pb_background/docs/_background_gradient.jsx
331
331
  - app/pb_kits/playbook/pb_background/docs/_background_image.html.erb
332
332
  - app/pb_kits/playbook/pb_background/docs/_background_image.jsx
333
- - app/pb_kits/playbook/pb_background/docs/_background_image.md
334
333
  - app/pb_kits/playbook/pb_background/docs/_background_light.html.erb
335
334
  - app/pb_kits/playbook/pb_background/docs/_background_light.jsx
336
335
  - app/pb_kits/playbook/pb_background/docs/_background_status.html.erb
@@ -427,6 +426,9 @@ files:
427
426
  - app/pb_kits/playbook/pb_button/docs/_button_loading.md
428
427
  - app/pb_kits/playbook/pb_button/docs/_button_options.html.erb
429
428
  - app/pb_kits/playbook/pb_button/docs/_button_options.jsx
429
+ - app/pb_kits/playbook/pb_button/docs/_button_size.html.erb
430
+ - app/pb_kits/playbook/pb_button/docs/_button_size.jsx
431
+ - app/pb_kits/playbook/pb_button/docs/_button_size.md
430
432
  - app/pb_kits/playbook/pb_button/docs/_footer.md
431
433
  - app/pb_kits/playbook/pb_button/docs/example.yml
432
434
  - app/pb_kits/playbook/pb_button/docs/index.js
@@ -603,6 +605,7 @@ files:
603
605
  - app/pb_kits/playbook/pb_currency/docs/example.yml
604
606
  - app/pb_kits/playbook/pb_currency/docs/index.js
605
607
  - app/pb_kits/playbook/pb_dashboard/commonSettings.js
608
+ - app/pb_kits/playbook/pb_dashboard/pbChartsDarkTheme.js
606
609
  - app/pb_kits/playbook/pb_dashboard/pbChartsLightTheme.js
607
610
  - app/pb_kits/playbook/pb_dashboard_value/_dashboard_value.jsx
608
611
  - app/pb_kits/playbook/pb_dashboard_value/_dashboard_value.scss
@@ -805,6 +808,7 @@ files:
805
808
  - app/pb_kits/playbook/pb_file_upload/docs/_file_upload_default.jsx
806
809
  - app/pb_kits/playbook/pb_file_upload/docs/example.yml
807
810
  - app/pb_kits/playbook/pb_file_upload/docs/index.js
811
+ - app/pb_kits/playbook/pb_file_upload/fileupload.test.js
808
812
  - app/pb_kits/playbook/pb_filter/Filter/CurrentFilters.jsx
809
813
  - app/pb_kits/playbook/pb_filter/Filter/FilterBackground.jsx
810
814
  - app/pb_kits/playbook/pb_filter/Filter/FilterDouble.jsx
@@ -1177,6 +1181,27 @@ files:
1177
1181
  - app/pb_kits/playbook/pb_legend/legend.html.erb
1178
1182
  - app/pb_kits/playbook/pb_legend/legend.rb
1179
1183
  - app/pb_kits/playbook/pb_legend/legend.test.js
1184
+ - app/pb_kits/playbook/pb_lightbox/Carousel/Slide.jsx
1185
+ - app/pb_kits/playbook/pb_lightbox/Carousel/Slides.jsx
1186
+ - app/pb_kits/playbook/pb_lightbox/Carousel/Thumbnail.jsx
1187
+ - app/pb_kits/playbook/pb_lightbox/Carousel/Thumbnails.jsx
1188
+ - app/pb_kits/playbook/pb_lightbox/Carousel/index.jsx
1189
+ - app/pb_kits/playbook/pb_lightbox/Carousel/styles.scss
1190
+ - app/pb_kits/playbook/pb_lightbox/Carousel/useSlides.js
1191
+ - app/pb_kits/playbook/pb_lightbox/_lightbox.jsx
1192
+ - app/pb_kits/playbook/pb_lightbox/_lightbox_context.jsx
1193
+ - app/pb_kits/playbook/pb_lightbox/_lightbox_header.jsx
1194
+ - app/pb_kits/playbook/pb_lightbox/_lightbox_header_icon.jsx
1195
+ - app/pb_kits/playbook/pb_lightbox/docs/_lightbox_compound_component.jsx
1196
+ - app/pb_kits/playbook/pb_lightbox/docs/_lightbox_default.jsx
1197
+ - app/pb_kits/playbook/pb_lightbox/docs/_lightbox_default.md
1198
+ - app/pb_kits/playbook/pb_lightbox/docs/_lightbox_multiple.jsx
1199
+ - app/pb_kits/playbook/pb_lightbox/docs/example.yml
1200
+ - app/pb_kits/playbook/pb_lightbox/docs/index.js
1201
+ - app/pb_kits/playbook/pb_lightbox/hooks/useVisibility.js
1202
+ - app/pb_kits/playbook/pb_lightbox/hooks/useWindowSize.js
1203
+ - app/pb_kits/playbook/pb_lightbox/lightbox.scss
1204
+ - app/pb_kits/playbook/pb_lightbox/lightbox.test.jsx
1180
1205
  - app/pb_kits/playbook/pb_line_graph/_line_graph.jsx
1181
1206
  - app/pb_kits/playbook/pb_line_graph/_line_graph.scss
1182
1207
  - app/pb_kits/playbook/pb_line_graph/docs/_description.md
@@ -1 +0,0 @@
1
- To add a lazyload on the background image simply use the `transition` prop and one of the three string options `"fade"`, `"blur"`, or `"scale"`.