@atlaskit/smart-card 34.2.2 → 34.3.0
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.
- package/CHANGELOG.md +8 -0
- package/dist/cjs/utils/analytics/analytics.js +1 -1
- package/dist/cjs/view/FlexibleCard/components/actions/action/index.js +8 -13
- package/dist/cjs/view/FlexibleCard/components/actions/view-related-links-action/index.js +5 -8
- package/dist/cjs/view/FlexibleCard/components/blocks/block/index.compiled.css +34 -0
- package/dist/cjs/view/FlexibleCard/components/blocks/block/index.js +33 -18
- package/dist/cjs/view/FlexibleCard/components/blocks/block/indexOld.js +56 -0
- package/dist/cjs/view/FlexibleCard/components/blocks/preview-block/index.js +12 -8
- package/dist/cjs/view/FlexibleCard/components/blocks/preview-block/indexOld.js +37 -0
- package/dist/cjs/view/FlexibleCard/components/blocks/preview-block/resolved/index.compiled.css +15 -0
- package/dist/cjs/view/FlexibleCard/components/blocks/preview-block/resolved/index.js +18 -52
- package/dist/cjs/view/FlexibleCard/components/blocks/preview-block/resolved/indexOld.js +104 -0
- package/dist/cjs/view/FlexibleCard/components/common/image-icon/index.js +4 -9
- package/dist/cjs/view/LinkUrl/index.js +1 -1
- package/dist/es2019/utils/analytics/analytics.js +1 -1
- package/dist/es2019/view/FlexibleCard/components/actions/action/index.js +1 -3
- package/dist/es2019/view/FlexibleCard/components/actions/view-related-links-action/index.js +1 -4
- package/dist/es2019/view/FlexibleCard/components/blocks/block/index.compiled.css +34 -0
- package/dist/es2019/view/FlexibleCard/components/blocks/block/index.js +32 -35
- package/dist/es2019/view/FlexibleCard/components/blocks/block/indexOld.js +62 -0
- package/dist/es2019/view/FlexibleCard/components/blocks/preview-block/index.js +12 -8
- package/dist/es2019/view/FlexibleCard/components/blocks/preview-block/indexOld.js +28 -0
- package/dist/es2019/view/FlexibleCard/components/blocks/preview-block/resolved/index.compiled.css +15 -0
- package/dist/es2019/view/FlexibleCard/components/blocks/preview-block/resolved/index.js +14 -62
- package/dist/es2019/view/FlexibleCard/components/blocks/preview-block/resolved/indexOld.js +106 -0
- package/dist/es2019/view/FlexibleCard/components/common/image-icon/index.js +1 -3
- package/dist/es2019/view/LinkUrl/index.js +1 -1
- package/dist/esm/utils/analytics/analytics.js +1 -1
- package/dist/esm/view/FlexibleCard/components/actions/action/index.js +1 -3
- package/dist/esm/view/FlexibleCard/components/actions/view-related-links-action/index.js +1 -4
- package/dist/esm/view/FlexibleCard/components/blocks/block/index.compiled.css +34 -0
- package/dist/esm/view/FlexibleCard/components/blocks/block/index.js +31 -20
- package/dist/esm/view/FlexibleCard/components/blocks/block/indexOld.js +50 -0
- package/dist/esm/view/FlexibleCard/components/blocks/preview-block/index.js +12 -8
- package/dist/esm/view/FlexibleCard/components/blocks/preview-block/indexOld.js +30 -0
- package/dist/esm/view/FlexibleCard/components/blocks/preview-block/resolved/index.compiled.css +15 -0
- package/dist/esm/view/FlexibleCard/components/blocks/preview-block/resolved/index.js +15 -53
- package/dist/esm/view/FlexibleCard/components/blocks/preview-block/resolved/indexOld.js +98 -0
- package/dist/esm/view/FlexibleCard/components/common/image-icon/index.js +1 -3
- package/dist/esm/view/LinkUrl/index.js +1 -1
- package/dist/types/view/FlexibleCard/components/blocks/block/index.d.ts +3 -10
- package/dist/types/view/FlexibleCard/components/blocks/block/indexOld.d.ts +11 -0
- package/dist/types/view/FlexibleCard/components/blocks/preview-block/index.d.ts +3 -13
- package/dist/types/view/FlexibleCard/components/blocks/preview-block/indexOld.d.ts +14 -0
- package/dist/types/view/FlexibleCard/components/blocks/preview-block/resolved/index.d.ts +2 -2
- package/dist/types/view/FlexibleCard/components/blocks/preview-block/resolved/indexOld.d.ts +10 -0
- package/dist/types/view/FlexibleCard/components/blocks/types.d.ts +1 -0
- package/dist/types-ts4.5/view/FlexibleCard/components/blocks/block/index.d.ts +3 -10
- package/dist/types-ts4.5/view/FlexibleCard/components/blocks/block/indexOld.d.ts +11 -0
- package/dist/types-ts4.5/view/FlexibleCard/components/blocks/preview-block/index.d.ts +3 -13
- package/dist/types-ts4.5/view/FlexibleCard/components/blocks/preview-block/indexOld.d.ts +14 -0
- package/dist/types-ts4.5/view/FlexibleCard/components/blocks/preview-block/resolved/index.d.ts +2 -2
- package/dist/types-ts4.5/view/FlexibleCard/components/blocks/preview-block/resolved/indexOld.d.ts +10 -0
- package/dist/types-ts4.5/view/FlexibleCard/components/blocks/types.d.ts +1 -0
- package/package.json +4 -4
|
@@ -1,19 +1,23 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
* @jsx jsx
|
|
6
|
-
*/
|
|
1
|
+
/* index.tsx generated by @compiled/babel-plugin v0.35.0 */
|
|
2
|
+
import "./index.compiled.css";
|
|
3
|
+
import * as React from 'react';
|
|
4
|
+
import { ax, ix } from "@compiled/react/runtime";
|
|
7
5
|
import { useEffect } from 'react';
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
import {
|
|
11
|
-
import
|
|
12
|
-
|
|
13
|
-
var
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
6
|
+
import { fg } from '@atlaskit/platform-feature-flags';
|
|
7
|
+
import { SmartLinkDirection, SmartLinkSize } from '../../../../../constants';
|
|
8
|
+
import { renderChildren } from '../utils';
|
|
9
|
+
import BlockOld from './indexOld';
|
|
10
|
+
var BaseBlockStyles = null;
|
|
11
|
+
var highlightRemoveStyles = null;
|
|
12
|
+
var gapsStyles = {
|
|
13
|
+
xlarge: "_zulp1k92 _1ljq1k92",
|
|
14
|
+
large: "_zulp1j6v _1ljq1j6v",
|
|
15
|
+
medium: "_zulp1kwk _1ljq1kwk",
|
|
16
|
+
small: "_zulp6mu8 _1ljq6mu8"
|
|
17
|
+
};
|
|
18
|
+
var directionStyles = {
|
|
19
|
+
vertical: "_2lx21bp4 _4cvr1y6m",
|
|
20
|
+
horizontal: "_2lx2vrvc _4cvr1h6o"
|
|
17
21
|
};
|
|
18
22
|
|
|
19
23
|
/**
|
|
@@ -31,20 +35,27 @@ var Block = function Block(_ref) {
|
|
|
31
35
|
size = _ref$size === void 0 ? SmartLinkSize.Medium : _ref$size,
|
|
32
36
|
_ref$testId = _ref.testId,
|
|
33
37
|
testId = _ref$testId === void 0 ? 'smart-block' : _ref$testId,
|
|
34
|
-
|
|
38
|
+
className = _ref.className,
|
|
35
39
|
blockRef = _ref.blockRef,
|
|
36
40
|
onRender = _ref.onRender,
|
|
37
41
|
onTransitionEnd = _ref.onTransitionEnd;
|
|
38
42
|
useEffect(function () {
|
|
39
43
|
onRender && onRender();
|
|
40
44
|
}, [onRender]);
|
|
41
|
-
return
|
|
42
|
-
// eslint-disable-next-line @atlaskit/
|
|
43
|
-
|
|
45
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
46
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
|
|
47
|
+
className: ax(["_1reo15vq _18m915vq _4cvr1h6o _1e0c1txw _1ul9idpf _1bah1y6m _fiawglyw _1ouwidpf _f6ju1ns9 _1uzp1mp2 _ytq1bjq5 _a7e8uxlv", "_12ji1snc _1qu2agmp _12y310yn _12ji1kw7 _syaz1kw7 _18ql1j28 _1ifmglyw _181uglyw _1rkwglyw _te17glyw _uiztglyw", directionStyles[direction], gapsStyles[size], className]),
|
|
44
48
|
"data-smart-block": true,
|
|
45
49
|
"data-testid": testId,
|
|
46
50
|
onTransitionEnd: onTransitionEnd,
|
|
47
51
|
ref: blockRef
|
|
48
52
|
}, renderChildren(children, size));
|
|
49
53
|
};
|
|
50
|
-
|
|
54
|
+
var Exported = function Exported(props) {
|
|
55
|
+
if (fg('bandicoots-compiled-migration-smartcard')) {
|
|
56
|
+
return /*#__PURE__*/React.createElement(Block, props);
|
|
57
|
+
} else {
|
|
58
|
+
return /*#__PURE__*/React.createElement(BlockOld, props);
|
|
59
|
+
}
|
|
60
|
+
};
|
|
61
|
+
export default Exported;
|
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
|
|
2
|
+
var _templateObject;
|
|
3
|
+
/**
|
|
4
|
+
* @jsxRuntime classic
|
|
5
|
+
* @jsx jsx
|
|
6
|
+
*/
|
|
7
|
+
import { useEffect } from 'react';
|
|
8
|
+
|
|
9
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
10
|
+
import { css, jsx } from '@emotion/react';
|
|
11
|
+
import { ElementName, SmartLinkDirection, SmartLinkSize } from '../../../../../constants';
|
|
12
|
+
import { getBaseStyles, getGapSize, highlightRemoveStyles, renderChildren } from '../utils';
|
|
13
|
+
var getBlockStyles = function getBlockStyles(direction, size
|
|
14
|
+
// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
|
|
15
|
+
) {
|
|
16
|
+
return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\t", "\n\t", "\n justify-content: flex-start;\n\t[data-separator] + [data-separator]:before {\n\t\tcontent: '\u2022';\n\t\tmargin-right: ", "rem;\n\t}\n\t// Pull request elements: source branch \u2192 target branch\n\t[data-smart-element='", "']\n\t\t+ [data-smart-element='", "']:before {\n\t\tcontent: '\u2192';\n\t}\n\t// Pull request elements: target branch \u2190 source branch\n\t[data-smart-element='", "']\n\t\t+ [data-smart-element='", "']:before {\n\t\tcontent: '\u2190';\n\t}\n"])), getBaseStyles(direction, size), highlightRemoveStyles, getGapSize(size), ElementName.SourceBranch, ElementName.TargetBranch, ElementName.TargetBranch, ElementName.SourceBranch);
|
|
17
|
+
};
|
|
18
|
+
|
|
19
|
+
/**
|
|
20
|
+
* A block represents a collection of elements and actions that are arranged
|
|
21
|
+
* in a row. All elements and actions should be contained within a Block.
|
|
22
|
+
* @internal
|
|
23
|
+
* @param {ActionGroupProps} ActionGroupProps
|
|
24
|
+
* @see Action
|
|
25
|
+
*/
|
|
26
|
+
var Block = function Block(_ref) {
|
|
27
|
+
var children = _ref.children,
|
|
28
|
+
_ref$direction = _ref.direction,
|
|
29
|
+
direction = _ref$direction === void 0 ? SmartLinkDirection.Horizontal : _ref$direction,
|
|
30
|
+
_ref$size = _ref.size,
|
|
31
|
+
size = _ref$size === void 0 ? SmartLinkSize.Medium : _ref$size,
|
|
32
|
+
_ref$testId = _ref.testId,
|
|
33
|
+
testId = _ref$testId === void 0 ? 'smart-block' : _ref$testId,
|
|
34
|
+
overrideCss = _ref.overrideCss,
|
|
35
|
+
blockRef = _ref.blockRef,
|
|
36
|
+
onRender = _ref.onRender,
|
|
37
|
+
onTransitionEnd = _ref.onTransitionEnd;
|
|
38
|
+
useEffect(function () {
|
|
39
|
+
onRender && onRender();
|
|
40
|
+
}, [onRender]);
|
|
41
|
+
return jsx("div", {
|
|
42
|
+
// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
|
|
43
|
+
css: [getBlockStyles(direction, size), overrideCss],
|
|
44
|
+
"data-smart-block": true,
|
|
45
|
+
"data-testid": testId,
|
|
46
|
+
onTransitionEnd: onTransitionEnd,
|
|
47
|
+
ref: blockRef
|
|
48
|
+
}, renderChildren(children, size));
|
|
49
|
+
};
|
|
50
|
+
export default Block;
|
|
@@ -1,13 +1,10 @@
|
|
|
1
1
|
import _extends from "@babel/runtime/helpers/extends";
|
|
2
2
|
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
|
|
3
3
|
var _excluded = ["status", "testId", "overrideUrl"];
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
* @jsx jsx
|
|
7
|
-
*/
|
|
8
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
9
|
-
import { jsx } from '@emotion/react';
|
|
4
|
+
import React from 'react';
|
|
5
|
+
import { fg } from '@atlaskit/platform-feature-flags';
|
|
10
6
|
import { SmartLinkStatus } from '../../../../../constants';
|
|
7
|
+
import PreviewBlockOld from './indexOld';
|
|
11
8
|
import PreviewBlockResolvedView from './resolved';
|
|
12
9
|
/**
|
|
13
10
|
* Represents a PreviewBlock, which typically contains media or other large format content.
|
|
@@ -22,9 +19,16 @@ var PreviewBlock = function PreviewBlock(_ref) {
|
|
|
22
19
|
testId = _ref$testId === void 0 ? 'smart-block-preview' : _ref$testId,
|
|
23
20
|
overrideUrl = _ref.overrideUrl,
|
|
24
21
|
blockProps = _objectWithoutProperties(_ref, _excluded);
|
|
25
|
-
return
|
|
22
|
+
return /*#__PURE__*/React.createElement(PreviewBlockResolvedView, _extends({}, blockProps, {
|
|
26
23
|
testId: testId,
|
|
27
24
|
overrideUrl: overrideUrl
|
|
28
25
|
}));
|
|
29
26
|
};
|
|
30
|
-
|
|
27
|
+
var Exported = function Exported(props) {
|
|
28
|
+
if (fg('bandicoots-compiled-migration-smartcard')) {
|
|
29
|
+
return /*#__PURE__*/React.createElement(PreviewBlock, props);
|
|
30
|
+
} else {
|
|
31
|
+
return /*#__PURE__*/React.createElement(PreviewBlockOld, props);
|
|
32
|
+
}
|
|
33
|
+
};
|
|
34
|
+
export default Exported;
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import _extends from "@babel/runtime/helpers/extends";
|
|
2
|
+
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
|
|
3
|
+
var _excluded = ["status", "testId", "overrideUrl"];
|
|
4
|
+
/**
|
|
5
|
+
* @jsxRuntime classic
|
|
6
|
+
* @jsx jsx
|
|
7
|
+
*/
|
|
8
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
9
|
+
import { jsx } from '@emotion/react';
|
|
10
|
+
import { SmartLinkStatus } from '../../../../../constants';
|
|
11
|
+
import PreviewBlockResolvedView from './resolved/indexOld';
|
|
12
|
+
/**
|
|
13
|
+
* Represents a PreviewBlock, which typically contains media or other large format content.
|
|
14
|
+
* @public
|
|
15
|
+
* @param {PreviewBlockProps} PreviewBlock
|
|
16
|
+
* @see Block
|
|
17
|
+
*/
|
|
18
|
+
var PreviewBlock = function PreviewBlock(_ref) {
|
|
19
|
+
var _ref$status = _ref.status,
|
|
20
|
+
status = _ref$status === void 0 ? SmartLinkStatus.Fallback : _ref$status,
|
|
21
|
+
_ref$testId = _ref.testId,
|
|
22
|
+
testId = _ref$testId === void 0 ? 'smart-block-preview' : _ref$testId,
|
|
23
|
+
overrideUrl = _ref.overrideUrl,
|
|
24
|
+
blockProps = _objectWithoutProperties(_ref, _excluded);
|
|
25
|
+
return jsx(PreviewBlockResolvedView, _extends({}, blockProps, {
|
|
26
|
+
testId: testId,
|
|
27
|
+
overrideUrl: overrideUrl
|
|
28
|
+
}));
|
|
29
|
+
};
|
|
30
|
+
export default PreviewBlock;
|
package/dist/esm/view/FlexibleCard/components/blocks/preview-block/resolved/index.compiled.css
ADDED
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
._10aa1osq [data-smart-element-media=image]{width:100%}
|
|
2
|
+
._154iidpf{top:0}
|
|
3
|
+
._18u01ivi{margin-left:calc(var(--container-gap-left)*-1)}
|
|
4
|
+
._1bsb795p{width:calc(var(--preview-block-width))}
|
|
5
|
+
._1ltvidpf{left:0}
|
|
6
|
+
._1t26n7od [data-smart-element-media=image]{aspect-ratio:unset}
|
|
7
|
+
._1xi2idpf{right:0}
|
|
8
|
+
._2hwxc10g{margin-right:calc(var(--container-gap-right)*-1)}
|
|
9
|
+
._94n5idpf{bottom:0}
|
|
10
|
+
._dmhj1ya9:last-of-type{margin-bottom:calc(var(--container-padding)*-1)}
|
|
11
|
+
._e0oi1ya9:first-of-type{margin-top:calc(var(--container-padding)*-1)}
|
|
12
|
+
._kqswstnw{position:absolute}
|
|
13
|
+
._mr051dfr [data-smart-element-media=image]{object-fit:cover}
|
|
14
|
+
._rjuj1osq [data-smart-element-media=image]{height:100%}
|
|
15
|
+
._ze72n7od [data-smart-element-media=image]{padding-top:unset}
|
|
@@ -1,18 +1,11 @@
|
|
|
1
|
+
/* index.tsx generated by @compiled/babel-plugin v0.35.0 */
|
|
1
2
|
import _extends from "@babel/runtime/helpers/extends";
|
|
2
|
-
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
|
3
3
|
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
* @jsx jsx
|
|
10
|
-
*/
|
|
11
|
-
import { useCallback, useEffect, useState } from 'react';
|
|
12
|
-
|
|
13
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
14
|
-
import { css, jsx } from '@emotion/react';
|
|
15
|
-
import { MediaPlacement } from '../../../../../../constants';
|
|
4
|
+
var _excluded = ["ignoreContainerPadding", "onError", "className", "placement", "testId", "overrideUrl"];
|
|
5
|
+
import "./index.compiled.css";
|
|
6
|
+
import * as React from 'react';
|
|
7
|
+
import { ax, ix } from "@compiled/react/runtime";
|
|
8
|
+
import { useCallback } from 'react';
|
|
16
9
|
import { Preview } from '../../../elements';
|
|
17
10
|
import Block from '../../block';
|
|
18
11
|
/**
|
|
@@ -30,26 +23,10 @@ import Block from '../../block';
|
|
|
30
23
|
* @param placement
|
|
31
24
|
* @param ignoreContainerPadding
|
|
32
25
|
*/
|
|
33
|
-
var
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\t\t\tposition: absolute;\n\t\t\ttop: ", ";\n\t\t\tbottom: ", ";\n\t\t\twidth: calc(var(--preview-block-width) - ", ");\n\n\t\t\t", "\n\t\t\t", "\n\n [data-smart-element-media='image'] {\n\t\t\t\taspect-ratio: unset;\n\t\t\t\tpadding-top: unset;\n\t\t\t\twidth: 100%;\n\t\t\t\theight: 100%;\n\t\t\t\tobject-fit: cover;\n\t\t\t}\n\t\t"])), containerPadding, containerPadding, containerPadding, placement === MediaPlacement.Left ? "left: ".concat(containerPadding, ";") : '', placement === MediaPlacement.Right ? "right: ".concat(containerPadding, ";") : '');
|
|
38
|
-
}
|
|
39
|
-
if (ignoreContainerPadding) {
|
|
40
|
-
return css({
|
|
41
|
-
marginLeft: 'calc(var(--container-gap-left) * -1)',
|
|
42
|
-
marginRight: 'calc(var(--container-gap-right) * -1)',
|
|
43
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
|
|
44
|
-
'&:first-of-type': {
|
|
45
|
-
marginTop: 'calc(var(--container-padding) * -1)'
|
|
46
|
-
},
|
|
47
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
|
|
48
|
-
'&:last-of-type': {
|
|
49
|
-
marginBottom: 'calc(var(--container-padding) * -1)'
|
|
50
|
-
}
|
|
51
|
-
});
|
|
52
|
-
}
|
|
26
|
+
var previewBlockStyles = {
|
|
27
|
+
left: "_kqswstnw _154iidpf _94n5idpf _1bsb795p _1ltvidpf _1t26n7od _ze72n7od _10aa1osq _rjuj1osq _mr051dfr",
|
|
28
|
+
right: "_kqswstnw _154iidpf _94n5idpf _1bsb795p _1xi2idpf _1t26n7od _ze72n7od _10aa1osq _rjuj1osq _mr051dfr",
|
|
29
|
+
ignoreContainerPadding: "_18u01ivi _2hwxc10g _e0oi1ya9 _dmhj1ya9"
|
|
53
30
|
};
|
|
54
31
|
|
|
55
32
|
/**
|
|
@@ -62,36 +39,21 @@ var PreviewBlockResolvedView = function PreviewBlockResolvedView(_ref) {
|
|
|
62
39
|
var _ref$ignoreContainerP = _ref.ignoreContainerPadding,
|
|
63
40
|
ignoreContainerPadding = _ref$ignoreContainerP === void 0 ? false : _ref$ignoreContainerP,
|
|
64
41
|
onError = _ref.onError,
|
|
65
|
-
|
|
42
|
+
className = _ref.className,
|
|
66
43
|
placement = _ref.placement,
|
|
67
44
|
testId = _ref.testId,
|
|
68
45
|
overrideUrl = _ref.overrideUrl,
|
|
69
46
|
blockProps = _objectWithoutProperties(_ref, _excluded);
|
|
70
|
-
var _useState = useState(overrideCss),
|
|
71
|
-
_useState2 = _slicedToArray(_useState, 2),
|
|
72
|
-
styles = _useState2[0],
|
|
73
|
-
setStyles = _useState2[1];
|
|
74
|
-
var updateStyles = useCallback(function () {
|
|
75
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
76
|
-
setStyles(css(getPreviewBlockStyles(placement, ignoreContainerPadding), overrideCss));
|
|
77
|
-
}, [ignoreContainerPadding, overrideCss, placement]);
|
|
78
|
-
useEffect(function () {
|
|
79
|
-
updateStyles();
|
|
80
|
-
}, [ignoreContainerPadding, overrideCss, placement, updateStyles]);
|
|
81
|
-
var handleOnLoad = useCallback(function () {
|
|
82
|
-
updateStyles();
|
|
83
|
-
}, [updateStyles]);
|
|
84
47
|
var handleOnError = useCallback(function () {
|
|
85
48
|
if (onError) {
|
|
86
49
|
onError();
|
|
87
50
|
}
|
|
88
51
|
}, [onError]);
|
|
89
|
-
return
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
}),
|
|
52
|
+
return /*#__PURE__*/React.createElement(Block, _extends({}, blockProps, {
|
|
53
|
+
testId: "".concat(testId, "-resolved-view"),
|
|
54
|
+
className: ax([placement && previewBlockStyles[placement], !placement && ignoreContainerPadding && previewBlockStyles.ignoreContainerPadding])
|
|
55
|
+
}), /*#__PURE__*/React.createElement(Preview, {
|
|
93
56
|
onError: handleOnError,
|
|
94
|
-
onLoad: handleOnLoad,
|
|
95
57
|
overrideUrl: overrideUrl
|
|
96
58
|
}));
|
|
97
59
|
};
|
|
@@ -0,0 +1,98 @@
|
|
|
1
|
+
import _extends from "@babel/runtime/helpers/extends";
|
|
2
|
+
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
|
3
|
+
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
|
|
4
|
+
import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
|
|
5
|
+
var _excluded = ["ignoreContainerPadding", "onError", "overrideCss", "placement", "testId", "overrideUrl"];
|
|
6
|
+
var _templateObject;
|
|
7
|
+
/**
|
|
8
|
+
* @jsxRuntime classic
|
|
9
|
+
* @jsx jsx
|
|
10
|
+
*/
|
|
11
|
+
import { useCallback, useEffect, useState } from 'react';
|
|
12
|
+
|
|
13
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
14
|
+
import { css, jsx } from '@emotion/react';
|
|
15
|
+
import { MediaPlacement } from '../../../../../../constants';
|
|
16
|
+
import { Preview } from '../../../elements';
|
|
17
|
+
import Block from '../../block';
|
|
18
|
+
/**
|
|
19
|
+
* Due to its placement on the left/right and ignoreContainerPadding prop
|
|
20
|
+
* rely on its parent container styling, css variables are declared in
|
|
21
|
+
* <Container /> to preset the base values for the preview block styling.
|
|
22
|
+
*
|
|
23
|
+
* `--container-padding` is the padding of the Container. This value is based
|
|
24
|
+
* on size and hidePadding.
|
|
25
|
+
* `--container-gap-left` and `--container-gap-right` are the gap or padding of
|
|
26
|
+
* the Container depending on whether the container has other preview blocks
|
|
27
|
+
* with left/right positioning.
|
|
28
|
+
* `--preview-block-width` is the size of the preview image in relation to
|
|
29
|
+
* the Container width when the placement is left/right.
|
|
30
|
+
* @param placement
|
|
31
|
+
* @param ignoreContainerPadding
|
|
32
|
+
*/
|
|
33
|
+
var getPreviewBlockStyles = function getPreviewBlockStyles(placement, ignoreContainerPadding) {
|
|
34
|
+
if (placement === MediaPlacement.Left || placement === MediaPlacement.Right) {
|
|
35
|
+
var containerPadding = ignoreContainerPadding ? '0rem' : 'var(--container-padding)';
|
|
36
|
+
// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
|
|
37
|
+
return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\t\t\tposition: absolute;\n\t\t\ttop: ", ";\n\t\t\tbottom: ", ";\n\t\t\twidth: calc(var(--preview-block-width) - ", ");\n\n\t\t\t", "\n\t\t\t", "\n\n [data-smart-element-media='image'] {\n\t\t\t\taspect-ratio: unset;\n\t\t\t\tpadding-top: unset;\n\t\t\t\twidth: 100%;\n\t\t\t\theight: 100%;\n\t\t\t\tobject-fit: cover;\n\t\t\t}\n\t\t"])), containerPadding, containerPadding, containerPadding, placement === MediaPlacement.Left ? "left: ".concat(containerPadding, ";") : '', placement === MediaPlacement.Right ? "right: ".concat(containerPadding, ";") : '');
|
|
38
|
+
}
|
|
39
|
+
if (ignoreContainerPadding) {
|
|
40
|
+
return css({
|
|
41
|
+
marginLeft: 'calc(var(--container-gap-left) * -1)',
|
|
42
|
+
marginRight: 'calc(var(--container-gap-right) * -1)',
|
|
43
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
|
|
44
|
+
'&:first-of-type': {
|
|
45
|
+
marginTop: 'calc(var(--container-padding) * -1)'
|
|
46
|
+
},
|
|
47
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
|
|
48
|
+
'&:last-of-type': {
|
|
49
|
+
marginBottom: 'calc(var(--container-padding) * -1)'
|
|
50
|
+
}
|
|
51
|
+
});
|
|
52
|
+
}
|
|
53
|
+
};
|
|
54
|
+
|
|
55
|
+
/**
|
|
56
|
+
* Represents a resolved PreviewBlock, which typically contains media or other large format content.
|
|
57
|
+
* @public
|
|
58
|
+
* @param {PreviewBlock} PreviewBlock
|
|
59
|
+
* @see Block
|
|
60
|
+
*/
|
|
61
|
+
var PreviewBlockResolvedView = function PreviewBlockResolvedView(_ref) {
|
|
62
|
+
var _ref$ignoreContainerP = _ref.ignoreContainerPadding,
|
|
63
|
+
ignoreContainerPadding = _ref$ignoreContainerP === void 0 ? false : _ref$ignoreContainerP,
|
|
64
|
+
onError = _ref.onError,
|
|
65
|
+
overrideCss = _ref.overrideCss,
|
|
66
|
+
placement = _ref.placement,
|
|
67
|
+
testId = _ref.testId,
|
|
68
|
+
overrideUrl = _ref.overrideUrl,
|
|
69
|
+
blockProps = _objectWithoutProperties(_ref, _excluded);
|
|
70
|
+
var _useState = useState(overrideCss),
|
|
71
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
72
|
+
styles = _useState2[0],
|
|
73
|
+
setStyles = _useState2[1];
|
|
74
|
+
var updateStyles = useCallback(function () {
|
|
75
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
76
|
+
setStyles(css(getPreviewBlockStyles(placement, ignoreContainerPadding), overrideCss));
|
|
77
|
+
}, [ignoreContainerPadding, overrideCss, placement]);
|
|
78
|
+
useEffect(function () {
|
|
79
|
+
updateStyles();
|
|
80
|
+
}, [ignoreContainerPadding, overrideCss, placement, updateStyles]);
|
|
81
|
+
var handleOnLoad = useCallback(function () {
|
|
82
|
+
updateStyles();
|
|
83
|
+
}, [updateStyles]);
|
|
84
|
+
var handleOnError = useCallback(function () {
|
|
85
|
+
if (onError) {
|
|
86
|
+
onError();
|
|
87
|
+
}
|
|
88
|
+
}, [onError]);
|
|
89
|
+
return jsx(Block, _extends({}, blockProps, {
|
|
90
|
+
overrideCss: styles,
|
|
91
|
+
testId: "".concat(testId, "-resolved-view")
|
|
92
|
+
}), jsx(Preview, {
|
|
93
|
+
onError: handleOnError,
|
|
94
|
+
onLoad: handleOnLoad,
|
|
95
|
+
overrideUrl: overrideUrl
|
|
96
|
+
}));
|
|
97
|
+
};
|
|
98
|
+
export default PreviewBlockResolvedView;
|
|
@@ -1,6 +1,4 @@
|
|
|
1
|
-
|
|
2
|
-
import * as React from 'react';
|
|
3
|
-
import { ax, ix } from "@compiled/react/runtime";
|
|
1
|
+
import React from 'react';
|
|
4
2
|
import ImageLoader from 'react-render-image';
|
|
5
3
|
import LoadingSkeleton from '../loading-skeleton';
|
|
6
4
|
var ImageIcon = function ImageIcon(_ref) {
|
|
@@ -13,7 +13,7 @@ import LinkWarningModal from './LinkWarningModal';
|
|
|
13
13
|
import { useLinkWarningModal } from './LinkWarningModal/hooks/use-link-warning-modal';
|
|
14
14
|
var PACKAGE_DATA = {
|
|
15
15
|
packageName: "@atlaskit/smart-card",
|
|
16
|
-
packageVersion: "34.
|
|
16
|
+
packageVersion: "34.3.0",
|
|
17
17
|
componentName: 'linkUrl'
|
|
18
18
|
};
|
|
19
19
|
var Anchor = withLinkClickedEvent('a');
|
|
@@ -1,11 +1,4 @@
|
|
|
1
|
-
|
|
1
|
+
/// <reference types="react" />
|
|
2
2
|
import { type BlockProps } from '../types';
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
* in a row. All elements and actions should be contained within a Block.
|
|
6
|
-
* @internal
|
|
7
|
-
* @param {ActionGroupProps} ActionGroupProps
|
|
8
|
-
* @see Action
|
|
9
|
-
*/
|
|
10
|
-
declare const Block: ({ children, direction, size, testId, overrideCss, blockRef, onRender, onTransitionEnd, }: BlockProps) => jsx.JSX.Element;
|
|
11
|
-
export default Block;
|
|
3
|
+
declare const Exported: (props: BlockProps) => JSX.Element;
|
|
4
|
+
export default Exported;
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { jsx } from '@emotion/react';
|
|
2
|
+
import { type BlockProps } from '../types';
|
|
3
|
+
/**
|
|
4
|
+
* A block represents a collection of elements and actions that are arranged
|
|
5
|
+
* in a row. All elements and actions should be contained within a Block.
|
|
6
|
+
* @internal
|
|
7
|
+
* @param {ActionGroupProps} ActionGroupProps
|
|
8
|
+
* @see Action
|
|
9
|
+
*/
|
|
10
|
+
declare const Block: ({ children, direction, size, testId, overrideCss, blockRef, onRender, onTransitionEnd, }: BlockProps) => jsx.JSX.Element;
|
|
11
|
+
export default Block;
|
|
@@ -1,14 +1,4 @@
|
|
|
1
|
-
|
|
2
|
-
* @jsxRuntime classic
|
|
3
|
-
* @jsx jsx
|
|
4
|
-
*/
|
|
5
|
-
import { jsx } from '@emotion/react';
|
|
1
|
+
/// <reference types="react" />
|
|
6
2
|
import { type PreviewBlockProps } from './types';
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
* @public
|
|
10
|
-
* @param {PreviewBlockProps} PreviewBlock
|
|
11
|
-
* @see Block
|
|
12
|
-
*/
|
|
13
|
-
declare const PreviewBlock: ({ status, testId, overrideUrl, ...blockProps }: PreviewBlockProps) => jsx.JSX.Element;
|
|
14
|
-
export default PreviewBlock;
|
|
3
|
+
declare const Exported: (props: PreviewBlockProps) => JSX.Element;
|
|
4
|
+
export default Exported;
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @jsxRuntime classic
|
|
3
|
+
* @jsx jsx
|
|
4
|
+
*/
|
|
5
|
+
import { jsx } from '@emotion/react';
|
|
6
|
+
import { type PreviewBlockProps } from './types';
|
|
7
|
+
/**
|
|
8
|
+
* Represents a PreviewBlock, which typically contains media or other large format content.
|
|
9
|
+
* @public
|
|
10
|
+
* @param {PreviewBlockProps} PreviewBlock
|
|
11
|
+
* @see Block
|
|
12
|
+
*/
|
|
13
|
+
declare const PreviewBlock: ({ status, testId, overrideUrl, ...blockProps }: PreviewBlockProps) => jsx.JSX.Element;
|
|
14
|
+
export default PreviewBlock;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
|
|
1
|
+
/// <reference types="react" />
|
|
2
2
|
import { type PreviewBlockProps } from '../types';
|
|
3
3
|
/**
|
|
4
4
|
* Represents a resolved PreviewBlock, which typically contains media or other large format content.
|
|
@@ -6,5 +6,5 @@ import { type PreviewBlockProps } from '../types';
|
|
|
6
6
|
* @param {PreviewBlock} PreviewBlock
|
|
7
7
|
* @see Block
|
|
8
8
|
*/
|
|
9
|
-
declare const PreviewBlockResolvedView: ({ ignoreContainerPadding, onError,
|
|
9
|
+
declare const PreviewBlockResolvedView: ({ ignoreContainerPadding, onError, className, placement, testId, overrideUrl, ...blockProps }: PreviewBlockProps) => JSX.Element;
|
|
10
10
|
export default PreviewBlockResolvedView;
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { jsx } from '@emotion/react';
|
|
2
|
+
import { type PreviewBlockProps } from '../types';
|
|
3
|
+
/**
|
|
4
|
+
* Represents a resolved PreviewBlock, which typically contains media or other large format content.
|
|
5
|
+
* @public
|
|
6
|
+
* @param {PreviewBlock} PreviewBlock
|
|
7
|
+
* @see Block
|
|
8
|
+
*/
|
|
9
|
+
declare const PreviewBlockResolvedView: ({ ignoreContainerPadding, onError, overrideCss, placement, testId, overrideUrl, ...blockProps }: PreviewBlockProps) => jsx.JSX.Element;
|
|
10
|
+
export default PreviewBlockResolvedView;
|
|
@@ -1,11 +1,4 @@
|
|
|
1
|
-
|
|
1
|
+
/// <reference types="react" />
|
|
2
2
|
import { type BlockProps } from '../types';
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
* in a row. All elements and actions should be contained within a Block.
|
|
6
|
-
* @internal
|
|
7
|
-
* @param {ActionGroupProps} ActionGroupProps
|
|
8
|
-
* @see Action
|
|
9
|
-
*/
|
|
10
|
-
declare const Block: ({ children, direction, size, testId, overrideCss, blockRef, onRender, onTransitionEnd, }: BlockProps) => jsx.JSX.Element;
|
|
11
|
-
export default Block;
|
|
3
|
+
declare const Exported: (props: BlockProps) => JSX.Element;
|
|
4
|
+
export default Exported;
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { jsx } from '@emotion/react';
|
|
2
|
+
import { type BlockProps } from '../types';
|
|
3
|
+
/**
|
|
4
|
+
* A block represents a collection of elements and actions that are arranged
|
|
5
|
+
* in a row. All elements and actions should be contained within a Block.
|
|
6
|
+
* @internal
|
|
7
|
+
* @param {ActionGroupProps} ActionGroupProps
|
|
8
|
+
* @see Action
|
|
9
|
+
*/
|
|
10
|
+
declare const Block: ({ children, direction, size, testId, overrideCss, blockRef, onRender, onTransitionEnd, }: BlockProps) => jsx.JSX.Element;
|
|
11
|
+
export default Block;
|
|
@@ -1,14 +1,4 @@
|
|
|
1
|
-
|
|
2
|
-
* @jsxRuntime classic
|
|
3
|
-
* @jsx jsx
|
|
4
|
-
*/
|
|
5
|
-
import { jsx } from '@emotion/react';
|
|
1
|
+
/// <reference types="react" />
|
|
6
2
|
import { type PreviewBlockProps } from './types';
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
* @public
|
|
10
|
-
* @param {PreviewBlockProps} PreviewBlock
|
|
11
|
-
* @see Block
|
|
12
|
-
*/
|
|
13
|
-
declare const PreviewBlock: ({ status, testId, overrideUrl, ...blockProps }: PreviewBlockProps) => jsx.JSX.Element;
|
|
14
|
-
export default PreviewBlock;
|
|
3
|
+
declare const Exported: (props: PreviewBlockProps) => JSX.Element;
|
|
4
|
+
export default Exported;
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @jsxRuntime classic
|
|
3
|
+
* @jsx jsx
|
|
4
|
+
*/
|
|
5
|
+
import { jsx } from '@emotion/react';
|
|
6
|
+
import { type PreviewBlockProps } from './types';
|
|
7
|
+
/**
|
|
8
|
+
* Represents a PreviewBlock, which typically contains media or other large format content.
|
|
9
|
+
* @public
|
|
10
|
+
* @param {PreviewBlockProps} PreviewBlock
|
|
11
|
+
* @see Block
|
|
12
|
+
*/
|
|
13
|
+
declare const PreviewBlock: ({ status, testId, overrideUrl, ...blockProps }: PreviewBlockProps) => jsx.JSX.Element;
|
|
14
|
+
export default PreviewBlock;
|
package/dist/types-ts4.5/view/FlexibleCard/components/blocks/preview-block/resolved/index.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
|
|
1
|
+
/// <reference types="react" />
|
|
2
2
|
import { type PreviewBlockProps } from '../types';
|
|
3
3
|
/**
|
|
4
4
|
* Represents a resolved PreviewBlock, which typically contains media or other large format content.
|
|
@@ -6,5 +6,5 @@ import { type PreviewBlockProps } from '../types';
|
|
|
6
6
|
* @param {PreviewBlock} PreviewBlock
|
|
7
7
|
* @see Block
|
|
8
8
|
*/
|
|
9
|
-
declare const PreviewBlockResolvedView: ({ ignoreContainerPadding, onError,
|
|
9
|
+
declare const PreviewBlockResolvedView: ({ ignoreContainerPadding, onError, className, placement, testId, overrideUrl, ...blockProps }: PreviewBlockProps) => JSX.Element;
|
|
10
10
|
export default PreviewBlockResolvedView;
|
package/dist/types-ts4.5/view/FlexibleCard/components/blocks/preview-block/resolved/indexOld.d.ts
ADDED
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { jsx } from '@emotion/react';
|
|
2
|
+
import { type PreviewBlockProps } from '../types';
|
|
3
|
+
/**
|
|
4
|
+
* Represents a resolved PreviewBlock, which typically contains media or other large format content.
|
|
5
|
+
* @public
|
|
6
|
+
* @param {PreviewBlock} PreviewBlock
|
|
7
|
+
* @see Block
|
|
8
|
+
*/
|
|
9
|
+
declare const PreviewBlockResolvedView: ({ ignoreContainerPadding, onError, overrideCss, placement, testId, overrideUrl, ...blockProps }: PreviewBlockProps) => jsx.JSX.Element;
|
|
10
|
+
export default PreviewBlockResolvedView;
|