@contentful/f36-entity-list 4.0.0

package/LICENSE.md

@@ -0,0 +1,7 @@
+Copyright (c) 2018-present Contentful GmbH
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/README.mdx

@@ -0,0 +1,108 @@
+---
+title: 'EntityList'
+type: 'component'
+status: 'stable'
+slug: /components/entity-list/
+github: 'https://github.com/contentful/forma-36/tree/forma-v4/packages/components/entity-list'
+storybook: 'https://v4-f36-storybook.netlify.app/?path=/story/components-entity-list--default'
+typescript: ./src/EntityList.tsx,./src/EntityListItem/EntityListItem.tsx
+---
+
+# EntityList
+
+The EntityList is used to represent lists of entities (entries and assets).
+
+## How to use EntityList
+
+This component should be used in combination with the EntityList.Item component. Its main purpose is to be used to entries or assets when in a list context, for example, a multiple entry reference field. It differs from existing EntryCard/AssetCard components as its intended use is for lists of entities, not individual ones.
+
+## Code examples
+
+```jsx
+<EntityList>
+  <EntityList.Item
+    title="Entry 1"
+    description="Description"
+    contentType="My content type"
+    status="published"
+  />
+  <EntityList.Item
+    title="Entry 2"
+    description="Description"
+    contentType="My content type"
+    status="draft"
+  />
+  <EntityList.Item
+    title="Entry 3"
+    description="Description"
+    contentType="My content type"
+    status="archived"
+  />
+</EntityList>
+```
+
+### With actions menu
+
+```jsx
+<EntityList>
+  <EntityList.Item
+    title="Entry title"
+    description="Description"
+    contentType="My content type"
+    status="draft"
+    entityType="entry"
+    actions={[
+      <MenuSectionTitle key="title">Actions</MenuSectionTitle>,
+      <MenuItem key="edit">Edit</MenuItem>,
+      <MenuItem key="download">Download</MenuItem>,
+      <MenuItem key="remove">Remove</MenuItem>,
+    ]}
+  />
+  <EntityList.Item
+    title="Other entry title"
+    description="Description"
+    contentType="My content type"
+    status="published"
+    entityType="entry"
+    actions={[
+      <MenuSectionTitle key="title">Actions</MenuSectionTitle>,
+      <MenuItem key="edit">Edit</MenuItem>,
+      <MenuItem key="download">Download</MenuItem>,
+      <MenuItem key="remove">Remove</MenuItem>,
+    ]}
+  />
+</EntityList>
+```
+
+### With drag handle
+
+```jsx
+<EntityList>
+  <EntityList.Item
+    title="Entry 1"
+    description="Description"
+    contentType="My content type"
+    status="published"
+    withDragHandle
+  />
+  <EntityList.Item
+    title="Entry 2"
+    description="Description"
+    contentType="My content type"
+    status="draft"
+    withDragHandle
+  />
+</EntityList>
+```
+
+## Props
+
+import { Props } from '@contentful/f36-docs-utils';
+
+### EntityList
+
+<Props of="EntityList" />
+
+### EntityList.Item
+
+<Props of="EntityListItem" />

package/dist/main.js

