@getflip/swirl-components 0.34.2 → 0.35.0

package/dist/collection/components/swirl-card/swirl-card.js

@@ -17,6 +17,11 @@ export class SwirlCard {
     this.interactive = undefined;
     this.justifyContent = "start";
     this.linkTarget = undefined;
+    this.padding = undefined;
+    this.paddingBlockEnd = undefined;
+    this.paddingBlockStart = undefined;
+    this.paddingInlineEnd = undefined;
+    this.paddingInlineStart = undefined;
     this.swirlAriaLabel = undefined;
   }
   render() {
@@ -28,6 +33,23 @@ export class SwirlCard {
         : this.borderRadius,
       height: this.height,
     };
+    const bodyStyles = {
+      padding: Boolean(this.padding)
+        ? `var(--s-space-${this.padding})`
+        : undefined,
+      paddingBlockEnd: Boolean(this.paddingBlockEnd)
+        ? `var(--s-space-${this.paddingBlockEnd})`
+        : undefined,
+      paddingBlockStart: Boolean(this.paddingBlockStart)
+        ? `var(--s-space-${this.paddingBlockStart})`
+        : undefined,
+      paddingInlineEnd: Boolean(this.paddingInlineEnd)
+        ? `var(--s-space-${this.paddingInlineEnd})`
+        : undefined,
+      paddingInlineStart: Boolean(this.paddingInlineStart)
+        ? `var(--s-space-${this.paddingInlineStart})`
+        : undefined,
+    };
     const className = classnames("card", `card--justify-content-${this.justifyContent}`, {
       "card--elevated": this.elevated,
       "card--has-image": hasImage,
@@ -37,7 +59,7 @@ export class SwirlCard {
     });
     return (h(Host, { styles: { height: this.height } }, h(Tag, { "aria-label": this.swirlAriaLabel, class: className, href: this.href, rel: Boolean(this.href) && this.linkTarget === "_blank"
         ? "noreferrer"
-        : undefined, style: styles, target: this.linkTarget }, h("div", { class: "card__image", style: { aspectRatio: this.imageAspectRatio } }, h("slot", { name: "image" })), h("div", { class: "card__body" }, h("div", { class: "card__content" }, h("slot", { name: "content" }))))));
+        : undefined, style: styles, target: this.linkTarget }, h("div", { class: "card__image", style: { aspectRatio: this.imageAspectRatio } }, h("slot", { name: "image" })), h("div", { class: "card__body", style: bodyStyles }, h("div", { class: "card__content" }, h("slot", { name: "content" }))))));
   }
   static get is() { return "swirl-card"; }
   static get encapsulation() { return "shadow"; }
@@ -253,6 +275,116 @@ export class SwirlCard {
         "attribute": "link-target",
         "reflect": false
       },
+      "padding": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "SwirlCardPadding",
+          "resolved": "\"0\" | \"12\" | \"16\" | \"2\" | \"20\" | \"24\" | \"32\" | \"4\" | \"8\"",
+          "references": {
+            "SwirlCardPadding": {
+              "location": "local",
+              "path": "/home/runner/work/swirl/swirl/packages/swirl-components/src/components/swirl-card/swirl-card.tsx"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "padding",
+        "reflect": false
+      },
+      "paddingBlockEnd": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "SwirlCardPadding",
+          "resolved": "\"0\" | \"12\" | \"16\" | \"2\" | \"20\" | \"24\" | \"32\" | \"4\" | \"8\"",
+          "references": {
+            "SwirlCardPadding": {
+              "location": "local",
+              "path": "/home/runner/work/swirl/swirl/packages/swirl-components/src/components/swirl-card/swirl-card.tsx"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "padding-block-end",
+        "reflect": false
+      },
+      "paddingBlockStart": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "SwirlCardPadding",
+          "resolved": "\"0\" | \"12\" | \"16\" | \"2\" | \"20\" | \"24\" | \"32\" | \"4\" | \"8\"",
+          "references": {
+            "SwirlCardPadding": {
+              "location": "local",
+              "path": "/home/runner/work/swirl/swirl/packages/swirl-components/src/components/swirl-card/swirl-card.tsx"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "padding-block-start",
+        "reflect": false
+      },
+      "paddingInlineEnd": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "SwirlCardPadding",
+          "resolved": "\"0\" | \"12\" | \"16\" | \"2\" | \"20\" | \"24\" | \"32\" | \"4\" | \"8\"",
+          "references": {
+            "SwirlCardPadding": {
+              "location": "local",
+              "path": "/home/runner/work/swirl/swirl/packages/swirl-components/src/components/swirl-card/swirl-card.tsx"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "padding-inline-end",
+        "reflect": false
+      },
+      "paddingInlineStart": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "SwirlCardPadding",
+          "resolved": "\"0\" | \"12\" | \"16\" | \"2\" | \"20\" | \"24\" | \"32\" | \"4\" | \"8\"",
+          "references": {
+            "SwirlCardPadding": {
+              "location": "local",
+              "path": "/home/runner/work/swirl/swirl/packages/swirl-components/src/components/swirl-card/swirl-card.tsx"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "padding-inline-start",
+        "reflect": false
+      },
       "swirlAriaLabel": {
         "type": "string",
         "mutable": false,

package/dist/collection/components/swirl-text/swirl-text.js

@@ -1,6 +1,7 @@
 import { h, Host } from "@stencil/core";
 import classnames from "classnames";
 import balanceText from "balance-text";
+import shave from "shave";
 export class SwirlText {
   constructor() {
     this.align = "start";
@@ -15,9 +16,23 @@ export class SwirlText {
   }
   componentDidRender() {
     this.rebalance();
+    this.handleTruncation();
   }
   onWindowResize() {
     this.rebalance();
+    this.handleTruncation();
+  }
+  handleTruncation() {
+    if (!this.truncate || !Boolean(this.lines) || this.lines === 1) {
+      return;
+    }
+    const lineHeight = +window
+      .getComputedStyle(this.textEl, null)
+      .getPropertyValue("line-height")
+      .replace("px", "");
+    if (lineHeight > 0) {
+      shave(this.textEl, lineHeight * this.lines);
+    }
   }
   rebalance() {
     if (!this.balance || !Boolean(this.textEl)) {
@@ -27,16 +42,10 @@ export class SwirlText {
   }
   render() {
     const Tag = this.as;
-    const styles = Boolean(this.lines)
-      ? {
-        display: "-webkit-box",
-        "-webkit-line-clamp": String(this.lines),
-        "-webkit-box-orient": "vertical",
-        whiteSpace: "normal",
-      }
-      : undefined;
-    const className = classnames("text", `text--align-${this.align}`, `text--color-${this.color}`, `text--font-style-${this.fontStyle}`, `text--size-${this.size}`, `text--weight-${this.weight}`, { "text--truncate": this.truncate });
-    return (h(Host, null, h(Tag, { class: className, ref: (el) => (this.textEl = el), style: styles }, h("slot", null))));
+    const className = classnames("text", `text--align-${this.align}`, `text--color-${this.color}`, `text--font-style-${this.fontStyle}`, `text--size-${this.size}`, `text--weight-${this.weight}`, {
+      "text--truncate": this.truncate && (!Boolean(this.lines) || this.lines === 1),
+    });
+    return (h(Host, null, h(Tag, { class: className, ref: (el) => (this.textEl = el) }, h("slot", null))));
   }
   static get is() { return "swirl-text"; }
   static get encapsulation() { return "scoped"; }