@atlaskit/smart-card 34.7.0 → 34.9.0

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

@@ -9,12 +9,11 @@ import { useCallback, useMemo, useState } from 'react';
 import ChevronDownIcon from '@atlaskit/icon/utility/migration/chevron-down';
 import Lozenge from '@atlaskit/lozenge';
 import { fg } from '@atlaskit/platform-feature-flags';
-import { Box, xcss } from '@atlaskit/primitives';
+import { Box } from '@atlaskit/primitives/compiled';
 import LozengeActionTriggerOld from './LozengeActionTriggerOld';
-const chevronDownStyles = xcss({
-  marginLeft: 'space.075',
-  display: 'flex'
-});
+const styles = {
+  chevronDown: "_18u012x7 _1e0c1txw"
+};
 const triggerLozengeStyles = null;
 const triggerButtonStyles = null;
 const LozengeActionTriggerNew = ({
@@ -35,7 +34,7 @@ const LozengeActionTriggerNew = ({
     className: ax(["_4cvr1h6o _1e0c1txw"])
   }, /*#__PURE__*/React.createElement("span", null, text), /*#__PURE__*/React.createElement(Box, {
     as: "span",
-    xcss: chevronDownStyles
+    xcss: styles.chevronDown
   }, /*#__PURE__*/React.createElement(ChevronDownIcon, {
     color: "currentColor",
     label: "options",

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

@@ -11,6 +11,7 @@ export const triggerButtonStyles = css({
   color: 'unset',
   cursor: 'pointer',
   fontFamily: 'unset',
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
   fontSize: 'unset',
   fontStyle: 'unset',
   fontWeight: 'unset',

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

@@ -198,6 +198,7 @@ export const getPrimitivesInlineSpaceBySize = size => {
 /**
  * Get container padding based on smart link size
  * To replace container/index.tsx getPadding() with space token for primitives
+ * @deprecated remove on FF clean up bandicoots-compiled-migration-smartcard
  */
 export const getPrimitivesPaddingSpaceBySize = size => {
   switch (size) {

package/dist/es2019/view/InlineCard/ErroredView/InlineCardErroredViewOld.js

@@ -0,0 +1,98 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import React from 'react';
+import { FormattedMessage } from 'react-intl-next';
+import ButtonOld from '@atlaskit/button';
+import ErrorIcon from '@atlaskit/icon/utility/migration/error';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { Box, xcss } from '@atlaskit/primitives';
+import { R300 } from '@atlaskit/theme/colors';
+import { messages } from '../../../messages';
+import { HoverCard } from '../../HoverCard';
+import { ActionButton } from '../common/action-button';
+import { Frame } from '../Frame';
+import { AKIconWrapper } from '../Icon';
+import { AKIconWrapper as AKIconWrapperOld } from '../Icon-emotion';
+import { IconAndTitleLayout } from '../IconAndTitleLayout';
+import { IconStyledButtonOldVisualRefresh } from '../styled';
+import { IconStyledButton as IconStyledButtonOld } from '../styled-emotion';
+import withFrameStyleControl from '../utils/withFrameStyleControl';
+const iconWrapperStyles = xcss({
+  marginRight: 'space.negative.025'
+});
+export class InlineCardErroredViewOld extends React.Component {
+  constructor(...args) {
+    super(...args);
+    _defineProperty(this, "frameRef", /*#__PURE__*/React.createRef());
+    _defineProperty(this, "handleRetry", event => {
+      const {
+        onRetry
+      } = this.props;
+      if (onRetry) {
+        event.preventDefault();
+        event.stopPropagation();
+        onRetry();
+      }
+    });
+    _defineProperty(this, "renderActionButton", () => {
+      const {
+        onRetry
+      } = this.props;
+      const Button = withFrameStyleControl(ButtonOld, this.frameRef);
+      if (fg('platform-linking-visual-refresh-v1')) {
+        return onRetry && /*#__PURE__*/React.createElement(Button, {
+          component: ActionButton,
+          onClick: this.handleRetry
+        }, /*#__PURE__*/React.createElement(FormattedMessage, messages.try_again));
+      }
+      return onRetry && /*#__PURE__*/React.createElement(Button, {
+        spacing: "none",
+        component: fg('bandicoots-compiled-migration-smartcard') ? IconStyledButtonOldVisualRefresh : IconStyledButtonOld,
+        onClick: this.handleRetry,
+        role: "button"
+      }, /*#__PURE__*/React.createElement(FormattedMessage, messages.try_again));
+    });
+  }
+  render() {
+    const {
+      url,
+      onClick,
+      isSelected,
+      testId = 'inline-card-errored-view',
+      icon,
+      message,
+      truncateInline
+    } = this.props;
+    const Wrapper = fg('bandicoots-compiled-migration-smartcard') ? AKIconWrapper : AKIconWrapperOld;
+    const content = /*#__PURE__*/React.createElement(Frame, {
+      testId: testId,
+      isSelected: isSelected,
+      ref: this.frameRef,
+      truncateInline: truncateInline
+    }, /*#__PURE__*/React.createElement(IconAndTitleLayout, {
+      icon: icon || (fg('platform-smart-card-icon-migration') ? /*#__PURE__*/React.createElement(Box, {
+        as: "span",
+        xcss: iconWrapperStyles
+      }, /*#__PURE__*/React.createElement(ErrorIcon, {
+        color: "var(--ds-icon-danger, #C9372C)",
+        label: "error",
+        LEGACY_size: "small",
+        testId: "errored-view-default-icon"
+      })) : /*#__PURE__*/React.createElement(Wrapper, null, /*#__PURE__*/React.createElement(ErrorIcon, {
+        label: "error",
+        LEGACY_size: "small",
+        color: `var(--ds-icon-danger, ${R300})`,
+        testId: "errored-view-default-icon"
+      }))),
+      link: url,
+      title: url,
+      onClick: onClick,
+      rightSide: message
+    }), this.renderActionButton());
+    if (this.props.showHoverPreview) {
+      return /*#__PURE__*/React.createElement(HoverCard, {
+        url: url
+      }, content);
+    }
+    return content;
+  }
+}

package/dist/es2019/view/InlineCard/ErroredView/index.compiled.css

@@ -0,0 +1 @@
+._2hwx1i6y{margin-right:var(--ds-space-negative-025,-2px)}

package/dist/es2019/view/InlineCard/ErroredView/index.js

@@ -1,98 +1,92 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
+/* index.tsx generated by @compiled/babel-plugin v0.36.0 */
+import "./index.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
 import React from 'react';
 import { FormattedMessage } from 'react-intl-next';
 import ButtonOld from '@atlaskit/button';
 import ErrorIcon from '@atlaskit/icon/utility/migration/error';
 import { fg } from '@atlaskit/platform-feature-flags';
-import { Box, xcss } from '@atlaskit/primitives';
+import { Box } from '@atlaskit/primitives/compiled';
 import { R300 } from '@atlaskit/theme/colors';
 import { messages } from '../../../messages';
 import { HoverCard } from '../../HoverCard';
 import { ActionButton } from '../common/action-button';
 import { Frame } from '../Frame';
 import { AKIconWrapper } from '../Icon';
-import { AKIconWrapper as AKIconWrapperOld } from '../Icon-emotion';
 import { IconAndTitleLayout } from '../IconAndTitleLayout';
 import { IconStyledButtonOldVisualRefresh } from '../styled';
-import { IconStyledButton as IconStyledButtonOld } from '../styled-emotion';
 import withFrameStyleControl from '../utils/withFrameStyleControl';
-const iconWrapperStyles = xcss({
-  marginRight: 'space.negative.025'
-});
-export class InlineCardErroredView extends React.Component {
-  constructor(...args) {
-    super(...args);
-    _defineProperty(this, "frameRef", /*#__PURE__*/React.createRef());
-    _defineProperty(this, "handleRetry", event => {
-      const {
-        onRetry
-      } = this.props;
-      if (onRetry) {
-        event.preventDefault();
-        event.stopPropagation();
-        onRetry();
-      }
-    });
-    _defineProperty(this, "renderActionButton", () => {
-      const {
-        onRetry
-      } = this.props;
-      const Button = withFrameStyleControl(ButtonOld, this.frameRef);
-      if (fg('platform-linking-visual-refresh-v1')) {
-        return onRetry && /*#__PURE__*/React.createElement(Button, {
-          component: ActionButton,
-          onClick: this.handleRetry
-        }, /*#__PURE__*/React.createElement(FormattedMessage, messages.try_again));
-      }
-      return onRetry && /*#__PURE__*/React.createElement(Button, {
-        spacing: "none",
-        component: fg('bandicoots-compiled-migration-smartcard') ? IconStyledButtonOldVisualRefresh : IconStyledButtonOld,
-        onClick: this.handleRetry,
-        role: "button"
-      }, /*#__PURE__*/React.createElement(FormattedMessage, messages.try_again));
-    });
-  }
-  render() {
-    const {
-      url,
-      onClick,
-      isSelected,
-      testId = 'inline-card-errored-view',
-      icon,
-      message,
-      truncateInline
-    } = this.props;
-    const Wrapper = fg('bandicoots-compiled-migration-smartcard') ? AKIconWrapper : AKIconWrapperOld;
-    const content = /*#__PURE__*/React.createElement(Frame, {
-      testId: testId,
-      isSelected: isSelected,
-      ref: this.frameRef,
-      truncateInline: truncateInline
-    }, /*#__PURE__*/React.createElement(IconAndTitleLayout, {
-      icon: icon || (fg('platform-smart-card-icon-migration') ? /*#__PURE__*/React.createElement(Box, {
-        as: "span",
-        xcss: iconWrapperStyles
-      }, /*#__PURE__*/React.createElement(ErrorIcon, {
-        color: "var(--ds-icon-danger, #C9372C)",
-        label: "error",
-        LEGACY_size: "small",
-        testId: "errored-view-default-icon"
-      })) : /*#__PURE__*/React.createElement(Wrapper, null, /*#__PURE__*/React.createElement(ErrorIcon, {
-        label: "error",
-        LEGACY_size: "small",
-        color: `var(--ds-icon-danger, ${R300})`,
-        testId: "errored-view-default-icon"
-      }))),
-      link: url,
-      title: url,
-      onClick: onClick,
-      rightSide: message
-    }), this.renderActionButton());
-    if (this.props.showHoverPreview) {
-      return /*#__PURE__*/React.createElement(HoverCard, {
-        url: url
-      }, content);
+import { InlineCardErroredViewOld } from './InlineCardErroredViewOld';
+const styles = {
+  iconWrapper: "_2hwx1i6y"
+};
+const InlineCardErroredViewNew = ({
+  url,
+  onClick,
+  isSelected,
+  testId = 'inline-card-errored-view',
+  icon,
+  message,
+  onRetry,
+  truncateInline,
+  showHoverPreview
+}) => {
+  const frameRef = React.useRef(null);
+  const handleRetry = React.useCallback(event => {
+    if (onRetry) {
+      event.preventDefault();
+      event.stopPropagation();
+      onRetry();
     }
-    return content;
+  }, [onRetry]);
+  const renderActionButton = React.useCallback(() => {
+    const Button = withFrameStyleControl(ButtonOld, frameRef);
+    return onRetry && (fg('platform-linking-visual-refresh-v1') ? /*#__PURE__*/React.createElement(Button, {
+      component: ActionButton,
+      onClick: handleRetry
+    }, /*#__PURE__*/React.createElement(FormattedMessage, messages.try_again)) : /*#__PURE__*/React.createElement(Button, {
+      spacing: "none",
+      component: IconStyledButtonOldVisualRefresh,
+      onClick: handleRetry,
+      role: "button"
+    }, /*#__PURE__*/React.createElement(FormattedMessage, messages.try_again)));
+  }, [handleRetry, onRetry]);
+  const defaultIcon = fg('platform-smart-card-icon-migration') ? /*#__PURE__*/React.createElement(Box, {
+    as: "span",
+    xcss: styles.iconWrapper
+  }, /*#__PURE__*/React.createElement(ErrorIcon, {
+    color: "var(--ds-icon-danger, #C9372C)",
+    label: "error",
+    LEGACY_size: "small",
+    testId: "errored-view-default-icon"
+  })) : /*#__PURE__*/React.createElement(AKIconWrapper, null, /*#__PURE__*/React.createElement(ErrorIcon, {
+    label: "error",
+    LEGACY_size: "small",
+    color: `var(--ds-icon-danger, ${R300})`,
+    testId: "errored-view-default-icon"
+  }));
+  const content = /*#__PURE__*/React.createElement(Frame, {
+    testId: testId,
+    isSelected: isSelected,
+    ref: frameRef,
+    truncateInline: truncateInline
+  }, /*#__PURE__*/React.createElement(IconAndTitleLayout, {
+    icon: icon || defaultIcon,
+    link: url,
+    title: url,
+    onClick: onClick,
+    rightSide: message
+  }), renderActionButton());
+  if (showHoverPreview) {
+    return /*#__PURE__*/React.createElement(HoverCard, {
+      url: url
+    }, content);
+  }
+  return content;
+};
+export const InlineCardErroredView = props => {
+  if (fg('bandicoots-compiled-migration-smartcard')) {
+    return /*#__PURE__*/React.createElement(InlineCardErroredViewNew, props);
   }
-}
+  return /*#__PURE__*/React.createElement(InlineCardErroredViewOld, props);
+};

package/dist/es2019/view/InlineCard/ForbiddenView/InlineCardForbiddenViewOld.js

@@ -0,0 +1,189 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import React from 'react';
+import { FormattedMessage } from 'react-intl-next';
+import ButtonOld from '@atlaskit/button';
+import LockLockedIcon from '@atlaskit/icon/core/lock-locked';
+import LegacyLockIcon from '@atlaskit/icon/glyph/lock-filled';
+import Lozenge from '@atlaskit/lozenge';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { Box, Pressable, xcss } from '@atlaskit/primitives';
+import { N500, R400 } from '@atlaskit/theme/colors';
+import { messages } from '../../../messages';
+import { HoverCard } from '../../HoverCard';
+import { ActionButton } from '../common/action-button';
+import { Frame } from '../Frame';
+import { AKIconWrapper } from '../Icon';
+import { AKIconWrapper as AKIconWrapperOld } from '../Icon-emotion';
+import { IconAndTitleLayout, LozengeWrapper } from '../IconAndTitleLayout';
+import { IconStyledButtonOldVisualRefresh } from '../styled';
+import { IconStyledButton as IconStyledButtonOld } from '../styled-emotion';
+import withFrameStyleControl from '../utils/withFrameStyleControl';
+const iconWrapperStyles = xcss({
+  marginRight: 'space.negative.025'
+});
+const fallbackForbiddenIcon = () => {
+  if (fg('bandicoots-compiled-migration-smartcard')) {
+    return fg('platform-smart-card-icon-migration') ? /*#__PURE__*/React.createElement(Box, {
+      as: "span",
+      xcss: iconWrapperStyles
+    }, /*#__PURE__*/React.createElement(LockLockedIcon, {
+      label: "error",
+      color: "var(--ds-icon-danger, #C9372C)",
+      LEGACY_fallbackIcon: LegacyLockIcon,
+      LEGACY_size: "small",
+      testId: "forbidden-view-fallback-icon"
+    })) : /*#__PURE__*/React.createElement(AKIconWrapper, null, /*#__PURE__*/React.createElement(LegacyLockIcon, {
+      label: "error",
+      size: "small",
+      primaryColor: `var(--ds-icon-danger, ${R400})`,
+      testId: "forbidden-view-fallback-icon"
+    }));
+  } else {
+    return fg('platform-smart-card-icon-migration') ? /*#__PURE__*/React.createElement(Box, {
+      as: "span",
+      xcss: iconWrapperStyles
+    }, /*#__PURE__*/React.createElement(LockLockedIcon, {
+      label: "error",
+      color: "var(--ds-icon-danger, #C9372C)",
+      LEGACY_fallbackIcon: LegacyLockIcon,
+      LEGACY_size: "small",
+      testId: "forbidden-view-fallback-icon"
+    })) : /*#__PURE__*/React.createElement(AKIconWrapperOld, null, /*#__PURE__*/React.createElement(LegacyLockIcon, {
+      label: "error",
+      size: "small",
+      primaryColor: `var(--ds-icon-danger, ${R400})`,
+      testId: "forbidden-view-fallback-icon"
+    }));
+  }
+};
+export class InlineCardForbiddenViewOld extends React.Component {
+  constructor(...args) {
+    var _this$props, _this$props$requestAc;
+    super(...args);
+    _defineProperty(this, "frameRef", /*#__PURE__*/React.createRef());
+    _defineProperty(this, "state", {
+      hasRequestAccessContextMessage: !!((_this$props = this.props) !== null && _this$props !== void 0 && (_this$props$requestAc = _this$props.requestAccessContext) !== null && _this$props$requestAc !== void 0 && _this$props$requestAc.callToActionMessageKey)
+    });
+    _defineProperty(this, "handleRetry", event => {
+      const {
+        onAuthorise
+      } = this.props;
+      event.preventDefault();
+      event.stopPropagation();
+      if (onAuthorise) {
+        onAuthorise();
+      } else {
+        var _this$props2, _this$props2$requestA, _this$props2$requestA2;
+        (_this$props2 = this.props) === null || _this$props2 === void 0 ? void 0 : (_this$props2$requestA = _this$props2.requestAccessContext) === null || _this$props2$requestA === void 0 ? void 0 : (_this$props2$requestA2 = _this$props2$requestA.action) === null || _this$props2$requestA2 === void 0 ? void 0 : _this$props2$requestA2.promise();
+      }
+    });
+    _defineProperty(this, "renderForbiddenAccessMessage", () => {
+      var _this$props3, _this$props3$requestA;
+      if ((_this$props3 = this.props) !== null && _this$props3 !== void 0 && (_this$props3$requestA = _this$props3.requestAccessContext) !== null && _this$props3$requestA !== void 0 && _this$props3$requestA.callToActionMessageKey) {
+        const {
+          callToActionMessageKey
+        } = this.props.requestAccessContext;
+        return /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, messages[callToActionMessageKey], {
+          values: {
+            product: this.props.context
+          }
+        }));
+      }
+      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(FormattedMessage, messages.invalid_permissions, formattedMessage => {
+        return /*#__PURE__*/React.createElement(React.Fragment, null, formattedMessage);
+      }));
+    });
+    _defineProperty(this, "renderActionButton", () => {
+      var _this$props$requestAc2;
+      const {
+        onAuthorise
+      } = this.props;
+      const Button = withFrameStyleControl(ButtonOld, this.frameRef);
+      const accessType = (_this$props$requestAc2 = this.props.requestAccessContext) === null || _this$props$requestAc2 === void 0 ? void 0 : _this$props$requestAc2.accessType;
+      if (this.state.hasRequestAccessContextMessage) {
+        if (fg('bandicoots-compiled-migration-smartcard')) {
+          if (fg('platform-linking-visual-refresh-v1')) {
+            const isDisabled = accessType === 'PENDING_REQUEST_EXISTS';
+            return /*#__PURE__*/React.createElement(Button, {
+              onClick: this.handleRetry,
+              component: ActionButton,
+              testId: "button-connect-other-account",
+              isDisabled: isDisabled
+            }, this.renderForbiddenAccessMessage());
+          }
+          return /*#__PURE__*/React.createElement(Button, {
+            spacing: "none",
+            onClick: this.handleRetry,
+            component: IconStyledButtonOldVisualRefresh,
+            testId: "button-connect-other-account",
+            role: "button",
+            isDisabled: accessType === 'PENDING_REQUEST_EXISTS'
+          }, this.renderForbiddenAccessMessage());
+        } else {
+          return /*#__PURE__*/React.createElement(Button, {
+            spacing: "none",
+            onClick: this.handleRetry,
+            component: IconStyledButtonOld,
+            testId: "button-connect-other-account",
+            role: "button",
+            isDisabled: accessType === 'PENDING_REQUEST_EXISTS'
+          }, this.renderForbiddenAccessMessage());
+        }
+      }
+      if (onAuthorise) {
+        if (fg('platform-linking-visual-refresh-v1')) {
+          return /*#__PURE__*/React.createElement(LozengeWrapper, null, /*#__PURE__*/React.createElement(Pressable, {
+            xcss: actionButtonLozengeStyle,
+            onClick: this.handleRetry,
+            testId: "button-connect-other-account"
+          }, /*#__PURE__*/React.createElement(Lozenge, {
+            appearance: 'moved'
+          }, this.renderForbiddenAccessMessage())));
+        }
+        return /*#__PURE__*/React.createElement(Button, {
+          spacing: "none",
+          onClick: this.handleRetry,
+          appearance: "subtle-link",
+          testId: "button-connect-other-account",
+          role: "button"
+        }, /*#__PURE__*/React.createElement(LozengeWrapper, null, /*#__PURE__*/React.createElement(Lozenge, {
+          appearance: 'moved'
+        }, this.renderForbiddenAccessMessage())));
+      }
+      return null;
+    });
+  }
+  render() {
+    const {
+      url,
+      icon,
+      onClick,
+      isSelected,
+      testId = 'inline-card-forbidden-view',
+      truncateInline
+    } = this.props;
+    const content = /*#__PURE__*/React.createElement(Frame, {
+      testId: testId,
+      isSelected: isSelected,
+      ref: this.frameRef,
+      truncateInline: truncateInline
+    }, /*#__PURE__*/React.createElement(IconAndTitleLayout, {
+      icon: icon ? icon : fallbackForbiddenIcon(),
+      link: url,
+      title: url,
+      onClick: onClick,
+      titleColor: `var(--ds-text-subtle, ${N500})`
+    }), this.renderActionButton());
+    if (this.props.showHoverPreview) {
+      return /*#__PURE__*/React.createElement(HoverCard, {
+        url: url
+      }, content);
+    }
+    return content;
+  }
+}
+const actionButtonLozengeStyle = xcss({
+  backgroundColor: 'color.background.neutral.subtle',
+  padding: 'space.0'
+});

package/dist/es2019/view/InlineCard/ForbiddenView/index.compiled.css

@@ -0,0 +1,6 @@
+._19bvze3t{padding-left:var(--ds-space-0,0)}
+._2hwx1i6y{margin-right:var(--ds-space-negative-025,-2px)}
+._bfhksm61{background-color:var(--ds-background-neutral-subtle,#00000000)}
+._ca0qze3t{padding-top:var(--ds-space-0,0)}
+._n3tdze3t{padding-bottom:var(--ds-space-0,0)}
+._u5f3ze3t{padding-right:var(--ds-space-0,0)}