@@ -0,0 +1,235 @@
+var $hadoL$emotion = require("emotion");
+var $hadoL$react = require("react");
+var $hadoL$contentfulf36tokens = require("@contentful/f36-tokens");
+var $hadoL$contentfulf36badge = require("@contentful/f36-badge");
+var $hadoL$contentfulf36icons = require("@contentful/f36-icons");
+var $hadoL$contentfulf36icon = require("@contentful/f36-icon");
+var $hadoL$contentfulf36typography = require("@contentful/f36-typography");
+var $hadoL$contentfulf36draghandle = require("@contentful/f36-drag-handle");
+var $hadoL$contentfulf36button = require("@contentful/f36-button");
+var $hadoL$contentfulf36menu = require("@contentful/f36-menu");
+var $hadoL$contentfulf36skeleton = require("@contentful/f36-skeleton");
+var $hadoL$contentfulf36core = require("@contentful/f36-core");
+
+function $parcel$export(e, n, v, s) {
+  Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
+}
+function $parcel$interopDefault(a) {
+  return a && a.__esModule ? a.default : a;
+}
+
+$parcel$export(module.exports, "EntityList", () => $e853778315da5e40$export$8bb466c13870163e);
+$parcel$export(module.exports, "EntityListItem", () => $3f4d63406b2f6561$export$65b9c70c5f42a158);
+
+
+
+
+const $e3aba86fc342822d$export$2b0a239870ba448d = ()=>({
+        root: /*#__PURE__*/ $hadoL$emotion.css({
+            display: 'block',
+            listStyle: 'none',
+            margin: 0,
+            padding: 0,
+            border: `1px solid ${($parcel$interopDefault($hadoL$contentfulf36tokens)).gray200}`,
+            borderBottom: 'none',
+            borderRadius: ($parcel$interopDefault($hadoL$contentfulf36tokens)).borderRadiusMedium,
+            overflow: 'hidden'
+        })
+    })
+;
+
+
+function $42fa390001ac865a$var$_EntityList(props, ref) {
+    const styles = $e3aba86fc342822d$export$2b0a239870ba448d();
+    return(/*#__PURE__*/ ($parcel$interopDefault($hadoL$react)).createElement("ul", {
+        "data-test-id": props.testId || 'cf-ui-entity-list',
+        ref: ref,
+        className: $hadoL$emotion.cx(styles.root, props.className),
+        style: props.style
+    }, props.children));
+}
+const $42fa390001ac865a$export$8bb466c13870163e = /*#__PURE__*/ ($parcel$interopDefault($hadoL$react)).forwardRef($42fa390001ac865a$var$_EntityList);
+
+
+
+
+
+
+
+
+
+
+
+
+
+const $07bceb135ccb0944$export$3bb342229d68a121 = ()=>({
+        root: (props)=>/*#__PURE__*/ $hadoL$emotion.css({
+                display: 'flex',
+                boxShadow: `inset 0 -1px 0 ${($parcel$interopDefault($hadoL$contentfulf36tokens)).gray200}`,
+                position: 'relative',
+                transition: `${($parcel$interopDefault($hadoL$contentfulf36tokens)).transitionDurationShort} ${($parcel$interopDefault($hadoL$contentfulf36tokens)).transitionEasingDefault}`,
+                transitionProperty: 'box-shadow, background-color',
+                backgroundColor: ($parcel$interopDefault($hadoL$contentfulf36tokens)).colorWhite,
+                ...props.isDragActive ? {
+                    boxShadow: ($parcel$interopDefault($hadoL$contentfulf36tokens)).boxShadowHeavy
+                } : {
+                },
+                '&:hover': {
+                    backgroundColor: ($parcel$interopDefault($hadoL$contentfulf36tokens)).gray100
+                }
+            })
+        ,
+        card: /*#__PURE__*/ $hadoL$emotion.css({
+            display: 'flex',
+            textDecoration: 'none',
+            width: '100%',
+            minHeight: ($parcel$interopDefault($hadoL$contentfulf36tokens)).spacing3Xl,
+            padding: ($parcel$interopDefault($hadoL$contentfulf36tokens)).spacingXs,
+            border: 'none',
+            background: 'none',
+            textAlign: 'left'
+        }),
+        content: /*#__PURE__*/ $hadoL$emotion.css({
+            name: "15ync0s",
+            styles: "flex-grow:1;min-width:0;"
+        }),
+        media: /*#__PURE__*/ $hadoL$emotion.css({
+            display: 'flex',
+            flexShrink: 0,
+            alignItems: 'center',
+            justifyContent: 'center',
+            backgroundColor: ($parcel$interopDefault($hadoL$contentfulf36tokens)).gray200,
+            width: ($parcel$interopDefault($hadoL$contentfulf36tokens)).spacing2Xl,
+            height: ($parcel$interopDefault($hadoL$contentfulf36tokens)).spacing2Xl,
+            margin: '0',
+            marginRight: ($parcel$interopDefault($hadoL$contentfulf36tokens)).spacingXs
+        }),
+        thumbnail: /*#__PURE__*/ $hadoL$emotion.css({
+            name: "12qah06",
+            styles: "display:block;width:100%;height:100%;object-fit:cover;"
+        }),
+        contentType: /*#__PURE__*/ $hadoL$emotion.css({
+            marginLeft: ($parcel$interopDefault($hadoL$contentfulf36tokens)).spacingXs
+        }),
+        description: /*#__PURE__*/ $hadoL$emotion.css({
+            marginTop: ($parcel$interopDefault($hadoL$contentfulf36tokens)).spacing2Xs
+        }),
+        meta: /*#__PURE__*/ $hadoL$emotion.css({
+            name: "1n0gfod",
+            styles: "margin-left:auto;flex-shrink:0;"
+        }),
+        dragHandle: /*#__PURE__*/ $hadoL$emotion.css({
+            borderBottomLeftRadius: '0',
+            borderTopLeftRadius: '0',
+            boxShadow: `inset 0 -1px 0 ${($parcel$interopDefault($hadoL$contentfulf36tokens)).gray200}`
+        }),
+        menuTrigger: /*#__PURE__*/ $hadoL$emotion.css({
+            name: "c1v07n",
+            styles: "padding:0 0.125rem;min-height:1.5rem;"
+        })
+    })
+;
+
+
+
+
+const $3f4d63406b2f6561$var$ICON_MAP = {
+    asset: $hadoL$contentfulf36icons.AssetIcon,
+    entry: $hadoL$contentfulf36icons.EntryIcon,
+    release: $hadoL$contentfulf36icons.ReleaseIcon
+};
+function $3f4d63406b2f6561$export$65b9c70c5f42a158({ className: className , testId: testId = 'cf-ui-entity-list-item' , title: title , description: description , contentType: contentType , entityType: entityType = 'entry' , withThumbnail: withThumbnail = true , thumbnailUrl: thumbnailUrl , thumbnailAltText: thumbnailAltText , status: status , actions: actions , withDragHandle: withDragHandle , isDragActive: isDragActive , isLoading: isLoading , onClick: onClick , href: href , cardDragHandleProps: cardDragHandleProps , cardDragHandleComponent: cardDragHandleComponent , isActionsDisabled: isActionsDisabled = false , ...otherProps }) {
+    const styles = $07bceb135ccb0944$export$3bb342229d68a121();
+    const renderCardDragHandle = ()=>{
+        if (cardDragHandleComponent) return cardDragHandleComponent;
+        else if (withDragHandle) return(/*#__PURE__*/ ($parcel$interopDefault($hadoL$react)).createElement($hadoL$contentfulf36draghandle.DragHandle, {
+            className: styles.dragHandle,
+            isActive: isDragActive,
+            label: "Reorder entry",
+            ...cardDragHandleProps
+        }));
+    };
+    let Element = 'article';
+    if (href || onClick) Element = href ? 'a' : 'button';
+     // archived assets will not be available on the CDN, resulting in a broken image src
+    const isArchived = status === 'archived';
+    const asIcon = isArchived || !thumbnailUrl;
+    return(/*#__PURE__*/ ($parcel$interopDefault($hadoL$react)).createElement("li", {
+        ...otherProps,
+        className: $hadoL$emotion.cx(styles.root({
+            isDragActive: isDragActive
+        }), className),
+        "data-test-id": testId
+    }, renderCardDragHandle(), isLoading ? /*#__PURE__*/ ($parcel$interopDefault($hadoL$react)).createElement("article", {
+        className: styles.card
+    }, /*#__PURE__*/ ($parcel$interopDefault($hadoL$react)).createElement($hadoL$contentfulf36skeleton.SkeletonContainer, {
+        clipId: "f36-entity-list-item-skeleton"
+    }, /*#__PURE__*/ ($parcel$interopDefault($hadoL$react)).createElement($hadoL$contentfulf36skeleton.SkeletonImage, {
+        height: 46,
+        width: 46
+    }), /*#__PURE__*/ ($parcel$interopDefault($hadoL$react)).createElement($hadoL$contentfulf36skeleton.SkeletonBodyText, {
+        numberOfLines: 2,
+        lineHeight: 18,
+        offsetLeft: 54
+    }))) : /*#__PURE__*/ ($parcel$interopDefault($hadoL$react)).createElement(Element, {
+        className: styles.card,
+        onClick: onClick,
+        href: href,
+        type: Element === 'button' ? 'button' : undefined,
+        target: href ? '_blank' : undefined
+    }, withThumbnail && /*#__PURE__*/ ($parcel$interopDefault($hadoL$react)).createElement("figure", {
+        className: styles.media
+    }, asIcon ? /*#__PURE__*/ ($parcel$interopDefault($hadoL$react)).createElement($hadoL$contentfulf36icon.Icon, {
+        as: $3f4d63406b2f6561$var$ICON_MAP[entityType.toLowerCase()],
+        variant: "muted"
+    }) : /*#__PURE__*/ ($parcel$interopDefault($hadoL$react)).createElement("img", {
+        src: thumbnailUrl,
+        className: styles.thumbnail,
+        alt: thumbnailAltText
+    })), /*#__PURE__*/ ($parcel$interopDefault($hadoL$react)).createElement("div", {
+        className: styles.content
+    }, /*#__PURE__*/ ($parcel$interopDefault($hadoL$react)).createElement($hadoL$contentfulf36core.Flex, null, /*#__PURE__*/ ($parcel$interopDefault($hadoL$react)).createElement($hadoL$contentfulf36typography.Text, {
+        as: "h3",
+        lineHeight: "lineHeightM",
+        fontColor: "gray900",
+        fontWeight: "fontWeightDemiBold",
+        isTruncated: true
+    }, title), contentType && /*#__PURE__*/ ($parcel$interopDefault($hadoL$react)).createElement($hadoL$contentfulf36typography.Text, {
+        as: "span",
+        lineHeight: "lineHeightM",
+        fontColor: "gray600",
+        className: styles.contentType,
+        isTruncated: true
+    }, "(", contentType, ")")), description && /*#__PURE__*/ ($parcel$interopDefault($hadoL$react)).createElement($hadoL$contentfulf36typography.Text, {
+        as: "p",
+        lineHeight: "lineHeightM",
+        fontColor: "gray900",
+        isTruncated: true,
+        className: styles.description
+    }, description)), /*#__PURE__*/ ($parcel$interopDefault($hadoL$react)).createElement($hadoL$contentfulf36core.Flex, {
+        className: styles.meta,
+        alignItems: "flex-start",
+        paddingLeft: "spacingXs"
+    }, status && /*#__PURE__*/ ($parcel$interopDefault($hadoL$react)).createElement($hadoL$contentfulf36core.Box, {
+        marginRight: actions ? 'spacingXs' : 'none'
+    }, /*#__PURE__*/ ($parcel$interopDefault($hadoL$react)).createElement($hadoL$contentfulf36badge.EntityStatusBadge, {
+        entityStatus: status
+    })), actions && /*#__PURE__*/ ($parcel$interopDefault($hadoL$react)).createElement($hadoL$contentfulf36menu.Menu, null, /*#__PURE__*/ ($parcel$interopDefault($hadoL$react)).createElement($hadoL$contentfulf36menu.Menu.Trigger, null, /*#__PURE__*/ ($parcel$interopDefault($hadoL$react)).createElement($hadoL$contentfulf36button.Button, {
+        isDisabled: isActionsDisabled,
+        startIcon: /*#__PURE__*/ ($parcel$interopDefault($hadoL$react)).createElement($hadoL$contentfulf36icons.MoreHorizontalIcon, null),
+        variant: "transparent",
+        "aria-label": "Actions",
+        size: "small",
+        className: styles.menuTrigger
+    })), /*#__PURE__*/ ($parcel$interopDefault($hadoL$react)).createElement($hadoL$contentfulf36menu.Menu.List, null, actions))))));
+}
+
+
+const $e853778315da5e40$export$8bb466c13870163e = $42fa390001ac865a$export$8bb466c13870163e;
+$e853778315da5e40$export$8bb466c13870163e.Item = $3f4d63406b2f6561$export$65b9c70c5f42a158;
+
+
+
+
+
+//# sourceMappingURL=main.js.map

