@salesforcedevs/mrkt-components 0.73.0 → 0.74.0-alpha01

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/mrkt-components",
-    "version": "0.73.0",
+    "version": "0.74.0-alpha01",
     "description": "Marketing Lightning web components for DSC",
     "license": "MIT",
     "engines": {
@@ -14,6 +14,5 @@
     },
     "devDependencies": {
         "@types/classnames": "^2.2.10"
-    },
-    "gitHead": "d00cb2ff48d311a87d986d317c78b8a026a0b055"
+    }
 }

package/src/assets/svg/mrkt-cta-section-img-left.svg

@@ -0,0 +1,28 @@
+<svg width="250" height="140" viewBox="0 0 250 140" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_439_14449)">
+<path d="M108.089 104.524C106.97 104.524 105.861 104.303 104.827 103.874C103.793 103.446 102.853 102.817 102.062 102.025C101.271 101.233 100.644 100.293 100.216 99.258C99.7886 98.2233 99.5692 97.1144 99.5706 95.9949C99.5692 94.8501 99.7936 93.7162 100.231 92.6582C100.668 91.6001 101.309 90.6386 102.118 89.8286C102.927 89.0187 103.888 88.3761 104.946 87.9377C106.003 87.4993 107.137 87.2736 108.282 87.2736H136.542C138.855 87.2736 141.074 86.3548 142.709 84.7192C144.345 83.0836 145.264 80.8654 145.264 78.5523C145.261 76.2401 144.341 74.0234 142.706 72.3884C141.071 70.7534 138.855 69.8337 136.542 69.831H48.8433C46.532 69.831 44.3153 68.9136 42.68 67.2802C41.0447 65.6469 40.1247 63.4312 40.122 61.1199C40.1247 58.8077 41.0444 56.591 42.6794 54.956C44.3144 53.321 46.5311 52.4013 48.8433 52.3986H162.564C164.876 52.3986 167.092 51.4812 168.728 49.8478C170.363 48.2144 171.283 45.9987 171.286 43.6875C171.286 41.3744 170.367 39.1561 168.731 37.5206C167.096 35.885 164.877 34.9662 162.564 34.9662H83.9918C82.8461 34.9675 81.7114 34.7428 80.6527 34.305C79.594 33.8672 78.632 33.2248 77.8219 32.4147C77.0118 31.6046 76.3695 30.6427 75.9317 29.584C75.4938 28.5252 75.2692 27.3906 75.2705 26.2449C75.2705 23.9319 76.1893 21.7136 77.8249 20.078C79.4605 18.4424 81.6788 17.5236 83.9918 17.5236H118.958C121.269 17.5236 123.486 16.6061 125.121 14.9728C126.757 13.3394 127.677 11.1237 127.679 8.81245C127.691 7.6595 127.475 6.51561 127.042 5.44695C126.609 4.37829 125.968 3.40608 125.157 2.58655C124.346 1.76702 123.381 1.11646 122.317 0.67248C121.253 0.228505 120.111 -6.298e-05 118.958 1.30171e-08L0.678711 1.30171e-08V104.524H108.089Z" fill="#EAF5FE"/>
+<path d="M170.952 104.727H1.01318" stroke="#1B96FF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M79.7884 85.481H1.01318" stroke="#1B96FF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M28.0583 69.2739H1.01318" stroke="#1B96FF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M248.987 104.727H204.195" stroke="#1B96FF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M207.002 38.8256L208.015 41.52C208.05 41.6152 208.105 41.7017 208.177 41.7734C208.248 41.8451 208.335 41.9004 208.43 41.9353L211.134 42.9482C211.27 42.9966 211.388 43.0859 211.471 43.2038C211.554 43.3217 211.599 43.4624 211.599 43.6066C211.599 43.7509 211.554 43.8916 211.471 44.0095C211.388 44.1274 211.27 44.2166 211.134 44.265L208.43 45.278C208.335 45.3129 208.248 45.3682 208.177 45.4399C208.105 45.5116 208.05 45.598 208.015 45.6933L207.002 48.3978C206.951 48.5326 206.86 48.6488 206.742 48.7308C206.623 48.8128 206.482 48.8567 206.338 48.8567C206.194 48.8567 206.053 48.8128 205.935 48.7308C205.816 48.6488 205.726 48.5326 205.675 48.3978L204.662 45.6933C204.623 45.5987 204.565 45.513 204.492 45.4416C204.419 45.3702 204.332 45.3145 204.236 45.278L201.542 44.265C201.406 44.2166 201.289 44.1274 201.205 44.0095C201.122 43.8916 201.078 43.7509 201.078 43.6066C201.078 43.4624 201.122 43.3217 201.205 43.2038C201.289 43.0859 201.406 42.9966 201.542 42.9482L204.236 41.9353C204.332 41.8988 204.419 41.8431 204.492 41.7716C204.565 41.7002 204.623 41.6146 204.662 41.52L205.675 38.8256C205.726 38.6908 205.816 38.5746 205.935 38.4926C206.053 38.4106 206.194 38.3667 206.338 38.3667C206.482 38.3667 206.623 38.4106 206.742 38.4926C206.86 38.5746 206.951 38.6908 207.002 38.8256V38.8256Z" stroke="#1B96FF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M207.345 78.7042C208.24 78.7042 208.966 77.9786 208.966 77.0836C208.966 76.1885 208.24 75.4629 207.345 75.4629C206.45 75.4629 205.725 76.1885 205.725 77.0836C205.725 77.9786 206.45 78.7042 207.345 78.7042Z" stroke="#1B96FF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M214.031 77.0634C213.34 74.9517 211.999 73.1125 210.2 71.8082C208.401 70.504 206.236 69.8014 204.014 69.8008" stroke="#1B96FF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M213.95 81.7736L221.01 77.0635H214.031" stroke="#1B96FF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M212.967 80.2944L213.95 81.7733" stroke="#1B96FF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M214.599 83.0601C215.475 87.2912 214.923 91.6935 213.03 95.5775C211.136 99.4615 208.008 102.608 204.135 104.524" stroke="#1B96FF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M186.804 79.4234L187.675 78.0155C189.242 75.4999 191.424 73.4248 194.015 71.9858C196.605 70.5468 199.52 69.7913 202.484 69.7905H203.79" stroke="#1B96FF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M191.574 79.1299L189.224 82.665" stroke="#1B96FF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M193.297 82.9487L171.731 115.261" stroke="#1B96FF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M187.279 99.1045L178.923 111.624" stroke="#1B96FF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M195.667 108.039L176.502 136.806" stroke="#1B96FF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M195.687 115.261L181.333 136.806" stroke="#1B96FF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M195.647 93.7563L186.115 108.039" stroke="#1B96FF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M200.559 82.9893C201.623 84.5717 202.192 86.4355 202.192 88.3426C202.192 90.2496 201.623 92.1134 200.559 93.6959L193.307 104.494" stroke="#1B96FF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<defs>
+<clipPath id="clip0_439_14449">
+<rect width="250" height="137.819" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/src/assets/svg/mrkt-cta-section-img-right.svg

