playbook_ui 12.16.0.pre.alpha.PLAY693tooltipwrongbg558 → 12.16.0.pre.alpha.lightboxcurrentphotoprop531

Sign up to get free protection for your applications and to get access to all the features.
Files changed (26) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_card/docs/_card_background.jsx +1 -1
  3. data/app/pb_kits/playbook/pb_docs/kit_api.html.erb +8 -295
  4. data/app/pb_kits/playbook/pb_docs/kit_api.rb +0 -42
  5. data/app/pb_kits/playbook/pb_docs/kit_example.html.erb +0 -17
  6. data/app/pb_kits/playbook/pb_docs/kit_example.rb +1 -18
  7. data/app/pb_kits/playbook/pb_image/docs/{_default_image.jsx → _default_image.tsx} +1 -1
  8. data/app/pb_kits/playbook/pb_lightbox/Carousel/index.tsx +0 -1
  9. data/app/pb_kits/playbook/pb_lightbox/_lightbox.tsx +7 -4
  10. data/app/pb_kits/playbook/pb_lightbox/docs/_lightbox_compound_component.jsx +1 -5
  11. data/app/pb_kits/playbook/pb_lightbox/docs/_lightbox_current_photo.jsx +121 -0
  12. data/app/pb_kits/playbook/pb_lightbox/docs/_lightbox_current_photo.md +1 -0
  13. data/app/pb_kits/playbook/pb_lightbox/docs/_lightbox_custom_header.jsx +1 -5
  14. data/app/pb_kits/playbook/pb_lightbox/docs/_lightbox_default.jsx +1 -5
  15. data/app/pb_kits/playbook/pb_lightbox/docs/_lightbox_default.md +1 -1
  16. data/app/pb_kits/playbook/pb_lightbox/docs/_lightbox_multiple.jsx +1 -5
  17. data/app/pb_kits/playbook/pb_lightbox/docs/example.yml +1 -0
  18. data/app/pb_kits/playbook/pb_lightbox/docs/index.js +1 -0
  19. data/app/pb_kits/playbook/pb_lightbox/lightbox.test.jsx +1 -5
  20. data/app/pb_kits/playbook/pb_tooltip/_tooltip.scss +6 -11
  21. data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_default.html.erb +4 -4
  22. data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_white.html.erb +9 -0
  23. data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_with_icon_circle.html.erb +2 -1
  24. data/app/pb_kits/playbook/pb_tooltip/docs/example.yml +1 -0
  25. data/lib/playbook/version.rb +1 -1
  26. metadata +6 -3
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: e99edb382c2990a8e04e53649d6936a8660f71ce5e2605f8228e2477063421d3
4
- data.tar.gz: 31b0b86d40bd1730e69f25b6642f1a46f391836374fa997bedf2c9b8010b3983
3
+ metadata.gz: accf792d3ae05665b499210171ab0a2401b7d89109b53f18904bbb23a73a7d5a
4
+ data.tar.gz: 5d2ceb2031b2a4fcc38245e5584dcd94da4a97b61a5eb6fe4324163a91938b30
5
5
  SHA512:
