@salesforcedevs/docs-components 0.7.0 → 0.7.59-sppage-alpha1

package/src/modules/doc/headingAnchor/headingAnchor.ts

@@ -0,0 +1,43 @@
+import { LightningElement, api } from "lwc";
+import { IconSprite, IconSize, IconSymbol } from "typings/custom";
+
+export default class HeadingAnchor extends LightningElement {
+    @api ariaLabel: string = "copy";
+    @api iconSize?: IconSize = "override";
+    @api iconSprite?: IconSprite = "utility";
+    @api iconSymbol?: IconSymbol;
+    @api header: string = "";
+    @api urlText: string = "";
+
+    label: string = "Copy link to clipboard";
+
+    private async onIconClick() {
+        await this.iconClickHandler();
+    }
+
+    private async iconClickHandler() {
+        this.label = "Copied";
+        setTimeout(() => {
+            this.label = "Copy link to clipboard";
+        }, 2000);
+
+        try {
+            if (this.header && this.urlText) {
+                const [hostUrl] = window.location.href.split("#");
+                const url = `${hostUrl}#${this.urlText}`;
+                await navigator.clipboard.writeText(url);
+            }
+        } catch (error) {
+            console.error(error);
+        }
+    }
+
+    private async onKeyDown(e: KeyboardEvent) {
+        switch (e.key) {
+            case "Enter":
+                await this.iconClickHandler();
+                break;
+            default:
+        }
+    }
+}

package/src/modules/doc/headingContent/headingContent.css

@@ -0,0 +1,53 @@
+@import "dxHelpers/reset";
+
+:host {
+    --doc-c-heading-anchor-button-bottom: 0;
+    --doc-c-heading-anchor-icon-size: 18px;
+    --button-size: var(--dx-g-spacing-xl);
+}
+
+dx-tooltip {
+    line-height: var(--button-size);
+    padding-right: var(--dx-g-spacing-xs);
+}
+
+.button-container {
+    height: 100%;
+    margin-right: calc(var(--dx-g-spacing-xl) - 4px);
+    position: relative;
+    padding-right: var(--dx-g-spacing-xs);
+}
+
+button {
+    position: absolute;
+    bottom: var(--doc-c-heading-anchor-button-bottom);
+    left: 0;
+    opacity: 0;
+    color: rgb(11 92 171);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: var(--button-size);
+    width: var(--button-size);
+    border-radius: 4px;
+}
+
+dx-icon {
+    --dx-c-icon-size: var(--doc-c-heading-anchor-icon-size);
+}
+
+.title {
+    word-break: break-word;
+}
+
+button:focus {
+    box-shadow: 0 0 0 2px rgb(11 92 171);
+}
+
+button:focus,
+button:hover,
+span:hover dx-tooltip button,
+span:hover ~ dx-tooltip button {
+    opacity: 1;
+    outline: none;
+}

package/src/modules/doc/headingContent/headingContent.html

@@ -0,0 +1,13 @@
+<template>
+    <template if:false={hash}>{header}</template>
+    <template if:true={hash}>
+        <span class="title">{header}&nbsp;</span>
+        <dx-tooltip placement="top" label={label}>
+            <span class="button-container">
+                <button onclick={copy} aria-label="copy">
+                    <dx-icon size="override" symbol="link"></dx-icon>
+                </button>
+            </span>
+        </dx-tooltip>
+    </template>
+</template>

package/src/modules/doc/headingContent/headingContent.ts

@@ -0,0 +1,30 @@
+import { LightningElement, api } from "lwc";
+
+export default class HeadingContent extends LightningElement {
+    @api header: string = "";
+    @api hash: string | null = null;
+
+    label: string = "Copy link to clipboard";
+    timeout: number | null = null;
+
+    private async copy() {
+        if (this.timeout) {
+            window.clearTimeout(this.timeout);
+        }
+
+        this.label = "Copied";
+        this.timeout = window.setTimeout(() => {
+            this.label = "Copy link to clipboard";
+        }, 2000);
+
+        try {
+            if (this.header && this.hash) {
+                const [hostUrl] = window.location.href.split("#");
+                const url = `${hostUrl}#${this.hash}`;
+                await navigator.clipboard.writeText(url);
+            }
+        } catch (error) {
+            console.error(error);
+        }
+    }
+}

package/src/modules/doc/overview/overview.css