package/dist/main.js.map

@@ -0,0 +1 @@
+{"mappings":"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","sources":["packages/components/entity-list/src/index.ts","packages/components/entity-list/src/CompoundEntityList.tsx","packages/components/entity-list/src/EntityList.tsx","packages/components/entity-list/src/EntityList.styles.ts","packages/components/entity-list/src/EntityListItem/EntityListItem.tsx","packages/components/entity-list/src/EntityListItem/EntityListItem.styles.ts"],"sourcesContent":["export { EntityList } from './CompoundEntityList';\nexport type { EntityListProps } from './EntityList';\nexport { EntityListItem } from './EntityListItem/EntityListItem';\nexport type { EntityListItemProps } from './EntityListItem/EntityListItem';\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","import React from 'react';\nimport { cx } from 'emotion';\nimport { 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\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 from 'react';\nimport { cx } from 'emotion';\nimport type { MouseEventHandler } from 'react';\n\nimport { EntityStatusBadge } from '@contentful/f36-badge';\nimport type {\n  CommonProps,\n  EntityStatus,\n  PickUnion,\n} from '@contentful/f36-core';\nimport {\n  AssetIcon,\n  EntryIcon,\n  ReleaseIcon,\n  MoreHorizontalIcon,\n} from '@contentful/f36-icons';\nimport { Icon } from '@contentful/f36-icon';\nimport { Text } from '@contentful/f36-typography';\nimport { DragHandle } from '@contentful/f36-drag-handle';\nimport type { DragHandleProps } from '@contentful/f36-drag-handle';\nimport { Button } from '@contentful/f36-button';\nimport { Menu } from '@contentful/f36-menu';\n\nimport { getEntityListItemStyles } from './EntityListItem.styles';\n\nimport {\n  SkeletonBodyText,\n  SkeletonContainer,\n  SkeletonImage,\n} from '@contentful/f36-skeleton';\nimport { Flex, Box } from '@contentful/f36-core';\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};\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?: 'Entry' | 'Asset' | 'entry' | 'asset' | 'Release';\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 function 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  if (href || onClick) {\n    Element = href ? 'a' : 'button';\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}>\n          <SkeletonContainer clipId=\"f36-entity-list-item-skeleton\">\n            <SkeletonImage height={46} width={46} />\n            <SkeletonBodyText\n              numberOfLines={2}\n              lineHeight={18}\n              offsetLeft={54}\n            />\n          </SkeletonContainer>\n        </article>\n      ) : (\n        <Element\n          className={styles.card}\n          onClick={onClick}\n          href={href}\n          type={Element === 'button' ? 'button' : undefined}\n          target={href ? '_blank' : undefined}\n        >\n          {withThumbnail && (\n            <figure className={styles.media}>\n              {asIcon ? (\n                <Icon as={ICON_MAP[entityType.toLowerCase()]} variant=\"muted\" />\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            {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          </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\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          </Flex>\n        </Element>\n      )}\n    </li>\n  );\n}\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: css({\n    display: 'flex',\n    textDecoration: 'none',\n    width: '100%',\n    minHeight: tokens.spacing3Xl,\n    padding: tokens.spacingXs,\n    border: 'none',\n    background: 'none',\n    textAlign: 'left',\n  }),\n  content: css({\n    flexGrow: 1,\n    minWidth: 0,\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  description: css({\n    marginTop: tokens.spacing2Xs,\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  }),\n});\n"],"names":["EntityList","EntityListProps","EntityListItem","EntityListItemProps","OriginalEntityList","CompoundEntityList","Item","React","CommonProps","ExpandProps","getEntityListStyles","children","ReactNode","_EntityList","props","ref","Ref","HTMLUListElement","styles","testId","root","className","style","forwardRef","tokens","display","listStyle","margin","padding","border","gray200","borderBottom","borderRadius","borderRadiusMedium","overflow","MouseEventHandler","EntityStatusBadge","EntityStatus","PickUnion","AssetIcon","EntryIcon","ReleaseIcon","MoreHorizontalIcon","Icon","Text","DragHandle","DragHandleProps","Button","Menu","getEntityListItemStyles","SkeletonBodyText","SkeletonContainer","SkeletonImage","Flex","Box","EntityListItemStatus","ICON_MAP","asset","entry","release","title","description","contentType","status","withThumbnail","thumbnailUrl","thumbnailAltText","actions","ReactNodeArray","withDragHandle","isDragActive","cardDragHandleComponent","cardDragHandleProps","Partial","entityType","isLoading","onClick","href","isActionsDisabled","otherProps","ReactElement","renderCardDragHandle","dragHandle","Element","ElementType","isArchived","asIcon","card","undefined","media","toLowerCase","thumbnail","content","meta","menuTrigger","Pick","boxShadow","position","transition","transitionDurationShort","transitionEasingDefault","transitionProperty","backgroundColor","colorWhite","boxShadowHeavy","gray100","textDecoration","width","minHeight","spacing3Xl","spacingXs","background","textAlign","flexShrink","alignItems","justifyContent","spacing2Xl","height","marginRight","marginLeft","marginTop","spacing2Xs","borderBottomLeftRadius","borderTopLeftRadius"],"version":3,"file":"main.js.map"}

