diff --git a/src/components/assets/GraphCMSAsset.tsx b/src/components/assets/GraphCMSAsset.tsx index 372597809..6c6c3928a 100644 --- a/src/components/assets/GraphCMSAsset.tsx +++ b/src/components/assets/GraphCMSAsset.tsx @@ -6,7 +6,6 @@ import map from 'lodash.map'; import PropTypes from 'prop-types'; import React from 'react'; import stylePropType from 'react-style-proptype'; - import GraphCMSAssetPropTypes from '../../propTypes/GraphCMSAssetPropTypes'; import GraphCMSAssetTransformationsPropTypes from '../../propTypes/GraphCMSAssetTransformationsPropTypes'; import { CSSStyles } from '../../types/CSSStyles'; @@ -15,32 +14,62 @@ import { AssetTransformations } from '../../types/data/AssetTransformations'; import { Link } from '../../types/data/Link'; import { cssToReactStyle } from '../../utils/css'; -const _defaultAsset = { - id: null, - url: '', // TODO use link of default missing image - title: '', - alt: '', - style: null, - className: '', -}; - -const _defaultLink: Link = { - id: null, - url: null, - target: '_blank', - style: null, - className: '', -}; +export type Props = { + /** + * Asset, extends Airtable attachment, e.g: image, document, etc. + * + * XXX The `asset` will be merged with `_defaultAsset`. + */ + asset: Asset; -type Props = { + /** + * HTML id attribute. Must be unique. + */ id: string; - asset: Asset; + + /** + * Overrides transformations. + * + * @default null + */ transformationsOverride?: AssetTransformations; + + /** + * Default `asset` properties. + * + * @default {} + */ defaults?: Asset; + + /** + * Overrides `asset` properties. + * + * @default {} + */ override?: Asset; + + /** + * CSS classes. + */ className?: string; + + /** + * CSS styles + * + * @default null + */ style?: CSSStyles; + + /** + * Click event. + */ onClick?: () => void; + + /** + * Overrides `Link` element properties. + * + * @default {} + */ linkOverride?: { id?: string; url?: string; @@ -48,9 +77,34 @@ type Props = { style?: CSSStyles; classes?: string; }; + + /** + * Whether to force output format to be PNG, allows to display PDF files as images. + * + * It bypasses the usage of SVG files. + * + * @default false + */ forcePNGOutput?: boolean; } +const _defaultAsset = { + id: null, + url: '', // TODO use link of default missing image + title: '', + alt: '', + style: null, + className: '', +}; + +const _defaultLink: Link = { + id: null, + url: null, + target: '_blank', + style: null, + className: '', +}; + /** * Displays an asset, based on the provided props * Handles GraphCMS assets, including svg diff --git a/src/stories/nrn/asset/AirtableAsset.stories.tsx b/src/stories/nrn/asset/GraphCMSAsset.stories.tsx similarity index 80% rename from src/stories/nrn/asset/AirtableAsset.stories.tsx rename to src/stories/nrn/asset/GraphCMSAsset.stories.tsx index 1153383df..def303cf4 100644 --- a/src/stories/nrn/asset/AirtableAsset.stories.tsx +++ b/src/stories/nrn/asset/GraphCMSAsset.stories.tsx @@ -3,20 +3,20 @@ import { Story, } from '@storybook/react/types-6-0'; import React from 'react'; -import AirtableAsset, { Props } from '../../../components/assets/AirtableAsset'; +import GraphCMSAsset, { Props } from '../../../components/assets/GraphCMSAsset'; import { Asset } from '../../../types/data/Asset'; const defaultLogoUrl = 'https://dl.airtable.com/lA5gmGBQheUvmuX616wU_monochromelogo.png'; export default { - title: 'Next Right Now/Asset/AirtableAsset', - component: AirtableAsset, + title: 'Next Right Now/Asset/GraphCMSAsset', + component: GraphCMSAsset, argTypes: {}, } as Meta; export const DynamicAirtableLogo: Story = (props) => { return ( - );