playbook_ui 12.17.0 → 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 (57) 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 +3 -0
  10. data/app/pb_kits/playbook/pb_lightbox/docs/_lightbox_compound_component.jsx +5 -1
  11. data/app/pb_kits/playbook/pb_lightbox/docs/_lightbox_current_photo.jsx +1 -1
  12. data/app/pb_kits/playbook/pb_lightbox/docs/_lightbox_custom_header.jsx +5 -1
  13. data/app/pb_kits/playbook/pb_lightbox/docs/_lightbox_default.jsx +5 -1
  14. data/app/pb_kits/playbook/pb_lightbox/docs/_lightbox_default.md +1 -1
  15. data/app/pb_kits/playbook/pb_lightbox/docs/_lightbox_multiple.jsx +5 -1
  16. data/app/pb_kits/playbook/pb_lightbox/lightbox.test.jsx +5 -1
  17. data/app/pb_kits/playbook/pb_nav/_item.tsx +6 -6
  18. data/app/pb_kits/playbook/pb_nav/_nav.tsx +4 -4
  19. data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/EditorButton.tsx +49 -0
  20. data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/EditorTypes.ts +9 -0
  21. data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/Toolbar.tsx +62 -0
  22. data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/ToolbarDropdown.tsx +139 -0
  23. data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/ToolbarHistory.tsx +45 -0
  24. data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/ToolbarNodes.tsx +59 -0
  25. data/app/pb_kits/playbook/pb_rich_text_editor/_rich_text_editor.scss +1 -1
  26. data/app/pb_kits/playbook/pb_rich_text_editor/_rich_text_editor.tsx +28 -12
  27. data/app/pb_kits/playbook/pb_rich_text_editor/_tiptap_styles.scss +231 -0
  28. data/app/pb_kits/playbook/pb_rich_text_editor/docs/_description.md +1 -0
  29. data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_default.jsx +36 -0
  30. data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_default.md +4 -0
  31. data/app/pb_kits/playbook/pb_rich_text_editor/docs/example.yml +1 -0
  32. data/app/pb_kits/playbook/pb_rich_text_editor/docs/index.js +1 -0
  33. data/app/pb_kits/playbook/pb_time_range_inline/_time_range_inline.tsx +185 -0
  34. data/app/pb_kits/playbook/pb_time_range_inline/time_range_inline.test.js +85 -0
  35. data/app/pb_kits/playbook/pb_title/_title.tsx +1 -1
  36. data/app/pb_kits/playbook/pb_title_detail/_title_detail.tsx +45 -0
  37. data/app/pb_kits/playbook/pb_title_detail/title_detail.test.js +71 -0
  38. data/app/pb_kits/playbook/pb_toggle/{_toggle.jsx → _toggle.tsx} +20 -22
  39. data/app/pb_kits/playbook/pb_toggle/toggle.test.js +67 -0
  40. data/app/pb_kits/playbook/pb_tooltip/_tooltip.scss +11 -6
  41. data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_default.html.erb +4 -4
  42. data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_with_icon_circle.html.erb +1 -2
  43. data/app/pb_kits/playbook/pb_tooltip/docs/example.yml +0 -1
  44. data/app/pb_kits/playbook/pb_user/_user.tsx +1 -1
  45. data/app/pb_kits/playbook/tokens/_colors.scss +5 -3
  46. data/lib/playbook/markdown/helper.rb +50 -71
  47. data/lib/playbook/markdown.rb +0 -1
  48. data/lib/playbook/number_spacing.rb +10 -10
  49. data/lib/playbook/position.rb +10 -10
  50. data/lib/playbook/spacing.rb +10 -10
  51. data/lib/playbook/version.rb +2 -2
  52. data/lib/playbook/z_index.rb +10 -10
  53. metadata +25 -14
  54. data/app/pb_kits/playbook/pb_time_range_inline/_time_range_inline.jsx +0 -172
  55. data/app/pb_kits/playbook/pb_title_detail/_title_detail.jsx +0 -44
  56. data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_white.html.erb +0 -9
  57. data/lib/playbook/markdown/template_handler.rb +0 -47
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: cd6838e0560cc93f906cf9adc9ca3b2ddf760b04eb217a758de88cf4d55f5921
4
- data.tar.gz: 7fe4be39b88ef061b65beb11d35680d3faf0ffe9eea5696f4cffdb0385eff6a5
3
+ metadata.gz: df71e45e88ac711bf2e8d7a0a06a9074f6580abac8fd1be01d821f9c62251f24
4
+ data.tar.gz: c17c7ae38668ef45dcfbd38ea53483fd7190b5f5401183ab73b40e8c0c882bf8
5
5
  SHA512:
6
- metadata.gz: 50fb6671787a4142632f88b003d143dc5731ca71e06e8c3cbe94ecf6e4650c803466e79365047133bd9eb43049c0f0731b504ee8d013c73ab03f0cca7794dc46
7
- data.tar.gz: 7965856ed4ff7d6c7197f5bdaead0960549c67673c94da1f659b4d1a65cb2c179c0fa8800900c6323675afb823e06a5ab24d1735d58a7d8fadc28b9cc843e4ac
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
@@ -47,12 +47,15 @@ const Lightbox = (props: LightboxType): React.ReactNode => {
47
47
  } = props
48
48
 
49
49
  const [activePhoto, setActivePhoto] = useState(initialPhoto)
50
+
50
51
  useEffect(() => {
51
52
  onChange(activePhoto)
52
53
  },[activePhoto])
53
54
 
54
55
  useEffect(() => {
56
+ currentPhotoIndex !== undefined && currentPhotoIndex !== null && (
55
57
  setActivePhoto(currentPhotoIndex)
58
+ )
56
59
  },[currentPhotoIndex])
57
60
 
58
61
  const ariaProps = buildAriaProps(aria)
@@ -10,14 +10,17 @@ 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)
13
14
  const [showLightbox, toggleShowLightbox] = useState(false)
14
15
 
15
16
  const handleCloseLightbox = () => {
16
17
  toggleShowLightbox(!showLightbox)
18
+ setSelectedPhoto(null)
17
19
  }
18
20
 
