@atlaskit/smart-card 26.55.1 → 26.56.0

package/dist/es2019/view/FlexibleCard/components/container/layered-link/index.js

@@ -2,24 +2,22 @@
 import React from 'react';
 import { jsx, css } from '@emotion/react';
 import { useMouseDownEvent } from '../../../../../state/analytics/useLinkClicked';
-const styles = css`
+const styles = css({
   // Stretch the invisible link over the whole of the post.
   // Hide the link’s text.
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  overflow: hidden;
-  text-indent: 100%;
-  white-space: nowrap;
-
+  top: 0,
+  right: 0,
+  bottom: 0,
+  left: 0,
+  overflow: 'hidden',
+  textIndent: '100%',
+  whiteSpace: 'nowrap',
   // Needs a heightened specificity to trump other anchor.
   // Stack it under all other links in the post text.
-  a&.layered-link {
-    position: absolute;
-    z-index: 0;
-  }
-
+  'a&.layered-link': {
+    position: 'absolute',
+    zIndex: 0
+  },
   // When hovering over the layered link, any hidden action buttons inside
   // the Container should become visible.
   // As actions resides inside blocks and layered link is expected to be
@@ -30,12 +28,12 @@ const styles = css`
   // iterations of the second element, that are following the first element
   // (though not necessarily immediately), and are children of the same parent
   // element.
