@atlaskit/smart-card 17.0.0 → 17.0.1
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 +10 -0
- package/dist/cjs/client/api.js +5 -3
- package/dist/cjs/client/errors.js +3 -1
- package/dist/cjs/constants.js +77 -0
- package/dist/cjs/extractors/block/index.js +2 -2
- package/dist/cjs/extractors/common/actions/extractActions.js +2 -2
- package/dist/cjs/extractors/common/actions/extractPreviewAction.js +2 -2
- package/dist/cjs/extractors/common/context/extractAccessContext.js +2 -2
- package/dist/cjs/extractors/embed/index.js +2 -2
- package/dist/cjs/extractors/flexible/index.js +22 -0
- package/dist/cjs/state/flexible-ui-context/index.js +17 -0
- package/dist/cjs/state/flexible-ui-context/types.js +5 -0
- package/dist/cjs/state/reducers/index.js +2 -2
- package/dist/cjs/utils/analytics/analytics.js +2 -2
- package/dist/cjs/utils/analytics/index.js +2 -2
- package/dist/cjs/version.json +1 -1
- package/dist/cjs/view/FlexibleCard/components/blocks/block/index.js +87 -0
- package/dist/cjs/view/FlexibleCard/components/blocks/types.js +5 -0
- package/dist/cjs/view/FlexibleCard/components/container/index.js +117 -0
- package/dist/cjs/view/FlexibleCard/components/container/types.js +5 -0
- package/dist/cjs/view/FlexibleCard/components/elements/icon/atlaskit-icon/index.js +244 -0
- package/dist/cjs/view/FlexibleCard/components/elements/icon/atlaskit-icon/types.js +5 -0
- package/dist/cjs/view/FlexibleCard/components/elements/icon/image-icon/index.js +32 -0
- package/dist/cjs/view/FlexibleCard/components/elements/icon/image-icon/types.js +5 -0
- package/dist/cjs/view/FlexibleCard/components/elements/icon/index.js +144 -0
- package/dist/cjs/view/FlexibleCard/components/elements/icon/types.js +5 -0
- package/dist/cjs/view/FlexibleCard/components/elements/link/index.js +135 -0
- package/dist/cjs/view/FlexibleCard/components/elements/link/types.js +5 -0
- package/dist/cjs/view/FlexibleCard/components/elements/types.js +5 -0
- package/dist/es2019/constants.js +67 -0
- package/dist/es2019/extractors/flexible/index.js +14 -0
- package/dist/es2019/state/flexible-ui-context/index.js +3 -0
- package/dist/es2019/state/flexible-ui-context/types.js +1 -0
- package/dist/es2019/version.json +1 -1
- package/dist/es2019/view/FlexibleCard/components/blocks/block/index.js +62 -0
- package/dist/es2019/view/FlexibleCard/components/blocks/types.js +1 -0
- package/dist/es2019/view/FlexibleCard/components/container/index.js +89 -0
- package/dist/es2019/view/FlexibleCard/components/container/types.js +1 -0
- package/dist/es2019/view/FlexibleCard/components/elements/icon/atlaskit-icon/index.js +175 -0
- package/dist/es2019/view/FlexibleCard/components/elements/icon/atlaskit-icon/types.js +1 -0
- package/dist/es2019/view/FlexibleCard/components/elements/icon/image-icon/index.js +19 -0
- package/dist/es2019/view/FlexibleCard/components/elements/icon/image-icon/types.js +1 -0
- package/dist/es2019/view/FlexibleCard/components/elements/icon/index.js +112 -0
- package/dist/es2019/view/FlexibleCard/components/elements/icon/types.js +1 -0
- package/dist/es2019/view/FlexibleCard/components/elements/link/index.js +118 -0
- package/dist/es2019/view/FlexibleCard/components/elements/link/types.js +1 -0
- package/dist/es2019/view/FlexibleCard/components/elements/types.js +1 -0
- package/dist/esm/client/api.js +4 -3
- package/dist/esm/client/errors.js +2 -1
- package/dist/esm/constants.js +67 -0
- package/dist/esm/extractors/block/index.js +2 -2
- package/dist/esm/extractors/common/actions/extractActions.js +2 -2
- package/dist/esm/extractors/common/actions/extractPreviewAction.js +2 -2
- package/dist/esm/extractors/common/context/extractAccessContext.js +2 -2
- package/dist/esm/extractors/embed/index.js +2 -2
- package/dist/esm/extractors/flexible/index.js +14 -0
- package/dist/esm/state/flexible-ui-context/index.js +5 -0
- package/dist/esm/state/flexible-ui-context/types.js +1 -0
- package/dist/esm/state/reducers/index.js +2 -2
- package/dist/esm/utils/analytics/analytics.js +2 -2
- package/dist/esm/utils/analytics/index.js +2 -2
- package/dist/esm/version.json +1 -1
- package/dist/esm/view/FlexibleCard/components/blocks/block/index.js +74 -0
- package/dist/esm/view/FlexibleCard/components/blocks/types.js +1 -0
- package/dist/esm/view/FlexibleCard/components/container/index.js +102 -0
- package/dist/esm/view/FlexibleCard/components/container/types.js +1 -0
- package/dist/esm/view/FlexibleCard/components/elements/icon/atlaskit-icon/index.js +224 -0
- package/dist/esm/view/FlexibleCard/components/elements/icon/atlaskit-icon/types.js +1 -0
- package/dist/esm/view/FlexibleCard/components/elements/icon/image-icon/index.js +20 -0
- package/dist/esm/view/FlexibleCard/components/elements/icon/image-icon/types.js +1 -0
- package/dist/esm/view/FlexibleCard/components/elements/icon/index.js +124 -0
- package/dist/esm/view/FlexibleCard/components/elements/icon/types.js +1 -0
- package/dist/esm/view/FlexibleCard/components/elements/link/index.js +120 -0
- package/dist/esm/view/FlexibleCard/components/elements/link/types.js +1 -0
- package/dist/esm/view/FlexibleCard/components/elements/types.js +1 -0
- package/dist/types/constants.d.ts +56 -0
- package/dist/types/extractors/flexible/index.d.ts +4 -0
- package/dist/types/state/flexible-ui-context/index.d.ts +4 -0
- package/dist/types/state/flexible-ui-context/types.d.ts +3 -0
- package/dist/types/view/FlexibleCard/components/blocks/block/index.d.ts +7 -0
- package/dist/types/view/FlexibleCard/components/blocks/types.d.ts +6 -0
- package/dist/types/view/FlexibleCard/components/container/index.d.ts +7 -0
- package/dist/types/view/FlexibleCard/components/container/types.d.ts +8 -0
- package/dist/types/view/FlexibleCard/components/elements/icon/atlaskit-icon/index.d.ts +4 -0
- package/dist/types/view/FlexibleCard/components/elements/icon/atlaskit-icon/types.d.ts +6 -0
- package/dist/types/view/FlexibleCard/components/elements/icon/image-icon/index.d.ts +5 -0
- package/dist/types/view/FlexibleCard/components/elements/icon/image-icon/types.d.ts +6 -0
- package/dist/types/view/FlexibleCard/components/elements/icon/index.d.ts +5 -0
- package/dist/types/view/FlexibleCard/components/elements/icon/types.d.ts +7 -0
- package/dist/types/view/FlexibleCard/components/elements/link/index.d.ts +5 -0
- package/dist/types/view/FlexibleCard/components/elements/link/types.d.ts +8 -0
- package/dist/types/view/FlexibleCard/components/elements/types.d.ts +5 -0
- package/package.json +10 -6
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
package/dist/es2019/version.json
CHANGED
|
@@ -0,0 +1,62 @@
|
|
|
1
|
+
/** @jsx jsx */
|
|
2
|
+
import React from 'react';
|
|
3
|
+
import { css, jsx } from '@emotion/core';
|
|
4
|
+
import { SmartLinkDirection, SmartLinkSize } from '../../../../../constants';
|
|
5
|
+
|
|
6
|
+
const getDirectionStyles = direction => {
|
|
7
|
+
switch (direction) {
|
|
8
|
+
case SmartLinkDirection.Vertical:
|
|
9
|
+
return {
|
|
10
|
+
flexDirection: 'column',
|
|
11
|
+
alignItems: 'flex-start'
|
|
12
|
+
};
|
|
13
|
+
|
|
14
|
+
case SmartLinkDirection.Horizontal:
|
|
15
|
+
default:
|
|
16
|
+
return {
|
|
17
|
+
flexDirection: 'row',
|
|
18
|
+
alignItems: 'center'
|
|
19
|
+
};
|
|
20
|
+
}
|
|
21
|
+
};
|
|
22
|
+
|
|
23
|
+
const getGapSize = size => {
|
|
24
|
+
switch (size) {
|
|
25
|
+
case SmartLinkSize.XLarge:
|
|
26
|
+
return '1.25rem';
|
|
27
|
+
|
|
28
|
+
case SmartLinkSize.Large:
|
|
29
|
+
return '1rem';
|
|
30
|
+
|
|
31
|
+
case SmartLinkSize.Medium:
|
|
32
|
+
return '.5rem';
|
|
33
|
+
|
|
34
|
+
case SmartLinkSize.Small:
|
|
35
|
+
default:
|
|
36
|
+
return '.25rem';
|
|
37
|
+
}
|
|
38
|
+
};
|
|
39
|
+
|
|
40
|
+
export const getBlockStyles = (direction, size) => css({
|
|
41
|
+
display: 'flex',
|
|
42
|
+
gap: getGapSize(size),
|
|
43
|
+
lineHeight: '1rem',
|
|
44
|
+
minWidth: 0,
|
|
45
|
+
...getDirectionStyles(direction),
|
|
46
|
+
'& > *': {
|
|
47
|
+
minWidth: 0
|
|
48
|
+
}
|
|
49
|
+
});
|
|
50
|
+
|
|
51
|
+
const Block = ({
|
|
52
|
+
children,
|
|
53
|
+
direction = SmartLinkDirection.Horizontal,
|
|
54
|
+
size = SmartLinkSize.Medium,
|
|
55
|
+
testId = 'smart-block'
|
|
56
|
+
}) => jsx("div", {
|
|
57
|
+
css: getBlockStyles(direction, size),
|
|
58
|
+
"data-smart-block": true,
|
|
59
|
+
"data-testid": testId
|
|
60
|
+
}, children);
|
|
61
|
+
|
|
62
|
+
export default Block;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,89 @@
|
|
|
1
|
+
/** @jsx jsx */
|
|
2
|
+
import React from 'react';
|
|
3
|
+
import { N0, N40A, N50A } from '@atlaskit/theme/colors';
|
|
4
|
+
import { css, jsx } from '@emotion/core';
|
|
5
|
+
import { SmartLinkSize } from '../../../../constants';
|
|
6
|
+
import { token } from '@atlaskit/tokens';
|
|
7
|
+
|
|
8
|
+
const getElevationStyles = () => ({
|
|
9
|
+
border: `1px solid transparent`,
|
|
10
|
+
borderRadius: '1.5px',
|
|
11
|
+
boxShadow: token('elevation.shadow.raised', `0 1px 1px ${N50A}, 0 0 1px 1px ${N40A}`),
|
|
12
|
+
margin: '2px'
|
|
13
|
+
});
|
|
14
|
+
|
|
15
|
+
const getGapSize = size => {
|
|
16
|
+
switch (size) {
|
|
17
|
+
case SmartLinkSize.XLarge:
|
|
18
|
+
return '1.25rem';
|
|
19
|
+
|
|
20
|
+
case SmartLinkSize.Large:
|
|
21
|
+
return '1rem';
|
|
22
|
+
|
|
23
|
+
case SmartLinkSize.Medium:
|
|
24
|
+
return '.5rem';
|
|
25
|
+
|
|
26
|
+
case SmartLinkSize.Small:
|
|
27
|
+
default:
|
|
28
|
+
return '.25rem';
|
|
29
|
+
}
|
|
30
|
+
};
|
|
31
|
+
|
|
32
|
+
const getPaddingSize = size => {
|
|
33
|
+
switch (size) {
|
|
34
|
+
case SmartLinkSize.XLarge:
|
|
35
|
+
return '1.5rem';
|
|
36
|
+
|
|
37
|
+
case SmartLinkSize.Large:
|
|
38
|
+
return '1.25rem';
|
|
39
|
+
|
|
40
|
+
case SmartLinkSize.Medium:
|
|
41
|
+
return '1rem';
|
|
42
|
+
|
|
43
|
+
case SmartLinkSize.Small:
|
|
44
|
+
default:
|
|
45
|
+
return '.5rem';
|
|
46
|
+
}
|
|
47
|
+
};
|
|
48
|
+
|
|
49
|
+
export const getContainerStyles = (size, hideBackground, hideElevation, hidePadding) => {
|
|
50
|
+
const elevation = hideElevation ? {} : getElevationStyles();
|
|
51
|
+
return css({
|
|
52
|
+
backgroundColor: hideBackground ? undefined : token('elevation.surface', N0),
|
|
53
|
+
display: 'flex',
|
|
54
|
+
gap: `${getGapSize(size)} 0`,
|
|
55
|
+
flexDirection: 'column',
|
|
56
|
+
minWidth: 0,
|
|
57
|
+
overflow: 'hidden',
|
|
58
|
+
padding: hidePadding ? undefined : getPaddingSize(size),
|
|
59
|
+
...elevation
|
|
60
|
+
});
|
|
61
|
+
};
|
|
62
|
+
|
|
63
|
+
const renderChildren = (children, containerSize) => React.Children.map(children, child => {
|
|
64
|
+
if ( /*#__PURE__*/React.isValidElement(child)) {
|
|
65
|
+
const {
|
|
66
|
+
size: blockSize
|
|
67
|
+
} = child.props;
|
|
68
|
+
return /*#__PURE__*/React.cloneElement(child, {
|
|
69
|
+
size: blockSize || containerSize
|
|
70
|
+
});
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
return child;
|
|
74
|
+
});
|
|
75
|
+
|
|
76
|
+
const Container = ({
|
|
77
|
+
children,
|
|
78
|
+
hideBackground = false,
|
|
79
|
+
hideElevation = false,
|
|
80
|
+
hidePadding = false,
|
|
81
|
+
size = SmartLinkSize.Medium,
|
|
82
|
+
testId = 'smart-links-container'
|
|
83
|
+
}) => jsx("div", {
|
|
84
|
+
css: getContainerStyles(size, hideBackground, hideElevation, hidePadding),
|
|
85
|
+
"data-smart-link-container": true,
|
|
86
|
+
"data-testid": testId
|
|
87
|
+
}, renderChildren(children, size));
|
|
88
|
+
|
|
89
|
+
export default Container;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,175 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import Loadable from 'react-loadable';
|
|
3
|
+
import { B200, B400, N700 } from '@atlaskit/theme/colors';
|
|
4
|
+
import { IconType } from '../../../../../../constants';
|
|
5
|
+
// prettier-ignore
|
|
6
|
+
const importIconMapper = {
|
|
7
|
+
[IconType.Archive]: () => import(
|
|
8
|
+
/* webpackChunkName: "glyphArchive" */
|
|
9
|
+
'@atlaskit/icon-file-type/glyph/archive/16'),
|
|
10
|
+
[IconType.Audio]: () => import(
|
|
11
|
+
/* webpackChunkName: "glyphAudio" */
|
|
12
|
+
'@atlaskit/icon-file-type/glyph/audio/16'),
|
|
13
|
+
[IconType.Blog]: () => import(
|
|
14
|
+
/* webpackChunkName: "glyphBlog" */
|
|
15
|
+
'@atlaskit/icon-object/glyph/blog/16'),
|
|
16
|
+
[IconType.Code]: () => import(
|
|
17
|
+
/* webpackChunkName: "glyphCode" */
|
|
18
|
+
'@atlaskit/icon-file-type/glyph/source-code/16'),
|
|
19
|
+
[IconType.Document]: () => import(
|
|
20
|
+
/* webpackChunkName: "glyphDocument" */
|
|
21
|
+
'@atlaskit/icon-file-type/glyph/document/16'),
|
|
22
|
+
[IconType.Executable]: () => import(
|
|
23
|
+
/* webpackChunkName: "glyphExecutable" */
|
|
24
|
+
'@atlaskit/icon-file-type/glyph/executable/16'),
|
|
25
|
+
[IconType.File]: () => import(
|
|
26
|
+
/* webpackChunkName: "glyphFile" */
|
|
27
|
+
'@atlaskit/icon-file-type/glyph/generic/16'),
|
|
28
|
+
[IconType.Folder]: () => import(
|
|
29
|
+
/* webpackChunkName: "glyphFolder" */
|
|
30
|
+
'@atlaskit/icon-file-type/glyph/folder/16'),
|
|
31
|
+
[IconType.Generic]: () => import(
|
|
32
|
+
/* webpackChunkName: "glyphGeneric" */
|
|
33
|
+
'@atlaskit/icon-file-type/glyph/generic/16'),
|
|
34
|
+
[IconType.GIF]: () => import(
|
|
35
|
+
/* webpackChunkName: "glyphGIF" */
|
|
36
|
+
'@atlaskit/icon-file-type/glyph/gif/16'),
|
|
37
|
+
[IconType.GoogleDocs]: () => import(
|
|
38
|
+
/* webpackChunkName: "glyphGoogleDocs" */
|
|
39
|
+
'@atlaskit/icon-file-type/glyph/google-doc/16'),
|
|
40
|
+
[IconType.GoogleForms]: () => import(
|
|
41
|
+
/* webpackChunkName: "glyphGoogleForms" */
|
|
42
|
+
'@atlaskit/icon-file-type/glyph/google-form/16'),
|
|
43
|
+
[IconType.GoogleSheets]: () => import(
|
|
44
|
+
/* webpackChunkName: "glyphGoogleSheets" */
|
|
45
|
+
'@atlaskit/icon-file-type/glyph/google-sheet/16'),
|
|
46
|
+
[IconType.GoogleSlides]: () => import(
|
|
47
|
+
/* webpackChunkName: "glyphGoogleSlides" */
|
|
48
|
+
'@atlaskit/icon-file-type/glyph/google-slide/16'),
|
|
49
|
+
[IconType.Image]: () => import(
|
|
50
|
+
/* webpackChunkName: "glyphImage" */
|
|
51
|
+
'@atlaskit/icon-file-type/glyph/image/16'),
|
|
52
|
+
[IconType.MSExcel]: () => import(
|
|
53
|
+
/* webpackChunkName: "glyphMSExcel" */
|
|
54
|
+
'@atlaskit/icon-file-type/glyph/excel-spreadsheet/16'),
|
|
55
|
+
[IconType.MSPowerpoint]: () => import(
|
|
56
|
+
/* webpackChunkName: "glyphMSPowerpoint" */
|
|
57
|
+
'@atlaskit/icon-file-type/glyph/powerpoint-presentation/16'),
|
|
58
|
+
[IconType.MSWord]: () => import(
|
|
59
|
+
/* webpackChunkName: "glyphMSWord" */
|
|
60
|
+
'@atlaskit/icon-file-type/glyph/word-document/16'),
|
|
61
|
+
[IconType.PDF]: () => import(
|
|
62
|
+
/* webpackChunkName: "glyphPDF" */
|
|
63
|
+
'@atlaskit/icon-file-type/glyph/pdf-document/16'),
|
|
64
|
+
[IconType.Presentation]: () => import(
|
|
65
|
+
/* webpackChunkName: "glyphPresentation" */
|
|
66
|
+
'@atlaskit/icon-file-type/glyph/presentation/16'),
|
|
67
|
+
[IconType.Sketch]: () => import(
|
|
68
|
+
/* webpackChunkName: "glyphSketch" */
|
|
69
|
+
'@atlaskit/icon-file-type/glyph/sketch/16'),
|
|
70
|
+
[IconType.Spreadsheet]: () => import(
|
|
71
|
+
/* webpackChunkName: "glyphSpreadsheet" */
|
|
72
|
+
'@atlaskit/icon-file-type/glyph/spreadsheet/16'),
|
|
73
|
+
[IconType.Template]: () => import(
|
|
74
|
+
/* webpackChunkName: "glyphTemplate" */
|
|
75
|
+
'@atlaskit/icon/glyph/document-filled'),
|
|
76
|
+
[IconType.Video]: () => import(
|
|
77
|
+
/* webpackChunkName: "glyphVideo" */
|
|
78
|
+
'@atlaskit/icon-file-type/glyph/video/16'),
|
|
79
|
+
// Bitbucket icons
|
|
80
|
+
[IconType.Branch]: () => import(
|
|
81
|
+
/* webpackChunkName: "glyphBranch" */
|
|
82
|
+
'@atlaskit/icon-object/glyph/branch/16'),
|
|
83
|
+
[IconType.Commit]: () => import(
|
|
84
|
+
/* webpackChunkName: "glyphCommit" */
|
|
85
|
+
'@atlaskit/icon-object/glyph/commit/16'),
|
|
86
|
+
[IconType.Project]: () => import(
|
|
87
|
+
/* webpackChunkName: "glyphProject" */
|
|
88
|
+
'@atlaskit/icon/glyph/people-group'),
|
|
89
|
+
[IconType.PullRequest]: () => import(
|
|
90
|
+
/* webpackChunkName: "glyphPullRequest" */
|
|
91
|
+
'@atlaskit/icon-object/glyph/pull-request/16'),
|
|
92
|
+
[IconType.Repo]: () => import(
|
|
93
|
+
/* webpackChunkName: "glyphRepo" */
|
|
94
|
+
'@atlaskit/icon-object/glyph/code/16'),
|
|
95
|
+
// Jira icons
|
|
96
|
+
[IconType.Bug]: () => import(
|
|
97
|
+
/* webpackChunkName: "glyphBug" */
|
|
98
|
+
'@atlaskit/icon-object/glyph/bug/16'),
|
|
99
|
+
[IconType.Change]: () => import(
|
|
100
|
+
/* webpackChunkName: "glyphChange" */
|
|
101
|
+
'@atlaskit/icon-object/glyph/changes/16'),
|
|
102
|
+
[IconType.Epic]: () => import(
|
|
103
|
+
/* webpackChunkName: "glyphEpic" */
|
|
104
|
+
'@atlaskit/icon-object/glyph/epic/16'),
|
|
105
|
+
[IconType.Incident]: () => import(
|
|
106
|
+
/* webpackChunkName: "glyphIncident" */
|
|
107
|
+
'@atlaskit/icon-object/glyph/incident/16'),
|
|
108
|
+
[IconType.Problem]: () => import(
|
|
109
|
+
/* webpackChunkName: "glyphProblem" */
|
|
110
|
+
'@atlaskit/icon-object/glyph/problem/16'),
|
|
111
|
+
[IconType.ServiceRequest]: () => import(
|
|
112
|
+
/* webpackChunkName: "glyphServiceRequest" */
|
|
113
|
+
'@atlaskit/icon-object/glyph/issue/16'),
|
|
114
|
+
[IconType.Story]: () => import(
|
|
115
|
+
/* webpackChunkName: "glyphStory" */
|
|
116
|
+
'@atlaskit/icon-object/glyph/story/16'),
|
|
117
|
+
[IconType.SubTask]: () => import(
|
|
118
|
+
/* webpackChunkName: "glyphSubTask" */
|
|
119
|
+
'@atlaskit/icon-object/glyph/subtask/16'),
|
|
120
|
+
[IconType.Task]: () => import(
|
|
121
|
+
/* webpackChunkName: "glyphTask" */
|
|
122
|
+
'@atlaskit/icon-object/glyph/task/16'),
|
|
123
|
+
// Provider icons
|
|
124
|
+
[IconType.Confluence]: () => import(
|
|
125
|
+
/* webpackChunkName: "glyphConfluence" */
|
|
126
|
+
'@atlaskit/logo/confluence-icon').then(({
|
|
127
|
+
ConfluenceIcon
|
|
128
|
+
}) => ({
|
|
129
|
+
default: ConfluenceIcon
|
|
130
|
+
})),
|
|
131
|
+
[IconType.Jira]: () => import(
|
|
132
|
+
/* webpackChunkName: "glyphJira" */
|
|
133
|
+
'@atlaskit/logo/jira-icon').then(({
|
|
134
|
+
JiraIcon
|
|
135
|
+
}) => ({
|
|
136
|
+
default: JiraIcon
|
|
137
|
+
}))
|
|
138
|
+
};
|
|
139
|
+
|
|
140
|
+
const getIconImportFn = icon => importIconMapper[icon];
|
|
141
|
+
|
|
142
|
+
const importIcon = importFn => {
|
|
143
|
+
return Loadable({
|
|
144
|
+
loader: () => importFn().then(module => module.default),
|
|
145
|
+
loading: () => null
|
|
146
|
+
}); // Because we're using dynamic loading here, TS will not be able to infer the type.
|
|
147
|
+
};
|
|
148
|
+
|
|
149
|
+
const AtlaskitIcon = ({
|
|
150
|
+
icon,
|
|
151
|
+
label,
|
|
152
|
+
testId
|
|
153
|
+
}) => {
|
|
154
|
+
const importFn = getIconImportFn(icon);
|
|
155
|
+
|
|
156
|
+
if (!importFn) {
|
|
157
|
+
return null;
|
|
158
|
+
}
|
|
159
|
+
|
|
160
|
+
const ImportedIcon = importIcon(importFn); // Logo component has a different prop set from other icon components
|
|
161
|
+
// and yet to support the token system.
|
|
162
|
+
|
|
163
|
+
const importedIcon = icon === IconType.Confluence || icon === IconType.Jira ? /*#__PURE__*/React.createElement(ImportedIcon, {
|
|
164
|
+
textColor: N700,
|
|
165
|
+
iconColor: B200,
|
|
166
|
+
iconGradientStart: B400,
|
|
167
|
+
iconGradientStop: B200
|
|
168
|
+
}) : /*#__PURE__*/React.createElement(ImportedIcon, {
|
|
169
|
+
label: label,
|
|
170
|
+
testId: testId
|
|
171
|
+
});
|
|
172
|
+
return importedIcon;
|
|
173
|
+
};
|
|
174
|
+
|
|
175
|
+
export default AtlaskitIcon;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
/** @jsx jsx */
|
|
2
|
+
import React from 'react';
|
|
3
|
+
import { jsx } from '@emotion/core';
|
|
4
|
+
import ImageLoader from 'react-render-image';
|
|
5
|
+
|
|
6
|
+
const ImageIcon = ({
|
|
7
|
+
defaultIcon,
|
|
8
|
+
testId,
|
|
9
|
+
url
|
|
10
|
+
}) => jsx(ImageLoader, {
|
|
11
|
+
src: url,
|
|
12
|
+
loaded: jsx("img", {
|
|
13
|
+
src: url,
|
|
14
|
+
"data-testid": `${testId}-image`
|
|
15
|
+
}),
|
|
16
|
+
errored: defaultIcon
|
|
17
|
+
});
|
|
18
|
+
|
|
19
|
+
export default ImageIcon;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,112 @@
|
|
|
1
|
+
/** @jsx jsx */
|
|
2
|
+
import React, { useMemo } from 'react';
|
|
3
|
+
import LinkIcon from '@atlaskit/icon/glyph/link';
|
|
4
|
+
import { css, jsx } from '@emotion/core';
|
|
5
|
+
import { SmartLinkSize } from '../../../../../constants';
|
|
6
|
+
import AtlaskitIcon from './atlaskit-icon';
|
|
7
|
+
import ImageIcon from './image-icon';
|
|
8
|
+
|
|
9
|
+
const getDimensionStyles = value => ({
|
|
10
|
+
maxHeight: value,
|
|
11
|
+
maxWidth: value,
|
|
12
|
+
minHeight: value,
|
|
13
|
+
minWidth: value,
|
|
14
|
+
height: value,
|
|
15
|
+
width: value
|
|
16
|
+
});
|
|
17
|
+
|
|
18
|
+
const getSizeStyles = size => {
|
|
19
|
+
switch (size) {
|
|
20
|
+
case SmartLinkSize.XLarge:
|
|
21
|
+
return getDimensionStyles('1.75rem');
|
|
22
|
+
|
|
23
|
+
case SmartLinkSize.Large:
|
|
24
|
+
return getDimensionStyles('1.5rem');
|
|
25
|
+
|
|
26
|
+
case SmartLinkSize.Medium:
|
|
27
|
+
return getDimensionStyles('1rem');
|
|
28
|
+
|
|
29
|
+
case SmartLinkSize.Small:
|
|
30
|
+
default:
|
|
31
|
+
return getDimensionStyles('.75rem');
|
|
32
|
+
}
|
|
33
|
+
};
|
|
34
|
+
|
|
35
|
+
const getMargin = size => {
|
|
36
|
+
switch (size) {
|
|
37
|
+
case SmartLinkSize.XLarge:
|
|
38
|
+
return '0.12em 0 0 0';
|
|
39
|
+
|
|
40
|
+
case SmartLinkSize.Large:
|
|
41
|
+
return '0';
|
|
42
|
+
|
|
43
|
+
case SmartLinkSize.Medium:
|
|
44
|
+
return '0';
|
|
45
|
+
|
|
46
|
+
case SmartLinkSize.Small:
|
|
47
|
+
default:
|
|
48
|
+
return '-.05em 0 0 0';
|
|
49
|
+
}
|
|
50
|
+
};
|
|
51
|
+
|
|
52
|
+
const getIconStyles = size => {
|
|
53
|
+
const styles = getSizeStyles(size);
|
|
54
|
+
return css({
|
|
55
|
+
flex: '0 0 auto',
|
|
56
|
+
alignSelf: 'flex-start',
|
|
57
|
+
margin: getMargin(size),
|
|
58
|
+
...styles,
|
|
59
|
+
'[class$="-Icon"],[class$="-Wrapper"]': { ...styles,
|
|
60
|
+
'> svg': { ...styles,
|
|
61
|
+
padding: 0
|
|
62
|
+
}
|
|
63
|
+
},
|
|
64
|
+
'& > img': styles
|
|
65
|
+
});
|
|
66
|
+
};
|
|
67
|
+
|
|
68
|
+
const renderAtlaskitIcon = (icon, label, testId) => {
|
|
69
|
+
if (icon) {
|
|
70
|
+
return jsx(AtlaskitIcon, {
|
|
71
|
+
icon: icon,
|
|
72
|
+
label: label,
|
|
73
|
+
testId: `${testId}-icon`
|
|
74
|
+
});
|
|
75
|
+
}
|
|
76
|
+
};
|
|
77
|
+
|
|
78
|
+
const renderDefaultIcon = (label, testId) => jsx(LinkIcon, {
|
|
79
|
+
label: label,
|
|
80
|
+
testId: `${testId}-default`
|
|
81
|
+
});
|
|
82
|
+
|
|
83
|
+
const renderImageIcon = (defaultIcon, icon, url, testId) => {
|
|
84
|
+
if (url) {
|
|
85
|
+
return jsx(ImageIcon, {
|
|
86
|
+
defaultIcon: defaultIcon,
|
|
87
|
+
testId: testId,
|
|
88
|
+
url: url
|
|
89
|
+
});
|
|
90
|
+
}
|
|
91
|
+
};
|
|
92
|
+
|
|
93
|
+
const Icon = ({
|
|
94
|
+
icon,
|
|
95
|
+
label = 'Link',
|
|
96
|
+
size = SmartLinkSize.Medium,
|
|
97
|
+
testId = 'smart-element-icon',
|
|
98
|
+
url
|
|
99
|
+
}) => {
|
|
100
|
+
const element = useMemo(() => {
|
|
101
|
+
const defaultIcon = renderDefaultIcon(label, testId);
|
|
102
|
+
return renderImageIcon(defaultIcon, icon, url, testId) || renderAtlaskitIcon(icon, label, testId) || defaultIcon;
|
|
103
|
+
}, [icon, label, testId, url]);
|
|
104
|
+
const styles = getIconStyles(size);
|
|
105
|
+
return jsx("div", {
|
|
106
|
+
css: styles,
|
|
107
|
+
"data-smart-element-icon": true,
|
|
108
|
+
"data-testid": testId
|
|
109
|
+
}, element);
|
|
110
|
+
};
|
|
111
|
+
|
|
112
|
+
export default Icon;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,118 @@
|
|
|
1
|
+
/** @jsx jsx */
|
|
2
|
+
import React from 'react';
|
|
3
|
+
import { B400, N800, N900, B500 } from '@atlaskit/theme/colors';
|
|
4
|
+
import { h200, h400, h600, h800 } from '@atlaskit/theme/typography';
|
|
5
|
+
import { token } from '@atlaskit/tokens';
|
|
6
|
+
import { css, jsx } from '@emotion/core';
|
|
7
|
+
import { SmartLinkSize, SmartLinkTheme } from '../../../../../constants';
|
|
8
|
+
const DEFAULT_MAX_LINES = 2;
|
|
9
|
+
const MAXIMUM_MAX_LINES = 2;
|
|
10
|
+
const MINIMUM_MAX_LINES = 1;
|
|
11
|
+
|
|
12
|
+
const getSizeStyles = size => {
|
|
13
|
+
const overrides = {
|
|
14
|
+
marginTop: 'unset'
|
|
15
|
+
};
|
|
16
|
+
|
|
17
|
+
switch (size) {
|
|
18
|
+
case SmartLinkSize.XLarge:
|
|
19
|
+
return { ...h800(),
|
|
20
|
+
...overrides
|
|
21
|
+
};
|
|
22
|
+
|
|
23
|
+
case SmartLinkSize.Large:
|
|
24
|
+
return { ...h600(),
|
|
25
|
+
...overrides
|
|
26
|
+
};
|
|
27
|
+
|
|
28
|
+
case SmartLinkSize.Medium:
|
|
29
|
+
return { ...h400(),
|
|
30
|
+
...overrides
|
|
31
|
+
};
|
|
32
|
+
|
|
33
|
+
case SmartLinkSize.Small:
|
|
34
|
+
default:
|
|
35
|
+
return { ...h200(),
|
|
36
|
+
...overrides
|
|
37
|
+
};
|
|
38
|
+
}
|
|
39
|
+
};
|
|
40
|
+
|
|
41
|
+
const getThemeStyles = theme => {
|
|
42
|
+
switch (theme) {
|
|
43
|
+
case SmartLinkTheme.Black:
|
|
44
|
+
return {
|
|
45
|
+
color: token('color.text.subtle', N800),
|
|
46
|
+
fontWeight: 500,
|
|
47
|
+
':active': {
|
|
48
|
+
color: token('color.text', N900)
|
|
49
|
+
},
|
|
50
|
+
':hover': {
|
|
51
|
+
color: token('color.text.subtle', N800),
|
|
52
|
+
textDecoration: 'underline'
|
|
53
|
+
}
|
|
54
|
+
};
|
|
55
|
+
|
|
56
|
+
case SmartLinkTheme.Link:
|
|
57
|
+
default:
|
|
58
|
+
return {
|
|
59
|
+
color: token('color.link', B400),
|
|
60
|
+
':active': {
|
|
61
|
+
color: token('color.link.pressed', B500)
|
|
62
|
+
},
|
|
63
|
+
':hover': {
|
|
64
|
+
color: token('color.link', B400),
|
|
65
|
+
textDecoration: 'underline'
|
|
66
|
+
}
|
|
67
|
+
};
|
|
68
|
+
}
|
|
69
|
+
};
|
|
70
|
+
|
|
71
|
+
const getTruncateStyles = (maxLines, lineHeight = 16) => ({
|
|
72
|
+
display: '-webkit-box',
|
|
73
|
+
flex: '1 1 auto',
|
|
74
|
+
overflow: 'hidden',
|
|
75
|
+
textOverflow: 'ellipsis',
|
|
76
|
+
wordBreak: 'break-word',
|
|
77
|
+
WebkitLineClamp: maxLines,
|
|
78
|
+
WebkitBoxOrient: 'vertical',
|
|
79
|
+
// Fallback options.
|
|
80
|
+
maxHeight: `${(maxLines * lineHeight).toFixed(3)}em`
|
|
81
|
+
});
|
|
82
|
+
|
|
83
|
+
const getStyles = (size, theme, maxLines) => {
|
|
84
|
+
const sizeStyles = getSizeStyles(size);
|
|
85
|
+
return css({ ...sizeStyles,
|
|
86
|
+
...getTruncateStyles(maxLines, sizeStyles === null || sizeStyles === void 0 ? void 0 : sizeStyles.lineHeight),
|
|
87
|
+
// Theme should be last to be spread because it contains override values
|
|
88
|
+
...getThemeStyles(theme)
|
|
89
|
+
});
|
|
90
|
+
};
|
|
91
|
+
|
|
92
|
+
const getMaxLines = maxLines => {
|
|
93
|
+
if (maxLines > MAXIMUM_MAX_LINES) {
|
|
94
|
+
return DEFAULT_MAX_LINES;
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
if (maxLines < MINIMUM_MAX_LINES) {
|
|
98
|
+
return MINIMUM_MAX_LINES;
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
return maxLines;
|
|
102
|
+
};
|
|
103
|
+
|
|
104
|
+
const Link = ({
|
|
105
|
+
maxLines = DEFAULT_MAX_LINES,
|
|
106
|
+
size = SmartLinkSize.Medium,
|
|
107
|
+
testId = 'smart-element-link',
|
|
108
|
+
text,
|
|
109
|
+
theme = SmartLinkTheme.Link,
|
|
110
|
+
url
|
|
111
|
+
}) => jsx("a", {
|
|
112
|
+
css: getStyles(size, theme, getMaxLines(maxLines)),
|
|
113
|
+
href: url,
|
|
114
|
+
"data-smart-element-link": true,
|
|
115
|
+
"data-testid": testId
|
|
116
|
+
}, text);
|
|
117
|
+
|
|
118
|
+
export default Link;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
package/dist/esm/client/api.js
CHANGED
|
@@ -1,15 +1,16 @@
|
|
|
1
1
|
import _regeneratorRuntime from "@babel/runtime/regenerator";
|
|
2
2
|
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
3
3
|
import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
|
|
4
|
+
import _createClass from "@babel/runtime/helpers/createClass";
|
|
4
5
|
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
|
|
5
6
|
import _inherits from "@babel/runtime/helpers/inherits";
|
|
6
7
|
import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
|
|
7
8
|
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
|
|
8
9
|
import _wrapNativeSuper from "@babel/runtime/helpers/wrapNativeSuper";
|
|
9
10
|
|
|
10
|
-
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object);
|
|
11
|
+
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
11
12
|
|
|
12
|
-
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]
|
|
13
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
13
14
|
|
|
14
15
|
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
15
16
|
|
|
@@ -27,7 +28,7 @@ export var NetworkError = /*#__PURE__*/function (_Error) {
|
|
|
27
28
|
return _super.call(this, error);
|
|
28
29
|
}
|
|
29
30
|
|
|
30
|
-
return NetworkError;
|
|
31
|
+
return _createClass(NetworkError);
|
|
31
32
|
}( /*#__PURE__*/_wrapNativeSuper(Error));
|
|
32
33
|
export function request(_x, _x2, _x3, _x4) {
|
|
33
34
|
return _request.apply(this, arguments);
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import _createClass from "@babel/runtime/helpers/createClass";
|
|
1
2
|
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
|
|
2
3
|
import _inherits from "@babel/runtime/helpers/inherits";
|
|
3
4
|
import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
|
|
@@ -35,5 +36,5 @@ export var APIError = /*#__PURE__*/function (_Error) {
|
|
|
35
36
|
return _this;
|
|
36
37
|
}
|
|
37
38
|
|
|
38
|
-
return APIError;
|
|
39
|
+
return _createClass(APIError);
|
|
39
40
|
}( /*#__PURE__*/_wrapNativeSuper(Error));
|