@workday/canvas-kit-react
Version:
The parent module that contains all Workday Canvas Kit React components
23 lines (22 loc) • 2.38 kB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
import { createComponent } from '@workday/canvas-kit-react/common';
import { createStencil, cssVar, handleCsProp, px2rem } from '@workday/canvas-kit-styling';
import { system, brand } from '@workday/canvas-tokens-web';
export const hyperlinkStencil = 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.
*/
export const Hyperlink = createComponent('a')({
displayName: 'Hyperlink',
Component: ({ children, variant, ...elemProps }, ref, Element) => (_jsx(Element, { ref: ref, ...handleCsProp(elemProps, hyperlinkStencil({ variant })), children: children })),
});