@fluid-topics/ft-button
Version:
A generic Fluid Topics tag
67 lines (66 loc) • 2.84 kB
JavaScript
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
import { FtBaseButton } from "./ft-base-button";
import { property } from "lit/decorators.js";
import { FtTypographyVariants } from "@fluid-topics/ft-typography/build/ft-typography.properties";
import { safariEllipsisFix, toFtdsBase } from "@fluid-topics/ft-wc-utils";
import { designSystemStyles } from "./ftds-button.styles";
import { DesignSystemFamily, DesignSystemSize } from "@fluid-topics/design-system-variables";
import { FtIconVariants } from "@fluid-topics/ft-icon";
class FtdsButton extends toFtdsBase(FtBaseButton) {
constructor() {
super(...arguments);
this.primary = false;
this.secondary = false;
this.tertiary = false;
this.round = false;
this.family = DesignSystemFamily.brand;
this.iconVariant = FtIconVariants.fluid_topics;
}
get buttonClasses() {
return {
"ft-button": true,
"ft-button--primary": this.primary,
"ft-button--secondary": this.secondary,
"ft-button--tertiary": this.tertiary || (!this.primary && !this.secondary),
"ft-button--icon-only": !this.hasTextContent(),
"ft-button--trailing-icon": this.trailingIcon,
"ft-button--loading": this.trailingIcon,
"ft-no-text-select": true,
"ft-button--no-icon": !this.icon,
"ft-button--round": this.round,
...this.getDesignSystemBaseClasses()
};
}
get typographyVariant() {
switch (this.size) {
case DesignSystemSize.large:
return FtTypographyVariants.body2medium;
case DesignSystemSize.medium:
return FtTypographyVariants.caption1medium;
case DesignSystemSize.small:
return FtTypographyVariants.caption2medium;
}
}
}
FtdsButton.styles = [
safariEllipsisFix,
designSystemStyles
];
__decorate([
property({ type: Boolean })
], FtdsButton.prototype, "primary", void 0);
__decorate([
property({ type: Boolean })
], FtdsButton.prototype, "secondary", void 0);
__decorate([
property({ type: Boolean })
], FtdsButton.prototype, "tertiary", void 0);
__decorate([
property({ type: Boolean })
], FtdsButton.prototype, "round", void 0);
export { FtdsButton };