Skip to content

Commit 701b2c8

Browse files
radekkaluzikfhlavac
radekkaluzik
authored and
fhlavac
committed
Unavalable Content button change (patternfly#244)
1 parent 880515b commit 701b2c8

File tree

2 files changed

+49
-54
lines changed

2 files changed

+49
-54
lines changed

‎packages/module/src/UnavailableContent/UnavailableContent.tsx‎

Lines changed: 17 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,6 @@
11
import React from 'react';
2-
import { Button, EmptyState, EmptyStateBody, EmptyStateProps, EmptyStateStatus, EmptyStateVariant } from '@patternfly/react-core';
2+
import { Button, EmptyState, EmptyStateBody, EmptyStateFooter, EmptyStateProps, EmptyStateStatus, EmptyStateVariant } from '@patternfly/react-core';
33
import { ExclamationCircleIcon } from '@patternfly/react-icons';
4-
import { createUseStyles } from 'react-jss';
5-
6-
const useStyles = createUseStyles({
7-
emptyStateLinkButton: {
8-
padding: '0',
9-
fontSize: 'var(--pf-v6-c-empty-state--body--FontSize)'
10-
}
11-
});
124

135
export interface UnavailableContentProps extends Omit<EmptyStateProps, 'children' | 'titleText' | 'bodyText'> {
146
/** The URL that the status page link points to */
@@ -17,35 +9,30 @@ export interface UnavailableContentProps extends Omit<EmptyStateProps, 'children
179
statusPageLinkText?: string;
1810
/** The title for the unavailable content message */
1911
titleText?: string;
20-
/** The body text for the unavailable content message that appears before the status page link */
21-
preLinkBodyText?: string;
22-
/** The body text for the unavailable content message that appears after the status page link */
23-
postLinkBodyText?: string;
12+
/** The body text for the unavailable content message */
13+
bodyText?: string;
2414
/** Custom OUIA ID */
2515
ouiaId?: string | number;
2616
}
2717

2818
const UnavailableContent: React.FunctionComponent<UnavailableContentProps> = ({
2919
statusPageUrl = '',
30-
statusPageLinkText = 'status page',
20+
statusPageLinkText = 'Status Page',
3121
titleText = 'This page is temporarily unavailable',
32-
preLinkBodyText = 'Try refreshing the page. If the problem persists, contact your organization administrator or visit our',
33-
postLinkBodyText = 'for known outages.',
22+
bodyText = 'Try refreshing the page. If the problem persists, contact your organization administrator or visit our status page for known outages.',
3423
ouiaId = 'UnavailableContent',
3524
...props
36-
}: UnavailableContentProps) => {
37-
const classes = useStyles();
38-
return (
39-
<EmptyState headingLevel="h5" status={EmptyStateStatus.danger} icon={ExclamationCircleIcon} titleText={titleText} variant={EmptyStateVariant.lg} data-ouia-component-id={ouiaId} {...props}>
40-
<EmptyStateBody data-ouia-component-id={`${ouiaId}-body`}>
41-
{preLinkBodyText}{' '}
42-
<Button component='a' className={classes.emptyStateLinkButton} variant='link' href={statusPageUrl} target="_blank" rel="noopener noreferrer" ouiaId={`${ouiaId}-link-button`}>
43-
{statusPageLinkText}
44-
</Button>{' '}
45-
{postLinkBodyText}
46-
</EmptyStateBody>
47-
</EmptyState>
48-
);
49-
};
25+
}: UnavailableContentProps) => (
26+
<EmptyState headingLevel="h5" status={EmptyStateStatus.danger} icon={ExclamationCircleIcon} titleText={titleText} variant={EmptyStateVariant.lg} data-ouia-component-id={ouiaId} {...props}>
27+
<EmptyStateBody data-ouia-component-id={`${ouiaId}-body`}>
28+
{bodyText}
29+
</EmptyStateBody>
30+
<EmptyStateFooter data-ouia-component-id={`${ouiaId}-footer`}>
31+
<Button component='a' variant='primary' href={statusPageUrl} target="_blank" rel="noopener noreferrer" ouiaId={`${ouiaId}-link-button`}>
32+
{statusPageLinkText}
33+
</Button>
34+
</EmptyStateFooter>
35+
</EmptyState>
36+
);
5037

5138
export default UnavailableContent;

‎packages/module/src/UnavailableContent/__snapshots__/UnavailableContent.test.tsx.snap‎

