@atlaskit/smart-card 17.7.8 → 17.7.11

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/smart-card
 
+## 17.7.11
+
+### Patch Changes
+
+- [`ca8c8db1440`](https://bitbucket.org/atlassian/atlassian-frontend/commits/ca8c8db1440) - Flexible UI: Add separator between text/date-time elements
+
+## 17.7.10
+
+### Patch Changes
+
+- [`e04b58c623e`](https://bitbucket.org/atlassian/atlassian-frontend/commits/e04b58c623e) - Add EditAction
+
+## 17.7.9
+
+### Patch Changes
+
+- [`63d4f963f72`](https://bitbucket.org/atlassian/atlassian-frontend/commits/63d4f963f72) - Flexible UI: Set PreviewBlock image aspect ratio to 16:9
+
 ## 17.7.8
 
 ### Patch Changes

package/dist/cjs/constants.js

@@ -156,6 +156,7 @@ exports.ActionName = ActionName;
 
 (function (ActionName) {
   ActionName["DeleteAction"] = "DeleteAction";
+  ActionName["EditAction"] = "EditAction";
   ActionName["CustomAction"] = "CustomAction";
 })(ActionName || (exports.ActionName = ActionName = {}));
 

package/dist/cjs/messages.js

@@ -43,6 +43,11 @@ var messages = (0, _reactIntlNext.defineMessages)({
     defaultMessage: 'Delete',
     description: 'Allow a user to delete a link'
   },
+  edit: {
+    id: 'fabric.linking.edit',
+    defaultMessage: 'Edit',
+    description: 'Allow a user to edit a link'
+  },
   modified_by: {
     id: 'fabric.linking.updated_by',
     defaultMessage: 'Modified by {context}',

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/smart-card",
-	"version": "17.7.8",
+	"version": "17.7.11",
 	"sideEffects": false
 }

package/dist/cjs/view/FlexibleCard/components/actions/index.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.DeleteAction = exports.CustomAction = void 0;
+exports.EditAction = exports.DeleteAction = exports.CustomAction = void 0;
 
 var _constants = require("../../../../constants");
 
@@ -16,5 +16,7 @@ var _utils = require("./utils");
 // DataActions infer that the action depends on the data from the context.
 var DeleteAction = (0, _utils.createUIAction)(_constants.ActionName.DeleteAction);
 exports.DeleteAction = DeleteAction;
+var EditAction = (0, _utils.createUIAction)(_constants.ActionName.EditAction);
+exports.EditAction = EditAction;
 var CustomAction = (0, _utils.createUIAction)(_constants.ActionName.CustomAction);
 exports.CustomAction = CustomAction;

package/dist/cjs/view/FlexibleCard/components/actions/utils.js

@@ -27,6 +27,8 @@ var _messages = require("../../../../messages");
 
 var _cross = _interopRequireDefault(require("@atlaskit/icon/glyph/cross"));
 
+var _edit = _interopRequireDefault(require("@atlaskit/icon/glyph/edit"));
+
 var _actionMappings;
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -50,6 +52,16 @@ var actionMappings = (_actionMappings = {}, (0, _defineProperty2.default)(_actio
     }),
     toolTipMessage: /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _messages.messages.delete)
   }
+}), (0, _defineProperty2.default)(_actionMappings, _constants.ActionName.EditAction, {
+  component: _action.default,
+  props: {
+    testId: 'smart-action-edit-action',
+    content: /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _messages.messages.edit),
+    icon: /*#__PURE__*/_react.default.createElement(_edit.default, {
+      label: "Edit"
+    }),
+    toolTipMessage: /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _messages.messages.edit)
+  }
 }), _actionMappings);
 
 var getContextKey = function getContextKey(name) {

package/dist/cjs/view/FlexibleCard/components/blocks/block/index.js

@@ -20,7 +20,7 @@ var _utils = require("../utils");
 var _templateObject;
 
 var getBlockStyles = function getBlockStyles(direction, size) {
-  return (0, _core.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  justify-content: flex-start;\n"])), (0, _utils.getBaseStyles)(direction, size));
+  return (0, _core.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  justify-content: flex-start;\n  [data-separator] + [data-separator]:before {\n    content: '\u2022';\n    margin-right: ", "rem;\n  }\n"])), (0, _utils.getBaseStyles)(direction, size), (0, _utils.getGapSize)(size));
 };
 
 var Block = function Block(_ref) {

package/dist/cjs/view/FlexibleCard/components/elements/date-time/index.js

@@ -55,6 +55,7 @@ var DateTime = function DateTime(_ref) {
   });
   return (0, _core.jsx)("span", {
     css: styles,
+    "data-separator": true,
     "data-smart-element-date-time": true,
     "data-testid": testId
   }, (0, _core.jsx)(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, typeToDescriptorMap[type], {

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

@@ -17,9 +17,17 @@ var _imageIcon = _interopRequireDefault(require("../../common/image-icon"));
 
 var _templateObject;
 
-var styles = function styles(url) {
-  return (0, _core.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  justify-content: center;\n  width: 100%;\n  > img {\n    max-width: 100%;\n    max-height: 100%;\n  }\n"])));
-};
+/**
+ * Media: Image
+ * [aspect-ratio: 16 / 9] The context box is fixed to aspect ratio of 16:9.
+ * [object-fit: cover] The replaced content is sized to maintain
+ * its aspect ratio while filling the element's entire content box.
+ * If the object's aspect ratio does not match the aspect ratio of its box,
+ * then the object will be clipped to fit.
+ * [object-position] Center alignment of the selected replaced element's
+ * contents within the element's box.
+ */
+var styles = (0, _core.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  aspect-ratio: 16 / 9;\n  display: flex;\n  width: 100%;\n\n  // fallback\n  @supports not (aspect-ratio: auto) {\n    padding-top: 56.25%; // 16:9 ratio (9 / 16 = 0.5625)\n    height: 0;\n    position: relative;\n    overflow: hidden;\n  }\n\n  > img {\n    min-height: 100%;\n    min-width: 100%;\n    max-height: 100%;\n    max-width: 100%;\n    object-fit: cover;\n    object-position: center center;\n\n    // fallback\n    @supports not (aspect-ratio: auto) {\n      position: absolute;\n      transform: translate(-50%, -50%);\n      left: 50%;\n      top: 50%;\n      width: auto;\n      height: auto;\n    }\n  }\n"])));
 
 var Media = function Media(_ref) {
   var _ref$testId = _ref.testId,
@@ -32,7 +40,7 @@ var Media = function Media(_ref) {
   }
 
   return (0, _core.jsx)("div", {
-    css: styles(url),
+    css: styles,
     "data-smart-element-media": true,
     "data-testid": testId
   }, (0, _core.jsx)(_imageIcon.default, {

package/dist/cjs/view/FlexibleCard/components/elements/text/index.js

@@ -39,6 +39,7 @@ var Text = function Text(_ref) {
 
   return (0, _core.jsx)("span", {
     css: getStyles(maxLines, color),
+    "data-separator": true,
     "data-smart-element-text": true,
     "data-testid": testId
   }, (0, _utils.getFormattedMessage)(message) || content);

package/dist/es2019/constants.js

@@ -131,6 +131,7 @@ export let ActionName;
 
 (function (ActionName) {
   ActionName["DeleteAction"] = "DeleteAction";
+  ActionName["EditAction"] = "EditAction";
   ActionName["CustomAction"] = "CustomAction";
 })(ActionName || (ActionName = {}));
 

package/dist/es2019/messages.js

@@ -35,6 +35,11 @@ export const messages = defineMessages({
     defaultMessage: 'Delete',
     description: 'Allow a user to delete a link'
   },
+  edit: {
+    id: 'fabric.linking.edit',
+    defaultMessage: 'Edit',
+    description: 'Allow a user to edit a link'
+  },
   modified_by: {
     id: 'fabric.linking.updated_by',
     defaultMessage: 'Modified by {context}',

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/smart-card",
-	"version": "17.7.8",
+	"version": "17.7.11",
 	"sideEffects": false
 }

package/dist/es2019/view/FlexibleCard/components/actions/index.js

@@ -6,4 +6,5 @@ import { createUIAction } from './utils'; // Attention: Keep the export name and
 // DataActions infer that the action depends on the data from the context.
 
 export const DeleteAction = createUIAction(ActionName.DeleteAction);
+export const EditAction = createUIAction(ActionName.EditAction);
 export const CustomAction = createUIAction(ActionName.CustomAction);

package/dist/es2019/view/FlexibleCard/components/actions/utils.js

@@ -6,6 +6,7 @@ import Action from './action';
 import { FormattedMessage } from 'react-intl-next';
 import { messages } from '../../../../messages';
 import CrossIcon from '@atlaskit/icon/glyph/cross';
+import EditIcon from '@atlaskit/icon/glyph/edit';
 const actionMappings = {
   [ActionName.CustomAction]: {
     component: Action,
@@ -21,6 +22,17 @@ const actionMappings = {
       }),
       toolTipMessage: /*#__PURE__*/React.createElement(FormattedMessage, messages.delete)
     }
+  },
+  [ActionName.EditAction]: {
+    component: Action,
+    props: {
+      testId: 'smart-action-edit-action',
+      content: /*#__PURE__*/React.createElement(FormattedMessage, messages.edit),
+      icon: /*#__PURE__*/React.createElement(EditIcon, {
+        label: "Edit"
+      }),
+      toolTipMessage: /*#__PURE__*/React.createElement(FormattedMessage, messages.edit)
+    }
   }
 };
 

package/dist/es2019/view/FlexibleCard/components/blocks/block/index.js

@@ -2,11 +2,15 @@
 import React from 'react';
 import { css, jsx } from '@emotion/core';
 import { SmartLinkDirection, SmartLinkSize } from '../../../../../constants';
-import { getBaseStyles, renderChildren } from '../utils';
+import { getBaseStyles, getGapSize, renderChildren } from '../utils';
 
 const getBlockStyles = (direction, size) => css`
   ${getBaseStyles(direction, size)}
   justify-content: flex-start;
+  [data-separator] + [data-separator]:before {
+    content: '•';
+    margin-right: ${getGapSize(size)}rem;
+  }
 `;
 
 const Block = ({

package/dist/es2019/view/FlexibleCard/components/elements/date-time/index.js

@@ -41,6 +41,7 @@ const DateTime = ({
   });
   return jsx("span", {
     css: styles,
+    "data-separator": true,
     "data-smart-element-date-time": true,
     "data-testid": testId
   }, jsx(FormattedMessage, _extends({}, typeToDescriptorMap[type], {

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

@@ -3,13 +3,46 @@ import React from 'react';
 import { css, jsx } from '@emotion/core';
 import ImageIcon from '../../common/image-icon';
 
-const styles = url => css`
+/**
+ * Media: Image
+ * [aspect-ratio: 16 / 9] The context box is fixed to aspect ratio of 16:9.
+ * [object-fit: cover] The replaced content is sized to maintain
+ * its aspect ratio while filling the element's entire content box.
+ * If the object's aspect ratio does not match the aspect ratio of its box,
+ * then the object will be clipped to fit.
+ * [object-position] Center alignment of the selected replaced element's
+ * contents within the element's box.
+ */
+const styles = css`
+  aspect-ratio: 16 / 9;
   display: flex;
-  justify-content: center;
   width: 100%;
+
+  // fallback
+  @supports not (aspect-ratio: auto) {
+    padding-top: 56.25%; // 16:9 ratio (9 / 16 = 0.5625)
+    height: 0;
+    position: relative;
+    overflow: hidden;
+  }
+
   > img {
-    max-width: 100%;
+    min-height: 100%;
+    min-width: 100%;
     max-height: 100%;
+    max-width: 100%;
+    object-fit: cover;
+    object-position: center center;
+
+    // fallback
+    @supports not (aspect-ratio: auto) {
+      position: absolute;
+      transform: translate(-50%, -50%);
+      left: 50%;
+      top: 50%;
+      width: auto;
+      height: auto;
+    }
   }
 `;
 
@@ -23,7 +56,7 @@ const Media = ({
   }
 
   return jsx("div", {
-    css: styles(url),
+    css: styles,
     "data-smart-element-media": true,
     "data-testid": testId
   }, jsx(ImageIcon, {

package/dist/es2019/view/FlexibleCard/components/elements/text/index.js

@@ -24,6 +24,7 @@ const Text = ({
 
   return jsx("span", {
     css: getStyles(maxLines, color),
+    "data-separator": true,
     "data-smart-element-text": true,
     "data-testid": testId
   }, getFormattedMessage(message) || content);

package/dist/esm/constants.js

@@ -131,6 +131,7 @@ export var ActionName;
 
 (function (ActionName) {
   ActionName["DeleteAction"] = "DeleteAction";
+  ActionName["EditAction"] = "EditAction";
   ActionName["CustomAction"] = "CustomAction";
 })(ActionName || (ActionName = {}));
 

package/dist/esm/messages.js

@@ -35,6 +35,11 @@ export var messages = defineMessages({
     defaultMessage: 'Delete',
     description: 'Allow a user to delete a link'
   },
+  edit: {
+    id: 'fabric.linking.edit',
+    defaultMessage: 'Edit',
+    description: 'Allow a user to edit a link'
+  },
   modified_by: {
     id: 'fabric.linking.updated_by',
     defaultMessage: 'Modified by {context}',

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/smart-card",
-	"version": "17.7.8",
+	"version": "17.7.11",
 	"sideEffects": false
 }

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

@@ -6,4 +6,5 @@ import { createUIAction } from './utils'; // Attention: Keep the export name and
 // DataActions infer that the action depends on the data from the context.
 
 export var DeleteAction = createUIAction(ActionName.DeleteAction);
+export var EditAction = createUIAction(ActionName.EditAction);
 export var CustomAction = createUIAction(ActionName.CustomAction);

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

@@ -14,6 +14,7 @@ import Action from './action';
 import { FormattedMessage } from 'react-intl-next';
 import { messages } from '../../../../messages';
 import CrossIcon from '@atlaskit/icon/glyph/cross';
+import EditIcon from '@atlaskit/icon/glyph/edit';
 var actionMappings = (_actionMappings = {}, _defineProperty(_actionMappings, ActionName.CustomAction, {
   component: Action,
   props: {}
@@ -27,6 +28,16 @@ var actionMappings = (_actionMappings = {}, _defineProperty(_actionMappings, Act
     }),
     toolTipMessage: /*#__PURE__*/React.createElement(FormattedMessage, messages.delete)
   }
+}), _defineProperty(_actionMappings, ActionName.EditAction, {
+  component: Action,
+  props: {
+    testId: 'smart-action-edit-action',
+    content: /*#__PURE__*/React.createElement(FormattedMessage, messages.edit),
+    icon: /*#__PURE__*/React.createElement(EditIcon, {
+      label: "Edit"
+    }),
+    toolTipMessage: /*#__PURE__*/React.createElement(FormattedMessage, messages.edit)
+  }
 }), _actionMappings);
 
 var getContextKey = function getContextKey(name) {

package/dist/esm/view/FlexibleCard/components/blocks/block/index.js

@@ -6,10 +6,10 @@ var _templateObject;
 import React from 'react';
 import { css, jsx } from '@emotion/core';
 import { SmartLinkDirection, SmartLinkSize } from '../../../../../constants';
-import { getBaseStyles, renderChildren } from '../utils';
+import { getBaseStyles, getGapSize, renderChildren } from '../utils';
 
 var getBlockStyles = function getBlockStyles(direction, size) {
-  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", "\n  justify-content: flex-start;\n"])), getBaseStyles(direction, size));
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", "\n  justify-content: flex-start;\n  [data-separator] + [data-separator]:before {\n    content: '\u2022';\n    margin-right: ", "rem;\n  }\n"])), getBaseStyles(direction, size), getGapSize(size));
 };
 
 var Block = function Block(_ref) {

package/dist/esm/view/FlexibleCard/components/elements/date-time/index.js

@@ -39,6 +39,7 @@ var DateTime = function DateTime(_ref) {
   });
   return jsx("span", {
     css: styles,
+    "data-separator": true,
     "data-smart-element-date-time": true,
     "data-testid": testId
   }, jsx(FormattedMessage, _extends({}, typeToDescriptorMap[type], {

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

@@ -7,9 +7,17 @@ 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"])));
-};
+/**
+ * Media: Image
+ * [aspect-ratio: 16 / 9] The context box is fixed to aspect ratio of 16:9.
+ * [object-fit: cover] The replaced content is sized to maintain
+ * its aspect ratio while filling the element's entire content box.
+ * If the object's aspect ratio does not match the aspect ratio of its box,
+ * then the object will be clipped to fit.
+ * [object-position] Center alignment of the selected replaced element's
+ * contents within the element's box.
+ */
+var styles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  aspect-ratio: 16 / 9;\n  display: flex;\n  width: 100%;\n\n  // fallback\n  @supports not (aspect-ratio: auto) {\n    padding-top: 56.25%; // 16:9 ratio (9 / 16 = 0.5625)\n    height: 0;\n    position: relative;\n    overflow: hidden;\n  }\n\n  > img {\n    min-height: 100%;\n    min-width: 100%;\n    max-height: 100%;\n    max-width: 100%;\n    object-fit: cover;\n    object-position: center center;\n\n    // fallback\n    @supports not (aspect-ratio: auto) {\n      position: absolute;\n      transform: translate(-50%, -50%);\n      left: 50%;\n      top: 50%;\n      width: auto;\n      height: auto;\n    }\n  }\n"])));
 
 var Media = function Media(_ref) {
   var _ref$testId = _ref.testId,
@@ -22,7 +30,7 @@ var Media = function Media(_ref) {
   }
 
   return jsx("div", {
-    css: styles(url),
+    css: styles,
     "data-smart-element-media": true,
     "data-testid": testId
   }, jsx(ImageIcon, {

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

@@ -28,6 +28,7 @@ var Text = function Text(_ref) {
 
   return jsx("span", {
     css: getStyles(maxLines, color),
+    "data-separator": true,
     "data-smart-element-text": true,
     "data-testid": testId
   }, getFormattedMessage(message) || content);

package/dist/types/constants.d.ts

@@ -102,6 +102,7 @@ export declare enum ElementName {
  */
 export declare enum ActionName {
     DeleteAction = "DeleteAction",
+    EditAction = "EditAction",
     CustomAction = "CustomAction"
 }
 /**

package/dist/types/messages.d.ts

@@ -1,5 +1,5 @@
 import { MessageDescriptor } from 'react-intl-next';
-export declare type MessageKey = 'cannot_find_link' | 'click_to_join' | 'connect_link_account' | 'created_by' | 'created_on' | 'delete' | 'modified_by' | 'modified_on' | 'priority_blocker' | 'priority_critical' | 'priority_high' | 'priority_highest' | 'priority_low' | 'priority_lowest' | 'priority_major' | 'priority_medium' | 'priority_minor' | 'priority_trivial' | 'priority_undefined' | 'forbidden_access' | 'pending_request' | 'restricted_link' | 'request_access' | 'request_denied';
+export declare type MessageKey = 'cannot_find_link' | 'click_to_join' | 'connect_link_account' | 'created_by' | 'created_on' | 'delete' | 'edit' | 'modified_by' | 'modified_on' | 'priority_blocker' | 'priority_critical' | 'priority_high' | 'priority_highest' | 'priority_low' | 'priority_lowest' | 'priority_major' | 'priority_medium' | 'priority_minor' | 'priority_trivial' | 'priority_undefined' | 'forbidden_access' | 'pending_request' | 'restricted_link' | 'request_access' | 'request_denied';
 declare type Messages = {
     [K in MessageKey]: MessageDescriptor;
 };

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

@@ -1,4 +1,5 @@
 /// <reference types="react" />
 import { ActionProps } from './action/types';
 export declare const DeleteAction: import("react").FC<ActionProps>;
+export declare const EditAction: import("react").FC<ActionProps>;
 export declare const CustomAction: import("react").FC<ActionProps>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/smart-card",
-  "version": "17.7.8",
+  "version": "17.7.11",
   "description": "Smart card component",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -36,7 +36,7 @@
     "@atlaskit/logo": "^13.5.0",
     "@atlaskit/lozenge": "^11.1.0",
     "@atlaskit/media-common": "^2.11.0",
-    "@atlaskit/media-ui": "^20.0.0",
+    "@atlaskit/media-ui": "^20.1.0",
     "@atlaskit/modal-dialog": "^12.2.0",
     "@atlaskit/outbound-auth-flow-client": "^3.3.0",
     "@atlaskit/spinner": "^15.1.0",