playbook_ui 4.13.0 → 4.16.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/README.md +0 -1
- data/app/pb_kits/playbook/_playbook.scss +7 -1
- data/app/pb_kits/playbook/data/menu.yml +7 -0
- data/app/pb_kits/playbook/index.js +6 -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
- metadata +96 -10
- 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
@@ -1 +1,3 @@
|
|
1
|
-
Line graphs are used to show changes in data over time. The default height of line 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.
|
1
|
+
Line graphs are used to show changes in data over time. The default height of line 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>.
|
@@ -16,11 +16,11 @@
|
|
16
16
|
}] %>
|
17
17
|
|
18
18
|
<%= pb_rails("line_graph", props: {
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
19
|
+
id: "line-default",
|
20
|
+
gradient: false,
|
21
|
+
chart_data: data,
|
22
|
+
x_axis_categories:['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
|
23
|
+
title: 'Solar Employment Growth by Sector, 2010-2016',
|
24
|
+
subtitle: 'Source: thesolarfoundation.com',
|
25
|
+
axis_title: 'Number of Employees'
|
26
|
+
}) %>
|
@@ -23,7 +23,7 @@ const LineGraphDefault = () => (
|
|
23
23
|
<LineGraph
|
24
24
|
axisTitle="Number of Employees"
|
25
25
|
chartData={data}
|
26
|
-
id="
|
26
|
+
id="line-default"
|
27
27
|
subTitle="Source: thesolarfoundation.com"
|
28
28
|
title="Solar Employment Growth by Sector, 2010-2016"
|
29
29
|
xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']}
|
@@ -0,0 +1,26 @@
|
|
1
|
+
<% data = [{
|
2
|
+
name: 'Number of Installations',
|
3
|
+
data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
|
4
|
+
}] %>
|
5
|
+
|
6
|
+
<%= pb_rails("line_graph", props: {
|
7
|
+
id: "line-fixed-height",
|
8
|
+
gradient: false,
|
9
|
+
chart_data: data,
|
10
|
+
x_axis_categories:['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
|
11
|
+
title: 'Fixed Height (300px)',
|
12
|
+
axis_title: 'Number of Employees',
|
13
|
+
height: '300'
|
14
|
+
}) %>
|
15
|
+
|
16
|
+
<br /><br />
|
17
|
+
|
18
|
+
<%= pb_rails("line_graph", props: {
|
19
|
+
id: "line-precentage-height",
|
20
|
+
gradient: false,
|
21
|
+
chart_data: data,
|
22
|
+
x_axis_categories:['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
|
23
|
+
title: 'Percentage Height (50%)',
|
24
|
+
axis_title: 'Number of Employees',
|
25
|
+
height: '50%'
|
26
|
+
}) %>
|
@@ -0,0 +1,35 @@
|
|
1
|
+
import React from 'react'
|
2
|
+
import { LineGraph } from '../../'
|
3
|
+
|
4
|
+
const data = [{
|
5
|
+
name: 'Number of Installations',
|
6
|
+
data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175],
|
7
|
+
}]
|
8
|
+
|
9
|
+
const LineGraphDefault = () => (
|
10
|
+
<div>
|
11
|
+
<LineGraph
|
12
|
+
axisTitle="Number of Employees"
|
13
|
+
chartData={data}
|
14
|
+
id="line-fixed-height"
|
15
|
+
title="Fixed Height (300px)"
|
16
|
+
xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']}
|
17
|
+
yAxisMin={0}
|
18
|
+
/>
|
19
|
+
|
20
|
+
<br />
|
21
|
+
<br />
|
22
|
+
|
23
|
+
<LineGraph
|
24
|
+
axisTitle="Number of Employees"
|
25
|
+
chartData={data}
|
26
|
+
height="50%"
|
27
|
+
id="line-percentage-height"
|
28
|
+
title="Percentage Height (50%)"
|
29
|
+
xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']}
|
30
|
+
yAxisMin={0}
|
31
|
+
/>
|
32
|
+
</div>
|
33
|
+
)
|
34
|
+
|
35
|
+
export default LineGraphDefault
|
@@ -0,0 +1,15 @@
|
|
1
|
+
<% data = [{
|
2
|
+
name: 'Number of Installations',
|
3
|
+
data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
|
4
|
+
}] %>
|
5
|
+
|
6
|
+
<%= pb_rails("line_graph", props: {
|
7
|
+
id: "line-test-2",
|
8
|
+
gradient: false,
|
9
|
+
chart_data: data,
|
10
|
+
x_axis_categories:['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug'],
|
11
|
+
title: 'Line Graph with Legend',
|
12
|
+
axis_title: 'Number of Employees',
|
13
|
+
legend: true
|
14
|
+
}) %>
|
15
|
+
|
@@ -0,0 +1,23 @@
|
|
1
|
+
import React from 'react'
|
2
|
+
import { LineGraph } from '../..'
|
3
|
+
|
4
|
+
const data = [{
|
5
|
+
name: 'Number of Installations',
|
6
|
+
data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175],
|
7
|
+
}]
|
8
|
+
|
9
|
+
const LineGraphLegend = () => (
|
10
|
+
<div>
|
11
|
+
<LineGraph
|
12
|
+
axisTitle="Number of Employees"
|
13
|
+
chartData={data}
|
14
|
+
id="bar-test-2"
|
15
|
+
legend
|
16
|
+
title="Line Graph with Legend"
|
17
|
+
xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug']}
|
18
|
+
yAxisMin={0}
|
19
|
+
/>
|
20
|
+
</div>
|
21
|
+
)
|
22
|
+
|
23
|
+
export default LineGraphLegend
|
@@ -19,6 +19,10 @@ 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
|
+
prop :legend, type: Playbook::Props::Boolean,
|
23
|
+
default: false
|
24
|
+
prop :height
|
25
|
+
|
22
26
|
def chart_type
|
23
27
|
gradient ? "area" : "line"
|
24
28
|
end
|
@@ -35,6 +39,8 @@ module Playbook
|
|
35
39
|
xAxisCategories: x_axis_categories,
|
36
40
|
yAxisMin: y_axis_min,
|
37
41
|
yAxisMax: y_axis_max,
|
42
|
+
legend: legend,
|
43
|
+
height: height,
|
38
44
|
}.to_json.html_safe
|
39
45
|
end
|
40
46
|
|
@@ -1,21 +1,38 @@
|
|
1
|
+
/* @flow */
|
2
|
+
|
1
3
|
import React from 'react'
|
2
|
-
import
|
4
|
+
import classnames from 'classnames'
|
3
5
|
|
4
|
-
|
5
|
-
|
6
|
-
|
7
|
-
}
|
6
|
+
import {
|
7
|
+
buildDataProps,
|
8
|
+
} from '../utilities/props'
|
8
9
|
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
</div>
|
15
|
-
)
|
16
|
-
}
|
10
|
+
type OnlineStatusProps = {
|
11
|
+
className?: String,
|
12
|
+
data?: object,
|
13
|
+
id?: String,
|
14
|
+
status?: "online" | "offline" | "away",
|
17
15
|
}
|
18
16
|
|
19
|
-
OnlineStatus
|
17
|
+
const OnlineStatus = ({
|
18
|
+
id,
|
19
|
+
data = {},
|
20
|
+
className,
|
21
|
+
status = 'offline',
|
22
|
+
}: OnlineStatusProps) => {
|
23
|
+
const dataProps = buildDataProps(data)
|
24
|
+
const css = classnames([
|
25
|
+
`pb_online_status_kit_${status}`,
|
26
|
+
className,
|
27
|
+
])
|
28
|
+
|
29
|
+
return (
|
30
|
+
<div
|
31
|
+
{...dataProps}
|
32
|
+
className={css}
|
33
|
+
id={id}
|
34
|
+
/>
|
35
|
+
)
|
36
|
+
}
|
20
37
|
|
21
38
|
export default OnlineStatus
|
@@ -0,0 +1,19 @@
|
|
1
|
+
import React from 'react'
|
2
|
+
import { OnlineStatus } from '../../'
|
3
|
+
|
4
|
+
const OnlineStatusDefault = () => (
|
5
|
+
<>
|
6
|
+
<OnlineStatus status="offline" />
|
7
|
+
|
8
|
+
<br />
|
9
|
+
|
10
|
+
<OnlineStatus status="online" />
|
11
|
+
|
12
|
+
<br />
|
13
|
+
|
14
|
+
<OnlineStatus status="away" />
|
15
|
+
|
16
|
+
</>
|
17
|
+
)
|
18
|
+
|
19
|
+
export default OnlineStatusDefault
|
@@ -0,0 +1 @@
|
|
1
|
+
export { default as OnlineStatusDefault } from './_online_status_default.jsx'
|
@@ -26,14 +26,22 @@ type PbPopoverProps = {
|
|
26
26
|
shouldClosePopover?: () => Boolean,
|
27
27
|
} & PopperProps
|
28
28
|
|
29
|
-
|
30
|
-
|
31
|
-
|
29
|
+
// Prop enabled default modifiers here
|
30
|
+
// https://popper.js.org/docs/v2/modifiers
|
31
|
+
|
32
|
+
const POPOVER_MODIFIERS = {
|
33
|
+
offset: { //https://popper.js.org/docs/v2/modifiers/offset/
|
34
|
+
enabled: true,
|
35
|
+
name: 'offset',
|
36
|
+
options: {
|
37
|
+
offset: [0, 8],
|
38
|
+
},
|
39
|
+
phase: 'main',
|
32
40
|
},
|
33
41
|
}
|
34
42
|
|
35
43
|
const popoverModifiers = ({ modifiers, offset }) => {
|
36
|
-
return offset ?
|
44
|
+
return offset ? modifiers.concat([POPOVER_MODIFIERS.offset]) : modifiers
|
37
45
|
}
|
38
46
|
|
39
47
|
const Popover = ({
|
@@ -43,23 +51,21 @@ const Popover = ({
|
|
43
51
|
offset,
|
44
52
|
placement,
|
45
53
|
referenceElement,
|
46
|
-
show,
|
47
54
|
}: PbPopoverProps) => (
|
48
55
|
<Popper
|
49
56
|
modifiers={popoverModifiers({ modifiers, offset })}
|
50
57
|
placement={placement}
|
51
58
|
referenceElement={referenceElement}
|
52
59
|
>
|
53
|
-
{({ placement, ref,
|
54
|
-
scheduleUpdate()
|
60
|
+
{({ placement, ref, style }) => {
|
55
61
|
return (
|
56
62
|
<div
|
57
|
-
className={buildCss('pb_popover_kit'
|
63
|
+
className={`${buildCss('pb_popover_kit')} ${className}`}
|
58
64
|
data-placement={placement}
|
59
65
|
ref={ref}
|
60
66
|
style={style}
|
61
67
|
>
|
62
|
-
<div className={buildCss('popover_tooltip'
|
68
|
+
<div className={`${buildCss('popover_tooltip')} show`}>
|
63
69
|
<Card shadow="deeper">
|
64
70
|
{ children }
|
65
71
|
</Card>
|
@@ -73,13 +79,13 @@ const Popover = ({
|
|
73
79
|
|
74
80
|
export default class PbReactPopover extends React.Component<PbPopoverProps> {
|
75
81
|
static defaultProps = {
|
76
|
-
modifiers:
|
82
|
+
modifiers: [],
|
77
83
|
offset: false,
|
78
84
|
placement: 'left',
|
79
85
|
portal: 'body',
|
80
86
|
show: false,
|
81
87
|
shouldClosePopover: noop,
|
82
|
-
usePortal:
|
88
|
+
usePortal: true,
|
83
89
|
}
|
84
90
|
|
85
91
|
componentDidMount() {
|
@@ -134,7 +140,6 @@ export default class PbReactPopover extends React.Component
|
|
134
140
|
offset={offset}
|
135
141
|
placement={placement}
|
136
142
|
referenceElement={referenceElement}
|
137
|
-
show={show}
|
138
143
|
>
|
139
144
|
{children}
|
140
145
|
</Popover>
|
@@ -156,13 +161,15 @@ export default class PbReactPopover extends React.Component
|
|
156
161
|
)}
|
157
162
|
</PopperReference>
|
158
163
|
</If>
|
159
|
-
<If condition={
|
160
|
-
{
|
161
|
-
|
162
|
-
|
163
|
-
|
164
|
-
|
165
|
-
|
164
|
+
<If condition={show}>
|
165
|
+
<If condition={usePortal}>
|
166
|
+
{ReactDOM.createPortal(
|
167
|
+
popoverComponent,
|
168
|
+
document.querySelector(portal)
|
169
|
+
)}
|
170
|
+
<Else />
|
171
|
+
{popoverComponent}
|
172
|
+
</If>
|
166
173
|
</If>
|
167
174
|
</PopperManager>
|
168
175
|
)
|
@@ -1,7 +1,6 @@
|
|
1
1
|
examples:
|
2
2
|
rails:
|
3
3
|
- popover_default: Default
|
4
|
-
- popover_with_button: With Button
|
5
4
|
- popover_list: With any children
|
6
5
|
- popover_click_outside: Close on click outside
|
7
6
|
- popover_click_inside: Close on click inside
|
@@ -9,9 +8,7 @@ examples:
|
|
9
8
|
|
10
9
|
react:
|
11
10
|
- popover_default: Default
|
12
|
-
- popover_with_button: With Button
|
13
11
|
- popover_list: With any children
|
14
|
-
- popover_portal: Use with `portal` option
|
15
12
|
- popover_click_outside: Close on click outside
|
16
13
|
- popover_click_inside: Close on click inside
|
17
14
|
- popover_click_any: Close on click anywhere
|
@@ -1,7 +1,5 @@
|
|
1
1
|
export { default as PopoverDefault } from './_popover_default.jsx'
|
2
|
-
export { default as PopoverWithButton } from './_popover_with_button.jsx'
|
3
2
|
export { default as PopoverList } from './_popover_list.jsx'
|
4
|
-
export { default as PopoverPortal } from './_popover_portal.jsx'
|
5
3
|
export { default as PopoverClickOutside } from './_popover_click_outside.jsx'
|
6
4
|
export { default as PopoverClickInside } from './_popover_click_inside.jsx'
|
7
5
|
export { default as PopoverClickAny } from './_popover_click_any.jsx'
|
@@ -0,0 +1,35 @@
|
|
1
|
+
/* @flow */
|
2
|
+
|
3
|
+
import React from 'react'
|
4
|
+
import classnames from 'classnames'
|
5
|
+
import { buildCss } from '../utilities/props'
|
6
|
+
|
7
|
+
type ProgressStepProps = {
|
8
|
+
className?: String,
|
9
|
+
data?: String,
|
10
|
+
id?: String,
|
11
|
+
children?: Array<React.ReactChild>,
|
12
|
+
orientation?: 'horizontal' | 'vertical',
|
13
|
+
icon?: Boolean,
|
14
|
+
dark?: Boolean,
|
15
|
+
}
|
16
|
+
|
17
|
+
const ProgressStep = ({
|
18
|
+
className,
|
19
|
+
children,
|
20
|
+
orientation = 'horizontal',
|
21
|
+
icon = false,
|
22
|
+
dark = false,
|
23
|
+
}: ProgressStepProps) => {
|
24
|
+
const iconStyle = icon === true ? 'icon' : ''
|
25
|
+
const darkStyle = dark === true ? 'dark' : ''
|
26
|
+
const progressStepCss = buildCss('pb_progress_step_kit', orientation, iconStyle, darkStyle)
|
27
|
+
|
28
|
+
return (
|
29
|
+
<div className={classnames(progressStepCss, className)}>
|
30
|
+
{children}
|
31
|
+
</div>
|
32
|
+
)
|
33
|
+
}
|
34
|
+
|
35
|
+
export default ProgressStep
|
@@ -0,0 +1,388 @@
|
|
1
|
+
@import "../tokens/colors";
|
2
|
+
@import "../tokens/spacing";
|
3
|
+
@import "../tokens/opacity";
|
4
|
+
@import "../tokens/typography";
|
5
|
+
|
6
|
+
$pb_progress_step_circle_size: 14px;
|
7
|
+
$pb_progress_step_connector_width: 3px;
|
8
|
+
$pb_progress_step_connector_height_from_top: $pb_progress_step_circle_size/2 - $pb_progress_step_connector_width/2 + 2;
|
9
|
+
$pb_progress_step_connector_height_from_left: $pb_progress_step_circle_size/2 - $pb_progress_step_connector_width/2;
|
10
|
+
|
11
|
+
@mixin pb_progress_step_circle($background_color, $border_color, $border_width, $icon_color) {
|
12
|
+
display: flex;
|
13
|
+
flex-shrink: 0;
|
14
|
+
justify-content: center;
|
15
|
+
align-items: center;
|
16
|
+
padding-right: 0;
|
17
|
+
overflow: hidden;
|
18
|
+
height: $pb_progress_step_circle_size;
|
19
|
+
width: $pb_progress_step_circle_size;
|
20
|
+
background-color: $background_color;
|
21
|
+
color: $icon_color;
|
22
|
+
font-size: $font_smallest;
|
23
|
+
border-radius: $pb_progress_step_circle_size/2;
|
24
|
+
border: $border_width solid $border_color;
|
25
|
+
margin: 2px;
|
26
|
+
}
|
27
|
+
|
28
|
+
@mixin pb_progress_step_line($width, $height, $color, $margin) {
|
29
|
+
width: $width;
|
30
|
+
height: $height;
|
31
|
+
background-color: $color;
|
32
|
+
margin: $margin;
|
33
|
+
flex-grow: 1;
|
34
|
+
}
|
35
|
+
|
36
|
+
@mixin pb_progress_step_item_wrapper_horizontal {
|
37
|
+
display: flex;
|
38
|
+
flex-direction: row;
|
39
|
+
width: 100%;
|
40
|
+
}
|
41
|
+
|
42
|
+
@mixin pb_progress_step_item_wrapper_flex($flex_direction, $align_items, $align_self) {
|
43
|
+
display: flex;
|
44
|
+
flex-direction: $flex_direction;
|
45
|
+
align-items: $align_items;
|
46
|
+
align-self: $align_self;
|
47
|
+
}
|
48
|
+
|
49
|
+
[class^=pb_progress_step_kit] {
|
50
|
+
&[class*=_icon] {
|
51
|
+
[class^=pb_progress_step_item_kit_complete] {
|
52
|
+
[class=pb_progress_step_item_step_circle] {
|
53
|
+
svg {
|
54
|
+
width: $pb_progress_step_circle_size;
|
55
|
+
height: $pb_progress_step_circle_size - 2;
|
56
|
+
color: $white;
|
57
|
+
}
|
58
|
+
}
|
59
|
+
}
|
60
|
+
}
|
61
|
+
&[class*=_horizontal] {
|
62
|
+
@include pb_progress_step_item_wrapper_horizontal;
|
63
|
+
>div {
|
64
|
+
&:first-child {
|
65
|
+
[class^=pb_progress_step_item] {
|
66
|
+
&[class*=_connector_first], &[class*=_step_connector_first] {
|
67
|
+
opacity: 0;
|
68
|
+
}
|
69
|
+
}
|
70
|
+
}
|
71
|
+
&:last-child {
|
72
|
+
[class^=pb_progress_step_item] {
|
73
|
+
&[class*=_connector_second], &[class*=_step_connector_second] {
|
74
|
+
opacity: 0;
|
75
|
+
}
|
76
|
+
}
|
77
|
+
}
|
78
|
+
}
|
79
|
+
[class*=pb_progress_step_item_kit] {
|
80
|
+
&[class*=_complete] {
|
81
|
+
flex-basis: 100%;
|
82
|
+
[class=pb_progress_step_item_wrapper] {
|
83
|
+
@include pb_progress_step_item_wrapper_horizontal;
|
84
|
+
[class^=pb_progress_step_item] {
|
85
|
+
&[class*=_connector_first], &[class*=_connector_second] {
|
86
|
+
@include pb_progress_step_line($space_sm, $pb_progress_step_connector_width, $primary, $pb_progress_step_connector_height_from_top 0 0 0);
|
87
|
+
}
|
88
|
+
}
|
89
|
+
[class=pb_progress_step_item_step_wrapper] {
|
90
|
+
@include pb_progress_step_item_wrapper_flex(column, center, auto);
|
91
|
+
[class=pb_progress_step_item_step] {
|
92
|
+
@include pb_progress_step_item_wrapper_horizontal;
|
93
|
+
[class^=pb_progress_step_item] {
|
94
|
+
&[class*=_step_connector_first], &[class*=_step_connector_second] {
|
95
|
+
@include pb_progress_step_line($space_sm, $pb_progress_step_connector_width, $primary, $pb_progress_step_connector_height_from_top 0 0 0);
|
96
|
+
}
|
97
|
+
&[class*=_step_circle] {
|
98
|
+
@include pb_progress_step_circle($primary, $primary, 2px, $primary);
|
99
|
+
}
|
100
|
+
}
|
101
|
+
}
|
102
|
+
}
|
103
|
+
}
|
104
|
+
}
|
105
|
+
&[class*=_active] {
|
106
|
+
flex-basis: 100%;
|
107
|
+
[class=pb_progress_step_item_wrapper] {
|
108
|
+
@include pb_progress_step_item_wrapper_horizontal;
|
109
|
+
[class^=pb_progress_step_item] {
|
110
|
+
&[class*=_connector_first] {
|
111
|
+
@include pb_progress_step_line($space_sm, $pb_progress_step_connector_width, $primary, $pb_progress_step_connector_height_from_top 0 0 0);
|
112
|
+
}
|
113
|
+
&[class*=_connector_second] {
|
114
|
+
@include pb_progress_step_line($space_sm, $pb_progress_step_connector_width, $border_light, $pb_progress_step_connector_height_from_top 0 0 0);
|
115
|
+
}
|
116
|
+
}
|
117
|
+
[class=pb_progress_step_item_step_wrapper] {
|
118
|
+
@include pb_progress_step_item_wrapper_flex(column, center, auto);
|
119
|
+
[class=pb_progress_step_item_step] {
|
120
|
+
@include pb_progress_step_item_wrapper_horizontal;
|
121
|
+
[class^=pb_progress_step_item] {
|
122
|
+
&[class*=_step_connector_first] {
|
123
|
+
@include pb_progress_step_line($space_sm, $pb_progress_step_connector_width, $primary, $pb_progress_step_connector_height_from_top 0 0 0);
|
124
|
+
}
|
125
|
+
&[class*=_step_circle] {
|
126
|
+
@include pb_progress_step_circle($white, $primary, 2px, $white);
|
127
|
+
svg {
|
128
|
+
display: none;
|
129
|
+
}
|
130
|
+
}
|
131
|
+
&[class*=_step_connector_second] {
|
132
|
+
@include pb_progress_step_line($space_sm, $pb_progress_step_connector_width, $border_light, $pb_progress_step_connector_height_from_top 0 0 0);
|
133
|
+
}
|
134
|
+
}
|
135
|
+
}
|
136
|
+
}
|
137
|
+
}
|
138
|
+
}
|
139
|
+
&[class*=_inactive] {
|
140
|
+
flex-basis: 100%;
|
141
|
+
[class=pb_progress_step_item_wrapper] {
|
142
|
+
@include pb_progress_step_item_wrapper_horizontal;
|
143
|
+
[class^=pb_progress_step_item] {
|
144
|
+
&[class*=_connector_first], &[class*=_connector_second] {
|
145
|
+
@include pb_progress_step_line($space_sm, $pb_progress_step_connector_width, $border_light, $pb_progress_step_connector_height_from_top 0 0 0);
|
146
|
+
}
|
147
|
+
}
|
148
|
+
[class=pb_progress_step_item_step_wrapper] {
|
149
|
+
@include pb_progress_step_item_wrapper_flex(column, center, auto);
|
150
|
+
[class=pb_progress_step_item_step] {
|
151
|
+
@include pb_progress_step_item_wrapper_horizontal;
|
152
|
+
[class^=pb_progress_step_item] {
|
153
|
+
&[class*=_step_connector_first], &[class*=_step_connector_second] {
|
154
|
+
@include pb_progress_step_line($space_sm, $pb_progress_step_connector_width, $border_light, $pb_progress_step_connector_height_from_top 0 0 0);
|
155
|
+
}
|
156
|
+
&[class*=_step_circle] {
|
157
|
+
@include pb_progress_step_circle($border_light, $border_light, 2px, $border_light);
|
158
|
+
}
|
159
|
+
}
|
160
|
+
}
|
161
|
+
}
|
162
|
+
}
|
163
|
+
}
|
164
|
+
}
|
165
|
+
&[class*=_dark] {
|
166
|
+
[class*=pb_progress_step_item_kit] {
|
167
|
+
&[class*=_active] {
|
168
|
+
[class^=pb_progress_step_item] {
|
169
|
+
&[class*=_connector_first] {
|
170
|
+
@include pb_progress_step_line($space_sm, $pb_progress_step_connector_width, $primary, $pb_progress_step_connector_height_from_top 0 0 0);
|
171
|
+
}
|
172
|
+
&[class*=_connector_second] {
|
173
|
+
@include pb_progress_step_line($space_sm, $pb_progress_step_connector_width, $border_dark, $pb_progress_step_connector_height_from_top 0 0 0);
|
174
|
+
}
|
175
|
+
}
|
176
|
+
[class=pb_progress_step_item_step_wrapper] {
|
177
|
+
[class=pb_progress_step_item_step] {
|
178
|
+
[class^=pb_progress_step_item] {
|
179
|
+
&[class*=_step_connector_first] {
|
180
|
+
@include pb_progress_step_line($space_sm, $pb_progress_step_connector_width, $primary, $pb_progress_step_connector_height_from_top 0 0 0);
|
181
|
+
}
|
182
|
+
&[class*=_step_circle] {
|
183
|
+
@include pb_progress_step_circle($bg_dark, $primary, 2px, $bg_dark);
|
184
|
+
svg {
|
185
|
+
display: none;
|
186
|
+
}
|
187
|
+
}
|
188
|
+
&[class*=_step_connector_second] {
|
189
|
+
@include pb_progress_step_line($space_sm, $pb_progress_step_connector_width, $border_dark, $pb_progress_step_connector_height_from_top 0 0 0);
|
190
|
+
}
|
191
|
+
}
|
192
|
+
}
|
193
|
+
}
|
194
|
+
}
|
195
|
+
&[class*=_inactive] {
|
196
|
+
[class=pb_progress_step_item_wrapper] {
|
197
|
+
[class^=pb_progress_step_item] {
|
198
|
+
&[class*=_connector_first], &[class*=_connector_second] {
|
199
|
+
@include pb_progress_step_line($space_sm, $pb_progress_step_connector_width, $border_dark, $pb_progress_step_connector_height_from_top 0 0 0);
|
200
|
+
}
|
201
|
+
}
|
202
|
+
[class=pb_progress_step_item_step_wrapper] {
|
203
|
+
[class=pb_progress_step_item_step] {
|
204
|
+
[class^=pb_progress_step_item] {
|
205
|
+
&[class*=_step_connector_first], &[class*=_step_connector_second] {
|
206
|
+
@include pb_progress_step_line($space_sm, $pb_progress_step_connector_width, $border_dark, $pb_progress_step_connector_height_from_top 0 0 0);
|
207
|
+
}
|
208
|
+
&[class*=_step_circle] {
|
209
|
+
@include pb_progress_step_circle($border_dark, $border_dark, 0px, $border_dark);
|
210
|
+
svg {
|
211
|
+
display: none;
|
212
|
+
}
|
213
|
+
}
|
214
|
+
}
|
215
|
+
}
|
216
|
+
}
|
217
|
+
}
|
218
|
+
}
|
219
|
+
}
|
220
|
+
}
|
221
|
+
}
|
222
|
+
&[class*=_vertical] {
|
223
|
+
@include pb_progress_step_item_wrapper_flex(column, flex-start, auto);
|
224
|
+
> div:first-child {
|
225
|
+
[class=pb_progress_step_item_wrapper] {
|
226
|
+
[class=pb_progress_step_item_connector_first] {
|
227
|
+
opacity: 0;
|
228
|
+
margin: 0 0 0 $pb_progress_step_connector_height_from_left;
|
229
|
+
}
|
230
|
+
[class=pb_progress_step_item_step_wrapper] {
|
231
|
+
[class=pb_progress_step_item_step] {
|
232
|
+
> div:first-child {
|
233
|
+
opacity: 0;
|
234
|
+
}
|
235
|
+
}
|
236
|
+
}
|
237
|
+
}
|
238
|
+
}
|
239
|
+
>div:last-child {
|
240
|
+
[class=pb_progress_step_item_wrapper] {
|
241
|
+
[class=pb_progress_step_item_connector_second] {
|
242
|
+
opacity: 0;
|
243
|
+
}
|
244
|
+
[class=pb_progress_step_item_step_wrapper] {
|
245
|
+
[class=pb_progress_step_item_step] {
|
246
|
+
> div:last-child {
|
247
|
+
opacity: 0;
|
248
|
+
}
|
249
|
+
}
|
250
|
+
}
|
251
|
+
}
|
252
|
+
}
|
253
|
+
[class*=pb_progress_step_item_kit] {
|
254
|
+
&[class*=_complete] {
|
255
|
+
flex-basis: 100%;
|
256
|
+
[class=pb_progress_step_item_wrapper] {
|
257
|
+
@include pb_progress_step_item_wrapper_flex(column, baseline, auto);
|
258
|
+
[class=pb_progress_step_item_connector_second] {
|
259
|
+
@include pb_progress_step_line($pb_progress_step_connector_width, $space_md, $primary, 0 0 0 $pb_progress_step_connector_height_from_top);
|
260
|
+
}
|
261
|
+
[class=pb_progress_step_item_step_wrapper] {
|
262
|
+
@include pb_progress_step_item_wrapper_flex(row, flex-start, auto);
|
263
|
+
[class=pb_progress_step_item_step] {
|
264
|
+
@include pb_progress_step_item_wrapper_flex(column, center, stretch);
|
265
|
+
margin-right: 4px;
|
266
|
+
[class^=pb_progress_step_item] {
|
267
|
+
&[class*=_step_connector_first] {
|
268
|
+
display: none;
|
269
|
+
}
|
270
|
+
&[class*=_step_circle] {
|
271
|
+
@include pb_progress_step_circle($primary, $primary, 2px, $primary);
|
272
|
+
}
|
273
|
+
&[class*=_step_connector_second] {
|
274
|
+
@include pb_progress_step_line($pb_progress_step_connector_width, 100%, $primary, 0);
|
275
|
+
}
|
276
|
+
}
|
277
|
+
}
|
278
|
+
}
|
279
|
+
}
|
280
|
+
}
|
281
|
+
&[class*=_active] {
|
282
|
+
flex-basis: 100%;
|
283
|
+
[class=pb_progress_step_item_wrapper] {
|
284
|
+
@include pb_progress_step_item_wrapper_flex(column, baseline, auto);
|
285
|
+
[class=pb_progress_step_item_connector_second] {
|
286
|
+
@include pb_progress_step_line($pb_progress_step_connector_width, $space_md, $border_light, 0 0 0 $pb_progress_step_connector_height_from_top);
|
287
|
+
}
|
288
|
+
[class=pb_progress_step_item_step_wrapper] {
|
289
|
+
@include pb_progress_step_item_wrapper_flex(row, flex-start, auto);
|
290
|
+
[class=pb_progress_step_item_step] {
|
291
|
+
@include pb_progress_step_item_wrapper_flex(column, center, stretch);
|
292
|
+
margin-right: 4px;
|
293
|
+
[class^=pb_progress_step_item] {
|
294
|
+
&[class*=_step_connector_first] {
|
295
|
+
display: none;
|
296
|
+
}
|
297
|
+
&[class*=_step_circle] {
|
298
|
+
@include pb_progress_step_circle($white, $primary, 2px, $white);
|
299
|
+
svg {
|
300
|
+
display: none;
|
301
|
+
}
|
302
|
+
}
|
303
|
+
&[class*=_step_connector_second] {
|
304
|
+
@include pb_progress_step_line($pb_progress_step_connector_width, 100%, $border_light, 0);
|
305
|
+
}
|
306
|
+
}
|
307
|
+
}
|
308
|
+
}
|
309
|
+
}
|
310
|
+
}
|
311
|
+
&[class*=_inactive] {
|
312
|
+
flex-basis: 100%;
|
313
|
+
[class=pb_progress_step_item_wrapper] {
|
314
|
+
@include pb_progress_step_item_wrapper_flex(column, baseline, auto);
|
315
|
+
[class=pb_progress_step_item_connector_second] {
|
316
|
+
@include pb_progress_step_line($pb_progress_step_connector_width, $space_md, $border_light, 0 0 0 $pb_progress_step_connector_height_from_top);
|
317
|
+
}
|
318
|
+
[class=pb_progress_step_item_step_wrapper] {
|
319
|
+
@include pb_progress_step_item_wrapper_flex(row, flex-start, auto);
|
320
|
+
[class=pb_progress_step_item_step] {
|
321
|
+
@include pb_progress_step_item_wrapper_flex(column, center, stretch);
|
322
|
+
margin-right: 4px;
|
323
|
+
[class^=pb_progress_step_item] {
|
324
|
+
&[class*=_step_connector_first] {
|
325
|
+
display: none;
|
326
|
+
}
|
327
|
+
&[class*=_step_circle] {
|
328
|
+
@include pb_progress_step_circle($border_light, $border_light, 2px, $border_light);
|
329
|
+
}
|
330
|
+
&[class*=_step_connector_second] {
|
331
|
+
@include pb_progress_step_line($pb_progress_step_connector_width, 100%, $border_light, 0);
|
332
|
+
}
|
333
|
+
}
|
334
|
+
}
|
335
|
+
}
|
336
|
+
}
|
337
|
+
}
|
338
|
+
}
|
339
|
+
&[class*=_dark] {
|
340
|
+
[class^=pb_progress_step_item_kit] {
|
341
|
+
&[class*=_active] {
|
342
|
+
[class=pb_progress_step_item_wrapper] {
|
343
|
+
[class=pb_progress_step_item_connector_second] {
|
344
|
+
@include pb_progress_step_line($pb_progress_step_connector_width, $space_md, $border_dark, 0 0 0 $pb_progress_step_connector_height_from_top);
|
345
|
+
}
|
346
|
+
[class=pb_progress_step_item_step_wrapper] {
|
347
|
+
[class=pb_progress_step_item_step] {
|
348
|
+
[class^=pb_progress_step_item] {
|
349
|
+
&[class*=_step_circle] {
|
350
|
+
@include pb_progress_step_circle(transparent, $primary, 2px, $bg_dark);
|
351
|
+
svg {
|
352
|
+
display: none;
|
353
|
+
}
|
354
|
+
}
|
355
|
+
&[class*=_step_connector_second] {
|
356
|
+
@include pb_progress_step_line($pb_progress_step_connector_width, 100%, $border_dark, 0);
|
357
|
+
}
|
358
|
+
}
|
359
|
+
}
|
360
|
+
}
|
361
|
+
}
|
362
|
+
}
|
363
|
+
&[class*=_inactive] {
|
364
|
+
[class=pb_progress_step_item_wrapper] {
|
365
|
+
[class=pb_progress_step_item_connector_second] {
|
366
|
+
@include pb_progress_step_line($pb_progress_step_connector_width, $space_md, $border_dark, 0 0 0 $pb_progress_step_connector_height_from_top);
|
367
|
+
}
|
368
|
+
[class=pb_progress_step_item_step_wrapper] {
|
369
|
+
[class=pb_progress_step_item_step] {
|
370
|
+
[class^=pb_progress_step_item] {
|
371
|
+
&[class*=_step_circle] {
|
372
|
+
@include pb_progress_step_circle($border_dark, $border_dark, 0px, $border_dark);
|
373
|
+
svg {
|
374
|
+
display: none;
|
375
|
+
}
|
376
|
+
}
|
377
|
+
&[class*=_step_connector_second] {
|
378
|
+
@include pb_progress_step_line($pb_progress_step_connector_width, 100%, $border_dark, 0);
|
379
|
+
}
|
380
|
+
}
|
381
|
+
}
|
382
|
+
}
|
383
|
+
}
|
384
|
+
}
|
385
|
+
}
|
386
|
+
}
|
387
|
+
}
|
388
|
+
}
|