@contentful/f36-asset 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.md

@@ -0,0 +1,5 @@
+# @contentful/f36-asset
+
+This package is part of the pre-release. This means it is unsupported and subject to breaking changes without warning.
+
+Please use official, supported version of the library [forma-36](https://github.com/contentful/forma-36/tree/master/packages/forma-36-react-components), [NPM](https://www.npmjs.com/package/@contentful/forma-36-react-components).

package/dist/main.js

@@ -0,0 +1,182 @@
+var $goRX5$emotion = require("emotion");
+var $goRX5$react = require("react");
+var $goRX5$contentfulf36core = require("@contentful/f36-core");
+var $goRX5$contentfulf36typography = require("@contentful/f36-typography");
+var $goRX5$contentfulf36icons = require("@contentful/f36-icons");
+var $goRX5$contentfulf36tokens = require("@contentful/f36-tokens");
+
+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, "Asset", () => $ee511d6a9591eb62$export$c413dd039085b182);
+$parcel$export(module.exports, "AssetIcon", () => $bdfac71418b2e6eb$export$de8d5274b07acfbd);
+$parcel$export(module.exports, "isAssetType", () => $ecfcb790f927d565$export$3ccaa71e0816392d);
+
+
+
+
+
+
+
+
+
+function $a7f01243e6d07e2f$export$d4130e73e2e8f9dd() {
+    return {
+        root: /*#__PURE__*/ $goRX5$emotion.css({
+            display: 'inline-block',
+            width: '39px',
+            height: '39px',
+            'g, path': {
+                fill: ($parcel$interopDefault($goRX5$contentfulf36tokens)).gray600
+            }
+        })
+    };
+}
+
+
+function $bdfac71418b2e6eb$export$de8d5274b07acfbd({ type: type = 'archive' , className: className , testId: testId = 'cf-ui-asset-icon' , ...otherProps }) {
+    const styles = $a7f01243e6d07e2f$export$d4130e73e2e8f9dd();
+    const props = {
+        ...otherProps,
+        testId: testId,
+        className: $goRX5$emotion.cx(styles.root, className)
+    };
+    switch(type){
+        case 'audio':
+            return(/*#__PURE__*/ ($parcel$interopDefault($goRX5$react)).createElement($goRX5$contentfulf36icons.AudioIcon, props));
+        case 'code':
+            return(/*#__PURE__*/ ($parcel$interopDefault($goRX5$react)).createElement($goRX5$contentfulf36icons.CodeIllustrationIcon, props));
+        case 'image':
+            return(/*#__PURE__*/ ($parcel$interopDefault($goRX5$react)).createElement($goRX5$contentfulf36icons.ImageIcon, props));
+        case 'markup':
+            return(/*#__PURE__*/ ($parcel$interopDefault($goRX5$react)).createElement($goRX5$contentfulf36icons.MarkupIcon, props));
+        case 'pdf':
+            return(/*#__PURE__*/ ($parcel$interopDefault($goRX5$react)).createElement($goRX5$contentfulf36icons.PdfIcon, props));
+        case 'plaintext':
+            return(/*#__PURE__*/ ($parcel$interopDefault($goRX5$react)).createElement($goRX5$contentfulf36icons.PlaintextIcon, props));
+        case 'presentation':
+            return(/*#__PURE__*/ ($parcel$interopDefault($goRX5$react)).createElement($goRX5$contentfulf36icons.PresentationIcon, props));
+        case 'richtext':
+            return(/*#__PURE__*/ ($parcel$interopDefault($goRX5$react)).createElement($goRX5$contentfulf36icons.RichtextIcon, props));
+        case 'spreadsheet':
+            return(/*#__PURE__*/ ($parcel$interopDefault($goRX5$react)).createElement($goRX5$contentfulf36icons.SpreadsheetIcon, props));
+        case 'video':
+            return(/*#__PURE__*/ ($parcel$interopDefault($goRX5$react)).createElement($goRX5$contentfulf36icons.VideoIcon, props));
+        case 'archive':
+        default:
+            return(/*#__PURE__*/ ($parcel$interopDefault($goRX5$react)).createElement($goRX5$contentfulf36icons.ArchiveIcon, props));
+    }
+}
+
+
+
+
+function $757deda98165af5b$export$fa02bd03531e2fe() {
+    return {
+        relative: /*#__PURE__*/ $goRX5$emotion.css({
+            name: "1jke4yk",
+            styles: "position:relative;width:100%;"
+        }),
+        height100: /*#__PURE__*/ $goRX5$emotion.css({
+            name: "10klw3m",
+            styles: "height:100%;"
+        }),
+        image: /*#__PURE__*/ $goRX5$emotion.css({
+            name: "1o9ustp",
+            styles: "width:auto;height:100%;max-width:100%;max-height:100%;object-fit:contain;"
+        }),
+        titleContainer: /*#__PURE__*/ $goRX5$emotion.css({
+            opacity: 0,
+            transition: `opacity ${($parcel$interopDefault($goRX5$contentfulf36tokens)).transitionDurationDefault} ${($parcel$interopDefault($goRX5$contentfulf36tokens)).transitionEasingDefault}`,
+            position: 'absolute',
+            bottom: 0,
+            right: 0,
+            left: 0,
+            height: '100%',
+            display: 'flex',
+            overflow: 'hidden',
+            alignItems: 'flex-end',
+            boxSizing: 'border-box',
+            background: `linear-gradient(0deg, ${($parcel$interopDefault($goRX5$contentfulf36tokens)).gray900} 0%, transparent calc(1rem * (100 / ${($parcel$interopDefault($goRX5$contentfulf36tokens)).fontBaseDefault})), transparent 100% )`,
+            ':hover': {
+                opacity: 1
+            }
+        }),
+        title: /*#__PURE__*/ $goRX5$emotion.css({
+            name: "4gk4ib",
+            styles: "bottom:0;left:0;right:0;position:absolute;"
+        })
+    };
+}
+
+
+function $ee511d6a9591eb62$export$c413dd039085b182({ className: className , src: src , status: status , testId: testId = 'cf-ui-asset' , title: title , type: type = 'image' , ...otherProps }) {
+    const styles = $757deda98165af5b$export$fa02bd03531e2fe();
+    const isImage = src && src !== '' && type === 'image'; // Do not show image previews when publish status is archived
+    const showPreview = isImage && status !== 'archived';
+    return(/*#__PURE__*/ ($parcel$interopDefault($goRX5$react)).createElement($goRX5$contentfulf36core.Box, {
+        className: $goRX5$emotion.cx(styles.relative, className),
+        testId: testId,
+        ...otherProps
+    }, showPreview ? /*#__PURE__*/ ($parcel$interopDefault($goRX5$react)).createElement(($parcel$interopDefault($goRX5$react)).Fragment, null, /*#__PURE__*/ ($parcel$interopDefault($goRX5$react)).createElement($goRX5$contentfulf36core.Flex, {
+        alignItems: "center",
+        justifyContent: "center",
+        className: styles.height100
+    }, /*#__PURE__*/ ($parcel$interopDefault($goRX5$react)).createElement("img", {
+        className: styles.image,
+        src: src,
+        alt: title
+    })), title && /*#__PURE__*/ ($parcel$interopDefault($goRX5$react)).createElement("div", {
+        className: styles.titleContainer
+    }, /*#__PURE__*/ ($parcel$interopDefault($goRX5$react)).createElement($goRX5$contentfulf36typography.Text, {
+        className: styles.title,
+        fontColor: "colorWhite",
+        margin: "spacingS",
+        isTruncated: true
+    }, title))) : /*#__PURE__*/ ($parcel$interopDefault($goRX5$react)).createElement($goRX5$contentfulf36core.Flex, {
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        paddingLeft: "spacingS",
+        paddingRight: "spacingS",
+        className: styles.height100
+    }, /*#__PURE__*/ ($parcel$interopDefault($goRX5$react)).createElement($goRX5$contentfulf36core.Flex, {
+        marginBottom: "spacingM",
+        marginTop: "spacingM",
+        justifyContent: "center"
+    }, /*#__PURE__*/ ($parcel$interopDefault($goRX5$react)).createElement($bdfac71418b2e6eb$export$de8d5274b07acfbd, {
+        type: type
+    })), /*#__PURE__*/ ($parcel$interopDefault($goRX5$react)).createElement($goRX5$contentfulf36typography.Text, {
+        isTruncated: true,
+        marginBottom: "spacingM",
+        fontColor: "gray600"
+    }, title))));
+}
+
+
+
+const $ecfcb790f927d565$export$b14ad400b1d09e0f = {
+    archive: 'archive',
+    audio: 'audio',
+    code: 'code',
+    image: 'image',
+    markup: 'markup',
+    pdf: 'pdf',
+    plaintext: 'plaintext',
+    presentation: 'presentation',
+    richtext: 'richtext',
+    spreadsheet: 'spreadsheet',
+    video: 'video'
+};
+function $ecfcb790f927d565$export$3ccaa71e0816392d(type) {
+    return Object.keys($ecfcb790f927d565$export$b14ad400b1d09e0f).includes(type);
+}
+
+
+
+
+//# sourceMappingURL=main.js.map

