@atlaskit/smart-card 26.50.4 → 26.50.6

package/dist/esm/view/EmbedModal/components/link-info/styled.js

@@ -1,13 +1,61 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 import { css } from '@emotion/react';
-// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-export var containerStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  align-items: center;\n  display: flex;\n  gap: ", ";\n  justify-content: space-between;\n  // AK ModalBody has 2px padding top and bottom.\n  // Using 14px here to create 16px gap between\n  // link info and iframe\n  padding: ", " ", " 14px\n    ", ";\n"])), "var(--ds-space-100, 8px)", "var(--ds-space-300, 24px)", "var(--ds-space-300, 24px)", "var(--ds-space-300, 24px)");
+export var containerStyles = css({
+  alignItems: 'center',
+  display: 'flex',
+  gap: "var(--ds-space-100, 8px)",
+  justifyContent: 'space-between',
+  // AK ModalBody has 2px padding top and bottom.
+  // Using 14px here to create 16px gap between
+  // link info and iframe
+  padding: "var(--ds-space-300, 24px)".concat(" ", "var(--ds-space-300, 24px)", " 14px ", "var(--ds-space-300, 24px)")
+});
 var iconSize = '24px';
 // EDM-7328: CSS Specificity
 // An embed modal icon css for img, span, svg has specificity weight of 0-1-1.
 // Specify flex ui icon selector to increase specificity weight to 0-2-1.
-export var iconCss = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  &,\n  [data-smart-element-icon] img,\n  [data-smart-element-icon] span,\n  [data-smart-element-icon] svg,\n  img,\n  span,\n  svg {\n    height: ", ";\n    min-height: ", ";\n    max-height: ", ";\n    width: ", ";\n    min-width: ", ";\n    max-width: ", ";\n  }\n"])), iconSize, iconSize, iconSize, iconSize, iconSize, iconSize);
+export var iconCss = css({
+  '&, [data-smart-element-icon] img, [data-smart-element-icon] span, [data-smart-element-icon] svg, img, span, svg': {
+    height: iconSize,
+    minHeight: iconSize,
+    maxHeight: iconSize,
+    width: iconSize,
+    minWidth: iconSize,
+    maxWidth: iconSize
+  }
+});
 var height = '20px';