@@ -0,0 +1,18 @@
+<svg width="250" height="140" viewBox="0 0 250 140" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_439_14450)">
+<g clip-path="url(#clip1_439_14450)">
+<path d="M143.73 105.19C145.963 105.19 148.105 104.303 149.684 102.724C151.263 101.145 152.15 99.0031 152.15 96.77C152.15 94.4865 151.243 92.2965 149.628 90.6818C148.013 89.0671 145.823 88.16 143.54 88.16H115.64C114.504 88.1653 113.379 87.9457 112.329 87.514C111.279 87.0823 110.325 86.447 109.522 85.6447C108.719 84.8424 108.082 83.8891 107.65 82.8396C107.217 81.7901 106.996 80.6653 107 79.53C107 77.2482 107.905 75.0597 109.518 73.4453C111.131 71.8309 113.318 70.9226 115.6 70.92H202.18C203.31 70.9213 204.429 70.6998 205.474 70.2682C206.518 69.8366 207.468 69.2034 208.267 68.4047C209.067 67.6059 209.701 66.6574 210.134 65.6134C210.567 64.5693 210.79 63.4502 210.79 62.32C210.79 60.0365 209.883 57.8465 208.268 56.2318C206.653 54.6171 204.463 53.71 202.18 53.71H89.9997C87.718 53.71 85.5295 52.8043 83.9151 51.1917C82.3007 49.5792 81.3924 47.3918 81.3897 45.11C81.3845 43.976 81.6033 42.852 82.0336 41.8028C82.464 40.7536 83.0973 39.7997 83.8974 38.9959C84.6974 38.1922 85.6483 37.5544 86.6956 37.1192C87.7428 36.684 88.8657 36.46 89.9997 36.46H167.52C168.651 36.4613 169.771 36.2395 170.816 35.8073C171.861 35.3751 172.811 34.7409 173.611 33.9411C174.411 33.1413 175.045 32.1917 175.477 31.1465C175.909 30.1013 176.131 28.9811 176.13 27.85C176.13 25.5665 175.223 23.3765 173.608 21.7618C171.993 20.1471 169.803 19.24 167.52 19.24H133C130.718 19.24 128.529 18.3343 126.915 16.7217C125.301 15.1092 124.392 12.9218 124.39 10.64C124.386 9.5068 124.606 8.38396 125.037 7.33588C125.467 6.2878 126.101 5.3351 126.901 4.53241C127.701 3.72972 128.651 3.09282 129.698 2.65826C130.744 2.22369 131.867 1.99999 133 2L249.77 2V105.19H143.73Z" fill="#EAF5FE"/>
+<path d="M82 105.39H249.77" stroke="#1B96FF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M172 86.3901H249.77" stroke="#1B96FF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M223.069 70.3901H249.769" stroke="#1B96FF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</g>
+<defs>
+<clipPath id="clip0_439_14450">
+<rect width="250" height="140" fill="white"/>
+</clipPath>
+<clipPath id="clip1_439_14450">
+<rect width="169.77" height="104.39" fill="white" transform="translate(81 2)"/>
+</clipPath>
+</defs>
+</svg>