19
- const onPhotoClick = () => {
21
+ const onPhotoClick = (photo) => {
20
22
  toggleShowLightbox(!showLightbox)
23
+ setSelectedPhoto(photo)
21
24
  }
22
25
 
23
26
  const exampleStyles = {
@@ -31,6 +34,7 @@ const LightboxCompoundComponent = (props) => {
31
34
  {showLightbox ? (
32
35
  <Lightbox
33
36
  description='Description Content Goes Here.'
37
+ initialPhoto={selectedPhoto}
34
38
  onClose={handleCloseLightbox}
35
39
  photos={photos}
36
40
  title='Windows, Sidings, & Gutters'
@@ -118,4 +118,4 @@ const LightboxCurrentPhoto = (props) => {
118
118
  )
119
119
  }
120
120
 
121
- export default LightboxCurrentPhoto
121
+ export default LightboxCurrentPhoto
@@ -10,14 +10,17 @@ 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);
13
14
  const [showLightbox, toggleShowLightbox] = useState(false);
14
15
 
15
16
  const handleCloseLightbox = () => {
16
17
  toggleShowLightbox(!showLightbox);
18
+ setSelectedPhoto(null);
17
19
  };
18
20
 
19
- const onPhotoClick = () => {
21
+ const onPhotoClick = (photo) => {
20
22
  toggleShowLightbox(!showLightbox);
23
+ setSelectedPhoto(photo);
21
24
  };
22
25
 
23
26
  const exampleStyles = {
@@ -52,6 +55,7 @@ const LightboxCustomHeader = (props) => {
52
55
  {showLightbox ? (
53
56
  <Lightbox
54
57
  description={customDescription}
58
+ initialPhoto={selectedPhoto}
55
59
  navRight="All Photos"
56
60
  onClickRight={()=> alert("Clicked!")}
57
61
  onClose={handleCloseLightbox}
@@ -8,14 +8,17 @@ 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)
11
12
  const [showLightbox, toggleShowLightbox] = useState(false)
12
13
 
13
14
  const handleCloseLightbox = () => {
14
15
  toggleShowLightbox(!showLightbox)
16
+ setSelectedPhoto(null)
15
17
  }
16
18
 
17
- const onPhotoClick = () => {
19
+ const onPhotoClick = (photoIndex) => {
18
20
  toggleShowLightbox(!showLightbox)
21
+ setSelectedPhoto(photoIndex)
19
22
  }
20
23
 
21
24
  return (
@@ -24,6 +27,7 @@ const LightboxDefault = (props) => {
24
27
  {showLightbox ? (
25
28
  <Lightbox
26
29
  icon="times"
30
+ initialPhoto={selectedPhoto}
27
31
  onClose={handleCloseLightbox}
28
32
  photos={photos}
29
33
  {...props}
@@ -1 +1 @@
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).
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).
@@ -29,14 +29,17 @@ 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)
32
33
  const [light, toggleLight] = useState(false)
33
34
 
34
35
  const handleCloseLightbox = () => {
35
36
  toggleLight(!light)
37
+ setSelectedPhoto(null)
36
38
  }
37
39
 
38
- const onPhotoClick = () => {
40
+ const onPhotoClick = (photo) => {
39
41
  toggleLight(!light)
42
+ setSelectedPhoto(photo)
40
43
  }
41
44
 
42
45
  const exampleStyles = {
@@ -49,6 +52,7 @@ const LightboxMultiple = (props) => {
49
52
  {light ? (
50
53
  <Lightbox
51
54
  icon="times"
55
+ initialPhoto={selectedPhoto}
52
56
  onChange={(index) => console.log(`current photo index: ${index}`)}
53
57
  onClose={handleCloseLightbox}
54
58
  photos={photos}
@@ -18,6 +18,7 @@ test('Kit renders', () => {
18
18
  data={{ testid: testId }}
19
19
  icon="close"
20
20
  id="test1"
21
+ initialPhoto={1}
21
22
  onClose={() => {}}
22
23
  photos={TEST_PHOTOS}
23
24
  />
@@ -34,6 +35,7 @@ test('Shows selected images', () => {
34
35
  data={{ testid: testId }}
35
36
  icon="close"
36
37
  id="test1"
38
+ initialPhoto={1}
37
39
  onClose={() => {}}
38
40
  photos={TEST_PHOTOS}
39
41
  />
@@ -41,7 +43,7 @@ test('Shows selected images', () => {
41
43
  const kit = screen.getByTestId(testId)
42
44
  const slide = kit.getElementsByClassName('Slide')[0]
43
45
  const image = slide.getElementsByTagName('img')[0]
44
- expect(image).toHaveAttribute('src', TEST_PHOTOS[0])
46
+ expect(image).toHaveAttribute('src', TEST_PHOTOS[1])
45
47
 
46
48
  const thumbnails = kit.getElementsByClassName('Thumbnail')
47
49
 
@@ -75,6 +77,7 @@ test('Closes on escape key', async () => {
75
77
  data={{ testid: testId }}
76
78
  icon="close"
77
79
  id="test1"
80
+ initialPhoto={0}
78
81
  onClose={mockClose}
79
82
  photos={TEST_PHOTOS}
80
83
  />
@@ -103,6 +106,7 @@ test('Closes on close button', async () => {
103
106
  data={{ testid: testId }}
104
107
  icon="close"
105
108
  id="test1"
109
+ initialPhoto={0}
106
110
  onClose={mockClose}
107
111
  photos={TEST_PHOTOS}
108
112
  />
@@ -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
+ }