playbook_ui 12.17.1 → 12.18.0.pre.alpha.PLAY747carddarktokens610

Sign up to get free protection for your applications and to get access to all the features.
Files changed (54) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/index.js +1 -1
  3. data/app/pb_kits/playbook/pb_avatar_action_button/avatar_action_button.html.erb +1 -2
  4. data/app/pb_kits/playbook/pb_collapsible/_collapsible.tsx +2 -2
  5. data/app/pb_kits/playbook/pb_docs/kit_api.html.erb +48 -36
  6. data/app/pb_kits/playbook/pb_docs/kit_api.rb +97 -9
  7. data/app/pb_kits/playbook/pb_docs/kit_example.html.erb +1 -1
  8. data/app/pb_kits/playbook/pb_docs/kit_example.rb +9 -5
  9. data/app/pb_kits/playbook/pb_lightbox/_lightbox.tsx +8 -0
  10. data/app/pb_kits/playbook/pb_lightbox/docs/_lightbox_current_photo.jsx +121 -0
  11. data/app/pb_kits/playbook/pb_lightbox/docs/_lightbox_current_photo.md +1 -0
  12. data/app/pb_kits/playbook/pb_lightbox/docs/example.yml +1 -0
  13. data/app/pb_kits/playbook/pb_lightbox/docs/index.js +1 -0
  14. data/app/pb_kits/playbook/pb_nav/_item.tsx +6 -6
  15. data/app/pb_kits/playbook/pb_nav/_nav.tsx +4 -4
  16. data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/EditorButton.tsx +49 -0
  17. data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/EditorTypes.ts +9 -0
  18. data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/Toolbar.tsx +62 -0
  19. data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/ToolbarDropdown.tsx +139 -0
  20. data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/ToolbarHistory.tsx +45 -0
  21. data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/ToolbarNodes.tsx +59 -0
  22. data/app/pb_kits/playbook/pb_rich_text_editor/_rich_text_editor.scss +1 -1
  23. data/app/pb_kits/playbook/pb_rich_text_editor/_rich_text_editor.tsx +28 -12
  24. data/app/pb_kits/playbook/pb_rich_text_editor/_tiptap_styles.scss +231 -0
  25. data/app/pb_kits/playbook/pb_rich_text_editor/docs/_description.md +1 -0
  26. data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_default.jsx +36 -0
  27. data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_default.md +4 -0
  28. data/app/pb_kits/playbook/pb_rich_text_editor/docs/example.yml +1 -0
  29. data/app/pb_kits/playbook/pb_rich_text_editor/docs/index.js +1 -0
  30. data/app/pb_kits/playbook/pb_time_range_inline/_time_range_inline.tsx +185 -0
  31. data/app/pb_kits/playbook/pb_time_range_inline/time_range_inline.test.js +85 -0
  32. data/app/pb_kits/playbook/pb_title/_title.tsx +1 -1
  33. data/app/pb_kits/playbook/pb_title_detail/_title_detail.tsx +45 -0
  34. data/app/pb_kits/playbook/pb_title_detail/title_detail.test.js +71 -0
  35. data/app/pb_kits/playbook/pb_toggle/{_toggle.jsx → _toggle.tsx} +20 -22
  36. data/app/pb_kits/playbook/pb_toggle/toggle.test.js +67 -0
  37. data/app/pb_kits/playbook/pb_tooltip/_tooltip.scss +11 -6
  38. data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_default.html.erb +4 -4
  39. data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_with_icon_circle.html.erb +1 -2
  40. data/app/pb_kits/playbook/pb_tooltip/docs/example.yml +0 -1
  41. data/app/pb_kits/playbook/pb_user/_user.tsx +1 -1
  42. data/app/pb_kits/playbook/tokens/_colors.scss +5 -3
  43. data/lib/playbook/markdown/helper.rb +50 -71
  44. data/lib/playbook/markdown.rb +0 -1
  45. data/lib/playbook/number_spacing.rb +10 -10
  46. data/lib/playbook/position.rb +10 -10
  47. data/lib/playbook/spacing.rb +10 -10
  48. data/lib/playbook/version.rb +2 -2
  49. data/lib/playbook/z_index.rb +10 -10
  50. metadata +27 -14
  51. data/app/pb_kits/playbook/pb_time_range_inline/_time_range_inline.jsx +0 -172
  52. data/app/pb_kits/playbook/pb_title_detail/_title_detail.jsx +0 -44
  53. data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_white.html.erb +0 -9
  54. data/lib/playbook/markdown/template_handler.rb +0 -47
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: bfed6f95e6594050c37a607fb9cad4b2cb4d4273e5783f31d2ef3d95ac8738f2
4
- data.tar.gz: ad22ab4499b111356d7f9533afd9069bb10be334cbdb01f4d2e93ad034a3d93e
3
+ metadata.gz: df71e45e88ac711bf2e8d7a0a06a9074f6580abac8fd1be01d821f9c62251f24
4
+ data.tar.gz: c17c7ae38668ef45dcfbd38ea53483fd7190b5f5401183ab73b40e8c0c882bf8
5
5
  SHA512:
