@atlaskit/smart-card 17.4.1 → 17.4.2

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/smart-card
 
+## 17.4.2
+
+### Patch Changes
+
+- [`c8285bdcde4`](https://bitbucket.org/atlassian/atlassian-frontend/commits/c8285bdcde4) - Flexible UI: Add SnippetBlock
+
 ## 17.4.1
 
 ### Patch Changes

package/dist/cjs/constants.js

@@ -4,7 +4,17 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.SmartLinkWidth = exports.SmartLinkTheme = exports.SmartLinkStatus = exports.SmartLinkSize = exports.SmartLinkPosition = exports.SmartLinkDirection = exports.SmartLinkAlignment = exports.IconType = exports.ElementName = exports.ActionName = void 0;
+
+/**
+ * The alignment of Flexible UI component.
+ */
 var SmartLinkAlignment;
+/**
+ * The direction of Flexible UI components. It establish the main-axis
+ * or how the child components laid out inside the parent component.
+ * Similar to flex's flex-direction concept.
+ */
+
 exports.SmartLinkAlignment = SmartLinkAlignment;
 
 (function (SmartLinkAlignment) {
@@ -13,6 +23,11 @@ exports.SmartLinkAlignment = SmartLinkAlignment;
 })(SmartLinkAlignment || (exports.SmartLinkAlignment = SmartLinkAlignment = {}));
 
 var SmartLinkDirection;
+/**
+ * The positioning of the component within the parent component.
+ * Similar to flex's align-items or align-self concept.
+ */
+
 exports.SmartLinkDirection = SmartLinkDirection;
 
 (function (SmartLinkDirection) {
@@ -21,6 +36,12 @@ exports.SmartLinkDirection = SmartLinkDirection;
 })(SmartLinkDirection || (exports.SmartLinkDirection = SmartLinkDirection = {}));
 
 var SmartLinkPosition;
+/**
+ * The sizing options of the Flexible UI component. Every component
+ * has or inherits the sizing props. Implementation varies
+ * as per component.
+ */
+
 exports.SmartLinkPosition = SmartLinkPosition;
 
 (function (SmartLinkPosition) {
@@ -29,6 +50,10 @@ exports.SmartLinkPosition = SmartLinkPosition;
 })(SmartLinkPosition || (exports.SmartLinkPosition = SmartLinkPosition = {}));
 
 var SmartLinkSize;
+/**
+ * Smart Links link request status
+ */
+
 exports.SmartLinkSize = SmartLinkSize;
 
 (function (SmartLinkSize) {
@@ -39,6 +64,11 @@ exports.SmartLinkSize = SmartLinkSize;
 })(SmartLinkSize || (exports.SmartLinkSize = SmartLinkSize = {}));
 
 var SmartLinkStatus;
+/**
+ * Flexible UI theme available on the Card level.
+ * This determine the styling of the link.
+ */
+
 exports.SmartLinkStatus = SmartLinkStatus;
 
 (function (SmartLinkStatus) {
@@ -53,6 +83,12 @@ exports.SmartLinkStatus = SmartLinkStatus;
 })(SmartLinkStatus || (exports.SmartLinkStatus = SmartLinkStatus = {}));
 
 var SmartLinkTheme;
+/**
+ * Determines whether the container size will fit to the content
+ * or expand to the available width or the parent component.
+ * Similar to flex's flex-grow concept.
+ */
+
 exports.SmartLinkTheme = SmartLinkTheme;
 
 (function (SmartLinkTheme) {
@@ -60,19 +96,23 @@ exports.SmartLinkTheme = SmartLinkTheme;
   SmartLinkTheme["Link"] = "link";
 })(SmartLinkTheme || (exports.SmartLinkTheme = SmartLinkTheme = {}));
 
-var SmartLinkWidth; // When adding an element...
-// 1) Create base element if it doesn't already existed.
-//    Base element are inside src/view/FlexibleCard/components/elements.
-//    E.g. Badge,DateTime, Icon, Lozenge, etc.
-// 2) Update FlexibleUiContext with the new prop for data representing
-//    the element, preferably with the same name as the element itself.
-//    (src/state/flexible-ui-context/types.ts)
-// 3) Update Flexible UI extractor (src/extractors/flexible/index.ts)
-// 4) Set base element and data mapping.
-//    (src/view/FlexibleCard/components/elements/utils.tsx)
-// 5) Create element. (src/view/FlexibleCard/components/elements/index.ts)
-// 6) Update element ElementDisplaySchema for inline/block display
-//    (src/view/FlexibleCard/components/blocks/utils.tsx)
+var SmartLinkWidth;
+/**
+ * Flexible UI element name - each reflecting the link data its represented.
+ * When adding an element...
+ * 1) Create base element if it doesn't already existed.
+ *    Base element are inside src/view/FlexibleCard/components/elements.
+ *    E.g. Badge,DateTime, Icon, Lozenge, etc.
+ * 2) Update FlexibleUiContext with the new prop for data representing
+ *    the element, preferably with the same name as the element itself.
+ *    (src/state/flexible-ui-context/types.ts)
+ * 3) Update Flexible UI extractor (src/extractors/flexible/index.ts)
+ * 4) Set base element and data mapping
+ *    (src/view/FlexibleCard/components/elements/utils.tsx)
+ * 5) Create element. (src/view/FlexibleCard/components/elements/index.ts)
+ * 6) Update element ElementDisplaySchema for inline/block display
+ *    (src/view/FlexibleCard/components/blocks/utils.tsx)
+ */
 
 exports.SmartLinkWidth = SmartLinkWidth;
 
@@ -82,6 +122,10 @@ exports.SmartLinkWidth = SmartLinkWidth;
 })(SmartLinkWidth || (exports.SmartLinkWidth = SmartLinkWidth = {}));
 
 var ElementName;