package/dist/main.js.map

@@ -0,0 +1 @@
+{"mappings":"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","sources":["packages/components/asset/src/index.ts","packages/components/asset/src/Asset.tsx","packages/components/asset/src/AssetIcon/AssetIcon.tsx","packages/components/asset/src/AssetIcon/AssetIcon.styles.ts","packages/components/asset/src/Asset.styles.ts","packages/components/asset/src/types.ts"],"sourcesContent":["export { Asset } from './Asset';\nexport type { AssetProps, AssetStatus } from './Asset';\nexport { AssetIcon } from './AssetIcon/AssetIcon';\nexport type { AssetIconProps } from './AssetIcon/AssetIcon';\nexport type { AssetType } from './types';\nexport { isAssetType } from './types';\n","import React from 'react';\nimport { cx } from 'emotion';\nimport type {\n  EntityStatus,\n  PickUnion,\n  CommonProps,\n} from '@contentful/f36-core';\nimport { Box, Flex } from '@contentful/f36-core';\nimport { Text } from '@contentful/f36-typography';\n\nimport { AssetIcon } from './AssetIcon/AssetIcon';\nimport { getAssetStyles } from './Asset.styles';\nimport type { AssetType } from './types';\n\nexport type AssetStatus = PickUnion<\n  EntityStatus,\n  'archived' | 'changed' | 'deleted' | 'draft' | 'published'\n>;\n\nexport interface AssetProps extends CommonProps {\n  /**\n   * A `src` attribute to use for image assets\n   */\n  src?: string;\n  /**\n   * The publish status of the asset\n   */\n  status?: AssetStatus;\n  /**\n   * The title of the asset\n   */\n  title?: string;\n  /**\n   * The type of asset being represented\n   */\n  type?: AssetType;\n}\n\nexport function Asset({\n  className,\n  src,\n  status,\n  testId = 'cf-ui-asset',\n  title,\n  type = 'image',\n  ...otherProps\n}: AssetProps) {\n  const styles = getAssetStyles();\n  const isImage = src && src !== '' && type === 'image';\n\n  // Do not show image previews when publish status is archived\n  const showPreview = isImage && status !== 'archived';\n\n  return (\n    <Box\n      className={cx(styles.relative, className)}\n      testId={testId}\n      {...otherProps}\n    >\n      {showPreview ? (\n        <>\n          <Flex\n            alignItems=\"center\"\n            justifyContent=\"center\"\n            className={styles.height100}\n          >\n            <img className={styles.image} src={src} alt={title} />\n          </Flex>\n          {title && (\n            <div className={styles.titleContainer}>\n              <Text\n                className={styles.title}\n                fontColor=\"colorWhite\"\n                margin=\"spacingS\"\n                isTruncated\n              >\n                {title}\n              </Text>\n            </div>\n          )}\n        </>\n      ) : (\n        <Flex\n          flexDirection=\"column\"\n          alignItems=\"center\"\n          justifyContent=\"center\"\n          paddingLeft=\"spacingS\"\n          paddingRight=\"spacingS\"\n          className={styles.height100}\n        >\n          <Flex\n            marginBottom=\"spacingM\"\n            marginTop=\"spacingM\"\n            justifyContent=\"center\"\n          >\n            <AssetIcon type={type} />\n          </Flex>\n          <Text isTruncated marginBottom=\"spacingM\" fontColor=\"gray600\">\n            {title}\n          </Text>\n        </Flex>\n      )}\n    </Box>\n  );\n}\n","import React from 'react';\nimport {\n  ArchiveIcon,\n  AudioIcon,\n  CodeIllustrationIcon,\n  ImageIcon,\n  MarkupIcon,\n  PdfIcon,\n  PlaintextIcon,\n  RichtextIcon,\n  PresentationIcon,\n  SpreadsheetIcon,\n  VideoIcon,\n} from '@contentful/f36-icons';\nimport type { GeneratedIconProps } from '@contentful/f36-icon';\nimport type { AssetType } from '../types';\n\nimport { cx } from 'emotion';\nimport { getAssetIconStyles } from './AssetIcon.styles';\n\nexport interface AssetIconProps\n  extends Omit<GeneratedIconProps, 'illustration' | 'ref'> {\n  type?: AssetType;\n}\n\n/**\n * Renders only the Illustration that would represent this asset's type\n */\nexport function AssetIcon({\n  type = 'archive',\n  className,\n  testId = 'cf-ui-asset-icon',\n  ...otherProps\n}: AssetIconProps) {\n  const styles = getAssetIconStyles();\n  const props = {\n    ...otherProps,\n    testId,\n    className: cx(styles.root, className),\n  };\n\n  switch (type) {\n    case 'audio':\n      return <AudioIcon {...props} />;\n    case 'code':\n      return <CodeIllustrationIcon {...props} />;\n    case 'image':\n      return <ImageIcon {...props} />;\n    case 'markup':\n      return <MarkupIcon {...props} />;\n    case 'pdf':\n      return <PdfIcon {...props} />;\n    case 'plaintext':\n      return <PlaintextIcon {...props} />;\n    case 'presentation':\n      return <PresentationIcon {...props} />;\n    case 'richtext':\n      return <RichtextIcon {...props} />;\n    case 'spreadsheet':\n      return <SpreadsheetIcon {...props} />;\n    case 'video':\n      return <VideoIcon {...props} />;\n    case 'archive':\n    default:\n      return <ArchiveIcon {...props} />;\n  }\n}\n","import tokens from '@contentful/f36-tokens';\nimport { css } from 'emotion';\n\nexport function getAssetIconStyles() {\n  return {\n    root: css({\n      display: 'inline-block',\n      width: '39px',\n      height: '39px',\n      'g, path': {\n        fill: tokens.gray600,\n      },\n    }),\n  };\n}\n","import tokens from '@contentful/f36-tokens';\nimport { css } from 'emotion';\n\nexport function getAssetStyles() {\n  return {\n    relative: css({\n      position: 'relative',\n      width: '100%',\n    }),\n    height100: css({\n      height: '100%',\n    }),\n    image: css({\n      width: 'auto',\n      height: '100%',\n      maxWidth: '100%',\n      maxHeight: '100%',\n      objectFit: 'contain',\n    }),\n    titleContainer: css({\n      opacity: 0,\n      transition: `opacity ${tokens.transitionDurationDefault} ${tokens.transitionEasingDefault}`,\n      position: 'absolute',\n      bottom: 0,\n      right: 0,\n      left: 0,\n      height: '100%',\n      display: 'flex',\n      overflow: 'hidden',\n      alignItems: 'flex-end',\n      boxSizing: 'border-box',\n      background: `linear-gradient(0deg, ${tokens.gray900} 0%, transparent calc(1rem * (100 / ${tokens.fontBaseDefault})), transparent 100% )`,\n      ':hover': { opacity: 1 },\n    }),\n    title: css({\n      bottom: 0,\n      left: 0,\n      right: 0,\n      position: 'absolute',\n    }),\n  };\n}\n","export const types = {\n  archive: 'archive',\n  audio: 'audio',\n  code: 'code',\n  image: 'image',\n  markup: 'markup',\n  pdf: 'pdf',\n  plaintext: 'plaintext',\n  presentation: 'presentation',\n  richtext: 'richtext',\n  spreadsheet: 'spreadsheet',\n  video: 'video',\n};\n\nexport function isAssetType(type: string): type is AssetType {\n  return Object.keys(types).includes(type);\n}\n\nexport type AssetType = keyof typeof types;\n"],"names":["Asset","AssetProps","AssetStatus","AssetIcon","AssetIconProps","AssetType","isAssetType","React","EntityStatus","PickUnion","CommonProps","Box","Flex","Text","getAssetStyles","src","status","title","type","className","testId","otherProps","styles","isImage","showPreview","relative","height100","image","titleContainer","ArchiveIcon","AudioIcon","CodeIllustrationIcon","ImageIcon","MarkupIcon","PdfIcon","PlaintextIcon","RichtextIcon","PresentationIcon","SpreadsheetIcon","VideoIcon","GeneratedIconProps","getAssetIconStyles","Omit","props","root","tokens","display","width","height","fill","gray600","opacity","transition","transitionDurationDefault","transitionEasingDefault","position","bottom","right","left","overflow","alignItems","boxSizing","background","gray900","fontBaseDefault","types","archive","audio","code","markup","pdf","plaintext","presentation","richtext","spreadsheet","video","Object","keys","includes"],"version":3,"file":"main.js.map"}

