@ptcwebops/ptcw-design 6.4.13 → 6.4.14-beta

package/dist/collection/stories/organisms/eSupport/SupportPage/preview.stories.js

@@ -0,0 +1,157 @@
+import { html } from 'lit';
+
+export default  {
+    title: 'Organisms/E-Support Organisms/Support Page'
+
+}
+const SupportPage = args => {
+    return html `
+
+    <ptc-spacer></ptc-spacer>
+  <ptc-spacer></ptc-spacer>
+  <ptc-spacer></ptc-spacer>
+  <ptc-spacer></ptc-spacer>
+  <div class="ptc-container is-grid has-col-gap green-container">
+    <div class="is-col-12 is-col-7-md search-container">
+
+      <ptc-spacer></ptc-spacer>
+      <ptc-spacer></ptc-spacer>
+      <ptc-spacer></ptc-spacer>
+      <ptc-title type="h2" text-align="center" title-size="x-large" title-color="white" upperline="no-upperline" title-display="inline-block" title-shadow="" title-height="densest" title-margin="margin-3" title-weight="w-8" is-plm-hub="false">
+        Search the Knowledge Base
+      </ptc-title>
+      <ptc-search-field  placeholder-label="Search Technical Support Documentation and Articles" ></ptc-search-field>
+    </div>
+    <div class="is-col-12 is-col-5-md form-section">
+      <ptc-title upperline="none">Popular Tasks</ptc-title>
+      <!-- <ul> -->
+        <ptc-link>Product Pages</ptc-link>
+        <ptc-link>Product Pages</ptc-link>
+        <ptc-link>Product Pages</ptc-link>
+        <ptc-link>Product Pages</ptc-link>
+      
+    </div>
+  </div>
+
+  <ptc-spacer></ptc-spacer>
+  <ptc-spacer></ptc-spacer>
+  
+  <div class="ptc-container is-grid has-col-gap link-container ">
+    <div class="is-col-1"></div>
+    <div class="is-col-2 links"><ptc-link>Support</ptc-link>
+      <button class="btn" role="button" >
+      <span class="arrow">
+        <icon-asset slot="icon" type="solid" size="large" name="arrow-down" color="ptc-green"></icon-asset>
+      </span>
+      </button>
+    </div>
+    <div class="is-col-2 llinks"><ptc-link>Manage and monitor software</ptc-link>
+      <button class="btn" role="button" >
+        <span class="arrow">
+          <icon-asset slot="icon" type="solid" size="large" name="arrow-down" color="ptc-green"></icon-asset>
+        </span>
+        </button>
+    </div>
+    <div class="is-col-2 llinks"><ptc-link>Learn</ptc-link>
+      <button class="btn" role="button" >
+        <span class="arrow">
+          <icon-asset slot="icon" type="solid" size="large" name="arrow-down" color="ptc-green"></icon-asset>
+        </span>
+        </button>
+    </div>
+    <div class="is-col-2 llinks"><ptc-link>Service and Expertise</ptc-link>
+      <button class="btn" role="button" >
+        <span class="arrow">
+          <icon-asset slot="icon" type="solid" size="large" name="arrow-down" color="ptc-green"></icon-asset>
+        </span>
+        </button>
+    </div>
+    <div class="is-col-2 llinks"><ptc-link>PTC Partner Network</ptc-link>
+      <button class="btn" role="button" >
+        <span class="arrow">
+          <icon-asset slot="icon" type="solid" size="large" name="arrow-down" color="ptc-green"></icon-asset>
+        </span>
+        </button>
+    </div>
+    <div class="is-col-1 links"></div>
+  </div>
+ <style>
+   
+
+   .btn {
+      display: none;
+      padding: 10px;
+      font-size: 16px;
+      font-weight: 500;
+      border: none;
+      background-color: transparent;
+      cursor: pointer;
+      align-items: center;
+      span {
+        margin-right: 8px;
+        align-items: center;
+      }
+      
+
+      
+   }
+
+  .llinks:hover  .btn {
+      display: block;
+      
+      
+  }
+
+  .links:hover  .btn {
+      display: flex;
+  }
+  .green-container {
+    background-color:#b3dda4 ;
+    padding: 10px;
+    .search-container{
+      background-color: #00890B;
+      padding:10px;
+      align-items: center;
+    }
+    .form-section {
+      background-color: white;
+      padding: 10px;
+
+      ptc-link {
+        padding: 5px;
+      }
+    }
+  }
+  .links {
+    align-content: center;
+    text-align: center;
+    padding-bottom: 16px;
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content:  space-between;
+  }
+
+  .llinks {
+    align-content: center;
+    text-align: center;
+    padding-bottom: 16px;
+    border-left: solid 2px #b3dda4;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-between;
+
+  }
+  .link-container {
+    border-bottom: solid 2px #b3dda4;
+    /* margin: 15px; */
+  }
+
+  
+</style> 
+    `;}
+
+export const Preview = SupportPage.bind();

package/dist/collection/stories/organisms/ptc/Subanv New/preview.stories.js

