playbook_ui 12.23.0.pre.alpha.movemarkdown708 → 12.23.0.pre.alpha.movemarkdown712
Sign up to get free protection for your applications and to get access to all the features.
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
|