adds optional link to the subkey of a view header (#166)

* adds optional link to the subkey of a view header

* changes props to button props

src/components/view-header/ViewHeader.tsx

@@ -12,15 +12,18 @@ import {
   ToolbarItem,
   Badge,
   Select,
+  ButtonProps,
 } from "@patternfly/react-core";
 import { HelpContext } from "../help-enabler/HelpHeader";
 import { useTranslation } from "react-i18next";
 import { PageBreadCrumbs } from "../bread-crumb/PageBreadCrumbs";
+import { ExternalLink } from "../external-link/ExternalLink";
 
 export type ViewHeaderProps = {
   titleKey: string;
   badge?: string;
   subKey: string;
+  subKeyLinkProps?: ButtonProps;
   selectItems?: ReactElement[];
   isEnabled?: boolean;
   onSelect?: (value: string) => void;
@@ -31,6 +34,7 @@ export const ViewHeader = ({
   titleKey,
   badge,
   subKey,
+  subKeyLinkProps,
   selectItems,
   isEnabled = true,
   onSelect,
@@ -98,7 +102,16 @@ export const ViewHeader = ({
         </Level>
         {enabled && (
           <TextContent>
-            <Text>{t(subKey)}</Text>
+            <Text>
+              {t(subKey)}
+              {subKeyLinkProps && (
+                <ExternalLink
+                  {...subKeyLinkProps}
+                  isInline
+                  className="pf-u-ml-md"
+                />
+              )}
+            </Text>
           </TextContent>
         )}
       </PageSection>

src/stories/ViewHeader.stories.tsx

@@ -22,6 +22,10 @@ Extended.args = {
   titleKey: "This is the title",
   badge: "badge",
   subKey: "This is the description.",
+  subKeyLinkProps: {
+    title: "More information",
+    href: "http://google.com",
+  },
   selectItems: [
     <SelectOption key="first" value="first-item">
       First item