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

The parent module that contains all Workday Canvas Kit React components

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.ExternalHyperlink = void 0;
const react_1 = __importDefault(require("react"));
const common_1 = require("@workday/canvas-kit-react/common");
const canvas_system_icons_web_1 = require("@workday/canvas-system-icons-web");
const icon_1 = require("@workday/canvas-kit-react/icon");
const Hyperlink_1 = require("./Hyperlink");
const iconStyles = {
    ...(0, icon_1.systemIconStyles)({ fill: 'currentColor', fillHover: 'currentColor' }),
};
const Anchor = (0, common_1.styled)(Hyperlink_1.Hyperlink)({
    ...iconStyles,
    display: 'inline-flex',
    flexDirection: 'row',
    alignItems: 'center',
});
const iconSize = '1em';
const minIconSize = '16px';
const StyledSystemIcon = (0, common_1.styled)(icon_1.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`.
 */
exports.ExternalHyperlink = (0, common_1.createComponent)('a')({
    displayName: 'ExternalHyperlink',
    Component: ({ children, iconLabel = 'Opens link in new window', ...elemProps }, ref) => (react_1.default.createElement(Anchor, { ref: ref, target: "_blank", rel: "noreferrer", ...elemProps },
        react_1.default.createElement("span", null, children),
        react_1.default.createElement(StyledSystemIcon, { icon: canvas_system_icons_web_1.extLinkIcon, role: "img", "aria-label": iconLabel, size: iconSize, cs: { '& svg': { minWidth: minIconSize, minHeight: minIconSize } } }))),
});