package/dist/module.js

@@ -0,0 +1,227 @@
+import {cx as $qeOF0$cx, css as $qeOF0$css} from "emotion";
+import $qeOF0$react from "react";
+import $qeOF0$contentfulf36tokens from "@contentful/f36-tokens";
+import {EntityStatusBadge as $qeOF0$EntityStatusBadge} from "@contentful/f36-badge";
+import {AssetIcon as $qeOF0$AssetIcon, EntryIcon as $qeOF0$EntryIcon, ReleaseIcon as $qeOF0$ReleaseIcon, MoreHorizontalIcon as $qeOF0$MoreHorizontalIcon} from "@contentful/f36-icons";
+import {Icon as $qeOF0$Icon} from "@contentful/f36-icon";
+import {Text as $qeOF0$Text} from "@contentful/f36-typography";
+import {DragHandle as $qeOF0$DragHandle} from "@contentful/f36-drag-handle";
+import {Button as $qeOF0$Button} from "@contentful/f36-button";
+import {Menu as $qeOF0$Menu} from "@contentful/f36-menu";
+import {SkeletonContainer as $qeOF0$SkeletonContainer, SkeletonImage as $qeOF0$SkeletonImage, SkeletonBodyText as $qeOF0$SkeletonBodyText} from "@contentful/f36-skeleton";
+import {Flex as $qeOF0$Flex, Box as $qeOF0$Box} from "@contentful/f36-core";
+
+
+
+
+
+const $32a4ed8cc58cbd41$export$2b0a239870ba448d = ()=>({
+        root: /*#__PURE__*/ $qeOF0$css({
+            display: 'block',
+            listStyle: 'none',
+            margin: 0,
+            padding: 0,
+            border: `1px solid ${$qeOF0$contentfulf36tokens.gray200}`,
+            borderBottom: 'none',
+            borderRadius: $qeOF0$contentfulf36tokens.borderRadiusMedium,
+            overflow: 'hidden'
+        })
+    })
+;
+
+
+function $3382b9e83b849fa7$var$_EntityList(props, ref) {
+    const styles = $32a4ed8cc58cbd41$export$2b0a239870ba448d();
+    return(/*#__PURE__*/ $qeOF0$react.createElement("ul", {
+        "data-test-id": props.testId || 'cf-ui-entity-list',
+        ref: ref,
+        className: $qeOF0$cx(styles.root, props.className),
+        style: props.style
+    }, props.children));
+}
+const $3382b9e83b849fa7$export$8bb466c13870163e = /*#__PURE__*/ $qeOF0$react.forwardRef($3382b9e83b849fa7$var$_EntityList);
+
+
+
+
+
+
+
+
+
+
+
+
+
+const $7cd3138fd5d2efdd$export$3bb342229d68a121 = ()=>({
+        root: (props)=>/*#__PURE__*/ $qeOF0$css({
+                display: 'flex',
+                boxShadow: `inset 0 -1px 0 ${$qeOF0$contentfulf36tokens.gray200}`,
+                position: 'relative',
+                transition: `${$qeOF0$contentfulf36tokens.transitionDurationShort} ${$qeOF0$contentfulf36tokens.transitionEasingDefault}`,
+                transitionProperty: 'box-shadow, background-color',
+                backgroundColor: $qeOF0$contentfulf36tokens.colorWhite,
+                ...props.isDragActive ? {
+                    boxShadow: $qeOF0$contentfulf36tokens.boxShadowHeavy
+                } : {
+                },
+                '&:hover': {
+                    backgroundColor: $qeOF0$contentfulf36tokens.gray100
+                }
+            })
+        ,
+        card: /*#__PURE__*/ $qeOF0$css({
+            display: 'flex',
+            textDecoration: 'none',
+            width: '100%',
+            minHeight: $qeOF0$contentfulf36tokens.spacing3Xl,
+            padding: $qeOF0$contentfulf36tokens.spacingXs,
+            border: 'none',
+            background: 'none',
+            textAlign: 'left'
+        }),
+        content: /*#__PURE__*/ $qeOF0$css({
+            name: "15ync0s",
+            styles: "flex-grow:1;min-width:0;"
+        }),
+        media: /*#__PURE__*/ $qeOF0$css({
+            display: 'flex',
+            flexShrink: 0,
+            alignItems: 'center',
+            justifyContent: 'center',
+            backgroundColor: $qeOF0$contentfulf36tokens.gray200,
+            width: $qeOF0$contentfulf36tokens.spacing2Xl,
+            height: $qeOF0$contentfulf36tokens.spacing2Xl,
+            margin: '0',
+            marginRight: $qeOF0$contentfulf36tokens.spacingXs
+        }),
+        thumbnail: /*#__PURE__*/ $qeOF0$css({
+            name: "12qah06",
+            styles: "display:block;width:100%;height:100%;object-fit:cover;"
+        }),
+        contentType: /*#__PURE__*/ $qeOF0$css({
+            marginLeft: $qeOF0$contentfulf36tokens.spacingXs
+        }),
+        description: /*#__PURE__*/ $qeOF0$css({
+            marginTop: $qeOF0$contentfulf36tokens.spacing2Xs
+        }),
+        meta: /*#__PURE__*/ $qeOF0$css({
+            name: "1n0gfod",
+            styles: "margin-left:auto;flex-shrink:0;"
+        }),
+        dragHandle: /*#__PURE__*/ $qeOF0$css({
+            borderBottomLeftRadius: '0',
+            borderTopLeftRadius: '0',
+            boxShadow: `inset 0 -1px 0 ${$qeOF0$contentfulf36tokens.gray200}`
+        }),
+        menuTrigger: /*#__PURE__*/ $qeOF0$css({
+            name: "c1v07n",
+            styles: "padding:0 0.125rem;min-height:1.5rem;"
+        })
+    })
+;
+
+
+
+
+const $b8d6b7ec5fedd0fe$var$ICON_MAP = {
+    asset: $qeOF0$AssetIcon,
+    entry: $qeOF0$EntryIcon,
+    release: $qeOF0$ReleaseIcon
+};
+function $b8d6b7ec5fedd0fe$export$65b9c70c5f42a158({ className: className , testId: testId = 'cf-ui-entity-list-item' , title: title , description: description , contentType: contentType , entityType: entityType = 'entry' , withThumbnail: withThumbnail = true , thumbnailUrl: thumbnailUrl , thumbnailAltText: thumbnailAltText , status: status , actions: actions , withDragHandle: withDragHandle , isDragActive: isDragActive , isLoading: isLoading , onClick: onClick , href: href , cardDragHandleProps: cardDragHandleProps , cardDragHandleComponent: cardDragHandleComponent , isActionsDisabled: isActionsDisabled = false , ...otherProps }) {
+    const styles = $7cd3138fd5d2efdd$export$3bb342229d68a121();
+    const renderCardDragHandle = ()=>{
+        if (cardDragHandleComponent) return cardDragHandleComponent;
+        else if (withDragHandle) return(/*#__PURE__*/ $qeOF0$react.createElement($qeOF0$DragHandle, {
+            className: styles.dragHandle,
+            isActive: isDragActive,
+            label: "Reorder entry",
+            ...cardDragHandleProps
+        }));
+    };
+    let Element = 'article';
+    if (href || onClick) Element = href ? 'a' : 'button';
+     // archived assets will not be available on the CDN, resulting in a broken image src
+    const isArchived = status === 'archived';
+    const asIcon = isArchived || !thumbnailUrl;
+    return(/*#__PURE__*/ $qeOF0$react.createElement("li", {
+        ...otherProps,
+        className: $qeOF0$cx(styles.root({
+            isDragActive: isDragActive
+        }), className),
+        "data-test-id": testId
+    }, renderCardDragHandle(), isLoading ? /*#__PURE__*/ $qeOF0$react.createElement("article", {
+        className: styles.card
+    }, /*#__PURE__*/ $qeOF0$react.createElement($qeOF0$SkeletonContainer, {
+        clipId: "f36-entity-list-item-skeleton"
+    }, /*#__PURE__*/ $qeOF0$react.createElement($qeOF0$SkeletonImage, {
+        height: 46,
+        width: 46
+    }), /*#__PURE__*/ $qeOF0$react.createElement($qeOF0$SkeletonBodyText, {
+        numberOfLines: 2,
+        lineHeight: 18,
+        offsetLeft: 54
+    }))) : /*#__PURE__*/ $qeOF0$react.createElement(Element, {
+        className: styles.card,
+        onClick: onClick,
+        href: href,
+        type: Element === 'button' ? 'button' : undefined,
+        target: href ? '_blank' : undefined
+    }, withThumbnail && /*#__PURE__*/ $qeOF0$react.createElement("figure", {
+        className: styles.media
+    }, asIcon ? /*#__PURE__*/ $qeOF0$react.createElement($qeOF0$Icon, {
+        as: $b8d6b7ec5fedd0fe$var$ICON_MAP[entityType.toLowerCase()],
+        variant: "muted"
+    }) : /*#__PURE__*/ $qeOF0$react.createElement("img", {
+        src: thumbnailUrl,
+        className: styles.thumbnail,
+        alt: thumbnailAltText
+    })), /*#__PURE__*/ $qeOF0$react.createElement("div", {
+        className: styles.content
+    }, /*#__PURE__*/ $qeOF0$react.createElement($qeOF0$Flex, null, /*#__PURE__*/ $qeOF0$react.createElement($qeOF0$Text, {
+        as: "h3",
+        lineHeight: "lineHeightM",
+        fontColor: "gray900",
+        fontWeight: "fontWeightDemiBold",
+        isTruncated: true
+    }, title), contentType && /*#__PURE__*/ $qeOF0$react.createElement($qeOF0$Text, {
+        as: "span",
+        lineHeight: "lineHeightM",
+        fontColor: "gray600",
+        className: styles.contentType,
+        isTruncated: true
+    }, "(", contentType, ")")), description && /*#__PURE__*/ $qeOF0$react.createElement($qeOF0$Text, {
+        as: "p",
+        lineHeight: "lineHeightM",
+        fontColor: "gray900",
+        isTruncated: true,
+        className: styles.description
+    }, description)), /*#__PURE__*/ $qeOF0$react.createElement($qeOF0$Flex, {
+        className: styles.meta,
+        alignItems: "flex-start",
+        paddingLeft: "spacingXs"
+    }, status && /*#__PURE__*/ $qeOF0$react.createElement($qeOF0$Box, {
+        marginRight: actions ? 'spacingXs' : 'none'
+    }, /*#__PURE__*/ $qeOF0$react.createElement($qeOF0$EntityStatusBadge, {
+        entityStatus: status
+    })), actions && /*#__PURE__*/ $qeOF0$react.createElement($qeOF0$Menu, null, /*#__PURE__*/ $qeOF0$react.createElement($qeOF0$Menu.Trigger, null, /*#__PURE__*/ $qeOF0$react.createElement($qeOF0$Button, {
+        isDisabled: isActionsDisabled,
+        startIcon: /*#__PURE__*/ $qeOF0$react.createElement($qeOF0$MoreHorizontalIcon, null),
+        variant: "transparent",
+        "aria-label": "Actions",
+        size: "small",
+        className: styles.menuTrigger
+    })), /*#__PURE__*/ $qeOF0$react.createElement($qeOF0$Menu.List, null, actions))))));
+}
+
+
+const $bbd0ee2d7d3132a2$export$8bb466c13870163e = $3382b9e83b849fa7$export$8bb466c13870163e;
+$bbd0ee2d7d3132a2$export$8bb466c13870163e.Item = $b8d6b7ec5fedd0fe$export$65b9c70c5f42a158;
+
+
+
+
+
+export {$bbd0ee2d7d3132a2$export$8bb466c13870163e as EntityList, $b8d6b7ec5fedd0fe$export$65b9c70c5f42a158 as EntityListItem};
+//# sourceMappingURL=module.js.map