@@ -0,0 +1,40 @@
+doc-phase {
+    --doc-c-phase-top: calc(
+        var(--dx-g-global-header-height) + var(--dx-g-doc-header-height)
+    );
+}
+
+dx-section {
+    --dx-c-section-padding-top: 0;
+    --dx-c-section-padding-bottom: var(--dx-g-spacing-2xl);
+}
+
+dx-section::part(content) {
+    max-width: 1280px;
+    margin: auto;
+}
+
+dx-group-text:first-of-type {
+    margin-top: var(--dx-g-spacing-2xl);
+}
+
+dx-group-text.features {
+    margin-top: var(--dx-g-spacing-xl);
+    margin-bottom: var(--dx-g-spacing-xl);
+}
+
+.content {
+    padding-right: var(--dx-g-spacing-xl);
+}
+
+@media (max-width: 1024px) {
+    .content {
+        padding-right: 0;
+    }
+}
+
+@media (max-width: 800px) {
+    dx-group-text.description {
+        margin-top: var(--dx-g-spacing-lg);
+    }
+}

package/src/modules/doc/overview/overview.html

@@ -0,0 +1,34 @@
+<template>
+    <div class="container">
+        <doc-phase
+            if:true={docPhaseInfo}
+            doc-phase-info={docPhaseInfo}
+        ></doc-phase>
+
+        <dx-section>
+            <dx-grid columns="two-slim-right">
+                <div class="content">
+                    <dx-group-text
+                        class="description"
+                        header={header}
+                        body={description}
+                        size="large"
+                        title-aria-level="1"
+                        primary-link={primaryLink}
+                        secondary-link={secondaryLink}
+                    ></dx-group-text>
+                </div>
+                <div>
+                    <dx-group-text
+                        header={featuresListTitle}
+                        size="medium"
+                        class="features"
+                    ></dx-group-text>
+                    <dx-features-list
+                        options={featuresListOptions}
+                    ></dx-features-list>
+                </div>
+            </dx-grid>
+        </dx-section>
+    </div>
+</template>

package/src/modules/doc/overview/overview.ts

@@ -0,0 +1,12 @@
+import { LightningElement, api } from "lwc";
+import { DocPhaseInfo, FeatureItem, Link } from "typings/custom";
+
+export default class Overview extends LightningElement {
+    @api docPhaseInfo!: DocPhaseInfo;
+    @api header!: string;
+    @api description!: string;
+    @api primaryLink!: Link;
+    @api secondaryLink!: Link;
+    @api featuresListTitle!: string;
+    @api featuresListOptions!: FeatureItem[];
+}

package/src/modules/doc/phase/phase.css

@@ -0,0 +1,70 @@
+@import "dxHelpers/reset";
+@import "dxHelpers/text";
+@import "docHelpers/status";
+
+:host {
+    --doc-c-phase-top: 0;
+    --doc-c-phase-container-align-items: flex-start;
+
+    position: sticky;
+    top: var(--doc-c-phase-top);
+
+    /* NOTE: If you are changing z-index value here, ensure it's less than z-index of dx-sidebar in contentLayout.css */
+    z-index: var(--dx-g-z-index-100);
+}
+
+.doc-phase-container {
+    display: flex;
+    flex-direction: column;
+    align-items: var(--doc-c-phase-container-align-items);
+    padding-left: var(--dx-g-global-header-padding-horizontal);
+    padding-right: var(--dx-g-global-header-padding-horizontal);
+    width: 100%;
+    border: none;
+}
+
+.doc-phase-title-container {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    width: 100%;
+}
+
+dx-button {
+    margin-left: auto;
+}
+
+/*
+    NOTE: Here we are assuming that indicator height won't go beyond 1000px.
+
+    It's one of the suggested way to achieve the expand/collapse animation
+    Ref: https://stackoverflow.com/a/41164095
+
+    Otherwise we need to change the height when user clicks on button
+    Ref: https://stackoverflow.com/a/11837673
+*/
+
+.doc-phase-body {
+    display: block;
+    max-height: 1000px;
+    overflow: hidden;
+    padding-top: var(--dx-g-spacing-smd);
+    transition: max-height 0.25s ease, padding 0.25s ease;
+}
+
+.doc-phase-body-hidden {
+    max-height: 0;
+    padding-top: 0;
+    transition: max-height 0.1s ease-out, padding 0.25s ease-out;
+}
+
+.doc-phase-body a {
+    color: var(--dx-g-blue-vibrant-50);
+}
+
+/* Small Devices */
+@media screen and (max-width: 480px) {
+    .doc-phase-container {
+        padding: var(--doc-status-vertical-padding);
+    }
+}

package/src/modules/doc/phase/phase.html

