@atlaskit/smart-card 26.55.1 → 26.56.0

package/dist/es2019/view/FlexibleCard/components/actions/copy-link-action/index.js

@@ -0,0 +1,53 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React, { useCallback, useState } from 'react';
+import Action from '../action';
+import { messages } from '../../../../../messages';
+import { FormattedMessage } from 'react-intl-next';
+import LinkIcon from '@atlaskit/icon/glyph/link';
+import { useFlexibleUiAnalyticsContext, useFlexibleUiContext } from '../../../../../state/flexible-ui-context';
+import { ActionName } from '../../../../../constants';
+import useInvokeClientAction from '../../../../../state/hooks/use-invoke-client-action';
+const CopyLinkAction = ({
+  onClick: onClickCallback,
+  ...props
+}) => {
+  var _context$actions;
+  const context = useFlexibleUiContext();
+  const analytics = useFlexibleUiAnalyticsContext();
+  const invoke = useInvokeClientAction({
+    analytics
+  });
+  const data = context === null || context === void 0 ? void 0 : (_context$actions = context.actions) === null || _context$actions === void 0 ? void 0 : _context$actions[ActionName.CopyLinkAction];
+  const [tooltipMessage, setTooltipMessage] = useState(messages.copy_url_to_clipboard);
+  const onClick = useCallback(() => {
+    if (data && data.url) {
+      invoke({
+        actionType: ActionName.CopyLinkAction,
+        actionFn: async () => {
+          var _data$url;
+          await navigator.clipboard.writeText((_data$url = data.url) !== null && _data$url !== void 0 ? _data$url : '');
+          setTooltipMessage(messages.copied_url_to_clipboard);
+        },
+        // These values have already been set in analytics context.
+        // We only pass these here for ufo experience.
+        display: analytics === null || analytics === void 0 ? void 0 : analytics.display,
+        extensionKey: analytics === null || analytics === void 0 ? void 0 : analytics.extensionKey
+      });
+    }
+    if (onClickCallback) {
+      onClickCallback();
+    }
+  }, [analytics, data, invoke, onClickCallback]);
+  return data ? /*#__PURE__*/React.createElement(Action, _extends({
+    content: /*#__PURE__*/React.createElement(FormattedMessage, messages.copy_url_to_clipboard),
+    icon: /*#__PURE__*/React.createElement(LinkIcon, {
+      label: "copy url",
+      size: "medium"
+    }),
+    onClick: onClick,
+    testId: "smart-action-copy-link-action",
+    tooltipMessage: /*#__PURE__*/React.createElement(FormattedMessage, tooltipMessage),
+    tooltipOnHide: () => setTooltipMessage(messages.copy_url_to_clipboard)
+  }, data, props)) : null;
+};
+export default CopyLinkAction;

package/dist/es2019/view/FlexibleCard/components/actions/copy-link-action/types.js

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

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

@@ -3,4 +3,5 @@ export { default as DeleteAction } from './delete-action';
 export { default as EditAction } from './edit-action';
 export { default as DownloadAction } from './download-action';
 export { default as FollowAction } from './follow-action';
-export { default as PreviewAction } from './preview-action';
+export { default as PreviewAction } from './preview-action';
+export { default as CopyLinkAction } from './copy-link-action';

package/dist/es2019/view/FlexibleCard/components/blocks/ai-summary-block/ai-motion-wrapper/index.js

@@ -0,0 +1,39 @@
+import { Box } from '@atlaskit/primitives';
+import React, { useEffect, useRef, useState } from 'react';
+export const AIMotionWrapper = ({
+  children,
+  isFadeIn = false,
+  minHeight = 0,
+  show,
+  showTransition = false
+}) => {
+  const [height, setHeight] = useState(0);
+  const ref = useRef(null);
+  const transition = isFadeIn ? 'height, opacity' : 'height';
+  useEffect(() => {
+    if (show && ref.current) {
+      // set the height of the error message container explicitly to the height
+      // of its contents (including anything hidden due to overflow) so that we
+      // can animate the height of the container
+      setHeight(ref.current.scrollHeight);
+    } else {
+      setHeight(0);
+    }
+  }, [children, show]);
+  return show ? /*#__PURE__*/React.createElement(Box, {
+    style: {
+      height,
+      minHeight,
+      lineHeight: 0,
+      overflow: 'hidden',
+      // a fit for purpose state variable to control when the 'visible' styles should be appled
+      opacity: height > 0 ? 1 : 0,
+      // we only want to transition opacity and height when the error message is initially shown
+      // not if its to be shown on mount
+      transitionProperty: showTransition ? transition : 'none',
+      transitionDuration: '0.3s'
+    },
+    ref: ref
+  }, children) : null;
+};
+export default AIMotionWrapper;