package/src/modules/mrkt/rectangularHeading/rectangularHeading.css

@@ -2,21 +2,15 @@
 
 :host {
     --mrkt-c-rectangular-heading-background-color: var(
-        --dx-g-blue-vibrant-15,
-        #03234d
+        --dx-g-indigo-vibrant-15
     );
-    --mrkt-c-rectangular-heading-background-color-faded: rgba(3, 45, 96, 0);
 }
 
 .fade {
     display: none;
     width: 150%;
     height: 250px;
-    background: linear-gradient(
-        180deg,
-        var(--mrkt-c-rectangular-heading-background-color) 0%,
-        var(--mrkt-c-rectangular-heading-background-color-faded) 100%
-    );
+    background-color: var(--mrkt-c-rectangular-heading-background-color);
     position: absolute;
     top: 0;
     left: -25%;

package/src/modules/mrkt/subNavBar/subNavBar.css

@@ -6,18 +6,8 @@
     --subnav-height-neg: calc(-1 * var(--subnav-height));
 }
 
-@keyframes slide {
-    0% {
-        top: var(--subnav-height-neg);
-    }
-
-    100% {
-        top: 0;
-    }
-}
-
 .subnav {
-    position: fixed;
+    position: sticky;
     top: 0;
     left: 0;
     width: 100%;
@@ -28,19 +18,29 @@
     flex-direction: row;
     align-items: center;
     justify-content: space-between;
-    animation: slide 0.3s cubic-bezier(0.3, 0.73, 0.3, 0.74) forwards;
     z-index: 100000;
-    box-shadow: 0 5px 10px 0 rgb(0 0 0 / 10%);
 }
 
