@ptcwebops/ptcw-design 0.6.6 → 0.6.8

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

@@ -43,9 +43,16 @@ export class PtcCard {
       h("div", { class: "card-border", part: "border-wrapper" },
         h(Tag, Object.assign({ class: classMap, part: "card-layout" }, (!!this.cardHref ? { href: this.cardHref } : {}), (!!this.target && !!this.cardHref ? { target: this.target } : {}), (!!this.rel && !!this.cardHref ? { rel: this.rel } : {}), (!!this.ribbonText ? { rel: this.ribbonText } : {})),
           this.hasImage || this.hasLottie || this.hasVideo ? (h("div", { class: "card-media", part: "media-wrapper" }, this.getMediaSlot ? h("slot", { name: this.getMediaSlot() }) : null)) : null,
-          !!this.ribbonText && this.cardType == 'listing-card' ? h("div", { class: "ribbon-text" }, `${this.ribbonText}`) : null,
+          !!this.ribbonText && this.cardType == 'resource-center-card' ? h("div", { class: "ribbon-text" }, `${this.ribbonText}`) : null,
           h("div", { class: "card-body", part: "body-wrapper" },
-            !!this.cardDate && (this.cardType === 'listing-card' || this.cardType === 'listing-card-horizontal') ? h("ptc-date", { "date-string": `${this.cardDate}`, "date-styles": "span{font-weight: 400;font-size: 16px;line-height: 19px;color: #282F35;margin-bottom:24px;display:inline-block;}" }) : null,
+            !!this.cardDate && (this.cardType === 'listing-card' || this.cardType === 'listing-card-horizontal') ?
+              h("div", { class: "card-date-text" },
+                h("ptc-date", { "date-string": `${this.cardDate}` }),
+                !!this.eventType ? h("p", null,
+                  "\u00A0\u00A0\u00A0|\u00A0\u00A0\u00A0",
+                  this.eventType) : null) : null,
+            this.cardType === 'case-studies-card' ? Object.assign({}, !!this.cardLogo ? h("div", { class: "card-logo-container" },
+              h("ptc-picture", { alt: "", "object-fit": "cover", "max-width": "280", src: this.cardLogo, height: "40" })) : h("div", { class: "card-logo-none" })) : null,
             h("slot", { name: "slot-before-heading" }),
             !!this.heading
               ? [
@@ -89,8 +96,8 @@ export class PtcCard {
       "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "'simple-card' | 'lottie-card' | 'custom-card' | 'clip-edge-card' | 'hightlight-card' | 'listing-card' | 'horizontal-card' | 'listing-card-horizontal'",
-        "resolved": "\"clip-edge-card\" | \"custom-card\" | \"hightlight-card\" | \"horizontal-card\" | \"listing-card\" | \"listing-card-horizontal\" | \"lottie-card\" | \"simple-card\"",
+        "original": "'simple-card' | 'lottie-card' | 'custom-card' | 'clip-edge-card' | 'hightlight-card' | 'listing-card' | 'horizontal-card' | 'listing-card-horizontal' | 'resource-center-card' | 'case-studies-card'",
+        "resolved": "\"case-studies-card\" | \"clip-edge-card\" | \"custom-card\" | \"hightlight-card\" | \"horizontal-card\" | \"listing-card\" | \"listing-card-horizontal\" | \"lottie-card\" | \"resource-center-card\" | \"simple-card\"",
         "references": {}
       },
       "required": false,
@@ -296,6 +303,40 @@ export class PtcCard {
       },
       "attribute": "ribbon-text",
       "reflect": false
+    },
+    "eventType": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Event Type"
+      },
+      "attribute": "event-type",
+      "reflect": false
+    },
+    "cardLogo": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Card Logo"
+      },
+      "attribute": "card-logo",
+      "reflect": false
     }
   }; }
 }

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

