From ad28d649edf8bd8830ad36840f7027ff2f86e21c Mon Sep 17 00:00:00 2001
From: JodieM <jminers@gmail.com>
Date: Sun, 1 Sep 2024 22:39:30 +1000
Subject: [PATCH] Changes to CSS to make titles Align. Change to CPE to use
 Title Style

---
 .../lwc/indicatorBundle/indicatorBundle.html  | 70 +++++++++++--------
 .../lwc/indicatorBundle/indicatorBundle.js    | 17 ++---
 .../indicatorBundle.js-meta.xml               |  2 +-
 3 files changed, 49 insertions(+), 40 deletions(-)

diff --git a/force-app/main/default/lwc/indicatorBundle/indicatorBundle.html b/force-app/main/default/lwc/indicatorBundle/indicatorBundle.html
index 136365f..6afd7c8 100644
--- a/force-app/main/default/lwc/indicatorBundle/indicatorBundle.html
+++ b/force-app/main/default/lwc/indicatorBundle/indicatorBundle.html
@@ -24,18 +24,7 @@
                         onclick={refreshCmdt}
                     ></lightning-button-icon>
                 </template>
-                <template lwc:if={isDynamicForms}>
-                    <template lwc:if={showTitle}>
-                        <div>
-                        <div class={sectionHeaderClass}>
-                                <h3 slot="title" class="label slds-section__title slds-truncate slds-p-top_xx-small slds-p-bottom_xx-small slds-theme_shade">
-                                <span class="slds-var-m-left_medium" title="Section Title">{card.title}</span>
-                                </h3>
-                            </div>
-                        </div>
-                    </template>
-                </template>
-                <template lwc:else>
+                <template lwc:if={isStandardUsage}>
                     <template lwc:if={hasHeader} class="cardIcon">
                         <template lwc:if={showTitle}>
                             <h3 slot="title">
@@ -51,26 +40,45 @@ <h3 slot="title">
                         </template>
                     </template>
                 </template>
-                <template lwc:if={showDescription}>
-                    <p class="slds-var-p-horizontal_medium slds-var-p-bottom_small">{card.body}</p>
-                </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}
-                                >
-                            </c-indicator-bundle-item>
+                <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>
-                    </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-p-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
index 4f424a8..dad52fe 100644
--- a/force-app/main/default/lwc/indicatorBundle/indicatorBundle.js
+++ b/force-app/main/default/lwc/indicatorBundle/indicatorBundle.js
@@ -14,7 +14,7 @@ export default class IndicatorBundle extends LightningElement {
     @api flexipageRegionWidth;  // Width of the container on record page
     @api showDescription;
     @api showTitle;
-    @api pageUsage = 'standard';
+    @api titleStyle = 'Lightning Card';
     @api indsSize = 'large';
     @api indsShape = 'base';
     @api showRefresh = false;
@@ -58,6 +58,10 @@ export default class IndicatorBundle extends LightningElement {
         }
     }
 
+    get isStandardUsage(){
+        return this.titleStyle == 'Lightning Card';
+    }
+
     initCSSVariables() {
 
         if(this.bundle.CardIconBackground || this.bundle.CardIconForeground) {
@@ -107,21 +111,18 @@ export default class IndicatorBundle extends LightningElement {
                     if( this.showTitle || this.showDescription ){
                         this.hasHeader = true;
                     }
-                    
-                    if( this.pageUsage == 'dynamic'){
-                        this.isDynamicForms = true;
-                    }
 
                     if(this.bundle.CardIconBackground || this.bundle.CardIconForeground ){
                         this.card.iconClass = 'cardIcon slds-var-m-right_x-small ';
                     } else {
                         this.card.iconClass = 'slds-var-m-right_x-small ';
                     }
-
+                    
                     if(this.flexipageRegionWidth == 'SMALL'){
-                        this.sectionHeaderClass = 'slds-section slds-is-open slds-var-p-horizontal_medium';
+                        this.sectionBodyClass = 'slds-grid grid-wrap slds-card__body';
                     } else {
-                        this.sectionHeaderClass = 'slds-section slds-is-open';
+                        this.card.iconClass = 'slds-media__figure slds-var-m-right_xx-small';
+                        this.sectionBodyClass = 'slds-grid grid-wrap slds-card__body slds-card__body_inner';
                     }
 
                     // console.log('Card Data');
diff --git a/force-app/main/default/lwc/indicatorBundle/indicatorBundle.js-meta.xml b/force-app/main/default/lwc/indicatorBundle/indicatorBundle.js-meta.xml
index 82286d0..4633fce 100644
--- a/force-app/main/default/lwc/indicatorBundle/indicatorBundle.js-meta.xml
+++ b/force-app/main/default/lwc/indicatorBundle/indicatorBundle.js-meta.xml
@@ -10,7 +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="pageUsage" type="String" label="Page Usage" placeholder="standard" datasource="standard,dynamic" description="Choose the Page Usage - Standard Lightning Page, or styled to match Dynamic Forms"/>
+            <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 title 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."/>