@salesforcedevs/docs-components 1.3.149-query-string-1 → 1.3.150-lwf-ref-alpha1

package/lwc.config.json

@@ -11,6 +11,7 @@
         "doc/contentCallout",
         "doc/contentLayout",
         "doc/contentMedia",
+        "doc/component",
         "doc/docXmlContent",
         "doc/header",
         "doc/heading",

package/package.json

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

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

@@ -0,0 +1,33 @@
+h2 {
+    font-weight: bold;
+    font-size: 24px;
+    margin: 10px 0;
+}
+
+.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: 16px 0px;
+}
+
+.small {
+    font-size: 12px;
+}
+
+.item {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    justify-content: center;
+}
+
+img{
+    max-width: 100%;
+    height: auto;
+}

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

@@ -0,0 +1,13 @@
+<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,23 @@
+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;