@salesforcedevs/docs-components 0.7.59-sppage-alpha2 → 0.7.76-alpha

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

@@ -1,131 +1,35 @@
-: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)
-    );
+@import "docHelpers/contentLayoutStyle";
 
-    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);
+/* New Theme Test Styles */
+@keyframes scroll-text {
+    0% {
+        transform: translateX(100%);
     }
 
-    .content-body-doc-phase-container {
-        border-left: 0;
+    100% {
+        transform: translateX(-100%);
     }
 }
 
-@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;
-    }
+.new-theme-test {
+    background: linear-gradient(135deg, #d4cd00 0%, #83d400 50%, #19a700 100%);
+    color: white;
+    padding: 12px 24px;
+    margin: 0 var(--dx-g-global-header-padding-horizontal, 24px);
+    margin-top: var(--dx-g-spacing-md, 16px);
+    font-weight: 600;
+    font-size: 16px;
+    box-shadow: 0 4px 12px rgb(4 212 0 / 30%);
+    overflow: hidden;
+    white-space: nowrap;
+    border-radius: 8px;
+    text-align: center;
+    max-width: var(--dx-g-doc-content-max-width);
+    margin-left: auto;
+    margin-right: auto;
+}
 
-    .content-body {
-        margin-left: var(--dx-g-spacing-mlg, 20px);
-        margin-right: var(--dx-g-spacing-mlg, 20px);
-    }
+.new-theme-banner span {
+    display: inline-block;
+    animation: scroll-text 10s linear infinite;
 }

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

@@ -1,48 +1,54 @@
 <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>
+        <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}
+            dev-center={devCenter}
+            brand={brand}
+            empty-state-message={emptyStateMessage}
+        >
+            <slot name="sidebar-header" slot="version-picker"></slot>
+        </dx-sidebar-old>
         <div class="content-body-doc-phase-container">
-            <slot name="doc-phase"></slot>
-            <slot name="version-banner"></slot>
+            <div class="doc-phase-wrapper">
+                <slot name="doc-phase"></slot>
+            </div>
+            <div class="version-wrapper">
+                <slot name="version-banner"></slot>
+            </div>
+            <div class="new-theme-test">
+                <span>
+                    ✨ SFDocs is Awesome 🥰 New Theme Update inside Component!!
+                </span>
+            </div>
             <div class="content-body-container">
                 <div class="content-body">
                     <doc-breadcrumbs
                         lwc:if={showBreadcrumbs}
                         breadcrumbs={breadcrumbs}
                     ></doc-breadcrumbs>
+                    <div class="read" lwc:if={showReadingTime}>
+                        <svg
+                            xmlns="http://www.w3.org/2000/svg"
+                            width="18"
+                            height="18"
+                            viewBox="0 0 52 52"
+                        >
+                            <g fill="#3e3e3c">
+                                <path
+                                    d="m26 2c-13.2 0-24 10.8-24 24s10.8 24 24 24 24-10.8 24-24-10.8-24-24-24z m0 42c-9.9 0-18-8.1-18-18s8.1-18 18-18 18 8.1 18 18-8.1 18-18 18z m3.4-17.8c-0.3-0.3-0.4-0.7-0.4-1.1v-9.6c0-0.8-0.7-1.5-1.5-1.5h-3c-0.8 0-1.5 0.7-1.5 1.5v12.1c0 0.4 0.2 0.8 0.4 1.1l7.4 7.4c0.6 0.6 1.5 0.6 2.1 0l2.1-2.1c0.6-0.6 0.6-1.5 0-2.1l-5.6-5.7z"
+                                ></path>
+                            </g>
+                        </svg>
+                        {readingTime} minute read
+                    </div>
                     <slot onslotchange={onSlotChange}></slot>
                     <doc-sprig-survey
                         lwc:if={shouldDisplayFeedback}