@atlaskit/smart-card 26.55.2 → 26.56.0

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

@@ -24,6 +24,7 @@ import { Preview } from '../../../elements';
 const getPreviewBlockStyles = (placement, ignoreContainerPadding) => {
   if (placement === MediaPlacement.Left || placement === MediaPlacement.Right) {
     const containerPadding = ignoreContainerPadding ? '0rem' : 'var(--container-padding)';
+    // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
     return css`
       position: absolute;
       top: ${containerPadding};
@@ -43,16 +44,16 @@ const getPreviewBlockStyles = (placement, ignoreContainerPadding) => {
     `;
   }
   if (ignoreContainerPadding) {
-    return css`
-      margin-left: calc(var(--container-gap-left) * -1);
-      margin-right: calc(var(--container-gap-right) * -1);
-      &:first-of-type {
-        margin-top: calc(var(--container-padding) * -1);
-      }
-      &:last-of-type {
-        margin-bottom: calc(var(--container-padding) * -1);
+    return css({
+      marginLeft: 'calc(var(--container-gap-left) * -1)',
+      marginRight: 'calc(var(--container-gap-right) * -1)',
+      '&:first-of-type': {
+        marginTop: 'calc(var(--container-padding) * -1)'
+      },
+      '&:last-of-type': {
+        marginBottom: 'calc(var(--container-padding) * -1)'
       }
-    `;
+    });
   }
 };
 
