@contentful/f36-asset 6.20.0 → 6.20.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.
- package/dist/esm/index.d.ts +56 -0
- package/dist/esm/index.js +1 -1
- package/dist/esm/index.js.map +1 -1
- package/dist/index.d.ts +40 -38
- package/dist/index.js +1 -1
- package/dist/index.js.map +1 -1
- package/package.json +6 -6
- package/dist/index.d.mts +0 -54
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { CommonProps, EntityStatus, PickUnion } from "@contentful/f36-core";
|
|
3
|
+
import { GeneratedIconProps } from "@contentful/f36-icon";
|
|
4
|
+
//#region src/types.d.ts
|
|
5
|
+
declare const types: {
|
|
6
|
+
archive: string;
|
|
7
|
+
audio: string;
|
|
8
|
+
code: string;
|
|
9
|
+
image: string;
|
|
10
|
+
markup: string;
|
|
11
|
+
pdf: string;
|
|
12
|
+
plaintext: string;
|
|
13
|
+
presentation: string;
|
|
14
|
+
richtext: string;
|
|
15
|
+
spreadsheet: string;
|
|
16
|
+
video: string;
|
|
17
|
+
};
|
|
18
|
+
declare function isAssetType(type: string): type is AssetType;
|
|
19
|
+
type AssetType = keyof typeof types;
|
|
20
|
+
//#endregion
|
|
21
|
+
//#region src/Asset.d.ts
|
|
22
|
+
type AssetStatus = PickUnion<EntityStatus, 'archived' | 'changed' | 'deleted' | 'draft' | 'published'>;
|
|
23
|
+
interface AssetProps extends CommonProps {
|
|
24
|
+
/**
|
|
25
|
+
* A `src` attribute to use for image assets
|
|
26
|
+
*/
|
|
27
|
+
src?: string;
|
|
28
|
+
/**
|
|
29
|
+
* The publish status of the asset
|
|
30
|
+
*/
|
|
31
|
+
status?: AssetStatus;
|
|
32
|
+
/**
|
|
33
|
+
* The title of the asset
|
|
34
|
+
*/
|
|
35
|
+
title?: string;
|
|
36
|
+
/**
|
|
37
|
+
* The type of asset being represented
|
|
38
|
+
*/
|
|
39
|
+
type?: AssetType;
|
|
40
|
+
}
|
|
41
|
+
declare const Asset: React.ForwardRefExoticComponent<AssetProps & React.RefAttributes<HTMLElement>>;
|
|
42
|
+
//#endregion
|
|
43
|
+
//#region src/AssetIcon/AssetIcon.d.ts
|
|
44
|
+
interface AssetIconProps extends Omit<GeneratedIconProps, 'illustration' | 'ref'> {
|
|
45
|
+
type?: AssetType;
|
|
46
|
+
}
|
|
47
|
+
/**
|
|
48
|
+
* Renders only the Illustration that would represent this asset's type
|
|
49
|
+
*/
|
|
50
|
+
declare const AssetIcon: {
|
|
51
|
+
({ type, className, testId, ...otherProps }: AssetIconProps): import("react/jsx-runtime").JSX.Element;
|
|
52
|
+
displayName: string;
|
|
53
|
+
};
|
|
54
|
+
//#endregion
|
|
55
|
+
export { Asset, AssetIcon, type AssetIconProps, type AssetProps, type AssetStatus, type AssetType, isAssetType };
|
|
56
|
+
//# sourceMappingURL=index.d.ts.map
|
package/dist/esm/index.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import
|
|
1
|
+
import e from"react";import{css as t,cx as n}from"@emotion/css";import{Box as r,Flex as i}from"@contentful/f36-core";import{Text as a}from"@contentful/f36-typography";import{BracketsCurlyIcon as o,FileArchiveIcon as s,FileAudioIcon as c,FileCodeIcon as l,FilePdfIcon as u,FileTextIcon as d,FileVideoIcon as f,ImageSquareIcon as p,PresentationIcon as m,RichTextIcon as h,TableIcon as g}from"@contentful/f36-icons";import _ from"@contentful/f36-tokens";import{Fragment as v,jsx as y,jsxs as b}from"react/jsx-runtime";function x(){return{root:t({display:`inline-block`,width:`39px`,height:`39px`,"g, path":{fill:_.gray600}})}}function S(e,t){if(e==null)return{};var n={};for(var r in e)if({}.hasOwnProperty.call(e,r)){if(t.includes(r))continue;n[r]=e[r]}return n}function C(e,t){if(e==null)return{};var n,r,i=S(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r<a.length;r++)n=a[r],t.includes(n)||{}.propertyIsEnumerable.call(e,n)&&(i[n]=e[n])}return i}function w(e){"@babel/helpers - typeof";return w=typeof Symbol==`function`&&typeof Symbol.iterator==`symbol`?function(e){return typeof e}:function(e){return e&&typeof Symbol==`function`&&e.constructor===Symbol&&e!==Symbol.prototype?`symbol`:typeof e},w(e)}function T(e,t){if(w(e)!=`object`||!e)return e;var n=e[Symbol.toPrimitive];if(n!==void 0){var r=n.call(e,t||`default`);if(w(r)!=`object`)return r;throw TypeError(`@@toPrimitive must return a primitive value.`)}return(t===`string`?String:Number)(e)}function E(e){var t=T(e,`string`);return w(t)==`symbol`?t:t+``}function D(e,t,n){return(t=E(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function O(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable})),n.push.apply(n,r)}return n}function k(e){for(var t=1;t<arguments.length;t++){var n=arguments[t]==null?{}:arguments[t];t%2?O(Object(n),!0).forEach(function(t){D(e,t,n[t])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):O(Object(n)).forEach(function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))})}return e}const A=[`type`,`className`,`testId`],j=e=>{let{type:t=`archive`,className:r,testId:i=`cf-ui-asset-icon`}=e,a=C(e,A),_=x(),v=k(k({},a),{},{testId:i,className:n(_.root,r)});switch(t){case`audio`:return y(c,k({},v));case`code`:return y(o,k({},v));case`image`:return y(p,k({},v));case`markup`:return y(l,k({},v));case`pdf`:return y(u,k({},v));case`plaintext`:return y(d,k({},v));case`presentation`:return y(m,k({},v));case`richtext`:return y(h,k({},v));case`spreadsheet`:return y(g,k({},v));case`video`:return y(f,k({},v));default:return y(s,k({},v))}};j.displayName=`AssetIcon`;function M(){return{root:t({position:`relative`,width:`100%`}),height100:t({height:`100%`}),image:t({width:`auto`,maxWidth:`100%`,maxHeight:`100%`}),titleContainer:t({opacity:0,transition:`opacity ${_.transitionDurationDefault} ${_.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, ${_.gray900} 0%, transparent calc(1rem * (100 / ${_.fontBaseDefault})), transparent 100% )`,":hover":{opacity:1}}),title:t({bottom:0,left:0,right:0,position:`absolute`})}}const N=[`className`,`src`,`status`,`testId`,`title`,`type`];function P(e,t){let{className:o,src:s,status:c,testId:l=`cf-ui-asset`,title:u,type:d=`image`}=e,f=C(e,N),p=M(),m=s&&s!==``&&d===`image`&&c!==`archived`;return y(r,k(k({className:n(p.root,o),testId:l,ref:t},f),{},{children:m?b(v,{children:[y(i,{alignItems:`center`,justifyContent:`center`,className:p.height100,children:y(`img`,{className:p.image,src:s,alt:u})}),u&&y(`div`,{className:p.titleContainer,children:y(a,{className:p.title,fontColor:`colorWhite`,margin:`spacingS`,isTruncated:!0,children:u})})]}):b(i,{flexDirection:`column`,alignItems:`center`,justifyContent:`center`,paddingLeft:`spacingS`,paddingRight:`spacingS`,className:p.height100,children:[y(i,{marginBottom:`spacingM`,marginTop:`spacingM`,justifyContent:`center`,children:y(j,{type:d})}),y(a,{isTruncated:!0,marginBottom:`spacingM`,fontColor:`gray600`,children:u})]})}))}P.displayName=`Asset`;const F=e.forwardRef(P),I={archive:`archive`,audio:`audio`,code:`code`,image:`image`,markup:`markup`,pdf:`pdf`,plaintext:`plaintext`,presentation:`presentation`,richtext:`richtext`,spreadsheet:`spreadsheet`,video:`video`};function L(e){return Object.keys(I).includes(e)}export{F as Asset,j as AssetIcon,L as isAssetType};
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
package/dist/esm/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
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","jsx","FileAudioIcon","BracketsCurlyIcon","ImageSquareIcon","FileCodeIcon","FilePdfIcon","FileTextIcon","PresentationIcon","RichTextIcon","TableIcon","FileVideoIcon","FileArchiveIcon","getAssetStyles","AssetBase","ref","src","status","title","showPreview","Box","jsxs","Fragment","Flex","Text","Asset","React","types","isAssetType"],"mappings":"yaAAA,IAAA,CAAA,CAAA,MAAA,CAAA,cAAA,CAAA,CAAA,CAAA,MAAA,CAAA,gBAAA,CAAA,IAAA,CAAA,CAAA,MAAA,CAAA,yBAAA,CAAA,IAAA,CAAA,CAAA,MAAA,CAAA,qBAAA,CAAA,IAAA,CAAA,CAAA,MAAA,CAAA,SAAA,CAAA,cAAA,CAAA,CAAA,CAAA,MAAA,CAAA,SAAA,CAAA,oBAAA,CAAA,IAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,GAAA,CAAA,IAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,UAAA,CAAA,IAAA,CAAA,YAAA,CAAA,IAAA,CAAA,QAAA,CAAA,IAAA,CAAA,KAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,GAAA,CAAA,IAAA,IAAA,CAAA,IAAA,CAAA,GAAA,CAAA,CAAA,EAAA,CAAA,CAAA,CAAA,CAAA,IAAA,CAAA,CAAA,CAAA,CAAA,CAAA,EAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,GAAA,CAAA,CAAA,IAAA,IAAA,CAAA,IAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,IAAA,CAAA,CAAA,CAAA,CAAA,CAAA,EAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,OAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,GAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,IAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,GAAA,CAAA,IAAA,CAAA,CAAA,EAAA,CAAA,IAAA,IAAA,CAAA,IAAA,CAAA,CAAA,CAAA,CAAA,IAAA,CAAA,CAAA,CAAA,CAAA,CAAA,EAAA,CAAA,CAAA,OAAA,CAAA,CAAA,CAAA,CAAA,CAAA,GAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,GAAA,CAAA,EAAA,IAAA,EAAA,CAAA,CAAA,IAAA,IAAA,CAAA,IAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,OAAA,CAAA,CAAA,CAAA,CAAA,CAAA,EAAA,CAAA,CAAA,IAAA,CAAA,CAAA,CAAA,CAAA,CAAA,GAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,OAAA,CAAA,CAAA,CCGO,SAASA,CAAAA,EAAqB,CACnC,OAAO,CACL,IAAA,CAAMC,GAAAA,CAAI,CACR,OAAA,CAAS,cAAA,CACT,KAAA,CAAO,MAAA,CACP,OAAQ,MAAA,CACR,SAAA,CAAW,CACT,IAAA,CAAMC,CAAAA,CAAO,OACf,CACF,CAAC,CACH,CACF,CCgBO,IAAMC,CAAAA,CAAaC,GAKJ,CALI,IAAAC,CAAAA,CAAAD,CAAAA,CACxB,CAAA,IAAA,CAAAE,CAAAA,CAAO,SAAA,CACP,SAAA,CAAAC,CAAAA,CACA,MAAA,CAAAC,CAAAA,CAAS,kBAjCX,CAAA,CA8B0BH,CAAAA,CAIrBI,CAAAA,CAAAC,CAAAA,CAJqBL,EAIrB,CAHH,MAAA,CACA,WAAA,CACA,QAAA,CAAA,CAAA,CAGA,IAAMM,CAAAA,CAASX,CAAAA,EAAmB,CAC5BY,CAAAA,CAAQC,CAAAA,CAAAC,CAAAA,CAAA,EAAA,CACTL,CAAAA,CAAAA,CADS,CAEZ,MAAA,CAAAD,CAAAA,CACA,UAAWO,EAAAA,CAAGJ,CAAAA,CAAO,IAAA,CAAMJ,CAAS,CACtC,CAAA,CAAA,CAEA,OAAQD,CAAAA,EACN,KAAK,OAAA,CACH,OAAOU,GAAAA,CAACC,aAAAA,CAAAH,CAAAA,CAAA,EAAA,CAAkBF,CAAAA,CAAO,EACnC,KAAK,MAAA,CACH,OAAOI,GAAAA,CAACE,iBAAAA,CAAAJ,CAAAA,CAAA,EAAA,CAAsBF,CAAAA,CAAO,CAAA,CACvC,KAAK,OAAA,CACH,OAAOI,GAAAA,CAACG,eAAAA,CAAAL,CAAAA,CAAA,EAAA,CAAoBF,EAAO,CAAA,CACrC,KAAK,QAAA,CACH,OAAOI,GAAAA,CAACI,YAAAA,CAAAN,CAAAA,CAAA,EAAA,CAAiBF,CAAAA,CAAO,CAAA,CAClC,KAAK,KAAA,CACH,OAAOI,GAAAA,CAACK,WAAAA,CAAAP,CAAAA,CAAA,GAAgBF,CAAAA,CAAO,CAAA,CACjC,KAAK,WAAA,CACH,OAAOI,GAAAA,CAACM,YAAAA,CAAAR,CAAAA,CAAA,EAAA,CAAiBF,CAAAA,CAAO,CAAA,CAClC,KAAK,cAAA,CACH,OAAOI,GAAAA,CAACO,gBAAAA,CAAAT,EAAA,EAAA,CAAqBF,CAAAA,CAAO,CAAA,CACtC,KAAK,UAAA,CACH,OAAOI,GAAAA,CAACQ,YAAAA,CAAAV,CAAAA,CAAA,EAAA,CAAiBF,CAAAA,CAAO,CAAA,CAClC,KAAK,aAAA,CACH,OAAOI,GAAAA,CAACS,UAAAX,CAAAA,CAAA,EAAA,CAAcF,CAAAA,CAAO,CAAA,CAC/B,KAAK,OAAA,CACH,OAAOI,GAAAA,CAACU,aAAAA,CAAAZ,CAAAA,CAAA,EAAA,CAAkBF,CAAAA,CAAO,CAAA,CAEnC,QACE,OAAOI,GAAAA,CAACW,gBAAAb,CAAAA,CAAA,EAAA,CAAoBF,CAAAA,CAAO,CACvC,CACF,EAEAT,CAAAA,CAAU,WAAA,CAAc,WAAA,CCnEjB,SAASyB,CAAAA,EAAiB,CAC/B,OAAO,CACL,IAAA,CAAM3B,GAAAA,CAAI,CACR,QAAA,CAAU,UAAA,CACV,KAAA,CAAO,MACT,CAAC,CAAA,CACD,SAAA,CAAWA,GAAAA,CAAI,CACb,OAAQ,MACV,CAAC,CAAA,CACD,KAAA,CAAOA,GAAAA,CAAI,CACT,KAAA,CAAO,MAAA,CACP,SAAU,MAAA,CACV,SAAA,CAAW,MACb,CAAC,CAAA,CACD,cAAA,CAAgBA,GAAAA,CAAI,CAClB,QAAS,CAAA,CACT,UAAA,CAAY,CAAA,QAAA,EAAWC,CAAAA,CAAO,yBAAyB,CAAA,CAAA,EAAIA,CAAAA,CAAO,uBAAuB,CAAA,CAAA,CACzF,QAAA,CAAU,UAAA,CACV,MAAA,CAAQ,CAAA,CACR,KAAA,CAAO,CAAA,CACP,IAAA,CAAM,EACN,MAAA,CAAQ,MAAA,CACR,OAAA,CAAS,MAAA,CACT,QAAA,CAAU,QAAA,CACV,UAAA,CAAY,UAAA,CACZ,SAAA,CAAW,YAAA,CACX,UAAA,CAAY,CAAA,sBAAA,EAAyBA,CAAAA,CAAO,OAAO,CAAA,oCAAA,EAAuCA,CAAAA,CAAO,eAAe,CAAA,sBAAA,CAAA,CAChH,QAAA,CAAU,CAAE,OAAA,CAAS,CAAE,CACzB,CAAC,CAAA,CACD,KAAA,CAAOD,GAAAA,CAAI,CACT,MAAA,CAAQ,CAAA,CACR,IAAA,CAAM,CAAA,CACN,KAAA,CAAO,EACP,QAAA,CAAU,UACZ,CAAC,CACH,CACF,CHAA,SAAS4B,CAAAA,CACPzB,CAAAA,CASA0B,EACA,CAVA,IAAAzB,CAAAA,CAAAD,CAAAA,CACE,CAAA,SAAA,CAAAG,CAAAA,CACA,GAAA,CAAAwB,CAAAA,CACA,MAAA,CAAAC,CAAAA,CACA,MAAA,CAAAxB,CAAAA,CAAS,aAAA,CACT,KAAA,CAAAyB,CAAAA,CACA,IAAA,CAAA3B,EAAO,OA9CX,CAAA,CAwCED,CAAAA,CAOKI,CAAAA,CAAAC,CAAAA,CAPLL,CAAAA,CAOK,CANH,WAAA,CACA,KAAA,CACA,QAAA,CACA,QAAA,CACA,OAAA,CACA,MAAA,CAAA,CAAA,CAKF,IAAMM,CAAAA,CAASiB,CAAAA,GAITM,CAAAA,CAHUH,CAAAA,EAAOA,CAAAA,GAAQ,EAAA,EAAMzB,CAAAA,GAAS,OAAA,EAGf0B,CAAAA,GAAW,UAAA,CAE1C,OACEhB,GAAAA,CAACmB,GAAAA,CAAAtB,CAAAA,CAAAC,CAAAA,CAAA,CACC,SAAA,CAAWC,EAAAA,CAAGJ,EAAO,IAAA,CAAMJ,CAAS,CAAA,CACpC,MAAA,CAAQC,CAAAA,CACR,GAAA,CAAKsB,CAAAA,CAAAA,CACDrB,CAAAA,CAAAA,CAJL,CAME,QAAA,CAAAyB,CAAAA,CACCE,IAAAA,CAAAC,QAAAA,CAAA,CACE,QAAA,CAAA,CAAArB,GAAAA,CAACsB,IAAAA,CAAA,CACC,UAAA,CAAW,QAAA,CACX,cAAA,CAAe,QAAA,CACf,SAAA,CAAW3B,CAAAA,CAAO,SAAA,CAElB,QAAA,CAAAK,GAAAA,CAAC,KAAA,CAAA,CAAI,SAAA,CAAWL,CAAAA,CAAO,KAAA,CAAO,GAAA,CAAKoB,CAAAA,CAAK,GAAA,CAAKE,EAAO,CAAA,CACtD,CAAA,CACCA,CAAAA,EACCjB,GAAAA,CAAC,KAAA,CAAA,CAAI,SAAA,CAAWL,CAAAA,CAAO,cAAA,CACrB,QAAA,CAAAK,GAAAA,CAACuB,IAAAA,CAAA,CACC,SAAA,CAAW5B,CAAAA,CAAO,KAAA,CAClB,SAAA,CAAU,aACV,MAAA,CAAO,UAAA,CACP,WAAA,CAAW,IAAA,CAEV,QAAA,CAAAsB,CAAAA,CACH,CAAA,CACF,CAAA,CAAA,CAEJ,CAAA,CAEAG,IAAAA,CAACE,IAAAA,CAAA,CACC,aAAA,CAAc,QAAA,CACd,UAAA,CAAW,QAAA,CACX,eAAe,QAAA,CACf,WAAA,CAAY,UAAA,CACZ,YAAA,CAAa,UAAA,CACb,SAAA,CAAW3B,CAAAA,CAAO,SAAA,CAElB,UAAAK,GAAAA,CAACsB,IAAAA,CAAA,CACC,YAAA,CAAa,UAAA,CACb,SAAA,CAAU,UAAA,CACV,cAAA,CAAe,SAEf,QAAA,CAAAtB,GAAAA,CAACb,CAAAA,CAAA,CAAU,IAAA,CAAMG,CAAAA,CAAM,CAAA,CACzB,CAAA,CACAU,GAAAA,CAACuB,IAAAA,CAAA,CAAK,WAAA,CAAW,IAAA,CAAC,YAAA,CAAa,UAAA,CAAW,SAAA,CAAU,UACjD,QAAA,CAAAN,CAAAA,CACH,CAAA,CAAA,CACF,CAAA,CAAA,CAEJ,CAEJ,CAEAJ,CAAAA,CAAU,WAAA,CAAc,OAAA,CAEjB,IAAMW,CAAAA,CAAQC,CAAAA,CAAM,UAAA,CAAWZ,CAAS,EIjHxC,IAAMa,EAAQ,CACnB,OAAA,CAAS,SAAA,CACT,KAAA,CAAO,OAAA,CACP,IAAA,CAAM,MAAA,CACN,KAAA,CAAO,OAAA,CACP,MAAA,CAAQ,QAAA,CACR,GAAA,CAAK,KAAA,CACL,SAAA,CAAW,WAAA,CACX,YAAA,CAAc,eACd,QAAA,CAAU,UAAA,CACV,WAAA,CAAa,aAAA,CACb,KAAA,CAAO,OACT,CAAA,CAEO,SAASC,EAAYrC,CAAAA,CAAiC,CAC3D,OAAO,MAAA,CAAO,IAAA,CAAKoC,CAAK,CAAA,CAAE,QAAA,CAASpC,CAAI,CACzC","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 extends Omit<\n GeneratedIconProps,\n 'illustration' | 'ref'\n> {\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"]}
|
|
1
|
+
{"version":3,"file":"index.js","names":[],"sources":["../../src/AssetIcon/AssetIcon.styles.ts","../../src/AssetIcon/AssetIcon.tsx","../../src/Asset.styles.ts","../../src/Asset.tsx","../../src/types.ts"],"sourcesContent":["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 extends Omit<\n GeneratedIconProps,\n 'illustration' | 'ref'\n> {\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","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","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"],"mappings":"mgBAGA,SAAgB,GAAqB,CACnC,MAAO,CACL,KAAM,EAAI,CACR,QAAS,eACT,MAAO,OACP,OAAQ,OACR,UAAW,CACT,KAAM,EAAO,OACf,CACF,CAAC,CACH,CACF,imDCiBE,OACA,YACA,UAHW,EAAa,GAKJ,CALI,GAAA,CACxB,OAAO,UACP,YACA,SAAS,oBAAA,EACN,EAAA,EAAA,EAAA,CAAA,EAEG,EAAS,EAAmB,EAC5B,EAAA,EAAA,EAAA,CAAA,EACD,CAAA,EAAA,CAAA,EAAA,CACH,SACA,UAAW,EAAG,EAAO,KAAM,CAAS,CACtC,CAAA,EAEA,OAAQ,EAAR,CACE,IAAK,QACH,OAAO,EAAC,EAAA,EAAA,CAAA,EAAkB,CAAQ,CAAA,EACpC,IAAK,OACH,OAAO,EAAC,EAAA,EAAA,CAAA,EAAsB,CAAQ,CAAA,EACxC,IAAK,QACH,OAAO,EAAC,EAAA,EAAA,CAAA,EAAoB,CAAQ,CAAA,EACtC,IAAK,SACH,OAAO,EAAC,EAAA,EAAA,CAAA,EAAiB,CAAQ,CAAA,EACnC,IAAK,MACH,OAAO,EAAC,EAAA,EAAA,CAAA,EAAgB,CAAQ,CAAA,EAClC,IAAK,YACH,OAAO,EAAC,EAAA,EAAA,CAAA,EAAiB,CAAQ,CAAA,EACnC,IAAK,eACH,OAAO,EAAC,EAAA,EAAA,CAAA,EAAqB,CAAQ,CAAA,EACvC,IAAK,WACH,OAAO,EAAC,EAAA,EAAA,CAAA,EAAiB,CAAQ,CAAA,EACnC,IAAK,cACH,OAAO,EAAC,EAAA,EAAA,CAAA,EAAc,CAAQ,CAAA,EAChC,IAAK,QACH,OAAO,EAAC,EAAA,EAAA,CAAA,EAAkB,CAAQ,CAAA,EAEpC,QACE,OAAO,EAAC,EAAA,EAAA,CAAA,EAAoB,CAAQ,CAAA,CACxC,CACF,EAEA,EAAU,YAAc,YCnExB,SAAgB,GAAiB,CAC/B,MAAO,CACL,KAAM,EAAI,CACR,SAAU,WACV,MAAO,MACT,CAAC,EACD,UAAW,EAAI,CACb,OAAQ,MACV,CAAC,EACD,MAAO,EAAI,CACT,MAAO,OACP,SAAU,OACV,UAAW,MACb,CAAC,EACD,eAAgB,EAAI,CAClB,QAAS,EACT,WAAY,WAAW,EAAO,0BAA0B,GAAG,EAAO,0BAClE,SAAU,WACV,OAAQ,EACR,MAAO,EACP,KAAM,EACN,OAAQ,OACR,QAAS,OACT,SAAU,SACV,WAAY,WACZ,UAAW,aACX,WAAY,yBAAyB,EAAO,QAAQ,sCAAsC,EAAO,gBAAgB,wBACjH,SAAU,CAAE,QAAS,CAAE,CACzB,CAAC,EACD,MAAO,EAAI,CACT,OAAQ,EACR,KAAM,EACN,MAAO,EACP,SAAU,UACZ,CAAC,CACH,CACF,UCEI,YACA,MACA,SACA,SACA,QACA,QAPJ,SAAS,EACP,EASA,EACA,CAVA,GAAA,CACE,YACA,MACA,SACA,SAAS,cACT,QACA,OAAO,SAAA,EACJ,EAAA,EAAA,EAAA,CAAA,EAIC,EAAS,EAAe,EAIxB,EAHU,GAAO,IAAQ,IAAM,IAAS,SAGf,IAAW,WAE1C,OACE,EAAC,EAAA,EAAA,EAAA,CACC,UAAW,EAAG,EAAO,KAAM,CAAS,EAC5B,SACH,KACD,EAAA,CAAA,EAAA,CAAA,EAAA,CAAA,SAEH,EACC,EAAA,EAAA,CAAA,SAAA,CACE,EAAC,EAAD,CACE,WAAW,SACX,eAAe,SACf,UAAW,EAAO,UAElB,SAAA,EAAC,MAAD,CAAK,UAAW,EAAO,MAAY,MAAK,IAAK,CAAQ,CAAA,CACjD,CAAA,EACL,GACC,EAAC,MAAD,CAAK,UAAW,EAAO,eACrB,SAAA,EAAC,EAAD,CACE,UAAW,EAAO,MAClB,UAAU,aACV,OAAO,WACP,YAAA,GAEC,SAAA,CACG,CAAA,CACH,CAAA,CAEP,CAAA,CAAA,EAEF,EAAC,EAAD,CACE,cAAc,SACd,WAAW,SACX,eAAe,SACf,YAAY,WACZ,aAAa,WACb,UAAW,EAAO,UANpB,SAAA,CAQE,EAAC,EAAD,CACE,aAAa,WACb,UAAU,WACV,eAAe,SAEf,SAAA,EAAC,EAAD,CAAiB,MAAO,CAAA,CACpB,CAAA,EACN,EAAC,EAAD,CAAM,YAAA,GAAY,aAAa,WAAW,UAAU,UACjD,SAAA,CACG,CAAA,CACF,CAEL,CAAA,CAAA,CAAA,CAAA,CAET,CAEA,EAAU,YAAc,QAExB,MAAa,EAAQ,EAAM,WAAW,CAAS,ECjHlC,EAAQ,CACnB,QAAS,UACT,MAAO,QACP,KAAM,OACN,MAAO,QACP,OAAQ,SACR,IAAK,MACL,UAAW,YACX,aAAc,eACd,SAAU,WACV,YAAa,cACb,MAAO,OACT,EAEA,SAAgB,EAAY,EAAiC,CAC3D,OAAO,OAAO,KAAK,CAAK,CAAC,CAAC,SAAS,CAAI,CACzC"}
|
package/dist/index.d.ts
CHANGED
|
@@ -1,54 +1,56 @@
|
|
|
1
|
-
import React from
|
|
2
|
-
import { CommonProps,
|
|
3
|
-
import
|
|
4
|
-
|
|
5
|
-
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { CommonProps, EntityStatus, PickUnion } from "@contentful/f36-core";
|
|
3
|
+
import { GeneratedIconProps } from "@contentful/f36-icon";
|
|
4
|
+
//#region src/types.d.ts
|
|
6
5
|
declare const types: {
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
6
|
+
archive: string;
|
|
7
|
+
audio: string;
|
|
8
|
+
code: string;
|
|
9
|
+
image: string;
|
|
10
|
+
markup: string;
|
|
11
|
+
pdf: string;
|
|
12
|
+
plaintext: string;
|
|
13
|
+
presentation: string;
|
|
14
|
+
richtext: string;
|
|
15
|
+
spreadsheet: string;
|
|
16
|
+
video: string;
|
|
18
17
|
};
|
|
19
18
|
declare function isAssetType(type: string): type is AssetType;
|
|
20
19
|
type AssetType = keyof typeof types;
|
|
21
|
-
|
|
20
|
+
//#endregion
|
|
21
|
+
//#region src/Asset.d.ts
|
|
22
22
|
type AssetStatus = PickUnion<EntityStatus, 'archived' | 'changed' | 'deleted' | 'draft' | 'published'>;
|
|
23
23
|
interface AssetProps extends CommonProps {
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
24
|
+
/**
|
|
25
|
+
* A `src` attribute to use for image assets
|
|
26
|
+
*/
|
|
27
|
+
src?: string;
|
|
28
|
+
/**
|
|
29
|
+
* The publish status of the asset
|
|
30
|
+
*/
|
|
31
|
+
status?: AssetStatus;
|
|
32
|
+
/**
|
|
33
|
+
* The title of the asset
|
|
34
|
+
*/
|
|
35
|
+
title?: string;
|
|
36
|
+
/**
|
|
37
|
+
* The type of asset being represented
|
|
38
|
+
*/
|
|
39
|
+
type?: AssetType;
|
|
40
40
|
}
|
|
41
41
|
declare const Asset: React.ForwardRefExoticComponent<AssetProps & React.RefAttributes<HTMLElement>>;
|
|
42
|
-
|
|
42
|
+
//#endregion
|
|
43
|
+
//#region src/AssetIcon/AssetIcon.d.ts
|
|
43
44
|
interface AssetIconProps extends Omit<GeneratedIconProps, 'illustration' | 'ref'> {
|
|
44
|
-
|
|
45
|
+
type?: AssetType;
|
|
45
46
|
}
|
|
46
47
|
/**
|
|
47
48
|
* Renders only the Illustration that would represent this asset's type
|
|
48
49
|
*/
|
|
49
50
|
declare const AssetIcon: {
|
|
50
|
-
|
|
51
|
-
|
|
51
|
+
({ type, className, testId, ...otherProps }: AssetIconProps): import("react/jsx-runtime").JSX.Element;
|
|
52
|
+
displayName: string;
|
|
52
53
|
};
|
|
53
|
-
|
|
54
|
+
//#endregion
|
|
54
55
|
export { Asset, AssetIcon, type AssetIconProps, type AssetProps, type AssetStatus, type AssetType, isAssetType };
|
|
56
|
+
//# sourceMappingURL=index.d.ts.map
|
package/dist/index.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
|
|
1
|
+
Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e=Object.create,t=Object.defineProperty,n=Object.getOwnPropertyDescriptor,r=Object.getOwnPropertyNames,i=Object.getPrototypeOf,a=Object.prototype.hasOwnProperty,o=(e,i,o,s)=>{if(i&&typeof i==`object`||typeof i==`function`)for(var c=r(i),l=0,u=c.length,d;l<u;l++)d=c[l],!a.call(e,d)&&d!==o&&t(e,d,{get:(e=>i[e]).bind(null,d),enumerable:!(s=n(i,d))||s.enumerable});return e},s=(n,r,s)=>(s=n==null?{}:e(i(n)),o(r||!n||!n.__esModule||!a.call(n,`default`)?t(s,`default`,{value:n,enumerable:!0}):s,n));let c=require("react");c=s(c);let l=require("@emotion/css"),u=require("@contentful/f36-core"),d=require("@contentful/f36-typography"),f=require("@contentful/f36-icons"),p=require("@contentful/f36-tokens");p=s(p);let m=require("react/jsx-runtime");function h(){return{root:(0,l.css)({display:`inline-block`,width:`39px`,height:`39px`,"g, path":{fill:p.default.gray600}})}}function g(e,t){if(e==null)return{};var n={};for(var r in e)if({}.hasOwnProperty.call(e,r)){if(t.includes(r))continue;n[r]=e[r]}return n}function _(e,t){if(e==null)return{};var n,r,i=g(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r<a.length;r++)n=a[r],t.includes(n)||{}.propertyIsEnumerable.call(e,n)&&(i[n]=e[n])}return i}function v(e){"@babel/helpers - typeof";return v=typeof Symbol==`function`&&typeof Symbol.iterator==`symbol`?function(e){return typeof e}:function(e){return e&&typeof Symbol==`function`&&e.constructor===Symbol&&e!==Symbol.prototype?`symbol`:typeof e},v(e)}function y(e,t){if(v(e)!=`object`||!e)return e;var n=e[Symbol.toPrimitive];if(n!==void 0){var r=n.call(e,t||`default`);if(v(r)!=`object`)return r;throw TypeError(`@@toPrimitive must return a primitive value.`)}return(t===`string`?String:Number)(e)}function b(e){var t=y(e,`string`);return v(t)==`symbol`?t:t+``}function x(e,t,n){return(t=b(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function S(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable})),n.push.apply(n,r)}return n}function C(e){for(var t=1;t<arguments.length;t++){var n=arguments[t]==null?{}:arguments[t];t%2?S(Object(n),!0).forEach(function(t){x(e,t,n[t])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):S(Object(n)).forEach(function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))})}return e}const w=[`type`,`className`,`testId`],T=e=>{let{type:t=`archive`,className:n,testId:r=`cf-ui-asset-icon`}=e,i=_(e,w),a=h(),o=C(C({},i),{},{testId:r,className:(0,l.cx)(a.root,n)});switch(t){case`audio`:return(0,m.jsx)(f.FileAudioIcon,C({},o));case`code`:return(0,m.jsx)(f.BracketsCurlyIcon,C({},o));case`image`:return(0,m.jsx)(f.ImageSquareIcon,C({},o));case`markup`:return(0,m.jsx)(f.FileCodeIcon,C({},o));case`pdf`:return(0,m.jsx)(f.FilePdfIcon,C({},o));case`plaintext`:return(0,m.jsx)(f.FileTextIcon,C({},o));case`presentation`:return(0,m.jsx)(f.PresentationIcon,C({},o));case`richtext`:return(0,m.jsx)(f.RichTextIcon,C({},o));case`spreadsheet`:return(0,m.jsx)(f.TableIcon,C({},o));case`video`:return(0,m.jsx)(f.FileVideoIcon,C({},o));default:return(0,m.jsx)(f.FileArchiveIcon,C({},o))}};T.displayName=`AssetIcon`;function E(){return{root:(0,l.css)({position:`relative`,width:`100%`}),height100:(0,l.css)({height:`100%`}),image:(0,l.css)({width:`auto`,maxWidth:`100%`,maxHeight:`100%`}),titleContainer:(0,l.css)({opacity:0,transition:`opacity ${p.default.transitionDurationDefault} ${p.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, ${p.default.gray900} 0%, transparent calc(1rem * (100 / ${p.default.fontBaseDefault})), transparent 100% )`,":hover":{opacity:1}}),title:(0,l.css)({bottom:0,left:0,right:0,position:`absolute`})}}const D=[`className`,`src`,`status`,`testId`,`title`,`type`];function O(e,t){let{className:n,src:r,status:i,testId:a=`cf-ui-asset`,title:o,type:s=`image`}=e,c=_(e,D),f=E(),p=r&&r!==``&&s===`image`&&i!==`archived`;return(0,m.jsx)(u.Box,C(C({className:(0,l.cx)(f.root,n),testId:a,ref:t},c),{},{children:p?(0,m.jsxs)(m.Fragment,{children:[(0,m.jsx)(u.Flex,{alignItems:`center`,justifyContent:`center`,className:f.height100,children:(0,m.jsx)(`img`,{className:f.image,src:r,alt:o})}),o&&(0,m.jsx)(`div`,{className:f.titleContainer,children:(0,m.jsx)(d.Text,{className:f.title,fontColor:`colorWhite`,margin:`spacingS`,isTruncated:!0,children:o})})]}):(0,m.jsxs)(u.Flex,{flexDirection:`column`,alignItems:`center`,justifyContent:`center`,paddingLeft:`spacingS`,paddingRight:`spacingS`,className:f.height100,children:[(0,m.jsx)(u.Flex,{marginBottom:`spacingM`,marginTop:`spacingM`,justifyContent:`center`,children:(0,m.jsx)(T,{type:s})}),(0,m.jsx)(d.Text,{isTruncated:!0,marginBottom:`spacingM`,fontColor:`gray600`,children:o})]})}))}O.displayName=`Asset`;const k=c.default.forwardRef(O),A={archive:`archive`,audio:`audio`,code:`code`,image:`image`,markup:`markup`,pdf:`pdf`,plaintext:`plaintext`,presentation:`presentation`,richtext:`richtext`,spreadsheet:`spreadsheet`,video:`video`};function j(e){return Object.keys(A).includes(e)}exports.Asset=k,exports.AssetIcon=T,exports.isAssetType=j;
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
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","jsx","FileAudioIcon","BracketsCurlyIcon","ImageSquareIcon","FileCodeIcon","FilePdfIcon","FileTextIcon","PresentationIcon","RichTextIcon","TableIcon","FileVideoIcon","FileArchiveIcon","getAssetStyles","AssetBase","ref","src","status","title","showPreview","Box","jsxs","Fragment","Flex","Text","Asset","React","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 extends Omit<\n GeneratedIconProps,\n 'illustration' | 'ref'\n> {\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"]}
|
|
1
|
+
{"version":3,"file":"index.js","names":["css","tokens","cx","FileAudioIcon","BracketsCurlyIcon","ImageSquareIcon","FileCodeIcon","FilePdfIcon","FileTextIcon","PresentationIcon","RichTextIcon","TableIcon","FileVideoIcon","FileArchiveIcon","css","tokens","Box","cx","Flex","Text","React"],"sources":["../src/AssetIcon/AssetIcon.styles.ts","../src/AssetIcon/AssetIcon.tsx","../src/Asset.styles.ts","../src/Asset.tsx","../src/types.ts"],"sourcesContent":["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 extends Omit<\n GeneratedIconProps,\n 'illustration' | 'ref'\n> {\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","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","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"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@contentful/f36-asset",
|
|
3
|
-
"version": "6.20.
|
|
3
|
+
"version": "6.20.2",
|
|
4
4
|
"description": "Forma 36: Asset component",
|
|
5
5
|
"dependencies": {
|
|
6
|
-
"@contentful/f36-core": "^6.20.
|
|
7
|
-
"@contentful/f36-icon": "^6.20.
|
|
8
|
-
"@contentful/f36-icons": "^6.20.
|
|
6
|
+
"@contentful/f36-core": "^6.20.2",
|
|
7
|
+
"@contentful/f36-icon": "^6.20.2",
|
|
8
|
+
"@contentful/f36-icons": "^6.20.2",
|
|
9
9
|
"@contentful/f36-tokens": "^6.3.0",
|
|
10
|
-
"@contentful/f36-typography": "^6.20.
|
|
10
|
+
"@contentful/f36-typography": "^6.20.2",
|
|
11
11
|
"@emotion/css": "^11.13.5"
|
|
12
12
|
},
|
|
13
13
|
"peerDependencies": {
|
|
@@ -37,6 +37,6 @@
|
|
|
37
37
|
"@testing-library/react": "^16.3.0"
|
|
38
38
|
},
|
|
39
39
|
"scripts": {
|
|
40
|
-
"build": "
|
|
40
|
+
"build": "tsdown"
|
|
41
41
|
}
|
|
42
42
|
}
|
package/dist/index.d.mts
DELETED
|
@@ -1,54 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { CommonProps, PickUnion, EntityStatus } from '@contentful/f36-core';
|
|
3
|
-
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
4
|
-
import { GeneratedIconProps } from '@contentful/f36-icon';
|
|
5
|
-
|
|
6
|
-
declare const types: {
|
|
7
|
-
archive: string;
|
|
8
|
-
audio: string;
|
|
9
|
-
code: string;
|
|
10
|
-
image: string;
|
|
11
|
-
markup: string;
|
|
12
|
-
pdf: string;
|
|
13
|
-
plaintext: string;
|
|
14
|
-
presentation: string;
|
|
15
|
-
richtext: string;
|
|
16
|
-
spreadsheet: string;
|
|
17
|
-
video: string;
|
|
18
|
-
};
|
|
19
|
-
declare function isAssetType(type: string): type is AssetType;
|
|
20
|
-
type AssetType = keyof typeof types;
|
|
21
|
-
|
|
22
|
-
type AssetStatus = PickUnion<EntityStatus, 'archived' | 'changed' | 'deleted' | 'draft' | 'published'>;
|
|
23
|
-
interface AssetProps extends CommonProps {
|
|
24
|
-
/**
|
|
25
|
-
* A `src` attribute to use for image assets
|
|
26
|
-
*/
|
|
27
|
-
src?: string;
|
|
28
|
-
/**
|
|
29
|
-
* The publish status of the asset
|
|
30
|
-
*/
|
|
31
|
-
status?: AssetStatus;
|
|
32
|
-
/**
|
|
33
|
-
* The title of the asset
|
|
34
|
-
*/
|
|
35
|
-
title?: string;
|
|
36
|
-
/**
|
|
37
|
-
* The type of asset being represented
|
|
38
|
-
*/
|
|
39
|
-
type?: AssetType;
|
|
40
|
-
}
|
|
41
|
-
declare const Asset: React.ForwardRefExoticComponent<AssetProps & React.RefAttributes<HTMLElement>>;
|
|
42
|
-
|
|
43
|
-
interface AssetIconProps extends Omit<GeneratedIconProps, 'illustration' | 'ref'> {
|
|
44
|
-
type?: AssetType;
|
|
45
|
-
}
|
|
46
|
-
/**
|
|
47
|
-
* Renders only the Illustration that would represent this asset's type
|
|
48
|
-
*/
|
|
49
|
-
declare const AssetIcon: {
|
|
50
|
-
({ type, className, testId, ...otherProps }: AssetIconProps): react_jsx_runtime.JSX.Element;
|
|
51
|
-
displayName: string;
|
|
52
|
-
};
|
|
53
|
-
|
|
54
|
-
export { Asset, AssetIcon, type AssetIconProps, type AssetProps, type AssetStatus, type AssetType, isAssetType };
|