@@ -0,0 +1,338 @@
+import { html } from "lit";
+
+export default {
+	title: "Organisms/ptc/Subanv New",
+};
+
+const AlertsPage = (args) => {
+	return html`
+
+		<style>
+			body {
+				margin: 0;
+				font-family:
+					-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+					sans-serif;
+			}
+			.section {
+				padding: 80px 0;
+				min-height: 700px;
+			}
+			.section h2 {
+				font-size: 2.5rem;
+				margin-bottom: 1rem;
+				color: var(--color-gray-10);
+				font-weight: 700;
+				line-height: 1.2;
+			}
+			.section p {
+				font-size: 1.1rem;
+				line-height: 1.6;
+				color: var(--color-gray-08);
+				max-width: 800px;
+			}
+			#overview {
+				background-color: #f8f9fa;
+			}
+			#benefits {
+				background-color: #e3f2fd;
+			}
+			#features {
+				background-color: #f3e5f5;
+			}
+			#analyst-view {
+				background-color: #e8f5e8;
+			}
+			#whats-new {
+				background-color: #fff3e0;
+			}
+			#case-studies {
+				background-color: #fce4ec;
+			}
+			#resources {
+				background-color: #e0f2f1;
+			}
+			#faq {
+				background-color: #f1f8e9;
+			}
+			#features2 {
+				background-color: #e8eaf6;
+			}
+			#analyst-view2 {
+				background-color: #f3e5f5;
+			}
+			#whats-new2 {
+				background-color: #fff8e1;
+			}
+		</style>
+		<ptc-jumbotron
+			jumbotron-type="dark"
+			bg-src="https://ptc-p-001.sitecorecontenthub.cloud/api/public/content/1a972b77e8a54c6d94bb05de3e618f1d"
+			png-src=""
+			gif-src=""
+			bg-video-src=""
+			poster-src=""
+			sub-title="Streamline product development and deliver innovative products fast in the Cloud. Explore the benefits of Arena's cloud-native product lifecycle management (PLM) and quality management system (QMS) solutions."
+			play-button-title="play"
+			pause-button-title="pause"
+			class="hydrated"
+			><ptc-breadcrumb slot="breadcrumb" class="hydrated"
+				><list-item
+					list-type="breadcrumb"
+					class="breadcrumb primary-gray hydrated"
+					>arena</list-item
+				></ptc-breadcrumb
+			><ptc-title
+				slot="main-title"
+				class="jumbotron-title sc-ptc-title-h sc-ptc-title-s hydrated"
+				title-size="xxxx-large"
+				title-height="densest"
+				title-weight="w-8"
+				title-margin="margin-flush"
+				title-color="white"
+				><!---->
+				<h1 class="sc-ptc-title sc-ptc-title-s">
+					Arena PLM and QMS Solutions
+				</h1></ptc-title
+			><ptc-button
+				slot="j-cta"
+				link-title="Explore Arena PLM and QMS solutions"
+				link-href="#"
+				class="hydrated"
+				>Explore Arena</ptc-button
+			></ptc-jumbotron
+		>
+
+		<!-- SEO-Friendly usage (recommended for production) -->
+		<ptc-subnav-v2 active-section="overview" id="subnav">
+			<div slot="nav-items">
+				<a
+					href="#overview"
+					title="Learn about Arena PLM and QMS solutions overview"
+					tracker-id="nav-overview"
+					>Overview</a
+				>
+				<a
+					href="#benefits"
+					title="Discover the benefits of Arena PLM and QMS"
+					tracker-id="nav-benefits"
+					>Benefits</a
+				>
+				<a
+					href="#features"
+					title="Explore Arena's comprehensive feature set"
+					tracker-id="nav-features"
+					>Features</a
+				>
+				<a
+					href="#analyst-view"
+					title="Read industry analyst insights and comparisons"
+					tracker-id="nav-analyst-view"
+					>Analyst View</a
+				>
+				<a
+					href="#whats-new"
+					title="Stay updated with latest features and innovations"
+					tracker-id="nav-whats-new"
+					>What's New</a
+				>
+				<a
+					href="#case-studies"
+					title="Read real-world success stories and case studies"
+					tracker-id="nav-case-studies"
+					>Case Studies</a
+				>
+				<a
+					href="#resources"
+					title="Access whitepapers, webinars, and documentation"
+					tracker-id="nav-resources"
+					>Resources</a
+				>
+				<a
+					href="#faq"
+					title="Find answers to frequently asked questions"
+					tracker-id="nav-faq"
+					>FAQ</a
+				>
+				<a
+					href="#features2"
+					title="Discover advanced capabilities and power-user features"
+					tracker-id="nav-advanced-features"
+					>Advanced Features</a
+				>
+				<a
+					href="#analyst-view2"
+					title="Explore industry research and market analysis"
+					tracker-id="nav-industry-insights"
+					>Industry Insights
+				</a>
+				<a
+					href="#whats-new2"
+					title="Stay informed about recent product updates"
+					tracker-id="nav-latest-updates"
+					>Latest Updates</a
+				>
+			</div>
+			<div slot="subnav-menu-right">
+				<ptc-button
+					link-title="Explore Arena PLM and QMS solutions"
+					link-href="#"
+					class="hydrated"
+					color="primary-cta"
+					size="small"
+					styles=".primary-cta {	display: flex;}	"
+					tracker-id="subnav-contact-us-cta"
+				>
+					Contact Us
+				</ptc-button>
+			</div>
+		</ptc-subnav-v2>
+
+		<section id="overview" class="section">
+			<div class="ptc-container">
+				<h2>Overview</h2>
+				<p>
+					Arena PLM and QMS solutions provide comprehensive product
+					lifecycle management and quality management capabilities in
+					the cloud. Our platform enables teams to collaborate
+					effectively, manage product data, and ensure quality
+					throughout the entire product development process.
+				</p>
+			</div>
+		</section>
+
+		<section id="benefits" class="section">
+			<div class="ptc-container">
+				<h2>Benefits</h2>
+				<p>
+					Discover the powerful benefits that make Arena the leading
+					choice for product development teams. From improved
+					collaboration to accelerated time-to-market, our solutions
+					deliver measurable value to your organization.
+				</p>
+			</div>
+		</section>
+
+		<section id="features" class="section">
+			<div class="ptc-container">
+				<h2>Features</h2>
+				<p>
+					Explore the comprehensive feature set that powers Arena's
+					PLM and QMS solutions. From real-time collaboration to
+					automated workflows, our platform provides everything you
+					need to streamline product development.
+				</p>
+			</div>
+		</section>
+
+		<section id="analyst-view" class="section">
+			<div class="ptc-container">
+				<h2>Analyst View</h2>
+				<p>
+					Get insights from industry analysts and experts on the PLM
+					and QMS landscape. Learn how Arena compares to competitors
+					and why leading organizations choose our solutions.
+				</p>
+			</div>
+		</section>
+
+		<section id="whats-new" class="section">
+			<div class="ptc-container">
+				<h2>What's New</h2>
+				<p>
+					Stay up-to-date with the latest features, enhancements, and
+					innovations in Arena PLM and QMS. Discover new capabilities
+					that can transform your product development processes.
+				</p>
+			</div>
+		</section>
+
+		<section id="case-studies" class="section">
+			<div class="ptc-container">
+				<h2>Case Studies</h2>
+				<p>
+					Explore real-world success stories from companies that have
+					transformed their product development processes with Arena
+					PLM and QMS. Learn how leading organizations across various
+					industries have achieved faster time-to-market, improved
+					quality, and enhanced collaboration.
+				</p>
+			</div>
+		</section>
+
+		<section id="resources" class="section">
+			<div class="ptc-container">
+				<h2>Resources</h2>
+				<p>
+					Access comprehensive resources including whitepapers,
+					webinars, product documentation, and best practices guides.
+					Our resource library provides everything you need to
+					successfully implement and optimize your Arena PLM and QMS
+					solutions.
+				</p>
+			</div>
+		</section>
+
+		<section id="faq" class="section">
+			<div class="ptc-container">
+				<h2>FAQ</h2>
+				<p>
+					Find answers to frequently asked questions about Arena PLM
+					and QMS solutions. Get insights into pricing, deployment,
+					integration capabilities, security features, and more. Our
+					FAQ section helps you make informed decisions about your
+					product lifecycle management needs.
+				</p>
+			</div>
+		</section>
+
+		<section id="features2" class="section">
+			<div class="ptc-container">
+				<h2>Advanced Features</h2>
+				<p>
+					Discover advanced capabilities and power-user features that
+					take your product development to the next level. From
+					advanced reporting and analytics to custom integrations and
+					automation workflows, Arena provides the tools you need for
+					complex product development scenarios.
+				</p>
+			</div>
+		</section>
+
+		<section id="analyst-view2" class="section">
+			<div class="ptc-container">
+				<h2>Industry Insights</h2>
+				<p>
+					Explore comprehensive industry research and market analysis
+					reports that highlight how Arena PLM and QMS solutions are
+					transforming product development across various industries.
+					Get insights into market trends, competitive positioning,
+					and future outlook.
+				</p>
+			</div>
+		</section>
+
+		<section id="whats-new2" class="section">
+			<div class="ptc-container">
+				<h2>Latest Updates</h2>
+				<p>
+					Stay informed about the most recent product updates, feature
+					releases, and platform enhancements. Our continuous
+					innovation ensures you always have access to the latest
+					tools and capabilities to drive your product development
+					success.
+				</p>
+			</div>
+		</section>
+
+		<section id="footer" class="section">
+			<div class="ptc-container">
+				<h2>Footer</h2>
+				<p>This is the footer section.</p>
+			</div>
+		</section>
+
+	`;
+};
+
+export const Preview = AlertsPage.bind();

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

@@ -176,6 +176,12 @@ export const MaxWidthContainer: {
   new (): MaxWidthContainer;
 };
 
+interface ModalFormExample extends Components.ModalFormExample, HTMLElement {}
+export const ModalFormExample: {
+  prototype: ModalFormExample;
+  new (): ModalFormExample;
+};
+
 interface MostPopularNews extends Components.MostPopularNews, HTMLElement {}
 export const MostPopularNews: {
   prototype: MostPopularNews;