package/dist/es2019/view/FlexibleCard/components/blocks/ai-summary-block/ai-motion-wrapper/types.js

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

package/dist/es2019/view/FlexibleCard/components/blocks/ai-summary-block/ai-state-indicator/ai-state-error.js

@@ -14,7 +14,7 @@ const contentStyles = xcss({
   fontWeight: '400',
   lineHeight: '14px'
 });
-const MessageWithAnchor = ({
+const FormattedErrorMessage = ({
   message,
   url
 }) => /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, message, {
@@ -31,6 +31,10 @@ const getErrorMesssageProps = error => {
         message: messages.ai_summary_error_acceptable_use_violation,
         url: CONTENT_URL_ACCEPTABLE_USE_POLICY
       };
+    case 'HIPAA_CONTENT_DETECTED':
+      return {
+        message: messages.ai_summary_error_hipaa_content_detected
+      };
     default:
       return {
         message: messages.ai_summary_error_generic,
@@ -61,7 +65,7 @@ const AIStateError = ({
         content: /*#__PURE__*/React.createElement(Box, {
           testId: `${testId}-error-message`,
           xcss: contentStyles
-        }, /*#__PURE__*/React.createElement(MessageWithAnchor, {
+        }, /*#__PURE__*/React.createElement(FormattedErrorMessage, {
           message: message,
           url: url
         })),

package/dist/es2019/view/FlexibleCard/components/blocks/ai-summary-block/feature-discovery/index.js

@@ -0,0 +1,44 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+import { useEffect, useMemo, useRef } from 'react';
+import { StorageClient } from '@atlaskit/frontend-utilities/storage-client';
+import { getPulseStyles } from './styled';
+const LOCAL_STORAGE_CLIENT_KEY = '@atlaskit/smart-card';
+const LOCAL_STORAGE_DISCOVERY_KEY = 'action-discovery-ai-summarise';
+const LOCAL_STORAGE_DISCOVERY_VALUE = 'discovered';
+const LOCAL_STORAGE_DISCOVERY_EXPIRY_IN_MS = 15552000000; // 180 days
+const LOCAL_STORAGE_DISCOVERY_REQUIRED_TIME = 2000;
+/**
+ * This is a hacky solution to help with the feature discovery.
+ * This implementation must be removed once the experiment is completed.
+ * Cleanup on https://product-fabric.atlassian.net/browse/EDM-9649
+ */
+const FeatureDiscovery = ({
+  children,
+  testId
+}) => {
+  const renderedTime = useRef();
+  const storageClient = useMemo(() => new StorageClient(LOCAL_STORAGE_CLIENT_KEY), []);
+  const discovered = useMemo(() => storageClient.getItem(LOCAL_STORAGE_DISCOVERY_KEY) === LOCAL_STORAGE_DISCOVERY_VALUE, [storageClient]);
+  useEffect(() => {
+    renderedTime.current = Date.now();
+    return () => {
+      if (!discovered && renderedTime.current) {
+        const duration = Date.now() - renderedTime.current;
+        if (duration > LOCAL_STORAGE_DISCOVERY_REQUIRED_TIME) {
+          storageClient.setItemWithExpiry(LOCAL_STORAGE_DISCOVERY_KEY, LOCAL_STORAGE_DISCOVERY_VALUE, LOCAL_STORAGE_DISCOVERY_EXPIRY_IN_MS);
+        }
+      }
+    };
+  }, [storageClient, discovered]);
+  const component = useMemo(() => {
+    if (!discovered) {
+      return jsx("span", {
+        css: getPulseStyles(),
+        "data-testid": `${testId}-discovery`
+      }, children);
+    }
+  }, [children, discovered, testId]);
+  return component !== null && component !== void 0 ? component : children;
+};
+export default FeatureDiscovery;

package/dist/es2019/view/FlexibleCard/components/blocks/ai-summary-block/feature-discovery/styled.js

@@ -0,0 +1,15 @@
+import { css, keyframes } from '@emotion/react';
+export const getPulseStyles = () => {
+  const color = "var(--ds-border-discovery, #8270DB)";
+  const pulseKeyframes = keyframes({
+    to: {
+      boxShadow: '0 0 0 7px rgba(0, 0, 0, 0)'
+    }
+  });
+  return css({
+    display: 'inline-flex',
+    borderRadius: '3px',
+    boxShadow: `0 0 0 0 ${color}`,
+    animation: `${pulseKeyframes} 2s cubic-bezier(0.5, 0, 0, 1) 0.25s both 2`
+  });
+};

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

@@ -6,32 +6,37 @@ import { ActionName, SmartLinkDirection, SmartLinkSize, SmartLinkWidth } from '.
 import ActionGroup from '../../action-group';
 import Block from '../../block';
 import ElementGroup from '../../element-group';
+import AIMotionWrapper from '../ai-motion-wrapper';
 import AIStateIndicator from '../ai-state-indicator';
 import { renderElementItems } from '../../utils';
 import { messages } from '../../../../../../messages';
 import { useAISummary } from '../../../../../../state/hooks/use-ai-summary';
 import { useFlexibleUiContext } from '../../../../../../state/flexible-ui-context';
+import { useSmartLinkContext } from '@atlaskit/link-provider';
 import AIIcon from '../../../../../common/ai-icon';
 import AISummary from '../../../../../common/ai-summary';
 import { useAnalyticsEvents } from '../../../../../../common/analytics/generated/use-analytics-events';
 import AIEventSummaryViewed from '../ai-event-summary-viewed';
 import AIEventErrorViewed from '../ai-event-error-viewed';
 import { di } from 'react-magnetic-di';
+import { css } from '@emotion/react';
+import FeatureDiscovery from '../feature-discovery';
 export const AISummaryBlockErrorIndicator = ({
   showErrorIndicator,
   error,
+  showTransition,
   testId
-}) => {
-  return showErrorIndicator ? /*#__PURE__*/React.createElement(Inline, {
-    grow: "fill"
-  }, /*#__PURE__*/React.createElement(AIEventErrorViewed, {
-    reason: error
-  }), /*#__PURE__*/React.createElement(AIStateIndicator, {
-    error: error,
-    state: 'error',
-    testId: testId
-  })) : null;
-};
+}) => /*#__PURE__*/React.createElement(AIMotionWrapper, {
+  isFadeIn: true,
+  show: showErrorIndicator,
+  showTransition: showTransition
+}, /*#__PURE__*/React.createElement(AIEventErrorViewed, {
+  reason: error
+}), /*#__PURE__*/React.createElement(AIStateIndicator, {
+  error: error,
+  state: "error",
+  testId: testId
+}));
 export const AISummaryBlockStatusIndicator = ({
   showStatusIndicator,
   metadata,
@@ -53,7 +58,7 @@ const AISummaryBlockResolvedView = props => {
     onActionMenuOpenChange,
     size = SmartLinkSize.Medium,
     testId,
-    aiSummaryMinHeight,
+    aiSummaryMinHeight = 0,
     metadata
   } = props;
   const {
@@ -62,6 +67,9 @@ const AISummaryBlockResolvedView = props => {
   const context = useFlexibleUiContext();
   const url = (context === null || context === void 0 ? void 0 : context.url) || '';
   const ari = (context === null || context === void 0 ? void 0 : context.ari) || '';
+  const {
+    product
+  } = useSmartLinkContext();
   const {
     summariseUrl,
     state: {
@@ -71,7 +79,8 @@ const AISummaryBlockResolvedView = props => {
     }
   } = useAISummary({
     url,
-    ari
+    ari,
+    product
   });
   const showAISummary = status === 'done' ||
   // We want to display the AI Summary component only when there is content available during the loading process.
@@ -102,7 +111,12 @@ const AISummaryBlockResolvedView = props => {
         testId: `${testId}-ai-summary-action`,
         icon: /*#__PURE__*/React.createElement(AIIcon, {
           label: "AIIcon"
-        })
+        }),
+        /**
+         * Enabling feature discovery pulse
+         * Cleanup: https://product-fabric.atlassian.net/browse/EDM-9693
+         */
+        wrapper: FeatureDiscovery
       };
       return [aiAction, ...actions];
     }
@@ -118,14 +132,25 @@ const AISummaryBlockResolvedView = props => {
   return /*#__PURE__*/React.createElement(Block, _extends({}, props, {
     direction: SmartLinkDirection.Vertical,
     testId: `${testId}-resolved-view`
+    /**
+     * Enabled for feature discovery to allow box shadow to overflow
+     * Cleanup: https://product-fabric.atlassian.net/browse/EDM-8681
+     */,
+    overrideCss: css({
+      overflow: 'visible'
+    }, props.overrideCss)
   }), status === 'done' && /*#__PURE__*/React.createElement(AIEventSummaryViewed, {
     fromCache: isSummarisedOnMountRef.current
-  }), showAISummary && /*#__PURE__*/React.createElement(AISummary, {
+  }), /*#__PURE__*/React.createElement(AIMotionWrapper, {
+    minHeight: aiSummaryMinHeight,
+    show: showAISummary,
+    showTransition: !isSummarisedOnMountRef.current
+  }, /*#__PURE__*/React.createElement(AISummary, {
     testId: `${testId}-ai-summary`,
     minHeight: aiSummaryMinHeight,
     content: content,
     showIcon: isSummarisedOnMountRef.current
-  }), /*#__PURE__*/React.createElement(Inline, {
+  })), /*#__PURE__*/React.createElement(Inline, {
     alignBlock: "center",
     alignInline: "end",
     grow: "fill",
@@ -142,6 +167,7 @@ const AISummaryBlockResolvedView = props => {
     size: size
   }))), /*#__PURE__*/React.createElement(AISummaryBlockErrorIndicator, {
     showErrorIndicator: !isErroredOnMountRef.current && status === 'error',
+    showTransition: !isErroredOnMountRef.current,
     error: error,
     testId: testId
   }));

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

@@ -3,7 +3,9 @@ import { useEffect } from 'react';
 import { css, jsx } from '@emotion/react';
 import { ElementName, SmartLinkDirection, SmartLinkSize } from '../../../../../constants';
 import { getBaseStyles, getGapSize, highlightRemoveStyles, renderChildren } from '../utils';
-const getBlockStyles = (direction, size) => css`
+const getBlockStyles = (direction, size
+// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
+) => css`
   ${getBaseStyles(direction, size)}
   ${highlightRemoveStyles}
   justify-content: flex-start;

package/dist/es2019/view/FlexibleCard/components/blocks/element-group/index.js

@@ -6,46 +6,46 @@ import { getMaxLineHeight, getTruncateStyles } from '../../utils';
 const getAlignmentStyles = align => {
   switch (align) {
     case SmartLinkAlignment.Right:
-      return css`
-        -webkit-box-align: end;
-        -ms-flex-align: end;
-        justify-content: flex-end;
-        text-align: right;
-      `;
+      return css({
+        WebkitBoxAlign: 'end',
+        MsFlexAlign: 'end',
+        justifyContent: 'flex-end',
+        textAlign: 'right'
+      });
     case SmartLinkAlignment.Left:
     default:
-      return css`
-        -webkit-box-align: start;
-        -ms-flex-align: start;
-        justify-content: flex-start;
-        text-align: left;
-      `;
+      return css({
+        WebkitBoxAlign: 'start',
+        MsFlexAlign: 'start',
+        justifyContent: 'flex-start',
+        textAlign: 'left'
+      });
   }
 };
 const getGapStyles = (size, align) => {
   const gap = getGapSize(size);
   if (align === SmartLinkAlignment.Right) {
-    return css`
-      > span {
-        margin-left: ${gap}rem;
+    return css({
+      '> span': {
+        marginLeft: `${gap}rem`
+      },
+      '> span:first-child': {
+        marginLeft: 'initial'
       }
-
-      > span:first-child {
-        margin-left: initial;
-      }
-    `;
+    });
   }
-  return css`
-    > span {
-      margin-right: ${gap}rem;
-      &:last-child {
-        margin-right: initial;
+  return css({
+    '> span': {
+      marginRight: `${gap}rem`,
+      '&:last-child': {
+        marginRight: 'initial'
       }
     }
-  `;
+  });
 };
 const getHorizontalDirectionStyles = (size, align) => {
   const lineHeight = getMaxLineHeight(size);
+  // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
   return css`
     display: block;
     vertical-align: middle;
@@ -64,14 +64,9 @@ const getHorizontalDirectionStyles = (size, align) => {
     ${getGapStyles(size, align)}
   `;
 };
-export const getElementGroupStyles = (direction, size, align, width, position) => css`
-  ${getBaseStyles(direction, size)}
-  ${getAlignmentStyles(align)}
-  min-width: 10%;
-  ${width === SmartLinkWidth.Flexible ? `flex: 1 3;` : ''}
-  ${direction === SmartLinkDirection.Horizontal ? getHorizontalDirectionStyles(size, align) : ''}
-  ${position === SmartLinkPosition.Top ? 'align-self: flex-start;' : ''}
-`;
+export const getElementGroupStyles = (direction, size, align, width, position) => css(getBaseStyles(direction, size), getAlignmentStyles(align), {
+  minWidth: '10%'
+}, width === SmartLinkWidth.Flexible ? `flex: 1 3;` : '', direction === SmartLinkDirection.Horizontal ? getHorizontalDirectionStyles(size, align) : '', position === SmartLinkPosition.Top ? 'align-self: flex-start;' : '');
 
 /**
  * Creates a group of Action components. Accepts an array of Actions, in addition to some styling

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

@@ -15,10 +15,9 @@ const getElementGroupStyles = (size, maxLines) => {
   // We need the height of the line to be equal on both left and right
   // sides so they line up nicely.
   const lineHeight = getMaxLineHeight(size);
-  return css`
-    line-height: ${lineHeight}rem;
-    ${getTruncateStyles(maxLines, lineHeight + 'rem')}
-  `;
+  return css({
+    lineHeight: `${lineHeight}rem`
+  }, getTruncateStyles(maxLines, lineHeight + 'rem'));
 };
 const getMaxLines = maxLines => {
   if (maxLines > MAXIMUM_MAX_LINES) {

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;