@atlaskit/smart-card 26.50.4 → 26.50.6

package/dist/es2019/view/EmbedCard/components/styled.js

@@ -143,9 +143,10 @@ export const LinkWrapper = styled.div`
     text-decoration: none;
   }
 `;
-
-// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
 export const Wrapper = styled.div(props => wrapperStyles(props), {
+  // We are keeping this margin as a hardcoded variable as it is not a standard token size and needs
+  // to be thoroughly checked with a designer so that we do not miss an unintended visual change
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
   marginTop: '10px'
 });
 export const embedHeaderHeight = 32;
@@ -268,10 +269,8 @@ export const Byline = styled.div({
   fontWeight: 'normal',
   lineHeight: 16 / 12
 }, ellipsis('100%'));
-
-// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
 export const Description = styled.div({
-  marginTop: '7px',
+  marginTop: `calc(${"var(--ds-space-100, 8px)"} - 1px)`,
   color: `var(--ds-text, ${colors.N800})`,
   fontSize: '12px',
   fontWeight: 'normal',

package/dist/es2019/view/EmbedCard/views/ErroredView.js

@@ -25,7 +25,9 @@ export const EmbedCardErroredView = ({
 }), jsx("span", {
   css: {
     fontSize: `${fontSize()}px`,
+    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
     marginLeft: gs(0.5),
+    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
     marginRight: gs(0.5),
     display: '-webkit-box',
     overflow: 'hidden',

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

@@ -1,73 +1,61 @@
 import { css } from '@emotion/react';
-// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-export const containerStyles = css`
-  align-items: center;
-  display: flex;
-  gap: ${"var(--ds-space-100, 8px)"};
-  justify-content: space-between;
+export const 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)"} ${"var(--ds-space-300, 24px)"} 14px
-    ${"var(--ds-space-300, 24px)"};
-`;
+  padding: `${"var(--ds-space-300, 24px)"} ${"var(--ds-space-300, 24px)"} 14px ${"var(--ds-space-300, 24px)"}`
+});
 const 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 const iconCss = css`
-  &,
-  [data-smart-element-icon] img,
-  [data-smart-element-icon] span,
-  [data-smart-element-icon] svg,
-  img,
-  span,
-  svg {
-    height: ${iconSize};
-    min-height: ${iconSize};
-    max-height: ${iconSize};
-    width: ${iconSize};
-    min-width: ${iconSize};
-    max-width: ${iconSize};
+export const 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
   }
-`;
+});
 const height = '20px';
-export const titleCss = css`
-  flex: 1 1 auto;
-
-  h3 {
-    flex: 1 1 auto;
-    font-size: 16px;
-    font-weight: 400;
-    line-height: ${height};
-
-    display: -webkit-box;
-    margin-bottom: 0;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    word-break: break-word;
-    -webkit-line-clamp: 1;
-    -webkit-box-orient: vertical;
-    // Fallback options
-    @supports not (-webkit-line-clamp: 1) {
-      max-height: ${height};
+export const 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 const actionCss = css`
-  display: flex;
-  flex: 0 0 auto;
-  gap: ${"var(--ds-space-050, 4px)"};
-  line-height: ${height};
-  span {
-    line-height: ${height};
-  }
-
-  @media only screen and (max-width: 980px) {
+});
+export const 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;
+    '.smart-link-resize-button': {
+      display: 'none'
     }
   }
-`;
+});

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

@@ -1,6 +1,7 @@
 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';
@@ -113,25 +114,14 @@ const AtlaskitIcon = ({
   const ImportedIcon = importIcon(importFn);
   switch (icon) {
     case IconType.Confluence:
-      return /*#__PURE__*/React.createElement(ImportedIcon, {
-        testId: testId,
-        textColor: `var(--ds-text-subtle, ${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, ${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/es2019/view/FlexibleCard/components/elements/lozenge/lozenge-action/lozenge-action-error/styled.js

@@ -1,51 +1,41 @@
 import { css } from '@emotion/react';
 import { N800 } from '@atlaskit/theme/colors';
 import { getTruncateStyles } from '../../../../utils';
-export const dropdownItemGroupStyles = css`
-  button {
-    width: 220px;
-
-    &:hover {
-      background-color: inherit;
-      cursor: default;
+export const dropdownItemGroupStyles = css({
+  button: {
+    width: '220px',
+    '&:hover': {
+      backgroundColor: 'inherit',
+      cursor: 'default'
     }
   }
-`;
-const sharedBlockStyles = css`
-  display: flex;
-  gap: 0.5rem;
-  line-height: 1rem;
-  min-width: 0;
-  overflow: hidden;
-  flex-direction: row;
-  align-items: center;
-`;
-export const contentStyles = css`
-  ${sharedBlockStyles};
-
-  margin-top: ${"var(--ds-space-025, 2px)"};
-  align-items: flex-start;
-
-  > span,
-  > div {
-    font-size: 0.875rem;
-    line-height: 1.25rem;
-    color: ${`var(--ds-text, ${N800})`};
+});
+const sharedBlockStyles = css({
+  display: 'flex',
+  gap: '0.5rem',
+  lineHeight: '1rem',
+  minWidth: 0,
+  overflow: 'hidden',
+  flexDirection: 'row',
+  alignItems: 'center'
+});
+export const contentStyles = css(sharedBlockStyles, {
+  marginTop: "var(--ds-space-025, 2px)",
+  alignItems: 'flex-start',
+  '> span, > div': {
+    fontSize: '0.875rem',
+    lineHeight: '1.25rem',
+    color: `var(--ds-text, ${N800})`
   }
-`;
-
-// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-export const linkStyles = css`
-  ${sharedBlockStyles};
-
-  cursor: pointer;
-  font-size: 0.875rem;
-  margin-top: 10px;
-  margin-left: ${"var(--ds-space-400, 32px)"};
-  margin-bottom: ${"var(--ds-space-025, 2px)"};
-`;
-export const textStyles = maxLines => css`
-  line-height: 1rem;
-  white-space: normal;
-  ${getTruncateStyles(maxLines)};
-`;
+});
+export const 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 const textStyles = maxLines => css({
+  lineHeight: '1rem',
+  whiteSpace: 'normal'
+}, getTruncateStyles(maxLines));

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

@@ -7,30 +7,32 @@ 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 const Icon = styled.img`
-  height: 14px;
-  width: 14px;
-  margin-right: ${"var(--ds-space-050, 4px)"};
-  border-radius: 2px;
-  user-select: none;
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-`;
+export const 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 const AKIconWrapper = styled.span`
-  margin-right: ${"var(--ds-space-negative-025, -2px)"};
-`;
+export const AKIconWrapper = styled.span({
+  marginRight: "var(--ds-space-negative-025, -2px)"
+});
 export const Shimmer = ({
   testId
 }) => {
   const 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/es2019/view/LinkUrl/index.js

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

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

@@ -13,6 +13,7 @@ export const Byline = ({
     lineHeight: gs(2.5),
     color: `${`var(--ds-text-subtlest, ${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/es2019/view/common/MetadataList.js

@@ -11,6 +11,7 @@ export const MetadataList = ({
   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/es2019/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';
 let namespaceUUID = 0;
 const svgStyles = css({
   position: 'absolute',
   borderRadius: OUTER_BORDER_RADIUS
 });
 const blurredStyles = css({
-  width: `calc(100% - ${GLOW_SIZE / 2}px)`,
-  height: `calc(100% - ${GLOW_SIZE / 2}px)`,
-  top: GLOW_SIZE / 2,
-  left: GLOW_SIZE / 2,
-  filter: `blur(${GLOW_SIZE}px)`,
+  width: `calc(100% - ${"var(--ds-space-050, 4px)"})`,
+  height: `calc(100% - ${"var(--ds-space-050, 4px)"})`,
+  top: "var(--ds-space-050, 4px)",
+  left: "var(--ds-space-050, 4px)",
+  filter: `blur(${"var(--ds-space-100, 8px)"})`,
   // for safari... : https://stackoverflow.com/a/71353198
   backfaceVisibility: 'hidden',
   transform: 'translate3d(0, 0, 0)'

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

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

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

@@ -3,12 +3,13 @@ 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';
 const AITooltipIcon = () => jsx(AIStateIndicator, {
   appearance: "icon-only",
   state: "done",
   testId: "ai-tooltip"
 });
-const AISummaryCSS = css({
+const AISummaryCSSStyles = css({
   fontSize: '0.75rem',
   lineHeight: '1rem',
   wordWrap: 'break-word',
@@ -33,12 +34,13 @@ const AISummary = ({
   }
   return jsx(Markdown, {
     "data-testid": testId,
-    css: [AISummaryCSS, overrideCss],
+    css: [AISummaryCSSStyles, overrideCss],
     children: showIcon ? `${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/es2019/view/common/ai-summary/ulist.js

@@ -0,0 +1,15 @@
+import _extends from "@babel/runtime/helpers/extends";
+/** @jsx jsx */
+import React from 'react';
+import { css, jsx } from '@emotion/react';
+const listStyles = css({
+  paddingLeft: "var(--ds-space-250, 20px)",
+  paddingInlineStart: "var(--ds-space-250, 20px)"
+});
+const UList = ({
+  children,
+  ...props
+}) => jsx("ul", _extends({
+  css: listStyles
+}, props), children);
+export default UList;

package/dist/es2019/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
 const gs = times => `${8 * times}px`;
 const br = (times = 1) => `${3 * times}px`;
 const mq = facepaint(['@media(min-width: 576px)']);

package/dist/esm/utils/analytics/analytics.js

@@ -15,7 +15,7 @@ export var ANALYTICS_CHANNEL = 'media';
 export var context = {
   componentName: 'smart-cards',
   packageName: "@atlaskit/smart-card",
-  packageVersion: "26.50.4"
+  packageVersion: "26.50.6"
 };
 export var TrackQuickActionType = /*#__PURE__*/function (TrackQuickActionType) {
   TrackQuickActionType["StatusUpdate"] = "StatusUpdate";

package/dist/esm/view/BlockCard/components/ActionIcon.js

@@ -8,7 +8,9 @@ import CrossIcon from '@atlaskit/icon/glyph/cross';
 export var spinnerStyles = {
   display: 'flex',
   position: 'absolute',
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
   left: '50%',
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
   top: '50%',
   transform: 'translate(-50%, -50%)'
 };

package/dist/esm/view/BlockCard/components/ActionList.js

@@ -17,13 +17,16 @@ export var ActionList = function ActionList(_ref) {
   return jsx("div", {
     css: mq({
       display: 'flex',
+      // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
       marginTop: [gs(2), 0]
     })
   }, jsx(ButtonGroup, null, actionsToShow.map(function (action) {
     return jsx(Action, _extends({
       key: action.id
     }, action));
-  })), actionsToList.length ? jsx("div", {
+  })), actionsToList.length ?
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
+  jsx("div", {
     css: {
       marginLeft: gs(0.5)
     }

package/dist/esm/view/BlockCard/components/Content.js

@@ -14,6 +14,7 @@ export var Content = function Content(_ref) {
     isCompact = _ref$isCompact === void 0 ? false : _ref$isCompact;
   return jsx("div", {
     css: mq({
+      // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
       padding: isCompact ? gs(1) : gs(2),
       display: 'flex',
       flexDirection: 'column',

package/dist/esm/view/BlockCard/components/ContentFooter.js

@@ -13,6 +13,7 @@ export var ContentFooter = function ContentFooter(_ref) {
       flexGrow: [1, 'unset'],
       justifyContent: [hasSpaceBetween ? 'space-between' : 'flex-end', 'space-between'],
       alignItems: ['unset', 'center'],
+      // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
       marginTop: [gs(1), gs(1.5)]
     }),
     className: contentFooterClassName

package/dist/esm/view/BlockCard/components/Frame.js

@@ -65,6 +65,7 @@ export var CompactFrame = function CompactFrame(_ref2) {
       height: inheritDimensions ? '100%' : gs(5),
       backgroundColor: "var(--ds-background-neutral, ".concat(N20A, ")"),
       width: ['calc(100% - 16px)', '100%'],
+      // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
       padding: ["0px ".concat(gs(1)), '0']
     })),
     "data-testid": testId,

package/dist/esm/view/BlockCard/components/Name.js

@@ -19,6 +19,7 @@ export var Name = function Name(_ref) {
     css: {
       fontSize: "".concat(fontSize(), "px"),
       fontWeight: 500,
+      // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
       marginLeft: isLeftPadded ? gs(1) : '0',
       lineHeight: gs(2.5),
       // Spec: show max two lines.

package/dist/esm/view/BlockCard/components/Provider.js

@@ -27,6 +27,7 @@ export var Provider = function Provider(_ref) {
     css: {
       color: "var(--ds-text-subtlest, ".concat(N300, ")"),
       margin: 0,
+      // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
       marginLeft: gs(0.5),
       // EDM-713: fixes copy-paste from renderer to editor for Firefox
       // due to HTML its unwrapping behaviour on paste.

package/dist/esm/view/BlockCard/views/ResolvingView.js

@@ -4,9 +4,9 @@ import DocumentFilledIcon from '@atlaskit/icon/glyph/document-filled';
 import { N50, N90 } from '@atlaskit/theme/colors';
 import { fontSize } from '@atlaskit/theme/constants';
 import { Frame } from '../components/Frame';
-import { gs } from '../../common/utils';
 import { FormattedMessage } from 'react-intl-next';
 import { messages } from '../../../messages';
+import { gs } from '../../common/utils';
 /**
  * Class name for selecting non-flexible resolving block card
  *
@@ -34,6 +34,7 @@ export var ResolvingView = function ResolvingView(_ref) {
     css: {
       fontSize: "".concat(fontSize(), "px"),
       color: "var(--ds-text-subtlest, ".concat(N90, ")"),
+      // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
       marginLeft: gs(0.5)
     }
   }, jsx(FormattedMessage, messages.loading)));

package/dist/esm/view/EmbedCard/components/styled.js

@@ -71,11 +71,12 @@ function visible(_ref7) {
 export var LinkWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", " &:hover {\n    text-decoration: none;\n  }\n"])), function (props) {
   return wrapperStyles(props);
 });
-
-// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
 export var Wrapper = styled.div(function (props) {
   return wrapperStyles(props);
 }, {
+  // We are keeping this margin as a hardcoded variable as it is not a standard token size and needs
+  // to be thoroughly checked with a designer so that we do not miss an unintended visual change
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
   marginTop: '10px'
 });
 export var embedHeaderHeight = 32;
@@ -160,10 +161,8 @@ export var Byline = styled.div({
   fontWeight: 'normal',
   lineHeight: 16 / 12
 }, ellipsis('100%'));
-
-// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
 export var Description = styled.div({
-  marginTop: '7px',
+  marginTop: "calc(".concat("var(--ds-space-100, 8px)", " - 1px)"),
   color: "var(--ds-text, ".concat(colors.N800, ")"),
   fontSize: '12px',
   fontWeight: 'normal',

package/dist/esm/view/EmbedCard/views/ErroredView.js

@@ -27,7 +27,9 @@ export var EmbedCardErroredView = function EmbedCardErroredView(_ref) {
   }), jsx("span", {
     css: {
       fontSize: "".concat(fontSize(), "px"),
+      // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
       marginLeft: gs(0.5),
+      // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
       marginRight: gs(0.5),
       display: '-webkit-box',
       overflow: 'hidden',