@workday/canvas-kit-react
Version:
The parent module that contains all Workday Canvas Kit React components
127 lines (126 loc) • 9.31 kB
JavaScript
;
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.TertiaryButton = void 0;
const React = __importStar(require("react"));
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: "d63q1v", 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-212f69: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-212f69: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-212f69: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-212f69: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-212f69:var(--icon-93b1ce, var(--cnvs-brand-primary-base));}" },
modifiers: {
// IconPosition Styles
iconPosition: {
only: { name: "d63q1w", styles: "padding:0;border-radius:var(--cnvs-sys-shape-round);--color-system-icon-212f69:var(--icon-b5fb58, var(--cnvs-sys-color-fg-strong));&:focus-visible, &.focus{--color-system-icon-212f69:var(--icon-2ae7b1, var(--cnvs-sys-color-fg-strong));}&:hover, &.hover{--color-system-icon-212f69:var(--icon-c4b8f8, var(--cnvs-sys-color-fg-strong));}&:active, &.active{--color-system-icon-212f69:var(--icon-93b1ce, var(--cnvs-sys-color-fg-strong));}&:disabled, &.disabled{--color-system-icon-212f69:var(--icon-c34400, var(--cnvs-sys-color-fg-strong));}" },
start: { name: "d63q1x", styles: "" },
end: { name: "d63q1y", styles: "" }
},
isThemeable: {
true: { name: "d63q1z", styles: "--color-system-icon-212f69:var(--icon-b5fb58, var(--cnvs-brand-primary-base));&:focus-visible, &.focus{--color-system-icon-212f69:var(--icon-2ae7b1, var(--cnvs-brand-primary-base));}&:hover, &.hover{--color-system-icon-212f69:var(--icon-c4b8f8, var(--cnvs-brand-primary-dark));}&:active, &.active{--color-system-icon-212f69:var(--icon-93b1ce, var(--cnvs-brand-primary-darkest));}&:disabled, &.disabled{--color-system-icon-212f69:var(--icon-c34400, var(--cnvs-brand-primary-base));}" }
},
variant: {
// Inverse Styles
inverse: { name: "d63q20", styles: "--background-button-65cb05:transparent;--label-button-65cb05:var(--cnvs-sys-color-fg-inverse);--color-system-icon-212f69: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-212f69: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-212f69: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-212f69: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-212f69:var(--icon-c34400, var(--cnvs-sys-color-fg-inverse));}" }
}
},
// Compound Modifier Styles
compound: [
{
modifiers: { size: 'large', iconPosition: 'only' },
styles: { name: "d63q21", styles: "min-width:calc(var(--cnvs-sys-space-x4) * 3);" }
},
{
modifiers: { size: 'large', iconPosition: 'start' },
styles: { name: "d63q22", styles: "padding-inline-start:var(--cnvs-sys-space-x2);padding-inline-end:var(--cnvs-sys-space-x3);" }
},
{
modifiers: { size: 'large', iconPosition: 'end' },
styles: { name: "d63q23", styles: "padding-inline-start:var(--cnvs-sys-space-x3);padding-inline-end:var(--cnvs-sys-space-x2);" }
},
{
modifiers: { size: 'medium', iconPosition: 'only' },
styles: { name: "d63q24", styles: "min-width:var(--cnvs-sys-space-x10);" }
},
{
modifiers: { size: 'medium', iconPosition: 'start' },
styles: { name: "d63q25", styles: "padding-inline-start:var(--cnvs-sys-space-x2);padding-inline-end:var(--cnvs-sys-space-x3);" }
},
{
modifiers: { size: 'medium', iconPosition: 'end' },
styles: { name: "d63q26", styles: "padding-inline-start:var(--cnvs-sys-space-x3);padding-inline-end:var(--cnvs-sys-space-x2);" }
},
{
modifiers: { size: 'small', iconPosition: 'only' },
styles: { name: "d63q27", styles: "min-width:var(--cnvs-sys-space-x8);" }
},
{
modifiers: { size: 'small', iconPosition: 'start' },
styles: { name: "d63q28", styles: "padding-inline-start:var(--cnvs-sys-space-x2);padding-inline-end:var(--cnvs-sys-space-x3);" }
},
{
modifiers: { size: 'small', iconPosition: 'end' },
styles: { name: "d63q29", styles: "padding-inline-start:var(--cnvs-sys-space-x3);padding-inline-end:var(--cnvs-sys-space-x2);" }
},
{
modifiers: { size: 'extraSmall', iconPosition: 'only' },
styles: { name: "d63q2a", styles: "min-width:var(--cnvs-sys-space-x6);" }
},
{
modifiers: { size: 'extraSmall', iconPosition: 'start' },
styles: { name: "d63q2b", styles: "padding-inline-start:var(--cnvs-sys-space-x1);padding-inline-end:var(--cnvs-sys-space-x2);" }
},
{
modifiers: { size: 'extraSmall', iconPosition: 'end' },
styles: { name: "d63q2c", styles: "padding-inline-start:var(--cnvs-sys-space-x2);padding-inline-end:var(--cnvs-sys-space-x1);" }
}
]
}, "tertiary-button-4896ac");
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 (React.createElement(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));
},
});