Skip to content

Commit

Permalink
Changes to CSS to make titles Align. Change to CPE to use Title Style
Browse files Browse the repository at this point in the history
  • Loading branch information
@JodieM
JodieM committed Sep 1, 2024
1 parent 08db8cd commit ad28d64
Show file tree
Hide file tree
Showing 3 changed files with 49 additions and 40 deletions.
70 changes: 39 additions & 31 deletions force-app/main/default/lwc/indicatorBundle/indicatorBundle.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand All @@ -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>
Expand Down
17 changes: 9 additions & 8 deletions force-app/main/default/lwc/indicatorBundle/indicatorBundle.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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) {
Expand Down Expand Up @@ -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');
Expand Down
2 changes: 1 addition & 1 deletion force-app/main/default/lwc/indicatorBundle/indicatorBundle.js-meta.xml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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."/>
Expand Down

0 comments on commit ad28d64

Please sign in to comment.