-.subnav.hide {
-    display: none;
+.subnav.is-sticky {
+    background: red;
+}
+
+.subnav::after {
+    content: "";
+    z-index: 1;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    height: 2px;
+    width: 100%;
+    background: var(--dx-g-gray-95);
 }
 
 nav {
     height: 100%;
     overflow-y: auto;
     margin: 0 var(--dx-g-spacing-smd);
+    z-index: 2;
 }
 
 ul {

package/src/modules/mrkt/subNavBar/subNavBar.html

@@ -1,5 +1,5 @@
 <template>
-    <div class={className}>
+    <div class="subnav">
         <template if:false={isMobile}>
             <dx-button
                 variant="tertiary"

package/src/modules/mrkt/subNavBar/subNavBar.ts

@@ -4,48 +4,36 @@ import { MatchMediaElement } from "dxBaseElements/matchMediaElement";
 import type { OptionWithLink } from "typings/custom";
 import { toJson } from "dxUtils/normalizers";
 
+const SECTION_OBSERVER_OPTIONS = {
+    root: document,
+    threshold: [0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1.0]
+};
+
 export default class SubNavBar extends MatchMediaElement {
     @api subscribeHref!: string;
     @api containerQuery: string = "body";
-    @api showAtId?: string;
 
     @api
     get navItems() {
-        return this._navItems.map((item) => ({
-            ...item,
-            className: cx(
-                "nav-item",
-                "dx-text-heading-6",
-                this.activeHash === item?.link?.href && "active"
-            )
-        }));
+        return this._navItems.map(this.normalizeItem);
     }
     set navItems(value) {
         this._navItems = toJson(value);
     }
 
     private _navItems!: OptionWithLink[];
-    private isVisible: boolean = false;
     private sectionIntersectionEntryMap:
         | {
               [id: string]: IntersectionObserverEntry;
           }
         | {} = {};
     private sectionsObserver!: IntersectionObserver;
+    private stickyNavObserver!: IntersectionObserver;
 
     private get containerElement(): HTMLElement {
         return document.querySelector(this.containerQuery) as HTMLElement;
     }
 
-    private get showAtElement(): HTMLElement {
-        const id = this.showAtId || this.hashIds[0];
-        return document.getElementById(id) as HTMLElement;
-    }
-
-    private get className(): string {
-        return cx("subnav", !this.isVisible && "hide");
-    }
-
     private get hashIds(): string[] {
         return this.navItems.map((item: OptionWithLink) =>
             item.link.href.replace("#", "")
@@ -76,27 +64,45 @@ export default class SubNavBar extends MatchMediaElement {
     connectedCallback(): void {
         super.connectedCallback();
         this.observeSectionIntersections();
-        this.onPageScroll();
-        this.containerElement?.addEventListener("scroll", this.onPageScroll);
+    }
+
+    renderedCallback(): void {
+        this.observeStickyNav();
     }
 
     disconnectedCallback(): void {
         super.disconnectedCallback();
         this.sectionsObserver.disconnect();
-        this.containerElement?.removeEventListener("scroll", this.onPageScroll);
+        this.stickyNavObserver.disconnect();
     }
 
-    private onPageScroll = () => {
-        if (this.showAtElement) {
-            this.isVisible = this.showAtElement.getBoundingClientRect().y <= 1;
+    normalizeItem = (item: OptionWithLink) => ({
+        ...item,
+        className: cx(
+            "nav-item",
+            "dx-text-heading-6",
+            this.activeHash === item?.link?.href && "active"
+        )
+    });
+
+    private observeStickyNav() {
+        const el = this.template.querySelector(".subnav");
+        if (el && !this.stickyNavObserver) {
+            this.stickyNavObserver = new IntersectionObserver(
+                ([e]) => {
+                    console.log("heyyyy", e.intersectionRatio < 1);
+                    e.target.classList.toggle(
+                        "is-sticky",
+                        e.intersectionRatio < 1
+                    );
+                },
+                { threshold: [1] }
+            );
+            this.stickyNavObserver.observe(el);
         }
-    };
+    }
 
     private observeSectionIntersections() {
-        const observerOptions = {
-            root: document,
-            threshold: [0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1.0]
-        };
         this.sectionsObserver = new IntersectionObserver(
             (entries) =>
                 entries.forEach((entry) => {
@@ -105,7 +111,7 @@ export default class SubNavBar extends MatchMediaElement {
                         [entry.target.id]: entry
                     };
                 }),
-            observerOptions
+            SECTION_OBSERVER_OPTIONS
         );
         this.hashIds.forEach((id) => {
             const el = document.getElementById(id);

package/LICENSE

@@ -1,12 +0,0 @@
-Copyright (c) 2020, Salesforce.com, Inc.
-All rights reserved.
-
-Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
-
-* Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.
-
-* Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
-
-* Neither the name of Salesforce.com nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission.
-
-THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.