@atlaskit/smart-card 43.28.6 → 43.29.0

package/dist/es2019/view/FlexibleCard/components/elements/common/base-lozenge-element/index.js

@@ -1,12 +1,16 @@
 /* index.tsx generated by @compiled/babel-plugin v0.39.1 */
+import _extends from "@babel/runtime/helpers/extends";
 import "./index.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { FormattedDate } from 'react-intl-next';
 import AtlaskitLozenge from '@atlaskit/lozenge';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { SimpleTag as Tag } from '@atlaskit/tag';
 import { useFlexibleUiOptionContext } from '../../../../../../state/flexible-ui-context';
 import LozengeAction from './lozenge-action';
 const styles = null;
+const dueOnStyles = null;
 /**
  * A base element that displays a Lozenge.
  * @internal
@@ -22,13 +26,15 @@ const BaseLozengeElement = ({
   onAfterChanged,
   style,
   text,
-  testId = 'smart-element-lozenge'
+  testId = 'smart-element-lozenge',
+  isDateTag,
+  trailingMetric
 }) => {
   const ui = useFlexibleUiOptionContext();
   if (!text) {
     return null;
   }
-  const lozenge = action ? /*#__PURE__*/React.createElement(LozengeAction, {
+  const lozenge = action ? /*#__PURE__*/React.createElement(LozengeAction, _extends({
     action: action,
     appearance: appearance,
     maxWidth: maxWidth,
@@ -36,7 +42,12 @@ const BaseLozengeElement = ({
     text: text,
     zIndex: ui === null || ui === void 0 ? void 0 : ui.zIndex,
     onAfterChanged: onAfterChanged
-  }) : /*#__PURE__*/React.createElement(AtlaskitLozenge, {
+  }, trailingMetric && fg('platform-dst-lozenge-tag-badge-visual-uplifts') ? {
+    trailingMetric
+  } : undefined)) : isDateTag ? /*#__PURE__*/React.createElement(Tag, {
+    text: text,
+    migration_fallback: "lozenge"
+  }) : /*#__PURE__*/React.createElement(AtlaskitLozenge, _extends({
     appearance: appearance,
     isBold: true,
     maxWidth: maxWidth
@@ -44,14 +55,16 @@ const BaseLozengeElement = ({
     ,
     style: style,
     testId: `${testId}-lozenge`
-  }, text);
+  }, trailingMetric && fg('platform-dst-lozenge-tag-badge-visual-uplifts') ? {
+    trailingMetric
+  } : undefined), text);
   return /*#__PURE__*/React.createElement("span", {
     "data-smart-element": name,
     "data-smart-element-lozenge": true,
     "data-testid": testId
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
     ,
-    className: ax(["_1e0c116y _1ul91ns9", className])
+    className: ax(["_1e0c116y _1ul91ns9", isDateTag && fg('platform-dst-lozenge-tag-badge-visual-uplifts') && "_19pkr5cr _2hwxr5cr _otyrr5cr _18u0r5cr", className])
   }, lozenge);
 };
 export default BaseLozengeElement;

package/dist/es2019/view/FlexibleCard/components/elements/common/base-lozenge-element/lozenge-action/error-boundary/index.js

@@ -7,9 +7,10 @@ const withErrorBoundary = Component => props => {
     return /*#__PURE__*/React.createElement(Lozenge, {
       appearance: props === null || props === void 0 ? void 0 : props.appearance,
       isBold: true,
-      testId: `${(_props$testId = props === null || props === void 0 ? void 0 : props.testId) !== null && _props$testId !== void 0 ? _props$testId : 'smart-element-lozenge-action'}-fallback`
+      testId: `${(_props$testId = props === null || props === void 0 ? void 0 : props.testId) !== null && _props$testId !== void 0 ? _props$testId : 'smart-element-lozenge-action'}-fallback`,
+      trailingMetric: props === null || props === void 0 ? void 0 : props.trailingMetric
     }, props === null || props === void 0 ? void 0 : props.text);
-  }, [props === null || props === void 0 ? void 0 : props.appearance, props === null || props === void 0 ? void 0 : props.testId, props === null || props === void 0 ? void 0 : props.text]);
+  }, [props === null || props === void 0 ? void 0 : props.appearance, props === null || props === void 0 ? void 0 : props.testId, props === null || props === void 0 ? void 0 : props.text, props === null || props === void 0 ? void 0 : props.trailingMetric]);
   return /*#__PURE__*/React.createElement(ErrorBoundary, {
     fallback: fallback
   }, /*#__PURE__*/React.createElement(Component, props));

package/dist/es2019/view/FlexibleCard/components/elements/common/base-lozenge-element/lozenge-action/index.js