package/dist/module.js

@@ -0,0 +1,173 @@
+import {cx as $dtSHR$cx, css as $dtSHR$css} from "emotion";
+import $dtSHR$react from "react";
+import {Box as $dtSHR$Box, Flex as $dtSHR$Flex} from "@contentful/f36-core";
+import {Text as $dtSHR$Text} from "@contentful/f36-typography";
+import {AudioIcon as $dtSHR$AudioIcon, CodeIllustrationIcon as $dtSHR$CodeIllustrationIcon, ImageIcon as $dtSHR$ImageIcon, MarkupIcon as $dtSHR$MarkupIcon, PdfIcon as $dtSHR$PdfIcon, PlaintextIcon as $dtSHR$PlaintextIcon, PresentationIcon as $dtSHR$PresentationIcon, RichtextIcon as $dtSHR$RichtextIcon, SpreadsheetIcon as $dtSHR$SpreadsheetIcon, VideoIcon as $dtSHR$VideoIcon, ArchiveIcon as $dtSHR$ArchiveIcon} from "@contentful/f36-icons";
+import $dtSHR$contentfulf36tokens from "@contentful/f36-tokens";
+
+
+
+
+
+
+
+
+
+
+function $6f9c5a7cc9575f3b$export$d4130e73e2e8f9dd() {
+    return {
+        root: /*#__PURE__*/ $dtSHR$css({
+            display: 'inline-block',
+            width: '39px',
+            height: '39px',
+            'g, path': {
+                fill: $dtSHR$contentfulf36tokens.gray600
+            }
+        })
+    };
+}
+
+
+function $294bba6cf7661148$export$de8d5274b07acfbd({ type: type = 'archive' , className: className , testId: testId = 'cf-ui-asset-icon' , ...otherProps }) {
+    const styles = $6f9c5a7cc9575f3b$export$d4130e73e2e8f9dd();
+    const props = {
+        ...otherProps,
+        testId: testId,
+        className: $dtSHR$cx(styles.root, className)
+    };
+    switch(type){
+        case 'audio':
+            return(/*#__PURE__*/ $dtSHR$react.createElement($dtSHR$AudioIcon, props));
+        case 'code':
+            return(/*#__PURE__*/ $dtSHR$react.createElement($dtSHR$CodeIllustrationIcon, props));
+        case 'image':
+            return(/*#__PURE__*/ $dtSHR$react.createElement($dtSHR$ImageIcon, props));
+        case 'markup':
+            return(/*#__PURE__*/ $dtSHR$react.createElement($dtSHR$MarkupIcon, props));
+        case 'pdf':
+            return(/*#__PURE__*/ $dtSHR$react.createElement($dtSHR$PdfIcon, props));
+        case 'plaintext':
+            return(/*#__PURE__*/ $dtSHR$react.createElement($dtSHR$PlaintextIcon, props));
+        case 'presentation':
+            return(/*#__PURE__*/ $dtSHR$react.createElement($dtSHR$PresentationIcon, props));
+        case 'richtext':
+            return(/*#__PURE__*/ $dtSHR$react.createElement($dtSHR$RichtextIcon, props));
+        case 'spreadsheet':
+            return(/*#__PURE__*/ $dtSHR$react.createElement($dtSHR$SpreadsheetIcon, props));
+        case 'video':
+            return(/*#__PURE__*/ $dtSHR$react.createElement($dtSHR$VideoIcon, props));
+        case 'archive':
+        default:
+            return(/*#__PURE__*/ $dtSHR$react.createElement($dtSHR$ArchiveIcon, props));
+    }
+}
+
+
+
+
+function $dc8375c31ef26a6b$export$fa02bd03531e2fe() {
+    return {
+        relative: /*#__PURE__*/ $dtSHR$css({
+            name: "1jke4yk",
+            styles: "position:relative;width:100%;"
+        }),
+        height100: /*#__PURE__*/ $dtSHR$css({
+            name: "10klw3m",
+            styles: "height:100%;"
+        }),
+        image: /*#__PURE__*/ $dtSHR$css({
+            name: "1o9ustp",
+            styles: "width:auto;height:100%;max-width:100%;max-height:100%;object-fit:contain;"
+        }),
+        titleContainer: /*#__PURE__*/ $dtSHR$css({
+            opacity: 0,
+            transition: `opacity ${$dtSHR$contentfulf36tokens.transitionDurationDefault} ${$dtSHR$contentfulf36tokens.transitionEasingDefault}`,
+            position: 'absolute',
+            bottom: 0,
+            right: 0,
+            left: 0,
+            height: '100%',
+            display: 'flex',
+            overflow: 'hidden',
+            alignItems: 'flex-end',
+            boxSizing: 'border-box',
+            background: `linear-gradient(0deg, ${$dtSHR$contentfulf36tokens.gray900} 0%, transparent calc(1rem * (100 / ${$dtSHR$contentfulf36tokens.fontBaseDefault})), transparent 100% )`,
+            ':hover': {
+                opacity: 1
+            }
+        }),
+        title: /*#__PURE__*/ $dtSHR$css({
+            name: "4gk4ib",
+            styles: "bottom:0;left:0;right:0;position:absolute;"
+        })
+    };
+}
+
+
+function $4a170a6eb7674988$export$c413dd039085b182({ className: className , src: src , status: status , testId: testId = 'cf-ui-asset' , title: title , type: type = 'image' , ...otherProps }) {
+    const styles = $dc8375c31ef26a6b$export$fa02bd03531e2fe();
+    const isImage = src && src !== '' && type === 'image'; // Do not show image previews when publish status is archived
+    const showPreview = isImage && status !== 'archived';
+    return(/*#__PURE__*/ $dtSHR$react.createElement($dtSHR$Box, {
+        className: $dtSHR$cx(styles.relative, className),
+        testId: testId,
+        ...otherProps
+    }, showPreview ? /*#__PURE__*/ $dtSHR$react.createElement($dtSHR$react.Fragment, null, /*#__PURE__*/ $dtSHR$react.createElement($dtSHR$Flex, {
+        alignItems: "center",
+        justifyContent: "center",
+        className: styles.height100
+    }, /*#__PURE__*/ $dtSHR$react.createElement("img", {
+        className: styles.image,
+        src: src,
+        alt: title
+    })), title && /*#__PURE__*/ $dtSHR$react.createElement("div", {
+        className: styles.titleContainer
+    }, /*#__PURE__*/ $dtSHR$react.createElement($dtSHR$Text, {
+        className: styles.title,
+        fontColor: "colorWhite",
+        margin: "spacingS",
+        isTruncated: true
+    }, title))) : /*#__PURE__*/ $dtSHR$react.createElement($dtSHR$Flex, {
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        paddingLeft: "spacingS",
+        paddingRight: "spacingS",
+        className: styles.height100
+    }, /*#__PURE__*/ $dtSHR$react.createElement($dtSHR$Flex, {
+        marginBottom: "spacingM",
+        marginTop: "spacingM",
+        justifyContent: "center"
+    }, /*#__PURE__*/ $dtSHR$react.createElement($294bba6cf7661148$export$de8d5274b07acfbd, {
+        type: type
+    })), /*#__PURE__*/ $dtSHR$react.createElement($dtSHR$Text, {
+        isTruncated: true,
+        marginBottom: "spacingM",
+        fontColor: "gray600"
+    }, title))));
+}
+
+
+
+const $c14cae86e9d474fd$export$b14ad400b1d09e0f = {
+    archive: 'archive',
+    audio: 'audio',
+    code: 'code',
+    image: 'image',
+    markup: 'markup',
+    pdf: 'pdf',
+    plaintext: 'plaintext',
+    presentation: 'presentation',
+    richtext: 'richtext',
+    spreadsheet: 'spreadsheet',
+    video: 'video'
+};
+function $c14cae86e9d474fd$export$3ccaa71e0816392d(type) {
+    return Object.keys($c14cae86e9d474fd$export$b14ad400b1d09e0f).includes(type);
+}
+
+
+
+
+export {$4a170a6eb7674988$export$c413dd039085b182 as Asset, $294bba6cf7661148$export$de8d5274b07acfbd as AssetIcon, $c14cae86e9d474fd$export$3ccaa71e0816392d as isAssetType};
+//# sourceMappingURL=module.js.map

