@salesforcedevs/dx-components 0.16.3 → 0.17.1-review-diff1

package/src/modules/dx/eyebrow/eyebrow.css

@@ -0,0 +1,44 @@
+@import "dxHelpers/text";
+
+.eyebrow {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background: var(--dx-g-blue-vibrant-10);
+    color: white;
+    padding: 6px 40px;
+    gap: 4px;
+    box-sizing: border-box;
+}
+
+.eyebrow.fixed {
+    position: fixed;
+    top: var(--dx-g-global-header-height, 0);
+    width: 100%;
+    z-index: var(--dx-g-z-index-max, 999);
+}
+
+.eyebrow > dx-icon {
+    padding-right: 5px;
+}
+
+.eyebrow > span {
+    text-align: center;
+}
+
+.eyebrow > span > a {
+    color: white;
+    text-decoration: underline;
+}
+
+@media (min-width: 768px) and (max-width: 1279px) {
+    .eyebrow {
+        padding: 6px 32px;
+    }
+}
+
+@media (max-width: 767px) {
+    .eyebrow {
+        padding: 6px 24px;
+    }
+}

package/src/modules/dx/eyebrow/eyebrow.html

@@ -0,0 +1,16 @@
+<template>
+    <div class={className}>
+        <dx-icon
+            sprite={iconSprite}
+            symbol={iconSymbol}
+            size={iconSize}
+        ></dx-icon>
+        <span>
+            {body}
+            <template lwc:if={hasCta}>
+                &nbsp;
+                <a target={ctaTarget} href={ctaHref}>{ctaLabel}</a>
+            </template>
+        </span>
+    </div>
+</template>

package/src/modules/dx/eyebrow/eyebrow.ts

@@ -0,0 +1,32 @@
+import cx from "classnames";
+import { normalizeBoolean } from "dxUtils/normalizers";
+import { api, LightningElement } from "lwc";
+import { IconSize, IconSprite, IconSymbol } from "typings/custom";
+
+export default class Eyebrow extends LightningElement {
+    @api body = "";
+    @api ctaHref = "";
+    @api ctaLabel = "";
+    @api ctaTarget = "_blank";
+    @api iconSize: IconSize = "large";
+    @api iconSprite: IconSprite = "action";
+    @api iconSymbol: IconSymbol = "info";
+
+    @api
+    get fixed() {
+        return this._fixed;
+    }
+    set fixed(value: string | boolean) {
+        this._fixed = normalizeBoolean(value);
+    }
+
+    private _fixed: boolean = false;
+
+    get hasCta() {
+        return Boolean(this.ctaHref && this.ctaLabel);
+    }
+
+    get className() {
+        return cx("eyebrow", "dx-text-body-3", this.fixed && "fixed");
+    }
+}

package/src/modules/dx/faq/faq.css

@@ -0,0 +1,58 @@
+@import "dxHelpers/reset";
+@import "dxHelpers/text";
+
+:host {
+    --dx-c-formatted-rich-text-list-style-type-secondary: lower-alpha;
+}
+
+details summary {
+    cursor: pointer;
+    list-style: none;
+    display: flex;
+    justify-content: space-between;
+}
+
+details summary::-webkit-details-marker {
+    display: none;
+}
+
+details summary > * {
+    display: inline;
+}
+
+/* hide '-' when collapsed & '+' when expanded */
+details > summary > .expanded,
+details[open] > summary > .collapsed {
+    display: none;
+}
+
+/* show '-' when expanded */
+details[open] > summary > .expanded {
+    display: inline;
+}
+
+details:not(:first-of-type) {
+    margin-top: var(--dx-g-spacing-lg);
+}
+
+.container {
+    max-width: 840px;
+    margin: 0 auto;
+}
+
+.faq-title {
+    text-align: center;
+    margin-bottom: var(--dx-g-spacing-lg);
+}
+
+.faq-content {
+    padding: var(--dx-g-spacing-xl) 0;
+}
+
+.faq-body {
+    margin: var(--dx-g-spacing-lg) 0;
+}
+
+dx-icon-badge {
+    padding-left: var(--dx-g-spacing-lg);
+}