@@ -0,0 +1,38 @@
+<template>
+    <div class={className} part="container">
+        <div class="doc-phase-title-container">
+            <dx-icon
+                class="doc-status-icon doc-phase-icon"
+                symbol={iconName}
+                size="large"
+                color="status-icon-color"
+            ></dx-icon>
+            <p class="doc-status-title doc-phase-title dx-text-body-3">
+                {docPhaseTitle}
+            </p>
+            <dx-button
+                lwc:if={dismissible}
+                aria-label="Dismiss"
+                icon-color="status-icon-color"
+                icon-size="large"
+                icon-symbol="close"
+                variant="icon-only"
+                onclick={onDismiss}
+            ></dx-button>
+            <dx-button
+                lwc:else
+                variant="inline"
+                onclick={onShowHide}
+                aria-label={hideBodyText}
+            >
+                {hideBodyText}
+            </dx-button>
+        </div>
+        <!--
+            NOTE: Here we are rendering mark up using lwc:dom & innerHTML
+            option instead of slots because the html markup will come as a
+            property to the component from a configuration
+        -->
+        <span lwc:dom="manual" class={bodyClassName}></span>
+    </div>
+</template>

package/src/modules/doc/phase/phase.ts

@@ -0,0 +1,93 @@
+import { LightningElement, api } from "lwc";
+import cx from "classnames";
+
+import { DocPhaseInfo } from "typings/custom";
+import { toJson, normalizeBoolean } from "dxUtils/normalizers";
+
+export default class Phase extends LightningElement {
+    _docPhaseInfo: DocPhaseInfo | null = null;
+    _dismissible = false;
+    _iconName = "recipe";
+
+    @api
+    get docPhaseInfo(): DocPhaseInfo | null {
+        return this._docPhaseInfo;
+    }
+
+    set docPhaseInfo(value) {
+        this._docPhaseInfo = toJson(value);
+    }
+
+    @api
+    get dismissible(): boolean {
+        return this._dismissible;
+    }
+
+    set dismissible(value) {
+        if (value) {
+            this._dismissible = normalizeBoolean(value);
+        }
+    }
+
+    @api
+    get iconName(): string {
+        return this._iconName;
+    }
+
+    set iconName(value) {
+        if (value) {
+            this._iconName = value;
+        }
+    }
+
+    isBodyHidden = false;
+
+    get docPhaseTitle() {
+        return this.docPhaseInfo?.title;
+    }
+
+    get hideBodyText() {
+        return this.isBodyHidden ? "Show" : "Hide";
+    }
+
+    get className() {
+        return cx(
+            "doc-status-base",
+            "doc-status-container",
+            "doc-phase-container"
+        );
+    }
+
+    get bodyClassName() {
+        return cx(
+            "doc-phase-body",
+            "dx-text-body-3",
+            this.isBodyHidden && "doc-phase-body-hidden"
+        );
+    }
+
+    renderedCallback() {
+        const phaseBodyContainer =
+            this.template.querySelector(".doc-phase-body");
+        if (phaseBodyContainer && this.docPhaseInfo) {
+            // eslint-disable-next-line @lwc/lwc/no-inner-html
+            phaseBodyContainer.innerHTML = this.docPhaseInfo.body;
+        }
+    }
+
+    onShowHide() {
+        this.isBodyHidden = !this.isBodyHidden;
+    }
+
+    onDismiss() {
+        this.dispatchEvent(
+            new CustomEvent("dismissphase", {
+                detail: {
+                    docPhaseInfo: this.docPhaseInfo
+                },
+                composed: true,
+                bubbles: true
+            })
+        );
+    }
+}

package/src/modules/doc/specificationContent/specificationContent.css

@@ -0,0 +1,3 @@
+@import "dxHelpers/reset";
+@import "dxHelpers/text";
+@import "dxHelpers/table";

package/src/modules/doc/specificationContent/specificationContent.html

