@fluid-topics/ft-button 1.0.59 → 1.0.60

package/build/ft-button.properties.d.ts

@@ -1,17 +1,8 @@
-import { Position } from "@fluid-topics/ft-tooltip/build/ft-tooltip.properties";
-import { FtIconVariants } from "@fluid-topics/ft-icon/build/ft-icon.properties";
-export interface FtButtonProperties {
+import { FtBaseButtonProperties } from "./ft-base-button";
+export interface FtButtonProperties extends FtBaseButtonProperties {
     primary?: boolean;
     outlined?: boolean;
     disabled?: boolean;
     dense?: boolean;
     round?: boolean;
-    label?: string;
-    icon?: string;
-    iconVariant?: FtIconVariants;
-    trailingIcon?: boolean;
-    loading?: boolean;
-    tooltipPosition?: Position;
-    hideTooltip?: boolean;
-    forceTooltip?: boolean;
 }

package/build/ftds-button.css.d.ts

@@ -0,0 +1,2 @@
+export { button as FtdsButtonCssVariables } from "@fluid-topics/design-system-variables";
+export declare const designSystemStyles: import("lit").CSSResult[];

package/build/ftds-button.css.js

@@ -0,0 +1,230 @@
+import { css, } from "lit";
+import { noTextSelect, setVariable } from "@fluid-topics/ft-wc-utils";
+import { FtRippleCssVariables } from "@fluid-topics/ft-ripple/build/ft-ripple.css";
+import { FtLoaderCssVariables } from "@fluid-topics/ft-loader/build/ft-loader.css";
+import { FtIconCssVariables } from "@fluid-topics/ft-icon/build/ft-icon.css";
+import { button } from "@fluid-topics/design-system-variables";
+export { button as FtdsButtonCssVariables } from "@fluid-topics/design-system-variables";
+//language=css
+export const designSystemStyles = [
+    css `
+        :host {
+            display: inline-block;
+            max-width: 100%;
+            pointer-events: none;
+        }
+
+        /** Remove default button styles **/
+
+        button {
+            box-shadow: 0 0 0 transparent;
+            border: 0 solid transparent;
+            text-shadow: 0 0 0 transparent;
+        }
+
+        button:hover {
+            box-shadow: 0 0 0 transparent;
+            text-shadow: 0 0 0 transparent;
+        }
+
+        button:active {
+            outline: none;
+        }
+
+        button:focus {
+            outline: 0;
+        }
+
+        /** Base styles **/
+
+        .ft-button {
+            position: relative;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            width: 100%;
+            overflow: hidden;
+            box-sizing: border-box;
+            pointer-events: auto;
+        }
+
+        .ft-button:not([disabled]):hover {
+            cursor: pointer;
+        }
+
+        .ft-button:focus {
+            outline: none;
+        }
+
+        .ft-button:focus-visible {
+            outline-color: ${button.focusFocusRingColor};
+            outline-style: solid;
+        }
+
+        ft-icon {
+            flex-shrink: 0;
+            position: relative;
+        }
+
+        .ft-button:not(.ft-button--trailing-icon) ft-icon,
+        .ft-button:not(.ft-button--trailing-icon) ft-loader {
+            order: -1;
+        }
+
+        .ft-button--label {
+            position: relative;
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+            display: block;
+        }
+
+        .ft-button--label[hidden] {
+            display: none;
+        }
+
+        /** Primary styles **/
+
+        .ft-button--primary {
+            ${setVariable(FtLoaderCssVariables.color, button.primaryIconColor)};
+
+            ${setVariable(FtRippleCssVariables.color, button.primaryStateLayerColor)};
+            ${setVariable(FtRippleCssVariables.opacityContentOnSurfaceHover, button.primaryStateLayerOpacityHover)};
+            ${setVariable(FtRippleCssVariables.opacityContentOnSurfaceFocused, button.primaryStateLayerOpacityFocus)};
+            ${setVariable(FtRippleCssVariables.opacityContentOnSurfaceSelected, button.primaryStateLayerOpacityActive)};
+            ${setVariable(FtRippleCssVariables.opacityContentOnSurfacePressed, button.primaryStateLayerOpacityActive)};
+
+            background-color: ${button.primaryBackgroundColor};
+            color: ${button.primaryColor};
+            border-style: none;
+        }
+
+        .ft-button--primary[disabled] {
+            opacity: ${button.primaryComponentOpacityDisabled};
+        }
+
+        .ft-button--primary ft-icon {
+            color: ${button.primaryIconColor};
+        }
+
+        /** Secondary styles **/
+
+        .ft-button--secondary {
+            ${setVariable(FtLoaderCssVariables.color, button.secondaryIconColor)};
+
+            ${setVariable(FtRippleCssVariables.color, button.secondaryStateLayerColor)};
+            ${setVariable(FtRippleCssVariables.opacityContentOnSurfaceHover, button.secondaryStateLayerOpacityHover)};
+            ${setVariable(FtRippleCssVariables.opacityContentOnSurfaceFocused, button.secondaryStateLayerOpacityFocus)};
+            ${setVariable(FtRippleCssVariables.opacityContentOnSurfaceSelected, button.secondaryStateLayerOpacityActive)};
+            ${setVariable(FtRippleCssVariables.opacityContentOnSurfacePressed, button.secondaryStateLayerOpacityActive)};
+
+            background-color: ${button.secondaryBackgroundColor};
+            color: ${button.secondaryColor};
+            border-color: ${button.secondaryBorderColor};
+            border-style: solid;
+        }
+
+        .ft-button--secondary[disabled] {
+            opacity: ${button.secondaryComponentOpacityDisabled};
+        }
+
+        .ft-button--secondary ft-icon {
+            color: ${button.secondaryIconColor};
+        }
+
+        /** Tertiary styles **/
+
+        .ft-button--tertiary {
+            ${setVariable(FtLoaderCssVariables.color, button.tertiaryIconColor)};
+
+            ${setVariable(FtRippleCssVariables.color, button.tertiaryStateLayerColor)};
+            ${setVariable(FtRippleCssVariables.opacityContentOnSurfaceHover, button.tertiaryStateLayerOpacityHover)};
+            ${setVariable(FtRippleCssVariables.opacityContentOnSurfaceFocused, button.tertiaryStateLayerOpacityFocus)};
+            ${setVariable(FtRippleCssVariables.opacityContentOnSurfaceSelected, button.tertiaryStateLayerOpacityActive)};
+            ${setVariable(FtRippleCssVariables.opacityContentOnSurfacePressed, button.tertiaryStateLayerOpacityActive)};
+
+            background-color: ${button.tertiaryBackgroundColor};
+            color: ${button.tertiaryColor};
+            border-style: none;
+        }
+
+        .ft-button--tertiary[disabled] {
+            opacity: ${button.tertiaryComponentOpacityDisabled};
+        }
+
+        .ft-button--tertiary ft-icon {
+            color: ${button.tertiaryIconColor};
+        }
+
+        /** Neutral styles **/
+
+        .ft-button--neutral {
+            ${setVariable(FtLoaderCssVariables.color, button.neutralIconColor)};
+
+            ${setVariable(FtRippleCssVariables.backgroundColor, button.neutralStateLayerColor)};
+            ${setVariable(FtRippleCssVariables.opacityContentOnSurfaceHover, button.neutralStateLayerOpacityHover)};
+            ${setVariable(FtRippleCssVariables.opacityContentOnSurfaceFocused, button.neutralStateLayerOpacityFocus)};
+            ${setVariable(FtRippleCssVariables.opacityContentOnSurfaceSelected, button.neutralStateLayerOpacityActive)};
+            ${setVariable(FtRippleCssVariables.opacityContentOnSurfacePressed, button.neutralStateLayerOpacityActive)};
+
+            background-color: ${button.neutralBackgroundColor};
+            color: ${button.neutralColor};
+            border-style: none;
+        }
+
+        .ft-button--neutral[disabled] {
+            opacity: ${button.neutralComponentOpacityDisabled};
+        }
+
+        .ft-button--neutral ft-icon {
+            color: ${button.neutralIconColor};
+        }
+
+        /** Large styles **/
+
+        .ft-button--large {
+            ${setVariable(FtIconCssVariables.size, button.largeIconSize)};
+            ${setVariable(FtLoaderCssVariables.size, button.largeIconSize)};
+
+            height: ${button.largeHeight};
+            padding: 0 ${button.largeHorizontalPadding};
+            gap: ${button.largeGap};
+            border-radius: ${button.largeBorderRadius};
+            border-width: ${button.largeBorderWidth};
+        }
+
+        .ft-button--large:focus-visible {
+            outline-width: ${button.largeFocusOutlineWidth};
+            outline-offset: ${button.largeFocusOutlineOffset};
+        }
+
+        .ft-button--large.ft-button--icon-only {
+            width: ${button.largeIconOnlyWidth};
+            padding: unset;
+        }
+
+        /** Small styles **/
+
+        .ft-button--small {
+            ${setVariable(FtIconCssVariables.size, button.smallIconSize)};
+            ${setVariable(FtLoaderCssVariables.size, button.smallIconSize)};
+
+            height: ${button.smallHeight};
+            padding: 0 ${button.smallHorizontalPadding};
+            gap: ${button.smallGap};
+            border-radius: ${button.smallBorderRadius};
+            border-width: ${button.smallBorderWidth};
+        }
+
+        .ft-button--small:focus-visible {
+            outline-width: ${button.smallFocusOutlineWidth};
+            outline-offset: ${button.smallFocusOutlineOffset};
+        }
+
+        .ft-button--small.ft-button--icon-only {
+            width: ${button.smallIconOnlyWidth};
+            padding: unset;
+        }
+    `,
+    noTextSelect
+];

package/build/ftds-button.d.ts

@@ -0,0 +1,13 @@
+import { FtBaseButton } from "./ft-base-button";
+import { FtdsButtonProperties } from "./ftds-button.properties";
+import { ClassInfo } from "lit/directives/class-map.js";
+export declare class FtdsButton extends FtBaseButton implements FtdsButtonProperties {
+    primary: boolean;
+    secondary: boolean;
+    tertiary: boolean;
+    neutral: boolean;
+    small: boolean;
+    static styles: (import("lit").CSSResult | import("lit").CSSResult[])[];
+    get buttonClasses(): ClassInfo;
+    get typographyVariant(): string;
+}

package/build/ftds-button.js

@@ -0,0 +1,60 @@
+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 } from "@fluid-topics/ft-wc-utils";
+import { designSystemStyles } from "./ftds-button.css";
+class FtdsButton extends FtBaseButton {
+    constructor() {
+        super(...arguments);
+        this.primary = false;
+        this.secondary = false;
+        this.tertiary = false;
+        this.neutral = false;
+        this.small = false;
+    }
+    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 && !this.neutral),
+            "ft-button--neutral": this.neutral,
+            "ft-button--large": !this.small,
+            "ft-button--small": this.small,
+            "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,
+        };
+    }
+    get typographyVariant() {
+        return this.small ? FtTypographyVariants.caption1medium : FtTypographyVariants.body2medium;
+    }
+}
+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, "neutral", void 0);
+__decorate([
+    property({ type: Boolean })
+], FtdsButton.prototype, "small", void 0);
+export { FtdsButton };