6
- metadata.gz: 95349ca92cf7040d34fcc7d166e32513bf34d973e1dbc2b406a2523b60ea010a390a9e28ae8cd86c7747e48acf84b71fc550a9bed7f4832babb92f96d8d26c8b
7
- data.tar.gz: f74e854a1c37a6d6050e4a8913ebb3c550633a6eb894f013f8a96b188cb0cad29f7fd39cc8723a0727e47fee1ab0342c850fda11a69ff86f09647e563156d5b7
6
+ metadata.gz: b7f1abd7f565054f92b56797b7b8958a051585540dd0c7060b05db7377b11d7aed7914f2d76b6826f0f5cd02dfccf9cd5e4a681373ac23bf2a5b28ce8b875217
7
+ data.tar.gz: 167d35e3b3112d6b3b7d5dde51f2c5687b913f63c9522db9763c312b59164d826f69b25316bc2aac0a8978098eaef91808dcd62cc98cdde816b56103b889ffaf
@@ -127,4 +127,4 @@ export { default as PbTypeahead } from './pb_typeahead'
127
127
  export { default as dialogHelper } from './pb_dialog/dialogHelper'
128
128
 
129
129
  //Theming
130
- export {default as mapTheme} from './pb_map/pbMapTheme'
130
+ export {default as mapTheme} from './pb_map/pbMapTheme'
@@ -7,8 +7,7 @@
7
7
  <%= pb_rails("tooltip", props: {
8
8
  trigger_element_id: object.tooltip_id,
9
9
  tooltip_id: "tooltip-2",
10
- position: 'top',
11
- dark: true,
10
+ position: 'top'
12
11
  }) do %>
13
12
  <%= object.tooltip_text %>
14
13
  <% end %>
