diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/ExternalLinkButton/ExternalLinkButton.md b/packages/module/patternfly-docs/content/extensions/component-groups/examples/ExternalLinkButton/ExternalLinkButton.md new file mode 100644 index 00000000..f3b25cc1 --- /dev/null +++ b/packages/module/patternfly-docs/content/extensions/component-groups/examples/ExternalLinkButton/ExternalLinkButton.md @@ -0,0 +1,38 @@ +--- +section: Component groups +subsection: Controls +id: External link button +source: react +propComponents: ['ExternalLinkButton'] +sourceLink: https://github.com/patternfly/react-component-groups/blob/main/packages/module/patternfly-docs/content/extensions/component-groups/examples/ExternalLinkButton/ExternalLinkButton.md +--- + +import ExternalLinkButton from "@patternfly/react-component-groups/dist/dynamic/ExternalLinkButton" + +The **external link button** component is a button that opens links in an external tab. To further customize this component, you can also utilize all properties of the [button component](/components/button). + +## Examples + +### Basic external link button + +In order to display a basic external link button, you can use the `href` property to specify the URL and the `variant` property to set the button style. + +```js file="./ExternalLinkButtonExample.tsx" + +``` + +### Inline external link button + +You may use the external link button component inline with other text by using the `inline` property. + +```js file="./ExternalLinkButtonInlineExample.tsx" + +``` + +### Passing props to the icon + +You may pass props to the icon using the `iconProps` property. This is useful for customizing the title of the icon for enhanced screen reader support. + +```js file="./ExternalLinkButtonIconPropsExample.tsx" + +``` diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/ExternalLinkButton/ExternalLinkButtonExample.tsx b/packages/module/patternfly-docs/content/extensions/component-groups/examples/ExternalLinkButton/ExternalLinkButtonExample.tsx new file mode 100644 index 00000000..f578058a --- /dev/null +++ b/packages/module/patternfly-docs/content/extensions/component-groups/examples/ExternalLinkButton/ExternalLinkButtonExample.tsx @@ -0,0 +1,10 @@ +import ExternalLinkButton from '@patternfly/react-component-groups/dist/dynamic/ExternalLinkButton'; + +export const BasicExample = () => ( + + Learn more about PatternFly + +); diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/ExternalLinkButton/ExternalLinkButtonIconPropsExample.tsx b/packages/module/patternfly-docs/content/extensions/component-groups/examples/ExternalLinkButton/ExternalLinkButtonIconPropsExample.tsx new file mode 100644 index 00000000..c8264f77 --- /dev/null +++ b/packages/module/patternfly-docs/content/extensions/component-groups/examples/ExternalLinkButton/ExternalLinkButtonIconPropsExample.tsx @@ -0,0 +1,11 @@ +import ExternalLinkButton from '@patternfly/react-component-groups/dist/dynamic/ExternalLinkButton'; + +export const BasicExample = () => ( + + Learn more about PatternFly + +); diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/ExternalLinkButton/ExternalLinkButtonInlineExample.tsx b/packages/module/patternfly-docs/content/extensions/component-groups/examples/ExternalLinkButton/ExternalLinkButtonInlineExample.tsx new file mode 100644 index 00000000..c4488344 --- /dev/null +++ b/packages/module/patternfly-docs/content/extensions/component-groups/examples/ExternalLinkButton/ExternalLinkButtonInlineExample.tsx @@ -0,0 +1,16 @@ +import ExternalLinkButton from '@patternfly/react-component-groups/dist/dynamic/ExternalLinkButton'; +import { Content, ContentVariants } from '@patternfly/react-core'; + +export const BasicExample = () => ( + + Today, I had a burger for lunch. It reminded me of the + + PatternFly + + design system. + +); 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..4f618371 --- /dev/null +++ b/packages/module/src/ExternalLinkButton/ExternalLinkButton.tsx @@ -0,0 +1,25 @@ +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; +}; + +export const ExternalLinkButton = forwardRef(({ iconProps, ...props }: ExternalLinkButtonProps, ref: Ref) => ( +