package/dist/module.js.map

@@ -0,0 +1 @@
+{"mappings":"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","sources":["packages/components/entity-list/src/index.ts","packages/components/entity-list/src/CompoundEntityList.tsx","packages/components/entity-list/src/EntityList.tsx","packages/components/entity-list/src/EntityList.styles.ts","packages/components/entity-list/src/EntityListItem/EntityListItem.tsx","packages/components/entity-list/src/EntityListItem/EntityListItem.styles.ts"],"sourcesContent":["export { EntityList } from './CompoundEntityList';\nexport type { EntityListProps } from './EntityList';\nexport { EntityListItem } from './EntityListItem/EntityListItem';\nexport type { EntityListItemProps } from './EntityListItem/EntityListItem';\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","import React from 'react';\nimport { cx } from 'emotion';\nimport { 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\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 from 'react';\nimport { cx } from 'emotion';\nimport type { MouseEventHandler } from 'react';\n\nimport { EntityStatusBadge } from '@contentful/f36-badge';\nimport type {\n  CommonProps,\n  EntityStatus,\n  PickUnion,\n} from '@contentful/f36-core';\nimport {\n  AssetIcon,\n  EntryIcon,\n  ReleaseIcon,\n  MoreHorizontalIcon,\n} from '@contentful/f36-icons';\nimport { Icon } from '@contentful/f36-icon';\nimport { Text } from '@contentful/f36-typography';\nimport { DragHandle } from '@contentful/f36-drag-handle';\nimport type { DragHandleProps } from '@contentful/f36-drag-handle';\nimport { Button } from '@contentful/f36-button';\nimport { Menu } from '@contentful/f36-menu';\n\nimport { getEntityListItemStyles } from './EntityListItem.styles';\n\nimport {\n  SkeletonBodyText,\n  SkeletonContainer,\n  SkeletonImage,\n} from '@contentful/f36-skeleton';\nimport { Flex, Box } from '@contentful/f36-core';\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};\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?: 'Entry' | 'Asset' | 'entry' | 'asset' | 'Release';\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 function 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  if (href || onClick) {\n    Element = href ? 'a' : 'button';\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}>\n          <SkeletonContainer clipId=\"f36-entity-list-item-skeleton\">\n            <SkeletonImage height={46} width={46} />\n            <SkeletonBodyText\n              numberOfLines={2}\n              lineHeight={18}\n              offsetLeft={54}\n            />\n          </SkeletonContainer>\n        </article>\n      ) : (\n        <Element\n          className={styles.card}\n          onClick={onClick}\n          href={href}\n          type={Element === 'button' ? 'button' : undefined}\n          target={href ? '_blank' : undefined}\n        >\n          {withThumbnail && (\n            <figure className={styles.media}>\n              {asIcon ? (\n                <Icon as={ICON_MAP[entityType.toLowerCase()]} variant=\"muted\" />\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            {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          </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\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          </Flex>\n        </Element>\n      )}\n    </li>\n  );\n}\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: css({\n    display: 'flex',\n    textDecoration: 'none',\n    width: '100%',\n    minHeight: tokens.spacing3Xl,\n    padding: tokens.spacingXs,\n    border: 'none',\n    background: 'none',\n    textAlign: 'left',\n  }),\n  content: css({\n    flexGrow: 1,\n    minWidth: 0,\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  description: css({\n    marginTop: tokens.spacing2Xs,\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  }),\n});\n"],"names":["EntityList","EntityListProps","EntityListItem","EntityListItemProps","OriginalEntityList","CompoundEntityList","Item","React","CommonProps","ExpandProps","getEntityListStyles","children","ReactNode","_EntityList","props","ref","Ref","HTMLUListElement","styles","testId","root","className","style","forwardRef","tokens","display","listStyle","margin","padding","border","gray200","borderBottom","borderRadius","borderRadiusMedium","overflow","MouseEventHandler","EntityStatusBadge","EntityStatus","PickUnion","AssetIcon","EntryIcon","ReleaseIcon","MoreHorizontalIcon","Icon","Text","DragHandle","DragHandleProps","Button","Menu","getEntityListItemStyles","SkeletonBodyText","SkeletonContainer","SkeletonImage","Flex","Box","EntityListItemStatus","ICON_MAP","asset","entry","release","title","description","contentType","status","withThumbnail","thumbnailUrl","thumbnailAltText","actions","ReactNodeArray","withDragHandle","isDragActive","cardDragHandleComponent","cardDragHandleProps","Partial","entityType","isLoading","onClick","href","isActionsDisabled","otherProps","ReactElement","renderCardDragHandle","dragHandle","Element","ElementType","isArchived","asIcon","card","undefined","media","toLowerCase","thumbnail","content","meta","menuTrigger","Pick","boxShadow","position","transition","transitionDurationShort","transitionEasingDefault","transitionProperty","backgroundColor","colorWhite","boxShadowHeavy","gray100","textDecoration","width","minHeight","spacing3Xl","spacingXs","background","textAlign","flexShrink","alignItems","justifyContent","spacing2Xl","height","marginRight","marginLeft","marginTop","spacing2Xs","borderBottomLeftRadius","borderTopLeftRadius"],"version":3,"file":"module.js.map"}

