@salesforcedevs/dx-components 0.0.0-alpha.8 → 0.0.0-alpha.9

package/lwc.config.json

@@ -5,6 +5,7 @@
         "dx/brandThemeProvider",
         "dx/breadcrumbs",
         "dx/button",
+        "dx/buttonToggle",
         "dx/cardBlogPost",
         "dx/cardCallout",
         "dx/cardContent",

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "0.0.0-alpha.8",
+    "version": "0.0.0-alpha.9",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {

package/src/modules/dx/buttonToggle/buttonToggle.html

@@ -1,7 +1,7 @@
 <template>
     <button
         class={className}
-        onclick={handleClick}
+        onclick={handleMouseEvent}
         onmouseenter={handleMouseEvent}
         onmouseleave={handleMouseEvent}
         onfocus={handleMouseEvent}
@@ -9,7 +9,7 @@
         disabled={disabled}
     >
         <div class="label-container">
-            <slot>Toggle</slot>
+            <span>{label}</span>
             <dx-icon sprite="utility" symbol={symbol} size="small"></dx-icon>
         </div>
     </button>

package/src/modules/dx/buttonToggle/buttonToggle.ts

@@ -3,12 +3,14 @@ import cx from "classnames";
 import { normalizeBoolean } from "dxUtils/normalizers";
 
 export default class ButtonToggle extends LightningElement {
+    @api label!: string;
+
     @api
-    get pressed() {
-        return this._pressed;
+    get value() {
+        return this._value;
     }
-    set pressed(value: boolean) {
-        this._pressed = normalizeBoolean(value);
+    set value(value: boolean) {
+        this._value = normalizeBoolean(value);
     }
 
     @api
@@ -19,34 +21,41 @@ export default class ButtonToggle extends LightningElement {
         this._disabled = normalizeBoolean(value);
     }
 
-    private _pressed: boolean = false;
+    private _value: boolean = false;
     private _disabled: boolean = false;
     private mouseHovering: boolean = false;
     private hasFocus: boolean = false;
 
     private get className(): string {
-        return cx(this.pressed && "pressed");
+        return cx(this.value && "pressed");
     }
 
     private get symbol() {
         if (
-            (this.pressed && this.mouseHovering && !this.hasFocus) ||
-            (this.pressed && this.hasFocus)
+            (this.value && this.mouseHovering && !this.hasFocus) ||
+            (this.value && this.hasFocus)
         ) {
             return "close";
-        } else if (this.pressed) {
+        } else if (this.value) {
             return "check";
         }
 
         return "add";
     }
 
-    private handleClick() {
-        this._pressed = !this._pressed;
-    }
-
     private handleMouseEvent(e: MouseEvent) {
         switch (e.type) {
+            case "click":
+                this._value = !this._value;
+                this.dispatchEvent(
+                    new CustomEvent("toggle", {
+                        detail: {
+                            label: this.label,
+                            value: this.value
+                        }
+                    })
+                );
+                break;
             case "mouseenter":
                 this.mouseHovering = true;
                 break;

package/src/modules/dx/cardTrial/cardTrial.ts

@@ -15,6 +15,7 @@ export default class CardTrial extends LightningElement {
     @api buttonTwoHref?: string;
     @api buttonTwoIcon?: string;
     @api buttonTwoIconSize?: string = "large";
+    @api hideCardDetails?: boolean = false;
     @api href!: string;
     @api imgSrc?: string;
     @api label!: string;
@@ -50,7 +51,7 @@ export default class CardTrial extends LightningElement {
     }
 
     get hasDetails() {
-        return this.details?.length > 0;
+        return this.details?.length > 0 && !this.hideCardDetails;
     }
 
     get hasOneButton() {

package/src/modules/dx/tabPanelList/tabPanelList.css

@@ -33,9 +33,3 @@ dx-popover {
 .hidden {
     display: none;
 }
-
-@media screen and (max-width: 1024px) {
-    .tablist-container {
-        padding: 0 var(--dx-g-spacing-lg);
-    }
-}