@@ -26,6 +26,7 @@ const LozengeAction = ({
   text,
   zIndex,
   onAfterChanged,
+  trailingMetric,
   shouldRenderToParent = false
 }) => {
   var _action$update;
@@ -91,8 +92,9 @@ const LozengeAction = ({
     isOpen: isOpen,
     maxWidth: maxWidth,
     testId: testId,
-    text: selected.text
-  })), [selected.appearance, selected.text, isOpen, maxWidth, testId]);
+    text: selected.text,
+    trailingMetric: trailingMetric
+  })), [selected.appearance, selected.text, isOpen, maxWidth, testId, trailingMetric]);
   const handleItemClick = useCallback(async (id, text, appearance) => {
     try {
       fireEvent('ui.button.clicked.smartLinkStatusListItem', {});

package/dist/es2019/view/FlexibleCard/components/elements/common/base-lozenge-element/lozenge-action/lozenge-action-trigger/index.compiled.css

@@ -11,6 +11,7 @@
 ._18m915vq{overflow-y:hidden}
 ._18u012x7{margin-left:var(--ds-space-075,6px)}
 ._18u0v77o{margin-left:var(--ds-space-025,2px)}
+._19bv1b66{padding-left:var(--ds-space-050,4px)}
 ._19bvidpf{padding-left:0}
 ._19pkv77o{margin-top:var(--ds-space-025,2px)}
 ._1bto1l2s{text-overflow:ellipsis}
@@ -25,15 +26,18 @@
 ._6ssh1y54[aria-expanded=true]{box-shadow:0 0 0 2px var(--ds-border-focused,#4688ec)}
 ._80omtlke{cursor:pointer}
 ._bfhk1j28{background-color:transparent}
+._ca0q1b66{padding-top:var(--ds-space-050,4px)}
 ._ca0qidpf{padding-top:0}
 ._ect4n7od{font-family:unset}
 ._j8b81o36[aria-expanded=true]{outline-width:medium}
 ._k48pn7od{font-weight:unset}
+._n3td1b66{padding-bottom:var(--ds-space-050,4px)}
 ._n3tdidpf{padding-bottom:0}
 ._o5721q9c{white-space:nowrap}
 ._otyrv77o{margin-bottom:var(--ds-space-025,2px)}
 ._p8tl1r31[aria-expanded=true]{outline-color:currentColor}
 ._syazn7od{color:unset}
+._u5f31b66{padding-right:var(--ds-space-050,4px)}
 ._u5f3idpf{padding-right:0}
 ._vwz4idpf{line-height:0}
 ._zg8ln7od{font-style:unset}

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

@@ -9,14 +9,15 @@ import { useCallback, useEffect, useMemo, useState } from 'react';
 import { cx } from '@compiled/react';
 import { useIntl } from 'react-intl-next';
 import ChevronDownIcon from '@atlaskit/icon/core/chevron-down';
-import Lozenge from '@atlaskit/lozenge';
+import Lozenge, { LozengeDropdownTrigger } from '@atlaskit/lozenge';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { Box } from '@atlaskit/primitives/compiled';
 import { messages } from '../../../../../../../../messages';
 const styles = {
   chevronDown: "_18u012x7 _1e0c1txw",
   lozengeContainer: "_kkk2n7od _2rko12b0 _1dqonqa1 _189ee4h9 _1h6d1j28 _bfhk1j28 _1e0c1txw _4cvr1h6o _4t3i7vkz",
-  lozengeContainerSelected: "_1reo15vq _18m915vq _1h6d1v1w"
+  lozengeContainerSelected: "_1reo15vq _18m915vq _1h6d1v1w",
+  lozengeDropdownContainer: "_ca0q1b66 _u5f31b66 _n3td1b66 _19bv1b66"
 };
 const textStyles = null;
 const triggerLozengeStyles = null;
@@ -28,6 +29,7 @@ const LozengeActionTrigger = ({
   testId,
   text,
   triggerRef,
+  trailingMetric,
   ...props
 }) => {
   const intl = useIntl();
@@ -76,7 +78,20 @@ const LozengeActionTrigger = ({
       "aria-hidden": true
     })))));
   }, [appearance, isPressing, text, isOpen, lozengeBackgroundColor, lozengeForegroundColor, maxWidth]);
