@ptcwebops/ptcw-design 6.4.4-beta → 6.4.4

package/dist/collection/components/ptc-tooltip-v2/ptc-tooltip-v2.css

@@ -88,17 +88,14 @@ a:focus-visible {
 
 .light-links a:not(.hero-footer-form-wrapper a,
 ptc-modal inline-form a,
-.podcast-cta-section a,
 .vjs-social-share-links a),
 .light-links a.light-link,
 .background-grey-10 a:not(.hero-footer-form-wrapper a,
 ptc-modal inline-form a,
-.podcast-cta-section a,
 .vjs-social-share-links a),
 .background-grey-10 a.light-link,
 .background-plm-grey a:not(.hero-footer-form-wrapper a,
 ptc-modal inline-form a,
-.podcast-cta-section a,
 .vjs-social-share-links a),
 .background-plm-grey a.light-link {
   color: var(--color-blue-04);
@@ -107,47 +104,38 @@ ptc-modal inline-form a,
 }
 .light-links a:not(.hero-footer-form-wrapper a,
 ptc-modal inline-form a,
-.podcast-cta-section a,
 .vjs-social-share-links a):visited,
 .light-links a.light-link:visited,
 .background-grey-10 a:not(.hero-footer-form-wrapper a,
 ptc-modal inline-form a,
-.podcast-cta-section a,
 .vjs-social-share-links a):visited,
 .background-grey-10 a.light-link:visited,
 .background-plm-grey a:not(.hero-footer-form-wrapper a,
 ptc-modal inline-form a,
-.podcast-cta-section a,
 .vjs-social-share-links a):visited,
 .background-plm-grey a.light-link:visited {
   color: var(--color-blue-06);
 }
 .light-links a:not(.hero-footer-form-wrapper a,
 ptc-modal inline-form a,
-.podcast-cta-section a,
 .vjs-social-share-links a):active, .light-links a:not(.hero-footer-form-wrapper a,
 ptc-modal inline-form a,
-.podcast-cta-section a,
 .vjs-social-share-links a):visited:active,
 .light-links a.light-link:active,
 .light-links a.light-link:visited:active,
 .background-grey-10 a:not(.hero-footer-form-wrapper a,
 ptc-modal inline-form a,
-.podcast-cta-section a,
 .vjs-social-share-links a):active,
 .background-grey-10 a:not(.hero-footer-form-wrapper a,
 ptc-modal inline-form a,
-.podcast-cta-section a,
 .vjs-social-share-links a):visited:active,
 .background-grey-10 a.light-link:active,
 .background-grey-10 a.light-link:visited:active,
 .background-plm-grey a:not(.hero-footer-form-wrapper a,
 ptc-modal inline-form a,
-.podcast-cta-section a,
 .vjs-social-share-links a):active,
 .background-plm-grey a:not(.hero-footer-form-wrapper a,
 ptc-modal inline-form a,
-.podcast-cta-section a,
 .vjs-social-share-links a):visited:active,
 .background-plm-grey a.light-link:active,
 .background-plm-grey a.light-link:visited:active {
@@ -156,30 +144,24 @@ ptc-modal inline-form a,
 }
 .light-links a:not(.hero-footer-form-wrapper a,
 ptc-modal inline-form a,
-.podcast-cta-section a,
 .vjs-social-share-links a):hover, .light-links a:not(.hero-footer-form-wrapper a,
 ptc-modal inline-form a,
-.podcast-cta-section a,
 .vjs-social-share-links a):visited:hover,
 .light-links a.light-link:hover,
 .light-links a.light-link:visited:hover,
 .background-grey-10 a:not(.hero-footer-form-wrapper a,
 ptc-modal inline-form a,
-.podcast-cta-section a,
 .vjs-social-share-links a):hover,
 .background-grey-10 a:not(.hero-footer-form-wrapper a,
 ptc-modal inline-form a,
-.podcast-cta-section a,
 .vjs-social-share-links a):visited:hover,
 .background-grey-10 a.light-link:hover,
 .background-grey-10 a.light-link:visited:hover,
 .background-plm-grey a:not(.hero-footer-form-wrapper a,
 ptc-modal inline-form a,
-.podcast-cta-section a,
 .vjs-social-share-links a):hover,
 .background-plm-grey a:not(.hero-footer-form-wrapper a,
 ptc-modal inline-form a,
-.podcast-cta-section a,
 .vjs-social-share-links a):visited:hover,
 .background-plm-grey a.light-link:hover,
 .background-plm-grey a.light-link:visited:hover {
@@ -187,17 +169,14 @@ ptc-modal inline-form a,
 }
 .light-links a:not(.hero-footer-form-wrapper a,
 ptc-modal inline-form a,
-.podcast-cta-section a,
 .vjs-social-share-links a).disabled,
 .light-links a.light-link.disabled,
 .background-grey-10 a:not(.hero-footer-form-wrapper a,
 ptc-modal inline-form a,
-.podcast-cta-section a,
 .vjs-social-share-links a).disabled,
 .background-grey-10 a.light-link.disabled,
 .background-plm-grey a:not(.hero-footer-form-wrapper a,
 ptc-modal inline-form a,
-.podcast-cta-section a,
 .vjs-social-share-links a).disabled,
 .background-plm-grey a.light-link.disabled {
   color: var(--color-gray-04) !important;
@@ -205,17 +184,14 @@ ptc-modal inline-form a,
 }
 .light-links a:not(.hero-footer-form-wrapper a,
 ptc-modal inline-form a,
-.podcast-cta-section a,
 .vjs-social-share-links a):focus-visible,
 .light-links a.light-link:focus-visible,
 .background-grey-10 a:not(.hero-footer-form-wrapper a,
 ptc-modal inline-form a,
-.podcast-cta-section a,
 .vjs-social-share-links a):focus-visible,
 .background-grey-10 a.light-link:focus-visible,
 .background-plm-grey a:not(.hero-footer-form-wrapper a,
 ptc-modal inline-form a,
-.podcast-cta-section a,
 .vjs-social-share-links a):focus-visible,
 .background-plm-grey a.light-link:focus-visible {
   border-radius: var(--ptc-border-radius-standard);

package/dist/collection/components/ptc-value-led-speed-bump/ptc-value-led-speed-bump.css

@@ -88,17 +88,14 @@ a:focus-visible {
 
 .light-links a:not(.hero-footer-form-wrapper a,
 ptc-modal inline-form a,
-.podcast-cta-section a,
 .vjs-social-share-links a),
 .light-links a.light-link,
 .background-grey-10 a:not(.hero-footer-form-wrapper a,
 ptc-modal inline-form a,
-.podcast-cta-section a,
 .vjs-social-share-links a),
 .background-grey-10 a.light-link,
 .background-plm-grey a:not(.hero-footer-form-wrapper a,
 ptc-modal inline-form a,
-.podcast-cta-section a,
 .vjs-social-share-links a),
 .background-plm-grey a.light-link {
   color: var(--color-blue-04);
@@ -107,47 +104,38 @@ ptc-modal inline-form a,
 }
 .light-links a:not(.hero-footer-form-wrapper a,
 ptc-modal inline-form a,
-.podcast-cta-section a,
 .vjs-social-share-links a):visited,
 .light-links a.light-link:visited,
 .background-grey-10 a:not(.hero-footer-form-wrapper a,
 ptc-modal inline-form a,
-.podcast-cta-section a,
 .vjs-social-share-links a):visited,
 .background-grey-10 a.light-link:visited,
 .background-plm-grey a:not(.hero-footer-form-wrapper a,
 ptc-modal inline-form a,
-.podcast-cta-section a,
 .vjs-social-share-links a):visited,
 .background-plm-grey a.light-link:visited {
   color: var(--color-blue-06);
 }
 .light-links a:not(.hero-footer-form-wrapper a,
 ptc-modal inline-form a,
-.podcast-cta-section a,
 .vjs-social-share-links a):active, .light-links a:not(.hero-footer-form-wrapper a,
 ptc-modal inline-form a,
-.podcast-cta-section a,
 .vjs-social-share-links a):visited:active,
 .light-links a.light-link:active,
 .light-links a.light-link:visited:active,
 .background-grey-10 a:not(.hero-footer-form-wrapper a,
 ptc-modal inline-form a,
-.podcast-cta-section a,
 .vjs-social-share-links a):active,
 .background-grey-10 a:not(.hero-footer-form-wrapper a,
 ptc-modal inline-form a,
-.podcast-cta-section a,
 .vjs-social-share-links a):visited:active,
 .background-grey-10 a.light-link:active,
 .background-grey-10 a.light-link:visited:active,
 .background-plm-grey a:not(.hero-footer-form-wrapper a,
 ptc-modal inline-form a,
-.podcast-cta-section a,
 .vjs-social-share-links a):active,
 .background-plm-grey a:not(.hero-footer-form-wrapper a,
 ptc-modal inline-form a,
-.podcast-cta-section a,
 .vjs-social-share-links a):visited:active,
 .background-plm-grey a.light-link:active,
 .background-plm-grey a.light-link:visited:active {
@@ -156,30 +144,24 @@ ptc-modal inline-form a,
 }
 .light-links a:not(.hero-footer-form-wrapper a,
 ptc-modal inline-form a,
-.podcast-cta-section a,
 .vjs-social-share-links a):hover, .light-links a:not(.hero-footer-form-wrapper a,
 ptc-modal inline-form a,
-.podcast-cta-section a,
 .vjs-social-share-links a):visited:hover,
 .light-links a.light-link:hover,
 .light-links a.light-link:visited:hover,
 .background-grey-10 a:not(.hero-footer-form-wrapper a,
 ptc-modal inline-form a,
-.podcast-cta-section a,
 .vjs-social-share-links a):hover,
 .background-grey-10 a:not(.hero-footer-form-wrapper a,
 ptc-modal inline-form a,
-.podcast-cta-section a,
 .vjs-social-share-links a):visited:hover,
 .background-grey-10 a.light-link:hover,
 .background-grey-10 a.light-link:visited:hover,
 .background-plm-grey a:not(.hero-footer-form-wrapper a,
 ptc-modal inline-form a,
-.podcast-cta-section a,
 .vjs-social-share-links a):hover,
 .background-plm-grey a:not(.hero-footer-form-wrapper a,
 ptc-modal inline-form a,
-.podcast-cta-section a,
 .vjs-social-share-links a):visited:hover,
 .background-plm-grey a.light-link:hover,
 .background-plm-grey a.light-link:visited:hover {
@@ -187,17 +169,14 @@ ptc-modal inline-form a,
 }
 .light-links a:not(.hero-footer-form-wrapper a,
 ptc-modal inline-form a,
-.podcast-cta-section a,
 .vjs-social-share-links a).disabled,
 .light-links a.light-link.disabled,
 .background-grey-10 a:not(.hero-footer-form-wrapper a,
 ptc-modal inline-form a,
-.podcast-cta-section a,
 .vjs-social-share-links a).disabled,
 .background-grey-10 a.light-link.disabled,
 .background-plm-grey a:not(.hero-footer-form-wrapper a,
 ptc-modal inline-form a,
-.podcast-cta-section a,
 .vjs-social-share-links a).disabled,
 .background-plm-grey a.light-link.disabled {
   color: var(--color-gray-04) !important;
@@ -205,17 +184,14 @@ ptc-modal inline-form a,
 }
 .light-links a:not(.hero-footer-form-wrapper a,
 ptc-modal inline-form a,
-.podcast-cta-section a,
 .vjs-social-share-links a):focus-visible,
 .light-links a.light-link:focus-visible,
 .background-grey-10 a:not(.hero-footer-form-wrapper a,
 ptc-modal inline-form a,
-.podcast-cta-section a,
 .vjs-social-share-links a):focus-visible,
 .background-grey-10 a.light-link:focus-visible,
 .background-plm-grey a:not(.hero-footer-form-wrapper a,
 ptc-modal inline-form a,
-.podcast-cta-section a,
 .vjs-social-share-links a):focus-visible,
 .background-plm-grey a.light-link:focus-visible {
   border-radius: var(--ptc-border-radius-standard);

package/dist/collection/components/ptc-white-paper/ptc-white-paper.css

@@ -5665,17 +5665,14 @@ a:focus-visible {
 
 .light-links a:not(.hero-footer-form-wrapper a,
 ptc-modal inline-form a,
-.podcast-cta-section a,
 .vjs-social-share-links a),
 .light-links a.light-link,
 .background-grey-10 a:not(.hero-footer-form-wrapper a,
 ptc-modal inline-form a,
-.podcast-cta-section a,
 .vjs-social-share-links a),
 .background-grey-10 a.light-link,
 .background-plm-grey a:not(.hero-footer-form-wrapper a,
 ptc-modal inline-form a,
-.podcast-cta-section a,
 .vjs-social-share-links a),
 .background-plm-grey a.light-link {
   color: var(--color-blue-04);
@@ -5684,47 +5681,38 @@ ptc-modal inline-form a,
 }
 .light-links a:not(.hero-footer-form-wrapper a,
 ptc-modal inline-form a,
-.podcast-cta-section a,
 .vjs-social-share-links a):visited,
 .light-links a.light-link:visited,
 .background-grey-10 a:not(.hero-footer-form-wrapper a,
 ptc-modal inline-form a,
-.podcast-cta-section a,
 .vjs-social-share-links a):visited,
 .background-grey-10 a.light-link:visited,
 .background-plm-grey a:not(.hero-footer-form-wrapper a,
 ptc-modal inline-form a,
-.podcast-cta-section a,
 .vjs-social-share-links a):visited,
 .background-plm-grey a.light-link:visited {
   color: var(--color-blue-06);
 }
 .light-links a:not(.hero-footer-form-wrapper a,
 ptc-modal inline-form a,
-.podcast-cta-section a,
 .vjs-social-share-links a):active, .light-links a:not(.hero-footer-form-wrapper a,
 ptc-modal inline-form a,
-.podcast-cta-section a,
 .vjs-social-share-links a):visited:active,
 .light-links a.light-link:active,
 .light-links a.light-link:visited:active,
 .background-grey-10 a:not(.hero-footer-form-wrapper a,
 ptc-modal inline-form a,
-.podcast-cta-section a,
 .vjs-social-share-links a):active,
 .background-grey-10 a:not(.hero-footer-form-wrapper a,
 ptc-modal inline-form a,
-.podcast-cta-section a,
 .vjs-social-share-links a):visited:active,
 .background-grey-10 a.light-link:active,
 .background-grey-10 a.light-link:visited:active,
 .background-plm-grey a:not(.hero-footer-form-wrapper a,
 ptc-modal inline-form a,
-.podcast-cta-section a,
 .vjs-social-share-links a):active,
 .background-plm-grey a:not(.hero-footer-form-wrapper a,
 ptc-modal inline-form a,
-.podcast-cta-section a,
 .vjs-social-share-links a):visited:active,
 .background-plm-grey a.light-link:active,
 .background-plm-grey a.light-link:visited:active {
@@ -5733,30 +5721,24 @@ ptc-modal inline-form a,
 }
 .light-links a:not(.hero-footer-form-wrapper a,
 ptc-modal inline-form a,
-.podcast-cta-section a,
 .vjs-social-share-links a):hover, .light-links a:not(.hero-footer-form-wrapper a,
 ptc-modal inline-form a,
-.podcast-cta-section a,
 .vjs-social-share-links a):visited:hover,
 .light-links a.light-link:hover,
 .light-links a.light-link:visited:hover,
 .background-grey-10 a:not(.hero-footer-form-wrapper a,
 ptc-modal inline-form a,
-.podcast-cta-section a,
 .vjs-social-share-links a):hover,
 .background-grey-10 a:not(.hero-footer-form-wrapper a,
 ptc-modal inline-form a,
-.podcast-cta-section a,
 .vjs-social-share-links a):visited:hover,
 .background-grey-10 a.light-link:hover,
 .background-grey-10 a.light-link:visited:hover,
 .background-plm-grey a:not(.hero-footer-form-wrapper a,
 ptc-modal inline-form a,
-.podcast-cta-section a,
 .vjs-social-share-links a):hover,
 .background-plm-grey a:not(.hero-footer-form-wrapper a,
 ptc-modal inline-form a,
-.podcast-cta-section a,
 .vjs-social-share-links a):visited:hover,
 .background-plm-grey a.light-link:hover,
 .background-plm-grey a.light-link:visited:hover {
@@ -5764,17 +5746,14 @@ ptc-modal inline-form a,
 }
 .light-links a:not(.hero-footer-form-wrapper a,
 ptc-modal inline-form a,
-.podcast-cta-section a,
 .vjs-social-share-links a).disabled,
 .light-links a.light-link.disabled,
 .background-grey-10 a:not(.hero-footer-form-wrapper a,
 ptc-modal inline-form a,
-.podcast-cta-section a,
 .vjs-social-share-links a).disabled,
 .background-grey-10 a.light-link.disabled,
 .background-plm-grey a:not(.hero-footer-form-wrapper a,
 ptc-modal inline-form a,
-.podcast-cta-section a,
 .vjs-social-share-links a).disabled,
 .background-plm-grey a.light-link.disabled {
   color: var(--color-gray-04) !important;
@@ -5782,17 +5761,14 @@ ptc-modal inline-form a,
 }
 .light-links a:not(.hero-footer-form-wrapper a,
 ptc-modal inline-form a,
-.podcast-cta-section a,
 .vjs-social-share-links a):focus-visible,
 .light-links a.light-link:focus-visible,
 .background-grey-10 a:not(.hero-footer-form-wrapper a,
 ptc-modal inline-form a,
-.podcast-cta-section a,
 .vjs-social-share-links a):focus-visible,
 .background-grey-10 a.light-link:focus-visible,
 .background-plm-grey a:not(.hero-footer-form-wrapper a,
 ptc-modal inline-form a,
-.podcast-cta-section a,
 .vjs-social-share-links a):focus-visible,
 .background-plm-grey a.light-link:focus-visible {
   border-radius: var(--ptc-border-radius-standard);
@@ -5870,9 +5846,9 @@ ptc-modal inline-form a,
   /* Fonts */
   --ptc-font-latin: "Raleway", sans-serif;
   --ptc-font-secondary-latin: "Rajdhani", sans-serif;
-  --ptc-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
-  	Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
-  	"Segoe UI Symbol";
+  --ptc-font-sans:
+  	-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial,
+  	sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   /* Font sizes */
   --ptc-font-size-xxx-small: 0.75rem;
   /* 12px */

package/dist/collection/components/ptc-white-paper/ptc-white-paper.js

@@ -85,24 +85,14 @@ export class PtcWhitePaper {
   }
   renderContent(item, index) {
     const components = Object.values(item);
-    return (h("div", { class: "content-wrapper", key: index }, components.map((comp, i) => {
-      var _a, _b;
-      let heading = this.el.querySelector(`[slot="heading-page${this.currentPage}-comp${i + 1}"]`);
-      let subHeading = this.el.querySelector(`[slot="subheading-page${this.currentPage}-comp${i + 1}"]`);
-      return (h("div", { key: i }, heading &&
-        heading.innerText &&
-        ((_a = heading.innerText) === null || _a === void 0 ? void 0 : _a.trim()) !== "" ? (this.currentPage == 1 ? (h("ptc-title", { type: "h1", upperline: comp.isStyledHeading
-          ? "dotted"
-          : "no-upperline", "title-height": "densest", "title-margin": "margin-flush" }, h("slot", { name: `heading-page${this.currentPage}-comp${i + 1}` }), h("ptc-spacer", { size: "large" }))) : (h("ptc-title", { type: "h2", upperline: comp.isStyledHeading
-          ? "dotted"
-          : "no-upperline", "title-height": "densest", "title-margin": "margin-flush" }, h("slot", { name: `heading-page${this.currentPage}-comp${i + 1}` }), h("ptc-spacer", { size: "large" })))) : (""), subHeading &&
-        subHeading.innerText &&
-        ((_b = subHeading.innerText) === null || _b === void 0 ? void 0 : _b.trim()) !== "" ? (h("div", { class: "sub-heading rich-content-text-editor" }, h("slot", { name: `subheading-page${this.currentPage}-comp${i + 1}` }))) : (""), comp.componentType ===
-        "two-column-with-text-media" &&
-        this.renderTwoColumnText(comp, i), comp.componentType === "fullspan-media" &&
-        this.renderfullspanMedia(comp, i), comp.componentType === "fullspan-text" &&
-        this.renderFullspanText(comp, i)));
-    })));
+    return (h("div", { class: "content-wrapper", key: index }, components.map((comp, i) => (h("div", { key: i }, comp.heading && comp.heading.trim() !== "" ? (this.currentPage == 1 ? (h("ptc-title", { type: "h1", upperline: comp.isStyledHeading
+        ? "dotted"
+        : "no-upperline", "title-height": "densest", "title-margin": "margin-flush" }, comp.heading, h("ptc-spacer", { size: "large" }))) : (h("ptc-title", { type: "h2", upperline: comp.isStyledHeading
+        ? "dotted"
+        : "no-upperline", "title-height": "densest", "title-margin": "margin-flush" }, comp.heading, h("ptc-spacer", { size: "large" })))) : (""), comp.subHeading && comp.subHeading.trim() !== "" ? (h("div", { class: "sub-heading rich-content-text-editor", innerHTML: comp.subHeading })) : (""), comp.componentType === "two-column-with-text-media" &&
+      this.renderTwoColumnText(comp, i), comp.componentType === "fullspan-media" &&
+      this.renderfullspanMedia(comp, i), comp.componentType === "fullspan-text" &&
+      this.renderFullspanText(comp, i))))));
   }
   renderTwoColumnText(_, index) {
     const pageNumber = this.currentPage;

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

@@ -39,11 +39,6 @@ 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' }
@@ -69,7 +64,6 @@ const Template = args => { return html `<ptc-announcement
 	link-url=${args.linkUrl}
 	target=${args.target}
 	visible=${args.visible}
-  insideContainer=${args.insideContainer}
 	customMaxLines=${args.customMaxLines}
 	moreText=${args.moreText}
 >
@@ -86,7 +80,6 @@ Example.args = {
   linkUrl: 'http://www.ptc.com',
   target: '_blank',
   visible: true,
-  insideContainer: '',
   customMaxLines: '4',
   moreText: '',
   seoContent: 'Lorem for seo-content'

package/dist/collection/stories/BackgroundImage.stories.js

@@ -33,11 +33,6 @@ export default {
       defaultValue: { summary: 'lazy-bg' },
       options: [ 'eager-bg', 'lazy-bg' ]
     },
-    styles: {
-      control: 'text',
-      description: '(optional) Injected CSS styles',
-      defaultValue: { summary: 'undefined' }
-    }
   }
 };
 
@@ -46,7 +41,6 @@ const Template = args => { return html `<ptc-img
 	image-type=${args.imageType}
 	img-url=${args.imgUrl}
 	load-mode=${args.loadMode}
-	styles=${args.styles}
 ></ptc-img>`;}
 
 export const Example = Template.bind({});
@@ -56,5 +50,4 @@ Example.args = {
   imageType: 'smart-img',
   imgUrl: 'https://ptc-p-001.sitecorecontenthub.cloud/api/public/content/3c9d7c7c7ca74dd483c4d7ca554ecc38?v=ece57c52',
   loadMode: 'lazy-bg',
-  styles: 'undefined'
 }

package/dist/collection/stories/Breadcrumb.stories.js

@@ -4,54 +4,61 @@ export default {
   title: 'Molecules/ptc-breadcrumb',
   tags: [ 'autodocs' ],
   argTypes: {
-    // color: {
-    //   control: 'select',
-    //   options: ['black', 'white', 'ptc-green', 'gray', 'light-gray', 'primary-gray', 'default', 'inherit'],
-    //   description: 'Theme Color',
-    //   defaultValue: { summary: 'white' }
-    // },
     position: {
+      description: 'Breadcrumb position',
+      defaultValue: { summary: '' },
       control: 'select',
-      options: ['left', 'center', 'right'],
-      description: 'breadcrumb position',
-      defaultValue: { summary: 'undefined' }
+      options: [ 'left', 'center', 'right' ]
     },
     removeTopMargin: {
-      control: 'boolean',
-      description: 'remove topMargin',
-      defaultValue: { summary: 'false' }
+      description: 'Remove topMargin',
+      defaultValue: { summary: 'false' },
+      control: 'boolean'
     },
     color: {
-      control: 'select',
-      description: 'Color',
+      description: "Home icon's color",
       defaultValue: { summary: 'white' },
-      options: [ 'black', 'white', 'ptc-green', 'gray', 'light-gray', 'primary-gray', 'default', 'inherit' ]
+      control: 'select',
+      options: [
+        'black',
+        'white',
+        'ptc-green',
+        'gray',
+        'light-gray',
+        'primary-gray',
+        'default',
+        'inherit'
+      ]
     },
-    // styles: {
-    //   control: '',
-    //   description: '(optional) Injected CSS styles',
-    //   defaultValue: { summary: 'undefined' }
-    // }
+    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 `<div class="demo-with-bgcolor">
-  <ptc-breadcrumb
-    color=${args.color}
-    position=${args.position}
-    remove-top-margin=${args.removeTopMargin}
-    styles=${args.styles}
-  >
-    <list-item list-type="breadcrumb" link-href="https://www.ptc.com/contact-us">PLM Video Hub</list-item>
+const Template = (args) => {
+  return html`<ptc-breadcrumb
+	position=${args.position}
+	removeTopMargin=${args.removeTopMargin}
+	color=${args.color}
+	isDarkMode=${args.isDarkMode}
+	styles=${args.styles}
+>
+<list-item list-type="breadcrumb" link-href="https://www.ptc.com/contact-us">PLM Video Hub</list-item>
     <list-item list-type="breadcrumb">Current Page</list-item>
-  </ptc-breadcrumb>
-</div>`;}
-
+</ptc-breadcrumb>`;
+};
 export const Example = Template.bind({});
-
 Example.args = {
-  // color: 'white',
-  position: 'undefined',
+  position: '',
   removeTopMargin: 'false',
-  // styles: 'undefined'
-}
+  color: 'black',
+  isDarkMode: 'false',
+  styles: ''
+};