@ptcwebops/ptcw-design 2.1.9 → 2.2.1

package/dist/collection/components/organism-bundles/author-listing-example/author-listing-example.js

@@ -0,0 +1,281 @@
+import { h } from '@stencil/core';
+export class AuthorListingExample {
+  constructor() {
+    this.defaultAuthorImage = undefined;
+    this.isLoading = false;
+    this.loadedCardCount = 0;
+    this.cardsPerLoad = 9;
+    this.cardData = [
+      {
+        id: 1,
+        authorName: "Aaron Shaw",
+        imageUrl: "https://www.ptc.com/-/media/Images/blog/Authors/Blog_AaronShaw_2.jpg",
+        DetailPagelink: "https://www.ptc.com/en/blog-authors/Aaron-Shaw",
+        description: "Aaron Shaw joined PTC in 2013, currently he is the Senior Manager, CAD Demand Generation. He is responsible for"
+      },
+      {
+        id: 2,
+        authorName: "Abby Eon",
+        imageUrl: "https://www.ptc.com/-/media/Images/new-org/399x200/abby-eon-400x200.jpg",
+        DetailPagelink: "https://www.ptc.com/en/blog-authors/Abby-Eon",
+        description: "Abby Eon is Senior Vice President and General Manager, Kepware. As part of her role, Abby looks after "
+      },
+      {
+        id: 3,
+        authorName: "Catherine Kniker",
+        imageUrl: "https://www.ptc.com/-/media/Images/blog/Authors/catherine-kniker.jpg",
+        DetailPagelink: "https://www.ptc.com/en/blog-authors/Catherine-Kniker",
+        description: "Catherine is EVP and Chief Strategy and Marketing Officer at PTC, responsible for positioning the company for success"
+      },
+      {
+        id: 4,
+        authorName: "Maria Lowry, Manager, Kalypso",
+        imageUrl: "https://www.ptc.com/-/media/Images/blog/Authors/blog-Maria-Lowry.jpg",
+        DetailPagelink: "https://www.ptc.com/en/blog-authors/Maria-Lowry",
+        description: "Maria brings seven years of professional experience to her clients. She is committed to improving product quality, safety, sustainability"
+      },
+      {
+        id: 5,
+        authorName: "Author name",
+        imageUrl: "",
+        DetailPagelink: "#",
+        description: "Author description text goes here Author description text goes here Author description text goes here Author description text goes here Author description text goes here"
+      },
+      {
+        id: 1,
+        authorName: "Aaron Shaw",
+        imageUrl: "https://www.ptc.com/-/media/Images/blog/Authors/Blog_AaronShaw_2.jpg",
+        DetailPagelink: "https://www.ptc.com/en/blog-authors/Aaron-Shaw",
+        description: "Aaron Shaw joined PTC in 2013, currently he is the Senior Manager, CAD Demand Generation. He is responsible for"
+      },
+      {
+        id: 2,
+        authorName: "Abby Eon",
+        imageUrl: "https://www.ptc.com/-/media/Images/new-org/399x200/abby-eon-400x200.jpg",
+        DetailPagelink: "https://www.ptc.com/en/blog-authors/Abby-Eon",
+        description: "Abby Eon is Senior Vice President and General Manager, Kepware. As part of her role, Abby looks after "
+      },
+      {
+        id: 3,
+        authorName: "Catherine Kniker",
+        imageUrl: "https://www.ptc.com/-/media/Images/blog/Authors/catherine-kniker.jpg",
+        DetailPagelink: "https://www.ptc.com/en/blog-authors/Catherine-Kniker",
+        description: "Catherine is EVP and Chief Strategy and Marketing Officer at PTC, responsible for positioning the company for success"
+      },
+      {
+        id: 4,
+        authorName: "Maria Lowry, Manager, Kalypso",
+        imageUrl: "https://www.ptc.com/-/media/Images/blog/Authors/blog-Maria-Lowry.jpg",
+        DetailPagelink: "https://www.ptc.com/en/blog-authors/Maria-Lowry",
+        description: "Maria brings seven years of professional experience to her clients. She is committed to improving product quality, safety, sustainability"
+      },
+      {
+        id: 5,
+        authorName: "Author name",
+        imageUrl: "",
+        DetailPagelink: "#",
+        description: "Author description text goes here Author description text goes here Author description text goes here Author description text goes here Author description text goes here"
+      }, {
+        id: 6,
+        authorName: "Aaron Shaw",
+        imageUrl: "https://www.ptc.com/-/media/Images/blog/Authors/Blog_AaronShaw_2.jpg",
+        DetailPagelink: "https://www.ptc.com/en/blog-authors/Aaron-Shaw",
+        description: "Aaron Shaw joined PTC in 2013, currently he is the Senior Manager, CAD Demand Generation. He is responsible for"
+      },
+      {
+        id: 7,
+        authorName: "Abby Eon",
+        imageUrl: "https://www.ptc.com/-/media/Images/new-org/399x200/abby-eon-400x200.jpg",
+        DetailPagelink: "https://www.ptc.com/en/blog-authors/Abby-Eon",
+        description: "Abby Eon is Senior Vice President and General Manager, Kepware. As part of her role, Abby looks after "
+      },
+      {
+        id: 8,
+        authorName: "Catherine Kniker",
+        imageUrl: "https://www.ptc.com/-/media/Images/blog/Authors/catherine-kniker.jpg",
+        DetailPagelink: "https://www.ptc.com/en/blog-authors/Catherine-Kniker",
+        description: "Catherine is EVP and Chief Strategy and Marketing Officer at PTC, responsible for positioning the company for success"
+      },
+      {
+        id: 9,
+        authorName: "Maria Lowry, Manager, Kalypso",
+        imageUrl: "https://www.ptc.com/-/media/Images/blog/Authors/blog-Maria-Lowry.jpg",
+        DetailPagelink: "https://www.ptc.com/en/blog-authors/Maria-Lowry",
+        description: "Maria brings seven years of professional experience to her clients. She is committed to improving product quality, safety, sustainability"
+      },
+      {
+        id: 10,
+        authorName: "Author name",
+        imageUrl: "",
+        DetailPagelink: "#",
+        description: "Author description text goes here Author description text goes here Author description text goes here Author description text goes here Author description text goes here"
+      }, {
+        id: 11,
+        authorName: "Aaron Shaw",
+        imageUrl: "https://www.ptc.com/-/media/Images/blog/Authors/Blog_AaronShaw_2.jpg",
+        DetailPagelink: "https://www.ptc.com/en/blog-authors/Aaron-Shaw",
+        description: "Aaron Shaw joined PTC in 2013, currently he is the Senior Manager, CAD Demand Generation. He is responsible for"
+      },
+      {
+        id: 12,
+        authorName: "Abby Eon",
+        imageUrl: "https://www.ptc.com/-/media/Images/new-org/399x200/abby-eon-400x200.jpg",
+        DetailPagelink: "https://www.ptc.com/en/blog-authors/Abby-Eon",
+        description: "Abby Eon is Senior Vice President and General Manager, Kepware. As part of her role, Abby looks after "
+      },
+      {
+        id: 13,
+        authorName: "Catherine Kniker",
+        imageUrl: "https://www.ptc.com/-/media/Images/blog/Authors/catherine-kniker.jpg",
+        DetailPagelink: "https://www.ptc.com/en/blog-authors/Catherine-Kniker",
+        description: "Catherine is EVP and Chief Strategy and Marketing Officer at PTC, responsible for positioning the company for success"
+      },
+      {
+        id: 14,
+        authorName: "Maria Lowry, Manager, Kalypso",
+        imageUrl: "https://www.ptc.com/-/media/Images/blog/Authors/blog-Maria-Lowry.jpg",
+        DetailPagelink: "https://www.ptc.com/en/blog-authors/Maria-Lowry",
+        description: "Maria brings seven years of professional experience to her clients. She is committed to improving product quality, safety, sustainability"
+      },
+      {
+        id: 15,
+        authorName: "Author name",
+        imageUrl: "",
+        DetailPagelink: "#",
+        description: "Author description text goes here Author description text goes here Author description text goes here Author description text goes here Author description text goes here"
+      },
+      {
+        id: 16,
+        authorName: "Aaron Shaw",
+        imageUrl: "https://www.ptc.com/-/media/Images/blog/Authors/Blog_AaronShaw_2.jpg",
+        DetailPagelink: "https://www.ptc.com/en/blog-authors/Aaron-Shaw",
+        description: "Aaron Shaw joined PTC in 2013, currently he is the Senior Manager, CAD Demand Generation. He is responsible for"
+      },
+      {
+        id: 17,
+        authorName: "Abby Eon",
+        imageUrl: "https://www.ptc.com/-/media/Images/new-org/399x200/abby-eon-400x200.jpg",
+        DetailPagelink: "https://www.ptc.com/en/blog-authors/Abby-Eon",
+        description: "Abby Eon is Senior Vice President and General Manager, Kepware. As part of her role, Abby looks after "
+      },
+      {
+        id: 18,
+        authorName: "Catherine Kniker",
+        imageUrl: "https://www.ptc.com/-/media/Images/blog/Authors/catherine-kniker.jpg",
+        DetailPagelink: "https://www.ptc.com/en/blog-authors/Catherine-Kniker",
+        description: "Catherine is EVP and Chief Strategy and Marketing Officer at PTC, responsible for positioning the company for success"
+      },
+      {
+        id: 19,
+        authorName: "Maria Lowry, Manager, Kalypso",
+        imageUrl: "https://www.ptc.com/-/media/Images/blog/Authors/blog-Maria-Lowry.jpg",
+        DetailPagelink: "https://www.ptc.com/en/blog-authors/Maria-Lowry",
+        description: "Maria brings seven years of professional experience to her clients. She is committed to improving product quality, safety, sustainability"
+      },
+      {
+        id: 20,
+        authorName: "Author name",
+        imageUrl: "",
+        DetailPagelink: "#",
+        description: "Author description text goes here Author description text goes here Author description text goes here Author description text goes here Author description text goes here"
+      },
+      {
+        id: 21,
+        authorName: "Catherine Kniker",
+        imageUrl: "https://www.ptc.com/-/media/Images/blog/Authors/catherine-kniker.jpg",
+        DetailPagelink: "https://www.ptc.com/en/blog-authors/Catherine-Kniker",
+        description: "Catherine is EVP and Chief Strategy and Marketing Officer at PTC, responsible for positioning the company for success"
+      },
+    ];
+  }
+  componentDidLoad() {
+    this.loadMoreCards();
+  }
+  handleScroll() {
+    const windowHeight = window.innerHeight;
+    const documentHeight = document.documentElement.scrollHeight;
+    const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
+    const scrollBottom = scrollTop + windowHeight;
+    if (!this.isLoading && scrollBottom >= documentHeight) {
+      this.loadMoreCards();
+    }
+  }
+  async loadMoreCards() {
+    if (this.loadedCardCount < this.cardData.length) {
+      this.isLoading = true;
+      const visibleCardData = this.cardData.slice(this.loadedCardCount, this.loadedCardCount + this.cardsPerLoad);
+      const promises = visibleCardData.map((card) => {
+        return new Promise((resolve) => {
+          const image = new Image();
+          image.src = card.imageUrl;
+          image.onload = () => {
+            resolve();
+          };
+          image.onerror = () => {
+            // Load a dummy image in case of error
+            card.imageUrl = this.defaultAuthorImage;
+            resolve();
+          };
+        });
+      });
+      await Promise.all(promises);
+      this.loadedCardCount += this.cardsPerLoad;
+      this.isLoading = false;
+    }
+  }
+  render() {
+    const visibleCards = this.cardData.slice(0, this.loadedCardCount);
+    return (h("div", null, h("div", { class: "author-grid" }, visibleCards.map((card, index) => (h("div", { class: "author-col", key: index }, h("ptc-card", { "has-image": "true", "card-type": "related-card", "card-href": card.DetailPagelink, heading: card.authorName }, h("ptc-img", { slot: "slot-image", "img-url": card.imageUrl, "image-type": "smart-img", "load-mode": "lazy-bg" }), h("div", { slot: "slot-description" }, h("ptc-para", { "font-size": "x-small", "font-weight": "w-4", "para-line-h": "line-height-densest", "para-margin": "margin-flush", "para-z-index": "z-auto" }, h("ptc-tooltip", { description: card.description, "text-lines": "4", "z-index": "z-auto" })))))))), this.isLoading && h("div", { class: "loader" }, h("svg", { preserveAspectRatio: "xMinYMin meet", fill: "#3CC73D", x: "0px", y: "0px", version: "1.1", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 182.1 210.2" }, h("title", null, "list-loading"), h("path", { d: "M91,21.2l72.6,41.9v83.9L91,189l-72.6-41.9V63.2L91,21.2 M91,0L0,52.6v105.1l91,52.6l91-52.6V52.6L91,0L91,0z" }), h("g", null, h("polygon", { points: "67.5,105.5 67.5,163.1 67.5,165.4 43.9,151.8 43.9,149.4 43.9,100" }), h("polygon", { opacity: "0.7", points: "43.6,100.1 43.8,100 43.9,100 43.9,149.4 43.9,149.4 43.9,151.8 30.3,144 30.3,141.6 30.3,106.6" }), h("animate", { attributeName: "fill-opacity", begin: "100ms", dur: "1s", values: "1;.2;1", calcMode: "linear", repeatCount: "indefinite" })), h("g", null, h("polygon", { points: "109.6,88.6 109.6,166.2 109.6,168.3 91,179 81.1,173.3 81.1,170.9 81.1,84.2" }), h("polygon", { opacity: "0.7", points: "81.1,84.2 81.1,170.9 81.1,173.3 67.5,165.4 67.5,163.1 67.5,105.5" }), h("animate", { attributeName: "fill-opacity", begin: "300ms", dur: "1s", values: "1;.2;1", calcMode: "linear", repeatCount: "indefinite" })), h("g", null, h("polygon", { points: "154,70.2 154,70.2 154,142.7 122.9,160.5 122.9,158.5 122.9,65.8" }), h("polygon", { opacity: "0.7", points: "122.9,65.8 122.9,158.5 122.9,160.5 109.6,168.3 109.6,168.3 109.6,166.2 109.6,88.6" }), h("animate", { attributeName: "fill-opacity", begin: "500ms", dur: "1s", values: "1;.2;1", calcMode: "linear", repeatCount: "indefinite" }))))));
+  }
+  static get is() { return "author-listing-example"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["author-listing-example.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["author-listing-example.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "defaultAuthorImage": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "default-author-image",
+        "reflect": false
+      }
+    };
+  }
+  static get states() {
+    return {
+      "isLoading": {},
+      "loadedCardCount": {},
+      "cardsPerLoad": {},
+      "cardData": {}
+    };
+  }
+  static get elementRef() { return "el"; }
+  static get listeners() {
+    return [{
+        "name": "scroll",
+        "method": "handleScroll",
+        "target": "window",
+        "capture": false,
+        "passive": true
+      }];
+  }
+}

package/dist/collection/components/organism-bundles/sequential-bundle-example/sequential-bundle-example.css

@@ -702,8 +702,8 @@ swiper-container .swiper-notification {
 }
 
 .swiper-slide {
-  text-align: center;
-  font-size: 18px;
+  /* text-align: center;
+  font-size: 18px; */
   background: #fff;
   display: flex;
   justify-content: center;

package/dist/collection/components/ptc-button/ptc-button.css

@@ -19,6 +19,31 @@ button {
   padding: 9.4px 17.5px;
   border-radius: var(--ptc-border-radius-standard);
 }
+button.reveal-down .content {
+  transition: opacity var(--ptc-transition-medium) var(--ptc-ease-out);
+  opacity: 0;
+  font-size: var(--ptc-font-size-xx-small);
+}
+button.reveal-down .icon-wrapper {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  align-content: center;
+  height: 16px;
+}
+button.reveal-down .icon-wrapper .icon {
+  transition: top var(--ptc-transition-fast) var(--ptc-ease-out);
+  position: absolute;
+  display: inline-block;
+  top: -12px;
+}
+button:hover.reveal-down .content {
+  opacity: 1;
+}
+button:hover.reveal-down .icon-wrapper .icon {
+  top: 4px;
+}
 button.animation-right ::slotted([slot=slot-after-text]),
 button.animation-right ::slotted([slot=slot-before-text]), button.animation-down ::slotted([slot=slot-after-text]),
 button.animation-down ::slotted([slot=slot-before-text]) {

package/dist/collection/components/ptc-button/ptc-button.js

@@ -21,7 +21,9 @@ export class PtcButton {
   render() {
     const classMap = this.getCssClassMap();
     const Tag = !!this.linkHref ? 'a' : 'button';
-    return (h(Host, null, this.styles && h("style", null, this.styles), h(Tag, Object.assign({ class: classMap, onClick: this.clickEventHandler.bind(this) }, (!!this.linkHref ? { href: this.linkHref } : {}), (!this.linkHref ? { type: this.type } : {}), (!!this.target && !!this.linkHref ? { target: this.target } : {}), (!!this.rel && !!this.linkHref ? { rel: this.rel } : {}), (!!this.linkHref ? { title: this.linkTitle ? this.linkTitle : this.linkHref } : {}), (!!this.tabNav ? { tabindex: -1 } : { tabindex: 0 })), h("span", null, h("slot", { name: "slot-before-text" }), h("slot", null), h("slot", { name: "slot-after-text" })))));
+    return (h(Host, null, this.styles && h("style", null, this.styles), h(Tag, Object.assign({ class: classMap, onClick: this.clickEventHandler.bind(this) }, (!!this.linkHref ? { href: this.linkHref } : {}), (!this.linkHref ? { type: this.type } : {}), (!!this.target && !!this.linkHref ? { target: this.target } : {}), (!!this.rel && !!this.linkHref ? { rel: this.rel } : {}), (!!this.linkHref ? { title: this.linkTitle ? this.linkTitle : this.linkHref } : {}), (!!this.tabNav ? { tabindex: -1 } : { tabindex: 0 })), this.iconAnimation == 'reveal-down' ?
+      h("span", null, h("div", { class: "content" }, h("slot", null)), h("div", { class: "icon-wrapper" }, h("div", { class: "icon" }, h("slot", { name: "slot-after-text" })))) :
+      h("span", null, h("slot", { name: "slot-before-text" }), h("slot", null), h("slot", { name: "slot-after-text" })))));
   }
   getCssClassMap() {
     return {
@@ -123,8 +125,8 @@ export class PtcButton {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "'animation-right' | 'animation-down' | ''",
-          "resolved": "\"\" | \"animation-down\" | \"animation-right\"",
+          "original": "'animation-right' | 'animation-down' | 'reveal-down' | ''",
+          "resolved": "\"\" | \"animation-down\" | \"animation-right\" | \"reveal-down\"",
           "references": {}
         },
         "required": false,
@@ -141,8 +143,8 @@ export class PtcButton {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "'icon-left' | 'icon-right'",
-          "resolved": "\"icon-left\" | \"icon-right\"",
+          "original": "'icon-left' | 'icon-right' | 'none'",
+          "resolved": "\"icon-left\" | \"icon-right\" | \"none\"",
           "references": {}
         },
         "required": false,

package/dist/collection/components/ptc-dynamic-card/ptc-dynamic-card.css

@@ -16,14 +16,16 @@
 :host(.sequential) .card-mobile ptc-card-content, :host(.sequential) .card-dt-open ptc-card-content {
   display: flex;
   flex-basis: 38%;
-  justify-content: center;
+  justify-content: flex-start;
   align-items: center;
   padding: var(--ptc-element-spacing-06) var(--ptc-element-spacing-06) var(--ptc-element-spacing-07) var(--ptc-element-spacing-06);
+  height: unset;
 }
 @media only screen and (min-width: 1440px) {
   :host(.sequential) .card-mobile ptc-card-content, :host(.sequential) .card-dt-open ptc-card-content {
     padding-left: var(--ptc-element-spacing-08);
     padding-right: var(--ptc-element-spacing-08);
+    padding-top: var(--ptc-element-spacing-07);
   }
 }
 :host(.sequential) .card-mobile ptc-picture, :host(.sequential) .card-dt-open ptc-picture {

package/dist/collection/components/ptc-dynamic-card/ptc-dynamic-card.js

@@ -22,7 +22,7 @@ export class PtcDynamicCard {
     }
     else if (this.cardScreen === 'desktop' && !this.isExpanded) {
       return [
-        h("div", { class: "card card-dt-closed" }, h("ptc-picture", { alt: this.cardImgAlt, src: this.cardImgSrc, "image-position": "relative", "is-full-width": true, height: "424" }, this.overlayExists ? h("ptc-overlay", { "filter-color": "black-3" }) : h("ptc-overlay", { "filter-color": "black-2" })), h("div", { class: "closed-content", "card-type": "card-dynamic" }, h("div", { class: "card-title" }, h("h2", null, this.cardTitle)))),
+        h("div", { class: "card card-dt-closed" }, h("ptc-picture", { alt: this.cardImgAlt, src: this.cardImgSrc, "image-position": "relative", "is-full-width": true, height: "424" }, this.overlayExists ? h("ptc-overlay", { "filter-color": "solid-black-1" }) : h("ptc-overlay", { "filter-color": "solid-black-2" })), h("div", { class: "closed-content", "card-type": "card-dynamic" }, h("div", { class: "card-title" }, h("h2", null, this.cardTitle)))),
       ];
     }
     else {

package/dist/collection/components/ptc-overlay/ptc-overlay.css

@@ -77,6 +77,14 @@
   background: linear-gradient(180deg, rgba(97, 116, 128, 0.72) 0%, rgba(97, 116, 128, 0.85) 69.27%, rgba(97, 116, 128, 0.4) 100%);
 }
 
+:host(.solid-black-1) {
+  background: rgba(16, 19, 20, 0.85);
+}
+
+:host(.solid-black-2) {
+  background: rgba(16, 19, 20, 0.7);
+}
+
 :host(.radius-standard) {
   border-radius: var(--ptc-border-radius-standard);
 }

package/dist/collection/components/ptc-overlay/ptc-overlay.js

@@ -38,7 +38,7 @@ export class PtcOverlay {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "| 'blue'\r\n    | 'red'\r\n    | 'orange'\r\n    | 'green'\r\n    | 'black-1'\r\n    | 'black-2'\r\n    | 'black-3'\r\n    | 'black-4'\r\n    | 'black-5'\r\n    | 'slate-grey'\r\n    | 'bright-blue'\r\n    | 'bright-red'\r\n    | 'bright-orange'\r\n    | 'bright-green'\r\n    | 'bright-slate-grey'\r\n    | string",
+          "original": "| 'blue'\r\n    | 'red'\r\n    | 'orange'\r\n    | 'green'\r\n    | 'black-1'\r\n    | 'black-2'\r\n    | 'black-3'\r\n    | 'black-4'\r\n    | 'black-5'\r\n    | 'slate-grey'\r\n    | 'bright-blue'\r\n    | 'bright-red'\r\n    | 'bright-orange'\r\n    | 'bright-green'\r\n    | 'bright-slate-grey'\r\n    | 'solid-black-1'\r\n    | 'solid-black-2'\r\n    | string",
           "resolved": "string",
           "references": {}
         },

package/dist/collection/components/ptc-span/ptc-span.css

@@ -48,7 +48,8 @@
 }
 
 :host(.three-column-report) span {
-  font-size: var(--ptc-font-size-large);
+  font-size: var(--ptc-font-size-medium);
+  line-height: var(--ptc-line-height-densest);
 }
 
 :host(.blog-tag) span {
@@ -106,12 +107,20 @@
 }
 
 @media only screen and (min-width: 360px) {
+  :host(.three-column-report) span {
+    font-size: var(--ptc-font-size-large);
+    line-height: var(--ptc-line-height-densest);
+  }
+}
+@media only screen and (min-width: 480px) {
   :host(.three-column-report) span {
     font-size: var(--ptc-font-size-x-large);
+    line-height: var(--ptc-line-height-densest);
   }
 }
 @media only screen and (min-width: 768px) {
   :host(.three-column-report) span {
     font-size: var(--ptc-font-size-xx-large);
+    line-height: var(--ptc-line-height-densest);
   }
 }

package/dist/collection/stories/Button.stories.js

@@ -56,6 +56,18 @@ export default {
       description: 'Button type',
       defaultValue: { summary: 'button' },
       options: [ 'button', 'link', 'reset', 'submit' ]
+    },
+    iconAnimation: {
+      control: 'select',
+      description: "Icon animation on hover type, requires a icon-asset element to be slotted to the 'slot-after-text' or 'slot-before-text' slots",
+      defaultValue: { summary: 'reveal-down' },
+      options: [ 'animation-right', 'animation-down', 'reveal-down' ]
+    },
+    iconPosition: {
+      control: 'select',
+      description: "Icon position on hover type, requires a icon-asset element to be slotted to the 'slot-after-text' or 'slot-before-text' slots",
+      defaultValue: { summary: 'none' },
+      options: [ 'icon-right', 'icon-left', 'none' ]
     }
   }
 };
@@ -84,4 +96,25 @@ Example.args = {
   target: '_self',
   textAlign: 'undefined',
   type: 'button'
+}
+
+const IconTemplate = args => { return html `<ptc-button
+	color=${args.color}
+	disabled=${args.disabled}
+	tab-nav=${args.tabNav}
+	text-align=${args.textAlign}
+	type=${args.type}
+  icon-animation=${args.iconAnimation}
+  icon-position=${args.iconPosition}
+>Download<icon-asset slot="slot-after-text" class="is-centered" size="medium" type="ptc" name="download-arrow-2" color="white"></icon-asset></ptc-button>`;}
+
+export const IconExample = IconTemplate.bind({});
+
+IconExample.args = {
+  color: 'ptc-quaternary',
+  disabled: 'false',
+  tabNav: '0',
+  textAlign: 'undefined',
+  type: 'button',
+  iconAnimation: 'reveal-down',
 }

package/dist/custom-elements/index.d.ts

@@ -2,6 +2,12 @@
 
 import type { Components, JSX } from "../types/global";
 
+interface AuthorListingExample extends Components.AuthorListingExample, HTMLElement {}
+export const AuthorListingExample: {
+  prototype: AuthorListingExample;
+  new (): AuthorListingExample;
+};
+
 interface BundleExample extends Components.BundleExample, HTMLElement {}
 export const BundleExample: {
   prototype: BundleExample;