@openedx/paragon 22.14.0 → 22.15.0

package/dist/Hyperlink/index.d.ts

@@ -1,9 +1,8 @@
 import React from 'react';
-export declare const HYPER_LINK_EXTERNAL_LINK_ALT_TEXT = "in a new tab";
-export declare const HYPER_LINK_EXTERNAL_LINK_TITLE = "Opens in a new tab";
-interface Props extends Omit<React.ComponentPropsWithRef<'a'>, 'href' | 'target'> {
+import { type BsPrefixRefForwardingComponent as ComponentWithAsProp, type BsPrefixProps } from 'react-bootstrap/esm/helpers';
+export interface HyperlinkProps extends BsPrefixProps, Omit<React.ComponentPropsWithRef<'a'>, 'href' | 'target'> {
     /** specifies the URL */
-    destination: string;
+    destination?: string;
     /** Content of the hyperlink */
     children: React.ReactNode;
     /** Custom class names for the hyperlink */
@@ -18,7 +17,13 @@ interface Props extends Omit<React.ComponentPropsWithRef<'a'>, 'href' | 'target'
     isInline?: boolean;
     /** specify if we need to show launch Icon. By default, it will be visible. */
     showLaunchIcon?: boolean;
+    /** specifies where the link should open. The default behavior is `_self`, which means that the URL will be
+     * loaded into the same browsing context as the current one.
+     * If the target is `_blank` (opening a new window) `rel='noopener'` will be added to the anchor tag to prevent
+     * any potential [reverse tabnabbing attack](https://www.owasp.org/index.php/Reverse_Tabnabbing).
+     */
     target?: '_blank' | '_self';
 }
-declare const Hyperlink: React.ForwardRefExoticComponent<Omit<Props, "ref"> & React.RefAttributes<HTMLAnchorElement>>;
+export type HyperlinkType = ComponentWithAsProp<'a', HyperlinkProps>;
+declare const Hyperlink: React.ForwardRefExoticComponent<Omit<HyperlinkProps, "ref"> & React.RefAttributes<HTMLAnchorElement>>;
 export default Hyperlink;

package/dist/Hyperlink/index.js

@@ -1,24 +1,37 @@
-import React from 'react';
+import React, { forwardRef } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
+import { defineMessages, useIntl } from 'react-intl';
 import { Launch } from '../../icons';
 import Icon from '../Icon';
-export const HYPER_LINK_EXTERNAL_LINK_ALT_TEXT = 'in a new tab';
-export const HYPER_LINK_EXTERNAL_LINK_TITLE = 'Opens in a new tab';
-const Hyperlink = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+// @ts-ignore
+import { customPropTypeRequirement } from '../utils/propTypes/utils';
+const messages = defineMessages({
+  externalLinkAltText: {
+    id: 'Hyperlink.externalLinkAltText',
+    defaultMessage: 'in a new tab'
+  },
+  externalLinkTitle: {
+    id: 'Hyperlink.externalLinkTitle',
+    defaultMessage: 'Opens in a new tab'
+  }
+});
+const Hyperlink = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
+    as: Component = 'a',
     className,
     destination,
     children,
-    target,
+    target = '_self',
     onClick,
     externalLinkAlternativeText,
     externalLinkTitle,
-    variant,
-    isInline,
-    showLaunchIcon,
+    variant = 'default',
+    isInline = false,
+    showLaunchIcon = true,
     ...attrs
   } = _ref;
