@workday/canvas-kit-react
Version:
The parent module that contains all Workday Canvas Kit React components
100 lines (99 loc) • 7.42 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: "gyql0", styles: "box-sizing:border-box;padding-inline:var(--cnvs-sys-space-x2);min-width:auto;border-width:0.125rem;--borderRadius-button-85bf0e:var(--cnvs-sys-shape-round);--background-button-85bf0e:var(--cnvs-sys-color-bg-transparent-default);--label-button-85bf0e:var(--cnvs-brand-primary-base);--color-system-icon-3a4847:var(--icon-a1b49d, currentColor);&:focus-visible, &.focus{--background-button-85bf0e:var(--cnvs-sys-color-bg-transparent-default);--label-button-85bf0e:var(--cnvs-brand-primary-base);--color-system-icon-3a4847:var(--icon-553b51, currentColor);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-85bf0e:var(--cnvs-sys-color-bg-alt-soft);--label-button-85bf0e:var(--cnvs-brand-primary-dark);--color-system-icon-3a4847:var(--icon-846e8f, currentColor);text-decoration:underline;}&:active, &.active{--background-button-85bf0e:var(--cnvs-sys-color-bg-alt-default);--label-button-85bf0e:var(--cnvs-brand-primary-darkest);--color-system-icon-3a4847:var(--icon-3abb65, currentColor);text-decoration:underline;}&:disabled, &.disabled{--background-button-85bf0e:var(--cnvs-sys-color-bg-transparent-default);--label-button-85bf0e:var(--cnvs-brand-primary-base);--opacity-button-85bf0e:var(--cnvs-sys-opacity-disabled);--color-system-icon-3a4847:var(--icon-74b26e, currentColor);}" },
modifiers: {
// IconPosition Styles
iconPosition: {
only: { name: "1hm0gx", styles: "padding:0;--color-system-icon-3a4847:var(--icon-a1b49d, var(--cnvs-sys-color-fg-strong));&:focus-visible, &.focus{--color-system-icon-3a4847:var(--icon-553b51, var(--cnvs-sys-color-fg-strong));}&:hover, &.hover{--color-system-icon-3a4847:var(--icon-846e8f, var(--cnvs-sys-color-fg-strong));}&:active, &.active{--color-system-icon-3a4847:var(--icon-3abb65, var(--cnvs-sys-color-fg-strong));}&:disabled, &.disabled{--color-system-icon-3a4847:var(--icon-74b26e, var(--cnvs-sys-color-fg-strong));}" },
start: { name: "2nr0i1", styles: "" },
end: { name: "2xr7bf", styles: "" }
},
variant: {
// Inverse Styles
inverse: { name: "1l7511", styles: "--background-button-85bf0e:transparent;--label-button-85bf0e:var(--cnvs-sys-color-fg-inverse);--color-system-icon-3a4847:var(--icon-a1b49d, currentColor);&:focus-visible, &.focus{--background-button-85bf0e:var(--cnvs-sys-color-bg-translucent);--label-button-85bf0e:var(--cnvs-sys-color-fg-inverse);--color-system-icon-3a4847:var(--icon-553b51, currentColor);box-shadow:0 0 0 0px var(--cnvs-sys-color-border-inverse, rgba(255,255,255,1)), 0 0 0 2px var(--cnvs-sys-color-border-inverse);}&:hover, &.hover{--background-button-85bf0e:var(--cnvs-sys-color-bg-transparent-strong);--label-button-85bf0e:var(--cnvs-sys-color-fg-inverse);--color-system-icon-3a4847:var(--icon-846e8f, currentColor);}&:active, &.active{--background-button-85bf0e:var(--cnvs-sys-color-bg-transparent-stronger);--label-button-85bf0e:var(--cnvs-sys-color-fg-inverse);--color-system-icon-3a4847:var(--icon-3abb65, currentColor);}&:disabled, &.disabled{--background-button-85bf0e:transparent;--label-button-85bf0e:var(--cnvs-sys-color-fg-inverse);--color-system-icon-3a4847:var(--icon-74b26e, currentColor);}" }
}
},
// Compound Modifier Styles
compound: [
{
modifiers: { size: 'large', iconPosition: 'only' },
styles: { name: "2ru2l5", styles: "min-width:calc(var(--cnvs-sys-space-x4) * 3);" }
},
{
modifiers: { size: 'large', iconPosition: 'start' },
styles: { name: "43ms53", styles: "padding-inline-start:var(--cnvs-sys-space-x2);padding-inline-end:var(--cnvs-sys-space-x3);" }
},
{
modifiers: { size: 'large', iconPosition: 'end' },
styles: { name: "30mjy", styles: "padding-inline-start:var(--cnvs-sys-space-x3);padding-inline-end:var(--cnvs-sys-space-x2);" }
},
{
modifiers: { size: 'medium', iconPosition: 'only' },
styles: { name: "3me9va", styles: "min-width:var(--cnvs-sys-space-x10);" }
},
{
modifiers: { size: 'medium', iconPosition: 'start' },
styles: { name: "25bqzw", styles: "padding-inline-start:var(--cnvs-sys-space-x2);padding-inline-end:var(--cnvs-sys-space-x3);" }
},
{
modifiers: { size: 'medium', iconPosition: 'end' },
styles: { name: "17wrfr", styles: "padding-inline-start:var(--cnvs-sys-space-x3);padding-inline-end:var(--cnvs-sys-space-x2);" }
},
{
modifiers: { size: 'small', iconPosition: 'only' },
styles: { name: "kkieh", styles: "min-width:var(--cnvs-sys-space-x8);" }
},
{
modifiers: { size: 'small', iconPosition: 'start' },
styles: { name: "337ucz", styles: "padding-inline-start:var(--cnvs-sys-space-x2);padding-inline-end:var(--cnvs-sys-space-x3);" }
},
{
modifiers: { size: 'small', iconPosition: 'end' },
styles: { name: "h33qv", styles: "padding-inline-start:var(--cnvs-sys-space-x3);padding-inline-end:var(--cnvs-sys-space-x2);" }
},
{
modifiers: { size: 'extraSmall', iconPosition: 'only' },
styles: { name: "p2lrq", styles: "min-width:var(--cnvs-sys-space-x6);" }
},
{
modifiers: { size: 'extraSmall', iconPosition: 'start' },
styles: { name: "40nv5f", styles: "padding-inline-start:var(--cnvs-sys-space-x1);padding-inline-end:var(--cnvs-sys-space-x2);" }
},
{
modifiers: { size: 'extraSmall', iconPosition: 'end' },
styles: { name: "3cancv", styles: "padding-inline-start:var(--cnvs-sys-space-x2);padding-inline-end:var(--cnvs-sys-space-x1);" }
}
]
}, "tertiary-button-b70e28");
exports.TertiaryButton = (0, common_1.createComponent)('button')({
displayName: 'TertiaryButton',
Component: ({ children, icon, 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,
iconPosition: baseIconPosition,
}),
cs,
], ...elemProps, children: children }));
},
});