@@ -73,10 +74,7 @@ const PreviewBlockResolvedView = ({
 }) => {
   const [styles, setStyles] = useState(overrideCss);
   const updateStyles = useCallback(() => {
-    setStyles(css`
-      ${getPreviewBlockStyles(placement, ignoreContainerPadding)}
-      ${overrideCss}
-    `);
+    setStyles(css(getPreviewBlockStyles(placement, ignoreContainerPadding), overrideCss));
   }, [ignoreContainerPadding, overrideCss, placement]);
   useEffect(() => {
     updateStyles();

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

@@ -52,9 +52,9 @@ const RelatedUrlsBlock = ({
   if (relatedUrls) {
     return /*#__PURE__*/React.createElement(RelatedUrlsResolvedView, _extends({
       renderers: renderers,
-      overrideCss: css`
-          min-height: 1.55rem;
-        `,
+      overrideCss: css({
+        minHeight: '1.55rem'
+      }),
       testId: `${testId}-resolved-view`,
       relatedUrlsResponse: relatedUrls
     }, blockProps));

package/dist/es2019/view/FlexibleCard/components/blocks/related-urls-block/resolved/related-url-list/index.js

@@ -35,9 +35,9 @@ const RelatedUrlList = ({
     alignBlock: "center",
     spread: "space-between"
   }, /*#__PURE__*/React.createElement(Text, {
-    overrideCss: css`
-              font-weight: ${"var(--ds-font-weight-medium, 500)"};
-            `,
+    overrideCss: css({
+      fontWeight: "var(--ds-font-weight-medium, 500)"
+    }),
     message: {
       descriptor: title
     }

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

@@ -8,26 +8,24 @@ import Block from '../../block';
 import { SmartLinkAlignment, SmartLinkDirection, SmartLinkSize } from '../../../../../../constants';
 import { getLinkLineHeight, getLinkSizeStyles, getTruncateStyles } from '../../../utils';
 import ElementGroup from '../../element-group';
-const actionStyles = css`
-  cursor: pointer;
-  :hover {
-    color: ${"var(--ds-text-subtle, #8993A4)"};
-    text-decoration: underline;
+const actionStyles = css({
+  cursor: 'pointer',
+  ':hover': {
+    color: "var(--ds-text-subtle, #8993A4)",
+    textDecoration: 'underline'
   }
-`;
+});
 const getMessageStyles = (size, hasAction) => {
   const sizeStyles = getLinkSizeStyles(size);
-  return css`
-    flex: 1 1 auto;
-    justify-content: flex-end;
-    ${hasAction ? actionStyles : ''}
-    ${sizeStyles}
-    ${getTruncateStyles(1, getLinkLineHeight(size))}
-    color: ${"var(--ds-text-disabled, #6B778C)"};
-    :focus {
-      outline: ${"var(--ds-border-focused, #388BFF)"} solid 2px;
+  return css({
+    flex: '1 1 auto',
+    justifyContent: 'flex-end'
+  }, hasAction ? actionStyles : '', sizeStyles, getTruncateStyles(1, getLinkLineHeight(size)), {
+    color: "var(--ds-text-disabled, #6B778C)",
+    ':focus': {
+      outline: `${"var(--ds-border-focused, #388BFF)"} solid 2px`
     }
-  `;
+  });
 };
 
 /**

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

@@ -33,9 +33,9 @@ const TitleBlockResolvedView = ({
   }), /*#__PURE__*/React.createElement(ElementGroup, {
     direction: SmartLinkDirection.Vertical,
     width: SmartLinkWidth.Flexible,
-    overrideCss: css`
-          gap: 0.25rem;
-        `
+    overrideCss: css({
+      gap: "var(--ds-space-050, 0.25rem)"
+    })
   }, title, subtitleElements && /*#__PURE__*/React.createElement(ElementGroup, {
     direction: SmartLinkDirection.Horizontal
   }, subtitleElements)), metadataElements && /*#__PURE__*/React.createElement(ElementGroup, {

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

@@ -97,6 +97,8 @@ export const getBaseStyles = (direction, size) => css({
     minWidth: 'fit-content'
   }
 });
+
+// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
 export const highlightRemoveStyles = css`
   outline: none !important;
   outline-color: inherit;

package/dist/es2019/view/FlexibleCard/components/common/loading-skeleton/index.js

@@ -6,33 +6,32 @@ const LoadingSkeleton = ({
   width,
   height
 }) => {
-  const animationNameStyles = keyframes`
-    0% { background-position: 50%  0; }
-    100% { background-position: -50% 0; }
-  `;
-  const styles = css`
-    width: ${width}rem;
-    height: ${height}rem;
-    border-radius: 2px;
-    user-select: none;
-    background: ${"var(--ds-skeleton-subtle, #f6f7f8)"};
-    background-image: linear-gradient(
-      to right,
-      transparent 0%,
-      ${"var(--ds-skeleton, #edeef1)"} 20%,
-      transparent 40%,
-      transparent 100%
-    );
-    background-repeat: no-repeat;
-    background-size: 280% 100%;
-    display: inline-block;
+  const animationNameStyles = keyframes({
+    '0%': {
+      backgroundPosition: '50% 0'
+    },
+    '100%': {
+      backgroundPosition: '-50% 0'
+    }
+  });
+  const styles = css({
+    width: `${width}rem`,
+    height: `${height}rem`,
+    borderRadius: '2px',
+    userSelect: 'none',
+    background: "var(--ds-skeleton-subtle, #f6f7f8)",
+    backgroundImage: `linear-gradient( to right, transparent 0%, ${"var(--ds-skeleton, #edeef1)"} 20%, transparent 40%, transparent 100% )`,
+    backgroundRepeat: 'no-repeat',
+    backgroundSize: '280% 100%',
+    display: 'inline-block',
+    animationDuration: '1s',
+    animationFillMode: 'forwards',
+    animationIterationCount: 'infinite',
+    animationName: animationNameStyles,
+    animationTimingFunction: 'linear'
+  });
 
-    animation-duration: 1s;
-    animation-fill-mode: forwards;
-    animation-iteration-count: infinite;
-    animation-name: ${animationNameStyles};
-    animation-timing-function: linear;
-  `;
+  // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- needs dynamic css
   return jsx("span", {
     css: styles,
     "data-testid": testId

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

@@ -90,6 +90,8 @@ const getChildrenOptions = (children, context) => {
 };
 export const getContainerStyles = (size, hideBackground, hideElevation, hidePadding, clickableContainer, childrenOptions) => {
   const paddingCss = getContainerPaddingStyles(size, hidePadding, childrenOptions);
+
+  // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
   return css`
     display: flex;
     gap: ${getGap(size)} 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'
     }
   }
-`;
+});