@salesforcedevs/docs-components 1.3.150-alpha → 1.3.150-lwf-ref-alpha2

package/lwc.config.json

@@ -11,12 +11,14 @@
         "doc/contentCallout",
         "doc/contentLayout",
         "doc/contentMedia",
+        "doc/component",
         "doc/docXmlContent",
         "doc/header",
         "doc/heading",
         "doc/headingAnchor",
         "doc/overview",
         "doc/phase",
+        "doc/styledOrderedList",
         "doc/xmlContent"
     ]
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/docs-components",
-    "version": "1.3.150-alpha",
+    "version": "1.3.150-lwf-ref-alpha2",
     "description": "Docs Lightning web components for DSC",
     "license": "MIT",
     "main": "index.js",

package/src/modules/doc/amfReference/amfReference.ts

@@ -1242,18 +1242,14 @@ export default class AmfReference extends LightningElement {
         }
         if (!isRedirecting) {
             const currentReferenceUrl = window.location.href;
-            console.log("currentReferenceUrl", currentReferenceUrl);
             const referenceMeta =
                 this.getMarkdownReferenceMeta(currentReferenceUrl);
-            console.log("referenceMeta", referenceMeta);
             const selectedItemRefId =
                 this.getReferenceIdFromUrl(currentReferenceUrl);
-            console.log("selectedItemRefId", selectedItemRefId);
             const referenceDetails = this.getRefDetailsForGivenTopicMeta(
                 selectedItemRefId,
                 referenceMeta
             );
-            console.log("referenceDtails", referenceDetails);
             if (referenceDetails) {
                 this.updateNavTitleMetaTag(referenceDetails.topicTitle);
             }

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

@@ -0,0 +1,32 @@
+@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

@@ -0,0 +1,11 @@
+<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

@@ -0,0 +1,22 @@
+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

@@ -0,0 +1,27 @@
+@import "dxHelpers/reset";
+
+.list-item{
+    display: flex;
+    flex: 1;
+    flex-direction: row;
+    justify-content: center;
+}
+
+.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-family: Open Sans;
+    font-size: 16px;
+    margin-left: 16px;
+}

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

@@ -0,0 +1,8 @@
+<template>
+    <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>
+</template>

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

@@ -0,0 +1,18 @@
+import { LightningElement, api } from "lwc";
+
+class Component 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 Component;