Convert AirtableAsset.stories.tsx to GraphCMSAsset.stories.tsx

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,42 +14,97 @@ 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.
+   *
+   * <span className="tip">XXX</span> 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;
     target?: string;
     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

src/stories/nrn/asset/AirtableAsset.stories.tsx → 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> = (props) => {
   return (
-    <AirtableAsset
+    <GraphCMSAsset
       {...props}
     />
   );