playbook_ui 14.16.0.pre.rc.3 → 14.16.0.pre.rc.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/app/pb_kits/playbook/_playbook.scss +4 -2
- data/app/pb_kits/playbook/pb_empty_state/_empty_state.scss +38 -0
- data/app/pb_kits/playbook/pb_empty_state/_empty_state.tsx +213 -0
- data/app/pb_kits/playbook/pb_empty_state/docs/_empty_state_alignment.jsx +38 -0
- data/app/pb_kits/playbook/pb_empty_state/docs/_empty_state_default.jsx +17 -0
- data/app/pb_kits/playbook/pb_empty_state/docs/_empty_state_orientation.jsx +21 -0
- data/app/pb_kits/playbook/pb_empty_state/docs/_empty_state_size.jsx +35 -0
- data/app/pb_kits/playbook/pb_empty_state/docs/default_image/computer_fly_no_branding.svg +21 -0
- data/app/pb_kits/playbook/pb_empty_state/docs/default_image/utils.tsx +118 -0
- data/app/pb_kits/playbook/pb_empty_state/docs/example.yml +8 -0
- data/app/pb_kits/playbook/pb_empty_state/docs/index.js +4 -0
- data/app/pb_kits/playbook/pb_empty_state/empty_state.test.jsx +17 -0
- data/app/pb_kits/playbook/pb_textarea/textarea.html.erb +1 -5
- data/app/pb_kits/playbook/pb_time/time.html.erb +1 -5
- data/app/pb_kits/playbook/pb_title/title.html.erb +1 -6
- data/app/pb_kits/playbook/pb_toggle/toggle.html.erb +1 -6
- data/app/pb_kits/playbook/pb_tooltip/_tooltip.scss +2 -2
- data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_sizing.html.erb +22 -0
- data/app/pb_kits/playbook/pb_tooltip/docs/example.yml +1 -0
- data/app/pb_kits/playbook/pb_tooltip/tooltip.html.erb +7 -6
- data/app/pb_kits/playbook/pb_tooltip/tooltip.rb +32 -7
- data/app/pb_kits/playbook/tokens/_display.scss +3 -1
- data/app/pb_kits/playbook/utilities/_display.scss +6 -1
- data/app/pb_kits/playbook/utilities/test/globalProps/display.test.js +1 -1
- data/dist/chunks/{_typeahead-BzyvjExg.js → _typeahead-D720juMS.js} +1 -1
- data/dist/chunks/_weekday_stacked-D_IMHltv.js +45 -0
- data/dist/chunks/vendor.js +1 -1
- data/dist/menu.yml +8 -0
- data/dist/playbook-doc.js +1 -1
- data/dist/playbook-rails-react-bindings.js +1 -1
- data/dist/playbook-rails.js +1 -1
- data/dist/playbook.css +1 -1
- data/lib/playbook/display.rb +2 -2
- data/lib/playbook/version.rb +1 -1
- metadata +16 -4
- data/dist/chunks/_weekday_stacked-BjRQgfjn.js +0 -45
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 744d9783de045a36964d14b7e5bcc09c0950a071a0286c45ea0e9525801ccf8b
|
|
4
|
+
data.tar.gz: 87534bb53bd09eb65e1000e36222742c41d54157773e235c325d02a46013e175
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 9c073000efb16e70d339bbef30d4458ef4f6c425f4c2a4b3e6ad360ee9811fe669ba20ab526536b465c0f0a8f275b9fa5789be5bbaadaa0656376cf5fbae3128
|
|
7
|
+
data.tar.gz: 86b7d4d0e5d8672bae9f96b6197513142b1effec08c3b2b9af1d01baa7b0bd3ead2ccb0d7e296ea5e1daf7109285d84b77770cbb11cbe0a86b5f60f42157f21c
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
|
|
2
|
+
|
|
2
3
|
@import 'pb_advanced_table/advanced_table';
|
|
3
4
|
@import 'pb_avatar/avatar';
|
|
4
5
|
@import 'pb_background/background';
|
|
@@ -14,8 +15,8 @@
|
|
|
14
15
|
@import 'pb_circle_chart/circle_chart';
|
|
15
16
|
@import 'pb_circle_icon_button/circle_icon_button';
|
|
16
17
|
@import 'pb_collapsible/collapsible';
|
|
17
|
-
@import 'pb_copy_button/copy_button';
|
|
18
18
|
@import 'pb_contact/contact';
|
|
19
|
+
@import 'pb_copy_button/copy_button';
|
|
19
20
|
@import 'pb_currency/currency';
|
|
20
21
|
@import 'pb_dashboard_value/dashboard_value';
|
|
21
22
|
@import 'pb_date/date';
|
|
@@ -45,6 +46,7 @@
|
|
|
45
46
|
@import 'pb_highlight/highlight';
|
|
46
47
|
@import 'pb_home_address_street/home_address_street';
|
|
47
48
|
@import 'pb_icon/icon';
|
|
49
|
+
@import 'pb_icon_button/icon_button';
|
|
48
50
|
@import 'pb_icon_circle/icon_circle';
|
|
49
51
|
@import 'pb_icon_stat_value/icon_stat_value';
|
|
50
52
|
@import 'pb_icon_value/icon_value';
|
|
@@ -109,7 +111,7 @@
|
|
|
109
111
|
@import 'pb_user_badge/user_badge';
|
|
110
112
|
@import 'pb_walkthrough/walkthrough';
|
|
111
113
|
@import 'pb_weekday_stacked/weekday_stacked';
|
|
112
|
-
@import '
|
|
114
|
+
@import 'pb_empty_state/empty_state';
|
|
113
115
|
@import 'utilities/mixins';
|
|
114
116
|
@import 'utilities/spacing';
|
|
115
117
|
@import 'utilities/cursor';
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
.pb_empty_state_kit {
|
|
2
|
+
|
|
3
|
+
.sm-state-vertical {
|
|
4
|
+
width: 150px;
|
|
5
|
+
}
|
|
6
|
+
|
|
7
|
+
.md-state-vertical {
|
|
8
|
+
width: 300px;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
.lg-state-vertical {
|
|
12
|
+
width: 450px;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
.sm-state-horizontal {
|
|
16
|
+
width: max-content;
|
|
17
|
+
max-width: 400px;
|
|
18
|
+
.pb_flex_item_kit {
|
|
19
|
+
align-self: end;
|
|
20
|
+
}
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
.md-state-horizontal {
|
|
24
|
+
width: max-content;
|
|
25
|
+
max-width: 600px;
|
|
26
|
+
.pb_flex_item_kit {
|
|
27
|
+
align-self: end;
|
|
28
|
+
}
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
.lg-state-horizontal {
|
|
32
|
+
width: max-content;
|
|
33
|
+
.pb_flex_item_kit {
|
|
34
|
+
align-self: end;
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
}
|
|
@@ -0,0 +1,213 @@
|
|
|
1
|
+
|
|
2
|
+
import React from "react"
|
|
3
|
+
import ReactDOMServer from "react-dom/server"
|
|
4
|
+
import classnames from "classnames"
|
|
5
|
+
import { buildAriaProps, buildCss, buildDataProps } from "../utilities/props"
|
|
6
|
+
import { globalProps } from "../utilities/globalProps"
|
|
7
|
+
import Title from "../pb_title/_title"
|
|
8
|
+
import Body from "../pb_body/_body"
|
|
9
|
+
import Button from "../pb_button/_button"
|
|
10
|
+
import Detail from "../pb_detail/_detail"
|
|
11
|
+
import Flex from "../pb_flex/_flex"
|
|
12
|
+
import FlexItem from "../pb_flex/_flex_item"
|
|
13
|
+
import Image from "../pb_image/_image"
|
|
14
|
+
import computer from "./docs/default_image/utils"
|
|
15
|
+
|
|
16
|
+
type EventHandler = (React.MouseEventHandler<HTMLElement>)
|
|
17
|
+
|
|
18
|
+
type EmptyStateProps = {
|
|
19
|
+
aria?: { [key: string]: string },
|
|
20
|
+
alignment?: "center" | "left" | "right",
|
|
21
|
+
className?: string,
|
|
22
|
+
data?: { [key: string]: string },
|
|
23
|
+
description?: string,
|
|
24
|
+
header?: string,
|
|
25
|
+
id?: string,
|
|
26
|
+
image?: string,
|
|
27
|
+
linkButton?: string,
|
|
28
|
+
onLinkButtonClick?: EventHandler,
|
|
29
|
+
onPrimaryButtonClick?: EventHandler,
|
|
30
|
+
orientation?: "horizontal" | "vertical",
|
|
31
|
+
primaryButton?: string,
|
|
32
|
+
size?: "sm" | "md" | "lg",
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
const EmptyState = (props: EmptyStateProps) => {
|
|
36
|
+
const {
|
|
37
|
+
aria = {},
|
|
38
|
+
alignment = "center",
|
|
39
|
+
className,
|
|
40
|
+
data = {},
|
|
41
|
+
description,
|
|
42
|
+
header = "",
|
|
43
|
+
id,
|
|
44
|
+
image,
|
|
45
|
+
linkButton,
|
|
46
|
+
onLinkButtonClick,
|
|
47
|
+
onPrimaryButtonClick,
|
|
48
|
+
orientation = "vertical",
|
|
49
|
+
primaryButton,
|
|
50
|
+
size = "md",
|
|
51
|
+
} = props
|
|
52
|
+
|
|
53
|
+
const ariaProps = buildAriaProps(aria)
|
|
54
|
+
const dataProps = buildDataProps(data)
|
|
55
|
+
const classes = classnames(buildCss("pb_empty_state_kit"), globalProps(props), className)
|
|
56
|
+
|
|
57
|
+
const renderContent = () => {
|
|
58
|
+
const sizeConfigs = {
|
|
59
|
+
sm: {
|
|
60
|
+
vertical: {
|
|
61
|
+
imageWidth: "100px",
|
|
62
|
+
titleSize: 4,
|
|
63
|
+
titlePadding: "xxs",
|
|
64
|
+
descriptionPadding: "sm",
|
|
65
|
+
buttonSize: "sm",
|
|
66
|
+
buttonMargin: "xs",
|
|
67
|
+
scssClassName: "sm-state-vertical",
|
|
68
|
+
column: "column",
|
|
69
|
+
},
|
|
70
|
+
horizontal: {
|
|
71
|
+
imageWidth: "100px",
|
|
72
|
+
titleSize: 4,
|
|
73
|
+
titlePadding: "xxs",
|
|
74
|
+
descriptionPadding: "sm",
|
|
75
|
+
buttonSize: "sm",
|
|
76
|
+
buttonMargin: "xs",
|
|
77
|
+
scssClassName: "sm-state-horizontal",
|
|
78
|
+
column: "",
|
|
79
|
+
},
|
|
80
|
+
},
|
|
81
|
+
md: {
|
|
82
|
+
vertical: {
|
|
83
|
+
imageWidth: "140px",
|
|
84
|
+
titleSize: 3,
|
|
85
|
+
titlePadding: "xs",
|
|
86
|
+
descriptionPadding: "md",
|
|
87
|
+
buttonSize: "md",
|
|
88
|
+
buttonMargin: "sm",
|
|
89
|
+
scssClassName: "md-state-vertical",
|
|
90
|
+
column: "column",
|
|
91
|
+
},
|
|
92
|
+
horizontal: {
|
|
93
|
+
imageWidth: "140px",
|
|
94
|
+
titleSize: 3,
|
|
95
|
+
titlePadding: "xs",
|
|
96
|
+
descriptionPadding: "md",
|
|
97
|
+
buttonSize: "md",
|
|
98
|
+
buttonMargin: "sm",
|
|
99
|
+
scssClassName: "md-state-horizontal",
|
|
100
|
+
column: "",
|
|
101
|
+
},
|
|
102
|
+
},
|
|
103
|
+
lg: {
|
|
104
|
+
vertical: {
|
|
105
|
+
imageWidth: "100%",
|
|
106
|
+
titleSize: 1,
|
|
107
|
+
titlePadding: "sm",
|
|
108
|
+
descriptionPadding: "lg",
|
|
109
|
+
buttonSize: "md",
|
|
110
|
+
buttonMargin: "md",
|
|
111
|
+
scssClassName: "lg-state-vertical",
|
|
112
|
+
column: "column",
|
|
113
|
+
},
|
|
114
|
+
horizontal: {
|
|
115
|
+
imageWidth: "100%",
|
|
116
|
+
titleSize: 2,
|
|
117
|
+
titlePadding: "sm",
|
|
118
|
+
descriptionPadding: "lg",
|
|
119
|
+
buttonSize: "md",
|
|
120
|
+
buttonMargin: "md",
|
|
121
|
+
scssClassName: "lg-state-horizontal",
|
|
122
|
+
column: "",
|
|
123
|
+
},
|
|
124
|
+
},
|
|
125
|
+
};
|
|
126
|
+
|
|
127
|
+
const configs = sizeConfigs[size]?.[orientation]
|
|
128
|
+
const alignFlex = alignment === "center" ? "center" : alignment === "right" ? "end" : "start"
|
|
129
|
+
const alignText = alignment === "center" ? "center" : alignment === "right" ? "right" : undefined
|
|
130
|
+
|
|
131
|
+
const getSvgAsDataUrl = () => {
|
|
132
|
+
const svgString = ReactDOMServer.renderToStaticMarkup(computer)
|
|
133
|
+
const encodedSvg = encodeURIComponent(svgString)
|
|
134
|
+
return `data:image/svg+xml,${encodedSvg}`
|
|
135
|
+
}
|
|
136
|
+
|
|
137
|
+
const layout = (
|
|
138
|
+
<div {...ariaProps}
|
|
139
|
+
{...dataProps}
|
|
140
|
+
className={classes}
|
|
141
|
+
id={id}
|
|
142
|
+
>
|
|
143
|
+
<Flex align={alignFlex}
|
|
144
|
+
className={configs.scssClassName}
|
|
145
|
+
orientation={configs.column as "column" | "row" | undefined}
|
|
146
|
+
paddingLeft="xl"
|
|
147
|
+
paddingRight="xl"
|
|
148
|
+
vertical="center"
|
|
149
|
+
>
|
|
150
|
+
|
|
151
|
+
{ image && image === 'default' ? (
|
|
152
|
+
<Image
|
|
153
|
+
alt="test"
|
|
154
|
+
htmlOptions={{ width: configs.imageWidth, height: "auto", alignment: "start" }}
|
|
155
|
+
url={getSvgAsDataUrl()}
|
|
156
|
+
/>
|
|
157
|
+
) : image && image ? (
|
|
158
|
+
<Image
|
|
159
|
+
alt="test"
|
|
160
|
+
htmlOptions={{ width: configs.imageWidth, height: "auto", alignment: "start" }}
|
|
161
|
+
url={image}
|
|
162
|
+
/>
|
|
163
|
+
) : null}
|
|
164
|
+
|
|
165
|
+
<FlexItem >
|
|
166
|
+
<Title paddingBottom={configs.titlePadding as "xxs" | "xs" | "sm" | undefined}
|
|
167
|
+
size={configs.titleSize as 1 | 2 | 3 | 4 | undefined}
|
|
168
|
+
text={header}
|
|
169
|
+
textAlign={alignText}
|
|
170
|
+
/>
|
|
171
|
+
|
|
172
|
+
{ size !== "sm" ? (
|
|
173
|
+
<Body paddingBottom={configs.descriptionPadding as "sm" | "md" | "lg" | undefined}
|
|
174
|
+
text={description}
|
|
175
|
+
textAlign={alignText}
|
|
176
|
+
/>
|
|
177
|
+
) : (
|
|
178
|
+
<Detail paddingBottom={configs.descriptionPadding as "sm" | "md" | "lg" | undefined}
|
|
179
|
+
text={description}
|
|
180
|
+
textAlign={alignText}
|
|
181
|
+
/>
|
|
182
|
+
)}
|
|
183
|
+
|
|
184
|
+
{ primaryButton ? (
|
|
185
|
+
<Button
|
|
186
|
+
marginBottom={configs.buttonMargin as "xs" | "sm" | "md" | undefined}
|
|
187
|
+
onClick={onPrimaryButtonClick}
|
|
188
|
+
size={configs.buttonSize as "sm" | "md" | undefined}
|
|
189
|
+
text={primaryButton}
|
|
190
|
+
variant="primary"
|
|
191
|
+
width="100%"
|
|
192
|
+
/>
|
|
193
|
+
) : null }
|
|
194
|
+
|
|
195
|
+
{ linkButton ? (
|
|
196
|
+
<Button onClick={onLinkButtonClick}
|
|
197
|
+
size={configs.buttonSize as "sm" | "md" | undefined}
|
|
198
|
+
text={linkButton}
|
|
199
|
+
variant="link"
|
|
200
|
+
width="100%"
|
|
201
|
+
/>
|
|
202
|
+
) : null }
|
|
203
|
+
|
|
204
|
+
</FlexItem>
|
|
205
|
+
</Flex>
|
|
206
|
+
</div>
|
|
207
|
+
)
|
|
208
|
+
return layout
|
|
209
|
+
}
|
|
210
|
+
return renderContent()
|
|
211
|
+
}
|
|
212
|
+
|
|
213
|
+
export default EmptyState
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
import React from 'react'
|
|
2
|
+
import { EmptyState, Flex } from 'playbook-ui'
|
|
3
|
+
|
|
4
|
+
const EmptyStateAlignment = (props) => (
|
|
5
|
+
<Flex align="center"
|
|
6
|
+
spacing="evenly"
|
|
7
|
+
>
|
|
8
|
+
<EmptyState
|
|
9
|
+
{...props}
|
|
10
|
+
alignment="left"
|
|
11
|
+
description="Body text goes into detail with possible steps for user to take"
|
|
12
|
+
header="Title Explains"
|
|
13
|
+
image="default"
|
|
14
|
+
primaryButton="Next Action"
|
|
15
|
+
size="md"
|
|
16
|
+
/>
|
|
17
|
+
<EmptyState
|
|
18
|
+
{...props}
|
|
19
|
+
alignment="center"
|
|
20
|
+
description="Body text goes into detail with possible steps for user to take"
|
|
21
|
+
header="Title Explains"
|
|
22
|
+
image="default"
|
|
23
|
+
primaryButton="Next Action"
|
|
24
|
+
size="md"
|
|
25
|
+
/>
|
|
26
|
+
<EmptyState
|
|
27
|
+
{...props}
|
|
28
|
+
alignment="right"
|
|
29
|
+
description="Body text goes into detail with possible steps for user to take"
|
|
30
|
+
header="Title Explains"
|
|
31
|
+
image="default"
|
|
32
|
+
primaryButton="Next Action"
|
|
33
|
+
size="md"
|
|
34
|
+
/>
|
|
35
|
+
</Flex>
|
|
36
|
+
)
|
|
37
|
+
|
|
38
|
+
export default EmptyStateAlignment
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import React from 'react'
|
|
2
|
+
import { EmptyState, Flex } from 'playbook-ui'
|
|
3
|
+
|
|
4
|
+
const EmptyStateDefault = (props) => (
|
|
5
|
+
<Flex align="center"
|
|
6
|
+
orientation="column"
|
|
7
|
+
>
|
|
8
|
+
<EmptyState
|
|
9
|
+
{...props}
|
|
10
|
+
description="Body text goes into detail with possible steps for user to take"
|
|
11
|
+
header="Title Explains"
|
|
12
|
+
image="default"
|
|
13
|
+
/>
|
|
14
|
+
</Flex>
|
|
15
|
+
)
|
|
16
|
+
|
|
17
|
+
export default EmptyStateDefault
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import React from 'react'
|
|
2
|
+
import { EmptyState, Flex } from 'playbook-ui'
|
|
3
|
+
|
|
4
|
+
const EmptyStateOrientation = (props) => (
|
|
5
|
+
<Flex align="center"
|
|
6
|
+
orientation="column"
|
|
7
|
+
>
|
|
8
|
+
<EmptyState
|
|
9
|
+
{...props}
|
|
10
|
+
alignment="left"
|
|
11
|
+
description="Body text goes into detail with possible steps for user to take"
|
|
12
|
+
header="Title Explains"
|
|
13
|
+
image="default"
|
|
14
|
+
orientation="horizontal"
|
|
15
|
+
primaryButton="Next Action"
|
|
16
|
+
size="lg"
|
|
17
|
+
/>
|
|
18
|
+
</Flex>
|
|
19
|
+
)
|
|
20
|
+
|
|
21
|
+
export default EmptyStateOrientation
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
import React from 'react'
|
|
2
|
+
import { EmptyState, Flex } from 'playbook-ui'
|
|
3
|
+
|
|
4
|
+
const EmptyStateSize = (props) => (
|
|
5
|
+
<Flex align="center"
|
|
6
|
+
spacing="evenly"
|
|
7
|
+
>
|
|
8
|
+
<EmptyState
|
|
9
|
+
{...props}
|
|
10
|
+
alignment="center"
|
|
11
|
+
description="Body text goes into detail with possible steps for user to take"
|
|
12
|
+
header="Title Explains"
|
|
13
|
+
image="default"
|
|
14
|
+
linkButton="Alt Action"
|
|
15
|
+
onLinkButtonClick={() => alert("link button clicked!")}
|
|
16
|
+
onPrimaryButtonClick={() => alert("primary button clicked!")}
|
|
17
|
+
primaryButton="Next Action"
|
|
18
|
+
size="sm"
|
|
19
|
+
/>
|
|
20
|
+
<EmptyState
|
|
21
|
+
{...props}
|
|
22
|
+
alignment="center"
|
|
23
|
+
description="Body text goes into detail with possible steps for user to take"
|
|
24
|
+
header="Title Explains"
|
|
25
|
+
image="default"
|
|
26
|
+
linkButton="Alt Action"
|
|
27
|
+
onLinkButtonClick={() => alert("link button clicked!")}
|
|
28
|
+
onPrimaryButtonClick={() => alert("primary button clicked!")}
|
|
29
|
+
primaryButton="Next Action"
|
|
30
|
+
size="lg"
|
|
31
|
+
/>
|
|
32
|
+
</Flex>
|
|
33
|
+
)
|
|
34
|
+
|
|
35
|
+
export default EmptyStateSize
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
<svg width="341" height="251" viewBox="0 0 341 251" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<path d="M13.1313 233.77C21.94 231.747 31.6491 231.91 39.5575 227.702C56.9777 218.433 60.9184 182.571 50.3011 169.333C34.3751 149.475 16.4759 166.95 24.5771 179.675C27.3943 184.1 33.7848 186.935 38.6891 188.18C78.9114 198.392 100.955 166.769 129.901 144.801C138.226 138.483 146.873 132.512 155.877 127.089C163.474 122.514 171.448 118.481 179.602 114.869C188.038 111.131 196.468 106.974 205.556 105.078C224.677 101.089 236.173 98.6398 255.712 97.8855C262.58 97.6204 277.133 100.039 283.642 102.064C288.211 103.484 292.636 105.371 296.804 107.625C301.093 109.944 305.182 112.643 308.894 115.718C312.887 119.025 316.534 122.729 319.806 126.678C322.7 130.169 325.327 133.915 327.309 137.936C329.482 142.346 331.21 147.008 332.182 151.791C333.078 156.199 331.253 169.896 330.164 174.281C327.718 184.135 304.022 184.256 296.804 179.675C279.554 168.727 298.876 138.498 305.389 130.376C320.884 111.048 335.049 101.555 330.164 75.5071C329.954 74.386 324.327 52.1211 318.598 47.6126C312.869 43.104 302.552 30.5147 289.885 30.1272" stroke="#DFE3E8" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="5 9"/>
|
|
3
|
+
<rect x="12.0342" y="231.969" width="240.667" height="16.9791" fill="white"/>
|
|
4
|
+
<path opacity="0.397871" fill-rule="evenodd" clip-rule="evenodd" d="M24.0396 232C25.6294 241.986 74.6993 250 135 250C195.3 250 244.37 241.986 245.96 232H24.0396Z" fill="#EFEFEF"/>
|
|
5
|
+
<path d="M12.0283 233.803H252.754V230.543L12.0283 230.543V233.803Z" fill="#DFE3E8"/>
|
|
6
|
+
<path fill-rule="evenodd" clip-rule="evenodd" d="M111.452 145.308H235.589C238.589 145.308 241.021 147.74 241.021 150.741V233.985C241.021 236.986 238.589 239.418 235.589 239.418H111.452C108.452 239.418 106.02 236.986 106.02 233.985V150.741C106.02 147.74 108.452 145.308 111.452 145.308Z" fill="#E6EBEF"/>
|
|
7
|
+
<mask id="mask0_5923_12806" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="106" y="145" width="136" height="95">
|
|
8
|
+
<path fill-rule="evenodd" clip-rule="evenodd" d="M111.452 145.308H235.589C238.589 145.308 241.021 147.74 241.021 150.741V233.985C241.021 236.986 238.589 239.418 235.589 239.418H111.452C108.452 239.418 106.02 236.986 106.02 233.985V150.741C106.02 147.74 108.452 145.308 111.452 145.308Z" fill="white"/>
|
|
9
|
+
</mask>
|
|
10
|
+
<g mask="url(#mask0_5923_12806)">
|
|
11
|
+
<path fill-rule="evenodd" clip-rule="evenodd" d="M233.81 130.202L135.323 256.455H90.7475L80.9556 100.717L233.81 130.202Z" fill="#EFF3F6"/>
|
|
12
|
+
</g>
|
|
13
|
+
<path fill-rule="evenodd" clip-rule="evenodd" d="M190.054 195.575L174.18 206.901V211.604C174.18 211.951 173.792 212.153 173.511 211.952L158.305 201.104L158.287 201.091C158.13 200.979 158.038 200.798 158.038 200.605V200.6V189.57V189.566C158.038 189.373 158.131 189.191 158.288 189.08L158.305 189.067L174.18 177.741V173.038C174.18 172.691 174.567 172.489 174.848 172.69L190.054 183.538L190.072 183.551C190.229 183.662 190.322 183.844 190.322 184.036V184.042V195.071V195.076C190.322 195.269 190.228 195.451 190.071 195.562L190.054 195.575Z" fill="#F9F9F9"/>
|
|
14
|
+
<path d="M174.18 206.901L173.308 205.679C172.914 205.961 172.68 206.416 172.68 206.901H174.18ZM190.054 195.575L190.925 196.796C190.932 196.791 190.938 196.787 190.945 196.782L190.054 195.575ZM173.511 211.952L174.383 210.732L174.382 210.731L173.511 211.952ZM158.305 201.104L157.425 202.319L157.434 202.325L158.305 201.104ZM158.287 201.091L159.167 199.876L159.159 199.87L158.287 201.091ZM158.288 189.08L159.158 190.302C159.165 190.297 159.172 190.292 159.179 190.286L158.288 189.08ZM158.305 189.067L157.434 187.846C157.427 187.85 157.421 187.855 157.414 187.86L158.305 189.067ZM174.18 177.741L175.051 178.962C175.445 178.681 175.68 178.226 175.68 177.741H174.18ZM174.848 172.69L173.976 173.91L173.977 173.911L174.848 172.69ZM190.054 183.538L190.934 182.323L190.925 182.317L190.054 183.538ZM190.072 183.551L189.192 184.766L189.203 184.774L190.072 183.551ZM190.071 195.562L189.201 194.34C189.194 194.345 189.188 194.35 189.181 194.355L190.071 195.562ZM175.051 208.122L190.925 196.796L189.183 194.354L173.308 205.679L175.051 208.122ZM175.68 211.604V206.901H172.68V211.604H175.68ZM172.639 213.173C173.929 214.094 175.68 213.15 175.68 211.604H172.68C172.68 210.751 173.654 210.211 174.383 210.732L172.639 213.173ZM157.434 202.325L172.64 213.173L174.382 210.731L159.176 199.883L157.434 202.325ZM157.407 202.305L157.425 202.319L159.185 199.889L159.167 199.876L157.407 202.305ZM156.538 200.605C156.538 201.281 156.863 201.917 157.415 202.312L159.159 199.87C159.398 200.041 159.538 200.316 159.538 200.605H156.538ZM156.538 200.6V200.605H159.538V200.6H156.538ZM156.538 189.57V200.6H159.538V189.57H156.538ZM156.538 189.566V189.57H159.538V189.566H156.538ZM157.418 187.857C156.864 188.252 156.538 188.889 156.538 189.566H159.538C159.538 189.856 159.398 190.131 159.158 190.302L157.418 187.857ZM157.414 187.86L157.397 187.873L159.179 190.286L159.196 190.274L157.414 187.86ZM173.308 176.52L157.434 187.846L159.176 190.288L175.051 178.962L173.308 176.52ZM172.68 173.038V177.741H175.68V173.038H172.68ZM175.72 171.469C174.43 170.548 172.68 171.492 172.68 173.038H175.68C175.68 173.891 174.705 174.431 173.976 173.91L175.72 171.469ZM190.925 182.317L175.719 171.469L173.977 173.911L189.183 184.759L190.925 182.317ZM190.953 182.337L190.934 182.323L189.174 184.753L189.192 184.766L190.953 182.337ZM191.822 184.036C191.822 183.363 191.498 182.724 190.941 182.328L189.203 184.774C188.96 184.601 188.822 184.324 188.822 184.036H191.822ZM191.822 184.042V184.036H188.822V184.042H191.822ZM191.822 195.071V184.042H188.822V195.071H191.822ZM191.822 195.076V195.071H188.822V195.076H191.822ZM190.941 196.785C191.495 196.39 191.822 195.752 191.822 195.076H188.822C188.822 194.786 188.961 194.511 189.201 194.34L190.941 196.785ZM190.945 196.782L190.962 196.769L189.181 194.355L189.164 194.368L190.945 196.782Z" fill="#DFE3E8"/>
|
|
15
|
+
<path fill-rule="evenodd" clip-rule="evenodd" d="M236.947 145.308H111.452C108.452 145.308 106.02 147.74 106.02 150.741V233.985C106.02 236.986 108.452 239.418 111.452 239.418H236.947C239.947 239.418 242.38 236.986 242.38 233.985V150.741C242.38 147.74 239.947 145.308 236.947 145.308ZM109.279 150.741C109.279 149.541 110.252 148.568 111.452 148.568H236.947C238.147 148.568 239.12 149.541 239.12 150.741V233.985C239.12 235.185 238.147 236.158 236.947 236.158H111.452C110.252 236.158 109.279 235.185 109.279 233.985V150.741Z" fill="#DFE3E8"/>
|
|
16
|
+
<circle cx="272.814" cy="31.0862" r="6.5" transform="rotate(-58 272.814 31.0862)" stroke="#DFE3E8" stroke-width="3"/>
|
|
17
|
+
<path d="M269.32 17.8078L270.476 15.9575C270.911 15.2615 271.76 15.0988 272.345 15.4639L287.909 25.1895C288.493 25.5546 288.72 26.3898 288.285 27.0858L287.129 28.9361C286.694 29.6321 285.844 29.7949 285.259 29.4297L269.695 19.7042C269.111 19.339 268.885 18.5038 269.32 17.8078Z" stroke="#DFE3E8" stroke-width="3"/>
|
|
18
|
+
<path d="M271.277 14.9443L270.425 8.22099" stroke="#DFE3E8" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
|
|
19
|
+
<path fill-rule="evenodd" clip-rule="evenodd" d="M268.414 18.3138L262.372 20.4343L268.414 18.3138Z" stroke="#DFE3E8" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
|
|
20
|
+
<circle cx="283.883" cy="13.9734" r="6.5" transform="rotate(-58 283.883 13.9734)" stroke="#DFE3E8" stroke-width="3"/>
|
|
21
|
+
</svg>
|
|
@@ -0,0 +1,118 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
|
|
3
|
+
const computer = (
|
|
4
|
+
<svg
|
|
5
|
+
fill="none"
|
|
6
|
+
height={251}
|
|
7
|
+
width={341}
|
|
8
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
9
|
+
>
|
|
10
|
+
<path
|
|
11
|
+
d="M13.131 233.77c8.809-2.023 18.518-1.86 26.426-6.068 17.42-9.269 21.361-45.131 10.744-58.369-15.926-19.858-33.825-2.383-25.724 10.342 2.817 4.425 9.208 7.26 14.112 8.505 40.222 10.212 62.266-21.411 91.212-43.379 8.325-6.318 16.972-12.289 25.976-17.712 7.597-4.575 15.571-8.608 23.725-12.22 8.436-3.738 16.866-7.895 25.954-9.791 19.121-3.989 30.617-6.438 50.156-7.193 6.868-.265 21.421 2.154 27.93 4.179a73.8 73.8 0 0 1 13.162 5.561c4.289 2.319 8.378 5.018 12.09 8.093 3.993 3.307 7.64 7.011 10.912 10.96 2.894 3.491 5.521 7.237 7.503 11.258 2.173 4.41 3.901 9.072 4.873 13.855.896 4.408-.929 18.105-2.018 22.49-2.446 9.854-26.142 9.975-33.36 5.394-17.25-10.948 2.072-41.177 8.585-49.299 15.495-19.328 29.66-28.821 24.775-54.869-.21-1.121-5.837-23.386-11.566-27.894-5.729-4.509-16.046-17.098-28.713-17.486"
|
|
12
|
+
stroke="#DFE3E8"
|
|
13
|
+
strokeDasharray="5 9"
|
|
14
|
+
strokeLinecap="round"
|
|
15
|
+
strokeLinejoin="round"
|
|
16
|
+
strokeWidth={3}
|
|
17
|
+
/>
|
|
18
|
+
<path d="M12.034 231.969h240.667v16.979H12.034z"
|
|
19
|
+
fill="#fff"
|
|
20
|
+
/>
|
|
21
|
+
<path
|
|
22
|
+
clipRule="evenodd"
|
|
23
|
+
d="M24.04 232c1.59 9.986 50.66 18 110.96 18s109.37-8.014 110.96-18H24.04Z"
|
|
24
|
+
fill="#EFEFEF"
|
|
25
|
+
fillRule="evenodd"
|
|
26
|
+
opacity={0.398}
|
|
27
|
+
/>
|
|
28
|
+
<path d="M12.028 233.803h240.726v-3.26H12.028v3.26Z"
|
|
29
|
+
fill="#DFE3E8"
|
|
30
|
+
/>
|
|
31
|
+
<path
|
|
32
|
+
clipRule="evenodd"
|
|
33
|
+
d="M111.452 145.308h124.137c3 0 5.432 2.432 5.432 5.433v83.244a5.432 5.432 0 0 1-5.432 5.433H111.452c-3 0-5.432-2.432-5.432-5.433v-83.244a5.432 5.432 0 0 1 5.432-5.433Z"
|
|
34
|
+
fill="#E6EBEF"
|
|
35
|
+
fillRule="evenodd"
|
|
36
|
+
/>
|
|
37
|
+
<mask
|
|
38
|
+
height={95}
|
|
39
|
+
id="a"
|
|
40
|
+
maskUnits="userSpaceOnUse"
|
|
41
|
+
style={{
|
|
42
|
+
maskType: "luminance",
|
|
43
|
+
}}
|
|
44
|
+
width={136}
|
|
45
|
+
x={106}
|
|
46
|
+
y={145}
|
|
47
|
+
>
|
|
48
|
+
<path
|
|
49
|
+
clipRule="evenodd"
|
|
50
|
+
d="M111.452 145.308h124.137c3 0 5.432 2.432 5.432 5.433v83.244a5.432 5.432 0 0 1-5.432 5.433H111.452c-3 0-5.432-2.432-5.432-5.433v-83.244a5.432 5.432 0 0 1 5.432-5.433Z"
|
|
51
|
+
fill="#fff"
|
|
52
|
+
fillRule="evenodd"
|
|
53
|
+
/>
|
|
54
|
+
</mask>
|
|
55
|
+
<g mask="url(#a)">
|
|
56
|
+
<path
|
|
57
|
+
clipRule="evenodd"
|
|
58
|
+
d="m233.81 130.202-98.487 126.253H90.747l-9.791-155.738 152.854 29.485Z"
|
|
59
|
+
fill="#EFF3F6"
|
|
60
|
+
fillRule="evenodd"
|
|
61
|
+
/>
|
|
62
|
+
</g>
|
|
63
|
+
<path
|
|
64
|
+
clipRule="evenodd"
|
|
65
|
+
d="m190.054 195.575-15.874 11.326v4.703a.423.423 0 0 1-.669.348l-15.206-10.848-.018-.013a.596.596 0 0 1-.249-.486v-11.039c0-.193.093-.375.25-.486l.017-.013 15.875-11.326v-4.703c0-.347.387-.549.668-.348l15.206 10.848.018.013c.157.111.25.293.25.485V195.076a.596.596 0 0 1-.251.486l-.017.013Z"
|
|
66
|
+
fill="#F9F9F9"
|
|
67
|
+
fillRule="evenodd"
|
|
68
|
+
/>
|
|
69
|
+
<path
|
|
70
|
+
d="m174.18 206.901-.872-1.222a1.503 1.503 0 0 0-.628 1.222h1.5Zm15.874-11.326.871 1.221.02-.014-.891-1.207Zm-16.543 16.377.872-1.22-.001-.001-.871 1.221Zm-15.206-10.848-.88 1.215.009.006.871-1.221Zm-.018-.013.88-1.215-.008-.006-.872 1.221Zm.001-12.011.87 1.222.021-.016-.891-1.206Zm.017-.013-.871-1.221-.02.014.891 1.207Zm15.875-11.326.871 1.221a1.5 1.5 0 0 0 .629-1.221h-1.5Zm.668-5.051-.872 1.22.001.001.871-1.221Zm15.206 10.848.88-1.215-.009-.006-.871 1.221Zm.018.013-.88 1.215.011.008.869-1.223Zm-.001 12.011-.87-1.222-.02.015.89 1.207Zm-15.02 12.56 15.874-11.326-1.742-2.442-15.875 11.325 1.743 2.443Zm.629 3.482v-4.703h-3v4.703h3Zm-3.041 1.569c1.29.921 3.041-.023 3.041-1.569h-3c0-.853.974-1.393 1.703-.872l-1.744 2.441Zm-15.205-10.848 15.206 10.848 1.742-2.442-15.206-10.848-1.742 2.442Zm-.027-.02.018.014 1.76-2.43-.018-.013-1.76 2.429Zm-.869-1.7c0 .676.325 1.312.877 1.707l1.744-2.442a.905.905 0 0 1 .379.735h-3Zm0-.005v.005h3v-.005h-3Zm0-11.03v11.03h3v-11.03h-3Zm0-.004v.004h3v-.004h-3Zm.88-1.709a2.098 2.098 0 0 0-.88 1.709h3c0 .29-.14.565-.38.736l-1.74-2.445Zm-.004.003-.017.013 1.782 2.413.017-.012-1.782-2.414Zm15.894-11.34-15.874 11.326 1.742 2.442 15.875-11.326-1.743-2.442Zm-.628-3.482v4.703h3v-4.703h-3Zm3.04-1.569c-1.29-.921-3.04.023-3.04 1.569h3c0 .853-.975 1.393-1.704.872l1.744-2.441Zm15.205 10.848-15.206-10.848-1.742 2.442 15.206 10.848 1.742-2.442Zm.028.02-.019-.014-1.76 2.43.018.013 1.761-2.429Zm.869 1.699c0-.673-.324-1.312-.881-1.708l-1.738 2.446a.906.906 0 0 1-.381-.738h3Zm0 .006v-.006h-3v.006h3Zm0 11.029v-11.029h-3v11.029h3Zm0 .005v-.005h-3v.005h3Zm-.881 1.709a2.1 2.1 0 0 0 .881-1.709h-3c0-.29.139-.565.379-.736l1.74 2.445Zm.004-.003.017-.013-1.781-2.414-.017.013 1.781 2.414Z"
|
|
71
|
+
fill="#DFE3E8"
|
|
72
|
+
/>
|
|
73
|
+
<path
|
|
74
|
+
clipRule="evenodd"
|
|
75
|
+
d="M236.947 145.308H111.452c-3 0-5.432 2.432-5.432 5.433v83.244a5.432 5.432 0 0 0 5.432 5.433h125.495c3 0 5.433-2.432 5.433-5.433v-83.244a5.433 5.433 0 0 0-5.433-5.433Zm-127.668 5.433c0-1.2.973-2.173 2.173-2.173h125.495c1.2 0 2.173.973 2.173 2.173v83.244c0 1.2-.973 2.173-2.173 2.173H111.452c-1.2 0-2.173-.973-2.173-2.173v-83.244Z"
|
|
76
|
+
fill="#DFE3E8"
|
|
77
|
+
fillRule="evenodd"
|
|
78
|
+
/>
|
|
79
|
+
<circle
|
|
80
|
+
cx={272.814}
|
|
81
|
+
cy={31.086}
|
|
82
|
+
r={6.5}
|
|
83
|
+
stroke="#DFE3E8"
|
|
84
|
+
strokeWidth={3}
|
|
85
|
+
transform="rotate(-58 272.814 31.086)"
|
|
86
|
+
/>
|
|
87
|
+
<path
|
|
88
|
+
d="m269.32 17.808 1.156-1.85c.435-.697 1.284-.86 1.869-.494l15.564 9.725c.584.366.811 1.2.376 1.897l-1.156 1.85c-.435.696-1.285.859-1.87.494l-15.564-9.726c-.584-.365-.81-1.2-.375-1.896Z"
|
|
89
|
+
stroke="#DFE3E8"
|
|
90
|
+
strokeWidth={3}
|
|
91
|
+
/>
|
|
92
|
+
<path
|
|
93
|
+
d="m271.277 14.944-.852-6.723"
|
|
94
|
+
stroke="#DFE3E8"
|
|
95
|
+
strokeLinecap="round"
|
|
96
|
+
strokeLinejoin="round"
|
|
97
|
+
strokeWidth={4}
|
|
98
|
+
/>
|
|
99
|
+
<path
|
|
100
|
+
clipRule="evenodd"
|
|
101
|
+
d="m268.414 18.314-6.042 2.12 6.042-2.12Z"
|
|
102
|
+
stroke="#DFE3E8"
|
|
103
|
+
strokeLinecap="round"
|
|
104
|
+
strokeLinejoin="round"
|
|
105
|
+
strokeWidth={4}
|
|
106
|
+
/>
|
|
107
|
+
<circle
|
|
108
|
+
cx={283.883}
|
|
109
|
+
cy={13.973}
|
|
110
|
+
r={6.5}
|
|
111
|
+
stroke="#DFE3E8"
|
|
112
|
+
strokeWidth={3}
|
|
113
|
+
transform="rotate(-58 283.883 13.973)"
|
|
114
|
+
/>
|
|
115
|
+
</svg>
|
|
116
|
+
)
|
|
117
|
+
|
|
118
|
+
export default computer
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
export { default as EmptyStateDefault } from './_empty_state_default.jsx'
|
|
2
|
+
export { default as EmptyStateOrientation } from './_empty_state_orientation.jsx'
|
|
3
|
+
export { default as EmptyStateSize } from './_empty_state_size.jsx'
|
|
4
|
+
export { default as EmptyStateAlignment } from './_empty_state_alignment.jsx'
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import React from 'react'
|
|
2
|
+
import { render, screen } from '../utilities/test-utils'
|
|
3
|
+
|
|
4
|
+
import { EmptyState } from 'playbook-ui'
|
|
5
|
+
|
|
6
|
+
|
|
7
|
+
test('returns namespaced class name', () => {
|
|
8
|
+
render(
|
|
9
|
+
<EmptyState
|
|
10
|
+
data={{ testid: 'primary-test' }}
|
|
11
|
+
text="some text"
|
|
12
|
+
/>
|
|
13
|
+
)
|
|
14
|
+
|
|
15
|
+
const kit = screen.getByTestId('primary-test')
|
|
16
|
+
expect(kit).toHaveClass('pb_empty_state_kit')
|
|
17
|
+
})
|
|
@@ -1,8 +1,4 @@
|
|
|
1
|
-
<%=
|
|
2
|
-
id: object.id,
|
|
3
|
-
data: object.data,
|
|
4
|
-
class: object.classname,
|
|
5
|
-
**combined_html_options) do %>
|
|
1
|
+
<%= pb_content_tag do %>
|
|
6
2
|
<% if object.label.present? %>
|
|
7
3
|
<%= pb_rails("caption", props: {text: object.label, dark: object.dark}) %>
|
|
8
4
|
<% end %>
|
|
@@ -1,7 +1,2 @@
|
|
|
1
|
-
<%=
|
|
2
|
-
aria: object.aria,
|
|
3
|
-
id: object.id,
|
|
4
|
-
data: object.data,
|
|
5
|
-
class: object.classname,
|
|
6
|
-
**combined_html_options) do %><%= content.presence || object.text %><% end %>
|
|
1
|
+
<%= pb_content_tag(object.tag) do %><%= content.presence || object.text %><% end %>
|
|
7
2
|
|
|
@@ -1,9 +1,4 @@
|
|
|
1
|
-
<%=
|
|
2
|
-
id: object.id,
|
|
3
|
-
data: object.data,
|
|
4
|
-
aria: object.aria,
|
|
5
|
-
class: object.classname,
|
|
6
|
-
**combined_html_options) do %>
|
|
1
|
+
<%= pb_content_tag do %>
|
|
7
2
|
<label class="pb_toggle_wrapper">
|
|
8
3
|
<%= content.presence || object.input %>
|
|
9
4
|
<div class="pb_toggle_control"></div>
|
|
@@ -54,7 +54,7 @@ $tooltip_shadow: rgba(60, 106, 172, 0.18);
|
|
|
54
54
|
margin-bottom: 50px;
|
|
55
55
|
}
|
|
56
56
|
|
|
57
|
-
&.visible,
|
|
57
|
+
&.visible,
|
|
58
58
|
&.show {
|
|
59
59
|
z-index: $z_9;
|
|
60
60
|
padding: $space_xs $space_sm;
|
|
@@ -117,7 +117,7 @@ $tooltip_shadow: rgba(60, 106, 172, 0.18);
|
|
|
117
117
|
color: $charcoal;
|
|
118
118
|
background-color: $white;
|
|
119
119
|
}
|
|
120
|
-
.arrow {
|
|
120
|
+
.arrow {
|
|
121
121
|
border-color: $white transparent transparent transparent;
|
|
122
122
|
opacity: $opacity_10;
|
|
123
123
|
}
|