@@ -0,0 +1,99 @@
+<template>
+    <div title="properties">
+        <template if:true={hasAttributes}>
+            <doc-heading
+                header="Attributes"
+                hash="attributes"
+                aria-level="2"
+            ></doc-heading>
+            <table>
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <template for:each={attributes} for:item="attribute">
+                        <tr key={attribute.name}>
+                            <td>{attribute.nameInKebabCase}</td>
+                            <td>{attribute.description}</td>
+                        </tr>
+                    </template>
+                </tbody>
+            </table>
+        </template>
+
+        <template if:true={hasMethods}>
+            <doc-heading
+                header="Methods"
+                hash="methods"
+                aria-level="2"
+            ></doc-heading>
+            <table>
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <template for:each={methods} for:item="method">
+                        <tr key={method.name}>
+                            <td>{method.nameInKebabCase}</td>
+                            <td>{method.description}</td>
+                        </tr>
+                    </template>
+                </tbody>
+            </table>
+        </template>
+
+        <template if:true={hasSlots}>
+            <doc-heading
+                header="Slots"
+                hash="slots"
+                aria-level="2"
+            ></doc-heading>
+            <table>
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <template for:each={slots} for:item="slot">
+                        <tr key={slot.name}>
+                            <td>{slot.nameInKebabCase}</td>
+                            <td>{slot.description}</td>
+                        </tr>
+                    </template>
+                </tbody>
+            </table>
+        </template>
+
+        <template if:true={hasEvents}>
+            <doc-heading
+                header="Events"
+                hash="events"
+                aria-level="2"
+            ></doc-heading>
+            <table>
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <template for:each={slots} for:item="slot">
+                        <tr key={slot.name}>
+                            <td>{slot.nameInKebabCase}</td>
+                            <td>{slot.description}</td>
+                        </tr>
+                    </template>
+                </tbody>
+            </table>
+        </template>
+    </div>
+</template>

package/src/modules/doc/specificationContent/specificationContent.ts

@@ -0,0 +1,56 @@
+import { LightningElement, track, api } from "lwc";
+
+export default class SpecificationContent extends LightningElement {
+    @track data: any;
+    @api component: string = "button";
+    @api type: string = "lightning";
+
+    private attributes = [];
+    private methods = [];
+    private slots = [];
+    private events = [];
+
+    connectedCallback() {
+        this.fetchPropertiesData();
+    }
+
+    async fetchPropertiesData() {
+        const url = `http://localhost:3002/get-properties?component=${this.component}&type=${this.type}`;
+
+        try {
+            const response = await fetch(url);
+
+            if (!response.ok) {
+                throw new Error(`Failed to fetch: ${response.statusText}`);
+            }
+
+            const result = await response.json();
+            this.data = result;
+            ({
+                attributes: this.attributes,
+                methods: this.methods,
+                slots: this.slots,
+                events: this.events
+            } = this.data);
+        } catch (error) {
+            this.data = {};
+            console.error("fetchPropertiesData() failed for:" + url);
+        }
+    }
+
+    get hasAttributes() {
+        return this.attributes;
+    }
+
+    get hasMethods() {
+        return this.methods;
+    }
+
+    get hasSlots() {
+        return this.slots;
+    }
+
+    get hasEvents() {
+        return this.events;
+    }
+}

package/src/modules/doc/sprigSurvey/sprigSurvey.html

@@ -0,0 +1,20 @@
+<template lwc:render-mode="light">
+    <dx-hr no-padding spacing="md"></dx-hr>
+    <div class="survey-container">
+        <div class="text-container">
+            <b>DID THIS ARTICLE SOLVE YOUR ISSUE?</b>
+            <br />
+            Let us know so we can improve!
+        </div>
+        <div class="btn-container">
+            <dx-button
+                variant="secondary"
+                aria-label="Share Your Feedback"
+                onclick={openSurvey}
+            >
+                Share your feedback
+            </dx-button>
+        </div>
+    </div>
+    <dx-hr no-padding spacing="md"></dx-hr>
+</template>

package/src/modules/doc/sprigSurvey/sprigSurvey.scoped.css

@@ -0,0 +1,16 @@
+:host .survey-container {
+    align-items: center;
+    align-content: center;
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    margin: 20px 0;
+}
+
+dx-hr:first-of-type::part(hr) {
+    margin-top: var(--dx-g-spacing-2xl);
+}
+
+.text-container {
+    width: 100%;
+}

package/src/modules/doc/sprigSurvey/sprigSurvey.ts

@@ -0,0 +1,16 @@
+import { LightningElement } from "lwc";
+import cx from "classnames";
+
+declare const Sprig: (eventType: string, eventNme: string) => void;
+
+export default class Phase extends LightningElement {
+    static renderMode = "light";
+
+    get className() {
+        return cx("container");
+    }
+
+    openSurvey() {
+        Sprig("track", "ProvideFeedback");
+    }
+}

package/src/modules/doc/toc/toc.ts

@@ -11,7 +11,7 @@ export default class Toc extends LightningElement {
         const newPageReference = { ...this.pageReference };
         // When moving to the new navigation component
         //const target = event.detail.name.split('-')
-        const target = event.currentTarget.dataset.id.split("-");
+        const target = (event.currentTarget as any).dataset.id.split("-");
         newPageReference.contentDocumentId = target[0] + ".htm";
         newPageReference.hash = target[1];
         this.dispatchEvent(