@salesforcedevs/docs-components 1.3.319-alpha.0 → 1.3.319-do-dont-1

package/lwc.config.json

@@ -9,6 +9,7 @@
         "doc/breadcrumbs",
         "doc/content",
         "doc/contentCallout",
+        "doc/doDont",
         "doc/contentLayout",
         "doc/contentMedia",
         "doc/docXmlContent",

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/docs-components",
-    "version": "1.3.319-alpha.0",
+    "version": "1.3.319-do-dont-1",
     "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">
-                {header}
+                {title}
             </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 header!: string;
+    @api title!: 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
-                        header={tocTitle}
+                        title={tocTitle}
                         options={tocOptions}
                         value={tocValue}
                     ></dx-toc>

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

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

package/src/modules/doc/doDont/doDont.css

@@ -0,0 +1,47 @@
+@import "dxHelpers/reset";
+@import "dxHelpers/text";
+
+.container {
+    display: flex;
+    flex-direction: column;
+    gap: var(--dx-g-spacing-md);
+    flex: 1;
+}
+
+.doc-do-dont-header {
+    display: flex;
+    align-items: center;
+    gap: var(--dx-g-spacing-sm);
+}
+
+.doc-do-dont-label {
+    font-family: var(--dx-g-font-display);
+    font-size: var(--dx-g-spacing-md);
+    font-weight: var(--dx-g-font-demi);
+    line-height: var(--dx-g-spacing-lg);
+}
+
+.doc-do-color {
+    color: var(--dx-g-green-vibrant-50);
+}
+
+.doc-dont-color {
+    color: var(--dx-g-red-vibrant-30);
+}
+
+.do-dont-image-container {
+    display: flex;
+    max-height: 480px;
+    min-height: 140px;
+    padding: var(--dx-g-spacing-3xl) var(--dx-g-spacing-2xl);
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    flex: 1;
+    border-radius: var(--dx-g-spacing-sm);
+    border: 1px solid var(--dx-g-brand-default-color-border-2);
+}
+
+.doc-do-dont-img {
+    object-fit: contain;
+}

package/src/modules/doc/doDont/doDont.html

@@ -0,0 +1,27 @@
+<template>
+    <div class="container">
+        <div class="doc-do-dont-header">
+            <template lwc:if={isDo}>
+                <dx-icon
+                    symbol="success"
+                    size="large"
+                    color="green-vibrant-50"
+                ></dx-icon>
+                <div class="doc-do-dont-label doc-do-color">Do</div>
+            </template>
+            <template lwc:else>
+                <dx-icon
+                    symbol="clear"
+                    size="large"
+                    color="red-vibrant-30"
+                    class="doc-do-dont-icon"
+                ></dx-icon>
+                <div class="doc-do-dont-label doc-dont-color">Don't</div>
+            </template>
+        </div>
+        <div class="do-dont-image-container">
+            <img class="doc-do-dont-img" src={src} alt={caption} />
+        </div>
+        <div class="dx-text-body-4">{caption}</div>
+    </div>
+</template>

package/src/modules/doc/doDont/doDont.ts

@@ -0,0 +1,17 @@
+import { LightningElement, api } from "lwc";
+import { normalizeBoolean } from "dxUtils/normalizers";
+
+export default class DoDont extends LightningElement {
+    @api caption: string = "";
+    @api src!: string;
+    _isDo: boolean = false;
+
+    @api
+    get isDo(): boolean {
+        return this._isDo;
+    }
+
+    set isDo(value) {
+        this._isDo = normalizeBoolean(value);
+    }
+}

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

@@ -1,14 +1,14 @@
 <template>
     <h1 class={className} if:true={isAriaLevelOne}>
-        <doc-heading-content header={header} hash={hash}></doc-heading-content>
+        <doc-heading-content title={title} hash={hash}></doc-heading-content>
     </h1>
     <h2 class={className} if:true={isAriaLevelTwo}>
-        <doc-heading-content header={header} hash={hash}></doc-heading-content>
+        <doc-heading-content title={title} hash={hash}></doc-heading-content>
     </h2>
     <h3 class={className} if:true={isAriaLevelThree}>
-        <doc-heading-content header={header} hash={hash}></doc-heading-content>
+        <doc-heading-content title={title} hash={hash}></doc-heading-content>
     </h3>
     <h4 class={className} if:true={isAriaLevelFour}>
-        <doc-heading-content header={header} hash={hash}></doc-heading-content>
+        <doc-heading-content title={title} 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 header: string = "";
+    @api title: 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 header: string = "";
+    @api title: string = "";
     @api urlText: string = "";
 
     label: string = "Copy link to clipboard";
@@ -22,7 +22,7 @@ export default class HeadingAnchor extends LightningElement {
         }, 2000);
 
         try {
-            if (this.header && this.urlText) {
+            if (this.title && 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}>{header}</template>
+    <template if:false={hash}>{title}</template>
     <template if:true={hash}>
-        <span class="title">{header}&nbsp;</span>
+        <span class="title">{title}&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 header: string = "";
+    @api title: 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.header && this.hash) {
+            if (this.title && 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"
-                        header={header}
+                        title={title}
                         body={description}
                         size="large"
                         title-aria-level="1"
@@ -20,7 +20,7 @@
                 </div>
                 <div>
                     <dx-group-text
-                        header={featuresListTitle}
+                        title={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 header!: string;
+    @api title!: string;
     @api description!: string;
     @api primaryLink!: Link;
     @api secondaryLink!: Link;