@ptcwebops/ptcw-design 6.3.65-beta → 6.3.68-beta

package/dist/collection/components/subnav/ptc-nav-submenu/ptc-nav-submenu.css

@@ -9,8 +9,10 @@ ul,
 li,
 ptc-subnav,
 ptc-tab-list,
-ptc-link, ptc-square-card,
-.hyphenate-text, ptc-footer {
+ptc-link,
+ptc-square-card,
+.hyphenate-text,
+ptc-footer {
   word-break: break-word;
   hyphens: manual;
   -webkit-hyphens: manual;
@@ -29,8 +31,10 @@ ul,
 li,
 ptc-subnav,
 ptc-tab-list,
-ptc-link, ptc-square-card,
-.hyphenate-text, ptc-footer {
+ptc-link,
+ptc-square-card,
+.hyphenate-text,
+ptc-footer {
     hyphens: auto;
     -webkit-hyphenate-limit-before: 3;
     /* For Safari */

package/dist/collection/components/subnav/ptc-nav-submenu/ptc-nav-submenu.js

@@ -1,4 +1,4 @@
-import { Host, h } from '@stencil/core';
+import { Host, h, } from "@stencil/core";
 export class PtcNavSubmenu {
   constructor() {
     this.label = undefined;
@@ -9,8 +9,8 @@ export class PtcNavSubmenu {
     this.backBtnTrackerId = undefined;
   }
   calculateOffset() {
-    var dropdown = this.el.shadowRoot.querySelector('.submenu-container');
-    var container = this.el.closest('ptc-subnav');
+    var dropdown = this.el.shadowRoot.querySelector(".submenu-container");
+    var container = this.el.closest("ptc-subnav");
     if (dropdown && container) {
       if (window.innerWidth >= 1200) {
         let height = container.clientHeight;
@@ -19,7 +19,7 @@ export class PtcNavSubmenu {
         }
       }
       else {
-        dropdown.style.top = '';
+        dropdown.style.top = "";
       }
     }
   }
@@ -30,10 +30,7 @@ export class PtcNavSubmenu {
     }, 100);
   }
   render() {
-    return (h(Host, { class: `dropdown` }, h("div", { id: this.backBtnTrackerId, class: "tracker-div" }, h("span", { class: `back-btn` }, h("svg", { width: "10", height: "16", viewBox: "0 0 10 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M9.97852 14.12L3.82515 8L9.97852 1.88L8.08414 -8.28059e-08L0.0229606 8L8.08414 16L9.97852 14.12Z", fill: "white" })), "Back")), h("span", { class: `submenu-toggle`, onClick: () => this.handleClick(this), onMouseOver: () => this.handleClick(this) }, this.iconAssetName &&
-      h("icon-asset", { type: "ptc", size: "xx-small", name: this.iconAssetName, color: "white" }), h("div", { id: this.labelTrackerId, class: "tracker-div" }, this.label), h("div", { id: this.dropdownTrackerId, class: "tracker-div" }, this.iconSrc &&
-      h("img", { src: this.iconSrc, alt: this.label, class: "custom-icon" }), !this.iconSrc &&
-      h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "15", height: "15", viewBox: "0 0 15 15", fill: "white", class: "" }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M13.2375 2.83325L7.5 8.60203L1.7625 2.83325L-7.76305e-08 4.60923L7.5 12.1666L15 4.60923L13.2375 2.83325Z", fill: "white" })))), h("div", { class: `submenu-container` }, h("div", { class: "submenu-container-lg" }, h("slot", null)))));
+    return (h(Host, { class: `dropdown` }, h("div", { id: this.backBtnTrackerId, class: "tracker-div" }, h("span", { class: `back-btn` }, h("svg", { width: "10", height: "16", viewBox: "0 0 10 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M9.97852 14.12L3.82515 8L9.97852 1.88L8.08414 -8.28059e-08L0.0229606 8L8.08414 16L9.97852 14.12Z", fill: "white" })), "Back")), h("span", { class: `submenu-toggle`, onClick: () => this.handleClick(this), onMouseOver: () => this.handleClick(this) }, this.iconAssetName && (h("icon-asset", { type: "ptc", size: "xx-small", name: this.iconAssetName, color: "white" })), h("div", { id: this.labelTrackerId, class: "tracker-div" }, this.label), h("div", { id: this.dropdownTrackerId, class: "tracker-div" }, this.iconSrc && (h("img", { src: this.iconSrc, alt: this.label, class: "custom-icon" })), !this.iconSrc && (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "15", height: "15", viewBox: "0 0 15 15", fill: "white", class: "" }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M13.2375 2.83325L7.5 8.60203L1.7625 2.83325L-7.76305e-08 4.60923L7.5 12.1666L15 4.60923L13.2375 2.83325Z", fill: "white" }))))), h("div", { class: `submenu-container` }, h("div", { class: "submenu-container-lg" }, h("slot", null)))));
   }
   static get is() { return "ptc-nav-submenu"; }
   static get encapsulation() { return "shadow"; }

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

@@ -9,8 +9,10 @@ ul,
 li,
 ptc-subnav,
 ptc-tab-list,
-ptc-link, ptc-square-card,
-.hyphenate-text, ptc-footer {
+ptc-link,
+ptc-square-card,
+.hyphenate-text,
+ptc-footer {
   word-break: break-word;
   hyphens: manual;
   -webkit-hyphens: manual;
@@ -29,8 +31,10 @@ ul,
 li,
 ptc-subnav,
 ptc-tab-list,
-ptc-link, ptc-square-card,
-.hyphenate-text, ptc-footer {
+ptc-link,
+ptc-square-card,
+.hyphenate-text,
+ptc-footer {
     hyphens: auto;
     -webkit-hyphenate-limit-before: 3;
     /* For Safari */

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

@@ -1,23 +1,23 @@
-import { Host, h } from '@stencil/core';
+import { Host, h, } from "@stencil/core";
 export class PtcSubnav {
   constructor() {
-    this.mobileTitle = 'See page topics';
+    this.mobileTitle = "See page topics";
     this.navOpen = false;
   }
   toggleNav() {
     this.navOpen = !this.navOpen;
   }
   handleScroll() {
-    let elem = this.el.shadowRoot.querySelector('div.sticky-subnav');
+    let elem = this.el.shadowRoot.querySelector("div.sticky-subnav");
     if (elem) {
-      elem.classList.remove('sticky');
+      elem.classList.remove("sticky");
     }
   }
   handleNavLinkClickedEvent() {
     this.toggleNav();
   }
   render() {
-    return (h(Host, null, h("div", { class: "sticky-subnav" }, h("nav", { class: `navbar ${this.navOpen ? 'navOpen' : ''}` }, h("button", { class: "navbar-toggle", onClick: () => {
+    return (h(Host, null, h("div", { class: "sticky-subnav" }, h("nav", { class: `navbar ${this.navOpen ? "navOpen" : ""}` }, h("button", { class: "navbar-toggle", onClick: () => {
         this.toggleNav();
       } }, this.mobileTitle, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "15", height: "15", viewBox: "0 0 15 15", fill: "white", class: "" }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M13.2375 2.83325L7.5 8.60203L1.7625 2.83325L-7.76305e-08 4.60923L7.5 12.1666L15 4.60923L13.2375 2.83325Z", fill: "white" }))), h("div", { class: "navbar-inner" }, h("div", { class: "nav-wrapper" }, h("slot", { name: "subnav-menu-left" }), h("slot", { name: "subnav-menu-right" })))))));
   }
@@ -51,7 +51,7 @@ export class PtcSubnav {
         },
         "attribute": "mobile-title",
         "reflect": false,
-        "defaultValue": "'See page topics'"
+        "defaultValue": "\"See page topics\""
       }
     };
   }

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

@@ -9,8 +9,10 @@ ul,
 li,
 ptc-subnav,
 ptc-tab-list,
-ptc-link, ptc-square-card,
-.hyphenate-text, ptc-footer {
+ptc-link,
+ptc-square-card,
+.hyphenate-text,
+ptc-footer {
   word-break: break-word;
   hyphens: manual;
   -webkit-hyphens: manual;
@@ -29,8 +31,10 @@ ul,
 li,
 ptc-subnav,
 ptc-tab-list,
-ptc-link, ptc-square-card,
-.hyphenate-text, ptc-footer {
+ptc-link,
+ptc-square-card,
+.hyphenate-text,
+ptc-footer {
     hyphens: auto;
     -webkit-hyphenate-limit-before: 3;
     /* For Safari */

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

@@ -1,4 +1,4 @@
-import { Host, h } from '@stencil/core';
+import { Host, h } from "@stencil/core";
 export class PtcSubnavCard {
   constructor() {
     this.cardTitle = undefined;
@@ -10,7 +10,7 @@ export class PtcSubnavCard {
     this.target = undefined;
   }
   render() {
-    const Tag = !!this.cardHref ? 'a' : 'div';
+    const Tag = !!this.cardHref ? "a" : "div";
     return (h(Host, null, h(Tag, Object.assign({}, (!!this.cardHref ? { href: this.cardHref } : {}), (!!this.cardHref ? { target: this.target } : {})), h("h4", null, this.cardTitle), h("img", { src: this.cardImageSrc, alt: this.cardImageAlt }), h("slot", null), h("h4", { class: "cta" }, this.ctaText, h("icon-asset", { type: "ptc", size: "x-small", name: this.ctaIconAssetName, color: "white" })))));
   }
   static get is() { return "ptc-subnav-card"; }

package/dist/collection/components/tab-content/tab-content.css

@@ -9,8 +9,10 @@ ul,
 li,
 ptc-subnav,
 ptc-tab-list,
-ptc-link, ptc-square-card,
-.hyphenate-text, ptc-footer {
+ptc-link,
+ptc-square-card,
+.hyphenate-text,
+ptc-footer {
   word-break: break-word;
   hyphens: manual;
   -webkit-hyphens: manual;
@@ -29,8 +31,10 @@ ul,
 li,
 ptc-subnav,
 ptc-tab-list,
-ptc-link, ptc-square-card,
-.hyphenate-text, ptc-footer {
+ptc-link,
+ptc-square-card,
+.hyphenate-text,
+ptc-footer {
     hyphens: auto;
     -webkit-hyphenate-limit-before: 3;
     /* For Safari */
@@ -54,7 +58,16 @@ ptc-link, ptc-square-card,
   }
 }
 
-.tab-content p, .tab-content ul, .tab-content ol, .tab-content span, .tab-content h1, .tab-content h2, .tab-content h3, .tab-content h4, .tab-content h5, .tab-content h6 {
+.tab-content p,
+.tab-content ul,
+.tab-content ol,
+.tab-content span,
+.tab-content h1,
+.tab-content h2,
+.tab-content h3,
+.tab-content h4,
+.tab-content h5,
+.tab-content h6 {
   max-width: 720px;
   font-weight: var(--ptc-font-weight-normal);
 }

package/dist/collection/components/tab-content/tab-content.js

@@ -1,17 +1,17 @@
-import { h } from '@stencil/core';
+import { h } from "@stencil/core";
 export class TabContent {
   constructor() {
     this.name = undefined;
     this.isSelected = false;
   }
   componentWillLoad() {
-    this.parentReference = this.el.closest('ptc-tab-list');
+    this.parentReference = this.el.closest("ptc-tab-list");
   }
   async getChild() {
     return {
       select: this.select.bind(this),
       unselect: this.unselect.bind(this),
-      name: this.name
+      name: this.name,
     };
   }
   unselect() {
@@ -25,13 +25,15 @@ export class TabContent {
   }
   render() {
     const classes = {
-      'tab-content': true,
-      'tab-content-selected': this.isSelected
+      "tab-content": true,
+      "tab-content-selected": this.isSelected,
     };
-    const hidden = (this.isSelected ? false : 'until-found');
-    return (
-    //@ts-ignore
-    h("div", { class: classes, hidden: hidden, onBeforeMatch: () => { this.beforeMatch(); } }, h("slot", null)));
+    const hidden = (this.isSelected ? false : "until-found");
+    return (h("div", { class: classes, hidden: hidden,
+      //@ts-ignore
+      onBeforeMatch: () => {
+        this.beforeMatch();
+      } }, h("slot", null)));
   }
   static get is() { return "tab-content"; }
   static get originalStyleUrls() {

package/dist/collection/components/tab-header/tab-header.css

@@ -9,8 +9,10 @@ ul,
 li,
 ptc-subnav,
 ptc-tab-list,
-ptc-link, ptc-square-card,
-.hyphenate-text, ptc-footer {
+ptc-link,
+ptc-square-card,
+.hyphenate-text,
+ptc-footer {
   word-break: break-word;
   hyphens: manual;
   -webkit-hyphens: manual;
@@ -29,8 +31,10 @@ ul,
 li,
 ptc-subnav,
 ptc-tab-list,
-ptc-link, ptc-square-card,
-.hyphenate-text, ptc-footer {
+ptc-link,
+ptc-square-card,
+.hyphenate-text,
+ptc-footer {
     hyphens: auto;
     -webkit-hyphenate-limit-before: 3;
     /* For Safari */
@@ -113,6 +117,7 @@ tab-header:focus-visible .tab-header::after {
   background-color: var(--color-green-07);
 }
 
-.tab-header ::slotted([slot=seo-content]), .tab-header-selected ::slotted([slot=seo-content]) {
+.tab-header ::slotted([slot=seo-content]),
+.tab-header-selected ::slotted([slot=seo-content]) {
   display: none;
 }

package/dist/collection/components/tab-header/tab-header.js

@@ -1,4 +1,4 @@
-import { h } from '@stencil/core';
+import { h, } from "@stencil/core";
 export class TabHeader {
   constructor() {
     this.id = this.generateId();
@@ -30,7 +30,7 @@ export class TabHeader {
         unselect: self.unselect.bind(self),
         name: self.name,
         text: self.tabHeaderText,
-        id: self.id
+        id: self.id,
       };
       resolve(data);
     });
@@ -51,16 +51,16 @@ export class TabHeader {
   }
   componentDidLoad() {
     this.updateMaxLength(window.innerWidth);
-    this.el.addEventListener('keydown', (event) => {
-      if (event.key === 'Enter') {
+    this.el.addEventListener("keydown", (event) => {
+      if (event.key === "Enter") {
         this.onClick();
       }
     });
   }
   render() {
     const classes = {
-      'tab-header': true,
-      'tab-header-selected': this.isSelected
+      "tab-header": true,
+      "tab-header-selected": this.isSelected,
     };
     return [
       h("div", { class: classes, onClick: this.onClick.bind(this) }, h("slot", { name: "seo-content" }), h("span", { class: "header-content" }, h("span", { class: "text-cont" }, this.tabHeaderText))),

package/dist/collection/stories/Accordian.stories.js

@@ -5,25 +5,39 @@ export default {
   tags: [ 'autodocs' ],
   argTypes: {
     multiple: {
-      control: 'boolean',
-      description: 'If multiple <ptc-accordion-item> can open at the same time',
-      defaultValue: { summary: false }
+      description: ' If multiple `<ptc-accordion-item>`s can open at the same time',
+      defaultValue: {
+        summary: 'false'
+      },
+      control: 'boolean'
+    },
+    default: {
+      description: 'Default slot content',
+      control: 'text',
+      table: { category: 'slots' }
     }
   }
 };
-
-// const Template = args => { return html `<ptc-accordion
-// 	multiple=${args.multiple}
-// ></ptc-accordion>`;}
-
-// export const Example = Template.bind({});
-
-// Example.args = { multiple: false }
-
-// ** Single **
+const Template = (args) => {
+  return html`<ptc-accordion
+  multiple=${args.multiple}
+>
+  ${args.default}
+</ptc-accordion>`;
+};
+export const Example = Template.bind({});
+Example.args = {
+  multiple: 'false\r\n' +
+    '\r\n' +
+    '  /**\r\n' +
+    '   * Set the theme styling of the accordion default is standard\r\n' +
+    '   */\r\n' +
+    '  @Prop() theme: standard | minimalist = standard',
+  default: 'Lorem ipsum text'
+};
 
 const SingleTemplate = args => { return html `<ptc-accordion
-	multiple=${args.multiple}
+  multiple=${args.multiple}
 >
   <ptc-accordion-item heading="I" active>
     Add <code>active</code> attribute to open an item by default.
@@ -43,7 +57,7 @@ Single.args = { multiple: false }
 // ** Multiple **
 
 const MultipleTemplate = args => { return html `<ptc-accordion
-	multiple=${args.multiple}
+  multiple=${args.multiple}
 >
   <ptc-accordion-item heading="We">
     Lorem ipsum dolor sit
@@ -63,7 +77,7 @@ Multiple.args = { multiple: true }
 // ** Nested **
 
 const NestedTemplate = args => { return html `<ptc-accordion
-	multiple=${args.multiple}
+  multiple=${args.multiple}
 >
   <ptc-accordion-item heading="Accordions can be nested too">
   Lorem ipsum dolor sit
@@ -94,7 +108,7 @@ Nested.args = { multiple: false }
 // ** Customise It **
 
 const CustomiseItTemplate = args => { return html `<ptc-accordion
-	multiple=${args.multiple}
+  multiple=${args.multiple}
 >
   <ptc-accordion-item>
   <div slot="heading">
@@ -119,7 +133,7 @@ CustomiseIt.args = { multiple: false }
 // ** Website Examples **
 
 const WebsiteExamplesTemplate = args => { return html `<ptc-accordion
-	multiple=${args.multiple}
+  multiple=${args.multiple}
 >
   <ptc-accordion-item heading="Section Title ~10 words/60 characters" active>
   <div class="is-grid has-col has-col-gap-lg has-row-gap-md has-col-gap-lg">

package/dist/collection/stories/Announcement.stories.js

@@ -39,6 +39,25 @@ export default {
       description: 'Mutable Visibility',
       defaultValue: { summary: false }
     },
+    insideContainer: {
+      description: ' Temp Container We plan to remove container in the future',
+      defaultValue: { summary: '' },
+      control: 'boolean'
+    },
+    customMaxLines: {
+      description: ' Custom max line numbers',
+      defaultValue: { summary: '4' }
+    },
+    moreText: {
+      description: "Custom more text",
+      defaultValue: { summary: '' },
+      control: 'text'
+    },
+    seoContent: {
+      description: 'Slot: seo-content',
+      control: 'text',
+      table: { category: 'slots' }
+    }
   }
 };
 
@@ -50,7 +69,12 @@ const Template = args => { return html `<ptc-announcement
 	link-url=${args.linkUrl}
 	target=${args.target}
 	visible=${args.visible}
-></ptc-announcement>`;}
+  insideContainer=${args.insideContainer}
+	customMaxLines=${args.customMaxLines}
+	moreText=${args.moreText}
+>
+  <span slot="seo-content">${args.seoContent}</span>
+</ptc-announcement>`;}
 
 export const Example = Template.bind({});
 
@@ -62,4 +86,8 @@ Example.args = {
   linkUrl: 'http://www.ptc.com',
   target: '_blank',
   visible: true,
+  insideContainer: '',
+  customMaxLines: '4',
+  moreText: '',
+  seoContent: 'Lorem for seo-content'
 }

package/dist/collection/stories/Breadcrumb2.stories.js

@@ -0,0 +1,62 @@
+import { html } from 'lit';
+
+export default {
+  title: 'New/ptc-breadcrumb-new',
+  tags: [ 'autodocs' ],
+  argTypes: {
+    position: {
+      description: ' breadcrumb position',
+      defaultValue: { summary: '' },
+      control: 'select',
+      options: [ 'left', 'center', 'right' ]
+    },
+    removeTopMargin: {
+      description: ' remove topMargin',
+      defaultValue: { summary: 'false' },
+      control: 'boolean'
+    },
+    color: {
+      description: ' Theme Color',
+      defaultValue: { summary: 'white' },
+      control: 'select',
+      options: [
+        'black',
+        'white',
+        'ptc-green',
+        'gray',
+        'light-gray',
+        'primary-gray',
+        'default',
+        'inherit'
+      ]
+    },
+    isDarkMode: {
+      description: ' Dark Mode for Tab Index',
+      defaultValue: { summary: 'false' },
+      control: 'boolean'
+    },
+    styles: {
+      description: ' (optional) Injected CSS styles ',
+      defaultValue: { summary: '' },
+      control: 'text'
+    }
+  }
+};
+const Template = (args) => {
+  return html`<ptc-breadcrumb
+	position=${args.position}
+	removeTopMargin=${args.removeTopMargin}
+	color=${args.color}
+	isDarkMode=${args.isDarkMode}
+	styles=${args.styles}
+>
+</ptc-breadcrumb>`;
+};
+export const Example = Template.bind({});
+Example.args = {
+  position: '',
+  removeTopMargin: 'false',
+  color: 'white',
+  isDarkMode: 'false',
+  styles: ''
+};

package/dist/collection/stories/BrightcovVideo.stories.js

@@ -0,0 +1,21 @@
+import { html } from 'lit';
+
+export default {
+  title: 'New/ptc-brightcov-video',
+  tags: [ 'autodocs' ],
+  argTypes: {
+    videoId: {
+      control: 'text',
+      description: '',
+      defaultValue: { summary: 'undefined' }
+    }
+  }
+};
+
+const Template = args => { return html `<ptc-brightcov-video
+	video-id=${args.videoId}
+></ptc-brightcov-video>`;}
+
+export const Example = Template.bind({});
+
+Example.args = { videoId: 'undefined' }