@salesforcedevs/docs-components 1.3.320-dc1 → 1.3.323

package/lwc.config.json

@@ -7,7 +7,6 @@
     "expose": [
         "doc/amfReference",
         "doc/breadcrumbs",
-        "doc/component",
         "doc/content",
         "doc/contentCallout",
         "doc/contentLayout",
@@ -18,7 +17,6 @@
         "doc/headingAnchor",
         "doc/overview",
         "doc/phase",
-        "doc/styledOrderedList",
         "doc/versionPicker",
         "doc/xmlContent",
         "docUtils/utils"

package/package.json

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

package/src/modules/doc/contentCallout/contentCallout.html

@@ -12,7 +12,7 @@
 
         <div class="dx-callout-content">
             <p class="doc-status-title dx-callout-title dx-text-body-3">
-                {title}
+                {header}
             </p>
             <span class="dx-callout-body dx-text-body-3">
                 <slot onslotchange={onSlotChange}></slot>

package/src/modules/doc/contentCallout/contentCallout.ts

@@ -3,7 +3,7 @@ import cx from "classnames";
 import { CalloutVariant, LightningSlotElement } from "typings/custom";
 
 export default class ContentCallout extends LightningElement {
-    @api title!: string;
+    @api header!: string;
     @api variant!: CalloutVariant;
     cardVariant?: string;
     iconName?: string;

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

@@ -50,7 +50,7 @@
                 </div>
                 <div lwc:if={showToc} class="right-nav-bar is-sticky">
                     <dx-toc
-                        title={tocTitle}
+                        header={tocTitle}
                         options={tocOptions}
                         value={tocValue}
                     ></dx-toc>

package/src/modules/doc/contentLayout/contentLayout.ts

@@ -343,8 +343,10 @@ export default class ContentLayout extends LightningElement {
                 );
 
             for (const headingElement of headingElements as any) {
-                // Sometimes elements hash is not being set when slot content is wrapped with div
+                // Sometimes elements hash and header is not being set when slot content is wrapped with div
                 headingElement.hash = headingElement.attributes.hash?.nodeValue;
+                headingElement.header =
+                    headingElement.attributes.header?.nodeValue;
             }
 
             const tocOptions = [];
@@ -361,7 +363,7 @@ export default class ContentLayout extends LightningElement {
                     const tocItem = {
                         anchor: `#${headingElement.hash}`,
                         id: headingElement.id,
-                        label: headingElement.title
+                        label: headingElement.header
                     };
                     tocOptions.push(tocItem);
                     this.tocOptionIdsSet.add(headingElement.id);

package/src/modules/doc/heading/heading.html

@@ -1,14 +1,14 @@
 <template>
     <h1 class={className} if:true={isAriaLevelOne}>
-        <doc-heading-content title={title} hash={hash}></doc-heading-content>
+        <doc-heading-content header={header} hash={hash}></doc-heading-content>
     </h1>
     <h2 class={className} if:true={isAriaLevelTwo}>
-        <doc-heading-content title={title} hash={hash}></doc-heading-content>
+        <doc-heading-content header={header} hash={hash}></doc-heading-content>
     </h2>
     <h3 class={className} if:true={isAriaLevelThree}>
-        <doc-heading-content title={title} hash={hash}></doc-heading-content>
+        <doc-heading-content header={header} hash={hash}></doc-heading-content>
     </h3>
     <h4 class={className} if:true={isAriaLevelFour}>
-        <doc-heading-content title={title} hash={hash}></doc-heading-content>
+        <doc-heading-content header={header} hash={hash}></doc-heading-content>
     </h4>
 </template>

package/src/modules/doc/heading/heading.ts

@@ -13,7 +13,7 @@ export const displayLevels = Object.values(ariaDisplayLevels);
 
 // @ts-ignore: Really Dark Magic (TM) to do with ariaLevel needing explicit getter/setters
 export default class Heading extends LightningElement {
-    @api title: string = "";
+    @api header: string = "";
     @api hash: string | null = null;
 
     @api

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

@@ -6,7 +6,7 @@ export default class HeadingAnchor extends LightningElement {
     @api iconSize?: IconSize = "override";
     @api iconSprite?: IconSprite = "utility";
     @api iconSymbol?: IconSymbol;
-    @api title: string = "";
+    @api header: string = "";
     @api urlText: string = "";
 
     label: string = "Copy link to clipboard";
@@ -22,7 +22,7 @@ export default class HeadingAnchor extends LightningElement {
         }, 2000);
 
         try {
-            if (this.title && this.urlText) {
+            if (this.header && this.urlText) {
                 const [hostUrl] = window.location.href.split("#");
                 const url = `${hostUrl}#${this.urlText}`;
                 await navigator.clipboard.writeText(url);

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

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

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

@@ -1,7 +1,7 @@
 import { LightningElement, api } from "lwc";
 
 export default class HeadingContent extends LightningElement {
-    @api title: string = "";
+    @api header: string = "";
     @api hash: string | null = null;
 
     label: string = "Copy link to clipboard";
@@ -18,7 +18,7 @@ export default class HeadingContent extends LightningElement {
         }, 2000);
 
         try {
-            if (this.title && this.hash) {
+            if (this.header && this.hash) {
                 const [hostUrl] = window.location.href.split("#");
                 const url = `${hostUrl}#${this.hash}`;
                 await navigator.clipboard.writeText(url);

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

@@ -10,7 +10,7 @@
                 <div class="content">
                     <dx-group-text
                         class="description"
-                        title={title}
+                        header={header}
                         body={description}
                         size="large"
                         title-aria-level="1"
@@ -20,7 +20,7 @@
                 </div>
                 <div>
                     <dx-group-text
-                        title={featuresListTitle}
+                        header={featuresListTitle}
                         size="medium"
                         class="features"
                     ></dx-group-text>

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

@@ -3,7 +3,7 @@ import { DocPhaseInfo, FeatureItem, Link } from "typings/custom";
 
 export default class Overview extends LightningElement {
     @api docPhaseInfo!: DocPhaseInfo;
-    @api title!: string;
+    @api header!: string;
     @api description!: string;
     @api primaryLink!: Link;
     @api secondaryLink!: Link;

package/src/modules/doc/component/component.css

@@ -1,32 +0,0 @@
-@import "dxHelpers/reset";
-
-h2 {
-    font-weight: bold;
-    font-size: 24px;
-    margin-top: 10px;
-    margin-bottom: 10px;
-}
-
-.component-image {
-    padding: 48px 40px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    border: 1px solid var(--foundation-gray-neutral-95, #f3f3f3);
-    min-height: 140px;
-    max-height: 480px;
-    flex: 1;
-    margin-top: 16px;
-    margin-bottom: 16px;
-}
-
-.small {
-    font-size: 12px;
-}
-
-.item {
-    display: flex;
-    flex: 1;
-    flex-direction: column;
-    justify-content: center;
-}

package/src/modules/doc/component/component.html

@@ -1,11 +0,0 @@
-<template>
-    <div class="item">
-        <h2 if:true={title}>{title}</h2>
-        <p if:true={description}>{description}</p>
-        <p if:true={doDontLabel}>{doDontLabel}</p>
-        <div if:true={imageSrc} class="component-image">
-            <img src={imageSrc} />
-        </div>
-        <p if:true={note} class="small">{note}</p>
-    </div>
-</template>

package/src/modules/doc/component/component.ts

@@ -1,22 +0,0 @@
-import { LightningElement, api } from "lwc";
-
-class Component extends LightningElement {
-    @api title;
-    @api description;
-    @api imageSrc;
-    @api isDo;
-    @api note;
-
-    @api
-    get doDontLabel(): string {
-        //TODO: store a boolean value and refactor logic
-        if (this.isDo === "true") {
-            return "DO";
-        } else if (this.isDo === "false") {
-            return "DON'T";
-        }
-        return "";
-    }
-}
-
-export default Component;

package/src/modules/doc/styledOrderedList/styledOrderedList.css

@@ -1,33 +0,0 @@
-@import "dxHelpers/reset";
-
-.list {
-    display: flex;
-    flex: 1;
-    flex-direction: column;
-    justify-content: center;
-}
-
-.list-item {
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-    margin-bottom: 2px;
-}
-
-.circle {
-    background: var(--foundation-blue-blue-40, #0b5cab);
-    height: 24px;
-    width: 24px;
-    border-radius: 50%;
-    justify-content: center;
-    align-items: center;
-    display: flex;
-    color: white;
-    font-size: 10px;
-}
-
-.list-item-content {
-    color: var(--text-default, #181818);
-    font-size: 16px;
-    margin-left: 16px;
-}

package/src/modules/doc/styledOrderedList/styledOrderedList.html

@@ -1,10 +0,0 @@
-<template>
-    <div class="list">
-        <template for:each={list} for:item="item" for:index="index">
-            <div class="list-item" key={item}>
-                <div class="circle">{index}</div>
-                <p class="list-item-content">{item}</p>
-            </div>
-        </template>
-    </div>
-</template>

package/src/modules/doc/styledOrderedList/styledOrderedList.ts

@@ -1,18 +0,0 @@
-import { LightningElement, api } from "lwc";
-
-class StyledOrderedList extends LightningElement {
-    private _list: Array<string> = [];
-
-    set list(value: string) {
-        if (value) {
-            this._list = JSON.parse(value);
-        }
-    }
-
-    @api
-    get list(): Array<string> {
-        return this._list;
-    }
-}
-
-export default StyledOrderedList;