React

Description

The Static Asset Download component renders a list-based item allowing users to download a file or open a PDF in a new tab.

The file type decides the behaviour, and the component derives it from the asset rather than from a prop: a PDF opens in a new tab and gains the trailing external-link glyph, while every other format downloads directly and carries no glyph. opensInNewWindowLabel is the announcement that pairs with that new tab.

Component

Properties

StaticAssetDownloadProperties extends the standard HTML attributes that can be applied to a <div>.

Prop	Type	Description	Required
themeStyleIds	ThemeStyleId[]	Defines the component’s colour scheme (e.g. ['light'] or ['dark']). Defaults to light
title	string	The display name of the asset
titleFromAsset	boolean	Whether the title is automatically inherited from the DAM asset instead of manually entered	✅
assetMetadata	AssetMetadata	Metadata object containing details like file type (fileFormat) and file size (fileSize)
fileReference	string	The path or URL linking directly to the asset in AEM
opensInNewWindowLabel	string	Accessible label read by screen readers when a PDF file opens in a new window	✅
id	string	Unique HTML id for the component container
displayFileFormat	boolean	When true, visually displays the format type of the file next to the title	✅
displayFileSize	boolean	When true, visually displays the file size below the title	✅
hasDividers	boolean	When true, horizontal dividers are added above and below the asset download row
className	ClassValue	Additional CSS classes to apply to the container

Example

import { StaticAssetDownload } from '@tmedxp/aem-react-components';

const StaticAssetDownloadExample = (model) => {
  return (
    <StaticAssetDownload
      id={model.id}
      themeStyleIds={model.themeStyleIds}
      title={model.title}
      titleFromAsset={model.titleFromAsset}
      assetMetadata={model.assetMetadata}
      fileReference={model.fileReference}
      displayFileFormat={model.displayFileFormat}
      displayFileSize={model.displayFileSize}
      opensInNewWindowLabel={i18n(
        'toyota/i18n/accessibility/labels:a11yOpensInNewWindow',
      )}
    />
  );
};

export { StaticAssetDownloadExample };