Lines changed: 32 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -46,11 +46,15 @@ exports[`Unavailable component should render with a link 1`] = `
4646
class="pf-v6-c-empty-state__body"
4747
data-ouia-component-id="UnavailableContent-body"
4848
>
49-
Try refreshing the page. If the problem persists, contact your organization administrator or visit our
50-
49+
Try refreshing the page. If the problem persists, contact your organization administrator or visit our status page for known outages.
50+
</div>
51+
<div
52+
class="pf-v6-c-empty-state__footer"
53+
data-ouia-component-id="UnavailableContent-footer"
54+
>
5155
<a
5256
aria-disabled="false"
53-
class="pf-v6-c-button pf-m-link emptyStateLinkButton-0-2-1"
57+
class="pf-v6-c-button pf-m-primary"
5458
data-ouia-component-id="UnavailableContent-link-button"
5559
data-ouia-component-type="PF6/Button"
5660
data-ouia-safe="true"
@@ -61,11 +65,9 @@ exports[`Unavailable component should render with a link 1`] = `
6165
<span
6266
class="pf-v6-c-button__text"
6367
>
64-
status page
68+
Status Page
6569
</span>
6670
</a>
67-
68-
for known outages.
6971
</div>
7072
</div>
7173
</div>
@@ -113,11 +115,15 @@ exports[`Unavailable component should render with a link 1`] = `
113115
class="pf-v6-c-empty-state__body"
114116
data-ouia-component-id="UnavailableContent-body"
115117
>
116-
Try refreshing the page. If the problem persists, contact your organization administrator or visit our
117-
118+
Try refreshing the page. If the problem persists, contact your organization administrator or visit our status page for known outages.
119+
</div>
120+
<div
121+
class="pf-v6-c-empty-state__footer"
122+
data-ouia-component-id="UnavailableContent-footer"
123+
>
118124
<a
119125
aria-disabled="false"
120-
class="pf-v6-c-button pf-m-link emptyStateLinkButton-0-2-1"
126+
class="pf-v6-c-button pf-m-primary"
121127
data-ouia-component-id="UnavailableContent-link-button"
122128
data-ouia-component-type="PF6/Button"
123129
data-ouia-safe="true"
@@ -128,11 +134,9 @@ exports[`Unavailable component should render with a link 1`] = `
128134
<span
129135
class="pf-v6-c-button__text"
130136
>
131-
status page
137+
Status Page
132138
</span>
133139
</a>
134-
135-
for known outages.
136140
</div>
137141
</div>
138142
</div>
@@ -237,11 +241,15 @@ exports[`Unavailable component should render with no link 1`] = `
237241
class="pf-v6-c-empty-state__body"
238242
data-ouia-component-id="UnavailableContent-body"
239243
>
240-
Try refreshing the page. If the problem persists, contact your organization administrator or visit our
241-
244+
Try refreshing the page. If the problem persists, contact your organization administrator or visit our status page for known outages.
245+
</div>
246+
<div
247+
class="pf-v6-c-empty-state__footer"
248+
data-ouia-component-id="UnavailableContent-footer"
249+
>
242250
<a
243251
aria-disabled="false"
244-
class="pf-v6-c-button pf-m-link emptyStateLinkButton-0-2-1"
252+
class="pf-v6-c-button pf-m-primary"
245253
data-ouia-component-id="UnavailableContent-link-button"
246254
data-ouia-component-type="PF6/Button"
247255
data-ouia-safe="true"
@@ -252,11 +260,9 @@ exports[`Unavailable component should render with no link 1`] = `
252260
<span
253261
class="pf-v6-c-button__text"
254262
>
255-
status page
263+
Status Page
256264
</span>
257265
</a>
258-
259-
for known outages.
260266
</div>
261267
</div>
262268
</div>
@@ -304,11 +310,15 @@ exports[`Unavailable component should render with no link 1`] = `
304310
class="pf-v6-c-empty-state__body"
305311
data-ouia-component-id="UnavailableContent-body"
306312
>
307-
Try refreshing the page. If the problem persists, contact your organization administrator or visit our
308-
313+
Try refreshing the page. If the problem persists, contact your organization administrator or visit our status page for known outages.
314+
</div>
315+
<div
316+
class="pf-v6-c-empty-state__footer"
317+
data-ouia-component-id="UnavailableContent-footer"
318+
>
309319
<a
310320
aria-disabled="false"
311-
class="pf-v6-c-button pf-m-link emptyStateLinkButton-0-2-1"
321+
class="pf-v6-c-button pf-m-primary"
312322
data-ouia-component-id="UnavailableContent-link-button"
313323
data-ouia-component-type="PF6/Button"
314324
data-ouia-safe="true"
@@ -319,11 +329,9 @@ exports[`Unavailable component should render with no link 1`] = `
319329
<span
320330
class="pf-v6-c-button__text"
321331
>
322-
status page
332+
Status Page
323333
</span>
324334
</a>
325-
326-
for known outages.
327335
</div>
328336
</div>
329337
</div>

0 commit comments

Comments
 (0)