playbook_ui 12.23.0.pre.alpha.movemarkdown708 → 12.23.0.pre.alpha.movemarkdown712
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 3dbab577256e1152c3136b7d6ff83b1db17ed07b4114856021ce64a3cc0836f5
|
|
4
|
+
data.tar.gz: 5c6f9c88fc36ca8be118f3520ad303614606de1edcad7ccfaf547a8522395195
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 442b43fc50439f08f9aeee14d0d968ab62e73196d888941efb909517a0430a43f848f75302773ac6d6230eaabb5d64dfcf67aa2dbc066b65e7d343b4321013a6
|
|
7
|
+
data.tar.gz: d61d86911c09b4361fda12387bc57fdc888032a19c8f158e467f05664147aed082b0cced93a3139292255faeac2fb6cb97589c20d9e3b4738ea943b189377bc7
|
|
@@ -0,0 +1,74 @@
|
|
|
1
|
+
<% example_html = ERB.new(example).result %>
|
|
2
|
+
|
|
3
|
+
<%= pb_rails("card", props: { classname: "pb--doc", padding: "none", dark: dark }) do %>
|
|
4
|
+
<div class="pb--kit-example">
|
|
5
|
+
<%= pb_rails("caption", props: { text: example_title, dark: dark }) %>
|
|
6
|
+
<br />
|
|
7
|
+
<%= example %>
|
|
8
|
+
<br>
|
|
9
|
+
</div>
|
|
10
|
+
|
|
11
|
+
<% if show_code %>
|
|
12
|
+
<div class="markdown pb--kit-example-markdown <%= dark ? "dark" : "" %>">
|
|
13
|
+
<%= render_markdown(description) %>
|
|
14
|
+
</div>
|
|
15
|
+
<div id="code-wrapper">
|
|
16
|
+
<div class="pb--codeControls">
|
|
17
|
+
<ul>
|
|
18
|
+
<% hide_button = type == "rails" ? 'flex' : 'none' %>
|
|
19
|
+
<li>
|
|
20
|
+
<%= pb_rails("button", props: { id:"copy-html-#{example_key}", icon: "copy", text: "Copy HTML", variant: "link", size: "sm", display: hide_button }) %>
|
|
21
|
+
</li>
|
|
22
|
+
<li>
|
|
23
|
+
<%= pb_rails("button", props: { icon: "code", id:"toggle-open-opened", text: "Close Code", variant: "link", size: "sm", display: "none" }) %>
|
|
24
|
+
<%= pb_rails("button", props: { icon: "code", id:"toggle-open-closed", text: "Show Code", variant: "link", size: "sm" }) %>
|
|
25
|
+
</li>
|
|
26
|
+
</ul>
|
|
27
|
+
</div>
|
|
28
|
+
<div class="pb--codeCopy" data-action="toggle" data-togglable="code_example" style="display: none" >
|
|
29
|
+
<%= pb_rails("section_separator", props: { dark: dark })%>
|
|
30
|
+
<a href="#" style="padding: 16px 0px 22px 0px;" id="copy-code-<%= example_key %>" class="pb--copy-code" onclick="copyOnClick(`<%= source %>`, `copy-code-<%= example_key %>`)">
|
|
31
|
+
<%= pb_rails("button", props: { id: "copy-button-#{example_key}", text: "Copy Code", size: "sm", icon: "copy" }) %>
|
|
32
|
+
</a>
|
|
33
|
+
<pre class="highlight"><%= raw rouge(source, highlighter) %></pre>
|
|
34
|
+
</div>
|
|
35
|
+
<%= pb_rails("popover", props: {
|
|
36
|
+
trigger_element_id: "copy-button-#{example_key}",
|
|
37
|
+
tooltip_id: "tooltip-#{example_key}",
|
|
38
|
+
offset: true,
|
|
39
|
+
position: "bottom"
|
|
40
|
+
}) do %>
|
|
41
|
+
Code Copied
|
|
42
|
+
<% end %>
|
|
43
|
+
</div>
|
|
44
|
+
<% end %>
|
|
45
|
+
<% end %>
|
|
46
|
+
|
|
47
|
+
<script>
|
|
48
|
+
var htmlButton = document.getElementById('<%= "copy-html-#{example_key}" %>')
|
|
49
|
+
if (htmlButton) {
|
|
50
|
+
htmlButton.addEventListener('click', function() {
|
|
51
|
+
var tempElement = document.createElement('div')
|
|
52
|
+
tempElement.innerHTML = `<%= example_html %>`
|
|
53
|
+
var decodedString = tempElement.textContent || tempElement.innerText;
|
|
54
|
+
copyContent(decodedString)
|
|
55
|
+
})
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
var button = document.getElementById('<%= "copy-button-#{example_key}" %>')
|
|
59
|
+
if (button) {
|
|
60
|
+
button.addEventListener('click', function() {
|
|
61
|
+
var tempElement = document.createElement('div')
|
|
62
|
+
tempElement.innerHTML = `<%= source %>`
|
|
63
|
+
var decodedString = tempElement.textContent || tempElement.innerText;
|
|
64
|
+
copyContent(decodedString)
|
|
65
|
+
var fadeAwayDiv = document.getElementById("<%= "tooltip-#{example_key}" %>")
|
|
66
|
+
setTimeout(function() {
|
|
67
|
+
fadeAwayDiv.classList.remove('show')
|
|
68
|
+
}, 3000)
|
|
69
|
+
setTimeout(function() {
|
|
70
|
+
fadeAwayDiv.classList.add('hide')
|
|
71
|
+
}, 3001)
|
|
72
|
+
})
|
|
73
|
+
}
|
|
74
|
+
</script>
|
|
@@ -0,0 +1,69 @@
|
|
|
1
|
+
# frozen_string_literal: true
|
|
2
|
+
|
|
3
|
+
# rubocop:disable Style/CaseLikeIf
|
|
4
|
+
|
|
5
|
+
module Playbook
|
|
6
|
+
module PbDocs
|
|
7
|
+
class KitExample < Playbook::KitBase
|
|
8
|
+
prop :kit, type: Playbook::Props::String, required: true
|
|
9
|
+
prop :example_title, type: Playbook::Props::String, required: true
|
|
10
|
+
prop :example_key, type: Playbook::Props::String, required: true
|
|
11
|
+
prop :show_code, type: Playbook::Props::Boolean, default: true
|
|
12
|
+
prop :type, type: Playbook::Props::Enum, values: %w[rails react], default: "rails"
|
|
13
|
+
prop :dark, type: Playbook::Props::Boolean, default: false
|
|
14
|
+
|
|
15
|
+
def example
|
|
16
|
+
if type == "rails"
|
|
17
|
+
render inline: source
|
|
18
|
+
elsif type == "react"
|
|
19
|
+
react_component example_key.camelize, { dark: dark }
|
|
20
|
+
end
|
|
21
|
+
end
|
|
22
|
+
|
|
23
|
+
def description
|
|
24
|
+
@description ||= read_kit_file("docs", "_#{example_key}.md")
|
|
25
|
+
end
|
|
26
|
+
|
|
27
|
+
def highlighter
|
|
28
|
+
type.eql?("rails") ? "erb" : "react"
|
|
29
|
+
end
|
|
30
|
+
|
|
31
|
+
def source
|
|
32
|
+
@source ||= begin
|
|
33
|
+
extension = type == "react" ? "jsx" : "html.erb"
|
|
34
|
+
stringified_code = read_kit_file("docs", "_#{example_key}.#{extension}")
|
|
35
|
+
sanitize_code(stringified_code)
|
|
36
|
+
end
|
|
37
|
+
end
|
|
38
|
+
|
|
39
|
+
def tsx_source
|
|
40
|
+
read_kit_file("", "_#{example_key}.tsx")
|
|
41
|
+
end
|
|
42
|
+
|
|
43
|
+
private
|
|
44
|
+
|
|
45
|
+
def sanitize_code(stringified_code)
|
|
46
|
+
stringified_code = stringified_code.gsub('"../.."', '"playbook-ui"')
|
|
47
|
+
.gsub('"../../"', '"playbook-ui"')
|
|
48
|
+
.gsub("'../../'", "'playbook-ui'")
|
|
49
|
+
.gsub("'../..'", "'playbook-ui'")
|
|
50
|
+
.gsub(%r{from "../.*}, "from 'playbook-ui'")
|
|
51
|
+
.gsub(%r{from '../.*}, "from 'playbook-ui'")
|
|
52
|
+
stringified_code = dark ? stringified_code.gsub("{...props}", "dark") : stringified_code.gsub(/\s*{...props}\s*\n/, "\n")
|
|
53
|
+
if stringified_code.include?("props: { ")
|
|
54
|
+
stringified_code = stringified_code.gsub("props: {", "props: {dark: true,") if type == "rails" && dark
|
|
55
|
+
elsif type == "rails" && dark
|
|
56
|
+
stringified_code = stringified_code.gsub("props: {", "props: {\n dark: true,")
|
|
57
|
+
end
|
|
58
|
+
stringified_code.gsub(" {...props}", "")
|
|
59
|
+
end
|
|
60
|
+
|
|
61
|
+
def read_kit_file(folder, *args)
|
|
62
|
+
path = ::Playbook.kit_path(kit, folder, *args)
|
|
63
|
+
path.exist? ? path.read : ""
|
|
64
|
+
end
|
|
65
|
+
end
|
|
66
|
+
end
|
|
67
|
+
end
|
|
68
|
+
|
|
69
|
+
# rubocop:enable Style/CaseLikeIf
|
data/lib/playbook/version.rb
CHANGED
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.23.0.pre.alpha.
|
|
4
|
+
version: 12.23.0.pre.alpha.movemarkdown712
|
|
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-05-
|
|
12
|
+
date: 2023-05-25 00:00:00.000000000 Z
|
|
13
13
|
dependencies:
|
|
14
14
|
- !ruby/object:Gem::Dependency
|
|
15
15
|
name: actionpack
|
|
@@ -878,6 +878,8 @@ files:
|
|
|
878
878
|
- app/pb_kits/playbook/pb_distribution_bar/docs/_distribution_bar_default.jsx
|
|
879
879
|
- app/pb_kits/playbook/pb_distribution_bar/docs/example.yml
|
|
880
880
|
- app/pb_kits/playbook/pb_distribution_bar/docs/index.js
|
|
881
|
+
- app/pb_kits/playbook/pb_docs/kit_example.html.erb
|
|
882
|
+
- app/pb_kits/playbook/pb_docs/kit_example.rb
|
|
881
883
|
- app/pb_kits/playbook/pb_enhanced_element/element_observer.ts
|
|
882
884
|
- app/pb_kits/playbook/pb_enhanced_element/index.ts
|
|
883
885
|
- app/pb_kits/playbook/pb_file_upload/_file_upload.scss
|