-  &:hover ~ * {
-    .actions-button-group {
-      opacity: 1;
+  '&:hover ~ *': {
+    '.actions-button-group': {
+      opacity: 1
     }
   }
-`;
+});
 
 /**
  * An anchor component to cover the entire container creating a clickable area.

package/dist/es2019/view/FlexibleCard/components/elements/atlaskit-badge/index.js

@@ -2,10 +2,10 @@
 import React from 'react';
 import AKBadge from '@atlaskit/badge';
 import { css, jsx } from '@emotion/react';
-const badgeStyles = css`
-  align-items: center;
-  display: inline-flex;
-`;
+const badgeStyles = css({
+  alignItems: 'center',
+  display: 'inline-flex'
+});
 
 /**
  * A base element that displays a visual indicator for a numeric value

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

@@ -1,4 +1,5 @@
 /** @jsx jsx */
+
 import React, { useMemo } from 'react';
 import { css, jsx } from '@emotion/react';
 import AtlaskitAvatarGroup from '@atlaskit/avatar-group';
@@ -9,14 +10,13 @@ import { ElementName } from '../../../../../constants';
 import { getFormattedMessageAsString } from '../../utils';
 const MAX_COUNT = 4;
 const getStyles = size => {
-  const styles = css`
-    display: inline-flex;
-    ul,
-    ul {
-      margin-right: 0.5rem;
-      margin-top: 0;
+  const styles = css({
+    display: 'inline-flex',
+    ul: {
+      marginRight: "var(--ds-space-100, 0.5rem)",
+      marginTop: 0
     }
-  `;
+  });
   switch (size) {
     case SmartLinkSize.XLarge:
     case SmartLinkSize.Large:
@@ -25,6 +25,7 @@ const getStyles = size => {
     case SmartLinkSize.Medium:
     case SmartLinkSize.Small:
     default:
+      // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
       return css`
         ${styles}
         li {

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

@@ -6,11 +6,13 @@ import { IconType } from '../../../../../constants';
 import { messages } from '../../../../../messages';
 import ImageIcon from '../../common/image-icon';
 import AtlaskitIcon from '../../common/atlaskit-icon';
-const badgeStyles = css`
-  align-items: center;
-  display: inline-flex;
-  min-width: fit-content;
-`;
+const badgeStyles = css({
+  alignItems: 'center',
+  display: 'inline-flex',
+  minWidth: 'fit-content'
+});
+
+// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
 const iconStyles = css`
   color: ${"var(--ds-icon-subtle, #626F86)"};
   line-height: 0;
@@ -23,13 +25,13 @@ const iconStyles = css`
     vertical-align: middle;
   }
 `;
-const labelStyles = css`
-  color: ${"var(--ds-text-subtlest, #626F86)"};
-  font-size: 0.75rem;
-  line-height: 1rem;
-  padding-left: 0.125rem;
-  vertical-align: middle;
-`;
+const labelStyles = css({
+  color: "var(--ds-text-subtlest, #626F86)",
+  fontSize: '0.75rem',
+  lineHeight: '1rem',
+  paddingLeft: "var(--ds-space-025, 0.125rem)",
+  verticalAlign: 'middle'
+});
 const messageMapper = {
   [IconType.PriorityBlocker]: messages.priority_blocker,
   [IconType.PriorityCritical]: messages.priority_critical,

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

@@ -6,12 +6,11 @@ import { css, jsx } from '@emotion/react';
 import { getTruncateStyles } from '../../utils';
 import { selectUnit } from '@formatjs/intl-utils';
 import { messages } from '../../../../../messages';
-const styles = css`
-  color: ${"var(--ds-text-subtlest, #626F86)"};
-  font-size: 0.75rem;
-  line-height: 1rem;
-  ${getTruncateStyles(1)}
-`;
+const styles = css({
+  color: "var(--ds-text-subtlest, #626F86)",
+  fontSize: '0.75rem',
+  lineHeight: '1rem'
+}, getTruncateStyles(1));
 const typeToDescriptorMap = {
   created: {
     relative: messages.created_on_relative,

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

@@ -9,34 +9,30 @@ import { getIconSizeStyles, getIconWidth, getTruncateStyles } from '../../utils'
 const getPositionStyles = position => {
   switch (position) {
     case SmartLinkPosition.Center:
-      return css`
-        align-self: center;
-      `;
+      return css({
+        alignSelf: 'center'
+      });
     case SmartLinkPosition.Top:
     default:
-      return css`
-        align-self: flex-start;
-        margin: 0;
-      `;
+      return css({
+        alignSelf: 'flex-start',
+        margin: 0
+      });
   }
 };
-const getIconStyles = (position, width) => css`
-  ${getPositionStyles(position)}
-  ${getIconSizeStyles(width)}
-`;
-const getCustomRenderStyles = value => css`
-  ${getTruncateStyles(1, value)}
-  line-height: ${value};
-  font-size: ${value};
-  text-align: center;
-  text-overflow: clip;
-  -webkit-box-orient: unset;
-  span {
-    margin: 0;
-    padding: 0;
-    vertical-align: baseline;
+const getIconStyles = (position, width) => css(getPositionStyles(position), getIconSizeStyles(width));
+const getCustomRenderStyles = value => css(getTruncateStyles(1, value), {
+  lineHeight: value,
+  fontSize: value,
+  textAlign: 'center',
+  textOverflow: 'clip',
+  WebkitBoxOrient: 'unset',
+  span: {
+    margin: 0,
+    padding: 0,
+    verticalAlign: 'baseline'
   }
-`;
+});
 const renderAtlaskitIcon = (icon, label, testId) => {
   if (icon) {
     return jsx(AtlaskitIcon, {
@@ -85,6 +81,7 @@ const Icon = ({
   const styles = getIconStyles(position, width);
   const renderStyles = render ? getCustomRenderStyles(width) : undefined;
   return jsx("div", {
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- needs dynamic css
     css: [styles, renderStyles, overrideCss],
     "data-fit-to-content": true,
     "data-smart-element": name,

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

@@ -9,62 +9,55 @@ import { useMouseDownEvent } from '../../../../../state/analytics/useLinkClicked
 const DEFAULT_MAX_LINES = 2;
 const MAXIMUM_MAX_LINES = 2;
 const MINIMUM_MAX_LINES = 1;
-const containerStyles = css`
-  flex: 1 1 auto;
-`;
+const containerStyles = css({
+  flex: '1 1 auto'
+});
 const getThemeStyles = theme => {
   switch (theme) {
     case SmartLinkInternalTheme.Grey:
       // We are being specifc with the CSS selectors to ensure that Confluence overrides
       // do not affect our internal Smart Card styles
-      return css`
-        a& {
-          color: ${"var(--ds-text-subtlest, #626F86)"};
-          &:active,
-          &:visited,
-          &:focus,
-          &:hover {
-            color: ${"var(--ds-text-subtlest, #626F86)"};
-            text-decoration: underline;
-          }
-          font-size: 12px;
+      return css({
+        'a&': {
+          color: "var(--ds-text-subtlest, #626F86)",
+          '&:active, &:visited, &:focus, &:hover': {
+            color: "var(--ds-text-subtlest, #626F86)",
+            textDecoration: 'underline'
+          },
+          fontSize: '12px'
         }
-      `;
+      });
     // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
     case SmartLinkTheme.Black:
-      return css`
-        color: ${"var(--ds-text-subtle, #44546F)"};
-        :active {
-          color: ${"var(--ds-text, #172B4D)"};
+      return css({
+        color: "var(--ds-text-subtle, #44546F)",
+        ':active': {
+          color: "var(--ds-text, #172B4D)"
+        },
+        ':hover': {
+          color: "var(--ds-text-subtle, #44546F)",
+          textDecoration: 'underline'
         }
-        :hover {
-          color: ${"var(--ds-text-subtle, #44546F)"};
-          text-decoration: underline;
-        }
-      `;
+      });
     case SmartLinkTheme.Link:
     default:
-      return css`
-        color: ${"var(--ds-link, #0C66E4)"};
-        :active {
-          color: ${"var(--ds-link-pressed, #0055CC)"};
-        }
-        :hover {
-          color: ${"var(--ds-link, #0C66E4)"};
-          text-decoration: underline;
+      return css({
+        color: "var(--ds-link, #0C66E4)",
+        ':active': {
+          color: "var(--ds-link-pressed, #0055CC)"
+        },
+        ':hover': {
+          color: "var(--ds-link, #0C66E4)",
+          textDecoration: 'underline'
         }
-      `;
+      });
   }
 };
 const getAnchorStyles = (size, theme, maxLines, hasSpace) => {
   const sizeStyles = getLinkSizeStyles(size);
-  return css`
-    flex: 1 1 auto;
-    ${sizeStyles}
-    ${getTruncateStyles(maxLines, getLinkLineHeight(size), hasSpace ? 'break-word' : 'break-all')}
-    // Theme should be last to be spread because it contains override values
-    ${getThemeStyles(theme)}
-  `;
+  return css({
+    flex: '1 1 auto'
+  }, sizeStyles, getTruncateStyles(maxLines, getLinkLineHeight(size), hasSpace ? 'break-word' : 'break-all'), getThemeStyles(theme));
 };
 const getMaxLines = maxLines => {
   if (maxLines > MAXIMUM_MAX_LINES) {

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

@@ -4,10 +4,10 @@ import { css, jsx } from '@emotion/react';
 import AtlaskitLozenge from '@atlaskit/lozenge';
 import LozengeAction from './lozenge-action';
 import { useFlexibleUiOptionContext } from '../../../../../state/flexible-ui-context';
-const styles = css`
-  display: inline-flex;
-  line-height: inherit;
-`;
+const styles = css({
+  display: 'inline-flex',
+  lineHeight: 'inherit'
+});
 
 /**
  * A base element that displays a Lozenge.

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

@@ -1,60 +1,49 @@
 import { css } from '@emotion/react';
-export const triggerButtonStyles = css`
-  all: unset;
-  background-color: transparent;
-  color: unset;
-  cursor: pointer;
-  font-family: unset;
-  font-size: unset;
-  font-style: unset;
-  font-weight: unset;
-  font-variant: unset;
-  line-height: 0;
-  padding: 0;
-  text-transform: unset;
-
-  border: 2px solid transparent;
-  margin: ${"var(--ds-space-025, 2px)"};
-
-  &:focus-visible,
-  &:focus-within,
-  &[aria-expanded='true'] {
-    outline: none;
-    box-shadow: 0 0 0 2px ${"var(--ds-border-focused, #388BFF)"};
-    border-radius: 5px;
+export const triggerButtonStyles = css({
+  all: 'unset',
+  backgroundColor: 'transparent',
+  color: 'unset',
+  cursor: 'pointer',
+  fontFamily: 'unset',
+  fontSize: 'unset',
+  fontStyle: 'unset',
+  fontWeight: 'unset',
+  fontVariant: 'unset',
+  lineHeight: 0,
+  padding: 0,
+  textTransform: 'unset',
+  border: '2px solid transparent',
+  margin: "var(--ds-space-025, 2px)",
+  "&:focus-visible, &:focus-within, &[aria-expanded='true']": {
+    outline: 'none',
+    boxShadow: `0 0 0 2px ${"var(--ds-border-focused, #388BFF)"}`,
+    borderRadius: '5px'
   }
-`;
+});
 
 // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-export const triggerLozengeStyles = css`
-  align-items: center;
-  display: flex;
-
-  span[role='img'] {
-    margin: ${"var(--ds-space-negative-050, -4px)"}
-      ${"var(--ds-space-negative-100, -8px)"}
-      ${"var(--ds-space-negative-050, -4px)"} -1px;
+export const triggerLozengeStyles = css({
+  alignItems: 'center',
+  display: 'flex',
+  "span[role='img']": {
+    margin: `${"var(--ds-space-negative-050, -4px)"} ${"var(--ds-space-negative-100, -8px)"} ${"var(--ds-space-negative-050, -4px)"} -1px`
   }
-`;
-export const dropdownItemGroupStyles = css`
-  max-height: 300px;
-  overflow-y: auto;
-
-  button {
-    padding: ${"var(--ds-space-075, 6px)"} ${"var(--ds-space-150, 12px)"};
-    min-height: 28px;
-    width: 220px;
-
-    &:hover {
-      background-color: inherit;
-    }
-
-    &:focus,
-    &:focus-visible {
-      background-color: ${"var(--ds-background-neutral-subtle-hovered, #091E420F)"};
-      box-sizing: border-box;
-      box-shadow: inset 2px 0 0 ${"var(--ds-border-selected, #0C66E4)"};
-      outline: none;
+});
+export const dropdownItemGroupStyles = css({
+  maxHeight: '300px',
+  overflowY: 'auto',
+  button: {
+    padding: `${"var(--ds-space-075, 6px)"} ${"var(--ds-space-150, 12px)"}`,
+    minHeight: '28px',
+    width: '220px',
+    '&:hover': {
+      backgroundColor: 'inherit'
+    },
+    '&:focus, &:focus-visible': {
+      backgroundColor: "var(--ds-background-neutral-subtle-hovered, #091E420F)",
+      boxSizing: 'border-box',
+      boxShadow: `inset 2px 0 0 ${"var(--ds-border-selected, #0C66E4)"}`,
+      outline: 'none'
     }
   }
-`;
+});

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

@@ -12,40 +12,36 @@ import ImageIcon from '../../common/image-icon';
  * [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;
-  width: 100%;
-  height: fit-content; // Fix Safari height not respecting aspect-ratio
-
-  // fallback
-  @supports not (aspect-ratio: auto) {
-    padding-top: 56.25%; // 16:9 ratio (9 / 16 = 0.5625)
-    height: 0;
-    position: relative;
-    overflow: hidden;
-  }
-
-  > img,
-  > span {
-    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;
+const styles = css({
+  aspectRatio: '16 / 9',
+  display: 'flex',
+  width: '100%',
+  height: 'fit-content',
+  '@supports not (aspect-ratio: auto)': {
+    // eslint-disable-next-line @atlaskit/design-system/use-tokens-space -- needs manual remediation
+    paddingTop: '56.25%',
+    // 16:9 ratio (9 / 16 = 0.5625)
+    height: 0,
+    position: 'relative',
+    overflow: 'hidden'
+  },
+  '> img, > span': {
+    minHeight: '100%',
+    minWidth: '100%',
+    maxHeight: '100%',
+    maxWidth: '100%',
+    objectFit: 'cover',
+    objectPosition: 'center center',
+    '@supports not (aspect-ratio: auto)': {
+      position: 'absolute',
+      transform: 'translate(-50%, -50%)',
+      left: '50%',
+      top: '50%',
+      width: 'auto',
+      height: 'auto'
     }
   }
-`;
+});
 
 /**
  * A base element that displays a Media.

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

@@ -2,13 +2,12 @@
 import React from 'react';
 import { css, jsx } from '@emotion/react';
 import { getFormattedMessage, getTruncateStyles } from '../../utils';
-const getStyles = maxLines => css`
-  color: ${"var(--ds-text-subtlest, #626F86)"};
-  font-size: 0.75rem;
-  line-height: 1rem;
-  white-space: normal;
-  ${getTruncateStyles(maxLines)}
-`;
+const getStyles = maxLines => css({
+  color: "var(--ds-text-subtlest, #626F86)",
+  fontSize: '0.75rem',
+  lineHeight: '1rem',
+  whiteSpace: 'normal'
+}, getTruncateStyles(maxLines));
 
 /**
  * A base element that displays some Text.

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

@@ -40,6 +40,7 @@ const getIconDimensionStyles = value => css({
 });
 export const getIconSizeStyles = width => {
   const sizeStyles = getIconDimensionStyles(width);
+  // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
   return css`
     flex: 0 0 auto;
     ${sizeStyles}

package/dist/es2019/view/HoverCard/components/ContentContainer.js

@@ -8,6 +8,7 @@ import AIPrism from '../../common/ai-prism';
 import { hoverCardClassName } from './HoverCardContent';
 import { useAISummary } from '../../../state/hooks/use-ai-summary';
 import { useSmartCardState } from '../../../state/store';
+import { useSmartLinkContext } from '@atlaskit/link-provider';
 import { extractAri, extractLink } from '@atlaskit/link-extractors';
 import { di } from 'react-magnetic-di';
 const ConnectedAIPrismContainer = ({
@@ -24,13 +25,17 @@ const ConnectedAIPrismContainer = ({
   //The data is undefined while the link is resolving.
   const dataUrl = data ? extractLink(data) : null;
   const dataAri = data ? extractAri(data) : null;
+  const {
+    product
+  } = useSmartLinkContext();
   const {
     state: {
       status
     }
   } = useAISummary({
     url: dataUrl || '',
-    ari: dataAri || ''
+    ari: dataAri || '',
+    product: product
   });
   const [showPrism, setShowPrism] = useState(status === 'loading');
   useEffect(() => {

package/dist/es2019/view/HoverCard/components/views/forbidden/styled.js

@@ -1,18 +1,18 @@
 import { css } from '@emotion/react';
 const titleFontWeight = '600';
-export const titleBlockStyles = css`
-  justify-content: center;
-  font-weight: ${titleFontWeight};
-  margin-top: ${"var(--ds-space-100, 8px)"};
-`;
-export const mainTextStyles = css`
-  display: inline;
-  justify-content: center;
-  margin-top: ${"var(--ds-space-0, 0px)"};
-  font-size: 0.75rem;
-  text-align: center;
-`;
-export const connectButtonStyles = css`
-  justify-content: center;
-  margin-top: ${"var(--ds-space-100, 8px)"};
-`;
+export const titleBlockStyles = css({
+  justifyContent: 'center',
+  fontWeight: titleFontWeight,
+  marginTop: "var(--ds-space-100, 8px)"
+});
+export const mainTextStyles = css({
+  display: 'inline',
+  justifyContent: 'center',
+  marginTop: "var(--ds-space-0, 0px)",
+  fontSize: '0.75rem',
+  textAlign: 'center'
+});
+export const connectButtonStyles = css({
+  justifyContent: 'center',
+  marginTop: "var(--ds-space-100, 8px)"
+});