@contentful/f36-asset 5.0.0 → 5.1.0

package/README.mdx

@@ -1,5 +1,7 @@
 ---
 title: 'Asset'
+type: 'component'
+status: 'stable'
 slug: /components/asset/
 github: 'https://github.com/contentful/forma-36/tree/main/packages/components/asset'
 storybook: 'https://f36-storybook.contentful.com/?path=/story/components-asset--basic'

package/dist/esm/index.js

@@ -2,10 +2,11 @@ import n from 'react';
 import { cx, css } from 'emotion';
 import { Box, Flex } from '@contentful/f36-core';
 import { Text } from '@contentful/f36-typography';
-import { ArchiveIcon, VideoIcon, SpreadsheetIcon, RichtextIcon, PresentationIcon, PlaintextIcon, PdfIcon, MarkupIcon, ImageIcon, CodeIllustrationIcon, AudioIcon } from '@contentful/f36-icons';
-import g from '@contentful/f36-tokens';
+import { FileArchiveIcon, FileVideoIcon, TableIcon, RichTextIcon, PresentationIcon, FileTextIcon, FilePdfIcon, FileCodeIcon, ImageSquareIcon, BracketsCurlyIcon, FileAudioIcon } from '@contentful/f36-icons';
+import y from '@contentful/f36-tokens';
 
-var N=Object.defineProperty,w=Object.defineProperties;var B=Object.getOwnPropertyDescriptors;var f=Object.getOwnPropertySymbols;var I=Object.prototype.hasOwnProperty,v=Object.prototype.propertyIsEnumerable;var A=(t,e,s)=>e in t?N(t,e,{enumerable:!0,configurable:!0,writable:!0,value:s}):t[e]=s,o=(t,e)=>{for(var s in e||(e={}))I.call(e,s)&&A(t,s,e[s]);if(f)for(var s of f(e))v.call(e,s)&&A(t,s,e[s]);return t},P=(t,e)=>w(t,B(e));var d=(t,e)=>{var s={};for(var r in t)I.call(t,r)&&e.indexOf(r)<0&&(s[r]=t[r]);if(t!=null&&f)for(var r of f(t))e.indexOf(r)<0&&v.call(t,r)&&(s[r]=t[r]);return s};function T(){return {root:css({display:"inline-block",width:"39px",height:"39px","g, path":{fill:g.gray600}})}}var u=c=>{var m=c,{type:t="archive",className:e,testId:s="cf-ui-asset-icon"}=m,r=d(m,["type","className","testId"]);let y=T(),i=P(o({},r),{testId:s,className:cx(y.root,e)});switch(t){case"audio":return n.createElement(AudioIcon,o({},i));case"code":return n.createElement(CodeIllustrationIcon,o({},i));case"image":return n.createElement(ImageIcon,o({},i));case"markup":return n.createElement(MarkupIcon,o({},i));case"pdf":return n.createElement(PdfIcon,o({},i));case"plaintext":return n.createElement(PlaintextIcon,o({},i));case"presentation":return n.createElement(PresentationIcon,o({},i));case"richtext":return n.createElement(RichtextIcon,o({},i));case"spreadsheet":return n.createElement(SpreadsheetIcon,o({},i));case"video":return n.createElement(VideoIcon,o({},i));case"archive":default:return n.createElement(ArchiveIcon,o({},i))}};u.displayName="AssetIcon";function S(){return {relative:css({position:"relative"}),height100:css({height:"100%"}),image:css({width:"auto",maxWidth:"100%",maxHeight:"100%"}),titleContainer:css({opacity:0,transition:`opacity ${g.transitionDurationDefault} ${g.transitionEasingDefault}`,position:"absolute",bottom:0,right:0,left:0,height:"100%",display:"flex",overflow:"hidden",alignItems:"flex-end",boxSizing:"border-box",background:`linear-gradient(0deg, ${g.gray900} 0%, transparent calc(1rem * (100 / ${g.fontBaseDefault})), transparent 100% )`,":hover":{opacity:1}}),title:css({bottom:0,left:0,right:0,position:"absolute"})}}function b(X,i){var h=X,{className:t,src:e,status:s,testId:r="cf-ui-asset",title:c,type:m="image"}=h,y=d(h,["className","src","status","testId","title","type"]);let p=S(),C=e&&e!==""&&m==="image"&&s!=="archived";return n.createElement(Box,o({className:cx(p.relative,t),testId:r,ref:i},y),C?n.createElement(n.Fragment,null,n.createElement(Flex,{alignItems:"center",justifyContent:"center",className:p.height100},n.createElement("img",{className:p.image,src:e,alt:c})),c&&n.createElement("div",{className:p.titleContainer},n.createElement(Text,{className:p.title,fontColor:"colorWhite",margin:"spacingS",isTruncated:!0},c))):n.createElement(Flex,{flexDirection:"column",alignItems:"center",justifyContent:"center",paddingLeft:"spacingS",paddingRight:"spacingS",className:p.height100},n.createElement(Flex,{marginBottom:"spacingM",marginTop:"spacingM",justifyContent:"center"},n.createElement(u,{type:m})),n.createElement(Text,{isTruncated:!0,marginBottom:"spacingM",fontColor:"gray600"},c)))}b.displayName="Asset";var J=n.forwardRef(b);var K={archive:"archive",audio:"audio",code:"code",image:"image",markup:"markup",pdf:"pdf",plaintext:"plaintext",presentation:"presentation",richtext:"richtext",spreadsheet:"spreadsheet",video:"video"};function Q(t){return Object.keys(K).includes(t)}
+var F=Object.defineProperty,N=Object.defineProperties;var w=Object.getOwnPropertyDescriptors;var f=Object.getOwnPropertySymbols;var I=Object.prototype.hasOwnProperty,T=Object.prototype.propertyIsEnumerable;var A=(e,t,s)=>t in e?F(e,t,{enumerable:!0,configurable:!0,writable:!0,value:s}):e[t]=s,o=(e,t)=>{for(var s in t||(t={}))I.call(t,s)&&A(e,s,t[s]);if(f)for(var s of f(t))T.call(t,s)&&A(e,s,t[s]);return e},v=(e,t)=>N(e,w(t));var d=(e,t)=>{var s={};for(var r in e)I.call(e,r)&&t.indexOf(r)<0&&(s[r]=e[r]);if(e!=null&&f)for(var r of f(e))t.indexOf(r)<0&&T.call(e,r)&&(s[r]=e[r]);return s};function P(){return {root:css({display:"inline-block",width:"39px",height:"39px","g, path":{fill:y.gray600}})}}var u=c=>{var m=c,{type:e="archive",className:t,testId:s="cf-ui-asset-icon"}=m,r=d(m,["type","className","testId"]);let g=P(),i=v(o({},r),{testId:s,className:cx(g.root,t)});switch(e){case"audio":return n.createElement(FileAudioIcon,o({},i));case"code":return n.createElement(BracketsCurlyIcon,o({},i));case"image":return n.createElement(ImageSquareIcon,o({},i));case"markup":return n.createElement(FileCodeIcon,o({},i));case"pdf":return n.createElement(FilePdfIcon,o({},i));case"plaintext":return n.createElement(FileTextIcon,o({},i));case"presentation":return n.createElement(PresentationIcon,o({},i));case"richtext":return n.createElement(RichTextIcon,o({},i));case"spreadsheet":return n.createElement(TableIcon,o({},i));case"video":return n.createElement(FileVideoIcon,o({},i));case"archive":default:return n.createElement(FileArchiveIcon,o({},i))}};u.displayName="AssetIcon";function S(){return {root:css({position:"relative",width:"100%"}),height100:css({height:"100%"}),image:css({width:"auto",maxWidth:"100%",maxHeight:"100%"}),titleContainer:css({opacity:0,transition:`opacity ${y.transitionDurationDefault} ${y.transitionEasingDefault}`,position:"absolute",bottom:0,right:0,left:0,height:"100%",display:"flex",overflow:"hidden",alignItems:"flex-end",boxSizing:"border-box",background:`linear-gradient(0deg, ${y.gray900} 0%, transparent calc(1rem * (100 / ${y.fontBaseDefault})), transparent 100% )`,":hover":{opacity:1}}),title:css({bottom:0,left:0,right:0,position:"absolute"})}}function k(X,i){var h=X,{className:e,src:t,status:s,testId:r="cf-ui-asset",title:c,type:m="image"}=h,g=d(h,["className","src","status","testId","title","type"]);let p=S(),C=t&&t!==""&&m==="image"&&s!=="archived";return n.createElement(Box,o({className:cx(p.root,e),testId:r,ref:i},g),C?n.createElement(n.Fragment,null,n.createElement(Flex,{alignItems:"center",justifyContent:"center",className:p.height100},n.createElement("img",{className:p.image,src:t,alt:c})),c&&n.createElement("div",{className:p.titleContainer},n.createElement(Text,{className:p.title,fontColor:"colorWhite",margin:"spacingS",isTruncated:!0},c))):n.createElement(Flex,{flexDirection:"column",alignItems:"center",justifyContent:"center",paddingLeft:"spacingS",paddingRight:"spacingS",className:p.height100},n.createElement(Flex,{marginBottom:"spacingM",marginTop:"spacingM",justifyContent:"center"},n.createElement(u,{type:m})),n.createElement(Text,{isTruncated:!0,marginBottom:"spacingM",fontColor:"gray600"},c)))}k.displayName="Asset";var J=n.forwardRef(k);var K={archive:"archive",audio:"audio",code:"code",image:"image",markup:"markup",pdf:"pdf",plaintext:"plaintext",presentation:"presentation",richtext:"richtext",spreadsheet:"spreadsheet",video:"video"};function Q(e){return Object.keys(K).includes(e)}
 
 export { J as Asset, u as AssetIcon, Q as isAssetType };
