From 71cb6f048489221d9eacbe741db40e52c8885c8a Mon Sep 17 00:00:00 2001 From: Rebecca Alpert Date: Mon, 5 May 2025 13:31:52 -0400 Subject: [PATCH 1/2] chore(React19): Enable React19 Fix lint errors --- .eslintrc.json | 4 +- README.md | 47 ++++++-- cypress/component/Ansible.cy.tsx | 7 +- cypress/component/BulkSelect.cy.tsx | 56 ++++----- cypress/component/CloseButton.cy.tsx | 15 ++- cypress/component/ErrorBoundary.cy.tsx | 19 +-- cypress/component/ErrorState.cy.tsx | 25 ++-- cypress/component/LogSnippet.cy.tsx | 5 +- cypress/component/Maintenance.cy.tsx | 9 +- cypress/component/MissingPage.cy.tsx | 11 +- cypress/component/MultiContentCard.cy.tsx | 93 ++++++++++----- cypress/component/NotAuthorized.cy.tsx | 33 +++--- cypress/component/PageHeader.cy.tsx | 16 +-- cypress/component/ResponsiveActions.cy.tsx | 25 ++-- cypress/component/ServiceCard.cy.tsx | 63 +++++----- cypress/component/Severity.cy.tsx | 7 +- cypress/component/ShortcutGrid.cy.tsx | 19 ++- cypress/component/SkeletonTable.cy.tsx | 13 +- cypress/component/SkeletonTableBody.cy.tsx | 3 +- cypress/component/SkeletonTableHead.cy.tsx | 1 - cypress/component/Status.cy.tsx | 54 ++++++--- cypress/component/TagCount.cy.tsx | 7 +- cypress/component/UnavailableContent.cy.tsx | 9 +- cypress/component/WarningModal.cy.tsx | 111 ++++++++++-------- cypress/support/commands.ts | 2 +- package-lock.json | 28 ++--- packages/module/package.json | 8 +- .../examples/Ansible/Ansible.md | 6 +- .../Ansible/AnsibleSupportedExample.tsx | 4 +- .../Ansible/AnsibleTechnologyExample.tsx | 6 +- .../Ansible/AnsibleUnsupportedExample.tsx | 4 +- .../examples/BulkSelect/BulkSelect.md | 3 +- .../BulkSelect/BulkSelectAllExample.tsx | 18 +-- .../examples/BulkSelect/BulkSelectExample.tsx | 18 +-- .../examples/CloseButton/CloseButton.md | 1 + .../CloseButton/CloseButtonExample.tsx | 12 +- .../ColumnManagementModal.md | 1 + .../ColumnManagementModalExample.tsx | 54 +++++---- .../examples/ErrorBoundary/ErrorBoundary.md | 5 +- .../ErrorBoundary/ErrorBoundaryExample.tsx | 22 ++-- .../examples/ErrorState/ErrorState.md | 3 +- .../examples/ErrorState/ErrorStateExample.tsx | 8 +- .../ErrorState/ErrorStateExtraProps.tsx | 14 +-- .../ErrorState/ErrorStateFooterExample.tsx | 20 +++- .../examples/LogSnippet/LogSnippet.md | 4 +- .../examples/LogSnippet/LogSnippetExample.tsx | 8 +- .../examples/Maintenance/Maintenance.md | 5 +- .../Maintenance/MaintenanceCustomExample.tsx | 16 ++- .../Maintenance/MaintenanceExample.tsx | 8 +- .../examples/MissingPage/MissingPage.md | 5 +- .../MissingPage/MissingPageExample.tsx | 4 +- .../MultiContentCard/MultiContentCard.md | 5 +- .../MultiContentCardExample.tsx | 83 +++++++++---- ...ltiContentCardExpandableActionsExample.tsx | 98 ++++++++++++---- ...ltiContentCardExpandableDividerExample.tsx | 92 ++++++++++----- .../MultiContentCardExpandableExample.tsx | 87 +++++++++----- ...tentCardExpandableSingleDividerExample.tsx | 90 +++++++++----- .../examples/PageHeader/PageHeader.md | 3 +- .../PageHeader/PageHeaderActionsExample.tsx | 34 ++++-- .../PageHeaderBreadcrumbExample.tsx | 34 ++---- .../examples/PageHeader/PageHeaderExample.tsx | 9 +- .../PageHeader/PageHeaderIconExample.tsx | 11 +- .../PageHeader/PageHeaderLabelLinkExample.tsx | 12 +- .../ResponsiveActions/ResponsiveActions.md | 5 +- .../ResponsiveActionsBreakpointExample.tsx | 29 ++--- .../ResponsiveActionsExample.tsx | 20 ++-- .../examples/ServiceCard/ServiceCard.md | 2 +- .../ServiceCard/ServiceCardExample.tsx | 31 ++--- .../ServiceCard/ServiceCardGalleryExample.tsx | 43 +++---- .../ServiceCard/ServiceCardStackedExample.tsx | 32 ++--- .../examples/Severity/Severity.md | 18 +-- .../Severity/SeverityCriticalExample.tsx | 8 +- .../Severity/SeverityImportantExample.tsx | 6 +- .../Severity/SeverityMinorExample.tsx | 4 +- .../Severity/SeverityModerateExample.tsx | 4 +- .../examples/Severity/SeverityNoneExample.tsx | 4 +- .../Severity/SeverityUndefinedExample.tsx | 6 +- .../examples/ShortcutGrid/ShortcutExample.tsx | 6 +- .../examples/ShortcutGrid/ShortcutGrid.md | 12 +- .../ShortcutGrid/ShortcutGridExample.tsx | 12 +- .../examples/SkeletonTable/SkeletonTable.md | 3 +- .../SkeletonTableBodyExample.tsx | 8 +- .../SkeletonTableCompactExample.tsx | 8 +- .../SkeletonTableCustomExample.tsx | 6 +- .../SkeletonTable/SkeletonTableExample.tsx | 6 +- .../SkeletonTableExpandableExample.tsx | 8 +- .../SkeletonTableHeadExample.tsx | 8 +- .../SkeletonTableLoadingExample.tsx | 16 ++- .../SkeletonTableSelectableExample.tsx | 6 +- .../StaleDataWarning/StaleDataWarning.md | 7 +- .../StaleDataWarningCustomExample.tsx | 56 +++++---- .../StaleDataWarningExample.tsx | 49 ++++---- .../examples/Status/IconOnlyStatusExample.tsx | 12 +- .../examples/Status/LinkStatusExample.tsx | 14 ++- .../examples/Status/PopoverStatusExample.tsx | 20 ++-- .../examples/Status/Status.md | 6 +- .../Status/StatusDescriptionExample.tsx | 6 +- .../examples/Status/StatusExample.tsx | 6 +- .../examples/TagCount/TagCount.md | 4 +- .../TagCount/TagCountDisabledExample.tsx | 4 +- .../examples/TagCount/TagCountExample.tsx | 4 +- .../UnauthorizedAccess/UnauthorizedAccess.md | 3 +- .../UnauthorizedAccessActionsExample.tsx | 19 ++- .../UnauthorizedAccessExample.tsx | 12 +- .../Unavailable/UnavailableContent.md | 1 + .../Unavailable/UnavailableContentExample.tsx | 6 +- .../examples/WarningModal/WarningModal.md | 7 +- .../WarningModalCheckboxExample.tsx | 36 +++--- .../WarningModalDangerExample.tsx | 31 ++--- .../WarningModal/WarningModalExample.tsx | 33 +++--- .../WarningModalTextConfirmationExample.tsx | 37 +++--- .../module/patternfly-docs/pages/index.js | 1 + packages/module/src/Ansible/Ansible.test.tsx | 1 - packages/module/src/Ansible/Ansible.tsx | 17 +-- .../module/src/BulkSelect/BulkSelect.test.tsx | 1 - packages/module/src/BulkSelect/BulkSelect.tsx | 11 +- .../module/src/CloseButton/CloseButton.tsx | 4 +- .../ColumnManagementModal.test.tsx | 1 - .../ColumnManagementModal.tsx | 13 +- .../src/ContentHeader/ContentHeader.tsx | 16 +-- .../src/ErrorBoundary/ErrorBoundary.test.tsx | 1 - .../src/ErrorBoundary/ErrorBoundary.tsx | 19 +-- packages/module/src/ErrorStack/ErrorStack.tsx | 4 +- .../module/src/ErrorState/ErrorState.test.tsx | 1 - packages/module/src/ErrorState/ErrorState.tsx | 12 +- .../module/src/LogSnippet/LogSnippet.test.tsx | 1 - packages/module/src/LogSnippet/LogSnippet.tsx | 8 +- .../module/src/Maintenance/Maintenance.tsx | 20 ++-- .../src/MissingPage/MissingPage.test.tsx | 1 - .../module/src/MissingPage/MissingPage.tsx | 10 +- .../MultiContentCard.test.tsx | 4 +- .../src/MultiContentCard/MultiContentCard.tsx | 27 +++-- .../module/src/NotFoundIcon/NotFoundIcon.tsx | 4 +- .../module/src/PageHeader/PageHeader.test.tsx | 1 - packages/module/src/PageHeader/PageHeader.tsx | 20 ++-- .../src/ResponsiveAction/ResponsiveAction.tsx | 6 +- .../ResponsiveActions.test.tsx | 1 - .../ResponsiveActions/ResponsiveActions.tsx | 17 +-- .../src/ServiceCard/ServiceCard.test.tsx | 1 - .../module/src/ServiceCard/ServiceCard.tsx | 14 +-- .../module/src/Severity/Severity.test.tsx | 1 - packages/module/src/Severity/Severity.tsx | 13 +- .../module/src/Shortcut/Shortcut.test.tsx | 1 - packages/module/src/Shortcut/Shortcut.tsx | 6 +- .../src/ShortcutGrid/ShortcutGrid.test.tsx | 1 - .../module/src/ShortcutGrid/ShortcutGrid.tsx | 16 +-- .../src/SkeletonTable/SkeletonTable.test.tsx | 1 - .../src/SkeletonTable/SkeletonTable.tsx | 24 ++-- .../SkeletonTableBody.test.tsx | 1 - .../SkeletonTableBody/SkeletonTableBody.tsx | 4 +- .../SkeletonTableHead.test.tsx | 1 - .../SkeletonTableHead/SkeletonTableHead.tsx | 5 +- .../src/StaleDataWarning/StaleDataWarning.tsx | 8 +- packages/module/src/Status/Status.test.tsx | 1 - packages/module/src/Status/Status.tsx | 84 ++++++++++--- .../module/src/TagCount/TagCount.test.tsx | 1 - packages/module/src/TagCount/TagCount.tsx | 4 +- .../UnauthorizedAccess.test.tsx | 1 - .../UnauthorizedAccess/UnauthorizedAccess.tsx | 20 ++-- .../UnavailableContent.test.tsx | 3 +- .../UnavailableContent/UnavailableContent.tsx | 10 +- .../src/WarningModal/WarningModal.test.tsx | 1 - .../module/src/WarningModal/WarningModal.tsx | 53 +++++---- packages/module/tsconfig.json | 8 +- tsconfig.json | 6 +- 165 files changed, 1515 insertions(+), 1177 deletions(-) diff --git a/.eslintrc.json b/.eslintrc.json index d96089ba..484a75fb 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -9,6 +9,7 @@ "plugin:react/recommended", "plugin:react-hooks/recommended", "plugin:@typescript-eslint/recommended", + "plugin:react/jsx-runtime", "prettier" ], "overrides": [ @@ -95,6 +96,7 @@ "react-hooks/exhaustive-deps": "warn", "react/no-unescaped-entities": ["error", { "forbid": [">", "}"] }], "spaced-comment": "error", - "use-isnan": "error" + "use-isnan": "error", + "react/react-in-jsx-scope": "off" } } diff --git a/README.md b/README.md index 39adede3..837304d0 100644 --- a/README.md +++ b/README.md @@ -3,6 +3,7 @@ This repo contains a set of opinionated react component groups used to standardize functionality and look and feel across products. The components are based on PatternFly with some additional functionality. ### Branches + `main` - PatternFly 6 implementation `v5` - PatternFly 5 implementation @@ -14,22 +15,27 @@ This repo contains a set of opinionated react component groups used to standardi --- ### Migration from [RedHatInsights/frontend-components](https://github.com/RedHatInsights/frontend-components) to [patternfly/react-component-groups](https://github.com/patternfly/react-component-groups) + Please see the [migration guide](./migration.md) --- + ## Contribution guide ### Before adding a new component: + - make sure your use case is new/complex enough to be added to this extension - the component should bring a value value above and beyond existing PatternFly components ### To add a new component: + 1. create a folder in `src/` matching its name (for example `src/MyComponent`) 2. to the new folder add a new `.tsx` file named after the component (for example `src/MyComponent/MyComponent.tsx`) 3. to the same folder include an `index.ts` which will export the component as a default and then all necessary interfaces 4. if this file structure is not met, your component won't be exposed correctly #### Example component: + ``` import * as React from 'react'; import { Content } from '@patternfly/react-core'; @@ -49,7 +55,8 @@ const useStyles = createUseStyles({ }) // do not use the named export of your component, just a default one -const MyComponent: React.FunctionComponent = () => { +import { FunctionComponent } from 'react'; +const MyComponent: FunctionComponent = () => { const classes = useStyles(); return ( @@ -60,23 +67,26 @@ const MyComponent: React.FunctionComponent = () => { }; export default MyComponent; -``` +``` #### Index file example: + ``` export { default } from './MyComponent'; export * from './MyComponent'; -``` +``` #### Component directory structure example: + ``` src |- MyComponent |- index.ts |- MyComponent.tsx -``` +``` ### Component's API rules: + - prop names comply with PatternFly components naming standards (`variant`, `onClick`, `position`, etc.) - the API is maximally simplified and all props are provided with a description - it is built on top of existing PatternFly types without prop omitting @@ -84,18 +94,22 @@ src - do not unnecessarily use external libraries in your component - rather, delegate the necessary logic to the component's user using the component's API #### Component API definition example: + ``` + +import { FunctionComponent } from 'react'; + // when possible, extend available PatternFly types export interface MyComponentProps extends ButtonProps { customLabel: Boolean }; -export const MyComponent: React.FunctionComponent = ({ customLabel, ...props }) => ( ... ); +export const MyComponent: FunctionComponent = ({ customLabel, ...props }) => ( ... ); ``` - #### Markdown file example: -``` + +```` --- section: Component groups subsection: My component's category @@ -113,13 +127,14 @@ MyComponent has been created to demo contributing to this repository. ```js file="./MyComponentExample.tsx"``` -``` +```` #### Component usage file example: (`MyComponentExample.tsx`) + ``` -import React from 'react'; +import { FunctionComponent } from 'react'; -const MyComponentExample: React.FunctionComponent = () => ( +const MyComponentExample: FunctionComponent = () => ( ); @@ -127,7 +142,9 @@ export default MyComponentExample; ``` ### Sub-components: -When adding a component for which it is advantageous to divide it into several sub-components make sure: + +When adding a component for which it is advantageous to divide it into several sub-components make sure: + - component and all its sub-components are located in separate files and directories straight under the `src/` folder - sub-components are exported and documented separately from their parent - parent component should provide a way to pass props to all its sub-components @@ -135,14 +152,17 @@ When adding a component for which it is advantageous to divide it into several s The aim is to enable the user of our "complex" component to use either complete or take advantage of its sub-components and manage their composition independently. ### Testing: + When adding/making changes to a component, always make sure your code is tested: -- use React Testing Library for unit testing + +- use React Testing Library for unit testing - add unit tests to a `[ComponentName].test.tsx` file to your component's directory - make sure all the core functionality is covered using Cypress component or E2E tests - add component tests to `cypress/component/[ComponentName].cy.tsx` file and E2E tests to `cypress/e2e/[ComponentName].spec.cy.ts` - add `ouiaId` to the component props definition with a default value of the component name (for subcomponents, let's use `ComponentName-element-specification` naming convention e.g. `ouiaId="WarningModal-confirm-button"`) ### Styling: + - for styling always use JSS - new classNames should be named in camelCase starting with the name of a given component and following with more details clarifying its purpose/component's subsection to which the class is applied (`actionMenu`, `actionMenuDropdown`, `actionMenuDropdownToggle`, etc.) - do not use `pf-v6-u-XXX` classes, use CSS variables in a custom class instead (styles for the utility classes are not bundled with the standard patternfly.css - it would require the consumer to import also addons.css) @@ -153,10 +173,12 @@ When adding/making changes to a component, always make sure your code is tested: - run `npm run build` ## Development + - run `npm install` - run `npm run start` to build and start the development server ## Testing and Linting + - run `npm run test` to run the unit tests - run `npm run cypress:run:cp` to run Cypress component tests - run `npm run cypress:run:e2e` to run Cypress E2E tests @@ -165,4 +187,3 @@ When adding/making changes to a component, always make sure your code is tested: ## A11y testing - run `npm run build:docs` followed by `npm run serve:docs`, then run `npm run test:a11y` in a new terminal window to run our accessibility tests for the components. Once the accessibility tests have finished running you can run `npm run serve:a11y` to locally view the generated report. - diff --git a/cypress/component/Ansible.cy.tsx b/cypress/component/Ansible.cy.tsx index 9618bfcc..fe46bba2 100644 --- a/cypress/component/Ansible.cy.tsx +++ b/cypress/component/Ansible.cy.tsx @@ -1,13 +1,12 @@ -import React from 'react'; import { Ansible } from '@patternfly/react-component-groups/dist/dynamic/Ansible'; describe('Ansible', () => { it('renders supported Ansible', () => { - cy.mount() + cy.mount(); cy.get('i').should('have.class', 'ansibleSupported-0-2-2'); }); it('renders unsupported Ansible', () => { - cy.mount() + cy.mount(); cy.get('i').should('have.class', 'ansibleUnsupported-0-2-3'); }); -}); \ No newline at end of file +}); diff --git a/cypress/component/BulkSelect.cy.tsx b/cypress/component/BulkSelect.cy.tsx index 52733694..044035fa 100644 --- a/cypress/component/BulkSelect.cy.tsx +++ b/cypress/component/BulkSelect.cy.tsx @@ -1,25 +1,31 @@ -import React, { useState } from 'react'; +import { useState } from 'react'; import BulkSelect, { BulkSelectProps, BulkSelectValue } from '../../packages/module/dist/dynamic/BulkSelect'; interface DataItem { - name: string -}; + name: string; +} -const BulkSelectTestComponent = ({ canSelectAll, isDataPaginated }: Omit) => { +const BulkSelectTestComponent = ({ + canSelectAll, + isDataPaginated +}: Omit) => { const [ selected, setSelected ] = useState([]); const allData = [ { name: '1' }, { name: '2' }, { name: '3' }, { name: '4' }, { name: '5' }, { name: '6' } ]; const pageData = [ { name: '1' }, { name: '2' }, { name: '3' }, { name: '4' }, { name: '5' } ]; const pageDataNames = pageData.map((item) => item.name); - const pageSelected = pageDataNames.every(item => selected.find(selectedItem => selectedItem.name === item)); + const pageSelected = pageDataNames.every((item) => selected.find((selectedItem) => selectedItem.name === item)); const handleBulkSelect = (value: BulkSelectValue) => { if (value === BulkSelectValue.page) { const updatedSelection = [ ...selected ]; - pageData.forEach(item => !updatedSelection.some(selectedItem => selectedItem.name === item.name) && updatedSelection.push(item)); + pageData.forEach( + (item) => + !updatedSelection.some((selectedItem) => selectedItem.name === item.name) && updatedSelection.push(item) + ); setSelected(updatedSelection); } - value === BulkSelectValue.nonePage && setSelected(selected.filter(item => !pageDataNames.includes(item.name))) + value === BulkSelectValue.nonePage && setSelected(selected.filter((item) => !pageDataNames.includes(item.name))); value === BulkSelectValue.none && setSelected([]); value === BulkSelectValue.all && setSelected(allData); }; @@ -32,7 +38,9 @@ const BulkSelectTestComponent = ({ canSelectAll, isDataPaginated }: Omit selected.find(selectedItem => selectedItem.name === item)) && !pageSelected} + pagePartiallySelected={ + pageDataNames.some((item) => selected.find((selectedItem) => selectedItem.name === item)) && !pageSelected + } onSelect={handleBulkSelect} /> ); @@ -40,63 +48,57 @@ const BulkSelectTestComponent = ({ canSelectAll, isDataPaginated }: Omit { it('renders the bulk select without all', () => { - cy.mount( - - ); + cy.mount(); cy.get('[data-ouia-component-id="BulkSelect-checkbox"]').should('exist'); cy.get('[data-ouia-component-id="BulkSelect-toggle"]').click(); cy.get('[data-ouia-component-id="BulkSelect-select-all"]').should('not.exist'); cy.get('[data-ouia-component-id="BulkSelect-select-page"]').should('exist'); cy.get('[data-ouia-component-id="BulkSelect-select-none"]').should('exist'); - + cy.contains('0 selected').should('not.exist'); }); it('renders the bulk select with all and without page', () => { - cy.mount( - - ); + cy.mount(); cy.get('[data-ouia-component-id="BulkSelect-checkbox"]').should('exist'); cy.get('[data-ouia-component-id="BulkSelect-toggle"]').click(); cy.get('[data-ouia-component-id="BulkSelect-select-all"]').should('exist'); cy.get('[data-ouia-component-id="BulkSelect-select-page"]').should('not.exist'); cy.get('[data-ouia-component-id="BulkSelect-select-none"]').should('exist'); - + cy.contains('0 selected').should('not.exist'); }); - + it('renders the bulk select with data', () => { - cy.mount( - - ); - + cy.mount(); + // Initial state cy.get('input[type="checkbox"]').each(($checkbox) => { cy.wrap($checkbox).should('not.be.checked'); }); - + // Checkbox select cy.get('[data-ouia-component-id="BulkSelect-checkbox"]').first().click(); cy.get('input[type="checkbox"]').should('be.checked'); cy.contains('5 selected').should('exist'); - + // Select none cy.get('[data-ouia-component-id="BulkSelect-toggle"]').first().click({ force: true }); cy.get('[data-ouia-component-id="BulkSelect-select-none"]').first().click(); cy.get('input[type="checkbox"]').should('not.be.checked'); - + // Select all cy.get('[data-ouia-component-id="BulkSelect-toggle"]').first().click({ force: true }); cy.get('[data-ouia-component-id="BulkSelect-select-all"]').first().click(); cy.contains('6 selected').should('exist'); - + // Checkbox deselect cy.get('[data-ouia-component-id="BulkSelect-checkbox"]').first().click({ force: true }); cy.contains('1 selected').should('exist'); - + // Select page cy.get('[data-ouia-component-id="BulkSelect-toggle"]').first().click({ force: true }); cy.get('[data-ouia-component-id="BulkSelect-select-page"]').first().click(); cy.contains('6 selected').should('exist'); }); -}); \ No newline at end of file +}); diff --git a/cypress/component/CloseButton.cy.tsx b/cypress/component/CloseButton.cy.tsx index e1523463..47641774 100644 --- a/cypress/component/CloseButton.cy.tsx +++ b/cypress/component/CloseButton.cy.tsx @@ -1,16 +1,23 @@ -import React from 'react'; import CloseButton from '../../packages/module/dist/dynamic/CloseButton'; describe('CloseButton', () => { /* eslint-disable no-console */ it('renders the Close button', () => { - cy.mount({console.log('Close button clicked')}} style={{ float: 'none' }}/>) + cy.mount( + { + console.log('Close button clicked'); + }} + style={{ float: 'none' }} + /> + ); cy.get('[data-test-id="close-button-example"]').should('exist'); }); it('should call callback on click', () => { const onClickSpy = cy.spy().as('onClickSpy'); - cy.mount(); + cy.mount(); cy.get('[data-test-id="close-button-example"]').click(); cy.get('@onClickSpy').should('have.been.called'); }); -}) \ No newline at end of file +}); diff --git a/cypress/component/ErrorBoundary.cy.tsx b/cypress/component/ErrorBoundary.cy.tsx index 9a4485b1..d88590dc 100644 --- a/cypress/component/ErrorBoundary.cy.tsx +++ b/cypress/component/ErrorBoundary.cy.tsx @@ -1,9 +1,12 @@ -import React from 'react'; import ErrorBoundary from '../../packages/module/dist/dynamic/ErrorBoundary'; describe('ErrorBoundary', () => { it('renders the ErrorBoundary ', () => { - cy.mount(
Test
) + cy.mount( + +
Test
+ + ); cy.get('[data-ouia-component-id="test"]').should('have.text', 'Test'); }); @@ -11,11 +14,13 @@ describe('ErrorBoundary', () => { const Surprise = () => { throw new Error('but a welcome one'); }; - cy.mount( - - ) + cy.mount( + + + + ); cy.get('[data-ouia-component-id="ErrorBoundary-toggle"').click(); cy.get('[class="pf-v5-c-expandable-section__content"]').should('contain.text', 'Error: but a welcome one'); - }) -}) \ No newline at end of file + }); +}); diff --git a/cypress/component/ErrorState.cy.tsx b/cypress/component/ErrorState.cy.tsx index 18683d1e..cd785dbc 100644 --- a/cypress/component/ErrorState.cy.tsx +++ b/cypress/component/ErrorState.cy.tsx @@ -1,21 +1,28 @@ -import React from 'react'; import ErrorState from '../../packages/module/dist/dynamic/ErrorState'; -import { ActionButton } from '../../packages/module/dist/dynamic/ActionButton' +import { ActionButton } from '../../packages/module/dist/dynamic/ActionButton'; describe('ErrorState', () => { it('renders the Close button', () => { - cy.mount(); + cy.mount(); cy.get('[data-ouia-component-id="ErrorState"]').contains('Sample error title'); cy.get('[data-ouia-component-id="ErrorState-body"]').should('have.text', 'Sample error description'); }); it('render with a custom footer', () => { const onClickSpy = cy.spy().as('onClickSpy'); - cy.mount( - Custom action - }/>); - cy.get('button').should('have.text', "Custom action"); + cy.mount( + + Custom action + + } + /> + ); + cy.get('button').should('have.text', 'Custom action'); cy.get('button').click(); cy.get('@onClickSpy').should('have.been.called'); - }) -}) \ No newline at end of file + }); +}); diff --git a/cypress/component/LogSnippet.cy.tsx b/cypress/component/LogSnippet.cy.tsx index e2ba724e..b433bbab 100644 --- a/cypress/component/LogSnippet.cy.tsx +++ b/cypress/component/LogSnippet.cy.tsx @@ -1,10 +1,9 @@ -import React from 'react'; import LogSnippet from '../../packages/module/dist/dynamic/LogSnippet'; describe('LogSnippet', () => { it('renders LogSnippet', () => { - cy.mount() + cy.mount(); cy.get('[data-ouia-component-id="LogSnippet-message"]').contains('A test message'); cy.get('[data-ouia-component-id="LogSnippet-code-content"]').contains('test code'); }); -}); \ No newline at end of file +}); diff --git a/cypress/component/Maintenance.cy.tsx b/cypress/component/Maintenance.cy.tsx index 5687d2fd..818863eb 100644 --- a/cypress/component/Maintenance.cy.tsx +++ b/cypress/component/Maintenance.cy.tsx @@ -1,11 +1,12 @@ -import React from 'react'; import Maintenance from '@patternfly/react-component-groups/dist/dynamic/Maintenance'; describe('Maintenance', () => { it('renders Maintenance', () => { - cy.mount() + cy.mount(); cy.get('[data-ouia-component-id="Maintenance"]').should('exist'); cy.get('[data-ouia-component-id="Maintenance"]').contains('Maintenance in progress'); - cy.get('[data-ouia-component-id="Maintenance-body"]').contains('We are currently undergoing scheduled maintenance and will be unavailable from 6am to 8am UTC. For more information please visit status.redhat.com.'); + cy.get('[data-ouia-component-id="Maintenance-body"]').contains( + 'We are currently undergoing scheduled maintenance and will be unavailable from 6am to 8am UTC. For more information please visit status.redhat.com.' + ); }); -}); \ No newline at end of file +}); diff --git a/cypress/component/MissingPage.cy.tsx b/cypress/component/MissingPage.cy.tsx index 3afe3a93..d6e2d5be 100644 --- a/cypress/component/MissingPage.cy.tsx +++ b/cypress/component/MissingPage.cy.tsx @@ -1,12 +1,13 @@ -import React from 'react'; import MissingPage from '@patternfly/react-component-groups/dist/dynamic/MissingPage'; describe('MissingPage', () => { it('renders MissingPage', () => { - cy.mount() - cy.get('[data-ouia-component-id="MissingPage"]').should('exist') + cy.mount(); + cy.get('[data-ouia-component-id="MissingPage"]').should('exist'); cy.get('[data-ouia-component-id="MissingPage"]').contains('We lost that page'); - cy.get('[data-ouia-component-id="MissingPage-body"]').contains("Let's find you a new one. Try a new search or return home."); + cy.get('[data-ouia-component-id="MissingPage-body"]').contains( + "Let's find you a new one. Try a new search or return home." + ); cy.get('[data-ouia-component-id="MissingPage-home-button"]').contains('Return to homepage'); }); -}) \ No newline at end of file +}); diff --git a/cypress/component/MultiContentCard.cy.tsx b/cypress/component/MultiContentCard.cy.tsx index dee6605f..f1c7b6c5 100644 --- a/cypress/component/MultiContentCard.cy.tsx +++ b/cypress/component/MultiContentCard.cy.tsx @@ -1,6 +1,17 @@ -import React from 'react'; -import MultiContentCard from "@patternfly/react-component-groups/dist/dynamic/MultiContentCard"; -import { Button, Card, CardHeader, CardBody, Content, ContentVariants, Icon, List, ListItem, CardFooter } from '@patternfly/react-core'; +import { FunctionComponent } from 'react'; +import MultiContentCard from '@patternfly/react-component-groups/dist/dynamic/MultiContentCard'; +import { + Button, + Card, + CardHeader, + CardBody, + Content, + ContentVariants, + Icon, + List, + ListItem, + CardFooter +} from '@patternfly/react-core'; import { ArrowRightIcon, BellIcon, CogIcon, LockIcon } from '@patternfly/react-icons'; import { createUseStyles } from 'react-jss'; import clsx from 'clsx'; @@ -8,16 +19,16 @@ import clsx from 'clsx'; const useStyles = createUseStyles({ action: { color: 'var(--pf-t--global--text--color--brand--default)', - fontSize: 'var(-pf-t--global--font--size--sm)', - }, - bulletPoints: { - color: 'var(--pf-t--global--color--brand--default)', + fontSize: 'var(-pf-t--global--font--size--sm)' }, + bulletPoints: { + color: 'var(--pf-t--global--color--brand--default)' + } }); -export const MultiContentCardExample: React.FunctionComponent = () => { +export const MultiContentCardExample: FunctionComponent = () => { const classes = useStyles(); - + const cards = [ @@ -28,22 +39,29 @@ export const MultiContentCardExample: React.FunctionComponent = () => { - Configure application + Configure application - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore + magna aliqua. - + - + - + @@ -54,19 +72,26 @@ export const MultiContentCardExample: React.FunctionComponent = () => { - Configure access + Configure access - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore + magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo + consequat. - @@ -80,31 +105,37 @@ export const MultiContentCardExample: React.FunctionComponent = () => { - Configure notifications + Configure notifications - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore + magna aliqua. - ]; - return (); -} + return ; +}; describe('MultiContentCard', () => { it('renders MultiContentCard', () => { cy.mount(); cy.get('[data-ouia-component-id="MultiContentCard"]').should('exist'); }); -}); \ No newline at end of file +}); diff --git a/cypress/component/NotAuthorized.cy.tsx b/cypress/component/NotAuthorized.cy.tsx index c6a3c04c..06e353d6 100644 --- a/cypress/component/NotAuthorized.cy.tsx +++ b/cypress/component/NotAuthorized.cy.tsx @@ -1,34 +1,33 @@ -import React from 'react'; import { Button } from '@patternfly/react-core'; import NotAuthorized from '../../packages/module/dist/dynamic/NotAuthorized'; describe('NotAuthorized', () => { it('renders basic NotAuthorized', () => { - cy.mount(); + cy.mount(); cy.get('[data-ouia-component-id="NotAuthorized"]').contains('You do not have access to Test bundle'); cy.get('[data-ouia-component-id="NotAuthorized-body"]').contains('Test text'); }); it('renders NotAuthorized with custom action buttons', () => { const onClickSpy = cy.spy().as('onClickSpy'); - const primaryAction = - ; - const customNotAuthorized = + const primaryAction = ( + + ); + const customNotAuthorized = ( + + ); cy.mount(customNotAuthorized); - const customButton = cy.get('[data-ouia-component-id="test-button"]') + const customButton = cy.get('[data-ouia-component-id="test-button"]'); customButton.should('exist'); customButton.should('have.text', 'Custom primary action'); customButton.click(); cy.get('@onClickSpy').should('have.been.called'); }); -}); \ No newline at end of file +}); diff --git a/cypress/component/PageHeader.cy.tsx b/cypress/component/PageHeader.cy.tsx index 6a67526c..b872fbd2 100644 --- a/cypress/component/PageHeader.cy.tsx +++ b/cypress/component/PageHeader.cy.tsx @@ -1,11 +1,13 @@ -import React from 'react'; import PageHeader from '@patternfly/react-component-groups/dist/dynamic/PageHeader'; describe('PageHeader', () => { it('should render PageHeader title and subtitle', () => { - cy.mount(); - cy.get('title').should('exist') - cy.get('[data-ouia-component-id="PageHeader-title"]').should('have.text', 'My title') - cy.get('[data-ouia-component-id="PageHeader-subtitle"]').should('have.text', 'This is a subtitle for your page header') - }) -}); \ No newline at end of file + cy.mount(); + cy.get('title').should('exist'); + cy.get('[data-ouia-component-id="PageHeader-title"]').should('have.text', 'My title'); + cy.get('[data-ouia-component-id="PageHeader-subtitle"]').should( + 'have.text', + 'This is a subtitle for your page header' + ); + }); +}); diff --git a/cypress/component/ResponsiveActions.cy.tsx b/cypress/component/ResponsiveActions.cy.tsx index adaa506b..2a1cd346 100644 --- a/cypress/component/ResponsiveActions.cy.tsx +++ b/cypress/component/ResponsiveActions.cy.tsx @@ -1,24 +1,19 @@ -import React from 'react'; import { ResponsiveActions } from '@patternfly/react-component-groups/dist/dynamic/ResponsiveActions'; import { ResponsiveAction } from '@patternfly/react-component-groups/dist/dynamic/ResponsiveAction'; describe('ResponsiveActions', () => { beforeEach(() => { cy.viewport(1280, 2000); - }) + }); it('renders persistent, pinned, and overflow actions', () => { cy.mount( - - Persistent action - - + Persistent action + Pinned action - - Overflow action - + Overflow action ); @@ -29,7 +24,7 @@ describe('ResponsiveActions', () => { cy.get('[data-ouia-component-id="ResponsiveActions-menu-dropdown-toggle"]').click(); cy.get('[data-ouia-component-id="ResponsiveActions-action-2"]').should('be.visible'); }); - + it('handles click events on actions', () => { const onClickSpy = cy.spy().as('actionClickSpy'); @@ -38,12 +33,10 @@ describe('ResponsiveActions', () => { Persistent action - + Pinned action - - Overflow action - + Overflow action ); @@ -61,9 +54,7 @@ describe('ResponsiveActions', () => { it('renders no persistent or pinned actions without flags', () => { cy.mount( - - Overflow action - + Overflow action ); diff --git a/cypress/component/ServiceCard.cy.tsx b/cypress/component/ServiceCard.cy.tsx index 27423108..9b3023d3 100644 --- a/cypress/component/ServiceCard.cy.tsx +++ b/cypress/component/ServiceCard.cy.tsx @@ -1,4 +1,3 @@ -import React from 'react'; import ServiceCard from '../../packages/module/dist/dynamic/ServiceCard'; import { Button, ButtonVariant } from '@patternfly/react-core'; @@ -6,43 +5,43 @@ describe('ServiceCard', () => { it('renders ServiceCard', () => { cy.mount( } - helperText='Here is helper text' - ouiaId='Example' - />) + helperText="Here is helper text" + ouiaId="Example" + /> + ); cy.get('[data-ouia-component-id="Example-card"]').should('exist'); }); it('renders custom footer', () => { cy.mount( } - helperText='Here is helper text' - ouiaId='Example' - footer={<> - - + helperText="Here is helper text" + ouiaId="Example" + footer={ + <> + + + } - />) + /> + ); cy.get('[data-ouia-component-id="Example-footer"]').should('exist'); - }) -}); \ No newline at end of file + }); +}); diff --git a/cypress/component/Severity.cy.tsx b/cypress/component/Severity.cy.tsx index 7681a91b..f30edb69 100644 --- a/cypress/component/Severity.cy.tsx +++ b/cypress/component/Severity.cy.tsx @@ -1,7 +1,6 @@ -import React from 'react'; import Severity, { SeverityType } from '../../packages/module/dist/dynamic/Severity'; -const severities = [ +const severities = [ { type: SeverityType.critical, label: 'Critical severity', ouiaId: 'Severity-critical' }, { type: SeverityType.important, label: 'Important severity', ouiaId: 'Severity-important' }, { type: SeverityType.moderate, label: 'Moderate severity', ouiaId: 'Severity-moderate' }, @@ -19,9 +18,9 @@ describe('Severity', () => { cy.get('span').contains(label); }); }); - + it('hides label when labelHidden is true', () => { cy.mount(); cy.contains('Important severity').should('not.exist'); }); -}); \ No newline at end of file +}); diff --git a/cypress/component/ShortcutGrid.cy.tsx b/cypress/component/ShortcutGrid.cy.tsx index 12819c8f..afaf4c74 100644 --- a/cypress/component/ShortcutGrid.cy.tsx +++ b/cypress/component/ShortcutGrid.cy.tsx @@ -1,22 +1,21 @@ -import React from 'react'; import ShortcutGrid from '../../packages/module/dist/dynamic/ShortcutGrid'; -const shortcuts = [ - { description: 'Open new tab', keys: [ 'cmd', 'shift', 't' ] }, +const shortcuts = [ + { description: 'Open new tab', keys: [ 'cmd', 'shift', 't' ] }, { description: 'Open new page', keys: [ 'opt', 'n' ] }, - { description: 'Move object', keys: [ 'ctrl' ], drag: true }, + { description: 'Move object', keys: [ 'ctrl' ], drag: true } ]; describe('ShortcutGrid', () => { it('renders ShortcutGrid', () => { - const shortCutGridExample = + const shortCutGridExample = ; cy.mount(shortCutGridExample); cy.get('[data-ouia-component-id="ShortcutGrid"]').should('exist'); shortcuts.forEach((shortcut, index) => { - cy.get(`[data-ouia-component-id="ShortcutGrid-item-description-${index}"]`) - .should('have.text', shortcut.description); + cy.get(`[data-ouia-component-id="ShortcutGrid-item-description-${index}"]`).should( + 'have.text', + shortcut.description + ); }); }); -}) \ No newline at end of file +}); diff --git a/cypress/component/SkeletonTable.cy.tsx b/cypress/component/SkeletonTable.cy.tsx index 94a98712..02c1c2b1 100644 --- a/cypress/component/SkeletonTable.cy.tsx +++ b/cypress/component/SkeletonTable.cy.tsx @@ -1,4 +1,3 @@ -import React from 'react'; import { RowSelectVariant } from '@patternfly/react-table'; import SkeletonTable from '@patternfly/react-component-groups/dist/dynamic/SkeletonTable'; @@ -15,7 +14,7 @@ describe('SkeletonTable', () => { cy.get('table thead tr th').eq(1).should('have.text', 'Second'); }); - it ('can be used without passing columns', () => { + it('can be used without passing columns', () => { const SkeletonTableExample = ; cy.mount(SkeletonTableExample); cy.get('table').should('exist'); @@ -43,7 +42,9 @@ describe('SkeletonTable', () => { }); it('can be passed a selectVariant to render radio buttons', () => { - const SkeletonTableExample = ; + const SkeletonTableExample = ( + + ); cy.mount(SkeletonTableExample); cy.get('table').should('exist'); cy.get('table thead tr th').eq(0).should('have.text', 'Data selection table header cell'); @@ -56,7 +57,7 @@ describe('SkeletonTable', () => { const SkeletonTableExample = ( { 'd', 'M88 166.059V468c0 6.627 5.373 12 12 12h56c6.627 0 12-5.373 12-12V166.059h46.059c21.382 0 32.09-25.851 16.971-40.971l-86.059-86.059c-9.373-9.373-24.569-9.373-33.941 0l-86.059 86.059c-15.119 15.119-4.411 40.971 16.971 40.971H88z' // ascending ); - }) -}); \ No newline at end of file + }); +}); diff --git a/cypress/component/SkeletonTableBody.cy.tsx b/cypress/component/SkeletonTableBody.cy.tsx index 5e9e4355..5cf74476 100644 --- a/cypress/component/SkeletonTableBody.cy.tsx +++ b/cypress/component/SkeletonTableBody.cy.tsx @@ -1,4 +1,3 @@ -import React from 'react'; import { RowSelectVariant } from '@patternfly/react-table'; import SkeletonTableBody from '@patternfly/react-component-groups/dist/dynamic/SkeletonTableBody'; @@ -27,4 +26,4 @@ describe('SkeletonTableBody', () => { cy.mount(); cy.get('input[type="radio"]').should('have.length', 10); }); -}); \ No newline at end of file +}); diff --git a/cypress/component/SkeletonTableHead.cy.tsx b/cypress/component/SkeletonTableHead.cy.tsx index 02460dcc..252e4a6e 100644 --- a/cypress/component/SkeletonTableHead.cy.tsx +++ b/cypress/component/SkeletonTableHead.cy.tsx @@ -1,4 +1,3 @@ -import React from 'react'; import { Table } from '@patternfly/react-table'; import { SkeletonTableHead } from '@patternfly/react-component-groups/dist/dynamic/SkeletonTableHead'; diff --git a/cypress/component/Status.cy.tsx b/cypress/component/Status.cy.tsx index e5b87480..8cad0039 100644 --- a/cypress/component/Status.cy.tsx +++ b/cypress/component/Status.cy.tsx @@ -1,42 +1,59 @@ -import * as React from 'react'; import { ExclamationTriangleIcon, CheckCircleIcon, BanIcon } from '@patternfly/react-icons'; import { Button, ButtonVariant, ButtonSize } from '@patternfly/react-core'; import { IconStatus, Status, StatusVariant } from '../../packages/module/dist/dynamic/Status'; describe('Status', () => { - it('should render with label and icon', () => { - cy.mount(} />); + cy.mount(} />); cy.get(`[data-ouia-component-id="Status-label"]`).should('be.visible'); cy.get(`[data-ouia-component-id="Status-icon"]`).should('be.visible'); }); it('should render with iconOnly', () => { - cy.mount(} />); + cy.mount( + } + /> + ); cy.get(`[data-ouia-component-id="Status-label"]`).should('not.exist'); cy.get(`[data-ouia-component-id="Status-icon"]`).should('be.visible'); }); it('should render link variant and handle click', () => { const handleClick = cy.stub().as('handleClick'); - cy.mount(} />); + cy.mount( + } + /> + ); cy.get(`[data-ouia-component-id="Status-label"]`).should('be.visible'); cy.get(`[data-ouia-component-id="Status-icon"]`).should('be.visible'); cy.get(`[data-ouia-component-id="Status-link-icon"]`).click(); cy.get('@handleClick').should('have.been.calledOnce'); - }); it('should render popover variant and handle open/close', () => { cy.mount( } - popoverProps={{ - bodyContent: 'Example state description', - footerContent: + variant={StatusVariant.popover} + label="Not Ready" + icon={} + popoverProps={{ + bodyContent: 'Example state description', + footerContent: ( + + ) }} /> ); @@ -47,14 +64,19 @@ describe('Status', () => { cy.get('[role="dialog"]').should('be.visible'); cy.get('body').click(0, 0); cy.get('[role="dialog"]').should('not.exist'); - }); it('should render with description', () => { - cy.mount(} />); + cy.mount( + } + /> + ); cy.get(`[data-ouia-component-id="Status-label"]`).should('be.visible'); cy.get(`[data-ouia-component-id="Status-icon"]`).should('be.visible'); cy.get(`[data-ouia-component-id="Status-description"]`).should('be.visible'); }); - -}); \ No newline at end of file +}); diff --git a/cypress/component/TagCount.cy.tsx b/cypress/component/TagCount.cy.tsx index d92186b1..6770e7d9 100644 --- a/cypress/component/TagCount.cy.tsx +++ b/cypress/component/TagCount.cy.tsx @@ -1,15 +1,14 @@ -import React from 'react'; import TagCount from '../../packages/module/dist/dynamic/TagCount'; describe('TagCount', () => { it('renders TagCount', () => { - cy.mount() + cy.mount(); cy.get('button[data-ouia-component-id="TagCount"]').should('exist'); cy.get('[data-ouia-component-id="TagCount-text"]').contains('50'); }); it('render disabled', () => { - cy.mount() + cy.mount(); cy.get('button[data-ouia-component-id="TagCount"]').should('be.disabled'); }); -}); \ No newline at end of file +}); diff --git a/cypress/component/UnavailableContent.cy.tsx b/cypress/component/UnavailableContent.cy.tsx index 12baefff..16c2f856 100644 --- a/cypress/component/UnavailableContent.cy.tsx +++ b/cypress/component/UnavailableContent.cy.tsx @@ -1,11 +1,12 @@ -import React from 'react'; import UnavailableContent from '../../packages/module/dist/dynamic/UnavailableContent'; describe('UnavailableContent', () => { it('renders UnavailableContent', () => { - cy.mount() + cy.mount(); cy.get('[data-ouia-component-id="UnavailableContent"]').should('exist'); cy.get('[data-ouia-component-id="UnavailableContent"]').contains('This page is temporarily unavailable'); - cy.get('[data-ouia-component-id="UnavailableContent-body"]').contains('Try refreshing the page. If the problem persists, contact your organization administrator or visit our status page for known outages.'); + cy.get('[data-ouia-component-id="UnavailableContent-body"]').contains( + 'Try refreshing the page. If the problem persists, contact your organization administrator or visit our status page for known outages.' + ); }); -}); \ No newline at end of file +}); diff --git a/cypress/component/WarningModal.cy.tsx b/cypress/component/WarningModal.cy.tsx index c165eb6d..42b39da4 100644 --- a/cypress/component/WarningModal.cy.tsx +++ b/cypress/component/WarningModal.cy.tsx @@ -1,58 +1,67 @@ -import React from 'react'; +import { FunctionComponent, useState } from 'react'; import { Button, ButtonVariant } from '@patternfly/react-core'; import WarningModal from '../../packages/module/dist/dynamic/WarningModal'; -const BasicModal: React.FunctionComponent = () => { - const [ isOpen, setIsOpen ] = React.useState(false); - return <> - - setIsOpen(false)} - onConfirm={() => setIsOpen(false)}> - Your page contains unsaved changes. Do you want to leave? - - +const BasicModal: FunctionComponent = () => { + const [ isOpen, setIsOpen ] = useState(false); + return ( + <> + + setIsOpen(false)} + onConfirm={() => setIsOpen(false)} + > + Your page contains unsaved changes. Do you want to leave? + + + ); }; -const CheckboxModal: React.FunctionComponent = () => { - const [ isOpen, setIsOpen ] = React.useState(false); - return <> - - setIsOpen(false)} - onConfirm={() => setIsOpen(false)} - withCheckbox - checkboxLabel='Are you sure?' - confirmButtonVariant={ButtonVariant.danger}> - Your page contains unsaved changes. Do you want to leave? - - +const CheckboxModal: FunctionComponent = () => { + const [ isOpen, setIsOpen ] = useState(false); + return ( + <> + + setIsOpen(false)} + onConfirm={() => setIsOpen(false)} + withCheckbox + checkboxLabel="Are you sure?" + confirmButtonVariant={ButtonVariant.danger} + > + Your page contains unsaved changes. Do you want to leave? + + + ); }; -const TextConfirmationModal: React.FunctionComponent = () => { - const [ isOpen, setIsOpen ] = React.useState(false); - return <> - - setIsOpen(false)} - onConfirm={() => setIsOpen(false)} - textConfirmation={{ type: 'text', isRequired: true }} - deleteName='Item1'> - The item will be deleted. - - +const TextConfirmationModal: FunctionComponent = () => { + const [ isOpen, setIsOpen ] = useState(false); + return ( + <> + + setIsOpen(false)} + onConfirm={() => setIsOpen(false)} + textConfirmation={{ type: 'text', isRequired: true }} + deleteName="Item1" + > + The item will be deleted. + + + ); }; describe('WarningModal', () => { @@ -61,7 +70,9 @@ describe('WarningModal', () => { cy.get('button').click(); cy.get('[data-ouia-component-id="WarningModal"]').should('exist'); cy.get('[data-ouia-component-id="WarningModal"]').contains('Unsaved changes'); - cy.get('[data-ouia-component-id="WarningModal"]').contains('Your page contains unsaved changes. Do you want to leave?'); + cy.get('[data-ouia-component-id="WarningModal"]').contains( + 'Your page contains unsaved changes. Do you want to leave?' + ); }); it('confirm button should be disabled if checkbox is not checked', () => { @@ -90,4 +101,4 @@ describe('WarningModal', () => { cy.get('[data-ouia-component-id="WarningModal-confirmation-text-input"').type('Item1'); cy.get('[data-ouia-component-id="WarningModal-confirm-button"').should('not.have.attr', 'disabled'); }); -}); \ No newline at end of file +}); diff --git a/cypress/support/commands.ts b/cypress/support/commands.ts index 698b01a4..9292576a 100644 --- a/cypress/support/commands.ts +++ b/cypress/support/commands.ts @@ -1,4 +1,4 @@ -/// +// / // *********************************************** // This example commands.ts shows you how to // create various custom commands and overwrite diff --git a/package-lock.json b/package-lock.json index f04a1fac..a4e788d2 100644 --- a/package-lock.json +++ b/package-lock.json @@ -5416,13 +5416,6 @@ "@types/node": "*" } }, - "node_modules/@types/prop-types": { - "version": "15.7.14", - "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.14.tgz", - "integrity": "sha512-gNMvNH49DJ7OJYv+KAKn0Xp45p8PLl6zo2YnvDIbTd4J6MER2BmWN49TG7n9LvkyihINxeKW8+3bfS2yDC9dzQ==", - "dev": true, - "license": "MIT" - }, "node_modules/@types/qs": { "version": "6.9.18", "resolved": "https://registry.npmjs.org/@types/qs/-/qs-6.9.18.tgz", @@ -5438,20 +5431,23 @@ "license": "MIT" }, "node_modules/@types/react": { - "version": "18.3.3", + "version": "19.1.2", + "resolved": "https://registry.npmjs.org/@types/react/-/react-19.1.2.tgz", + "integrity": "sha512-oxLPMytKchWGbnQM9O7D67uPa9paTNxO7jVoNMXgkkErULBPhPARCfkKL9ytcIJJRGjbsVwW4ugJzyFFvm/Tiw==", "dev": true, "license": "MIT", "dependencies": { - "@types/prop-types": "*", "csstype": "^3.0.2" } }, "node_modules/@types/react-dom": { - "version": "18.3.1", + "version": "19.1.3", + "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.1.3.tgz", + "integrity": "sha512-rJXC08OG0h3W6wDMFxQrZF00Kq6qQvw0djHRdzl3U5DnIERz0MRce3WVc7IS6JYBwtaP/DwYtRRjVlvivNveKg==", "dev": true, "license": "MIT", - "dependencies": { - "@types/react": "*" + "peerDependencies": { + "@types/react": "^19.0.0" } }, "node_modules/@types/retry": { @@ -25840,15 +25836,15 @@ "@patternfly/patternfly": "^6.0.0", "@patternfly/patternfly-a11y": "^5.1.0", "@patternfly/react-code-editor": "^6.0.0", - "@types/react": "^18.2.33", - "@types/react-dom": "^18.3.1", + "@types/react": "^19.1.0", + "@types/react-dom": "^19.1.2", "react": "^18.3.1", "react-dom": "^18.3.1", "typescript": "^5.8.3" }, "peerDependencies": { - "react": "^17 || ^18", - "react-dom": "^17 || ^18" + "react": "^17 || ^18 || ^19", + "react-dom": "^17 || ^18 || ^19" } } } diff --git a/packages/module/package.json b/packages/module/package.json index a04d30ee..c0fbf6a3 100644 --- a/packages/module/package.json +++ b/packages/module/package.json @@ -38,16 +38,16 @@ "clsx": "^2.1.1" }, "peerDependencies": { - "react": "^17 || ^18", - "react-dom": "^17 || ^18" + "react": "^17 || ^18 || ^19", + "react-dom": "^17 || ^18 || ^19" }, "devDependencies": { "@patternfly/patternfly-a11y": "^5.1.0", "@patternfly/documentation-framework": "^6.5.16", "@patternfly/react-code-editor": "^6.0.0", "@patternfly/patternfly": "^6.0.0", - "@types/react": "^18.2.33", - "@types/react-dom": "^18.3.1", + "@types/react": "^19.1.0", + "@types/react-dom": "^19.1.2", "react": "^18.3.1", "react-dom": "^18.3.1", "typescript": "^5.8.3" diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/Ansible/Ansible.md b/packages/module/patternfly-docs/content/extensions/component-groups/examples/Ansible/Ansible.md index 5e0cf4b8..c7ffdcaf 100644 --- a/packages/module/patternfly-docs/content/extensions/component-groups/examples/Ansible/Ansible.md +++ b/packages/module/patternfly-docs/content/extensions/component-groups/examples/Ansible/Ansible.md @@ -15,12 +15,13 @@ sourceLink: https://github.com/patternfly/react-component-groups/blob/main/packa --- import Ansible from '@patternfly/react-component-groups/dist/dynamic/Ansible'; +import { FunctionComponent } from 'react'; The **Ansible** component displays the Ansible project logo, with a support status style. ### Ansible supported -By default, the Ansible logo displays as normal and in full color, meaning that it is supported. +By default, the Ansible logo displays as normal and in full color, meaning that it is supported. ```js file="./AnsibleSupportedExample.tsx" @@ -34,8 +35,7 @@ To specify that Ansible is not supported, set the `isSupported` property to `fal ``` - -### Red Hat Ansible Automation Platform +### Red Hat Ansible Automation Platform To display the Red Hat Ansible Automation Platform, add the `isRHAAP` property to the `` component. diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/Ansible/AnsibleSupportedExample.tsx b/packages/module/patternfly-docs/content/extensions/component-groups/examples/Ansible/AnsibleSupportedExample.tsx index 1e3c6c0d..8b56b0d4 100644 --- a/packages/module/patternfly-docs/content/extensions/component-groups/examples/Ansible/AnsibleSupportedExample.tsx +++ b/packages/module/patternfly-docs/content/extensions/component-groups/examples/Ansible/AnsibleSupportedExample.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import { FunctionComponent } from 'react'; import Ansible from '@patternfly/react-component-groups/dist/dynamic/Ansible'; -export const BasicExample: React.FunctionComponent = () => ; +export const BasicExample: FunctionComponent = () => ; diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/Ansible/AnsibleTechnologyExample.tsx b/packages/module/patternfly-docs/content/extensions/component-groups/examples/Ansible/AnsibleTechnologyExample.tsx index 83afdf7c..fb08c8f6 100644 --- a/packages/module/patternfly-docs/content/extensions/component-groups/examples/Ansible/AnsibleTechnologyExample.tsx +++ b/packages/module/patternfly-docs/content/extensions/component-groups/examples/Ansible/AnsibleTechnologyExample.tsx @@ -1,6 +1,4 @@ -import React from 'react'; +import { FunctionComponent } from 'react'; import Ansible from '@patternfly/react-component-groups/dist/dynamic/Ansible'; -export const BasicExample: React.FunctionComponent = () => ( - -); +export const BasicExample: FunctionComponent = () => ; diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/Ansible/AnsibleUnsupportedExample.tsx b/packages/module/patternfly-docs/content/extensions/component-groups/examples/Ansible/AnsibleUnsupportedExample.tsx index caae4f42..cfcf5404 100644 --- a/packages/module/patternfly-docs/content/extensions/component-groups/examples/Ansible/AnsibleUnsupportedExample.tsx +++ b/packages/module/patternfly-docs/content/extensions/component-groups/examples/Ansible/AnsibleUnsupportedExample.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import { FunctionComponent } from 'react'; import Ansible from '@patternfly/react-component-groups/dist/dynamic/Ansible'; -export const BasicExample: React.FunctionComponent = () => ; +export const BasicExample: FunctionComponent = () => ; diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/BulkSelect/BulkSelect.md b/packages/module/patternfly-docs/content/extensions/component-groups/examples/BulkSelect/BulkSelect.md index 81100934..bc681dd6 100644 --- a/packages/module/patternfly-docs/content/extensions/component-groups/examples/BulkSelect/BulkSelect.md +++ b/packages/module/patternfly-docs/content/extensions/component-groups/examples/BulkSelect/BulkSelect.md @@ -13,8 +13,9 @@ source: react propComponents: ['BulkSelect'] sourceLink: https://github.com/patternfly/react-component-groups/blob/main/packages/module/patternfly-docs/content/extensions/component-groups/examples/BulkSelect/BulkSelect.md --- -import { useState } from 'react'; + import { BulkSelect, BulkSelectValue } from '@patternfly/react-component-groups/dist/dynamic/BulkSelect'; +import { FunctionComponent, useState } from 'react'; The **bulk select** provides a way of selecting data records in batches. You can select all data at once, all data on current page or deselect all. diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/BulkSelect/BulkSelectAllExample.tsx b/packages/module/patternfly-docs/content/extensions/component-groups/examples/BulkSelect/BulkSelectAllExample.tsx index be687819..d32bf15b 100644 --- a/packages/module/patternfly-docs/content/extensions/component-groups/examples/BulkSelect/BulkSelectAllExample.tsx +++ b/packages/module/patternfly-docs/content/extensions/component-groups/examples/BulkSelect/BulkSelectAllExample.tsx @@ -1,16 +1,16 @@ -import React, { useState } from 'react'; +import { FunctionComponent, useState } from 'react'; import { BulkSelect, BulkSelectValue } from '@patternfly/react-component-groups/dist/dynamic/BulkSelect'; -const allData = [ "Item 1", "Item 2" , "Item 3", "Item4", "Item 5" ]; -const pageData = [ "Item 1", "Item 2" ]; +const allData = [ 'Item 1', 'Item 2', 'Item 3', 'Item4', 'Item 5' ]; +const pageData = [ 'Item 1', 'Item 2' ]; -export const BasicExample: React.FunctionComponent = () => { +export const BasicExample: FunctionComponent = () => { const [ selected, setSelected ] = useState(pageData); const handleBulkSelect = (value: BulkSelectValue) => { value === BulkSelectValue.none && setSelected([]); value === BulkSelectValue.all && setSelected(allData); - value === BulkSelectValue.nonePage && setSelected(selected.filter(item => !pageData.includes(item))); + value === BulkSelectValue.nonePage && setSelected(selected.filter((item) => !pageData.includes(item))); value === BulkSelectValue.page && setSelected(Array.from(new Set([ ...selected, ...pageData ]))); }; @@ -21,8 +21,10 @@ export const BasicExample: React.FunctionComponent = () => { pageCount={pageData.length} totalCount={allData.length} onSelect={handleBulkSelect} - pageSelected={pageData.every(item => selected.includes(item))} - pagePartiallySelected={pageData.some(item => selected.includes(item)) && !pageData.every(item => selected.includes(item))} + pageSelected={pageData.every((item) => selected.includes(item))} + pagePartiallySelected={ + pageData.some((item) => selected.includes(item)) && !pageData.every((item) => selected.includes(item)) + } /> ); -} \ No newline at end of file +}; diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/BulkSelect/BulkSelectExample.tsx b/packages/module/patternfly-docs/content/extensions/component-groups/examples/BulkSelect/BulkSelectExample.tsx index 1e33d4bc..4bb5f11a 100644 --- a/packages/module/patternfly-docs/content/extensions/component-groups/examples/BulkSelect/BulkSelectExample.tsx +++ b/packages/module/patternfly-docs/content/extensions/component-groups/examples/BulkSelect/BulkSelectExample.tsx @@ -1,16 +1,16 @@ -import React, { useState } from 'react'; +import { FunctionComponent, useState } from 'react'; import { BulkSelect, BulkSelectValue } from '@patternfly/react-component-groups/dist/dynamic/BulkSelect'; -const allData = [ "Item 1", "Item 2" , "Item 3", "Item4", "Item 5" ]; -const pageData = [ "Item 1", "Item 2" ]; +const allData = [ 'Item 1', 'Item 2', 'Item 3', 'Item4', 'Item 5' ]; +const pageData = [ 'Item 1', 'Item 2' ]; -export const BasicExample: React.FunctionComponent = () => { +export const BasicExample: FunctionComponent = () => { const [ selected, setSelected ] = useState([]); const handleBulkSelect = (value: BulkSelectValue) => { value === BulkSelectValue.none && setSelected([]); value === BulkSelectValue.all && setSelected(allData); - value === BulkSelectValue.nonePage && setSelected(selected.filter(item => !pageData.includes(item))); + value === BulkSelectValue.nonePage && setSelected(selected.filter((item) => !pageData.includes(item))); value === BulkSelectValue.page && setSelected(Array.from(new Set([ ...selected, ...pageData ]))); }; @@ -19,8 +19,10 @@ export const BasicExample: React.FunctionComponent = () => { selectedCount={selected.length} pageCount={pageData.length} onSelect={handleBulkSelect} - pageSelected={pageData.every(item => selected.includes(item))} - pagePartiallySelected={pageData.some(item => selected.includes(item)) && !pageData.every(item => selected.includes(item))} + pageSelected={pageData.every((item) => selected.includes(item))} + pagePartiallySelected={ + pageData.some((item) => selected.includes(item)) && !pageData.every((item) => selected.includes(item)) + } /> ); -} \ No newline at end of file +}; diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/CloseButton/CloseButton.md b/packages/module/patternfly-docs/content/extensions/component-groups/examples/CloseButton/CloseButton.md index 2f625290..660775c2 100644 --- a/packages/module/patternfly-docs/content/extensions/component-groups/examples/CloseButton/CloseButton.md +++ b/packages/module/patternfly-docs/content/extensions/component-groups/examples/CloseButton/CloseButton.md @@ -16,6 +16,7 @@ sourceLink: https://github.com/patternfly/react-component-groups/blob/main/packa import { CloseIcon } from '@patternfly/react-icons'; import CloseButton from '@patternfly/react-component-groups/dist/dynamic/CloseButton'; +import { FunctionComponent } from 'react'; The **close button** component provides a way for users to exit a modal, dialogue, or similar action. To further customize this component, you can also utilize all properties of the [button component](/components/button). diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/CloseButton/CloseButtonExample.tsx b/packages/module/patternfly-docs/content/extensions/component-groups/examples/CloseButton/CloseButtonExample.tsx index 088ecc3d..61fe9779 100644 --- a/packages/module/patternfly-docs/content/extensions/component-groups/examples/CloseButton/CloseButtonExample.tsx +++ b/packages/module/patternfly-docs/content/extensions/component-groups/examples/CloseButton/CloseButtonExample.tsx @@ -1,9 +1,15 @@ /* eslint-disable no-console */ -import React from 'react' +import { FunctionComponent } from 'react'; import CloseButton from '@patternfly/react-component-groups/dist/dynamic/CloseButton'; -export const BasicExample: React.FunctionComponent = () => ( +export const BasicExample: FunctionComponent = () => ( <> - {console.log('Close button clicked')}} style={{ float: 'none' }} /> + { + console.log('Close button clicked'); + }} + style={{ float: 'none' }} + /> ); diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/ColumnManagementModal/ColumnManagementModal.md b/packages/module/patternfly-docs/content/extensions/component-groups/examples/ColumnManagementModal/ColumnManagementModal.md index 668f5d10..27e960b3 100644 --- a/packages/module/patternfly-docs/content/extensions/component-groups/examples/ColumnManagementModal/ColumnManagementModal.md +++ b/packages/module/patternfly-docs/content/extensions/component-groups/examples/ColumnManagementModal/ColumnManagementModal.md @@ -16,6 +16,7 @@ sourceLink: https://github.com/patternfly/react-component-groups/blob/main/packa import ColumnManagementModal from '@patternfly/react-component-groups/dist/dynamic/ColumnManagementModal'; import { ColumnsIcon } from '@patternfly/react-icons'; +import { FunctionComponent, useState } from 'react'; The **column management modal** component can be used to implement customizable table columns. Columns can be configured to be enabled or disabled by default or be unhidable. diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/ColumnManagementModal/ColumnManagementModalExample.tsx b/packages/module/patternfly-docs/content/extensions/component-groups/examples/ColumnManagementModal/ColumnManagementModalExample.tsx index 7972adb2..ebc2b165 100644 --- a/packages/module/patternfly-docs/content/extensions/component-groups/examples/ColumnManagementModal/ColumnManagementModalExample.tsx +++ b/packages/module/patternfly-docs/content/extensions/component-groups/examples/ColumnManagementModal/ColumnManagementModalExample.tsx @@ -1,8 +1,10 @@ -import React from 'react' +import { FunctionComponent, useState } from 'react'; import { Button, ButtonVariant } from '@patternfly/react-core'; import { Table, Tbody, Td, Th, Tr, Thead } from '@patternfly/react-table'; import { ColumnsIcon } from '@patternfly/react-icons'; -import ColumnManagementModal, { ColumnManagementModalColumn } from '@patternfly/react-component-groups/dist/dynamic/ColumnManagementModal'; +import ColumnManagementModal, { + ColumnManagementModalColumn +} from '@patternfly/react-component-groups/dist/dynamic/ColumnManagementModal'; const DEFAULT_COLUMNS: ColumnManagementModalColumn[] = [ { @@ -57,40 +59,50 @@ const ROWS = [ impact: 'Moderate', score: '6.1' } -] +]; + +export const ColumnManagementModalExample: FunctionComponent = () => { + const [ columns, setColumns ] = useState(DEFAULT_COLUMNS); + const [ isOpen, setOpen ] = useState(false); -export const ColumnManagementModalExample: React.FunctionComponent = () => { - const [ columns, setColumns ] = React.useState(DEFAULT_COLUMNS); - const [ isOpen, setOpen ] = React.useState(false); - return ( <> setColumns(newColumns)} + applyColumns={(newColumns) => setColumns(newColumns)} isOpen={isOpen} onClose={() => setOpen(false)} /> - - setOpen(true)} + variant={ButtonVariant.secondary} + icon={} > + Manage columns + +
- {columns.filter(column => column.isShown).map(column => )} + {columns + .filter((column) => column.isShown) + .map((column) => ( + + ))} - {ROWS.map((row, rowIndex) => + {ROWS.map((row, rowIndex) => ( - {columns.filter(column => column.isShown).map((column, columnIndex) => - - )} - - )} + {columns + .filter((column) => column.isShown) + .map((column, columnIndex) => ( + + ))} + + ))}
{column.title}{column.title}
{row[column.key]}
{row[column.key]}
- ) -} + ); +}; diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/ErrorBoundary/ErrorBoundary.md b/packages/module/patternfly-docs/content/extensions/component-groups/examples/ErrorBoundary/ErrorBoundary.md index 0561d41d..e047c4d8 100644 --- a/packages/module/patternfly-docs/content/extensions/component-groups/examples/ErrorBoundary/ErrorBoundary.md +++ b/packages/module/patternfly-docs/content/extensions/component-groups/examples/ErrorBoundary/ErrorBoundary.md @@ -13,13 +13,14 @@ source: react propComponents: ['ErrorBoundary'] sourceLink: https://github.com/patternfly/react-component-groups/blob/main/packages/module/patternfly-docs/content/extensions/component-groups/examples/ErrorBoundary/ErrorBoundary.md --- -import { useState } from 'react'; + import { Button, Card, CardBody, CardFooter, CardHeader } from '@patternfly/react-core'; import ErrorBoundary from "@patternfly/react-component-groups/dist/dynamic/ErrorBoundary"; +import { FunctionComponent, useState } from 'react'; The **error boundary** component repurposes the `` component for an application error boundary. -## Examples +## Examples ### Error boundary usage example diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/ErrorBoundary/ErrorBoundaryExample.tsx b/packages/module/patternfly-docs/content/extensions/component-groups/examples/ErrorBoundary/ErrorBoundaryExample.tsx index 5a71d4d4..cf3e5202 100644 --- a/packages/module/patternfly-docs/content/extensions/component-groups/examples/ErrorBoundary/ErrorBoundaryExample.tsx +++ b/packages/module/patternfly-docs/content/extensions/component-groups/examples/ErrorBoundary/ErrorBoundaryExample.tsx @@ -1,8 +1,8 @@ -import React, { useState } from 'react'; +import { FunctionComponent, useState } from 'react'; import { Title, Button, Card, CardBody, CardFooter, CardHeader } from '@patternfly/react-core'; import ErrorBoundary from '@patternfly/react-component-groups/dist/dynamic/ErrorBoundary'; -export const BasicExample: React.FunctionComponent = () => { +export const BasicExample: FunctionComponent = () => { const [ hasError, setHasError ] = useState(false); const Surprise = () => { @@ -12,16 +12,16 @@ export const BasicExample: React.FunctionComponent = () => { return ( - Demo content wrapped in error boundary + Demo content wrapped in error boundary This is a demo content that may throw an error: - - ) + ); }; return ( @@ -29,13 +29,11 @@ export const BasicExample: React.FunctionComponent = () => { - { - hasError && ( - - ) - } + {hasError && ( + + )} ); }; diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/ErrorState/ErrorState.md b/packages/module/patternfly-docs/content/extensions/component-groups/examples/ErrorState/ErrorState.md index 3b72db8f..658ab4bc 100644 --- a/packages/module/patternfly-docs/content/extensions/component-groups/examples/ErrorState/ErrorState.md +++ b/packages/module/patternfly-docs/content/extensions/component-groups/examples/ErrorState/ErrorState.md @@ -16,6 +16,7 @@ sourceLink: https://github.com/patternfly/react-component-groups/blob/main/packa import ErrorState from "@patternfly/react-component-groups/dist/dynamic/ErrorState"; import { PathMissingIcon } from '@patternfly/react-icons/dist/dynamic/icons/path-missing-icon'; +import { FunctionComponent } from 'react'; The **error state** component repurposes the `EmptyState` component to display an error to users. To further customize this component, you can also utilize all properties of the [empty state component](/components/empty-state), with the `exception` of `children`. @@ -31,7 +32,7 @@ To provide users with error details, a basic error state should contain an appro ### Custom footer -To override the default action button, specify your own using `customFooter`. +To override the default action button, specify your own using `customFooter`. ```js file="./ErrorStateFooterExample.tsx" diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/ErrorState/ErrorStateExample.tsx b/packages/module/patternfly-docs/content/extensions/component-groups/examples/ErrorState/ErrorStateExample.tsx index 856c12dd..b4d85b2c 100644 --- a/packages/module/patternfly-docs/content/extensions/component-groups/examples/ErrorState/ErrorStateExample.tsx +++ b/packages/module/patternfly-docs/content/extensions/component-groups/examples/ErrorState/ErrorStateExample.tsx @@ -1,4 +1,6 @@ -import React from 'react'; -import ErrorState from "@patternfly/react-component-groups/dist/dynamic/ErrorState"; +import { FunctionComponent } from 'react'; +import ErrorState from '@patternfly/react-component-groups/dist/dynamic/ErrorState'; -export const BasicExample: React.FunctionComponent = () => ; +export const BasicExample: FunctionComponent = () => ( + +); diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/ErrorState/ErrorStateExtraProps.tsx b/packages/module/patternfly-docs/content/extensions/component-groups/examples/ErrorState/ErrorStateExtraProps.tsx index 3a6ed3e2..202bea6a 100644 --- a/packages/module/patternfly-docs/content/extensions/component-groups/examples/ErrorState/ErrorStateExtraProps.tsx +++ b/packages/module/patternfly-docs/content/extensions/component-groups/examples/ErrorState/ErrorStateExtraProps.tsx @@ -1,12 +1,12 @@ -import React from 'react'; -import ErrorState from "@patternfly/react-component-groups/dist/dynamic/ErrorState"; +import { FunctionComponent } from 'react'; +import ErrorState from '@patternfly/react-component-groups/dist/dynamic/ErrorState'; import { PathMissingIcon } from '@patternfly/react-icons/dist/dynamic/icons/path-missing-icon'; -export const BasicExample: React.FunctionComponent = () => ( - ( + console.log("Custom button clicked")}> -Custom action -}/>; +export const BasicExample: FunctionComponent = () => ( + console.log('Custom button clicked')}> + Custom action + + } + /> +); diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/LogSnippet/LogSnippet.md b/packages/module/patternfly-docs/content/extensions/component-groups/examples/LogSnippet/LogSnippet.md index f51d6211..5ddd2dfa 100644 --- a/packages/module/patternfly-docs/content/extensions/component-groups/examples/LogSnippet/LogSnippet.md +++ b/packages/module/patternfly-docs/content/extensions/component-groups/examples/LogSnippet/LogSnippet.md @@ -15,14 +15,16 @@ sourceLink: https://github.com/patternfly/react-component-groups/blob/main/packa --- import LogSnippet from '@patternfly/react-component-groups/dist/dynamic/LogSnippet'; +import { FunctionComponent } from 'react'; A **log snippet** component provides a way to display a log snippet or code along with a message. ## Examples ### Basic log snippet + The log snippet supports several variants configurable using `variant` property for different scenarios. Each variant has an associated status icon and color similar to [alert component](/components/alert). ```js file="./LogSnippetExample.tsx" -``` \ No newline at end of file +``` diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/LogSnippet/LogSnippetExample.tsx b/packages/module/patternfly-docs/content/extensions/component-groups/examples/LogSnippet/LogSnippetExample.tsx index af16e948..6d54bbaa 100644 --- a/packages/module/patternfly-docs/content/extensions/component-groups/examples/LogSnippet/LogSnippetExample.tsx +++ b/packages/module/patternfly-docs/content/extensions/component-groups/examples/LogSnippet/LogSnippetExample.tsx @@ -1,7 +1,7 @@ -import React from 'react'; +import { FunctionComponent } from 'react'; import LogSnippet from '@patternfly/react-component-groups/dist/dynamic/LogSnippet'; -export const BasicExample: React.FunctionComponent = () => { +export const BasicExample: FunctionComponent = () => { const code = `apiVersion: helm.openshift.io/v1beta1/ kind: HelmChartRepository metadata: @@ -10,5 +10,5 @@ export const BasicExample: React.FunctionComponent = () => { connectionConfig: url: https://raw.githubusercontent.com/Azure-Samples/helm-charts/master/docs`; - return ; -} \ No newline at end of file + return ; +}; diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/Maintenance/Maintenance.md b/packages/module/patternfly-docs/content/extensions/component-groups/examples/Maintenance/Maintenance.md index 267455ea..7bbfd312 100644 --- a/packages/module/patternfly-docs/content/extensions/component-groups/examples/Maintenance/Maintenance.md +++ b/packages/module/patternfly-docs/content/extensions/component-groups/examples/Maintenance/Maintenance.md @@ -15,6 +15,7 @@ sourceLink: https://github.com/patternfly/react-component-groups/blob/main/packa --- import Maintenance from '@patternfly/react-component-groups/dist/dynamic/Maintenance'; +import { FunctionComponent } from 'react'; A **maintenance** component displays a screen to users when they are undergoing scheduled maintenance. @@ -22,7 +23,7 @@ A **maintenance** component displays a screen to users when they are undergoing ### Basic maintenance -To provide users with basic information regarding maintenance. A basic maintenance state should contain an appropriate and informative `titleText`. `defaultBodyText` will be used by default. +To provide users with basic information regarding maintenance. A basic maintenance state should contain an appropriate and informative `titleText`. `defaultBodyText` will be used by default. ```js file="./MaintenanceExample.tsx" @@ -34,4 +35,4 @@ To override the default bodyText and footer link, specify your own using `bodyTe ```js file="./MaintenanceCustomExample.tsx" -``` \ No newline at end of file +``` diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/Maintenance/MaintenanceCustomExample.tsx b/packages/module/patternfly-docs/content/extensions/component-groups/examples/Maintenance/MaintenanceCustomExample.tsx index eb6849df..81995bf8 100644 --- a/packages/module/patternfly-docs/content/extensions/component-groups/examples/Maintenance/MaintenanceCustomExample.tsx +++ b/packages/module/patternfly-docs/content/extensions/component-groups/examples/Maintenance/MaintenanceCustomExample.tsx @@ -1,6 +1,14 @@ -import React from 'react'; -import Maintenance from '@patternfly/react-component-groups/dist/dynamic/Maintenance' +import { FunctionComponent } from 'react'; +import Maintenance from '@patternfly/react-component-groups/dist/dynamic/Maintenance'; -export const BasicExample: React.FunctionComponent = () => ( - +export const BasicExample: FunctionComponent = () => ( + ); diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/Maintenance/MaintenanceExample.tsx b/packages/module/patternfly-docs/content/extensions/component-groups/examples/Maintenance/MaintenanceExample.tsx index 58feac59..4e573a94 100644 --- a/packages/module/patternfly-docs/content/extensions/component-groups/examples/Maintenance/MaintenanceExample.tsx +++ b/packages/module/patternfly-docs/content/extensions/component-groups/examples/Maintenance/MaintenanceExample.tsx @@ -1,6 +1,4 @@ -import React from 'react'; -import Maintenance from '@patternfly/react-component-groups/dist/dynamic/Maintenance' +import { FunctionComponent } from 'react'; +import Maintenance from '@patternfly/react-component-groups/dist/dynamic/Maintenance'; -export const BasicExample: React.FunctionComponent = () => ( - -); +export const BasicExample: FunctionComponent = () => ; diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/MissingPage/MissingPage.md b/packages/module/patternfly-docs/content/extensions/component-groups/examples/MissingPage/MissingPage.md index 498ad8ee..2b3e1c62 100644 --- a/packages/module/patternfly-docs/content/extensions/component-groups/examples/MissingPage/MissingPage.md +++ b/packages/module/patternfly-docs/content/extensions/component-groups/examples/MissingPage/MissingPage.md @@ -15,6 +15,7 @@ sourceLink: https://github.com/patternfly/react-component-groups/blob/main/packa --- import MissingPage from '@patternfly/react-component-groups/dist/dynamic/MissingPage'; +import { FunctionComponent } from 'react'; The **missing page** component can be used to display an error message and "return to homepage" button when an error occurs. @@ -22,8 +23,8 @@ The **missing page** component can be used to display an error message and "retu ### Basic missing page -A basic missing page component informs users that an error has occurred. It also includes a button link, which users can select to return to the homepage. +A basic missing page component informs users that an error has occurred. It also includes a button link, which users can select to return to the homepage. ```js file="./MissingPageExample.tsx" -``` \ No newline at end of file +``` diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/MissingPage/MissingPageExample.tsx b/packages/module/patternfly-docs/content/extensions/component-groups/examples/MissingPage/MissingPageExample.tsx index 964cb573..304ace36 100644 --- a/packages/module/patternfly-docs/content/extensions/component-groups/examples/MissingPage/MissingPageExample.tsx +++ b/packages/module/patternfly-docs/content/extensions/component-groups/examples/MissingPage/MissingPageExample.tsx @@ -1,4 +1,4 @@ import MissingPage from '@patternfly/react-component-groups/dist/dynamic/MissingPage'; -import React from 'react'; +import { FunctionComponent } from 'react'; -export const BasicExample: React.FunctionComponent = () => ; +export const BasicExample: FunctionComponent = () => ; diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/MultiContentCard/MultiContentCard.md b/packages/module/patternfly-docs/content/extensions/component-groups/examples/MultiContentCard/MultiContentCard.md index 32970532..87707d95 100644 --- a/packages/module/patternfly-docs/content/extensions/component-groups/examples/MultiContentCard/MultiContentCard.md +++ b/packages/module/patternfly-docs/content/extensions/component-groups/examples/MultiContentCard/MultiContentCard.md @@ -11,6 +11,7 @@ import MultiContentCard, { MultiContentCardDividerVariant } from "@patternfly/re import { ArrowRightIcon, BellIcon, CogIcon, EllipsisVIcon, LockIcon } from '@patternfly/react-icons'; import { createUseStyles } from 'react-jss'; import clsx from 'clsx'; +import { FunctionComponent, useState } from 'react'; A **multi-content card** component allows to display multiple card components in a single layout. To further customize this layout, you can also utilize all properties of the [card component](/components/card), with the exception of `children` and `title`. @@ -42,7 +43,7 @@ Actions can be displayed in the multi-content card heading using `actions` prope ### Expandable multi content card with dividers -Dividers between all cards in the content can be shown using `withDividers` flag. +Dividers between all cards in the content can be shown using `withDividers` flag. ```js file="./MultiContentCardExpandableDividerExample.tsx" @@ -50,7 +51,7 @@ Dividers between all cards in the content can be shown using `withDividers` flag ### Expandable multi-content card with single dividers -To enable a divider just for a single card, use `dividerVariant` property passed to the `cards` array. +To enable a divider just for a single card, use `dividerVariant` property passed to the `cards` array. ```js file="./MultiContentCardExpandableSingleDividerExample.tsx" diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/MultiContentCard/MultiContentCardExample.tsx b/packages/module/patternfly-docs/content/extensions/component-groups/examples/MultiContentCard/MultiContentCardExample.tsx index 2b4c0171..6cd87360 100644 --- a/packages/module/patternfly-docs/content/extensions/component-groups/examples/MultiContentCard/MultiContentCardExample.tsx +++ b/packages/module/patternfly-docs/content/extensions/component-groups/examples/MultiContentCard/MultiContentCardExample.tsx @@ -1,6 +1,17 @@ -import React from 'react'; -import MultiContentCard from "@patternfly/react-component-groups/dist/dynamic/MultiContentCard"; -import { Button, Card, CardHeader, CardBody, CardFooter, List, ListItem, Content, ContentVariants, Icon } from '@patternfly/react-core'; +import { FunctionComponent } from 'react'; +import MultiContentCard from '@patternfly/react-component-groups/dist/dynamic/MultiContentCard'; +import { + Button, + Card, + CardHeader, + CardBody, + CardFooter, + List, + ListItem, + Content, + ContentVariants, + Icon +} from '@patternfly/react-core'; import { ArrowRightIcon, BellIcon, CogIcon, LockIcon } from '@patternfly/react-icons'; import { createUseStyles } from 'react-jss'; import clsx from 'clsx'; @@ -8,17 +19,17 @@ import clsx from 'clsx'; const useStyles = createUseStyles({ action: { color: 'var(--pf-t--global--text--color--brand--default)', - fontSize: 'var(--pf-t--global--font--size--sm)', + fontSize: 'var(--pf-t--global--font--size--sm)' }, actionIcon: { - color: 'var(--pf-t--global--icon--color--regular)', + color: 'var(--pf-t--global--icon--color--regular)' }, bulletPoints: { - color: 'var(--pf-t--global--color--brand--default)', - }, + color: 'var(--pf-t--global--color--brand--default)' + } }); -export const BasicExample: React.FunctionComponent = () => { +export const BasicExample: FunctionComponent = () => { const classes = useStyles(); const cards = [ @@ -33,19 +44,26 @@ export const BasicExample: React.FunctionComponent = () => { Configure application - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore + magna aliqua. - + - + - + @@ -60,16 +78,23 @@ export const BasicExample: React.FunctionComponent = () => { Configure access - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore + magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo + consequat. - @@ -86,21 +111,27 @@ export const BasicExample: React.FunctionComponent = () => { Configure notifications - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore + magna aliqua. - ]; - return(); -} + return ; +}; diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/MultiContentCard/MultiContentCardExpandableActionsExample.tsx b/packages/module/patternfly-docs/content/extensions/component-groups/examples/MultiContentCard/MultiContentCardExpandableActionsExample.tsx index 93c20b75..15e2a7c1 100644 --- a/packages/module/patternfly-docs/content/extensions/component-groups/examples/MultiContentCard/MultiContentCardExpandableActionsExample.tsx +++ b/packages/module/patternfly-docs/content/extensions/component-groups/examples/MultiContentCard/MultiContentCardExpandableActionsExample.tsx @@ -1,24 +1,42 @@ -import React from 'react'; -import MultiContentCard from "@patternfly/react-component-groups/dist/dynamic/MultiContentCard"; +import { FunctionComponent, useState } from 'react'; +import MultiContentCard from '@patternfly/react-component-groups/dist/dynamic/MultiContentCard'; import { EllipsisVIcon } from '@patternfly/react-icons'; -import { Button, Card, CardHeader, CardBody, CardFooter, Content, ContentVariants, List, ListItem, Icon, Divider, Dropdown, DropdownItem, DropdownList, MenuToggle, MenuToggleElement, Label } from '@patternfly/react-core'; +import { + Button, + Card, + CardHeader, + CardBody, + CardFooter, + Content, + ContentVariants, + List, + ListItem, + Icon, + Divider, + Dropdown, + DropdownItem, + DropdownList, + MenuToggle, + MenuToggleElement, + Label +} from '@patternfly/react-core'; import { ArrowRightIcon, BellIcon, CogIcon, LockIcon } from '@patternfly/react-icons'; import { createUseStyles } from 'react-jss'; import clsx from 'clsx'; const useStyles = createUseStyles({ bulletPoints: { - color: 'var(--pf-t--global--color--brand--default)', - }, + color: 'var(--pf-t--global--color--brand--default)' + } }); -export const BasicExample: React.FunctionComponent = () => { +export const BasicExample: FunctionComponent = () => { const classes = useStyles(); - const [ isMenuOpen, setMenuOpen ] = React.useState(false) + const [ isMenuOpen, setMenuOpen ] = useState(false); const cards = [ - + Getting Started @@ -26,37 +44,56 @@ export const BasicExample: React.FunctionComponent = () => { Configure application - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore + magna aliqua. - + - + - + , - - + + - + - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore + magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo + consequat. - @@ -70,13 +107,22 @@ export const BasicExample: React.FunctionComponent = () => { Configure notifications - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore + magna aliqua. - @@ -87,9 +133,9 @@ export const BasicExample: React.FunctionComponent = () => { setMenuOpen(!isMenuOpen); }; return ( - { onSelect={() => null} onOpenChange={(isMenuOpen: boolean) => setMenuOpen(isMenuOpen)} popperProps={{ position: 'right' }} - toggle={(toggleRef: React.Ref) => ( + toggle={(toggleRef: Ref) => ( { > - Action + Action - Disabled Action + Disabled Action - Separated Action + Separated Action } /> - ) + ); }; diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/MultiContentCard/MultiContentCardExpandableDividerExample.tsx b/packages/module/patternfly-docs/content/extensions/component-groups/examples/MultiContentCard/MultiContentCardExpandableDividerExample.tsx index 5bd1b18d..0e756d40 100644 --- a/packages/module/patternfly-docs/content/extensions/component-groups/examples/MultiContentCard/MultiContentCardExpandableDividerExample.tsx +++ b/packages/module/patternfly-docs/content/extensions/component-groups/examples/MultiContentCard/MultiContentCardExpandableDividerExample.tsx @@ -1,6 +1,17 @@ -import React from 'react'; -import MultiContentCard from "@patternfly/react-component-groups/dist/dynamic/MultiContentCard"; -import { Button, Card, CardHeader, CardBody, CardFooter, List, ListItem, Content, ContentVariants, Icon } from '@patternfly/react-core'; +import { FunctionComponent } from 'react'; +import MultiContentCard from '@patternfly/react-component-groups/dist/dynamic/MultiContentCard'; +import { + Button, + Card, + CardHeader, + CardBody, + CardFooter, + List, + ListItem, + Content, + ContentVariants, + Icon +} from '@patternfly/react-core'; import { ArrowRightIcon, BellIcon, CogIcon, LockIcon } from '@patternfly/react-icons'; import { createUseStyles } from 'react-jss'; import clsx from 'clsx'; @@ -8,17 +19,17 @@ import clsx from 'clsx'; const useStyles = createUseStyles({ action: { color: 'var(--pf-t--global--text--color--brand--default)', - fontSize: 'var(--pf-t--global--font--size--sm)', + fontSize: 'var(--pf-t--global--font--size--sm)' }, actionIcon: { - color: 'var(--pf-t--global--icon--color--regular)', + color: 'var(--pf-t--global--icon--color--regular)' }, bulletPoints: { - color: 'var(--pf-t--global--color--brand--default)', - }, + color: 'var(--pf-t--global--color--brand--default)' + } }); -export const BasicExample: React.FunctionComponent = () => { +export const BasicExample: FunctionComponent = () => { const classes = useStyles(); const cards = [ @@ -31,46 +42,62 @@ export const BasicExample: React.FunctionComponent = () => { - Configure application + Configure application - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore + magna aliqua. - + - + - + , - - + + - + - Configure access + Configure access - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore + magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo + consequat. - @@ -84,22 +111,29 @@ export const BasicExample: React.FunctionComponent = () => { - Configure notifications + Configure notifications - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore + magna aliqua. - ]; - return ()}; + return ; +}; diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/MultiContentCard/MultiContentCardExpandableExample.tsx b/packages/module/patternfly-docs/content/extensions/component-groups/examples/MultiContentCard/MultiContentCardExpandableExample.tsx index 98794c6a..d5ed946f 100644 --- a/packages/module/patternfly-docs/content/extensions/component-groups/examples/MultiContentCard/MultiContentCardExpandableExample.tsx +++ b/packages/module/patternfly-docs/content/extensions/component-groups/examples/MultiContentCard/MultiContentCardExpandableExample.tsx @@ -1,6 +1,17 @@ -import React from 'react'; -import MultiContentCard from "@patternfly/react-component-groups/dist/dynamic/MultiContentCard"; -import { Button, Card, CardHeader, CardBody, CardFooter, List, ListItem, Content, ContentVariants, Icon } from '@patternfly/react-core'; +import { FunctionComponent } from 'react'; +import MultiContentCard from '@patternfly/react-component-groups/dist/dynamic/MultiContentCard'; +import { + Button, + Card, + CardHeader, + CardBody, + CardFooter, + List, + ListItem, + Content, + ContentVariants, + Icon +} from '@patternfly/react-core'; import { ArrowRightIcon, BellIcon, CogIcon, LockIcon } from '@patternfly/react-icons'; import { createUseStyles } from 'react-jss'; import clsx from 'clsx'; @@ -8,17 +19,17 @@ import clsx from 'clsx'; const useStyles = createUseStyles({ action: { color: 'var(--pf-t--global--text--color--brand--default)', - fontSize: 'var(--pf-t--global--font--size--sm)', + fontSize: 'var(--pf-t--global--font--size--sm)' }, actionIcon: { - color: 'var(--pf-t--global--icon--color--regular)', + color: 'var(--pf-t--global--icon--color--regular)' }, bulletPoints: { - color: 'var(--pf-t--global--color--brand--default)', - }, + color: 'var(--pf-t--global--color--brand--default)' + } }); -export const BasicExample: React.FunctionComponent = () => { +export const BasicExample: FunctionComponent = () => { const classes = useStyles(); const cards = [ @@ -33,25 +44,34 @@ export const BasicExample: React.FunctionComponent = () => { Configure application - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore + magna aliqua. - + - + - + , - - + + - + @@ -60,16 +80,23 @@ export const BasicExample: React.FunctionComponent = () => { Configure access - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore + magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo + consequat. - @@ -86,21 +113,27 @@ export const BasicExample: React.FunctionComponent = () => { Configure notifications - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore + magna aliqua. - ]; - return(); -} + return ; +}; diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/MultiContentCard/MultiContentCardExpandableSingleDividerExample.tsx b/packages/module/patternfly-docs/content/extensions/component-groups/examples/MultiContentCard/MultiContentCardExpandableSingleDividerExample.tsx index 7de74128..e44cbcde 100644 --- a/packages/module/patternfly-docs/content/extensions/component-groups/examples/MultiContentCard/MultiContentCardExpandableSingleDividerExample.tsx +++ b/packages/module/patternfly-docs/content/extensions/component-groups/examples/MultiContentCard/MultiContentCardExpandableSingleDividerExample.tsx @@ -1,6 +1,19 @@ -import React from 'react'; -import MultiContentCard, { MultiContentCardDividerVariant } from "@patternfly/react-component-groups/dist/dynamic/MultiContentCard"; -import { Button, Card, CardHeader, CardBody, CardFooter, Content, List, ListItem, ContentVariants, Icon } from '@patternfly/react-core'; +import { FunctionComponent } from 'react'; +import MultiContentCard, { + MultiContentCardDividerVariant +} from '@patternfly/react-component-groups/dist/dynamic/MultiContentCard'; +import { + Button, + Card, + CardHeader, + CardBody, + CardFooter, + Content, + List, + ListItem, + ContentVariants, + Icon +} from '@patternfly/react-core'; import { ArrowRightIcon, BellIcon, CogIcon, LockIcon } from '@patternfly/react-icons'; import { createUseStyles } from 'react-jss'; import clsx from 'clsx'; @@ -8,17 +21,17 @@ import clsx from 'clsx'; const useStyles = createUseStyles({ action: { color: 'var(--pf-t--global--text--color--brand--default)', - fontSize: 'var(--pf-t--global--font--size--sm)', + fontSize: 'var(--pf-t--global--font--size--sm)' }, actionIcon: { - color: 'var(--pf-t--global--icon--color--regular)', + color: 'var(--pf-t--global--icon--color--regular)' }, bulletPoints: { - color: 'var(--pf-t--global--color--brand--default)', - }, + color: 'var(--pf-t--global--color--brand--default)' + } }); -export const BasicExample: React.FunctionComponent = () => { +export const BasicExample: FunctionComponent = () => { const classes = useStyles(); const cards = [ @@ -34,25 +47,34 @@ export const BasicExample: React.FunctionComponent = () => { Configure application - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore + magna aliqua. - + - + - + , - - + + - + @@ -61,16 +83,23 @@ export const BasicExample: React.FunctionComponent = () => { Configure access - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore + magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo + consequat. - @@ -89,23 +118,30 @@ export const BasicExample: React.FunctionComponent = () => { Configure notifications - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et + dolore magna aliqua. - - ), + ), dividerVariant: MultiContentCardDividerVariant.left } ]; - return();} + return ; +}; diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/PageHeader/PageHeader.md b/packages/module/patternfly-docs/content/extensions/component-groups/examples/PageHeader/PageHeader.md index 8dc60713..2ed22de9 100644 --- a/packages/module/patternfly-docs/content/extensions/component-groups/examples/PageHeader/PageHeader.md +++ b/packages/module/patternfly-docs/content/extensions/component-groups/examples/PageHeader/PageHeader.md @@ -10,6 +10,7 @@ sourceLink: https://github.com/patternfly/react-component-groups/blob/main/packa import PageHeader from "@patternfly/react-component-groups/dist/dynamic/PageHeader" import { EllipsisVIcon } from '@patternfly/react-icons'; import pageHeaderIcon from '../../assets/icons/page-header-icon.svg' +import { Fragment, FunctionComponent, MouseEvent, Ref, useState } from 'react'; The **page header** component displays a page header section with a title, subtitle and other optional content. @@ -53,4 +54,4 @@ In case you want to display actions in your header, you can use the `actionsMenu ```js file="./PageHeaderActionsExample.tsx" -``` \ No newline at end of file +``` diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/PageHeader/PageHeaderActionsExample.tsx b/packages/module/patternfly-docs/content/extensions/component-groups/examples/PageHeader/PageHeaderActionsExample.tsx index 9850e01b..1b7e21b9 100644 --- a/packages/module/patternfly-docs/content/extensions/component-groups/examples/PageHeader/PageHeaderActionsExample.tsx +++ b/packages/module/patternfly-docs/content/extensions/component-groups/examples/PageHeader/PageHeaderActionsExample.tsx @@ -1,16 +1,24 @@ -import React from 'react'; +import { Fragment, FunctionComponent, MouseEvent, Ref, useState } from 'react'; import PageHeader from '@patternfly/react-component-groups/dist/dynamic/PageHeader'; -import { ActionList, ActionListItem, Dropdown, DropdownItem, DropdownList, MenuToggle, MenuToggleElement } from '@patternfly/react-core'; +import { + ActionList, + ActionListItem, + Dropdown, + DropdownItem, + DropdownList, + MenuToggle, + MenuToggleElement +} from '@patternfly/react-core'; import { EllipsisVIcon } from '@patternfly/react-icons'; -export const ActionsExample: React.FunctionComponent = () => { - const [ isOpen, setIsOpen ] = React.useState(false); +export const ActionsExample: FunctionComponent = () => { + const [ isOpen, setIsOpen ] = useState(false); const onToggle = () => { setIsOpen(!isOpen); }; - const onSelect = (event: React.MouseEvent | undefined) => { + const onSelect = (event: MouseEvent | undefined) => { event?.stopPropagation(); setIsOpen(!isOpen); }; @@ -26,19 +34,19 @@ export const ActionsExample: React.FunctionComponent = () => { ); - + return ( - + ) => ( + toggle={(toggleRef: Ref) => ( } @@ -55,8 +63,8 @@ export const ActionsExample: React.FunctionComponent = () => { - } + } /> - - ) + + ); }; diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/PageHeader/PageHeaderBreadcrumbExample.tsx b/packages/module/patternfly-docs/content/extensions/component-groups/examples/PageHeader/PageHeaderBreadcrumbExample.tsx index 4cf1100a..c1d49cad 100644 --- a/packages/module/patternfly-docs/content/extensions/component-groups/examples/PageHeader/PageHeaderBreadcrumbExample.tsx +++ b/packages/module/patternfly-docs/content/extensions/component-groups/examples/PageHeader/PageHeaderBreadcrumbExample.tsx @@ -1,33 +1,23 @@ -import React from 'react'; +import { FunctionComponent } from 'react'; import PageHeader from '@patternfly/react-component-groups/dist/dynamic/PageHeader'; import { Breadcrumb, BreadcrumbItem } from '@patternfly/react-core'; -export const BreadcrumbExample: React.FunctionComponent = () => ( - ( + - - Home + + Home - - Services + + Services - - Service A + + Service A } - title='My Title' - subtitle='This is a subtitle for your page header' + title="My Title" + subtitle="This is a subtitle for your page header" /> ); diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/PageHeader/PageHeaderExample.tsx b/packages/module/patternfly-docs/content/extensions/component-groups/examples/PageHeader/PageHeaderExample.tsx index 8e8b57a0..319ac4a5 100644 --- a/packages/module/patternfly-docs/content/extensions/component-groups/examples/PageHeader/PageHeaderExample.tsx +++ b/packages/module/patternfly-docs/content/extensions/component-groups/examples/PageHeader/PageHeaderExample.tsx @@ -1,9 +1,6 @@ -import React from 'react'; +import { FunctionComponent } from 'react'; import PageHeader from '@patternfly/react-component-groups/dist/dynamic/PageHeader'; -export const BasicExample: React.FunctionComponent = () => ( - +export const BasicExample: FunctionComponent = () => ( + ); diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/PageHeader/PageHeaderIconExample.tsx b/packages/module/patternfly-docs/content/extensions/component-groups/examples/PageHeader/PageHeaderIconExample.tsx index b9512d9d..a81d22c9 100644 --- a/packages/module/patternfly-docs/content/extensions/component-groups/examples/PageHeader/PageHeaderIconExample.tsx +++ b/packages/module/patternfly-docs/content/extensions/component-groups/examples/PageHeader/PageHeaderIconExample.tsx @@ -1,12 +1,11 @@ -import React from 'react'; +import { FunctionComponent } from 'react'; import PageHeader from '@patternfly/react-component-groups/dist/dynamic/PageHeader'; import pageHeaderIcon from '../../assets/icons/page-header-icon.svg'; - -export const IconExample: React.FunctionComponent = () => ( - ( + } /> ); diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/PageHeader/PageHeaderLabelLinkExample.tsx b/packages/module/patternfly-docs/content/extensions/component-groups/examples/PageHeader/PageHeaderLabelLinkExample.tsx index 12146973..12b2f94f 100644 --- a/packages/module/patternfly-docs/content/extensions/component-groups/examples/PageHeader/PageHeaderLabelLinkExample.tsx +++ b/packages/module/patternfly-docs/content/extensions/component-groups/examples/PageHeader/PageHeaderLabelLinkExample.tsx @@ -1,15 +1,15 @@ -import React from 'react'; +import { FunctionComponent } from 'react'; import PageHeader from '@patternfly/react-component-groups/dist/dynamic/PageHeader'; import { Label } from '@patternfly/react-core'; -export const BasicExample: React.FunctionComponent = () => ( - ( + Org. Administrator} linkProps={{ label: 'Go to this link', - isExternal: true, + isExternal: true }} /> ); diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/ResponsiveActions/ResponsiveActions.md b/packages/module/patternfly-docs/content/extensions/component-groups/examples/ResponsiveActions/ResponsiveActions.md index 433d1509..c674708e 100644 --- a/packages/module/patternfly-docs/content/extensions/component-groups/examples/ResponsiveActions/ResponsiveActions.md +++ b/packages/module/patternfly-docs/content/extensions/component-groups/examples/ResponsiveActions/ResponsiveActions.md @@ -13,9 +13,10 @@ source: react propComponents: ['ResponsiveAction', 'ResponsiveActions'] sourceLink: https://github.com/patternfly/react-component-groups/blob/main/packages/module/patternfly-docs/content/extensions/component-groups/examples/ResponsiveActions/ResponsiveActions.md --- -import { useState } from 'react'; + import { ResponsiveAction } from '@patternfly/react-component-groups/dist/dynamic/ResponsiveAction'; import { ResponsiveActions } from '@patternfly/react-component-groups/dist/dynamic/ResponsiveActions'; +import { FunctionComponent, useState, useRef } from 'react'; The **responsive actions** component allows for the display of actions in a responsive layout. Actions can be presented as persistent, pinned or collapsed to dropdown. @@ -27,7 +28,6 @@ The `ResponsiveAction` component is used to declare individual actions within th This example demonstrates how to create responsive actions with persistent and pinned actions. - ```js file="./ResponsiveActionsExample.tsx" ``` @@ -38,7 +38,6 @@ By passing in the `breakpointReference` property, the overflow menu's breakpoint You can change the container width in this example by adjusting the slider. As the container width changes, the actions will change their layout despite the viewport width not changing. - ```js file="./ResponsiveActionsBreakpointExample.tsx" ``` diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/ResponsiveActions/ResponsiveActionsBreakpointExample.tsx b/packages/module/patternfly-docs/content/extensions/component-groups/examples/ResponsiveActions/ResponsiveActionsBreakpointExample.tsx index 6fe7bf4c..f4164976 100644 --- a/packages/module/patternfly-docs/content/extensions/component-groups/examples/ResponsiveActions/ResponsiveActionsBreakpointExample.tsx +++ b/packages/module/patternfly-docs/content/extensions/component-groups/examples/ResponsiveActions/ResponsiveActionsBreakpointExample.tsx @@ -1,14 +1,11 @@ -import React from 'react'; -import { - Slider, - SliderOnChangeEvent, -} from '@patternfly/react-core'; +import { FunctionComponent, useState, useRef } from 'react'; +import { Slider, SliderOnChangeEvent } from '@patternfly/react-core'; import { ResponsiveActions } from '@patternfly/react-component-groups/dist/dynamic/ResponsiveActions'; import { ResponsiveAction } from '@patternfly/react-component-groups/dist/dynamic/ResponsiveAction'; -export const ResponsiveActionsBreakpointExample: React.FunctionComponent = () => { - const [ containerWidth, setContainerWidth ] = React.useState(100); - const containerRef = React.useRef(null); +export const ResponsiveActionsBreakpointExample: FunctionComponent = () => { + const [ containerWidth, setContainerWidth ] = useState(100); + const containerRef = useRef(null); const onChange = (_event: SliderOnChangeEvent, value: number) => { setContainerWidth(value); @@ -25,8 +22,8 @@ export const ResponsiveActionsBreakpointExample: React.FunctionComponent = () => <>
- Current container width: {containerWidth} - % + Current container width:{' '} + {containerWidth}%
- - Persistent Action - - + Persistent Action + Pinned Action 1 - + Pinned Action 2 - - Overflow Action - + Overflow Action
diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/ResponsiveActions/ResponsiveActionsExample.tsx b/packages/module/patternfly-docs/content/extensions/component-groups/examples/ResponsiveActions/ResponsiveActionsExample.tsx index c322dfdf..eb9470b8 100644 --- a/packages/module/patternfly-docs/content/extensions/component-groups/examples/ResponsiveActions/ResponsiveActionsExample.tsx +++ b/packages/module/patternfly-docs/content/extensions/component-groups/examples/ResponsiveActions/ResponsiveActionsExample.tsx @@ -1,20 +1,14 @@ -import React from 'react'; +import { FunctionComponent } from 'react'; import { ResponsiveAction } from '@patternfly/react-component-groups/dist/dynamic/ResponsiveAction'; import { ResponsiveActions } from '@patternfly/react-component-groups/dist/dynamic/ResponsiveActions'; -export const TagCountDisabledExample: React.FunctionComponent = () => ( +export const TagCountDisabledExample: FunctionComponent = () => ( - - Persistent Action - - - Pinned Action - - - Overflow Action - - - Disabled action + Persistent Action + + Pinned Action + Overflow Action + Disabled action ); diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/ServiceCard/ServiceCard.md b/packages/module/patternfly-docs/content/extensions/component-groups/examples/ServiceCard/ServiceCard.md index 1ebef07b..66315719 100644 --- a/packages/module/patternfly-docs/content/extensions/component-groups/examples/ServiceCard/ServiceCard.md +++ b/packages/module/patternfly-docs/content/extensions/component-groups/examples/ServiceCard/ServiceCard.md @@ -10,6 +10,7 @@ sourceLink: https://github.com/patternfly/react-component-groups/blob/main/packa import ServiceCard from "@patternfly/react-component-groups/dist/dynamic/ServiceCard"; import { EllipsisVIcon } from '@patternfly/react-icons'; import pageHeaderIcon from '../../assets/icons/page-header-icon.svg' +import { FunctionComponent } from 'react' The **service card** component displays a card representing a service with an icon, title, description, and an optional customized footer @@ -38,4 +39,3 @@ This shows how cards can look side by side in a [gallery layout](/layouts/galler ```js file="./ServiceCardGalleryExample.tsx" ``` - diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/ServiceCard/ServiceCardExample.tsx b/packages/module/patternfly-docs/content/extensions/component-groups/examples/ServiceCard/ServiceCardExample.tsx index 65ac0a88..23eb7208 100644 --- a/packages/module/patternfly-docs/content/extensions/component-groups/examples/ServiceCard/ServiceCardExample.tsx +++ b/packages/module/patternfly-docs/content/extensions/component-groups/examples/ServiceCard/ServiceCardExample.tsx @@ -1,35 +1,30 @@ -import React from 'react'; -import ServiceCard from "@patternfly/react-component-groups/dist/dynamic/ServiceCard"; +import { FunctionComponent } from 'react'; +import ServiceCard from '@patternfly/react-component-groups/dist/dynamic/ServiceCard'; import pageHeaderIcon from '../../assets/icons/page-header-icon.svg'; import { Button, ButtonVariant } from '@patternfly/react-core'; -export const BasicExample: React.FunctionComponent = () => ( +export const BasicExample: FunctionComponent = () => ( } - helperText='Here is helper text' + helperText="Here is helper text" footer={ <> - } /> -); \ No newline at end of file +); diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/ServiceCard/ServiceCardGalleryExample.tsx b/packages/module/patternfly-docs/content/extensions/component-groups/examples/ServiceCard/ServiceCardGalleryExample.tsx index e15b95c3..e7cbc3e2 100644 --- a/packages/module/patternfly-docs/content/extensions/component-groups/examples/ServiceCard/ServiceCardGalleryExample.tsx +++ b/packages/module/patternfly-docs/content/extensions/component-groups/examples/ServiceCard/ServiceCardGalleryExample.tsx @@ -1,52 +1,47 @@ -import React from 'react'; -import ServiceCard from "@patternfly/react-component-groups/dist/dynamic/ServiceCard"; +import { FunctionComponent } from 'react'; +import ServiceCard from '@patternfly/react-component-groups/dist/dynamic/ServiceCard'; import { Gallery } from '@patternfly/react-core/dist/dynamic/layouts/Gallery'; import { GalleryItem } from '@patternfly/react-core/dist/dynamic/layouts/Gallery'; import { Button, ButtonVariant } from '@patternfly/react-core'; import pageHeaderIcon from '../../assets/icons/page-header-icon.svg'; -export const ServiceCardGalleryExample: React.FunctionComponent = () => ( +export const ServiceCardGalleryExample: FunctionComponent = () => ( } - helperText='Example helper text' + helperText="Example helper text" /> } - helperText='Example helper text' + helperText="Example helper text" footer={ <> - } /> -) \ No newline at end of file +); diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/ServiceCard/ServiceCardStackedExample.tsx b/packages/module/patternfly-docs/content/extensions/component-groups/examples/ServiceCard/ServiceCardStackedExample.tsx index 4eaebd1a..f33d4c25 100644 --- a/packages/module/patternfly-docs/content/extensions/component-groups/examples/ServiceCard/ServiceCardStackedExample.tsx +++ b/packages/module/patternfly-docs/content/extensions/component-groups/examples/ServiceCard/ServiceCardStackedExample.tsx @@ -1,37 +1,31 @@ -import React from 'react'; -import ServiceCard from "@patternfly/react-component-groups/dist/dynamic/ServiceCard"; +import { FunctionComponent } from 'react'; +import ServiceCard from '@patternfly/react-component-groups/dist/dynamic/ServiceCard'; import pageHeaderIcon from '../../assets/icons/page-header-icon.svg'; import { Button, ButtonVariant } from '@patternfly/react-core'; - -export const BasicExample: React.FunctionComponent = () => ( +export const BasicExample: FunctionComponent = () => ( } - helperText='Here is helper text' + helperText="Here is helper text" footer={ <> - } /> -); \ No newline at end of file +); diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/Severity/Severity.md b/packages/module/patternfly-docs/content/extensions/component-groups/examples/Severity/Severity.md index 26519f87..f5970467 100644 --- a/packages/module/patternfly-docs/content/extensions/component-groups/examples/Severity/Severity.md +++ b/packages/module/patternfly-docs/content/extensions/component-groups/examples/Severity/Severity.md @@ -15,15 +15,16 @@ sourceLink: https://github.com/patternfly/react-component-groups/blob/main/packa --- import Severity, { SeverityType } from '@patternfly/react-component-groups/dist/dynamic/Severity'; +import { FunctionComponent } from 'react' The **severity** component generates an icon with an optional label, which corresponds to a level `minor`, `moderate`, `important` or `critical`. Each level corresponds with a severity level and respective color: -| Severity level | Meaning | Style | -| --- | --- | --- | -| Level 1 | Minor severity (best case scenario) | Dark grey icon | -| Level 2 | Moderate severity | Yellow icon | -| Level 3 | Important severity | Orange icon | -| Level 4 | Critical severity (worst case scenario) | Red icon | +| Severity level | Meaning | Style | +| -------------- | --------------------------------------- | -------------- | +| Level 1 | Minor severity (best case scenario) | Dark grey icon | +| Level 2 | Moderate severity | Yellow icon | +| Level 3 | Important severity | Orange icon | +| Level 4 | Critical severity (worst case scenario) | Red icon | To specify the severity risk level, you can pass a predefined enum or text value into the `severity` property that corresponds to the appropriate severity level. @@ -33,11 +34,12 @@ To add an optional label, add the `label` property to the `` component ### Undefined variant -The default style for the severity component appears when any value besides "none", "low", "medium", "high", or "critical" is passed to `Severity`. +The default style for the severity component appears when any value besides "none", "low", "medium", "high", or "critical" is passed to `Severity`. ```js file="./SeverityUndefinedExample.tsx" ``` + ### None severity To style no severity, pass "none" or `SeverityType.none` to `severity`. @@ -76,4 +78,4 @@ To style a critical severity, pass "critical" or `SeverityType.critical` to `sev ```js file="./SeverityCriticalExample.tsx" -``` \ No newline at end of file +``` diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/Severity/SeverityCriticalExample.tsx b/packages/module/patternfly-docs/content/extensions/component-groups/examples/Severity/SeverityCriticalExample.tsx index 460dd89b..20806964 100644 --- a/packages/module/patternfly-docs/content/extensions/component-groups/examples/Severity/SeverityCriticalExample.tsx +++ b/packages/module/patternfly-docs/content/extensions/component-groups/examples/Severity/SeverityCriticalExample.tsx @@ -1,8 +1,4 @@ -import React from 'react'; +import { FunctionComponent } from 'react'; import Severity, { SeverityType } from '@patternfly/react-component-groups/dist/dynamic/Severity'; -export const BasicExample: React.FunctionComponent = () => ( - - - -); +export const BasicExample: FunctionComponent = () => ; diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/Severity/SeverityImportantExample.tsx b/packages/module/patternfly-docs/content/extensions/component-groups/examples/Severity/SeverityImportantExample.tsx index 4b17c0b8..ae1d3939 100644 --- a/packages/module/patternfly-docs/content/extensions/component-groups/examples/Severity/SeverityImportantExample.tsx +++ b/packages/module/patternfly-docs/content/extensions/component-groups/examples/Severity/SeverityImportantExample.tsx @@ -1,6 +1,4 @@ -import React from 'react'; +import { FunctionComponent } from 'react'; import Severity, { SeverityType } from '@patternfly/react-component-groups/dist/dynamic/Severity'; -export const BasicExample: React.FunctionComponent = () => ( - -); +export const BasicExample: FunctionComponent = () => ; diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/Severity/SeverityMinorExample.tsx b/packages/module/patternfly-docs/content/extensions/component-groups/examples/Severity/SeverityMinorExample.tsx index 2bbd9634..63854f03 100644 --- a/packages/module/patternfly-docs/content/extensions/component-groups/examples/Severity/SeverityMinorExample.tsx +++ b/packages/module/patternfly-docs/content/extensions/component-groups/examples/Severity/SeverityMinorExample.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import { FunctionComponent } from 'react'; import Severity, { SeverityType } from '@patternfly/react-component-groups/dist/dynamic/Severity'; -export const BasicExample: React.FunctionComponent = () => ; +export const BasicExample: FunctionComponent = () => ; diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/Severity/SeverityModerateExample.tsx b/packages/module/patternfly-docs/content/extensions/component-groups/examples/Severity/SeverityModerateExample.tsx index 67c317b5..85816bf6 100644 --- a/packages/module/patternfly-docs/content/extensions/component-groups/examples/Severity/SeverityModerateExample.tsx +++ b/packages/module/patternfly-docs/content/extensions/component-groups/examples/Severity/SeverityModerateExample.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import { FunctionComponent } from 'react'; import Severity, { SeverityType } from '@patternfly/react-component-groups/dist/dynamic/Severity'; -export const BasicExample: React.FunctionComponent = () => ; +export const BasicExample: FunctionComponent = () => ; diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/Severity/SeverityNoneExample.tsx b/packages/module/patternfly-docs/content/extensions/component-groups/examples/Severity/SeverityNoneExample.tsx index 2bcfbcc8..ba7a7b23 100644 --- a/packages/module/patternfly-docs/content/extensions/component-groups/examples/Severity/SeverityNoneExample.tsx +++ b/packages/module/patternfly-docs/content/extensions/component-groups/examples/Severity/SeverityNoneExample.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import { FunctionComponent } from 'react'; import Severity, { SeverityType } from '@patternfly/react-component-groups/dist/dynamic/Severity'; -export const BasicExample: React.FunctionComponent = () => ; +export const BasicExample: FunctionComponent = () => ; diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/Severity/SeverityUndefinedExample.tsx b/packages/module/patternfly-docs/content/extensions/component-groups/examples/Severity/SeverityUndefinedExample.tsx index 68e01f04..86178e2f 100644 --- a/packages/module/patternfly-docs/content/extensions/component-groups/examples/Severity/SeverityUndefinedExample.tsx +++ b/packages/module/patternfly-docs/content/extensions/component-groups/examples/Severity/SeverityUndefinedExample.tsx @@ -1,5 +1,7 @@ -import React from 'react'; +import { FunctionComponent } from 'react'; import Severity from '@patternfly/react-component-groups/dist/dynamic/Severity'; // eslint-disable-next-line @typescript-eslint/no-explicit-any -export const BasicExample: React.FunctionComponent = () => +export const BasicExample: FunctionComponent = () => ( + +); diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/ShortcutGrid/ShortcutExample.tsx b/packages/module/patternfly-docs/content/extensions/component-groups/examples/ShortcutGrid/ShortcutExample.tsx index 5715bf23..e6899f26 100644 --- a/packages/module/patternfly-docs/content/extensions/component-groups/examples/ShortcutGrid/ShortcutExample.tsx +++ b/packages/module/patternfly-docs/content/extensions/component-groups/examples/ShortcutGrid/ShortcutExample.tsx @@ -1,4 +1,6 @@ -import React from 'react'; +import { FunctionComponent } from 'react'; import Shortcut from '@patternfly/react-component-groups/dist/dynamic/Shortcut'; -export const BasicExample: React.FunctionComponent = () => ; +export const BasicExample: FunctionComponent = () => ( + +); diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/ShortcutGrid/ShortcutGrid.md b/packages/module/patternfly-docs/content/extensions/component-groups/examples/ShortcutGrid/ShortcutGrid.md index 4f052061..352a645b 100644 --- a/packages/module/patternfly-docs/content/extensions/component-groups/examples/ShortcutGrid/ShortcutGrid.md +++ b/packages/module/patternfly-docs/content/extensions/component-groups/examples/ShortcutGrid/ShortcutGrid.md @@ -10,15 +10,13 @@ id: Shortcut grid 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: [ - 'ShortcutGrid', - 'Shortcut' -] +propComponents: ['ShortcutGrid', 'Shortcut'] sourceLink: https://github.com/patternfly/react-component-groups/blob/main/packages/module/patternfly-docs/content/extensions/component-groups/examples/ShortcutGrid/ShortcutGrid.md --- import ShortcutGrid from '@patternfly/react-component-groups/dist/dynamic/ShortcutGrid'; import Shortcut from '@patternfly/react-component-groups/dist/dynamic/Shortcut'; +import { FunctionComponent } from 'react'; A **shortcut grid** component displays keyboard shortcuts with their description in a grid. @@ -26,7 +24,7 @@ A **shortcut grid** component displays keyboard shortcuts with their description ### Basic shortcut grid -A basic shortcut grid can be used to display shortcuts available to the user together with their description. +A basic shortcut grid can be used to display shortcuts available to the user together with their description. You can customize displayed shortcuts using `shortcuts` props. For mouse actions with given shortcuts, there are separate props to be enabled. You can customize showing symbols for control keys using `showSymbols`. The component also accepts all properties of the [grid layout](/layouts/grid). @@ -36,12 +34,10 @@ You can customize displayed shortcuts using `shortcuts` props. For mouse actions ### Single shortcut -Shortcut component can be also used outside of the grid. +Shortcut component can be also used outside of the grid. Appearance of the component can be customized using the `className` property. ```js file="./ShortcutExample.tsx" ``` - - diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/ShortcutGrid/ShortcutGridExample.tsx b/packages/module/patternfly-docs/content/extensions/component-groups/examples/ShortcutGrid/ShortcutGridExample.tsx index b3a7e591..7d7efc8c 100644 --- a/packages/module/patternfly-docs/content/extensions/component-groups/examples/ShortcutGrid/ShortcutGridExample.tsx +++ b/packages/module/patternfly-docs/content/extensions/component-groups/examples/ShortcutGrid/ShortcutGridExample.tsx @@ -1,12 +1,12 @@ -import React from 'react'; +import { FunctionComponent } from 'react'; import ShortcutGrid from '@patternfly/react-component-groups/dist/dynamic/ShortcutGrid'; -export const BasicExample: React.FunctionComponent = () => ( - ( + ); diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/SkeletonTable/SkeletonTable.md b/packages/module/patternfly-docs/content/extensions/component-groups/examples/SkeletonTable/SkeletonTable.md index cfb7061c..b3515e2c 100644 --- a/packages/module/patternfly-docs/content/extensions/component-groups/examples/SkeletonTable/SkeletonTable.md +++ b/packages/module/patternfly-docs/content/extensions/component-groups/examples/SkeletonTable/SkeletonTable.md @@ -13,10 +13,12 @@ source: react propComponents: ['SkeletonTable', 'SkeletonTableHead', 'SkeletonTableBody'] sourceLink: https://github.com/patternfly/react-component-groups/blob/main/packages/module/patternfly-docs/content/extensions/component-groups/examples/SkeletonTable/SkeletonTable.md --- + import { RowSelectVariant, TableVariant, Table } from '@patternfly/react-table'; import SkeletonTable from '@patternfly/react-component-groups/dist/dynamic/SkeletonTable'; import SkeletonTableHead from '@patternfly/react-component-groups/dist/dynamic/SkeletonTableHead'; import SkeletonTableBody from '@patternfly/react-component-groups/dist/dynamic/SkeletonTableBody'; +import { FC, ReactNode, useState, useEffect } from 'react'; The **skeleton table** component is used to display placeholder "skeletons" within a table as its contents load. @@ -68,7 +70,6 @@ The following example demonstrates the typical behavior of a skeleton table tran To simulate this loading process, click the "Reload table" button and wait for the data to populate. - ```js file="./SkeletonTableLoadingExample.tsx" ``` diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/SkeletonTable/SkeletonTableBodyExample.tsx b/packages/module/patternfly-docs/content/extensions/component-groups/examples/SkeletonTable/SkeletonTableBodyExample.tsx index c3f15f84..040fa5ad 100644 --- a/packages/module/patternfly-docs/content/extensions/component-groups/examples/SkeletonTable/SkeletonTableBodyExample.tsx +++ b/packages/module/patternfly-docs/content/extensions/component-groups/examples/SkeletonTable/SkeletonTableBodyExample.tsx @@ -1,9 +1,9 @@ -import React from 'react'; +import { FC } from 'react'; import { Table } from '@patternfly/react-table'; -import SkeletonTableBody from "@patternfly/react-component-groups/dist/dynamic/SkeletonTableBody"; +import SkeletonTableBody from '@patternfly/react-component-groups/dist/dynamic/SkeletonTableBody'; -export const SkeletonTableBodyExample: React.FC = () => ( +export const SkeletonTableBodyExample: FC = () => (
-); \ No newline at end of file +); diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/SkeletonTable/SkeletonTableCompactExample.tsx b/packages/module/patternfly-docs/content/extensions/component-groups/examples/SkeletonTable/SkeletonTableCompactExample.tsx index 47316ad7..4d245c83 100644 --- a/packages/module/patternfly-docs/content/extensions/component-groups/examples/SkeletonTable/SkeletonTableCompactExample.tsx +++ b/packages/module/patternfly-docs/content/extensions/component-groups/examples/SkeletonTable/SkeletonTableCompactExample.tsx @@ -1,5 +1,7 @@ -import React from 'react'; -import SkeletonTable from "@patternfly/react-component-groups/dist/dynamic/SkeletonTable"; +import { FC } from 'react'; +import SkeletonTable from '@patternfly/react-component-groups/dist/dynamic/SkeletonTable'; import { TableVariant } from '@patternfly/react-table'; -export const SkeletonTableExample: React.FC = () => ; +export const SkeletonTableExample: FC = () => ( + +); diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/SkeletonTable/SkeletonTableCustomExample.tsx b/packages/module/patternfly-docs/content/extensions/component-groups/examples/SkeletonTable/SkeletonTableCustomExample.tsx index de3ef4ab..c90c5372 100644 --- a/packages/module/patternfly-docs/content/extensions/component-groups/examples/SkeletonTable/SkeletonTableCustomExample.tsx +++ b/packages/module/patternfly-docs/content/extensions/component-groups/examples/SkeletonTable/SkeletonTableCustomExample.tsx @@ -1,8 +1,8 @@ -import React from 'react'; -import SkeletonTable from "@patternfly/react-component-groups/dist/dynamic/SkeletonTable"; +import { FC } from 'react'; +import SkeletonTable from '@patternfly/react-component-groups/dist/dynamic/SkeletonTable'; import { Th } from '@patternfly/react-table'; -export const SkeletonTableExample: React.FC = () => ( +export const SkeletonTableExample: FC = () => ( +export const SkeletonTableExample: FC = () => ; diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/SkeletonTable/SkeletonTableExpandableExample.tsx b/packages/module/patternfly-docs/content/extensions/component-groups/examples/SkeletonTable/SkeletonTableExpandableExample.tsx index 07da239c..ec1d3b63 100644 --- a/packages/module/patternfly-docs/content/extensions/component-groups/examples/SkeletonTable/SkeletonTableExpandableExample.tsx +++ b/packages/module/patternfly-docs/content/extensions/component-groups/examples/SkeletonTable/SkeletonTableExpandableExample.tsx @@ -1,4 +1,6 @@ -import React from 'react'; -import SkeletonTable from "@patternfly/react-component-groups/dist/dynamic/SkeletonTable"; +import { FC } from 'react'; +import SkeletonTable from '@patternfly/react-component-groups/dist/dynamic/SkeletonTable'; -export const SkeletonTableExample: React.FC = () => ; +export const SkeletonTableExample: FC = () => ( + +); diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/SkeletonTable/SkeletonTableHeadExample.tsx b/packages/module/patternfly-docs/content/extensions/component-groups/examples/SkeletonTable/SkeletonTableHeadExample.tsx index 6f6f6c3e..bfb84c97 100644 --- a/packages/module/patternfly-docs/content/extensions/component-groups/examples/SkeletonTable/SkeletonTableHeadExample.tsx +++ b/packages/module/patternfly-docs/content/extensions/component-groups/examples/SkeletonTable/SkeletonTableHeadExample.tsx @@ -1,9 +1,9 @@ -import React from 'react'; +import { FC } from 'react'; import { Table } from '@patternfly/react-table'; -import SkeletonTableHead from "@patternfly/react-component-groups/dist/dynamic/SkeletonTableHead"; +import SkeletonTableHead from '@patternfly/react-component-groups/dist/dynamic/SkeletonTableHead'; -export const SkeletonTableHeadExample: React.FC = () => ( +export const SkeletonTableHeadExample: FC = () => (
-); \ No newline at end of file +); diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/SkeletonTable/SkeletonTableLoadingExample.tsx b/packages/module/patternfly-docs/content/extensions/component-groups/examples/SkeletonTable/SkeletonTableLoadingExample.tsx index 456466a5..83f7bb06 100644 --- a/packages/module/patternfly-docs/content/extensions/component-groups/examples/SkeletonTable/SkeletonTableLoadingExample.tsx +++ b/packages/module/patternfly-docs/content/extensions/component-groups/examples/SkeletonTable/SkeletonTableLoadingExample.tsx @@ -1,5 +1,5 @@ -import React from 'react'; -import SkeletonTable from "@patternfly/react-component-groups/dist/dynamic/SkeletonTable"; +import { FC, ReactNode, useState, useEffect } from 'react'; +import SkeletonTable from '@patternfly/react-component-groups/dist/dynamic/SkeletonTable'; import { Table, Tbody, Td, Th, Tr, Thead } from '@patternfly/react-table'; import { Button, Stack, StackItem } from '@patternfly/react-core'; @@ -11,8 +11,8 @@ interface Repository { lastCommit: string; } -export const SkeletonTableExample: React.FC = () => { - const [ isLoaded, setIsLoaded ] = React.useState(false); +export const SkeletonTableExample: FC = () => { + const [ isLoaded, setIsLoaded ] = useState(false); const loadData = () => { setIsLoaded(false); @@ -35,7 +35,7 @@ export const SkeletonTableExample: React.FC = () => { lastCommit: 'Last commit' }; - const table: React.ReactNode = !isLoaded ? ( + const table: ReactNode = !isLoaded ? ( { ); - React.useEffect(() => { + useEffect(() => { loadData(); }, []); @@ -80,9 +80,7 @@ export const SkeletonTableExample: React.FC = () => { {table} - + diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/SkeletonTable/SkeletonTableSelectableExample.tsx b/packages/module/patternfly-docs/content/extensions/component-groups/examples/SkeletonTable/SkeletonTableSelectableExample.tsx index 774a30b5..dc12a58b 100644 --- a/packages/module/patternfly-docs/content/extensions/component-groups/examples/SkeletonTable/SkeletonTableSelectableExample.tsx +++ b/packages/module/patternfly-docs/content/extensions/component-groups/examples/SkeletonTable/SkeletonTableSelectableExample.tsx @@ -1,7 +1,7 @@ -import React from 'react'; -import SkeletonTable from "@patternfly/react-component-groups/dist/dynamic/SkeletonTable"; +import { FC } from 'react'; +import SkeletonTable from '@patternfly/react-component-groups/dist/dynamic/SkeletonTable'; import { RowSelectVariant } from '@patternfly/react-table'; -export const SkeletonTableExample: React.FC = () => ( +export const SkeletonTableExample: FC = () => ( ); diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/StaleDataWarning/StaleDataWarning.md b/packages/module/patternfly-docs/content/extensions/component-groups/examples/StaleDataWarning/StaleDataWarning.md index 7454210b..42d78b37 100644 --- a/packages/module/patternfly-docs/content/extensions/component-groups/examples/StaleDataWarning/StaleDataWarning.md +++ b/packages/module/patternfly-docs/content/extensions/component-groups/examples/StaleDataWarning/StaleDataWarning.md @@ -15,14 +15,15 @@ sourceLink: https://github.com/patternfly/react-component-groups/blob/main/packa --- import StaleDataWarning from '@patternfly/react-component-groups/dist/dynamic/StaleDataWarning'; +import { Fragment, FunctionComponent } from 'react'; -A **stale data warning** component displays a warning status when an object is stale and planned for removal. Additional warning details can be displayed as a tooltip or text label. +A **stale data warning** component displays a warning status when an object is stale and planned for removal. Additional warning details can be displayed as a tooltip or text label. ## Examples ### Basic stale data warning example -A basic stale data warning component displays a warning icon with additional details in a tooltip, including a timeline for data removal. +A basic stale data warning component displays a warning icon with additional details in a tooltip, including a timeline for data removal. ```js file="./StaleDataWarningExample.tsx" @@ -34,4 +35,4 @@ Instead of sharing details in a tooltip, you can place a short message beside th ```js file="./StaleDataWarningCustomExample.tsx" -``` \ No newline at end of file +``` diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/StaleDataWarning/StaleDataWarningCustomExample.tsx b/packages/module/patternfly-docs/content/extensions/component-groups/examples/StaleDataWarning/StaleDataWarningCustomExample.tsx index 813b3c93..f5029e05 100644 --- a/packages/module/patternfly-docs/content/extensions/component-groups/examples/StaleDataWarning/StaleDataWarningCustomExample.tsx +++ b/packages/module/patternfly-docs/content/extensions/component-groups/examples/StaleDataWarning/StaleDataWarningCustomExample.tsx @@ -1,36 +1,34 @@ -import React from 'react'; +import { Fragment, FunctionComponent } from 'react'; import StaleDataWarning from '@patternfly/react-component-groups/dist/dynamic/StaleDataWarning'; import { Stack, StackItem } from '@patternfly/react-core'; - -export const CustomizedRenderExample: React.FunctionComponent = () => { +export const CustomizedRenderExample: FunctionComponent = () => { const staleDate = new Date('Sun Jan 26 2020'); const warningDate = new Date('Mon Feb 15 2025'); const cullingDate = new Date('Fri Feb 20 2025'); - return <> - - - ({msg})}> - - - - - (This is an error message where the item is overdue)}> - - - - + return ( + <> + + + {msg}} + > + - - -}; \ No newline at end of file + + This is an error message where the item is overdue} + > + + + + ); +}; diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/StaleDataWarning/StaleDataWarningExample.tsx b/packages/module/patternfly-docs/content/extensions/component-groups/examples/StaleDataWarning/StaleDataWarningExample.tsx index 82046ff5..3ae96d9d 100644 --- a/packages/module/patternfly-docs/content/extensions/component-groups/examples/StaleDataWarning/StaleDataWarningExample.tsx +++ b/packages/module/patternfly-docs/content/extensions/component-groups/examples/StaleDataWarning/StaleDataWarningExample.tsx @@ -1,33 +1,32 @@ -import React from 'react'; +import { FunctionComponent } from 'react'; import StaleDataWarning from '@patternfly/react-component-groups/dist/dynamic/StaleDataWarning'; import { Stack, StackItem } from '@patternfly/react-core'; -export const BasicExample: React.FunctionComponent = () => { +export const BasicExample: FunctionComponent = () => { const staleDate = new Date('Sun Jan 26 2020'); const warningDate = new Date('Mon Feb 15 2025'); const cullingDate = new Date('Fri Feb 20 2025'); - return <> - - - - - + return ( + <> + + + + - - - - - - - - + + + + + + ); }; diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/Status/IconOnlyStatusExample.tsx b/packages/module/patternfly-docs/content/extensions/component-groups/examples/Status/IconOnlyStatusExample.tsx index 79f8976e..bb2219c5 100644 --- a/packages/module/patternfly-docs/content/extensions/component-groups/examples/Status/IconOnlyStatusExample.tsx +++ b/packages/module/patternfly-docs/content/extensions/component-groups/examples/Status/IconOnlyStatusExample.tsx @@ -1,7 +1,13 @@ -import React from 'react'; +import { FunctionComponent } from 'react'; import { Status, IconStatus } from '@patternfly/react-component-groups/dist/dynamic/Status'; import { ExclamationTriangleIcon } from '@patternfly/react-icons/'; -export const BasicExample: React.FunctionComponent = () => ( - }/> +export const BasicExample: FunctionComponent = () => ( + } + /> ); diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/Status/LinkStatusExample.tsx b/packages/module/patternfly-docs/content/extensions/component-groups/examples/Status/LinkStatusExample.tsx index 6a442246..faeeb97f 100644 --- a/packages/module/patternfly-docs/content/extensions/component-groups/examples/Status/LinkStatusExample.tsx +++ b/packages/module/patternfly-docs/content/extensions/component-groups/examples/Status/LinkStatusExample.tsx @@ -1,8 +1,14 @@ -import React from 'react'; +import { FunctionComponent } from 'react'; import { IconStatus, Status, StatusVariant } from '@patternfly/react-component-groups/dist/dynamic/Status'; import { CheckCircleIcon } from '@patternfly/react-icons/'; -export const BasicExample: React.FunctionComponent = () => ( - // eslint-disable-next-line no-console - console.log('Link status clicked')} icon={}/> +export const BasicExample: FunctionComponent = () => ( + console.log('Link status clicked')} + icon={} + /> ); diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/Status/PopoverStatusExample.tsx b/packages/module/patternfly-docs/content/extensions/component-groups/examples/Status/PopoverStatusExample.tsx index d71cdc98..9deb9151 100644 --- a/packages/module/patternfly-docs/content/extensions/component-groups/examples/Status/PopoverStatusExample.tsx +++ b/packages/module/patternfly-docs/content/extensions/component-groups/examples/Status/PopoverStatusExample.tsx @@ -1,17 +1,21 @@ -import React from 'react'; +import { FunctionComponent } from 'react'; import { IconStatus, Status, StatusVariant } from '@patternfly/react-component-groups/dist/dynamic/Status'; import { BanIcon } from '@patternfly/react-icons/'; import { Button, ButtonSize, ButtonVariant } from '@patternfly/react-core'; -export const BasicExample: React.FunctionComponent = () => ( - ( + } - popoverProps={{ - bodyContent: 'Example state description', - footerContent: + label="Not Ready" + icon={} + popoverProps={{ + bodyContent: 'Example state description', + footerContent: ( + + ) }} /> ); diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/Status/Status.md b/packages/module/patternfly-docs/content/extensions/component-groups/examples/Status/Status.md index 8a586c9f..261e35cd 100644 --- a/packages/module/patternfly-docs/content/extensions/component-groups/examples/Status/Status.md +++ b/packages/module/patternfly-docs/content/extensions/component-groups/examples/Status/Status.md @@ -14,14 +14,16 @@ propComponents: ['Status'] beta: true sourceLink: https://github.com/patternfly/react-component-groups/blob/main/packages/module/patternfly-docs/content/extensions/component-groups/examples/Status/Status.md --- + import { BanIcon, CheckCircleIcon, ExclamationCircleIcon, ExclamationTriangleIcon } from '@patternfly/react-icons/'; import { Status, StatusVariant, IconStatus } from '@patternfly/react-component-groups/dist/dynamic/Status'; +import { FunctionComponent } from 'react'; -The **status** component's purpose is to display status with icon and text to the user. +The **status** component's purpose is to display status with icon and text to the user. ### Basic status -Status component consinsts of an icon configured using `icon` and a message, specified with `label`. +Status component consinsts of an icon configured using `icon` and a message, specified with `label`. ```js file="./StatusExample.tsx" diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/Status/StatusDescriptionExample.tsx b/packages/module/patternfly-docs/content/extensions/component-groups/examples/Status/StatusDescriptionExample.tsx index e3e6a0c9..2f467b17 100644 --- a/packages/module/patternfly-docs/content/extensions/component-groups/examples/Status/StatusDescriptionExample.tsx +++ b/packages/module/patternfly-docs/content/extensions/component-groups/examples/Status/StatusDescriptionExample.tsx @@ -1,7 +1,7 @@ -import React from 'react'; +import { FunctionComponent } from 'react'; import { IconStatus, Status } from '@patternfly/react-component-groups/dist/dynamic/Status'; import { ExclamationTriangleIcon } from '@patternfly/react-icons/'; -export const BasicExample: React.FunctionComponent = () => ( - }/> +export const BasicExample: FunctionComponent = () => ( + } /> ); diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/Status/StatusExample.tsx b/packages/module/patternfly-docs/content/extensions/component-groups/examples/Status/StatusExample.tsx index de6b2a00..58d5145b 100644 --- a/packages/module/patternfly-docs/content/extensions/component-groups/examples/Status/StatusExample.tsx +++ b/packages/module/patternfly-docs/content/extensions/component-groups/examples/Status/StatusExample.tsx @@ -1,7 +1,7 @@ -import React from 'react'; +import { FunctionComponent } from 'react'; import { IconStatus, Status } from '@patternfly/react-component-groups/dist/dynamic/Status'; import { ExclamationTriangleIcon } from '@patternfly/react-icons/'; -export const BasicExample: React.FunctionComponent = () => ( - }/> +export const BasicExample: FunctionComponent = () => ( + } /> ); diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/TagCount/TagCount.md b/packages/module/patternfly-docs/content/extensions/component-groups/examples/TagCount/TagCount.md index e15a6694..4808ee33 100644 --- a/packages/module/patternfly-docs/content/extensions/component-groups/examples/TagCount/TagCount.md +++ b/packages/module/patternfly-docs/content/extensions/component-groups/examples/TagCount/TagCount.md @@ -13,9 +13,11 @@ source: react propComponents: ['TagCount'] sourceLink: https://github.com/patternfly/react-component-groups/blob/main/packages/module/patternfly-docs/content/extensions/component-groups/examples/TagCount/TagCount.md --- + import TagCount from '@patternfly/react-component-groups/dist/dynamic/TagCount'; +import { FunctionComponent } from 'react'; -The **tag count** component generates a tag icon that displays a number, which represents a count value. +The **tag count** component generates a tag icon that displays a number, which represents a count value. ## Examples diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/TagCount/TagCountDisabledExample.tsx b/packages/module/patternfly-docs/content/extensions/component-groups/examples/TagCount/TagCountDisabledExample.tsx index 3ee38dcc..cbf926ae 100644 --- a/packages/module/patternfly-docs/content/extensions/component-groups/examples/TagCount/TagCountDisabledExample.tsx +++ b/packages/module/patternfly-docs/content/extensions/component-groups/examples/TagCount/TagCountDisabledExample.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import { FunctionComponent } from 'react'; import TagCount from '@patternfly/react-component-groups/dist/dynamic/TagCount'; -export const TagCountDisabledExample: React.FunctionComponent = () => +export const TagCountDisabledExample: FunctionComponent = () => ; diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/TagCount/TagCountExample.tsx b/packages/module/patternfly-docs/content/extensions/component-groups/examples/TagCount/TagCountExample.tsx index 92507e4e..80be7a9d 100644 --- a/packages/module/patternfly-docs/content/extensions/component-groups/examples/TagCount/TagCountExample.tsx +++ b/packages/module/patternfly-docs/content/extensions/component-groups/examples/TagCount/TagCountExample.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import { FunctionComponent } from 'react'; import TagCount from '@patternfly/react-component-groups/dist/dynamic/TagCount'; -export const TagCountDisabledExample: React.FunctionComponent = () => +export const TagCountDisabledExample: FunctionComponent = () => ; diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/UnauthorizedAccess/UnauthorizedAccess.md b/packages/module/patternfly-docs/content/extensions/component-groups/examples/UnauthorizedAccess/UnauthorizedAccess.md index 9d6946e2..b9d618f9 100644 --- a/packages/module/patternfly-docs/content/extensions/component-groups/examples/UnauthorizedAccess/UnauthorizedAccess.md +++ b/packages/module/patternfly-docs/content/extensions/component-groups/examples/UnauthorizedAccess/UnauthorizedAccess.md @@ -8,6 +8,7 @@ sourceLink: https://github.com/patternfly/react-component-groups/blob/main/packa --- import UnauthorizedAccess from "@patternfly/react-component-groups/dist/dynamic/UnauthorizedAccess"; +import { FunctionComponent } from 'react'; A **not authorized** component displays an error screen to users when they attempt to view a page that they don't have permission to access. @@ -15,7 +16,7 @@ A **not authorized** component displays an error screen to users when they attem ### Basic unauthorized access -A basic not authorized component displays a title, body text, and custom actions. +A basic not authorized component displays a title, body text, and custom actions. ```js file="./UnauthorizedAccessExample.tsx" diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/UnauthorizedAccess/UnauthorizedAccessActionsExample.tsx b/packages/module/patternfly-docs/content/extensions/component-groups/examples/UnauthorizedAccess/UnauthorizedAccessActionsExample.tsx index 50b0d1ae..4e7eec1e 100644 --- a/packages/module/patternfly-docs/content/extensions/component-groups/examples/UnauthorizedAccess/UnauthorizedAccessActionsExample.tsx +++ b/packages/module/patternfly-docs/content/extensions/component-groups/examples/UnauthorizedAccess/UnauthorizedAccessActionsExample.tsx @@ -1,12 +1,9 @@ -import React from 'react'; +import { FunctionComponent } from 'react'; import { Button } from '@patternfly/react-core'; -import UnauthorizedAccess from "@patternfly/react-component-groups/dist/dynamic/UnauthorizedAccess"; +import UnauthorizedAccess from '@patternfly/react-component-groups/dist/dynamic/UnauthorizedAccess'; -export const BasicExample: React.FunctionComponent = () => { - const primaryAction = - ; +export const BasicExample: FunctionComponent = () => { + const primaryAction = ; const secondaryActions = [ ]; return ( - ); -} +}; diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/UnauthorizedAccess/UnauthorizedAccessExample.tsx b/packages/module/patternfly-docs/content/extensions/component-groups/examples/UnauthorizedAccess/UnauthorizedAccessExample.tsx index 3085db81..8549d966 100644 --- a/packages/module/patternfly-docs/content/extensions/component-groups/examples/UnauthorizedAccess/UnauthorizedAccessExample.tsx +++ b/packages/module/patternfly-docs/content/extensions/component-groups/examples/UnauthorizedAccess/UnauthorizedAccessExample.tsx @@ -1,10 +1,6 @@ -import React from 'react'; -import UnauthorizedAccess from "@patternfly/react-component-groups/dist/dynamic/UnauthorizedAccess"; +import { FunctionComponent } from 'react'; +import UnauthorizedAccess from '@patternfly/react-component-groups/dist/dynamic/UnauthorizedAccess'; -export const BasicExample: React.FunctionComponent = () => ( - +export const BasicExample: FunctionComponent = () => ( + ); - 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 63b2c6a0..fb7a8ffc 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 @@ -15,6 +15,7 @@ sourceLink: https://github.com/patternfly/react-component-groups/blob/main/packa --- import UnavailableContent from '@patternfly/react-component-groups/dist/dynamic/UnavailableContent'; +import { FunctionComponent } from 'react'; An **unavailable content** component displays a screen to users when they attempt to view a page that is currently unavailable to view. 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 index c11c8fc4..515b1547 100644 --- 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 @@ -1,6 +1,4 @@ -import React from 'react'; +import { FunctionComponent } from 'react'; import UnavailableContent from '@patternfly/react-component-groups/dist/dynamic/UnavailableContent'; -export const BasicExample: React.FunctionComponent = () => ( - -); +export const BasicExample: FunctionComponent = () => ; diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/WarningModal/WarningModal.md b/packages/module/patternfly-docs/content/extensions/component-groups/examples/WarningModal/WarningModal.md index 156c57e9..f91af720 100644 --- a/packages/module/patternfly-docs/content/extensions/component-groups/examples/WarningModal/WarningModal.md +++ b/packages/module/patternfly-docs/content/extensions/component-groups/examples/WarningModal/WarningModal.md @@ -15,6 +15,7 @@ sourceLink: https://github.com/patternfly/react-component-groups/blob/main/packa --- import WarningModal from '@patternfly/react-component-groups/dist/dynamic/WarningModal'; +import { FunctionComponent, useState } from 'react'; A **warning modal** component displays a modal when a user tries to perform a risky action, which asks them to confirm or cancel the action. @@ -22,9 +23,9 @@ A **warning modal** component displays a modal when a user tries to perform a ri ### Basic warning modal -A basic warning modal is triggered when a user tries to perform an action that is deemed risky. +A basic warning modal is triggered when a user tries to perform an action that is deemed risky. -You can customize the contents of the modal to fit your use cases. To adjust the text in the modal, pass your desired title to `title` and your message to the `` component. To customize the action buttons in the modal, use `onConfirm` and `onClose`. +You can customize the contents of the modal to fit your use cases. To adjust the text in the modal, pass your desired title to `title` and your message to the `` component. To customize the action buttons in the modal, use `onConfirm` and `onClose`. For further customization, you can utilize all properties of the [modal component](/components/modal), with the exception of `ref`. @@ -40,7 +41,6 @@ You can apply custom variant to a warning modal's confirmation button. ``` - ### Warning modal with a checkbox To confirm that a user wishes to initiate a selected action, you can add a checkbox to a warning modal. @@ -49,7 +49,6 @@ To confirm that a user wishes to initiate a selected action, you can add a check ``` - ### Warning modal with a text confirmation To ensure the user intentionally initiates a selected action, you can add a confirmation text input. diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/WarningModal/WarningModalCheckboxExample.tsx b/packages/module/patternfly-docs/content/extensions/component-groups/examples/WarningModal/WarningModalCheckboxExample.tsx index cdafe212..da939f12 100644 --- a/packages/module/patternfly-docs/content/extensions/component-groups/examples/WarningModal/WarningModalCheckboxExample.tsx +++ b/packages/module/patternfly-docs/content/extensions/component-groups/examples/WarningModal/WarningModalCheckboxExample.tsx @@ -1,21 +1,23 @@ -import React from 'react'; +import { FunctionComponent, useState } from 'react'; import WarningModal from '@patternfly/react-component-groups/dist/dynamic/WarningModal'; import { Button, ButtonVariant } from '@patternfly/react-core'; -export const BasicExample: React.FunctionComponent = () => { - const [ isOpen, setIsOpen ] = React.useState(false); - return <> - - setIsOpen(false)} - onConfirm={() => setIsOpen(false)} - withCheckbox - checkboxLabel='Are you sure?' - confirmButtonVariant={ButtonVariant.danger} - > - Your page contains unsaved changes. Do you want to leave? - - +export const BasicExample: FunctionComponent = () => { + const [ isOpen, setIsOpen ] = useState(false); + return ( + <> + + setIsOpen(false)} + onConfirm={() => setIsOpen(false)} + withCheckbox + checkboxLabel="Are you sure?" + confirmButtonVariant={ButtonVariant.danger} + > + Your page contains unsaved changes. Do you want to leave? + + + ); }; diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/WarningModal/WarningModalDangerExample.tsx b/packages/module/patternfly-docs/content/extensions/component-groups/examples/WarningModal/WarningModalDangerExample.tsx index 35503bca..5241459c 100644 --- a/packages/module/patternfly-docs/content/extensions/component-groups/examples/WarningModal/WarningModalDangerExample.tsx +++ b/packages/module/patternfly-docs/content/extensions/component-groups/examples/WarningModal/WarningModalDangerExample.tsx @@ -1,18 +1,21 @@ -import React from 'react'; +import { FunctionComponent, useState } from 'react'; import WarningModal from '@patternfly/react-component-groups/dist/dynamic/WarningModal'; import { Button, ButtonVariant } from '@patternfly/react-core'; -export const BasicExample: React.FunctionComponent = () => { - const [ isOpen, setIsOpen ] = React.useState(false); - return <> - - setIsOpen(false)} - onConfirm={() => setIsOpen(false)}> - Your page contains unsaved changes. Do you want to leave? - - +export const BasicExample: FunctionComponent = () => { + const [ isOpen, setIsOpen ] = useState(false); + return ( + <> + + setIsOpen(false)} + onConfirm={() => setIsOpen(false)} + > + Your page contains unsaved changes. Do you want to leave? + + + ); }; diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/WarningModal/WarningModalExample.tsx b/packages/module/patternfly-docs/content/extensions/component-groups/examples/WarningModal/WarningModalExample.tsx index 5c46c29e..2dff0c7a 100644 --- a/packages/module/patternfly-docs/content/extensions/component-groups/examples/WarningModal/WarningModalExample.tsx +++ b/packages/module/patternfly-docs/content/extensions/component-groups/examples/WarningModal/WarningModalExample.tsx @@ -1,19 +1,22 @@ -import React from 'react'; +import { FunctionComponent, useState } from 'react'; import WarningModal from '@patternfly/react-component-groups/dist/dynamic/WarningModal'; import { Button } from '@patternfly/react-core'; -export const BasicExample: React.FunctionComponent = () => { - const [ isOpen, setIsOpen ] = React.useState(false); - return <> - - setIsOpen(false)} - onConfirm={() => setIsOpen(false)}> - Your page contains unsaved changes. Do you want to leave? - - +export const BasicExample: FunctionComponent = () => { + const [ isOpen, setIsOpen ] = useState(false); + return ( + <> + + setIsOpen(false)} + onConfirm={() => setIsOpen(false)} + > + Your page contains unsaved changes. Do you want to leave? + + + ); }; diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/WarningModal/WarningModalTextConfirmationExample.tsx b/packages/module/patternfly-docs/content/extensions/component-groups/examples/WarningModal/WarningModalTextConfirmationExample.tsx index d08f5b43..a217fa71 100644 --- a/packages/module/patternfly-docs/content/extensions/component-groups/examples/WarningModal/WarningModalTextConfirmationExample.tsx +++ b/packages/module/patternfly-docs/content/extensions/component-groups/examples/WarningModal/WarningModalTextConfirmationExample.tsx @@ -1,21 +1,24 @@ -import React from 'react'; +import { FunctionComponent, useState } from 'react'; import WarningModal from '@patternfly/react-component-groups/dist/dynamic/WarningModal'; import { Button } from '@patternfly/react-core'; -export const BasicExample: React.FunctionComponent = () => { - const [ isOpen, setIsOpen ] = React.useState(false); - return <> - - setIsOpen(false)} - onConfirm={() => setIsOpen(false)} - confirmationInputProps={{ type: 'text', isRequired: true }} - confirmationText='Item1'> - The item will be deleted. - - +export const BasicExample: FunctionComponent = () => { + const [ isOpen, setIsOpen ] = useState(false); + return ( + <> + + setIsOpen(false)} + onConfirm={() => setIsOpen(false)} + confirmationInputProps={{ type: 'text', isRequired: true }} + confirmationText="Item1" + > + The item will be deleted. + + + ); }; diff --git a/packages/module/patternfly-docs/pages/index.js b/packages/module/patternfly-docs/pages/index.js index 3ba1b4d7..a6f0cc7e 100644 --- a/packages/module/patternfly-docs/pages/index.js +++ b/packages/module/patternfly-docs/pages/index.js @@ -1,3 +1,4 @@ +// eslint-disable-next-line @typescript-eslint/no-unused-vars import React from 'react'; import { Title, PageSection } from '@patternfly/react-core'; diff --git a/packages/module/src/Ansible/Ansible.test.tsx b/packages/module/src/Ansible/Ansible.test.tsx index 651d8883..45c81414 100644 --- a/packages/module/src/Ansible/Ansible.test.tsx +++ b/packages/module/src/Ansible/Ansible.test.tsx @@ -1,4 +1,3 @@ -import React from 'react'; import { render } from '@testing-library/react'; import Ansible from './Ansible'; diff --git a/packages/module/src/Ansible/Ansible.tsx b/packages/module/src/Ansible/Ansible.tsx index b0f29b0d..aa2fc1e3 100644 --- a/packages/module/src/Ansible/Ansible.tsx +++ b/packages/module/src/Ansible/Ansible.tsx @@ -1,8 +1,9 @@ -import React from 'react'; +import type { HTMLAttributes, DetailedHTMLProps, FunctionComponent, CSSProperties } from 'react'; +import { Fragment } from 'react'; import clsx from 'clsx'; import { createUseStyles } from 'react-jss'; -export interface AnsibleProps extends React.DetailedHTMLProps, HTMLElement> { +export interface AnsibleProps extends DetailedHTMLProps, HTMLElement> { /** Supported/unsupported variant flag */ isSupported?: boolean; /** Red Hat Ansible Automation Platform technology icon */ @@ -51,7 +52,7 @@ const useStyles = createUseStyles({ } }) -const Ansible: React.FunctionComponent = ({ isSupported = true, isRHAAP, className, ouiaId = "Ansible-icon", ...props }: AnsibleProps) => { +const Ansible: FunctionComponent = ({ isSupported = true, isRHAAP, className, ouiaId = "Ansible-icon", ...props }: AnsibleProps) => { const classes = useStyles(); const ansibleLogoClass = clsx( classes.ansible, @@ -61,7 +62,7 @@ const Ansible: React.FunctionComponent = ({ isSupported = true, is ); const unsupportedSlash = ( - + = ({ isSupported = true, is width="563.7" height="221.5" /> - + ); return ( - + ( {isRHAAP ? ( {RHAAPTechnologyIcon} @@ -104,7 +105,7 @@ const Ansible: React.FunctionComponent = ({ isSupported = true, is x="0px" y="0px" viewBox="0 0 2032 2027.2" - style={{ enableBackground: 'new 0 0 2032 2027.2' } as React.CSSProperties} + style={{ enableBackground: 'new 0 0 2032 2027.2' } as CSSProperties} > = ({ isSupported = true, is ) } - + ) ); }; diff --git a/packages/module/src/BulkSelect/BulkSelect.test.tsx b/packages/module/src/BulkSelect/BulkSelect.test.tsx index cb1e678f..b1de4c74 100644 --- a/packages/module/src/BulkSelect/BulkSelect.test.tsx +++ b/packages/module/src/BulkSelect/BulkSelect.test.tsx @@ -1,4 +1,3 @@ -import React from 'react'; import { render } from '@testing-library/react'; import BulkSelect from './BulkSelect'; diff --git a/packages/module/src/BulkSelect/BulkSelect.tsx b/packages/module/src/BulkSelect/BulkSelect.tsx index 4618fb61..64466ec8 100644 --- a/packages/module/src/BulkSelect/BulkSelect.tsx +++ b/packages/module/src/BulkSelect/BulkSelect.tsx @@ -1,4 +1,5 @@ -import React, { useMemo, useState } from 'react'; +import type { FC, Ref } from 'react'; +import { useMemo, useState } from 'react'; import { Dropdown, DropdownItem, @@ -45,7 +46,7 @@ export interface BulkSelectProps extends Omit; } -export const BulkSelect: React.FC = ({ +export const BulkSelect: FC = ({ isDataPaginated = true, canSelectAll, pageSelected, @@ -87,7 +88,7 @@ export const BulkSelect: React.FC = ({ const onToggleClick = () => setOpen(!isOpen); return ( - { @@ -96,7 +97,7 @@ export const BulkSelect: React.FC = ({ }} isOpen={isOpen} onOpenChange={(isOpen: boolean) => setOpen(isOpen)} - toggle={(toggleRef: React.Ref) => ( + toggle={(toggleRef: Ref) => ( = ({ {...props} > {splitButtonDropdownItems} - + ) ); }; diff --git a/packages/module/src/CloseButton/CloseButton.tsx b/packages/module/src/CloseButton/CloseButton.tsx index 16a11c51..531d5450 100644 --- a/packages/module/src/CloseButton/CloseButton.tsx +++ b/packages/module/src/CloseButton/CloseButton.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import type { FunctionComponent } from 'react'; import { Button, ButtonProps, ButtonVariant } from '@patternfly/react-core'; import { CloseIcon } from '@patternfly/react-icons'; import { createUseStyles } from 'react-jss'; @@ -17,7 +17,7 @@ export interface CloseButtonProps extends ButtonProps { dataTestID?: string; }; -export const CloseButton: React.FunctionComponent = ({ +export const CloseButton: FunctionComponent = ({ className, dataTestID, onClick, diff --git a/packages/module/src/ColumnManagementModal/ColumnManagementModal.test.tsx b/packages/module/src/ColumnManagementModal/ColumnManagementModal.test.tsx index 2ab91a54..efe0554b 100644 --- a/packages/module/src/ColumnManagementModal/ColumnManagementModal.test.tsx +++ b/packages/module/src/ColumnManagementModal/ColumnManagementModal.test.tsx @@ -1,4 +1,3 @@ -import * as React from 'react'; import '@testing-library/jest-dom' import { render, screen, fireEvent } from '@testing-library/react'; import ColumnManagementModal, { ColumnManagementModalColumn } from './ColumnManagementModal'; diff --git a/packages/module/src/ColumnManagementModal/ColumnManagementModal.tsx b/packages/module/src/ColumnManagementModal/ColumnManagementModal.tsx index 8f5f787d..e86c7c00 100644 --- a/packages/module/src/ColumnManagementModal/ColumnManagementModal.tsx +++ b/packages/module/src/ColumnManagementModal/ColumnManagementModal.tsx @@ -1,4 +1,5 @@ -import React from 'react'; +import type { ReactNode, MouseEvent, FunctionComponent } from 'react'; +import { useState } from 'react'; import { Button, Content, @@ -19,7 +20,7 @@ export interface ColumnManagementModalColumn { /** Internal identifier of a column by which table displayed columns are filtered. */ key: string, /** The actual display name of the column possibly with a tooltip or icon. */ - title: React.ReactNode, + title: ReactNode, /** If user changes checkboxes, the component will send back column array with this property altered. */ isShown?: boolean, /** Set to false if the column should be hidden initially */ @@ -33,7 +34,7 @@ export interface ColumnManagementModalProps extends Omit void, + onClose?: (event: KeyboardEvent | MouseEvent) => void, /** Current column state */ appliedColumns: ColumnManagementModalColumn[], /** Invoked with new column state after save button is clicked */ @@ -44,9 +45,9 @@ export interface ColumnManagementModalProps extends Omit = ( +const ColumnManagementModal: FunctionComponent = ( { title = 'Manage columns', description = 'Selected categories will be displayed in the table.', isOpen = false, @@ -56,7 +57,7 @@ const ColumnManagementModal: React.FunctionComponent ouiaId = 'ColumnManagementModal', ...props }: ColumnManagementModalProps) => { - const [ currentColumns, setCurrentColumns ] = React.useState( + const [ currentColumns, setCurrentColumns ] = useState( appliedColumns.map(column => ({ ...column, isShown: column.isShown ?? column.isShownByDefault })) ); diff --git a/packages/module/src/ContentHeader/ContentHeader.tsx b/packages/module/src/ContentHeader/ContentHeader.tsx index 47c03fdf..0d565db6 100644 --- a/packages/module/src/ContentHeader/ContentHeader.tsx +++ b/packages/module/src/ContentHeader/ContentHeader.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import type { ReactNode, PropsWithChildren, FunctionComponent } from 'react'; import { Flex, FlexItem, @@ -24,19 +24,19 @@ export interface PageHeaderLinkProps extends ButtonProps { export interface ContentHeaderProps { /** Title for content header */ - title: React.ReactNode; + title: ReactNode; /** Optional subtitle for content header */ - subtitle?: React.ReactNode; + subtitle?: ReactNode; /** Optional link below subtitle */ linkProps?: PageHeaderLinkProps; /** Optional icon for content header (appears to the left of the content header's title with a divider) */ - icon?: React.ReactNode; + icon?: ReactNode; /** Optional label for content header (appears to the right of the content header's title) */ - label?: React.ReactNode; + label?: ReactNode; /** Breadcrumbs component */ - breadcrumbs?: React.ReactNode; + breadcrumbs?: ReactNode; /** Menu that appears to the far right of the title */ - actionMenu?: React.ReactNode; + actionMenu?: ReactNode; /** Custom OUIA ID */ ouiaId?: string | number; } @@ -47,7 +47,7 @@ const useStyles = createUseStyles({ } }); -export const ContentHeader: React.FunctionComponent> = ({ +export const ContentHeader: FunctionComponent> = ({ title, subtitle = null, linkProps, diff --git a/packages/module/src/ErrorBoundary/ErrorBoundary.test.tsx b/packages/module/src/ErrorBoundary/ErrorBoundary.test.tsx index a8dc853f..eeffdcce 100644 --- a/packages/module/src/ErrorBoundary/ErrorBoundary.test.tsx +++ b/packages/module/src/ErrorBoundary/ErrorBoundary.test.tsx @@ -1,4 +1,3 @@ -import * as React from 'react'; import ErrorBoundary from './ErrorBoundary'; import { render, screen } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; diff --git a/packages/module/src/ErrorBoundary/ErrorBoundary.tsx b/packages/module/src/ErrorBoundary/ErrorBoundary.tsx index b23bc6bf..df923422 100644 --- a/packages/module/src/ErrorBoundary/ErrorBoundary.tsx +++ b/packages/module/src/ErrorBoundary/ErrorBoundary.tsx @@ -1,4 +1,5 @@ -import * as React from 'react'; +import type { ReactNode, FunctionComponent } from 'react'; +import { Component } from 'react'; import { ExpandableSection, Title } from '@patternfly/react-core'; import { createUseStyles } from 'react-jss'; import ErrorState from '../ErrorState'; @@ -14,19 +15,19 @@ const useStyles = createUseStyles({ export interface ErrorBoundaryProps { /** The title text to display on the error page */ - headerTitle?: React.ReactNode; + headerTitle?: ReactNode; /** Indicates if the error is silent */ silent?: boolean; /** The title text to display with the error */ - errorTitle?: React.ReactNode; + errorTitle?: ReactNode; /** The description text to display with the error */ - errorDescription?: React.ReactNode; + errorDescription?: ReactNode; /** The default description text to display with the error if no errorDescription is provided */ - defaultErrorDescription?: React.ReactNode; + defaultErrorDescription?: ReactNode; /** The text for the toggle link that users can select to view error details */ errorToggleText?: string; /** The component that the error boundary component is wrapped around, which should be returned if there is no error */ - children?: React.ReactNode; + children?: ReactNode; /** Custom OUIA ID */ ouiaId?: string | number; /** The heading level to use on the header title, default is h1 */ @@ -49,7 +50,7 @@ interface ErrorPageProps extends ErrorBoundaryProps { classes: Record; } -export const ErrorBoundary: React.FunctionComponent = ({ +export const ErrorBoundary: FunctionComponent = ({ headerTitleHeadingLevel = "h1", errorTitleHeadingLevel = "h2", ...props @@ -66,7 +67,7 @@ export const ErrorBoundary: React.FunctionComponent = ({ } // As of time of writing, React only supports error boundaries in class components -class ErrorBoundaryContent extends React.Component { +class ErrorBoundaryContent extends Component { constructor(props: Readonly) { super(props); this.state = { @@ -128,6 +129,6 @@ class ErrorBoundaryContent extends React.Component = ({ error, className, ...props }) => { +export const ErrorStack: FunctionComponent = ({ error, className, ...props }) => { const classes = useStyles(); if (error.stack) { diff --git a/packages/module/src/ErrorState/ErrorState.test.tsx b/packages/module/src/ErrorState/ErrorState.test.tsx index 6bcc6c9c..7bea92f3 100644 --- a/packages/module/src/ErrorState/ErrorState.test.tsx +++ b/packages/module/src/ErrorState/ErrorState.test.tsx @@ -1,4 +1,3 @@ -import * as React from 'react'; import ErrorState from './ErrorState'; import { render, screen } from '@testing-library/react'; import { Button } from '@patternfly/react-core'; diff --git a/packages/module/src/ErrorState/ErrorState.tsx b/packages/module/src/ErrorState/ErrorState.tsx index 9935af3a..891de951 100644 --- a/packages/module/src/ErrorState/ErrorState.tsx +++ b/packages/module/src/ErrorState/ErrorState.tsx @@ -10,7 +10,7 @@ import { StackItem, } from '@patternfly/react-core'; import { createUseStyles } from 'react-jss' -import React from 'react'; +import type { ReactNode, FunctionComponent } from 'react'; const useStyles = createUseStyles({ errorDescription: { @@ -21,20 +21,20 @@ const useStyles = createUseStyles({ /** extends EmptyStateProps */ export interface ErrorStateProps extends Omit { /** Title of the error. */ - titleText?: React.ReactNode; + titleText?: ReactNode; /** A description of the error, if no body text is provided then it will be set to the defaultBodyText. */ - bodyText?: React.ReactNode; + bodyText?: ReactNode; /** A default description of the error used if no errorDescription is provided. */ - defaultBodyText?: React.ReactNode; + defaultBodyText?: ReactNode; /** Custom footer content */ - customFooter?: React.ReactNode; + customFooter?: ReactNode; /** ErrorState OUIA ID */ ouiaId?: string | number; /** Status of the error message. */ status?: 'danger' | 'warning' | 'success' | 'info' | 'custom' | 'none'; } -const ErrorState: React.FunctionComponent = ({ +const ErrorState: FunctionComponent = ({ titleText = 'Something went wrong', bodyText, defaultBodyText, diff --git a/packages/module/src/LogSnippet/LogSnippet.test.tsx b/packages/module/src/LogSnippet/LogSnippet.test.tsx index f00bf184..6f120f5e 100644 --- a/packages/module/src/LogSnippet/LogSnippet.test.tsx +++ b/packages/module/src/LogSnippet/LogSnippet.test.tsx @@ -1,4 +1,3 @@ -import React from 'react'; import { render } from '@testing-library/react'; import LogSnippet from './LogSnippet'; diff --git a/packages/module/src/LogSnippet/LogSnippet.tsx b/packages/module/src/LogSnippet/LogSnippet.tsx index f2a57495..85bbba06 100644 --- a/packages/module/src/LogSnippet/LogSnippet.tsx +++ b/packages/module/src/LogSnippet/LogSnippet.tsx @@ -1,19 +1,19 @@ -import * as React from 'react'; +import type { ReactNode, FunctionComponent } from 'react'; import { Alert, AlertVariant, CodeBlock, CodeBlockCode, Flex, FlexItem, FlexProps } from '@patternfly/react-core'; /** extends FlexProps */ export interface LogSnippetProps extends FlexProps { /** Log snippet or code to be displayed */ - logSnippet?: React.ReactNode; + logSnippet?: ReactNode; /** Message to appear above the log snippet */ - message: string | React.ReactNode; + message: string | ReactNode; /** Log snippet alert variant */ variant?: AlertVariant; /** Custom OUIA ID */ ouiaId?: string | number; } -export const LogSnippet: React.FunctionComponent = ({ logSnippet, message, variant = AlertVariant.danger, ouiaId = "LogSnippet", ...props }: LogSnippetProps) => ( +export const LogSnippet: FunctionComponent = ({ logSnippet, message, variant = AlertVariant.danger, ouiaId = "LogSnippet", ...props }: LogSnippetProps) => ( { typeof message === 'string' ? : message } diff --git a/packages/module/src/Maintenance/Maintenance.tsx b/packages/module/src/Maintenance/Maintenance.tsx index 9aef5472..a6e44304 100644 --- a/packages/module/src/Maintenance/Maintenance.tsx +++ b/packages/module/src/Maintenance/Maintenance.tsx @@ -1,31 +1,31 @@ -import React from 'react'; +import type { ReactNode, FunctionComponent } from 'react'; import { Button, EmptyState, EmptyStateBody, EmptyStateFooter, EmptyStateProps, EmptyStateStatus, EmptyStateVariant } from '@patternfly/react-core'; import { HourglassHalfIcon } from '@patternfly/react-icons'; /** extends EmptyStateProps */ export interface MaintenanceProps extends Omit { /** The title for the maintenance message */ - titleText?: React.ReactNode; + titleText?: ReactNode; /** Custom body text */ - bodyText?: React.ReactNode; + bodyText?: ReactNode; /** A default bodyText used if no bodyText is provided */ - defaultBodyText?: React.ReactNode; + defaultBodyText?: ReactNode; /** Start time in a specific time zone */ - startTime?: React.ReactNode; + startTime?: ReactNode; /** End time in a specific time zone */ - endTime?: React.ReactNode; + endTime?: ReactNode; /** Time zone specification */ - timeZone?: React.ReactNode; + timeZone?: ReactNode; /** Information link */ redirectLinkUrl?: string; /** Information link title */ - redirectLinkText?: React.ReactNode; + redirectLinkText?: ReactNode; /** Custom footer content */ - customFooter?: React.ReactNode; + customFooter?: ReactNode; /** Custom OUIA ID */ ouiaId?: string | number; } -const Maintenance: React.FunctionComponent = ({ +const Maintenance: FunctionComponent = ({ titleText = 'Maintenance in progress', defaultBodyText = 'We are currently undergoing scheduled maintenance. Thank you for understanding.', startTime, diff --git a/packages/module/src/MissingPage/MissingPage.test.tsx b/packages/module/src/MissingPage/MissingPage.test.tsx index ce1c4907..3ca41c0a 100644 --- a/packages/module/src/MissingPage/MissingPage.test.tsx +++ b/packages/module/src/MissingPage/MissingPage.test.tsx @@ -1,5 +1,4 @@ import MissingPage from './MissingPage'; -import React from 'react'; import { render } from '@testing-library/react'; describe('MissingPage component', () => { diff --git a/packages/module/src/MissingPage/MissingPage.tsx b/packages/module/src/MissingPage/MissingPage.tsx index 87560832..523cba8a 100644 --- a/packages/module/src/MissingPage/MissingPage.tsx +++ b/packages/module/src/MissingPage/MissingPage.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import type { ReactNode, FunctionComponent } from 'react'; import { Button, EmptyState, EmptyStateBody, EmptyStateFooter, EmptyStateProps, EmptyStateVariant } from '@patternfly/react-core'; import NotFoundIcon from '../NotFoundIcon'; @@ -7,16 +7,16 @@ export interface MissingPageProps extends Omit = ({ +export const MissingPage: FunctionComponent = ({ toHomePageUrl = window.location.origin, toHomePageText = 'Return to homepage', titleText = 'We lost that page', diff --git a/packages/module/src/MultiContentCard/MultiContentCard.test.tsx b/packages/module/src/MultiContentCard/MultiContentCard.test.tsx index 7f5e0cae..7648b8ee 100644 --- a/packages/module/src/MultiContentCard/MultiContentCard.test.tsx +++ b/packages/module/src/MultiContentCard/MultiContentCard.test.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import type { Ref } from 'react'; import { screen, render } from '@testing-library/react'; import { Button, Card, CardHeader, CardBody, Content, ContentVariants, Icon, List, ListItem, CardFooter, Dropdown, MenuToggle, DropdownList, DropdownItem, MenuToggleElement } from '@patternfly/react-core'; import { ArrowRightIcon, BellIcon, CogIcon, EllipsisVIcon, LockIcon } from '@patternfly/react-icons'; @@ -138,7 +138,7 @@ describe('MultiContentCard component', () => { isOpen onSelect={() => null} onOpenChange={() => null} - toggle={(toggleRef: React.Ref) => ( + toggle={(toggleRef: Ref) => ( { /** Cards to be displayed as a content */ - cards?: (React.ReactElement | MutliContentCardProps)[]; + cards?: (ReactElement | MutliContentCardProps)[]; /** Actions to be displayed in the expandable section */ - actions?: React.ReactElement; + actions?: ReactElement; /** Toggle text for the expandable section */ - toggleText?: React.ReactNode; + toggleText?: ReactNode; /** Toggle content for the expandable section */ - toggleContent?: React.ReactElement; + toggleContent?: ReactElement; /** When set to true, all content cards will be separated with dividers */ withDividers?: boolean; /** Indicates whether the card is expandable */ @@ -48,8 +49,8 @@ export interface MultiContentCardProps extends Omit !!card && !React.isValidElement(card); + card: ReactElement | MutliContentCardProps +): card is MutliContentCardProps => !!card && !isValidElement(card); const useStyles = createUseStyles({ cardTitle: { @@ -57,7 +58,7 @@ const useStyles = createUseStyles({ } }); -const MultiContentCard: React.FunctionComponent = ({ +const MultiContentCard: FunctionComponent = ({ cards = [], isToggleRightAligned = false, actions, @@ -69,16 +70,16 @@ const MultiContentCard: React.FunctionComponent = ({ ouiaId = 'MultiContentCard', ...props }: MultiContentCardProps) => { - const [ isExpanded, setIsExpanded ] = React.useState(defaultExpanded); + const [ isExpanded, setIsExpanded ] = useState(defaultExpanded); const classes = useStyles(); const onExpand = () => { setIsExpanded(!isExpanded); }; - const renderCards = (cards: (React.ReactElement | MutliContentCardProps)[], withDividers?: boolean) => ( + const renderCards = (cards: (ReactElement | MutliContentCardProps)[], withDividers?: boolean) => ( {cards.map((card, index) => ( - + {index > 0 && isCardWithProps(card) && card.dividerVariant === MultiContentCardDividerVariant.left && ( = ({ inset={{ default: 'inset3xl' }} /> )} - + ))} ); diff --git a/packages/module/src/NotFoundIcon/NotFoundIcon.tsx b/packages/module/src/NotFoundIcon/NotFoundIcon.tsx index a641542b..16e69652 100644 --- a/packages/module/src/NotFoundIcon/NotFoundIcon.tsx +++ b/packages/module/src/NotFoundIcon/NotFoundIcon.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import type { FunctionComponent } from 'react'; import { createUseStyles } from 'react-jss'; import { PathMissingIcon } from '@patternfly/react-icons'; @@ -7,7 +7,7 @@ const useStyles = createUseStyles({ }); -export const NotFoundIcon: React.FunctionComponent = (props) => ( +export const NotFoundIcon: FunctionComponent = (props) => ( = ({ +export const PageHeader: FunctionComponent = ({ title, subtitle, linkProps, diff --git a/packages/module/src/ResponsiveAction/ResponsiveAction.tsx b/packages/module/src/ResponsiveAction/ResponsiveAction.tsx index 1990aa36..1d7e1157 100644 --- a/packages/module/src/ResponsiveAction/ResponsiveAction.tsx +++ b/packages/module/src/ResponsiveAction/ResponsiveAction.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import type { ReactNode, FunctionComponent } from 'react'; import { ButtonProps } from '@patternfly/react-core'; /** extends ButtonProps */ @@ -10,10 +10,10 @@ export interface ResponsiveActionProps extends ButtonProps { /** Key for the action */ key?: string; /** Action label */ - children: React.ReactNode; + children: ReactNode; }; // This component is only used declaratively - rendering ishandled by ResponsiveActions -export const ResponsiveAction: React.FunctionComponent = (_props: ResponsiveActionProps) =>
; +export const ResponsiveAction: FunctionComponent = (_props: ResponsiveActionProps) =>
; export default ResponsiveAction; \ No newline at end of file diff --git a/packages/module/src/ResponsiveActions/ResponsiveActions.test.tsx b/packages/module/src/ResponsiveActions/ResponsiveActions.test.tsx index 2fc6bc6b..6fcaf2b0 100644 --- a/packages/module/src/ResponsiveActions/ResponsiveActions.test.tsx +++ b/packages/module/src/ResponsiveActions/ResponsiveActions.test.tsx @@ -1,4 +1,3 @@ -import React from 'react'; import { render } from '@testing-library/react'; import ResponsiveActions from './ResponsiveActions'; import ResponsiveAction from '../ResponsiveAction'; diff --git a/packages/module/src/ResponsiveActions/ResponsiveActions.tsx b/packages/module/src/ResponsiveActions/ResponsiveActions.tsx index e92b1efc..320b9b60 100644 --- a/packages/module/src/ResponsiveActions/ResponsiveActions.tsx +++ b/packages/module/src/ResponsiveActions/ResponsiveActions.tsx @@ -1,4 +1,5 @@ -import React, { useState } from 'react'; +import type { ReactNode, FunctionComponent } from 'react'; +import { Children, isValidElement, useState } from 'react'; import { Button, Dropdown, DropdownList, MenuToggle, OverflowMenu, OverflowMenuContent, OverflowMenuControl, OverflowMenuDropdownItem, OverflowMenuGroup, OverflowMenuItem, OverflowMenuProps } from '@patternfly/react-core'; import { EllipsisVIcon } from '@patternfly/react-icons'; import { ResponsiveActionProps } from '../ResponsiveAction'; @@ -10,19 +11,19 @@ export interface ResponsiveActionsProps extends Omit = ({ ouiaId = 'ResponsiveActions', breakpoint = 'lg', children, ...props }: ResponsiveActionsProps) => { +export const ResponsiveActions: FunctionComponent = ({ ouiaId = 'ResponsiveActions', breakpoint = 'lg', children, ...props }: ResponsiveActionsProps) => { const [ isOpen, setIsOpen ] = useState(false); // separate persistent, pinned and collapsed actions - const persistentActions: React.ReactNode[] = []; - const pinnedActions: React.ReactNode[] = []; - const dropdownItems: React.ReactNode[] = []; + const persistentActions: ReactNode[] = []; + const pinnedActions: ReactNode[] = []; + const dropdownItems: ReactNode[] = []; - React.Children.forEach(children, (child, index) => { - if (React.isValidElement(child)) { + Children.forEach(children, (child, index) => { + if (isValidElement(child)) { const { isPersistent, isPinned, key = index, children, onClick, ...actionProps } = child.props; if (isPersistent || isPinned) { diff --git a/packages/module/src/ServiceCard/ServiceCard.test.tsx b/packages/module/src/ServiceCard/ServiceCard.test.tsx index ec61e1c1..1cab3e88 100644 --- a/packages/module/src/ServiceCard/ServiceCard.test.tsx +++ b/packages/module/src/ServiceCard/ServiceCard.test.tsx @@ -1,4 +1,3 @@ -import React from 'react'; import { render } from '@testing-library/react'; import ServiceCard from './ServiceCard'; diff --git a/packages/module/src/ServiceCard/ServiceCard.tsx b/packages/module/src/ServiceCard/ServiceCard.tsx index 0151bdf2..7975691b 100644 --- a/packages/module/src/ServiceCard/ServiceCard.tsx +++ b/packages/module/src/ServiceCard/ServiceCard.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import type { ReactNode, ReactElement, FunctionComponent } from 'react'; import { Card, CardBody, CardFooter, CardHeader, CardProps, Content, ContentVariants, Flex, FlexItem } from '@patternfly/react-core'; import { HelperText } from '@patternfly/react-core/dist/dynamic/components/HelperText'; import { HelperTextItem } from '@patternfly/react-core/dist/dynamic/components/HelperText'; @@ -10,15 +10,15 @@ export interface ServiceCardProps extends CardProps { /** Service card title */ title: string; /** Service card subtitle */ - subtitle?: React.ReactNode; + subtitle?: ReactNode; /** Service card description */ - description: React.ReactNode; + description: ReactNode; /** Service card icon */ - icon: React.ReactNode; + icon: ReactNode; /** Optional Service card helper text*/ - helperText?: React.ReactNode; + helperText?: ReactNode; /** Optional footer */ - footer?: React.ReactElement | null; + footer?: ReactElement | null; /** Optional custom OUIA ID */ ouiaId?: string | number; /** Optional flag modifying the card header layout */ @@ -37,7 +37,7 @@ const useStyles = createUseStyles({ } }); -const ServiceCard: React.FunctionComponent = ({ +const ServiceCard: FunctionComponent = ({ title, subtitle, description, diff --git a/packages/module/src/Severity/Severity.test.tsx b/packages/module/src/Severity/Severity.test.tsx index 282c5dff..12d03161 100644 --- a/packages/module/src/Severity/Severity.test.tsx +++ b/packages/module/src/Severity/Severity.test.tsx @@ -1,4 +1,3 @@ -import React from 'react'; import { render } from '@testing-library/react'; import Severity, { SeverityType } from './Severity'; diff --git a/packages/module/src/Severity/Severity.tsx b/packages/module/src/Severity/Severity.tsx index 4c3665a8..c7d76818 100644 --- a/packages/module/src/Severity/Severity.tsx +++ b/packages/module/src/Severity/Severity.tsx @@ -1,4 +1,5 @@ -import React, { useMemo } from 'react'; +import type { HTMLAttributes, DetailedHTMLProps, ReactNode, FunctionComponent } from 'react'; +import { Fragment, useMemo } from 'react'; import { SeverityCriticalIcon, SeverityImportantIcon, @@ -37,11 +38,11 @@ export const SeverityType = { export type SeverityType = (typeof SeverityType)[keyof typeof SeverityType]; -export interface SeverityProps extends React.DetailedHTMLProps, HTMLElement> { +export interface SeverityProps extends DetailedHTMLProps, HTMLElement> { /** Determines a variant of displayed severity */ severity: SeverityType; /** Label displayed next to the severity */ - label: React.ReactNode; + label: ReactNode; /** Option to hide the label */ labelHidden?: boolean; /** Custom className */ @@ -50,7 +51,7 @@ export interface SeverityProps extends React.DetailedHTMLProps = ({ +export const Severity: FunctionComponent = ({ severity, label, labelHidden, @@ -64,7 +65,7 @@ export const Severity: React.FunctionComponent = ({ const severityVariant = useMemo(() => severityLevels(severity), [ severity ]); return ( - + ( {/* eslint-disable-next-line react/no-unknown-property */} @@ -76,7 +77,7 @@ export const Severity: React.FunctionComponent = ({ {!labelHidden && label} - + ) ); }; diff --git a/packages/module/src/Shortcut/Shortcut.test.tsx b/packages/module/src/Shortcut/Shortcut.test.tsx index 0b46be5b..fb059ffa 100644 --- a/packages/module/src/Shortcut/Shortcut.test.tsx +++ b/packages/module/src/Shortcut/Shortcut.test.tsx @@ -1,4 +1,3 @@ -import React from 'react'; import { render } from '@testing-library/react'; import Shortcut from './Shortcut'; diff --git a/packages/module/src/Shortcut/Shortcut.tsx b/packages/module/src/Shortcut/Shortcut.tsx index b4d77e66..da33b993 100644 --- a/packages/module/src/Shortcut/Shortcut.tsx +++ b/packages/module/src/Shortcut/Shortcut.tsx @@ -1,4 +1,4 @@ -import * as React from 'react'; +import type { ReactNode, FunctionComponent } from 'react'; import { MouseIcon } from '@patternfly/react-icons'; import { Label } from '@patternfly/react-core'; import { createUseStyles } from 'react-jss'; @@ -8,7 +8,7 @@ export interface ShortcutProps { /** Array of shortcut keys */ keys: string[]; /** Shortcut description */ - description?: React.ReactNode; + description?: ReactNode; /** Indicates whether symbols should be displayed for certain keys */ showSymbols?: boolean; /** Show hover in the shortcut */ @@ -45,7 +45,7 @@ const useStyles = createUseStyles({ } }) -const Shortcut: React.FunctionComponent = ({ +const Shortcut: FunctionComponent = ({ keys = [], description = null, showSymbols = true, diff --git a/packages/module/src/ShortcutGrid/ShortcutGrid.test.tsx b/packages/module/src/ShortcutGrid/ShortcutGrid.test.tsx index 6146aaa7..39c8dde3 100644 --- a/packages/module/src/ShortcutGrid/ShortcutGrid.test.tsx +++ b/packages/module/src/ShortcutGrid/ShortcutGrid.test.tsx @@ -1,4 +1,3 @@ -import React from 'react'; import { render } from '@testing-library/react'; import ShortcutGrid from './ShortcutGrid'; diff --git a/packages/module/src/ShortcutGrid/ShortcutGrid.tsx b/packages/module/src/ShortcutGrid/ShortcutGrid.tsx index 1688a6c4..8c17aae2 100644 --- a/packages/module/src/ShortcutGrid/ShortcutGrid.tsx +++ b/packages/module/src/ShortcutGrid/ShortcutGrid.tsx @@ -1,4 +1,5 @@ -import * as React from 'react'; +import type { FunctionComponent } from 'react'; +import { Fragment } from 'react'; import { createUseStyles } from 'react-jss'; import Shortcut, { ShortcutProps } from '../Shortcut/Shortcut'; import { Grid, GridItem, GridItemProps, GridProps } from '@patternfly/react-core'; @@ -20,21 +21,22 @@ const useStyles = createUseStyles({ } }) -const ShortcutGrid: React.FunctionComponent = ({ shortcuts, gridItemProps, ouiaId = 'ShortcutGrid', ...props }: ShortcutGridProps) => { +const ShortcutGrid: FunctionComponent = ({ shortcuts, gridItemProps, ouiaId = 'ShortcutGrid', ...props }: ShortcutGridProps) => { const classes = useStyles(); return ( - + ( {shortcuts.map((shortcut, index) => { const { description, ...props } = shortcut; - return( - + return ( + ( {description} - - )})} + ) + );})} ) + ); } export default ShortcutGrid; \ No newline at end of file diff --git a/packages/module/src/SkeletonTable/SkeletonTable.test.tsx b/packages/module/src/SkeletonTable/SkeletonTable.test.tsx index a895e311..4c7b8ba8 100644 --- a/packages/module/src/SkeletonTable/SkeletonTable.test.tsx +++ b/packages/module/src/SkeletonTable/SkeletonTable.test.tsx @@ -1,4 +1,3 @@ -import React from 'react'; import { render } from '@testing-library/react'; import SkeletonTable from './SkeletonTable'; diff --git a/packages/module/src/SkeletonTable/SkeletonTable.tsx b/packages/module/src/SkeletonTable/SkeletonTable.tsx index 3dadd888..01b7ff83 100644 --- a/packages/module/src/SkeletonTable/SkeletonTable.tsx +++ b/packages/module/src/SkeletonTable/SkeletonTable.tsx @@ -1,17 +1,13 @@ -import React, { ReactNode } from 'react'; -import { - Caption, - Table, - TableProps, - TableVariant, - RowSelectVariant, - ThProps -} from '@patternfly/react-table'; +import { FunctionComponent, ReactNode } from 'react'; +import { Caption, Table, TableProps, TableVariant, RowSelectVariant, ThProps } from '@patternfly/react-table'; import SkeletonTableBody, { SkeletonTableBodyProps } from '../SkeletonTableBody'; import SkeletonTableHead, { SkeletonTableHeadProps } from '../SkeletonTableHead'; /** extends TableProps */ -export interface SkeletonTableProps extends Omit, Omit, SkeletonTableHeadProps { +export interface SkeletonTableProps + extends Omit, + Omit, + SkeletonTableHeadProps { /** Indicates the table variant */ variant?: TableVariant; /** Flag indicating if the table should have borders */ @@ -19,7 +15,7 @@ export interface SkeletonTableProps extends Omit, Omit, Omit = ({ +const SkeletonTable: FunctionComponent = ({ variant, borders = true, rowsCount = 5, @@ -53,7 +49,7 @@ const SkeletonTable: React.FunctionComponent = ({ return ( {caption && } - = ({ columns={columns} isTreeTable={isTreeTable} /> - = ({ +const SkeletonTableBody: FunctionComponent = ({ rowsCount = 5, ouiaId = 'SkeletonTableBody', isSelectable, diff --git a/packages/module/src/SkeletonTableHead/SkeletonTableHead.test.tsx b/packages/module/src/SkeletonTableHead/SkeletonTableHead.test.tsx index 50b617ec..ae81e3ad 100644 --- a/packages/module/src/SkeletonTableHead/SkeletonTableHead.test.tsx +++ b/packages/module/src/SkeletonTableHead/SkeletonTableHead.test.tsx @@ -1,4 +1,3 @@ -import React from 'react'; import { render } from '@testing-library/react'; import SkeletonTableHead from './SkeletonTableHead'; import { Table } from '@patternfly/react-table'; diff --git a/packages/module/src/SkeletonTableHead/SkeletonTableHead.tsx b/packages/module/src/SkeletonTableHead/SkeletonTableHead.tsx index 7a184024..7cacc135 100644 --- a/packages/module/src/SkeletonTableHead/SkeletonTableHead.tsx +++ b/packages/module/src/SkeletonTableHead/SkeletonTableHead.tsx @@ -1,4 +1,5 @@ -import React, { ReactNode, useMemo } from 'react'; +import type { FunctionComponent } from 'react'; +import { ReactNode, useMemo } from 'react'; import { Th, ThProps, @@ -24,7 +25,7 @@ export interface SkeletonTableHeadProps { isTreeTable?: boolean; } -export const SkeletonTableHead: React.FunctionComponent = ({ +export const SkeletonTableHead: FunctionComponent = ({ ouiaId = 'SkeletonTableHeader', isSelectable, isExpandable, diff --git a/packages/module/src/StaleDataWarning/StaleDataWarning.tsx b/packages/module/src/StaleDataWarning/StaleDataWarning.tsx index fa9dc673..525c8d76 100644 --- a/packages/module/src/StaleDataWarning/StaleDataWarning.tsx +++ b/packages/module/src/StaleDataWarning/StaleDataWarning.tsx @@ -1,10 +1,10 @@ -import React from 'react'; +import type { ReactElement, JSXElementConstructor, FunctionComponent } from 'react'; import { ExclamationCircleIcon, ExclamationTriangleIcon } from '@patternfly/react-icons'; import { Button, Icon, Tooltip, TooltipProps } from '@patternfly/react-core'; import clsx from 'clsx'; import { createUseStyles } from 'react-jss'; -type Render = (config: { msg: string }) => React.ReactElement | null; +type Render = (config: { msg: string }) => ReactElement | null; type CullingDate = string | number | Date; interface StaleDataInfo { @@ -48,7 +48,7 @@ export interface StaleDataWarningProps extends Omit { /** Current date */ currDate: CullingDate; /** Optional prop to add custom children */ - children?: React.ReactElement> | undefined; + children?: ReactElement> | undefined; /** Option to add custom message ReactElement */ render?: Render; /** Optional custom warning message */ @@ -57,7 +57,7 @@ export interface StaleDataWarningProps extends Omit { "aria-label"?: string; } -const StaleDataWarning: React.FunctionComponent = ({ +const StaleDataWarning: FunctionComponent = ({ culled = new Date(0), className, staleWarning = new Date(0), diff --git a/packages/module/src/Status/Status.test.tsx b/packages/module/src/Status/Status.test.tsx index c3810bce..c3373239 100644 --- a/packages/module/src/Status/Status.test.tsx +++ b/packages/module/src/Status/Status.test.tsx @@ -1,4 +1,3 @@ -import React from 'react'; import { render } from '@testing-library/react'; import Status, { IconStatus, StatusVariant } from './Status'; import { BanIcon, CheckCircleIcon, ExclamationTriangleIcon } from '@patternfly/react-icons'; diff --git a/packages/module/src/Status/Status.tsx b/packages/module/src/Status/Status.tsx index 080696c0..ef429ad5 100644 --- a/packages/module/src/Status/Status.tsx +++ b/packages/module/src/Status/Status.tsx @@ -1,5 +1,16 @@ -import * as React from 'react'; -import { Button, ButtonVariant, Flex, FlexItem, Icon, Popover, PopoverPosition, PopoverProps, Content, ContentVariants, } from '@patternfly/react-core'; +import { PropsWithChildren, ReactNode, ReactElement, MouseEvent, FC } from 'react'; +import { + Button, + ButtonVariant, + Flex, + FlexItem, + Icon, + Popover, + PopoverPosition, + PopoverProps, + Content, + ContentVariants +} from '@patternfly/react-core'; import { createUseStyles } from 'react-jss'; export const StatusVariant = { @@ -8,7 +19,7 @@ export const StatusVariant = { plain: 'plain' } as const; -export type StatusVariant = typeof StatusVariant[keyof typeof StatusVariant]; +export type StatusVariant = (typeof StatusVariant)[keyof typeof StatusVariant]; export const IconStatus = { custom: 'custom', @@ -18,19 +29,19 @@ export const IconStatus = { danger: 'danger' } as const; -export type IconStatus = typeof IconStatus[keyof typeof IconStatus]; +export type IconStatus = (typeof IconStatus)[keyof typeof IconStatus]; -export interface StatusProps extends React.PropsWithChildren { +export interface StatusProps extends PropsWithChildren { /** Status label text */ label?: string; /** Description to be displayed under the label */ - description?: React.ReactNode; + description?: ReactNode; /** If true, only displays icon */ iconOnly?: boolean; /** Variant of the status component to be displayed */ variant?: StatusVariant; /** Status icon */ - icon?: React.ReactElement; + icon?: ReactElement; /** Status to control icon color */ status: IconStatus; /** Icon title for accessibility */ @@ -40,43 +51,73 @@ export interface StatusProps extends React.PropsWithChildren { /** Props for the optional popover */ popoverProps?: PopoverProps; /** Optional link variant onClick callback */ - onClick?: (event: React.MouseEvent) => void; + onClick?: (event: MouseEvent) => void; } const useStyles = createUseStyles({ icon: { - margin: "0", - alignSelf: "flex-start", + margin: '0', + alignSelf: 'flex-start' }, statusLabel: { - lineHeight: 'var(--pf-t--global--font--line-height--body)', + lineHeight: 'var(--pf-t--global--font--line-height--body)' }, statusDescription: { - color: 'var(--pf-t--color--gray--50)', + color: 'var(--pf-t--color--gray--50)' } -}) +}); -export const Status: React.FC = ({ variant = StatusVariant.plain, label, children, iconOnly, icon, status, iconTitle, ouiaId = 'Status', popoverProps, onClick, description, ...props }: StatusProps) => { +export const Status: FC = ({ + variant = StatusVariant.plain, + label, + children, + iconOnly, + icon, + status, + iconTitle, + ouiaId = 'Status', + popoverProps, + onClick, + description, + ...props +}: StatusProps) => { const classes = useStyles(); if (iconOnly && !iconTitle) { // eslint-disable-next-line no-console - console.warn('iconOnly is true but no iconTitle is provided. Please provide a descriptive iconTitle for accessibility.'); + console.warn( + 'iconOnly is true but no iconTitle is provided. Please provide a descriptive iconTitle for accessibility.' + ); } const statusBody = ( {icon && ( - + {icon} )} {!iconOnly && ( - {label} - {description && {description}} + + {label} + + {description && ( + + {description} + + )} )} @@ -100,7 +141,12 @@ export const Status: React.FC = ({ variant = StatusVariant.plain, l data-ouia-component-id={`${ouiaId}-popover`} {...popoverProps} > - diff --git a/packages/module/src/TagCount/TagCount.test.tsx b/packages/module/src/TagCount/TagCount.test.tsx index 9e3e0411..89b13035 100644 --- a/packages/module/src/TagCount/TagCount.test.tsx +++ b/packages/module/src/TagCount/TagCount.test.tsx @@ -1,4 +1,3 @@ -import React from 'react'; import { render } from '@testing-library/react'; import TagCount from './TagCount'; diff --git a/packages/module/src/TagCount/TagCount.tsx b/packages/module/src/TagCount/TagCount.tsx index 721ddd4c..2fed682e 100644 --- a/packages/module/src/TagCount/TagCount.tsx +++ b/packages/module/src/TagCount/TagCount.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import type { FunctionComponent } from 'react'; import clsx from 'clsx'; import { Button, ButtonProps, Icon } from '@patternfly/react-core'; import { TagIcon } from '@patternfly/react-icons'; @@ -33,7 +33,7 @@ export interface TagCountProps extends ButtonProps { ouiaId?: string | number; } -const TagCount: React.FunctionComponent = ({ +const TagCount: FunctionComponent = ({ count, className, iconSize= 'md', diff --git a/packages/module/src/UnauthorizedAccess/UnauthorizedAccess.test.tsx b/packages/module/src/UnauthorizedAccess/UnauthorizedAccess.test.tsx index e447a29d..fb92ed99 100644 --- a/packages/module/src/UnauthorizedAccess/UnauthorizedAccess.test.tsx +++ b/packages/module/src/UnauthorizedAccess/UnauthorizedAccess.test.tsx @@ -1,4 +1,3 @@ -import React from 'react'; import { render } from '@testing-library/react'; import { QuestionCircleIcon } from '@patternfly/react-icons'; import UnauthorizedAccess from './UnauthorizedAccess'; diff --git a/packages/module/src/UnauthorizedAccess/UnauthorizedAccess.tsx b/packages/module/src/UnauthorizedAccess/UnauthorizedAccess.tsx index 500bac06..713b91da 100644 --- a/packages/module/src/UnauthorizedAccess/UnauthorizedAccess.tsx +++ b/packages/module/src/UnauthorizedAccess/UnauthorizedAccess.tsx @@ -1,36 +1,36 @@ -import React from 'react'; +import type { ReactNode, ComponentType, FunctionComponent } from 'react'; import { Button, EmptyState, EmptyStateBody, EmptyStateProps, EmptyStateVariant, EmptyStateFooter, EmptyStateActions, ButtonVariant, } from '@patternfly/react-core'; import { LockIcon } from '@patternfly/react-icons'; /** extends EmptyStateProps */ export interface UnauthorizedAccessProps extends Omit { /** Service name displayed in the title */ - serviceName?: React.ReactNode; + serviceName?: ReactNode; /** Icon displayed above the title */ - icon?: React.ComponentType; + icon?: ComponentType; /** Custom body text */ - bodyText?: React.ReactNode; + bodyText?: ReactNode; /** Shows link to the previous page */ showReturnButton?: boolean; /** Custom previous page button text */ - prevPageButtonText?: React.ReactNode; + prevPageButtonText?: ReactNode; /** Custom className */ className?: string; /** Custom title text */ - titleText?: React.ReactNode; + titleText?: ReactNode; /** Custom primary action - there should only be one defined */ - primaryAction?: React.ReactNode; + primaryAction?: ReactNode; /** Custom secondary actions */ - secondaryActions?: React.ReactNode; + secondaryActions?: ReactNode; /** Custom landing page button text */ - toLandingPageText?: React.ReactNode; + toLandingPageText?: ReactNode; /** Custom landing page button URL */ toLandingPageUrl?: string; /** Custom OUIA ID */ ouiaId?: string | number; } -const UnauthorizedAccess: React.FunctionComponent = ({ +const UnauthorizedAccess: FunctionComponent = ({ prevPageButtonText = 'Return to previous page', toLandingPageText = 'Go to landing page', toLandingPageUrl = ".", diff --git a/packages/module/src/UnavailableContent/UnavailableContent.test.tsx b/packages/module/src/UnavailableContent/UnavailableContent.test.tsx index 1d28ffb8..45a73830 100644 --- a/packages/module/src/UnavailableContent/UnavailableContent.test.tsx +++ b/packages/module/src/UnavailableContent/UnavailableContent.test.tsx @@ -1,5 +1,4 @@ -import React from 'react'; -import { render } from '@testing-library/react'; +import { render } from '@testing-library/react'; import UnavailableContent from './UnavailableContent'; describe('Unavailable component', () => { diff --git a/packages/module/src/UnavailableContent/UnavailableContent.tsx b/packages/module/src/UnavailableContent/UnavailableContent.tsx index 32003a1d..b354c451 100644 --- a/packages/module/src/UnavailableContent/UnavailableContent.tsx +++ b/packages/module/src/UnavailableContent/UnavailableContent.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import type { ReactNode, FunctionComponent } from 'react'; import { Button, EmptyState, EmptyStateBody, EmptyStateFooter, EmptyStateProps, EmptyStateStatus, EmptyStateVariant } from '@patternfly/react-core'; import { ExclamationCircleIcon } from '@patternfly/react-icons'; @@ -7,16 +7,16 @@ export interface UnavailableContentProps extends Omit = ({ +const UnavailableContent: FunctionComponent = ({ statusPageUrl = '', statusPageLinkText = 'Status Page', titleText = 'This page is temporarily unavailable', diff --git a/packages/module/src/WarningModal/WarningModal.test.tsx b/packages/module/src/WarningModal/WarningModal.test.tsx index 216921aa..6857c6aa 100644 --- a/packages/module/src/WarningModal/WarningModal.test.tsx +++ b/packages/module/src/WarningModal/WarningModal.test.tsx @@ -1,4 +1,3 @@ -import React from 'react'; import { render } from '@testing-library/react'; import WarningModal from './WarningModal'; diff --git a/packages/module/src/WarningModal/WarningModal.tsx b/packages/module/src/WarningModal/WarningModal.tsx index a0c657d3..a7af1deb 100644 --- a/packages/module/src/WarningModal/WarningModal.tsx +++ b/packages/module/src/WarningModal/WarningModal.tsx @@ -1,5 +1,15 @@ -import React, { ReactNode, useState } from 'react'; -import { Button, ButtonVariant, Checkbox, Flex, FlexItem, Stack, StackItem, TextInput, TextInputProps } from '@patternfly/react-core'; +import { FunctionComponent, ReactNode, useMemo, useState } from 'react'; +import { + Button, + ButtonVariant, + Checkbox, + Flex, + FlexItem, + Stack, + StackItem, + TextInput, + TextInputProps +} from '@patternfly/react-core'; import { ModalProps, Modal, ModalVariant } from '@patternfly/react-core/deprecated'; /** extends ModalProps */ @@ -7,9 +17,9 @@ export interface WarningModalProps extends Omit { /** Callback for the confirm action button. */ onConfirm?: () => void; /** Custom label for the confirm action button */ - confirmButtonLabel?: React.ReactNode; + confirmButtonLabel?: ReactNode; /** Custom label for the cancel action button */ - cancelButtonLabel?: React.ReactNode; + cancelButtonLabel?: ReactNode; /** Whether modal requires a checkbox before confirming */ withCheckbox?: boolean; /** Custom checkbox label */ @@ -26,7 +36,7 @@ export interface WarningModalProps extends Omit { confirmationInputLabel?: ReactNode; } -const WarningModal: React.FunctionComponent = ({ +const WarningModal: FunctionComponent = ({ isOpen, onConfirm, onClose, @@ -36,22 +46,26 @@ const WarningModal: React.FunctionComponent = ({ variant = ModalVariant.small, titleIconVariant = 'warning', withCheckbox = false, - checkboxLabel='I understand that this action cannot be undone', + checkboxLabel = 'I understand that this action cannot be undone', confirmButtonVariant = ButtonVariant.primary, ouiaId = 'WarningModal', confirmationInputProps, confirmationText, - confirmationInputLabel = <>Type {confirmationText} to confirm the action:, + confirmationInputLabel = ( + <> + Type {confirmationText} to confirm the action: + + ), ...props }: WarningModalProps) => { const [ checked, setChecked ] = useState(false); - const [ inputValue, setInputValue ] = React.useState(''); + const [ inputValue, setInputValue ] = useState(''); - const deleteNameSanitized = React.useMemo(() => confirmationText?.trim().replace(/\s+/g, ' '), [ confirmationText ]); + const deleteNameSanitized = useMemo(() => confirmationText?.trim().replace(/\s+/g, ' '), [ confirmationText ]); const textConfirmed = confirmationInputProps ? inputValue.trim() === deleteNameSanitized : true; - const isConfirmButtonDisabled = React.useMemo(() => { + const isConfirmButtonDisabled = useMemo(() => { if (withCheckbox) { return !checked || (confirmationInputProps && !textConfirmed); } @@ -78,14 +92,9 @@ const WarningModal: React.FunctionComponent = ({ > {confirmButtonLabel} , - , + ]} ouiaId={ouiaId} {...props} @@ -95,9 +104,7 @@ const WarningModal: React.FunctionComponent = ({ {confirmationText ? ( - - {confirmationInputLabel} - + {confirmationInputLabel} = ({ {...{ type: 'text', isRequired: true, ...confirmationInputProps }} /> - ) : null} + ) : null} {withCheckbox ? ( @@ -121,9 +128,7 @@ const WarningModal: React.FunctionComponent = ({ - ) - + ); }; - export default WarningModal; diff --git a/packages/module/tsconfig.json b/packages/module/tsconfig.json index 078e840c..a60e2ec9 100644 --- a/packages/module/tsconfig.json +++ b/packages/module/tsconfig.json @@ -9,7 +9,7 @@ // "lib": [], /* Specify library files to be included in the compilation. */ // "allowJs": true, /* Allow javascript files to be compiled. */ // "checkJs": true, /* Report errors in .js files. */ - "jsx": "react" /* Specify JSX code generation: 'preserve', 'react-native', 'react', 'react-jsx' or 'react-jsxdev'. */, + "jsx": "react-jsx" /* Specify JSX code generation: 'preserve', 'react-native', 'react', 'react-jsx' or 'react-jsxdev'. */, "declaration": true /* Generates corresponding '.d.ts' file. */, // "declarationMap": true, /* Generates a sourcemap for each corresponding '.d.ts' file. */ // "sourceMap": true, /* Generates corresponding '.map' file. */ @@ -26,7 +26,7 @@ /* Strict Type-Checking Options */ "strict": true /* Enable all strict type-checking options. */, - "noImplicitAny": false, /* Raise error on expressions and declarations with an implied 'any' type. */ + "noImplicitAny": false /* Raise error on expressions and declarations with an implied 'any' type. */, // "strictNullChecks": true, /* Enable strict null checks. */ // "strictFunctionTypes": true, /* Enable strict checking of function types. */ // "strictBindCallApply": true, /* Enable strict 'bind', 'call', and 'apply' methods on functions. */ @@ -49,7 +49,7 @@ // "paths": {}, /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */ // "rootDirs": [], /* List of root folders whose combined content represents the structure of the project at runtime. */ // "typeRoots": [], /* List of folders to include type definitions from. */ - "types": ["@testing-library/jest-dom"], /* Type declaration files to be included in compilation. */ + "types": ["@testing-library/jest-dom", "react"] /* Type declaration files to be included in compilation. */, // "allowSyntheticDefaultImports": true, /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */ "esModuleInterop": true /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */, // "preserveSymlinks": true, /* Do not resolve the real path of symlinks. */ @@ -69,5 +69,5 @@ "skipLibCheck": true /* Skip type checking of declaration files. */, "forceConsistentCasingInFileNames": true /* Disallow inconsistently-cased references to the same file. */ }, - "include": ["./src/*", "./src/**/*", "./cypress/**/*"], + "include": ["./src/*", "./src/**/*", "./cypress/**/*"] } diff --git a/tsconfig.json b/tsconfig.json index d78e8f8e..eb144a9b 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -9,7 +9,7 @@ // "lib": [], /* Specify library files to be included in the compilation. */ // "allowJs": true, /* Allow javascript files to be compiled. */ // "checkJs": true, /* Report errors in .js files. */ - "jsx": "react" /* Specify JSX code generation: 'preserve', 'react-native', 'react', 'react-jsx' or 'react-jsxdev'. */, + "jsx": "react-jsx" /* Specify JSX code generation: 'preserve', 'react-native', 'react', 'react-jsx' or 'react-jsxdev'. */, "declaration": true /* Generates corresponding '.d.ts' file. */, // "declarationMap": true, /* Generates a sourcemap for each corresponding '.d.ts' file. */ // "sourceMap": true, /* Generates corresponding '.map' file. */ @@ -26,7 +26,7 @@ /* Strict Type-Checking Options */ "strict": true /* Enable all strict type-checking options. */, - "noImplicitAny": false, /* Raise error on expressions and declarations with an implied 'any' type. */ + "noImplicitAny": false /* Raise error on expressions and declarations with an implied 'any' type. */, // "strictNullChecks": true, /* Enable strict null checks. */ // "strictFunctionTypes": true, /* Enable strict checking of function types. */ // "strictBindCallApply": true, /* Enable strict 'bind', 'call', and 'apply' methods on functions. */ @@ -69,5 +69,5 @@ "skipLibCheck": true /* Skip type checking of declaration files. */, "forceConsistentCasingInFileNames": true /* Disallow inconsistently-cased references to the same file. */ }, - "include": ["./cypress/**/*"], + "include": ["./cypress/**/*"] } From 38405154f272ebbda6fcf877f7ac839d8fe29562 Mon Sep 17 00:00:00 2001 From: Rebecca Alpert Date: Wed, 7 May 2025 10:34:45 -0400 Subject: [PATCH 2/2] Add Katie's changes from other PR --- packages/module/src/Ansible/Ansible.tsx | 4 +-- .../ColumnManagementModal.tsx | 26 +++++++++---------- .../src/ContentHeader/ContentHeader.tsx | 14 +++++----- .../src/ErrorBoundary/ErrorBoundary.tsx | 12 ++++----- packages/module/src/ErrorState/ErrorState.tsx | 10 +++---- packages/module/src/LogSnippet/LogSnippet.tsx | 6 ++--- .../module/src/Maintenance/Maintenance.tsx | 18 ++++++------- .../module/src/MissingPage/MissingPage.tsx | 8 +++--- .../src/MultiContentCard/MultiContentCard.tsx | 12 ++++----- packages/module/src/PageHeader/PageHeader.tsx | 18 ++++++------- .../src/ResponsiveAction/ResponsiveAction.tsx | 4 +-- .../ResponsiveActions/ResponsiveActions.tsx | 2 +- .../module/src/ServiceCard/ServiceCard.tsx | 12 ++++----- packages/module/src/Severity/Severity.tsx | 6 ++--- packages/module/src/Shortcut/Shortcut.tsx | 4 +-- .../src/SkeletonTable/SkeletonTable.tsx | 2 +- .../src/StaleDataWarning/StaleDataWarning.tsx | 6 ++--- packages/module/src/Status/Status.tsx | 10 +++---- .../UnauthorizedAccess/UnauthorizedAccess.tsx | 18 ++++++------- .../UnavailableContent/UnavailableContent.tsx | 8 +++--- .../module/src/WarningModal/WarningModal.tsx | 10 +++---- 21 files changed, 105 insertions(+), 105 deletions(-) diff --git a/packages/module/src/Ansible/Ansible.tsx b/packages/module/src/Ansible/Ansible.tsx index aa2fc1e3..34ea5da2 100644 --- a/packages/module/src/Ansible/Ansible.tsx +++ b/packages/module/src/Ansible/Ansible.tsx @@ -1,9 +1,9 @@ -import type { HTMLAttributes, DetailedHTMLProps, FunctionComponent, CSSProperties } from 'react'; +import type { FunctionComponent, CSSProperties } from 'react'; import { Fragment } from 'react'; import clsx from 'clsx'; import { createUseStyles } from 'react-jss'; -export interface AnsibleProps extends DetailedHTMLProps, HTMLElement> { +export interface AnsibleProps extends React.DetailedHTMLProps, HTMLElement> { /** Supported/unsupported variant flag */ isSupported?: boolean; /** Red Hat Ansible Automation Platform technology icon */ diff --git a/packages/module/src/ColumnManagementModal/ColumnManagementModal.tsx b/packages/module/src/ColumnManagementModal/ColumnManagementModal.tsx index e86c7c00..398d74ff 100644 --- a/packages/module/src/ColumnManagementModal/ColumnManagementModal.tsx +++ b/packages/module/src/ColumnManagementModal/ColumnManagementModal.tsx @@ -1,4 +1,4 @@ -import type { ReactNode, MouseEvent, FunctionComponent } from 'react'; +import type { FunctionComponent } from 'react'; import { useState } from 'react'; import { Button, @@ -18,33 +18,33 @@ import { ModalProps, Modal, ModalVariant } from '@patternfly/react-core/deprecat export interface ColumnManagementModalColumn { /** Internal identifier of a column by which table displayed columns are filtered. */ - key: string, + key: string; /** The actual display name of the column possibly with a tooltip or icon. */ - title: ReactNode, + title: React.ReactNode; /** If user changes checkboxes, the component will send back column array with this property altered. */ - isShown?: boolean, + isShown?: boolean; /** Set to false if the column should be hidden initially */ - isShownByDefault: boolean, + isShownByDefault: boolean; /** The checkbox will be disabled, this is applicable to columns which should not be toggleable by user */ - isUntoggleable?: boolean + isUntoggleable?: boolean; } /** extends ModalProps */ export interface ColumnManagementModalProps extends Omit { /** Flag to show the modal */ - isOpen?: boolean, + isOpen?: boolean; /** Invoked when modal visibility is changed */ - onClose?: (event: KeyboardEvent | MouseEvent) => void, + onClose?: (event: KeyboardEvent | React.MouseEvent) => void; /** Current column state */ - appliedColumns: ColumnManagementModalColumn[], + appliedColumns: ColumnManagementModalColumn[]; /** Invoked with new column state after save button is clicked */ - applyColumns: (newColumns: ColumnManagementModalColumn[]) => void, + applyColumns: (newColumns: ColumnManagementModalColumn[]) => void; /* Modal description text */ - description?: string, + description?: string; /* Modal title text */ - title?: string, + title?: string; /** Custom OUIA ID */ - ouiaId?: string | number, + ouiaId?: string | number; } const ColumnManagementModal: FunctionComponent = ( diff --git a/packages/module/src/ContentHeader/ContentHeader.tsx b/packages/module/src/ContentHeader/ContentHeader.tsx index 0d565db6..2f88e59c 100644 --- a/packages/module/src/ContentHeader/ContentHeader.tsx +++ b/packages/module/src/ContentHeader/ContentHeader.tsx @@ -1,4 +1,4 @@ -import type { ReactNode, PropsWithChildren, FunctionComponent } from 'react'; +import type { PropsWithChildren, FunctionComponent } from 'react'; import { Flex, FlexItem, @@ -24,19 +24,19 @@ export interface PageHeaderLinkProps extends ButtonProps { export interface ContentHeaderProps { /** Title for content header */ - title: ReactNode; + title: React.ReactNode; /** Optional subtitle for content header */ - subtitle?: ReactNode; + subtitle?: React.ReactNode; /** Optional link below subtitle */ linkProps?: PageHeaderLinkProps; /** Optional icon for content header (appears to the left of the content header's title with a divider) */ - icon?: ReactNode; + icon?: React.ReactNode; /** Optional label for content header (appears to the right of the content header's title) */ - label?: ReactNode; + label?: React.ReactNode; /** Breadcrumbs component */ - breadcrumbs?: ReactNode; + breadcrumbs?: React.ReactNode; /** Menu that appears to the far right of the title */ - actionMenu?: ReactNode; + actionMenu?: React.ReactNode; /** Custom OUIA ID */ ouiaId?: string | number; } diff --git a/packages/module/src/ErrorBoundary/ErrorBoundary.tsx b/packages/module/src/ErrorBoundary/ErrorBoundary.tsx index df923422..7978df06 100644 --- a/packages/module/src/ErrorBoundary/ErrorBoundary.tsx +++ b/packages/module/src/ErrorBoundary/ErrorBoundary.tsx @@ -1,4 +1,4 @@ -import type { ReactNode, FunctionComponent } from 'react'; +import type { FunctionComponent } from 'react'; import { Component } from 'react'; import { ExpandableSection, Title } from '@patternfly/react-core'; import { createUseStyles } from 'react-jss'; @@ -15,19 +15,19 @@ const useStyles = createUseStyles({ export interface ErrorBoundaryProps { /** The title text to display on the error page */ - headerTitle?: ReactNode; + headerTitle?: React.ReactNode; /** Indicates if the error is silent */ silent?: boolean; /** The title text to display with the error */ - errorTitle?: ReactNode; + errorTitle?: React.ReactNode; /** The description text to display with the error */ - errorDescription?: ReactNode; + errorDescription?: React.ReactNode; /** The default description text to display with the error if no errorDescription is provided */ - defaultErrorDescription?: ReactNode; + defaultErrorDescription?: React.ReactNode; /** The text for the toggle link that users can select to view error details */ errorToggleText?: string; /** The component that the error boundary component is wrapped around, which should be returned if there is no error */ - children?: ReactNode; + children?: React.ReactNode; /** Custom OUIA ID */ ouiaId?: string | number; /** The heading level to use on the header title, default is h1 */ diff --git a/packages/module/src/ErrorState/ErrorState.tsx b/packages/module/src/ErrorState/ErrorState.tsx index 891de951..1b2857b7 100644 --- a/packages/module/src/ErrorState/ErrorState.tsx +++ b/packages/module/src/ErrorState/ErrorState.tsx @@ -10,7 +10,7 @@ import { StackItem, } from '@patternfly/react-core'; import { createUseStyles } from 'react-jss' -import type { ReactNode, FunctionComponent } from 'react'; +import type { FunctionComponent } from 'react'; const useStyles = createUseStyles({ errorDescription: { @@ -21,13 +21,13 @@ const useStyles = createUseStyles({ /** extends EmptyStateProps */ export interface ErrorStateProps extends Omit { /** Title of the error. */ - titleText?: ReactNode; + titleText?: React.ReactNode; /** A description of the error, if no body text is provided then it will be set to the defaultBodyText. */ - bodyText?: ReactNode; + bodyText?: React.ReactNode; /** A default description of the error used if no errorDescription is provided. */ - defaultBodyText?: ReactNode; + defaultBodyText?: React.ReactNode; /** Custom footer content */ - customFooter?: ReactNode; + customFooter?: React.ReactNode; /** ErrorState OUIA ID */ ouiaId?: string | number; /** Status of the error message. */ diff --git a/packages/module/src/LogSnippet/LogSnippet.tsx b/packages/module/src/LogSnippet/LogSnippet.tsx index 85bbba06..b138621d 100644 --- a/packages/module/src/LogSnippet/LogSnippet.tsx +++ b/packages/module/src/LogSnippet/LogSnippet.tsx @@ -1,12 +1,12 @@ -import type { ReactNode, FunctionComponent } from 'react'; +import type { FunctionComponent } from 'react'; import { Alert, AlertVariant, CodeBlock, CodeBlockCode, Flex, FlexItem, FlexProps } from '@patternfly/react-core'; /** extends FlexProps */ export interface LogSnippetProps extends FlexProps { /** Log snippet or code to be displayed */ - logSnippet?: ReactNode; + logSnippet?: React.ReactNode; /** Message to appear above the log snippet */ - message: string | ReactNode; + message: string | React.ReactNode; /** Log snippet alert variant */ variant?: AlertVariant; /** Custom OUIA ID */ diff --git a/packages/module/src/Maintenance/Maintenance.tsx b/packages/module/src/Maintenance/Maintenance.tsx index a6e44304..bbd16ae7 100644 --- a/packages/module/src/Maintenance/Maintenance.tsx +++ b/packages/module/src/Maintenance/Maintenance.tsx @@ -1,27 +1,27 @@ -import type { ReactNode, FunctionComponent } from 'react'; +import type { FunctionComponent } from 'react'; import { Button, EmptyState, EmptyStateBody, EmptyStateFooter, EmptyStateProps, EmptyStateStatus, EmptyStateVariant } from '@patternfly/react-core'; import { HourglassHalfIcon } from '@patternfly/react-icons'; /** extends EmptyStateProps */ export interface MaintenanceProps extends Omit { /** The title for the maintenance message */ - titleText?: ReactNode; + titleText?: React.ReactNode; /** Custom body text */ - bodyText?: ReactNode; + bodyText?: React.ReactNode; /** A default bodyText used if no bodyText is provided */ - defaultBodyText?: ReactNode; + defaultBodyText?: React.ReactNode; /** Start time in a specific time zone */ - startTime?: ReactNode; + startTime?: React.ReactNode; /** End time in a specific time zone */ - endTime?: ReactNode; + endTime?: React.ReactNode; /** Time zone specification */ - timeZone?: ReactNode; + timeZone?: React.ReactNode; /** Information link */ redirectLinkUrl?: string; /** Information link title */ - redirectLinkText?: ReactNode; + redirectLinkText?: React.ReactNode; /** Custom footer content */ - customFooter?: ReactNode; + customFooter?: React.ReactNode; /** Custom OUIA ID */ ouiaId?: string | number; } diff --git a/packages/module/src/MissingPage/MissingPage.tsx b/packages/module/src/MissingPage/MissingPage.tsx index 523cba8a..c8f75949 100644 --- a/packages/module/src/MissingPage/MissingPage.tsx +++ b/packages/module/src/MissingPage/MissingPage.tsx @@ -1,4 +1,4 @@ -import type { ReactNode, FunctionComponent } from 'react'; +import type { FunctionComponent } from 'react'; import { Button, EmptyState, EmptyStateBody, EmptyStateFooter, EmptyStateProps, EmptyStateVariant } from '@patternfly/react-core'; import NotFoundIcon from '../NotFoundIcon'; @@ -7,11 +7,11 @@ export interface MissingPageProps extends Omit { /** Cards to be displayed as a content */ - cards?: (ReactElement | MutliContentCardProps)[]; + cards?: (React.ReactElement | MutliContentCardProps)[]; /** Actions to be displayed in the expandable section */ - actions?: ReactElement; + actions?: React.ReactElement; /** Toggle text for the expandable section */ - toggleText?: ReactNode; + toggleText?: React.ReactNode; /** Toggle content for the expandable section */ - toggleContent?: ReactElement; + toggleContent?: React.ReactElement; /** When set to true, all content cards will be separated with dividers */ withDividers?: boolean; /** Indicates whether the card is expandable */ diff --git a/packages/module/src/PageHeader/PageHeader.tsx b/packages/module/src/PageHeader/PageHeader.tsx index 85b6848b..a29e6c42 100644 --- a/packages/module/src/PageHeader/PageHeader.tsx +++ b/packages/module/src/PageHeader/PageHeader.tsx @@ -1,4 +1,4 @@ -import type { PropsWithChildren, ReactNode, FunctionComponent } from 'react'; +import type { FunctionComponent } from 'react'; import { Button, ButtonProps, @@ -23,25 +23,25 @@ export interface PageHeaderLinkProps extends ButtonProps { isExternal?: boolean; } -export interface PageHeaderProps extends PropsWithChildren { +export interface PageHeaderProps extends React.PropsWithChildren { /** Title for page header */ - title?: ReactNode; + title?: React.ReactNode; /** Subtitle for page header */ - subtitle?: ReactNode; + subtitle?: React.ReactNode; /** Optional link below subtitle */ linkProps?: PageHeaderLinkProps; /** Optional icon for page header (appears to the left of the page header's title with a divider) */ - icon?: ReactNode; + icon?: React.ReactNode; /** Optional label for page header (appears to the right of the page header's title) */ - label?: ReactNode; + label?: React.ReactNode; /** Breadcrumbs component */ - breadcrumbs?: ReactNode; + breadcrumbs?: React.ReactNode; /** Menu that appears to the far right of the title */ - actionMenu?: ReactNode; + actionMenu?: React.ReactNode; /** Custom OUIA ID */ ouiaId?: string | number; /** Child nodes */ - children?: ReactNode; + children?: React.ReactNode; /** Classname for the h1 element */ headingClassname?: string; } diff --git a/packages/module/src/ResponsiveAction/ResponsiveAction.tsx b/packages/module/src/ResponsiveAction/ResponsiveAction.tsx index 1d7e1157..702442db 100644 --- a/packages/module/src/ResponsiveAction/ResponsiveAction.tsx +++ b/packages/module/src/ResponsiveAction/ResponsiveAction.tsx @@ -1,4 +1,4 @@ -import type { ReactNode, FunctionComponent } from 'react'; +import type { FunctionComponent } from 'react'; import { ButtonProps } from '@patternfly/react-core'; /** extends ButtonProps */ @@ -10,7 +10,7 @@ export interface ResponsiveActionProps extends ButtonProps { /** Key for the action */ key?: string; /** Action label */ - children: ReactNode; + children: React.ReactNode; }; // This component is only used declaratively - rendering ishandled by ResponsiveActions diff --git a/packages/module/src/ResponsiveActions/ResponsiveActions.tsx b/packages/module/src/ResponsiveActions/ResponsiveActions.tsx index 320b9b60..36e9f92d 100644 --- a/packages/module/src/ResponsiveActions/ResponsiveActions.tsx +++ b/packages/module/src/ResponsiveActions/ResponsiveActions.tsx @@ -11,7 +11,7 @@ export interface ResponsiveActionsProps extends Omit = ({ ouiaId = 'ResponsiveActions', breakpoint = 'lg', children, ...props }: ResponsiveActionsProps) => { diff --git a/packages/module/src/ServiceCard/ServiceCard.tsx b/packages/module/src/ServiceCard/ServiceCard.tsx index 7975691b..f304f30e 100644 --- a/packages/module/src/ServiceCard/ServiceCard.tsx +++ b/packages/module/src/ServiceCard/ServiceCard.tsx @@ -1,4 +1,4 @@ -import type { ReactNode, ReactElement, FunctionComponent } from 'react'; +import type { FunctionComponent } from 'react'; import { Card, CardBody, CardFooter, CardHeader, CardProps, Content, ContentVariants, Flex, FlexItem } from '@patternfly/react-core'; import { HelperText } from '@patternfly/react-core/dist/dynamic/components/HelperText'; import { HelperTextItem } from '@patternfly/react-core/dist/dynamic/components/HelperText'; @@ -10,15 +10,15 @@ export interface ServiceCardProps extends CardProps { /** Service card title */ title: string; /** Service card subtitle */ - subtitle?: ReactNode; + subtitle?: React.ReactNode; /** Service card description */ - description: ReactNode; + description: React.ReactNode; /** Service card icon */ - icon: ReactNode; + icon: React.ReactNode; /** Optional Service card helper text*/ - helperText?: ReactNode; + helperText?: React.ReactNode; /** Optional footer */ - footer?: ReactElement | null; + footer?: React.ReactElement | null; /** Optional custom OUIA ID */ ouiaId?: string | number; /** Optional flag modifying the card header layout */ diff --git a/packages/module/src/Severity/Severity.tsx b/packages/module/src/Severity/Severity.tsx index c7d76818..80bdc80a 100644 --- a/packages/module/src/Severity/Severity.tsx +++ b/packages/module/src/Severity/Severity.tsx @@ -1,4 +1,4 @@ -import type { HTMLAttributes, DetailedHTMLProps, ReactNode, FunctionComponent } from 'react'; +import type { FunctionComponent } from 'react'; import { Fragment, useMemo } from 'react'; import { SeverityCriticalIcon, @@ -38,11 +38,11 @@ export const SeverityType = { export type SeverityType = (typeof SeverityType)[keyof typeof SeverityType]; -export interface SeverityProps extends DetailedHTMLProps, HTMLElement> { +export interface SeverityProps extends React.DetailedHTMLProps, HTMLElement> { /** Determines a variant of displayed severity */ severity: SeverityType; /** Label displayed next to the severity */ - label: ReactNode; + label: React.ReactNode; /** Option to hide the label */ labelHidden?: boolean; /** Custom className */ diff --git a/packages/module/src/Shortcut/Shortcut.tsx b/packages/module/src/Shortcut/Shortcut.tsx index da33b993..9577d01f 100644 --- a/packages/module/src/Shortcut/Shortcut.tsx +++ b/packages/module/src/Shortcut/Shortcut.tsx @@ -1,4 +1,4 @@ -import type { ReactNode, FunctionComponent } from 'react'; +import type { FunctionComponent } from 'react'; import { MouseIcon } from '@patternfly/react-icons'; import { Label } from '@patternfly/react-core'; import { createUseStyles } from 'react-jss'; @@ -8,7 +8,7 @@ export interface ShortcutProps { /** Array of shortcut keys */ keys: string[]; /** Shortcut description */ - description?: ReactNode; + description?: React.ReactNode; /** Indicates whether symbols should be displayed for certain keys */ showSymbols?: boolean; /** Show hover in the shortcut */ diff --git a/packages/module/src/SkeletonTable/SkeletonTable.tsx b/packages/module/src/SkeletonTable/SkeletonTable.tsx index 01b7ff83..46a2c1ca 100644 --- a/packages/module/src/SkeletonTable/SkeletonTable.tsx +++ b/packages/module/src/SkeletonTable/SkeletonTable.tsx @@ -15,7 +15,7 @@ export interface SkeletonTableProps /** The number of rows the skeleton table should contain */ rowsCount?: number; /** Any captions that should be added to the table */ - caption?: ReactNode; + caption?: React.ReactNode; /** Custom OUIA ID */ ouiaId?: string | number; /** Flag indicating if the table is selectable */ diff --git a/packages/module/src/StaleDataWarning/StaleDataWarning.tsx b/packages/module/src/StaleDataWarning/StaleDataWarning.tsx index 525c8d76..5f4a3707 100644 --- a/packages/module/src/StaleDataWarning/StaleDataWarning.tsx +++ b/packages/module/src/StaleDataWarning/StaleDataWarning.tsx @@ -1,4 +1,4 @@ -import type { ReactElement, JSXElementConstructor, FunctionComponent } from 'react'; +import type { ReactElement, FunctionComponent } from 'react'; import { ExclamationCircleIcon, ExclamationTriangleIcon } from '@patternfly/react-icons'; import { Button, Icon, Tooltip, TooltipProps } from '@patternfly/react-core'; import clsx from 'clsx'; @@ -48,13 +48,13 @@ export interface StaleDataWarningProps extends Omit { /** Current date */ currDate: CullingDate; /** Optional prop to add custom children */ - children?: ReactElement> | undefined; + children?: React.ReactElement> | undefined; /** Option to add custom message ReactElement */ render?: Render; /** Optional custom warning message */ message?: string; /** Accessible label for the icon */ - "aria-label"?: string; + 'aria-label'?: string; } const StaleDataWarning: FunctionComponent = ({ diff --git a/packages/module/src/Status/Status.tsx b/packages/module/src/Status/Status.tsx index ef429ad5..36666c17 100644 --- a/packages/module/src/Status/Status.tsx +++ b/packages/module/src/Status/Status.tsx @@ -1,4 +1,4 @@ -import { PropsWithChildren, ReactNode, ReactElement, MouseEvent, FC } from 'react'; +import { FC } from 'react'; import { Button, ButtonVariant, @@ -31,17 +31,17 @@ export const IconStatus = { export type IconStatus = (typeof IconStatus)[keyof typeof IconStatus]; -export interface StatusProps extends PropsWithChildren { +export interface StatusProps extends React.PropsWithChildren { /** Status label text */ label?: string; /** Description to be displayed under the label */ - description?: ReactNode; + description?: React.ReactNode; /** If true, only displays icon */ iconOnly?: boolean; /** Variant of the status component to be displayed */ variant?: StatusVariant; /** Status icon */ - icon?: ReactElement; + icon?: React.ReactElement; /** Status to control icon color */ status: IconStatus; /** Icon title for accessibility */ @@ -51,7 +51,7 @@ export interface StatusProps extends PropsWithChildren { /** Props for the optional popover */ popoverProps?: PopoverProps; /** Optional link variant onClick callback */ - onClick?: (event: MouseEvent) => void; + onClick?: (event: React.MouseEvent) => void; } const useStyles = createUseStyles({ diff --git a/packages/module/src/UnauthorizedAccess/UnauthorizedAccess.tsx b/packages/module/src/UnauthorizedAccess/UnauthorizedAccess.tsx index 713b91da..af5e72be 100644 --- a/packages/module/src/UnauthorizedAccess/UnauthorizedAccess.tsx +++ b/packages/module/src/UnauthorizedAccess/UnauthorizedAccess.tsx @@ -1,29 +1,29 @@ -import type { ReactNode, ComponentType, FunctionComponent } from 'react'; +import type { FunctionComponent } from 'react'; import { Button, EmptyState, EmptyStateBody, EmptyStateProps, EmptyStateVariant, EmptyStateFooter, EmptyStateActions, ButtonVariant, } from '@patternfly/react-core'; import { LockIcon } from '@patternfly/react-icons'; /** extends EmptyStateProps */ export interface UnauthorizedAccessProps extends Omit { /** Service name displayed in the title */ - serviceName?: ReactNode; + serviceName?: React.ReactNode; /** Icon displayed above the title */ - icon?: ComponentType; + icon?: React.ComponentType; /** Custom body text */ - bodyText?: ReactNode; + bodyText?: React.ReactNode; /** Shows link to the previous page */ showReturnButton?: boolean; /** Custom previous page button text */ - prevPageButtonText?: ReactNode; + prevPageButtonText?: React.ReactNode; /** Custom className */ className?: string; /** Custom title text */ - titleText?: ReactNode; + titleText?: React.ReactNode; /** Custom primary action - there should only be one defined */ - primaryAction?: ReactNode; + primaryAction?: React.ReactNode; /** Custom secondary actions */ - secondaryActions?: ReactNode; + secondaryActions?: React.ReactNode; /** Custom landing page button text */ - toLandingPageText?: ReactNode; + toLandingPageText?: React.ReactNode; /** Custom landing page button URL */ toLandingPageUrl?: string; /** Custom OUIA ID */ diff --git a/packages/module/src/UnavailableContent/UnavailableContent.tsx b/packages/module/src/UnavailableContent/UnavailableContent.tsx index b354c451..fd16a94d 100644 --- a/packages/module/src/UnavailableContent/UnavailableContent.tsx +++ b/packages/module/src/UnavailableContent/UnavailableContent.tsx @@ -1,4 +1,4 @@ -import type { ReactNode, FunctionComponent } from 'react'; +import type { FunctionComponent } from 'react'; import { Button, EmptyState, EmptyStateBody, EmptyStateFooter, EmptyStateProps, EmptyStateStatus, EmptyStateVariant } from '@patternfly/react-core'; import { ExclamationCircleIcon } from '@patternfly/react-icons'; @@ -7,11 +7,11 @@ export interface UnavailableContentProps extends Omit { /** Callback for the confirm action button. */ onConfirm?: () => void; /** Custom label for the confirm action button */ - confirmButtonLabel?: ReactNode; + confirmButtonLabel?: React.ReactNode; /** Custom label for the cancel action button */ - cancelButtonLabel?: ReactNode; + cancelButtonLabel?: React.ReactNode; /** Whether modal requires a checkbox before confirming */ withCheckbox?: boolean; /** Custom checkbox label */ - checkboxLabel?: ReactNode; + checkboxLabel?: React.ReactNode; /** Visual variant of the confirm button */ confirmButtonVariant?: ButtonVariant; /** Custom OUIA ID */ @@ -33,7 +33,7 @@ export interface WarningModalProps extends Omit { /** Text the user should type to confirm selection when using confirmation input */ confirmationText?: string; /** Label for the text confirmation input */ - confirmationInputLabel?: ReactNode; + confirmationInputLabel?: React.ReactNode; } const WarningModal: FunctionComponent = ({
{caption}