@workday/canvas-kit-react
Version:
The parent module that contains all Workday Canvas Kit React components
104 lines (103 loc) • 8.3 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.TertiaryButton = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const BaseButton_1 = require("./BaseButton");
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");
const Button_1 = require("./Button");
const icon_1 = require("@workday/canvas-kit-react/icon");
const tertiaryButtonStencil = (0, canvas_kit_styling_1.createStencil)({
extends: BaseButton_1.buttonStencil,
// Base Styles
base: { name: "1r2te3", styles: "box-sizing:border-box;padding-inline:var(--cnvs-sys-space-x2);min-width:auto;text-decoration:underline;border:var(--cnvs-sys-space-zero);--background-button-65cb05:transparent;--borderRadius-button-65cb05:var(--cnvs-sys-shape-x1);--label-button-65cb05:var(--cnvs-brand-primary-base);--color-system-icon-99ce3e:var(--icon-b5fb58, var(--cnvs-brand-primary-base));&:focus-visible, &.focus{--background-button-65cb05:transparent;--label-button-65cb05:var(--cnvs-brand-primary-base);--boxShadowInner-button-65cb05:var(--cnvs-brand-common-focus-outline);--boxShadowOuter-button-65cb05:var(--cnvs-brand-common-focus-outline);--color-system-icon-99ce3e:var(--icon-2ae7b1, var(--cnvs-brand-primary-base));box-shadow:0 0 0 0px var(--cnvs-sys-color-border-inverse), 0 0 0 2px var(--cnvs-brand-common-focus-outline);}&:hover, &.hover{--background-button-65cb05:var(--cnvs-sys-color-bg-alt-default);--label-button-65cb05:var(--cnvs-brand-primary-dark);--color-system-icon-99ce3e:var(--icon-c4b8f8, var(--cnvs-brand-primary-dark));}&:active, &.active{--background-button-65cb05:var(--cnvs-sys-color-bg-alt-strong);--label-button-65cb05:var(--cnvs-brand-primary-darkest);--color-system-icon-99ce3e:var(--icon-93b1ce, var(--cnvs-brand-primary-darkest));}&:disabled, &.disabled{--background-button-65cb05:transparent;--label-button-65cb05:var(--cnvs-brand-primary-base);--opacity-button-65cb05:var(--cnvs-sys-opacity-disabled);--color-system-icon-99ce3e:var(--icon-93b1ce, var(--cnvs-brand-primary-base));}" },
modifiers: {
// IconPosition Styles
iconPosition: {
only: { name: "2n7q8r", styles: "padding:0;border-radius:var(--cnvs-sys-shape-round);--color-system-icon-99ce3e:var(--icon-b5fb58, var(--cnvs-sys-color-fg-strong));&:focus-visible, &.focus{--color-system-icon-99ce3e:var(--icon-2ae7b1, var(--cnvs-sys-color-fg-strong));}&:hover, &.hover{--color-system-icon-99ce3e:var(--icon-c4b8f8, var(--cnvs-sys-color-fg-strong));}&:active, &.active{--color-system-icon-99ce3e:var(--icon-93b1ce, var(--cnvs-sys-color-fg-strong));}&:disabled, &.disabled{--color-system-icon-99ce3e:var(--icon-c34400, var(--cnvs-sys-color-fg-strong));}" },
start: { name: "2geobg", styles: "" },
end: { name: "2g7x1z", styles: "" }
},
isThemeable: {
true: { name: "2d2za4", styles: "--color-system-icon-99ce3e:var(--icon-b5fb58, var(--cnvs-brand-primary-base));&:focus-visible, &.focus{--color-system-icon-99ce3e:var(--icon-2ae7b1, var(--cnvs-brand-primary-base));}&:hover, &.hover{--color-system-icon-99ce3e:var(--icon-c4b8f8, var(--cnvs-brand-primary-dark));}&:active, &.active{--color-system-icon-99ce3e:var(--icon-93b1ce, var(--cnvs-brand-primary-darkest));}&:disabled, &.disabled{--color-system-icon-99ce3e:var(--icon-c34400, var(--cnvs-brand-primary-base));}" }
},
variant: {
// Inverse Styles
inverse: { name: "2x4vd0", styles: "--background-button-65cb05:transparent;--label-button-65cb05:var(--cnvs-sys-color-fg-inverse);--color-system-icon-99ce3e:var(--icon-b5fb58, var(--cnvs-sys-color-fg-inverse));&:focus-visible, &.focus{--background-button-65cb05:var(--cnvs-sys-color-bg-default);--label-button-65cb05:var(--cnvs-sys-color-fg-strong);--color-system-icon-99ce3e:var(--icon-2ae7b1, var(--cnvs-sys-color-fg-strong));box-shadow:inset 0 0 0 2px var(--cnvs-sys-color-border-contrast-default), 0 0 0 2px var(--cnvs-sys-color-border-inverse);}&:hover, &.hover{--background-button-65cb05:var(--cnvs-sys-color-bg-default);--label-button-65cb05:var(--cnvs-sys-color-fg-strong);--color-system-icon-99ce3e:var(--icon-c4b8f8, var(--cnvs-sys-color-fg-strong));}&:active, &.active{--background-button-65cb05:var(--cnvs-sys-color-bg-alt-soft);--label-button-65cb05:var(--cnvs-sys-color-fg-strong);--color-system-icon-99ce3e:var(--icon-93b1ce, var(--cnvs-sys-color-fg-strong));}&:disabled, &.disabled{--background-button-65cb05:transparent;--label-button-65cb05:var(--cnvs-sys-color-fg-inverse);--color-system-icon-99ce3e:var(--icon-c34400, var(--cnvs-sys-color-fg-inverse));}" }
}
},
// Compound Modifier Styles
compound: [
{
modifiers: { size: 'large', iconPosition: 'only' },
styles: { name: "4eof2o", styles: "min-width:calc(var(--cnvs-sys-space-x4) * 3);" }
},
{
modifiers: { size: 'large', iconPosition: 'start' },
styles: { name: "3dn1jg", styles: "padding-inline-start:var(--cnvs-sys-space-x2);padding-inline-end:var(--cnvs-sys-space-x3);" }
},
{
modifiers: { size: 'large', iconPosition: 'end' },
styles: { name: "4aec0", styles: "padding-inline-start:var(--cnvs-sys-space-x3);padding-inline-end:var(--cnvs-sys-space-x2);" }
},
{
modifiers: { size: 'medium', iconPosition: 'only' },
styles: { name: "44ci0s", styles: "min-width:var(--cnvs-sys-space-x10);" }
},
{
modifiers: { size: 'medium', iconPosition: 'start' },
styles: { name: "2g0co0", styles: "padding-inline-start:var(--cnvs-sys-space-x2);padding-inline-end:var(--cnvs-sys-space-x3);" }
},
{
modifiers: { size: 'medium', iconPosition: 'end' },
styles: { name: "2ghof3", styles: "padding-inline-start:var(--cnvs-sys-space-x3);padding-inline-end:var(--cnvs-sys-space-x2);" }
},
{
modifiers: { size: 'small', iconPosition: 'only' },
styles: { name: "10dfuh", styles: "min-width:var(--cnvs-sys-space-x8);" }
},
{
modifiers: { size: 'small', iconPosition: 'start' },
styles: { name: "44jvmd", styles: "padding-inline-start:var(--cnvs-sys-space-x2);padding-inline-end:var(--cnvs-sys-space-x3);" }
},
{
modifiers: { size: 'small', iconPosition: 'end' },
styles: { name: "21j52k", styles: "padding-inline-start:var(--cnvs-sys-space-x3);padding-inline-end:var(--cnvs-sys-space-x2);" }
},
{
modifiers: { size: 'extraSmall', iconPosition: 'only' },
styles: { name: "3q9sgc", styles: "min-width:var(--cnvs-sys-space-x6);" }
},
{
modifiers: { size: 'extraSmall', iconPosition: 'start' },
styles: { name: "33v4lm", styles: "padding-inline-start:var(--cnvs-sys-space-x1);padding-inline-end:var(--cnvs-sys-space-x2);" }
},
{
modifiers: { size: 'extraSmall', iconPosition: 'end' },
styles: { name: "38k36n", styles: "padding-inline-start:var(--cnvs-sys-space-x2);padding-inline-end:var(--cnvs-sys-space-x1);" }
}
]
}, "tertiary-button-0f9188");
exports.TertiaryButton = (0, common_1.createComponent)('button')({
displayName: 'TertiaryButton',
Component: ({ children, icon, isThemeable, size = 'medium', variant, iconPosition, grow, cs, ...elemProps }, ref, Element) => {
const baseIconPosition = iconPosition
? iconPosition
: icon
? children
? 'start'
: 'only'
: undefined;
return ((0, jsx_runtime_1.jsx)(Button_1.Button, { as: Element, ref: ref, icon: icon, size: size, iconPosition: iconPosition, grow: grow, cs: [
tertiaryButtonStencil({
size,
variant,
grow,
isThemeable: (isThemeable || baseIconPosition !== 'only'),
iconPosition: baseIconPosition,
}),
cs,
], ...elemProps, children: children }));
},
});