package/dist/module.js.map

@@ -0,0 +1 @@
+{"mappings":"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","sources":["packages/components/asset/src/index.ts","packages/components/asset/src/Asset.tsx","packages/components/asset/src/AssetIcon/AssetIcon.tsx","packages/components/asset/src/AssetIcon/AssetIcon.styles.ts","packages/components/asset/src/Asset.styles.ts","packages/components/asset/src/types.ts"],"sourcesContent":["export { Asset } from './Asset';\nexport type { AssetProps, AssetStatus } from './Asset';\nexport { AssetIcon } from './AssetIcon/AssetIcon';\nexport type { AssetIconProps } from './AssetIcon/AssetIcon';\nexport type { AssetType } from './types';\nexport { isAssetType } from './types';\n","import React from 'react';\nimport { cx } from 'emotion';\nimport type {\n  EntityStatus,\n  PickUnion,\n  CommonProps,\n} from '@contentful/f36-core';\nimport { Box, Flex } from '@contentful/f36-core';\nimport { Text } from '@contentful/f36-typography';\n\nimport { AssetIcon } from './AssetIcon/AssetIcon';\nimport { getAssetStyles } from './Asset.styles';\nimport type { AssetType } from './types';\n\nexport type AssetStatus = PickUnion<\n  EntityStatus,\n  'archived' | 'changed' | 'deleted' | 'draft' | 'published'\n>;\n\nexport interface AssetProps extends CommonProps {\n  /**\n   * A `src` attribute to use for image assets\n   */\n  src?: string;\n  /**\n   * The publish status of the asset\n   */\n  status?: AssetStatus;\n  /**\n   * The title of the asset\n   */\n  title?: string;\n  /**\n   * The type of asset being represented\n   */\n  type?: AssetType;\n}\n\nexport function Asset({\n  className,\n  src,\n  status,\n  testId = 'cf-ui-asset',\n  title,\n  type = 'image',\n  ...otherProps\n}: AssetProps) {\n  const styles = getAssetStyles();\n  const isImage = src && src !== '' && type === 'image';\n\n  // Do not show image previews when publish status is archived\n  const showPreview = isImage && status !== 'archived';\n\n  return (\n    <Box\n      className={cx(styles.relative, className)}\n      testId={testId}\n      {...otherProps}\n    >\n      {showPreview ? (\n        <>\n          <Flex\n            alignItems=\"center\"\n            justifyContent=\"center\"\n            className={styles.height100}\n          >\n            <img className={styles.image} src={src} alt={title} />\n          </Flex>\n          {title && (\n            <div className={styles.titleContainer}>\n              <Text\n                className={styles.title}\n                fontColor=\"colorWhite\"\n                margin=\"spacingS\"\n                isTruncated\n              >\n                {title}\n              </Text>\n            </div>\n          )}\n        </>\n      ) : (\n        <Flex\n          flexDirection=\"column\"\n          alignItems=\"center\"\n          justifyContent=\"center\"\n          paddingLeft=\"spacingS\"\n          paddingRight=\"spacingS\"\n          className={styles.height100}\n        >\n          <Flex\n            marginBottom=\"spacingM\"\n            marginTop=\"spacingM\"\n            justifyContent=\"center\"\n          >\n            <AssetIcon type={type} />\n          </Flex>\n          <Text isTruncated marginBottom=\"spacingM\" fontColor=\"gray600\">\n            {title}\n          </Text>\n        </Flex>\n      )}\n    </Box>\n  );\n}\n","import React from 'react';\nimport {\n  ArchiveIcon,\n  AudioIcon,\n  CodeIllustrationIcon,\n  ImageIcon,\n  MarkupIcon,\n  PdfIcon,\n  PlaintextIcon,\n  RichtextIcon,\n  PresentationIcon,\n  SpreadsheetIcon,\n  VideoIcon,\n} from '@contentful/f36-icons';\nimport type { GeneratedIconProps } from '@contentful/f36-icon';\nimport type { AssetType } from '../types';\n\nimport { cx } from 'emotion';\nimport { getAssetIconStyles } from './AssetIcon.styles';\n\nexport interface AssetIconProps\n  extends Omit<GeneratedIconProps, 'illustration' | 'ref'> {\n  type?: AssetType;\n}\n\n/**\n * Renders only the Illustration that would represent this asset's type\n */\nexport function AssetIcon({\n  type = 'archive',\n  className,\n  testId = 'cf-ui-asset-icon',\n  ...otherProps\n}: AssetIconProps) {\n  const styles = getAssetIconStyles();\n  const props = {\n    ...otherProps,\n    testId,\n    className: cx(styles.root, className),\n  };\n\n  switch (type) {\n    case 'audio':\n      return <AudioIcon {...props} />;\n    case 'code':\n      return <CodeIllustrationIcon {...props} />;\n    case 'image':\n      return <ImageIcon {...props} />;\n    case 'markup':\n      return <MarkupIcon {...props} />;\n    case 'pdf':\n      return <PdfIcon {...props} />;\n    case 'plaintext':\n      return <PlaintextIcon {...props} />;\n    case 'presentation':\n      return <PresentationIcon {...props} />;\n    case 'richtext':\n      return <RichtextIcon {...props} />;\n    case 'spreadsheet':\n      return <SpreadsheetIcon {...props} />;\n    case 'video':\n      return <VideoIcon {...props} />;\n    case 'archive':\n    default:\n      return <ArchiveIcon {...props} />;\n  }\n}\n","import tokens from '@contentful/f36-tokens';\nimport { css } from 'emotion';\n\nexport function getAssetIconStyles() {\n  return {\n    root: css({\n      display: 'inline-block',\n      width: '39px',\n      height: '39px',\n      'g, path': {\n        fill: tokens.gray600,\n      },\n    }),\n  };\n}\n","import tokens from '@contentful/f36-tokens';\nimport { css } from 'emotion';\n\nexport function getAssetStyles() {\n  return {\n    relative: css({\n      position: 'relative',\n      width: '100%',\n    }),\n    height100: css({\n      height: '100%',\n    }),\n    image: css({\n      width: 'auto',\n      height: '100%',\n      maxWidth: '100%',\n      maxHeight: '100%',\n      objectFit: 'contain',\n    }),\n    titleContainer: css({\n      opacity: 0,\n      transition: `opacity ${tokens.transitionDurationDefault} ${tokens.transitionEasingDefault}`,\n      position: 'absolute',\n      bottom: 0,\n      right: 0,\n      left: 0,\n      height: '100%',\n      display: 'flex',\n      overflow: 'hidden',\n      alignItems: 'flex-end',\n      boxSizing: 'border-box',\n      background: `linear-gradient(0deg, ${tokens.gray900} 0%, transparent calc(1rem * (100 / ${tokens.fontBaseDefault})), transparent 100% )`,\n      ':hover': { opacity: 1 },\n    }),\n    title: css({\n      bottom: 0,\n      left: 0,\n      right: 0,\n      position: 'absolute',\n    }),\n  };\n}\n","export const types = {\n  archive: 'archive',\n  audio: 'audio',\n  code: 'code',\n  image: 'image',\n  markup: 'markup',\n  pdf: 'pdf',\n  plaintext: 'plaintext',\n  presentation: 'presentation',\n  richtext: 'richtext',\n  spreadsheet: 'spreadsheet',\n  video: 'video',\n};\n\nexport function isAssetType(type: string): type is AssetType {\n  return Object.keys(types).includes(type);\n}\n\nexport type AssetType = keyof typeof types;\n"],"names":["Asset","AssetProps","AssetStatus","AssetIcon","AssetIconProps","AssetType","isAssetType","React","EntityStatus","PickUnion","CommonProps","Box","Flex","Text","getAssetStyles","src","status","title","type","className","testId","otherProps","styles","isImage","showPreview","relative","height100","image","titleContainer","ArchiveIcon","AudioIcon","CodeIllustrationIcon","ImageIcon","MarkupIcon","PdfIcon","PlaintextIcon","RichtextIcon","PresentationIcon","SpreadsheetIcon","VideoIcon","GeneratedIconProps","getAssetIconStyles","Omit","props","root","tokens","display","width","height","fill","gray600","opacity","transition","transitionDurationDefault","transitionEasingDefault","position","bottom","right","left","overflow","alignItems","boxSizing","background","gray900","fontBaseDefault","types","archive","audio","code","markup","pdf","plaintext","presentation","richtext","spreadsheet","video","Object","keys","includes"],"version":3,"file":"module.js.map"}

