playbook_ui 2.8.7 → 2.8.8
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/app/pb_kits/playbook/packs/examples.js +3 -0
- data/app/pb_kits/playbook/packs/kits.js +1 -0
- data/app/pb_kits/playbook/pb_avatar/_avatar.jsx +25 -36
- data/app/pb_kits/playbook/pb_bar_graph/_bar_graph.jsx +54 -14
- data/app/pb_kits/playbook/pb_bar_graph/barGraphSettings.js +17 -17
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_default.html.erb +8 -1
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_default.jsx +30 -8
- data/app/pb_kits/playbook/pb_body/_body.jsx +46 -33
- data/app/pb_kits/playbook/pb_body/docs/_body_dark.jsx +3 -0
- data/app/pb_kits/playbook/pb_body/docs/_body_light.jsx +3 -0
- data/app/pb_kits/playbook/pb_button/_button.jsx +106 -37
- data/app/pb_kits/playbook/pb_button/docs/_button_accessibility.jsx +15 -0
- data/app/pb_kits/playbook/pb_button/docs/_button_block_content.jsx +14 -0
- data/app/pb_kits/playbook/pb_button/docs/_button_default.jsx +22 -0
- data/app/pb_kits/playbook/pb_button/docs/_button_default_dark.jsx +22 -0
- data/app/pb_kits/playbook/pb_button/docs/_button_full_width.jsx +13 -0
- data/app/pb_kits/playbook/pb_button/docs/_button_link.jsx +23 -0
- data/app/pb_kits/playbook/pb_button/docs/_button_loading.jsx +23 -0
- data/app/pb_kits/playbook/pb_button/docs/example.yml +8 -4
- data/app/pb_kits/playbook/pb_button/docs/index.js +7 -3
- data/app/pb_kits/playbook/pb_caption/_caption.jsx +31 -34
- data/app/pb_kits/playbook/pb_card/_card.jsx +35 -20
- data/app/pb_kits/playbook/pb_card/docs/_card_content.jsx +17 -0
- data/app/pb_kits/playbook/pb_card/docs/_card_padding.jsx +23 -0
- data/app/pb_kits/playbook/pb_card/docs/_card_selected.jsx +14 -0
- data/app/pb_kits/playbook/pb_card/docs/_card_shadow.jsx +23 -0
- data/app/pb_kits/playbook/pb_card/docs/example.yml +4 -0
- data/app/pb_kits/playbook/pb_card/docs/index.js +4 -0
- data/app/pb_kits/playbook/pb_currency/_currency.jsx +67 -18
- data/app/pb_kits/playbook/pb_currency/docs/_currency_default.jsx +14 -1
- data/app/pb_kits/playbook/pb_currency/docs/_currency_large.jsx +28 -0
- data/app/pb_kits/playbook/pb_currency/docs/example.yml +2 -3
- data/app/pb_kits/playbook/pb_currency/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_dashboard_value/docs/_dashboard_value_default.jsx +1 -3
- data/app/pb_kits/playbook/pb_dashboard_value/docs/example.yml +0 -2
- data/app/pb_kits/playbook/pb_date/docs/_date_default.jsx +1 -1
- data/app/pb_kits/playbook/pb_icon/docs/_icon_default.jsx +1 -1
- data/app/pb_kits/playbook/pb_icon_circle/_icon_circle.jsx +1 -3
- data/app/pb_kits/playbook/pb_icon_value/docs/_icon_value_default.jsx +1 -3
- data/app/pb_kits/playbook/pb_label_pill/docs/_label_pill_default.jsx +1 -3
- data/app/pb_kits/playbook/pb_label_value/docs/_label_value_default.jsx +1 -3
- data/app/pb_kits/playbook/pb_line_graph/_line_graph.jsx +57 -25
- data/app/pb_kits/playbook/pb_line_graph/docs/{_rails.html.erb → _line_graph_default.html.erb} +0 -0
- data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_default.jsx +34 -0
- data/app/pb_kits/playbook/pb_line_graph/docs/example.yml +5 -2
- data/app/pb_kits/playbook/pb_line_graph/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_line_graph/lineGraphSettings.js +9 -9
- data/app/pb_kits/playbook/pb_list/docs/_list_default.jsx +1 -5
- data/app/pb_kits/playbook/pb_message/docs/_message_default.jsx +1 -3
- data/app/pb_kits/playbook/pb_online_status/docs/_online_status_default.jsx +1 -3
- data/app/pb_kits/playbook/pb_owner/docs/_owner_default.jsx +1 -3
- data/app/pb_kits/playbook/pb_owner_phone/docs/_owner_phone_default.jsx +1 -3
- data/app/pb_kits/playbook/pb_phone/docs/_phone_default.jsx +1 -3
- data/app/pb_kits/playbook/pb_pill/_pill.jsx +22 -16
- data/app/pb_kits/playbook/pb_pill/docs/_pill_default.jsx +21 -1
- data/app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_default.jsx +1 -3
- data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_default.jsx +1 -3
- data/app/pb_kits/playbook/pb_source/docs/_source_default.jsx +1 -3
- data/app/pb_kits/playbook/pb_star_rating/docs/_star_rating_default.jsx +1 -3
- data/app/pb_kits/playbook/pb_stat_change/docs/_stat_change_default.jsx +1 -3
- data/app/pb_kits/playbook/pb_stat_value/docs/_stat_value_default.jsx +1 -3
- data/app/pb_kits/playbook/pb_table/docs/example.yml +10 -10
- data/app/pb_kits/playbook/pb_time/docs/_time_default.html.erb +4 -9
- data/app/pb_kits/playbook/pb_time/docs/_time_default.jsx +1 -3
- data/app/pb_kits/playbook/pb_time/docs/_time_timestamp.html.erb +16 -0
- data/app/pb_kits/playbook/pb_time/docs/example.yml +4 -5
- data/app/pb_kits/playbook/pb_time/time.rb +19 -7
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_default.jsx +1 -3
- data/app/pb_kits/playbook/pb_title/_title.jsx +41 -30
- data/app/pb_kits/playbook/pb_title/docs/_title_light.jsx +1 -0
- data/app/pb_kits/playbook/pb_title_count/_title_count.scss +2 -2
- data/app/pb_kits/playbook/pb_title_count/docs/_title_count_default.jsx +1 -3
- data/app/pb_kits/playbook/pb_title_count/title_count.rb +1 -1
- data/app/pb_kits/playbook/pb_title_detail/docs/_title_detail_default.jsx +1 -3
- data/app/pb_kits/playbook/pb_toggle/_toggle.html.erb +2 -2
- data/app/pb_kits/playbook/pb_toggle/_toggle.scss +1 -0
- data/app/pb_kits/playbook/pb_toggle/docs/_toggle_default.jsx +1 -4
- data/app/pb_kits/playbook/pb_toggle/docs/_toggle_name.html.erb +25 -0
- data/app/pb_kits/playbook/pb_toggle/docs/example.yml +1 -1
- data/app/pb_kits/playbook/pb_toggle/toggle.rb +28 -11
- data/app/pb_kits/playbook/pb_user/docs/_user_default.jsx +1 -3
- data/app/pb_kits/playbook/pb_user_badge/docs/_user_badge_default.jsx +1 -3
- data/app/pb_kits/playbook/pb_vertical_nav/docs/_default_nav.jsx +1 -5
- data/lib/generators/kit/templates/kit_jsx.erb.tt +7 -29
- data/lib/playbook/version.rb +1 -1
- metadata +19 -7
- data/app/pb_kits/playbook/pb_button/docs/_button_dark.jsx +0 -14
- data/app/pb_kits/playbook/pb_button/docs/_button_light.jsx +0 -14
- data/app/pb_kits/playbook/pb_button/docs/_button_sizes.jsx +0 -14
- data/app/pb_kits/playbook/pb_line_graph/docs/_react.html.erb +0 -2
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 61c58765172511056b14d6c3ecf08d6770d79ec343011f55da235ef43d337737
|
4
|
+
data.tar.gz: f7789d51bc27282142e0ad087f0b06337988409370aeaf1ab3be7c89a8e4b665
|
5
5
|
SHA512:
|
6
|
-
metadata.gz: '
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: '068062e848cb483ce0e9c174a37eb4f3ba203ed06e113a7d79338267aa69b51d6f02580e6a443c76a757ca03f0053dd5f250a095a0b0f94a7fe23b11e808aef4'
|
7
|
+
data.tar.gz: 522f98246b9a15eced512ab65ceb75b155c9796514fc9822882b28f823674a210725749c998bf56c271fe4d24ccaafa3c0a69b07be5a34be5038bc23cb336d84
|
@@ -45,6 +45,9 @@ WebpackerReact.setup (input);
|
|
45
45
|
import * as BarGraph from "pb_bar_graph/docs";
|
46
46
|
WebpackerReact.setup (BarGraph);
|
47
47
|
|
48
|
+
import * as LineGraph from "pb_line_graph/docs";
|
49
|
+
WebpackerReact.setup (LineGraph);
|
50
|
+
|
48
51
|
import * as Icon from "pb_icon/docs";
|
49
52
|
WebpackerReact.setup (Icon);
|
50
53
|
|
@@ -35,46 +35,35 @@ const PbStatus = ({ size, status } : { size: String, status: String }) => (
|
|
35
35
|
<div className={`pb_online_status_kit_${status} size_${size}`}/>
|
36
36
|
)
|
37
37
|
|
38
|
-
|
39
|
-
|
40
|
-
|
41
|
-
|
42
|
-
|
43
|
-
|
44
|
-
|
45
|
-
|
46
|
-
|
47
|
-
|
48
|
-
|
49
|
-
|
50
|
-
size,
|
51
|
-
status,
|
52
|
-
url
|
53
|
-
} = this.props
|
38
|
+
const Avatar = ({
|
39
|
+
className,
|
40
|
+
name=null,
|
41
|
+
size='md',
|
42
|
+
status,
|
43
|
+
url
|
44
|
+
}: AvatarProps) => {
|
45
|
+
const css = classnames([
|
46
|
+
`pb_avatar_kit`,
|
47
|
+
`avatar_${size}`,
|
48
|
+
className,
|
49
|
+
])
|
54
50
|
|
55
|
-
|
56
|
-
|
57
|
-
|
58
|
-
|
59
|
-
|
60
|
-
|
61
|
-
return (
|
62
|
-
<div className={css}
|
51
|
+
return (
|
52
|
+
<div className={css}
|
53
|
+
data-initials={initials(name)}
|
54
|
+
>
|
55
|
+
<div
|
56
|
+
className="avatar_wrapper"
|
63
57
|
data-initials={initials(name)}
|
64
58
|
>
|
65
|
-
|
66
|
-
className="avatar_wrapper"
|
67
|
-
data-initials={initials(name)}
|
68
|
-
>
|
69
|
-
{image(url, name)}
|
70
|
-
</div>
|
71
|
-
<PbStatus
|
72
|
-
size={size}
|
73
|
-
status={status}
|
74
|
-
/>
|
59
|
+
{image(url, name)}
|
75
60
|
</div>
|
76
|
-
|
77
|
-
|
61
|
+
<PbStatus
|
62
|
+
size={size}
|
63
|
+
status={status}
|
64
|
+
/>
|
65
|
+
</div>
|
66
|
+
)
|
78
67
|
}
|
79
68
|
|
80
69
|
export default Avatar
|
@@ -1,21 +1,61 @@
|
|
1
|
-
|
2
|
-
import PropTypes from "prop-types";
|
1
|
+
/* @flow */
|
3
2
|
|
4
|
-
|
5
|
-
|
6
|
-
|
7
|
-
|
3
|
+
import React from 'react'
|
4
|
+
|
5
|
+
import pbChart from "../plugins/pb_chart_plugin.js"
|
6
|
+
|
7
|
+
type BarGraphProps = {
|
8
|
+
axisTitle: String,
|
9
|
+
chartData: Array<{
|
10
|
+
name: String,
|
11
|
+
data: Array<Number>,
|
12
|
+
}>,
|
13
|
+
className?: String,
|
14
|
+
id: Number,
|
15
|
+
pointStart: Number,
|
16
|
+
subTitle?: String,
|
17
|
+
title: String,
|
18
|
+
}
|
19
|
+
|
20
|
+
export default class BarGraph extends React.Component<BarGraphProps> {
|
21
|
+
static defaultProps = {
|
22
|
+
className: 'pb_bar_graph',
|
23
|
+
type: 'column',
|
24
|
+
}
|
25
|
+
|
26
|
+
componentDidMount() {
|
27
|
+
const {
|
28
|
+
axisTitle,
|
29
|
+
className,
|
30
|
+
chartData,
|
31
|
+
id,
|
32
|
+
pointStart,
|
33
|
+
subTitle,
|
34
|
+
title,
|
35
|
+
type,
|
36
|
+
} = this.props
|
37
|
+
|
38
|
+
new pbChart(`.${className}`, {
|
39
|
+
axisTitle: axisTitle,
|
40
|
+
chartData: chartData,
|
41
|
+
id: id,
|
42
|
+
pointStart: pointStart,
|
43
|
+
subtitle: subTitle,
|
44
|
+
type,
|
45
|
+
title: title,
|
46
|
+
})
|
47
|
+
}
|
48
|
+
|
49
|
+
props: BarGraphProps
|
8
50
|
|
9
|
-
class BarGraph extends React.Component {
|
10
51
|
render() {
|
52
|
+
const { className, id } = this.props
|
53
|
+
|
11
54
|
return (
|
12
|
-
<div
|
13
|
-
|
14
|
-
|
55
|
+
<div
|
56
|
+
className={className}
|
57
|
+
id={id}
|
58
|
+
/>
|
15
59
|
)
|
16
60
|
}
|
17
61
|
}
|
18
|
-
|
19
|
-
BarGraph.propTypes = propTypes;
|
20
|
-
|
21
|
-
export default BarGraph;
|
@@ -1,24 +1,24 @@
|
|
1
|
-
import commonSettings from "../pb_dashboard/commonSettings.js"
|
1
|
+
import commonSettings from "../pb_dashboard/commonSettings.js"
|
2
2
|
|
3
3
|
const sizeColumns = function(highchart) {
|
4
|
-
let column = highchart.plotOptions.column
|
5
|
-
let series = highchart.plotOptions.series
|
4
|
+
let column = highchart.plotOptions.column
|
5
|
+
let series = highchart.plotOptions.series
|
6
6
|
|
7
|
-
column.borderRadius = 0
|
8
|
-
column.pointPadding = 0.3
|
9
|
-
column.groupPadding = 0.2
|
7
|
+
column.borderRadius = 0
|
8
|
+
column.pointPadding = 0.3
|
9
|
+
column.groupPadding = 0.2
|
10
10
|
|
11
|
-
series.borderWidth = 0
|
12
|
-
series.shadow = false
|
13
|
-
series.pointPadding = 0.3
|
14
|
-
series.groupPadding = 0.2
|
15
|
-
series.borderWidth = 0
|
16
|
-
series.shadow = false
|
17
|
-
}
|
11
|
+
series.borderWidth = 0
|
12
|
+
series.shadow = false
|
13
|
+
series.pointPadding = 0.3
|
14
|
+
series.groupPadding = 0.2
|
15
|
+
series.borderWidth = 0
|
16
|
+
series.shadow = false
|
17
|
+
}
|
18
18
|
|
19
19
|
const pbBarGraph = function(highchart) {
|
20
|
-
commonSettings(highchart)
|
21
|
-
sizeColumns(highchart)
|
22
|
-
}
|
20
|
+
commonSettings(highchart)
|
21
|
+
sizeColumns(highchart)
|
22
|
+
}
|
23
23
|
|
24
|
-
export default pbBarGraph
|
24
|
+
export default pbBarGraph
|
@@ -15,6 +15,13 @@
|
|
15
15
|
data: [18111]
|
16
16
|
}] %>
|
17
17
|
|
18
|
-
<%= pb_rails("bar_graph", props: {
|
18
|
+
<%= pb_rails("bar_graph", props: {
|
19
|
+
axis_title: 'Number of Employees',
|
20
|
+
chart_data: data,
|
21
|
+
id: "bar-test",
|
22
|
+
point_start: "2012",
|
23
|
+
subtitle: 'Source: thesolarfoundation.com',
|
24
|
+
title: 'Solar Employment Growth by Sector, 2010-2016'
|
25
|
+
}) %>
|
19
26
|
|
20
27
|
|
@@ -1,12 +1,34 @@
|
|
1
1
|
import React from "react"
|
2
2
|
import BarGraph from "../_bar_graph.jsx"
|
3
3
|
|
4
|
-
|
5
|
-
|
6
|
-
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
}
|
4
|
+
const chartData = [{
|
5
|
+
name: 'Installation',
|
6
|
+
data: [154175]
|
7
|
+
}, {
|
8
|
+
name: 'Manufacturing',
|
9
|
+
data: [40434]
|
10
|
+
}, {
|
11
|
+
name: 'Sales & Distribution',
|
12
|
+
data: [39387]
|
13
|
+
}, {
|
14
|
+
name: 'Project Development',
|
15
|
+
data: [34227]
|
16
|
+
}, {
|
17
|
+
name: 'Other',
|
18
|
+
data: [18111]
|
19
|
+
}]
|
11
20
|
|
12
|
-
|
21
|
+
const BarGraphDefault = () => (
|
22
|
+
<div>
|
23
|
+
<BarGraph
|
24
|
+
axisTitle="Number of Employees"
|
25
|
+
chartData={chartData}
|
26
|
+
id="bar-test"
|
27
|
+
pointStart={2012}
|
28
|
+
subTitle="Source: thesolarfoundation.com"
|
29
|
+
title="Solar Employment Growth by Sector, 2010-2016"
|
30
|
+
/>
|
31
|
+
</div>
|
32
|
+
)
|
33
|
+
|
34
|
+
export default BarGraphDefault
|
@@ -1,36 +1,49 @@
|
|
1
|
-
|
2
|
-
|
3
|
-
|
4
|
-
|
5
|
-
|
6
|
-
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
color: "",
|
15
|
-
dark: false
|
16
|
-
};
|
17
|
-
|
18
|
-
class Body extends Component {
|
19
|
-
render() {
|
20
|
-
const { tag, text, color, dark } = this.props;
|
21
|
-
// If color prop is not an empty string then render the given class
|
22
|
-
const colorstyle = color !== "" ? `_${color}` : "";
|
23
|
-
|
24
|
-
// If dark prop is true add the '-dark' class
|
25
|
-
const themestyle = dark === true ? "_dark" : "";
|
26
|
-
|
27
|
-
const Tag = `${tag}`;
|
28
|
-
|
29
|
-
return <Tag className={"body" + colorstyle + themestyle}>{text}</Tag>;
|
30
|
-
}
|
1
|
+
/* @flow */
|
2
|
+
|
3
|
+
import React from 'react'
|
4
|
+
import classnames from 'classnames'
|
5
|
+
|
6
|
+
type BodyProps = {
|
7
|
+
className?: String,
|
8
|
+
children?: Array<React.ReactChild>,
|
9
|
+
color: 'light' | 'lighter',
|
10
|
+
dark?: Boolean,
|
11
|
+
status?: 'negative' | 'positive',
|
12
|
+
tag: String,
|
13
|
+
text?: String,
|
31
14
|
}
|
32
15
|
|
33
|
-
|
34
|
-
|
16
|
+
const bodyCSS = ({
|
17
|
+
color='light',
|
18
|
+
dark=false,
|
19
|
+
status='',
|
35
20
|
|
36
|
-
|
21
|
+
}: BodyProps) => {
|
22
|
+
|
23
|
+
const colorStyle = color !== '' ? `_${color}` : ''
|
24
|
+
|
25
|
+
const themeStyle = dark === true ? '_dark' : ''
|
26
|
+
|
27
|
+
const statusStyle = status !== '' ? `_${status}` : ''
|
28
|
+
|
29
|
+
return 'pb_body_kit' + colorStyle + themeStyle + statusStyle
|
30
|
+
}
|
31
|
+
|
32
|
+
const Body = (props: BodyProps) => {
|
33
|
+
const {
|
34
|
+
className,
|
35
|
+
children,
|
36
|
+
text,
|
37
|
+
tag='p',
|
38
|
+
} = props
|
39
|
+
|
40
|
+
const Tag = `${tag}`
|
41
|
+
|
42
|
+
return (
|
43
|
+
<Tag className={classnames(bodyCSS(props), className)}>
|
44
|
+
{ text || children }
|
45
|
+
</Tag>
|
46
|
+
)
|
47
|
+
}
|
48
|
+
|
49
|
+
export default Body
|
@@ -7,6 +7,9 @@ function BodyDark() {
|
|
7
7
|
<Body dark text="I am a body kit (Default)" />
|
8
8
|
<Body dark color="light" text="I am a body kit (Light)" />
|
9
9
|
<Body dark color="lighter" text="I am a body kit (Lighter)" />
|
10
|
+
|
11
|
+
<Body dark status="negative" text="I am a body kit (Status: negative)" />
|
12
|
+
<Body dark status="positive" text="I am a body kit (Status: positive)" />
|
10
13
|
</div>
|
11
14
|
)
|
12
15
|
}
|
@@ -7,6 +7,9 @@ function BodyLight() {
|
|
7
7
|
<Body text="I am a body kit (Default)" />
|
8
8
|
<Body color="light" text="I am a body kit (Light)" />
|
9
9
|
<Body color="lighter" text="I am a body kit (Lighter)" />
|
10
|
+
|
11
|
+
<Body status="negative" text="I am a body kit (Status: negative)" />
|
12
|
+
<Body status="positive" text="I am a body kit (Status: positive)" />
|
10
13
|
</div>
|
11
14
|
)
|
12
15
|
}
|
@@ -1,40 +1,109 @@
|
|
1
|
-
|
2
|
-
|
3
|
-
|
4
|
-
|
5
|
-
|
6
|
-
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
|
29
|
-
|
30
|
-
|
31
|
-
|
32
|
-
|
33
|
-
|
34
|
-
}
|
1
|
+
/* @flow */
|
2
|
+
|
3
|
+
import React, { Component } from 'react'
|
4
|
+
import PropTypes from 'prop-types'
|
5
|
+
|
6
|
+
type ButtonPropTypes = {
|
7
|
+
aria?: {
|
8
|
+
label: String,
|
9
|
+
},
|
10
|
+
children?: Array<React.ReactChild>,
|
11
|
+
dark: Boolean,
|
12
|
+
disabled?: Boolean,
|
13
|
+
fixedWidth?: Boolean,
|
14
|
+
fullWidth?: Boolean,
|
15
|
+
icon?: String,
|
16
|
+
loading?: Boolean,
|
17
|
+
newWindow?: Boolean,
|
18
|
+
size: 'large' | 'medium' | 'small',
|
19
|
+
text?: String,
|
20
|
+
type: 'inline' | null,
|
21
|
+
variant: 'primary' | 'secondary' | 'link',
|
22
|
+
wrapperClass: String,
|
23
|
+
}
|
24
|
+
|
25
|
+
const buttonClassName = (props: ButtonPropTypes) => {
|
26
|
+
const {
|
27
|
+
dark=false,
|
28
|
+
disabled=false,
|
29
|
+
fullWidth=false,
|
30
|
+
loading=false,
|
31
|
+
size=null,
|
32
|
+
type='inline',
|
33
|
+
variant='primary',
|
34
|
+
} = props
|
35
|
+
|
36
|
+
let className = 'pb_button_kit'
|
37
|
+
|
38
|
+
className += `${variant !== null ? `_${variant}` : ''}`
|
39
|
+
className += `${type !== null ? `_${type}` : ''}`
|
40
|
+
className += `${size !== null ? `_${size}` : ''}`
|
41
|
+
className += `${dark === true ? '_dark' : ''}`
|
42
|
+
className += `${fullWidth ? '_block' : ''}`
|
43
|
+
className += disabled ? '_disabled' : '_enabled'
|
44
|
+
className += loading ? '_loading' : ''
|
45
|
+
|
46
|
+
return className
|
47
|
+
}
|
48
|
+
|
49
|
+
const buttonAriaProps = (props: ButtonPropTypes) => {
|
50
|
+
const { aria } = props
|
51
|
+
if(typeof aria !== "object") return {}
|
52
|
+
const { label } = aria
|
53
|
+
|
54
|
+
let ariaProps = {}
|
55
|
+
|
56
|
+
if(label !== null) ariaProps['aria-label'] = label
|
57
|
+
|
58
|
+
return ariaProps
|
35
59
|
}
|
36
60
|
|
37
|
-
Button
|
38
|
-
|
61
|
+
const Button = (props : ButtonPropTypes) => {
|
62
|
+
const {
|
63
|
+
aria={},
|
64
|
+
children,
|
65
|
+
icon=null,
|
66
|
+
loading=false,
|
67
|
+
link=null,
|
68
|
+
newWindow=false,
|
69
|
+
text,
|
70
|
+
} = props
|
71
|
+
|
72
|
+
const buttonAria = buttonAriaProps(props)
|
73
|
+
const css = buttonClassName(props)
|
74
|
+
const loadingIcon = <i className="pb_icon_kit far fa-spinner fa-fw fa-pulse loading-icon"/>
|
75
|
+
|
76
|
+
const content = (
|
77
|
+
<span className="pb_button_content">
|
78
|
+
<If condition={icon !== null}>
|
79
|
+
<i className={`pb_icon_kit far fa-${icon} fa-fw`}/>
|
80
|
+
</If>
|
81
|
+
<span>{text || children}</span>
|
82
|
+
</span>
|
83
|
+
)
|
84
|
+
|
85
|
+
return (
|
86
|
+
<If condition={link !== null}>
|
87
|
+
<a
|
88
|
+
{...buttonAria}
|
89
|
+
className={css}
|
90
|
+
href={link}
|
91
|
+
target={newWindow ? '_blank' : null}
|
92
|
+
>
|
93
|
+
<If condition={loading}>
|
94
|
+
{loadingIcon}
|
95
|
+
</If>
|
96
|
+
{content}
|
97
|
+
</a>
|
98
|
+
<Else/>
|
99
|
+
<button {...buttonAria} className={css}>
|
100
|
+
<If condition={loading}>
|
101
|
+
{loadingIcon}
|
102
|
+
</If>
|
103
|
+
{content}
|
104
|
+
</button>
|
105
|
+
</If>
|
106
|
+
)
|
107
|
+
}
|
39
108
|
|
40
|
-
export default Button
|
109
|
+
export default Button
|