@atlaskit/smart-card 17.4.2 → 17.5.1

package/dist/esm/view/FlexibleCard/components/elements/index.js

@@ -11,6 +11,7 @@ export var CreatedOn = createElement(ElementName.CreatedOn);
 export var LinkIcon = createElement(ElementName.LinkIcon);
 export var ModifiedBy = createElement(ElementName.ModifiedBy);
 export var ModifiedOn = createElement(ElementName.ModifiedOn);
+export var Preview = createElement(ElementName.Preview);
 export var Priority = createElement(ElementName.Priority);
 export var ProgrammingLanguage = createElement(ElementName.ProgrammingLanguage);
 export var Snippet = createElement(ElementName.Snippet);

package/dist/esm/view/FlexibleCard/components/elements/media/index.js

@@ -0,0 +1,34 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+
+var _templateObject;
+
+/** @jsx jsx */
+import React from 'react';
+import { css, jsx } from '@emotion/core';
+import ImageIcon from '../../common/image-icon';
+
+var styles = function styles(url) {
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: center;\n  width: 100%;\n  > img {\n    max-width: 100%;\n    max-height: 100%;\n  }\n"])));
+};
+
+var Media = function Media(_ref) {
+  var _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'smart-element-media' : _ref$testId,
+      type = _ref.type,
+      url = _ref.url;
+
+  if (!type || !url) {
+    return null;
+  }
+
+  return jsx("div", {
+    css: styles(url),
+    "data-smart-element-media": true,
+    "data-testid": testId
+  }, jsx(ImageIcon, {
+    testId: "".concat(testId, "-image"),
+    url: url
+  }));
+};
+
+export default Media;

package/dist/esm/view/FlexibleCard/components/elements/media/types.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/view/FlexibleCard/components/elements/utils.js

@@ -11,6 +11,7 @@ import Lozenge from './lozenge';
 import { FlexibleUiContext } from '../../../../state/flexible-ui-context';
 import Badge from './badge';
 import AvatarGroup from './avatar-group';
+import Media from './media';
 import Text from './text';
 import { messages } from '../../../../messages';
 import DateTime from './date-time';
