playbook_ui 13.15.0.pre.alpha.PLAY10831873 → 13.15.0.pre.alpha.reactselectbump581876
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/pb_fixed_confirmation_toast/_fixed_confirmation_toast.tsx +30 -44
- data/app/pb_kits/playbook/pb_flex/_flex.tsx +4 -4
- data/app/pb_kits/playbook/pb_form_group/_form_group.tsx +2 -3
- data/app/pb_kits/playbook/pb_form_pill/_form_pill.tsx +4 -7
- data/app/pb_kits/playbook/pb_gauge/_gauge.tsx +10 -10
- data/app/pb_kits/playbook/pb_home_address_street/_home_address_street.tsx +9 -10
- data/app/pb_kits/playbook/pb_icon_stat_value/_icon_stat_value.tsx +2 -3
- data/app/pb_kits/playbook/pb_icon_value/_icon_value.tsx +2 -3
- data/dist/playbook-rails.js +14 -6
- data/lib/playbook/version.rb +1 -1
- metadata +1 -1
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 1ca676b218e6956f950563cede091218e594c685e9c902ba0e5b7478e0561c1c
|
4
|
+
data.tar.gz: af5307c638dc31401f477054c274923745611d3c1568d28c3d26cf0129912953
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: fb7968ecdf0f3d18fbd18a6f55111189137d5007b73b6fb0a00f52749430de3b439877539dfb156ffd847ca3d34de035cc13bd74055c42c21f8d1f86f621fe4b
|
7
|
+
data.tar.gz: 1e0bc3be07289cc06e6143304203cd20cd3e831e5cbe604f05a8e5229688a9240166a618293537a70ae2f34ef276604c0aa2e987f453d16554683bf7a146b689
|
@@ -2,8 +2,7 @@ import React, { useEffect, useState } from "react";
|
|
2
2
|
import classnames from "classnames";
|
3
3
|
|
4
4
|
import { globalProps } from "../utilities/globalProps";
|
5
|
-
import { buildHtmlProps } from
|
6
|
-
import { VoidCallback } from "../types";
|
5
|
+
import { buildHtmlProps } from '../utilities/props'
|
7
6
|
|
8
7
|
import Icon from "../pb_icon/_icon";
|
9
8
|
import Title from "../pb_title/_title";
|
@@ -16,23 +15,23 @@ const iconMap = {
|
|
16
15
|
};
|
17
16
|
|
18
17
|
type FixedConfirmationToastProps = {
|
19
|
-
autoClose?: number
|
20
|
-
children?: React.ReactChild[] | React.ReactChild
|
21
|
-
className?: string
|
22
|
-
closeable?: boolean
|
23
|
-
data?: string
|
24
|
-
horizontal?: "right" | "left" | "center"
|
25
|
-
htmlOptions?: {
|
26
|
-
id?: string
|
27
|
-
multiLine?: boolean
|
28
|
-
onClose?:
|
29
|
-
open?: boolean
|
30
|
-
status?: "success" | "error" | "neutral" | "tip"
|
31
|
-
text?: string
|
32
|
-
vertical?: "top" | "bottom"
|
33
|
-
}
|
18
|
+
autoClose?: number,
|
19
|
+
children?: React.ReactChild[] | React.ReactChild,
|
20
|
+
className?: string,
|
21
|
+
closeable?: boolean,
|
22
|
+
data?: string,
|
23
|
+
horizontal?: "right" | "left" | "center",
|
24
|
+
htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
|
25
|
+
id?: string,
|
26
|
+
multiLine?: boolean,
|
27
|
+
onClose?: () => void,
|
28
|
+
open?: boolean,
|
29
|
+
status?: "success" | "error" | "neutral" | "tip",
|
30
|
+
text?: string,
|
31
|
+
vertical?: "top" | "bottom",
|
32
|
+
}
|
34
33
|
|
35
|
-
const FixedConfirmationToast = (props: FixedConfirmationToastProps)
|
34
|
+
const FixedConfirmationToast = (props: FixedConfirmationToastProps) => {
|
36
35
|
const [showToast, toggleToast] = useState(true);
|
37
36
|
const {
|
38
37
|
autoClose = 0,
|
@@ -42,7 +41,7 @@ const FixedConfirmationToast = (props: FixedConfirmationToastProps): React.React
|
|
42
41
|
horizontal,
|
43
42
|
htmlOptions = {},
|
44
43
|
multiLine = false,
|
45
|
-
onClose = () =>
|
44
|
+
onClose = () => { },
|
46
45
|
open = true,
|
47
46
|
status = "neutral",
|
48
47
|
text,
|
@@ -66,7 +65,7 @@ const FixedConfirmationToast = (props: FixedConfirmationToastProps): React.React
|
|
66
65
|
onClose();
|
67
66
|
}, autoClose);
|
68
67
|
}
|
69
|
-
}
|
68
|
+
}
|
70
69
|
|
71
70
|
useEffect(() => {
|
72
71
|
toggleToast(open);
|
@@ -81,35 +80,22 @@ const FixedConfirmationToast = (props: FixedConfirmationToastProps): React.React
|
|
81
80
|
return (
|
82
81
|
<>
|
83
82
|
{showToast && (
|
84
|
-
<div
|
85
|
-
|
86
|
-
onClick={handleClick}
|
87
|
-
{...htmlProps}
|
88
|
-
>
|
89
|
-
{icon && (
|
90
|
-
<Icon
|
91
|
-
className="pb_icon"
|
92
|
-
fixedWidth
|
93
|
-
icon={icon}
|
94
|
-
/>
|
95
|
-
)}
|
83
|
+
<div className={css} onClick={handleClick} {...htmlProps}>
|
84
|
+
{icon && <Icon className="pb_icon" fixedWidth icon={icon} />}
|
96
85
|
|
97
|
-
{
|
98
|
-
|
86
|
+
{
|
87
|
+
children && children ||
|
88
|
+
text && (
|
99
89
|
<Title
|
100
|
-
|
101
|
-
|
102
|
-
|
90
|
+
className="pb_fixed_confirmation_toast_text"
|
91
|
+
size={4}
|
92
|
+
text={text}
|
103
93
|
/>
|
104
|
-
)
|
94
|
+
)
|
95
|
+
}
|
105
96
|
|
106
97
|
{closeable && (
|
107
|
-
<Icon
|
108
|
-
className="pb_icon"
|
109
|
-
cursor="pointer"
|
110
|
-
fixedWidth={false}
|
111
|
-
icon="times"
|
112
|
-
/>
|
98
|
+
<Icon className="pb_icon" cursor="pointer" fixedWidth={false} icon="times" />
|
113
99
|
)}
|
114
100
|
</div>
|
115
101
|
)}
|
@@ -2,12 +2,12 @@ import React from 'react'
|
|
2
2
|
import classnames from 'classnames'
|
3
3
|
import { buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
|
4
4
|
import { GlobalProps, globalProps } from '../utilities/globalProps'
|
5
|
-
import {
|
5
|
+
import { Sizes } from '../types'
|
6
6
|
|
7
7
|
type FlexProps = {
|
8
8
|
children: React.ReactChild[] | React.ReactNode,
|
9
9
|
className?: string,
|
10
|
-
data?:
|
10
|
+
data?: object,
|
11
11
|
horizontal?: "left" | "center" | "right" | "stretch" | "none",
|
12
12
|
justify?: "start" | "center" | "end" | "around" | "between" | "evenly" | "none",
|
13
13
|
htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
|
@@ -25,7 +25,7 @@ type FlexProps = {
|
|
25
25
|
alignSelf?: "start" | "end" | "center" | "stretch" | "none"
|
26
26
|
} & GlobalProps
|
27
27
|
|
28
|
-
const Flex = (props: FlexProps)
|
28
|
+
const Flex = (props: FlexProps) => {
|
29
29
|
const {
|
30
30
|
align = 'none',
|
31
31
|
children,
|
@@ -45,7 +45,7 @@ const Flex = (props: FlexProps): React.ReactElement => {
|
|
45
45
|
wrap = false,
|
46
46
|
alignSelf = 'none',
|
47
47
|
} = props
|
48
|
-
|
48
|
+
|
49
49
|
const orientationClass =
|
50
50
|
orientation !== undefined ? `orientation_${orientation}` : ''
|
51
51
|
const justifyClass =
|
@@ -2,19 +2,18 @@ import React from 'react'
|
|
2
2
|
import classnames from 'classnames'
|
3
3
|
import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
|
4
4
|
import { globalProps } from '../utilities/globalProps'
|
5
|
-
import { GenericObject } from '../types'
|
6
5
|
|
7
6
|
type FormGroupProps = {
|
8
7
|
aria?: {[key: string]: string},
|
9
8
|
children?: Node,
|
10
9
|
className?: string,
|
11
|
-
data?:
|
10
|
+
data?: object,
|
12
11
|
fullWidth?: boolean,
|
13
12
|
htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
|
14
13
|
id?: string,
|
15
14
|
}
|
16
15
|
|
17
|
-
const FormGroup = (props: FormGroupProps)
|
16
|
+
const FormGroup = (props: FormGroupProps) => {
|
18
17
|
const {
|
19
18
|
aria = {},
|
20
19
|
className,
|
@@ -22,16 +22,16 @@ type FormPillProps = {
|
|
22
22
|
onClick?: React.MouseEventHandler<HTMLSpanElement>,
|
23
23
|
onMouseDown?: React.MouseEventHandler<HTMLSpanElement>,
|
24
24
|
onTouchEnd?: React.TouchEventHandler<HTMLSpanElement>,
|
25
|
-
},
|
25
|
+
},
|
26
26
|
} & GlobalProps
|
27
|
-
const FormPill = (props: FormPillProps)
|
27
|
+
const FormPill = (props: FormPillProps) => {
|
28
28
|
const {
|
29
29
|
className,
|
30
30
|
htmlOptions = {},
|
31
31
|
id,
|
32
32
|
text,
|
33
33
|
name,
|
34
|
-
onClick = () =>
|
34
|
+
onClick = () => {},
|
35
35
|
avatarUrl,
|
36
36
|
closeProps = {},
|
37
37
|
size = '',
|
@@ -48,10 +48,7 @@ const FormPill = (props: FormPillProps): React.ReactElement => {
|
|
48
48
|
const htmlProps = buildHtmlProps(htmlOptions)
|
49
49
|
|
50
50
|
return (
|
51
|
-
<div className={css}
|
52
|
-
id={id}
|
53
|
-
{...htmlProps}
|
54
|
-
>
|
51
|
+
<div className={css} id={id} {...htmlProps}>
|
55
52
|
{name &&
|
56
53
|
<>
|
57
54
|
<Avatar
|
@@ -12,13 +12,12 @@ import typography from "../tokens/exports/_typography.scss";
|
|
12
12
|
|
13
13
|
import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from "../utilities/props";
|
14
14
|
import { globalProps } from "../utilities/globalProps";
|
15
|
-
import { GenericObject } from "../types";
|
16
15
|
|
17
16
|
type GaugeProps = {
|
18
17
|
aria: { [key: string]: string };
|
19
18
|
className?: string;
|
20
19
|
chartData?: { name: string; value: number[] | number }[];
|
21
|
-
dark?:
|
20
|
+
dark?: Boolean;
|
22
21
|
data?: { [key: string]: string };
|
23
22
|
disableAnimation?: boolean;
|
24
23
|
fullCircle?: boolean;
|
@@ -34,12 +33,13 @@ type GaugeProps = {
|
|
34
33
|
title?: string;
|
35
34
|
tooltipHtml?: string;
|
36
35
|
colors: string[];
|
37
|
-
minorTickInterval
|
36
|
+
minorTickInterval: any;
|
38
37
|
circumference: number[];
|
39
38
|
};
|
40
39
|
|
41
40
|
const Gauge = ({
|
42
41
|
aria = {},
|
42
|
+
className,
|
43
43
|
chartData,
|
44
44
|
dark = false,
|
45
45
|
data = {},
|
@@ -61,9 +61,9 @@ const Gauge = ({
|
|
61
61
|
minorTickInterval = null,
|
62
62
|
circumference = fullCircle ? [0, 360] : [-100, 100],
|
63
63
|
...props
|
64
|
-
}: GaugeProps)
|
64
|
+
}: GaugeProps) => {
|
65
65
|
const ariaProps = buildAriaProps(aria);
|
66
|
-
|
66
|
+
const dataProps = buildDataProps(data)
|
67
67
|
const htmlProps = buildHtmlProps(htmlOptions);
|
68
68
|
highchartsMore(Highcharts);
|
69
69
|
solidGauge(Highcharts);
|
@@ -89,7 +89,7 @@ const Gauge = ({
|
|
89
89
|
const [options, setOptions] = useState({});
|
90
90
|
|
91
91
|
useEffect(() => {
|
92
|
-
const formattedChartData = chartData.map((obj:
|
92
|
+
const formattedChartData = chartData.map((obj: any) => {
|
93
93
|
obj.y = obj.value;
|
94
94
|
delete obj.value;
|
95
95
|
return obj;
|
@@ -185,20 +185,20 @@ const Gauge = ({
|
|
185
185
|
.querySelectorAll(".fix")
|
186
186
|
.forEach((fix) => fix.setAttribute("y", "38"));
|
187
187
|
}
|
188
|
-
|
188
|
+
|
189
189
|
}, [chartData]);
|
190
190
|
|
191
191
|
return (
|
192
192
|
<HighchartsReact
|
193
|
-
|
193
|
+
containerProps={{
|
194
194
|
className: classnames(css, globalProps(props)),
|
195
195
|
id: id,
|
196
196
|
...ariaProps,
|
197
197
|
...dataProps,
|
198
198
|
...htmlProps,
|
199
199
|
}}
|
200
|
-
|
201
|
-
|
200
|
+
highcharts={Highcharts}
|
201
|
+
options={options}
|
202
202
|
/>
|
203
203
|
);
|
204
204
|
};
|
@@ -8,7 +8,6 @@ import Body from '../pb_body/_body'
|
|
8
8
|
import Hashtag from '../pb_hashtag/_hashtag'
|
9
9
|
import Title from '../pb_title/_title'
|
10
10
|
import { buildAriaProps, buildDataProps, buildHtmlProps } from '../utilities/props'
|
11
|
-
import { GenericObject } from '../types'
|
12
11
|
|
13
12
|
type HomeAddressStreetProps = {
|
14
13
|
aria?: { [key: string]: string },
|
@@ -29,7 +28,7 @@ type HomeAddressStreetProps = {
|
|
29
28
|
territory: string,
|
30
29
|
}
|
31
30
|
|
32
|
-
const HomeAddressStreet = (props: HomeAddressStreetProps)
|
31
|
+
const HomeAddressStreet = (props: HomeAddressStreetProps) => {
|
33
32
|
const {
|
34
33
|
address,
|
35
34
|
addressCont,
|
@@ -59,17 +58,17 @@ const HomeAddressStreet = (props: HomeAddressStreetProps): React.ReactElement =>
|
|
59
58
|
className
|
60
59
|
)
|
61
60
|
|
62
|
-
const dataProps:
|
63
|
-
const ariaProps:
|
61
|
+
const dataProps: { [key: string]: any } = buildDataProps(data)
|
62
|
+
const ariaProps: { [key: string]: any } = buildAriaProps(aria)
|
64
63
|
const htmlProps = buildHtmlProps(htmlOptions)
|
65
64
|
return (
|
66
|
-
<div
|
67
|
-
|
68
|
-
|
69
|
-
|
70
|
-
|
65
|
+
<div
|
66
|
+
className={classes(className, dark)}
|
67
|
+
{...ariaProps}
|
68
|
+
{...dataProps}
|
69
|
+
{...htmlProps}
|
71
70
|
>
|
72
|
-
{emphasis == 'street' &&
|
71
|
+
{emphasis == 'street' &&
|
73
72
|
<div>
|
74
73
|
<Title
|
75
74
|
className="pb_home_address_street_address"
|
@@ -9,12 +9,11 @@ import Caption from '../pb_caption/_caption'
|
|
9
9
|
import Flex from '../pb_flex/_flex'
|
10
10
|
import IconCircle from '../pb_icon_circle/_icon_circle'
|
11
11
|
import Title from '../pb_title/_title'
|
12
|
-
import { GenericObject } from '../types'
|
13
12
|
|
14
13
|
type IconStatValueProps = {
|
15
14
|
aria?: { [key: string]: string },
|
16
15
|
className?: string,
|
17
|
-
data?:
|
16
|
+
data?: object,
|
18
17
|
dark?: boolean,
|
19
18
|
icon: string,
|
20
19
|
htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
|
@@ -35,7 +34,7 @@ type IconStatValueProps = {
|
|
35
34
|
| "green",
|
36
35
|
}
|
37
36
|
|
38
|
-
const IconStatValue = (props: IconStatValueProps)
|
37
|
+
const IconStatValue = (props: IconStatValueProps) => {
|
39
38
|
const {
|
40
39
|
aria = {},
|
41
40
|
className,
|
@@ -6,21 +6,20 @@ import { globalProps } from '../utilities/globalProps'
|
|
6
6
|
|
7
7
|
import Body from '../pb_body/_body'
|
8
8
|
import Icon from '../pb_icon/_icon'
|
9
|
-
import { GenericObject } from '../types'
|
10
9
|
|
11
10
|
type IconValueProps = {
|
12
11
|
align?: "left" | "center" | "right",
|
13
12
|
aria?: { [key: string]: string; },
|
14
13
|
className?: string,
|
15
14
|
dark?: boolean,
|
16
|
-
data?:
|
15
|
+
data?: object,
|
17
16
|
icon: string,
|
18
17
|
htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
|
19
18
|
id?: string,
|
20
19
|
text: string,
|
21
20
|
}
|
22
21
|
|
23
|
-
const IconValue = (props: IconValueProps)
|
22
|
+
const IconValue = (props: IconValueProps) => {
|
24
23
|
const {
|
25
24
|
align = 'left',
|
26
25
|
aria = {},
|