-export var titleCss = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  flex: 1 1 auto;\n\n  h3 {\n    flex: 1 1 auto;\n    font-size: 16px;\n    font-weight: 400;\n    line-height: ", ";\n\n    display: -webkit-box;\n    margin-bottom: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    word-break: break-word;\n    -webkit-line-clamp: 1;\n    -webkit-box-orient: vertical;\n    // Fallback options\n    @supports not (-webkit-line-clamp: 1) {\n      max-height: ", ";\n    }\n  }\n"])), height, height);
-export var actionCss = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  flex: 0 0 auto;\n  gap: ", ";\n  line-height: ", ";\n  span {\n    line-height: ", ";\n  }\n\n  @media only screen and (max-width: 980px) {\n    // Hide resize button if the screen is smaller than the min width\n    // or too small to have enough impact to matter.\n    .smart-link-resize-button {\n      display: none;\n    }\n  }\n"])), "var(--ds-space-050, 4px)", height, height);
+export var titleCss = css({
+  flex: '1 1 auto',
+  h3: {
+    flex: '1 1 auto',
+    fontSize: '16px',
+    fontWeight: 400,
+    lineHeight: height,
+    display: '-webkit-box',
+    marginBottom: 0,
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    wordBreak: 'break-word',
+    WebkitLineClamp: 1,
+    WebkitBoxOrient: 'vertical',
+    '@supports not (-webkit-line-clamp: 1)': {
+      maxHeight: height
+    }
+  }
+});
+export var actionCss = css({
+  display: 'flex',
+  flex: '0 0 auto',
+  gap: "var(--ds-space-050, 4px)",
+  lineHeight: height,
+  span: {
+    lineHeight: height
+  },
+  '@media only screen and (max-width: 980px)': {
+    // Hide resize button if the screen is smaller than the min width
+    // or too small to have enough impact to matter.
+    '.smart-link-resize-button': {
+      display: 'none'
+    }
+  }
+});

package/dist/esm/view/FlexibleCard/components/common/atlaskit-icon/index.js

@@ -2,7 +2,8 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 var _importIconMapper;
 import React from 'react';
 import Loadable from 'react-loadable';
-import { B200, B400, N700, R400 } from '@atlaskit/theme/colors';
+import { R400 } from '@atlaskit/theme/colors';
+import { ConfluenceIcon, JiraIcon } from '@atlaskit/logo';
 import DocumentIcon from '@atlaskit/icon-file-type/glyph/document/16';
 import BlogIcon from '@atlaskit/icon-object/glyph/blog/16';
 import { IconType } from '../../../../../constants';
@@ -179,25 +180,14 @@ var AtlaskitIcon = function AtlaskitIcon(_ref3) {
   var ImportedIcon = importIcon(importFn);
   switch (icon) {
     case IconType.Confluence:
-      return /*#__PURE__*/React.createElement(ImportedIcon, {
-        testId: testId,
-        textColor: "var(--ds-text-subtle, ".concat(N700, ")")
-        /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */,
-        iconColor: B200,
-        iconGradientStart: B400,
-        iconGradientStop: B200
-        /* eslint-enable @atlaskit/design-system/ensure-design-token-usage */
+      return /*#__PURE__*/React.createElement(ConfluenceIcon, {
+        appearance: "brand",
+        testId: testId
       });
     case IconType.Jira:
-      // Logo component has a different prop set from other icon components
-      return /*#__PURE__*/React.createElement(ImportedIcon, {
-        testId: testId,
-        textColor: "var(--ds-text-subtle, ".concat(N700, ")")
-        /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */,
-        iconColor: B200,
-        iconGradientStart: B400,
-        iconGradientStop: B200
-        /* eslint-enable @atlaskit/design-system/ensure-design-token-usage */
+      return /*#__PURE__*/React.createElement(JiraIcon, {
+        appearance: "brand",
+        testId: testId
       });
     case IconType.Error:
     case IconType.Forbidden:

package/dist/esm/view/FlexibleCard/components/elements/lozenge/lozenge-action/lozenge-action-error/styled.js

@@ -1,14 +1,43 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
 import { css } from '@emotion/react';
 import { N800 } from '@atlaskit/theme/colors';
 import { getTruncateStyles } from '../../../../utils';
-export var dropdownItemGroupStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  button {\n    width: 220px;\n\n    &:hover {\n      background-color: inherit;\n      cursor: default;\n    }\n  }\n"])));
-var sharedBlockStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  gap: 0.5rem;\n  line-height: 1rem;\n  min-width: 0;\n  overflow: hidden;\n  flex-direction: row;\n  align-items: center;\n"])));
-export var contentStyles = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  ", ";\n\n  margin-top: ", ";\n  align-items: flex-start;\n\n  > span,\n  > div {\n    font-size: 0.875rem;\n    line-height: 1.25rem;\n    color: ", ";\n  }\n"])), sharedBlockStyles, "var(--ds-space-025, 2px)", "var(--ds-text, ".concat(N800, ")"));
-
-// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-export var linkStyles = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  ", ";\n\n  cursor: pointer;\n  font-size: 0.875rem;\n  margin-top: 10px;\n  margin-left: ", ";\n  margin-bottom: ", ";\n"])), sharedBlockStyles, "var(--ds-space-400, 32px)", "var(--ds-space-025, 2px)");
+export var dropdownItemGroupStyles = css({
+  button: {
+    width: '220px',
+    '&:hover': {
+      backgroundColor: 'inherit',
+      cursor: 'default'
+    }
+  }
+});
+var sharedBlockStyles = css({
+  display: 'flex',
+  gap: '0.5rem',
+  lineHeight: '1rem',
+  minWidth: 0,
+  overflow: 'hidden',
+  flexDirection: 'row',
+  alignItems: 'center'
+});
+export var contentStyles = css(sharedBlockStyles, {
+  marginTop: "var(--ds-space-025, 2px)",
+  alignItems: 'flex-start',
+  '> span, > div': {
+    fontSize: '0.875rem',
+    lineHeight: '1.25rem',
+    color: "var(--ds-text, ".concat(N800, ")")
+  }
+});
+export var linkStyles = css(sharedBlockStyles, {
+  cursor: 'pointer',
+  fontSize: '0.875rem',
+  marginTop: "var(--ds-space-100, 8px)",
+  marginLeft: "var(--ds-space-400, 32px)",
+  marginBottom: "var(--ds-space-025, 2px)"
+});
 export var textStyles = function textStyles(maxLines) {
-  return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  line-height: 1rem;\n  white-space: normal;\n  ", ";\n"])), getTruncateStyles(maxLines));
+  return css({
+    lineHeight: '1rem',
+    whiteSpace: 'normal'
+  }, getTruncateStyles(maxLines));
 };

package/dist/esm/view/InlineCard/Icon.js

@@ -1,5 +1,3 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject, _templateObject2;
 import styled from '@emotion/styled';
 import { Skeleton } from '@atlaskit/linking-common';
 import React from 'react';
@@ -9,17 +7,31 @@ import React from 'react';
 // Current rationale: vertically positioned at the top of
 // the smart card container (when set to 0). Offset this
 // to position it with appropriate whitespace from the top.
-export var Icon = styled.img(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  height: 14px;\n  width: 14px;\n  margin-right: ", ";\n  border-radius: 2px;\n  user-select: none;\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n"])), "var(--ds-space-050, 4px)");
+export var Icon = styled.img({
+  height: '14px',
+  width: '14px',
+  marginRight: "var(--ds-space-050, 4px)",
+  borderRadius: '2px',
+  userSelect: 'none',
+  position: 'absolute',
+  top: '50%',
+  left: '50%',
+  transform: 'translate(-50%, -50%)'
+});
 
 // Used for 'untrue' icons which claim to be 16x16 but
 // are less than that in height/width.
 // TODO: Replace this override with proper AtlasKit solution.
-export var AKIconWrapper = styled.span(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  margin-right: ", ";\n"])), "var(--ds-space-negative-025, -2px)");
+export var AKIconWrapper = styled.span({
+  marginRight: "var(--ds-space-negative-025, -2px)"
+});
 export var Shimmer = function Shimmer(_ref) {
   var testId = _ref.testId;
   var skeletonCustomStyles = {
     position: 'absolute',
+    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
     top: '50%',
+    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
     left: '50%',
     transform: 'translate(-50%, -50%)',
     marginRight: "var(--ds-space-050, 4px)"

package/dist/esm/view/LinkUrl/index.js

@@ -10,7 +10,7 @@ import { useLinkWarningModal } from './LinkWarningModal/hooks/use-link-warning-m
 import LinkWarningModal from './LinkWarningModal';
 var PACKAGE_DATA = {
   packageName: "@atlaskit/smart-card",
-  packageVersion: "26.50.4",
+  packageVersion: "26.50.6",
   componentName: 'linkUrl'
 };
 var Link = withLinkClickedEvent('a');

package/dist/esm/view/common/Byline.js

@@ -13,6 +13,7 @@ export var Byline = function Byline(_ref) {
       lineHeight: gs(2.5),
       color: "".concat("var(--ds-text-subtlest, ".concat(N300, ")")),
       fontWeight: 'normal',
+      // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
       marginTop: gs(0.5),
       // Spec: only allow two lines MAX to be shown.
       display: '-webkit-box',

package/dist/esm/view/common/MetadataList.js

@@ -10,6 +10,7 @@ export var MetadataList = function MetadataList(_ref) {
   return jsx("div", {
     css: {
       display: 'flex',
+      // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
       marginTop: gs(0.5),
       alignItems: 'center',
       '&:last-child': {

package/dist/esm/view/common/ai-prism/ai-glowing-border/animated-svg-container.js

@@ -1,18 +1,18 @@
 /** @jsx jsx */
 import { css, jsx } from '@emotion/react';
 import React, { useEffect, useRef } from 'react';
-import { GLOW_SIZE, OUTER_BORDER_RADIUS } from '../constants';
+import { OUTER_BORDER_RADIUS } from '../constants';
 var namespaceUUID = 0;
 var svgStyles = css({
   position: 'absolute',
   borderRadius: OUTER_BORDER_RADIUS
 });
 var blurredStyles = css({
-  width: "calc(100% - ".concat(GLOW_SIZE / 2, "px)"),
-  height: "calc(100% - ".concat(GLOW_SIZE / 2, "px)"),
-  top: GLOW_SIZE / 2,
-  left: GLOW_SIZE / 2,
-  filter: "blur(".concat(GLOW_SIZE, "px)"),
+  width: "calc(100% - ".concat("var(--ds-space-050, 4px)", ")"),
+  height: "calc(100% - ".concat("var(--ds-space-050, 4px)", ")"),
+  top: "var(--ds-space-050, 4px)",
+  left: "var(--ds-space-050, 4px)",
+  filter: "blur(".concat("var(--ds-space-100, 8px)", ")"),
   // for safari... : https://stackoverflow.com/a/71353198
   backfaceVisibility: 'hidden',
   transform: 'translate3d(0, 0, 0)'

package/dist/esm/view/common/ai-prism/constants.js

@@ -4,7 +4,6 @@
  * with modifications.
  */
 
-export var GLOW_SIZE = 8;
 export var INNER_BORDER_RADIUS = 8;
 export var OUTER_BORDER_RADIUS = 10;
 

package/dist/esm/view/common/ai-summary/index.js

@@ -3,6 +3,7 @@ import React from 'react';
 import Markdown from 'markdown-to-jsx';
 import { css, jsx } from '@emotion/react';
 import AIStateIndicator from '../../FlexibleCard/components/blocks/ai-summary-block/ai-state-indicator';
+import UList from './ulist';
 var AITooltipIcon = function AITooltipIcon() {
   return jsx(AIStateIndicator, {
     appearance: "icon-only",
@@ -10,7 +11,7 @@ var AITooltipIcon = function AITooltipIcon() {
     testId: "ai-tooltip"
   });
 };
-var AISummaryCSS = css({
+var AISummaryCSSStyles = css({
   fontSize: '0.75rem',
   lineHeight: '1rem',
   wordWrap: 'break-word',
@@ -38,12 +39,13 @@ var AISummary = function AISummary(_ref) {
   }
   return jsx(Markdown, {
     "data-testid": testId,
-    css: [AISummaryCSS, overrideCss],
+    css: [AISummaryCSSStyles, overrideCss],
     children: showIcon ? "".concat(content, "&nbsp;<Icon />") : content,
     options: {
       forceWrapper: true,
       overrides: {
-        Icon: iconComponent !== null && iconComponent !== void 0 ? iconComponent : AITooltipIcon
+        Icon: iconComponent !== null && iconComponent !== void 0 ? iconComponent : AITooltipIcon,
+        ul: UList
       }
     },
     style: {

package/dist/esm/view/common/ai-summary/ulist.js

@@ -0,0 +1,18 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["children"];
+/** @jsx jsx */
+import React from 'react';
+import { css, jsx } from '@emotion/react';
+var listStyles = css({
+  paddingLeft: "var(--ds-space-250, 20px)",
+  paddingInlineStart: "var(--ds-space-250, 20px)"
+});
+var UList = function UList(_ref) {
+  var children = _ref.children,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return jsx("ul", _extends({
+    css: listStyles
+  }, props), children);
+};
+export default UList;

package/dist/esm/view/common/utils.js

@@ -1,4 +1,8 @@
 import facepaint from 'facepaint';
+
+// this function is used for spacing, fontsize and line height,
+// once design tokens have been established for the all of these categories
+// then this function can be replaced with the tokens
 var gs = function gs(times) {
   return "".concat(8 * times, "px");
 };

package/dist/types/view/common/ai-prism/constants.d.ts

@@ -4,7 +4,6 @@ import { AIThemeBorderPalette } from './types';
  * https://bitbucket.org/atlassian/barrel/src/master/ui/platform/ui-kit/ai
  * with modifications.
  */
-export declare const GLOW_SIZE = 8;
 export declare const INNER_BORDER_RADIUS = 8;
 export declare const OUTER_BORDER_RADIUS = 10;
 export declare const aiThemeTokens: {

package/dist/types/view/common/ai-summary/ulist.d.ts

@@ -0,0 +1,4 @@
+/** @jsx jsx */
+import React from 'react';
+declare const UList: React.FC<React.HTMLAttributes<HTMLUListElement>>;
+export default UList;

package/dist/types-ts4.5/view/common/ai-prism/constants.d.ts

@@ -4,7 +4,6 @@ import { AIThemeBorderPalette } from './types';
  * https://bitbucket.org/atlassian/barrel/src/master/ui/platform/ui-kit/ai
  * with modifications.
  */
-export declare const GLOW_SIZE = 8;
 export declare const INNER_BORDER_RADIUS = 8;
 export declare const OUTER_BORDER_RADIUS = 10;
 export declare const aiThemeTokens: {

package/dist/types-ts4.5/view/common/ai-summary/ulist.d.ts

@@ -0,0 +1,4 @@
+/** @jsx jsx */
+import React from 'react';
+declare const UList: React.FC<React.HTMLAttributes<HTMLUListElement>>;
+export default UList;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/smart-card",
-  "version": "26.50.4",
+  "version": "26.50.6",
   "description": "Smart card component",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -51,10 +51,10 @@
     "@atlaskit/outbound-auth-flow-client": "^3.4.0",
     "@atlaskit/platform-feature-flags": "^0.2.1",
     "@atlaskit/popup": "^1.13.0",
-    "@atlaskit/primitives": "^5.0.0",
+    "@atlaskit/primitives": "^5.1.0",
     "@atlaskit/spinner": "^16.0.0",
     "@atlaskit/theme": "^12.6.0",
-    "@atlaskit/tokens": "^1.41.0",
+    "@atlaskit/tokens": "^1.42.0",
     "@atlaskit/tooltip": "^18.1.0",
     "@atlaskit/ufo": "^0.2.0",
     "@babel/runtime": "^7.0.0",