@atlaskit/smart-card 17.2.1 → 17.3.0

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @atlaskit/smart-card
 
+## 17.3.0
+
+### Minor Changes
+
+- [`dab29fc6697`](https://bitbucket.org/atlassian/atlassian-frontend/commits/dab29fc6697) - [ux] Flexible UI: AvatarGroup sizing updated for small and medium size
+
+### Patch Changes
+
+- [`25408fac413`](https://bitbucket.org/atlassian/atlassian-frontend/commits/25408fac413) - Flexible UI: Add MetadataBlock example
+
 ## 17.2.1
 
 ### Patch Changes

package/dist/cjs/version.json

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

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

@@ -37,18 +37,32 @@ var getElementGroupStyles = function getElementGroupStyles(size, maxLines) {
   // MetadataBlock allows metadata elements to be displayed in
   // multiple lines, with maximum of 2 lines.
   // a) We need the height of the line to be equal on both left and right
-  //    sides so they line up nicely. 1.75 is the The maximum height of
-  //    all elements in specific size. This height belongs to AvatarGroup.
+  //    sides so they line up nicely.
   // b) There is no way to truncate non-text elements nicely. Here
   //    it's fix max height of the element group so that anything that is
   //    overflown will not be visible.
-  var lineHeight = 1.75;
+  var lineHeight = getLineHeight(size);
   var gap = (0, _utils.getGapSize)(size);
   var gapHeight = gap * (maxLines - 1);
   var height = lineHeight * maxLines + gapHeight;
   return (0, _core.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    flex-wrap: wrap;\n    line-height: ", "rem;\n    max-height: ", "rem;\n    > span,\n    > div {\n      min-height: ", "rem;\n      max-height: ", "rem;\n      line-height: ", "rem;\n    }\n  "])), lineHeight, height, lineHeight, lineHeight, lineHeight);
 };
 
+var getLineHeight = function getLineHeight(size) {
+  // The maximum height of all elements in specific size.
+  // These heights belongs to AvatarGroup.
+  switch (size) {
+    case _constants.SmartLinkSize.XLarge:
+    case _constants.SmartLinkSize.Large:
+      return 1.75;
+
+    case _constants.SmartLinkSize.Medium:
+    case _constants.SmartLinkSize.Small:
+    default:
+      return 1.5;
+  }
+};
+
 var getMaxLines = function getMaxLines(maxLines) {
   if (maxLines > MAXIMUM_MAX_LINES) {
     return DEFAULT_MAX_LINES;

package/dist/cjs/view/FlexibleCard/components/elements/avatar-group/index.js

@@ -7,14 +7,34 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
 var _react = _interopRequireDefault(require("react"));
 
+var _core = require("@emotion/core");
+
 var _avatarGroup = _interopRequireDefault(require("@atlaskit/avatar-group"));
 
 var _constants = require("../../../../../constants");
 
+var _templateObject;
+
 var MAX_COUNT = 4;
 
+var getStyles = function getStyles(size) {
+  switch (size) {
+    case _constants.SmartLinkSize.XLarge:
+    case _constants.SmartLinkSize.Large:
+      // Default AK small size
+      return;
+
+    case _constants.SmartLinkSize.Medium:
+    case _constants.SmartLinkSize.Small:
+    default:
+      return (0, _core.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n        li {\n          span,\n          svg {\n            max-height: 1.25rem;\n            max-width: 1.25rem;\n          }\n        }\n      "])));
+  }
+};
+
 var AvatarGroup = function AvatarGroup(_ref) {
   var _ref$items = _ref.items,
       items = _ref$items === void 0 ? [] : _ref$items,
@@ -29,13 +49,15 @@ var AvatarGroup = function AvatarGroup(_ref) {
     return null;
   }
 
-  return /*#__PURE__*/_react.default.createElement(_avatarGroup.default, {
+  return (0, _core.jsx)("span", {
+    css: getStyles(size)
+  }, (0, _core.jsx)(_avatarGroup.default, {
     maxCount: maxCount,
     appearance: "stack",
     size: "small",
     data: items,
     testId: testId
-  });
+  }));
 };
 
 var _default = AvatarGroup;

package/dist/es2019/version.json

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

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

@@ -13,12 +13,11 @@ const getElementGroupStyles = (size, maxLines) => {
   // MetadataBlock allows metadata elements to be displayed in
   // multiple lines, with maximum of 2 lines.
   // a) We need the height of the line to be equal on both left and right
-  //    sides so they line up nicely. 1.75 is the The maximum height of
-  //    all elements in specific size. This height belongs to AvatarGroup.
+  //    sides so they line up nicely.
   // b) There is no way to truncate non-text elements nicely. Here
   //    it's fix max height of the element group so that anything that is
   //    overflown will not be visible.
-  const lineHeight = 1.75;
+  const lineHeight = getLineHeight(size);
   const gap = getGapSize(size);
   const gapHeight = gap * (maxLines - 1);
   const height = lineHeight * maxLines + gapHeight;
@@ -35,6 +34,21 @@ const getElementGroupStyles = (size, maxLines) => {
   `;
 };
 
+const getLineHeight = size => {
+  // The maximum height of all elements in specific size.
+  // These heights belongs to AvatarGroup.
+  switch (size) {
+    case SmartLinkSize.XLarge:
+    case SmartLinkSize.Large:
+      return 1.75;
+
+    case SmartLinkSize.Medium:
+    case SmartLinkSize.Small:
+    default:
+      return 1.5;
+  }
+};
+
 const getMaxLines = maxLines => {
   if (maxLines > MAXIMUM_MAX_LINES) {
     return DEFAULT_MAX_LINES;

package/dist/es2019/view/FlexibleCard/components/elements/avatar-group/index.js

@@ -1,8 +1,32 @@
+/** @jsx jsx */
 import React from 'react';
+import { css, jsx } from '@emotion/core';
 import AtlaskitAvatarGroup from '@atlaskit/avatar-group';
 import { SmartLinkSize } from '../../../../../constants';
 const MAX_COUNT = 4;
 
+const getStyles = size => {
+  switch (size) {
+    case SmartLinkSize.XLarge:
+    case SmartLinkSize.Large:
+      // Default AK small size
+      return;
+
+    case SmartLinkSize.Medium:
+    case SmartLinkSize.Small:
+    default:
+      return css`
+        li {
+          span,
+          svg {
+            max-height: 1.25rem;
+            max-width: 1.25rem;
+          }
+        }
+      `;
+  }
+};
+
 const AvatarGroup = ({
   items = [],
   maxCount = MAX_COUNT,
@@ -13,13 +37,15 @@ const AvatarGroup = ({
     return null;
   }
 
-  return /*#__PURE__*/React.createElement(AtlaskitAvatarGroup, {
+  return jsx("span", {
+    css: getStyles(size)
+  }, jsx(AtlaskitAvatarGroup, {
     maxCount: maxCount,
     appearance: "stack",
     size: "small",
     data: items,
     testId: testId
-  });
+  }));
 };
 
 export default AvatarGroup;

package/dist/esm/version.json

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

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

@@ -19,18 +19,32 @@ var getElementGroupStyles = function getElementGroupStyles(size, maxLines) {
   // MetadataBlock allows metadata elements to be displayed in
   // multiple lines, with maximum of 2 lines.
   // a) We need the height of the line to be equal on both left and right
-  //    sides so they line up nicely. 1.75 is the The maximum height of
-  //    all elements in specific size. This height belongs to AvatarGroup.
+  //    sides so they line up nicely.
   // b) There is no way to truncate non-text elements nicely. Here
   //    it's fix max height of the element group so that anything that is
   //    overflown will not be visible.
-  var lineHeight = 1.75;
+  var lineHeight = getLineHeight(size);
   var gap = getGapSize(size);
   var gapHeight = gap * (maxLines - 1);
   var height = lineHeight * maxLines + gapHeight;
   return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    flex-wrap: wrap;\n    line-height: ", "rem;\n    max-height: ", "rem;\n    > span,\n    > div {\n      min-height: ", "rem;\n      max-height: ", "rem;\n      line-height: ", "rem;\n    }\n  "])), lineHeight, height, lineHeight, lineHeight, lineHeight);
 };
 
+var getLineHeight = function getLineHeight(size) {
+  // The maximum height of all elements in specific size.
+  // These heights belongs to AvatarGroup.
+  switch (size) {
+    case SmartLinkSize.XLarge:
+    case SmartLinkSize.Large:
+      return 1.75;
+
+    case SmartLinkSize.Medium:
+    case SmartLinkSize.Small:
+    default:
+      return 1.5;
+  }
+};
+
 var getMaxLines = function getMaxLines(maxLines) {
   if (maxLines > MAXIMUM_MAX_LINES) {
     return DEFAULT_MAX_LINES;

package/dist/esm/view/FlexibleCard/components/elements/avatar-group/index.js

@@ -1,8 +1,28 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+
+var _templateObject;
+
+/** @jsx jsx */
 import React from 'react';
+import { css, jsx } from '@emotion/core';
 import AtlaskitAvatarGroup from '@atlaskit/avatar-group';
 import { SmartLinkSize } from '../../../../../constants';
 var MAX_COUNT = 4;
 
+var getStyles = function getStyles(size) {
+  switch (size) {
+    case SmartLinkSize.XLarge:
+    case SmartLinkSize.Large:
+      // Default AK small size
+      return;
+
+    case SmartLinkSize.Medium:
+    case SmartLinkSize.Small:
+    default:
+      return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n        li {\n          span,\n          svg {\n            max-height: 1.25rem;\n            max-width: 1.25rem;\n          }\n        }\n      "])));
+  }
+};
+
 var AvatarGroup = function AvatarGroup(_ref) {
   var _ref$items = _ref.items,
       items = _ref$items === void 0 ? [] : _ref$items,
@@ -17,13 +37,15 @@ var AvatarGroup = function AvatarGroup(_ref) {
     return null;
   }
 
-  return /*#__PURE__*/React.createElement(AtlaskitAvatarGroup, {
+  return jsx("span", {
+    css: getStyles(size)
+  }, jsx(AtlaskitAvatarGroup, {
     maxCount: maxCount,
     appearance: "stack",
     size: "small",
     data: items,
     testId: testId
-  });
+  }));
 };
 
 export default AvatarGroup;

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

@@ -1,3 +1,4 @@
+/** @jsx jsx */
 import React from 'react';
 import { AvatarGroupProps } from './types';
 declare const AvatarGroup: React.FC<AvatarGroupProps>;

package/package.json

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