@contentful/f36-entity-list 4.77.2 → 4.77.4
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.js +1 -1
- package/dist/esm/index.js.map +1 -1
- package/dist/index.js +1 -1
- package/dist/index.js.map +1 -1
- package/package.json +9 -9
package/dist/esm/index.js
CHANGED
|
@@ -11,7 +11,7 @@ import { Button } from '@contentful/f36-button';
|
|
|
11
11
|
import { Menu } from '@contentful/f36-menu';
|
|
12
12
|
import { Skeleton } from '@contentful/f36-skeleton';
|
|
13
13
|
|
|
14
|
-
var K=Object.defineProperty,Q=Object.defineProperties;var V=Object.getOwnPropertyDescriptors;var p=Object.getOwnPropertySymbols;var
|
|
14
|
+
var K=Object.defineProperty,Q=Object.defineProperties;var V=Object.getOwnPropertyDescriptors;var p=Object.getOwnPropertySymbols;var k=Object.prototype.hasOwnProperty,N=Object.prototype.propertyIsEnumerable;var S=(t,n,o)=>n in t?K(t,n,{enumerable:!0,configurable:!0,writable:!0,value:o}):t[n]=o,l=(t,n)=>{for(var o in n||(n={}))k.call(n,o)&&S(t,o,n[o]);if(p)for(var o of p(n))N.call(n,o)&&S(t,o,n[o]);return t},d=(t,n)=>Q(t,V(n));var w=(t,n)=>{var o={};for(var r in t)k.call(t,r)&&n.indexOf(r)<0&&(o[r]=t[r]);if(t!=null&&p)for(var r of p(t))n.indexOf(r)<0&&N.call(t,r)&&(o[r]=t[r]);return o};var M=()=>({root:css({display:"block",listStyle:"none",margin:0,padding:0,border:`1px solid ${i.gray200}`,borderBottom:"none",borderRadius:i.borderRadiusMedium,overflow:"hidden"})});function A(t,n){let o=M();return e.createElement("ul",{"data-test-id":t.testId||"cf-ui-entity-list",ref:n,className:cx(o.root,t.className),style:t.style},t.children)}A.displayName="EntityList";var B=e.forwardRef(A);var $=()=>({root:t=>css(d(l({display:"flex",boxShadow:`inset 0 -1px 0 ${i.gray200}`,position:"relative",transition:`${i.transitionDurationShort} ${i.transitionEasingDefault}`,transitionProperty:"box-shadow, background-color",backgroundColor:i.colorWhite},t.isDragActive?{boxShadow:i.boxShadowHeavy}:{}),{"&:hover":{backgroundColor:i.gray100}})),card:t=>css({display:"flex",textDecoration:"none",minWidth:0,width:"100%",minHeight:i.spacing3Xl,padding:i.spacingXs,margin:0,border:"none",background:"none",textAlign:"left",cursor:t?"pointer":"inherit","&:focus-visible":{boxShadow:`inset ${i.glowPrimary}`,outline:"none"}}),content:css({flexGrow:1,minWidth:0,position:"relative"}),media:css({display:"flex",flexShrink:0,alignItems:"center",justifyContent:"center",backgroundColor:i.gray200,width:i.spacing2Xl,height:i.spacing2Xl,margin:"0",marginRight:i.spacingXs}),thumbnail:css({display:"block",width:"100%",height:"100%",objectFit:"cover"}),contentType:css({marginLeft:i.spacingXs}),entityType:css({textTransform:"capitalize"}),description:css({"&::before":{content:'"|"',color:i.gray400,height:"25%",marginTop:i.spacing2Xs,marginLeft:i.spacing2Xs,marginRight:i.spacing2Xs}}),meta:css({marginLeft:"auto",flexShrink:0}),dragHandle:css({borderBottomLeftRadius:"0",borderTopLeftRadius:"0",boxShadow:`inset 0 -1px 0 ${i.gray200}`}),menuTrigger:css({padding:"0 0.125rem",minHeight:"1.5rem",height:"1rem",margin:`${i.spacingXs} ${i.spacingXs} 0 0`})});var pt={asset:AssetIcon,entry:EntryIcon,release:ReleaseIcon,page:PageIcon,experience:PaintBrushIcon},y=dt=>{var C=dt,{className:t,testId:n="cf-ui-entity-list-item",title:o,description:r,contentType:b,entityType:m="entry",withThumbnail:W=!0,thumbnailUrl:I,thumbnailAltText:O,status:f,actions:h,withDragHandle:z,isDragActive:P,isLoading:U,onClick:H,href:g,cardDragHandleProps:_,cardDragHandleComponent:T,isActionsDisabled:j=!1}=C,G=w(C,["className","testId","title","description","contentType","entityType","withThumbnail","thumbnailUrl","thumbnailAltText","status","actions","withDragHandle","isDragActive","isLoading","onClick","href","cardDragHandleProps","cardDragHandleComponent","isActionsDisabled"]);let s=$(),q=()=>{if(T)return T;if(z)return e.createElement(DragHandle,l({className:s.dragHandle,isActive:P,label:"Reorder entry"},_))},u="article",v=!1;(g||H)&&(u=g?"a":"button",v=!0);let J=f==="archived"||!I;return e.createElement("li",d(l({},G),{className:cx(s.root({isDragActive:P}),t),"data-test-id":n}),q(),U?e.createElement("article",{className:s.card(!1)},e.createElement(Skeleton.Container,{svgHeight:46,clipId:"f36-entity-list-item-skeleton"},e.createElement(Skeleton.Image,{height:46,width:46}),e.createElement(Skeleton.BodyText,{numberOfLines:2,lineHeight:18,offsetLeft:54}))):e.createElement(e.Fragment,null,e.createElement(u,l(l({className:s.card(v),onClick:H,href:g},g?{target:"_blank"}:{}),u==="button"?{type:"button"}:{}),W&&e.createElement("figure",{className:s.media},J?e.createElement(Icon,{as:pt[m.toLowerCase()],variant:"muted","data-test-id":`thumbnail-icon-${m.toLowerCase()}`}):e.createElement("img",{src:I,className:s.thumbnail,alt:O})),e.createElement("div",{className:s.content},e.createElement(Flex,null,e.createElement(Text,{as:"h3",lineHeight:"lineHeightM",fontColor:"gray900",fontWeight:"fontWeightDemiBold",isTruncated:!0},o),b&&e.createElement(Text,{as:"span",lineHeight:"lineHeightM",fontColor:"gray600",className:s.contentType,isTruncated:!0},"(",b,")")),e.createElement(Flex,{marginTop:"spacing2Xs"},m&&e.createElement(Text,{lineHeight:"lineHeightM",fontColor:"gray600",className:s.entityType},m),r&&e.createElement(Text,{as:"p",lineHeight:"lineHeightM",fontColor:"gray900",isTruncated:!0,className:s.description},r))),e.createElement(Flex,{className:s.meta,alignItems:"flex-start",paddingLeft:"spacingXs"},f&&e.createElement(Box,{marginRight:h?"spacingXs":"none"},e.createElement(EntityStatusBadge,{entityStatus:f})))),h&&e.createElement(Menu,null,e.createElement(Menu.Trigger,null,e.createElement(Button,{isDisabled:j,startIcon:e.createElement(MoreHorizontalIcon,null),variant:"transparent","aria-label":"Actions",size:"small",className:s.menuTrigger})),e.createElement(Menu.List,null,h))))};y.displayName="EntityListItem";var F=B;F.Item=y;
|
|
15
15
|
|
|
16
16
|
export { F as EntityList, y as EntityListItem };
|
|
17
17
|
//# sourceMappingURL=out.js.map
|
package/dist/esm/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/EntityList.tsx","../../src/EntityList.styles.ts","../../src/EntityListItem/EntityListItem.tsx","../../src/EntityListItem/EntityListItem.styles.ts","../../src/CompoundEntityList.tsx"],"names":["React","cx","css","tokens","getEntityListStyles","_EntityList","props","ref","styles","EntityList","EntityStatusBadge","Flex","Box","AssetIcon","EntryIcon","ReleaseIcon","MoreHorizontalIcon","PageIcon","PaintBrushIcon","Icon","Text","DragHandle","Button","Menu","Skeleton","getEntityListItemStyles","__spreadProps","__spreadValues","isClickable","ICON_MAP","EntityListItem","_a","_b","className","testId","title","description","contentType","entityType","withThumbnail","thumbnailUrl","thumbnailAltText","status","actions","withDragHandle","isDragActive","isLoading","onClick","href","cardDragHandleProps","cardDragHandleComponent","isActionsDisabled","otherProps","__objRest","renderCardDragHandle","Element","asIcon"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { cx } from 'emotion';\nimport type { CommonProps, ExpandProps } from '@contentful/f36-core';\n\nimport { getEntityListStyles } from './EntityList.styles';\n\nexport interface EntityListProps extends CommonProps {\n children?: React.ReactNode;\n}\n\nfunction _EntityList(\n props: ExpandProps<EntityListProps>,\n ref: React.Ref<HTMLUListElement>,\n) {\n const styles = getEntityListStyles();\n\n return (\n <ul\n data-test-id={props.testId || 'cf-ui-entity-list'}\n ref={ref}\n className={cx(styles.root, props.className)}\n style={props.style}\n >\n {props.children}\n </ul>\n );\n}\n\n_EntityList.displayName = 'EntityList';\n\nexport const EntityList = React.forwardRef(_EntityList);\n","import { css } from 'emotion';\nimport tokens from '@contentful/f36-tokens';\n\nexport const getEntityListStyles = () => ({\n root: css({\n display: 'block',\n listStyle: 'none',\n margin: 0,\n padding: 0,\n border: `1px solid ${tokens.gray200}`,\n borderBottom: 'none',\n borderRadius: tokens.borderRadiusMedium,\n overflow: 'hidden',\n }),\n});\n","import React, { type MouseEventHandler } from 'react';\nimport { cx } from 'emotion';\nimport { EntityStatusBadge } from '@contentful/f36-badge';\nimport {\n Flex,\n Box,\n type CommonProps,\n type EntityStatus,\n type PickUnion,\n} from '@contentful/f36-core';\nimport {\n AssetIcon,\n EntryIcon,\n ReleaseIcon,\n MoreHorizontalIcon,\n PageIcon,\n PaintBrushIcon,\n} from '@contentful/f36-icons';\nimport { Icon } from '@contentful/f36-icon';\nimport { Text } from '@contentful/f36-typography';\nimport { DragHandle, type DragHandleProps } from '@contentful/f36-drag-handle';\nimport { Button } from '@contentful/f36-button';\nimport { Menu } from '@contentful/f36-menu';\nimport { Skeleton } from '@contentful/f36-skeleton';\n\nimport { getEntityListItemStyles } from './EntityListItem.styles';\n\ntype EntityListItemStatus = PickUnion<\n EntityStatus,\n 'archived' | 'changed' | 'draft' | 'published'\n>;\n\nconst ICON_MAP = {\n asset: AssetIcon,\n entry: EntryIcon,\n release: ReleaseIcon,\n page: PageIcon,\n experience: PaintBrushIcon,\n};\n\nexport interface EntityListItemProps extends CommonProps {\n /**\n * The title of the entity\n */\n title: string;\n /**\n * The description of the entity\n */\n description?: string;\n /**\n * The content type of the entity\n */\n contentType?: string;\n /**\n * The publish status of the entry\n */\n status?: EntityListItemStatus;\n /**\n * A boolean used to render the Thumbnail or not\n */\n withThumbnail?: boolean;\n /**\n * The URL of the entity's preview thumbnail. Use 46px x 46px images for best results\n */\n thumbnailUrl?: string;\n /**\n * The alt text for the thumbnail\n */\n thumbnailAltText?: string;\n /**\n * Menu elements rendered as actions in Menu\n */\n actions?: React.ReactNodeArray;\n /**\n * Renders a drag handle for the component for use in drag and drop contexts\n */\n withDragHandle?: boolean;\n /**\n * Applies styling for when the component is actively being dragged by the user\n */\n isDragActive?: boolean;\n /**\n * Prop to pass a custom CardDragHandle component to for use in drag and drop contexts\n */\n cardDragHandleComponent?: React.ReactNode;\n /**\n * Props to pass down to the default CardDragHandle component (does not work with cardDragHandleComponent prop)\n */\n cardDragHandleProps?: Partial<DragHandleProps>;\n /**\n * An entity can either be an Entry, an Asset or a Release. This prop will apply styling based on if the entity is an asset, a release or an entry\n *\n * Note: 'entry' and 'asset' are @deprecated but supported in v1.x for backwards compatibility\n */\n entityType?:\n | 'Entry'\n | 'Asset'\n | 'entry'\n | 'asset'\n | 'Release'\n | 'Page'\n | 'Experience'\n | 'experience';\n /**\n * Loading state for the component - when true will display loading feedback to the user\n */\n isLoading?: boolean;\n /**\n * The action to be performed on click of the EntryCard\n */\n onClick?: MouseEventHandler;\n /**\n * The href for the component. Will render the card as an `a` element for native browser link handling\n */\n href?: string;\n /**\n * A boolean used to disable the CardActions\n */\n isActionsDisabled?: boolean;\n}\n\nexport const EntityListItem = ({\n className,\n testId = 'cf-ui-entity-list-item',\n title,\n description,\n contentType,\n entityType = 'entry',\n withThumbnail = true,\n thumbnailUrl,\n thumbnailAltText,\n status,\n actions,\n withDragHandle,\n isDragActive,\n isLoading,\n onClick,\n href,\n cardDragHandleProps,\n cardDragHandleComponent,\n isActionsDisabled = false,\n ...otherProps\n}: EntityListItemProps): React.ReactElement => {\n const styles = getEntityListItemStyles();\n\n const renderCardDragHandle = () => {\n if (cardDragHandleComponent) {\n return cardDragHandleComponent;\n } else if (withDragHandle) {\n return (\n <DragHandle\n className={styles.dragHandle}\n isActive={isDragActive}\n label=\"Reorder entry\"\n {...cardDragHandleProps}\n />\n );\n }\n };\n\n let Element: React.ElementType = 'article';\n let isClickable = false;\n if (href || onClick) {\n Element = href ? 'a' : 'button';\n isClickable = true;\n }\n\n // archived assets will not be available on the CDN, resulting in a broken image src\n const isArchived = status === 'archived';\n const asIcon = isArchived || !thumbnailUrl;\n\n return (\n <li\n {...otherProps}\n className={cx(styles.root({ isDragActive }), className)}\n data-test-id={testId}\n >\n {renderCardDragHandle()}\n {isLoading ? (\n <article className={styles.card(false)}>\n <Skeleton.Container clipId=\"f36-entity-list-item-skeleton\">\n <Skeleton.Image height={46} width={46} />\n <Skeleton.BodyText\n numberOfLines={2}\n lineHeight={18}\n offsetLeft={54}\n />\n </Skeleton.Container>\n </article>\n ) : (\n <>\n <Element\n className={styles.card(isClickable)}\n onClick={onClick}\n href={href}\n {...(href ? { target: '_blank' } : {})}\n {...(Element === 'button' ? { type: 'button' } : {})}\n >\n {withThumbnail && (\n <figure className={styles.media}>\n {asIcon ? (\n <Icon\n as={ICON_MAP[entityType.toLowerCase()]}\n variant=\"muted\"\n data-test-id={`thumbnail-icon-${entityType.toLowerCase()}`}\n />\n ) : (\n <img\n src={thumbnailUrl}\n className={styles.thumbnail}\n alt={thumbnailAltText}\n />\n )}\n </figure>\n )}\n\n <div className={styles.content}>\n <Flex>\n <Text\n as=\"h3\"\n lineHeight=\"lineHeightM\"\n fontColor=\"gray900\"\n fontWeight=\"fontWeightDemiBold\"\n isTruncated\n >\n {title}\n </Text>\n\n {contentType && (\n <Text\n as=\"span\"\n lineHeight=\"lineHeightM\"\n fontColor=\"gray600\"\n className={styles.contentType}\n isTruncated\n >\n ({contentType})\n </Text>\n )}\n </Flex>\n <Flex marginTop=\"spacing2Xs\">\n {entityType && (\n <Text\n lineHeight=\"lineHeightM\"\n fontColor=\"gray600\"\n className={styles.entityType}\n >\n {entityType}\n </Text>\n )}\n {description && (\n <Text\n as=\"p\"\n lineHeight=\"lineHeightM\"\n fontColor=\"gray900\"\n isTruncated\n className={styles.description}\n >\n {description}\n </Text>\n )}\n </Flex>\n </div>\n\n <Flex\n className={styles.meta}\n alignItems=\"flex-start\"\n paddingLeft=\"spacingXs\"\n >\n {status && (\n <Box marginRight={actions ? 'spacingXs' : 'none'}>\n <EntityStatusBadge entityStatus={status} />\n </Box>\n )}\n </Flex>\n </Element>\n {actions && (\n <Menu>\n <Menu.Trigger>\n <Button\n isDisabled={isActionsDisabled}\n startIcon={<MoreHorizontalIcon />}\n variant=\"transparent\"\n aria-label=\"Actions\"\n size=\"small\"\n className={styles.menuTrigger}\n />\n </Menu.Trigger>\n <Menu.List>{actions}</Menu.List>\n </Menu>\n )}\n </>\n )}\n </li>\n );\n};\n\nEntityListItem.displayName = 'EntityListItem';\n","import { css } from 'emotion';\nimport tokens from '@contentful/f36-tokens';\nimport { EntityListItemProps } from './EntityListItem';\n\nexport const getEntityListItemStyles = () => ({\n root: (props: Pick<EntityListItemProps, 'isDragActive'>) =>\n css({\n display: 'flex',\n boxShadow: `inset 0 -1px 0 ${tokens.gray200}`,\n position: 'relative',\n transition: `${tokens.transitionDurationShort} ${tokens.transitionEasingDefault}`,\n transitionProperty: 'box-shadow, background-color',\n backgroundColor: tokens.colorWhite,\n ...(props.isDragActive\n ? {\n boxShadow: tokens.boxShadowHeavy,\n }\n : {}),\n\n '&:hover': {\n backgroundColor: tokens.gray100,\n },\n }),\n card: (isClickable: boolean) =>\n css({\n display: 'flex',\n textDecoration: 'none',\n width: '100%',\n minHeight: tokens.spacing3Xl,\n padding: tokens.spacingXs,\n margin: 0, // remove the default button margin in Safari.\n border: 'none',\n background: 'none',\n textAlign: 'left',\n cursor: isClickable ? 'pointer' : 'inherit',\n '&:focus-visible': {\n boxShadow: `inset ${tokens.glowPrimary}`,\n outline: 'none',\n },\n }),\n content: css({\n flexGrow: 1,\n minWidth: 0,\n position: 'relative',\n }),\n media: css({\n display: 'flex',\n flexShrink: 0,\n alignItems: 'center',\n justifyContent: 'center',\n backgroundColor: tokens.gray200,\n width: tokens.spacing2Xl,\n height: tokens.spacing2Xl,\n margin: '0',\n marginRight: tokens.spacingXs,\n }),\n thumbnail: css({\n display: 'block',\n width: '100%',\n height: '100%',\n objectFit: 'cover',\n }),\n contentType: css({\n marginLeft: tokens.spacingXs,\n }),\n entityType: css({\n textTransform: 'capitalize',\n }),\n description: css({\n '&::before': {\n content: '\"|\"',\n color: tokens.gray400,\n height: '25%',\n marginTop: tokens.spacing2Xs,\n marginLeft: tokens.spacing2Xs,\n marginRight: tokens.spacing2Xs,\n },\n }),\n meta: css({\n marginLeft: 'auto',\n flexShrink: 0,\n }),\n dragHandle: css({\n borderBottomLeftRadius: '0',\n borderTopLeftRadius: '0',\n boxShadow: `inset 0 -1px 0 ${tokens.gray200}`,\n }),\n menuTrigger: css({\n padding: '0 0.125rem',\n minHeight: '1.5rem',\n height: '1rem',\n margin: `${tokens.spacingXs} ${tokens.spacingXs} 0 0`,\n }),\n});\n","import { EntityList as OriginalEntityList } from './EntityList';\nimport { EntityListItem } from './EntityListItem/EntityListItem';\n\ntype CompoundEntityList = typeof OriginalEntityList & {\n Item: typeof EntityListItem;\n};\n\nexport const EntityList = OriginalEntityList as CompoundEntityList;\nEntityList.Item = EntityListItem;\n"]}
|
|
1
|
+
{"version":3,"sources":["../../src/EntityList.tsx","../../src/EntityList.styles.ts","../../src/EntityListItem/EntityListItem.tsx","../../src/EntityListItem/EntityListItem.styles.ts","../../src/CompoundEntityList.tsx"],"names":["React","cx","css","tokens","getEntityListStyles","_EntityList","props","ref","styles","EntityList","EntityStatusBadge","Flex","Box","AssetIcon","EntryIcon","ReleaseIcon","MoreHorizontalIcon","PageIcon","PaintBrushIcon","Icon","Text","DragHandle","Button","Menu","Skeleton","getEntityListItemStyles","__spreadProps","__spreadValues","isClickable","ICON_MAP","EntityListItem","_a","_b","className","testId","title","description","contentType","entityType","withThumbnail","thumbnailUrl","thumbnailAltText","status","actions","withDragHandle","isDragActive","isLoading","onClick","href","cardDragHandleProps","cardDragHandleComponent","isActionsDisabled","otherProps","__objRest","renderCardDragHandle","Element","asIcon"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { cx } from 'emotion';\nimport type { CommonProps, ExpandProps } from '@contentful/f36-core';\n\nimport { getEntityListStyles } from './EntityList.styles';\n\nexport interface EntityListProps extends CommonProps {\n children?: React.ReactNode;\n}\n\nfunction _EntityList(\n props: ExpandProps<EntityListProps>,\n ref: React.Ref<HTMLUListElement>,\n) {\n const styles = getEntityListStyles();\n\n return (\n <ul\n data-test-id={props.testId || 'cf-ui-entity-list'}\n ref={ref}\n className={cx(styles.root, props.className)}\n style={props.style}\n >\n {props.children}\n </ul>\n );\n}\n\n_EntityList.displayName = 'EntityList';\n\nexport const EntityList = React.forwardRef(_EntityList);\n","import { css } from 'emotion';\nimport tokens from '@contentful/f36-tokens';\n\nexport const getEntityListStyles = () => ({\n root: css({\n display: 'block',\n listStyle: 'none',\n margin: 0,\n padding: 0,\n border: `1px solid ${tokens.gray200}`,\n borderBottom: 'none',\n borderRadius: tokens.borderRadiusMedium,\n overflow: 'hidden',\n }),\n});\n","import React, { type MouseEventHandler } from 'react';\nimport { cx } from 'emotion';\nimport { EntityStatusBadge } from '@contentful/f36-badge';\nimport {\n Flex,\n Box,\n type CommonProps,\n type EntityStatus,\n type PickUnion,\n} from '@contentful/f36-core';\nimport {\n AssetIcon,\n EntryIcon,\n ReleaseIcon,\n MoreHorizontalIcon,\n PageIcon,\n PaintBrushIcon,\n} from '@contentful/f36-icons';\nimport { Icon } from '@contentful/f36-icon';\nimport { Text } from '@contentful/f36-typography';\nimport { DragHandle, type DragHandleProps } from '@contentful/f36-drag-handle';\nimport { Button } from '@contentful/f36-button';\nimport { Menu } from '@contentful/f36-menu';\nimport { Skeleton } from '@contentful/f36-skeleton';\n\nimport { getEntityListItemStyles } from './EntityListItem.styles';\n\ntype EntityListItemStatus = PickUnion<\n EntityStatus,\n 'archived' | 'changed' | 'draft' | 'published'\n>;\n\nconst ICON_MAP = {\n asset: AssetIcon,\n entry: EntryIcon,\n release: ReleaseIcon,\n page: PageIcon,\n experience: PaintBrushIcon,\n};\n\nexport interface EntityListItemProps extends CommonProps {\n /**\n * The title of the entity\n */\n title: string;\n /**\n * The description of the entity\n */\n description?: string;\n /**\n * The content type of the entity\n */\n contentType?: string;\n /**\n * The publish status of the entry\n */\n status?: EntityListItemStatus;\n /**\n * A boolean used to render the Thumbnail or not\n */\n withThumbnail?: boolean;\n /**\n * The URL of the entity's preview thumbnail. Use 46px x 46px images for best results\n */\n thumbnailUrl?: string;\n /**\n * The alt text for the thumbnail\n */\n thumbnailAltText?: string;\n /**\n * Menu elements rendered as actions in Menu\n */\n actions?: React.ReactNodeArray;\n /**\n * Renders a drag handle for the component for use in drag and drop contexts\n */\n withDragHandle?: boolean;\n /**\n * Applies styling for when the component is actively being dragged by the user\n */\n isDragActive?: boolean;\n /**\n * Prop to pass a custom CardDragHandle component to for use in drag and drop contexts\n */\n cardDragHandleComponent?: React.ReactNode;\n /**\n * Props to pass down to the default CardDragHandle component (does not work with cardDragHandleComponent prop)\n */\n cardDragHandleProps?: Partial<DragHandleProps>;\n /**\n * An entity can either be an Entry, an Asset or a Release. This prop will apply styling based on if the entity is an asset, a release or an entry\n *\n * Note: 'entry' and 'asset' are @deprecated but supported in v1.x for backwards compatibility\n */\n entityType?:\n | 'Entry'\n | 'Asset'\n | 'entry'\n | 'asset'\n | 'Release'\n | 'Page'\n | 'Experience'\n | 'experience';\n /**\n * Loading state for the component - when true will display loading feedback to the user\n */\n isLoading?: boolean;\n /**\n * The action to be performed on click of the EntryCard\n */\n onClick?: MouseEventHandler;\n /**\n * The href for the component. Will render the card as an `a` element for native browser link handling\n */\n href?: string;\n /**\n * A boolean used to disable the CardActions\n */\n isActionsDisabled?: boolean;\n}\n\nexport const EntityListItem = ({\n className,\n testId = 'cf-ui-entity-list-item',\n title,\n description,\n contentType,\n entityType = 'entry',\n withThumbnail = true,\n thumbnailUrl,\n thumbnailAltText,\n status,\n actions,\n withDragHandle,\n isDragActive,\n isLoading,\n onClick,\n href,\n cardDragHandleProps,\n cardDragHandleComponent,\n isActionsDisabled = false,\n ...otherProps\n}: EntityListItemProps): React.ReactElement => {\n const styles = getEntityListItemStyles();\n\n const renderCardDragHandle = () => {\n if (cardDragHandleComponent) {\n return cardDragHandleComponent;\n } else if (withDragHandle) {\n return (\n <DragHandle\n className={styles.dragHandle}\n isActive={isDragActive}\n label=\"Reorder entry\"\n {...cardDragHandleProps}\n />\n );\n }\n };\n\n let Element: React.ElementType = 'article';\n let isClickable = false;\n if (href || onClick) {\n Element = href ? 'a' : 'button';\n isClickable = true;\n }\n\n // archived assets will not be available on the CDN, resulting in a broken image src\n const isArchived = status === 'archived';\n const asIcon = isArchived || !thumbnailUrl;\n\n return (\n <li\n {...otherProps}\n className={cx(styles.root({ isDragActive }), className)}\n data-test-id={testId}\n >\n {renderCardDragHandle()}\n {isLoading ? (\n <article className={styles.card(false)}>\n <Skeleton.Container\n svgHeight={46}\n clipId=\"f36-entity-list-item-skeleton\"\n >\n <Skeleton.Image height={46} width={46} />\n <Skeleton.BodyText\n numberOfLines={2}\n lineHeight={18}\n offsetLeft={54}\n />\n </Skeleton.Container>\n </article>\n ) : (\n <>\n <Element\n className={styles.card(isClickable)}\n onClick={onClick}\n href={href}\n {...(href ? { target: '_blank' } : {})}\n {...(Element === 'button' ? { type: 'button' } : {})}\n >\n {withThumbnail && (\n <figure className={styles.media}>\n {asIcon ? (\n <Icon\n as={ICON_MAP[entityType.toLowerCase()]}\n variant=\"muted\"\n data-test-id={`thumbnail-icon-${entityType.toLowerCase()}`}\n />\n ) : (\n <img\n src={thumbnailUrl}\n className={styles.thumbnail}\n alt={thumbnailAltText}\n />\n )}\n </figure>\n )}\n\n <div className={styles.content}>\n <Flex>\n <Text\n as=\"h3\"\n lineHeight=\"lineHeightM\"\n fontColor=\"gray900\"\n fontWeight=\"fontWeightDemiBold\"\n isTruncated\n >\n {title}\n </Text>\n\n {contentType && (\n <Text\n as=\"span\"\n lineHeight=\"lineHeightM\"\n fontColor=\"gray600\"\n className={styles.contentType}\n isTruncated\n >\n ({contentType})\n </Text>\n )}\n </Flex>\n <Flex marginTop=\"spacing2Xs\">\n {entityType && (\n <Text\n lineHeight=\"lineHeightM\"\n fontColor=\"gray600\"\n className={styles.entityType}\n >\n {entityType}\n </Text>\n )}\n {description && (\n <Text\n as=\"p\"\n lineHeight=\"lineHeightM\"\n fontColor=\"gray900\"\n isTruncated\n className={styles.description}\n >\n {description}\n </Text>\n )}\n </Flex>\n </div>\n\n <Flex\n className={styles.meta}\n alignItems=\"flex-start\"\n paddingLeft=\"spacingXs\"\n >\n {status && (\n <Box marginRight={actions ? 'spacingXs' : 'none'}>\n <EntityStatusBadge entityStatus={status} />\n </Box>\n )}\n </Flex>\n </Element>\n {actions && (\n <Menu>\n <Menu.Trigger>\n <Button\n isDisabled={isActionsDisabled}\n startIcon={<MoreHorizontalIcon />}\n variant=\"transparent\"\n aria-label=\"Actions\"\n size=\"small\"\n className={styles.menuTrigger}\n />\n </Menu.Trigger>\n <Menu.List>{actions}</Menu.List>\n </Menu>\n )}\n </>\n )}\n </li>\n );\n};\n\nEntityListItem.displayName = 'EntityListItem';\n","import { css } from 'emotion';\nimport tokens from '@contentful/f36-tokens';\nimport { EntityListItemProps } from './EntityListItem';\n\nexport const getEntityListItemStyles = () => ({\n root: (props: Pick<EntityListItemProps, 'isDragActive'>) =>\n css({\n display: 'flex',\n boxShadow: `inset 0 -1px 0 ${tokens.gray200}`,\n position: 'relative',\n transition: `${tokens.transitionDurationShort} ${tokens.transitionEasingDefault}`,\n transitionProperty: 'box-shadow, background-color',\n backgroundColor: tokens.colorWhite,\n ...(props.isDragActive\n ? {\n boxShadow: tokens.boxShadowHeavy,\n }\n : {}),\n\n '&:hover': {\n backgroundColor: tokens.gray100,\n },\n }),\n card: (isClickable: boolean) =>\n css({\n display: 'flex',\n textDecoration: 'none',\n minWidth: 0,\n width: '100%',\n minHeight: tokens.spacing3Xl,\n padding: tokens.spacingXs,\n margin: 0, // remove the default button margin in Safari.\n border: 'none',\n background: 'none',\n textAlign: 'left',\n cursor: isClickable ? 'pointer' : 'inherit',\n '&:focus-visible': {\n boxShadow: `inset ${tokens.glowPrimary}`,\n outline: 'none',\n },\n }),\n content: css({\n flexGrow: 1,\n minWidth: 0,\n position: 'relative',\n }),\n media: css({\n display: 'flex',\n flexShrink: 0,\n alignItems: 'center',\n justifyContent: 'center',\n backgroundColor: tokens.gray200,\n width: tokens.spacing2Xl,\n height: tokens.spacing2Xl,\n margin: '0',\n marginRight: tokens.spacingXs,\n }),\n thumbnail: css({\n display: 'block',\n width: '100%',\n height: '100%',\n objectFit: 'cover',\n }),\n contentType: css({\n marginLeft: tokens.spacingXs,\n }),\n entityType: css({\n textTransform: 'capitalize',\n }),\n description: css({\n '&::before': {\n content: '\"|\"',\n color: tokens.gray400,\n height: '25%',\n marginTop: tokens.spacing2Xs,\n marginLeft: tokens.spacing2Xs,\n marginRight: tokens.spacing2Xs,\n },\n }),\n meta: css({\n marginLeft: 'auto',\n flexShrink: 0,\n }),\n dragHandle: css({\n borderBottomLeftRadius: '0',\n borderTopLeftRadius: '0',\n boxShadow: `inset 0 -1px 0 ${tokens.gray200}`,\n }),\n menuTrigger: css({\n padding: '0 0.125rem',\n minHeight: '1.5rem',\n height: '1rem',\n margin: `${tokens.spacingXs} ${tokens.spacingXs} 0 0`,\n }),\n});\n","import { EntityList as OriginalEntityList } from './EntityList';\nimport { EntityListItem } from './EntityListItem/EntityListItem';\n\ntype CompoundEntityList = typeof OriginalEntityList & {\n Item: typeof EntityListItem;\n};\n\nexport const EntityList = OriginalEntityList as CompoundEntityList;\nEntityList.Item = EntityListItem;\n"]}
|
package/dist/index.js
CHANGED
|
@@ -18,7 +18,7 @@ function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
|
|
|
18
18
|
var e__default = /*#__PURE__*/_interopDefault(e);
|
|
19
19
|
var i__default = /*#__PURE__*/_interopDefault(i);
|
|
20
20
|
|
|
21
|
-
var K=Object.defineProperty,Q=Object.defineProperties;var V=Object.getOwnPropertyDescriptors;var p=Object.getOwnPropertySymbols;var
|
|
21
|
+
var K=Object.defineProperty,Q=Object.defineProperties;var V=Object.getOwnPropertyDescriptors;var p=Object.getOwnPropertySymbols;var k=Object.prototype.hasOwnProperty,N=Object.prototype.propertyIsEnumerable;var S=(t,n,o)=>n in t?K(t,n,{enumerable:!0,configurable:!0,writable:!0,value:o}):t[n]=o,l=(t,n)=>{for(var o in n||(n={}))k.call(n,o)&&S(t,o,n[o]);if(p)for(var o of p(n))N.call(n,o)&&S(t,o,n[o]);return t},d=(t,n)=>Q(t,V(n));var w=(t,n)=>{var o={};for(var r in t)k.call(t,r)&&n.indexOf(r)<0&&(o[r]=t[r]);if(t!=null&&p)for(var r of p(t))n.indexOf(r)<0&&N.call(t,r)&&(o[r]=t[r]);return o};var M=()=>({root:emotion.css({display:"block",listStyle:"none",margin:0,padding:0,border:`1px solid ${i__default.default.gray200}`,borderBottom:"none",borderRadius:i__default.default.borderRadiusMedium,overflow:"hidden"})});function A(t,n){let o=M();return e__default.default.createElement("ul",{"data-test-id":t.testId||"cf-ui-entity-list",ref:n,className:emotion.cx(o.root,t.className),style:t.style},t.children)}A.displayName="EntityList";var B=e__default.default.forwardRef(A);var $=()=>({root:t=>emotion.css(d(l({display:"flex",boxShadow:`inset 0 -1px 0 ${i__default.default.gray200}`,position:"relative",transition:`${i__default.default.transitionDurationShort} ${i__default.default.transitionEasingDefault}`,transitionProperty:"box-shadow, background-color",backgroundColor:i__default.default.colorWhite},t.isDragActive?{boxShadow:i__default.default.boxShadowHeavy}:{}),{"&:hover":{backgroundColor:i__default.default.gray100}})),card:t=>emotion.css({display:"flex",textDecoration:"none",minWidth:0,width:"100%",minHeight:i__default.default.spacing3Xl,padding:i__default.default.spacingXs,margin:0,border:"none",background:"none",textAlign:"left",cursor:t?"pointer":"inherit","&:focus-visible":{boxShadow:`inset ${i__default.default.glowPrimary}`,outline:"none"}}),content:emotion.css({flexGrow:1,minWidth:0,position:"relative"}),media:emotion.css({display:"flex",flexShrink:0,alignItems:"center",justifyContent:"center",backgroundColor:i__default.default.gray200,width:i__default.default.spacing2Xl,height:i__default.default.spacing2Xl,margin:"0",marginRight:i__default.default.spacingXs}),thumbnail:emotion.css({display:"block",width:"100%",height:"100%",objectFit:"cover"}),contentType:emotion.css({marginLeft:i__default.default.spacingXs}),entityType:emotion.css({textTransform:"capitalize"}),description:emotion.css({"&::before":{content:'"|"',color:i__default.default.gray400,height:"25%",marginTop:i__default.default.spacing2Xs,marginLeft:i__default.default.spacing2Xs,marginRight:i__default.default.spacing2Xs}}),meta:emotion.css({marginLeft:"auto",flexShrink:0}),dragHandle:emotion.css({borderBottomLeftRadius:"0",borderTopLeftRadius:"0",boxShadow:`inset 0 -1px 0 ${i__default.default.gray200}`}),menuTrigger:emotion.css({padding:"0 0.125rem",minHeight:"1.5rem",height:"1rem",margin:`${i__default.default.spacingXs} ${i__default.default.spacingXs} 0 0`})});var pt={asset:f36Icons.AssetIcon,entry:f36Icons.EntryIcon,release:f36Icons.ReleaseIcon,page:f36Icons.PageIcon,experience:f36Icons.PaintBrushIcon},y=dt=>{var C=dt,{className:t,testId:n="cf-ui-entity-list-item",title:o,description:r,contentType:b,entityType:m="entry",withThumbnail:W=!0,thumbnailUrl:I,thumbnailAltText:O,status:f,actions:h,withDragHandle:z,isDragActive:P,isLoading:U,onClick:H,href:g,cardDragHandleProps:_,cardDragHandleComponent:T,isActionsDisabled:j=!1}=C,G=w(C,["className","testId","title","description","contentType","entityType","withThumbnail","thumbnailUrl","thumbnailAltText","status","actions","withDragHandle","isDragActive","isLoading","onClick","href","cardDragHandleProps","cardDragHandleComponent","isActionsDisabled"]);let s=$(),q=()=>{if(T)return T;if(z)return e__default.default.createElement(f36DragHandle.DragHandle,l({className:s.dragHandle,isActive:P,label:"Reorder entry"},_))},u="article",v=!1;(g||H)&&(u=g?"a":"button",v=!0);let J=f==="archived"||!I;return e__default.default.createElement("li",d(l({},G),{className:emotion.cx(s.root({isDragActive:P}),t),"data-test-id":n}),q(),U?e__default.default.createElement("article",{className:s.card(!1)},e__default.default.createElement(f36Skeleton.Skeleton.Container,{svgHeight:46,clipId:"f36-entity-list-item-skeleton"},e__default.default.createElement(f36Skeleton.Skeleton.Image,{height:46,width:46}),e__default.default.createElement(f36Skeleton.Skeleton.BodyText,{numberOfLines:2,lineHeight:18,offsetLeft:54}))):e__default.default.createElement(e__default.default.Fragment,null,e__default.default.createElement(u,l(l({className:s.card(v),onClick:H,href:g},g?{target:"_blank"}:{}),u==="button"?{type:"button"}:{}),W&&e__default.default.createElement("figure",{className:s.media},J?e__default.default.createElement(f36Icon.Icon,{as:pt[m.toLowerCase()],variant:"muted","data-test-id":`thumbnail-icon-${m.toLowerCase()}`}):e__default.default.createElement("img",{src:I,className:s.thumbnail,alt:O})),e__default.default.createElement("div",{className:s.content},e__default.default.createElement(f36Core.Flex,null,e__default.default.createElement(f36Typography.Text,{as:"h3",lineHeight:"lineHeightM",fontColor:"gray900",fontWeight:"fontWeightDemiBold",isTruncated:!0},o),b&&e__default.default.createElement(f36Typography.Text,{as:"span",lineHeight:"lineHeightM",fontColor:"gray600",className:s.contentType,isTruncated:!0},"(",b,")")),e__default.default.createElement(f36Core.Flex,{marginTop:"spacing2Xs"},m&&e__default.default.createElement(f36Typography.Text,{lineHeight:"lineHeightM",fontColor:"gray600",className:s.entityType},m),r&&e__default.default.createElement(f36Typography.Text,{as:"p",lineHeight:"lineHeightM",fontColor:"gray900",isTruncated:!0,className:s.description},r))),e__default.default.createElement(f36Core.Flex,{className:s.meta,alignItems:"flex-start",paddingLeft:"spacingXs"},f&&e__default.default.createElement(f36Core.Box,{marginRight:h?"spacingXs":"none"},e__default.default.createElement(f36Badge.EntityStatusBadge,{entityStatus:f})))),h&&e__default.default.createElement(f36Menu.Menu,null,e__default.default.createElement(f36Menu.Menu.Trigger,null,e__default.default.createElement(f36Button.Button,{isDisabled:j,startIcon:e__default.default.createElement(f36Icons.MoreHorizontalIcon,null),variant:"transparent","aria-label":"Actions",size:"small",className:s.menuTrigger})),e__default.default.createElement(f36Menu.Menu.List,null,h))))};y.displayName="EntityListItem";var F=B;F.Item=y;
|
|
22
22
|
|
|
23
23
|
exports.EntityList = F;
|
|
24
24
|
exports.EntityListItem = y;
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/EntityList.tsx","../src/EntityList.styles.ts","../src/EntityListItem/EntityListItem.tsx","../src/EntityListItem/EntityListItem.styles.ts","../src/CompoundEntityList.tsx"],"names":["React","cx","css","tokens","getEntityListStyles","_EntityList","props","ref","styles","EntityList","EntityStatusBadge","Flex","Box","AssetIcon","EntryIcon","ReleaseIcon","MoreHorizontalIcon","PageIcon","PaintBrushIcon","Icon","Text","DragHandle","Button","Menu","Skeleton","getEntityListItemStyles","__spreadProps","__spreadValues","isClickable","ICON_MAP","EntityListItem","_a","_b","className","testId","title","description","contentType","entityType","withThumbnail","thumbnailUrl","thumbnailAltText","status","actions","withDragHandle","isDragActive","isLoading","onClick","href","cardDragHandleProps","cardDragHandleComponent","isActionsDisabled","otherProps","__objRest","renderCardDragHandle","Element","asIcon"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { cx } from 'emotion';\nimport type { CommonProps, ExpandProps } from '@contentful/f36-core';\n\nimport { getEntityListStyles } from './EntityList.styles';\n\nexport interface EntityListProps extends CommonProps {\n children?: React.ReactNode;\n}\n\nfunction _EntityList(\n props: ExpandProps<EntityListProps>,\n ref: React.Ref<HTMLUListElement>,\n) {\n const styles = getEntityListStyles();\n\n return (\n <ul\n data-test-id={props.testId || 'cf-ui-entity-list'}\n ref={ref}\n className={cx(styles.root, props.className)}\n style={props.style}\n >\n {props.children}\n </ul>\n );\n}\n\n_EntityList.displayName = 'EntityList';\n\nexport const EntityList = React.forwardRef(_EntityList);\n","import { css } from 'emotion';\nimport tokens from '@contentful/f36-tokens';\n\nexport const getEntityListStyles = () => ({\n root: css({\n display: 'block',\n listStyle: 'none',\n margin: 0,\n padding: 0,\n border: `1px solid ${tokens.gray200}`,\n borderBottom: 'none',\n borderRadius: tokens.borderRadiusMedium,\n overflow: 'hidden',\n }),\n});\n","import React, { type MouseEventHandler } from 'react';\nimport { cx } from 'emotion';\nimport { EntityStatusBadge } from '@contentful/f36-badge';\nimport {\n Flex,\n Box,\n type CommonProps,\n type EntityStatus,\n type PickUnion,\n} from '@contentful/f36-core';\nimport {\n AssetIcon,\n EntryIcon,\n ReleaseIcon,\n MoreHorizontalIcon,\n PageIcon,\n PaintBrushIcon,\n} from '@contentful/f36-icons';\nimport { Icon } from '@contentful/f36-icon';\nimport { Text } from '@contentful/f36-typography';\nimport { DragHandle, type DragHandleProps } from '@contentful/f36-drag-handle';\nimport { Button } from '@contentful/f36-button';\nimport { Menu } from '@contentful/f36-menu';\nimport { Skeleton } from '@contentful/f36-skeleton';\n\nimport { getEntityListItemStyles } from './EntityListItem.styles';\n\ntype EntityListItemStatus = PickUnion<\n EntityStatus,\n 'archived' | 'changed' | 'draft' | 'published'\n>;\n\nconst ICON_MAP = {\n asset: AssetIcon,\n entry: EntryIcon,\n release: ReleaseIcon,\n page: PageIcon,\n experience: PaintBrushIcon,\n};\n\nexport interface EntityListItemProps extends CommonProps {\n /**\n * The title of the entity\n */\n title: string;\n /**\n * The description of the entity\n */\n description?: string;\n /**\n * The content type of the entity\n */\n contentType?: string;\n /**\n * The publish status of the entry\n */\n status?: EntityListItemStatus;\n /**\n * A boolean used to render the Thumbnail or not\n */\n withThumbnail?: boolean;\n /**\n * The URL of the entity's preview thumbnail. Use 46px x 46px images for best results\n */\n thumbnailUrl?: string;\n /**\n * The alt text for the thumbnail\n */\n thumbnailAltText?: string;\n /**\n * Menu elements rendered as actions in Menu\n */\n actions?: React.ReactNodeArray;\n /**\n * Renders a drag handle for the component for use in drag and drop contexts\n */\n withDragHandle?: boolean;\n /**\n * Applies styling for when the component is actively being dragged by the user\n */\n isDragActive?: boolean;\n /**\n * Prop to pass a custom CardDragHandle component to for use in drag and drop contexts\n */\n cardDragHandleComponent?: React.ReactNode;\n /**\n * Props to pass down to the default CardDragHandle component (does not work with cardDragHandleComponent prop)\n */\n cardDragHandleProps?: Partial<DragHandleProps>;\n /**\n * An entity can either be an Entry, an Asset or a Release. This prop will apply styling based on if the entity is an asset, a release or an entry\n *\n * Note: 'entry' and 'asset' are @deprecated but supported in v1.x for backwards compatibility\n */\n entityType?:\n | 'Entry'\n | 'Asset'\n | 'entry'\n | 'asset'\n | 'Release'\n | 'Page'\n | 'Experience'\n | 'experience';\n /**\n * Loading state for the component - when true will display loading feedback to the user\n */\n isLoading?: boolean;\n /**\n * The action to be performed on click of the EntryCard\n */\n onClick?: MouseEventHandler;\n /**\n * The href for the component. Will render the card as an `a` element for native browser link handling\n */\n href?: string;\n /**\n * A boolean used to disable the CardActions\n */\n isActionsDisabled?: boolean;\n}\n\nexport const EntityListItem = ({\n className,\n testId = 'cf-ui-entity-list-item',\n title,\n description,\n contentType,\n entityType = 'entry',\n withThumbnail = true,\n thumbnailUrl,\n thumbnailAltText,\n status,\n actions,\n withDragHandle,\n isDragActive,\n isLoading,\n onClick,\n href,\n cardDragHandleProps,\n cardDragHandleComponent,\n isActionsDisabled = false,\n ...otherProps\n}: EntityListItemProps): React.ReactElement => {\n const styles = getEntityListItemStyles();\n\n const renderCardDragHandle = () => {\n if (cardDragHandleComponent) {\n return cardDragHandleComponent;\n } else if (withDragHandle) {\n return (\n <DragHandle\n className={styles.dragHandle}\n isActive={isDragActive}\n label=\"Reorder entry\"\n {...cardDragHandleProps}\n />\n );\n }\n };\n\n let Element: React.ElementType = 'article';\n let isClickable = false;\n if (href || onClick) {\n Element = href ? 'a' : 'button';\n isClickable = true;\n }\n\n // archived assets will not be available on the CDN, resulting in a broken image src\n const isArchived = status === 'archived';\n const asIcon = isArchived || !thumbnailUrl;\n\n return (\n <li\n {...otherProps}\n className={cx(styles.root({ isDragActive }), className)}\n data-test-id={testId}\n >\n {renderCardDragHandle()}\n {isLoading ? (\n <article className={styles.card(false)}>\n <Skeleton.Container clipId=\"f36-entity-list-item-skeleton\">\n <Skeleton.Image height={46} width={46} />\n <Skeleton.BodyText\n numberOfLines={2}\n lineHeight={18}\n offsetLeft={54}\n />\n </Skeleton.Container>\n </article>\n ) : (\n <>\n <Element\n className={styles.card(isClickable)}\n onClick={onClick}\n href={href}\n {...(href ? { target: '_blank' } : {})}\n {...(Element === 'button' ? { type: 'button' } : {})}\n >\n {withThumbnail && (\n <figure className={styles.media}>\n {asIcon ? (\n <Icon\n as={ICON_MAP[entityType.toLowerCase()]}\n variant=\"muted\"\n data-test-id={`thumbnail-icon-${entityType.toLowerCase()}`}\n />\n ) : (\n <img\n src={thumbnailUrl}\n className={styles.thumbnail}\n alt={thumbnailAltText}\n />\n )}\n </figure>\n )}\n\n <div className={styles.content}>\n <Flex>\n <Text\n as=\"h3\"\n lineHeight=\"lineHeightM\"\n fontColor=\"gray900\"\n fontWeight=\"fontWeightDemiBold\"\n isTruncated\n >\n {title}\n </Text>\n\n {contentType && (\n <Text\n as=\"span\"\n lineHeight=\"lineHeightM\"\n fontColor=\"gray600\"\n className={styles.contentType}\n isTruncated\n >\n ({contentType})\n </Text>\n )}\n </Flex>\n <Flex marginTop=\"spacing2Xs\">\n {entityType && (\n <Text\n lineHeight=\"lineHeightM\"\n fontColor=\"gray600\"\n className={styles.entityType}\n >\n {entityType}\n </Text>\n )}\n {description && (\n <Text\n as=\"p\"\n lineHeight=\"lineHeightM\"\n fontColor=\"gray900\"\n isTruncated\n className={styles.description}\n >\n {description}\n </Text>\n )}\n </Flex>\n </div>\n\n <Flex\n className={styles.meta}\n alignItems=\"flex-start\"\n paddingLeft=\"spacingXs\"\n >\n {status && (\n <Box marginRight={actions ? 'spacingXs' : 'none'}>\n <EntityStatusBadge entityStatus={status} />\n </Box>\n )}\n </Flex>\n </Element>\n {actions && (\n <Menu>\n <Menu.Trigger>\n <Button\n isDisabled={isActionsDisabled}\n startIcon={<MoreHorizontalIcon />}\n variant=\"transparent\"\n aria-label=\"Actions\"\n size=\"small\"\n className={styles.menuTrigger}\n />\n </Menu.Trigger>\n <Menu.List>{actions}</Menu.List>\n </Menu>\n )}\n </>\n )}\n </li>\n );\n};\n\nEntityListItem.displayName = 'EntityListItem';\n","import { css } from 'emotion';\nimport tokens from '@contentful/f36-tokens';\nimport { EntityListItemProps } from './EntityListItem';\n\nexport const getEntityListItemStyles = () => ({\n root: (props: Pick<EntityListItemProps, 'isDragActive'>) =>\n css({\n display: 'flex',\n boxShadow: `inset 0 -1px 0 ${tokens.gray200}`,\n position: 'relative',\n transition: `${tokens.transitionDurationShort} ${tokens.transitionEasingDefault}`,\n transitionProperty: 'box-shadow, background-color',\n backgroundColor: tokens.colorWhite,\n ...(props.isDragActive\n ? {\n boxShadow: tokens.boxShadowHeavy,\n }\n : {}),\n\n '&:hover': {\n backgroundColor: tokens.gray100,\n },\n }),\n card: (isClickable: boolean) =>\n css({\n display: 'flex',\n textDecoration: 'none',\n width: '100%',\n minHeight: tokens.spacing3Xl,\n padding: tokens.spacingXs,\n margin: 0, // remove the default button margin in Safari.\n border: 'none',\n background: 'none',\n textAlign: 'left',\n cursor: isClickable ? 'pointer' : 'inherit',\n '&:focus-visible': {\n boxShadow: `inset ${tokens.glowPrimary}`,\n outline: 'none',\n },\n }),\n content: css({\n flexGrow: 1,\n minWidth: 0,\n position: 'relative',\n }),\n media: css({\n display: 'flex',\n flexShrink: 0,\n alignItems: 'center',\n justifyContent: 'center',\n backgroundColor: tokens.gray200,\n width: tokens.spacing2Xl,\n height: tokens.spacing2Xl,\n margin: '0',\n marginRight: tokens.spacingXs,\n }),\n thumbnail: css({\n display: 'block',\n width: '100%',\n height: '100%',\n objectFit: 'cover',\n }),\n contentType: css({\n marginLeft: tokens.spacingXs,\n }),\n entityType: css({\n textTransform: 'capitalize',\n }),\n description: css({\n '&::before': {\n content: '\"|\"',\n color: tokens.gray400,\n height: '25%',\n marginTop: tokens.spacing2Xs,\n marginLeft: tokens.spacing2Xs,\n marginRight: tokens.spacing2Xs,\n },\n }),\n meta: css({\n marginLeft: 'auto',\n flexShrink: 0,\n }),\n dragHandle: css({\n borderBottomLeftRadius: '0',\n borderTopLeftRadius: '0',\n boxShadow: `inset 0 -1px 0 ${tokens.gray200}`,\n }),\n menuTrigger: css({\n padding: '0 0.125rem',\n minHeight: '1.5rem',\n height: '1rem',\n margin: `${tokens.spacingXs} ${tokens.spacingXs} 0 0`,\n }),\n});\n","import { EntityList as OriginalEntityList } from './EntityList';\nimport { EntityListItem } from './EntityListItem/EntityListItem';\n\ntype CompoundEntityList = typeof OriginalEntityList & {\n Item: typeof EntityListItem;\n};\n\nexport const EntityList = OriginalEntityList as CompoundEntityList;\nEntityList.Item = EntityListItem;\n"]}
|
|
1
|
+
{"version":3,"sources":["../src/EntityList.tsx","../src/EntityList.styles.ts","../src/EntityListItem/EntityListItem.tsx","../src/EntityListItem/EntityListItem.styles.ts","../src/CompoundEntityList.tsx"],"names":["React","cx","css","tokens","getEntityListStyles","_EntityList","props","ref","styles","EntityList","EntityStatusBadge","Flex","Box","AssetIcon","EntryIcon","ReleaseIcon","MoreHorizontalIcon","PageIcon","PaintBrushIcon","Icon","Text","DragHandle","Button","Menu","Skeleton","getEntityListItemStyles","__spreadProps","__spreadValues","isClickable","ICON_MAP","EntityListItem","_a","_b","className","testId","title","description","contentType","entityType","withThumbnail","thumbnailUrl","thumbnailAltText","status","actions","withDragHandle","isDragActive","isLoading","onClick","href","cardDragHandleProps","cardDragHandleComponent","isActionsDisabled","otherProps","__objRest","renderCardDragHandle","Element","asIcon"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { cx } from 'emotion';\nimport type { CommonProps, ExpandProps } from '@contentful/f36-core';\n\nimport { getEntityListStyles } from './EntityList.styles';\n\nexport interface EntityListProps extends CommonProps {\n children?: React.ReactNode;\n}\n\nfunction _EntityList(\n props: ExpandProps<EntityListProps>,\n ref: React.Ref<HTMLUListElement>,\n) {\n const styles = getEntityListStyles();\n\n return (\n <ul\n data-test-id={props.testId || 'cf-ui-entity-list'}\n ref={ref}\n className={cx(styles.root, props.className)}\n style={props.style}\n >\n {props.children}\n </ul>\n );\n}\n\n_EntityList.displayName = 'EntityList';\n\nexport const EntityList = React.forwardRef(_EntityList);\n","import { css } from 'emotion';\nimport tokens from '@contentful/f36-tokens';\n\nexport const getEntityListStyles = () => ({\n root: css({\n display: 'block',\n listStyle: 'none',\n margin: 0,\n padding: 0,\n border: `1px solid ${tokens.gray200}`,\n borderBottom: 'none',\n borderRadius: tokens.borderRadiusMedium,\n overflow: 'hidden',\n }),\n});\n","import React, { type MouseEventHandler } from 'react';\nimport { cx } from 'emotion';\nimport { EntityStatusBadge } from '@contentful/f36-badge';\nimport {\n Flex,\n Box,\n type CommonProps,\n type EntityStatus,\n type PickUnion,\n} from '@contentful/f36-core';\nimport {\n AssetIcon,\n EntryIcon,\n ReleaseIcon,\n MoreHorizontalIcon,\n PageIcon,\n PaintBrushIcon,\n} from '@contentful/f36-icons';\nimport { Icon } from '@contentful/f36-icon';\nimport { Text } from '@contentful/f36-typography';\nimport { DragHandle, type DragHandleProps } from '@contentful/f36-drag-handle';\nimport { Button } from '@contentful/f36-button';\nimport { Menu } from '@contentful/f36-menu';\nimport { Skeleton } from '@contentful/f36-skeleton';\n\nimport { getEntityListItemStyles } from './EntityListItem.styles';\n\ntype EntityListItemStatus = PickUnion<\n EntityStatus,\n 'archived' | 'changed' | 'draft' | 'published'\n>;\n\nconst ICON_MAP = {\n asset: AssetIcon,\n entry: EntryIcon,\n release: ReleaseIcon,\n page: PageIcon,\n experience: PaintBrushIcon,\n};\n\nexport interface EntityListItemProps extends CommonProps {\n /**\n * The title of the entity\n */\n title: string;\n /**\n * The description of the entity\n */\n description?: string;\n /**\n * The content type of the entity\n */\n contentType?: string;\n /**\n * The publish status of the entry\n */\n status?: EntityListItemStatus;\n /**\n * A boolean used to render the Thumbnail or not\n */\n withThumbnail?: boolean;\n /**\n * The URL of the entity's preview thumbnail. Use 46px x 46px images for best results\n */\n thumbnailUrl?: string;\n /**\n * The alt text for the thumbnail\n */\n thumbnailAltText?: string;\n /**\n * Menu elements rendered as actions in Menu\n */\n actions?: React.ReactNodeArray;\n /**\n * Renders a drag handle for the component for use in drag and drop contexts\n */\n withDragHandle?: boolean;\n /**\n * Applies styling for when the component is actively being dragged by the user\n */\n isDragActive?: boolean;\n /**\n * Prop to pass a custom CardDragHandle component to for use in drag and drop contexts\n */\n cardDragHandleComponent?: React.ReactNode;\n /**\n * Props to pass down to the default CardDragHandle component (does not work with cardDragHandleComponent prop)\n */\n cardDragHandleProps?: Partial<DragHandleProps>;\n /**\n * An entity can either be an Entry, an Asset or a Release. This prop will apply styling based on if the entity is an asset, a release or an entry\n *\n * Note: 'entry' and 'asset' are @deprecated but supported in v1.x for backwards compatibility\n */\n entityType?:\n | 'Entry'\n | 'Asset'\n | 'entry'\n | 'asset'\n | 'Release'\n | 'Page'\n | 'Experience'\n | 'experience';\n /**\n * Loading state for the component - when true will display loading feedback to the user\n */\n isLoading?: boolean;\n /**\n * The action to be performed on click of the EntryCard\n */\n onClick?: MouseEventHandler;\n /**\n * The href for the component. Will render the card as an `a` element for native browser link handling\n */\n href?: string;\n /**\n * A boolean used to disable the CardActions\n */\n isActionsDisabled?: boolean;\n}\n\nexport const EntityListItem = ({\n className,\n testId = 'cf-ui-entity-list-item',\n title,\n description,\n contentType,\n entityType = 'entry',\n withThumbnail = true,\n thumbnailUrl,\n thumbnailAltText,\n status,\n actions,\n withDragHandle,\n isDragActive,\n isLoading,\n onClick,\n href,\n cardDragHandleProps,\n cardDragHandleComponent,\n isActionsDisabled = false,\n ...otherProps\n}: EntityListItemProps): React.ReactElement => {\n const styles = getEntityListItemStyles();\n\n const renderCardDragHandle = () => {\n if (cardDragHandleComponent) {\n return cardDragHandleComponent;\n } else if (withDragHandle) {\n return (\n <DragHandle\n className={styles.dragHandle}\n isActive={isDragActive}\n label=\"Reorder entry\"\n {...cardDragHandleProps}\n />\n );\n }\n };\n\n let Element: React.ElementType = 'article';\n let isClickable = false;\n if (href || onClick) {\n Element = href ? 'a' : 'button';\n isClickable = true;\n }\n\n // archived assets will not be available on the CDN, resulting in a broken image src\n const isArchived = status === 'archived';\n const asIcon = isArchived || !thumbnailUrl;\n\n return (\n <li\n {...otherProps}\n className={cx(styles.root({ isDragActive }), className)}\n data-test-id={testId}\n >\n {renderCardDragHandle()}\n {isLoading ? (\n <article className={styles.card(false)}>\n <Skeleton.Container\n svgHeight={46}\n clipId=\"f36-entity-list-item-skeleton\"\n >\n <Skeleton.Image height={46} width={46} />\n <Skeleton.BodyText\n numberOfLines={2}\n lineHeight={18}\n offsetLeft={54}\n />\n </Skeleton.Container>\n </article>\n ) : (\n <>\n <Element\n className={styles.card(isClickable)}\n onClick={onClick}\n href={href}\n {...(href ? { target: '_blank' } : {})}\n {...(Element === 'button' ? { type: 'button' } : {})}\n >\n {withThumbnail && (\n <figure className={styles.media}>\n {asIcon ? (\n <Icon\n as={ICON_MAP[entityType.toLowerCase()]}\n variant=\"muted\"\n data-test-id={`thumbnail-icon-${entityType.toLowerCase()}`}\n />\n ) : (\n <img\n src={thumbnailUrl}\n className={styles.thumbnail}\n alt={thumbnailAltText}\n />\n )}\n </figure>\n )}\n\n <div className={styles.content}>\n <Flex>\n <Text\n as=\"h3\"\n lineHeight=\"lineHeightM\"\n fontColor=\"gray900\"\n fontWeight=\"fontWeightDemiBold\"\n isTruncated\n >\n {title}\n </Text>\n\n {contentType && (\n <Text\n as=\"span\"\n lineHeight=\"lineHeightM\"\n fontColor=\"gray600\"\n className={styles.contentType}\n isTruncated\n >\n ({contentType})\n </Text>\n )}\n </Flex>\n <Flex marginTop=\"spacing2Xs\">\n {entityType && (\n <Text\n lineHeight=\"lineHeightM\"\n fontColor=\"gray600\"\n className={styles.entityType}\n >\n {entityType}\n </Text>\n )}\n {description && (\n <Text\n as=\"p\"\n lineHeight=\"lineHeightM\"\n fontColor=\"gray900\"\n isTruncated\n className={styles.description}\n >\n {description}\n </Text>\n )}\n </Flex>\n </div>\n\n <Flex\n className={styles.meta}\n alignItems=\"flex-start\"\n paddingLeft=\"spacingXs\"\n >\n {status && (\n <Box marginRight={actions ? 'spacingXs' : 'none'}>\n <EntityStatusBadge entityStatus={status} />\n </Box>\n )}\n </Flex>\n </Element>\n {actions && (\n <Menu>\n <Menu.Trigger>\n <Button\n isDisabled={isActionsDisabled}\n startIcon={<MoreHorizontalIcon />}\n variant=\"transparent\"\n aria-label=\"Actions\"\n size=\"small\"\n className={styles.menuTrigger}\n />\n </Menu.Trigger>\n <Menu.List>{actions}</Menu.List>\n </Menu>\n )}\n </>\n )}\n </li>\n );\n};\n\nEntityListItem.displayName = 'EntityListItem';\n","import { css } from 'emotion';\nimport tokens from '@contentful/f36-tokens';\nimport { EntityListItemProps } from './EntityListItem';\n\nexport const getEntityListItemStyles = () => ({\n root: (props: Pick<EntityListItemProps, 'isDragActive'>) =>\n css({\n display: 'flex',\n boxShadow: `inset 0 -1px 0 ${tokens.gray200}`,\n position: 'relative',\n transition: `${tokens.transitionDurationShort} ${tokens.transitionEasingDefault}`,\n transitionProperty: 'box-shadow, background-color',\n backgroundColor: tokens.colorWhite,\n ...(props.isDragActive\n ? {\n boxShadow: tokens.boxShadowHeavy,\n }\n : {}),\n\n '&:hover': {\n backgroundColor: tokens.gray100,\n },\n }),\n card: (isClickable: boolean) =>\n css({\n display: 'flex',\n textDecoration: 'none',\n minWidth: 0,\n width: '100%',\n minHeight: tokens.spacing3Xl,\n padding: tokens.spacingXs,\n margin: 0, // remove the default button margin in Safari.\n border: 'none',\n background: 'none',\n textAlign: 'left',\n cursor: isClickable ? 'pointer' : 'inherit',\n '&:focus-visible': {\n boxShadow: `inset ${tokens.glowPrimary}`,\n outline: 'none',\n },\n }),\n content: css({\n flexGrow: 1,\n minWidth: 0,\n position: 'relative',\n }),\n media: css({\n display: 'flex',\n flexShrink: 0,\n alignItems: 'center',\n justifyContent: 'center',\n backgroundColor: tokens.gray200,\n width: tokens.spacing2Xl,\n height: tokens.spacing2Xl,\n margin: '0',\n marginRight: tokens.spacingXs,\n }),\n thumbnail: css({\n display: 'block',\n width: '100%',\n height: '100%',\n objectFit: 'cover',\n }),\n contentType: css({\n marginLeft: tokens.spacingXs,\n }),\n entityType: css({\n textTransform: 'capitalize',\n }),\n description: css({\n '&::before': {\n content: '\"|\"',\n color: tokens.gray400,\n height: '25%',\n marginTop: tokens.spacing2Xs,\n marginLeft: tokens.spacing2Xs,\n marginRight: tokens.spacing2Xs,\n },\n }),\n meta: css({\n marginLeft: 'auto',\n flexShrink: 0,\n }),\n dragHandle: css({\n borderBottomLeftRadius: '0',\n borderTopLeftRadius: '0',\n boxShadow: `inset 0 -1px 0 ${tokens.gray200}`,\n }),\n menuTrigger: css({\n padding: '0 0.125rem',\n minHeight: '1.5rem',\n height: '1rem',\n margin: `${tokens.spacingXs} ${tokens.spacingXs} 0 0`,\n }),\n});\n","import { EntityList as OriginalEntityList } from './EntityList';\nimport { EntityListItem } from './EntityListItem/EntityListItem';\n\ntype CompoundEntityList = typeof OriginalEntityList & {\n Item: typeof EntityListItem;\n};\n\nexport const EntityList = OriginalEntityList as CompoundEntityList;\nEntityList.Item = EntityListItem;\n"]}
|
package/package.json
CHANGED
|
@@ -1,21 +1,21 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@contentful/f36-entity-list",
|
|
3
|
-
"version": "4.77.
|
|
3
|
+
"version": "4.77.4",
|
|
4
4
|
"description": "Forma 36: EntityList component",
|
|
5
5
|
"scripts": {
|
|
6
6
|
"build": "tsup"
|
|
7
7
|
},
|
|
8
8
|
"dependencies": {
|
|
9
|
-
"@contentful/f36-badge": "^4.77.
|
|
10
|
-
"@contentful/f36-button": "^4.77.
|
|
11
|
-
"@contentful/f36-core": "^4.77.
|
|
12
|
-
"@contentful/f36-drag-handle": "^4.77.
|
|
13
|
-
"@contentful/f36-icon": "^4.77.
|
|
9
|
+
"@contentful/f36-badge": "^4.77.4",
|
|
10
|
+
"@contentful/f36-button": "^4.77.4",
|
|
11
|
+
"@contentful/f36-core": "^4.77.4",
|
|
12
|
+
"@contentful/f36-drag-handle": "^4.77.4",
|
|
13
|
+
"@contentful/f36-icon": "^4.77.4",
|
|
14
14
|
"@contentful/f36-icons": "^4.29.0",
|
|
15
|
-
"@contentful/f36-menu": "^4.77.
|
|
16
|
-
"@contentful/f36-skeleton": "^4.77.
|
|
15
|
+
"@contentful/f36-menu": "^4.77.4",
|
|
16
|
+
"@contentful/f36-skeleton": "^4.77.4",
|
|
17
17
|
"@contentful/f36-tokens": "^4.2.0",
|
|
18
|
-
"@contentful/f36-typography": "^4.77.
|
|
18
|
+
"@contentful/f36-typography": "^4.77.4",
|
|
19
19
|
"emotion": "^10.0.17"
|
|
20
20
|
},
|
|
21
21
|
"peerDependencies": {
|