@ptcwebops/ptcw-design 4.7.4 → 4.7.6

package/dist/collection/components/ptc-filter-level-theater/ptc-filter-level-theater.css

@@ -123,6 +123,7 @@ a:visited {
   color: var(--color-blue-10);
 }
 a:active, a:visited:active {
+  transition: none;
   color: var(--color-blue-09);
 }
 a:hover, a:visited:hover {
@@ -140,6 +141,7 @@ a.disabled {
   color: var(--color-blue-06);
 }
 .light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):active, .light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form 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):active, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form 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):active, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):visited:active, .background-plm-grey a.light-link:active, .background-plm-grey a.light-link:visited:active {
+  transition: none;
   color: var(--color-blue-07);
 }
 .light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):hover, .light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form 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):hover, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form 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):hover, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):visited:hover, .background-plm-grey a.light-link:hover, .background-plm-grey a.light-link:visited:hover {
@@ -165,6 +167,7 @@ a.disabled {
   color: var(--color-gray-10);
 }
 .ptc-link:active, .ptc-link:visited:active {
+  transition: none;
   color: var(--color-green-06);
 }
 .ptc-link:hover, .ptc-link:visited:hover {
@@ -186,6 +189,7 @@ a.disabled {
   color: var(--color-white);
 }
 .ptc-link-dark:active, .ptc-link-dark:visited:active {
+  transition: none;
   color: var(--color-green-06);
 }
 .ptc-link-dark:hover, .ptc-link-dark:visited:hover {
@@ -307,7 +311,8 @@ a.disabled {
 :host .flt-wrapper .content-tab-wrapper .flt-content-wrap .flt-content {
   display: none;
 }
-:host .flt-wrapper .content-tab-wrapper .flt-content-wrap .flt-content p, :host .flt-wrapper .content-tab-wrapper .flt-content-wrap .flt-content ul li {
+:host .flt-wrapper .content-tab-wrapper .flt-content-wrap .flt-content p,
+:host .flt-wrapper .content-tab-wrapper .flt-content-wrap .flt-content ul li {
   font-size: 18px;
   line-height: 1.5;
   color: var(--color-white);
@@ -351,14 +356,18 @@ a.disabled {
     padding-bottom: 0;
   }
 }
-:host .flt-wrapper .content-tab-wrapper .flt-tab-wrapper .tab-list .tab-box, :host .flt-wrapper .content-tab-wrapper .flt-tab-wrapper .tab-list ptc-button, :host .flt-wrapper .content-tab-wrapper .flt-tab-wrapper .tab-list .flt-social-icon-list {
+:host .flt-wrapper .content-tab-wrapper .flt-tab-wrapper .tab-list .tab-box,
+:host .flt-wrapper .content-tab-wrapper .flt-tab-wrapper .tab-list ptc-button,
+:host .flt-wrapper .content-tab-wrapper .flt-tab-wrapper .tab-list .flt-social-icon-list {
   max-width: 304px;
   min-width: 223px;
   margin-right: 24px;
   margin-bottom: 0;
 }
 @media only screen and (min-width: 768px) {
-  :host .flt-wrapper .content-tab-wrapper .flt-tab-wrapper .tab-list .tab-box, :host .flt-wrapper .content-tab-wrapper .flt-tab-wrapper .tab-list ptc-button, :host .flt-wrapper .content-tab-wrapper .flt-tab-wrapper .tab-list .flt-social-icon-list {
+  :host .flt-wrapper .content-tab-wrapper .flt-tab-wrapper .tab-list .tab-box,
+:host .flt-wrapper .content-tab-wrapper .flt-tab-wrapper .tab-list ptc-button,
+:host .flt-wrapper .content-tab-wrapper .flt-tab-wrapper .tab-list .flt-social-icon-list {
     min-width: auto;
     margin-bottom: 24px;
     margin-right: 0;
@@ -407,7 +416,11 @@ a.disabled {
     margin-right: 40px;
   }
 }
-:host p, :host ul, :host li, :host ptc-title .sc-ptc-title, :host span {
+:host p,
+:host ul,
+:host li,
+:host ptc-title .sc-ptc-title,
+:host span {
   word-break: break-word;
   hyphens: manual;
   -webkit-hyphens: manual;
@@ -415,7 +428,11 @@ a.disabled {
   -ms-hyphens: manual;
 }
 @supports (hyphenate-limit-chars: 12 3 3) {
-  :host p, :host ul, :host li, :host ptc-title .sc-ptc-title, :host span {
+  :host p,
+:host ul,
+:host li,
+:host ptc-title .sc-ptc-title,
+:host span {
     hyphens: auto;
     -webkit-hyphenate-limit-before: 3;
     /* For Safari */
@@ -453,6 +470,7 @@ a:visited {
 }
 a:active, a:visited:active {
   color: #104E7B;
+  transition: none;
 }
 a:hover, a:visited:hover {
   color: #14629A;

package/dist/collection/components/ptc-filter-tag/ptc-filter-tag.css

@@ -125,6 +125,7 @@ ptc-link, ptc-square-card,
   background-color: var(--color-gray-10);
 }
 .ptc-filter-tag.button:active {
+  transition: none;
   background-color: var(--color-black);
 }
 .ptc-filter-tag.button .cls {

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

@@ -59,6 +59,7 @@ ptc-footer {
   color: var(--color-white);
   background-color: var(--color-gray-12);
   position: relative;
+  z-index: 2;
 }
 ptc-footer ul {
   padding: 0;
@@ -66,22 +67,25 @@ ptc-footer ul {
   list-style: none;
 }
 ptc-footer ul li a {
-  text-decoration: none;
+  text-decoration: underline;
+  text-underline-offset: 6px;
+  text-decoration-thickness: 1px;
+  text-decoration-color: transparent;
   color: var(--color-white);
-  border-bottom: 1px solid transparent;
-  transition: border-bottom-color var(--ptc-transition-medium) var(--ptc-ease-inout);
+  border-bottom: none;
+  transition: text-decoration var(--ptc-transition-medium) var(--ptc-ease-inout);
 }
 ptc-footer ul li a:hover {
   color: var(--color-white) !important;
-  border-bottom-color: var(--color-white);
+  text-decoration-color: var(--color-white);
 }
 ptc-footer ul li a:visited {
   color: var(--color-white);
 }
 ptc-footer ul li a:active {
   color: var(--color-gray-04) !important;
-  border-bottom-color: var(--color-gray-04);
   transition: none;
+  text-decoration-color: var(--color-gray-04);
 }
 ptc-footer .gap-20 {
   grid-column-gap: 20px;
@@ -145,7 +149,7 @@ ptc-footer .footer-top .f-menu {
 @media only screen and (min-width: 1200px) {
   ptc-footer .footer-top .f-menu {
     justify-content: flex-start;
-    max-width: 410px;
+    max-width: 413px;
     gap: 80px;
   }
 }
@@ -330,7 +334,7 @@ ptc-footer .ft-grid .ft-menu {
 @media only screen and (min-width: 992px) {
   ptc-footer .ft-grid .ft-menu {
     width: auto;
-    min-width: 410px;
+    min-width: 413px;
     max-width: 430px;
   }
 }

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

@@ -1149,6 +1149,7 @@ a:visited {
   color: var(--color-blue-10);
 }
 a:active, a:visited:active {
+  transition: none;
   color: var(--color-blue-09);
 }
 a:hover, a:visited:hover {
@@ -1166,6 +1167,7 @@ a.disabled {
   color: var(--color-blue-06);
 }
 .light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):active, .light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form 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):active, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form 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):active, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):visited:active, .background-plm-grey a.light-link:active, .background-plm-grey a.light-link:visited:active {
+  transition: none;
   color: var(--color-blue-07);
 }
 .light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):hover, .light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form 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):hover, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form 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):hover, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):visited:hover, .background-plm-grey a.light-link:hover, .background-plm-grey a.light-link:visited:hover {
@@ -1191,6 +1193,7 @@ a.disabled {
   color: var(--color-gray-10);
 }
 .ptc-link:active, .ptc-link:visited:active {
+  transition: none;
   color: var(--color-green-06);
 }
 .ptc-link:hover, .ptc-link:visited:hover {
@@ -1212,6 +1215,7 @@ a.disabled {
   color: var(--color-white);
 }
 .ptc-link-dark:active, .ptc-link-dark:visited:active {
+  transition: none;
   color: var(--color-green-06);
 }
 .ptc-link-dark:hover, .ptc-link-dark:visited:hover {

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

@@ -100,6 +100,7 @@ ptc-link, ptc-square-card,
 }
 .global:active, .global:visited:active {
   color: var(--color-blue-09);
+  transition: none;
 }
 .global:hover, .global:visited:hover {
   color: var(--color-blue-08);

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

@@ -104,12 +104,15 @@ ptc-link, ptc-square-card,
 .standard-filter .standard-filter-item:active {
   background-color: var(--color-gray-05);
   text-decoration: none;
+  transition: none;
 }
 .standard-filter .standard-filter-item.active {
+  transition: none;
   background-color: var(--color-gray-12);
   color: var(--color-white);
 }
 .standard-filter .standard-filter-item.active:hover {
+  transition: background-color var(--ptc-ease-out) var(--ptc-transition-medium);
   background-color: var(--color-gray-12);
   cursor: default;
 }
@@ -133,6 +136,7 @@ ptc-link, ptc-square-card,
   text-decoration: none;
 }
 .standard-filter .next-button:active, .standard-filter .previous-button:active {
+  transition: none;
   background-color: var(--color-gray-05);
   text-decoration: none;
 }

package/dist/collection/components/ptc-quantity-counter/ptc-quantity-counter.css

@@ -104,6 +104,7 @@ ptc-link, ptc-square-card,
   background-color: var(--color-gray-02);
 }
 :host .quantity-counter button:active span {
+  transition: none;
   background-color: var(--color-gray-03);
 }
 :host .quantity-counter input {

package/dist/collection/components/ptc-search-field/ptc-search-field.css

@@ -107,6 +107,7 @@ ptc-link, ptc-square-card,
   margin: 0;
 }
 :host .search-div .search-btn:active {
+  transition: none;
   background-color: var(--color-black);
 }
 :host .search-div .search-btn:hover {

package/dist/collection/components/ptc-social-icons-footer/ptc-social-icons-footer.css

@@ -88,6 +88,9 @@ ptc-link, ptc-square-card,
   }
 }
 :host ul li {
+  width: 100%;
+}
+:host ul li a {
   background-color: var(--color-gray-10);
   border-radius: 4px;
   display: flex;
@@ -99,22 +102,17 @@ ptc-link, ptc-square-card,
   width: 100%;
   transition: background-color var(--ptc-transition-medium) var(--ptc-ease-inout);
 }
-:host ul li:hover {
+:host ul li a:hover {
   background-color: var(--color-gray-08);
 }
-:host ul li:active {
+:host ul li a:active {
   background-color: var(--color-gray-09);
   transition: none;
 }
 @media only screen and (min-width: 992px) {
-  :host ul li {
+  :host ul li a {
+    padding: 4px;
     width: 36px;
     height: 36px;
   }
-}
-:host ul li a {
-  box-sizing: border-box;
-  display: inline-flex;
-  justify-content: center;
-  align-items: center;
 }

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

@@ -5643,6 +5643,7 @@ a:visited {
   color: var(--color-blue-10);
 }
 a:active, a:visited:active {
+  transition: none;
   color: var(--color-blue-09);
 }
 a:hover, a:visited:hover {
@@ -5660,6 +5661,7 @@ a.disabled {
   color: var(--color-blue-06);
 }
 .light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):active, .light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form 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):active, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form 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):active, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):visited:active, .background-plm-grey a.light-link:active, .background-plm-grey a.light-link:visited:active {
+  transition: none;
   color: var(--color-blue-07);
 }
 .light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):hover, .light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form 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):hover, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form 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):hover, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):visited:hover, .background-plm-grey a.light-link:hover, .background-plm-grey a.light-link:visited:hover {
@@ -5685,6 +5687,7 @@ a.disabled {
   color: var(--color-gray-10);
 }
 .ptc-link:active, .ptc-link:visited:active {
+  transition: none;
   color: var(--color-green-06);
 }
 .ptc-link:hover, .ptc-link:visited:hover {
@@ -5706,6 +5709,7 @@ a.disabled {
   color: var(--color-white);
 }
 .ptc-link-dark:active, .ptc-link-dark:visited:active {
+  transition: none;
   color: var(--color-green-06);
 }
 .ptc-link-dark:hover, .ptc-link-dark:visited:hover {

package/dist/collection/stories/TextCopyWithBackground.stories.js

@@ -73,7 +73,11 @@ export default {
 
 // ** Text Copy With Background **
 
-const TextCopyWithBackgroundTemplate = args => { return html `<ptc-text-copy-with-background
+
+const TextCopyWithBackgroundTemplate = args => {
+  const textColorTitle = args.type === 'tab-cta-with-background' ? 'gray' : 'white';
+  const textColorPara = args.type === 'tab-cta-with-background' ? 'primary-grey' : 'white';
+  return html `<ptc-text-copy-with-background
 	image-alt-text=${args.ImageAltText}
 	background-image=${args.backgroundImage}
 	is-background-blur=${args.isBackgroundBlur}
@@ -85,10 +89,10 @@ const TextCopyWithBackgroundTemplate = args => { return html `<ptc-text-copy-wit
   <div class="ptc-container">
     <div class="is-grid">
         <div class="is-col is-col-6-lg is-col-5-xl">
-            <ptc-title title-color="white" type='h2' text-align='left' upperline="no-upperline"
+            <ptc-title title-color=${textColorTitle} type='h2' text-align='left' upperline="no-upperline"
                 title-margin="margin-flush" title-size="xx-large">
                 FactoryTalk Innovation Suite, powered by PTC </ptc-title>
-            <ptc-para font-size="small" para-color="white" para-line-h="line-height-denser" font-weight="w-5"
+            <ptc-para font-size="small" para-color=${textColorPara} para-line-h="line-height-denser" font-weight="w-5"
                 para-margin="margin-4">
                 Transform your operations with the power of edge-to-enterprise analytics, machine learning, and
                 industrial IoT.PTC and Rockwell Automation are driving production management.
@@ -106,7 +110,7 @@ export const TextCopyWithBackground = TextCopyWithBackgroundTemplate.bind({});
 
 TextCopyWithBackground.args = {
   ImageAltText: 'undefined',
-  backgroundImage: 'https://www.ptc.com/-/media/Images/new-org/1920x906/Augmented-Reality/CTA-FTIS2.jpg?h=660&w=1920&la=en&hash=0A8BE693C247D7FD02A74528B157A272',
+  backgroundImage: 'https://ptc-p-001.sitecorecontenthub.cloud/api/public/content/8a544169f68442368b37d4ad1295bb21',
   isBackgroundBlur: true,
   overlay: true,
   slitPosition: 'top-right',
@@ -151,7 +155,7 @@ export const HeroFooterCTA = HeroFooterCTATemplate.bind({});
 
 HeroFooterCTA.args = {
   ImageAltText: 'undefined',
-  backgroundImage: 'https://www.ptc.com/-/media/Images/new-org/1920x500/CTA-Hero-Alternate/industries-aerospace-and-defense-plane-turbine1920x500.jpg?h=500&w=1920&la=en&hash=5F771ACE5F6223EF724CE26B8B7D6A65',
+  backgroundImage: 'https://ptc-p-001.sitecorecontenthub.cloud/api/public/content/5ac472cf42f241ee85f44085971dcc7e',
   isBackgroundBlur: true,
   overlay: true,
   slitPosition: 'top-right',
@@ -193,7 +197,7 @@ export const TabCTAWithBackgroundImage = TabCTAWithBackgroundImageTemplate.bind(
 
 TabCTAWithBackgroundImage.args = {
   ImageAltText: 'undefined',
-  backgroundImage: 'https://www.ptc.com/-/media/Images/new-org/1920x500/technologies/hybrid-cloud-fiaas-worker-tablet-hardhat1920x500.jpg?h=500&w=1920&la=en&hash=D6842D081A15FDD28F663C8A7FE5E5EB',
+  backgroundImage: 'https://ptc-p-001.sitecorecontenthub.cloud/api/public/content/5ac472cf42f241ee85f44085971dcc7e',
   isBackgroundBlur: false,
   overlay: true,
   slitPosition: undefined,
@@ -229,7 +233,7 @@ export const CaseStudiesSliderCtaWithBackgroundImage = CaseStudiesSliderCtaWithB
 
 CaseStudiesSliderCtaWithBackgroundImage.args = {
   ImageAltText: 'undefined',
-  backgroundImage: 'https://www.ptc.com/-/media/Images/new-org/1366x500/case-studies/withings-1366x500px.jpg?h=500&w=1366&la=en&hash=A264589A607595A7B7205A9C99D5045C',
+  backgroundImage: 'https://ptc-p-001.sitecorecontenthub.cloud/api/public/content/5ac472cf42f241ee85f44085971dcc7e',
   isBackgroundBlur: false,
   overlay: false,
   slitPosition: 'bottom-right',