@@ -4,7 +4,7 @@ export class PtcCardContent {
     if (!this.el.classList.contains('speed-bump') && !this.el.classList.contains('card-video-intro') && !this.el.classList.contains('card-dynamic')) {
       this.hoverEvent.emit();
       this.el.classList.add('mouse-hover');
-      if (!this.el.classList.contains('card-video') && !this.el.classList.contains('card-playlist')) {
+      if (!this.el.classList.contains('card-video') && !this.el.classList.contains('card-playlist') && this.el.nextElementSibling) {
         this.el.nextElementSibling.classList.add('mouse-hover-card-bottom');
       }
     }
@@ -13,7 +13,7 @@ export class PtcCardContent {
     if (!this.el.classList.contains('speed-bump') && !this.el.classList.contains('card-video-intro') && !this.el.classList.contains('card-dynamic')) {
       this.hoverEvent.emit();
       this.el.classList.remove('mouse-hover');
-      if (!this.el.classList.contains('card-video') && !this.el.classList.contains('card-playlist')) {
+      if (!this.el.classList.contains('card-video') && !this.el.classList.contains('card-playlist') && this.el.nextElementSibling) {
         this.el.nextElementSibling.classList.remove('mouse-hover-card-bottom');
       }
     }

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

@@ -30,7 +30,7 @@ export class PtcCheckbox {
         h("input", { type: "checkbox", checked: this.checked == "checked", name: this.inputName, value: this.value, onChange: (e) => this.handleClick(e) }),
         h("span", { class: "check" },
           h("span", { class: "mark" },
-            h("icon-asset", { type: "ptc", size: "xx-small", name: "checkmark" }))))));
+            h("icon-asset", { type: "ptc", color: "white", size: "xx-small", name: "checkmark" }))))));
   }
   static get is() { return "ptc-checkbox"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/components/ptc-collapse-list/ptc-collapse-list.css

@@ -1,10 +1,15 @@
 :host {
   display: block;
+  height: 100%;
 }
 
 .container {
   border-right: 1px solid rgba(112, 112, 112, 0.25);
   position: relative;
+  height: 100%;
+}
+.container > ul {
+  overflow: visible;
 }
 
 a {
@@ -19,40 +24,70 @@ ul {
   margin: 0;
 }
 
-.level-1 > ul, .level-2 > ul, .level-3 > ul, .level-4 > ul, .level-5 > ul {
+li {
+  cursor: pointer;
+}
+
+.level-1 > ul {
+  max-height: 0;
+}
+.level-1 > ul > li {
+  margin: 12px 0;
+}
+.level-1 > ul > li:first-child {
+  margin-top: 20px;
+}
+.level-1 > ul > li:last-child {
+  margin-bottom: 10px;
+}
+
+.level-2 > ul, .level-3 > ul, .level-4 > ul, .level-5 > ul {
   max-height: 0;
 }
+.level-2 > ul > li, .level-3 > ul > li, .level-4 > ul > li, .level-5 > ul > li {
+  margin: 8px 0;
+}
+
+.level-2 > ul {
+  padding-left: 2.25rem;
+}
+
+.level-3 > ul {
+  padding-left: 3rem;
+}
+
+.level-4 > ul {
+  padding-left: 3.75rem;
+}
+
+.level-5 > ul {
+  padding-left: 4.5rem;
+}
 
 .level-1 {
   position: relative;
-  padding: 17px 20px 17px 0;
-  border-bottom: 1px solid rgba(112, 112, 112, 0.25);
 }
 .level-1 > a {
+  position: relative;
+  padding: 16px 20px 17.5px 0;
+  display: block;
   font-size: 18px;
   letter-spacing: 0.45px;
   font-weight: 800;
-  color: #40434a;
+  color: var(--color-gray-08);
   text-decoration: none;
+  border-bottom: 1px solid rgba(112, 112, 112, 0.25);
 }
 .level-1 > a:hover, .level-1 > a:active, .level-1 > a:focus {
   text-decoration: none;
 }
-.level-1 > icon-asset {
-  transition: transform ease-out 250ms;
+.level-1 > a > icon-asset {
+  transition: transform var(--ptc-ease-out) var(--ptc-transition-medium), padding var(--ptc-ease-out) var(--ptc-transition-medium);
   position: absolute;
-  right: 32px;
+  right: 20px;
+  padding-top: 2px;
 }
-.level-1 > ul {
-  padding-top: 0;
-}
-.level-1.expanded > icon-asset {
-  transform: rotate(-180deg);
-}
-.level-1.expanded > ul {
-  padding-top: 14px;
-}
-.level-1:after {
+.level-1 > a:after {
   content: "";
   display: block;
   position: absolute;
@@ -60,62 +95,100 @@ ul {
   left: 0;
   height: 3px;
   width: 40px;
-  background-color: #74c34d;
+  background-color: var(--color-green-07);
+  transition: background-color var(--ptc-ease-out) var(--ptc-transition-medium);
+}
+.level-1.expanded a > icon-asset {
+  transform: rotate(-180deg);
+  padding-top: 0;
+}
+.level-1.expanded a > ul {
+  padding-top: 14px;
+}
+.level-1.expanded a:after {
+  background-color: var(--color-gray-11);
+}
+.level-1 > ul {
+  padding-top: 0;
+}
+.level-1:first-child > a {
+  padding-top: 20px;
 }
 
-.level-2 {
-  margin: 8px 0;
+.level-2, .level-3, .level-4, .level-5 {
+  position: relative;
 }
-.level-2 > a {
+.level-2 > a, .level-3 > a, .level-4 > a, .level-5 > a {
   font-size: 15px;
   font-weight: 500;
   letter-spacing: 0.4px;
-  color: #3b4550;
+  color: var(--color-gray-10);
   text-decoration: none;
+  display: inline-block;
+  margin-left: 20px;
 }
-.level-2 > a:hover, .level-2 > a:active, .level-2 > a:focus {
+.level-2 > a:hover, .level-2 > a:active, .level-3 > a:hover, .level-3 > a:active, .level-4 > a:hover, .level-4 > a:active, .level-5 > a:hover, .level-5 > a:active {
   font-weight: 800;
-  color: #74c34d;
+  color: var(--color-green-07);
   text-decoration: none;
 }
-
-input[type=text] {
-  padding: 9px 45px 9px 18px;
-  font-size: 15px;
-  font-weight: 500;
-  color: var(--color-gray-07);
-  box-shadow: 1px 1px 5px 0 rgba(0, 0, 0, 0.16);
-  border: solid 1px var(--color-gray-07);
-  background-color: #ffffff;
-}
-input[type=text]::-ms-clear {
-  display: none;
+.level-2 .expander-icon, .level-3 .expander-icon, .level-4 .expander-icon, .level-5 .expander-icon {
+  position: absolute;
+  left: -18px;
+  top: 2px;
 }
-input[type=text]:focus {
-  outline: none;
+
+.level-3:before, .level-4:before, .level-5:before {
+  position: absolute;
+  content: "";
+  width: 2rem;
+  height: 1px;
+  display: block;
+  left: 0;
+  top: 9px;
+  background-color: var(--color-gray-02);
 }
-input[type=text]::-webkit-input-placeholder {
-  color: var(--color-gray-02);
+
+.level-3:before {
+  width: 2rem;
+  left: -2.25rem;
 }
-input[type=text]:-moz-placeholder {
-  /* FF 4-18 */
-  color: var(--color-gray-02);
-  opacity: 1;
+
+.level-4:before {
+  width: 2.75rem;
+  left: -3rem;
 }
-input[type=text]::-moz-placeholder {
-  /* FF 19+ */
-  color: var(--color-gray-02);
-  opacity: 1;
+
+.level-5:before {
+  width: 3.5rem;
+  left: -3.75rem;
 }
-input[type=text]:-ms-input-placeholder {
-  /* IE 10+ */
-  color: var(--color-gray-02);
+
+.search-box {
+  display: flex;
+  width: 100%;
+}
+.search-box input[type=text] {
+  font-family: var(--ptc-font-latin);
+  padding: 8px 45px 8px 18px;
+  font-size: 1rem;
+  font-weight: 400;
+  color: var(--color-gray-12);
+  box-shadow: var(--ptc-shadow-x-small);
+  border: solid 1px var(--color-gray-06);
+  transition: border var(--ptc-transition-medium) var(--ptc-ease-out), box-shadow var(--ptc-transition-medium) var(--ptc-ease-out);
+  background-color: var(--color-white);
+  width: 100%;
+  margin-right: 2rem;
+}
+.search-box input[type=text]::-ms-clear {
+  display: none;
 }
-input[type=text]::-ms-input-placeholder {
-  /* Microsoft Edge */
-  color: var(--color-gray-02);
+.search-box input[type=text]:focus {
+  outline: none;
+  box-shadow: var(--ptc-shadow-small);
+  border: solid 1px var(--color-gray-12);
 }
-input[type=text] *::placeholder {
-  /* modern browser */
-  color: var(--color-gray-02);
+.search-box input[type=text]::placeholder {
+  color: var(--color-gray-07);
 }