package/dist/types.d.ts

@@ -0,0 +1,46 @@
+import { GeneratedIconProps } from "@contentful/f36-icon";
+import { EntityStatus, PickUnion, CommonProps } from "@contentful/f36-core";
+declare const types: {
+    archive: string;
+    audio: string;
+    code: string;
+    image: string;
+    markup: string;
+    pdf: string;
+    plaintext: string;
+    presentation: string;
+    richtext: string;
+    spreadsheet: string;
+    video: string;
+};
+export function isAssetType(type: string): type is AssetType;
+export type AssetType = keyof typeof types;
+export interface AssetIconProps extends Omit<GeneratedIconProps, 'illustration' | 'ref'> {
+    type?: AssetType;
+}
+/**
+ * Renders only the Illustration that would represent this asset's type
+ */
+export function AssetIcon({ type, className, testId, ...otherProps }: AssetIconProps): JSX.Element;
+export type AssetStatus = PickUnion<EntityStatus, 'archived' | 'changed' | 'deleted' | 'draft' | 'published'>;
+export interface AssetProps extends CommonProps {
+    /**
+     * A `src` attribute to use for image assets
+     */
+    src?: string;
+    /**
+     * The publish status of the asset
+     */
+    status?: AssetStatus;
+    /**
+     * The title of the asset
+     */
+    title?: string;
+    /**
+     * The type of asset being represented
+     */
+    type?: AssetType;
+}
+export function Asset({ className, src, status, testId, title, type, ...otherProps }: AssetProps): JSX.Element;
+
+//# sourceMappingURL=types.d.ts.map

