@atlaskit/smart-card 26.14.1 → 26.14.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (13) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/dist/cjs/version.json +1 -1
  3. package/dist/cjs/view/CardWithUrl/component.js +1 -1
  4. package/dist/cjs/view/EmbedCard/components/styled.js +15 -9
  5. package/dist/es2019/version.json +1 -1
  6. package/dist/es2019/view/CardWithUrl/component.js +1 -1
  7. package/dist/es2019/view/EmbedCard/components/styled.js +26 -12
  8. package/dist/esm/version.json +1 -1
  9. package/dist/esm/view/CardWithUrl/component.js +1 -1
  10. package/dist/esm/view/EmbedCard/components/styled.js +15 -7
  11. package/dist/types/view/EmbedCard/components/styled.d.ts +0 -1
  12. package/dist/types-ts4.5/view/EmbedCard/components/styled.d.ts +0 -1
  13. package/package.json +2 -2
package/CHANGELOG.md CHANGED
@@ -1,5 +1,11 @@
1
1
  # @atlaskit/smart-card
2
2
 
3
+ ## 26.14.2
4
+
5
+ ### Patch Changes
6
+
7
+ - [`6a807668da6`](https://bitbucket.org/atlassian/atlassian-frontend/commits/6a807668da6) - [ux] Refreshed design for the Embed Smart Links view added under the FF
8
+
3
9
  ## 26.14.1
4
10
 
5
11
  ### Patch Changes
package/dist/cjs/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/smart-card",
3
- "version": "26.14.1",
3
+ "version": "26.14.2",
4
4
  "sideEffects": false
5
5
  }
package/dist/cjs/view/CardWithUrl/component.js CHANGED
@@ -224,7 +224,7 @@ function Component(_ref) {
224
224
  showAuthTooltip: showAuthTooltip,
225
225
  showServerActions: showServerActions
226
226
  };