+//# sourceMappingURL=out.js.map
 //# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Asset.tsx","../../src/AssetIcon/AssetIcon.tsx","../../src/AssetIcon/AssetIcon.styles.ts","../../src/Asset.styles.ts","../../src/types.ts"],"names":["React","cx","Box","Flex","Text","ArchiveIcon","AudioIcon","CodeIllustrationIcon","ImageIcon","MarkupIcon","PdfIcon","PlaintextIcon","RichtextIcon","PresentationIcon","SpreadsheetIcon","VideoIcon","tokens","css","getAssetIconStyles","AssetIcon","_a","_b","type","className","testId","otherProps","__objRest","styles","props","__spreadProps","__spreadValues","getAssetStyles","_Asset","ref","src","status","title","showPreview","Asset","types","isAssetType"],"mappings":"+kBAAA,OAAOA,MAAW,QAClB,OAAS,MAAAC,MAAU,UACnB,OACE,OAAAC,EACA,QAAAC,MAIK,uBACP,OAAS,QAAAC,MAAY,6BCTrB,OAAOJ,MAAW,QAClB,OACE,eAAAK,EACA,aAAAC,EACA,wBAAAC,EACA,aAAAC,EACA,cAAAC,EACA,WAAAC,EACA,iBAAAC,EACA,gBAAAC,EACA,oBAAAC,EACA,mBAAAC,EACA,aAAAC,MACK,wBAIP,OAAS,MAAAd,MAAU,UCjBnB,OAAOe,MAAY,yBACnB,OAAS,OAAAC,MAAW,UAEb,SAASC,GAAqB,CACnC,MAAO,CACL,KAAMD,EAAI,CACR,QAAS,eACT,MAAO,OACP,OAAQ,OACR,UAAW,CACT,KAAMD,EAAO,OACf,CACF,CAAC,CACH,CACF,CDcO,IAAMG,EAAaC,GAKJ,CALI,IAAAC,EAAAD,EACxB,MAAAE,EAAO,UACP,UAAAC,EACA,OAAAC,EAAS,kBA/BX,EA4B0BH,EAIrBI,EAAAC,EAJqBL,EAIrB,CAHH,OACA,YACA,WAGA,IAAMM,EAAST,EAAmB,EAC5BU,EAAQC,EAAAC,EAAA,GACTL,GADS,CAEZ,OAAAD,EACA,UAAWvB,EAAG0B,EAAO,KAAMJ,CAAS,CACtC,GAEA,OAAQD,OACD,QACH,OAAOtB,EAAA,cAACM,EAAAwB,EAAA,GAAcF,EAAO,MAC1B,OACH,OAAO5B,EAAA,cAACO,EAAAuB,EAAA,GAAyBF,EAAO,MACrC,QACH,OAAO5B,EAAA,cAACQ,EAAAsB,EAAA,GAAcF,EAAO,MAC1B,SACH,OAAO5B,EAAA,cAACS,EAAAqB,EAAA,GAAeF,EAAO,MAC3B,MACH,OAAO5B,EAAA,cAACU,EAAAoB,EAAA,GAAYF,EAAO,MACxB,YACH,OAAO5B,EAAA,cAACW,EAAAmB,EAAA,GAAkBF,EAAO,MAC9B,eACH,OAAO5B,EAAA,cAACa,EAAAiB,EAAA,GAAqBF,EAAO,MACjC,WACH,OAAO5B,EAAA,cAACY,EAAAkB,EAAA,GAAiBF,EAAO,MAC7B,cACH,OAAO5B,EAAA,cAACc,EAAAgB,EAAA,GAAoBF,EAAO,MAChC,QACH,OAAO5B,EAAA,cAACe,EAAAe,EAAA,GAAcF,EAAO,MAC1B,kBAEH,OAAO5B,EAAA,cAACK,EAAAyB,EAAA,GAAgBF,EAAO,EAErC,EAEAT,EAAU,YAAc,YEpExB,OAAOH,MAAY,yBACnB,OAAS,OAAAC,MAAW,UAEb,SAASc,GAAiB,CAC/B,MAAO,CACL,SAAUd,EAAI,CACZ,SAAU,UACZ,CAAC,EACD,UAAWA,EAAI,CACb,OAAQ,MACV,CAAC,EACD,MAAOA,EAAI,CACT,MAAO,OACP,SAAU,OACV,UAAW,MACb,CAAC,EACD,eAAgBA,EAAI,CAClB,QAAS,EACT,WAAY,WAAWD,EAAO,6BAA6BA,EAAO,0BAClE,SAAU,WACV,OAAQ,EACR,MAAO,EACP,KAAM,EACN,OAAQ,OACR,QAAS,OACT,SAAU,SACV,WAAY,WACZ,UAAW,aACX,WAAY,yBAAyBA,EAAO,8CAA8CA,EAAO,wCACjG,SAAU,CAAE,QAAS,CAAE,CACzB,CAAC,EACD,MAAOC,EAAI,CACT,OAAQ,EACR,KAAM,EACN,MAAO,EACP,SAAU,UACZ,CAAC,CACH,CACF,CHCA,SAASe,EACPZ,EASAa,EACA,CAVA,IAAAZ,EAAAD,EACE,WAAAG,EACA,IAAAW,EACA,OAAAC,EACA,OAAAX,EAAS,cACT,MAAAY,EACA,KAAAd,EAAO,OA9CX,EAwCED,EAOKI,EAAAC,EAPLL,EAOK,CANH,YACA,MACA,SACA,SACA,QACA,SAKF,IAAMM,EAASI,EAAe,EAIxBM,EAHUH,GAAOA,IAAQ,IAAMZ,IAAS,SAGfa,IAAW,WAE1C,OACEnC,EAAA,cAACE,EAAA4B,EAAA,CACC,UAAW7B,EAAG0B,EAAO,SAAUJ,CAAS,EACxC,OAAQC,EACR,IAAKS,GACDR,GAEHY,EACCrC,EAAA,cAAAA,EAAA,cACEA,EAAA,cAACG,EAAA,CACC,WAAW,SACX,eAAe,SACf,UAAWwB,EAAO,WAElB3B,EAAA,cAAC,OAAI,UAAW2B,EAAO,MAAO,IAAKO,EAAK,IAAKE,EAAO,CACtD,EACCA,GACCpC,EAAA,cAAC,OAAI,UAAW2B,EAAO,gBACrB3B,EAAA,cAACI,EAAA,CACC,UAAWuB,EAAO,MAClB,UAAU,aACV,OAAO,WACP,YAAW,IAEVS,CACH,CACF,CAEJ,EAEApC,EAAA,cAACG,EAAA,CACC,cAAc,SACd,WAAW,SACX,eAAe,SACf,YAAY,WACZ,aAAa,WACb,UAAWwB,EAAO,WAElB3B,EAAA,cAACG,EAAA,CACC,aAAa,WACb,UAAU,WACV,eAAe,UAEfH,EAAA,cAACmB,EAAA,CAAU,KAAMG,EAAM,CACzB,EACAtB,EAAA,cAACI,EAAA,CAAK,YAAW,GAAC,aAAa,WAAW,UAAU,WACjDgC,CACH,CACF,CAEJ,CAEJ,CAEAJ,EAAO,YAAc,QAEd,IAAMM,EAAQtC,EAAM,WAAWgC,CAAM,EIjHrC,IAAMO,EAAQ,CACnB,QAAS,UACT,MAAO,QACP,KAAM,OACN,MAAO,QACP,OAAQ,SACR,IAAK,MACL,UAAW,YACX,aAAc,eACd,SAAU,WACV,YAAa,cACb,MAAO,OACT,EAEO,SAASC,EAAYlB,EAAiC,CAC3D,OAAO,OAAO,KAAKiB,CAAK,EAAE,SAASjB,CAAI,CACzC","sourcesContent":["import React from 'react';\nimport { cx } from 'emotion';\nimport {\n  Box,\n  Flex,\n  type EntityStatus,\n  type PickUnion,\n  type CommonProps,\n} from '@contentful/f36-core';\nimport { Text } from '@contentful/f36-typography';\n\nimport { AssetIcon } from './AssetIcon/AssetIcon';\nimport { getAssetStyles } from './Asset.styles';\nimport type { AssetType } from './types';\n\nexport type AssetStatus = PickUnion<\n  EntityStatus,\n  'archived' | 'changed' | 'deleted' | 'draft' | 'published'\n>;\n\nexport interface AssetProps extends CommonProps {\n  /**\n   * A `src` attribute to use for image assets\n   */\n  src?: string;\n  /**\n   * The publish status of the asset\n   */\n  status?: AssetStatus;\n  /**\n   * The title of the asset\n   */\n  title?: string;\n  /**\n   * The type of asset being represented\n   */\n  type?: AssetType;\n}\n\nfunction _Asset(\n  {\n    className,\n    src,\n    status,\n    testId = 'cf-ui-asset',\n    title,\n    type = 'image',\n    ...otherProps\n  }: AssetProps,\n  ref: React.Ref<any>,\n) {\n  const styles = getAssetStyles();\n  const isImage = src && src !== '' && type === 'image';\n\n  // Do not show image previews when publish status is archived\n  const showPreview = isImage && status !== 'archived';\n\n  return (\n    <Box\n      className={cx(styles.relative, className)}\n      testId={testId}\n      ref={ref}\n      {...otherProps}\n    >\n      {showPreview ? (\n        <>\n          <Flex\n            alignItems=\"center\"\n            justifyContent=\"center\"\n            className={styles.height100}\n          >\n            <img className={styles.image} src={src} alt={title} />\n          </Flex>\n          {title && (\n            <div className={styles.titleContainer}>\n              <Text\n                className={styles.title}\n                fontColor=\"colorWhite\"\n                margin=\"spacingS\"\n                isTruncated\n              >\n                {title}\n              </Text>\n            </div>\n          )}\n        </>\n      ) : (\n        <Flex\n          flexDirection=\"column\"\n          alignItems=\"center\"\n          justifyContent=\"center\"\n          paddingLeft=\"spacingS\"\n          paddingRight=\"spacingS\"\n          className={styles.height100}\n        >\n          <Flex\n            marginBottom=\"spacingM\"\n            marginTop=\"spacingM\"\n            justifyContent=\"center\"\n          >\n            <AssetIcon type={type} />\n          </Flex>\n          <Text isTruncated marginBottom=\"spacingM\" fontColor=\"gray600\">\n            {title}\n          </Text>\n        </Flex>\n      )}\n    </Box>\n  );\n}\n\n_Asset.displayName = 'Asset';\n\nexport const Asset = React.forwardRef(_Asset);\n","import React from 'react';\nimport {\n  ArchiveIcon,\n  AudioIcon,\n  CodeIllustrationIcon,\n  ImageIcon,\n  MarkupIcon,\n  PdfIcon,\n  PlaintextIcon,\n  RichtextIcon,\n  PresentationIcon,\n  SpreadsheetIcon,\n  VideoIcon,\n} from '@contentful/f36-icons';\nimport type { GeneratedIconProps } from '@contentful/f36-icon';\nimport type { AssetType } from '../types';\n\nimport { cx } from 'emotion';\nimport { getAssetIconStyles } from './AssetIcon.styles';\n\nexport interface AssetIconProps\n  extends Omit<GeneratedIconProps, 'illustration' | 'ref'> {\n  type?: AssetType;\n}\n\n/**\n * Renders only the Illustration that would represent this asset's type\n */\nexport const AssetIcon = ({\n  type = 'archive',\n  className,\n  testId = 'cf-ui-asset-icon',\n  ...otherProps\n}: AssetIconProps) => {\n  const styles = getAssetIconStyles();\n  const props = {\n    ...otherProps,\n    testId,\n    className: cx(styles.root, className),\n  };\n\n  switch (type) {\n    case 'audio':\n      return <AudioIcon {...props} />;\n    case 'code':\n      return <CodeIllustrationIcon {...props} />;\n    case 'image':\n      return <ImageIcon {...props} />;\n    case 'markup':\n      return <MarkupIcon {...props} />;\n    case 'pdf':\n      return <PdfIcon {...props} />;\n    case 'plaintext':\n      return <PlaintextIcon {...props} />;\n    case 'presentation':\n      return <PresentationIcon {...props} />;\n    case 'richtext':\n      return <RichtextIcon {...props} />;\n    case 'spreadsheet':\n      return <SpreadsheetIcon {...props} />;\n    case 'video':\n      return <VideoIcon {...props} />;\n    case 'archive':\n    default:\n      return <ArchiveIcon {...props} />;\n  }\n};\n\nAssetIcon.displayName = 'AssetIcon';\n","import tokens from '@contentful/f36-tokens';\nimport { css } from 'emotion';\n\nexport function getAssetIconStyles() {\n  return {\n    root: css({\n      display: 'inline-block',\n      width: '39px',\n      height: '39px',\n      'g, path': {\n        fill: tokens.gray600,\n      },\n    }),\n  };\n}\n","import tokens from '@contentful/f36-tokens';\nimport { css } from 'emotion';\n\nexport function getAssetStyles() {\n  return {\n    relative: css({\n      position: 'relative',\n    }),\n    height100: css({\n      height: '100%',\n    }),\n    image: css({\n      width: 'auto',\n      maxWidth: '100%',\n      maxHeight: '100%',\n    }),\n    titleContainer: css({\n      opacity: 0,\n      transition: `opacity ${tokens.transitionDurationDefault} ${tokens.transitionEasingDefault}`,\n      position: 'absolute',\n      bottom: 0,\n      right: 0,\n      left: 0,\n      height: '100%',\n      display: 'flex',\n      overflow: 'hidden',\n      alignItems: 'flex-end',\n      boxSizing: 'border-box',\n      background: `linear-gradient(0deg, ${tokens.gray900} 0%, transparent calc(1rem * (100 / ${tokens.fontBaseDefault})), transparent 100% )`,\n      ':hover': { opacity: 1 },\n    }),\n    title: css({\n      bottom: 0,\n      left: 0,\n      right: 0,\n      position: 'absolute',\n    }),\n  };\n}\n","export const types = {\n  archive: 'archive',\n  audio: 'audio',\n  code: 'code',\n  image: 'image',\n  markup: 'markup',\n  pdf: 'pdf',\n  plaintext: 'plaintext',\n  presentation: 'presentation',\n  richtext: 'richtext',\n  spreadsheet: 'spreadsheet',\n  video: 'video',\n};\n\nexport function isAssetType(type: string): type is AssetType {\n  return Object.keys(types).includes(type);\n}\n\nexport type AssetType = keyof typeof types;\n"]}