package/dist/types.d.ts

@@ -0,0 +1,92 @@
+import React, { MouseEventHandler } from "react";
+import { CommonProps, EntityStatus, PickUnion } from "@contentful/f36-core";
+import { DragHandleProps } from "@contentful/f36-drag-handle";
+export interface EntityListProps extends CommonProps {
+    children?: React.ReactNode;
+}
+declare const _EntityList1: React.ForwardRefExoticComponent<{
+    children?: React.ReactNode;
+    className?: string;
+    testId?: string;
+    style?: React.CSSProperties;
+} & React.RefAttributes<HTMLUListElement>>;
+type EntityListItemStatus = PickUnion<EntityStatus, 'archived' | 'changed' | 'draft' | 'published'>;
+export interface EntityListItemProps extends CommonProps {
+    /**
+     * The title of the entity
+     */
+    title: string;
+    /**
+     * The description of the entity
+     */
+    description?: string;
+    /**
+     * The content type of the entity
+     */
+    contentType?: string;
+    /**
+     * The publish status of the entry
+     */
+    status?: EntityListItemStatus;
+    /**
+     * A boolean used to render the Thumbnail or not
+     */
+    withThumbnail?: boolean;
+    /**
+     * The URL of the entity's preview thumbnail. Use 46px x 46px images for best results
+     */
+    thumbnailUrl?: string;
+    /**
+     * The alt text for the thumbnail
+     */
+    thumbnailAltText?: string;
+    /**
+     * Menu elements rendered as actions in Menu
+     */
+    actions?: React.ReactNodeArray;
+    /**
+     * Renders a drag handle for the component for use in drag and drop contexts
+     */
+    withDragHandle?: boolean;
+    /**
+     * Applies styling for when the component is actively being dragged by the user
+     */
+    isDragActive?: boolean;
+    /**
+     * Prop to pass a custom CardDragHandle component to for use in drag and drop contexts
+     */
+    cardDragHandleComponent?: React.ReactNode;
+    /**
+     * Props to pass down to the default CardDragHandle component (does not work with cardDragHandleComponent prop)
+     */
+    cardDragHandleProps?: Partial<DragHandleProps>;
+    /**
+     * 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
+     *
+     * Note: 'entry' and 'asset' are @deprecated but supported in v1.x for backwards compatibility
+     */
+    entityType?: 'Entry' | 'Asset' | 'entry' | 'asset' | 'Release';
+    /**
+     * Loading state for the component - when true will display loading feedback to the user
+     */
+    isLoading?: boolean;
+    /**
+     * The action to be performed on click of the EntryCard
+     */
+    onClick?: MouseEventHandler;
+    /**
+     * The href for the component. Will render the card as an `a` element for native browser link handling
+     */
+    href?: string;
+    /**
+     * A boolean used to disable the CardActions
+     */
+    isActionsDisabled?: boolean;
+}
+export function EntityListItem({ className, testId, title, description, contentType, entityType, withThumbnail, thumbnailUrl, thumbnailAltText, status, actions, withDragHandle, isDragActive, isLoading, onClick, href, cardDragHandleProps, cardDragHandleComponent, isActionsDisabled, ...otherProps }: EntityListItemProps): React.ReactElement;
+type CompoundEntityList = typeof _EntityList1 & {
+    Item: typeof EntityListItem;
+};
+export const EntityList: CompoundEntityList;
+
+//# sourceMappingURL=types.d.ts.map

