import { TruncateContent } from "@vitality-ds/components";
Sometimes users load data in the form of text or images that can take up a lot of visual space. The TruncateContent component allows that content to have its height "truncated" or cropped at a minimum level and allows the user to opt-in to showing it all by clicking a button.
<DocsBox css={{ backgroundColor: "$neutral1", padding: "$lg" }}> <TruncateContent> <Typography> A committed invoice has payment(s) or has been claimed. A committed invoice has payment(s) or has been claimed. A committed invoice has payment(s) or has been claimed. A committed invoice has payment(s) or has been claimed.A committed invoice has payment(s) or has been claimed. A committed invoice has payment(s) or has been claimed. A committed invoice has payment(s) or has been claimed. A committed invoice has payment(s) or has been claimed.A committed invoice has payment(s) or has been claimed. A committed invoice has payment(s) or has been claimed. A committed invoice has payment(s) or has been claimed. A committed invoice has payment(s) or has been claimed. </Typography> </TruncateContent> </DocsBox>
<DocsBox css={{ backgroundColor: "$neutral2", padding: "$lg" }}> <TruncateContent> <img style={{ maxWidth: "100%" }} src="https://upload.wikimedia.org/wikipedia/commons/a/ad/CT_Scan_General_Illustration.jpg" /> </TruncateContent> </DocsBox>
The default height is 75px, however you can override this by using the initialHeight prop and passing any CSS string value that is valid for the maxHeight property. This means you can pass px, em, vh etc.
<DocsBox css={{ backgroundColor: "$neutral2", padding: "$lg" }}> <TruncateContent initialHeight="120px"> <img style={{ maxWidth: "100%" }} src="https://upload.wikimedia.org/wikipedia/commons/a/ad/CT_Scan_General_Illustration.jpg" /> </TruncateContent> </DocsBox>
You can optionally change the "Show More" button text to use the primary colour if you need to draw more attention to it.
<DocsBox css={{ backgroundColor: "$neutral1", padding: "$lg" }}> <TruncateContent buttonTextColor="$primary9"> <img style={{ maxWidth: "100%" }} src="https://upload.wikimedia.org/wikipedia/commons/a/ad/CT_Scan_General_Illustration.jpg" /> </TruncateContent> </DocsBox>
Although uncommon, in cases where your content is placed on a background with a different Vitality colour, you can change the "Show More" button text to use any Vitality colour. Although the below illustrates this with the $info10 shorthand value, you would use the getColorScaleValueByUseCase() method as outlined (here)[/guides/styling-components-in-code#getcolorscalevaluebyusecase].
<DocsBox css={{ backgroundColor: "$info1", padding: "$lg" }}> <TruncateContent buttonTextColor="$info10"> <img style={{ maxWidth: "100%" }} src="https://upload.wikimedia.org/wikipedia/commons/a/ad/CT_Scan_General_Illustration.jpg" /> </TruncateContent> </DocsBox>
In cases where some truncated content sits on a different background, you can pass any of the theme colours to adjust the gradient that is shown when the content is truncated. This should match the background colour of the containing element.
<DocsBox css={{ backgroundColor: "$warning2", padding: "$lg" }}> <TruncateContent gradientColor="$warning2"> <img style={{ maxWidth: "100%" }} src="https://upload.wikimedia.org/wikipedia/commons/a/ad/CT_Scan_General_Illustration.jpg" /> </TruncateContent> </DocsBox>
Description
Option to change the button's text colour
Type
Globals | ScaleValue | Index | Color | "$blue1" | "$blue2" | "$blue3" | "$blue4" | "$blue5" | "$blue6" | "$blue7" | "$blue8" | "$blue9" | "$blue10" | "$blue11" | "$blue12" | "$blue13" | "$cyan1" | "$cyan2" | "$cyan3" | "$cyan4" | "$cyan5" | "$cyan6" | "$cyan7" | "$cyan8" | "$cyan9" | "$cyan10" | "$cyan11" | "$cyan12" | "$cyan13" | "$green1" | "$green2" | "$green3" | "$green4" | "$green5" | "$green6" | "$green7" | "$green8" | "$green9" | "$green10" | "$green11" | "$green12" | "$green13" | "$grey1" | "$grey2" | "$grey3" | "$grey4" | "$grey5" | "$grey6" | "$grey7" | "$grey8" | "$grey9" | "$grey10" | "$grey11" | "$grey12" | "$grey13" | "$greyA1" | "$greyA2" | "$greyA3" | "$greyA4" | "$greyA5" | "$greyA6" | "$greyA7" | "$greyA8" | "$greyA9" | "$greyA10" | "$greyA11" | "$greyA12" | "$greyA13" | "$orange1" | "$orange2" | "$orange3" | "$orange4" | "$orange5" | "$orange6" | "$orange7" | "$orange8" | "$orange9" | "$orange10" | "$orange11" | "$orange12" | "$orange13" | "$pink1" | "$pink2" | "$pink3" | "$pink4" | "$pink5" | "$pink6" | "$pink7" | "$pink8" | "$pink9" | "$pink10" | "$pink11" | "$pink12" | "$pink13" | "$red1" | "$red2" | "$red3" | "$red4" | "$red5" | "$red6" | "$red7" | "$red8" | "$red9" | "$red10" | "$red11" | "$red12" | "$red13" | "$violet1" | "$violet2" | "$violet3" | "$violet4" | "$violet5" | "$violet6" | "$violet7" | "$violet8" | "$violet9" | "$violet10" | "$violet11" | "$violet12" | "$violet13" | "$yellow1" | "$yellow2" | "$yellow3" | "$yellow4" | "$yellow5" | "$yellow6" | "$yellow7" | "$yellow8" | "$yellow9" | "$yellow10" | "$yellow11" | "$yellow12" | "$yellow13" | "$neutral1" | "$neutral2" | "$neutral3" | "$neutral4" | "$neutral5" | "$neutral6" | "$neutral7" | "$neutral8" | "$neutral9" | "$neutral10" | "$neutral11" | "$neutral12" | "$neutral13" | "$neutralA1" | "$neutralA2" | "$neutralA3" | "$neutralA4" | "$neutralA5" | "$neutralA6" | "$neutralA7" | "$neutralA8" | "$neutralA9" | "$neutralA10" | "$neutralA11" | "$neutralA12" | "$neutralA13" | "$primary1" | "$primary2" | "$primary3" | "$primary4" | "$primary5" | "$primary6" | "$primary7" | "$primary8" | "$primary9" | "$primary10" | "$primary11" | "$primary12" | "$primary13" | "$accent1" | "$accent2" | "$accent3" | "$accent4" | "$accent5" | "$accent6" | "$accent7" | "$accent8" | "$accent9" | "$accent10" | "$accent11" | "$accent12" | "$accent13" | "$success1" | "$success2" | "$success3" | "$success4" | "$success5" | "$success6" | "$success7" | "$success8" | "$success9" | "$success10" | "$success11" | "$success12" | "$success13" | "$info1" | "$info2" | "$info3" | "$info4" | "$info5" | "$info6" | "$info7" | "$info8" | "$info9" | "$info10" | "$info11" | "$info12" | "$info13" | "$warning1" | "$warning2" | "$warning3" | "$warning4" | "$warning5" | "$warning6" | "$warning7" | "$warning8" | "$warning9" | "$warning10" | "$warning11" | "$warning12" | "$warning13" | "$critical1" | "$critical2" | "$critical3" | "$critical4" | "$critical5" | "$critical6" | "$critical7" | "$critical8" | "$critical9" | "$critical10" | "$critical11" | "$critical12" | "$critical13" | "$brand1" | "$brand2" | "$brand3" | "$brand4" | "$brand5" | "$brand6" | "$brand7" | "$brand8" | "$brand9" | "$brand10" | "$brand11" | "$brand12" | "$brand13"
Default Value
$neutral11
Description
String that represents the background color of the component's containing element. Used to fade the gradient into the correct colour.
Type
"$blue1" | "$blue2" | "$blue3" | "$blue4" | "$blue5" | "$blue6" | "$blue7" | "$blue8" | "$blue9" | "$blue10" | "$blue11" | "$blue12" | "$blue13" | "$cyan1" | "$cyan2" | "$cyan3" | "$cyan4" | "$cyan5" | "$cyan6" | "$cyan7" | "$cyan8" | "$cyan9" | "$cyan10" | "$cyan11" | "$cyan12" | "$cyan13" | "$green1" | "$green2" | "$green3" | "$green4" | "$green5" | "$green6" | "$green7" | "$green8" | "$green9" | "$green10" | "$green11" | "$green12" | "$green13" | "$grey1" | "$grey2" | "$grey3" | "$grey4" | "$grey5" | "$grey6" | "$grey7" | "$grey8" | "$grey9" | "$grey10" | "$grey11" | "$grey12" | "$grey13" | "$greyA1" | "$greyA2" | "$greyA3" | "$greyA4" | "$greyA5" | "$greyA6" | "$greyA7" | "$greyA8" | "$greyA9" | "$greyA10" | "$greyA11" | "$greyA12" | "$greyA13" | "$orange1" | "$orange2" | "$orange3" | "$orange4" | "$orange5" | "$orange6" | "$orange7" | "$orange8" | "$orange9" | "$orange10" | "$orange11" | "$orange12" | "$orange13" | "$pink1" | "$pink2" | "$pink3" | "$pink4" | "$pink5" | "$pink6" | "$pink7" | "$pink8" | "$pink9" | "$pink10" | "$pink11" | "$pink12" | "$pink13" | "$red1" | "$red2" | "$red3" | "$red4" | "$red5" | "$red6" | "$red7" | "$red8" | "$red9" | "$red10" | "$red11" | "$red12" | "$red13" | "$violet1" | "$violet2" | "$violet3" | "$violet4" | "$violet5" | "$violet6" | "$violet7" | "$violet8" | "$violet9" | "$violet10" | "$violet11" | "$violet12" | "$violet13" | "$yellow1" | "$yellow2" | "$yellow3" | "$yellow4" | "$yellow5" | "$yellow6" | "$yellow7" | "$yellow8" | "$yellow9" | "$yellow10" | "$yellow11" | "$yellow12" | "$yellow13" | "$neutral1" | "$neutral2" | "$neutral3" | "$neutral4" | "$neutral5" | "$neutral6" | "$neutral7" | "$neutral8" | "$neutral9" | "$neutral10" | "$neutral11" | "$neutral12" | "$neutral13" | "$neutralA1" | "$neutralA2" | "$neutralA3" | "$neutralA4" | "$neutralA5" | "$neutralA6" | "$neutralA7" | "$neutralA8" | "$neutralA9" | "$neutralA10" | "$neutralA11" | "$neutralA12" | "$neutralA13" | "$primary1" | "$primary2" | "$primary3" | "$primary4" | "$primary5" | "$primary6" | "$primary7" | "$primary8" | "$primary9" | "$primary10" | "$primary11" | "$primary12" | "$primary13" | "$accent1" | "$accent2" | "$accent3" | "$accent4" | "$accent5" | "$accent6" | "$accent7" | "$accent8" | "$accent9" | "$accent10" | "$accent11" | "$accent12" | "$accent13" | "$success1" | "$success2" | "$success3" | "$success4" | "$success5" | "$success6" | "$success7" | "$success8" | "$success9" | "$success10" | "$success11" | "$success12" | "$success13" | "$info1" | "$info2" | "$info3" | "$info4" | "$info5" | "$info6" | "$info7" | "$info8" | "$info9" | "$info10" | "$info11" | "$info12" | "$info13" | "$warning1" | "$warning2" | "$warning3" | "$warning4" | "$warning5" | "$warning6" | "$warning7" | "$warning8" | "$warning9" | "$warning10" | "$warning11" | "$warning12" | "$warning13" | "$critical1" | "$critical2" | "$critical3" | "$critical4" | "$critical5" | "$critical6" | "$critical7" | "$critical8" | "$critical9" | "$critical10" | "$critical11" | "$critical12" | "$critical13" | "$brand1" | "$brand2" | "$brand3" | "$brand4" | "$brand5" | "$brand6" | "$brand7" | "$brand8" | "$brand9" | "$brand10" | "$brand11" | "$brand12" | "$brand13"
Default Value
$neutral1
Description
The initial height of the content when truncated
Type
MaxHeight<string | number>
Default Value
75px
Type
boolean