@salesforcedevs/docs-components 1.3.104-alpha03 → 1.3.105-image-resizing-1

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/docs-components",
-    "version": "1.3.104-alpha03",
+    "version": "1.3.105-image-resizing-1",
     "description": "Docs Lightning web components for DSC",
     "license": "MIT",
     "main": "index.js",

package/src/modules/doc/content/content.css

@@ -7,6 +7,7 @@
 @import "dxHelpers/text";
 @import "dxHelpers/reset";
 @import "dxHelpers/table";
+@import "docHelpers/imgStyle";
 
 .doc-content {
     width: 100%;
@@ -49,8 +50,6 @@ img.content-image {
     margin-top: var(--dx-g-spacing-lg);
     margin-bottom: var(--dx-g-spacing-sm);
     display: block;
-    margin-left: auto;
-    margin-right: auto;
 }
 
 td > img.content-image:first-child:last-child[alt="Yes"],
@@ -111,6 +110,10 @@ h6 {
     margin: var(--dx-g-spacing-sm) 0 var(--dx-g-spacing-sm) 0;
 }
 
+img {
+    image-rendering: -webkit-optimize-contrast;
+}
+
 p,
 .p {
     font-family: var(--dx-g-font-sans);
@@ -366,13 +369,30 @@ ul ul ul ul ul ul {
     margin: var(--dx-g-spacing-lg) 0;
 }
 
-figure {
+figure,
+.fig {
     margin: var(--dx-g-spacing-lg) 0;
+    text-align: left;
+    display: flex;
+    flex-direction: column;
+    align-items: left;
+    justify-content: left;
 }
 
-figcaption {
+figcaption,
+.figcap {
+    display: block;
     font-size: var(--dx-g-text-xs);
-    margin-top: var(--dx-g-spacing-sm);
+    margin: var(--dx-g-spacing-sm) 0;
+    order: 2;
+}
+
+.figcap .image {
+    order: 1;
+}
+
+.fig.fig-centered {
+    text-align: center;
 }
 
 code,

package/src/modules/doc/content/content.ts

@@ -253,6 +253,7 @@ export default class Content extends LightningElement {
                 const label = mediaEl.getAttribute("label");
                 const width = mediaEl.getAttribute("width");
                 const height = mediaEl.getAttribute("height");
+                const className = mediaEl.getAttribute("class");
 
                 if (isImage) {
                     src = src.startsWith("/")
@@ -277,8 +278,11 @@ export default class Content extends LightningElement {
                     if (width) {
                         img.width = parseFloat(width);
                     }
+                    if (className) {
+                        img.className = className;
+                    }
 
-                    img.className = "content-image";
+                    img.className = `content-image ${img.className}`;
                     mediaEl.parentNode!.insertBefore(img, mediaEl);
                 } else {
                     const contentMediaEl = createElement("doc-content-media", {
@@ -324,9 +328,8 @@ export default class Content extends LightningElement {
         event.preventDefault();
         // eslint-disable-next-line no-use-before-define
         const target = event.currentTarget.dataset.id;
-        const [page, docId, deliverable, tempContentDocumentId] = target.split(
-            "/"
-        );
+        const [page, docId, deliverable, tempContentDocumentId] =
+            target.split("/");
         const [contentDocumentId, hash] = tempContentDocumentId.split("#");
         const newPageReference = {
             page: page,

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

@@ -43,14 +43,12 @@ dx-toc {
 .content-body-container {
     display: flex;
     flex-direction: row;
-    justify-content: center;
-    max-width: var(--dx-g-doc-content-max-width);
-    margin: auto;
-    padding: 0 var(--dx-g-header-padding-horizontal);
+    padding-right: var(--dx-g-page-padding-horizontal);
 }
 
 .content-body {
-    margin: var(--dx-g-spacing-sm) 0 var(--dx-g-spacing-xl);
+    margin: var(--dx-g-spacing-sm) var(--dx-c-content-vertical-spacing)
+        var(--dx-g-spacing-xl);
     flex: 1;
     width: 0;
 }
@@ -58,11 +56,11 @@ dx-toc {
 .is-sticky {
     height: 100vh;
     position: sticky;
-    top: 135px;
+    top: 0;
 }
 
 .right-nav-bar {
-    margin-left: var(--dx-c-content-vertical-spacing);
+    max-width: 275px;
 }
 
 @media screen and (max-width: 1024px) {

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

@@ -37,8 +37,9 @@
                         if:true={shouldDisplayFeedback}
                     ></doc-sprig-survey>
                 </div>
-                <div if:true={showToc} class="right-nav-bar is-sticky">
+                <div class="right-nav-bar is-sticky">
                     <dx-toc
+                        if:true={showToc}
                         title={tocTitle}
                         options={tocOptions}
                         value={tocValue}

package/src/modules/doc/header/header.css

@@ -82,7 +82,7 @@ header:not(.has-brand) > .header_l2 {
 
     .header_l2_group-title {
         margin-right: 0;
-        padding: var(--dx-g-spacing-smd) var(--dx-g-header-padding-horizontal);
+        padding: var(--dx-g-spacing-smd) var(--dx-g-page-padding-horizontal);
     }
 
     .header_l2_group-title .header_lang-dropdown {

package/src/modules/doc/header/header.html

@@ -6,6 +6,77 @@
                 if:true={showBanner}
                 banner-markup={bannerMarkup}
             ></dx-banner>
+            <div class="header_l1">
+                <div if:true={showMenuButton} class="nav_menu-ctas">
+                    <dx-button
+                        aria-label="Menu Button"
+                        class="nav_menu-button"
+                        icon-size="large"
+                        icon-symbol={mobileMenuIconSymbol}
+                        variant="tertiary"
+                        onclick={toggleMobileNavMenu}
+                    ></dx-button>
+                </div>
+                <dx-logo label={title}></dx-logo>
+                <dx-header-nav
+                    if:true={showDesktopNavItems}
+                    aria-label="Global Navigation Bar"
+                    nav-items={navItems}
+                    onrequestopennavmenu={onRequestOpenNavMenu}
+                    pathname={pathname}
+                    variant="small"
+                ></dx-header-nav>
+                <div class="header-cta-container">
+                    <dx-header-search
+                        if:true={hasSearch}
+                        coveo-organization-id={coveoOrganizationId}
+                        coveo-public-access-token={coveoPublicAccessToken}
+                        coveo-search-pipeline={coveoSearchPipeline}
+                        coveo-search-hub={coveoSearchHub}
+                        mobile={tablet}
+                        onstatechange={handleStateChange}
+                    ></dx-header-search>
+                </div>
+                <div
+                    if:true={showTbidLogin}
+                    class="header-tbid-login"
+                    onclick={closeMobileNavMenu}
+                >
+                    <dw-tbid-login-menu
+                        tbid-api-base-url={tbidApiBaseUrl}
+                        tbid-base-url={tbidBaseUrl}
+                    ></dw-tbid-login-menu>
+                </div>
+                <div if:true={showSignup} class="header-login-signup">
+                    <dx-button
+                        aria-label="Browse Trials"
+                        size="small"
+                        href={signupLink}
+                        onclick={handleSignUpClick}
+                    >
+                        Browse Trials
+                    </dx-button>
+                </div>
+                <dx-header-mobile-nav-menu
+                    if:true={hasNavItems}
+                    nav-items={navItems}
+                    open={showMobileNavMenu}
+                    pathname={pathname}
+                    value={mobileNavMenuValue}
+                    onchange={onMobileNavMenuChange}
+                    onrequestclose={closeMobileNavMenu}
+                >
+                    <dx-button
+                        aria-label={bailLabel}
+                        if:true={hasBailLink}
+                        href={bailHref}
+                        variant="tertiary"
+                        icon-symbol="new_window"
+                    >
+                        {bailLabel}
+                    </dx-button>
+                </dx-header-mobile-nav-menu>
+            </div>
             <div class="header_l2">
                 <div class="header_l2_group header_l2_group-title">
                     <a href={headerHref} class="home-link">

package/src/modules/doc/header/header.ts

@@ -59,6 +59,20 @@ export default class Header extends HeaderBase {
         return this.scopedNavItems && this.scopedNavItems.length > 0;
     }
 
+    private get showDesktopNavItems(): boolean {
+        return !this.mobile && this.hasNavItems;
+    }
+
+    private get showTbidLogin(): boolean {
+        return this.showSignup;
+    }
+
+    private get showSignup(): boolean {
+        return this.signupLink
+            ? (this.tablet && !this.isSearchOpen) || !this.tablet
+            : false;
+    }
+
     private get hasLanguages(): boolean {
         return !!(this.languages && this.languages.length);
     }
@@ -77,6 +91,10 @@ export default class Header extends HeaderBase {
         );
     }
 
+    private get showMenuButton(): boolean {
+        return this.mobile && this.hasNavItems;
+    }
+
     connectedCallback(): void {
         super.connectedCallback();
         this.tabletMatchMedia = window.matchMedia(

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

@@ -5,15 +5,9 @@
 .doc-phase-container {
     display: flex;
     flex-direction: column;
-    align-items: center;
-    padding-left: var(--dx-g-header-padding-horizontal);
-    padding-right: var(--dx-g-header-padding-horizontal);
+    padding-left: var(--dx-g-spacing-3xl);
+    padding-right: var(--dx-g-spacing-3xl);
     width: 100%;
-    border: none;
-}
-
-.max-width-container {
-    max-width: var(--dx-g-doc-content-max-width);
 }
 
 .doc-phase-title-container {
@@ -37,7 +31,6 @@ dx-button {
 */
 
 .doc-phase-body {
-    display: block;
     max-height: 1000px;
     overflow: hidden;
     padding-top: var(--dx-g-spacing-smd);

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

@@ -1,30 +1,28 @@
 <template>
     <div class={className} part="container">
-        <div class="max-width-container">
-            <div class="doc-phase-title-container">
-                <dx-icon
-                    class="doc-status-icon doc-phase-icon"
-                    symbol="recipe"
-                    size="large"
-                    color="status-icon-color"
-                ></dx-icon>
-                <p class="doc-status-title doc-phase-title dx-text-body-3">
-                    {docPhaseTitle}
-                </p>
-                <dx-button
-                    variant="inline"
-                    onclick={onButtonClick}
-                    aria-label={hideBodyText}
-                >
-                    {hideBodyText}
-                </dx-button>
-            </div>
-            <!--
+        <div class="doc-phase-title-container">
+            <dx-icon
+                class="doc-status-icon doc-phase-icon"
+                symbol="recipe"
+                size="large"
+                color="status-icon-color"
+            ></dx-icon>
+            <p class="doc-status-title doc-phase-title dx-text-body-3">
+                {docPhaseTitle}
+            </p>
+            <dx-button
+                variant="inline"
+                onclick={onButtonClick}
+                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>
+        <span lwc:dom="manual" class={bodyClassName}></span>
     </div>
 </template>

package/src/modules/docHelpers/imgStyle/imgStyle.css

@@ -0,0 +1,58 @@
+.content-image.image-framed {
+    border: 1px solid black;
+}
+
+.content-image.image-framed-light {
+    border: 1px solid var(--dx-g-gray-90);
+}
+
+.content-image.image-xxl,
+.content-image.image-full {
+    max-width: 1000px;
+    width: 100%;
+}
+
+.content-image.image-xl {
+    max-width: 750px;
+    width: 100%;
+}
+
+.content-image.image-lg {
+    max-width: 660px;
+    width: 100%;
+}
+
+.content-image.image-md {
+    max-width: 500px;
+    width: 100%;
+}
+
+.content-image.image-sm {
+    max-width: 330px;
+    width: 100%;
+}
+
+.content-image.image-xs {
+    max-width: 250px;
+    width: 100%;
+}
+
+.content-image.image-xxs {
+    max-width: 125px;
+    width: 100%;
+}
+
+.content-image.image-icon-lg {
+    max-width: 32px;
+    width: 100%;
+}
+
+.content-image.image-icon-md {
+    max-width: 20px;
+    width: 100%;
+}
+
+.content-image.image-icon-sm {
+    max-width: 16px;
+    width: 100%;
+}