@@ -59,8 +59,8 @@ const Collapsible = ({
59
59
  const dataProps = buildDataProps(data)
60
60
  const classes = classnames(
61
61
  buildCss('pb_collapsible_kit'),
62
- className,
63
- globalProps(props, { padding })
62
+ globalProps(props, { padding }),
63
+ className
64
64
  )
65
65
 
66
66
  return (
@@ -15,7 +15,6 @@
15
15
  <th>Props</th>
16
16
  <th>Type</th>
17
17
  <th>Values</th>
18
- <th>Default</th>
19
18
  </tr>
20
19
  </thead>
21
20
  <tbody>
@@ -35,11 +34,34 @@
35
34
  <%= pb_rails("body", props: {
36
35
  classname: "kearning"
37
36
  }) do %>
38
- <%= value[:type].downcase %>
37
+ <% if key =~ /^padding|^margin/ %>
38
+ <%= "array" %>
39
+ <% else %>
40
+ <%= value[:type].to_s.downcase %>
41
+ <% end %>
39
42
  <% end %>
40
43
  <% end %>
41
44
  </td>
42
45
  <td>
46
+ <% if key =~ /^padding|^margin/ %>
47
+ <% padding_margin_values.each do |item| %>
48
+ <%= pb_rails("card", props: {
49
+ flex_direction: "row",
50
+ classname: "card",
51
+ padding: "xxs",
52
+ background: "light",
53
+ border_none: true,
54
+ border_radius: "sm",
55
+ margin: "xxs"
56
+ }) do %>
57
+ <%= pb_rails("body", props: {
58
+ classname: "kearning"
59
+ }) do %>
60
+ <%= item %>
61
+ <% end %>
62
+ <% end %>
63
+ <% end %>
64
+ <% else %>
43
65
  <% if value[:values].present? %>
44
66
  <% value[:values].each do |item| %>
45
67
  <% if item != nil %>
@@ -61,22 +83,6 @@
61
83
  <% end %>
62
84
  <% end %>
63
85
  <% 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
86
  <% end %>
81
87
  </td>
82
88
  </tr>
@@ -110,7 +116,6 @@
110
116
  <th>Props</th>
111
117
  <th>Type</th>
112
118
  <th>Values</th>
113
- <th>Default</th>
114
119
  </tr>
115
120
  </thead>
116
121
  <tbody>
@@ -130,11 +135,34 @@
130
135
  <%= pb_rails("body", props: {
131
136
  classname: "kearning"
132
137
  }) do %>
133
- <%= value[:type].downcase %>
138
+ <% if key =~ /^padding|^margin/ %>
139
+ <%= "array" %>
140
+ <% else %>
141
+ <%= value[:type].to_s.downcase %>
142
+ <% end %>
134
143
  <% end %>
135
144
  <% end %>
136
145
  </td>
137
146
  <td>
147
+ <% if key =~ /^padding|^margin/ %>
148
+ <% padding_margin_values.each do |item| %>
149
+ <%= pb_rails("card", props: {
150
+ flex_direction: "row",
151
+ classname: "card",
152
+ padding: "xxs",
153
+ background: "light",
154
+ border_none: true,
155
+ border_radius: "sm",
156
+ margin: "xxs"
157
+ }) do %>
158
+ <%= pb_rails("body", props: {
159
+ classname: "kearning"
160
+ }) do %>
161
+ <%= item %>
162
+ <% end %>
163
+ <% end %>
164
+ <% end %>
165
+ <% else %>
138
166
  <% if value[:values].present? %>
139
167
  <% value[:values].each do |item| %>
140
168
  <% if item != nil %>
@@ -156,22 +184,6 @@
156
184
  <% end %>
157
185
  <% end %>
158
186
  <% 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
187
  <% end %>
176
188
  </td>
177
189
  </tr>
@@ -13,6 +13,10 @@ module Playbook
13
13
  local
14
14
  end
15
15
 
16
+ def padding_margin_values
17
+ %w[none xxs xs sm md lg xl]
18
+ end
19
+
16
20
  def local_prop_data
17
21
  local_props = {}
18
22
 
@@ -27,22 +31,106 @@ module Playbook
27
31
  end
28
32
 
29
33
  def kit_global_props
30
- global = []
34
+ global_props = {}
35
+ global_prop_names = []
36
+ global_prop_values = {}
37
+ global_props_with_values = {}
38
+ global_props_without_values = []
39
+ parent_child_object = {}
40
+ updated_global_props_with_values = {}
41
+
42
+ # extracts the modules from kit_base.rb, which is where we import all the global props that we inject into every rails kit
43
+ pb_module = Playbook::KitBase.included_modules.select { |mod| mod.to_s.include?("Playbook::") }
44
+
45
+ # loops through the kits and extracts each prop with its values and pushes that to the global_props hash
31
46
  kit_props.each do |key, value|
32
- value.kit == Playbook::KitBase && global.push({ key: key, value: value })
47
+ value.kit == Playbook::KitBase && global_props[key.to_sym] = value
48
+ end
49
+
50
+ # loops through the global_props and extracts the name of each prop and pushes that to global_prop_names array
51
+ global_props.each do |name, _values|
52
+ global_prop_names.push(name)
53
+ end
54
+
55
+ # Loops through each module in pb_module and searches for methods that end in _values, as these methods hold the values for each prop
56
+ # we then save the values and type and push that to the values hash as a key value pair
57
+ pb_module.each do |mod|
58
+ mod.instance_methods.each do |method_name|
59
+ next unless method_name.to_s.end_with?("_values")
60
+
61
+ value = send(method_name)
62
+ type = value.class
63
+ global_prop_values[method_name.to_s.chomp("_values").to_sym] = { "type": type, "values": value }
64
+ end
65
+ end
66
+
67
+ # loops through the global_prop_names array
68
+ # then loops through the global_prop_values hash and extracts the values that have the same name found in global_prop_names
69
+ # this loop helps ensure only global props values are actually extracted, as there could be other methods that end in _values in the modules we are iterating over
70
+ # these verified global props with values are then pushed to the global_props_with_values hash
71
+ global_prop_names.each do |name, _prop|
72
+ global_prop_values.each do |key, value|
73
+ global_props_with_values[key] = value if key == name
74
+ end
75
+ end
76
+
77
+ # now we grab all the global_prop_names that do not have a matching key in global_prop_values.
78
+ # This gives us any global prop that did not have any predefined value. like classname and dark
79
+ global_props_without_values = global_prop_names - global_prop_values.keys
80
+
81
+ # Loops through each module in pb_module and searches for methods that end in _options, as these methods hold all the props in the module
82
+ # save the prop names prop values and and parent module name to parent_child_object hash
83
+ # this is a comprehensive list of all parent module and children props for edge cases like spacing.rb, that is not named after the props it represents
84
+ pb_module.each do |mod|
85
+ mod.instance_methods.each do |method_name|
86
+ next unless method_name.to_s.end_with?("_options")
87
+
88
+ props = send(method_name)
89
+ parent = mod.to_s.split("::").last
90
+ values = send("#{parent.underscore}_values")
91
+ parent_child_object[parent] = { "props": props, "values": values }
92
+ end
93
+ end
94
+
95
+ # loops through each object in parent_child_object and extracts its children (props and values)
96
+ # loops through each child and extracts the individual props
97
+ # Checks if the props match any of the props in global_props_without_values
98
+ # if it does, then we push that prop to global_props_with_values hash
99
+ # This extracts the props in the spacing.rb file and any file that is not named after the props it represents
100
+ parent_child_object.each do |_parent, children|
101
+ children.each do |_child, props|
102
+ props.each do |prop, _value|
103
+ type = children[:values].class
104
+ values = children[:values]
105
+ global_props_with_values[prop] = { "type": type, "values": values } if global_props_without_values.include?(prop)
106
+ end
107
+ end
108
+ end
109
+
110
+ # loop through the global_props hash and the global_props_with_values hash.
111
+ # extract the props from global_props that are not found in global_props_with_values into updated_global_props_with_values
112
+ # This is the last piece that grabs the global props that did not have values at all, like classname and dark, and adds it to our hash
113
+ global_props.each do |prop, value|
114
+ unless global_props_with_values.include?(prop)
115
+ type = value.class.to_s.split("::").last
116
+ updated_global_props_with_values[prop] = { "type": type }
117
+ end
33
118
  end
34
- global
119
+
120
+ # Merge updated_global_props_with_values into global_props_with_values
121
+ # global_props_with_values will now hold all the global props thier values and type
122
+ global_props_with_values.merge!(updated_global_props_with_values)
123
+
124
+ global_props_with_values
35
125
  end
36
126
 
37
127
  def global_prop_data
38
128
  global_props = {}
39
129
 
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 }
130
+ kit_global_props.each do |key, value|
131
+ type = value[:type]
132
+ values = value[:values]
133
+ global_props[key] = { "type": type, "values": values }
46
134
  end
47
135
  global_props
48
136
  end
@@ -10,7 +10,7 @@
10
10
 
11
11
  <% if show_code %>
12
12
  <div class="markdown pb--kit-example-markdown <%= dark ? "dark" : "" %>">
13
- <%= markdown(description) %>
13
+ <%= render_markdown(description) %>
14
14
  </div>
15
15
  <div id="code-wrapper">
16
16
  <div class="pb--codeControls">
@@ -23,7 +23,7 @@ module Playbook
23
23
  end
24
24
 
25
25
  def description
26
- @description ||= read_kit_file("_#{example_key}.md")
26
+ @description ||= read_kit_file("docs", "_#{example_key}.md")
27
27
  end
28
28
 
29
29
  def highlighter
@@ -33,11 +33,15 @@ 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}")
36
+ stringified_code = read_kit_file("docs", "_#{example_key}.#{extension}")
37
37
  sanitize_code(stringified_code)
38
38
  end
39
39
  end
40
40
 
41
+ def tsx_source
42
+ read_kit_file("", "_#{example_key}.tsx")
43
+ end
44
+
41
45
  private
42
46
 
43
47
  def sanitize_code(stringified_code)
@@ -53,11 +57,11 @@ module Playbook
53
57
  elsif type == "rails" && dark
54
58
  stringified_code = stringified_code.gsub("props: {", "props: {\n dark: true,")
55
59
  end
56
- stringified_code
60
+ stringified_code.gsub(" {...props}", "")
57
61
  end
58
62
 
59
- def read_kit_file(*args)
60
- path = ::Playbook.kit_path(kit, "docs", *args)
63
+ def read_kit_file(folder, *args)
64
+ path = ::Playbook.kit_path(kit, folder, *args)
61
65
  path.exist? ? path.read : ""
62
66
  end
63
67
  end
@@ -12,6 +12,7 @@ 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,
@@ -31,6 +32,7 @@ const Lightbox = (props: LightboxType): React.ReactNode => {
31
32
  aria = {},
32
33
  children,
33
34
  className,
35
+ currentPhotoIndex,
34
36
  data = {},
35
37
  description,
36
38
  id = '',
@@ -50,6 +52,12 @@ const Lightbox = (props: LightboxType): React.ReactNode => {
50
52
  onChange(activePhoto)
51
53
  },[activePhoto])
52
54
 
55
+ useEffect(() => {
56
+ currentPhotoIndex !== undefined && currentPhotoIndex !== null && (
57
+ setActivePhoto(currentPhotoIndex)
58
+ )
59
+ },[currentPhotoIndex])
60
+
53
61
  const ariaProps = buildAriaProps(aria)
54
62
  const dataProps = buildDataProps(data)
55
63
  const classes = classnames(
@@ -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.
@@ -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'
@@ -2,7 +2,7 @@ import React from 'react'
2
2
  import classnames from 'classnames'
3
3
 
4
4
  import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
5
- import { globalProps } from '../utilities/globalProps'
5
+ import { globalProps, GlobalProps } from '../utilities/globalProps'
6
6
 
7
7
  import Icon from '../pb_icon/_icon'
8
8
  import Image from '../pb_image/_image'
@@ -13,15 +13,15 @@ type NavItemProps = {
13
13
  children?: React.ReactNode[] | React.ReactNode,
14
14
  className?: string,
15
15
  data?: object,
16
- iconLeft: string,
17
- iconRight: string,
16
+ iconLeft?: string,
17
+ iconRight?: string,
18
18
  id?: string,
19
- imageUrl: string,
20
- link: string,
19
+ imageUrl?: string,
20
+ link?: string,
21
21
  onClick?: React.MouseEventHandler<HTMLElement>,
22
22
  target?: '_blank' | '_self' | '_parent' | '_top',
23
23
  text: string,
24
- }
24
+ } & GlobalProps
25
25
 
26
26
  const NavItem = (props: NavItemProps) => {
27
27
  const {
@@ -2,7 +2,7 @@ import React from 'react'
2
2
  import classnames from 'classnames'
3
3
 
4
4
  import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
5
- import { globalProps } from '../utilities/globalProps'
5
+ import { globalProps, GlobalProps } from '../utilities/globalProps'
6
6
 
7
7
  import Caption from '../pb_caption/_caption'
8
8
 
@@ -17,10 +17,10 @@ type NavProps = {
17
17
  id?: string,
18
18
  onClick?: React.MouseEventHandler<HTMLElement>,
19
19
  orientation?: "vertical" | "horizontal",
20
- link: string,
21
- title: string,
20
+ link?: string,
21
+ title?: string,
22
22
  variant?: "normal" | "subtle",
23
- }
23
+ } & GlobalProps
24
24
 
25
25
  const Nav = (props: NavProps) => {
26
26
  const {
@@ -0,0 +1,49 @@
1
+ import React from "react";
2
+
3
+ import Icon from "../../pb_icon/_icon";
4
+ import Flex from "../../pb_flex/_flex";
5
+ import Tooltip from "../../pb_tooltip/_tooltip";
6
+
7
+
8
+ type EditorButtonProps = {
9
+ classname?: string,
10
+ onclick?: () => {} | void,
11
+ icon?: string;
12
+ text?: string;
13
+ disable?: boolean
14
+ };
15
+
16
+ const EditorButton = ({
17
+ classname,
18
+ disable,
19
+ onclick,
20
+ icon,
21
+ text,
22
+ }: EditorButtonProps) => {
23
+ return (
24
+ <Tooltip
25
+ delay={{
26
+ open: 2000
27
+ }}
28
+ interaction
29
+ placement="top"
30
+ text={text}
31
+ >
32
+ <button
33
+ className={classname}
34
+ onClick={onclick}
35
+ disabled={disable}
36
+ >
37
+ <Flex
38
+ align="center"
39
+ className="toolbar_button_icon"
40
+ justify="center"
41
+ >
42
+ <Icon icon={icon} size="lg" />
43
+ </Flex>
44
+ </button>
45
+ </Tooltip>
46
+ );
47
+ };
48
+
49
+ export default EditorButton
@@ -0,0 +1,9 @@
1
+ export type ToolbarTypes = {
2
+ node?: string,
3
+ icon?: string,
4
+ isActive?: string | null,
5
+ text?: string,
6
+ onclick?: () => {}
7
+ classname?: string
8
+ disable?: boolean
9
+ }