From 6d5438b73b826d7fc8d9551c1c97bb7e5cc6304f Mon Sep 17 00:00:00 2001 From: Donald Labaj Date: Thu, 12 Oct 2023 09:25:57 -0400 Subject: [PATCH 1/6] feat(unavailable): Added the unavailable page. --- .../examples/Unavailable/Unavailable.md | 25 +++ .../Unavailable/UnavailableExample.tsx | 6 + .../src/Unavailable/Unavailable.test.tsx | 9 + .../module/src/Unavailable/Unavailable.tsx | 30 ++++ .../__snapshots__/Unavailable.test.tsx.snap | 154 ++++++++++++++++++ packages/module/src/Unavailable/index.ts | 2 + packages/module/src/index.ts | 3 + 7 files changed, 229 insertions(+) create mode 100644 packages/module/patternfly-docs/content/extensions/component-groups/examples/Unavailable/Unavailable.md create mode 100644 packages/module/patternfly-docs/content/extensions/component-groups/examples/Unavailable/UnavailableExample.tsx create mode 100644 packages/module/src/Unavailable/Unavailable.test.tsx create mode 100644 packages/module/src/Unavailable/Unavailable.tsx create mode 100644 packages/module/src/Unavailable/__snapshots__/Unavailable.test.tsx.snap create mode 100644 packages/module/src/Unavailable/index.ts diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/Unavailable/Unavailable.md b/packages/module/patternfly-docs/content/extensions/component-groups/examples/Unavailable/Unavailable.md new file mode 100644 index 00000000..5835c373 --- /dev/null +++ b/packages/module/patternfly-docs/content/extensions/component-groups/examples/Unavailable/Unavailable.md @@ -0,0 +1,25 @@ +--- +# Sidenav top-level section +# should be the same for all markdown files +section: extensions +subsection: Component groups +# Sidenav secondary level section +# should be the same for all markdown files +id: Unavailable +# Tab (react | react-demos | html | html-demos | design-guidelines | accessibility) +source: react +# If you use typescript, the name of the interface to display props for +# These are found through the sourceProps function provided in patternfly-docs.source.js +propComponents: [] +--- + +import Unavailable from '@patternfly/react-component-groups/dist/dynamic/Unavailable'; + +An **unavialable** component displays a screen to users when they attempt to view a page that currently is unavailable. +It should be used when content the user is attempting to view is not available to them at the current time. + +### Unavailable + +```js file="./UnavailableExample.tsx" + +``` \ No newline at end of file diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/Unavailable/UnavailableExample.tsx b/packages/module/patternfly-docs/content/extensions/component-groups/examples/Unavailable/UnavailableExample.tsx new file mode 100644 index 00000000..589873ed --- /dev/null +++ b/packages/module/patternfly-docs/content/extensions/component-groups/examples/Unavailable/UnavailableExample.tsx @@ -0,0 +1,6 @@ +import React from 'react'; +import Unavailable from '@patternfly/react-component-groups/dist/dynamic/Unavailable'; + +export const BasicExample: React.FunctionComponent = () => ( + +); diff --git a/packages/module/src/Unavailable/Unavailable.test.tsx b/packages/module/src/Unavailable/Unavailable.test.tsx new file mode 100644 index 00000000..662af2ba --- /dev/null +++ b/packages/module/src/Unavailable/Unavailable.test.tsx @@ -0,0 +1,9 @@ +import React from 'react'; +import { render } from '@testing-library/react'; +import Unavailable from './Unavailable'; + +describe('Unavailable component', () => { + it('should render', () => { + expect(render()).toMatchSnapshot(); + }); +}); diff --git a/packages/module/src/Unavailable/Unavailable.tsx b/packages/module/src/Unavailable/Unavailable.tsx new file mode 100644 index 00000000..5619e1c4 --- /dev/null +++ b/packages/module/src/Unavailable/Unavailable.tsx @@ -0,0 +1,30 @@ +import React from 'react'; +import { EmptyState, EmptyStateBody, EmptyStateHeader, EmptyStateIcon, EmptyStateVariant } from '@patternfly/react-core'; +import { ExclamationCircleIcon } from '@patternfly/react-icons'; +import { createUseStyles } from 'react-jss'; +import clsx from 'clsx'; + +const useStyles = createUseStyles({ + '.ins-c-empty-state__unavailable': { + color: 'var(--pf-global--danger-color--100)', + '& svg': { color: 'var(--pf-global--danger-color--100)' } + } +}); + +const Unavailable: React.FunctionComponent = () => { + const classes = useStyles(); + return ( + + } /> + + Try refreshing the page. If the problem persists, contact your organization administrator or visit our{' '} + + status page + {' '} + for known outages. + + + ); +}; + +export default Unavailable; diff --git a/packages/module/src/Unavailable/__snapshots__/Unavailable.test.tsx.snap b/packages/module/src/Unavailable/__snapshots__/Unavailable.test.tsx.snap new file mode 100644 index 00000000..55edc3cc --- /dev/null +++ b/packages/module/src/Unavailable/__snapshots__/Unavailable.test.tsx.snap @@ -0,0 +1,154 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Unavailable component should render 1`] = ` +{ + "asFragment": [Function], + "baseElement": +
+
+
+
+
+ +
+
+
+ Try refreshing the page. If the problem persists, contact your organization administrator or visit our + + + status page + + + for known outages. +
+
+
+
+ , + "container":
+
+
+
+
+ +
+
+
+ Try refreshing the page. If the problem persists, contact your organization administrator or visit our + + + status page + + + for known outages. +
+
+
+
, + "debug": [Function], + "findAllByAltText": [Function], + "findAllByDisplayValue": [Function], + "findAllByLabelText": [Function], + "findAllByPlaceholderText": [Function], + "findAllByRole": [Function], + "findAllByTestId": [Function], + "findAllByText": [Function], + "findAllByTitle": [Function], + "findByAltText": [Function], + "findByDisplayValue": [Function], + "findByLabelText": [Function], + "findByPlaceholderText": [Function], + "findByRole": [Function], + "findByTestId": [Function], + "findByText": [Function], + "findByTitle": [Function], + "getAllByAltText": [Function], + "getAllByDisplayValue": [Function], + "getAllByLabelText": [Function], + "getAllByPlaceholderText": [Function], + "getAllByRole": [Function], + "getAllByTestId": [Function], + "getAllByText": [Function], + "getAllByTitle": [Function], + "getByAltText": [Function], + "getByDisplayValue": [Function], + "getByLabelText": [Function], + "getByPlaceholderText": [Function], + "getByRole": [Function], + "getByTestId": [Function], + "getByText": [Function], + "getByTitle": [Function], + "queryAllByAltText": [Function], + "queryAllByDisplayValue": [Function], + "queryAllByLabelText": [Function], + "queryAllByPlaceholderText": [Function], + "queryAllByRole": [Function], + "queryAllByTestId": [Function], + "queryAllByText": [Function], + "queryAllByTitle": [Function], + "queryByAltText": [Function], + "queryByDisplayValue": [Function], + "queryByLabelText": [Function], + "queryByPlaceholderText": [Function], + "queryByRole": [Function], + "queryByTestId": [Function], + "queryByText": [Function], + "queryByTitle": [Function], + "rerender": [Function], + "unmount": [Function], +} +`; diff --git a/packages/module/src/Unavailable/index.ts b/packages/module/src/Unavailable/index.ts new file mode 100644 index 00000000..debbeb0c --- /dev/null +++ b/packages/module/src/Unavailable/index.ts @@ -0,0 +1,2 @@ +export { default } from './Unavailable'; +export { default as Unavailable } from './Unavailable'; diff --git a/packages/module/src/index.ts b/packages/module/src/index.ts index b0f65d56..c2d88caa 100644 --- a/packages/module/src/index.ts +++ b/packages/module/src/index.ts @@ -29,3 +29,6 @@ export * from './LongTextTooltip'; export { default as NotAuthorized } from './NotAuthorized'; export * from './NotAuthorized'; + +export { default as Unavailable } from './Unavailable'; +export * from './Unavailable'; From 591c2017b8a811ad6f0c76ffbcf629efbc4503c4 Mon Sep 17 00:00:00 2001 From: Donald Labaj Date: Thu, 12 Oct 2023 10:27:14 -0400 Subject: [PATCH 2/6] Updated with review comments. --- .../examples/Unavailable/Unavailable.md | 7 +- .../Unavailable/UnavailableExample.tsx | 2 +- .../src/Unavailable/Unavailable.test.tsx | 7 +- .../module/src/Unavailable/Unavailable.tsx | 13 +- .../__snapshots__/Unavailable.test.tsx.snap | 163 +++++++++++++++++- packages/module/src/Unavailable/index.ts | 2 +- 6 files changed, 179 insertions(+), 15 deletions(-) diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/Unavailable/Unavailable.md b/packages/module/patternfly-docs/content/extensions/component-groups/examples/Unavailable/Unavailable.md index 5835c373..cc44e743 100644 --- a/packages/module/patternfly-docs/content/extensions/component-groups/examples/Unavailable/Unavailable.md +++ b/packages/module/patternfly-docs/content/extensions/component-groups/examples/Unavailable/Unavailable.md @@ -10,16 +10,17 @@ id: Unavailable source: react # If you use typescript, the name of the interface to display props for # These are found through the sourceProps function provided in patternfly-docs.source.js -propComponents: [] +propComponents: ['Unavailable'] --- import Unavailable from '@patternfly/react-component-groups/dist/dynamic/Unavailable'; An **unavialable** component displays a screen to users when they attempt to view a page that currently is unavailable. -It should be used when content the user is attempting to view is not available to them at the current time. +It should be used when content the user is attempting to view is not available to them at the current time. +You can add a `statusPageUrl` to provide a link to a status page for the service that is unavailable. ### Unavailable ```js file="./UnavailableExample.tsx" -``` \ No newline at end of file +``` diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/Unavailable/UnavailableExample.tsx b/packages/module/patternfly-docs/content/extensions/component-groups/examples/Unavailable/UnavailableExample.tsx index 589873ed..b5aec749 100644 --- a/packages/module/patternfly-docs/content/extensions/component-groups/examples/Unavailable/UnavailableExample.tsx +++ b/packages/module/patternfly-docs/content/extensions/component-groups/examples/Unavailable/UnavailableExample.tsx @@ -2,5 +2,5 @@ import React from 'react'; import Unavailable from '@patternfly/react-component-groups/dist/dynamic/Unavailable'; export const BasicExample: React.FunctionComponent = () => ( - + ); diff --git a/packages/module/src/Unavailable/Unavailable.test.tsx b/packages/module/src/Unavailable/Unavailable.test.tsx index 662af2ba..72252b77 100644 --- a/packages/module/src/Unavailable/Unavailable.test.tsx +++ b/packages/module/src/Unavailable/Unavailable.test.tsx @@ -3,7 +3,12 @@ import { render } from '@testing-library/react'; import Unavailable from './Unavailable'; describe('Unavailable component', () => { - it('should render', () => { + it('should render with no link', () => { expect(render()).toMatchSnapshot(); }); + + it('should render with a link', () => { + expect(render()).toMatchSnapshot(); + }); + }); diff --git a/packages/module/src/Unavailable/Unavailable.tsx b/packages/module/src/Unavailable/Unavailable.tsx index 5619e1c4..f5bea7a0 100644 --- a/packages/module/src/Unavailable/Unavailable.tsx +++ b/packages/module/src/Unavailable/Unavailable.tsx @@ -5,20 +5,25 @@ import { createUseStyles } from 'react-jss'; import clsx from 'clsx'; const useStyles = createUseStyles({ - '.ins-c-empty-state__unavailable': { + emptyStateUnavailable: { color: 'var(--pf-global--danger-color--100)', '& svg': { color: 'var(--pf-global--danger-color--100)' } } }); -const Unavailable: React.FunctionComponent = () => { +export interface UnavailableProps { + /** Page to open when user clicks on status page link */ + statusPageUrl?: string; +} + +const Unavailable: React.FunctionComponent = ({ statusPageUrl = '' }: UnavailableProps) => { const classes = useStyles(); return ( - + } /> Try refreshing the page. If the problem persists, contact your organization administrator or visit our{' '} - + status page {' '} for known outages. diff --git a/packages/module/src/Unavailable/__snapshots__/Unavailable.test.tsx.snap b/packages/module/src/Unavailable/__snapshots__/Unavailable.test.tsx.snap index 55edc3cc..42ab7464 100644 --- a/packages/module/src/Unavailable/__snapshots__/Unavailable.test.tsx.snap +++ b/packages/module/src/Unavailable/__snapshots__/Unavailable.test.tsx.snap @@ -1,12 +1,12 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`Unavailable component should render 1`] = ` +exports[`Unavailable component should render with a link 1`] = ` { "asFragment": [Function], "baseElement":
@@ -54,7 +54,7 @@ exports[`Unavailable component should render 1`] = ` , "container":
+ status page + + + for known outages. +
+
+
+
, + "debug": [Function], + "findAllByAltText": [Function], + "findAllByDisplayValue": [Function], + "findAllByLabelText": [Function], + "findAllByPlaceholderText": [Function], + "findAllByRole": [Function], + "findAllByTestId": [Function], + "findAllByText": [Function], + "findAllByTitle": [Function], + "findByAltText": [Function], + "findByDisplayValue": [Function], + "findByLabelText": [Function], + "findByPlaceholderText": [Function], + "findByRole": [Function], + "findByTestId": [Function], + "findByText": [Function], + "findByTitle": [Function], + "getAllByAltText": [Function], + "getAllByDisplayValue": [Function], + "getAllByLabelText": [Function], + "getAllByPlaceholderText": [Function], + "getAllByRole": [Function], + "getAllByTestId": [Function], + "getAllByText": [Function], + "getAllByTitle": [Function], + "getByAltText": [Function], + "getByDisplayValue": [Function], + "getByLabelText": [Function], + "getByPlaceholderText": [Function], + "getByRole": [Function], + "getByTestId": [Function], + "getByText": [Function], + "getByTitle": [Function], + "queryAllByAltText": [Function], + "queryAllByDisplayValue": [Function], + "queryAllByLabelText": [Function], + "queryAllByPlaceholderText": [Function], + "queryAllByRole": [Function], + "queryAllByTestId": [Function], + "queryAllByText": [Function], + "queryAllByTitle": [Function], + "queryByAltText": [Function], + "queryByDisplayValue": [Function], + "queryByLabelText": [Function], + "queryByPlaceholderText": [Function], + "queryByRole": [Function], + "queryByTestId": [Function], + "queryByText": [Function], + "queryByTitle": [Function], + "rerender": [Function], + "unmount": [Function], +} +`; + +exports[`Unavailable component should render with no link 1`] = ` +{ + "asFragment": [Function], + "baseElement": +
+
+
+
+
+ +
+
+
+ Try refreshing the page. If the problem persists, contact your organization administrator or visit our + + + status page + + + for known outages. +
+
+
+
+ , + "container":
+
+
+
+
+ +
+
+
+ Try refreshing the page. If the problem persists, contact your organization administrator or visit our + + diff --git a/packages/module/src/Unavailable/index.ts b/packages/module/src/Unavailable/index.ts index debbeb0c..445325dd 100644 --- a/packages/module/src/Unavailable/index.ts +++ b/packages/module/src/Unavailable/index.ts @@ -1,2 +1,2 @@ export { default } from './Unavailable'; -export { default as Unavailable } from './Unavailable'; +export * from './Unavailable'; From fe8a865d651fe14fd9a00ea0242a741957867101 Mon Sep 17 00:00:00 2001 From: Donald Labaj Date: Thu, 12 Oct 2023 11:10:57 -0400 Subject: [PATCH 3/6] Fixed with review comments, and a11y issues. --- .../module/src/Unavailable/Unavailable.tsx | 9 ++++++--- .../__snapshots__/Unavailable.test.tsx.snap | 20 +++++++++++++++++++ 2 files changed, 26 insertions(+), 3 deletions(-) diff --git a/packages/module/src/Unavailable/Unavailable.tsx b/packages/module/src/Unavailable/Unavailable.tsx index f5bea7a0..3ebf2b2a 100644 --- a/packages/module/src/Unavailable/Unavailable.tsx +++ b/packages/module/src/Unavailable/Unavailable.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { EmptyState, EmptyStateBody, EmptyStateHeader, EmptyStateIcon, EmptyStateVariant } from '@patternfly/react-core'; +import { Button, EmptyState, EmptyStateBody, EmptyStateHeader, EmptyStateIcon, EmptyStateVariant } from '@patternfly/react-core'; import { ExclamationCircleIcon } from '@patternfly/react-icons'; import { createUseStyles } from 'react-jss'; import clsx from 'clsx'; @@ -8,6 +8,9 @@ const useStyles = createUseStyles({ emptyStateUnavailable: { color: 'var(--pf-global--danger-color--100)', '& svg': { color: 'var(--pf-global--danger-color--100)' } + }, + emptyStateLinkButton: { + padding: '0', } }); @@ -23,9 +26,9 @@ const Unavailable: React.FunctionComponent = ({ statusPageUrl } /> Try refreshing the page. If the problem persists, contact your organization administrator or visit our{' '} - + {' '} for known outages. diff --git a/packages/module/src/Unavailable/__snapshots__/Unavailable.test.tsx.snap b/packages/module/src/Unavailable/__snapshots__/Unavailable.test.tsx.snap index 42ab7464..f46d7cb2 100644 --- a/packages/module/src/Unavailable/__snapshots__/Unavailable.test.tsx.snap +++ b/packages/module/src/Unavailable/__snapshots__/Unavailable.test.tsx.snap @@ -39,6 +39,11 @@ exports[`Unavailable component should render with a link 1`] = ` Try refreshing the page. If the problem persists, contact your organization administrator or visit our Date: Thu, 12 Oct 2023 12:09:08 -0400 Subject: [PATCH 4/6] fixed duplicate id. --- .../component-groups/examples/Unavailable/Unavailable.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/Unavailable/Unavailable.md b/packages/module/patternfly-docs/content/extensions/component-groups/examples/Unavailable/Unavailable.md index cc44e743..7185ad18 100644 --- a/packages/module/patternfly-docs/content/extensions/component-groups/examples/Unavailable/Unavailable.md +++ b/packages/module/patternfly-docs/content/extensions/component-groups/examples/Unavailable/Unavailable.md @@ -19,7 +19,9 @@ An **unavialable** component displays a screen to users when they attempt to vie It should be used when content the user is attempting to view is not available to them at the current time. You can add a `statusPageUrl` to provide a link to a status page for the service that is unavailable. -### Unavailable +## Examples + +### Unavailable example ```js file="./UnavailableExample.tsx" From 960e4544c26aa352267546e9cd1f5024bef20756 Mon Sep 17 00:00:00 2001 From: Donald Labaj Date: Thu, 12 Oct 2023 12:47:02 -0400 Subject: [PATCH 5/6] Updated with documentation review. --- .../examples/Unavailable/Unavailable.md | 28 ------------------ .../Unavailable/UnavailableContent.md | 29 +++++++++++++++++++ .../Unavailable/UnavailableContentExample.tsx | 6 ++++ .../Unavailable/UnavailableExample.tsx | 6 ---- packages/module/src/Unavailable/index.ts | 2 -- .../UnavailableContent.test.tsx} | 6 ++-- .../UnavailableContent.tsx} | 6 ++-- .../UnavailableContent.test.tsx.snap} | 0 .../module/src/UnavailableContent/index.ts | 2 ++ packages/module/src/index.ts | 4 +-- 10 files changed, 45 insertions(+), 44 deletions(-) delete mode 100644 packages/module/patternfly-docs/content/extensions/component-groups/examples/Unavailable/Unavailable.md create mode 100644 packages/module/patternfly-docs/content/extensions/component-groups/examples/Unavailable/UnavailableContent.md create mode 100644 packages/module/patternfly-docs/content/extensions/component-groups/examples/Unavailable/UnavailableContentExample.tsx delete mode 100644 packages/module/patternfly-docs/content/extensions/component-groups/examples/Unavailable/UnavailableExample.tsx delete mode 100644 packages/module/src/Unavailable/index.ts rename packages/module/src/{Unavailable/Unavailable.test.tsx => UnavailableContent/UnavailableContent.test.tsx} (50%) rename packages/module/src/{Unavailable/Unavailable.tsx => UnavailableContent/UnavailableContent.tsx} (86%) rename packages/module/src/{Unavailable/__snapshots__/Unavailable.test.tsx.snap => UnavailableContent/__snapshots__/UnavailableContent.test.tsx.snap} (100%) create mode 100644 packages/module/src/UnavailableContent/index.ts diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/Unavailable/Unavailable.md b/packages/module/patternfly-docs/content/extensions/component-groups/examples/Unavailable/Unavailable.md deleted file mode 100644 index 7185ad18..00000000 --- a/packages/module/patternfly-docs/content/extensions/component-groups/examples/Unavailable/Unavailable.md +++ /dev/null @@ -1,28 +0,0 @@ ---- -# Sidenav top-level section -# should be the same for all markdown files -section: extensions -subsection: Component groups -# Sidenav secondary level section -# should be the same for all markdown files -id: Unavailable -# Tab (react | react-demos | html | html-demos | design-guidelines | accessibility) -source: react -# If you use typescript, the name of the interface to display props for -# These are found through the sourceProps function provided in patternfly-docs.source.js -propComponents: ['Unavailable'] ---- - -import Unavailable from '@patternfly/react-component-groups/dist/dynamic/Unavailable'; - -An **unavialable** component displays a screen to users when they attempt to view a page that currently is unavailable. -It should be used when content the user is attempting to view is not available to them at the current time. -You can add a `statusPageUrl` to provide a link to a status page for the service that is unavailable. - -## Examples - -### Unavailable example - -```js file="./UnavailableExample.tsx" - -``` diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/Unavailable/UnavailableContent.md b/packages/module/patternfly-docs/content/extensions/component-groups/examples/Unavailable/UnavailableContent.md new file mode 100644 index 00000000..ae7db37d --- /dev/null +++ b/packages/module/patternfly-docs/content/extensions/component-groups/examples/Unavailable/UnavailableContent.md @@ -0,0 +1,29 @@ +--- +# Sidenav top-level section +# should be the same for all markdown files +section: extensions +subsection: Component groups +# Sidenav secondary level section +# should be the same for all markdown files +id: Unavailable content +# Tab (react | react-demos | html | html-demos | design-guidelines | accessibility) +source: react +# If you use typescript, the name of the interface to display props for +# These are found through the sourceProps function provided in patternfly-docs.source.js +propComponents: ['UnavailableContent'] +--- + +import UnavailableContent from '@patternfly/react-component-groups/dist/dynamic/UnavailableContent'; + +An **unavailable content** component displays a screen to users when they attempt to view a page that is currently unavailable to view. + +## Examples + +### Basic unavailable content + +A basic unavailable content component provides users with instructions, including a link to check a status page for known issues. +The status page link can be specified using the `statusPageUrl`. + +```js file="./UnavailableContentExample.tsx" + +``` diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/Unavailable/UnavailableContentExample.tsx b/packages/module/patternfly-docs/content/extensions/component-groups/examples/Unavailable/UnavailableContentExample.tsx new file mode 100644 index 00000000..c11c8fc4 --- /dev/null +++ b/packages/module/patternfly-docs/content/extensions/component-groups/examples/Unavailable/UnavailableContentExample.tsx @@ -0,0 +1,6 @@ +import React from 'react'; +import UnavailableContent from '@patternfly/react-component-groups/dist/dynamic/UnavailableContent'; + +export const BasicExample: React.FunctionComponent = () => ( + +); diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/Unavailable/UnavailableExample.tsx b/packages/module/patternfly-docs/content/extensions/component-groups/examples/Unavailable/UnavailableExample.tsx deleted file mode 100644 index b5aec749..00000000 --- a/packages/module/patternfly-docs/content/extensions/component-groups/examples/Unavailable/UnavailableExample.tsx +++ /dev/null @@ -1,6 +0,0 @@ -import React from 'react'; -import Unavailable from '@patternfly/react-component-groups/dist/dynamic/Unavailable'; - -export const BasicExample: React.FunctionComponent = () => ( - -); diff --git a/packages/module/src/Unavailable/index.ts b/packages/module/src/Unavailable/index.ts deleted file mode 100644 index 445325dd..00000000 --- a/packages/module/src/Unavailable/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export { default } from './Unavailable'; -export * from './Unavailable'; diff --git a/packages/module/src/Unavailable/Unavailable.test.tsx b/packages/module/src/UnavailableContent/UnavailableContent.test.tsx similarity index 50% rename from packages/module/src/Unavailable/Unavailable.test.tsx rename to packages/module/src/UnavailableContent/UnavailableContent.test.tsx index 72252b77..1d28ffb8 100644 --- a/packages/module/src/Unavailable/Unavailable.test.tsx +++ b/packages/module/src/UnavailableContent/UnavailableContent.test.tsx @@ -1,14 +1,14 @@ import React from 'react'; import { render } from '@testing-library/react'; -import Unavailable from './Unavailable'; +import UnavailableContent from './UnavailableContent'; describe('Unavailable component', () => { it('should render with no link', () => { - expect(render()).toMatchSnapshot(); + expect(render()).toMatchSnapshot(); }); it('should render with a link', () => { - expect(render()).toMatchSnapshot(); + expect(render()).toMatchSnapshot(); }); }); diff --git a/packages/module/src/Unavailable/Unavailable.tsx b/packages/module/src/UnavailableContent/UnavailableContent.tsx similarity index 86% rename from packages/module/src/Unavailable/Unavailable.tsx rename to packages/module/src/UnavailableContent/UnavailableContent.tsx index 3ebf2b2a..fb8e4ce0 100644 --- a/packages/module/src/Unavailable/Unavailable.tsx +++ b/packages/module/src/UnavailableContent/UnavailableContent.tsx @@ -14,12 +14,12 @@ const useStyles = createUseStyles({ } }); -export interface UnavailableProps { +export interface UnavailableContentProps { /** Page to open when user clicks on status page link */ statusPageUrl?: string; } -const Unavailable: React.FunctionComponent = ({ statusPageUrl = '' }: UnavailableProps) => { +const UnavailableContent: React.FunctionComponent = ({ statusPageUrl = '' }: UnavailableContentProps) => { const classes = useStyles(); return ( @@ -35,4 +35,4 @@ const Unavailable: React.FunctionComponent = ({ statusPageUrl ); }; -export default Unavailable; +export default UnavailableContent; diff --git a/packages/module/src/Unavailable/__snapshots__/Unavailable.test.tsx.snap b/packages/module/src/UnavailableContent/__snapshots__/UnavailableContent.test.tsx.snap similarity index 100% rename from packages/module/src/Unavailable/__snapshots__/Unavailable.test.tsx.snap rename to packages/module/src/UnavailableContent/__snapshots__/UnavailableContent.test.tsx.snap diff --git a/packages/module/src/UnavailableContent/index.ts b/packages/module/src/UnavailableContent/index.ts new file mode 100644 index 00000000..2ebf52ae --- /dev/null +++ b/packages/module/src/UnavailableContent/index.ts @@ -0,0 +1,2 @@ +export { default } from './UnavailableContent'; +export * from './UnavailableContent'; diff --git a/packages/module/src/index.ts b/packages/module/src/index.ts index c2d88caa..e4275441 100644 --- a/packages/module/src/index.ts +++ b/packages/module/src/index.ts @@ -30,5 +30,5 @@ export * from './LongTextTooltip'; export { default as NotAuthorized } from './NotAuthorized'; export * from './NotAuthorized'; -export { default as Unavailable } from './Unavailable'; -export * from './Unavailable'; +export { default as UnavailableContent } from './UnavailableContent'; +export * from './UnavailableContent'; From bcda58689cf39cfa97f2d95f002725c532476626 Mon Sep 17 00:00:00 2001 From: Filip Hlavac <50696716+fhlavac@users.noreply.github.com> Date: Fri, 13 Oct 2023 12:56:43 +0200 Subject: [PATCH 6/6] Update packages/module/patternfly-docs/content/extensions/component-groups/examples/Unavailable/UnavailableContent.md Co-authored-by: Erin Donehoo <105813956+edonehoo@users.noreply.github.com> --- .../component-groups/examples/Unavailable/UnavailableContent.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/Unavailable/UnavailableContent.md b/packages/module/patternfly-docs/content/extensions/component-groups/examples/Unavailable/UnavailableContent.md index ae7db37d..a9ccac36 100644 --- a/packages/module/patternfly-docs/content/extensions/component-groups/examples/Unavailable/UnavailableContent.md +++ b/packages/module/patternfly-docs/content/extensions/component-groups/examples/Unavailable/UnavailableContent.md @@ -22,7 +22,7 @@ An **unavailable content** component displays a screen to users when they attemp ### Basic unavailable content A basic unavailable content component provides users with instructions, including a link to check a status page for known issues. -The status page link can be specified using the `statusPageUrl`. +The status page link can be specified using `statusPageUrl`. ```js file="./UnavailableContentExample.tsx"