From 59d504f712e56f248bb484f2199c5e03db987ec9 Mon Sep 17 00:00:00 2001 From: Filip Hlavac Date: Thu, 7 Sep 2023 13:27:07 +0200 Subject: [PATCH 1/3] Fix utils classNames --- .../examples/Battery/BatteryCriticalExample.tsx | 7 ++----- .../examples/Battery/BatteryDefaultExample.tsx | 4 +--- .../examples/Battery/BatteryHighExample.tsx | 8 +++----- .../examples/Battery/BatteryLowExample.tsx | 8 +++----- .../examples/Battery/BatteryMediumExample.tsx | 8 +++----- .../examples/DetailsPage/DetailsPageExample.tsx | 4 ++-- .../examples/DetailsPage/HorizontalNavExample.tsx | 4 ++-- .../examples/NotAuthorized/NotAuthorizedExample.tsx | 2 +- .../module/src/DetailsPageHeader/DetailsPageHeader.tsx | 8 ++++---- .../module/src/DetailsPageHeader/utils/ActionButtons.tsx | 2 +- .../module/src/DetailsPageHeader/utils/ActionMenu.tsx | 6 +++--- 11 files changed, 25 insertions(+), 36 deletions(-) diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/Battery/BatteryCriticalExample.tsx b/packages/module/patternfly-docs/content/extensions/component-groups/examples/Battery/BatteryCriticalExample.tsx index 38254e0e..d50d0f39 100644 --- a/packages/module/patternfly-docs/content/extensions/component-groups/examples/Battery/BatteryCriticalExample.tsx +++ b/packages/module/patternfly-docs/content/extensions/component-groups/examples/Battery/BatteryCriticalExample.tsx @@ -1,12 +1,9 @@ import React from 'react'; import Battery from '@patternfly/react-component-groups/dist/dynamic/Battery'; -const BatteryCriticalExample: React.FunctionComponent = () => ( +export const BasicExample: React.FunctionComponent = () => ( <> - + ); - -export default BatteryCriticalExample; - diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/Battery/BatteryDefaultExample.tsx b/packages/module/patternfly-docs/content/extensions/component-groups/examples/Battery/BatteryDefaultExample.tsx index 9c8e2d11..ef7b3115 100644 --- a/packages/module/patternfly-docs/content/extensions/component-groups/examples/Battery/BatteryDefaultExample.tsx +++ b/packages/module/patternfly-docs/content/extensions/component-groups/examples/Battery/BatteryDefaultExample.tsx @@ -1,6 +1,4 @@ import React from 'react'; import Battery from '@patternfly/react-component-groups/dist/dynamic/Battery'; -const BatteryDefaultExample: React.FunctionComponent = () => - -export default BatteryDefaultExample; +export const BasicExample: React.FunctionComponent = () => diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/Battery/BatteryHighExample.tsx b/packages/module/patternfly-docs/content/extensions/component-groups/examples/Battery/BatteryHighExample.tsx index bcb809d8..b25569ce 100644 --- a/packages/module/patternfly-docs/content/extensions/component-groups/examples/Battery/BatteryHighExample.tsx +++ b/packages/module/patternfly-docs/content/extensions/component-groups/examples/Battery/BatteryHighExample.tsx @@ -1,12 +1,10 @@ import React from 'react'; import Battery from '@patternfly/react-component-groups/dist/dynamic/Battery'; -const BatteryHighExample: React.FunctionComponent = () => ( +export const BasicExample: React.FunctionComponent = () => ( <> - - + + ); - -export default BatteryHighExample; \ No newline at end of file diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/Battery/BatteryLowExample.tsx b/packages/module/patternfly-docs/content/extensions/component-groups/examples/Battery/BatteryLowExample.tsx index b3c66aa3..cded9273 100644 --- a/packages/module/patternfly-docs/content/extensions/component-groups/examples/Battery/BatteryLowExample.tsx +++ b/packages/module/patternfly-docs/content/extensions/component-groups/examples/Battery/BatteryLowExample.tsx @@ -1,12 +1,10 @@ import React from 'react'; import Battery from '@patternfly/react-component-groups/dist/dynamic/Battery'; -const BatteryLowExample: React.FunctionComponent = () => ( +export const BasicExample: React.FunctionComponent = () => ( <> - - + + ); - -export default BatteryLowExample; \ No newline at end of file diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/Battery/BatteryMediumExample.tsx b/packages/module/patternfly-docs/content/extensions/component-groups/examples/Battery/BatteryMediumExample.tsx index 943300c4..183bc405 100644 --- a/packages/module/patternfly-docs/content/extensions/component-groups/examples/Battery/BatteryMediumExample.tsx +++ b/packages/module/patternfly-docs/content/extensions/component-groups/examples/Battery/BatteryMediumExample.tsx @@ -1,12 +1,10 @@ import React from 'react'; import Battery from '@patternfly/react-component-groups/dist/dynamic/Battery'; -const BatteryMediumExample: React.FunctionComponent = () => ( +export const BasicExample: React.FunctionComponent = () => ( <> - - + + ); - -export default BatteryMediumExample; diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/DetailsPage/DetailsPageExample.tsx b/packages/module/patternfly-docs/content/extensions/component-groups/examples/DetailsPage/DetailsPageExample.tsx index cc268985..f7cb5fa9 100644 --- a/packages/module/patternfly-docs/content/extensions/component-groups/examples/DetailsPage/DetailsPageExample.tsx +++ b/packages/module/patternfly-docs/content/extensions/component-groups/examples/DetailsPage/DetailsPageExample.tsx @@ -51,8 +51,8 @@ export const BasicExample: React.FunctionComponent = () => ( id: 'details-page-action-menu-example' }} tabs={[ - { eventKey: 'details', title: 'Details', children:
Details content
}, - { eventKey: 'other', title: 'Other', children:
Other content
} + { eventKey: 'details', title: 'Details', children:
Details content
}, + { eventKey: 'other', title: 'Other', children:
Other content
} ]} /> diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/DetailsPage/HorizontalNavExample.tsx b/packages/module/patternfly-docs/content/extensions/component-groups/examples/DetailsPage/HorizontalNavExample.tsx index e49d3c9d..65bc220a 100644 --- a/packages/module/patternfly-docs/content/extensions/component-groups/examples/DetailsPage/HorizontalNavExample.tsx +++ b/packages/module/patternfly-docs/content/extensions/component-groups/examples/DetailsPage/HorizontalNavExample.tsx @@ -4,8 +4,8 @@ import HorizontalNav from '@patternfly/react-component-groups/dist/dynamic/Horiz export const BasicExample: React.FunctionComponent = () => ( Details content }, - { eventKey: 'other', title: 'Other', children:
Other content
} + { eventKey: 'details', title: 'Details', children:
Details content
}, + { eventKey: 'other', title: 'Other', children:
Other content
} ]} /> ); diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/NotAuthorized/NotAuthorizedExample.tsx b/packages/module/patternfly-docs/content/extensions/component-groups/examples/NotAuthorized/NotAuthorizedExample.tsx index deb86097..6d4fe469 100644 --- a/packages/module/patternfly-docs/content/extensions/component-groups/examples/NotAuthorized/NotAuthorizedExample.tsx +++ b/packages/module/patternfly-docs/content/extensions/component-groups/examples/NotAuthorized/NotAuthorizedExample.tsx @@ -7,7 +7,7 @@ export const BasicExample: React.FunctionComponent = () => { , - , ]; diff --git a/packages/module/src/DetailsPageHeader/DetailsPageHeader.tsx b/packages/module/src/DetailsPageHeader/DetailsPageHeader.tsx index 24837fc0..23a6b5b9 100644 --- a/packages/module/src/DetailsPageHeader/DetailsPageHeader.tsx +++ b/packages/module/src/DetailsPageHeader/DetailsPageHeader.tsx @@ -62,13 +62,13 @@ const DetailsPageHeader: React.FunctionComponent = ({ <> {/* Optional breadcrumbs */} {breadcrumbs && ( -
+
)} - + {/* Optional icon for details page heading (before title) */} {pageHeading?.iconBeforeTitle && ( @@ -118,7 +118,7 @@ const DetailsPageHeader: React.FunctionComponent = ({ )} {/* Optional action menu - ungrouped actions */} {actionMenu?.actions && ( - + = ({ )} {/* Optional action menu - Grouped actions */} {actionMenu?.groupedActions && ( - + = ({ variant={actionButton?.variant} isDisabled={actionButton?.isDisabled} tooltip={actionButton?.tooltip} - className="pf-u-mb-sm" + className="pf-v5-u-mb-sm" > {actionButton.children} diff --git a/packages/module/src/DetailsPageHeader/utils/ActionMenu.tsx b/packages/module/src/DetailsPageHeader/utils/ActionMenu.tsx index b5612cfc..64a8b23f 100644 --- a/packages/module/src/DetailsPageHeader/utils/ActionMenu.tsx +++ b/packages/module/src/DetailsPageHeader/utils/ActionMenu.tsx @@ -71,14 +71,14 @@ export type ActionMenuProps = EitherNotBoth< const useStyles = createUseStyles({ menuItemWithLabelBeforeIcon: { - '&.pf-c-dropdown__menu-item': { + '&.pf-v5-c-dropdown__menu-item': { flexDirection: 'row-reverse', justifyContent: 'left' }, - '.pf-c-dropdown__menu-item-icon': { + '.pf-v5-c-dropdown__menu-item-icon': { marginLeft: 'var(--pf-v5-c-dropdown__menu-item-icon--MarginRight)' }, - '.pf-c-dropdown__menu-item-main': { + '.pf-v5-c-dropdown__menu-item-main': { flexDirection: 'row-reverse', } } From c6a783e771e2321340bd4b96267c00a9ca5cdca3 Mon Sep 17 00:00:00 2001 From: Filip Hlavac Date: Mon, 25 Sep 2023 16:41:21 +0200 Subject: [PATCH 2/3] feat(Ansible): Add Ansible component --- packages/module/src/Ansible/Ansible.tsx | 101 ++++++++++++++++++++++++ packages/module/src/Ansible/index.ts | 2 + packages/module/src/index.ts | 3 + 3 files changed, 106 insertions(+) create mode 100644 packages/module/src/Ansible/Ansible.tsx create mode 100644 packages/module/src/Ansible/index.ts diff --git a/packages/module/src/Ansible/Ansible.tsx b/packages/module/src/Ansible/Ansible.tsx new file mode 100644 index 00000000..4c5d2ed5 --- /dev/null +++ b/packages/module/src/Ansible/Ansible.tsx @@ -0,0 +1,101 @@ +import React from 'react'; +import classNames from 'classnames'; +import { createUseStyles } from 'react-jss'; + +export interface AnsibleProps extends React.DetailedHTMLProps, HTMLElement> { + /** Supported/unsupported variant flag */ + unsupported?: boolean | number; + /** Ansible icon className*/ + className?: string; +} + +const useStyles = createUseStyles({ + ansible: { + '& svg': { + height: 'var(--pf-v5-global--FontSize--xl)', + position: 'relative', + top: '0.25rem' + } + }, + supported: { + '& .st0': { + fill: 'var(--pf-v5-global--info-color--100)', + } + }, + unsupported: { + '& .st0, .st1, .st2': { + fill: 'var(--pf-v5-global--disabled-color--200)', + cursor: 'not-allowed', + } + } +}) + +const Ansible: React.FunctionComponent = ({ unsupported, className, ...props }: AnsibleProps) => { + const classes = useStyles(); + const ansibleLogoClass = classNames( + classes.ansible, + { [classes.supported]: !unsupported || unsupported === 0 }, + { [classes.unsupported]: unsupported || unsupported === 1 }, + className + ); + + const unsupportedSlash = ( + + + + + + + + ); + + const ariaLabels = unsupported ? { + disabled: 'disabled', + ['aria-label']: 'Does not have Ansible support', + } : { ['aria-label']: 'Has Ansible support' }; + + return ( + + + + {unsupported ? unsupportedSlash : null} + + + ); +}; + +export default Ansible; diff --git a/packages/module/src/Ansible/index.ts b/packages/module/src/Ansible/index.ts new file mode 100644 index 00000000..acaeda80 --- /dev/null +++ b/packages/module/src/Ansible/index.ts @@ -0,0 +1,2 @@ +export { default } from './Ansible'; +export * from './Ansible'; diff --git a/packages/module/src/index.ts b/packages/module/src/index.ts index 09a3ad95..9de0907a 100644 --- a/packages/module/src/index.ts +++ b/packages/module/src/index.ts @@ -1,5 +1,8 @@ // this file is autogenerated by generate-index.js, modifying it manually will have no effect +export { default as Ansible } from './Ansible'; +export * from './Ansible'; + export { default as Battery } from './Battery'; export * from './Battery'; From 72d1ed0527c55762caa258b9a810ac96b1357271 Mon Sep 17 00:00:00 2001 From: Filip Hlavac Date: Mon, 25 Sep 2023 16:42:06 +0200 Subject: [PATCH 3/3] feat(Ansible): Add Ansible tests & examples --- .../examples/Ansible/Ansible.md | 32 ++++ .../Ansible/AnsibleSupportedExample.tsx | 6 + .../Ansible/AnsibleUnsupportedExample.tsx | 6 + .../examples/DetailsPage/DetailsPage.md | 2 +- .../examples/ErrorState/ErrorState.md | 2 +- packages/module/src/Ansible/Ansible.test.tsx | 27 ++++ packages/module/src/Ansible/Ansible.tsx | 8 +- .../__snapshots__/Ansible.test.tsx.snap | 145 ++++++++++++++++++ 8 files changed, 219 insertions(+), 9 deletions(-) create mode 100644 packages/module/patternfly-docs/content/extensions/component-groups/examples/Ansible/Ansible.md create mode 100644 packages/module/patternfly-docs/content/extensions/component-groups/examples/Ansible/AnsibleSupportedExample.tsx create mode 100644 packages/module/patternfly-docs/content/extensions/component-groups/examples/Ansible/AnsibleUnsupportedExample.tsx create mode 100644 packages/module/src/Ansible/Ansible.test.tsx create mode 100644 packages/module/src/Ansible/__snapshots__/Ansible.test.tsx.snap 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 new file mode 100644 index 00000000..e3e87e94 --- /dev/null +++ b/packages/module/patternfly-docs/content/extensions/component-groups/examples/Ansible/Ansible.md @@ -0,0 +1,32 @@ +--- +# Sidenav top-level section +# should be the same for all markdown files +section: extensions +subsection: Component groups +# Sidenav secondary level section +# should be the same for all markdown files +id: Ansible +# Tab (react | react-demos | html | html-demos | design-guidelines | accessibility) +source: react +# If you use typescript, the name of the interface to display props for +# These are found through the sourceProps function provided in patternfly-docs.source.js +propComponents: ['Ansible'] +--- + +import Ansible from '@patternfly/react-component-groups/dist/dynamic/Ansible'; + +The **Ansible** component shows Ansible project logo. + +To specify whether Ansible is supported or not, add the `unsupported` property to the `` component. + +### Ansible supported + +```js file="./AnsibleSupportedExample.tsx" + +``` + +### Ansible unsupported + +```js file="./AnsibleUnsupportedExample.tsx" + +``` 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 new file mode 100644 index 00000000..f45a80b5 --- /dev/null +++ b/packages/module/patternfly-docs/content/extensions/component-groups/examples/Ansible/AnsibleSupportedExample.tsx @@ -0,0 +1,6 @@ +import React from 'react'; +import Ansible from '@patternfly/react-component-groups/dist/dynamic/Ansible'; + +export const BasicExample: React.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 new file mode 100644 index 00000000..425e84dd --- /dev/null +++ b/packages/module/patternfly-docs/content/extensions/component-groups/examples/Ansible/AnsibleUnsupportedExample.tsx @@ -0,0 +1,6 @@ +import React from 'react'; +import Ansible from '@patternfly/react-component-groups/dist/dynamic/Ansible'; + +export const BasicExample: React.FunctionComponent = () => ( + +); diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/DetailsPage/DetailsPage.md b/packages/module/patternfly-docs/content/extensions/component-groups/examples/DetailsPage/DetailsPage.md index 0ce73c5e..08a6c9cf 100644 --- a/packages/module/patternfly-docs/content/extensions/component-groups/examples/DetailsPage/DetailsPage.md +++ b/packages/module/patternfly-docs/content/extensions/component-groups/examples/DetailsPage/DetailsPage.md @@ -5,7 +5,7 @@ section: extensions subsection: Component groups # Sidenav secondary level section # should be the same for all markdown files -id: DetailsPage +id: Details page # Tab (react | react-demos | html | html-demos | design-guidelines | accessibility) source: react # If you use typescript, the name of the interface to display props for 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 a1b349e5..d4c97bec 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 @@ -5,7 +5,7 @@ section: extensions subsection: Component groups # Sidenav secondary level section # should be the same for all markdown files -id: ErrorState +id: Error state # Tab (react | react-demos | html | html-demos | design-guidelines | accessibility) source: react # If you use typescript, the name of the interface to display props for diff --git a/packages/module/src/Ansible/Ansible.test.tsx b/packages/module/src/Ansible/Ansible.test.tsx new file mode 100644 index 00000000..915212cb --- /dev/null +++ b/packages/module/src/Ansible/Ansible.test.tsx @@ -0,0 +1,27 @@ +import React from 'react'; +import { render } from '@testing-library/react'; +import Ansible from './Ansible'; + +describe('Ansible component', () => { + + it('should render unsupported - boolean', () => { + const { container } = render(); + expect(container).toMatchSnapshot(); + }); + + it('should render unsupported - number', () => { + const { container } = render(); + expect(container).toMatchSnapshot(); + }); + + it('should render supported - boolean', () => { + const { container } = render(); + expect(container).toMatchSnapshot(); + }); + + it('should render supported - number', () => { + const { container } = render(); + expect(container).toMatchSnapshot(); + }); + +}); diff --git a/packages/module/src/Ansible/Ansible.tsx b/packages/module/src/Ansible/Ansible.tsx index 4c5d2ed5..fbdaa82d 100644 --- a/packages/module/src/Ansible/Ansible.tsx +++ b/packages/module/src/Ansible/Ansible.tsx @@ -70,16 +70,10 @@ const Ansible: React.FunctionComponent = ({ unsupported, className ); - const ariaLabels = unsupported ? { - disabled: 'disabled', - ['aria-label']: 'Does not have Ansible support', - } : { ['aria-label']: 'Has Ansible support' }; - return ( - + + + + + + +
+`; + +exports[`Ansible component should render supported - number 1`] = ` +
+ + + + + +
+`; + +exports[`Ansible component should render unsupported - boolean 1`] = ` +
+ + + + + + + + +
+`; + +exports[`Ansible component should render unsupported - number 1`] = ` +
+ + + + + + + + +
+`;