Skip to content

Commit 90d52bb

Browse files
weronikaolejniczakweronikaolejniczak
committed
fix(website): fix all broken Display examples
1 parent a3feb6c commit 90d52bb

File tree

7 files changed

+475
-256
lines changed

7 files changed

+475
-256
lines changed

‎packages/website/docs/components/display/empty-prompt/_multiple_types.tsx‎

Lines changed: 157 additions & 89 deletions
Original file line numberDiff line numberDiff line change
@@ -4,110 +4,174 @@ import { EuiSelect, useEuiTheme } from '@elastic/eui';
44

55
import { Demo } from '@elastic/eui-docusaurus-theme/components';
66

7+
// @ts-ignore - webpack url-loader
8+
import pageNotFoundDarkUrl from '!url-loader!../../../../static/images/empty_prompt/pageNotFound--dark.png';
9+
// @ts-ignore - webpack url-loader
10+
import pageNotFoundLightUrl from '!url-loader!../../../../static/images/empty_prompt/pageNotFound--light.png';
11+
// @ts-ignore - webpack url-loader
12+
import accessDeniedDarkUrl from '!url-loader!../../../../static/images/empty_prompt/accessDenied--dark.png';
13+
// @ts-ignore - webpack url-loader
14+
import accessDeniedLightUrl from '!url-loader!../../../../static/images/empty_prompt/accessDenied--light.png';
15+
716
const types: Array<{
817
value: string;
918
text: string;
10-
code: (colorMode: 'DARK' | 'LIGHT') => string;
19+
code: string;
20+
scope: Record<string, unknown>;
21+
extraFiles: Record<string, string>;
1122
}> = [
1223
{
1324
value: 'errorPages',
1425
text: 'Page not found',
15-
code: (colorMode) => `<EuiEmptyPrompt
16-
color="subdued"
17-
icon={
18-
<EuiImage
19-
size="fullWidth"
20-
src="${
21-
colorMode === 'DARK'
22-
? '/images/empty_prompt/pageNotFound--dark.png'
23-
: '/images/empty_prompt/pageNotFound--light.png'
24-
}"
25-
alt="An outer space illustration. In the background is a large moon and two planets. In the foreground is an astronaut floating in space and the numbers '404'."
26+
scope: {
27+
pageNotFoundDark: pageNotFoundDarkUrl,
28+
pageNotFoundLight: pageNotFoundLightUrl,
29+
},
30+
extraFiles: {
31+
'pageNotFound--dark.ts': `export default "${pageNotFoundDarkUrl}";`,
32+
'pageNotFound--light.ts': `export default "${pageNotFoundLightUrl}";`,
33+
},
34+
code: `import React from 'react';
35+
import {
36+
EuiEmptyPrompt,
37+
EuiButton,
38+
EuiButtonEmpty,
39+
EuiImage,
40+
useEuiTheme,
41+
} from '@elastic/eui';
42+
import pageNotFoundDark from './pageNotFound--dark';
43+
import pageNotFoundLight from './pageNotFound--light';
44+
45+
export default () => {
46+
const { colorMode } = useEuiTheme();
47+
return (
48+
<EuiEmptyPrompt
49+
color="subdued"
50+
icon={
51+
<EuiImage
52+
size="fullWidth"
53+
src={colorMode === 'DARK' ? pageNotFoundDark : pageNotFoundLight}
54+
alt="An outer space illustration. In the background is a large moon and two planets. In the foreground is an astronaut floating in space and the numbers '404'."
55+
/>
56+
}
57+
title={<h2>Page not found</h2>}
58+
layout="vertical"
59+
body={
60+
<p>
61+
We can&apos;t find the page you&apos;re looking for. It might have
62+
been removed, renamed, or it didn&apos;t exist in the first place.
63+
</p>
64+
}
65+
actions={[
66+
<EuiButton color="primary" fill>
67+
Home
68+
</EuiButton>,
69+
<EuiButtonEmpty iconType="chevronSingleLeft" flush="both">
70+
Go back
71+
</EuiButtonEmpty>,
72+
]}
2673
/>
27-
}
28-
title={<h2>Page not found</h2>}
29-
layout="vertical"
30-
body={
31-
<p>
32-
We can&apos;t find the page you&apos;re looking for. It might have
33-
been removed, renamed, or it didn&apos;t exist in the first place.
34-
</p>
35-
}
36-
actions={[
37-
<EuiButton color="primary" fill>
38-
Home
39-
</EuiButton>,
40-
<EuiButtonEmpty iconType="chevronSingleLeft" flush="both">
41-
Go back
42-
</EuiButtonEmpty>,
43-
]}
44-
/>`,
74+
);
75+
};`,
4576
},
4677
{
4778
value: 'noPrivileges',
4879
text: 'No permission',
49-
code: (colorMode) => `<EuiEmptyPrompt
50-
color="subdued"
51-
icon={
52-
<EuiImage
53-
size="fullWidth"
54-
src="${
55-
colorMode === 'DARK'
56-
? '/images/empty_prompt/accessDenied--dark.png'
57-
: '/images/empty_prompt/accessDenied--light.png'
58-
}"
59-
alt=""
80+
scope: {
81+
accessDeniedDark: accessDeniedDarkUrl,
82+
accessDeniedLight: accessDeniedLightUrl,
83+
},
84+
extraFiles: {
85+
'accessDenied--dark.ts': `export default "${accessDeniedDarkUrl}";`,
86+
'accessDenied--light.ts': `export default "${accessDeniedLightUrl}";`,
87+
},
88+
code: `import React from 'react';
89+
import {
90+
EuiEmptyPrompt,
91+
EuiButton,
92+
EuiButtonEmpty,
93+
EuiImage,
94+
useEuiTheme,
95+
} from '@elastic/eui';
96+
import accessDeniedDark from './accessDenied--dark';
97+
import accessDeniedLight from './accessDenied--light';
98+
99+
export default () => {
100+
const { colorMode } = useEuiTheme();
101+
return (
102+
<EuiEmptyPrompt
103+
color="subdued"
104+
icon={
105+
<EuiImage
106+
size="fullWidth"
107+
src={colorMode === 'DARK' ? accessDeniedDark : accessDeniedLight}
108+
alt=""
109+
/>
110+
}
111+
title={<h2>Access denied</h2>}
112+
layout="vertical"
113+
body={
114+
<p>
115+
Sorry to rain on your parade, but you don't have permissions to access
116+
this page.
117+
</p>
118+
}
119+
actions={[
120+
<EuiButton color="primary" fill>
121+
Home
122+
</EuiButton>,
123+
<EuiButtonEmpty iconType="chevronSingleLeft" flush="both">
124+
Go back
125+
</EuiButtonEmpty>,
126+
]}
60127
/>
61-
}
62-
title={<h2>Access denied</h2>}
63-
layout="vertical"
64-
body={
65-
<p>
66-
Sorry to rain on your parade, but you don't have permissions to access
67-
this page.
68-
</p>
69-
}
70-
actions={[
71-
<EuiButton color="primary" fill>
72-
Home
73-
</EuiButton>,
74-
<EuiButtonEmpty iconType="chevronSingleLeft" flush="both">
75-
Go back
76-
</EuiButtonEmpty>,
77-
]}
78-
/>`,
128+
);
129+
};`,
79130
},
80131
{
81132
value: 'licenseUpgrade',
82133
text: 'License upgrade',
83-
code: () => `<EuiEmptyPrompt
84-
color="subdued"
85-
iconType="logoKibana"
86-
title={<h2>Do more with Kibana!</h2>}
87-
layout="vertical"
88-
hasBorder
89-
body={
90-
<p>
91-
Start a free trial or upgrade your license to use anomaly detection.
92-
</p>
93-
}
94-
actions={[
95-
<EuiButton color="primary" fill>
96-
Upgrade
97-
</EuiButton>,
98-
<EuiButtonEmpty>Start a free trial</EuiButtonEmpty>,
99-
]}
100-
footer={
101-
<>
102-
<EuiTitle size="xxs">
103-
<h3>Want to learn more?</h3>
104-
</EuiTitle>
105-
<EuiLink href="#" target="_blank">
106-
Read the docs
107-
</EuiLink>
108-
</>
109-
}
110-
/>`,
134+
scope: {},
135+
extraFiles: {},
136+
code: `import React from 'react';
137+
import {
138+
EuiEmptyPrompt,
139+
EuiButton,
140+
EuiButtonEmpty,
141+
EuiTitle,
142+
EuiLink,
143+
} from '@elastic/eui';
144+
145+
export default () => (
146+
<EuiEmptyPrompt
147+
color="subdued"
148+
iconType="logoKibana"
149+
title={<h2>Do more with Kibana!</h2>}
150+
layout="vertical"
151+
hasBorder
152+
body={
153+
<p>
154+
Start a free trial or upgrade your license to use anomaly detection.
155+
</p>
156+
}
157+
actions={[
158+
<EuiButton color="primary" fill>
159+
Upgrade
160+
</EuiButton>,
161+
<EuiButtonEmpty>Start a free trial</EuiButtonEmpty>,
162+
]}
163+
footer={
164+
<>
165+
<EuiTitle size="xxs">
166+
<h3>Want to learn more?</h3>
167+
</EuiTitle>
168+
<EuiLink href="#" target="_blank">
169+
Read the docs
170+
</EuiLink>
171+
</>
172+
}
173+
/>
174+
);`,
111175
},
112176
];
113177

@@ -136,8 +200,12 @@ export default () => {
136200
aria-label="Empty prompt examples"
137201
/>
138202

139-
<Demo key={`${selectedType.value}--${colorMode}`}>
140-
{selectedType.code(colorMode)}
203+
<Demo
204+
key={`${selectedType.value}--${colorMode}`}
205+
scope={selectedType.scope}
206+
extraFiles={selectedType.extraFiles}
207+
>
208+
{selectedType.code}
141209
</Demo>
142210
</>
143211
);

‎packages/website/docs/components/display/empty-prompt/index.mdx‎

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,8 @@ keywords: [EuiEmptyPrompt]
55
# Empty prompt
66

77
import useBaseUrl from '@docusaurus/useBaseUrl';
8+
import illustrationUrl from '!url-loader!../../../../static/images/empty_prompt/illustration.svg';
9+
import illustrationSource from '!raw-loader!../../../../static/images/empty_prompt/illustration.svg';
810

911
The **EuiEmptyPrompt** is the building block to create an empty state. You can use it as a placeholder for any type of empty content. They are especially helpful for replacing entire pages or parts of a product that contain no content.
1012

@@ -173,7 +175,7 @@ You can supply a `layout` of either `"horizontal"` or `"vertical"` with the defa
173175

174176
When you have longer body text with multiple calls to action, you can use the `horizontal` layout. This layout works best when you can provide a larger graphic like an illustration as the `icon`. For consistency, we recommend providing the illustration using a [EuiImage](../image.mdx) with `size="fullWidth"`.
175177

176-
<Demo scope={{ useBaseUrl }}>
178+
<Demo scope={{ illustration: illustrationUrl }} extraFiles={{ 'illustration.svg': illustrationSource }}>
177179
```tsx
178180
import React from 'react';
179181
import {
@@ -183,12 +185,13 @@ When you have longer body text with multiple calls to action, you can use the `h
183185
EuiLink,
184186
EuiImage,
185187
} from '@elastic/eui';
188+
import illustration from './illustration.svg';
186189

187190
export default () => {
188191
return (
189192
<>
190193
<EuiEmptyPrompt
191-
icon={<EuiImage size="fullWidth" src={useBaseUrl('/images/empty_prompt/illustration.svg')} alt="" />}
194+
icon={<EuiImage size="fullWidth" src={illustration} alt="" />}
192195
title={<h2>Create your first visualization</h2>}
193196
layout="horizontal"
194197
color="plain"
@@ -240,7 +243,7 @@ When using a **EuiEmptyPrompt** in a [EuiPageTemplate](../../templates/page-temp
240243

241244
The following example shows the usage of the [EuiPageTemplate.EmptyPrompt](../../templates/page-template/index.mdx#empty-pages-or-content) namespaced component.
242245

243-
<Demo scope={{ useBaseUrl }}>
246+
<Demo scope={{ illustration: illustrationUrl }} extraFiles={{ 'illustration.svg': illustrationSource }}>
244247
```tsx
245248
import React from 'react';
246249
import {
@@ -250,12 +253,13 @@ The following example shows the usage of the [EuiPageTemplate.EmptyPrompt](../..
250253
EuiLink,
251254
EuiImage,
252255
} from '@elastic/eui';
256+
import illustration from './illustration.svg';
253257

254258
export default () => (
255259
<EuiPageTemplate minHeight="0">
256260
<EuiPageTemplate.EmptyPrompt
257261
title={<h2>Create your first visualization</h2>}
258-
icon={<EuiImage size="fullWidth" src={useBaseUrl('/images/empty_prompt/illustration.svg')} alt="" />}
262+
icon={<EuiImage size="fullWidth" src={illustration} alt="" />}
259263
color="plain"
260264
layout="horizontal"
261265
body={
@@ -298,6 +302,7 @@ You can then tie multiple types of empty states together to create a seamless lo
298302
)}>
299303
```tsx
300304
import React, { useState, useEffect } from 'react';
305+
import { css } from '@emotion/react';
301306
import {
302307
EuiPageTemplate,
303308
EuiLoadingLogo,

0 commit comments

Comments
 (0)