playbook_ui 10.20.0 → 10.21.0.pre.alpha.lightbox.2

Sign up to get free protection for your applications and to get access to all the features.
Files changed (63) 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_bar_graph/_bar_graph.jsx +4 -0
  10. data/app/pb_kits/playbook/pb_bar_graph/bar_graph.rb +1 -0
  11. data/app/pb_kits/playbook/pb_button/_button.jsx +3 -3
  12. data/app/pb_kits/playbook/pb_button/_button.scss +18 -1
  13. data/app/pb_kits/playbook/pb_button/button.rb +11 -3
  14. data/app/pb_kits/playbook/pb_button/button.test.js +13 -0
  15. data/app/pb_kits/playbook/pb_button/docs/_button_size.html.erb +3 -0
  16. data/app/pb_kits/playbook/pb_button/docs/_button_size.jsx +26 -0
  17. data/app/pb_kits/playbook/pb_button/docs/_button_size.md +1 -0
  18. data/app/pb_kits/playbook/pb_button/docs/example.yml +2 -0
  19. data/app/pb_kits/playbook/pb_button/docs/index.js +1 -0
  20. data/app/pb_kits/playbook/pb_circle_chart/_circle_chart.jsx +3 -0
  21. data/app/pb_kits/playbook/pb_circle_chart/circle_chart.rb +1 -0
  22. data/app/pb_kits/playbook/pb_dashboard/pbChartsDarkTheme.js +215 -0
  23. data/app/pb_kits/playbook/pb_file_upload/_file_upload.jsx +17 -10
  24. data/app/pb_kits/playbook/pb_file_upload/fileupload.test.js +40 -0
  25. data/app/pb_kits/playbook/pb_gauge/_gauge.jsx +3 -0
  26. data/app/pb_kits/playbook/pb_gauge/gauge.rb +1 -0
  27. data/app/pb_kits/playbook/pb_image/_image.jsx +1 -1
  28. data/app/pb_kits/playbook/pb_image/_image.scss +3 -3
  29. data/app/pb_kits/playbook/pb_image/image.rb +1 -1
  30. data/app/pb_kits/playbook/pb_image/image.test.js +1 -1
  31. data/app/pb_kits/playbook/pb_lightbox/Carousel/Slide.jsx +53 -0
  32. data/app/pb_kits/playbook/pb_lightbox/Carousel/Slides.jsx +53 -0
  33. data/app/pb_kits/playbook/pb_lightbox/Carousel/Thumbnail.jsx +38 -0
  34. data/app/pb_kits/playbook/pb_lightbox/Carousel/Thumbnails.jsx +78 -0
  35. data/app/pb_kits/playbook/pb_lightbox/Carousel/index.jsx +58 -0
  36. data/app/pb_kits/playbook/pb_lightbox/Carousel/useSlides.js +66 -0
  37. data/app/pb_kits/playbook/pb_lightbox/_lightbox.jsx +112 -0
  38. data/app/pb_kits/playbook/pb_lightbox/_lightbox_context.jsx +3 -0
  39. data/app/pb_kits/playbook/pb_lightbox/_lightbox_header.jsx +71 -0
  40. data/app/pb_kits/playbook/pb_lightbox/_lightbox_header_icon.jsx +26 -0
  41. data/app/pb_kits/playbook/pb_lightbox/docs/_lightbox_compound_component.jsx +95 -0
  42. data/app/pb_kits/playbook/pb_lightbox/docs/_lightbox_default.jsx +64 -0
  43. data/app/pb_kits/playbook/pb_lightbox/docs/_lightbox_default.md +1 -0
  44. data/app/pb_kits/playbook/pb_lightbox/docs/_lightbox_multiple.jsx +64 -0
  45. data/app/pb_kits/playbook/pb_lightbox/docs/example.yml +7 -0
  46. data/app/pb_kits/playbook/pb_lightbox/docs/index.js +3 -0
  47. data/app/pb_kits/playbook/pb_lightbox/hooks/useVisibility.js +21 -0
  48. data/app/pb_kits/playbook/pb_lightbox/hooks/useWindowSize.js +25 -0
  49. data/app/pb_kits/playbook/pb_lightbox/lightbox.scss +202 -0
  50. data/app/pb_kits/playbook/pb_lightbox/lightbox.test.jsx +30 -0
  51. data/app/pb_kits/playbook/pb_line_graph/_line_graph.jsx +4 -0
  52. data/app/pb_kits/playbook/pb_line_graph/line_graph.rb +1 -0
  53. data/app/pb_kits/playbook/pb_popover/_popover.jsx +2 -4
  54. data/app/pb_kits/playbook/pb_popover/docs/_popover_close.html.erb +7 -7
  55. data/app/pb_kits/playbook/pb_popover/index.js +4 -9
  56. data/app/pb_kits/playbook/pb_popover/popover.html.erb +1 -1
  57. data/app/pb_kits/playbook/pb_rich_text_editor/_rich_text_editor.jsx +4 -0
  58. data/app/pb_kits/playbook/pb_text_input/_text_input.scss +2 -2
  59. data/app/pb_kits/playbook/pb_text_input/text_input.test.js +14 -0
  60. data/app/pb_kits/playbook/playbook-doc.js +2 -0
  61. data/app/pb_kits/playbook/plugins/pb_chart.js +8 -4
  62. data/lib/playbook/version.rb +1 -1
  63. metadata +29 -4
