playbook_ui 4.13.1 → 4.17.0.pre.alpha1
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/README.md +6 -1
- data/app/pb_kits/playbook/_playbook.scss +6 -1
- data/app/pb_kits/playbook/data/menu.yml +7 -0
- data/app/pb_kits/playbook/index.js +11 -1
- data/app/pb_kits/playbook/packs/examples.js +6 -0
- data/app/pb_kits/playbook/packs/kits/pb_progress_step.js +2 -0
- data/app/pb_kits/playbook/pb_bar_graph/_bar_graph.jsx +6 -0
- data/app/pb_kits/playbook/pb_bar_graph/bar_graph.rb +5 -1
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_default.html.erb +2 -2
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_default.jsx +2 -2
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_height.html.erb +26 -0
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_height.jsx +36 -0
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_legend.html.erb +14 -0
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_legend.jsx +23 -0
- data/app/pb_kits/playbook/pb_bar_graph/docs/_description.md +3 -1
- data/app/pb_kits/playbook/pb_bar_graph/docs/example.yml +4 -0
- data/app/pb_kits/playbook/pb_bar_graph/docs/index.js +2 -0
- data/app/pb_kits/playbook/pb_button/_button.jsx +9 -1
- data/app/pb_kits/playbook/pb_circle_chart/_circle_chart.html.erb +12 -0
- data/app/pb_kits/playbook/pb_circle_chart/_circle_chart.scss +6 -0
- data/app/pb_kits/playbook/pb_circle_chart/circle_chart.rb +81 -0
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_default.html.erb +19 -0
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_inner_sizes.html.erb +136 -0
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_with_labels.html.erb +37 -0
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_with_legend_kit.html.erb +22 -0
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_with_title.html.erb +38 -0
- data/app/pb_kits/playbook/pb_circle_chart/docs/example.yml +9 -0
- data/app/pb_kits/playbook/pb_circle_icon_button/_circle_icon_button.html.erb +1 -1
- data/app/pb_kits/playbook/pb_circle_icon_button/_circle_icon_button.jsx +6 -0
- data/app/pb_kits/playbook/pb_circle_icon_button/circle_icon_button.rb +3 -1
- data/app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_link.html.erb +11 -0
- data/app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_link.jsx +25 -0
- data/app/pb_kits/playbook/pb_circle_icon_button/docs/example.yml +3 -1
- data/app/pb_kits/playbook/pb_circle_icon_button/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_contact/_contact.jsx +1 -0
- data/app/pb_kits/playbook/pb_contact/contact.rb +2 -0
- data/app/pb_kits/playbook/pb_contact/docs/_contact_default.html.erb +5 -0
- data/app/pb_kits/playbook/pb_contact/docs/_contact_default.jsx +4 -0
- data/app/pb_kits/playbook/pb_contact/docs/_contact_with_detail.html.erb +6 -0
- data/app/pb_kits/playbook/pb_contact/docs/_contact_with_detail.jsx +5 -0
- data/app/pb_kits/playbook/pb_currency/_currency.html.erb +6 -9
- data/app/pb_kits/playbook/pb_currency/currency.rb +22 -29
- data/app/pb_kits/playbook/pb_dashboard/pbChartsLightTheme.js +26 -1
- data/app/pb_kits/playbook/pb_date_year_stacked/_date_year_stacked.jsx +2 -2
- data/app/pb_kits/playbook/pb_filter/Filter/CurrentFilters.jsx +56 -0
- data/app/pb_kits/playbook/pb_filter/Filter/FilterBackground.jsx +26 -0
- data/app/pb_kits/playbook/pb_filter/Filter/FilterDouble.jsx +58 -0
- data/app/pb_kits/playbook/pb_filter/Filter/FilterSingle.jsx +46 -0
- data/app/pb_kits/playbook/pb_filter/Filter/FiltersPopover.jsx +37 -0
- data/app/pb_kits/playbook/pb_filter/Filter/ResultsCount.jsx +34 -0
- data/app/pb_kits/playbook/pb_filter/Filter/SortMenu.jsx +85 -0
- data/app/pb_kits/playbook/pb_filter/Filter/index.jsx +26 -0
- data/app/pb_kits/playbook/pb_filter/_filter.jsx +1 -222
- data/app/pb_kits/playbook/pb_filter/_filter.scss +16 -13
- data/app/pb_kits/playbook/pb_filter/docs/_filter_default.html.erb +34 -41
- data/app/pb_kits/playbook/pb_filter/docs/_filter_default.jsx +13 -9
- data/app/pb_kits/playbook/pb_filter/docs/_filter_no_background.html.erb +69 -74
- data/app/pb_kits/playbook/pb_filter/docs/_filter_no_background.jsx +12 -9
- data/app/pb_kits/playbook/pb_filter/docs/_filter_only.html.erb +28 -35
- data/app/pb_kits/playbook/pb_filter/docs/_filter_only.jsx +5 -6
- data/app/pb_kits/playbook/pb_filter/docs/_filter_single.html.erb +35 -41
- data/app/pb_kits/playbook/pb_filter/docs/_filter_single.jsx +12 -10
- data/app/pb_kits/playbook/pb_filter/docs/_sort_only.html.erb +12 -18
- data/app/pb_kits/playbook/pb_filter/docs/_sort_only.jsx +14 -44
- data/app/pb_kits/playbook/pb_filter/templates/_default.html.erb +1 -1
- data/app/pb_kits/playbook/pb_label_pill/_label_pill.html.erb +1 -0
- data/app/pb_kits/playbook/pb_label_pill/_label_pill.jsx +59 -14
- data/app/pb_kits/playbook/pb_label_pill/docs/_label_pill_default.jsx +50 -0
- data/app/pb_kits/playbook/pb_label_pill/docs/example.yml +4 -3
- data/app/pb_kits/playbook/pb_label_pill/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_label_pill/label_pill.rb +1 -1
- data/app/pb_kits/playbook/pb_layout/_layout.jsx +66 -14
- data/app/pb_kits/playbook/pb_layout/docs/_layout_colors.jsx +63 -0
- data/app/pb_kits/playbook/pb_layout/docs/_layout_sizes.jsx +87 -0
- data/app/pb_kits/playbook/pb_layout/docs/_layout_sizes_dark.jsx +92 -0
- data/app/pb_kits/playbook/pb_layout/docs/_layout_transparent.jsx +24 -0
- data/app/pb_kits/playbook/pb_layout/docs/example.yml +4 -1
- data/app/pb_kits/playbook/pb_layout/docs/index.js +4 -1
- data/app/pb_kits/playbook/pb_line_graph/_line_graph.jsx +6 -0
- data/app/pb_kits/playbook/pb_line_graph/docs/_description.md +3 -1
- data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_default.html.erb +8 -8
- data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_default.jsx +1 -1
- data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_height.html.erb +26 -0
- data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_height.jsx +35 -0
- data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_legend.html.erb +15 -0
- data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_legend.jsx +23 -0
- data/app/pb_kits/playbook/pb_line_graph/docs/example.yml +5 -1
- data/app/pb_kits/playbook/pb_line_graph/docs/index.js +2 -0
- data/app/pb_kits/playbook/pb_line_graph/line_graph.rb +6 -0
- data/app/pb_kits/playbook/pb_online_status/_online_status.jsx +31 -14
- data/app/pb_kits/playbook/pb_online_status/docs/_online_status_default.jsx +19 -0
- data/app/pb_kits/playbook/pb_online_status/docs/example.yml +3 -3
- data/app/pb_kits/playbook/pb_online_status/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_popover/_popover.jsx +26 -19
- data/app/pb_kits/playbook/pb_popover/docs/example.yml +0 -3
- data/app/pb_kits/playbook/pb_popover/docs/index.js +0 -2
- data/app/pb_kits/playbook/pb_progress_step/_progress_step.html.erb +6 -0
- data/app/pb_kits/playbook/pb_progress_step/_progress_step.jsx +35 -0
- data/app/pb_kits/playbook/pb_progress_step/_progress_step.scss +388 -0
- data/app/pb_kits/playbook/pb_progress_step/_progress_step_item.html.erb +23 -0
- data/app/pb_kits/playbook/pb_progress_step/_progress_step_item.jsx +44 -0
- data/app/pb_kits/playbook/pb_progress_step/docs/_description.md +1 -0
- data/app/pb_kits/playbook/pb_progress_step/docs/_progress_step_dark.html.erb +8 -0
- data/app/pb_kits/playbook/pb_progress_step/docs/_progress_step_dark.jsx +18 -0
- data/app/pb_kits/playbook/pb_progress_step/docs/_progress_step_default.html.erb +33 -0
- data/app/pb_kits/playbook/pb_progress_step/docs/_progress_step_default.jsx +39 -0
- data/app/pb_kits/playbook/pb_progress_step/docs/_progress_step_vertical.html.erb +33 -0
- data/app/pb_kits/playbook/pb_progress_step/docs/_progress_step_vertical.jsx +40 -0
- data/app/pb_kits/playbook/pb_progress_step/docs/example.yml +12 -0
- data/app/pb_kits/playbook/pb_progress_step/docs/index.js +3 -0
- data/app/pb_kits/playbook/pb_progress_step/progress_step.rb +33 -0
- data/app/pb_kits/playbook/pb_progress_step/progress_step_item.rb +19 -0
- data/app/pb_kits/playbook/pb_radio/_radio.jsx +16 -16
- data/app/pb_kits/playbook/pb_select/_select.jsx +2 -0
- data/app/pb_kits/playbook/pb_selectable_card_icon/_selectable_card_icon.html.erb +30 -0
- data/app/pb_kits/playbook/pb_selectable_card_icon/_selectable_card_icon.jsx +97 -0
- data/app/pb_kits/playbook/pb_selectable_card_icon/_selectable_card_icon.scss +74 -0
- data/app/pb_kits/playbook/pb_selectable_card_icon/docs/_selectable_card_icon_checkmark.html.erb +29 -0
- data/app/pb_kits/playbook/pb_selectable_card_icon/docs/_selectable_card_icon_checkmark.jsx +41 -0
- data/app/pb_kits/playbook/pb_selectable_card_icon/docs/_selectable_card_icon_dark.html.erb +30 -0
- data/app/pb_kits/playbook/pb_selectable_card_icon/docs/_selectable_card_icon_dark.jsx +40 -0
- data/app/pb_kits/playbook/pb_selectable_card_icon/docs/_selectable_card_icon_default.html.erb +26 -0
- data/app/pb_kits/playbook/pb_selectable_card_icon/docs/_selectable_card_icon_default.jsx +37 -0
- data/app/pb_kits/playbook/pb_selectable_card_icon/docs/_selectable_card_icon_single_select.html.erb +27 -0
- data/app/pb_kits/playbook/pb_selectable_card_icon/docs/_selectable_card_icon_single_select.jsx +40 -0
- data/app/pb_kits/playbook/pb_selectable_card_icon/docs/example.yml +16 -0
- data/app/pb_kits/playbook/pb_selectable_card_icon/docs/index.js +4 -0
- data/app/pb_kits/playbook/pb_selectable_card_icon/selectable_card_icon.rb +50 -0
- data/app/pb_kits/playbook/pb_selectable_icon/_selectable_icon.html.erb +24 -0
- data/app/pb_kits/playbook/pb_selectable_icon/_selectable_icon.jsx +107 -0
- data/app/pb_kits/playbook/pb_selectable_icon/_selectable_icon.scss +85 -0
- data/app/pb_kits/playbook/pb_selectable_icon/docs/_selectable_icon_dark.html.erb +26 -0
- data/app/pb_kits/playbook/pb_selectable_icon/docs/_selectable_icon_dark.jsx +43 -0
- data/app/pb_kits/playbook/pb_selectable_icon/docs/_selectable_icon_default.html.erb +23 -0
- data/app/pb_kits/playbook/pb_selectable_icon/docs/_selectable_icon_default.jsx +40 -0
- data/app/pb_kits/playbook/pb_selectable_icon/docs/_selectable_icon_single_select.html.erb +27 -0
- data/app/pb_kits/playbook/pb_selectable_icon/docs/_selectable_icon_single_select.jsx +46 -0
- data/app/pb_kits/playbook/pb_selectable_icon/docs/example.yml +12 -0
- data/app/pb_kits/playbook/pb_selectable_icon/docs/index.js +3 -0
- data/app/pb_kits/playbook/pb_selectable_icon/selectable_icon.rb +55 -0
- data/app/pb_kits/playbook/pb_source/_source.jsx +113 -13
- data/app/pb_kits/playbook/pb_source/docs/_source_default.html.erb +3 -1
- data/app/pb_kits/playbook/pb_source/docs/_source_default.jsx +37 -0
- data/app/pb_kits/playbook/pb_source/docs/_source_noicon.jsx +40 -0
- data/app/pb_kits/playbook/pb_source/docs/_source_types.jsx +85 -0
- data/app/pb_kits/playbook/pb_source/docs/example.yml +3 -0
- data/app/pb_kits/playbook/pb_source/docs/index.js +5 -0
- data/app/pb_kits/playbook/pb_star_rating/_star_rating.html.erb +6 -2
- data/app/pb_kits/playbook/pb_star_rating/_star_rating.jsx +98 -13
- data/app/pb_kits/playbook/pb_star_rating/docs/_star_rating_default.jsx +28 -0
- data/app/pb_kits/playbook/pb_star_rating/docs/_star_rating_hide.jsx +13 -0
- data/app/pb_kits/playbook/pb_star_rating/docs/example.yml +2 -1
- data/app/pb_kits/playbook/pb_star_rating/docs/index.js +3 -0
- data/app/pb_kits/playbook/pb_star_rating/star_rating.rb +2 -1
- data/app/pb_kits/playbook/pb_stat_change/docs/_stat_change_default.html.erb +1 -1
- data/app/pb_kits/playbook/pb_stat_change/docs/_stat_change_default.jsx +1 -1
- data/app/pb_kits/playbook/pb_stat_change/stat_change.rb +1 -1
- data/app/pb_kits/playbook/pb_text_input/_text_input.html.erb +5 -3
- data/app/pb_kits/playbook/pb_text_input/_text_input.jsx +21 -1
- data/app/pb_kits/playbook/pb_text_input/docs/_text_input_default.html.erb +31 -5
- data/app/pb_kits/playbook/pb_text_input/docs/_text_input_default.jsx +3 -0
- data/app/pb_kits/playbook/pb_text_input/text_input.rb +1 -1
- data/app/pb_kits/playbook/pb_textarea/_textarea.jsx +2 -0
- data/app/pb_kits/playbook/pb_timestamp/_timestamp.jsx +39 -14
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_default.jsx +8 -0
- data/app/pb_kits/playbook/pb_timestamp/docs/example.yml +3 -3
- data/app/pb_kits/playbook/pb_timestamp/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_title_detail/_title_detail.jsx +47 -14
- data/app/pb_kits/playbook/pb_title_detail/docs/_title_detail_default.jsx +26 -0
- data/app/pb_kits/playbook/pb_title_detail/docs/example.yml +3 -3
- data/app/pb_kits/playbook/pb_title_detail/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_tooltip/_tooltip.html.erb +10 -0
- data/app/pb_kits/playbook/pb_tooltip/_tooltip.scss +105 -0
- data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_default.html.erb +10 -0
- data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_white.html.erb +9 -0
- data/app/pb_kits/playbook/pb_tooltip/docs/example.yml +5 -0
- data/app/pb_kits/playbook/pb_tooltip/index.js +80 -0
- data/app/pb_kits/playbook/pb_tooltip/tooltip.rb +34 -0
- data/app/pb_kits/playbook/plugins/pb_chart.js +53 -1
- data/app/pb_kits/playbook/tokens/_colors.scss +7 -3
- data/app/pb_kits/playbook/vendor.js +3 -0
- data/lib/playbook/version.rb +1 -1
- data/lib/tasks/pb_release.rake +2 -0
- metadata +98 -12
- data/app/pb_kits/playbook/pb_layout/_body.jsx +0 -26
- data/app/pb_kits/playbook/pb_layout/_sidebar.jsx +0 -26
- data/app/pb_kits/playbook/pb_layout/docs/_layout_default.jsx +0 -14
- data/app/pb_kits/playbook/pb_popover/docs/_popover_portal.jsx +0 -34
- data/app/pb_kits/playbook/pb_popover/docs/_popover_with_button.html.erb +0 -4
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: ca51dc32d53a72d5c123069a7e04a6ef47932186205e12045d43c821176dfcc9
|
4
|
+
data.tar.gz: bf975204f5af8b96cce1a49bdd3c0017e52b5abd355367fa1f821f1e42cba194
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: a41e5ae5f1b4cd9837989b7c38afffa70fdd0a7c7fa3abc711f705adebe9ebc0848ec1b55012657c29f35cbf8e5f837e7124c3b2ed1d6333995e6a4eea5ffab0
|
7
|
+
data.tar.gz: c340a6d38c692fe2978a282694cc1d157f142f705b1e433d487cf4fea209a159b3410571f9ddab7b99bbfb9b00061fd0e1220f3d3ac81b97f1f175aa82c404ff
|
data/README.md
CHANGED
@@ -9,9 +9,14 @@ Playbook is the first design system built for both Rails & React interfaces. Ins
|
|
9
9
|
|
10
10
|
## Getting started
|
11
11
|
|
12
|
+
1. `$ npm install playbook-ui`
|
13
|
+
1. Import styles `@import '~playbook-ui/dist/playbook.css';`
|
14
|
+
|
15
|
+
|
16
|
+
## Contribute
|
17
|
+
|
12
18
|
1. Run `yarn && bundle`
|
13
19
|
1. Run `make start`
|
14
|
-
1. Bootstrap the database: `docker-compose run web bin/rails db:setup`
|
15
20
|
1. Install overcommit hooks `bin/overcommit`
|
16
21
|
1. open [http://localhost:8080](http://localhost:8080)
|
17
22
|
|
@@ -7,6 +7,7 @@
|
|
7
7
|
@import 'pb_badge/badge';
|
8
8
|
@import 'pb_bar_graph/bar_graph';
|
9
9
|
@import 'pb_checkbox/checkbox';
|
10
|
+
@import 'pb_circle_chart/circle_chart';
|
10
11
|
@import 'pb_circle_icon_button/circle_icon_button';
|
11
12
|
@import 'pb_contact/contact';
|
12
13
|
@import 'pb_currency/currency';
|
@@ -15,6 +16,7 @@
|
|
15
16
|
@import 'pb_date_range_inline/date_range_inline';
|
16
17
|
@import 'pb_date_range_stacked/date_range_stacked';
|
17
18
|
@import 'pb_date_stacked/date_stacked';
|
19
|
+
@import 'pb_date_time_stacked/date_time_stacked';
|
18
20
|
@import 'pb_date_year_stacked/date_year_stacked';
|
19
21
|
@import 'pb_distribution_bar/distribution_bar';
|
20
22
|
@import 'pb_file_upload/file_upload';
|
@@ -49,10 +51,13 @@
|
|
49
51
|
@import 'pb_popover/popover';
|
50
52
|
@import 'pb_progress_pills/progress_pills';
|
51
53
|
@import 'pb_progress_simple/progress_simple';
|
54
|
+
@import 'pb_progress_step/progress_step';
|
52
55
|
@import 'pb_radio/radio';
|
53
56
|
@import 'pb_section_separator/section_separator';
|
54
57
|
@import 'pb_select/select';
|
55
58
|
@import 'pb_selectable_card/selectable_card';
|
59
|
+
@import 'pb_selectable_card_icon/selectable_card_icon';
|
60
|
+
@import 'pb_selectable_icon/selectable_icon';
|
56
61
|
@import 'pb_source/source';
|
57
62
|
@import 'pb_star_rating/star_rating';
|
58
63
|
@import 'pb_stat_change/stat_change';
|
@@ -66,9 +71,9 @@
|
|
66
71
|
@import 'pb_title_count/title_count';
|
67
72
|
@import 'pb_title_detail/title_detail';
|
68
73
|
@import 'pb_toggle/toggle';
|
74
|
+
@import 'pb_tooltip/tooltip';
|
69
75
|
@import 'pb_typeahead/typeahead';
|
70
76
|
@import 'pb_user/user';
|
71
77
|
@import 'pb_user_badge/user_badge';
|
72
|
-
@import 'pb_date_time_stacked/date_time_stacked';
|
73
78
|
@import 'pb_time_stacked/time_stacked';
|
74
79
|
@import 'pb_weekday_stacked/weekday_stacked';
|
@@ -1,5 +1,6 @@
|
|
1
1
|
samples:
|
2
2
|
- dashboards
|
3
|
+
- something
|
3
4
|
kits:
|
4
5
|
- avatar
|
5
6
|
- badge
|
@@ -13,6 +14,8 @@ kits:
|
|
13
14
|
- legend
|
14
15
|
- line_graph
|
15
16
|
- distribution_bar
|
17
|
+
- circle_chart
|
18
|
+
|
16
19
|
- filter
|
17
20
|
- fixed_confirmation_toast
|
18
21
|
- flex
|
@@ -23,6 +26,8 @@ kits:
|
|
23
26
|
- radio
|
24
27
|
- select
|
25
28
|
- selectable_card
|
29
|
+
- selectable_card_icon
|
30
|
+
- selectable_icon
|
26
31
|
- text_input
|
27
32
|
- textarea
|
28
33
|
- typeahead
|
@@ -45,11 +50,13 @@ kits:
|
|
45
50
|
- popover
|
46
51
|
- progress_pills
|
47
52
|
- progress_simple
|
53
|
+
- progress_step
|
48
54
|
- section_separator
|
49
55
|
- source
|
50
56
|
- star_rating
|
51
57
|
- stat_change
|
52
58
|
- table
|
59
|
+
- tooltip
|
53
60
|
- typography:
|
54
61
|
- body
|
55
62
|
- caption
|
@@ -1,3 +1,7 @@
|
|
1
|
+
import './_playbook.scss'
|
2
|
+
import 'lazysizes/plugins/attrchange/ls.attrchange'
|
3
|
+
import 'lazysizes'
|
4
|
+
|
1
5
|
// React Component JSX Imports from the React Kits
|
2
6
|
export Avatar from './pb_avatar/_avatar.jsx'
|
3
7
|
export Badge from './pb_badge/_badge.jsx'
|
@@ -52,10 +56,14 @@ export PersonContact from './pb_person_contact/_person_contact.jsx'
|
|
52
56
|
export Pill from './pb_pill/_pill.jsx'
|
53
57
|
export ProgressPills from './pb_progress_pills/_progress_pills.jsx'
|
54
58
|
export ProgressSimple from './pb_progress_simple/_progress_simple.jsx'
|
59
|
+
export ProgressStep from './pb_progress_step/_progress_step.jsx'
|
60
|
+
export ProgressStepItem from './pb_progress_step/_progress_step_item.jsx'
|
55
61
|
export Radio from './pb_radio/_radio.jsx'
|
56
62
|
export SectionSeparator from './pb_section_separator/_section_separator.jsx'
|
57
63
|
export Select from './pb_select/_select.jsx'
|
58
64
|
export SelectableCard from './pb_selectable_card/_selectable_card.jsx'
|
65
|
+
export SelectableCardIcon from './pb_selectable_card_icon/_selectable_card_icon.jsx'
|
66
|
+
export SelectableIcon from './pb_selectable_icon/_selectable_icon.jsx'
|
59
67
|
export Source from './pb_source/_source.jsx'
|
60
68
|
export StarRating from './pb_star_rating/_star_rating.jsx'
|
61
69
|
export StatChange from './pb_stat_change/_stat_change.jsx'
|
@@ -66,10 +74,11 @@ export Textarea from './pb_textarea/_textarea.jsx'
|
|
66
74
|
export TextInput from './pb_text_input/_text_input.jsx'
|
67
75
|
export Time from './pb_time/_time.jsx'
|
68
76
|
export TimeStacked from './pb_time_stacked/_time_stacked.jsx'
|
69
|
-
export
|
77
|
+
export Timestamp from './pb_timestamp/_timestamp.jsx'
|
70
78
|
export TimeRangeInline from './pb_time_range_inline/_time_range_inline.jsx'
|
71
79
|
export Title from './pb_title/_title.jsx'
|
72
80
|
export TitleCount from './pb_title_count/_title_count.jsx'
|
81
|
+
export TitleDetail from './pb_title_detail/_title_detail.jsx'
|
73
82
|
export Toggle from './pb_toggle/_toggle.jsx'
|
74
83
|
export User from './pb_user/_user.jsx'
|
75
84
|
export UserBadge from './pb_user_badge/_user_badge.jsx'
|
@@ -86,3 +95,4 @@ export pbChart from './plugins/pb_chart.js'
|
|
86
95
|
export PbTypeahead from './pb_typeahead'
|
87
96
|
export PbPopover from './pb_popover'
|
88
97
|
export PbTable from './pb_table'
|
98
|
+
export PbTooltip from './pb_tooltip'
|
@@ -63,10 +63,13 @@ import * as PersonContact from 'pb_person_contact/docs'
|
|
63
63
|
import * as Pill from 'pb_pill/docs'
|
64
64
|
import * as ProgressPills from 'pb_progress_pills/docs'
|
65
65
|
import * as ProgressSimple from 'pb_progress_simple/docs'
|
66
|
+
import * as ProgressStep from 'pb_progress_step/docs'
|
66
67
|
import * as Radio from 'pb_radio/docs'
|
67
68
|
import * as SectionSeparator from 'pb_section_separator/docs'
|
68
69
|
import * as Select from 'pb_select/docs'
|
69
70
|
import * as SelectableCard from 'pb_selectable_card/docs'
|
71
|
+
import * as SelectableCardIcon from 'pb_selectable_card_icon/docs'
|
72
|
+
import * as SelectableIcon from 'pb_selectable_icon/docs'
|
70
73
|
import * as Source from 'pb_source/docs'
|
71
74
|
import * as StarRating from 'pb_star_rating/docs'
|
72
75
|
import * as StatChange from 'pb_stat_change/docs'
|
@@ -137,10 +140,13 @@ WebpackerReact.setup({
|
|
137
140
|
...Pill,
|
138
141
|
...ProgressPills,
|
139
142
|
...ProgressSimple,
|
143
|
+
...ProgressStep,
|
140
144
|
...Radio,
|
141
145
|
...SectionSeparator,
|
142
146
|
...Select,
|
143
147
|
...SelectableCard,
|
148
|
+
...SelectableIcon,
|
149
|
+
...SelectableCardIcon,
|
144
150
|
...Source,
|
145
151
|
...StarRating,
|
146
152
|
...StatChange,
|
@@ -19,6 +19,8 @@ type BarGraphProps = {
|
|
19
19
|
subTitle?: String,
|
20
20
|
title: String,
|
21
21
|
type?: String,
|
22
|
+
legend?: Boolean,
|
23
|
+
height?: String,
|
22
24
|
}
|
23
25
|
|
24
26
|
export default class BarGraph extends React.Component<BarGraphProps> {
|
@@ -40,6 +42,8 @@ export default class BarGraph extends React.Component
|
|
40
42
|
subTitle,
|
41
43
|
title,
|
42
44
|
type,
|
45
|
+
legend,
|
46
|
+
height,
|
43
47
|
} = this.props
|
44
48
|
|
45
49
|
new pbChart(`.${className}`, {
|
@@ -53,6 +57,8 @@ export default class BarGraph extends React.Component
|
|
53
57
|
xAxisCategories: xAxisCategories,
|
54
58
|
yAxisMin: yAxisMin,
|
55
59
|
yAxisMax: yAxisMax,
|
60
|
+
legend: legend,
|
61
|
+
height: height,
|
56
62
|
})
|
57
63
|
}
|
58
64
|
|
@@ -19,7 +19,9 @@ module Playbook
|
|
19
19
|
default:[]
|
20
20
|
prop :y_axis_min, type: Playbook::Props::Numeric
|
21
21
|
prop :y_axis_max, type: Playbook::Props::Numeric
|
22
|
-
|
22
|
+
prop :legend, type: Playbook::Props::Boolean,
|
23
|
+
default: false
|
24
|
+
prop :height
|
23
25
|
|
24
26
|
def chart_type
|
25
27
|
orientation == "horizontal" ? "bar" : "column"
|
@@ -37,6 +39,8 @@ module Playbook
|
|
37
39
|
xAxisCategories: x_axis_categories,
|
38
40
|
yAxisMin: y_axis_min,
|
39
41
|
yAxisMax: y_axis_max,
|
42
|
+
legend: legend,
|
43
|
+
height: height,
|
40
44
|
}.to_json.html_safe
|
41
45
|
end
|
42
46
|
|
@@ -18,9 +18,9 @@
|
|
18
18
|
<%= pb_rails("bar_graph", props: {
|
19
19
|
axis_title: 'Number of Employees',
|
20
20
|
chart_data: data,
|
21
|
-
id: "bar-
|
21
|
+
id: "bar-default",
|
22
22
|
y_axis_min: 0,
|
23
23
|
x_axis_categories:['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
|
24
24
|
subtitle: 'Source: thesolarfoundation.com',
|
25
|
-
title: 'Solar Employment Growth by Sector, 2010-2016'
|
25
|
+
title: 'Solar Employment Growth by Sector, 2010-2016',
|
26
26
|
}) %>
|
@@ -23,10 +23,10 @@ const BarGraphDefault = () => (
|
|
23
23
|
<BarGraph
|
24
24
|
axisTitle="Number of Employees"
|
25
25
|
chartData={chartData}
|
26
|
-
id="bar-
|
26
|
+
id="bar-default"
|
27
27
|
subTitle="Source: thesolarfoundation.com"
|
28
28
|
title="Solar Employment Growth by Sector, 2010-2016"
|
29
|
-
xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May'
|
29
|
+
xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May']}
|
30
30
|
yAxisMin={0}
|
31
31
|
/>
|
32
32
|
</div>
|
@@ -0,0 +1,26 @@
|
|
1
|
+
<% data = [{
|
2
|
+
name: 'Number of Installations',
|
3
|
+
data: [1475,200,3000,654,656]
|
4
|
+
}] %>
|
5
|
+
|
6
|
+
<%= pb_rails("bar_graph", props: {
|
7
|
+
axis_title: 'Number of Employees',
|
8
|
+
chart_data: data,
|
9
|
+
id: "bar-fixed-height",
|
10
|
+
y_axis_min: 0,
|
11
|
+
x_axis_categories:['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
|
12
|
+
title: 'Fixed Height (300px)',
|
13
|
+
height: '300'
|
14
|
+
}) %>
|
15
|
+
|
16
|
+
<br /><br />
|
17
|
+
|
18
|
+
<%= pb_rails("bar_graph", props: {
|
19
|
+
axis_title: 'Number of Employees',
|
20
|
+
chart_data: data,
|
21
|
+
id: "bar-percentage-height",
|
22
|
+
y_axis_min: 0,
|
23
|
+
x_axis_categories:['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
|
24
|
+
title: 'Percentage Height (50%)',
|
25
|
+
height: '50%'
|
26
|
+
}) %>
|
@@ -0,0 +1,36 @@
|
|
1
|
+
import React from 'react'
|
2
|
+
import { BarGraph } from '../../'
|
3
|
+
|
4
|
+
const chartData = [{
|
5
|
+
name: 'Number of Installations',
|
6
|
+
data: [1475, 200, 3000, 654, 656],
|
7
|
+
}]
|
8
|
+
|
9
|
+
const BarGraphDefault = () => (
|
10
|
+
<div>
|
11
|
+
<BarGraph
|
12
|
+
axisTitle="Number of Employees"
|
13
|
+
chartData={chartData}
|
14
|
+
height="300"
|
15
|
+
id="bar-fixed-height"
|
16
|
+
title="Fixed Height (300px)"
|
17
|
+
xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']}
|
18
|
+
yAxisMin={0}
|
19
|
+
/>
|
20
|
+
|
21
|
+
<br />
|
22
|
+
<br />
|
23
|
+
|
24
|
+
<BarGraph
|
25
|
+
axisTitle="Number of Employees"
|
26
|
+
chartData={chartData}
|
27
|
+
height="50%"
|
28
|
+
id="bar-percentage-height"
|
29
|
+
title="Percentage Height (50%)"
|
30
|
+
xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']}
|
31
|
+
yAxisMin={0}
|
32
|
+
/>
|
33
|
+
</div>
|
34
|
+
)
|
35
|
+
|
36
|
+
export default BarGraphDefault
|
@@ -0,0 +1,14 @@
|
|
1
|
+
<% data = [{
|
2
|
+
name: 'Number of Installations',
|
3
|
+
data: [1475,200,3000,654,656]
|
4
|
+
}] %>
|
5
|
+
|
6
|
+
<%= pb_rails("bar_graph", props: {
|
7
|
+
axis_title: 'Number of Employees',
|
8
|
+
chart_data: data,
|
9
|
+
id: "bar-test-2",
|
10
|
+
y_axis_min: 0,
|
11
|
+
x_axis_categories:['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
|
12
|
+
title: 'Bar Graph with Legend',
|
13
|
+
legend: true,
|
14
|
+
}) %>
|
@@ -0,0 +1,23 @@
|
|
1
|
+
import React from 'react'
|
2
|
+
import { BarGraph } from '../..'
|
3
|
+
|
4
|
+
const chartData = [{
|
5
|
+
name: 'Number of Installations',
|
6
|
+
data: [1475, 200, 3000, 654, 656],
|
7
|
+
}]
|
8
|
+
|
9
|
+
const BarGraphLegend = () => (
|
10
|
+
<div>
|
11
|
+
<BarGraph
|
12
|
+
axisTitle="Number of Employees"
|
13
|
+
chartData={chartData}
|
14
|
+
id="bar-test-2"
|
15
|
+
legend
|
16
|
+
title="Bar Graph with Legend"
|
17
|
+
xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May']}
|
18
|
+
yAxisMin={0}
|
19
|
+
/>
|
20
|
+
</div>
|
21
|
+
)
|
22
|
+
|
23
|
+
export default BarGraphLegend
|
@@ -1 +1,3 @@
|
|
1
|
-
Bar graphs are used to
|
1
|
+
Bar graphs are used to compare data. Bar graphs are not typically used to show percentages. The default height of bar graph is 400px and can be changed. The default height is in pixel units, but can also use percentage string (percentage would be that of the width. For example, `height:"50%"` would mean that the height is 50% of the width). This allows for preserving the aspect ratio across responsive sizes.
|
2
|
+
|
3
|
+
For more information, see: <a href="https://api.highcharts.com/highcharts/chart.height" target="_blank"> highcharts/chart.height</a>.
|
@@ -3,6 +3,8 @@
|
|
3
3
|
import React from 'react'
|
4
4
|
import classnames from 'classnames'
|
5
5
|
|
6
|
+
import Icon from '../pb_icon/_icon.jsx'
|
7
|
+
|
6
8
|
type EventHandler = (SyntheticInputEvent<HTMLInputElement>) => void
|
7
9
|
type ButtonPropTypes = {
|
8
10
|
aria?: {
|
@@ -83,7 +85,13 @@ const Button = (props: ButtonPropTypes) => {
|
|
83
85
|
const buttonAria = buttonAriaProps(props)
|
84
86
|
const css = classnames(buttonClassName(props), className)
|
85
87
|
const loadingIcon = (
|
86
|
-
<
|
88
|
+
<div className="loading-icon">
|
89
|
+
<Icon
|
90
|
+
fixedWidth
|
91
|
+
icon="spinner"
|
92
|
+
pulse
|
93
|
+
/>
|
94
|
+
</div>
|
87
95
|
)
|
88
96
|
|
89
97
|
const content = (
|
@@ -0,0 +1,12 @@
|
|
1
|
+
<%= content_tag(:div, "",
|
2
|
+
aria: object.aria,
|
3
|
+
id: object.id,
|
4
|
+
data: object.data,
|
5
|
+
class: object.classname) %>
|
6
|
+
<% content_for :pb_js do %>
|
7
|
+
<%= javascript_tag do %>
|
8
|
+
window.addEventListener('DOMContentLoaded', function() {
|
9
|
+
new pbChart('.selector', <%= object.chart_options %>)
|
10
|
+
})
|
11
|
+
<% end %>
|
12
|
+
<% end %>
|
@@ -0,0 +1,81 @@
|
|
1
|
+
# frozen_string_literal: true
|
2
|
+
|
3
|
+
module Playbook
|
4
|
+
module PbCircleChart
|
5
|
+
class CircleChart
|
6
|
+
include Playbook::Props
|
7
|
+
|
8
|
+
partial "pb_circle_chart/circle_chart"
|
9
|
+
|
10
|
+
prop :chart_data, type: Playbook::Props::Array,
|
11
|
+
default: []
|
12
|
+
prop :style, type: Playbook::Props::Enum,
|
13
|
+
values: %w[pie],
|
14
|
+
default: "pie"
|
15
|
+
|
16
|
+
prop :data_labels, type: Playbook::Props::Boolean, default: false
|
17
|
+
prop :min_point_size, type: Playbook::Props::Numeric
|
18
|
+
prop :max_point_size, type: Playbook::Props::Numeric
|
19
|
+
prop :inner_size, type: Playbook::Props::Enum,
|
20
|
+
values: %w[sm md lg none],
|
21
|
+
default: "md"
|
22
|
+
prop :z_min, type: Playbook::Props::Numeric
|
23
|
+
prop :start_angle, type: Playbook::Props::Numeric
|
24
|
+
prop :header_format
|
25
|
+
prop :data_label_html, default: '<div>{point.name}</div>'
|
26
|
+
prop :tooltip_html, default: '<span style="font-weight: bold; color:{point.color};">●</span>
|
27
|
+
{point.name}: ' + '<b>{point.y}
|
28
|
+
</b>'
|
29
|
+
prop :use_html, type: Playbook::Props::Boolean, default: false
|
30
|
+
prop :legend, type: Playbook::Props::Boolean, default: false
|
31
|
+
prop :title, default: ''
|
32
|
+
|
33
|
+
def chart_type
|
34
|
+
style == "variablepie" ? "variablepie" : "pie"
|
35
|
+
end
|
36
|
+
|
37
|
+
def chart_data_formatted
|
38
|
+
chart_data.map{ |hash| hash[:y] = hash.delete :value}
|
39
|
+
return chart_data
|
40
|
+
end
|
41
|
+
|
42
|
+
def inner_size_format
|
43
|
+
case inner_size
|
44
|
+
when "lg"
|
45
|
+
"85%"
|
46
|
+
when "sm"
|
47
|
+
"35%"
|
48
|
+
when "none"
|
49
|
+
"0%"
|
50
|
+
when "md"
|
51
|
+
"50%"
|
52
|
+
end
|
53
|
+
|
54
|
+
end
|
55
|
+
|
56
|
+
def chart_options
|
57
|
+
{
|
58
|
+
id: id,
|
59
|
+
chartData: chart_data_formatted,
|
60
|
+
title: title,
|
61
|
+
type: chart_type,
|
62
|
+
showInLegend: legend,
|
63
|
+
dataLabelHtml: data_label_html,
|
64
|
+
dataLabels: data_labels,
|
65
|
+
headerFormat: header_format,
|
66
|
+
tooltipHtml: tooltip_html,
|
67
|
+
useHTML: use_html,
|
68
|
+
minPointSize: min_point_size,
|
69
|
+
maxPointSize: max_point_size,
|
70
|
+
innerSize: inner_size_format,
|
71
|
+
zMin: z_min,
|
72
|
+
startAngle: start_angle,
|
73
|
+
}.to_json.html_safe
|
74
|
+
end
|
75
|
+
|
76
|
+
def classname
|
77
|
+
generate_classname("pb_circle_chart")
|
78
|
+
end
|
79
|
+
end
|
80
|
+
end
|
81
|
+
end
|