Add an icon to visually indicate the links are external

RedHatInsights · Jul 27, 2020 · aceda9e · aceda9e
1 parent 50ba4d9
commit aceda9e
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 1 deletion.
diff --git a/src/components/i18n/__tests__/__snapshots__/i18n.test.js.snap b/src/components/i18n/__tests__/__snapshots__/i18n.test.js.snap
@@ -276,7 +276,7 @@ Array [
     "keys": Array [
       Object {
         "key": "",
-        "match": "translate(\`curiosity-view.\${viewId}Subtitle\`, {}, [ <Button isInline component=\\"a\\" variant=\\"link\\" target=\\"_blank\\" href=\\"https://access.redhat.com/documentation/en-us/subscription_central/2020-04/html/getting_started_with_subscription_watch/con-how-does-subscriptionwatch-show-data_assembly-opening-subscriptionwatch-ctxt/\\" /> ])",
+        "match": "translate(\`curiosity-view.\${viewId}Subtitle\`, {}, [ <Button isInline component=\\"a\\" variant=\\"link\\" icon={<ExternalLinkSquareAltIcon />} iconPosition=\\"right\\" target=\\"_blank\\" href=\\"https://access.redhat.com/documentation/en-us/subscription_central/2020-04/html/getting_started_with_subscription_watch/con-how-does-subscriptionwatch-show-data_assembly-opening-subscriptionwatch-ctxt/\\" /> ])",
       },
     ],
   },

diff --git a/src/components/pageLayout/pageHeader.js b/src/components/pageLayout/pageHeader.js
@@ -6,6 +6,7 @@ import {
   PageHeaderTitle
 } from '@redhat-cloud-services/frontend-components/components/cjs/PageHeader';
 import { Button } from '@patternfly/react-core';
+import { ExternalLinkSquareAltIcon } from '@patternfly/react-icons';
 import { translate } from '../i18n/i18n';
 
 /**
@@ -26,6 +27,8 @@ const PageHeader = ({ children, viewId }) => (
             isInline
             component="a"
             variant="link"
+            icon={<ExternalLinkSquareAltIcon />}
+            iconPosition="right"
             target="_blank"
             href="https://access.redhat.com/documentation/en-us/subscription_central/2020-04/html/getting_started_with_subscription_watch/con-how-does-subscriptionwatch-show-data_assembly-opening-subscriptionwatch-ctxt/"
           />