+/**
+ * Flexible UI action (button)
+ */
+
 exports.ElementName = ElementName;
 
 (function (ElementName) {
@@ -103,6 +147,10 @@ exports.ElementName = ElementName;
 })(ElementName || (exports.ElementName = ElementName = {}));
 
 var ActionName;
+/**
+ * Flexible UI icons - each mapped to AK icons.
+ */
+
 exports.ActionName = ActionName;
 
 (function (ActionName) {

package/dist/cjs/index.js

@@ -101,6 +101,12 @@ Object.defineProperty(exports, "SmartLinkTheme", {
     return _constants.SmartLinkTheme;
   }
 });
+Object.defineProperty(exports, "SnippetBlock", {
+  enumerable: true,
+  get: function get() {
+    return _blocks.SnippetBlock;
+  }
+});
 Object.defineProperty(exports, "TitleBlock", {
   enumerable: true,
   get: function get() {

package/dist/cjs/utils/token.js

@@ -29,6 +29,7 @@ var tokens = {
   elevation: safeToken('elevation.shadow.raised', '0px 1px 1px #091E4240, 0px 0px 1px #091E424F'),
   errorMessage: safeToken('color.text.disabled', '#6B778C'),
   errorMessageHover: safeToken('color.text.subtle', '#8993A4'),
+  snippet: safeToken('color.text', '#172B4D'),
   text: safeToken('color.text.subtlest', '#626F86')
 };
 exports.tokens = tokens;

package/dist/cjs/version.json

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

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

@@ -11,6 +11,12 @@ Object.defineProperty(exports, "MetadataBlock", {
     return _metadataBlock.default;
   }
 });
+Object.defineProperty(exports, "SnippetBlock", {
+  enumerable: true,
+  get: function get() {
+    return _snippetBlock.default;
+  }
+});
 Object.defineProperty(exports, "TitleBlock", {
   enumerable: true,
   get: function get() {
@@ -18,6 +24,8 @@ Object.defineProperty(exports, "TitleBlock", {
   }
 });
 
-var _titleBlock = _interopRequireDefault(require("./title-block"));
+var _metadataBlock = _interopRequireDefault(require("./metadata-block"));
+
+var _snippetBlock = _interopRequireDefault(require("./snippet-block"));
 
-var _metadataBlock = _interopRequireDefault(require("./metadata-block"));
+var _titleBlock = _interopRequireDefault(require("./title-block"));

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

@@ -0,0 +1,51 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _block = _interopRequireDefault(require("../block"));
+
+var _constants = require("../../../../../constants");
+
+var _elements = require("../../elements");
+
+var _utils = require("../../utils");
+
+var _excluded = ["maxLines", "status", "testId"];
+var DEFAULT_MAX_LINES = 3;
+var MAXIMUM_MAX_LINES = 3;
+var MINIMUM_MAX_LINES = 1;
+
+var SnippetBlock = function SnippetBlock(_ref) {
+  var _ref$maxLines = _ref.maxLines,
+      maxLines = _ref$maxLines === void 0 ? DEFAULT_MAX_LINES : _ref$maxLines,
+      _ref$status = _ref.status,
+      status = _ref$status === void 0 ? _constants.SmartLinkStatus.Fallback : _ref$status,
+      _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'smart-block-snippet' : _ref$testId,
+      blockProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+
+  if (status !== _constants.SmartLinkStatus.Resolved) {
+    return null;
+  }
+
+  var snippetMaxLines = (0, _utils.getMaxLines)(maxLines, DEFAULT_MAX_LINES, MAXIMUM_MAX_LINES, MINIMUM_MAX_LINES);
+  return /*#__PURE__*/_react.default.createElement(_block.default, (0, _extends2.default)({}, blockProps, {
+    testId: "".concat(testId, "-resolved-view")
+  }), /*#__PURE__*/_react.default.createElement(_elements.Snippet, {
+    maxLines: snippetMaxLines
+  }));
+};
+
+var _default = SnippetBlock;
+exports.default = _default;

package/dist/cjs/view/FlexibleCard/components/blocks/snippet-block/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

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

@@ -19,12 +19,14 @@ var _token = require("../../../../../utils/token");
 
 var _templateObject;
 
-var getStyles = function getStyles(maxLines) {
-  return (0, _core.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  font-size: 0.75rem;\n  line-height: 1rem;\n  ", "\n"])), _token.tokens.text, (0, _utils.getTruncateStyles)(maxLines));
+var getStyles = function getStyles(maxLines, color) {
+  return (0, _core.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  font-size: 0.75rem;\n  line-height: 1rem;\n  ", "\n"])), color, (0, _utils.getTruncateStyles)(maxLines));
 };
 
 var Text = function Text(_ref) {
-  var content = _ref.content,
+  var _ref$color = _ref.color,
+      color = _ref$color === void 0 ? _token.tokens.text : _ref$color,
+      content = _ref.content,
       _ref$maxLines = _ref.maxLines,
       maxLines = _ref$maxLines === void 0 ? 1 : _ref$maxLines,
       message = _ref.message,
@@ -36,7 +38,7 @@ var Text = function Text(_ref) {
   }
 
   return (0, _core.jsx)("span", {
-    css: getStyles(maxLines),
+    css: getStyles(maxLines, color),
     "data-smart-element-text": true,
     "data-testid": testId
   }, (0, _utils.getFormattedMessage)(message) || content);

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

@@ -35,12 +35,15 @@ var _messages = require("../../../../messages");
 
 var _dateTime = _interopRequireDefault(require("./date-time"));
 
+var _token = require("../../../../utils/token");
+
 var _elementMappings;
 
 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); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+var SNIPPET_DEFAULT_MAX_LINES = 3;
 var elementMappings = (_elementMappings = {}, (0, _defineProperty2.default)(_elementMappings, _constants.ElementName.AuthorGroup, {
   component: _avatarGroup.default
 }), (0, _defineProperty2.default)(_elementMappings, _constants.ElementName.CollaboratorGroup, {
@@ -66,7 +69,8 @@ var elementMappings = (_elementMappings = {}, (0, _defineProperty2.default)(_ele
 }), (0, _defineProperty2.default)(_elementMappings, _constants.ElementName.Snippet, {
   component: _text.default,
   props: {
-    maxLines: 3
+    color: _token.tokens.snippet,
+    maxLines: SNIPPET_DEFAULT_MAX_LINES
   }
 }), (0, _defineProperty2.default)(_elementMappings, _constants.ElementName.State, {
   component: _lozenge.default

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

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getTruncateStyles = exports.getLinkSizeStyles = exports.getLinkLineHeight = exports.getIconSizeStyles = exports.getFormattedMessage = void 0;
+exports.getTruncateStyles = exports.getMaxLines = exports.getLinkSizeStyles = exports.getLinkLineHeight = exports.getIconSizeStyles = exports.getFormattedMessage = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
@@ -76,6 +76,20 @@ var getLinkSizeStyles = function getLinkSizeStyles(size) {
 
 exports.getLinkSizeStyles = getLinkSizeStyles;
 
+var getMaxLines = function getMaxLines(value, defaultValue, max, min) {
+  if (value > max) {
+    return defaultValue;
+  }
+
+  if (value < min) {
+    return min;
+  }
+
+  return value;
+};
+
+exports.getMaxLines = getMaxLines;
+
 var getTruncateStyles = function getTruncateStyles(maxLines) {
   var lineHeight = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '1rem';
   return (0, _core.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n    display: -webkit-box;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    word-break: break-word;\n    -webkit-line-clamp: ", ";\n    -webkit-box-orient: vertical;\n    // Fallback options\n    max-height: calc(", " * ", ");\n  "])), maxLines, maxLines, lineHeight);

package/dist/es2019/constants.js

@@ -1,4 +1,12 @@
+/**
+ * The alignment of Flexible UI component.
+ */
 export let SmartLinkAlignment;
+/**
+ * The direction of Flexible UI components. It establish the main-axis
+ * or how the child components laid out inside the parent component.
+ * Similar to flex's flex-direction concept.
+ */
 
 (function (SmartLinkAlignment) {
   SmartLinkAlignment["Left"] = "left";
@@ -6,6 +14,10 @@ export let SmartLinkAlignment;
 })(SmartLinkAlignment || (SmartLinkAlignment = {}));
 
 export let SmartLinkDirection;
+/**
+ * The positioning of the component within the parent component.
+ * Similar to flex's align-items or align-self concept.
+ */
 
 (function (SmartLinkDirection) {
   SmartLinkDirection["Horizontal"] = "horizontal";
@@ -13,6 +25,11 @@ export let SmartLinkDirection;
 })(SmartLinkDirection || (SmartLinkDirection = {}));
 
 export let SmartLinkPosition;
+/**
+ * The sizing options of the Flexible UI component. Every component
+ * has or inherits the sizing props. Implementation varies
+ * as per component.
+ */
 
 (function (SmartLinkPosition) {
   SmartLinkPosition["Top"] = "top";
@@ -20,6 +37,9 @@ export let SmartLinkPosition;
 })(SmartLinkPosition || (SmartLinkPosition = {}));
 
 export let SmartLinkSize;
+/**
+ * Smart Links link request status
+ */
 
 (function (SmartLinkSize) {
   SmartLinkSize["XLarge"] = "xlarge";
@@ -29,6 +49,10 @@ export let SmartLinkSize;
 })(SmartLinkSize || (SmartLinkSize = {}));
 
 export let SmartLinkStatus;
+/**
+ * Flexible UI theme available on the Card level.
+ * This determine the styling of the link.
+ */
 
 (function (SmartLinkStatus) {
   SmartLinkStatus["Pending"] = "pending";
@@ -42,25 +66,34 @@ export let SmartLinkStatus;
 })(SmartLinkStatus || (SmartLinkStatus = {}));
 
 export let SmartLinkTheme;
+/**
+ * Determines whether the container size will fit to the content
+ * or expand to the available width or the parent component.
+ * Similar to flex's flex-grow concept.
+ */
 
 (function (SmartLinkTheme) {
   SmartLinkTheme["Black"] = "black";
   SmartLinkTheme["Link"] = "link";
 })(SmartLinkTheme || (SmartLinkTheme = {}));
 
-export let SmartLinkWidth; // When adding an element...
-// 1) Create base element if it doesn't already existed.
-//    Base element are inside src/view/FlexibleCard/components/elements.
-//    E.g. Badge,DateTime, Icon, Lozenge, etc.
-// 2) Update FlexibleUiContext with the new prop for data representing
-//    the element, preferably with the same name as the element itself.
-//    (src/state/flexible-ui-context/types.ts)
-// 3) Update Flexible UI extractor (src/extractors/flexible/index.ts)
-// 4) Set base element and data mapping.
-//    (src/view/FlexibleCard/components/elements/utils.tsx)
-// 5) Create element. (src/view/FlexibleCard/components/elements/index.ts)
-// 6) Update element ElementDisplaySchema for inline/block display
-//    (src/view/FlexibleCard/components/blocks/utils.tsx)
+export let SmartLinkWidth;
+/**
+ * Flexible UI element name - each reflecting the link data its represented.
+ * When adding an element...
+ * 1) Create base element if it doesn't already existed.
+ *    Base element are inside src/view/FlexibleCard/components/elements.
+ *    E.g. Badge,DateTime, Icon, Lozenge, etc.
+ * 2) Update FlexibleUiContext with the new prop for data representing
+ *    the element, preferably with the same name as the element itself.
+ *    (src/state/flexible-ui-context/types.ts)
+ * 3) Update Flexible UI extractor (src/extractors/flexible/index.ts)
+ * 4) Set base element and data mapping
+ *    (src/view/FlexibleCard/components/elements/utils.tsx)
+ * 5) Create element. (src/view/FlexibleCard/components/elements/index.ts)
+ * 6) Update element ElementDisplaySchema for inline/block display
+ *    (src/view/FlexibleCard/components/blocks/utils.tsx)
+ */
 
 (function (SmartLinkWidth) {
   SmartLinkWidth["FitToContent"] = "fit-to-content";
@@ -68,6 +101,9 @@ export let SmartLinkWidth; // When adding an element...
 })(SmartLinkWidth || (SmartLinkWidth = {}));
 
 export let ElementName;
+/**
+ * Flexible UI action (button)
+ */
 
 (function (ElementName) {
   ElementName["AuthorGroup"] = "AuthorGroup";
@@ -88,6 +124,9 @@ export let ElementName;
 })(ElementName || (ElementName = {}));
 
 export let ActionName;
+/**
+ * Flexible UI icons - each mapped to AK icons.
+ */
 
 (function (ActionName) {
   ActionName["DeleteAction"] = "DeleteAction";

package/dist/es2019/index.js

@@ -13,4 +13,4 @@ export { contentFooterClassName, metadataListClassName, blockCardResolvingViewCl
 export { loadingPlaceholderClassName } from './view/CardWithUrl/component-lazy/LazyFallback'; // Flexible UI
 
 export { ActionName, ElementName, SmartLinkDirection, SmartLinkPosition, SmartLinkSize, SmartLinkTheme } from './constants';
-export { MetadataBlock, TitleBlock } from './view/FlexibleCard/components/blocks';
+export { MetadataBlock, SnippetBlock, TitleBlock } from './view/FlexibleCard/components/blocks';

package/dist/es2019/utils/token.js

@@ -19,5 +19,6 @@ export const tokens = {
   elevation: safeToken('elevation.shadow.raised', '0px 1px 1px #091E4240, 0px 0px 1px #091E424F'),
   errorMessage: safeToken('color.text.disabled', '#6B778C'),
   errorMessageHover: safeToken('color.text.subtle', '#8993A4'),
+  snippet: safeToken('color.text', '#172B4D'),
   text: safeToken('color.text.subtlest', '#626F86')
 };

package/dist/es2019/version.json

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

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

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

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

@@ -0,0 +1,29 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import Block from '../block';
+import { SmartLinkStatus } from '../../../../../constants';
+import { Snippet } from '../../elements';
+import { getMaxLines } from '../../utils';
+const DEFAULT_MAX_LINES = 3;
+const MAXIMUM_MAX_LINES = 3;
+const MINIMUM_MAX_LINES = 1;
+
+const SnippetBlock = ({
+  maxLines = DEFAULT_MAX_LINES,
+  status = SmartLinkStatus.Fallback,
+  testId = 'smart-block-snippet',
+  ...blockProps
+}) => {
+  if (status !== SmartLinkStatus.Resolved) {
+    return null;
+  }
+
+  const snippetMaxLines = getMaxLines(maxLines, DEFAULT_MAX_LINES, MAXIMUM_MAX_LINES, MINIMUM_MAX_LINES);
+  return /*#__PURE__*/React.createElement(Block, _extends({}, blockProps, {
+    testId: `${testId}-resolved-view`
+  }), /*#__PURE__*/React.createElement(Snippet, {
+    maxLines: snippetMaxLines
+  }));
+};
+
+export default SnippetBlock;

package/dist/es2019/view/FlexibleCard/components/blocks/snippet-block/types.js

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

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

@@ -4,14 +4,15 @@ import { css, jsx } from '@emotion/core';
 import { getFormattedMessage, getTruncateStyles } from '../../utils';
 import { tokens } from '../../../../../utils/token';
 
-const getStyles = maxLines => css`
-  color: ${tokens.text};
+const getStyles = (maxLines, color) => css`
+  color: ${color};
   font-size: 0.75rem;
   line-height: 1rem;
   ${getTruncateStyles(maxLines)}
 `;
 
 const Text = ({
+  color = tokens.text,
   content,
   maxLines = 1,
   message,
@@ -22,7 +23,7 @@ const Text = ({
   }
 
   return jsx("span", {
-    css: getStyles(maxLines),
+    css: getStyles(maxLines, color),
     "data-smart-element-text": true,
     "data-testid": testId
   }, getFormattedMessage(message) || content);

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

@@ -10,6 +10,8 @@ import AvatarGroup from './avatar-group';
 import Text from './text';
 import { messages } from '../../../../messages';
 import DateTime from './date-time';
+import { tokens } from '../../../../utils/token';
+const SNIPPET_DEFAULT_MAX_LINES = 3;
 const elementMappings = {
   [ElementName.AuthorGroup]: {
     component: AvatarGroup
@@ -44,7 +46,8 @@ const elementMappings = {
   [ElementName.Snippet]: {
     component: Text,
     props: {
-      maxLines: 3
+      color: tokens.snippet,
+      maxLines: SNIPPET_DEFAULT_MAX_LINES
     }
   },
   [ElementName.State]: {

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

@@ -80,6 +80,17 @@ export const getLinkSizeStyles = size => {
       `;
   }
 };
+export const getMaxLines = (value, defaultValue, max, min) => {
+  if (value > max) {
+    return defaultValue;
+  }
+
+  if (value < min) {
+    return min;
+  }
+
+  return value;
+};
 export const getTruncateStyles = (maxLines, lineHeight = '1rem') => css`
     display: -webkit-box;
     overflow: hidden;

package/dist/esm/constants.js

@@ -1,4 +1,12 @@
+/**
+ * The alignment of Flexible UI component.
+ */
 export var SmartLinkAlignment;
+/**
+ * The direction of Flexible UI components. It establish the main-axis
+ * or how the child components laid out inside the parent component.
+ * Similar to flex's flex-direction concept.
+ */
 
 (function (SmartLinkAlignment) {
   SmartLinkAlignment["Left"] = "left";
@@ -6,6 +14,10 @@ export var SmartLinkAlignment;
 })(SmartLinkAlignment || (SmartLinkAlignment = {}));
 
 export var SmartLinkDirection;
+/**
+ * The positioning of the component within the parent component.
+ * Similar to flex's align-items or align-self concept.
+ */
 
 (function (SmartLinkDirection) {
   SmartLinkDirection["Horizontal"] = "horizontal";
@@ -13,6 +25,11 @@ export var SmartLinkDirection;
 })(SmartLinkDirection || (SmartLinkDirection = {}));
 
 export var SmartLinkPosition;
+/**
+ * The sizing options of the Flexible UI component. Every component
+ * has or inherits the sizing props. Implementation varies
+ * as per component.
+ */
 
 (function (SmartLinkPosition) {
   SmartLinkPosition["Top"] = "top";
@@ -20,6 +37,9 @@ export var SmartLinkPosition;
 })(SmartLinkPosition || (SmartLinkPosition = {}));
 
 export var SmartLinkSize;
+/**
+ * Smart Links link request status
+ */
 
 (function (SmartLinkSize) {
   SmartLinkSize["XLarge"] = "xlarge";
@@ -29,6 +49,10 @@ export var SmartLinkSize;
 })(SmartLinkSize || (SmartLinkSize = {}));
 
 export var SmartLinkStatus;
+/**
+ * Flexible UI theme available on the Card level.
+ * This determine the styling of the link.
+ */
 
 (function (SmartLinkStatus) {
   SmartLinkStatus["Pending"] = "pending";
@@ -42,25 +66,34 @@ export var SmartLinkStatus;
 })(SmartLinkStatus || (SmartLinkStatus = {}));
 
 export var SmartLinkTheme;
+/**
+ * Determines whether the container size will fit to the content
+ * or expand to the available width or the parent component.
+ * Similar to flex's flex-grow concept.
+ */
 
 (function (SmartLinkTheme) {
   SmartLinkTheme["Black"] = "black";
   SmartLinkTheme["Link"] = "link";
 })(SmartLinkTheme || (SmartLinkTheme = {}));
 
-export var SmartLinkWidth; // When adding an element...
-// 1) Create base element if it doesn't already existed.
-//    Base element are inside src/view/FlexibleCard/components/elements.
-//    E.g. Badge,DateTime, Icon, Lozenge, etc.
-// 2) Update FlexibleUiContext with the new prop for data representing
-//    the element, preferably with the same name as the element itself.
-//    (src/state/flexible-ui-context/types.ts)
-// 3) Update Flexible UI extractor (src/extractors/flexible/index.ts)
-// 4) Set base element and data mapping.
-//    (src/view/FlexibleCard/components/elements/utils.tsx)
-// 5) Create element. (src/view/FlexibleCard/components/elements/index.ts)
-// 6) Update element ElementDisplaySchema for inline/block display
-//    (src/view/FlexibleCard/components/blocks/utils.tsx)
+export var SmartLinkWidth;
+/**
+ * Flexible UI element name - each reflecting the link data its represented.
+ * When adding an element...
+ * 1) Create base element if it doesn't already existed.
+ *    Base element are inside src/view/FlexibleCard/components/elements.
+ *    E.g. Badge,DateTime, Icon, Lozenge, etc.
+ * 2) Update FlexibleUiContext with the new prop for data representing
+ *    the element, preferably with the same name as the element itself.
+ *    (src/state/flexible-ui-context/types.ts)
+ * 3) Update Flexible UI extractor (src/extractors/flexible/index.ts)
+ * 4) Set base element and data mapping
+ *    (src/view/FlexibleCard/components/elements/utils.tsx)
+ * 5) Create element. (src/view/FlexibleCard/components/elements/index.ts)
+ * 6) Update element ElementDisplaySchema for inline/block display
+ *    (src/view/FlexibleCard/components/blocks/utils.tsx)
+ */
 
 (function (SmartLinkWidth) {
   SmartLinkWidth["FitToContent"] = "fit-to-content";
@@ -68,6 +101,9 @@ export var SmartLinkWidth; // When adding an element...
 })(SmartLinkWidth || (SmartLinkWidth = {}));
 
 export var ElementName;
+/**
+ * Flexible UI action (button)
+ */
 
 (function (ElementName) {
   ElementName["AuthorGroup"] = "AuthorGroup";
@@ -88,6 +124,9 @@ export var ElementName;
 })(ElementName || (ElementName = {}));
 
 export var ActionName;
+/**
+ * Flexible UI icons - each mapped to AK icons.
+ */
 
 (function (ActionName) {
   ActionName["DeleteAction"] = "DeleteAction";

package/dist/esm/index.js

@@ -13,4 +13,4 @@ export { contentFooterClassName, metadataListClassName, blockCardResolvingViewCl
 export { loadingPlaceholderClassName } from './view/CardWithUrl/component-lazy/LazyFallback'; // Flexible UI
 
 export { ActionName, ElementName, SmartLinkDirection, SmartLinkPosition, SmartLinkSize, SmartLinkTheme } from './constants';
-export { MetadataBlock, TitleBlock } from './view/FlexibleCard/components/blocks';
+export { MetadataBlock, SnippetBlock, TitleBlock } from './view/FlexibleCard/components/blocks';

package/dist/esm/utils/token.js

@@ -19,5 +19,6 @@ export var tokens = {
   elevation: safeToken('elevation.shadow.raised', '0px 1px 1px #091E4240, 0px 0px 1px #091E424F'),
   errorMessage: safeToken('color.text.disabled', '#6B778C'),
   errorMessageHover: safeToken('color.text.subtle', '#8993A4'),
+  snippet: safeToken('color.text', '#172B4D'),
   text: safeToken('color.text.subtlest', '#626F86')
 };

package/dist/esm/version.json

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

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

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

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

@@ -0,0 +1,34 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["maxLines", "status", "testId"];
+import React from 'react';
+import Block from '../block';
+import { SmartLinkStatus } from '../../../../../constants';
+import { Snippet } from '../../elements';
+import { getMaxLines } from '../../utils';
+var DEFAULT_MAX_LINES = 3;
+var MAXIMUM_MAX_LINES = 3;
+var MINIMUM_MAX_LINES = 1;
+
+var SnippetBlock = function SnippetBlock(_ref) {
+  var _ref$maxLines = _ref.maxLines,
+      maxLines = _ref$maxLines === void 0 ? DEFAULT_MAX_LINES : _ref$maxLines,
+      _ref$status = _ref.status,
+      status = _ref$status === void 0 ? SmartLinkStatus.Fallback : _ref$status,
+      _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'smart-block-snippet' : _ref$testId,
+      blockProps = _objectWithoutProperties(_ref, _excluded);
+
+  if (status !== SmartLinkStatus.Resolved) {
+    return null;
+  }
+
+  var snippetMaxLines = getMaxLines(maxLines, DEFAULT_MAX_LINES, MAXIMUM_MAX_LINES, MINIMUM_MAX_LINES);
+  return /*#__PURE__*/React.createElement(Block, _extends({}, blockProps, {
+    testId: "".concat(testId, "-resolved-view")
+  }), /*#__PURE__*/React.createElement(Snippet, {
+    maxLines: snippetMaxLines
+  }));
+};
+
+export default SnippetBlock;

package/dist/esm/view/FlexibleCard/components/blocks/snippet-block/types.js

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

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

@@ -8,12 +8,14 @@ import { css, jsx } from '@emotion/core';
 import { getFormattedMessage, getTruncateStyles } from '../../utils';
 import { tokens } from '../../../../../utils/token';
 
-var getStyles = function getStyles(maxLines) {
-  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  color: ", ";\n  font-size: 0.75rem;\n  line-height: 1rem;\n  ", "\n"])), tokens.text, getTruncateStyles(maxLines));
+var getStyles = function getStyles(maxLines, color) {
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  color: ", ";\n  font-size: 0.75rem;\n  line-height: 1rem;\n  ", "\n"])), color, getTruncateStyles(maxLines));
 };
 
 var Text = function Text(_ref) {
-  var content = _ref.content,
+  var _ref$color = _ref.color,
+      color = _ref$color === void 0 ? tokens.text : _ref$color,
+      content = _ref.content,
       _ref$maxLines = _ref.maxLines,
       maxLines = _ref$maxLines === void 0 ? 1 : _ref$maxLines,
       message = _ref.message,
@@ -25,7 +27,7 @@ var Text = function Text(_ref) {
   }
 
   return jsx("span", {
-    css: getStyles(maxLines),
+    css: getStyles(maxLines, color),
     "data-smart-element-text": true,
     "data-testid": testId
   }, getFormattedMessage(message) || content);

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

@@ -14,6 +14,8 @@ import AvatarGroup from './avatar-group';
 import Text from './text';
 import { messages } from '../../../../messages';
 import DateTime from './date-time';
+import { tokens } from '../../../../utils/token';
+var SNIPPET_DEFAULT_MAX_LINES = 3;
 var elementMappings = (_elementMappings = {}, _defineProperty(_elementMappings, ElementName.AuthorGroup, {
   component: AvatarGroup
 }), _defineProperty(_elementMappings, ElementName.CollaboratorGroup, {
@@ -39,7 +41,8 @@ var elementMappings = (_elementMappings = {}, _defineProperty(_elementMappings,
 }), _defineProperty(_elementMappings, ElementName.Snippet, {
   component: Text,
   props: {
-    maxLines: 3
+    color: tokens.snippet,
+    maxLines: SNIPPET_DEFAULT_MAX_LINES
   }
 }), _defineProperty(_elementMappings, ElementName.State, {
   component: Lozenge

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

@@ -51,6 +51,17 @@ export var getLinkSizeStyles = function getLinkSizeStyles(size) {
       return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n        font-size: 0.75rem;\n        font-weight: 500;\n        letter-spacing: 0em;\n        line-height: ", ";\n      "])), getLinkLineHeight(size));
   }
 };
+export var getMaxLines = function getMaxLines(value, defaultValue, max, min) {
+  if (value > max) {
+    return defaultValue;
+  }
+
+  if (value < min) {
+    return min;
+  }
+
+  return value;
+};
 export var getTruncateStyles = function getTruncateStyles(maxLines) {
   var lineHeight = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '1rem';
   return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n    display: -webkit-box;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    word-break: break-word;\n    -webkit-line-clamp: ", ";\n    -webkit-box-orient: vertical;\n    // Fallback options\n    max-height: calc(", " * ", ");\n  "])), maxLines, maxLines, lineHeight);

package/dist/types/constants.d.ts

@@ -1,21 +1,41 @@
+/**
+ * The alignment of Flexible UI component.
+ */
 export declare enum SmartLinkAlignment {
     Left = "left",
     Right = "right"
 }
+/**
+ * The direction of Flexible UI components. It establish the main-axis
+ * or how the child components laid out inside the parent component.
+ * Similar to flex's flex-direction concept.
+ */
 export declare enum SmartLinkDirection {
     Horizontal = "horizontal",
     Vertical = "vertical"
 }
+/**
+ * The positioning of the component within the parent component.
+ * Similar to flex's align-items or align-self concept.
+ */
 export declare enum SmartLinkPosition {
     Top = "top",
     Center = "center"
 }
+/**
+ * The sizing options of the Flexible UI component. Every component
+ * has or inherits the sizing props. Implementation varies
+ * as per component.
+ */
 export declare enum SmartLinkSize {
     XLarge = "xlarge",
     Large = "large",
     Medium = "medium",
     Small = "small"
 }
+/**
+ * Smart Links link request status
+ */
 export declare enum SmartLinkStatus {
     Pending = "pending",
     Resolving = "resolving",
@@ -26,14 +46,39 @@ export declare enum SmartLinkStatus {
     Unauthorized = "unauthorized",
     Fallback = "fallback"
 }
+/**
+ * Flexible UI theme available on the Card level.
+ * This determine the styling of the link.
+ */
 export declare enum SmartLinkTheme {
     Black = "black",
     Link = "link"
 }
+/**
+ * Determines whether the container size will fit to the content
+ * or expand to the available width or the parent component.
+ * Similar to flex's flex-grow concept.
+ */
 export declare enum SmartLinkWidth {
     FitToContent = "fit-to-content",
     Flexible = "flexible"
 }
+/**
+ * Flexible UI element name - each reflecting the link data its represented.
+ * When adding an element...
+ * 1) Create base element if it doesn't already existed.
+ *    Base element are inside src/view/FlexibleCard/components/elements.
+ *    E.g. Badge,DateTime, Icon, Lozenge, etc.
+ * 2) Update FlexibleUiContext with the new prop for data representing
+ *    the element, preferably with the same name as the element itself.
+ *    (src/state/flexible-ui-context/types.ts)
+ * 3) Update Flexible UI extractor (src/extractors/flexible/index.ts)
+ * 4) Set base element and data mapping
+ *    (src/view/FlexibleCard/components/elements/utils.tsx)
+ * 5) Create element. (src/view/FlexibleCard/components/elements/index.ts)
+ * 6) Update element ElementDisplaySchema for inline/block display
+ *    (src/view/FlexibleCard/components/blocks/utils.tsx)
+ */
 export declare enum ElementName {
     AuthorGroup = "AuthorGroup",
     CollaboratorGroup = "CollaboratorGroup",
@@ -51,9 +96,15 @@ export declare enum ElementName {
     Title = "Title",
     Provider = "Provider"
 }
+/**
+ * Flexible UI action (button)
+ */
 export declare enum ActionName {
     DeleteAction = "DeleteAction"
 }
+/**
+ * Flexible UI icons - each mapped to AK icons.
+ */
 export declare enum IconType {
     Archive = "FileType:Archive",
     Audio = "FileType:Audio",

package/dist/types/index.d.ts

@@ -17,5 +17,5 @@ export { useSmartLinkEvents } from './view/SmartLinkEvents/useSmartLinkEvents';
 export { contentFooterClassName, metadataListClassName, blockCardResolvingViewClassName, blockCardResolvedViewClassName, blockCardForbiddenViewClassName, blockCardIconImageClassName, blockCardResolvedViewByClassName, blockCardForbiddenViewLinkClassName, blockCardContentClassName, blockCardContentHeaderClassName, blockCardContentHeaderNameClassName, blockCardNotFoundViewClassName, blockCardErroredViewClassName, } from './classNames';
 export { loadingPlaceholderClassName } from './view/CardWithUrl/component-lazy/LazyFallback';
 export { ActionName, ElementName, SmartLinkDirection, SmartLinkPosition, SmartLinkSize, SmartLinkTheme, } from './constants';
-export { MetadataBlock, TitleBlock, } from './view/FlexibleCard/components/blocks';
+export { MetadataBlock, SnippetBlock, TitleBlock, } from './view/FlexibleCard/components/blocks';
 export type { ActionItem, ElementItem, } from './view/FlexibleCard/components/blocks/types';

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

@@ -11,5 +11,6 @@ export declare const tokens: {
     elevation: any;
     errorMessage: any;
     errorMessageHover: any;
+    snippet: any;
     text: any;
 };

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

@@ -1,2 +1,3 @@
-export { default as TitleBlock } from './title-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/snippet-block/index.d.ts

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

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

@@ -0,0 +1,4 @@
+import { BlockProps } from '../types';
+export declare type SnippetBlockProps = BlockProps & {
+    maxLines?: number;
+};

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

@@ -1,6 +1,7 @@
 import { ElementProps } from '../types';
 import { MessageProps } from '../../types';
 export declare type TextProps = ElementProps & {
+    color?: string;
     content?: string;
     maxLines?: number;
     message?: MessageProps;

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

@@ -6,4 +6,5 @@ export declare const getFormattedMessage: (message?: MessageProps | undefined) =
 export declare const getIconSizeStyles: (width: string) => SerializedStyles;
 export declare const getLinkLineHeight: (size: SmartLinkSize) => string;
 export declare const getLinkSizeStyles: (size: SmartLinkSize) => SerializedStyles;
+export declare const getMaxLines: (value: number, defaultValue: number, max: number, min: number) => number;
 export declare const getTruncateStyles: (maxLines: number, lineHeight?: string) => SerializedStyles;

package/package.json

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