From 383431047e3f9a79c7abe866defb9a01314094a7 Mon Sep 17 00:00:00 2001 From: logonoff Date: Thu, 26 Jun 2025 16:56:22 -0400 Subject: [PATCH 1/2] feat: add new `ExternalLinkButton` component component ported over from OCP web console --- .../ExternalLinkButton.test.tsx | 12 + .../ExternalLinkButton/ExternalLinkButton.tsx | 27 ++ .../ExternalLinkButton.test.tsx.snap | 241 ++++++++++++++++++ .../module/src/ExternalLinkButton/index.ts | 2 + 4 files changed, 282 insertions(+) create mode 100644 packages/module/src/ExternalLinkButton/ExternalLinkButton.test.tsx create mode 100644 packages/module/src/ExternalLinkButton/ExternalLinkButton.tsx create mode 100644 packages/module/src/ExternalLinkButton/__snapshots__/ExternalLinkButton.test.tsx.snap create mode 100644 packages/module/src/ExternalLinkButton/index.ts diff --git a/packages/module/src/ExternalLinkButton/ExternalLinkButton.test.tsx b/packages/module/src/ExternalLinkButton/ExternalLinkButton.test.tsx new file mode 100644 index 00000000..de022796 --- /dev/null +++ b/packages/module/src/ExternalLinkButton/ExternalLinkButton.test.tsx @@ -0,0 +1,12 @@ +import { ExternalLinkButton } from './ExternalLinkButton'; +import { render } from '@testing-library/react'; + +describe('ExternalLinkButton component', () => { + test('should render', () => { + expect(render()).toMatchSnapshot(); + }); + + test('should accept IconProps', () => { + expect(render()).toMatchSnapshot(); + }); +}); diff --git a/packages/module/src/ExternalLinkButton/ExternalLinkButton.tsx b/packages/module/src/ExternalLinkButton/ExternalLinkButton.tsx new file mode 100644 index 00000000..baa8b887 --- /dev/null +++ b/packages/module/src/ExternalLinkButton/ExternalLinkButton.tsx @@ -0,0 +1,27 @@ +import { Button, ButtonProps } from '@patternfly/react-core'; +import { ExternalLinkAltIcon } from '@patternfly/react-icons'; +import type { SVGIconProps } from '@patternfly/react-icons/dist/esm/createIcon'; +import { forwardRef, Ref } from 'react'; + +/** extends `ButtonProps` */ +export interface ExternalLinkButtonProps extends ButtonProps { + /** Additional props to pass to the icon */ + iconProps?: SVGIconProps; +}; + +/** + * A `Button` that opens links in an external tab. + */ +export const ExternalLinkButton = forwardRef(({ iconProps, ...props }: ExternalLinkButtonProps, ref: Ref) => ( +