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

package/lwc.config.json

@@ -18,6 +18,7 @@
         "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-lwf-ref-alpha1",
+    "version": "1.3.150-lwf-ref-alpha2",
     "description": "Docs Lightning web components for DSC",
     "license": "MIT",
     "main": "index.js",

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

@@ -1,7 +1,10 @@
+@import "dxHelpers/reset";
+
 h2 {
     font-weight: bold;
     font-size: 24px;
-    margin: 10px 0;
+    margin-top: 10px;
+    margin-bottom: 10px;
 }
 
 .component-image {
@@ -13,7 +16,8 @@ h2 {
     min-height: 140px;
     max-height: 480px;
     flex: 1;
-    margin: 16px 0px;
+    margin-top: 16px;
+    margin-bottom: 16px;
 }
 
 .small {
@@ -26,8 +30,3 @@ h2 {
     flex-direction: column;
     justify-content: center;
 }
-
-img{
-    max-width: 100%;
-    height: auto;
-}

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

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

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

@@ -11,13 +11,12 @@ class Component extends LightningElement {
     get doDontLabel(): string {
         //TODO: store a boolean value and refactor logic
         if (this.isDo === "true") {
-            return "DO"
+            return "DO";
         } else if (this.isDo === "false") {
-            return "DON'T"
+            return "DON'T";
         }
-        return ""
+        return "";
     }
-
 }
 
-export default Component;
+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;