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 (
-
);