@workday/canvas-kit-react
Version:
The parent module that contains all Workday Canvas Kit React components
26 lines (25 loc) • 2.58 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.Hyperlink = exports.hyperlinkStencil = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const common_1 = require("@workday/canvas-kit-react/common");
const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
exports.hyperlinkStencil = (0, canvas_kit_styling_1.createStencil)({
base: { name: "3reght", styles: "box-sizing:border-box;font-family:var(--cnvs-sys-font-family-default);text-decoration:underline;color:var(--cnvs-sys-color-text-primary-default);cursor:pointer;border-radius:var(--cnvs-sys-shape-half);padding:0 0.125rem ;margin:0 -2px;transition:color 0.15s,background-color 0.15s;word-break:break-word;&:hover, &.hover{color:var(--cnvs-sys-color-text-primary-strong);background:var(--cnvs-sys-color-bg-alt-soft);}&:focus, &.focus, &:focus-visible{box-shadow:0 0 0 0.125rem var(--cnvs-brand-common-focus-outline);outline:none;}&:active, &.active{color:var(--cnvs-sys-color-text-primary-stronger);background:var(--cnvs-sys-color-bg-alt-default);}" },
modifiers: {
variant: {
inverse: { name: "25rkj1", styles: "color:var(--cnvs-sys-color-text-inverse);&:hover, &.hover{color:var(--cnvs-sys-color-text-inverse);background:rgba(255, 255, 255, 0.1);}&:focus, &.focus, &:focus-visible{box-shadow:0 0 0 0.125rem var(--cnvs-sys-color-text-inverse);}&:active, &.active{color:var(--cnvs-sys-color-text-primary-stronger);background:var(--cnvs-sys-color-bg-alt-soft);}" },
standalone: { name: "3n10et", styles: "text-decoration:none;" },
standaloneInverse: { name: "1sjj4h", styles: "text-decoration:none;color:var(--cnvs-sys-color-text-inverse);&:hover, &.hover{color:var(--cnvs-sys-color-text-inverse);background:rgba(255, 255, 255, 0.1);}&:focus, &.focus, &:focus-visible{box-shadow:0 0 0 0.125rem var(--cnvs-sys-color-text-inverse);}&:active, &.active{color:var(--cnvs-sys-color-text-primary-stronger);background:var(--cnvs-sys-color-bg-alt-soft);}" }
}
}
}, "hyperlink-7be9df");
/**
* `Hyperlink`s should be used when you want to navigate away from the current page or to an anchor
* on the current page.
*/
exports.Hyperlink = (0, common_1.createComponent)('a')({
displayName: 'Hyperlink',
Component: ({ children, variant, ...elemProps }, ref, Element) => ((0, jsx_runtime_1.jsx)(Element, { ref: ref, ...(0, canvas_kit_styling_1.handleCsProp)(elemProps, (0, exports.hyperlinkStencil)({ variant })), children: children })),
});