@contentful/f36-asset 5.8.0 → 6.0.0-alpha.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/dist/esm/index.js +1 -11
  2. package/dist/esm/index.js.map +1 -1
  3. package/dist/index.d.mts +6 -6
  4. package/dist/index.d.ts +6 -6
  5. package/dist/index.js +1 -20
  6. package/dist/index.js.map +1 -1
  7. package/package.json +9 -9
package/dist/esm/index.js CHANGED
@@ -1,12 +1,2 @@
1
- import n from 'react';
2
- import { cx, css } from 'emotion';
3
- import { Box, Flex } from '@contentful/f36-core';
4
- import { Text } from '@contentful/f36-typography';
5
- import { FileArchiveIcon, FileVideoIcon, TableIcon, RichTextIcon, PresentationIcon, FileTextIcon, FilePdfIcon, FileCodeIcon, ImageSquareIcon, BracketsCurlyIcon, FileAudioIcon } from '@contentful/f36-icons';
6
- import y from '@contentful/f36-tokens';
7
-
8
- 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)}
9
-
10
- export { J as Asset, u as AssetIcon, Q as isAssetType };
11
- //# sourceMappingURL=out.js.map
1
+ import n from'react';import {cx,css}from'@emotion/css';import {Box,Flex}from'@contentful/f36-core';import {Text}from'@contentful/f36-typography';import {FileArchiveIcon,FileVideoIcon,TableIcon,RichTextIcon,PresentationIcon,FileTextIcon,FilePdfIcon,FileCodeIcon,ImageSquareIcon,BracketsCurlyIcon,FileAudioIcon}from'@contentful/f36-icons';import g from'@contentful/f36-tokens';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:true,configurable:true,writable:true,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:g.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 y=P(),i=v(o({},r),{testId:s,className:cx(y.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 ${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 k(Y,i){var h=Y,{className:e,src:t,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=t&&t!==""&&m==="image"&&s!=="archived";return n.createElement(Box,o({className:cx(p.root,e),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:t,alt:c})),c&&n.createElement("div",{className:p.titleContainer},n.createElement(Text,{className:p.title,fontColor:"colorWhite",margin:"spacingS",isTruncated:true},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:true,marginBottom:"spacingM",fontColor:"gray600"},c)))}k.displayName="Asset";var K=n.forwardRef(k);var Q={archive:"archive",audio:"audio",code:"code",image:"image",markup:"markup",pdf:"pdf",plaintext:"plaintext",presentation:"presentation",richtext:"richtext",spreadsheet:"spreadsheet",video:"video"};function X(e){return Object.keys(Q).includes(e)}export{K as Asset,u as AssetIcon,X as isAssetType};//# sourceMappingURL=index.js.map
12
2
  //# sourceMappingURL=index.js.map
package/dist/esm/index.js.map CHANGED
@@ -1 +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","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":"+kBAAA,OAAOA,MAAW,QAClB,OAAS,MAAAC,MAAU,UACnB,OACE,OAAAC,EACA,QAAAC,MAIK,uBACP,OAAS,QAAAC,MAAY,6BCTrB,OAAOJ,MAAW,QAClB,OACE,mBAAAK,EACA,iBAAAC,EACA,qBAAAC,EACA,mBAAAC,EACA,gBAAAC,EACA,eAAAC,EACA,gBAAAC,EACA,gBAAAC,EACA,oBAAAC,EACA,aAAAC,EACA,iBAAAC,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,EAAM,CACZ,IAAK,QACH,OAAOtB,EAAA,cAACM,EAAAwB,EAAA,GAAkBF,EAAO,EACnC,IAAK,OACH,OAAO5B,EAAA,cAACO,EAAAuB,EAAA,GAAsBF,EAAO,EACvC,IAAK,QACH,OAAO5B,EAAA,cAACQ,EAAAsB,EAAA,GAAoBF,EAAO,EACrC,IAAK,SACH,OAAO5B,EAAA,cAACS,EAAAqB,EAAA,GAAiBF,EAAO,EAClC,IAAK,MACH,OAAO5B,EAAA,cAACU,EAAAoB,EAAA,GAAgBF,EAAO,EACjC,IAAK,YACH,OAAO5B,EAAA,cAACW,EAAAmB,EAAA,GAAiBF,EAAO,EAClC,IAAK,eACH,OAAO5B,EAAA,cAACa,EAAAiB,EAAA,GAAqBF,EAAO,EACtC,IAAK,WACH,OAAO5B,EAAA,cAACY,EAAAkB,EAAA,GAAiBF,EAAO,EAClC,IAAK,cACH,OAAO5B,EAAA,cAACc,EAAAgB,EAAA,GAAcF,EAAO,EAC/B,IAAK,QACH,OAAO5B,EAAA,cAACe,EAAAe,EAAA,GAAkBF,EAAO,EACnC,IAAK,UACL,QACE,OAAO5B,EAAA,cAACK,EAAAyB,EAAA,GAAoBF,EAAO,CACvC,CACF,EAEAT,EAAU,YAAc,YEpExB,OAAOH,MAAY,yBACnB,OAAS,OAAAC,MAAW,UAEb,SAASc,GAAiB,CAC/B,MAAO,CACL,KAAMd,EAAI,CACR,SAAU,WACV,MAAO,MACT,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,yBAAyB,IAAIA,EAAO,uBAAuB,GACzF,SAAU,WACV,OAAQ,EACR,MAAO,EACP,KAAM,EACN,OAAQ,OACR,QAAS,OACT,SAAU,SACV,WAAY,WACZ,UAAW,aACX,WAAY,yBAAyBA,EAAO,OAAO,uCAAuCA,EAAO,eAAe,yBAChH,SAAU,CAAE,QAAS,CAAE,CACzB,CAAC,EACD,MAAOC,EAAI,CACT,OAAQ,EACR,KAAM,EACN,MAAO,EACP,SAAU,UACZ,CAAC,CACH,CACF,CHAA,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,KAAMJ,CAAS,EACpC,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.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"]}
1
+ {"version":3,"sources":["../../src/Asset.tsx","../../src/AssetIcon/AssetIcon.styles.ts","../../src/AssetIcon/AssetIcon.tsx","../../src/Asset.styles.ts","../../src/types.ts"],"names":["getAssetIconStyles","css","tokens","AssetIcon","_a","_b","type","className","testId","otherProps","__objRest","styles","props","__spreadProps","__spreadValues","cx","React","FileAudioIcon","BracketsCurlyIcon","ImageSquareIcon","FileCodeIcon","FilePdfIcon","FileTextIcon","PresentationIcon","RichTextIcon","TableIcon","FileVideoIcon","FileArchiveIcon","getAssetStyles","AssetBase","ref","src","status","title","showPreview","Box","Flex","Text","Asset","types","isAssetType"],"mappings":"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","file":"index.js","sourcesContent":["import React from 'react';\nimport { cx } from '@emotion/css';\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 AssetBase(\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<HTMLElement>,\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\nAssetBase.displayName = 'Asset';\n\nexport const Asset = React.forwardRef(AssetBase);\n","import tokens from '@contentful/f36-tokens';\nimport { css } from '@emotion/css';\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 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/css';\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/css';\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 CHANGED
@@ -1,5 +1,5 @@
1
1
  import React from 'react';
2
- import { PickUnion, EntityStatus, CommonProps } from '@contentful/f36-core';
2
+ import { CommonProps, PickUnion, EntityStatus } from '@contentful/f36-core';
3
3
  import { GeneratedIconProps } from '@contentful/f36-icon';
4
4
 
5
5
  declare const types: {
@@ -16,9 +16,9 @@ declare const types: {
16
16
  video: string;
17
17
  };
18
18
  declare function isAssetType(type: string): type is AssetType;
19
- declare type AssetType = keyof typeof types;
19
+ type AssetType = keyof typeof types;
20
20
 
21
- declare type AssetStatus = PickUnion<EntityStatus, 'archived' | 'changed' | 'deleted' | 'draft' | 'published'>;
21
+ type AssetStatus = PickUnion<EntityStatus, 'archived' | 'changed' | 'deleted' | 'draft' | 'published'>;
22
22
  interface AssetProps extends CommonProps {
23
23
  /**
24
24
  * A `src` attribute to use for image assets
@@ -37,7 +37,7 @@ interface AssetProps extends CommonProps {
37
37
  */
38
38
  type?: AssetType;
39
39
  }
40
- declare const Asset: React.ForwardRefExoticComponent<AssetProps & React.RefAttributes<any>>;
40
+ declare const Asset: React.ForwardRefExoticComponent<AssetProps & React.RefAttributes<HTMLElement>>;
41
41
 
42
42
  interface AssetIconProps extends Omit<GeneratedIconProps, 'illustration' | 'ref'> {
43
43
  type?: AssetType;
@@ -46,8 +46,8 @@ interface AssetIconProps extends Omit<GeneratedIconProps, 'illustration' | 'ref'
46
46
  * Renders only the Illustration that would represent this asset's type
47
47
  */
48
48
  declare const AssetIcon: {
49
- ({ type, className, testId, ...otherProps }: AssetIconProps): JSX.Element;
49
+ ({ type, className, testId, ...otherProps }: AssetIconProps): React.JSX.Element;
50
50
  displayName: string;
51
51
  };
52
52
 
53
- export { Asset, AssetIcon, AssetIconProps, AssetProps, AssetStatus, AssetType, isAssetType };
53
+ export { Asset, AssetIcon, type AssetIconProps, type AssetProps, type AssetStatus, type AssetType, isAssetType };
package/dist/index.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import React from 'react';
2
- import { PickUnion, EntityStatus, CommonProps } from '@contentful/f36-core';
2
+ import { CommonProps, PickUnion, EntityStatus } from '@contentful/f36-core';
3
3
  import { GeneratedIconProps } from '@contentful/f36-icon';
4
4
 
5
5
  declare const types: {
@@ -16,9 +16,9 @@ declare const types: {
16
16
  video: string;
17
17
  };
18
18
  declare function isAssetType(type: string): type is AssetType;
19
- declare type AssetType = keyof typeof types;
19
+ type AssetType = keyof typeof types;
20
20
 
21
- declare type AssetStatus = PickUnion<EntityStatus, 'archived' | 'changed' | 'deleted' | 'draft' | 'published'>;
21
+ type AssetStatus = PickUnion<EntityStatus, 'archived' | 'changed' | 'deleted' | 'draft' | 'published'>;
22
22
  interface AssetProps extends CommonProps {
23
23
  /**
24
24
  * A `src` attribute to use for image assets
@@ -37,7 +37,7 @@ interface AssetProps extends CommonProps {
37
37
  */
38
38
  type?: AssetType;
39
39
  }
40
- declare const Asset: React.ForwardRefExoticComponent<AssetProps & React.RefAttributes<any>>;
40
+ declare const Asset: React.ForwardRefExoticComponent<AssetProps & React.RefAttributes<HTMLElement>>;
41
41
 
42
42
  interface AssetIconProps extends Omit<GeneratedIconProps, 'illustration' | 'ref'> {
43
43
  type?: AssetType;
@@ -46,8 +46,8 @@ interface AssetIconProps extends Omit<GeneratedIconProps, 'illustration' | 'ref'
46
46
  * Renders only the Illustration that would represent this asset's type
47
47
  */
48
48
  declare const AssetIcon: {
49
- ({ type, className, testId, ...otherProps }: AssetIconProps): JSX.Element;
49
+ ({ type, className, testId, ...otherProps }: AssetIconProps): React.JSX.Element;
50
50
  displayName: string;
51
51
  };
52
52
 
53
- export { Asset, AssetIcon, AssetIconProps, AssetProps, AssetStatus, AssetType, isAssetType };
53
+ export { Asset, AssetIcon, type AssetIconProps, type AssetProps, type AssetStatus, type AssetType, isAssetType };
package/dist/index.js CHANGED
@@ -1,21 +1,2 @@
1
- 'use strict';
2
-
3
- var n = require('react');
4
- var emotion = require('emotion');
5
- var f36Core = require('@contentful/f36-core');
6
- var f36Typography = require('@contentful/f36-typography');
7
- var f36Icons = require('@contentful/f36-icons');
8
- var y = require('@contentful/f36-tokens');
9
-
10
- function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
11
-
12
- var n__default = /*#__PURE__*/_interopDefault(n);
13
- var y__default = /*#__PURE__*/_interopDefault(y);
14
-
15
- 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)}
16
-
17
- exports.Asset = J;
18
- exports.AssetIcon = u;
19
- exports.isAssetType = Q;
20
- //# sourceMappingURL=out.js.map
1
+ 'use strict';var n=require('react'),css=require('@emotion/css'),f36Core=require('@contentful/f36-core'),f36Typography=require('@contentful/f36-typography'),f36Icons=require('@contentful/f36-icons'),g=require('@contentful/f36-tokens');function _interopDefault(e){return e&&e.__esModule?e:{default:e}}var n__default=/*#__PURE__*/_interopDefault(n);var g__default=/*#__PURE__*/_interopDefault(g);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:true,configurable:true,writable:true,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.css({display:"inline-block",width:"39px",height:"39px","g, path":{fill:g__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 y=P(),i=v(o({},r),{testId:s,className:css.cx(y.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:css.css({position:"relative",width:"100%"}),height100:css.css({height:"100%"}),image:css.css({width:"auto",maxWidth:"100%",maxHeight:"100%"}),titleContainer:css.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:css.css({bottom:0,left:0,right:0,position:"absolute"})}}function k(Y,i){var h=Y,{className:e,src:t,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=t&&t!==""&&m==="image"&&s!=="archived";return n__default.default.createElement(f36Core.Box,o({className:css.cx(p.root,e),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: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:true},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:true,marginBottom:"spacingM",fontColor:"gray600"},c)))}k.displayName="Asset";var K=n__default.default.forwardRef(k);var Q={archive:"archive",audio:"audio",code:"code",image:"image",markup:"markup",pdf:"pdf",plaintext:"plaintext",presentation:"presentation",richtext:"richtext",spreadsheet:"spreadsheet",video:"video"};function X(e){return Object.keys(Q).includes(e)}exports.Asset=K;exports.AssetIcon=u;exports.isAssetType=X;//# sourceMappingURL=index.js.map
21
2
  //# sourceMappingURL=index.js.map
package/dist/index.js.map CHANGED
@@ -1 +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","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"]}
1
+ {"version":3,"sources":["../src/Asset.tsx","../src/AssetIcon/AssetIcon.styles.ts","../src/AssetIcon/AssetIcon.tsx","../src/Asset.styles.ts","../src/types.ts"],"names":["getAssetIconStyles","css","tokens","AssetIcon","_a","_b","type","className","testId","otherProps","__objRest","styles","props","__spreadProps","__spreadValues","cx","React","FileAudioIcon","BracketsCurlyIcon","ImageSquareIcon","FileCodeIcon","FilePdfIcon","FileTextIcon","PresentationIcon","RichTextIcon","TableIcon","FileVideoIcon","FileArchiveIcon","getAssetStyles","AssetBase","ref","src","status","title","showPreview","Box","Flex","Text","Asset","types","isAssetType"],"mappings":"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","file":"index.js","sourcesContent":["import React from 'react';\nimport { cx } from '@emotion/css';\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 AssetBase(\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<HTMLElement>,\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\nAssetBase.displayName = 'Asset';\n\nexport const Asset = React.forwardRef(AssetBase);\n","import tokens from '@contentful/f36-tokens';\nimport { css } from '@emotion/css';\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 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/css';\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/css';\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 CHANGED
@@ -1,21 +1,21 @@
1
1
  {
2
2
  "name": "@contentful/f36-asset",
3
- "version": "5.8.0",
3
+ "version": "6.0.0-alpha.2",
4
4
  "description": "Forma 36: Asset component",
5
5
  "scripts": {
6
6
  "build": "tsup"
7
7
  },
8
8
  "dependencies": {
9
- "@contentful/f36-core": "^5.8.0",
10
- "@contentful/f36-icon": "^5.8.0",
11
- "@contentful/f36-icons": "^5.8.0",
12
- "@contentful/f36-tokens": "^5.1.0",
13
- "@contentful/f36-typography": "^5.8.0",
14
- "emotion": "^10.0.17"
9
+ "@contentful/f36-core": "^6.0.0-alpha.0",
10
+ "@contentful/f36-icon": "^6.0.0-alpha.0",
11
+ "@contentful/f36-icons": "^6.0.0-alpha.0",
12
+ "@contentful/f36-tokens": "^6.0.0-alpha.0",
13
+ "@contentful/f36-typography": "^6.0.0-alpha.0",
14
+ "@emotion/css": "^11.13.5"
15
15
  },
16
16
  "peerDependencies": {
17
- "react": ">=16.8",
18
- "react-dom": ">=16.8"
17
+ "react": ">=19.1.0",
18
+ "react-dom": ">=19.1.0"
19
19
  },
20
20
  "license": "MIT",
21
21
  "files": [