package/dist/types.d.ts.map

@@ -0,0 +1 @@
+{"mappings":";;;ACMA,gCAAiC,SAAQ,WAAW;IAClD,QAAQ,CAAC,EAAE,MAAM,SAAS,CAAC;CAC5B;AAoBD,QAAO,MAAM;eArBA,MAAM,SAAS;;;;0CAqB2B,CAAC;AEIxD,4BAA4B,UAC1B,YAAY,EACZ,UAAU,GAAG,SAAS,GAAG,OAAO,GAAG,WAAW,CAC/C,CAAC;AAQF,oCAAqC,SAAQ,WAAW;IACtD;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,MAAM,CAAC,EAAE,oBAAoB,CAAC;IAC9B;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,cAAc,CAAC;IAC/B;;OAEG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;OAEG;IACH,uBAAuB,CAAC,EAAE,MAAM,SAAS,CAAC;IAC1C;;OAEG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC,eAAe,CAAC,CAAC;IAC/C;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,GAAG,OAAO,GAAG,OAAO,GAAG,OAAO,GAAG,SAAS,CAAC;IAC/D;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B;AAED,+BAA+B,EAC7B,SAAS,EACT,MAAiC,EACjC,KAAK,EACL,WAAW,EACX,WAAW,EACX,UAAoB,EACpB,aAAoB,EACpB,YAAY,EACZ,gBAAgB,EAChB,MAAM,EACN,OAAO,EACP,cAAc,EACd,YAAY,EACZ,SAAS,EACT,OAAO,EACP,IAAI,EACJ,mBAAmB,EACnB,uBAAuB,EACvB,iBAAyB,EACzB,GAAG,UAAU,EACd,EAAE,mBAAmB,GAAG,MAAM,YAAY,CAuI1C;AC7QD,0BAA0B,mBAAyB,GAAG;IACpD,IAAI,EAAE,qBAAqB,CAAC;CAC7B,CAAC;AAEF,OAAO,MAAM,8BAAqD,CAAC","sources":["packages/components/entity-list/src/src/EntityList.styles.ts","packages/components/entity-list/src/src/EntityList.tsx","packages/components/entity-list/src/src/EntityListItem/EntityListItem.styles.ts","packages/components/entity-list/src/src/EntityListItem/EntityListItem.tsx","packages/components/entity-list/src/src/CompoundEntityList.tsx","packages/components/entity-list/src/src/index.ts","packages/components/entity-list/src/index.ts"],"sourcesContent":[null,null,null,null,null,null,"export { EntityList } from './CompoundEntityList';\nexport type { EntityListProps } from './EntityList';\nexport { EntityListItem } from './EntityListItem/EntityListItem';\nexport type { EntityListItemProps } from './EntityListItem/EntityListItem';\n"],"names":[],"version":3,"file":"types.d.ts.map"}

