Adjust footnote icon

Author: rebeccaalpert

packages/module/src/MarkdownContent/MarkdownContent.tsx

@@ -257,6 +257,20 @@ export const MarkdownContent: FunctionComponent<MarkdownContentProps> = ({
       remarkRehypeOptions={{
         // removes sr-only class from footnote labels applied by default
         footnoteLabelProperties: { className: [''] },
+        // omit default ↩ text; backref icon is rendered in LinkMessage
+        footnoteBackContent: (_referenceIndex, rereferenceIndex) => {
+          if (rereferenceIndex > 1) {
+            return [
+              {
+                type: 'element',
+                tagName: 'sup',
+                properties: {},
+                children: [{ type: 'text', value: String(rereferenceIndex) }]
+              }
+            ];
+          }
+          return [];
+        },
         ...reactMarkdownProps?.remarkRehypeOptions
       }}
       disallowedElements={disallowedElements}

packages/module/src/Message/LinkMessage/LinkMessage.tsx

@@ -3,10 +3,12 @@
 // ============================================================================
 
 import { Button, ButtonProps } from '@patternfly/react-core';
-import { ExternalLinkSquareAltIcon } from '@patternfly/react-icons';
+import { RhMicronsExternalLinkIcon, RhUiBackwardsIcon } from '@patternfly/react-icons';
 import { ExtraProps } from 'react-markdown';
 import { css } from '@patternfly/react-styles';
 
+const isFootnoteBackref = (className?: string) => className?.includes('data-footnote-backref');
+
 export interface LinkMessageProps {
   /** Flag indicating that the content should retain message styles when using Markdown. */
   shouldRetainStyles?: boolean;
@@ -26,7 +28,7 @@ const LinkMessage = ({
         component="a"
         variant="link"
         href={href}
-        icon={<ExternalLinkSquareAltIcon />}
+        icon={<RhMicronsExternalLinkIcon />}
         iconPosition="end"
         isInline
         target={target}
@@ -40,6 +42,23 @@ const LinkMessage = ({
     );
   }
 
+  if (isFootnoteBackref(props.className)) {
+    return (
+      <Button
+        isInline
+        component="a"
+        href={href}
+        variant="link"
+        id={id}
+        icon={<RhUiBackwardsIcon />}
+        {...props}
+        className={css(shouldRetainStyles && 'pf-m-markdown', props?.className)}
+      >
+        {children}
+      </Button>
+    );
+  }
+
   return (
     // need to explicitly call this out or id doesn't seem to get passed - required for footnotes
     <Button