-  return /*#__PURE__*/React.createElement("button", _extends({
+  return fg('platform-dst-lozenge-tag-badge-visual-uplifts') ? /*#__PURE__*/React.createElement(Box, {
+    xcss: styles.lozengeDropdownContainer
+  }, /*#__PURE__*/React.createElement(LozengeDropdownTrigger, _extends({}, props, {
+    appearance: appearance,
+    trailingMetric: trailingMetric,
+    "data-action-open": isOpen,
+    "data-testid": `${testId}--trigger`,
+    maxWidth: maxWidth,
+    testId: testId,
+    ref: triggerRef,
+    "aria-label": fg('platform_navx_flex_card_status_dropdown_a11y_fix') ? intl.formatMessage(messages.change_status, {
+      status: text
+    }) : undefined
+  }), text)) : /*#__PURE__*/React.createElement("button", _extends({
     type: "button"
   }, props, {
     "data-action-open": isOpen,

package/dist/es2019/view/FlexibleCard/components/elements/due-on-element/index.js

@@ -7,7 +7,8 @@ const DueOnElement = props => {
   const context = useFlexibleUiContext();
   const data = context ? toDateLozengeProps(context.dueOn) : null;
   return data ? /*#__PURE__*/React.createElement(BaseLozengeElement, _extends({}, data, props, {
-    name: ElementName.DueOn
+    name: ElementName.DueOn,
+    isDateTag: true
   })) : null;
 };
 export default DueOnElement;

package/dist/es2019/view/FlexibleCard/components/elements/state-element/index.js

@@ -1,14 +1,33 @@
 import _extends from "@babel/runtime/helpers/extends";
-import React from 'react';
+import React, { useMemo } from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { ElementName } from '../../../../../constants';
 import { useFlexibleUiContext } from '../../../../../state/flexible-ui-context';
 import { BaseLozengeElement } from '../common';
+const STATE_METRIC_REGEX = /^(.+?)\s+-\s+(\d+(?:\.\d+)?)$/;
 const StateElement = props => {
   var _context$state;
   const context = useFlexibleUiContext();
   const data = (_context$state = context === null || context === void 0 ? void 0 : context.state) !== null && _context$state !== void 0 ? _context$state : null;
-  return data ? /*#__PURE__*/React.createElement(BaseLozengeElement, _extends({}, data, props, {
+  const metricProps = fg('platform-dst-lozenge-tag-badge-visual-uplifts') ?
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  useMemo(() => {
+    if (data && typeof data.text === 'string') {
+      const match = data.text.match(STATE_METRIC_REGEX);
+      if (match) {
+        return {
+          text: match[1],
+          trailingMetric: match[2]
+        };
+      }
+    }
+    return null;
+  }, [data]) : undefined;
+  if (!data) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(BaseLozengeElement, _extends({}, data, props, metricProps, {
     name: ElementName.State
-  })) : null;
+  }));
 };
 export default StateElement;

package/dist/es2019/view/InlineCard/Frame/styled.compiled.css

@@ -1,7 +1,7 @@
 
 ._19itia51{border:var(--ds-border-width,1px) solid var(--ds-border,#0b120e24)}
 ._1yt4x7n9{padding:var(--ds-space-025,2px) 0}
-._2rko12b0{border-radius:var(--ds-radius-small,4px)}
+._2rko1ssi{border-radius:var(--ds-radius-medium,4px)}
 ._v56415x0{transition:all .1s ease-in-out}
 ._1h6d1w55{border-color:var(--ds-border-accent-blue,#357de8)}._12ji1r31{outline-color:currentColor}
 ._12y31o36{outline-width:medium}

package/dist/es2019/view/InlineCard/Frame/styled.js

@@ -15,7 +15,7 @@ export const WrapperSpan = /*#__PURE__*/forwardRef(({
   return /*#__PURE__*/React.createElement("span", _extends({
     ref: ref
   }, props, {
-    className: ax(["_1yt4x7n9 _2rko12b0 _v56415x0 _1e0c1nu9 _16d9qvcn _syaz13af _1rkwglyw _4cvx1w55", truncateInline && "_1reo15vq _18m915vq _ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _1bto1l2s _1nmz9jpi _1e0c1abx _1yyjkb7n _sudp1e54 _nr8z1o8l _1voyv77o _3kwxidpf _jqg5v77o _6vwiidpf", truncateInline && viewType === 'unauthorised' && "_syaz15cr", withoutBackground ? "_19bvidpf _18u01i6y" : "_19itia51 _bfhkhp5a _1a3b1r31 _4fprglyw _5goinqa1 _9oik1r31 _1bnxglyw _jf4cnqa1 _1nrm1r31 _c2waglyw _1iohnqa1", isHovered && "_1h6d1w55", isHovered && !withoutBackground && "_4bfu1r31 _1hmsglyw _ajmmnqa1", isSelected ? "_12ji1r31 _1qu2glyw _12y31o36 _80omtlke _16qsw5lj _uiztglyw _1a3b1r31 _4fprglyw _5goinqa1 _9oik1r31 _1bnxglyw _jf4cnqa1 _bfw7ia51 _1nrm1r31 _c2waglyw _1iohnqa1" : "_uizt1kdv"])
+    className: ax(["_1yt4x7n9 _2rko1ssi _v56415x0 _1e0c1nu9 _16d9qvcn _syaz13af _1rkwglyw _4cvx1w55", truncateInline && "_1reo15vq _18m915vq _ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _1bto1l2s _1nmz9jpi _1e0c1abx _1yyjkb7n _sudp1e54 _nr8z1o8l _1voyv77o _3kwxidpf _jqg5v77o _6vwiidpf", truncateInline && viewType === 'unauthorised' && "_syaz15cr", withoutBackground ? "_19bvidpf _18u01i6y" : "_19itia51 _bfhkhp5a _1a3b1r31 _4fprglyw _5goinqa1 _9oik1r31 _1bnxglyw _jf4cnqa1 _1nrm1r31 _c2waglyw _1iohnqa1", isHovered && "_1h6d1w55", isHovered && !withoutBackground && "_4bfu1r31 _1hmsglyw _ajmmnqa1", isSelected ? "_12ji1r31 _1qu2glyw _12y31o36 _80omtlke _16qsw5lj _uiztglyw _1a3b1r31 _4fprglyw _5goinqa1 _9oik1r31 _1bnxglyw _jf4cnqa1 _bfw7ia51 _1nrm1r31 _c2waglyw _1iohnqa1" : "_uizt1kdv"])
   }), props.children);
 });
 export const WrapperAnchor = /*#__PURE__*/forwardRef(({
@@ -32,7 +32,7 @@ export const WrapperAnchor = /*#__PURE__*/forwardRef(({
     href: href,
     ref: ref
   }, props, {
-    className: ax(["_1yt4x7n9 _2rko12b0 _v56415x0 _1e0c1nu9 _16d9qvcn _syaz13af _1rkwglyw _4cvx1w55", truncateInline && "_1reo15vq _18m915vq _ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _1bto1l2s _1nmz9jpi _1e0c1abx _1yyjkb7n _sudp1e54 _nr8z1o8l _1voyv77o _3kwxidpf _jqg5v77o _6vwiidpf", truncateInline && viewType === 'unauthorised' && "_syaz15cr", withoutBackground ? "_19bvidpf _18u01i6y" : "_19itia51 _bfhkhp5a _1a3b1r31 _4fprglyw _5goinqa1 _9oik1r31 _1bnxglyw _jf4cnqa1 _1nrm1r31 _c2waglyw _1iohnqa1", isHovered && "_1h6d1w55", isHovered && !withoutBackground && "_4bfu1r31 _1hmsglyw _ajmmnqa1", isSelected ? "_12ji1r31 _1qu2glyw _12y31o36 _80omtlke _16qsw5lj _uiztglyw _1a3b1r31 _4fprglyw _5goinqa1 _9oik1r31 _1bnxglyw _jf4cnqa1 _bfw7ia51 _1nrm1r31 _c2waglyw _1iohnqa1" : "_uizt1kdv", isInteractive && "_nt751r31 _49pcglyw _1hvw1o36 _1372tlke _7ehiw5lj _1j5pglyw _1di615s3", viewType === 'errored' && "_4bfu1r31 _1hms8stv _ajmmnqa1 _9oik1r31 _1bnxglyw _jf4cnqa1"])
+    className: ax(["_1yt4x7n9 _2rko1ssi _v56415x0 _1e0c1nu9 _16d9qvcn _syaz13af _1rkwglyw _4cvx1w55", truncateInline && "_1reo15vq _18m915vq _ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _1bto1l2s _1nmz9jpi _1e0c1abx _1yyjkb7n _sudp1e54 _nr8z1o8l _1voyv77o _3kwxidpf _jqg5v77o _6vwiidpf", truncateInline && viewType === 'unauthorised' && "_syaz15cr", withoutBackground ? "_19bvidpf _18u01i6y" : "_19itia51 _bfhkhp5a _1a3b1r31 _4fprglyw _5goinqa1 _9oik1r31 _1bnxglyw _jf4cnqa1 _1nrm1r31 _c2waglyw _1iohnqa1", isHovered && "_1h6d1w55", isHovered && !withoutBackground && "_4bfu1r31 _1hmsglyw _ajmmnqa1", isSelected ? "_12ji1r31 _1qu2glyw _12y31o36 _80omtlke _16qsw5lj _uiztglyw _1a3b1r31 _4fprglyw _5goinqa1 _9oik1r31 _1bnxglyw _jf4cnqa1 _bfw7ia51 _1nrm1r31 _c2waglyw _1iohnqa1" : "_uizt1kdv", isInteractive && "_nt751r31 _49pcglyw _1hvw1o36 _1372tlke _7ehiw5lj _1j5pglyw _1di615s3", viewType === 'errored' && "_4bfu1r31 _1hms8stv _ajmmnqa1 _9oik1r31 _1bnxglyw _jf4cnqa1"])
   }), props.children);
 });
 const baseWrapperStyles = null;

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

@@ -1,24 +1,42 @@
 import React from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { HoverCard } from '../../HoverCard';
 import InlineLozenge from '../common/inline-lozenge';
 import { Frame } from '../Frame';
 import { IconAndTitleLayout } from '../IconAndTitleLayout';
 export class InlineCardResolvedView extends React.Component {
   renderLozenge() {
-    var _lozenge$style, _lozenge$style2;
+    var _lozenge$style3, _lozenge$style4;
     const {
       lozenge
     } = this.props;
-    if (!lozenge) {
+    if (!lozenge || !(lozenge !== null && lozenge !== void 0 && lozenge.text)) {
       return null;
     }
+    if (fg('platform-dst-lozenge-tag-badge-visual-uplifts')) {
+      const stateMetricMatch = lozenge.text.match(/^(.+?)\s+-\s+(\d+(?:\.\d+)?)$/);
+      if (stateMetricMatch) {
+        var _lozenge$style, _lozenge$style2;
+        const [, label, metric] = stateMetricMatch;
+        const appearance = lozenge.appearance || 'neutral';
+        return /*#__PURE__*/React.createElement(InlineLozenge, {
+          testId: "inline-card-resolved-view-lozenge",
+          appearance: appearance,
+          style: {
+            backgroundColor: lozenge === null || lozenge === void 0 ? void 0 : (_lozenge$style = lozenge.style) === null || _lozenge$style === void 0 ? void 0 : _lozenge$style.backgroundColor,
+            color: lozenge === null || lozenge === void 0 ? void 0 : (_lozenge$style2 = lozenge.style) === null || _lozenge$style2 === void 0 ? void 0 : _lozenge$style2.color
+          },
+          trailingMetric: metric
+        }, label);
+      }
+    }
     const appearance = lozenge.appearance || 'default';
     return /*#__PURE__*/React.createElement(InlineLozenge, {
       testId: "inline-card-resolved-view-lozenge",
       appearance: appearance,
       style: {
-        backgroundColor: lozenge === null || lozenge === void 0 ? void 0 : (_lozenge$style = lozenge.style) === null || _lozenge$style === void 0 ? void 0 : _lozenge$style.backgroundColor,
-        color: lozenge === null || lozenge === void 0 ? void 0 : (_lozenge$style2 = lozenge.style) === null || _lozenge$style2 === void 0 ? void 0 : _lozenge$style2.color
+        backgroundColor: lozenge === null || lozenge === void 0 ? void 0 : (_lozenge$style3 = lozenge.style) === null || _lozenge$style3 === void 0 ? void 0 : _lozenge$style3.backgroundColor,
+        color: lozenge === null || lozenge === void 0 ? void 0 : (_lozenge$style4 = lozenge.style) === null || _lozenge$style4 === void 0 ? void 0 : _lozenge$style4.color
       },
       isBold: lozenge.isBold !== false
     }, lozenge.text);

package/dist/es2019/view/InlineCard/common/inline-lozenge/index.compiled.css

@@ -3,6 +3,7 @@
 ._19pkidpf{margin-top:0}
 ._1e0c1o8l{display:inline-block}
 ._2hwx1b66{margin-right:var(--ds-space-050,4px)}
+._2hwxt94y{margin-right:1px}
 ._kqswh2mm{position:relative}
 ._otyridpf{margin-bottom:0}
 ._p12f1osq{max-width:100%}

package/dist/es2019/view/InlineCard/common/inline-lozenge/index.js

@@ -8,19 +8,20 @@ import { fg } from '@atlaskit/platform-feature-flags';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 const wrapperStylesOld = null;
 const wrapperStylesNew = null;
+const wrapperStylesNewLozenge = null;
 const InlineLozenge = props => {
   const shouldAddLozengeAttribute = expValEquals('confluence_compact_text_format', 'isEnabled', true) || expValEquals('cc_editor_ai_content_mode', 'variant', 'test') && fg('platform_editor_content_mode_button_mvp');
   if (fg('jfp-magma-platform-lozenge-jump-fix')) {
     return /*#__PURE__*/React.createElement("span", _extends({}, shouldAddLozengeAttribute && {
       'data-inline-card-lozenge': true
     }, {
-      className: ax(["_1e0c1o8l _154i1n1a _kqswh2mm _19pkidpf _2hwx1b66 _otyridpf _18u0v77o _p12f1osq"])
+      className: ax(["_1e0c1o8l _154i1n1a _kqswh2mm _19pkidpf _2hwx1b66 _otyridpf _18u0v77o _p12f1osq", fg('platform-dst-lozenge-tag-badge-visual-uplifts') && "_2hwxt94y"])
     }), /*#__PURE__*/React.createElement(Lozenge, props));
   }
   return /*#__PURE__*/React.createElement("span", _extends({}, shouldAddLozengeAttribute && {
     'data-inline-card-lozenge': true
   }, {
-    className: ax(["_1e0c1o8l _s7n4t94y _19pkidpf _2hwx1b66 _otyridpf _18u0v77o _p12f1osq"])
+    className: ax(["_1e0c1o8l _s7n4t94y _19pkidpf _2hwx1b66 _otyridpf _18u0v77o _p12f1osq", fg('platform-dst-lozenge-tag-badge-visual-uplifts') && "_2hwxt94y"])
   }), /*#__PURE__*/React.createElement(Lozenge, props));
 };
 export default InlineLozenge;

package/dist/es2019/view/LinkUrl/index.js

@@ -12,7 +12,7 @@ import LinkWarningModal from './LinkWarningModal';
 import { useLinkWarningModal } from './LinkWarningModal/hooks/use-link-warning-modal';
 const PACKAGE_DATA = {
   packageName: "@atlaskit/smart-card",
-  packageVersion: "43.28.5",
+  packageVersion: "43.28.7",
   componentName: 'linkUrl'
 };
 const Anchor = withLinkClickedEvent('a');

package/dist/esm/__tests__/vr-tests/__snapshots__/inline-card/inline-card-with-status-lozenge--default--platform-dst-lozenge-tag-badge-visual-uplifts-false.png

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:686940f1db5a2d63ffc6d49886ef1572d9979bb410d35a01cc78164900fe20ca
+size 6514

package/dist/esm/__tests__/vr-tests/__snapshots__/inline-card/inline-card-with-status-lozenge--default--platform-dst-lozenge-tag-badge-visual-uplifts-true.png

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:5a0d1d93103a2fafdb568cc16497668ec0826e658e7e54fb6c4022df15e05b93
+size 6381

package/dist/esm/messages.js

@@ -3,7 +3,7 @@ export var messages = defineMessages({
   actions: {
     id: 'fabric.linking.actions',
     defaultMessage: 'Actions',
-    description: ''
+    description: 'Title for a section or menu containing available actions for a resource.'
   },
   add_account: {
     id: 'fabric.linking.add_account',
@@ -98,7 +98,7 @@ export var messages = defineMessages({
   cancel: {
     id: 'fabric.linking.cancel',
     defaultMessage: 'Cancel',
-    description: 'cancel'
+    description: 'Cancel the current action or close the modal.'
   },
   beta: {
     id: 'fabric.linking.beta',
@@ -128,7 +128,7 @@ export var messages = defineMessages({
   close: {
     id: 'fabric.linking.close',
     defaultMessage: 'Close',
-    description: ''
+    description: 'Close the current screen or modal.'
   },
   check_this_link: {
     id: 'fabric.linking.check_this_link',
@@ -137,7 +137,8 @@ export var messages = defineMessages({
   },
   compass_applied_components_count: {
     id: 'compass.applied_components_count.non-final',
-    defaultMessage: 'Applied to {numberOfComponents, plural, one {{numberOfComponents, number} component}  other {{numberOfComponents, number} components}}'
+    defaultMessage: 'Applied to {numberOfComponents, plural, one {{numberOfComponents, number} component}  other {{numberOfComponents, number} components}}',
+    description: 'Indicates the number of components the resource is applied to.'
   },
   connect_to: {
     id: 'fabric.linking.connect_to',
@@ -187,12 +188,12 @@ export var messages = defineMessages({
   continue: {
     id: 'fabric.linking.continue',
     defaultMessage: 'Continue',
-    description: 'continue'
+    description: 'Continue to the next step.'
   },
   copy_url_to_clipboard: {
     id: 'fabric.linking.copy_url_to_clipboard',
     defaultMessage: 'Copy link',
-    description: ''
+    description: 'Action to copy the URL of the link to the clipboard.'
   },
   copied_url_to_clipboard: {
     id: 'fabric.linking.copied_url_to_clipboard',
@@ -227,7 +228,7 @@ export var messages = defineMessages({
   download: {
     id: 'fabric.linking.download',
     defaultMessage: 'Download',
-    description: ''
+    description: 'Action to download the resource.'
   },
   download_description: {
     id: 'fabric.linking.download_description',

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

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

package/dist/esm/view/FlexibleCard/components/common/image-icon/index.js

@@ -14,7 +14,8 @@ var styles = {
 var messages = defineMessages({
   imageAltText: {
     id: 'smart-link.image-icon.altText',
-    defaultMessage: 'Link Icon'
+    defaultMessage: 'Link Icon',
+    description: 'Alt text for a link icon.'
   }
 });
 var ImageIcon = function ImageIcon(_ref) {

package/dist/esm/view/FlexibleCard/components/elements/common/base-lozenge-element/index.compiled.css

@@ -1,2 +1,6 @@
+._18u0r5cr{margin-left:var(--ds-space-negative-050,-4px)}
+._19pkr5cr{margin-top:var(--ds-space-negative-050,-4px)}
 ._1e0c116y{display:inline-flex}
-._1ul91ns9{min-width:-moz-fit-content;min-width:fit-content}
+._1ul91ns9{min-width:-moz-fit-content;min-width:fit-content}
+._2hwxr5cr{margin-right:var(--ds-space-negative-050,-4px)}
+._otyrr5cr{margin-bottom:var(--ds-space-negative-050,-4px)}

package/dist/esm/view/FlexibleCard/components/elements/common/base-lozenge-element/index.js

@@ -1,12 +1,16 @@
 /* index.tsx generated by @compiled/babel-plugin v0.39.1 */
+import _extends from "@babel/runtime/helpers/extends";
 import "./index.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { FormattedDate } from 'react-intl-next';
 import AtlaskitLozenge from '@atlaskit/lozenge';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { SimpleTag as Tag } from '@atlaskit/tag';
 import { useFlexibleUiOptionContext } from '../../../../../../state/flexible-ui-context';
 import LozengeAction from './lozenge-action';
 var styles = null;
+var dueOnStyles = null;
 /**
  * A base element that displays a Lozenge.
  * @internal
@@ -24,12 +28,14 @@ var BaseLozengeElement = function BaseLozengeElement(_ref) {
     style = _ref.style,
     text = _ref.text,
     _ref$testId = _ref.testId,
-    testId = _ref$testId === void 0 ? 'smart-element-lozenge' : _ref$testId;
+    testId = _ref$testId === void 0 ? 'smart-element-lozenge' : _ref$testId,
+    isDateTag = _ref.isDateTag,
+    trailingMetric = _ref.trailingMetric;
   var ui = useFlexibleUiOptionContext();
   if (!text) {
     return null;
   }
-  var lozenge = action ? /*#__PURE__*/React.createElement(LozengeAction, {
+  var lozenge = action ? /*#__PURE__*/React.createElement(LozengeAction, _extends({
     action: action,
     appearance: appearance,
     maxWidth: maxWidth,
@@ -37,7 +43,12 @@ var BaseLozengeElement = function BaseLozengeElement(_ref) {
     text: text,
     zIndex: ui === null || ui === void 0 ? void 0 : ui.zIndex,
     onAfterChanged: onAfterChanged
-  }) : /*#__PURE__*/React.createElement(AtlaskitLozenge, {
+  }, trailingMetric && fg('platform-dst-lozenge-tag-badge-visual-uplifts') ? {
+    trailingMetric: trailingMetric
+  } : undefined)) : isDateTag ? /*#__PURE__*/React.createElement(Tag, {
+    text: text,
+    migration_fallback: "lozenge"
+  }) : /*#__PURE__*/React.createElement(AtlaskitLozenge, _extends({
     appearance: appearance,
     isBold: true,
     maxWidth: maxWidth
@@ -45,14 +56,16 @@ var BaseLozengeElement = function BaseLozengeElement(_ref) {
     ,
     style: style,
     testId: "".concat(testId, "-lozenge")
-  }, text);
+  }, trailingMetric && fg('platform-dst-lozenge-tag-badge-visual-uplifts') ? {
+    trailingMetric: trailingMetric
+  } : undefined), text);
   return /*#__PURE__*/React.createElement("span", {
     "data-smart-element": name,
     "data-smart-element-lozenge": true,
     "data-testid": testId
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
     ,
-    className: ax(["_1e0c116y _1ul91ns9", className])
+    className: ax(["_1e0c116y _1ul91ns9", isDateTag && fg('platform-dst-lozenge-tag-badge-visual-uplifts') && "_19pkr5cr _2hwxr5cr _otyrr5cr _18u0r5cr", className])
   }, lozenge);
 };
 export default BaseLozengeElement;

package/dist/esm/view/FlexibleCard/components/elements/common/base-lozenge-element/lozenge-action/error-boundary/index.js

@@ -8,9 +8,10 @@ var withErrorBoundary = function withErrorBoundary(Component) {
       return /*#__PURE__*/React.createElement(Lozenge, {
         appearance: props === null || props === void 0 ? void 0 : props.appearance,
         isBold: true,
-        testId: "".concat((_props$testId = props === null || props === void 0 ? void 0 : props.testId) !== null && _props$testId !== void 0 ? _props$testId : 'smart-element-lozenge-action', "-fallback")
+        testId: "".concat((_props$testId = props === null || props === void 0 ? void 0 : props.testId) !== null && _props$testId !== void 0 ? _props$testId : 'smart-element-lozenge-action', "-fallback"),
+        trailingMetric: props === null || props === void 0 ? void 0 : props.trailingMetric
       }, props === null || props === void 0 ? void 0 : props.text);
-    }, [props === null || props === void 0 ? void 0 : props.appearance, props === null || props === void 0 ? void 0 : props.testId, props === null || props === void 0 ? void 0 : props.text]);
+    }, [props === null || props === void 0 ? void 0 : props.appearance, props === null || props === void 0 ? void 0 : props.testId, props === null || props === void 0 ? void 0 : props.text, props === null || props === void 0 ? void 0 : props.trailingMetric]);
     return /*#__PURE__*/React.createElement(ErrorBoundary, {
       fallback: fallback
     }, /*#__PURE__*/React.createElement(Component, props));

package/dist/esm/view/FlexibleCard/components/elements/common/base-lozenge-element/lozenge-action/index.js

@@ -35,6 +35,7 @@ var LozengeAction = function LozengeAction(_ref) {
     text = _ref.text,
     zIndex = _ref.zIndex,
     onAfterChanged = _ref.onAfterChanged,
+    trailingMetric = _ref.trailingMetric,
     _ref$shouldRenderToPa = _ref.shouldRenderToParent,
     shouldRenderToParent = _ref$shouldRenderToPa === void 0 ? false : _ref$shouldRenderToPa;
   var _useState = useState({
@@ -143,9 +144,10 @@ var LozengeAction = function LozengeAction(_ref) {
       isOpen: isOpen,
       maxWidth: maxWidth,
       testId: testId,
-      text: selected.text
+      text: selected.text,
+      trailingMetric: trailingMetric
     }));
-  }, [selected.appearance, selected.text, isOpen, maxWidth, testId]);
+  }, [selected.appearance, selected.text, isOpen, maxWidth, testId, trailingMetric]);
   var handleItemClick = useCallback( /*#__PURE__*/function () {
     var _ref4 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(id, text, appearance) {
       var updateAction, request;

package/dist/esm/view/FlexibleCard/components/elements/common/base-lozenge-element/lozenge-action/lozenge-action-trigger/index.compiled.css

@@ -11,6 +11,7 @@
 ._18m915vq{overflow-y:hidden}
 ._18u012x7{margin-left:var(--ds-space-075,6px)}
 ._18u0v77o{margin-left:var(--ds-space-025,2px)}
+._19bv1b66{padding-left:var(--ds-space-050,4px)}
 ._19bvidpf{padding-left:0}
 ._19pkv77o{margin-top:var(--ds-space-025,2px)}
 ._1bto1l2s{text-overflow:ellipsis}
@@ -25,15 +26,18 @@
 ._6ssh1y54[aria-expanded=true]{box-shadow:0 0 0 2px var(--ds-border-focused,#4688ec)}
 ._80omtlke{cursor:pointer}
 ._bfhk1j28{background-color:transparent}
+._ca0q1b66{padding-top:var(--ds-space-050,4px)}
 ._ca0qidpf{padding-top:0}
 ._ect4n7od{font-family:unset}
 ._j8b81o36[aria-expanded=true]{outline-width:medium}
 ._k48pn7od{font-weight:unset}
+._n3td1b66{padding-bottom:var(--ds-space-050,4px)}
 ._n3tdidpf{padding-bottom:0}
 ._o5721q9c{white-space:nowrap}
 ._otyrv77o{margin-bottom:var(--ds-space-025,2px)}
 ._p8tl1r31[aria-expanded=true]{outline-color:currentColor}
 ._syazn7od{color:unset}
+._u5f31b66{padding-right:var(--ds-space-050,4px)}
 ._u5f3idpf{padding-right:0}
 ._vwz4idpf{line-height:0}
 ._zg8ln7od{font-style:unset}

package/dist/esm/view/FlexibleCard/components/elements/common/base-lozenge-element/lozenge-action/lozenge-action-trigger/index.js

@@ -2,7 +2,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["appearance", "isOpen", "maxWidth", "testId", "text", "triggerRef"];
+var _excluded = ["appearance", "isOpen", "maxWidth", "testId", "text", "triggerRef", "trailingMetric"];
 import "./index.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
@@ -12,14 +12,15 @@ import { useCallback, useEffect, useMemo, useState } from 'react';
 import { cx } from '@compiled/react';
 import { useIntl } from 'react-intl-next';
 import ChevronDownIcon from '@atlaskit/icon/core/chevron-down';
-import Lozenge from '@atlaskit/lozenge';
+import Lozenge, { LozengeDropdownTrigger } from '@atlaskit/lozenge';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { Box } from '@atlaskit/primitives/compiled';
 import { messages } from '../../../../../../../../messages';
 var styles = {
   chevronDown: "_18u012x7 _1e0c1txw",
   lozengeContainer: "_kkk2n7od _2rko12b0 _1dqonqa1 _189ee4h9 _1h6d1j28 _bfhk1j28 _1e0c1txw _4cvr1h6o _4t3i7vkz",
-  lozengeContainerSelected: "_1reo15vq _18m915vq _1h6d1v1w"
+  lozengeContainerSelected: "_1reo15vq _18m915vq _1h6d1v1w",
+  lozengeDropdownContainer: "_ca0q1b66 _u5f31b66 _n3td1b66 _19bv1b66"
 };
 var textStyles = null;
 var triggerLozengeStyles = null;
@@ -31,6 +32,7 @@ var LozengeActionTrigger = function LozengeActionTrigger(_ref) {
     testId = _ref.testId,
     text = _ref.text,
     triggerRef = _ref.triggerRef,
+    trailingMetric = _ref.trailingMetric,
     props = _objectWithoutProperties(_ref, _excluded);
   var intl = useIntl();
   var _useState = useState(false),
@@ -91,7 +93,20 @@ var LozengeActionTrigger = function LozengeActionTrigger(_ref) {
       "aria-hidden": true
     })))));
   }, [appearance, isPressing, text, isOpen, lozengeBackgroundColor, lozengeForegroundColor, maxWidth]);
-  return /*#__PURE__*/React.createElement("button", _extends({
+  return fg('platform-dst-lozenge-tag-badge-visual-uplifts') ? /*#__PURE__*/React.createElement(Box, {
+    xcss: styles.lozengeDropdownContainer
+  }, /*#__PURE__*/React.createElement(LozengeDropdownTrigger, _extends({}, props, {
+    appearance: appearance,
+    trailingMetric: trailingMetric,
+    "data-action-open": isOpen,
+    "data-testid": "".concat(testId, "--trigger"),
+    maxWidth: maxWidth,
+    testId: testId,
+    ref: triggerRef,
+    "aria-label": fg('platform_navx_flex_card_status_dropdown_a11y_fix') ? intl.formatMessage(messages.change_status, {
+      status: text
+    }) : undefined
+  }), text)) : /*#__PURE__*/React.createElement("button", _extends({
     type: "button"
   }, props, {
     "data-action-open": isOpen,