@contentful/f36-card 6.0.0-alpha.5 → 6.0.0

package/dist/esm/index.js

@@ -1,3 +1,3 @@
-import c,{forwardRef,useState,useCallback}from'react';import {css,cx}from'@emotion/css';import {Box,Flex,getEntityStatusStyles}from'@contentful/f36-core';import {EntityStatusBadge}from'@contentful/f36-badge';import {Asset}from'@contentful/f36-asset';import {Skeleton}from'@contentful/f36-skeleton';import {DragHandle}from'@contentful/f36-drag-handle';import n from'@contentful/f36-tokens';import {Heading,Text,Subheading,Paragraph}from'@contentful/f36-typography';import {IconButton}from'@contentful/f36-button';import {DotsThreeIcon}from'@contentful/f36-icons';import {Menu}from'@contentful/f36-menu';import ve from'truncate';import {Tooltip}from'@contentful/f36-tooltip';var rr=Object.defineProperty,tr=Object.defineProperties;var or=Object.getOwnPropertyDescriptors;var Y=Object.getOwnPropertySymbols;var he=Object.prototype.hasOwnProperty,Be=Object.prototype.propertyIsEnumerable;var xe=(e,t,r)=>t in e?rr(e,t,{enumerable:true,configurable:true,writable:true,value:r}):e[t]=r,a=(e,t)=>{for(var r in t||(t={}))he.call(t,r)&&xe(e,r,t[r]);if(Y)for(var r of Y(t))Be.call(t,r)&&xe(e,r,t[r]);return e},l=(e,t)=>tr(e,or(t));var x=(e,t)=>{var r={};for(var o in e)he.call(e,o)&&t.indexOf(o)<0&&(r[o]=e[o]);if(e!=null&&Y)for(var o of Y(e))t.indexOf(o)<0&&Be.call(e,o)&&(r[o]=e[o]);return r};var be=()=>({contentBody:css({gridColumn:"content",gridRow:"content",whiteSpace:"initial"}),wrapper:css({flex:"1 1 0",display:"grid",gridTemplateRows:"[header] auto [content] minmax(0, 1fr)",gridTemplateColumns:"auto [content] minmax(0, 1fr)"}),dragHandle:css({borderBottomLeftRadius:n.borderRadiusMedium,borderTopLeftRadius:n.borderRadiusMedium,cursor:"grab"}),skeleton:css({border:`1px solid ${n.gray300}`,borderRadius:n.borderRadiusMedium,padding:n.spacingM})}),Ae=(e,t,r)=>({root:css(l(a(a({backgroundColor:n.colorWhite,borderColor:n.gray300,borderRadius:n.borderRadiusMedium,borderStyle:"solid",borderWidth:1,color:n.gray900,display:"flex",textAlign:"left",width:"100%",fontSize:n.fontSizeM,fontWeight:n.fontWeightNormal,position:"relative",textDecoration:"none",margin:0,transition:`border-color ${n.transitionDurationDefault} ${n.transitionEasingDefault},
+import c,{forwardRef,useState,useCallback}from'react';import {cx,css}from'@emotion/css';import {Box,Flex,getEntityStatusStyles}from'@contentful/f36-core';import {EntityStatusBadge}from'@contentful/f36-badge';import {Asset}from'@contentful/f36-asset';import {Skeleton}from'@contentful/f36-skeleton';import {DragHandle}from'@contentful/f36-drag-handle';import n from'@contentful/f36-tokens';import {Heading,Text,Subheading,Paragraph}from'@contentful/f36-typography';import {IconButton}from'@contentful/f36-button';import {DotsThreeIcon}from'@contentful/f36-icons';import {Menu}from'@contentful/f36-menu';import ve from'truncate';import {Tooltip}from'@contentful/f36-tooltip';var rr=Object.defineProperty,tr=Object.defineProperties;var or=Object.getOwnPropertyDescriptors;var Y=Object.getOwnPropertySymbols;var he=Object.prototype.hasOwnProperty,Be=Object.prototype.propertyIsEnumerable;var xe=(e,t,r)=>t in e?rr(e,t,{enumerable:true,configurable:true,writable:true,value:r}):e[t]=r,a=(e,t)=>{for(var r in t||(t={}))he.call(t,r)&&xe(e,r,t[r]);if(Y)for(var r of Y(t))Be.call(t,r)&&xe(e,r,t[r]);return e},l=(e,t)=>tr(e,or(t));var x=(e,t)=>{var r={};for(var o in e)he.call(e,o)&&t.indexOf(o)<0&&(r[o]=e[o]);if(e!=null&&Y)for(var o of Y(e))t.indexOf(o)<0&&Be.call(e,o)&&(r[o]=e[o]);return r};var be=()=>({contentBody:css({gridColumn:"content",gridRow:"content",whiteSpace:"initial"}),wrapper:css({flex:"1 1 0",display:"grid",gridTemplateRows:"[header] auto [content] minmax(0, 1fr)",gridTemplateColumns:"auto [content] minmax(0, 1fr)"}),dragHandle:css({borderBottomLeftRadius:n.borderRadiusMedium,borderTopLeftRadius:n.borderRadiusMedium,cursor:"grab"}),skeleton:css({border:`1px solid ${n.gray300}`,borderRadius:n.borderRadiusMedium,padding:n.spacingM})}),Ae=(e,t,r)=>({root:css(l(a(a({backgroundColor:n.colorWhite,borderColor:n.gray300,borderRadius:n.borderRadiusMedium,borderStyle:"solid",borderWidth:1,color:n.gray900,display:"flex",textAlign:"left",width:"100%",fontSize:n.fontSizeM,fontWeight:n.fontWeightNormal,position:"relative",textDecoration:"none",margin:0,transition:`border-color ${n.transitionDurationDefault} ${n.transitionEasingDefault},
   box-shadow ${n.transitionDurationShort} ${n.transitionEasingDefault}`,paddingTop:e?0:n.spacingM},t&&{borderColor:n.blue500,cursor:"pointer"}),r&&{backgroundColor:n.blue100,borderColor:n.blue500}),{"&:focus":css({borderColor:r?n.blue100:n.blue500,boxShadow:n.glowPrimary,outline:"none"}),"&:focus:not(:focus-visible)":css({borderColor:r?n.blue500:n.gray300,boxShadow:"unset"}),"&:focus-visible":css({borderColor:n.blue500,boxShadow:n.glowPrimary})}))});var Pe=()=>({root:css({minHeight:"auto",padding:n.spacing2Xs})});var R=({buttonProps:e,children:t})=>{let r=Pe();return c.createElement(Menu,null,c.createElement(Menu.Trigger,null,c.createElement(IconButton,l(a({},e),{"aria-label":"Actions",icon:c.createElement(DotsThreeIcon,null),className:cx(r.root,e==null?void 0:e.className),size:"small",variant:"transparent",testId:"cf-ui-card-actions"}))),c.createElement(Menu.List,null,t))};R.displayName="CardActions";var Ie=()=>({header:css({columnGap:n.spacingXs,rowGap:n.spacing2Xs,alignItems:"center",borderBottomColor:n.gray200,borderBottomStyle:"solid",borderBottomWidth:1,borderTopLeftRadius:n.borderRadiusMedium,borderTopRightRadius:n.borderRadiusMedium,boxSizing:"border-box",color:n.gray600,fontSize:n.fontSizeM,fontWeight:n.fontWeightNormal,gridColumn:"content",gridRow:"header",lineHeight:n.lineHeightM,paddingBottom:n.spacingXs,paddingLeft:n.spacingM,paddingRight:n.spacingXs,paddingTop:n.spacingXs,minHeight:"37px"}),headerWithActions:css({paddingBottom:n.spacing2Xs,paddingRight:n.spacingXs,paddingTop:n.spacing2Xs})});var j=e=>{e.preventDefault(),e.stopPropagation();},U=e=>{let{icon:t,type:r,actions:o,actionsButtonProps:s,badge:f,customActionButton:i}=e,p=Ie(),y=()=>i?c.createElement(Flex,{onClick:j,alignItems:"center"},i):o&&o.length>0?c.createElement(Flex,{onClick:j,alignItems:"center"},c.createElement(R,{buttonProps:s},o)):null;return c.createElement(Flex,{flexWrap:"wrap",className:cx(p.header,(o||i)&&p.headerWithActions)},c.createElement(Flex,{flexGrow:1},r&&c.createElement(Text,{fontColor:"gray600",isWordBreak:true},r)),t&&c.createElement(Flex,{alignItems:"center"},t),f&&c.createElement(Flex,{alignItems:"center"},f),y())};U.displayName="DefaultCardHeader";var K=({children:e,defaultHeader:t,drag:r,dragHandleRender:o,header:s,isDragging:f,styles:i,withDragHandle:p})=>c.createElement(c.Fragment,null,p?o?o({drag:r,isDragging:f}):r:null,c.createElement("div",{className:i.wrapper,"data-card-part":"wrapper"},s!=null?s:t,c.createElement("div",{className:i.contentBody,"data-card-part":"content"},e)));K.displayName="CardInner";var gr="article";function Se(Rr,Q){var me=Rr,{actions:e,actionsButtonProps:t,ariaLabel:r,badge:o,children:s,className:f,customActionButton:i,header:p,href:y,icon:E,isDragging:g=false,isHovered:d,isSelected:h=false,onBlur:L,onClick:B,onFocus:P,onKeyDown:b,onMouseEnter:T,onMouseLeave:I,target:v,rel:W,testId:Ye="cf-ui-base-card",title:pe,type:le,withDragHandle:O,dragHandleRender:q,isLoading:je,as:Ke}=me,J=x(me,["actions","actionsButtonProps","ariaLabel","badge","children","className","customActionButton","header","href","icon","isDragging","isHovered","isSelected","onBlur","onClick","onFocus","onKeyDown","onMouseEnter","onMouseLeave","target","rel","testId","title","type","withDragHandle","dragHandleRender","isLoading","as"]);let X=be(),[Ve,ce]=useState(d!=null?d:false),qe=!!(B||y||O),Je=!!p,Z=le||E||o||e||i?c.createElement(U,{type:le,icon:E,badge:o,actions:e,customActionButton:i,actionsButtonProps:t}):null,fe=useCallback(C=>{P&&P(C);},[P]),ge=useCallback(C=>{L&&L(C);},[L]),ue=useCallback(C=>{ce(true),T&&T(C);},[T]),ye=useCallback(C=>{ce(false),I&&I(C);},[I]),Ce=B?C=>{B(C);}:void 0,Qe=useCallback(C=>{b&&b(C);},[b]);if(je)return c.createElement(Skeleton.Container,{className:X.skeleton,svgHeight:"5.6rem"},c.createElement(Skeleton.DisplayText,{numberOfLines:1}),c.createElement(Skeleton.BodyText,{numberOfLines:1,offsetTop:35}));let ee=c.createElement(DragHandle,{className:X.dragHandle,isActive:g,label:"Reorder entry",onClick:j}),Ee=Ke||gr,Ze=Ae(Je,Ve,h),re={testId:Ye,className:cx(Ze.root,f),"aria-label":pe||r,title:pe},er={href:y,target:v,rel:W!=null?W:"noreferrer"};if(Ee==="a")return c.createElement(Box,a(l(a(a({as:"a"},er),re),{ref:Q,onClick:Ce,onFocus:fe,onBlur:ge,onMouseEnter:typeof d=="undefined"?ue:void 0,onMouseLeave:typeof d=="undefined"?ye:void 0}),J),c.createElement(K,{children:s,defaultHeader:Z,drag:ee,dragHandleRender:q,header:p,isDragging:g,styles:X,withDragHandle:O}));let te=Ee;return qe?c.createElement(Box,a(l(a({as:te},re),{"aria-pressed":te==="button"?!!h:void 0,onBlur:ge,onClick:Ce,onFocus:fe,onMouseEnter:typeof d=="undefined"?ue:void 0,onMouseLeave:typeof d=="undefined"?ye:void 0,onKeyDown:Qe,role:B?"button":void 0,tabIndex:B?0:void 0,ref:Q}),J),c.createElement(K,{children:s,defaultHeader:Z,drag:ee,dragHandleRender:q,header:p,isDragging:g,styles:X,withDragHandle:O})):c.createElement(Box,l(a(a({as:te},re),J),{ref:Q}),c.createElement(K,{children:s,defaultHeader:Z,drag:ee,dragHandleRender:q,header:p,isDragging:g,styles:X,withDragHandle:O}))}Se.displayName="BaseCard";var H=c.forwardRef(Se);var De=()=>({root:({size:e})=>css({display:"inline-flex",width:"auto",borderRadius:n.borderRadiusMedium,minWidth:`calc(1rem * (120 / ${n.fontBaseDefault}))`,height:e==="small"?`calc(1rem * (188 / ${n.fontBaseDefault}))`:`calc(1rem * (300 / ${n.fontBaseDefault}))`,padding:0,textAlign:"center"}),asset:css({height:"100%"}),skeleton:css({border:`1px solid ${n.gray300}`,borderRadius:n.borderRadiusMedium,padding:n.spacingM})});var Me=B=>{var P=B,{actions:e,className:t,icon:r=null,isSelected:o,size:s="default",src:f,status:i,title:p,type:y,withDragHandle:E=false,isLoading:g,testId:d="cf-ui-asset-card",badge:h}=P,L=x(P,["actions","className","icon","isSelected","size","src","status","title","type","withDragHandle","isLoading","testId","badge"]);let b=De(),T=h||(i?c.createElement(EntityStatusBadge,{entityStatus:i}):null),I=r||T||e?c.createElement(U,{icon:r,badge:T,actions:e}):null;return g?c.createElement(Skeleton.Container,{className:b.skeleton,svgWidth:s==="default"?"18rem":"11rem",svgHeight:s==="default"?"18.75rem":"12rem"},c.createElement(Skeleton.Image,{width:"100%",height:"18.75rem"})):c.createElement(H,l(a({},L),{badge:T,className:cx(b.root({size:s}),t),header:I,isSelected:o,title:p,withDragHandle:E,testId:d}),c.createElement(Flex,{alignItems:"center",fullHeight:true,justifyContent:"center"},c.createElement(Asset,{className:b.asset,src:f,status:i,title:p,type:y})))};var xr=e=>{switch(e){case "large":return n.spacingL;case "none":return 0;default:return n.spacingM}},Re=({padding:e})=>({header:css({gridColumn:"content",gridRow:"header",marginBottom:n.spacingM}),root:css({padding:xr(e)})});function ke(E,y){var g=E,{actions:e,badge:t,icon:r,padding:o="default",title:s,className:f,testId:i="cf-ui-card"}=g,p=x(g,["actions","badge","icon","padding","title","className","testId"]);let d=Re({padding:o}),h=!!(s||r||t||e);return c.createElement(H,l(a({className:cx(d.root,f)},p),{testId:i,header:h&&c.createElement(Flex,{alignItems:"center",className:cx(d.header)},s&&c.createElement(Flex,{as:"header",flexGrow:1},c.createElement(Heading,{marginBottom:"none"},s)),r&&c.createElement(Flex,{alignItems:"center",marginLeft:"spacingXs"},r),t&&c.createElement(Flex,{alignItems:"center",marginLeft:"spacingXs"},t),e&&c.createElement(R,null,e)),ref:y}))}ke.displayName="Card";var Ne=forwardRef(ke);var _e=()=>({actionsButton:css({borderBottomLeftRadius:0,borderBottomRightRadius:0,borderTopLeftRadius:0,borderTopRightRadius:n.borderRadiusMedium}),content:e=>css({gridColumn:"content",marginTop:e==="small"?n.spacingXs:n.spacingS,marginBottom:e==="small"?`calc(-1 * ${n.spacingXs})`:0}),root:css({padding:0,'[data-card-part="content"]':{paddingBottom:n.spacingM,paddingLeft:n.spacingM,paddingRight:n.spacingM}}),header:css({borderBottomWidth:1,borderBottomColor:n.gray200,borderBottomStyle:"solid",minHeight:"auto",paddingBottom:n.spacingXs,paddingLeft:n.spacingM,paddingRight:n.spacingXs}),thumbnail:e=>css(a({margin:`0 0 0 ${n.spacingS}`,padding:0,overflow:"hidden",position:"relative",img:{width:"100%",height:"100%",objectFit:"cover",position:"absolute",zIndex:1}},e==="small"?{height:"40px",width:"40px"}:{height:"70px",width:"70px"}))});var Sr="article";function We({title:e,titleTag:t}){if(!e)return null;let r=ve(e,255,{});return c.createElement(Subheading,{title:e.length>255?e:"",testId:"title",as:t,marginBottom:"none",isWordBreak:true},r)}We.displayName="EntryCardTitle";function Xe({description:e,size:t}){if(!e||t==="small")return null;let r=ve(e,95,{});return c.createElement(Paragraph,{marginBottom:"none",isWordBreak:true},r)}Xe.displayName="EntryCardDescription";function Ge(T,b){var I=T,{actions:e,children:t,className:r,customActionButton:o,src:s,status:f,thumbnailElement:i,description:p,withDragHandle:y=false,title:E,titleTag:g="h2",size:d,testId:h="cf-ui-entry-card",contentType:L,badge:B}=I,P=x(I,["actions","children","className","customActionButton","src","status","thumbnailElement","description","withDragHandle","title","titleTag","size","testId","contentType","badge"]);let v=_e(),W=f?c.createElement(EntityStatusBadge,{entityStatus:f}):null;return c.createElement(H,l(a({as:Sr},P),{actions:e,badge:B||W,className:cx(v.root,r),customActionButton:o,withDragHandle:y,ref:b,type:L,testId:h}),c.createElement(Flex,{alignItems:"center",className:v.content(d),flexDirection:"row"},c.createElement(Flex,{flexDirection:"column",flexGrow:1,gap:"spacingS"},c.createElement(We,{title:E,titleTag:g}),c.createElement(Xe,{size:d,description:p}),t),i&&d!=="small"&&c.createElement("figure",{className:v.thumbnail(d)},i)))}Ge.displayName="EntryCard";var Ue=forwardRef(Ge);var $e=()=>({actions:css({display:"flex",padding:0,marginLeft:n.spacingXs,minHeight:"auto"}),root:({status:e})=>{let t=getEntityStatusStyles({status:e});return css({borderBottomLeftRadius:0,borderTopLeftRadius:0,display:"inline-flex",width:"auto",verticalAlign:"middle",paddingBottom:0,paddingTop:0,paddingLeft:n.spacingS,paddingRight:n.spacing2Xs,'[data-card-part="wrapper"]':{display:"inline-flex",flexDirection:"row-reverse"},"&::before":{backgroundColor:t.color,bottom:0,content:'""',display:"block",left:0,position:"absolute",top:0,width:n.spacing2Xs}})},skeleton:css({display:"inline-flex",border:`1px solid ${n.gray300}`,borderTopRightRadius:n.borderRadiusMedium,borderBottomRightRadius:n.borderRadiusMedium,padding:n.spacingXs})});var Oe=y=>{var E=y,{actions:e,className:t,children:r,status:o,title:s,isLoading:f,testId:i="cf-ui-inline-entry-card"}=E,p=x(E,["actions","className","children","status","title","isLoading","testId"]);let g=$e(),d=c.createElement(R,{buttonProps:{className:g.actions}},e);return f?c.createElement(Skeleton.Container,{className:g.skeleton,svgHeight:"1.25rem",svgWidth:"6rem"},c.createElement(Skeleton.BodyText,{numberOfLines:1})):c.createElement(Tooltip,{placement:"bottom",content:s},c.createElement(H,l(a({},p),{className:cx(g.root({status:o}),t),header:d,testId:i}),r||c.createElement(Text,null,s)))};export{Me as AssetCard,Ne as Card,Ue as EntryCard,Oe as InlineEntryCard};//# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map

package/package.json

@@ -1,23 +1,23 @@
 {
   "name": "@contentful/f36-card",
-  "version": "6.0.0-alpha.5",
+  "version": "6.0.0",
   "description": "Forma 36: Card components",
   "scripts": {
     "build": "tsup"
   },
   "dependencies": {
-    "@contentful/f36-asset": "^6.0.0-alpha.0",
-    "@contentful/f36-badge": "^6.0.0-alpha.0",
-    "@contentful/f36-button": "^6.0.0-alpha.0",
-    "@contentful/f36-core": "^6.0.0-alpha.0",
-    "@contentful/f36-drag-handle": "^6.0.0-alpha.0",
-    "@contentful/f36-icon": "^6.0.0-alpha.0",
-    "@contentful/f36-icons": "^6.0.0-alpha.0",
-    "@contentful/f36-menu": "^6.0.0-alpha.0",
-    "@contentful/f36-skeleton": "^6.0.0-alpha.0",
-    "@contentful/f36-tokens": "^6.0.0-alpha.0",
-    "@contentful/f36-tooltip": "^6.0.0-alpha.0",
-    "@contentful/f36-typography": "^6.0.0-alpha.0",
+    "@contentful/f36-asset": "^6.0.0",
+    "@contentful/f36-badge": "^6.0.0",
+    "@contentful/f36-button": "^6.0.0",
+    "@contentful/f36-core": "^6.0.0",
+    "@contentful/f36-drag-handle": "^6.0.0",
+    "@contentful/f36-icon": "^6.0.0",
+    "@contentful/f36-icons": "^6.0.0",
+    "@contentful/f36-menu": "^6.0.0",
+    "@contentful/f36-skeleton": "^6.0.0",
+    "@contentful/f36-tokens": "^6.0.0",
+    "@contentful/f36-tooltip": "^6.0.0",
+    "@contentful/f36-typography": "^6.0.0",
     "@emotion/css": "^11.13.5",
     "truncate": "^3.0.0"
   },