@@ -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,
@@ -2,5 +2,5 @@
2
2
 
3
3
  module Playbook
4
4
  PREVIOUS_VERSION = "10.19.0"
5
- VERSION = "10.20.0"
5
+ VERSION = "10.21.0.pre.alpha.lightbox.2"
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.20.0
4
+ version: 10.21.0.pre.alpha.lightbox.2
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-01 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
@@ -426,6 +426,9 @@ files:
426
426
  - app/pb_kits/playbook/pb_button/docs/_button_loading.md
427
427
  - app/pb_kits/playbook/pb_button/docs/_button_options.html.erb
428
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
429
432
  - app/pb_kits/playbook/pb_button/docs/_footer.md
430
433
  - app/pb_kits/playbook/pb_button/docs/example.yml
431
434
  - app/pb_kits/playbook/pb_button/docs/index.js
@@ -602,6 +605,7 @@ files:
602
605
  - app/pb_kits/playbook/pb_currency/docs/example.yml
603
606
  - app/pb_kits/playbook/pb_currency/docs/index.js
604
607
  - app/pb_kits/playbook/pb_dashboard/commonSettings.js
608
+ - app/pb_kits/playbook/pb_dashboard/pbChartsDarkTheme.js
605
609
  - app/pb_kits/playbook/pb_dashboard/pbChartsLightTheme.js
606
610
  - app/pb_kits/playbook/pb_dashboard_value/_dashboard_value.jsx
607
611
  - app/pb_kits/playbook/pb_dashboard_value/_dashboard_value.scss
@@ -804,6 +808,7 @@ files:
804
808
  - app/pb_kits/playbook/pb_file_upload/docs/_file_upload_default.jsx
805
809
  - app/pb_kits/playbook/pb_file_upload/docs/example.yml
806
810
  - app/pb_kits/playbook/pb_file_upload/docs/index.js
811
+ - app/pb_kits/playbook/pb_file_upload/fileupload.test.js
807
812
  - app/pb_kits/playbook/pb_filter/Filter/CurrentFilters.jsx
808
813
  - app/pb_kits/playbook/pb_filter/Filter/FilterBackground.jsx
809
814
  - app/pb_kits/playbook/pb_filter/Filter/FilterDouble.jsx
@@ -1176,6 +1181,26 @@ files:
1176
1181
  - app/pb_kits/playbook/pb_legend/legend.html.erb
1177
1182
  - app/pb_kits/playbook/pb_legend/legend.rb
1178
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/useSlides.js
1190
+ - app/pb_kits/playbook/pb_lightbox/_lightbox.jsx
1191
+ - app/pb_kits/playbook/pb_lightbox/_lightbox_context.jsx
1192
+ - app/pb_kits/playbook/pb_lightbox/_lightbox_header.jsx
1193
+ - app/pb_kits/playbook/pb_lightbox/_lightbox_header_icon.jsx
1194
+ - app/pb_kits/playbook/pb_lightbox/docs/_lightbox_compound_component.jsx
1195
+ - app/pb_kits/playbook/pb_lightbox/docs/_lightbox_default.jsx
1196
+ - app/pb_kits/playbook/pb_lightbox/docs/_lightbox_default.md
1197
+ - app/pb_kits/playbook/pb_lightbox/docs/_lightbox_multiple.jsx
1198
+ - app/pb_kits/playbook/pb_lightbox/docs/example.yml
1199
+ - app/pb_kits/playbook/pb_lightbox/docs/index.js
1200
+ - app/pb_kits/playbook/pb_lightbox/hooks/useVisibility.js
1201
+ - app/pb_kits/playbook/pb_lightbox/hooks/useWindowSize.js
1202
+ - app/pb_kits/playbook/pb_lightbox/lightbox.scss
1203
+ - app/pb_kits/playbook/pb_lightbox/lightbox.test.jsx
1179
1204
  - app/pb_kits/playbook/pb_line_graph/_line_graph.jsx
1180
1205
  - app/pb_kits/playbook/pb_line_graph/_line_graph.scss
1181
1206
  - app/pb_kits/playbook/pb_line_graph/docs/_description.md
@@ -2130,9 +2155,9 @@ required_ruby_version: !ruby/object:Gem::Requirement
2130
2155
  version: '0'
2131
2156
  required_rubygems_version: !ruby/object:Gem::Requirement
2132
2157
  requirements:
2133
- - - ">="
2158
+ - - ">"
2134
2159
  - !ruby/object:Gem::Version
2135
- version: '0'
2160
+ version: 1.3.1
2136
2161
  requirements: []
2137
2162
  rubygems_version: 3.1.6
2138
2163
  signing_key: