@ptcwebops/ptcw-design 6.3.32-beta → 6.3.32

package/dist/collection/stories/organisms/ptc/Blogs Listing Page/preview.stories.js

@@ -0,0 +1,368 @@
+import { html } from 'lit';
+
+export default {
+  title: 'Organisms/ptc/Blogs Listing Page'
+};
+
+const AlertsPage = args => {
+  return html`
+    
+
+<style>
+        #blogs-listing-bg-image {
+            position: absolute;
+            width: 100%;
+            left: 0;
+            top: 80px;
+            opacity: 0.2;
+            z-index: -1;
+        }
+
+        .fitler-check-list {
+            margin: 0.625rem 0;
+            max-height: 200px;
+            overflow-y: auto;
+            overflow-x: hidden;
+            display: flex;
+            flex-direction: column;
+        }
+
+        .fitler-check-list ptc-checkbox {
+            margin: 6.5px 0;
+            display: block;
+        }
+
+        .mobile-search-and-filter {
+            align-items: center;
+        }
+
+        .filter-panel-cta {
+            width: 125px;
+        }
+
+        .filter-panel-content {
+            display: flex;
+            align-items: center;
+            align-content: center;
+            justify-content: center;
+        }
+
+        .filter-panel-content icon-asset {
+            width: 20px;
+            height: 20px;
+            margin-right: 0.75rem;
+        }
+
+        .modal-apply-btn {
+            margin-right: 1rem;
+        }
+
+        .modal-clear-btn {
+            margin-left: 1.5rem;
+        }
+
+        .filter-modal-body {
+            margin: 1.5rem;
+        }
+
+        .filter-modal-body hr {
+            margin-bottom: 1.5rem;
+        }
+
+        .fitler-check-list-modal {
+            margin: .85rem 0;
+        }
+
+        .fitler-check-list-modal ptc-checkbox {
+            margin: .5rem 0;
+        }
+    </style>
+
+    <section class="blogs-section">
+        <div class="ptc-container ptc-section">
+            <div id="blogs-listing-bg-image">
+                <ptc-picture 
+                alt="blogs-background-image" 
+                image-alignment="center" 
+                image-position="relative" 
+                is-full-height="true" 
+                is-full-width="true" 
+                object-fit="fit" 
+                src="https://ptc-p-001.sitecorecontenthub.cloud/api/public/content/3c70bc3a9e2b471e9750f3e7d68ab86c?v=4781b8e7" 
+                styles=""
+                style="position:absolute; width: 100%;"
+            ></ptc-picture>
+            </div>
+            <ptc-title 
+                type="h1" 
+                upperline="no-upperline" 
+                text-align="center" 
+                title-color="gray" 
+                title-weight="w-8" 
+                title-size="xxxx-large"
+                title-margin="margin-flush"
+            >
+                PTC Blogs
+            </ptc-title>
+
+            <ptc-spacer breakpoint="x-small" size="medium"></ptc-spacer>
+            <ptc-spacer breakpoint="small" size="small"></ptc-spacer>
+
+            <ptc-para 
+            font-size="small"
+            font-weight="w-4"
+            para-color="primary-grey"
+            para-line-h="line-height-p"
+            para-align="center"
+            para-margin="margin-flush"
+            >
+                Get the latest industry insights.
+            </ptc-para>
+
+            <ptc-spacer breakpoint="x-small" size="xxxx-large"></ptc-spacer>
+            <ptc-spacer breakpoint="small" size="xxx-large"></ptc-spacer>
+            <ptc-spacer breakpoint="large" size="medium"></ptc-spacer>
+
+            <div class="blogs-featured-card-section">
+                <div class="is-grid">
+                    <div class="is-col-12 is-placed-center">
+                        <ptc-card 
+                            has-image="true" 
+                            card-type="featured-horizontal-card"
+                            card-href="https://www.ptc.com/en/blogs/corporate/ptc-the-next-chapter-building-a-company-for-the-ages"
+                            target="_blank"
+                            heading="PTC — The Next Chapter: Building a Company for the Ages"
+                            title-line-cut-off="3"
+                            event-type=""
+                        >
+                            <ptc-img 
+                                slot="slot-image"
+                                img-url="https://ptc-p-001.sitecorecontenthub.cloud/api/public/content/7eba7c8d7832490fa83ca3a27366ca07?v=8bb14f7e"
+                                image-type="smart-img"
+                                load-mode="lazy-bg"
+                            >
+                            </ptc-img>
+                            <div slot="slot-description">
+                                <ptc-spacer breakpoint="x-small" size="medium"></ptc-spacer>
+                                <ptc-spacer breakpoint="small" size="small"></ptc-spacer>
+                                <ptc-para 
+                                    font-size="small" 
+                                    font-weight="w-4" 
+                                    para-line-h="line-height-densest" 
+                                    para-margin="margin-flush"
+                                    ellipsis-line-cutoff="8"
+                                >
+                                Read PTC CEO Neil Barua's thoughts on becoming the company's fourth CEO and how he's laser-focused on supporting customers in their digital transformation efforts.
+                                </ptc-para>
+                                <ptc-spacer breakpoint="x-small" size="xx-large"></ptc-spacer>
+                                <ptc-spacer breakpoint="x-small" size="xx-small"></ptc-spacer>
+                                <ptc-spacer breakpoint="small" size="x-large"></ptc-spacer>
+                                <ptc-spacer breakpoint="small" size="x-small"></ptc-spacer>
+                                <ptc-button 
+                                    color="ptc-primary" 
+                                    disabled="false" 
+                                    type="button"
+                                >
+                                Watch Podcast
+                                </ptc-button>
+                            </div>
+                        </ptc-card>
+                    </div>
+                </div>
+            </div>
+
+            <ptc-spacer breakpoint="x-small" size="xxxx-large"></ptc-spacer>
+            <ptc-spacer breakpoint="small" size="xxx-large"></ptc-spacer>
+            <ptc-spacer breakpoint="xx-large" size="large"></ptc-spacer>
+
+            <div class="is-col-4 is-desktop is-flex is-centered-vertically">
+                <ptc-title 
+                    type='h2' 
+                    title-size="medium" 
+                    text-align='left' 
+                    title-height="densest" 
+                    title-margin="margin-flush" 
+                    upperline="no-upperline"
+                >Search Blogs</ptc-title>
+                <ptc-spacer breakpoint="medium" size="medium"></ptc-spacer>
+            </div>
+
+
+            <blogs-search-section>
+                <div slot="mobile-search-and-filter" class="mobile-search-and-filter is-mobile">
+                    <div class="is-grid">
+                        <div class="is-col-7 is-col-9-sm">
+                            <ptc-search-field id="search" placeholder-label="Search" class="blogs-search-field"></ptc-search-field>
+                        </div>
+                        <div class="is-col-5 is-col-3-sm">
+                        <ptc-container class="is-float-right filter-panel-cta" spacing="small" container-type="none">
+                            <div class="filter-panel-content">
+                                <icon-asset type="ptc" size="medium" name="options"></icon-asset>
+                                <ptc-filter-tag class="mobile-filters-modal-cta" theme="link-lg">
+                                    Filter
+                                </ptc-filter-tag>
+                            </div>
+                        </ptc-container>
+                        </div>
+                    </div>
+                    <ptc-spacer breakpoint="x-small" size="xxxx-large"></ptc-spacer>
+                    <ptc-spacer breakpoint="small" size="xxx-large"></ptc-spacer>
+                </div>
+
+                <div slot="blogs-desktop-filters" id="desktop-filters" class="is-desktop">
+                    <ptc-container-fluid spacing="small" container-type="none">
+                        <div class="is-grid u-marginBottom-xxl">
+                            <div class="is-col-12">
+                                <ptc-search-field placeholder-label="Search" class="blogs-search-field"></ptc-search-field>
+                            </div>
+                        </div>
+                    </ptc-container-fluid>
+                    <ptc-container spacing="small" container-type="none">
+                        <div class="is-grid">
+                            <div class="is-col-12 is-flex is-centered-vertically is-spaced-between">
+                                <ptc-title 
+                                type='h4' text-align='left' title-height="densest" title-weight="w-7" title-margin="margin-flush" upperline="no-upperline">Filter Results</ptc-title>
+                                <ptc-filter-tag theme="link">
+                                    Clear
+                                </ptc-filter-tag>
+                            </div>
+                        </div>
+                        <hr>
+                        <div class="is-grid">
+                            <div class="is-col-12">
+                                <ptc-icon-minimize heading="Product Type">
+                                <div class="fitler-check-list">
+                                    <ptc-checkbox disabled offset-focus-outline>Advanced Plug-Ins</ptc-checkbox>
+                                    <ptc-checkbox value="Drivers" offset-focus-outline>Drivers</ptc-checkbox>
+                                    <ptc-checkbox value="Suites" offset-focus-outline>Suites</ptc-checkbox>
+                                </div>
+                                </ptc-icon-minimize>
+                            </div>
+                        </div>
+                        <hr>
+                        <div class="is-grid">
+                            <div class="is-col-12">
+                                <ptc-icon-minimize heading="Within Suite">
+                                <div class="fitler-check-list">
+                                    <ptc-checkbox offset-focus-outline>Allen-Bradley Suite</ptc-checkbox>
+                                    <ptc-checkbox offset-focus-outline>Aromat Suite</ptc-checkbox>
+                                    <ptc-checkbox offset-focus-outline>AutomationDirect Suite</ptc-checkbox>
+                                    <ptc-checkbox offset-focus-outline>Building Automation Suite Suite Suite</ptc-checkbox>
+                                    <ptc-checkbox offset-focus-outline>Contrex Suite</ptc-checkbox>
+                                    <ptc-checkbox offset-focus-outline>Cutler-Hammer Suite</ptc-checkbox>
+                                    <ptc-checkbox offset-focus-outline>Cutler-Hammer Suite</ptc-checkbox>
+                                    <ptc-checkbox offset-focus-outline>Cutler-Hammer Suite</ptc-checkbox>
+                                    <ptc-checkbox offset-focus-outline>Cutler-Hammer Suite</ptc-checkbox>
+                                    <ptc-checkbox offset-focus-outline>Cutler-Hammer Suite</ptc-checkbox>
+                                    <ptc-checkbox offset-focus-outline>Cutler-Hammer Suite</ptc-checkbox>
+                                </div>
+                                </ptc-icon-minimize>
+                            </div>
+                        </div>
+                        <hr>
+                        <div class="is-grid">
+                            <div class="is-col-12">
+                                <ptc-icon-minimize heading="Protocol">
+                                <div class="fitler-check-list">
+                                    <ptc-checkbox offset-focus-outline>Allen-Bradley Ethernet</ptc-checkbox>
+                                    <ptc-checkbox offset-focus-outline>Allen-Bradley Ethernet</ptc-checkbox>
+                                    <ptc-checkbox offset-focus-outline>Allen-Bradley Ethernet</ptc-checkbox>
+                                    <ptc-checkbox offset-focus-outline>Allen-Bradley Ethernet</ptc-checkbox>
+                                    <ptc-checkbox offset-focus-outline>Allen-Bradley Ethernet</ptc-checkbox>
+                                    <ptc-checkbox offset-focus-outline>Allen-Bradley Ethernet</ptc-checkbox>
+                                    <ptc-checkbox offset-focus-outline>Allen-Bradley Ethernet</ptc-checkbox>
+                                    <ptc-checkbox offset-focus-outline>Allen-Bradley Ethernet</ptc-checkbox>
+                                    <ptc-checkbox offset-focus-outline>Allen-Bradley Ethernet</ptc-checkbox>
+                                    <ptc-checkbox offset-focus-outline>Allen-Bradley Ethernet</ptc-checkbox>
+                                    <ptc-checkbox offset-focus-outline>Allen-Bradley Ethernet</ptc-checkbox>
+                                    <ptc-checkbox offset-focus-outline>Allen-Bradley Ethernet</ptc-checkbox>
+                                </div>
+                                </ptc-icon-minimize>
+                            </div>
+                        </div>
+                    </ptc-container>
+                </div>
+
+                <ptc-modal slot="blogs-mobile-filters" id="mobile-filters" show="false" size="lg" fixed="true" rounded="true" show-header-footer="true">
+                    <div slot="header">
+                        <ptc-title type='h4' upperline="no-upperline" text-align='center' title-margin="margin-5">
+                            Filter Results
+                        </ptc-title>
+                    </div>
+                    <div slot="footer">
+                        <div class="is-grid">
+                            <div class="is-col-12 is-flex is-centered-vertically is-spaced-between">
+                                <ptc-filter-tag theme="link" class="modal-clear-btn">
+                                    Clear
+                                </ptc-filter-tag>
+                                <ptc-filter-tag theme="button" class="modal-apply-btn">
+                                    Apply
+                                </ptc-filter-tag>
+                            </div>
+                        </div>
+                    </div>
+                    <div slot="body">
+                        <div class="filter-modal-body">
+                            <div class="is-grid">
+                                <div class="is-col-12">
+                                    <ptc-icon-minimize heading="Product Type">
+                                        <div class="fitler-check-list-modal">
+                                            <ptc-checkbox>Advanced Plug-Ins</ptc-checkbox>
+                                            <ptc-checkbox value="Drivers" offset-focus-outline>Drivers</ptc-checkbox>
+                                            <ptc-checkbox value="Suites" offset-focus-outline>Suites</ptc-checkbox>
+                                        </div>
+                                    </ptc-icon-minimize>
+                                </div>
+                            </div>
+                            <hr>
+                            <div class="is-grid">
+                                <div class="is-col-12">
+                                    <ptc-icon-minimize heading="Within Suite">
+                                        <div class="fitler-check-list-modal">
+                                            <ptc-checkbox offset-focus-outline>Allen-Bradley Suite</ptc-checkbox>
+                                            <ptc-checkbox offset-focus-outline>Aromat Suite</ptc-checkbox>
+                                            <ptc-checkbox offset-focus-outline>AutomationDirect Suite</ptc-checkbox>
+                                            <ptc-checkbox offset-focus-outline>Building Automation Suite Suite Suite</ptc-checkbox>
+                                            <ptc-checkbox offset-focus-outline>Contrex Suite</ptc-checkbox>
+                                            <ptc-checkbox offset-focus-outline>Cutler-Hammer Suite</ptc-checkbox>
+                                            <ptc-checkbox offset-focus-outline>Cutler-Hammer Suite</ptc-checkbox>
+                                            <ptc-checkbox offset-focus-outline>Cutler-Hammer Suite</ptc-checkbox>
+                                            <ptc-checkbox offset-focus-outline>Cutler-Hammer Suite</ptc-checkbox>
+                                            <ptc-checkbox offset-focus-outline>Cutler-Hammer Suite</ptc-checkbox>
+                                            <ptc-checkbox offset-focus-outline>Cutler-Hammer Suite</ptc-checkbox>
+                                        </div>
+                                    </ptc-icon-minimize>
+                                </div>
+                            </div>
+                            <hr>
+                            <div class="is-grid">
+                                <div class="is-col-12">
+                                    <ptc-icon-minimize heading="Protocol">
+                                        <div class="fitler-check-list-modal">
+                                            <ptc-checkbox offset-focus-outline>Allen-Bradley Ethernet</ptc-checkbox>
+                                            <ptc-checkbox offset-focus-outline>Allen-Bradley Ethernet</ptc-checkbox>
+                                            <ptc-checkbox offset-focus-outline>Allen-Bradley Ethernet</ptc-checkbox>
+                                            <ptc-checkbox offset-focus-outline>Allen-Bradley Ethernet</ptc-checkbox>
+                                            <ptc-checkbox offset-focus-outline>Allen-Bradley Ethernet</ptc-checkbox>
+                                            <ptc-checkbox offset-focus-outline>Allen-Bradley Ethernet</ptc-checkbox>
+                                            <ptc-checkbox offset-focus-outline>Allen-Bradley Ethernet</ptc-checkbox>
+                                            <ptc-checkbox offset-focus-outline>Allen-Bradley Ethernet</ptc-checkbox>
+                                            <ptc-checkbox offset-focus-outline>Allen-Bradley Ethernet</ptc-checkbox>
+                                            <ptc-checkbox offset-focus-outline>Allen-Bradley Ethernet</ptc-checkbox>
+                                            <ptc-checkbox offset-focus-outline>Allen-Bradley Ethernet</ptc-checkbox>
+                                            <ptc-checkbox offset-focus-outline>Allen-Bradley Ethernet</ptc-checkbox>
+                                        </div>
+                                    </ptc-icon-minimize>
+                                </div>
+                            </div>             
+                        </div>
+                    </div>
+                </ptc-modal>
+            </blogs-search-section>
+        </div>
+    </section>
+
+  `;
+};
+
+export const Preview = AlertsPage.bind();

package/dist/collection/stories/organisms/ptc/Bureau New Dynamic/preview.stories.js

@@ -0,0 +1,54 @@
+import { html } from 'lit';
+
+export default {
+  title: 'Organisms/ptc/Bureau New Dynamic'
+};
+
+const AlertsPage = args => {
+  return html`
+    
+
+<div class="ptc-container ptc-section-standard">
+    
+    <div class="is-grid has-no-col-gap">
+      <div class="is-col-12 is-col-4-lg">
+        <dynamic-box-bundle>
+          <ptc-media-card slot="media" card-type="bureau-card"
+            active-background-image="https://www.ptc.com/-/media/Images/new-org/misc/creo-car-and-plane-screenshot-1280x596.jpg"
+            hover-background-image="https://www.ptc.com/-/media/Videos/MEDIUM-ALL-ART_1mb-cool-creo-car-and-plane.mp4"
+            card-href="https://www.ptc.com/windchill">
+          </ptc-media-card>
+          Built for end-to-end solutions with a complete set of must-have capabilities, ThingWorx is recommended by
+          industry analysts, trusted by customers, proven in the field, and preferred by partners.
+        </dynamic-box-bundle>
+      </div>
+      <div class="is-col-12 is-col-4-lg">
+        <dynamic-box-bundle>
+          <ptc-media-card slot="media" card-type="bureau-card"
+            active-background-image="https://www.ptc.com/-/media/Images/new-org/misc/creo-car-and-plane-screenshot-1280x596.jpg"
+            hover-background-image="https://www.ptc.com/-/media/Videos/MEDIUM-ALL-ART_1mb-cool-creo-car-and-plane.mp4"
+            card-href="https://www.ptc.com/">
+          </ptc-media-card>
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. A, voluptates!
+        </dynamic-box-bundle>
+      </div>
+      <div class="is-col-12 is-col-4-lg">
+        <dynamic-box-bundle>
+          <ptc-media-card slot="media" card-type="bureau-card"
+            active-background-image="https://www.ptc.com/-/media/Images/new-org/misc/creo-car-and-plane-screenshot-1280x596.jpg"
+            hover-background-image="https://www.ptc.com/-/media/Videos/MEDIUM-ALL-ART_1mb-cool-creo-car-and-plane.mp4"
+            card-href="https://www.ptc.com/">
+          </ptc-media-card>
+          Lorem ipsum dolor sit amet consectetur, adipisicing elit. Atque, minus porro voluptatibus corporis suscipit
+          error animi.
+        </dynamic-box-bundle>
+      </div>
+    </div>
+
+
+  </div>
+
+  `;
+};
+
+export const Preview = AlertsPage.bind();