package/dist/types.d.ts.map

@@ -0,0 +1 @@
+{"mappings":";;AAAA,QAAO,MAAM;;;;;;;;;;;;CAYZ,CAAC;AAEF,4BAA4B,IAAI,EAAE,MAAM,GAAG,IAAI,IAAI,SAAS,CAE3D;AAED,wBAAwB,MAAM,YAAY,CAAC;AEE3C,+BACE,SAAQ,IAAI,CAAC,kBAAkB,EAAE,cAAc,GAAG,KAAK,CAAC;IACxD,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB;AAED;;GAEG;AACH,0BAA0B,EACxB,IAAgB,EAChB,SAAS,EACT,MAA2B,EAC3B,GAAG,UAAU,EACd,EAAE,cAAc,eAiChB;AEpDD,0BAA0B,UACxB,YAAY,EACZ,UAAU,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,WAAW,CAC3D,CAAC;AAEF,2BAA4B,SAAQ,WAAW;IAC7C;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB;AAED,sBAAsB,EACpB,SAAS,EACT,GAAG,EACH,MAAM,EACN,MAAsB,EACtB,KAAK,EACL,IAAc,EACd,GAAG,UAAU,EACd,EAAE,UAAU,eA0DZ","sources":["packages/components/asset/src/src/types.ts","packages/components/asset/src/src/AssetIcon/AssetIcon.styles.ts","packages/components/asset/src/src/AssetIcon/AssetIcon.tsx","packages/components/asset/src/src/Asset.styles.ts","packages/components/asset/src/src/Asset.tsx","packages/components/asset/src/src/index.ts","packages/components/asset/src/index.ts"],"sourcesContent":[null,null,null,null,null,null,"export { Asset } from './Asset';\nexport type { AssetProps, AssetStatus } from './Asset';\nexport { AssetIcon } from './AssetIcon/AssetIcon';\nexport type { AssetIconProps } from './AssetIcon/AssetIcon';\nexport type { AssetType } from './types';\nexport { isAssetType } from './types';\n"],"names":[],"version":3,"file":"types.d.ts.map"}

package/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "@contentful/f36-asset",
+  "version": "4.0.0",
+  "description": "Forma 36: Asset component",
+  "scripts": {
+    "build": "parcel build"
+  },
+  "dependencies": {
+    "@babel/runtime": "^7.6.2",
+    "@contentful/f36-core": "^4.0.0",
+    "@contentful/f36-icon": "^4.0.0",
+    "@contentful/f36-icons": "^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"
+}