+  const intl = useIntl();
   let externalLinkIcon;
   if (target === '_blank') {
     const generateRel = () => {
@@ -42,10 +55,10 @@ const Hyperlink = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     if (showLaunchIcon) {
       externalLinkIcon = /*#__PURE__*/React.createElement("span", {
         className: "pgn__hyperlink__external-icon",
-        title: externalLinkTitle
+        title: externalLinkTitle || intl.formatMessage(messages.externalLinkTitle)
       }, /*#__PURE__*/React.createElement(Icon, {
         src: Launch,
-        screenReaderText: externalLinkAlternativeText,
+        screenReaderText: externalLinkAlternativeText || intl.formatMessage(messages.externalLinkAltText),
         style: {
           height: '1em',
           width: '1em'
@@ -54,31 +67,36 @@ const Hyperlink = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       }));
     }
   }
-  return /*#__PURE__*/React.createElement("a", {
+  const additionalProps = {
+    ...attrs
+  };
+  if (destination) {
+    additionalProps.href = destination;
+  }
+  return /*#__PURE__*/React.createElement(Component, {
     ref: ref,
     className: classNames('pgn__hyperlink', `${variant}-link`, {
       'standalone-link': !isInline,
       'inline-link': isInline
     }, className),
-    href: destination,
     target: target,
     onClick: onClick,
-    ...attrs
+    ...additionalProps
   }, children, externalLinkIcon);
 });
-Hyperlink.defaultProps = {
-  className: undefined,
-  target: '_self',
-  onClick: () => {},
-  externalLinkAlternativeText: HYPER_LINK_EXTERNAL_LINK_ALT_TEXT,
-  externalLinkTitle: HYPER_LINK_EXTERNAL_LINK_TITLE,
-  variant: 'default',
-  isInline: false,
-  showLaunchIcon: true
-};
 Hyperlink.propTypes = {
-  /** specifies the URL */
-  destination: PropTypes.string.isRequired,
+  /** specifies the component element type to render for the hyperlink */
+  // @ts-ignore
+  as: PropTypes.elementType,
+  /** specifies the URL; required iff `as` prop is a standard anchor tag */
+  destination: customPropTypeRequirement(PropTypes.string, _ref2 => {
+    let {
+      as
+    } = _ref2;
+    return as && as === 'a';
+  },
+  // "[`destination` is required when]..."
+  'the `as` prop is a standard anchor element (i.e., "a")'),
   /** Content of the hyperlink */
   // @ts-ignore
   children: PropTypes.node.isRequired,
@@ -103,5 +121,18 @@ Hyperlink.propTypes = {
   /** specify if we need to show launch Icon. By default, it will be visible. */
   showLaunchIcon: PropTypes.bool
 };
+Hyperlink.defaultProps = {
+  as: 'a',
+  className: undefined,
+  destination: undefined,
+  externalLinkAlternativeText: undefined,
+  externalLinkTitle: undefined,
+  isInline: false,
+  onClick: undefined,
+  showLaunchIcon: true,
+  target: '_self',
+  variant: 'default'
+};
+Hyperlink.displayName = 'Hyperlink';
 export default Hyperlink;
 //# sourceMappingURL=index.js.map

package/dist/Hyperlink/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","PropTypes","classNames","Launch","Icon","HYPER_LINK_EXTERNAL_LINK_ALT_TEXT","HYPER_LINK_EXTERNAL_LINK_TITLE","Hyperlink","forwardRef","_ref","ref","className","destination","children","target","onClick","externalLinkAlternativeText","externalLinkTitle","variant","isInline","showLaunchIcon","attrs","externalLinkIcon","generateRel","rel","includes","createElement","title","src","screenReaderText","style","height","width","href","defaultProps","undefined","propTypes","string","isRequired","node","oneOf","func","bool"],"sources":["../../src/Hyperlink/index.tsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport { Launch } from '../../icons';\nimport Icon from '../Icon';\n\nexport const HYPER_LINK_EXTERNAL_LINK_ALT_TEXT = 'in a new tab';\nexport const HYPER_LINK_EXTERNAL_LINK_TITLE = 'Opens in a new tab';\n\ninterface Props extends Omit<React.ComponentPropsWithRef<'a'>, 'href' | 'target'> {\n  /** specifies the URL */\n  destination: string;\n  /** Content of the hyperlink */\n  children: React.ReactNode;\n  /** Custom class names for the hyperlink */\n  className?: string;\n  /** Alt text for the icon indicating that this link opens in a new tab, if target=\"_blank\". e.g. _(\"in a new tab\") */\n  externalLinkAlternativeText?: string;\n  /** Tooltip text for the \"opens in new tab\" icon, if target=\"_blank\". e.g. _(\"Opens in a new tab\"). */\n  externalLinkTitle?: string;\n  /** type of hyperlink */\n  variant?: 'default' | 'muted' | 'brand';\n  /** Display the link with an underline. By default, it is only underlined on hover. */\n  isInline?: boolean;\n  /** specify if we need to show launch Icon. By default, it will be visible. */\n  showLaunchIcon?: boolean;\n  target?: '_blank' | '_self';\n}\n\nconst Hyperlink = React.forwardRef<HTMLAnchorElement, Props>(({\n  className,\n  destination,\n  children,\n  target,\n  onClick,\n  externalLinkAlternativeText,\n  externalLinkTitle,\n  variant,\n  isInline,\n  showLaunchIcon,\n  ...attrs\n}, ref) => {\n  let externalLinkIcon;\n\n  if (target === '_blank') {\n    const generateRel = () => {\n      let { rel } = attrs;\n      if (!rel) {\n        return 'noopener noreferrer';\n      }\n      if (!rel.includes('noopener')) {\n        rel += ' noopener';\n      }\n      if (!rel.includes('noreferrer')) {\n        rel += ' noreferrer';\n      }\n      return rel;\n    };\n\n    // Add this rel attribute to prevent Reverse Tabnabbing\n    attrs.rel = generateRel();\n    if (showLaunchIcon) {\n      externalLinkIcon = (\n        <span\n          className=\"pgn__hyperlink__external-icon\"\n          title={externalLinkTitle}\n        >\n          <Icon\n            src={Launch}\n            screenReaderText={externalLinkAlternativeText}\n            style={{ height: '1em', width: '1em' }}\n            data-testid=\"hyperlink-icon\"\n          />\n        </span>\n      );\n    }\n  }\n\n  return (\n    <a\n      ref={ref}\n      className={classNames(\n        'pgn__hyperlink',\n        `${variant}-link`,\n        {\n          'standalone-link': !isInline,\n          'inline-link': isInline,\n        },\n        className,\n      )}\n      href={destination}\n      target={target}\n      onClick={onClick}\n      {...attrs}\n    >\n      {children}\n      {externalLinkIcon}\n    </a>\n  );\n});\n\nHyperlink.defaultProps = {\n  className: undefined,\n  target: '_self',\n  onClick: () => {},\n  externalLinkAlternativeText: HYPER_LINK_EXTERNAL_LINK_ALT_TEXT,\n  externalLinkTitle: HYPER_LINK_EXTERNAL_LINK_TITLE,\n  variant: 'default',\n  isInline: false,\n  showLaunchIcon: true,\n};\n\nHyperlink.propTypes = {\n  /** specifies the URL */\n  destination: PropTypes.string.isRequired,\n  /** Content of the hyperlink */\n  // @ts-ignore\n  children: PropTypes.node.isRequired,\n  /** Custom class names for the hyperlink */\n  className: PropTypes.string,\n  /** specifies where the link should open. The default behavior is `_self`, which means that the URL will be\n   * loaded into the same browsing context as the current one.\n   * If the target is `_blank` (opening a new window) `rel='noopener'` will be added to the anchor tag to prevent\n   * any potential [reverse tabnabbing attack](https://www.owasp.org/index.php/Reverse_Tabnabbing).\n   */\n  target: PropTypes.oneOf(['_blank', '_self']),\n  /** specifies the callback function when the link is clicked */\n  onClick: PropTypes.func,\n  /** Alt text for the icon indicating that this link opens in a new tab, if target=\"_blank\". e.g. _(\"in a new tab\") */\n  externalLinkAlternativeText: PropTypes.string,\n  /** Tooltip text for the \"opens in new tab\" icon, if target=\"_blank\". e.g. _(\"Opens in a new tab\"). */\n  externalLinkTitle: PropTypes.string,\n  /** type of hyperlink */\n  variant: PropTypes.oneOf(['default', 'muted', 'brand']),\n  /** Display the link with an underline. By default, it is only underlined on hover. */\n  isInline: PropTypes.bool,\n  /** specify if we need to show launch Icon. By default, it will be visible. */\n  showLaunchIcon: PropTypes.bool,\n};\n\nexport default Hyperlink;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["React","forwardRef","PropTypes","classNames","defineMessages","useIntl","Launch","Icon","customPropTypeRequirement","messages","externalLinkAltText","id","defaultMessage","externalLinkTitle","Hyperlink","_ref","ref","as","Component","className","destination","children","target","onClick","externalLinkAlternativeText","variant","isInline","showLaunchIcon","attrs","intl","externalLinkIcon","generateRel","rel","includes","createElement","title","formatMessage","src","screenReaderText","style","height","width","additionalProps","href","propTypes","elementType","string","_ref2","node","isRequired","oneOf","func","bool","defaultProps","undefined","displayName"],"sources":["../../src/Hyperlink/index.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport {\n  type BsPrefixRefForwardingComponent as ComponentWithAsProp,\n  type BsPrefixProps,\n} from 'react-bootstrap/esm/helpers';\nimport { defineMessages, useIntl } from 'react-intl';\nimport { Launch } from '../../icons';\nimport Icon from '../Icon';\n// @ts-ignore\nimport { customPropTypeRequirement } from '../utils/propTypes/utils';\n\nexport interface HyperlinkProps extends BsPrefixProps, Omit<React.ComponentPropsWithRef<'a'>, 'href' | 'target'> {\n  /** specifies the URL */\n  destination?: string;\n  /** Content of the hyperlink */\n  children: React.ReactNode;\n  /** Custom class names for the hyperlink */\n  className?: string;\n  /** Alt text for the icon indicating that this link opens in a new tab, if target=\"_blank\". e.g. _(\"in a new tab\") */\n  externalLinkAlternativeText?: string;\n  /** Tooltip text for the \"opens in new tab\" icon, if target=\"_blank\". e.g. _(\"Opens in a new tab\"). */\n  externalLinkTitle?: string;\n  /** type of hyperlink */\n  variant?: 'default' | 'muted' | 'brand';\n  /** Display the link with an underline. By default, it is only underlined on hover. */\n  isInline?: boolean;\n  /** specify if we need to show launch Icon. By default, it will be visible. */\n  showLaunchIcon?: boolean;\n  /** specifies where the link should open. The default behavior is `_self`, which means that the URL will be\n   * loaded into the same browsing context as the current one.\n   * If the target is `_blank` (opening a new window) `rel='noopener'` will be added to the anchor tag to prevent\n   * any potential [reverse tabnabbing attack](https://www.owasp.org/index.php/Reverse_Tabnabbing).\n   */\n  target?: '_blank' | '_self';\n}\n\nexport type HyperlinkType = ComponentWithAsProp<'a', HyperlinkProps>;\n\nconst messages = defineMessages({\n  externalLinkAltText: {\n    id: 'Hyperlink.externalLinkAltText',\n    defaultMessage: 'in a new tab',\n  },\n  externalLinkTitle: {\n    id: 'Hyperlink.externalLinkTitle',\n    defaultMessage: 'Opens in a new tab',\n  },\n});\n\nconst Hyperlink = forwardRef<HTMLAnchorElement, HyperlinkProps>(({\n  as: Component = 'a',\n  className,\n  destination,\n  children,\n  target = '_self',\n  onClick,\n  externalLinkAlternativeText,\n  externalLinkTitle,\n  variant = 'default',\n  isInline = false,\n  showLaunchIcon = true,\n  ...attrs\n}, ref) => {\n  const intl = useIntl();\n  let externalLinkIcon;\n\n  if (target === '_blank') {\n    const generateRel = () => {\n      let { rel } = attrs;\n      if (!rel) {\n        return 'noopener noreferrer';\n      }\n      if (!rel.includes('noopener')) {\n        rel += ' noopener';\n      }\n      if (!rel.includes('noreferrer')) {\n        rel += ' noreferrer';\n      }\n      return rel;\n    };\n\n    // Add this rel attribute to prevent Reverse Tabnabbing\n    attrs.rel = generateRel();\n    if (showLaunchIcon) {\n      externalLinkIcon = (\n        <span\n          className=\"pgn__hyperlink__external-icon\"\n          title={externalLinkTitle || intl.formatMessage(messages.externalLinkTitle)}\n        >\n          <Icon\n            src={Launch}\n            screenReaderText={externalLinkAlternativeText || intl.formatMessage(messages.externalLinkAltText)}\n            style={{ height: '1em', width: '1em' }}\n            data-testid=\"hyperlink-icon\"\n          />\n        </span>\n      );\n    }\n  }\n\n  const additionalProps: Record<string, any> = { ...attrs };\n  if (destination) {\n    additionalProps.href = destination;\n  }\n\n  return (\n    <Component\n      ref={ref}\n      className={classNames(\n        'pgn__hyperlink',\n        `${variant}-link`,\n        {\n          'standalone-link': !isInline,\n          'inline-link': isInline,\n        },\n        className,\n      )}\n      target={target}\n      onClick={onClick}\n      {...additionalProps}\n    >\n      {children}\n      {externalLinkIcon}\n    </Component>\n  );\n});\n\nHyperlink.propTypes = {\n  /** specifies the component element type to render for the hyperlink */\n  // @ts-ignore\n  as: PropTypes.elementType,\n  /** specifies the URL; required iff `as` prop is a standard anchor tag */\n  destination: customPropTypeRequirement(\n    PropTypes.string,\n    ({ as }: { as: React.ElementType }) => as && as === 'a',\n    // \"[`destination` is required when]...\"\n    'the `as` prop is a standard anchor element (i.e., \"a\")',\n  ),\n  /** Content of the hyperlink */\n  // @ts-ignore\n  children: PropTypes.node.isRequired,\n  /** Custom class names for the hyperlink */\n  className: PropTypes.string,\n  /** specifies where the link should open. The default behavior is `_self`, which means that the URL will be\n   * loaded into the same browsing context as the current one.\n   * If the target is `_blank` (opening a new window) `rel='noopener'` will be added to the anchor tag to prevent\n   * any potential [reverse tabnabbing attack](https://www.owasp.org/index.php/Reverse_Tabnabbing).\n   */\n  target: PropTypes.oneOf(['_blank', '_self']),\n  /** specifies the callback function when the link is clicked */\n  onClick: PropTypes.func,\n  /** Alt text for the icon indicating that this link opens in a new tab, if target=\"_blank\". e.g. _(\"in a new tab\") */\n  externalLinkAlternativeText: PropTypes.string,\n  /** Tooltip text for the \"opens in new tab\" icon, if target=\"_blank\". e.g. _(\"Opens in a new tab\"). */\n  externalLinkTitle: PropTypes.string,\n  /** type of hyperlink */\n  variant: PropTypes.oneOf(['default', 'muted', 'brand']),\n  /** Display the link with an underline. By default, it is only underlined on hover. */\n  isInline: PropTypes.bool,\n  /** specify if we need to show launch Icon. By default, it will be visible. */\n  showLaunchIcon: PropTypes.bool,\n};\n\nHyperlink.defaultProps = {\n  as: 'a',\n  className: undefined,\n  destination: undefined,\n  externalLinkAlternativeText: undefined,\n  externalLinkTitle: undefined,\n  isInline: false,\n  onClick: undefined,\n  showLaunchIcon: true,\n  target: '_self',\n  variant: 'default',\n};\n\nHyperlink.displayName = 'Hyperlink';\n\nexport default Hyperlink;\n"],"mappings":"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","ignoreList":[]}

package/dist/index.d.ts

@@ -31,7 +31,7 @@ export {
   FormAutosuggestOption,
   InputGroup,
 } from './Form';
-export { default as Hyperlink, HYPER_LINK_EXTERNAL_LINK_ALT_TEXT, HYPER_LINK_EXTERNAL_LINK_TITLE } from './Hyperlink';
+export { default as Hyperlink } from './Hyperlink';
 export { default as Icon } from './Icon';
 export { default as IconButton, IconButtonWithTooltip } from './IconButton';
 export { default as ModalContext } from './Modal/ModalContext';

package/dist/index.js

@@ -31,7 +31,7 @@ export {
   FormAutosuggestOption,
   InputGroup,
 } from './Form';
-export { default as Hyperlink, HYPER_LINK_EXTERNAL_LINK_ALT_TEXT, HYPER_LINK_EXTERNAL_LINK_TITLE } from './Hyperlink';
+export { default as Hyperlink } from './Hyperlink';
 export { default as Icon } from './Icon';
 export { default as IconButton, IconButtonWithTooltip } from './IconButton';
 export { default as ModalContext } from './Modal/ModalContext';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openedx/paragon",
-  "version": "22.14.0",
+  "version": "22.15.0",
   "description": "Accessible, responsive UI component library based on Bootstrap.",
   "main": "dist/index.js",
   "module": "dist/index.js",

package/src/Button/Button.test.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { IntlProvider } from 'react-intl';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import renderer from 'react-test-renderer';
@@ -96,7 +97,11 @@ describe('<Button />', () => {
       test('test button as hyperlink', () => {
         // eslint-disable-next-line @typescript-eslint/no-unused-vars
         const ref = (_current: HTMLAnchorElement) => {}; // Check typing of a ref - should not show type errors.
-        render(<Button as={Hyperlink} ref={ref} destination="https://www.poop.com/💩">Button</Button>);
+        render(
+          <IntlProvider locale="en">
+            <Button as={Hyperlink} ref={ref} destination="https://www.poop.com/💩">Button</Button>
+          </IntlProvider>,
+        );
         expect(screen.getByRole('link').getAttribute('href')).toEqual('https://www.poop.com/💩');
       });
     });

package/src/Hyperlink/Hyperlink.test.tsx

@@ -1,12 +1,12 @@
-import React from 'react';
+import { IntlProvider } from 'react-intl';
 import { render } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
-import Hyperlink from '.';
+import Hyperlink, { HyperlinkProps } from '.';
 
-const destination = 'destination';
+const destination = 'http://destination.example';
 const content = 'content';
-const onClick = jest.fn();
+const onClick = jest.fn().mockImplementation((e) => e.preventDefault());
 const props = {
   destination,
   onClick,
@@ -20,13 +20,37 @@ const externalLinkProps = {
   ...props,
 };
 
+interface LinkProps extends HyperlinkProps {
+  to: string;
+}
+
+function Link({ to, children, ...rest }: LinkProps) {
+  return (
+    <a
+      data-testid="custom-hyperlink-element"
+      href={to}
+      {...rest}
+    >
+      {children}
+    </a>
+  );
+}
+
+function HyperlinkWrapper({ children, ...rest }: HyperlinkProps) {
+  return (
+    <IntlProvider locale="en">
+      <Hyperlink {...rest}>{children}</Hyperlink>
+    </IntlProvider>
+  );
+}
+
 describe('correct rendering', () => {
   beforeEach(() => {
-    onClick.mockClear();
+    jest.clearAllMocks();
   });
 
   it('renders Hyperlink', async () => {
-    const { getByRole } = render(<Hyperlink {...props}>{content}</Hyperlink>);
+    const { getByRole } = render(<HyperlinkWrapper {...props}>{content}</HyperlinkWrapper>);
     const wrapper = getByRole('link');
     expect(wrapper).toBeInTheDocument();
 
@@ -36,12 +60,29 @@ describe('correct rendering', () => {
     expect(wrapper).toHaveAttribute('href', destination);
     expect(wrapper).toHaveAttribute('target', '_self');
 
+    // Clicking on the link should call the onClick handler
     await userEvent.click(wrapper);
     expect(onClick).toHaveBeenCalledTimes(1);
   });
 
+  it('renders with custom element type via "as" prop', () => {
+    const propsWithoutDestination = {
+      to: destination, // `to` simulates common `Link` components' prop
+    };
+    const { getByRole } = render(<HyperlinkWrapper as={Link} {...propsWithoutDestination}>{content}</HyperlinkWrapper>);
+    const wrapper = getByRole('link');
+    expect(wrapper).toBeInTheDocument();
+
+    expect(wrapper).toHaveClass('pgn__hyperlink');
+    expect(wrapper).toHaveClass('standalone-link');
+    expect(wrapper).toHaveTextContent(content);
+    expect(wrapper).toHaveAttribute('href', destination);
+    expect(wrapper).toHaveAttribute('target', '_self');
+    expect(wrapper).toHaveAttribute('data-testid', 'custom-hyperlink-element');
+  });
+
   it('renders an underlined Hyperlink', async () => {
-    const { getByRole } = render(<Hyperlink isInline {...props}>{content}</Hyperlink>);
+    const { getByRole } = render(<HyperlinkWrapper isInline {...props}>{content}</HyperlinkWrapper>);
     const wrapper = getByRole('link');
     expect(wrapper).toBeInTheDocument();
     expect(wrapper).toHaveClass('pgn__hyperlink');
@@ -50,7 +91,7 @@ describe('correct rendering', () => {
   });
 
   it('renders external Hyperlink', () => {
-    const { getByRole, getByTestId } = render(<Hyperlink {...externalLinkProps}>{content}</Hyperlink>);
+    const { getByRole, getByTestId } = render(<HyperlinkWrapper {...externalLinkProps}>{content}</HyperlinkWrapper>);
     const wrapper = getByRole('link');
     const icon = getByTestId('hyperlink-icon');
     const iconSvg = icon.querySelector('svg');
@@ -66,19 +107,8 @@ describe('correct rendering', () => {
 
 describe('security', () => {
   it('prevents reverse tabnabbing for links with target="_blank"', () => {
-    const { getByRole } = render(<Hyperlink {...externalLinkProps}>{content}</Hyperlink>);
+    const { getByRole } = render(<HyperlinkWrapper {...externalLinkProps}>{content}</HyperlinkWrapper>);
     const wrapper = getByRole('link');
     expect(wrapper).toHaveAttribute('rel', 'noopener noreferrer');
   });
 });
-
-describe('event handlers are triggered correctly', () => {
-  it('should fire onClick', async () => {
-    const spy = jest.fn();
-    const { getByRole } = render(<Hyperlink {...props} onClick={spy}>{content}</Hyperlink>);
-    const wrapper = getByRole('link');
-    expect(spy).toHaveBeenCalledTimes(0);
-    await userEvent.click(wrapper);
-    expect(spy).toHaveBeenCalledTimes(1);
-  });
-});

package/src/Hyperlink/README.md

@@ -7,7 +7,7 @@ categories:
 - Buttonlike
 status: 'Needs Work'
 designStatus: 'Done'
-devStatus: 'To Do'
+devStatus: 'Done'
 notes: |
   Improve prop naming. Deprecate content prop.
   Use React.forwardRef for ref forwarding.
@@ -100,3 +100,16 @@ notes: |
   </div>
 </div>
 ```
+
+## with custom link element (e.g., using a router)
+
+``Hyperlink`` typically relies on the standard HTML anchor tag (i.e., ``a``); however, this behavior may be overriden when the destination link is to an internal route where it should be using routing instead (e.g., ``Link`` from React Router).
+
+```jsx live
+<Hyperlink
+  as={GatsbyLink}
+  to="/components/button"
+>
+  Button
+</Hyperlink>
+```

package/src/Hyperlink/index.tsx

@@ -1,15 +1,19 @@
-import React from 'react';
+import React, { forwardRef } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
+import {
+  type BsPrefixRefForwardingComponent as ComponentWithAsProp,
+  type BsPrefixProps,
+} from 'react-bootstrap/esm/helpers';
+import { defineMessages, useIntl } from 'react-intl';
 import { Launch } from '../../icons';
 import Icon from '../Icon';
+// @ts-ignore
+import { customPropTypeRequirement } from '../utils/propTypes/utils';
 
-export const HYPER_LINK_EXTERNAL_LINK_ALT_TEXT = 'in a new tab';
-export const HYPER_LINK_EXTERNAL_LINK_TITLE = 'Opens in a new tab';
-
-interface Props extends Omit<React.ComponentPropsWithRef<'a'>, 'href' | 'target'> {
+export interface HyperlinkProps extends BsPrefixProps, Omit<React.ComponentPropsWithRef<'a'>, 'href' | 'target'> {
   /** specifies the URL */
-  destination: string;
+  destination?: string;
   /** Content of the hyperlink */
   children: React.ReactNode;
   /** Custom class names for the hyperlink */
@@ -24,22 +28,42 @@ interface Props extends Omit<React.ComponentPropsWithRef<'a'>, 'href' | 'target'
   isInline?: boolean;
   /** specify if we need to show launch Icon. By default, it will be visible. */
   showLaunchIcon?: boolean;
+  /** specifies where the link should open. The default behavior is `_self`, which means that the URL will be
+   * loaded into the same browsing context as the current one.
+   * If the target is `_blank` (opening a new window) `rel='noopener'` will be added to the anchor tag to prevent
+   * any potential [reverse tabnabbing attack](https://www.owasp.org/index.php/Reverse_Tabnabbing).
+   */
   target?: '_blank' | '_self';
 }
 
-const Hyperlink = React.forwardRef<HTMLAnchorElement, Props>(({
+export type HyperlinkType = ComponentWithAsProp<'a', HyperlinkProps>;
+
+const messages = defineMessages({
+  externalLinkAltText: {
+    id: 'Hyperlink.externalLinkAltText',
+    defaultMessage: 'in a new tab',
+  },
+  externalLinkTitle: {
+    id: 'Hyperlink.externalLinkTitle',
+    defaultMessage: 'Opens in a new tab',
+  },
+});
+
+const Hyperlink = forwardRef<HTMLAnchorElement, HyperlinkProps>(({
+  as: Component = 'a',
   className,
   destination,
   children,
-  target,
+  target = '_self',
   onClick,
   externalLinkAlternativeText,
   externalLinkTitle,
-  variant,
-  isInline,
-  showLaunchIcon,
+  variant = 'default',
+  isInline = false,
+  showLaunchIcon = true,
   ...attrs
 }, ref) => {
+  const intl = useIntl();
   let externalLinkIcon;
 
   if (target === '_blank') {
@@ -63,11 +87,11 @@ const Hyperlink = React.forwardRef<HTMLAnchorElement, Props>(({
       externalLinkIcon = (
         <span
           className="pgn__hyperlink__external-icon"
-          title={externalLinkTitle}
+          title={externalLinkTitle || intl.formatMessage(messages.externalLinkTitle)}
         >
           <Icon
             src={Launch}
-            screenReaderText={externalLinkAlternativeText}
+            screenReaderText={externalLinkAlternativeText || intl.formatMessage(messages.externalLinkAltText)}
             style={{ height: '1em', width: '1em' }}
             data-testid="hyperlink-icon"
           />
@@ -76,8 +100,13 @@ const Hyperlink = React.forwardRef<HTMLAnchorElement, Props>(({
     }
   }
 
+  const additionalProps: Record<string, any> = { ...attrs };
+  if (destination) {
+    additionalProps.href = destination;
+  }
+
   return (
-    <a
+    <Component
       ref={ref}
       className={classNames(
         'pgn__hyperlink',
@@ -88,31 +117,27 @@ const Hyperlink = React.forwardRef<HTMLAnchorElement, Props>(({
         },
         className,
       )}
-      href={destination}
       target={target}
       onClick={onClick}
-      {...attrs}
+      {...additionalProps}
     >
       {children}
       {externalLinkIcon}
-    </a>
+    </Component>
   );
 });
 
-Hyperlink.defaultProps = {
-  className: undefined,
-  target: '_self',
-  onClick: () => {},
-  externalLinkAlternativeText: HYPER_LINK_EXTERNAL_LINK_ALT_TEXT,
-  externalLinkTitle: HYPER_LINK_EXTERNAL_LINK_TITLE,
-  variant: 'default',
-  isInline: false,
-  showLaunchIcon: true,
-};
-
 Hyperlink.propTypes = {
-  /** specifies the URL */
-  destination: PropTypes.string.isRequired,
+  /** specifies the component element type to render for the hyperlink */
+  // @ts-ignore
+  as: PropTypes.elementType,
+  /** specifies the URL; required iff `as` prop is a standard anchor tag */
+  destination: customPropTypeRequirement(
+    PropTypes.string,
+    ({ as }: { as: React.ElementType }) => as && as === 'a',
+    // "[`destination` is required when]..."
+    'the `as` prop is a standard anchor element (i.e., "a")',
+  ),
   /** Content of the hyperlink */
   // @ts-ignore
   children: PropTypes.node.isRequired,
@@ -138,4 +163,19 @@ Hyperlink.propTypes = {
   showLaunchIcon: PropTypes.bool,
 };
 
+Hyperlink.defaultProps = {
+  as: 'a',
+  className: undefined,
+  destination: undefined,
+  externalLinkAlternativeText: undefined,
+  externalLinkTitle: undefined,
+  isInline: false,
+  onClick: undefined,
+  showLaunchIcon: true,
+  target: '_self',
+  variant: 'default',
+};
+
+Hyperlink.displayName = 'Hyperlink';
+
 export default Hyperlink;

package/src/MailtoLink/MailtoLink.test.jsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { render } from '@testing-library/react';
+import { IntlProvider } from 'react-intl';
 
 import MailtoLink from '.';
 
@@ -11,10 +12,18 @@ const content = 'content';
 
 const baseProps = { subject, body, content };
 
+function MailtoLinkWrapper(props) {
+  return (
+    <IntlProvider locale="en">
+      <MailtoLink {...props} />
+    </IntlProvider>
+  );
+}
+
 describe('correct rendering', () => {
   it('renders MailtoLink with single to, cc, and bcc recipient', () => {
     const singleRecipientLink = (
-      <MailtoLink
+      <MailtoLinkWrapper
         {...baseProps}
         to={emailAddress}
         cc={emailAddress}
@@ -31,7 +40,7 @@ describe('correct rendering', () => {
 
   it('renders mailtoLink with many to, cc, and bcc recipients', () => {
     const multiRecipientLink = (
-      <MailtoLink
+      <MailtoLinkWrapper
         {...baseProps}
         to={emailAddresses}
         cc={emailAddresses}
@@ -46,7 +55,7 @@ describe('correct rendering', () => {
   });
 
   it('renders empty mailtoLink', () => {
-    const { getByText } = render(<MailtoLink content={content} />);
+    const { getByText } = render(<MailtoLinkWrapper content={content} />);
     const linkElement = getByText('content');
     expect(linkElement.getAttribute('href')).toEqual('mailto:');
   });

package/src/Menu/Menu.test.jsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { IntlProvider } from 'react-intl';
 import { render, screen } from '@testing-library/react';
 import renderer from 'react-test-renderer';
 import userEvent from '@testing-library/user-event';
@@ -20,15 +21,17 @@ describe('Menu Item renders correctly', () => {
 
   it('renders as expected with menu items', () => {
     const tree = renderer.create((
-      <Menu>
-        <MenuItem> A Menu Item</MenuItem>
-        <MenuItem iconBefore={Add} stoven>A Menu Item With an Icon Before</MenuItem>
-        <MenuItem iconAfter={Check}>A Menu Item With an Icon After </MenuItem>
-        <MenuItem disabled>A Disabled Menu Item</MenuItem>
-        <MenuItem as={Hyperlink} destination="https://en.wikipedia.org/wiki/Hyperlink">A Link Menu Item</MenuItem>
-        <MenuItem as={Button} variant="primary" size="inline">A Button Menu Item</MenuItem>
-        <MenuItem as={Form.Checkbox}>A Checkbox Menu Item</MenuItem>
-      </Menu>
+      <IntlProvider locale="en">
+        <Menu>
+          <MenuItem> A Menu Item</MenuItem>
+          <MenuItem iconBefore={Add} stoven>A Menu Item With an Icon Before</MenuItem>
+          <MenuItem iconAfter={Check}>A Menu Item With an Icon After </MenuItem>
+          <MenuItem disabled>A Disabled Menu Item</MenuItem>
+          <MenuItem as={Hyperlink} destination="https://en.wikipedia.org/wiki/Hyperlink">A Link Menu Item</MenuItem>
+          <MenuItem as={Button} variant="primary" size="inline">A Button Menu Item</MenuItem>
+          <MenuItem as={Form.Checkbox}>A Checkbox Menu Item</MenuItem>
+        </Menu>
+      </IntlProvider>
     )).toJSON();
     expect(tree).toMatchSnapshot();
   });

package/src/Menu/SelectMenu.test.jsx

@@ -1,4 +1,6 @@
 import React from 'react';
+import { IntlProvider } from 'react-intl';
+import PropTypes from 'prop-types';
 import { render, screen } from '@testing-library/react';
 import renderer from 'react-test-renderer';
 import userEvent from '@testing-library/user-event';
@@ -10,27 +12,44 @@ import Hyperlink from '../Hyperlink';
 const app = document.createElement('div');
 document.body.appendChild(app);
 
+function SelectMenuWrapper({ children }) {
+  return (
+    <IntlProvider locale="en">
+      {children}
+    </IntlProvider>
+  );
+}
+SelectMenuWrapper.propTypes = {
+  children: PropTypes.node.isRequired,
+};
+
 function DefaultSelectMenu(props) {
-  return <SelectMenu {...props}><MenuItem>A Menu Item</MenuItem></SelectMenu>;
+  return (
+    <SelectMenuWrapper>
+      <SelectMenu {...props}><MenuItem>A Menu Item</MenuItem></SelectMenu>
+    </SelectMenuWrapper>
+  );
 }
 
 function defaultSelectMenu() {
   return (
-    <SelectMenu>
-      <MenuItem>A Menu Item</MenuItem>
-      <MenuItem iconBefore={Add}>A Menu Item With an Icon Before</MenuItem>
-      <MenuItem iconAfter={Check}>A Menu Item With an Icon After </MenuItem>
-      <MenuItem disabled>A Disabled Menu Item</MenuItem>
-      <MenuItem as={Hyperlink} destination="https://en.wikipedia.org/wiki/Hyperlink">A Link Menu Item</MenuItem>
-      <MenuItem>Falstaff</MenuItem>
-      <MenuItem>Scipio</MenuItem>
-      <MenuItem>Faustus</MenuItem>
-      <MenuItem>Cordelia</MenuItem>
-      <MenuItem>Renfrancine</MenuItem>
-      <MenuItem>Stovern</MenuItem>
-      <MenuItem>Kainian</MenuItem>
-      <MenuItem>M. Hortens</MenuItem>
-    </SelectMenu>
+    <SelectMenuWrapper>
+      <SelectMenu>
+        <MenuItem>A Menu Item</MenuItem>
+        <MenuItem iconBefore={Add}>A Menu Item With an Icon Before</MenuItem>
+        <MenuItem iconAfter={Check}>A Menu Item With an Icon After </MenuItem>
+        <MenuItem disabled>A Disabled Menu Item</MenuItem>
+        <MenuItem as={Hyperlink} destination="https://en.wikipedia.org/wiki/Hyperlink">A Link Menu Item</MenuItem>
+        <MenuItem>Falstaff</MenuItem>
+        <MenuItem>Scipio</MenuItem>
+        <MenuItem>Faustus</MenuItem>
+        <MenuItem>Cordelia</MenuItem>
+        <MenuItem>Renfrancine</MenuItem>
+        <MenuItem>Stovern</MenuItem>
+        <MenuItem>Kainian</MenuItem>
+        <MenuItem>M. Hortens</MenuItem>
+      </SelectMenu>
+    </SelectMenuWrapper>
   );
 }
 

package/src/Menu/__snapshots__/Menu.test.jsx.snap

@@ -95,7 +95,6 @@ exports[`Menu Item renders correctly renders as expected with menu items 1`] = `
   <a
     className="pgn__hyperlink default-link standalone-link pgn__menu-item"
     href="https://en.wikipedia.org/wiki/Hyperlink"
-    onClick={[Function]}
     target="_self"
   >
     <span

package/src/index.d.ts

@@ -31,7 +31,7 @@ export {
   FormAutosuggestOption,
   InputGroup,
 } from './Form';
-export { default as Hyperlink, HYPER_LINK_EXTERNAL_LINK_ALT_TEXT, HYPER_LINK_EXTERNAL_LINK_TITLE } from './Hyperlink';
+export { default as Hyperlink } from './Hyperlink';
 export { default as Icon } from './Icon';
 export { default as IconButton, IconButtonWithTooltip } from './IconButton';
 export { default as ModalContext } from './Modal/ModalContext';

package/src/index.js

@@ -31,7 +31,7 @@ export {
   FormAutosuggestOption,
   InputGroup,
 } from './Form';
-export { default as Hyperlink, HYPER_LINK_EXTERNAL_LINK_ALT_TEXT, HYPER_LINK_EXTERNAL_LINK_TITLE } from './Hyperlink';
+export { default as Hyperlink } from './Hyperlink';
 export { default as Icon } from './Icon';
 export { default as IconButton, IconButtonWithTooltip } from './IconButton';
 export { default as ModalContext } from './Modal/ModalContext';