+{"version":3,"sources":["../../src/Asset.tsx","../../src/AssetIcon/AssetIcon.tsx","../../src/AssetIcon/AssetIcon.styles.ts","../../src/Asset.styles.ts","../../src/types.ts"],"names":["React","cx","Box","Flex","Text","FileArchiveIcon","FileAudioIcon","BracketsCurlyIcon","ImageSquareIcon","FileCodeIcon","FilePdfIcon","FileTextIcon","RichTextIcon","PresentationIcon","TableIcon","FileVideoIcon","tokens","css","getAssetIconStyles","AssetIcon","_a","_b","type","className","testId","otherProps","__objRest","styles","props","__spreadProps","__spreadValues","getAssetStyles","_Asset","ref","src","status","title","showPreview","Asset","types","isAssetType"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { cx } from 'emotion';\nimport {\n  Box,\n  Flex,\n  type EntityStatus,\n  type PickUnion,\n  type CommonProps,\n} from '@contentful/f36-core';\nimport { Text } from '@contentful/f36-typography';\n\nimport { AssetIcon } from './AssetIcon/AssetIcon';\nimport { getAssetStyles } from './Asset.styles';\nimport type { AssetType } from './types';\n\nexport type AssetStatus = PickUnion<\n  EntityStatus,\n  'archived' | 'changed' | 'deleted' | 'draft' | 'published'\n>;\n\nexport interface AssetProps extends CommonProps {\n  /**\n   * A `src` attribute to use for image assets\n   */\n  src?: string;\n  /**\n   * The publish status of the asset\n   */\n  status?: AssetStatus;\n  /**\n   * The title of the asset\n   */\n  title?: string;\n  /**\n   * The type of asset being represented\n   */\n  type?: AssetType;\n}\n\nfunction _Asset(\n  {\n    className,\n    src,\n    status,\n    testId = 'cf-ui-asset',\n    title,\n    type = 'image',\n    ...otherProps\n  }: AssetProps,\n  ref: React.Ref<any>,\n) {\n  const styles = getAssetStyles();\n  const isImage = src && src !== '' && type === 'image';\n\n  // Do not show image previews when publish status is archived\n  const showPreview = isImage && status !== 'archived';\n\n  return (\n    <Box\n      className={cx(styles.root, className)}\n      testId={testId}\n      ref={ref}\n      {...otherProps}\n    >\n      {showPreview ? (\n        <>\n          <Flex\n            alignItems=\"center\"\n            justifyContent=\"center\"\n            className={styles.height100}\n          >\n            <img className={styles.image} src={src} alt={title} />\n          </Flex>\n          {title && (\n            <div className={styles.titleContainer}>\n              <Text\n                className={styles.title}\n                fontColor=\"colorWhite\"\n                margin=\"spacingS\"\n                isTruncated\n              >\n                {title}\n              </Text>\n            </div>\n          )}\n        </>\n      ) : (\n        <Flex\n          flexDirection=\"column\"\n          alignItems=\"center\"\n          justifyContent=\"center\"\n          paddingLeft=\"spacingS\"\n          paddingRight=\"spacingS\"\n          className={styles.height100}\n        >\n          <Flex\n            marginBottom=\"spacingM\"\n            marginTop=\"spacingM\"\n            justifyContent=\"center\"\n          >\n            <AssetIcon type={type} />\n          </Flex>\n          <Text isTruncated marginBottom=\"spacingM\" fontColor=\"gray600\">\n            {title}\n          </Text>\n        </Flex>\n      )}\n    </Box>\n  );\n}\n\n_Asset.displayName = 'Asset';\n\nexport const Asset = React.forwardRef(_Asset);\n","import React from 'react';\nimport {\n  FileArchiveIcon,\n  FileAudioIcon,\n  BracketsCurlyIcon,\n  ImageSquareIcon,\n  FileCodeIcon,\n  FilePdfIcon,\n  FileTextIcon,\n  RichTextIcon,\n  PresentationIcon,\n  TableIcon,\n  FileVideoIcon,\n} from '@contentful/f36-icons';\nimport type { GeneratedIconProps } from '@contentful/f36-icon';\nimport type { AssetType } from '../types';\n\nimport { cx } from 'emotion';\nimport { getAssetIconStyles } from './AssetIcon.styles';\n\nexport interface AssetIconProps\n  extends Omit<GeneratedIconProps, 'illustration' | 'ref'> {\n  type?: AssetType;\n}\n\n/**\n * Renders only the Illustration that would represent this asset's type\n */\nexport const AssetIcon = ({\n  type = 'archive',\n  className,\n  testId = 'cf-ui-asset-icon',\n  ...otherProps\n}: AssetIconProps) => {\n  const styles = getAssetIconStyles();\n  const props = {\n    ...otherProps,\n    testId,\n    className: cx(styles.root, className),\n  };\n\n  switch (type) {\n    case 'audio':\n      return <FileAudioIcon {...props} />;\n    case 'code':\n      return <BracketsCurlyIcon {...props} />;\n    case 'image':\n      return <ImageSquareIcon {...props} />;\n    case 'markup':\n      return <FileCodeIcon {...props} />;\n    case 'pdf':\n      return <FilePdfIcon {...props} />;\n    case 'plaintext':\n      return <FileTextIcon {...props} />;\n    case 'presentation':\n      return <PresentationIcon {...props} />;\n    case 'richtext':\n      return <RichTextIcon {...props} />;\n    case 'spreadsheet':\n      return <TableIcon {...props} />;\n    case 'video':\n      return <FileVideoIcon {...props} />;\n    case 'archive':\n    default:\n      return <FileArchiveIcon {...props} />;\n  }\n};\n\nAssetIcon.displayName = 'AssetIcon';\n","import tokens from '@contentful/f36-tokens';\nimport { css } from 'emotion';\n\nexport function getAssetIconStyles() {\n  return {\n    root: css({\n      display: 'inline-block',\n      width: '39px',\n      height: '39px',\n      'g, path': {\n        fill: tokens.gray600,\n      },\n    }),\n  };\n}\n","import tokens from '@contentful/f36-tokens';\nimport { css } from 'emotion';\n\nexport function getAssetStyles() {\n  return {\n    root: css({\n      position: 'relative',\n      width: '100%',\n    }),\n    height100: css({\n      height: '100%',\n    }),\n    image: css({\n      width: 'auto',\n      maxWidth: '100%',\n      maxHeight: '100%',\n    }),\n    titleContainer: css({\n      opacity: 0,\n      transition: `opacity ${tokens.transitionDurationDefault} ${tokens.transitionEasingDefault}`,\n      position: 'absolute',\n      bottom: 0,\n      right: 0,\n      left: 0,\n      height: '100%',\n      display: 'flex',\n      overflow: 'hidden',\n      alignItems: 'flex-end',\n      boxSizing: 'border-box',\n      background: `linear-gradient(0deg, ${tokens.gray900} 0%, transparent calc(1rem * (100 / ${tokens.fontBaseDefault})), transparent 100% )`,\n      ':hover': { opacity: 1 },\n    }),\n    title: css({\n      bottom: 0,\n      left: 0,\n      right: 0,\n      position: 'absolute',\n    }),\n  };\n}\n","export const types = {\n  archive: 'archive',\n  audio: 'audio',\n  code: 'code',\n  image: 'image',\n  markup: 'markup',\n  pdf: 'pdf',\n  plaintext: 'plaintext',\n  presentation: 'presentation',\n  richtext: 'richtext',\n  spreadsheet: 'spreadsheet',\n  video: 'video',\n};\n\nexport function isAssetType(type: string): type is AssetType {\n  return Object.keys(types).includes(type);\n}\n\nexport type AssetType = keyof typeof types;\n"]}

package/dist/index.d.mts

@@ -0,0 +1,53 @@
+import React from 'react';
+import { PickUnion, EntityStatus, CommonProps } from '@contentful/f36-core';
+import { GeneratedIconProps } from '@contentful/f36-icon';
+
+declare const types: {
+    archive: string;
+    audio: string;
+    code: string;
+    image: string;
+    markup: string;
+    pdf: string;
+    plaintext: string;
+    presentation: string;
+    richtext: string;
+    spreadsheet: string;
+    video: string;
+};
+declare function isAssetType(type: string): type is AssetType;
+declare type AssetType = keyof typeof types;
+
+declare type AssetStatus = PickUnion<EntityStatus, 'archived' | 'changed' | 'deleted' | 'draft' | 'published'>;
+interface AssetProps extends CommonProps {
+    /**
+     * A `src` attribute to use for image assets
+     */
+    src?: string;
+    /**
+     * The publish status of the asset
+     */
+    status?: AssetStatus;
+    /**
+     * The title of the asset
+     */
+    title?: string;
+    /**
+     * The type of asset being represented
+     */
+    type?: AssetType;
+}
+declare const Asset: React.ForwardRefExoticComponent<AssetProps & React.RefAttributes<any>>;
+
+interface AssetIconProps extends Omit<GeneratedIconProps, 'illustration' | 'ref'> {
+    type?: AssetType;
+}
+/**
+ * Renders only the Illustration that would represent this asset's type
+ */
+declare const AssetIcon: {
+    ({ type, className, testId, ...otherProps }: AssetIconProps): JSX.Element;
+    displayName: string;
+};
+
+export { Asset, AssetIcon, AssetIconProps, AssetProps, AssetStatus, AssetType, isAssetType };

package/dist/index.js

@@ -1,22 +1,21 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var n = require('react');
 var emotion = require('emotion');
 var f36Core = require('@contentful/f36-core');
 var f36Typography = require('@contentful/f36-typography');
 var f36Icons = require('@contentful/f36-icons');
-var g = require('@contentful/f36-tokens');
+var y = require('@contentful/f36-tokens');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
-var n__default = /*#__PURE__*/_interopDefaultLegacy(n);
-var g__default = /*#__PURE__*/_interopDefaultLegacy(g);
+var n__default = /*#__PURE__*/_interopDefault(n);
+var y__default = /*#__PURE__*/_interopDefault(y);
 
-var N=Object.defineProperty,w=Object.defineProperties;var B=Object.getOwnPropertyDescriptors;var f=Object.getOwnPropertySymbols;var I=Object.prototype.hasOwnProperty,v=Object.prototype.propertyIsEnumerable;var A=(t,e,s)=>e in t?N(t,e,{enumerable:!0,configurable:!0,writable:!0,value:s}):t[e]=s,o=(t,e)=>{for(var s in e||(e={}))I.call(e,s)&&A(t,s,e[s]);if(f)for(var s of f(e))v.call(e,s)&&A(t,s,e[s]);return t},P=(t,e)=>w(t,B(e));var d=(t,e)=>{var s={};for(var r in t)I.call(t,r)&&e.indexOf(r)<0&&(s[r]=t[r]);if(t!=null&&f)for(var r of f(t))e.indexOf(r)<0&&v.call(t,r)&&(s[r]=t[r]);return s};function T(){return {root:emotion.css({display:"inline-block",width:"39px",height:"39px","g, path":{fill:g__default["default"].gray600}})}}var u=c=>{var m=c,{type:t="archive",className:e,testId:s="cf-ui-asset-icon"}=m,r=d(m,["type","className","testId"]);let y=T(),i=P(o({},r),{testId:s,className:emotion.cx(y.root,e)});switch(t){case"audio":return n__default["default"].createElement(f36Icons.AudioIcon,o({},i));case"code":return n__default["default"].createElement(f36Icons.CodeIllustrationIcon,o({},i));case"image":return n__default["default"].createElement(f36Icons.ImageIcon,o({},i));case"markup":return n__default["default"].createElement(f36Icons.MarkupIcon,o({},i));case"pdf":return n__default["default"].createElement(f36Icons.PdfIcon,o({},i));case"plaintext":return n__default["default"].createElement(f36Icons.PlaintextIcon,o({},i));case"presentation":return n__default["default"].createElement(f36Icons.PresentationIcon,o({},i));case"richtext":return n__default["default"].createElement(f36Icons.RichtextIcon,o({},i));case"spreadsheet":return n__default["default"].createElement(f36Icons.SpreadsheetIcon,o({},i));case"video":return n__default["default"].createElement(f36Icons.VideoIcon,o({},i));case"archive":default:return n__default["default"].createElement(f36Icons.ArchiveIcon,o({},i))}};u.displayName="AssetIcon";function S(){return {relative:emotion.css({position:"relative"}),height100:emotion.css({height:"100%"}),image:emotion.css({width:"auto",maxWidth:"100%",maxHeight:"100%"}),titleContainer:emotion.css({opacity:0,transition:`opacity ${g__default["default"].transitionDurationDefault} ${g__default["default"].transitionEasingDefault}`,position:"absolute",bottom:0,right:0,left:0,height:"100%",display:"flex",overflow:"hidden",alignItems:"flex-end",boxSizing:"border-box",background:`linear-gradient(0deg, ${g__default["default"].gray900} 0%, transparent calc(1rem * (100 / ${g__default["default"].fontBaseDefault})), transparent 100% )`,":hover":{opacity:1}}),title:emotion.css({bottom:0,left:0,right:0,position:"absolute"})}}function b(X,i){var h=X,{className:t,src:e,status:s,testId:r="cf-ui-asset",title:c,type:m="image"}=h,y=d(h,["className","src","status","testId","title","type"]);let p=S(),C=e&&e!==""&&m==="image"&&s!=="archived";return n__default["default"].createElement(f36Core.Box,o({className:emotion.cx(p.relative,t),testId:r,ref:i},y),C?n__default["default"].createElement(n__default["default"].Fragment,null,n__default["default"].createElement(f36Core.Flex,{alignItems:"center",justifyContent:"center",className:p.height100},n__default["default"].createElement("img",{className:p.image,src:e,alt:c})),c&&n__default["default"].createElement("div",{className:p.titleContainer},n__default["default"].createElement(f36Typography.Text,{className:p.title,fontColor:"colorWhite",margin:"spacingS",isTruncated:!0},c))):n__default["default"].createElement(f36Core.Flex,{flexDirection:"column",alignItems:"center",justifyContent:"center",paddingLeft:"spacingS",paddingRight:"spacingS",className:p.height100},n__default["default"].createElement(f36Core.Flex,{marginBottom:"spacingM",marginTop:"spacingM",justifyContent:"center"},n__default["default"].createElement(u,{type:m})),n__default["default"].createElement(f36Typography.Text,{isTruncated:!0,marginBottom:"spacingM",fontColor:"gray600"},c)))}b.displayName="Asset";var J=n__default["default"].forwardRef(b);var K={archive:"archive",audio:"audio",code:"code",image:"image",markup:"markup",pdf:"pdf",plaintext:"plaintext",presentation:"presentation",richtext:"richtext",spreadsheet:"spreadsheet",video:"video"};function Q(t){return Object.keys(K).includes(t)}
+var F=Object.defineProperty,N=Object.defineProperties;var w=Object.getOwnPropertyDescriptors;var f=Object.getOwnPropertySymbols;var I=Object.prototype.hasOwnProperty,T=Object.prototype.propertyIsEnumerable;var A=(e,t,s)=>t in e?F(e,t,{enumerable:!0,configurable:!0,writable:!0,value:s}):e[t]=s,o=(e,t)=>{for(var s in t||(t={}))I.call(t,s)&&A(e,s,t[s]);if(f)for(var s of f(t))T.call(t,s)&&A(e,s,t[s]);return e},v=(e,t)=>N(e,w(t));var d=(e,t)=>{var s={};for(var r in e)I.call(e,r)&&t.indexOf(r)<0&&(s[r]=e[r]);if(e!=null&&f)for(var r of f(e))t.indexOf(r)<0&&T.call(e,r)&&(s[r]=e[r]);return s};function P(){return {root:emotion.css({display:"inline-block",width:"39px",height:"39px","g, path":{fill:y__default.default.gray600}})}}var u=c=>{var m=c,{type:e="archive",className:t,testId:s="cf-ui-asset-icon"}=m,r=d(m,["type","className","testId"]);let g=P(),i=v(o({},r),{testId:s,className:emotion.cx(g.root,t)});switch(e){case"audio":return n__default.default.createElement(f36Icons.FileAudioIcon,o({},i));case"code":return n__default.default.createElement(f36Icons.BracketsCurlyIcon,o({},i));case"image":return n__default.default.createElement(f36Icons.ImageSquareIcon,o({},i));case"markup":return n__default.default.createElement(f36Icons.FileCodeIcon,o({},i));case"pdf":return n__default.default.createElement(f36Icons.FilePdfIcon,o({},i));case"plaintext":return n__default.default.createElement(f36Icons.FileTextIcon,o({},i));case"presentation":return n__default.default.createElement(f36Icons.PresentationIcon,o({},i));case"richtext":return n__default.default.createElement(f36Icons.RichTextIcon,o({},i));case"spreadsheet":return n__default.default.createElement(f36Icons.TableIcon,o({},i));case"video":return n__default.default.createElement(f36Icons.FileVideoIcon,o({},i));case"archive":default:return n__default.default.createElement(f36Icons.FileArchiveIcon,o({},i))}};u.displayName="AssetIcon";function S(){return {root:emotion.css({position:"relative",width:"100%"}),height100:emotion.css({height:"100%"}),image:emotion.css({width:"auto",maxWidth:"100%",maxHeight:"100%"}),titleContainer:emotion.css({opacity:0,transition:`opacity ${y__default.default.transitionDurationDefault} ${y__default.default.transitionEasingDefault}`,position:"absolute",bottom:0,right:0,left:0,height:"100%",display:"flex",overflow:"hidden",alignItems:"flex-end",boxSizing:"border-box",background:`linear-gradient(0deg, ${y__default.default.gray900} 0%, transparent calc(1rem * (100 / ${y__default.default.fontBaseDefault})), transparent 100% )`,":hover":{opacity:1}}),title:emotion.css({bottom:0,left:0,right:0,position:"absolute"})}}function k(X,i){var h=X,{className:e,src:t,status:s,testId:r="cf-ui-asset",title:c,type:m="image"}=h,g=d(h,["className","src","status","testId","title","type"]);let p=S(),C=t&&t!==""&&m==="image"&&s!=="archived";return n__default.default.createElement(f36Core.Box,o({className:emotion.cx(p.root,e),testId:r,ref:i},g),C?n__default.default.createElement(n__default.default.Fragment,null,n__default.default.createElement(f36Core.Flex,{alignItems:"center",justifyContent:"center",className:p.height100},n__default.default.createElement("img",{className:p.image,src:t,alt:c})),c&&n__default.default.createElement("div",{className:p.titleContainer},n__default.default.createElement(f36Typography.Text,{className:p.title,fontColor:"colorWhite",margin:"spacingS",isTruncated:!0},c))):n__default.default.createElement(f36Core.Flex,{flexDirection:"column",alignItems:"center",justifyContent:"center",paddingLeft:"spacingS",paddingRight:"spacingS",className:p.height100},n__default.default.createElement(f36Core.Flex,{marginBottom:"spacingM",marginTop:"spacingM",justifyContent:"center"},n__default.default.createElement(u,{type:m})),n__default.default.createElement(f36Typography.Text,{isTruncated:!0,marginBottom:"spacingM",fontColor:"gray600"},c)))}k.displayName="Asset";var J=n__default.default.forwardRef(k);var K={archive:"archive",audio:"audio",code:"code",image:"image",markup:"markup",pdf:"pdf",plaintext:"plaintext",presentation:"presentation",richtext:"richtext",spreadsheet:"spreadsheet",video:"video"};function Q(e){return Object.keys(K).includes(e)}
 
 exports.Asset = J;
 exports.AssetIcon = u;
 exports.isAssetType = Q;
+//# sourceMappingURL=out.js.map
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/Asset.tsx","../src/AssetIcon/AssetIcon.tsx","../src/AssetIcon/AssetIcon.styles.ts","../src/Asset.styles.ts","../src/types.ts"],"names":["React","cx","Box","Flex","Text","ArchiveIcon","AudioIcon","CodeIllustrationIcon","ImageIcon","MarkupIcon","PdfIcon","PlaintextIcon","RichtextIcon","PresentationIcon","SpreadsheetIcon","VideoIcon","tokens","css","getAssetIconStyles","AssetIcon","_a","_b","type","className","testId","otherProps","__objRest","styles","props","__spreadProps","__spreadValues","getAssetStyles","_Asset","ref","src","status","title","showPreview","Asset","types","isAssetType"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { cx } from 'emotion';\nimport {\n  Box,\n  Flex,\n  type EntityStatus,\n  type PickUnion,\n  type CommonProps,\n} from '@contentful/f36-core';\nimport { Text } from '@contentful/f36-typography';\n\nimport { AssetIcon } from './AssetIcon/AssetIcon';\nimport { getAssetStyles } from './Asset.styles';\nimport type { AssetType } from './types';\n\nexport type AssetStatus = PickUnion<\n  EntityStatus,\n  'archived' | 'changed' | 'deleted' | 'draft' | 'published'\n>;\n\nexport interface AssetProps extends CommonProps {\n  /**\n   * A `src` attribute to use for image assets\n   */\n  src?: string;\n  /**\n   * The publish status of the asset\n   */\n  status?: AssetStatus;\n  /**\n   * The title of the asset\n   */\n  title?: string;\n  /**\n   * The type of asset being represented\n   */\n  type?: AssetType;\n}\n\nfunction _Asset(\n  {\n    className,\n    src,\n    status,\n    testId = 'cf-ui-asset',\n    title,\n    type = 'image',\n    ...otherProps\n  }: AssetProps,\n  ref: React.Ref<any>,\n) {\n  const styles = getAssetStyles();\n  const isImage = src && src !== '' && type === 'image';\n\n  // Do not show image previews when publish status is archived\n  const showPreview = isImage && status !== 'archived';\n\n  return (\n    <Box\n      className={cx(styles.relative, className)}\n      testId={testId}\n      ref={ref}\n      {...otherProps}\n    >\n      {showPreview ? (\n        <>\n          <Flex\n            alignItems=\"center\"\n            justifyContent=\"center\"\n            className={styles.height100}\n          >\n            <img className={styles.image} src={src} alt={title} />\n          </Flex>\n          {title && (\n            <div className={styles.titleContainer}>\n              <Text\n                className={styles.title}\n                fontColor=\"colorWhite\"\n                margin=\"spacingS\"\n                isTruncated\n              >\n                {title}\n              </Text>\n            </div>\n          )}\n        </>\n      ) : (\n        <Flex\n          flexDirection=\"column\"\n          alignItems=\"center\"\n          justifyContent=\"center\"\n          paddingLeft=\"spacingS\"\n          paddingRight=\"spacingS\"\n          className={styles.height100}\n        >\n          <Flex\n            marginBottom=\"spacingM\"\n            marginTop=\"spacingM\"\n            justifyContent=\"center\"\n          >\n            <AssetIcon type={type} />\n          </Flex>\n          <Text isTruncated marginBottom=\"spacingM\" fontColor=\"gray600\">\n            {title}\n          </Text>\n        </Flex>\n      )}\n    </Box>\n  );\n}\n\n_Asset.displayName = 'Asset';\n\nexport const Asset = React.forwardRef(_Asset);\n","import React from 'react';\nimport {\n  ArchiveIcon,\n  AudioIcon,\n  CodeIllustrationIcon,\n  ImageIcon,\n  MarkupIcon,\n  PdfIcon,\n  PlaintextIcon,\n  RichtextIcon,\n  PresentationIcon,\n  SpreadsheetIcon,\n  VideoIcon,\n} from '@contentful/f36-icons';\nimport type { GeneratedIconProps } from '@contentful/f36-icon';\nimport type { AssetType } from '../types';\n\nimport { cx } from 'emotion';\nimport { getAssetIconStyles } from './AssetIcon.styles';\n\nexport interface AssetIconProps\n  extends Omit<GeneratedIconProps, 'illustration' | 'ref'> {\n  type?: AssetType;\n}\n\n/**\n * Renders only the Illustration that would represent this asset's type\n */\nexport const AssetIcon = ({\n  type = 'archive',\n  className,\n  testId = 'cf-ui-asset-icon',\n  ...otherProps\n}: AssetIconProps) => {\n  const styles = getAssetIconStyles();\n  const props = {\n    ...otherProps,\n    testId,\n    className: cx(styles.root, className),\n  };\n\n  switch (type) {\n    case 'audio':\n      return <AudioIcon {...props} />;\n    case 'code':\n      return <CodeIllustrationIcon {...props} />;\n    case 'image':\n      return <ImageIcon {...props} />;\n    case 'markup':\n      return <MarkupIcon {...props} />;\n    case 'pdf':\n      return <PdfIcon {...props} />;\n    case 'plaintext':\n      return <PlaintextIcon {...props} />;\n    case 'presentation':\n      return <PresentationIcon {...props} />;\n    case 'richtext':\n      return <RichtextIcon {...props} />;\n    case 'spreadsheet':\n      return <SpreadsheetIcon {...props} />;\n    case 'video':\n      return <VideoIcon {...props} />;\n    case 'archive':\n    default:\n      return <ArchiveIcon {...props} />;\n  }\n};\n\nAssetIcon.displayName = 'AssetIcon';\n","import tokens from '@contentful/f36-tokens';\nimport { css } from 'emotion';\n\nexport function getAssetIconStyles() {\n  return {\n    root: css({\n      display: 'inline-block',\n      width: '39px',\n      height: '39px',\n      'g, path': {\n        fill: tokens.gray600,\n      },\n    }),\n  };\n}\n","import tokens from '@contentful/f36-tokens';\nimport { css } from 'emotion';\n\nexport function getAssetStyles() {\n  return {\n    relative: css({\n      position: 'relative',\n    }),\n    height100: css({\n      height: '100%',\n    }),\n    image: css({\n      width: 'auto',\n      maxWidth: '100%',\n      maxHeight: '100%',\n    }),\n    titleContainer: css({\n      opacity: 0,\n      transition: `opacity ${tokens.transitionDurationDefault} ${tokens.transitionEasingDefault}`,\n      position: 'absolute',\n      bottom: 0,\n      right: 0,\n      left: 0,\n      height: '100%',\n      display: 'flex',\n      overflow: 'hidden',\n      alignItems: 'flex-end',\n      boxSizing: 'border-box',\n      background: `linear-gradient(0deg, ${tokens.gray900} 0%, transparent calc(1rem * (100 / ${tokens.fontBaseDefault})), transparent 100% )`,\n      ':hover': { opacity: 1 },\n    }),\n    title: css({\n      bottom: 0,\n      left: 0,\n      right: 0,\n      position: 'absolute',\n    }),\n  };\n}\n","export const types = {\n  archive: 'archive',\n  audio: 'audio',\n  code: 'code',\n  image: 'image',\n  markup: 'markup',\n  pdf: 'pdf',\n  plaintext: 'plaintext',\n  presentation: 'presentation',\n  richtext: 'richtext',\n  spreadsheet: 'spreadsheet',\n  video: 'video',\n};\n\nexport function isAssetType(type: string): type is AssetType {\n  return Object.keys(types).includes(type);\n}\n\nexport type AssetType = keyof typeof types;\n"]}
+{"version":3,"sources":["../src/Asset.tsx","../src/AssetIcon/AssetIcon.tsx","../src/AssetIcon/AssetIcon.styles.ts","../src/Asset.styles.ts","../src/types.ts"],"names":["React","cx","Box","Flex","Text","FileArchiveIcon","FileAudioIcon","BracketsCurlyIcon","ImageSquareIcon","FileCodeIcon","FilePdfIcon","FileTextIcon","RichTextIcon","PresentationIcon","TableIcon","FileVideoIcon","tokens","css","getAssetIconStyles","AssetIcon","_a","_b","type","className","testId","otherProps","__objRest","styles","props","__spreadProps","__spreadValues","getAssetStyles","_Asset","ref","src","status","title","showPreview","Asset","types","isAssetType"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { cx } from 'emotion';\nimport {\n  Box,\n  Flex,\n  type EntityStatus,\n  type PickUnion,\n  type CommonProps,\n} from '@contentful/f36-core';\nimport { Text } from '@contentful/f36-typography';\n\nimport { AssetIcon } from './AssetIcon/AssetIcon';\nimport { getAssetStyles } from './Asset.styles';\nimport type { AssetType } from './types';\n\nexport type AssetStatus = PickUnion<\n  EntityStatus,\n  'archived' | 'changed' | 'deleted' | 'draft' | 'published'\n>;\n\nexport interface AssetProps extends CommonProps {\n  /**\n   * A `src` attribute to use for image assets\n   */\n  src?: string;\n  /**\n   * The publish status of the asset\n   */\n  status?: AssetStatus;\n  /**\n   * The title of the asset\n   */\n  title?: string;\n  /**\n   * The type of asset being represented\n   */\n  type?: AssetType;\n}\n\nfunction _Asset(\n  {\n    className,\n    src,\n    status,\n    testId = 'cf-ui-asset',\n    title,\n    type = 'image',\n    ...otherProps\n  }: AssetProps,\n  ref: React.Ref<any>,\n) {\n  const styles = getAssetStyles();\n  const isImage = src && src !== '' && type === 'image';\n\n  // Do not show image previews when publish status is archived\n  const showPreview = isImage && status !== 'archived';\n\n  return (\n    <Box\n      className={cx(styles.root, className)}\n      testId={testId}\n      ref={ref}\n      {...otherProps}\n    >\n      {showPreview ? (\n        <>\n          <Flex\n            alignItems=\"center\"\n            justifyContent=\"center\"\n            className={styles.height100}\n          >\n            <img className={styles.image} src={src} alt={title} />\n          </Flex>\n          {title && (\n            <div className={styles.titleContainer}>\n              <Text\n                className={styles.title}\n                fontColor=\"colorWhite\"\n                margin=\"spacingS\"\n                isTruncated\n              >\n                {title}\n              </Text>\n            </div>\n          )}\n        </>\n      ) : (\n        <Flex\n          flexDirection=\"column\"\n          alignItems=\"center\"\n          justifyContent=\"center\"\n          paddingLeft=\"spacingS\"\n          paddingRight=\"spacingS\"\n          className={styles.height100}\n        >\n          <Flex\n            marginBottom=\"spacingM\"\n            marginTop=\"spacingM\"\n            justifyContent=\"center\"\n          >\n            <AssetIcon type={type} />\n          </Flex>\n          <Text isTruncated marginBottom=\"spacingM\" fontColor=\"gray600\">\n            {title}\n          </Text>\n        </Flex>\n      )}\n    </Box>\n  );\n}\n\n_Asset.displayName = 'Asset';\n\nexport const Asset = React.forwardRef(_Asset);\n","import React from 'react';\nimport {\n  FileArchiveIcon,\n  FileAudioIcon,\n  BracketsCurlyIcon,\n  ImageSquareIcon,\n  FileCodeIcon,\n  FilePdfIcon,\n  FileTextIcon,\n  RichTextIcon,\n  PresentationIcon,\n  TableIcon,\n  FileVideoIcon,\n} from '@contentful/f36-icons';\nimport type { GeneratedIconProps } from '@contentful/f36-icon';\nimport type { AssetType } from '../types';\n\nimport { cx } from 'emotion';\nimport { getAssetIconStyles } from './AssetIcon.styles';\n\nexport interface AssetIconProps\n  extends Omit<GeneratedIconProps, 'illustration' | 'ref'> {\n  type?: AssetType;\n}\n\n/**\n * Renders only the Illustration that would represent this asset's type\n */\nexport const AssetIcon = ({\n  type = 'archive',\n  className,\n  testId = 'cf-ui-asset-icon',\n  ...otherProps\n}: AssetIconProps) => {\n  const styles = getAssetIconStyles();\n  const props = {\n    ...otherProps,\n    testId,\n    className: cx(styles.root, className),\n  };\n\n  switch (type) {\n    case 'audio':\n      return <FileAudioIcon {...props} />;\n    case 'code':\n      return <BracketsCurlyIcon {...props} />;\n    case 'image':\n      return <ImageSquareIcon {...props} />;\n    case 'markup':\n      return <FileCodeIcon {...props} />;\n    case 'pdf':\n      return <FilePdfIcon {...props} />;\n    case 'plaintext':\n      return <FileTextIcon {...props} />;\n    case 'presentation':\n      return <PresentationIcon {...props} />;\n    case 'richtext':\n      return <RichTextIcon {...props} />;\n    case 'spreadsheet':\n      return <TableIcon {...props} />;\n    case 'video':\n      return <FileVideoIcon {...props} />;\n    case 'archive':\n    default:\n      return <FileArchiveIcon {...props} />;\n  }\n};\n\nAssetIcon.displayName = 'AssetIcon';\n","import tokens from '@contentful/f36-tokens';\nimport { css } from 'emotion';\n\nexport function getAssetIconStyles() {\n  return {\n    root: css({\n      display: 'inline-block',\n      width: '39px',\n      height: '39px',\n      'g, path': {\n        fill: tokens.gray600,\n      },\n    }),\n  };\n}\n","import tokens from '@contentful/f36-tokens';\nimport { css } from 'emotion';\n\nexport function getAssetStyles() {\n  return {\n    root: css({\n      position: 'relative',\n      width: '100%',\n    }),\n    height100: css({\n      height: '100%',\n    }),\n    image: css({\n      width: 'auto',\n      maxWidth: '100%',\n      maxHeight: '100%',\n    }),\n    titleContainer: css({\n      opacity: 0,\n      transition: `opacity ${tokens.transitionDurationDefault} ${tokens.transitionEasingDefault}`,\n      position: 'absolute',\n      bottom: 0,\n      right: 0,\n      left: 0,\n      height: '100%',\n      display: 'flex',\n      overflow: 'hidden',\n      alignItems: 'flex-end',\n      boxSizing: 'border-box',\n      background: `linear-gradient(0deg, ${tokens.gray900} 0%, transparent calc(1rem * (100 / ${tokens.fontBaseDefault})), transparent 100% )`,\n      ':hover': { opacity: 1 },\n    }),\n    title: css({\n      bottom: 0,\n      left: 0,\n      right: 0,\n      position: 'absolute',\n    }),\n  };\n}\n","export const types = {\n  archive: 'archive',\n  audio: 'audio',\n  code: 'code',\n  image: 'image',\n  markup: 'markup',\n  pdf: 'pdf',\n  plaintext: 'plaintext',\n  presentation: 'presentation',\n  richtext: 'richtext',\n  spreadsheet: 'spreadsheet',\n  video: 'video',\n};\n\nexport function isAssetType(type: string): type is AssetType {\n  return Object.keys(types).includes(type);\n}\n\nexport type AssetType = keyof typeof types;\n"]}

package/package.json

@@ -1,20 +1,21 @@
 {
   "name": "@contentful/f36-asset",
-  "version": "5.0.0",
+  "version": "5.1.0",
   "description": "Forma 36: Asset component",
   "scripts": {
     "build": "tsup"
   },
   "dependencies": {
-    "@contentful/f36-core": "^5.0.0",
-    "@contentful/f36-icon": "^5.0.0",
-    "@contentful/f36-icons": "^5.0.0",
-    "@contentful/f36-tokens": "^4.0.1",
-    "@contentful/f36-typography": "^5.0.0",
+    "@contentful/f36-core": "^5.1.0",
+    "@contentful/f36-icon": "^5.1.0",
+    "@contentful/f36-icons": "^5.1.0",
+    "@contentful/f36-tokens": "^5.1.0",
+    "@contentful/f36-typography": "^5.1.0",
     "emotion": "^10.0.17"
   },
   "peerDependencies": {
-    "react": ">=16.8"
+    "react": ">=16.8",
+    "react-dom": ">=16.8"
   },
   "license": "MIT",
   "files": [
@@ -28,9 +29,10 @@
   "browserslist": "extends @contentful/browserslist-config",
   "repository": {
     "type": "git",
-    "url": "https://github.com/contentful/forma-36"
+    "url": "git+https://github.com/contentful/forma-36.git"
   },
   "publishConfig": {
+    "registry": "https://npm.pkg.github.com/",
     "access": "public"
   }
 }