package/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "@contentful/f36-entity-list",
+  "version": "4.0.0",
+  "description": "Forma 36: EntityList component",
+  "scripts": {
+    "build": "parcel build"
+  },
+  "dependencies": {
+    "@babel/runtime": "^7.6.2",
+    "@contentful/f36-badge": "^4.0.0",
+    "@contentful/f36-button": "^4.0.0",
+    "@contentful/f36-core": "^4.0.0",
+    "@contentful/f36-drag-handle": "^4.0.0",
+    "@contentful/f36-icon": "^4.0.0",
+    "@contentful/f36-icons": "^4.0.0",
+    "@contentful/f36-menu": "^4.0.0",
+    "@contentful/f36-skeleton": "^4.0.0",
+    "@contentful/f36-tokens": "^4.0.0",
+    "@contentful/f36-typography": "^4.0.0",
+    "emotion": "^10.0.17"
+  },
+  "peerDependencies": {
+    "react": ">=16.8"
+  },
+  "license": "MIT",
+  "files": [
+    "dist"
+  ],
+  "main": "dist/main.js",
+  "module": "dist/module.js",
+  "types": "dist/types.d.ts",
+  "source": "src/index.ts",
+  "sideEffects": false,
+  "browserslist": "extends @contentful/browserslist-config",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/contentful/forma-36"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "gitHead": "01d931c77410619d05cd00dbb3b5acc5d8ae2cdf"
+}