@salesforcedevs/docs-components 0.54.5 → 0.54.7-docs-locales2

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/docs-components",
-    "version": "0.54.5",
+    "version": "0.54.7-docs-locales2",
     "description": "Docs Lightning web components for DSC",
     "license": "MIT",
     "main": "index.js",

package/src/modules/doc/breadcrumbs/breadcrumbs.ts

@@ -1,5 +1,5 @@
 import { LightningElement, api } from "lwc";
-import { Breadcrumb, Option } from "typings/custom";
+import { Breadcrumb, OptionWithLink } from "typings/custom";
 import { toJson } from "dxUtils/normalizers";
 
 type BreadcrumbConfig = {
@@ -62,7 +62,7 @@ export default class Breadcrumbs extends LightningElement {
     private get renderDropdown(): boolean {
         return this.hasInternalBreadcrumbs && !!this.dropdownOptionAmount;
     }
-    private get dropdownOptions(): Option[] {
+    private get dropdownOptions(): OptionWithLink[] {
         return this.breadcrumbs!.slice(1, this.dropdownOptionAmount! + 1).map(
             (link) => ({
                 id: link.href!,

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

@@ -66,31 +66,47 @@ td > img.content-image:first-child:last-child[alt="No"] {
 
 h1 {
     font-family: var(--dx-g-font-display);
-    font-size: 40px;
+    font-size: var(--dx-g-text-4xl);
 
     /* not registered */
     color: var(--dx-g-blue-vibrant-20);
     letter-spacing: -0.4px;
-    line-height: 40px;
+    line-height: 56px;
 }
 
 h2 {
     font-family: var(--dx-g-font-display);
-    font-size: var(--dx-g-text-xl);
+    font-size: var(--dx-g-text-3xl);
     color: var(--dx-g-blue-vibrant-20);
     letter-spacing: -0.1px;
-    line-height: var(--dx-g-spacing-lg);
+    line-height: var(--dx-g-spacing-3xl);
 }
 
 h3 {
     font-family: var(--dx-g-font-display);
-    font-size: var(--dx-g-text-lg);
+    font-size: 32px;
     color: var(--dx-g-blue-vibrant-20);
     letter-spacing: -0.1px;
-    line-height: var(--dx-g-spacing-lg);
+    line-height: var(--dx-g-spacing-2xl);
 }
 
 h4 {
+    font-family: var(--dx-g-font-display);
+    font-size: var(--dx-g-text-xl);
+    color: var(--dx-g-blue-vibrant-20);
+    letter-spacing: 0;
+    line-height: var(--dx-g-spacing-xl);
+}
+
+h5 {
+    font-family: var(--dx-g-font-display);
+    font-size: var(--dx-g-text-lg);
+    color: var(--dx-g-blue-vibrant-20);
+    letter-spacing: 0;
+    line-height: 28px;
+}
+
+h6 {
     font-family: var(--dx-g-font-display);
     font-size: var(--dx-g-text-base);
     color: var(--dx-g-blue-vibrant-20);
@@ -116,6 +132,12 @@ p,
     margin-bottom: var(--dx-g-spacing-md);
 }
 
+dd > p,
+dd > .p {
+    margin-top: 0;
+    margin-bottom: 0;
+}
+
 .li {
     font-family: var(--dx-g-font-sans);
     font-size: var(--dx-g-text-base);
@@ -175,7 +197,8 @@ a,
     margin-right: var(--dx-g-spacing-lg);
 }
 
-.codeph {
+.codeph,
+.filepath {
     font-family: var(--dx-g-font-mono);
     font-size: var(--dx-g-text-sm);
     line-height: var(--dx-g-text-lg);
@@ -239,6 +262,7 @@ dd {
     letter-spacing: 0;
     line-height: var(--dx-g-spacing-lg);
     margin-left: var(--dx-g-spacing-smd);
+    margin-bottom: var(--dx-g-spacing-md);
 }
 
 li {

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

@@ -1,6 +1,6 @@
 import { api } from "lwc";
 import cx from "classnames";
-import type { Option } from "typings/custom";
+import type { OptionWithNested, OptionWithLink } from "typings/custom";
 import { HeaderBase } from "dxBaseElements/headerBase";
 import { toJson } from "dxUtils/normalizers";
 import get from "lodash.get";
@@ -43,8 +43,8 @@ export default class Header extends HeaderBase {
     }
 
     private _language: string | null = null;
-    private _languages!: Option[];
-    private _scopedNavItems!: Option[];
+    private _languages!: OptionWithLink[];
+    private _scopedNavItems!: OptionWithNested[];
     private smallMobile = false;
     private smallMobileMatchMedia!: MediaQueryList;
     private tablet = false;

package/src/modules/doc/xmlContent/types.ts

@@ -21,12 +21,6 @@ export enum HistoryState {
     REPLACE_STATE = "replaceState"
 }
 
-export type Labels = {
-    language_english: string;
-    language_japanese: string;
-    toc_title: string;
-};
-
 export type TreeNode = {
     label: string;
     name: string;

package/src/modules/doc/xmlContent/utils.ts

@@ -8,22 +8,18 @@ import {
     DocumentData,
     DocLanguage,
     DocVersion,
-    Labels,
     TreeNode
 } from "./types";
-
-const LOCALE_TO_LABEL = {
-    "en-us": "language_english",
-    "ja-jp": "language_japanese"
-};
+import { Language } from "typings/custom";
+import { getLanguageDisplayTextById } from "dxUtils/language";
 
 export class FetchContent {
     private apiDomain: string;
-    private labels: Labels;
+    private languages: Array<Language> = [];
 
-    constructor(apiDomain: string, labels: Labels) {
+    constructor(apiDomain: string, languages: Array<Language>) {
         this.apiDomain = apiDomain;
-        this.labels = labels;
+        this.languages = languages;
     }
 
     async fetchDocumentData(docId: string): Promise<DocumentData | null> {
@@ -148,11 +144,10 @@ export class FetchContent {
     }
 
     private normalizeLanguage(language: ApiDocLanguage): DocLanguage {
-        const labelKey = language.locale && LOCALE_TO_LABEL[language.locale];
+
         return (
             language && {
-                label:
-                    (labelKey && this.labels && this.labels[labelKey]) ||
+                label: getLanguageDisplayTextById(this.languages, language.locale) || 
                     language.label,
                 id: language.locale,
                 code: language.code,

package/src/modules/doc/xmlContent/xmlContent.ts

@@ -1,11 +1,9 @@
 import { api, track } from "lwc";
-import { toJson } from "dxUtils/normalizers";
 import { FetchContent } from "./utils";
 import {
     CoveoAdvancedQueryXMLConfig,
     DocLanguage,
     DocVersion,
-    Labels,
     TreeNode,
     Header,
     HistoryState,
@@ -13,6 +11,8 @@ import {
 } from "./types";
 import { SearchSyncer } from "docUtils/SearchSyncer";
 import { LightningElementWithState } from "docBaseElements/lightningElementWithState";
+import { Language } from "typings/custom";
+import { DEFAULT_LANGUAGES } from "dxUtils/constants";
 
 // TODO: Imitating from actual implementation as doc-content use it like this. We should refactor it later.
 const handleContentError = (error): void => console.log(error);
@@ -27,15 +27,16 @@ export default class DocXmlContent extends LightningElementWithState<{
     @api coveoPublicAccessToken!: string;
 
     @api
-    get labels() {
-        return this._labels;
+    get allLanguages(): Array<Language> {
+        return this._allLanguages;
     }
 
-    set labels(value) {
-        this._labels = toJson(value);
+    set allLanguages(value: string) {
+        if (value) {
+            this._allLanguages = JSON.parse(value);
+        }
     }
 
-    private _labels: Labels = null;
     private availableLanguages: Array<DocLanguage> = [];
     private availableVersions: Array<DocVersion> = [];
     private contentProvider: FetchContent;
@@ -87,6 +88,7 @@ export default class DocXmlContent extends LightningElementWithState<{
         shouldStopPropagation: true,
         target: window
     });
+    private _allLanguages: Array<Language> = DEFAULT_LANGUAGES;
 
     @track private pageReference: PageReference = {};
 
@@ -109,8 +111,10 @@ export default class DocXmlContent extends LightningElementWithState<{
             window.location.href = "/docs";
             return;
         }
-
-        this.contentProvider = new FetchContent(this.apiDomain, this._labels);
+        this.contentProvider = new FetchContent(
+            this.apiDomain,
+            this.allLanguages
+        );
         this.fetchDocument().then(() => (this.loaded = true));
         window.addEventListener("popstate", this.handlePopState);
 
@@ -404,7 +408,11 @@ export default class DocXmlContent extends LightningElementWithState<{
             this.addMetatags();
 
             if (!this.pageReference.hash) {
-                window.scrollTo(0, 0);
+                document.querySelector("main")?.scrollIntoView({
+                    behavior: "smooth",
+                    block: "start",
+                    inline: "nearest"
+                });
             }
         }
         this.setState({