package/src/modules/dx/faq/faq.html

@@ -0,0 +1,36 @@
+<template>
+    <div class="container">
+        <h2 class="faq-title dx-text-display-4">{header}</h2>
+        <div class="faq-content" part="content">
+            <template iterator:it={options}>
+                <details key={it.value.title} open={it.first}>
+                    <summary class="dx-text-display-7">
+                        {it.value.title}
+                        <dx-icon-badge
+                            class="collapsed"
+                            icon-size="small"
+                            background-color="cloud-blue-vibrant-95"
+                            background-size="small"
+                            symbol="add"
+                            color="blue-vibrant-20"
+                        ></dx-icon-badge>
+                        <dx-icon-badge
+                            class="expanded"
+                            icon-size="small"
+                            background-color="cloud-blue-vibrant-95"
+                            background-size="small"
+                            symbol="dash"
+                            color="blue-vibrant-20"
+                        ></dx-icon-badge>
+                    </summary>
+                    <p class="faq-body dx-text-body-2">
+                        <dx-formatted-rich-text
+                            value={it.value.body}
+                        ></dx-formatted-rich-text>
+                    </p>
+                </details>
+                <dx-hr key={it.value.title} no-padding="true"></dx-hr>
+            </template>
+        </div>
+    </div>
+</template>

package/src/modules/dx/faq/faq.ts

@@ -0,0 +1,16 @@
+import { LightningElement, api } from "lwc";
+import { toJson } from "dxUtils/normalizers";
+
+export default class Faq extends LightningElement {
+    @api header!: string;
+
+    @api
+    get options() {
+        return this._options;
+    }
+    set options(value: any) {
+        this._options = toJson(value);
+    }
+
+    private _options = [];
+}

package/src/modules/dx/feature/feature.css

