@ptcwebops/ptcw-design 6.2.23 → 6.2.25-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/custom-elements/index.d.ts

@@ -164,6 +164,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;