@workday/canvas-kit-react/dist/es6/button/lib/ExternalHyperlink.js

The parent module that contains all Workday Canvas Kit React components

import React from 'react';
import { styled, createComponent } from '@workday/canvas-kit-react/common';
import { extLinkIcon } from '@workday/canvas-system-icons-web';
import { SystemIcon, systemIconStyles } from '@workday/canvas-kit-react/icon';
import { Hyperlink } from './Hyperlink';
const iconStyles = {
    ...systemIconStyles({ fill: 'currentColor', fillHover: 'currentColor' }),
};
const Anchor = styled(Hyperlink)({
    ...iconStyles,
    display: 'inline-flex',
    flexDirection: 'row',
    alignItems: 'center',
});
const iconSize = '1em';
const minIconSize = '16px';
const StyledSystemIcon = styled(SystemIcon)({
    ...iconStyles,
    width: `calc(${iconSize} - 1px)`,
    minWidth: `calc(${minIconSize} - 1px)`,
    marginLeft: '2px',
});
/**
 * `ExternalHyperlink`s also have an `inverse` variant. Use this variant when you need to place the
 * link on a dark or colorful background such as `blueberry400`.
 */
export const ExternalHyperlink = createComponent('a')({
    displayName: 'ExternalHyperlink',
    Component: ({ children, iconLabel = 'Opens link in new window', ...elemProps }, ref) => (React.createElement(Anchor, { ref: ref, target: "_blank", rel: "noreferrer", ...elemProps },
        React.createElement("span", null, children),
        React.createElement(StyledSystemIcon, { icon: extLinkIcon, role: "img", "aria-label": iconLabel, size: iconSize, cs: { '& svg': { minWidth: minIconSize, minHeight: minIconSize } } }))),
});