Merge pull request #174 from SFDO-Community/feature/173-dynamic-forms…

…-styling Dynamic Forms Layout without button layout changes
SFDO-Community · Oct 8, 2024 · fe5c45a · fe5c45a
2 parents 47245d1 + ba1c95d
commit fe5c45a
Show file tree

Hide file tree

Showing 5 changed files with 79 additions and 44 deletions.
diff --git a/.forceignore b/.forceignore
@@ -18,4 +18,7 @@ package.xml
 **/Account/**
 **/Contact/**
 
-**/unpackaged/**
+**/unpackaged/**
+**/tsconfig.json
+
+**/*.ts
diff --git a/force-app/main/default/lwc/indicatorBundle/indicatorBundle.html b/force-app/main/default/lwc/indicatorBundle/indicatorBundle.html
@@ -24,40 +24,61 @@
                         onclick={refreshCmdt}
                     ></lightning-button-icon>
                 </template>
-                <template lwc:if={hasHeader} class="cardIcon">
-                    <template lwc:if={showTitle}>
-                        <h3 slot="title">
-                            <lightning-icon 
-                                lwc:if={card.icon}
-                                icon-name={card.icon} 
-                                size="small"
-                                class={card.iconClass}
-                            >
-                            </lightning-icon>
-                            {card.title}
-                        </h3>
-                    </template>
-                    <template lwc:if={showDescription}>
-                        <p class="slds-var-p-horizontal_medium slds-var-p-bottom_small">{card.body}</p>
-                    </template>
-                </template>
-                <!-- TODO: Do we put this in a Layout which would be responsive to the container, this could allow for empty slots too -->
-                <div class="slds-var-m-left_medium slds-clearfix ">
-                    <template if:true={results}>
-                        <template for:each={results} for:item="fld">
-                            <c-indicator-bundle-item if:true={fld.fShowAvatar} key={fld.fName}
-                                ind-text={fld.fTextShown}
-                                ind-size={indsSize}
-                                ind-shape={indsShape} 
-                                ind-hover-text={fld.fHoverValue}
-                                ind-icon={fld.fIconName}
-                                ind-image={fld.fImageURL}
-                                ind-background-color={fld.fIconBackground}
-                                ind-foreground-color={fld.fIconForeground}
+                <template lwc:if={isStandardUsage}>
+                    <template lwc:if={hasHeader} class="cardIcon">
+                        <template lwc:if={showTitle}>
+                            <h3 slot="title">
+                                <lightning-icon 
+                                    lwc:if={card.icon}
+                                    icon-name={card.icon} 
+                                    size="small"
+                                    class={card.iconClass}
                                 >
-                            </c-indicator-bundle-item>
+                                </lightning-icon>
+                                {card.title}
+                            </h3>
                         </template>
                     </template>
+                </template>
+                <template lwc:else>
+                    <div class="slds-card__body slds-card__body_inner"> 
+                        <template lwc:if={showTitle}>
+                            <div class="section-layout-container slds-section slds-is-open slds-button slds-section__title-action slds-theme_shade">
+                                <h3 slot="title" class="slds-truncate slds-p-around_xx-small">
+                                <span class="slds-text-heading_small" title="Section Title">{card.title}</span>
+                                </h3>
+                            </div>
+                        </template>
+                    </div>
+                </template>
+                <div class={sectionBodyClass}>
+                    <div class="slds-col slds-grid slds-grid_vertical">                 
+                        <div class="slds-col">
+                            <template lwc:if={showDescription}>
+                                <p class="slds-var-p-left_medium slds-var-p-right_x-small slds-var-p-bottom_small">{card.body}</p>
+                            </template>
+                        </div>   
+                        <div class="slds-col">
+                        <!-- TODO: Do we put this in a Layout which would be responsive to the container, this could allow for empty slots too -->
+                            <div class="slds-var-m-left_medium slds-clearfix">
+                                <template if:true={results}>
+                                    <template for:each={results} for:item="fld">
+                                        <c-indicator-bundle-item if:true={fld.fShowAvatar} key={fld.fName}
+                                            ind-text={fld.fTextShown}
+                                            ind-size={indsSize}
+                                            ind-shape={indsShape} 
+                                            ind-hover-text={fld.fHoverValue}
+                                            ind-icon={fld.fIconName}
+                                            ind-image={fld.fImageURL}
+                                            ind-background-color={fld.fIconBackground}
+                                            ind-foreground-color={fld.fIconForeground}
+                                            >
+                                        </c-indicator-bundle-item>
+                                    </template>
+                                </template>
+                            </div>
+                        </div>
+                    </div>
                 </div>
             </lightning-card>
         </template>

diff --git a/force-app/main/default/lwc/indicatorBundle/indicatorBundle.js b/force-app/main/default/lwc/indicatorBundle/indicatorBundle.js
@@ -14,6 +14,7 @@ export default class IndicatorBundle extends LightningElement {
     @api flexipageRegionWidth;  // Width of the container on record page
     @api showDescription;
     @api showTitle;
+    @api titleStyle = 'Lightning Card';
     @api indsSize = 'large';
     @api indsShape = 'base';
     @api showRefresh = false;
@@ -57,6 +58,10 @@ export default class IndicatorBundle extends LightningElement {
         }
     }
 
+    get isStandardUsage(){
+        return this.titleStyle == 'Lightning Card';
+    }
+
     initCSSVariables() {
 
         if(this.bundle.CardIconBackground || this.bundle.CardIconForeground) {
@@ -108,10 +113,17 @@ export default class IndicatorBundle extends LightningElement {
                     }
 
                     if(this.bundle.CardIconBackground || this.bundle.CardIconForeground ){
-                        this.card.iconClass = 'cardIcon slds-var-m-right_xx-small ';
+                        this.card.iconClass = 'cardIcon slds-var-m-right_x-small ';
                     } else {
                         this.card.iconClass = 'slds-var-m-right_x-small ';
                     }
+
+                    if(this.isStandardUsage != true){
+                        this.sectionBodyClass = 'slds-grid grid-wrap slds-card__body slds-card__body_inner';
+                    } else {
+                        this.card.iconClass = 'slds-media__figure slds-var-m-right_x-small';
+                        this.sectionBodyClass = 'slds-grid grid-wrap slds-card__body';
+                    }
 
                     // console.log('Card Data');
                     // console.dir(JSON.stringify(this.card));

diff --git a/force-app/main/default/lwc/indicatorBundle/indicatorBundle.js-meta.xml b/force-app/main/default/lwc/indicatorBundle/indicatorBundle.js-meta.xml
@@ -10,6 +10,7 @@
     <targetConfigs>
         <targetConfig targets="lightning__RecordPage">
             <property name="bundleName" type="String" label="Indicator Bundle" datasource="apex://IndicatorListBundleSelector" description="Choose the Indicator Bundle."/>
+            <property name="titleStyle" type="String" label="Title Style" placeholder="Lightning Card" datasource="Lightning Card,Dynamic Forms" description="Choose the Title Style: Standard Lightning Card or a style to match Dynamic Forms"/>
             <property name="showTitle" type="Boolean" default="true" label="Display Title" description="Display the Indicator's Title on the component."/>
             <property name="showDescription" type="Boolean" default="true" label="Display Description" description="Display the Indicator's Description on the component."/>
             <property name="indsSize" type="String" label="Indicator Size" placeholder="large" datasource="large,medium" description="Choose the Indicator Size."/>

diff --git a/force-app/main/default/lwc/indicatorBundleItem/indicatorBundleItem.html b/force-app/main/default/lwc/indicatorBundleItem/indicatorBundleItem.html
@@ -1,15 +1,13 @@
 <template>
     <div class="slds-var-m-bottom_x-small slds-float_left">
-        <template if:false={record}>
-            <lightning-avatar 
-                size={indSize}
-                variant={indShape}
-                initials={indText}
-                src={indImage} 
-                fallback-icon-name={indIcon}
-                alternative-text={indHoverText} 
-                class={indClass}>
-            </lightning-avatar>
-        </template>
+        <lightning-avatar 
+            size={indSize}
+            variant={indShape}
+            initials={indText}
+            src={indImage} 
+            fallback-icon-name={indIcon}
+            alternative-text={indHoverText} 
+            class={indClass}>
+        </lightning-avatar>
     </div>
 </template>