227
- return (0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.smart-card.show-inline-card-refreshed-design') ? /*#__PURE__*/_react.default.createElement(_RedesignedInlineCard.InlineCard, inlineProps) : /*#__PURE__*/_react.default.createElement(_InlineCard.InlineCard, inlineProps);
227
+ return (0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.smart-card.show-smart-links-refreshed-design') ? /*#__PURE__*/_react.default.createElement(_RedesignedInlineCard.InlineCard, inlineProps) : /*#__PURE__*/_react.default.createElement(_InlineCard.InlineCard, inlineProps);
228
228
  case 'block':
229
229
  return /*#__PURE__*/_react.default.createElement(_BlockCard.BlockCard, {
230
230
  id: id,
package/dist/cjs/view/EmbedCard/components/styled.js CHANGED
@@ -5,21 +5,24 @@ var _typeof = require("@babel/runtime/helpers/typeof");
5
5
  Object.defineProperty(exports, "__esModule", {
6
6
  value: true
7
7
  });
8
- exports.maxAvatarCount = exports.embedHeaderHeight = exports.ellipsis = exports.csssize = exports.className = exports.cardShadow = exports.borderRadius = exports.Wrapper = exports.UsersWrapper = exports.Title = exports.Thumbnail = exports.TextWrapper = exports.ResolvedViewIconWrapper = exports.LinkWrapper = exports.Image = exports.IconWrapper = exports.Header = exports.Description = exports.ContentWrapper = exports.Content = exports.Byline = exports.AlertWrapper = exports.ActionsWrapper = void 0;
8
+ exports.maxAvatarCount = exports.embedHeaderHeight = exports.ellipsis = exports.csssize = exports.className = exports.borderRadius = exports.Wrapper = exports.UsersWrapper = exports.Title = exports.Thumbnail = exports.TextWrapper = exports.ResolvedViewIconWrapper = exports.LinkWrapper = exports.Image = exports.IconWrapper = exports.Header = exports.Description = exports.ContentWrapper = exports.Content = exports.Byline = exports.AlertWrapper = exports.ActionsWrapper = void 0;
9
9
  var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
10
10
  var _styled = _interopRequireDefault(require("@emotion/styled"));
11
11
  var _constants = require("@atlaskit/theme/constants");
12
12
  var colors = _interopRequireWildcard(require("@atlaskit/theme/colors"));
13
13
  var _utils = require("../../common/utils");
14
+ var _components = require("@atlaskit/theme/components");
15
+ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
14
16
  var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16;
15
17
  function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
16
18
  function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
17
19
  var className = 'media-card-frame';
18
20
  exports.className = className;
19
- var cardShadow = "";
20
- exports.cardShadow = cardShadow;
21
21
  var borderRadius = "\n border-radius: ".concat((0, _constants.borderRadius)(), "px;\n");
22
22
  exports.borderRadius = borderRadius;
23
+ var BACKGROUND_COLOR_DARK = '#262B31';
24
+ var wrapperBorderRadius = "\n border-radius: ".concat("var(--ds-border-radius-400, 16px)", ";\n");
25
+ var contentBorderRadius = "\n border-radius: ".concat("var(--ds-border-radius-300, 12px)", ";\n");
23
26
  var ellipsis = function ellipsis() {
24
27
  var maxWidth = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '100%';
25
28
  var unit = typeof maxWidth === 'number' ? 'px' : '';
@@ -51,21 +54,24 @@ function maxWidth(_ref2) {
51
54
  function getInteractiveStyles(_ref3) {
52
55
  var isInteractive = _ref3.isInteractive,
53
56
  frameStyle = _ref3.frameStyle;
54
- return isInteractive ? "\n &:hover {\n ".concat(frameStyle !== 'hide' && visibleStyles, "\n }\n &:active {\n background-color: ", "var(--ds-background-selected, ".concat(colors.B50, ")"), ";\n }\n ") : '';
57
+ return isInteractive ? "\n &:hover {\n ".concat(frameStyle !== 'hide' && visibleStyles, "\n\n }\n &:active {\n background-color: ", "var(--ds-background-selected, ".concat(colors.B50, ")"), ";\n }\n ") : '';
55
58
  }
56
59
  function selected(_ref4) {
57
60
  var isSelected = _ref4.isSelected,
58
61
  frameStyle = _ref4.frameStyle;
59
- return isSelected && frameStyle !== 'hide' ? "\n ".concat(visibleStyles, "\n &::after {\n cursor: pointer;\n box-shadow: 0 0 0 3px ", "var(--ds-border-selected, ".concat(colors.B100, ")"), ";\n content: '';\n outline: none;\n position: absolute;\n height: 100%;\n width: 100%;\n left: 0;\n ").concat(borderRadius, "\n }\n ") : isSelected && frameStyle === 'hide' ? "\n box-shadow: 0 0 0 3px ".concat("var(--ds-border-selected, ".concat(colors.B100, ")"), ";\n ", borderRadius, "\n ") : '';
62
+ return isSelected && frameStyle !== 'hide' ? "\n ".concat(visibleStyles, "\n &::after {\n cursor: pointer;\n box-shadow: 0 0 0 3px ", "var(--ds-border-selected, ".concat(colors.B100, ")"), ";\n content: '';\n outline: none;\n position: absolute;\n height: 100%;\n width: 100%;\n left: 0;\n ").concat((0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.smart-card.show-smart-links-refreshed-design') ? wrapperBorderRadius : borderRadius, "\n }\n ") : isSelected && frameStyle === 'hide' ? "\n ".concat((0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.smart-card.show-smart-links-refreshed-design') ? contentBorderRadius : "box-shadow: 0 0 0 3px ".concat("var(--ds-border-selected, ".concat(colors.B100, ")"), ";\n ", borderRadius), "\n ") : '';
60
63
  }
61
64
  var height = function height(_ref5) {
62
65
  var inheritDimensions = _ref5.inheritDimensions;
63
66
  return inheritDimensions ? 'height: 100%;' : "height: ".concat((0, _utils.gs)(54));
64
67
  };
65
68
  var wrapperStyles = function wrapperStyles(props) {
66
- return "\n ".concat(borderRadius, "\n ").concat(minWidth(props), "\n ").concat(maxWidth(props), "\n ").concat(getInteractiveStyles(props), "\n ").concat(visible(props), "\n display: inline-flex;\n flex-direction: column;\n box-sizing: border-box;\n font-family: ").concat((0, _constants.fontFamily)(), ";\n width: 100%;\n user-select: none;\n line-height: initial;\n transition: background 0.3s;\n position: relative;\n ").concat(height(props), ";\n ").concat(selected(props), "\n\n &:after {\n content: '';\n background: transparent;\n transition: background 0.3s, box-shadow 0.3s;\n position: absolute;\n width: calc(100% + ", "var(--ds-space-200, 16px)", ");\n height: calc(100% + ", "var(--ds-space-100, 8px)", ");\n left: calc(-1 * ", "var(--ds-space-100, 8px)", ");\n ").concat(borderRadius, "\n }\n");
69
+ return "\n ".concat((0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.smart-card.show-smart-links-refreshed-design') ? wrapperBorderRadius : borderRadius, "\n ").concat(minWidth(props), "\n ").concat(maxWidth(props), "\n ").concat(getInteractiveStyles(props), "\n ").concat(visible(props), "\n display: inline-flex;\n flex-direction: column;\n box-sizing: border-box;\n font-family: ").concat((0, _constants.fontFamily)(), ";\n width: 100%;\n user-select: none;\n line-height: initial;\n transition: background 0.3s;\n position: relative;\n ").concat(height(props), ";\n ").concat(selected(props), "\n\n &:after {\n content: '';\n transition: background 0.3s, box-shadow 0.3s;\n position: absolute;\n width: calc(100% + ", "var(--ds-space-200, 16px)", ");\n height: calc(100% + ", "var(--ds-space-100, 8px)", ");\n left: calc(-1 * ", "var(--ds-space-100, 8px)", ");\n ").concat((0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.smart-card.show-smart-links-refreshed-design') ? wrapperBorderRadius : "background: transparent;\n ".concat(borderRadius), "\n }\n");
67
70
  };
68
- var visibleStyles = "\n background-color: ".concat("var(--ds-background-neutral-subtle, ".concat(colors.N30, ")"), ";\n\n &:after {\n background: ", "var(--ds-background-neutral, ".concat(colors.N30, ")"), " !important;\n }\n .embed-header {\n opacity: 1;\n }");
71
+ var visibleStyles = "\n ".concat((0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.smart-card.show-smart-links-refreshed-design') ? "" : "background-color: ".concat("var(--ds-background-neutral-subtle, ".concat(colors.N30, ")"), ";"), "\n\n &:after {\n ").concat((0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.smart-card.show-smart-links-refreshed-design') ? "outline: 1px solid ".concat("var(--ds-border-input, ".concat(colors.N40, ")"), ";\n background-color: ", (0, _components.themed)({
72
+ light: "var(--ds-surface-raised, white)",
73
+ dark: "var(--ds-surface-raised, ".concat(BACKGROUND_COLOR_DARK, ")")
74
+ })(), ";") : "background: ".concat("var(--ds-background-neutral, ".concat(colors.N30, ")"), " !important;"), "\n }\n .embed-header {\n opacity: 1;\n }");
69
75
  function visible(_ref6) {
70
76
  var frameStyle = _ref6.frameStyle;
71
77
  return frameStyle === 'show' ? visibleStyles : '';
@@ -105,9 +111,9 @@ exports.TextWrapper = TextWrapper;
105
111
  // NB: `overflow` is kept as `hidden` since
106
112
  // the internal contents of the `iframe` should
107
113
  // manage scrolling behaviour.
108
- var Content = _styled.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n ", "\n ", "\n background-color: ", ";\n position: absolute;\n z-index: 1;\n width: 100%;\n transition: box-shadow 0.3s;\n\n > .calc-height > div > div {\n left: unset !important;\n width: unset !important;\n height: unset !important;\n position: initial !important;\n padding-bottom: unset !important;\n }\n > .embed-preview > div {\n margin: 0 auto;\n }\n\n ", ";\n\n ", "\n\n ", "\n"])), borderRadius, cardShadow, "var(--ds-surface-raised, white)", function (_ref9) {
114
+ var Content = _styled.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n ", "\n background-color: ", ";\n position: absolute;\n z-index: 1;\n width: 100%;\n transition: box-shadow 0.3s;\n\n > .calc-height > div > div {\n left: unset !important;\n width: unset !important;\n height: unset !important;\n position: initial !important;\n padding-bottom: unset !important;\n }\n > .embed-preview > div {\n margin: 0 auto;\n }\n\n ", ";\n\n ", "\n\n ", "\n"])), (0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.smart-card.show-smart-links-refreshed-design') ? "".concat(contentBorderRadius, ";\n outline: 1px solid ", "var(--ds-border-input, ".concat(colors.N40, ")"), ";") : borderRadius, "var(--ds-surface-raised, white)", function (_ref9) {
109
115
  var isInteractive = _ref9.isInteractive;
110
- if (isInteractive) {
116
+ if (isInteractive && !(0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.smart-card.show-smart-links-refreshed-design')) {
111
117
  return "\n .".concat(className, ":hover & {\n box-shadow: ", "var(--ds-shadow-overlay, 0 4px 8px -2px rgba(23, 43, 77, 0.32), 0 0 1px rgba(23, 43, 77, 0.25))", ";\n }\n ");
112
118
  } else {
113
119
  return '';
package/dist/es2019/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/smart-card",
3
- "version": "26.14.1",
3
+ "version": "26.14.2",
4
4
  "sideEffects": false
5
5
  }
package/dist/es2019/view/CardWithUrl/component.js CHANGED
@@ -211,7 +211,7 @@ function Component({
211
211
  showAuthTooltip: showAuthTooltip,
212
212
  showServerActions: showServerActions
213
213
  };
214
- return getBooleanFF('platform.linking-platform.smart-card.show-inline-card-refreshed-design') ? /*#__PURE__*/React.createElement(RedesignedInlineCard, inlineProps) : /*#__PURE__*/React.createElement(InlineCard, inlineProps);
214
+ return getBooleanFF('platform.linking-platform.smart-card.show-smart-links-refreshed-design') ? /*#__PURE__*/React.createElement(RedesignedInlineCard, inlineProps) : /*#__PURE__*/React.createElement(InlineCard, inlineProps);
215
215
  case 'block':
216
216
  return /*#__PURE__*/React.createElement(BlockCard, {
217
217
  id: id,
package/dist/es2019/view/EmbedCard/components/styled.js CHANGED
@@ -2,11 +2,20 @@ import styled from '@emotion/styled';
2
2
  import { borderRadius as akBorderRadius, fontFamily } from '@atlaskit/theme/constants';
3
3
  import * as colors from '@atlaskit/theme/colors';
4
4
  import { gs as gridSize } from '../../common/utils';
5
+ import { N40 } from '@atlaskit/theme/colors';
6
+ import { themed } from '@atlaskit/theme/components';
7
+ import { getBooleanFF } from '@atlaskit/platform-feature-flags';
5
8
  export const className = 'media-card-frame';
6
- export const cardShadow = ``;
7
9
  export const borderRadius = `
8
10
  border-radius: ${akBorderRadius()}px;
9
11
  `;
12
+ const BACKGROUND_COLOR_DARK = '#262B31';
13
+ const wrapperBorderRadius = `
14
+ border-radius: ${"var(--ds-border-radius-400, 16px)"};
15
+ `;
16
+ const contentBorderRadius = `
17
+ border-radius: ${"var(--ds-border-radius-300, 12px)"};
18
+ `;
10
19
  export const ellipsis = (maxWidth = '100%') => {
11
20
  const unit = typeof maxWidth === 'number' ? 'px' : '';
12
21
  return `
@@ -48,6 +57,7 @@ function getInteractiveStyles({
48
57
  return isInteractive ? `
49
58
  &:hover {
50
59
  ${frameStyle !== 'hide' && visibleStyles}
60
+
51
61
  }
52
62
  &:active {
53
63
  background-color: ${`var(--ds-background-selected, ${colors.B50})`};
@@ -69,18 +79,18 @@ function selected({
69
79
  height: 100%;
70
80
  width: 100%;
71
81
  left: 0;
72
- ${borderRadius}
82
+ ${getBooleanFF('platform.linking-platform.smart-card.show-smart-links-refreshed-design') ? wrapperBorderRadius : borderRadius}
73
83
  }
74
84
  ` : isSelected && frameStyle === 'hide' ? `
75
- box-shadow: 0 0 0 3px ${`var(--ds-border-selected, ${colors.B100})`};
76
- ${borderRadius}
85
+ ${getBooleanFF('platform.linking-platform.smart-card.show-smart-links-refreshed-design') ? contentBorderRadius : `box-shadow: 0 0 0 3px ${`var(--ds-border-selected, ${colors.B100})`};
86
+ ${borderRadius}`}
77
87
  ` : '';
78
88
  }
79
89
  const height = ({
80
90
  inheritDimensions
81
91
  }) => inheritDimensions ? 'height: 100%;' : `height: ${gridSize(54)}`;
82
92
  const wrapperStyles = props => `
83
- ${borderRadius}
93
+ ${getBooleanFF('platform.linking-platform.smart-card.show-smart-links-refreshed-design') ? wrapperBorderRadius : borderRadius}
84
94
  ${minWidth(props)}
85
95
  ${maxWidth(props)}
86
96
  ${getInteractiveStyles(props)}
@@ -99,20 +109,24 @@ const wrapperStyles = props => `
99
109
 
100
110
  &:after {
101
111
  content: '';
102
- background: transparent;
103
112
  transition: background 0.3s, box-shadow 0.3s;
104
113
  position: absolute;
105
114
  width: calc(100% + ${"var(--ds-space-200, 16px)"});
106
115
  height: calc(100% + ${"var(--ds-space-100, 8px)"});
107
116
  left: calc(-1 * ${"var(--ds-space-100, 8px)"});
108
- ${borderRadius}
117
+ ${getBooleanFF('platform.linking-platform.smart-card.show-smart-links-refreshed-design') ? wrapperBorderRadius : `background: transparent;
118
+ ${borderRadius}`}
109
119
  }
110
120
  `;
111
121
  const visibleStyles = `
112
- background-color: ${`var(--ds-background-neutral-subtle, ${colors.N30})`};
122
+ ${getBooleanFF('platform.linking-platform.smart-card.show-smart-links-refreshed-design') ? `` : `background-color: ${`var(--ds-background-neutral-subtle, ${colors.N30})`};`}
113
123
 
114
124
  &:after {
115
- background: ${`var(--ds-background-neutral, ${colors.N30})`} !important;
125
+ ${getBooleanFF('platform.linking-platform.smart-card.show-smart-links-refreshed-design') ? `outline: 1px solid ${`var(--ds-border-input, ${N40})`};
126
+ background-color: ${themed({
127
+ light: "var(--ds-surface-raised, white)",
128
+ dark: `var(--ds-surface-raised, ${BACKGROUND_COLOR_DARK})`
129
+ })()};` : `background: ${`var(--ds-background-neutral, ${colors.N30})`} !important;`}
116
130
  }
117
131
  .embed-header {
118
132
  opacity: 1;
@@ -183,8 +197,8 @@ export const TextWrapper = styled.div`
183
197
  // the internal contents of the `iframe` should
184
198
  // manage scrolling behaviour.
185
199
  export const Content = styled.div`
186
- ${borderRadius}
187
- ${cardShadow}
200
+ ${getBooleanFF('platform.linking-platform.smart-card.show-smart-links-refreshed-design') ? `${contentBorderRadius};
201
+ outline: 1px solid ${`var(--ds-border-input, ${N40})`};` : borderRadius}
188
202
  background-color: ${"var(--ds-surface-raised, white)"};
189
203
  position: absolute;
190
204
  z-index: 1;
@@ -205,7 +219,7 @@ export const Content = styled.div`
205
219
  ${({
206
220
  isInteractive
207
221
  }) => {
208
- if (isInteractive) {
222
+ if (isInteractive && !getBooleanFF('platform.linking-platform.smart-card.show-smart-links-refreshed-design')) {
209
223
  return `
210
224
  .${className}:hover & {
211
225
  box-shadow: ${"var(--ds-shadow-overlay, 0 4px 8px -2px rgba(23, 43, 77, 0.32), 0 0 1px rgba(23, 43, 77, 0.25))"};
package/dist/esm/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/smart-card",
3
- "version": "26.14.1",
3
+ "version": "26.14.2",
4
4
  "sideEffects": false
5
5
  }
package/dist/esm/view/CardWithUrl/component.js CHANGED
@@ -214,7 +214,7 @@ function Component(_ref) {
214
214
  showAuthTooltip: showAuthTooltip,
215
215
  showServerActions: showServerActions
216
216
  };
217
- return getBooleanFF('platform.linking-platform.smart-card.show-inline-card-refreshed-design') ? /*#__PURE__*/React.createElement(RedesignedInlineCard, inlineProps) : /*#__PURE__*/React.createElement(InlineCard, inlineProps);
217
+ return getBooleanFF('platform.linking-platform.smart-card.show-smart-links-refreshed-design') ? /*#__PURE__*/React.createElement(RedesignedInlineCard, inlineProps) : /*#__PURE__*/React.createElement(InlineCard, inlineProps);
218
218
  case 'block':
219
219
  return /*#__PURE__*/React.createElement(BlockCard, {
220
220
  id: id,
package/dist/esm/view/EmbedCard/components/styled.js CHANGED
@@ -4,9 +4,14 @@ import styled from '@emotion/styled';
4
4
  import { borderRadius as akBorderRadius, fontFamily } from '@atlaskit/theme/constants';
5
5
  import * as colors from '@atlaskit/theme/colors';
6
6
  import { gs as gridSize } from '../../common/utils';
7
+ import { N40 } from '@atlaskit/theme/colors';
8
+ import { themed } from '@atlaskit/theme/components';
9
+ import { getBooleanFF } from '@atlaskit/platform-feature-flags';
7
10
  export var className = 'media-card-frame';
8
- export var cardShadow = "";
9
11
  export var borderRadius = "\n border-radius: ".concat(akBorderRadius(), "px;\n");
12
+ var BACKGROUND_COLOR_DARK = '#262B31';
13
+ var wrapperBorderRadius = "\n border-radius: ".concat("var(--ds-border-radius-400, 16px)", ";\n");
14
+ var contentBorderRadius = "\n border-radius: ".concat("var(--ds-border-radius-300, 12px)", ";\n");
10
15
  export var ellipsis = function ellipsis() {
11
16
  var maxWidth = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '100%';
12
17
  var unit = typeof maxWidth === 'number' ? 'px' : '';
@@ -36,21 +41,24 @@ function maxWidth(_ref2) {
36
41
  function getInteractiveStyles(_ref3) {
37
42
  var isInteractive = _ref3.isInteractive,
38
43
  frameStyle = _ref3.frameStyle;
39
- return isInteractive ? "\n &:hover {\n ".concat(frameStyle !== 'hide' && visibleStyles, "\n }\n &:active {\n background-color: ", "var(--ds-background-selected, ".concat(colors.B50, ")"), ";\n }\n ") : '';
44
+ return isInteractive ? "\n &:hover {\n ".concat(frameStyle !== 'hide' && visibleStyles, "\n\n }\n &:active {\n background-color: ", "var(--ds-background-selected, ".concat(colors.B50, ")"), ";\n }\n ") : '';
40
45
  }
41
46
  function selected(_ref4) {
42
47
  var isSelected = _ref4.isSelected,
43
48
  frameStyle = _ref4.frameStyle;
44
- return isSelected && frameStyle !== 'hide' ? "\n ".concat(visibleStyles, "\n &::after {\n cursor: pointer;\n box-shadow: 0 0 0 3px ", "var(--ds-border-selected, ".concat(colors.B100, ")"), ";\n content: '';\n outline: none;\n position: absolute;\n height: 100%;\n width: 100%;\n left: 0;\n ").concat(borderRadius, "\n }\n ") : isSelected && frameStyle === 'hide' ? "\n box-shadow: 0 0 0 3px ".concat("var(--ds-border-selected, ".concat(colors.B100, ")"), ";\n ", borderRadius, "\n ") : '';
49
+ return isSelected && frameStyle !== 'hide' ? "\n ".concat(visibleStyles, "\n &::after {\n cursor: pointer;\n box-shadow: 0 0 0 3px ", "var(--ds-border-selected, ".concat(colors.B100, ")"), ";\n content: '';\n outline: none;\n position: absolute;\n height: 100%;\n width: 100%;\n left: 0;\n ").concat(getBooleanFF('platform.linking-platform.smart-card.show-smart-links-refreshed-design') ? wrapperBorderRadius : borderRadius, "\n }\n ") : isSelected && frameStyle === 'hide' ? "\n ".concat(getBooleanFF('platform.linking-platform.smart-card.show-smart-links-refreshed-design') ? contentBorderRadius : "box-shadow: 0 0 0 3px ".concat("var(--ds-border-selected, ".concat(colors.B100, ")"), ";\n ", borderRadius), "\n ") : '';
45
50
  }
46
51
  var height = function height(_ref5) {
47
52
  var inheritDimensions = _ref5.inheritDimensions;
48
53
  return inheritDimensions ? 'height: 100%;' : "height: ".concat(gridSize(54));
49
54
  };
50
55
  var wrapperStyles = function wrapperStyles(props) {
51
- return "\n ".concat(borderRadius, "\n ").concat(minWidth(props), "\n ").concat(maxWidth(props), "\n ").concat(getInteractiveStyles(props), "\n ").concat(visible(props), "\n display: inline-flex;\n flex-direction: column;\n box-sizing: border-box;\n font-family: ").concat(fontFamily(), ";\n width: 100%;\n user-select: none;\n line-height: initial;\n transition: background 0.3s;\n position: relative;\n ").concat(height(props), ";\n ").concat(selected(props), "\n\n &:after {\n content: '';\n background: transparent;\n transition: background 0.3s, box-shadow 0.3s;\n position: absolute;\n width: calc(100% + ", "var(--ds-space-200, 16px)", ");\n height: calc(100% + ", "var(--ds-space-100, 8px)", ");\n left: calc(-1 * ", "var(--ds-space-100, 8px)", ");\n ").concat(borderRadius, "\n }\n");
56
+ return "\n ".concat(getBooleanFF('platform.linking-platform.smart-card.show-smart-links-refreshed-design') ? wrapperBorderRadius : borderRadius, "\n ").concat(minWidth(props), "\n ").concat(maxWidth(props), "\n ").concat(getInteractiveStyles(props), "\n ").concat(visible(props), "\n display: inline-flex;\n flex-direction: column;\n box-sizing: border-box;\n font-family: ").concat(fontFamily(), ";\n width: 100%;\n user-select: none;\n line-height: initial;\n transition: background 0.3s;\n position: relative;\n ").concat(height(props), ";\n ").concat(selected(props), "\n\n &:after {\n content: '';\n transition: background 0.3s, box-shadow 0.3s;\n position: absolute;\n width: calc(100% + ", "var(--ds-space-200, 16px)", ");\n height: calc(100% + ", "var(--ds-space-100, 8px)", ");\n left: calc(-1 * ", "var(--ds-space-100, 8px)", ");\n ").concat(getBooleanFF('platform.linking-platform.smart-card.show-smart-links-refreshed-design') ? wrapperBorderRadius : "background: transparent;\n ".concat(borderRadius), "\n }\n");
52
57
  };
53
- var visibleStyles = "\n background-color: ".concat("var(--ds-background-neutral-subtle, ".concat(colors.N30, ")"), ";\n\n &:after {\n background: ", "var(--ds-background-neutral, ".concat(colors.N30, ")"), " !important;\n }\n .embed-header {\n opacity: 1;\n }");
58
+ var visibleStyles = "\n ".concat(getBooleanFF('platform.linking-platform.smart-card.show-smart-links-refreshed-design') ? "" : "background-color: ".concat("var(--ds-background-neutral-subtle, ".concat(colors.N30, ")"), ";"), "\n\n &:after {\n ").concat(getBooleanFF('platform.linking-platform.smart-card.show-smart-links-refreshed-design') ? "outline: 1px solid ".concat("var(--ds-border-input, ".concat(N40, ")"), ";\n background-color: ", themed({
59
+ light: "var(--ds-surface-raised, white)",
60
+ dark: "var(--ds-surface-raised, ".concat(BACKGROUND_COLOR_DARK, ")")
61
+ })(), ";") : "background: ".concat("var(--ds-background-neutral, ".concat(colors.N30, ")"), " !important;"), "\n }\n .embed-header {\n opacity: 1;\n }");
54
62
  function visible(_ref6) {
55
63
  var frameStyle = _ref6.frameStyle;
56
64
  return frameStyle === 'show' ? visibleStyles : '';
@@ -84,9 +92,9 @@ export var TextWrapper = styled.div(_templateObject5 || (_templateObject5 = _tag
84
92
  // NB: `overflow` is kept as `hidden` since
85
93
  // the internal contents of the `iframe` should
86
94
  // manage scrolling behaviour.
87
- export var Content = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n ", "\n ", "\n background-color: ", ";\n position: absolute;\n z-index: 1;\n width: 100%;\n transition: box-shadow 0.3s;\n\n > .calc-height > div > div {\n left: unset !important;\n width: unset !important;\n height: unset !important;\n position: initial !important;\n padding-bottom: unset !important;\n }\n > .embed-preview > div {\n margin: 0 auto;\n }\n\n ", ";\n\n ", "\n\n ", "\n"])), borderRadius, cardShadow, "var(--ds-surface-raised, white)", function (_ref9) {
95
+ export var Content = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n ", "\n background-color: ", ";\n position: absolute;\n z-index: 1;\n width: 100%;\n transition: box-shadow 0.3s;\n\n > .calc-height > div > div {\n left: unset !important;\n width: unset !important;\n height: unset !important;\n position: initial !important;\n padding-bottom: unset !important;\n }\n > .embed-preview > div {\n margin: 0 auto;\n }\n\n ", ";\n\n ", "\n\n ", "\n"])), getBooleanFF('platform.linking-platform.smart-card.show-smart-links-refreshed-design') ? "".concat(contentBorderRadius, ";\n outline: 1px solid ", "var(--ds-border-input, ".concat(N40, ")"), ";") : borderRadius, "var(--ds-surface-raised, white)", function (_ref9) {
88
96
  var isInteractive = _ref9.isInteractive;
89
- if (isInteractive) {
97
+ if (isInteractive && !getBooleanFF('platform.linking-platform.smart-card.show-smart-links-refreshed-design')) {
90
98
  return "\n .".concat(className, ":hover & {\n box-shadow: ", "var(--ds-shadow-overlay, 0 4px 8px -2px rgba(23, 43, 77, 0.32), 0 0 1px rgba(23, 43, 77, 0.25))", ";\n }\n ");
91
99
  } else {
92
100
  return '';
package/dist/types/view/EmbedCard/components/styled.d.ts CHANGED
@@ -1,7 +1,6 @@
1
1
  /// <reference types="react" />
2
2
  import { FrameStyle } from '../types';
3
3
  export declare const className = "media-card-frame";
4
- export declare const cardShadow = "";
5
4
  export interface WrapperProps {
6
5
  minWidth?: number;
7
6
  maxWidth?: number;
package/dist/types-ts4.5/view/EmbedCard/components/styled.d.ts CHANGED
@@ -1,7 +1,6 @@
1
1
  /// <reference types="react" />
2
2
  import { FrameStyle } from '../types';
3
3
  export declare const className = "media-card-frame";
4
- export declare const cardShadow = "";
5
4
  export interface WrapperProps {
6
5
  minWidth?: number;
7
6
  maxWidth?: number;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/smart-card",
3
- "version": "26.14.1",
3
+ "version": "26.14.2",
4
4
  "description": "Smart card component",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -140,7 +140,7 @@
140
140
  "platform.linking-platform.smart-card.should-call-onclick-in-warning-modal-only-when-safe": {
141
141
  "type": "boolean"
142
142
  },
143
- "platform.linking-platform.smart-card.show-inline-card-refreshed-design": {
143
+ "platform.linking-platform.smart-card.show-smart-links-refreshed-design": {
144
144
  "type": "boolean"
145
145
  },
146
146
  "platform.linking-platform.smart-card.enable-better-metadata_iojwg": {