6
- metadata.gz: a46dbd023117c9c3cb37d192b5a4191684366abe9638bc86cd10ad6d71f51b8817b11cea2416e2c62e17ccf4972a926d4d8a907ebf80184a02d753b78bc1fc6a
7
- data.tar.gz: 4f5de4efa0dbc203a4461280e7ff9178165fffa1c5cdd9ac2f00af08b4bf573fbecc5a56e014b400b597768bceb06123a60ff05bacc2f9b5a916552d3cfce36e
6
+ metadata.gz: 1f44a2e628700f4579afa50346aa506b6a57e43ddbc50e30685b5b977f81f49c9fcfb864df1e08adc27788d487316ae475cf740f7522ebe9ceca4c829d3ac567
7
+ data.tar.gz: dc0ee866dd0e92ba69c8688fb331535a743d6f4f362de42ed5641d3151a5485533cbb05b6296ba665360385df839322f59d38fa76d2763a5c2a43c8fe3e1ec88
@@ -41,7 +41,7 @@ const CardBackground = (props) => {
41
41
  marginBottom="sm"
42
42
  {...props}
43
43
  >
44
- <Body text="Light"/>
44
+ <Body text="Light" />
45
45
  </Card>
46
46
 
47
47
 
@@ -1,299 +1,12 @@
1
- <% if !local_prop_data.present? %>
2
- <div data-action="toggle" data-togglable="prop_example" class="pb--propsTable">
1
+ <div data-action="toggle" data-togglable="prop_example" class="pb--propsTable">
3
2
  <%= pb_rails("title", props: { text: "Available Props", size: 3, margin_bottom: "sm" }) %>
4
- <%= pb_rails("card", props: { padding: "none" }) do %>
5
- <%= pb_rails("card/card_body", props: { padding: "sm" }) do %>
6
- <%= pb_rails("nav", props: { orientation: "horizontal", variant: "subtle" }) do %>
7
- <%= pb_rails("nav/item", props: { text: "Global Props", link: "#", active: true }) %>
8
- <% end %>
9
- <% end %>
10
- <%= pb_rails("section_separator") %>
11
- <%= pb_rails("card/card_body", props: {}) do %>
12
- <%= pb_rails("table", props: {container: false, disable_hover: true }) do %>
13
- <thead>
14
- <tr>
15
- <th>Props</th>
16
- <th>Type</th>
17
- <th>Values</th>
18
- <th>Default</th>
19
- </tr>
20
- </thead>
21
- <tbody>
22
- <% global_prop_data.each do |key, value|%>
23
- <tr>
24
- <td>
25
- <%= pb_rails("title", props: { text: key, tag: "h4", size: 4 }) %>
26
- </td>
27
- <td>
28
- <%= pb_rails("card", props: {
29
- classname: "card",
30
- padding: "xxs",
31
- background: "light",
32
- border_none: true,
33
- border_radius: "sm"
34
- }) do %>
35
- <%= pb_rails("body", props: {
36
- classname: "kearning"
37
- }) do %>
38
- <%= value[:type].downcase %>
39
- <% end %>
40
- <% end %>
41
- </td>
42
- <td>
43
- <% if value[:values].present? %>
44
- <% value[:values].each do |item| %>
45
- <% if item != nil %>
46
- <%= pb_rails("card", props: {
47
- flex_direction: "row",
48
- classname: "card",
49
- padding: "xxs",
50
- background: "light",
51
- border_none: true,
52
- border_radius: "sm",
53
- margin: "xxs"
54
- }) do %>
55
- <%= pb_rails("body", props: {
56
- classname: "kearning"
57
- }) do %>
58
- <%= item %>
59
- <% end %>
60
- <% end %>
61
- <% end %>
62
- <% end %>
63
- <% end %>
64
- </td>
65
- <td>
66
- <% if value[:default].present? || value[:default].is_a?(TrueClass) || value[:default].is_a?(FalseClass) %>
67
- <%= pb_rails("card", props: {
68
- classname: "card",
69
- padding: "xxs",
70
- background: "light",
71
- border_none: true,
72
- border_radius: "sm"
73
- }) do %>
74
- <%= pb_rails("body", props: {
75
- classname: "kearning"
76
- }) do %>
77
- <%= value[:default] %>
78
- <% end %>
79
- <% end %>
80
- <% end %>
81
- </td>
82
- </tr>
83
- <% end %>
84
- </tbody>
85
- <% end %>
86
- <% end %>
87
- <% end %>
88
- </div>
89
- <% else %>
90
- <div data-action="toggle" data-togglable="prop_example" class="pb--propsTable">
91
- <%= pb_rails("title", props: { text: "Available Props", size: 3, margin_bottom: "sm" }) %>
92
- <%= pb_rails("card", props: { padding: "none" }) do %>
93
- <%= pb_rails("card/card_body", props: { padding: "sm" }) do %>
94
- <%= pb_rails("nav", props: { orientation: "horizontal", variant: "subtle" }) do %>
95
- <% if local_prop_data.present? %>
96
- <%= pb_rails("nav/item", props: { text: "Kit Props", link: "#", active: true, id: "local-button-active", classname: "local-active" }) %>
97
- <% end %>
98
- <% if local_prop_data.present? %>
99
- <%= pb_rails("nav/item", props: { text: "Kit Props", link: "#", id: "local-button", classname: "global-active" }) %>
100
- <% end %>
101
- <%= pb_rails("nav/item", props: { text: "Global Props", link: "#", active: true, id: "global-button-active", classname: "global-active" }) %>
102
- <%= pb_rails("nav/item", props: { text: "Global Props", link: "#", id: "global-button", classname: "local-active" }) %>
103
- <% end %>
104
- <% end %>
105
- <%= pb_rails("section_separator") %>
106
- <%= pb_rails("card/card_body", props: {}) do %>
107
- <%= pb_rails("table", props: {container: false, disable_hover: true, id: "global-prop-table", classname: "global-active"}) do %>
108
- <thead>
109
- <tr>
110
- <th>Props</th>
111
- <th>Type</th>
112
- <th>Values</th>
113
- <th>Default</th>
114
- </tr>
115
- </thead>
116
- <tbody>
117
- <% global_prop_data.each do |key, value|%>
118
- <tr>
119
- <td>
120
- <%= pb_rails("title", props: { text: key, tag: "h4", size: 4 }) %>
121
- </td>
122
- <td>
123
- <%= pb_rails("card", props: {
124
- classname: "card",
125
- padding: "xxs",
126
- background: "light",
127
- border_none: true,
128
- border_radius: "sm"
129
- }) do %>
130
- <%= pb_rails("body", props: {
131
- classname: "kearning"
132
- }) do %>
133
- <%= value[:type].downcase %>
134
- <% end %>
135
- <% end %>
136
- </td>
137
- <td>
138
- <% if value[:values].present? %>
139
- <% value[:values].each do |item| %>
140
- <% if item != nil %>
141
- <%= pb_rails("card", props: {
142
- flex_direction: "row",
143
- classname: "card",
144
- padding: "xxs",
145
- background: "light",
146
- border_none: true,
147
- border_radius: "sm",
148
- margin: "xxs"
149
- }) do %>
150
- <%= pb_rails("body", props: {
151
- classname: "kearning"
152
- }) do %>
153
- <%= item %>
154
- <% end %>
155
- <% end %>
156
- <% end %>
157
- <% end %>
158
- <% end %>
159
- </td>
160
- <td>
161
- <% if value[:default].present? || value[:default].is_a?(TrueClass) || value[:default].is_a?(FalseClass) %>
162
- <%= pb_rails("card", props: {
163
- classname: "card",
164
- padding: "xxs",
165
- background: "light",
166
- border_none: true,
167
- border_radius: "sm"
168
- }) do %>
169
- <%= pb_rails("body", props: {
170
- classname: "kearning"
171
- }) do %>
172
- <%= value[:default] %>
173
- <% end %>
174
- <% end %>
175
- <% end %>
176
- </td>
177
- </tr>
178
- <% end %>
179
- </tbody>
180
- <% end %>
181
- <%= pb_rails("table", props: {container: false, disable_hover: true, id: "local-prop-table", classname: "local-active"}) do %>
182
- <thead>
183
- <tr>
184
- <th>Props</th>
185
- <th>Type</th>
186
- <th>Values</th>
187
- <th>Default</th>
188
- </tr>
189
- </thead>
190
- <tbody>
191
- <% local_prop_data.each do |key, value|%>
192
- <tr>
193
- <td>
194
- <%= pb_rails("title", props: { text: key, tag: "h4", size: 4 }) %>
195
- </td>
196
- <td>
197
- <%= pb_rails("card", props: {
198
- classname: "card",
199
- padding: "xxs",
200
- background: "light",
201
- border_none: true,
202
- border_radius: "sm"
203
- }) do %>
204
- <%= pb_rails("body", props: {
205
- classname: "kearning"
206
- }) do %>
207
- <%= value[:type].downcase %>
208
- <% end %>
209
- <% end %>
210
- </td>
211
- <td>
212
- <% if value[:values].present? %>
213
- <% value[:values].each do |item| %>
214
- <% if item != nil %>
215
- <%= pb_rails("card", props: {
216
- flex_direction: "row",
217
- classname: "card",
218
- padding: "xxs",
219
- background: "light",
220
- border_none: true,
221
- border_radius: "sm",
222
- margin: "xxs"
223
- }) do %>
224
- <%= pb_rails("body", props: {
225
- classname: "kearning"
226
- }) do %>
227
- <%= item %>
228
- <% end %>
229
- <% end %>
230
- <% end %>
231
- <% end %>
232
- <% end %>
233
- </td>
234
- <td>
235
- <% if value[:default].present? || value[:default].is_a?(TrueClass) || value[:default].is_a?(FalseClass) %>
236
- <%= pb_rails("card", props: {
237
- classname: "card",
238
- padding: "xxs",
239
- background: "light",
240
- border_none: true,
241
- border_radius: "sm"
242
- }) do %>
243
- <%= pb_rails("body", props: {
244
- classname: "kearning"
245
- }) do %>
246
- <%= value[:default] %>
247
- <% end %>
248
- <% end %>
249
- <% end %>
250
- </td>
251
- </tr>
252
- <% end %>
253
- </tbody>
3
+ <%= pb_rails("card", props: { padding: "none" }) do %>
4
+ <%= pb_rails("list", props: { xpadding: true }) do %>
5
+ <% kit_props.each do |key, _def| %>
6
+ <%= pb_rails("list/item") do %>
7
+ <%= key %>
254
8
  <% end %>
255
9
  <% end %>
256
10
  <% end %>
257
- </div>
258
- <% end %>
259
-
260
- <script>
261
-
262
- const globalNavAndTable = document.querySelectorAll('.global-active');
263
- const localNavAndTable = document.querySelectorAll('.local-active');
264
-
265
- globalNavAndTable.forEach(element => {
266
- element.style.display = 'none';
267
- });
268
-
269
- const globalButton = document.getElementById("global-button");
270
- if (globalButton) {
271
- globalButton.addEventListener("click", showGlobal);
272
- }
273
-
274
- const localButton = document.getElementById("local-button");
275
- if (localButton) {
276
- localButton.addEventListener("click", showLocal);
277
- }
278
-
279
- function showGlobal() {
280
- localNavAndTable.forEach(element => {
281
- element.style.display = 'none';
282
- });
283
-
284
- globalNavAndTable.forEach(element => {
285
- element.style.display = 'table';
286
- });
287
- }
288
-
289
- function showLocal() {
290
- localNavAndTable.forEach(element => {
291
- element.style.display = 'table';
292
- });
293
-
294
- globalNavAndTable.forEach(element => {
295
- element.style.display = 'none';
296
- });
297
- }
298
-
299
- </script>
11
+ <% end %>
12
+ </div>
@@ -5,48 +5,6 @@ module Playbook
5
5
  class KitApi < Playbook::KitBase
6
6
  prop :kit, type: Playbook::Props::String, required: true
7
7
 
8
- def kit_local_props
9
- local = []
10
- kit_props.each do |key, value|
11
- value.kit != Playbook::KitBase && local.push({ key: key, value: value })
12
- end
13
- local
14
- end
15
-
16
- def local_prop_data
17
- local_props = {}
18
-
19
- kit_local_props.each do |key, _value|
20
- name = key[:value].instance_variable_get(:@name)
21
- type = key[:value].class.to_s.split("::").last
22
- default = key[:value].instance_variable_get(:@default)
23
- values = key[:value].instance_variable_get(:@values)
24
- local_props[name.to_sym] = { "type": type, "default": default, "values": values }
25
- end
26
- local_props
27
- end
28
-
29
- def kit_global_props
30
- global = []
31
- kit_props.each do |key, value|
32
- value.kit == Playbook::KitBase && global.push({ key: key, value: value })
33
- end
34
- global
35
- end
36
-
37
- def global_prop_data
38
- global_props = {}
39
-
40
- kit_global_props.each do |key, _value|
41
- name = key[:value].instance_variable_get(:@name)
42
- type = key[:value].class.to_s.split("::").last
43
- default = key[:value].instance_variable_get(:@default)
44
- values = key[:value].instance_variable_get(:@values)
45
- global_props[name.to_sym] = { "type": type, "default": default, "values": values }
46
- end
47
- global_props
48
- end
49
-
50
8
  def kit_props
51
9
  kit_class.props
52
10
  end
@@ -1,5 +1,3 @@
1
- <% example_html = ERB.new(example).result %>
2
-
3
1
  <%= pb_rails("card", props: { classname: "pb--doc", padding: "none", dark: dark }) do %>
4
2
  <div class="pb--kit-example">
5
3
  <%= pb_rails("caption", props: { text: example_title, dark: dark }) %>
@@ -15,13 +13,6 @@
15
13
  <div id="code-wrapper">
16
14
  <div class="pb--codeControls">
17
15
  <ul>
18
- <% if type == "rails" %>
19
- <li>
20
- <a href="#" id="copy-<%= example_key %>-trigger" onclick="copyOnClick(`<%= example_html %>`, `copy-<%= example_key %>`)">
21
- Copy HTML
22
- </a>
23
- </li>
24
- <% end %>
25
16
  <li>
26
17
  <a href="#" id="toggle-open" data-toggle="code_example">Code Example</a>
27
18
  </li>
@@ -35,11 +26,3 @@
35
26
  </div>
36
27
  <% end %>
37
28
  <% end %>
38
-
39
- <script>
40
- function copyOnClick(content, elementID) {
41
- copyContent(content)
42
- }
43
-
44
- </script>
45
-
@@ -33,29 +33,12 @@ module Playbook
33
33
  def source
34
34
  @source ||= begin
35
35
  extension = type == "react" ? "jsx" : "html.erb"
36
- stringified_code = read_kit_file("_#{example_key}.#{extension}")
37
- sanitize_code(stringified_code)
36
+ read_kit_file("_#{example_key}.#{extension}")
38
37
  end
39
38
  end
40
39
 
41
40
  private
42
41
 
43
- def sanitize_code(stringified_code)
44
- stringified_code = stringified_code.gsub('"../.."', '"playbook-ui"')
45
- .gsub('"../../"', '"playbook-ui"')
46
- .gsub("'../../'", "'playbook-ui'")
47
- .gsub("'../..'", "'playbook-ui'")
48
- .gsub(%r{from "../.*}, "from 'playbook-ui'")
49
- .gsub(%r{from '../.*}, "from 'playbook-ui'")
50
- stringified_code = dark ? stringified_code.gsub("{...props}", "dark") : stringified_code.gsub(/\s*{...props}\s*\n/, "\n")
51
- if stringified_code.include?("props: { ")
52
- stringified_code = stringified_code.gsub("props: {", "props: {dark: true,") if type == "rails" && dark
53
- elsif type == "rails" && dark
54
- stringified_code = stringified_code.gsub("props: {", "props: {\n dark: true,")
55
- end
56
- stringified_code
57
- end
58
-
59
42
  def read_kit_file(*args)
60
43
  path = ::Playbook.kit_path(kit, "docs", *args)
61
44
  path.exist? ? path.read : ""
@@ -2,7 +2,7 @@ import React from 'react'
2
2
 
3
3
  import Image from '../_image'
4
4
 
5
- const DefaultImage = (props) => {
5
+ const DefaultImage = (props: any) => {
6
6
  return (
7
7
  <>
8
8
  <br />
@@ -4,7 +4,6 @@ import Slides from './Slides'
4
4
  import Thumbnails from './Thumbnails'
5
5
 
6
6
  type CarouselType = {
7
- initialPhoto?: string,
8
7
  onClose?: () => void,
9
8
  icon?: string,
10
9
  currentIndex: number,
@@ -12,11 +12,11 @@ type LightboxType = {
12
12
  aria?: {[key: string]: string},
13
13
  children: React.ReactNode[] | React.ReactNode | string,
14
14
  className?: string,
15
+ currentPhotoIndex?: number,
15
16
  data?: {[key: string]: string | number},
16
17
  description?: string | any,
17
18
  id?: string,
18
19
  photos: [],
19
- initialPhoto?: number,
20
20
  onChange?: (index: number)=> {},
21
21
  onClickRight?: () => void,
22
22
  onClose?: () => void,
@@ -31,10 +31,10 @@ const Lightbox = (props: LightboxType): React.ReactNode => {
31
31
  aria = {},
32
32
  children,
33
33
  className,
34
+ currentPhotoIndex,
34
35
  data = {},
35
36
  description,
36
37
  id = '',
37
- initialPhoto = 0,
38
38
  photos,
39
39
  onChange = ()=>{},
40
40
  onClose,
@@ -44,12 +44,15 @@ const Lightbox = (props: LightboxType): React.ReactNode => {
44
44
  title,
45
45
  } = props
46
46
 
47
- const [activePhoto, setActivePhoto] = useState(initialPhoto)
48
-
47
+ const [activePhoto, setActivePhoto] = useState(0)
49
48
  useEffect(() => {
50
49
  onChange(activePhoto)
51
50
  },[activePhoto])
52
51
 
52
+ useEffect(() => {
53
+ setActivePhoto(currentPhotoIndex)
54
+ },[currentPhotoIndex])
55
+
53
56
  const ariaProps = buildAriaProps(aria)
54
57
  const dataProps = buildDataProps(data)
55
58
  const classes = classnames(
@@ -10,17 +10,14 @@ const LightboxCompoundComponent = (props) => {
10
10
  'https://images.unsplash.com/photo-1501045337096-542a73dafa4f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2052&q=80',
11
11
  'https://images.unsplash.com/photo-1563693998336-93c10e5d8f91?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80,',
12
12
  ]
13
- const [selectedPhoto, setSelectedPhoto] = useState(0)
14
13
  const [showLightbox, toggleShowLightbox] = useState(false)
15
14
 
16
15
  const handleCloseLightbox = () => {
17
16
  toggleShowLightbox(!showLightbox)
18
- setSelectedPhoto(null)
19
17
  }
20
18
 
21
- const onPhotoClick = (photo) => {
19
+ const onPhotoClick = () => {
22
20
  toggleShowLightbox(!showLightbox)
23
- setSelectedPhoto(photo)
24
21
  }
25
22
 
26
23
  const exampleStyles = {
@@ -34,7 +31,6 @@ const LightboxCompoundComponent = (props) => {
34
31
  {showLightbox ? (
35
32
  <Lightbox
36
33
  description='Description Content Goes Here.'
37
- initialPhoto={selectedPhoto}
38
34
  onClose={handleCloseLightbox}
39
35
  photos={photos}
40
36
  title='Windows, Sidings, & Gutters'
@@ -0,0 +1,121 @@
1
+ /* @flow */
2
+ /* eslint-disable jsx-control-statements/jsx-use-if-tag */
3
+ import React, { useState } from 'react'
4
+ import { Flex, Image, Button, Body, FlexItem } from '../../'
5
+ import Lightbox from '../_lightbox.tsx'
6
+
7
+ const LightboxCurrentPhoto = (props) => {
8
+ const photos = [
9
+ 'https://images.unsplash.com/photo-1638727228877-d2a79ab75e68?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2668&q=80',
10
+ 'https://images.unsplash.com/photo-1526657782461-9fe13402a841?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1984&q=80',
11
+ 'https://images.unsplash.com/photo-1523057530100-383d7fbc77a1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2669&q=80',
12
+ 'https://images.unsplash.com/photo-1638727228877-d2a79ab75e68?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2668&q=80',
13
+ 'https://images.unsplash.com/photo-1526657782461-9fe13402a841?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1984&q=80',
14
+ 'https://images.unsplash.com/photo-1523057530100-383d7fbc77a1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2669&q=80',
15
+ 'https://images.unsplash.com/photo-1638727228877-d2a79ab75e68?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2668&q=80',
16
+ 'https://images.unsplash.com/photo-1526657782461-9fe13402a841?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1984&q=80',
17
+ 'https://images.unsplash.com/photo-1523057530100-383d7fbc77a1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2669&q=80',
18
+ 'https://images.unsplash.com/photo-1638727228877-d2a79ab75e68?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2668&q=80',
19
+ 'https://images.unsplash.com/photo-1526657782461-9fe13402a841?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1984&q=80',
20
+ 'https://images.unsplash.com/photo-1523057530100-383d7fbc77a1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2669&q=80',
21
+ 'https://images.unsplash.com/photo-1638727228877-d2a79ab75e68?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2668&q=80',
22
+ 'https://images.unsplash.com/photo-1526657782461-9fe13402a841?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1984&q=80',
23
+ 'https://images.unsplash.com/photo-1523057530100-383d7fbc77a1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2669&q=80',
24
+ 'https://images.unsplash.com/photo-1638727228877-d2a79ab75e68?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2668&q=80',
25
+ 'https://images.unsplash.com/photo-1526657782461-9fe13402a841?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1984&q=80',
26
+ 'https://images.unsplash.com/photo-1523057530100-383d7fbc77a1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2669&q=80',
27
+ 'https://images.unsplash.com/photo-1523057530100-383d7fbc77a1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2669&q=80',
28
+ 'https://images.unsplash.com/photo-1638727228877-d2a79ab75e68?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2668&q=80',
29
+ 'https://images.unsplash.com/photo-1526657782461-9fe13402a841?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1984&q=80',
30
+ 'https://images.unsplash.com/photo-1523057530100-383d7fbc77a1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2669&q=80',
31
+ ]
32
+ const [light, toggleLight] = useState(false)
33
+ //Setting state with the index of the current slide exposed by the onChange prop
34
+ const [active, setActive] = useState(0)
35
+ //Setting state for the current photo to pass to the kit
36
+ const [currentPhoto, setCurrentPhoto] = useState(active)
37
+
38
+ const handleCloseLightbox = () => {
39
+ toggleLight(!light)
40
+ }
41
+
42
+ const onPhotoClick = () => {
43
+ toggleLight(!light)
44
+ }
45
+
46
+ const exampleStyles = {
47
+ width: "100%",
48
+ overflow: "auto"
49
+ }
50
+
51
+ return (
52
+ <div className="lightbox_doc_example_custom">
53
+ {light ? (
54
+ <>
55
+ <Flex alignItems="center"
56
+ className='custom_lightbox_sidebar'
57
+ justifyContent="center"
58
+ >
59
+ <Flex margin='lg'
60
+ orientation='column'
61
+ >
62
+ <Body marginBottom='md'>
63
+ This UI is for demonstration purposes only to demonstrate how external buttons can be used to change the slides.
64
+ </Body>
65
+ <FlexItem alignSelf="center">
66
+ <Flex justifyContent="center">
67
+ <Button
68
+ onClick={()=> setCurrentPhoto(active > 0 ? active - 1 : 0)}
69
+ >
70
+ Back
71
+ </Button>
72
+ <Button marginLeft='sm'
73
+ onClick={() => setCurrentPhoto(active < photos.length - 1 ? active + 1 : photos.length - 1)}
74
+ >
75
+ Next
76
+ </Button>
77
+ </Flex>
78
+ </FlexItem>
79
+ </Flex>
80
+ </Flex>
81
+ <Lightbox
82
+ currentPhotoIndex={currentPhoto}
83
+ icon="times"
84
+ onChange={(index) => setActive(index)}
85
+ onClose={handleCloseLightbox}
86
+ photos={photos}
87
+ {...props}
88
+ />
89
+ </>
90
+ ) : (
91
+ <div
92
+ className="PhotoViewer"
93
+ style={exampleStyles}
94
+ >
95
+ <Flex>
96
+ {photos.map((photo, index) => {
97
+ return (
98
+ <div
99
+ key={index}
100
+ onClick={() => onPhotoClick(index)}
101
+ >
102
+ <Image
103
+ cursor="pointer"
104
+ marginRight="xl"
105
+ rounded
106
+ size="lg"
107
+ url={photo}
108
+ />
109
+
110
+ <div className="overlay" />
111
+ </div>
112
+ )
113
+ })}
114
+ </Flex>
115
+ </div>
116
+ )}
117
+ </div>
118
+ )
119
+ }
120
+
121
+ export default LightboxCurrentPhoto
@@ -0,0 +1 @@
1
+ The `currentPhotoIndex` prop allows the user to pass a number to the lightbox that will set the current slide by index. This can be leveraged if the user wants to change slides using custom buttons. To do this, the user must also make use of the current slide's index that is exposed by the `onChange` prop.
@@ -10,17 +10,14 @@ const LightboxCustomHeader = (props) => {
10
10
  "https://images.unsplash.com/photo-1501045337096-542a73dafa4f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2052&q=80",
11
11
  "https://images.unsplash.com/photo-1563693998336-93c10e5d8f91?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80,",
12
12
  ];
13
- const [selectedPhoto, setSelectedPhoto] = useState(0);
14
13
  const [showLightbox, toggleShowLightbox] = useState(false);
15
14
 
16
15
  const handleCloseLightbox = () => {
17
16
  toggleShowLightbox(!showLightbox);
18
- setSelectedPhoto(null);
19
17
  };
20
18
 
21
- const onPhotoClick = (photo) => {
19
+ const onPhotoClick = () => {
22
20
  toggleShowLightbox(!showLightbox);
23
- setSelectedPhoto(photo);
24
21
  };
25
22
 
26
23
  const exampleStyles = {
@@ -55,7 +52,6 @@ const LightboxCustomHeader = (props) => {
55
52
  {showLightbox ? (
56
53
  <Lightbox
57
54
  description={customDescription}
58
- initialPhoto={selectedPhoto}
59
55
  navRight="All Photos"
60
56
  onClickRight={()=> alert("Clicked!")}
61
57
  onClose={handleCloseLightbox}
@@ -8,17 +8,14 @@ const LightboxDefault = (props) => {
8
8
  const photos = [
9
9
  'https://images.unsplash.com/photo-1638727228877-d2a79ab75e68?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2668&q=80',
10
10
  ]
11
- const [selectedPhoto, setSelectedPhoto] = useState(0)
12
11
  const [showLightbox, toggleShowLightbox] = useState(false)
13
12
 
14
13
  const handleCloseLightbox = () => {
15
14
  toggleShowLightbox(!showLightbox)
16
- setSelectedPhoto(null)
17
15
  }
18
16
 
19
- const onPhotoClick = (photoIndex) => {
17
+ const onPhotoClick = () => {
20
18
  toggleShowLightbox(!showLightbox)
21
- setSelectedPhoto(photoIndex)
22
19
  }
23
20
 
24
21
  return (
@@ -27,7 +24,6 @@ const LightboxDefault = (props) => {
27
24
  {showLightbox ? (
28
25
  <Lightbox
29
26
  icon="times"
30
- initialPhoto={selectedPhoto}
31
27
  onClose={handleCloseLightbox}
32
28
  photos={photos}
33
29
  {...props}
@@ -1 +1 @@
1
- Lightbox contains several props: `photos` (an array of urls), `initialPhoto` (a number), `onClickLeft` (an optional callback function for top left close button), `title` and `description` (string or custom components), `icon` ( optional prop for the close button in the top left of the header), `navRight` (optional prop that renders clickable text in the top right section of the header), `onClickRight` (optional callback function of navRight) and `onChange` (optional event handler prop exposing index of current photo).
1
+ Lightbox contains several props: `photos` (an array of urls), `onClickLeft` (an optional callback function for top left close button), `title` and `description` (string or custom components), `icon` ( optional prop for the close button in the top left of the header), `navRight` (optional prop that renders clickable text in the top right section of the header), `onClickRight` (optional callback function of navRight) and `onChange` (optional event handler prop exposing index of current photo).
@@ -29,17 +29,14 @@ const LightboxMultiple = (props) => {
29
29
  'https://images.unsplash.com/photo-1526657782461-9fe13402a841?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1984&q=80',
30
30
  'https://images.unsplash.com/photo-1523057530100-383d7fbc77a1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2669&q=80',
31
31
  ]
32
- const [selectedPhoto, setSelectedPhoto] = useState(0)
33
32
  const [light, toggleLight] = useState(false)
34
33
 
35
34
  const handleCloseLightbox = () => {
36
35
  toggleLight(!light)
37
- setSelectedPhoto(null)
38
36
  }
39
37
 
40
- const onPhotoClick = (photo) => {
38
+ const onPhotoClick = () => {
41
39
  toggleLight(!light)
42
- setSelectedPhoto(photo)
43
40
  }
44
41
 
45
42
  const exampleStyles = {
@@ -52,7 +49,6 @@ const LightboxMultiple = (props) => {
52
49
  {light ? (
53
50
  <Lightbox
54
51
  icon="times"
55
- initialPhoto={selectedPhoto}
56
52
  onChange={(index) => console.log(`current photo index: ${index}`)}
57
53
  onClose={handleCloseLightbox}
58
54
  photos={photos}
@@ -5,3 +5,4 @@ examples:
5
5
  - lightbox_multiple: Multiple
6
6
  - lightbox_compound_component: Compound Component
7
7
  - lightbox_custom_header: Custom Header
8
+ - lightbox_current_photo: Current Photo
@@ -2,3 +2,4 @@ export { default as LightboxDefault } from './_lightbox_default.jsx'
2
2
  export { default as LightboxMultiple } from './_lightbox_multiple.jsx'
3
3
  export { default as LightboxCompoundComponent } from './_lightbox_compound_component.jsx'
4
4
  export { default as LightboxCustomHeader } from './_lightbox_custom_header'
5
+ export { default as LightboxCurrentPhoto } from './_lightbox_current_photo'
@@ -18,7 +18,6 @@ test('Kit renders', () => {
18
18
  data={{ testid: testId }}
19
19
  icon="close"
20
20
  id="test1"
21
- initialPhoto={1}
22
21
  onClose={() => {}}
23
22
  photos={TEST_PHOTOS}
24
23
  />
@@ -35,7 +34,6 @@ test('Shows selected images', () => {
35
34
  data={{ testid: testId }}
36
35
  icon="close"
37
36
  id="test1"
38
- initialPhoto={1}
39
37
  onClose={() => {}}
40
38
  photos={TEST_PHOTOS}
41
39
  />
@@ -43,7 +41,7 @@ test('Shows selected images', () => {
43
41
  const kit = screen.getByTestId(testId)
44
42
  const slide = kit.getElementsByClassName('Slide')[0]
45
43
  const image = slide.getElementsByTagName('img')[0]
46
- expect(image).toHaveAttribute('src', TEST_PHOTOS[1])
44
+ expect(image).toHaveAttribute('src', TEST_PHOTOS[0])
47
45
 
48
46
  const thumbnails = kit.getElementsByClassName('Thumbnail')
49
47
 
@@ -77,7 +75,6 @@ test('Closes on escape key', async () => {
77
75
  data={{ testid: testId }}
78
76
  icon="close"
79
77
  id="test1"
80
- initialPhoto={0}
81
78
  onClose={mockClose}
82
79
  photos={TEST_PHOTOS}
83
80
  />
@@ -106,7 +103,6 @@ test('Closes on close button', async () => {
106
103
  data={{ testid: testId }}
107
104
  icon="close"
108
105
  id="test1"
109
- initialPhoto={0}
110
106
  onClose={mockClose}
111
107
  photos={TEST_PHOTOS}
112
108
  />
@@ -88,18 +88,13 @@ $tooltip_shadow: rgba(60, 106, 172, 0.18);
88
88
  &.show {
89
89
  opacity: 1;
90
90
  margin-bottom: $space_sm;
91
- color: $white;
92
- background-color: rgba($black, $opacity_9);
91
+ background-color: $white;
93
92
  &.fade_out {
94
93
  animation-name: fadeOut;
95
94
  animation-duration: 150ms;
96
95
  animation-timing-function: linear;
97
96
  animation-fill-mode: forwards;
98
97
  }
99
- .arrow {
100
- border-color: $black transparent transparent transparent;
101
- opacity: $opacity_9;
102
- }
103
98
  }
104
99
  }
105
100
 
@@ -114,12 +109,12 @@ $tooltip_shadow: rgba(60, 106, 172, 0.18);
114
109
  }
115
110
  //rails
116
111
  &.show {
117
- color: $charcoal;
118
- background-color: $white;
112
+ color: $white;
113
+ background-color: rgba($black, $opacity_9);
119
114
  }
120
- .arrow {
121
- border-color: $white transparent transparent transparent;
122
- opacity: $opacity_10;
115
+ .arrow {
116
+ border-color: $black transparent transparent transparent;
117
+ opacity: $opacity_9;
123
118
  }
124
119
  // react arrow
125
120
  .arrow_bg {
@@ -1,4 +1,4 @@
1
- <%= pb_rails("flex", props: { gap: "md", justify: "center", wrap: true }) do %>
1
+ <%= pb_rails("flex", props: { horizontal: "center", orientation: "column" }) do %>
2
2
  <%= pb_rails("flex/flex_item") do %>
3
3
  <span id='regular-tooltip-1'>Hover here (Top)</span>
4
4
 
@@ -11,7 +11,7 @@
11
11
  <% end %>
12
12
  <% end %>
13
13
 
14
- <%= pb_rails("flex/flex_item") do %>
14
+ <%= pb_rails("flex/flex_item", props: {margin_top: "md"}) do %>
15
15
  <span id='regular-tooltip-2'>Hover here (Bottom)</span>
16
16
  <%= pb_rails("tooltip", props: {
17
17
  trigger_element_selector: "#regular-tooltip-2",
@@ -22,7 +22,7 @@
22
22
  <% end %>
23
23
  <% end %>
24
24
 
25
- <%= pb_rails("flex/flex_item") do %>
25
+ <%= pb_rails("flex/flex_item", props: {margin_top: "md"}) do %>
26
26
  <span id='regular-tooltip-3'>Hover here (Right)</span>
27
27
  <%= pb_rails("tooltip", props: {
28
28
  trigger_element_selector: "#regular-tooltip-3",
@@ -33,7 +33,7 @@
33
33
  <% end %>
34
34
  <% end %>
35
35
 
36
- <%= pb_rails("flex/flex_item") do %>
36
+ <%= pb_rails("flex/flex_item", props: {margin_top: "md"}) do %>
37
37
  <span id='regular-tooltip-4'>Hover here (Left)</span>
38
38
  <%= pb_rails("tooltip", props: {
39
39
  trigger_element_selector: "#regular-tooltip-4",
@@ -0,0 +1,9 @@
1
+ <span id='regular-tooltip-5'>I am a white tooltip.</span>
2
+
3
+ <%= pb_rails("tooltip", props: {
4
+ trigger_element_id: "regular-tooltip-5",
5
+ tooltip_id: "tooltip-5",
6
+ position: 'top'
7
+ }) do %>
8
+ Whoa. I'm a white tooltip.
9
+ <% end %>
@@ -3,7 +3,8 @@
3
3
  <%= pb_rails("tooltip", props: {
4
4
  trigger_element_id: "result-1-sample-email-link",
5
5
  tooltip_id: "sample-email-tooltip-result-1",
6
- position: "top"
6
+ position: "top",
7
+ dark: true
7
8
  }) do %>
8
9
  Send Email
9
10
  <% end %>
@@ -3,6 +3,7 @@ examples:
3
3
  rails:
4
4
  - tooltip_default: Default
5
5
  - tooltip_selectors: Using Common Selectors
6
+ - tooltip_white: White
6
7
  - tooltip_with_icon_circle: Icon Circle Tooltip
7
8
 
8
9
  react:
@@ -2,5 +2,5 @@
2
2
 
3
3
  module Playbook
4
4
  PREVIOUS_VERSION = "12.16.0"
5
- VERSION = "12.16.0.pre.alpha.PLAY693tooltipwrongbg558"
5
+ VERSION = "12.16.0.pre.alpha.lightboxcurrentphotoprop531"
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: 12.16.0.pre.alpha.PLAY693tooltipwrongbg558
4
+ version: 12.16.0.pre.alpha.lightboxcurrentphotoprop531
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: 2023-04-27 00:00:00.000000000 Z
12
+ date: 2023-04-25 00:00:00.000000000 Z
13
13
  dependencies:
14
14
  - !ruby/object:Gem::Dependency
15
15
  name: actionpack
@@ -1221,7 +1221,7 @@ files:
1221
1221
  - app/pb_kits/playbook/pb_image/docs/_custom_error_image.html.erb
1222
1222
  - app/pb_kits/playbook/pb_image/docs/_custom_error_image.jsx
1223
1223
  - app/pb_kits/playbook/pb_image/docs/_default_image.html.erb
1224
- - app/pb_kits/playbook/pb_image/docs/_default_image.jsx
1224
+ - app/pb_kits/playbook/pb_image/docs/_default_image.tsx
1225
1225
  - app/pb_kits/playbook/pb_image/docs/_description.md
1226
1226
  - app/pb_kits/playbook/pb_image/docs/_rounded_image.html.erb
1227
1227
  - app/pb_kits/playbook/pb_image/docs/_rounded_image.jsx
@@ -1332,6 +1332,8 @@ files:
1332
1332
  - app/pb_kits/playbook/pb_lightbox/docs/_description.md
1333
1333
  - app/pb_kits/playbook/pb_lightbox/docs/_lightbox_compound_component.jsx
1334
1334
  - app/pb_kits/playbook/pb_lightbox/docs/_lightbox_compound_component.md
1335
+ - app/pb_kits/playbook/pb_lightbox/docs/_lightbox_current_photo.jsx
1336
+ - app/pb_kits/playbook/pb_lightbox/docs/_lightbox_current_photo.md
1335
1337
  - app/pb_kits/playbook/pb_lightbox/docs/_lightbox_custom_header.jsx
1336
1338
  - app/pb_kits/playbook/pb_lightbox/docs/_lightbox_custom_header.md
1337
1339
  - app/pb_kits/playbook/pb_lightbox/docs/_lightbox_default.jsx
@@ -2200,6 +2202,7 @@ files:
2200
2202
  - app/pb_kits/playbook/pb_tooltip/docs/_tooltip_margin.md
2201
2203
  - app/pb_kits/playbook/pb_tooltip/docs/_tooltip_selectors.html.erb
2202
2204
  - app/pb_kits/playbook/pb_tooltip/docs/_tooltip_selectors.md
2205
+ - app/pb_kits/playbook/pb_tooltip/docs/_tooltip_white.html.erb
2203
2206
  - app/pb_kits/playbook/pb_tooltip/docs/_tooltip_with_icon_circle.html.erb
2204
2207
  - app/pb_kits/playbook/pb_tooltip/docs/example.yml
2205
2208
  - app/pb_kits/playbook/pb_tooltip/docs/index.js