package/build/ftds-button.properties.d.ts

@@ -0,0 +1,8 @@
+import { FtBaseButtonProperties } from "./ft-base-button";
+export interface FtdsButtonProperties extends FtBaseButtonProperties {
+    primary?: boolean;
+    secondary?: boolean;
+    tertiary?: boolean;
+    neutral?: boolean;
+    small?: boolean;
+}

package/build/ftds-button.properties.js

@@ -0,0 +1 @@
+export {};

package/build/index.d.ts

@@ -1,3 +1,6 @@
 export * from "./ft-button";
 export * from "./ft-button.css";
 export * from "./ft-button.properties";
+export * from "./ftds-button";
+export * from "./ftds-button.css";
+export * from "./ftds-button.properties";

package/build/index.js

@@ -1,6 +1,11 @@
 import { customElement } from "@fluid-topics/ft-wc-utils";
 import { FtButton } from "./ft-button";
+import { FtdsButton } from "./ftds-button";
 export * from "./ft-button";
 export * from "./ft-button.css";
 export * from "./ft-button.properties";
+export * from "./ftds-button";
+export * from "./ftds-button.css";
+export * from "./ftds-button.properties";
 customElement("ft-button")(FtButton);
+customElement("ftds-button")(FtdsButton);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluid-topics/ft-button",
-  "version": "1.0.59",
+  "version": "1.0.60",
   "description": "A generic Fluid Topics tag",
   "keywords": [
     "Lit"
@@ -19,13 +19,13 @@
     "url": "ssh://git@scm.mrs.antidot.net:2222/fluidtopics/ft-web-components.git"
   },
   "dependencies": {
-    "@fluid-topics/ft-icon": "1.0.59",
-    "@fluid-topics/ft-loader": "1.0.59",
-    "@fluid-topics/ft-ripple": "1.0.59",
-    "@fluid-topics/ft-tooltip": "1.0.59",
-    "@fluid-topics/ft-typography": "1.0.59",
-    "@fluid-topics/ft-wc-utils": "1.0.59",
+    "@fluid-topics/ft-icon": "1.0.60",
+    "@fluid-topics/ft-loader": "1.0.60",
+    "@fluid-topics/ft-ripple": "1.0.60",
+    "@fluid-topics/ft-tooltip": "1.0.60",
+    "@fluid-topics/ft-typography": "1.0.60",
+    "@fluid-topics/ft-wc-utils": "1.0.60",
     "lit": "2.7.2"
   },
-  "gitHead": "9412dc7c29ebc722b1b133bba63b1744f4bfdf60"
+  "gitHead": "8eb7c2ef052f5d3f61ed0bf150fcaee093805450"
 }