@@ -31,6 +32,8 @@ var elementMappings = (_elementMappings = {}, _defineProperty(_elementMappings,
   component: Icon
 }), _defineProperty(_elementMappings, ElementName.ModifiedBy, {
   component: Text
+}), _defineProperty(_elementMappings, ElementName.Preview, {
+  component: Media
 }), _defineProperty(_elementMappings, ElementName.Priority, {
   component: Badge
 }), _defineProperty(_elementMappings, ElementName.ProgrammingLanguage, {

package/dist/types/constants.d.ts

@@ -88,6 +88,7 @@ export declare enum ElementName {
     LinkIcon = "LinkIcon",
     ModifiedBy = "ModifiedBy",
     ModifiedOn = "ModifiedOn",
+    Preview = "Preview",
     Priority = "Priority",
     ProgrammingLanguage = "ProgrammingLanguage",
     Snippet = "Snippet",
@@ -164,3 +165,9 @@ export declare enum IconType {
     ProgrammingLanguage = "Badge:ProgrammingLanguage",
     Subscriber = "Badge:Subscriber"
 }
+/**
+ * Type for Flexible UI's Media element
+ */
+export declare enum MediaType {
+    Image = "image"
+}

package/dist/types/extractors/flexible/extract-preview.d.ts

@@ -0,0 +1,4 @@
+import { JsonLd } from 'json-ld-types';
+import { Media } from '../../state/flexible-ui-context/types';
+declare const extractPreview: (data: JsonLd.Data.BaseData) => Media | undefined;
+export default extractPreview;

package/dist/types/state/flexible-ui-context/types.d.ts

@@ -1,6 +1,6 @@
 import { LinkLozenge } from '../../extractors/common/lozenge/types';
 import { LinkPerson } from '../../extractors/common/person/types';
-import { IconType } from '../../constants';
+import { IconType, MediaType } from '../../constants';
 export declare type FlexibleUiDataContext = {
     authorGroup?: LinkPerson[];
     collaboratorGroup?: LinkPerson[];
@@ -10,6 +10,7 @@ export declare type FlexibleUiDataContext = {
     linkIcon?: Icon;
     modifiedBy?: string;
     modifiedOn?: string;
+    preview?: Media;
     priority?: Icon;
     programmingLanguage?: string;
     snippet?: string;
@@ -24,3 +25,7 @@ export declare type Icon = {
     label?: string;
     url?: string;
 };
+export declare type Media = {
+    type: MediaType;
+    url: string;
+};

package/dist/types/utils/token.d.ts

@@ -1,16 +1,15 @@
-export declare const safeToken: (path: string, fallback?: string | undefined) => any;
 export declare const tokens: {
-    actionIcon: any;
-    background: any;
-    badgeIcon: any;
-    badgeText: any;
-    blackLink: any;
-    blackLinkPressed: any;
-    blueLink: any;
-    blueLinkPressed: any;
-    elevation: any;
-    errorMessage: any;
-    errorMessageHover: any;
-    snippet: any;
-    text: any;
+    actionIcon: "var(--ds-icon)";
+    background: "var(--ds-surface)";
+    badgeIcon: "var(--ds-icon-subtle)";
+    badgeText: "var(--ds-text-subtlest)";
+    blackLink: "var(--ds-text-subtle)";
+    blackLinkPressed: "var(--ds-text)";
+    blueLink: "var(--ds-link)";
+    blueLinkPressed: "var(--ds-link-pressed)";
+    elevation: "var(--ds-shadow-raised)";
+    errorMessage: "var(--ds-text-disabled)";
+    errorMessageHover: "var(--ds-text-subtle)";
+    snippet: "var(--ds-text)";
+    text: "var(--ds-text-subtlest)";
 };

package/dist/types/view/FlexibleCard/components/blocks/action-group/types.d.ts

@@ -1,8 +1,10 @@
 import { SmartLinkSize, SmartLinkDirection } from '../../../../../constants';
 import { ActionItem } from '../types';
+import { Appearance } from '@atlaskit/button';
 export declare type ActionGroupProps = {
     items: ActionItem[];
     size?: SmartLinkSize;
     direction?: SmartLinkDirection;
     testId?: string;
+    appearance?: Appearance;
 };

package/dist/types/view/FlexibleCard/components/blocks/footer-block/index.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { FooterBlockProps } from './types';
+declare const FooterBlock: React.FC<FooterBlockProps>;
+export default FooterBlock;

package/dist/types/view/FlexibleCard/components/blocks/footer-block/types.d.ts

@@ -0,0 +1,4 @@
+import { ActionItem, BlockProps } from '../types';
+export declare type FooterBlockProps = BlockProps & {
+    actions?: ActionItem[];
+};

package/dist/types/view/FlexibleCard/components/blocks/index.d.ts

@@ -1,3 +1,4 @@
+export { default as FooterBlock } from './footer-block';
 export { default as MetadataBlock } from './metadata-block';
 export { default as SnippetBlock } from './snippet-block';
 export { default as TitleBlock } from './title-block';

package/dist/types/view/FlexibleCard/components/blocks/types.d.ts

@@ -13,5 +13,7 @@ export declare type ElementItem = {
 export declare type ActionItem = {
     name: ActionName;
     testId?: string;
+    hideContent?: boolean;
+    hideIcon?: boolean;
     onClick: () => any;
 };

package/dist/types/view/FlexibleCard/components/blocks/utils.d.ts

@@ -8,4 +8,4 @@ export declare const getGapSize: (size: SmartLinkSize) => number;
 export declare const getBaseStyles: (direction: SmartLinkDirection, size: SmartLinkSize) => SerializedStyles;
 export declare const renderChildren: (children: React.ReactNode, size: SmartLinkSize) => React.ReactNode;
 export declare const renderElementItems: (items?: ElementItem[], display?: ElementDisplaySchemaType) => React.ReactNode | undefined;
-export declare const renderActionItems: (items?: ActionItem[], size?: SmartLinkSize) => React.ReactNode | undefined;
+export declare const renderActionItems: (items?: ActionItem[], size?: SmartLinkSize, appearance?: "link" | "default" | "danger" | "primary" | "subtle" | "subtle-link" | "warning" | undefined) => React.ReactNode | undefined;

package/dist/types/view/FlexibleCard/components/elements/index.d.ts

@@ -6,6 +6,7 @@ import { LozengeProps } from './lozenge/types';
 import { AvatarGroupProps } from './avatar-group/types';
 import { TextProps } from './text/types';
 import { DateTimeProps } from './date-time/types';
+import { MediaProps } from './media/types';
 export declare const AuthorGroup: import("react").FC<AvatarGroupProps>;
 export declare const CollaboratorGroup: import("react").FC<AvatarGroupProps>;
 export declare const CommentCount: import("react").FC<BadgeProps>;
@@ -14,6 +15,7 @@ export declare const CreatedOn: import("react").FC<DateTimeProps>;
 export declare const LinkIcon: import("react").FC<IconProps>;
 export declare const ModifiedBy: import("react").FC<TextProps>;
 export declare const ModifiedOn: import("react").FC<DateTimeProps>;
+export declare const Preview: import("react").FC<MediaProps>;
 export declare const Priority: import("react").FC<BadgeProps>;
 export declare const ProgrammingLanguage: import("react").FC<BadgeProps>;
 export declare const Snippet: import("react").FC<TextProps>;

package/dist/types/view/FlexibleCard/components/elements/media/index.d.ts

@@ -0,0 +1,5 @@
+/** @jsx jsx */
+import React from 'react';
+import { MediaProps } from './types';
+declare const Media: React.FC<MediaProps>;
+export default Media;

package/dist/types/view/FlexibleCard/components/elements/media/types.d.ts

@@ -0,0 +1,6 @@
+import { ElementProps } from '../types';
+import { MediaType } from '../../../../../constants';
+export declare type MediaProps = ElementProps & {
+    type?: MediaType;
+    url?: string;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/smart-card",
-  "version": "17.4.2",
+  "version": "17.5.1",
   "description": "Smart card component",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"