playbook_ui 4.5.2 → 4.6.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/app/helpers/playbook/pb_sample_helper.rb +37 -0
- data/app/pb_kits/playbook/_playbook.scss +1 -0
- data/app/pb_kits/playbook/config/_kit_ui.html.erb +3 -3
- data/app/pb_kits/playbook/data/menu.yml +1 -1
- data/app/pb_kits/playbook/index.js +2 -0
- data/app/pb_kits/playbook/packs/application.js +44 -4
- data/app/pb_kits/playbook/packs/examples.js +2 -6
- data/app/pb_kits/playbook/packs/samples.js +1 -36
- data/app/pb_kits/playbook/packs/site_styles/_samples.scss +3 -2
- data/app/pb_kits/playbook/packs/site_styles/docs/_kit_doc.scss +3 -3
- data/app/pb_kits/playbook/pb_avatar/docs/_avatar_monogram.md +2 -0
- data/app/pb_kits/playbook/pb_avatar/docs/_avatar_status.md +2 -0
- data/app/pb_kits/playbook/pb_avatar/docs/_description.md +2 -0
- data/app/pb_kits/playbook/pb_avatar/docs/_footer.md +3 -0
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_default.html.erb +0 -2
- data/app/pb_kits/playbook/pb_bar_graph/docs/_description.md +1 -0
- data/app/pb_kits/playbook/pb_body/docs/_description.md +2 -0
- data/app/pb_kits/playbook/pb_body/docs/_footer.md +2 -0
- data/app/pb_kits/playbook/pb_button/docs/_button_default.md +1 -0
- data/app/pb_kits/playbook/pb_button/docs/_button_full_width.md +1 -0
- data/app/pb_kits/playbook/pb_button/docs/_button_loading.md +1 -0
- data/app/pb_kits/playbook/pb_button/docs/_footer.md +2 -0
- data/app/pb_kits/playbook/pb_caption/docs/_description.md +1 -0
- data/app/pb_kits/playbook/pb_caption/docs/_footer.md +2 -0
- data/app/pb_kits/playbook/pb_checkbox/docs/_description.md +1 -0
- data/app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_default.html.erb +1 -1
- data/app/pb_kits/playbook/pb_circle_icon_button/docs/_description.md +1 -0
- data/app/pb_kits/playbook/pb_circle_icon_button/docs/_footer.md +2 -0
- data/app/pb_kits/playbook/pb_contact/docs/_description.md +1 -0
- data/app/pb_kits/playbook/pb_currency/docs/_description.md +2 -0
- data/app/pb_kits/playbook/pb_dashboard_value/docs/_description.md +1 -0
- data/app/pb_kits/playbook/pb_date/docs/_description.md +1 -0
- data/app/pb_kits/playbook/pb_date_range_inline/docs/_description.md +1 -0
- data/app/pb_kits/playbook/pb_date_stacked/docs/_description.md +1 -0
- data/app/pb_kits/playbook/pb_date_stacked/docs/_footer.md +2 -0
- data/app/pb_kits/playbook/pb_date_year_stacked/docs/_date_year_stacked_default.md +1 -0
- data/app/pb_kits/playbook/pb_date_year_stacked/docs/_description.md +1 -0
- data/app/pb_kits/playbook/pb_date_year_stacked/docs/_footer.md +4 -0
- data/app/pb_kits/playbook/pb_distribution_bar/docs/_description.md +1 -0
- data/app/pb_kits/playbook/{pb_editor/_editor.html.erb → pb_filter/_filter.html.erb} +1 -1
- data/app/pb_kits/playbook/pb_filter/_filter.jsx +88 -0
- data/app/pb_kits/playbook/pb_filter/_filter.scss +82 -0
- data/app/pb_kits/playbook/pb_filter/docs/_filter_default.html.erb +45 -0
- data/app/pb_kits/playbook/pb_filter/docs/_filter_default.jsx +9 -0
- data/app/pb_kits/playbook/pb_filter/docs/_filter_single.html.erb +46 -0
- data/app/pb_kits/playbook/pb_filter/docs/example.yml +9 -0
- data/app/pb_kits/playbook/pb_filter/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_filter/filter.rb +34 -0
- data/app/pb_kits/playbook/pb_filter/templates/_default.html.erb +43 -0
- data/app/pb_kits/playbook/pb_filter/templates/_single.html.erb +42 -0
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_description.md +2 -0
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_multi_line.html.erb +1 -1
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_multi_line.md +2 -0
- data/app/pb_kits/playbook/pb_flex/docs/_description.md +1 -0
- data/app/pb_kits/playbook/pb_flex/docs/_flex_default.md +1 -0
- data/app/pb_kits/playbook/pb_flex/docs/_flex_inline.md +1 -0
- data/app/pb_kits/playbook/pb_form/docs/_description.md +10 -0
- data/app/pb_kits/playbook/pb_form/docs/_footer.md +2 -0
- data/app/pb_kits/playbook/pb_form/docs/_form_form_with_validate.md +1 -0
- data/app/pb_kits/playbook/pb_form/docs/_form_simple_form_validate.md +1 -0
- data/app/pb_kits/playbook/pb_hashtag/docs/_description.md +1 -0
- data/app/pb_kits/playbook/pb_hashtag/docs/_footer.md +2 -0
- data/app/pb_kits/playbook/pb_highlight/docs/_description.md +1 -0
- data/app/pb_kits/playbook/pb_highlight/docs/_footer.md +2 -0
- data/app/pb_kits/playbook/pb_home_address_street/docs/_description.md +1 -0
- data/app/pb_kits/playbook/pb_home_address_street/docs/_footer.md +2 -0
- data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_default.md +1 -0
- data/app/pb_kits/playbook/pb_icon/docs/_description.md +1 -0
- data/app/pb_kits/playbook/pb_icon/docs/_footer.md +2 -0
- data/app/pb_kits/playbook/pb_icon/docs/_icon_animate.md +1 -0
- data/app/pb_kits/playbook/pb_icon/docs/_icon_pull.md +1 -0
- data/app/pb_kits/playbook/pb_icon_circle/docs/_description.md +1 -0
- data/app/pb_kits/playbook/pb_icon_circle/docs/_footer.md +2 -0
- data/app/pb_kits/playbook/pb_icon_value/docs/_description.md +1 -0
- data/app/pb_kits/playbook/pb_image/docs/_description.md +1 -0
- data/app/pb_kits/playbook/pb_label_pill/docs/_description.md +1 -0
- data/app/pb_kits/playbook/pb_label_pill/docs/_footer.md +2 -0
- data/app/pb_kits/playbook/pb_label_pill/docs/_label_pill_default.md +1 -0
- data/app/pb_kits/playbook/pb_label_value/docs/_description.md +1 -0
- data/app/pb_kits/playbook/pb_label_value/docs/_footer.md +2 -0
- data/app/pb_kits/playbook/pb_label_value/docs/_label_value_default.md +1 -0
- data/app/pb_kits/playbook/pb_label_value/docs/index.html.erb +25 -0
- data/app/pb_kits/playbook/pb_layout/docs/_description.md +1 -0
- data/app/pb_kits/playbook/pb_legend/docs/_description.md +1 -0
- data/app/pb_kits/playbook/pb_legend/docs/_footer.md +2 -0
- data/app/pb_kits/playbook/pb_legend/docs/_legend_default.html.erb +1 -1
- data/app/pb_kits/playbook/pb_line_graph/docs/_description.md +1 -0
- data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_default.html.erb +0 -3
- data/app/pb_kits/playbook/pb_list/docs/_description.md +1 -0
- data/app/pb_kits/playbook/pb_loading_inline/docs/_description.md +1 -0
- data/app/pb_kits/playbook/pb_message/docs/_description.md +1 -0
- data/app/pb_kits/playbook/pb_message/docs/_footer.md +2 -0
- data/app/pb_kits/playbook/pb_message/docs/_message_default.md +1 -0
- data/app/pb_kits/playbook/pb_multiple_users/docs/_description.md +1 -0
- data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/_description.md +1 -0
- data/app/pb_kits/playbook/pb_nav/docs/_description.md +1 -0
- data/app/pb_kits/playbook/pb_online_status/docs/_description.md +1 -0
- data/app/pb_kits/playbook/pb_person/docs/_description.md +1 -0
- data/app/pb_kits/playbook/pb_person/docs/_footer.md +3 -0
- data/app/pb_kits/playbook/pb_person/docs/_person_default.md +1 -0
- data/app/pb_kits/playbook/pb_person_contact/docs/_description.md +1 -0
- data/app/pb_kits/playbook/pb_person_contact/docs/_footer.md +3 -0
- data/app/pb_kits/playbook/pb_pill/docs/_description.md +1 -0
- data/app/pb_kits/playbook/pb_popover/docs/_description.md +1 -0
- data/app/pb_kits/playbook/pb_progress_pills/docs/_description.md +1 -0
- data/app/pb_kits/playbook/pb_progress_simple/docs/_description.md +1 -0
- data/app/pb_kits/playbook/pb_progress_simple/docs/_footer.md +2 -0
- data/app/pb_kits/playbook/pb_radio/docs/_description.md +1 -0
- data/app/pb_kits/playbook/pb_radio/docs/_footer.md +2 -0
- data/app/pb_kits/playbook/pb_radio/docs/_radio_error.md +1 -0
- data/app/pb_kits/playbook/pb_section_separator/docs/_description.md +1 -3
- data/app/pb_kits/playbook/pb_section_separator/docs/_footer.md +1 -1
- data/app/pb_kits/playbook/pb_select/docs/_description.md +1 -0
- data/app/pb_kits/playbook/pb_select/docs/_footer.md +2 -0
- data/app/pb_kits/playbook/pb_select/docs/_select_error.md +1 -0
- data/app/pb_kits/playbook/pb_selectable_card/docs/_description.md +1 -0
- data/app/pb_kits/playbook/pb_selectable_card/docs/_footer.md +2 -0
- data/app/pb_kits/playbook/pb_selectable_card/docs/_selectable_card_block.md +1 -0
- data/app/pb_kits/playbook/pb_selectable_card/docs/_selectable_card_default.md +1 -0
- data/app/pb_kits/playbook/pb_selectable_card/docs/_selectable_card_single_select.md +2 -0
- data/app/pb_kits/playbook/pb_source/docs/_description.md +1 -0
- data/app/pb_kits/playbook/pb_star_rating/docs/_description.md +1 -0
- data/app/pb_kits/playbook/pb_stat_change/docs/_description.md +1 -0
- data/app/pb_kits/playbook/pb_stat_value/docs/_description.md +1 -0
- data/app/pb_kits/playbook/pb_stat_value/docs/_footer.md +2 -0
- data/app/pb_kits/playbook/pb_stat_value/docs/_stat_value_default.md +1 -0
- data/app/pb_kits/playbook/pb_table/docs/_description.md +1 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_lg.md +1 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_md.md +1 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_sm.md +1 -0
- data/app/pb_kits/playbook/pb_text_input/docs/_description.md +1 -0
- data/app/pb_kits/playbook/pb_text_input/docs/_footer.md +2 -0
- data/app/pb_kits/playbook/pb_text_input/docs/_text_input_error.md +1 -0
- data/app/pb_kits/playbook/pb_textarea/docs/_description.md +1 -0
- data/app/pb_kits/playbook/pb_textarea/docs/_footer.md +2 -0
- data/app/pb_kits/playbook/pb_textarea/docs/_textarea_error.md +1 -0
- data/app/pb_kits/playbook/pb_time/docs/_description.md +1 -0
- data/app/pb_kits/playbook/pb_time/docs/_footer.md +2 -0
- data/app/pb_kits/playbook/pb_time/docs/_time_default.md +1 -0
- data/app/pb_kits/playbook/pb_timestamp/docs/_description.md +1 -0
- data/app/pb_kits/playbook/pb_timestamp/docs/_footer.md +2 -0
- data/app/pb_kits/playbook/pb_timestamp/docs/_time_stamp_default.md +1 -0
- data/app/pb_kits/playbook/pb_title/docs/_description.md +2 -0
- data/app/pb_kits/playbook/pb_title_count/_title_count.jsx +33 -15
- data/app/pb_kits/playbook/pb_title_count/docs/_description.md +1 -0
- data/app/pb_kits/playbook/pb_title_count/docs/_footer.md +2 -0
- data/app/pb_kits/playbook/pb_title_count/docs/_title_count_default.jsx +12 -1
- data/app/pb_kits/playbook/pb_title_count/docs/_title_count_default.md +1 -0
- data/app/pb_kits/playbook/pb_title_detail/docs/_description.md +1 -0
- data/app/pb_kits/playbook/pb_title_detail/docs/_footer.md +2 -0
- data/app/pb_kits/playbook/pb_title_detail/docs/_title_detail_default.md +1 -0
- data/app/pb_kits/playbook/pb_toggle/docs/_description.md +1 -0
- data/app/pb_kits/playbook/pb_toggle/docs/_footer.md +3 -0
- data/app/pb_kits/playbook/pb_typeahead/_typeahead.scss +2 -2
- data/app/pb_kits/playbook/pb_typeahead/docs/_description.md +1 -0
- data/app/pb_kits/playbook/pb_typeahead/docs/_footer.md +2 -0
- data/app/pb_kits/playbook/pb_user/docs/_description.md +1 -0
- data/app/pb_kits/playbook/pb_user/docs/_footer.md +0 -0
- data/app/pb_kits/playbook/pb_user_badge/docs/_description.md +1 -0
- data/app/pb_kits/playbook/pb_user_badge/docs/_footer.md +2 -0
- data/app/pb_kits/playbook/pb_user_badge/docs/_user_badge_default.md +1 -0
- data/app/pb_kits/playbook/vendor.js +3 -0
- data/app/views/layouts/playbook/samples.html.erb +0 -17
- data/app/views/playbook/samples/dashboards/{dashboards.html.erb → index.html.erb} +17 -20
- data/app/views/playbook/samples/dashboards/index.jsx +130 -0
- data/app/views/playbook/samples/sample_show.html.erb +14 -3
- data/fonts/{fontawesome.min.js → fontawesome-min.js} +2 -2
- data/fonts/regular-min.js +5 -0
- data/lib/generators/kit/kit_generator.rb +0 -6
- data/lib/playbook/version.rb +1 -1
- metadata +147 -12
- data/app/pb_kits/playbook/kits/pb_flex.js +0 -4
- data/app/pb_kits/playbook/kits/pb_highlight.js +0 -4
- data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_text.md +0 -1
- data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_text_background.md +0 -1
- data/app/views/playbook/samples/dashboards/dashboards.jsx +0 -35
- data/fonts/regular.min.js +0 -5
- data/lib/generators/kit/templates/kit_pack.erb.tt +0 -4
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: cc46ba8ce92d2263208d00079341a83b7c74688f5078f3ae16751187489a1056
|
4
|
+
data.tar.gz: 1ee7762ae7364ef5e102733535f79ffbe28f1200e28222cd12a3b785695eba31
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: f0086b227a030c6fd5a462ec47793d6e01d3de679795f1a86668a4792281cc854127c1f3f9b4fc6f625b5879f24a15066fcda570685db9a88a62ddcc87f0e843
|
7
|
+
data.tar.gz: 7cb45ba37ca83179c4f343fff59f81ce42ec926ace562d42e483bcd065a740e4ed56766a3ed1ce5127dee06fc34c567a7adad833ab18b3e047325291918dbb48
|
@@ -15,5 +15,42 @@ module Playbook
|
|
15
15
|
@type = type
|
16
16
|
@sample = sample
|
17
17
|
end
|
18
|
+
|
19
|
+
def read_file(filename)
|
20
|
+
if File.file?(filename)
|
21
|
+
File.read(filename)
|
22
|
+
else
|
23
|
+
""
|
24
|
+
end
|
25
|
+
end
|
26
|
+
|
27
|
+
def get_raw_code(sample, type)
|
28
|
+
if type == "rails"
|
29
|
+
ext = "html.erb"
|
30
|
+
elsif type == "react"
|
31
|
+
ext = "jsx"
|
32
|
+
end
|
33
|
+
filename = "#{Playbook::Engine.root}/app/views/playbook/samples/#{sample}/index.#{ext}"
|
34
|
+
contents = read_file(filename)
|
35
|
+
contents
|
36
|
+
end
|
37
|
+
|
38
|
+
def get_sample_code_content(sample, type)
|
39
|
+
if type == "rails"
|
40
|
+
rouge_type = "erb"
|
41
|
+
elsif type == "react"
|
42
|
+
rouge_type = "react"
|
43
|
+
end
|
44
|
+
code = get_raw_code(sample, type)
|
45
|
+
raw rouge(code, rouge_type)
|
46
|
+
end
|
47
|
+
|
48
|
+
def render_sample_ui(sample, type)
|
49
|
+
if type == "rails"
|
50
|
+
render template: "playbook/samples/#{sample}/index.html.erb"
|
51
|
+
elsif type == "react"
|
52
|
+
react_component(sample.titleize.to_s)
|
53
|
+
end
|
54
|
+
end
|
18
55
|
end
|
19
56
|
end
|
@@ -13,7 +13,7 @@
|
|
13
13
|
<% if type == "rails" %>
|
14
14
|
<%= render partial: "pb_#{@kit_examples[:kit]}/docs/#{key}" %>
|
15
15
|
<% elsif type == "react" %>
|
16
|
-
<%= pb_react(key.camelize) %>
|
16
|
+
<%= pb_react(key.camelize) %>
|
17
17
|
<% end %>
|
18
18
|
<br>
|
19
19
|
</div>
|
@@ -29,12 +29,12 @@
|
|
29
29
|
</li>
|
30
30
|
</ul>
|
31
31
|
</div>
|
32
|
-
<div class="pb--codeCopy" data-action="toggle" data-togglable="code_example">
|
32
|
+
<div class="pb--codeCopy" data-action="toggle" data-togglable="code_example" style="display: none" >
|
33
33
|
<a href="#" data-toggle="false" class="pb--close-toggle">Close</a>
|
34
34
|
<% if type == "rails" %>
|
35
35
|
<pre class="highlight"><%= raw rouge(contents, "erb") %></pre>
|
36
36
|
<% elsif type == "react" %>
|
37
37
|
<pre class="highlight"><%= raw rouge(contents, "react")%></pre>
|
38
38
|
<% end %>
|
39
|
-
</div>
|
39
|
+
</div>
|
40
40
|
<% end %>
|
@@ -17,6 +17,7 @@ export DateRangeStacked from './pb_date_range_stacked/_date_range_stacked.jsx'
|
|
17
17
|
export DateStacked from './pb_date_stacked/_date_stacked.jsx'
|
18
18
|
export DateYearStacked from './pb_date_year_stacked/_date_year_stacked.jsx'
|
19
19
|
export DistributionBar from './pb_distribution_bar/_distribution_bar.jsx'
|
20
|
+
export Filter from './pb_filter/_filter.jsx'
|
20
21
|
export FixedConfirmationToast from './pb_fixed_confirmation_toast/_fixed_confirmation_toast.jsx'
|
21
22
|
export Flex from './pb_flex/_flex.jsx'
|
22
23
|
export FlexItem from './pb_flex/_flex_item.jsx'
|
@@ -61,6 +62,7 @@ export TextInput from './pb_text_input/_text_input.jsx'
|
|
61
62
|
export Time from './pb_time/_time.jsx'
|
62
63
|
export TimeStamp from './pb_timestamp/_timestamp.jsx'
|
63
64
|
export Title from './pb_title/_title.jsx'
|
65
|
+
export TitleCount from './pb_title_count/_title_count.jsx'
|
64
66
|
export Toggle from './pb_toggle/_toggle.jsx'
|
65
67
|
export User from './pb_user/_user.jsx'
|
66
68
|
export UserBadge from './pb_user_badge/_user_badge.jsx'
|
@@ -1,5 +1,5 @@
|
|
1
|
-
import '../../../../fonts/fontawesome
|
2
|
-
import '../../../../fonts/regular
|
1
|
+
import '../../../../fonts/fontawesome-min.js'
|
2
|
+
import '../../../../fonts/regular-min.js'
|
3
3
|
import './main.scss'
|
4
4
|
import '../vendor.js'
|
5
5
|
|
@@ -10,6 +10,46 @@ window.$(document).on('click', '[data-toggle]', function(e) {
|
|
10
10
|
var kitContainer = window.$(this).closest('.pb--doc')
|
11
11
|
var toggleTarget = window.$(this).data('toggle')
|
12
12
|
|
13
|
-
window
|
14
|
-
|
13
|
+
window
|
14
|
+
.$(kitContainer)
|
15
|
+
.find('[data-action="toggle"]')
|
16
|
+
.hide()
|
17
|
+
window
|
18
|
+
.$(kitContainer)
|
19
|
+
.find('[data-togglable="' + toggleTarget + '"]')
|
20
|
+
.show()
|
21
|
+
})
|
22
|
+
|
23
|
+
window.$(document).ready(() => {
|
24
|
+
$('.compress').hide()
|
25
|
+
|
26
|
+
window.$(document).on('click', '.toggle-button', (e) => {
|
27
|
+
e.preventDefault()
|
28
|
+
$('.pb--codeCopy').toggleClass('close')
|
29
|
+
})
|
30
|
+
|
31
|
+
$('.expand').click(() => {
|
32
|
+
$('.sample-nav').hide()
|
33
|
+
$('.compress').show()
|
34
|
+
})
|
35
|
+
|
36
|
+
$('.compress').click(() => {
|
37
|
+
$('.sample-nav').show()
|
38
|
+
$('.compress').hide()
|
39
|
+
})
|
40
|
+
|
41
|
+
const setClipboard = (value) => {
|
42
|
+
var tempInput = document.createElement('textarea')
|
43
|
+
tempInput.style = 'position: absolute; left: -1000px; top: -1000px'
|
44
|
+
tempInput.value = value
|
45
|
+
document.body.appendChild(tempInput)
|
46
|
+
tempInput.select()
|
47
|
+
document.execCommand('copy')
|
48
|
+
document.body.removeChild(tempInput)
|
49
|
+
}
|
50
|
+
|
51
|
+
$('.copy-clipboard').click(() => {
|
52
|
+
var copyText = document.querySelector('.hiddenCodeforCopy').textContent
|
53
|
+
setClipboard(copyText)
|
54
|
+
})
|
15
55
|
})
|
@@ -31,6 +31,7 @@ import * as DateRangeStacked from 'pb_date_range_stacked/docs'
|
|
31
31
|
import * as DateStacked from 'pb_date_stacked/docs'
|
32
32
|
import * as DateYearStacked from 'pb_date_year_stacked/docs'
|
33
33
|
import * as DistributionBar from 'pb_distribution_bar/docs'
|
34
|
+
import * as Filter from 'pb_filter/docs'
|
34
35
|
import * as FixedConfirmationToast from 'pb_fixed_confirmation_toast/docs'
|
35
36
|
import * as Flex from 'pb_flex/docs'
|
36
37
|
import * as Hashtag from 'pb_hashtag/docs'
|
@@ -78,12 +79,6 @@ import * as Toggle from 'pb_toggle/docs'
|
|
78
79
|
import * as User from 'pb_user/docs'
|
79
80
|
import * as UserBadge from 'pb_user_badge/docs'
|
80
81
|
|
81
|
-
import PbTypeahead from 'pb_typeahead'
|
82
|
-
PbTypeahead.start()
|
83
|
-
|
84
|
-
import PbPopover from 'pb_popover'
|
85
|
-
PbPopover.start()
|
86
|
-
|
87
82
|
WebpackerReact.setup({
|
88
83
|
...Avatar,
|
89
84
|
...Badge,
|
@@ -103,6 +98,7 @@ WebpackerReact.setup({
|
|
103
98
|
...DateStacked,
|
104
99
|
...DateYearStacked,
|
105
100
|
...DistributionBar,
|
101
|
+
...Filter,
|
106
102
|
...FixedConfirmationToast,
|
107
103
|
...Flex,
|
108
104
|
...Hashtag,
|
@@ -10,41 +10,6 @@ import WebpackerReact from 'webpacker-react'
|
|
10
10
|
// ===========================================
|
11
11
|
// Generated file from kit generator.
|
12
12
|
|
13
|
-
import Dashboards from '../../../views/playbook/samples/dashboards/
|
13
|
+
import Dashboards from '../../../views/playbook/samples/dashboards/index.jsx'
|
14
14
|
|
15
15
|
WebpackerReact.setup({ Dashboards })
|
16
|
-
|
17
|
-
$(document).ready(() => {
|
18
|
-
$('.pb--codeCopy').show()
|
19
|
-
$('.compress').hide()
|
20
|
-
|
21
|
-
window.$(document).on('click', '.toggle-button', (e) => {
|
22
|
-
e.preventDefault()
|
23
|
-
$('.pb--codeCopy').toggleClass('close')
|
24
|
-
})
|
25
|
-
|
26
|
-
$('.expand').click(() => {
|
27
|
-
$('.sample-nav').hide()
|
28
|
-
$('.compress').show()
|
29
|
-
})
|
30
|
-
|
31
|
-
$('.compress').click(() => {
|
32
|
-
$('.sample-nav').show()
|
33
|
-
$('.compress').hide()
|
34
|
-
})
|
35
|
-
|
36
|
-
const setClipboard = (value) => {
|
37
|
-
var tempInput = document.createElement('textarea')
|
38
|
-
tempInput.style = 'position: absolute; left: -1000px; top: -1000px'
|
39
|
-
tempInput.value = value
|
40
|
-
document.body.appendChild(tempInput)
|
41
|
-
tempInput.select()
|
42
|
-
document.execCommand('copy')
|
43
|
-
document.body.removeChild(tempInput)
|
44
|
-
}
|
45
|
-
|
46
|
-
$('.copy-clipboard').click(() => {
|
47
|
-
var copyText = document.querySelector('.hiddenCodeforCopy').textContent
|
48
|
-
setClipboard(copyText)
|
49
|
-
})
|
50
|
-
})
|
@@ -14,7 +14,7 @@
|
|
14
14
|
}
|
15
15
|
}
|
16
16
|
}
|
17
|
-
|
17
|
+
|
18
18
|
.sample-nav {
|
19
19
|
padding: 0 25px;
|
20
20
|
background: #172257;
|
@@ -23,7 +23,7 @@
|
|
23
23
|
flex-basis: 200px;
|
24
24
|
|
25
25
|
}
|
26
|
-
|
26
|
+
|
27
27
|
.sample-actions {
|
28
28
|
display: flex;
|
29
29
|
align-items: center;
|
@@ -51,6 +51,7 @@
|
|
51
51
|
bottom: 0;
|
52
52
|
left: 0;
|
53
53
|
transition: all .4s;
|
54
|
+
border-radius: 0 0 6px 6px;
|
54
55
|
}
|
55
56
|
|
56
57
|
.pb--codeCopy.close {
|
@@ -3,10 +3,9 @@
|
|
3
3
|
.pb--doc {
|
4
4
|
margin-bottom: 20px;
|
5
5
|
border: 1px solid $border-light;
|
6
|
-
border-radius:
|
6
|
+
border-radius: 6px;
|
7
7
|
box-shadow: 0 4px 10px $shadow;
|
8
8
|
background: $white;
|
9
|
-
overflow: hidden;
|
10
9
|
|
11
10
|
&-demo-row {
|
12
11
|
width: 100%;
|
@@ -36,7 +35,7 @@
|
|
36
35
|
font-weight: 600;
|
37
36
|
z-index: 100;
|
38
37
|
}
|
39
|
-
|
38
|
+
|
40
39
|
.pb--kit-example, .pb--kit-example-markdown {
|
41
40
|
padding: calc(2rem + 4px) 2rem 1rem;
|
42
41
|
}
|
@@ -108,6 +107,7 @@
|
|
108
107
|
border-top: 1px solid $border-light;
|
109
108
|
display: none;
|
110
109
|
overflow-x: auto;
|
110
|
+
border-radius: 0 0 6px 6px;
|
111
111
|
}
|
112
112
|
|
113
113
|
&.dark_ui {
|
@@ -0,0 +1 @@
|
|
1
|
+
Bar graphs are used to show data. Bar graphs are not typically used to show percentages.
|
@@ -0,0 +1 @@
|
|
1
|
+
The primary button is used for the most important button on the page. Secondary buttons can be used for actions that are less important. Button links can be helpful for buttons that do not need a lot of attention drawn to them. Disabled buttons are used when you don't want the user to click the button.
|
@@ -0,0 +1 @@
|
|
1
|
+
This button is used many times for mobile or other things like cards and sidebars.
|
@@ -0,0 +1 @@
|
|
1
|
+
Used when a button will take a little while to load. The spinner lets the user know that the button has worked and it is in the process of loading.
|
@@ -0,0 +1 @@
|
|
1
|
+
Use to provide supplementary context. Default size is best when providing supplementary context to a small section (i.e. label for a text input, label for a paragraph). Use large caption when supplementary text covers more content.
|
@@ -0,0 +1 @@
|
|
1
|
+
Checkbox is used for a list of selections that are meant to have one or more options checked.
|
@@ -0,0 +1 @@
|
|
1
|
+
When using Icon Circle Button, the icon must be clear a clear indication of what the button does because there is no text. Icon Circle Buttons take up less space on the page compared to normal buttons. The link variant is used for times you only want to have an icon for a button without having a background.
|
@@ -0,0 +1 @@
|
|
1
|
+
Use to display customer's or user's contact information.
|
@@ -0,0 +1 @@
|
|
1
|
+
Use in dashboards to give the viewer a quick overview of important metrics. If want to show currency, use <a href="https://playbook.powerapp.cloud/kits/currency">Currency Kit</a>.
|
@@ -0,0 +1 @@
|
|
1
|
+
Use to display the date. Year will not display if it is the current year.
|
@@ -0,0 +1 @@
|
|
1
|
+
Use to display a date range. Year will not show if it is the current year.
|
@@ -0,0 +1 @@
|
|
1
|
+
Use to display the date, stacking month and day. Year will not show if it is the current year.
|
@@ -0,0 +1 @@
|
|
1
|
+
Use this kits on table displays or column headers to display a single date format.
|
@@ -0,0 +1 @@
|
|
1
|
+
This kit is a simple option for displaying dates in a month, day and the year format.
|
@@ -0,0 +1 @@
|
|
1
|
+
Can be used in the same way a pie chart can be used. By default, Distribution Bar comparatively represents data without numbers. To add numbers to this chart, you can use the Legend kit with prefix text.
|
@@ -0,0 +1,88 @@
|
|
1
|
+
/* @flow */
|
2
|
+
|
3
|
+
import React from 'react'
|
4
|
+
import { Button, Caption, Card, CircleIconButton, Flex, Icon, PbReactPopover, SectionSeparator, Title, TitleCount } from '../'
|
5
|
+
|
6
|
+
type FilterProps = {
|
7
|
+
className?: String,
|
8
|
+
data?: String,
|
9
|
+
id?: String,
|
10
|
+
children?: React.Node,
|
11
|
+
filters?: Array<Hash>,
|
12
|
+
sortMenu?: Array<Hash>
|
13
|
+
}
|
14
|
+
|
15
|
+
const Filter = ({
|
16
|
+
className = 'pb_filter_kit',
|
17
|
+
data,
|
18
|
+
id,
|
19
|
+
children,
|
20
|
+
sortMenu,
|
21
|
+
filters,
|
22
|
+
}: FilterProps) => {
|
23
|
+
return (
|
24
|
+
<div
|
25
|
+
className={className}
|
26
|
+
data={data}
|
27
|
+
id={id}
|
28
|
+
>
|
29
|
+
<Card padding="none">
|
30
|
+
<Flex
|
31
|
+
orientation="row"
|
32
|
+
vertical="center"
|
33
|
+
>
|
34
|
+
<CircleIconButton
|
35
|
+
icon="filter"
|
36
|
+
id="filter"
|
37
|
+
variant="secondary"
|
38
|
+
/>
|
39
|
+
<div className="maskContainer">
|
40
|
+
<div className="filters">
|
41
|
+
<div className="left_gradient" />
|
42
|
+
<div className="filter">
|
43
|
+
<Caption text={`${filters[0].name}`} />
|
44
|
+
<Title
|
45
|
+
size={4}
|
46
|
+
tag="h4"
|
47
|
+
text="name"
|
48
|
+
/>
|
49
|
+
</div>
|
50
|
+
<div className="right_gradient" />
|
51
|
+
</div>
|
52
|
+
</div>
|
53
|
+
</Flex>
|
54
|
+
<SectionSeparator />
|
55
|
+
<Flex
|
56
|
+
className="filter-bottom"
|
57
|
+
orientation="row"
|
58
|
+
spacing="between"
|
59
|
+
vertical="center"
|
60
|
+
>
|
61
|
+
<TitleCount
|
62
|
+
align="center"
|
63
|
+
count={25}
|
64
|
+
title="Results"
|
65
|
+
/>
|
66
|
+
<Flex
|
67
|
+
orientation="row"
|
68
|
+
vertical="center"
|
69
|
+
>
|
70
|
+
<Caption text="sort by:" />
|
71
|
+
<Button
|
72
|
+
id="sort-button"
|
73
|
+
text={`${sortMenu[0].item}`}
|
74
|
+
variant="link"
|
75
|
+
>
|
76
|
+
<Icon />
|
77
|
+
</Button>
|
78
|
+
</Flex>
|
79
|
+
</Flex>
|
80
|
+
</Card>
|
81
|
+
<PbReactPopover>
|
82
|
+
{children}
|
83
|
+
</PbReactPopover>
|
84
|
+
</div>
|
85
|
+
)
|
86
|
+
}
|
87
|
+
|
88
|
+
export default Filter
|