@@ -1,14 +1,17 @@
-@import "helpers/reset";
-@import "helpers/text";
+@import "dxHelpers/reset";
+@import "dxHelpers/text";
 
 :host {
-    --dx-c-feature-img-box-shadow: 0 6px 30px 0 rgba(0, 20, 45, 0.4);
-    --dx-c-feature-description-left-img-src: url(/assets/svg/feature-backdrop1.svg);
+    --dx-c-feature-img-box-shadow: 0 6px 30px 0 rgb(0 20 45 / 40%);
+    --dx-c-feature-description-left-img-src: url("https://a.sfdcstatic.com/developer-website/images/feature-backdrop1.svg");
     --dx-c-feature-description-max-width: 31.75rem;
     --dx-c-feature-img-margin-left: auto;
     --dx-c-feature-img-container-padding: 4rem;
     --dx-c-feature-image-max-width: 100%;
     --dx-c-feature-description-font-size: var(--dx-g-text-base);
+    --dx-c-feature-description-img-width: 45%;
+    --dx-c-feature-description-gap: 0;
+    --dx-c-feature-description-img-gap: 0;
 }
 
 .label {
@@ -31,11 +34,18 @@ h3 {
 section {
     display: flex;
     align-items: center;
+    gap: var(--dx-c-feature-description-img-gap);
+}
+
+.description {
+    display: flex;
+    flex-direction: column;
+    gap: var(--dx-c-feature-description-gap);
 }
 
 .description,
 .image {
-    width: 45%;
+    width: var(--dx-c-feature-description-img-width);
 }
 
 .image {
@@ -73,7 +83,7 @@ section {
 
 .description-right .image {
     margin-right: auto;
-    background-image: url(/assets/svg/feature-backdrop2.svg);
+    background-image: url("https://a.sfdcstatic.com/developer-website/images/feature-backdrop2.svg");
 }
 
 .image-display-container {

package/src/modules/dx/feature/feature.html

@@ -1,9 +1,9 @@
 <template>
     <section class={sectionClass}>
         <div class="description">
-            <h2 if:true={hasLabel} class="dx-text-heading-7 label">{label}</h2>
-            <h3 class="dx-text-heading-3">{title}</h3>
-            <div class="body dx-text-body-2">
+            <h2 if:true={hasLabel} class="dx-text-display-8 label">{label}</h2>
+            <h3 class="dx-text-display-4" part="header">{header}</h3>
+            <div class="body dx-text-body-2" part="body">
                 <slot></slot>
             </div>
             <dx-button
@@ -12,6 +12,8 @@
                 target={target}
                 icon-symbol={iconSymbol}
                 href={buttonHref}
+                onclick={handleClick}
+                if:true={buttonHref}
             >
                 {buttonLabel}
             </dx-button>
@@ -19,15 +21,15 @@
         <div if:true={isDisplay} class="image-display-container">
             <img
                 class="image-display"
-                src="/assets/svg/featured-demo-art-blank.svg"
-                alt={title}
+                src="https://a.sfdcstatic.com/developer-website/images/featured-demo-art-blank.svg"
+                alt={header}
             />
             <div class="image-container">
-                <img src={imageSrc} alt={title} />
+                <img src={imageSrc} alt={header} />
             </div>
         </div>
         <div if:false={isDisplay} class="image">
-            <img src={imageSrc} alt={title} />
+            <img src={imageSrc} alt={header} />
         </div>
     </section>
 </template>

package/src/modules/dx/feature/feature.ts

@@ -1,8 +1,9 @@
 import { LightningElement, api } from "lwc";
+import { track } from "dxUtils/analytics";
 
 export default class Feature extends LightningElement {
     @api label!: string;
-    @api title!: string;
+    @api header!: string;
     @api imageSrc!: string;
     @api buttonHref: string | null = null;
     @api buttonLabel: string | null = null;
@@ -25,10 +26,22 @@ export default class Feature extends LightningElement {
     }
 
     get target(): string {
-        return this.isExternalLink ? '_blank' : '_self';
+        return this.isExternalLink ? "_blank" : "_self";
     }
 
     get iconSymbol(): string {
-        return this.isExternalLink ? 'new_window' : '';
+        return this.isExternalLink ? "new_window" : "";
     }
-}
+
+    handleClick(event: Event) {
+        const payload = {
+            click_text: this.buttonLabel,
+            element_title: this.header,
+            click_url: this.buttonHref,
+            element_type: "button",
+            content_category: "cta"
+        };
+        track(event.target!, "custEv_ctaButtonClick", payload);
+        track(event.target!, "custEv_linkClick", payload);
+    }
+}

package/src/modules/dx/featureFlag/featureFlag.css

@@ -0,0 +1,3 @@
+.hidden {
+    display: none;
+}

package/src/modules/dx/featureFlag/featureFlag.html

@@ -0,0 +1,3 @@
+<template>
+    <slot class="hidden"></slot>
+</template>

package/src/modules/dx/featureFlag/featureFlag.ts

@@ -0,0 +1,41 @@
+import { api, LightningElement } from "lwc";
+import optimizelySdk from "@optimizely/optimizely-sdk";
+
+// This is needed to specify user context (such as logged in, admin, ...etc).
+// leave this as hard-coded for now until we create audiences in Optimizely.
+const userId = "user123";
+
+export default class FeatureFlag extends LightningElement {
+    @api flag!: string;
+
+    private optimizelyInstance: any;
+
+    private showElements(slot: any) {
+        slot.classList.remove("hidden");
+    }
+
+    connectedCallback(): void {
+        this.optimizelyInstance = optimizelySdk.createInstance({
+            sdkKey: process.env.OPTIMIZELY_SDK_KEY
+        });
+    }
+
+    renderedCallback(): void {
+        const slotEl = this.template.querySelector("slot") as any;
+
+        this.optimizelyInstance?.onReady().then(({ success, reason }: any) => {
+            if (!success) {
+                console.log(
+                    `Optimizely client initialization unsuccessful, reason: ${reason}`
+                );
+                return;
+            }
+            const user = this.optimizelyInstance?.createUserContext(userId);
+            const decision = user?.decide(this.flag);
+
+            if (decision?.enabled) {
+                this.showElements(slotEl);
+            }
+        });
+    }
+}