docs: add usage notes for ExternalLinkButton

Author: logonoff

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"
+
+```

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 = () => (
+  <ExternalLinkButton
+    href="https://www.patternfly.org"
+    variant="primary"
+  >
+    Learn more about PatternFly
+  </ExternalLinkButton>
+);

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 = () => (
+  <ExternalLinkButton
+    href="https://www.patternfly.org"
+    iconProps={{ title: '(Opens in new tab)' }}
+    variant="link"
+  >
+    Learn more about PatternFly
+  </ExternalLinkButton>
+);

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 = () => (
+  <Content component={ContentVariants.p}>
+    Today, I had a burger for lunch. It reminded me of the
+    <ExternalLinkButton
+      href="https://www.patternfly.org"
+      isInline
+      variant="link"
+    >
+      PatternFly
+    </ExternalLinkButton>
+    design system.
+  </Content>
+);

packages/module/src/ExternalLinkButton/ExternalLinkButton.tsx

@@ -3,20 +3,18 @@ import { ExternalLinkAltIcon } from '@patternfly/react-icons';
 import type { SVGIconProps } from '@patternfly/react-icons/dist/esm/createIcon';
 import { forwardRef, Ref } from 'react';
 
-/** extends `ButtonProps` */
+/** 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<HTMLAnchorElement>) => (
   <Button
     component="a"
     icon={<ExternalLinkAltIcon {...iconProps} />}
     iconPosition="right"
+    ouiaId="ExternalLinkButton"
     ref={ref}
     rel="noopener noreferrer"
     target="_blank"

packages/module/src/ExternalLinkButton/__snapshots__/ExternalLinkButton.test.tsx.snap

@@ -7,7 +7,7 @@ exports[`ExternalLinkButton component should accept IconProps 1`] = `
     <div>
       <a
         class="pf-v6-c-button pf-m-primary"
-        data-ouia-component-id="OUIA-Generated-Button-primary-2"
+        data-ouia-component-id="ExternalLinkButton"
         data-ouia-component-type="PF6/Button"
         data-ouia-safe="true"
         rel="noopener noreferrer"
@@ -41,7 +41,7 @@ exports[`ExternalLinkButton component should accept IconProps 1`] = `
   "container": <div>
     <a
       class="pf-v6-c-button pf-m-primary"
-      data-ouia-component-id="OUIA-Generated-Button-primary-2"
+      data-ouia-component-id="ExternalLinkButton"
       data-ouia-component-type="PF6/Button"
       data-ouia-safe="true"
       rel="noopener noreferrer"
@@ -132,7 +132,7 @@ exports[`ExternalLinkButton component should render 1`] = `
     <div>
       <a
         class="pf-v6-c-button pf-m-primary"
-        data-ouia-component-id="OUIA-Generated-Button-primary-1"
+        data-ouia-component-id="ExternalLinkButton"
         data-ouia-component-type="PF6/Button"
         data-ouia-safe="true"
         rel="noopener noreferrer"
@@ -161,7 +161,7 @@ exports[`ExternalLinkButton component should render 1`] = `
   "container": <div>
     <a
       class="pf-v6-c-button pf-m-primary"
-      data-ouia-component-id="OUIA-Generated-Button-primary-1"
+      data-ouia-component-id="ExternalLinkButton"
       data-ouia-component-type="PF6/Button"
       data-ouia-safe="true"
       rel="noopener noreferrer"