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

package/src/modules/doc/contentLayout/contentLayout.css

@@ -0,0 +1,131 @@
+:host {
+    --dx-c-content-vertical-spacing: var(--dx-g-spacing-lg);
+    --dx-c-content-sidebar-sticky-top: calc(
+        var(--dx-g-global-header-height) + var(--dx-g-doc-header-height)
+    );
+    --dx-c-sidebar-height: calc(
+        100vh -
+            calc(
+                var(--dx-g-global-header-height) + var(--dx-g-doc-header-height)
+            )
+    );
+    --dx-c-content-scroll-margin-top: calc(
+        var(--dx-g-global-header-height) + var(--dx-g-doc-header-height) +
+            var(--dx-g-spacing-2xl)
+    );
+
+    display: block;
+}
+
+doc-breadcrumbs {
+    --dx-c-popover-z-index: 5;
+
+    display: block;
+    margin-bottom: var(--dx-g-spacing-2xl);
+}
+
+dx-sidebar,
+dx-sidebar-old {
+    --dx-c-sidebar-vertical-padding: var(--dx-g-spacing-md);
+
+    z-index: calc(var(--dx-g-z-index-100) + 5);
+}
+
+dx-toc {
+    --dx-c-toc-width: unset;
+
+    height: calc(100% - var(--dx-c-content-vertical-spacing) * 2);
+    margin: var(--dx-c-content-vertical-spacing) 0;
+    overflow-y: auto;
+}
+
+dx-sidebar,
+dx-toc {
+    display: block;
+}
+
+/* offset page jump link due to fixed header */
+::slotted(doc-heading) {
+    scroll-margin-top: var(--dx-c-content-scroll-margin-top);
+}
+
+.content {
+    display: flex;
+    position: relative;
+}
+
+.content-body-doc-phase-container {
+    flex: 1;
+    border-left: 1px solid var(--dx-g-gray-90);
+}
+
+.content-body-container {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    max-width: var(--dx-g-doc-content-max-width);
+
+    /* Derived this manually by substracting (topHeader, doc header, banner and the content). */
+    min-height: 62vh;
+    margin: auto;
+    padding: 0 var(--dx-g-global-header-padding-horizontal);
+    margin-bottom: calc(2 * (var(--dx-g-spacing-5xl) + 4px));
+}
+
+.content-body {
+    margin: var(--dx-g-spacing-md) 0 0;
+    max-width: 900px;
+    flex: 1;
+    width: 0;
+}
+
+.is-sticky {
+    align-self: flex-start;
+    position: sticky;
+    top: var(--dx-c-content-sidebar-sticky-top);
+}
+
+.right-nav-bar {
+    margin-left: var(--dx-g-spacing-2xl);
+}
+
+@media screen and (max-width: 1024px) {
+    .right-nav-bar {
+        display: none;
+    }
+}
+
+@media screen and (max-width: 800px) {
+    .content-body {
+        margin-top: var(--dx-c-content-vertical-spacing);
+    }
+
+    .content-body-doc-phase-container {
+        border-left: 0;
+    }
+}
+
+@media screen and (max-width: 768px) {
+    .is-sticky {
+        width: 100%;
+    }
+
+    .content {
+        flex-direction: column;
+    }
+
+    .content-body-container {
+        padding-right: 0;
+        overflow-x: auto;
+        margin-bottom: calc(var(--dx-g-spacing-5xl) + 4px);
+    }
+
+    .left-nav-bar {
+        height: unset;
+    }
+
+    .content-body {
+        margin-left: var(--dx-g-spacing-mlg, 20px);
+        margin-right: var(--dx-g-spacing-mlg, 20px);
+    }
+}

package/src/modules/doc/contentLayout/contentLayout.html

@@ -0,0 +1,64 @@
+<template>
+    <div class="content">
+        <template lwc:if={useOldSidebar}>
+            <dx-sidebar-old
+                class="is-sticky left-nav-bar"
+                trees={sidebarContent}
+                value={sidebarValue}
+                header={sidebarHeader}
+                ontogglesidebar={onToggleSidebar}
+                languages={languages}
+                language={language}
+                bail-href={bailHref}
+                bail-label={bailLabel}
+            >
+                <slot name="sidebar-header" slot="version-picker"></slot>
+            </dx-sidebar-old>
+        </template>
+        <template lwc:else>
+            <dx-sidebar
+                class="is-sticky left-nav-bar"
+                trees={sidebarContent}
+                value={sidebarValue}
+                header={sidebarHeader}
+                coveo-organization-id={coveoOrganizationId}
+                coveo-public-access-token={coveoPublicAccessToken}
+                coveo-search-hub={coveoSearchHub}
+                coveo-advanced-query-config={coveoAdvancedQueryConfig}
+                ontogglesidebar={onToggleSidebar}
+                languages={languages}
+                language={language}
+                bail-href={bailHref}
+                bail-label={bailLabel}
+            >
+                <slot name="sidebar-header" slot="version-picker"></slot>
+            </dx-sidebar>
+        </template>
+        <div class="content-body-doc-phase-container">
+            <slot name="doc-phase"></slot>
+            <slot name="version-banner"></slot>
+            <div class="content-body-container">
+                <div class="content-body">
+                    <doc-breadcrumbs
+                        lwc:if={showBreadcrumbs}
+                        breadcrumbs={breadcrumbs}
+                    ></doc-breadcrumbs>
+                    <slot onslotchange={onSlotChange}></slot>
+                    <doc-sprig-survey
+                        lwc:if={shouldDisplayFeedback}
+                    ></doc-sprig-survey>
+                </div>
+                <div lwc:if={showToc} class="right-nav-bar is-sticky">
+                    <dx-toc
+                        header={tocTitle}
+                        options={tocOptions}
+                        value={tocValue}
+                    ></dx-toc>
+                </div>
+            </div>
+            <div lwc:if={showFooter} class="footer-container">
+                <dx-footer variant="no-signup"></dx-footer>
+            </div>
+        </div>
+    </div>
+</template>