@atlaskit/help-layout 4.2.13 → 4.2.15
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 +12 -0
- package/dist/cjs/analytics.js +1 -1
- package/dist/cjs/components/Header/BackButton.js +1 -1
- package/dist/cjs/components/Header/CloseButton.js +2 -1
- package/dist/cjs/components/Header/styled.js +34 -11
- package/dist/cjs/components/HelpLayoutContent.js +1 -1
- package/dist/cjs/components/styled.js +49 -11
- package/dist/cjs/messages.js +5 -0
- package/dist/es2019/analytics.js +1 -1
- package/dist/es2019/components/Header/BackButton.js +1 -1
- package/dist/es2019/components/Header/CloseButton.js +2 -1
- package/dist/es2019/components/Header/styled.js +32 -37
- package/dist/es2019/components/HelpLayoutContent.js +1 -1
- package/dist/es2019/components/styled.js +47 -46
- package/dist/es2019/messages.js +5 -0
- package/dist/esm/analytics.js +1 -1
- package/dist/esm/components/Header/BackButton.js +1 -1
- package/dist/esm/components/Header/CloseButton.js +2 -1
- package/dist/esm/components/Header/styled.js +32 -10
- package/dist/esm/components/HelpLayoutContent.js +1 -1
- package/dist/esm/components/styled.js +49 -11
- package/dist/esm/messages.js +5 -0
- package/dist/types/messages.d.ts +5 -0
- package/dist/types-ts4.5/messages.d.ts +5 -0
- package/docs/0-intro.tsx +3 -18
- package/package.json +6 -6
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,17 @@
|
|
|
1
1
|
# @atlaskit/help-layout
|
|
2
2
|
|
|
3
|
+
## 4.2.15
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [#77102](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/77102) [`b93a56e5ee66`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/b93a56e5ee66) - Internal change to enforce token usage for spacing properties. There is no expected visual or behaviour change.
|
|
8
|
+
|
|
9
|
+
## 4.2.14
|
|
10
|
+
|
|
11
|
+
### Patch Changes
|
|
12
|
+
|
|
13
|
+
- [#72218](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/72218) [`de9ef5e93a22`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/de9ef5e93a22) - [ux] Add accessible label to close button for help panel
|
|
14
|
+
|
|
3
15
|
## 4.2.13
|
|
4
16
|
|
|
5
17
|
### Patch Changes
|
package/dist/cjs/analytics.js
CHANGED
|
@@ -14,5 +14,5 @@ var createAndFire = exports.createAndFire = x.createAndFireEvent('atlaskit');
|
|
|
14
14
|
var defaultAnalyticsAttributes = exports.defaultAnalyticsAttributes = {
|
|
15
15
|
componentName: 'helpPanel',
|
|
16
16
|
packageName: "@atlaskit/help-layout",
|
|
17
|
-
packageVersion: "4.2.
|
|
17
|
+
packageVersion: "4.2.15"
|
|
18
18
|
};
|
|
@@ -75,7 +75,7 @@ var BackButtonWithContext = function BackButtonWithContext(props) {
|
|
|
75
75
|
data: {
|
|
76
76
|
componentName: 'backButton',
|
|
77
77
|
packageName: "@atlaskit/help-layout",
|
|
78
|
-
packageVersion: "4.2.
|
|
78
|
+
packageVersion: "4.2.15"
|
|
79
79
|
}
|
|
80
80
|
}, /*#__PURE__*/_react.default.createElement(BackButton, props));
|
|
81
81
|
};
|
|
@@ -38,6 +38,7 @@ var CloseButton = exports.CloseButton = function CloseButton(_ref) {
|
|
|
38
38
|
}, /*#__PURE__*/_react.default.createElement(_standardButton.default, {
|
|
39
39
|
onClick: handleOnClick,
|
|
40
40
|
appearance: "subtle",
|
|
41
|
+
"aria-label": formatMessage(_messages.messages.help_panel_header_close_button),
|
|
41
42
|
iconBefore: /*#__PURE__*/_react.default.createElement(_close.default, {
|
|
42
43
|
label: formatMessage(_messages.messages.help_panel_header_close),
|
|
43
44
|
size: "medium"
|
|
@@ -49,7 +50,7 @@ var CloseButtonWithContext = function CloseButtonWithContext(props) {
|
|
|
49
50
|
data: {
|
|
50
51
|
componentName: 'closeButton',
|
|
51
52
|
packageName: "@atlaskit/help-layout",
|
|
52
|
-
packageVersion: "4.2.
|
|
53
|
+
packageVersion: "4.2.15"
|
|
53
54
|
}
|
|
54
55
|
}, /*#__PURE__*/_react.default.createElement(CloseButton, props));
|
|
55
56
|
};
|
|
@@ -6,18 +6,41 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
value: true
|
|
7
7
|
});
|
|
8
8
|
exports.HeaderTitle = exports.HeaderContent = exports.HeaderContainer = exports.CloseButtonContainer = exports.BackButtonContainer = void 0;
|
|
9
|
-
var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
|
|
10
9
|
var _styled = _interopRequireDefault(require("@emotion/styled"));
|
|
11
|
-
var _constants = require("@atlaskit/theme/constants");
|
|
12
10
|
var colors = _interopRequireWildcard(require("@atlaskit/theme/colors"));
|
|
13
|
-
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
|
|
14
|
-
/** @jsx jsx */
|
|
15
11
|
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
12
|
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
|
-
|
|
18
|
-
|
|
19
|
-
var HeaderContainer = exports.HeaderContainer = _styled.default.div(
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
13
|
+
/** @jsx jsx */
|
|
14
|
+
|
|
15
|
+
var HeaderContainer = exports.HeaderContainer = _styled.default.div({
|
|
16
|
+
backgroundColor: "var(--ds-background-neutral, ".concat(colors.N10, ")"),
|
|
17
|
+
borderBottom: "var(--ds-space-025, 2px)".concat(" solid ", "var(--ds-border, ".concat(colors.N30, ")")),
|
|
18
|
+
justifyContent: 'space-between',
|
|
19
|
+
position: 'relative'
|
|
20
|
+
});
|
|
21
|
+
var CloseButtonContainer = exports.CloseButtonContainer = _styled.default.div({
|
|
22
|
+
position: 'absolute',
|
|
23
|
+
right: "var(--ds-space-100, 8px)",
|
|
24
|
+
top: "var(--ds-space-150, 12px)"
|
|
25
|
+
});
|
|
26
|
+
var BackButtonContainer = exports.BackButtonContainer = _styled.default.div({
|
|
27
|
+
position: 'absolute',
|
|
28
|
+
top: "var(--ds-space-150, 12px)",
|
|
29
|
+
left: "var(--ds-space-100, 8px)"
|
|
30
|
+
});
|
|
31
|
+
var HeaderTitle = exports.HeaderTitle = _styled.default.div({
|
|
32
|
+
color: "var(--ds-text-subtle, ".concat(colors.N500, ")"),
|
|
33
|
+
textAlign: 'center',
|
|
34
|
+
fontSize: '1rem',
|
|
35
|
+
fontWeight: 600,
|
|
36
|
+
lineHeight: "var(--ds-space-800, 56px)",
|
|
37
|
+
width: '100%',
|
|
38
|
+
whiteSpace: 'nowrap',
|
|
39
|
+
textOverflow: 'ellipsis',
|
|
40
|
+
display: 'inline-block',
|
|
41
|
+
overflow: 'hidden',
|
|
42
|
+
verticalAlign: 'middle'
|
|
43
|
+
});
|
|
44
|
+
var HeaderContent = exports.HeaderContent = _styled.default.div({
|
|
45
|
+
padding: "0 ".concat("var(--ds-space-200, 16px)", " ", "var(--ds-space-200, 16px)", " ", "var(--ds-space-200, 16px)")
|
|
46
|
+
});
|
|
@@ -23,7 +23,7 @@ var HelpContent = exports.HelpContent = function HelpContent(props) {
|
|
|
23
23
|
"aria-label": formatMessage(_messages.messages.help_loading),
|
|
24
24
|
role: "img"
|
|
25
25
|
}, /*#__PURE__*/_react.default.createElement(_styled.LoadingRectangle, {
|
|
26
|
-
contentHeight: "20px",
|
|
26
|
+
contentHeight: "var(--ds-space-250, 20px)",
|
|
27
27
|
marginTop: "0"
|
|
28
28
|
}), /*#__PURE__*/_react.default.createElement(_styled.LoadingRectangle, {
|
|
29
29
|
contentWidth: "90%"
|
|
@@ -10,26 +10,64 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
|
|
|
10
10
|
var _react = require("@emotion/react");
|
|
11
11
|
var _styled = _interopRequireDefault(require("@emotion/styled"));
|
|
12
12
|
var colors = _interopRequireWildcard(require("@atlaskit/theme/colors"));
|
|
13
|
-
var _templateObject
|
|
13
|
+
var _templateObject;
|
|
14
|
+
/* eslint-disable @atlaskit/design-system/no-exported-keyframes */
|
|
15
|
+
/* eslint-disable @atlaskit/design-system/no-styled-tagged-template-expression */
|
|
14
16
|
/** @jsx jsx */
|
|
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
|
-
var Container = exports.Container = _styled.default.div(
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
19
|
+
var Container = exports.Container = _styled.default.div({
|
|
20
|
+
position: 'absolute',
|
|
21
|
+
top: 0,
|
|
22
|
+
bottom: 0,
|
|
23
|
+
left: 0,
|
|
24
|
+
width: '100%',
|
|
25
|
+
display: 'flex',
|
|
26
|
+
flexDirection: 'column',
|
|
27
|
+
backgroundColor: "var(--ds-surface, #FFFFFF)"
|
|
28
|
+
});
|
|
29
|
+
var Section = exports.Section = _styled.default.div({
|
|
30
|
+
flexGrow: 1,
|
|
31
|
+
display: 'flex',
|
|
32
|
+
flexDirection: 'column',
|
|
33
|
+
minHeight: 0
|
|
34
|
+
});
|
|
35
|
+
var DividerLine = exports.DividerLine = _styled.default.div({
|
|
36
|
+
backgroundColor: "var(--ds-border, ".concat(colors.N30A, ")"),
|
|
37
|
+
height: "var(--ds-space-025, 2px)",
|
|
38
|
+
width: '100%',
|
|
39
|
+
padding: "0 ".concat("var(--ds-space-200, 16px)"),
|
|
40
|
+
marginTop: "var(--ds-space-200, 16px)",
|
|
41
|
+
boxSizing: 'border-box'
|
|
42
|
+
});
|
|
43
|
+
var HelpFooter = exports.HelpFooter = _styled.default.div({
|
|
44
|
+
padding: "var(--ds-space-100, 8px)".concat(" 0"),
|
|
45
|
+
boxSizing: 'border-box',
|
|
46
|
+
backgroundColor: "var(--ds-background-neutral, ".concat(colors.N10, ")"),
|
|
47
|
+
borderTop: "var(--ds-space-025, 2px)".concat(" solid ", "var(--ds-border, ".concat(colors.N30, ")")),
|
|
48
|
+
justifyContent: 'space-between'
|
|
49
|
+
});
|
|
22
50
|
|
|
23
51
|
/**
|
|
24
52
|
* Loading
|
|
25
53
|
*/
|
|
26
54
|
|
|
27
|
-
var LoadingContainer = exports.LoadingContainer = _styled.default.div(
|
|
28
|
-
var
|
|
29
|
-
|
|
30
|
-
|
|
55
|
+
var LoadingContainer = exports.LoadingContainer = _styled.default.div({
|
|
56
|
+
padding: "var(--ds-space-200, 16px)",
|
|
57
|
+
height: '100%'
|
|
58
|
+
});
|
|
59
|
+
var shimmer = (0, _react.keyframes)({
|
|
60
|
+
'0%': {
|
|
61
|
+
backgroundPosition: '-300px 0'
|
|
62
|
+
},
|
|
63
|
+
'100%': {
|
|
64
|
+
backgroundPosition: '1000px 0'
|
|
65
|
+
}
|
|
66
|
+
});
|
|
67
|
+
var LoadingRectangle = exports.LoadingRectangle = _styled.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n position: relative;\n height: ", ";\n margin-top: ", ";\n width: ", ";\n border-radius: ", ";\n animation-duration: 1.2s;\n animation-fill-mode: forwards;\n animation-iteration-count: infinite;\n animation-name: ", ";\n animation-timing-function: linear;\n background-color: ", ";\n background-image: linear-gradient(\n to right,\n ", " 10%,\n ", " 20%,\n ", " 30%\n );\n background-repeat: no-repeat;\n"])), function (props) {
|
|
68
|
+
return props.contentHeight ? props.contentHeight : "var(--ds-space-200, 1rem)";
|
|
31
69
|
}, function (props) {
|
|
32
70
|
return props.marginTop ? props.marginTop : "var(--ds-space-100, 8px)";
|
|
33
71
|
}, function (props) {
|
|
34
72
|
return props.contentWidth ? props.contentWidth : '100%';
|
|
35
|
-
}, shimmer, "var(--ds-background-neutral, ".concat(colors.N30, ")"), "var(--ds-background-neutral-subtle, ".concat(colors.N30, ")"), "var(--ds-background-neutral, ".concat(colors.N40, ")"), "var(--ds-background-neutral-subtle, ".concat(colors.N30, ")"));
|
|
73
|
+
}, "var(--ds-space-025, 2px)", shimmer, "var(--ds-background-neutral, ".concat(colors.N30, ")"), "var(--ds-background-neutral-subtle, ".concat(colors.N30, ")"), "var(--ds-background-neutral, ".concat(colors.N40, ")"), "var(--ds-background-neutral-subtle, ".concat(colors.N30, ")"));
|
package/dist/cjs/messages.js
CHANGED
|
@@ -25,5 +25,10 @@ var messages = exports.messages = (0, _reactIntlNext.defineMessages)({
|
|
|
25
25
|
id: 'helpPanel.header.close',
|
|
26
26
|
defaultMessage: 'Close',
|
|
27
27
|
description: ''
|
|
28
|
+
},
|
|
29
|
+
help_panel_header_close_button: {
|
|
30
|
+
id: 'helpPanel.header.close.button',
|
|
31
|
+
defaultMessage: 'Close Help Panel',
|
|
32
|
+
description: ''
|
|
28
33
|
}
|
|
29
34
|
});
|
package/dist/es2019/analytics.js
CHANGED
|
@@ -35,6 +35,7 @@ export const CloseButton = ({
|
|
|
35
35
|
}, /*#__PURE__*/React.createElement(Button, {
|
|
36
36
|
onClick: handleOnClick,
|
|
37
37
|
appearance: "subtle",
|
|
38
|
+
"aria-label": formatMessage(messages.help_panel_header_close_button),
|
|
38
39
|
iconBefore: /*#__PURE__*/React.createElement(EditorCloseIcon, {
|
|
39
40
|
label: formatMessage(messages.help_panel_header_close),
|
|
40
41
|
size: "medium"
|
|
@@ -46,7 +47,7 @@ const CloseButtonWithContext = props => {
|
|
|
46
47
|
data: {
|
|
47
48
|
componentName: 'closeButton',
|
|
48
49
|
packageName: "@atlaskit/help-layout",
|
|
49
|
-
packageVersion: "4.2.
|
|
50
|
+
packageVersion: "4.2.15"
|
|
50
51
|
}
|
|
51
52
|
}, /*#__PURE__*/React.createElement(CloseButton, props));
|
|
52
53
|
};
|
|
@@ -1,40 +1,35 @@
|
|
|
1
1
|
/** @jsx jsx */
|
|
2
2
|
import styled from '@emotion/styled';
|
|
3
|
-
import { gridSize } from '@atlaskit/theme/constants';
|
|
4
3
|
import * as colors from '@atlaskit/theme/colors';
|
|
5
|
-
const
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
position:
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
export const HeaderContent = styled.div`
|
|
38
|
-
padding: 0 ${"var(--ds-space-200, 16px)"} ${"var(--ds-space-200, 16px)"}
|
|
39
|
-
${"var(--ds-space-200, 16px)"};
|
|
40
|
-
`;
|
|
4
|
+
export const HeaderContainer = styled.div({
|
|
5
|
+
backgroundColor: `var(--ds-background-neutral, ${colors.N10})`,
|
|
6
|
+
borderBottom: `${"var(--ds-space-025, 2px)"} solid ${`var(--ds-border, ${colors.N30})`}`,
|
|
7
|
+
justifyContent: 'space-between',
|
|
8
|
+
position: 'relative'
|
|
9
|
+
});
|
|
10
|
+
export const CloseButtonContainer = styled.div({
|
|
11
|
+
position: 'absolute',
|
|
12
|
+
right: "var(--ds-space-100, 8px)",
|
|
13
|
+
top: "var(--ds-space-150, 12px)"
|
|
14
|
+
});
|
|
15
|
+
export const BackButtonContainer = styled.div({
|
|
16
|
+
position: 'absolute',
|
|
17
|
+
top: "var(--ds-space-150, 12px)",
|
|
18
|
+
left: "var(--ds-space-100, 8px)"
|
|
19
|
+
});
|
|
20
|
+
export const HeaderTitle = styled.div({
|
|
21
|
+
color: `var(--ds-text-subtle, ${colors.N500})`,
|
|
22
|
+
textAlign: 'center',
|
|
23
|
+
fontSize: '1rem',
|
|
24
|
+
fontWeight: 600,
|
|
25
|
+
lineHeight: "var(--ds-space-800, 56px)",
|
|
26
|
+
width: '100%',
|
|
27
|
+
whiteSpace: 'nowrap',
|
|
28
|
+
textOverflow: 'ellipsis',
|
|
29
|
+
display: 'inline-block',
|
|
30
|
+
overflow: 'hidden',
|
|
31
|
+
verticalAlign: 'middle'
|
|
32
|
+
});
|
|
33
|
+
export const HeaderContent = styled.div({
|
|
34
|
+
padding: `0 ${"var(--ds-space-200, 16px)"} ${"var(--ds-space-200, 16px)"} ${"var(--ds-space-200, 16px)"}`
|
|
35
|
+
});
|
|
@@ -17,7 +17,7 @@ export const HelpContent = props => {
|
|
|
17
17
|
"aria-label": formatMessage(messages.help_loading),
|
|
18
18
|
role: "img"
|
|
19
19
|
}, /*#__PURE__*/React.createElement(LoadingRectangle, {
|
|
20
|
-
contentHeight: "20px",
|
|
20
|
+
contentHeight: "var(--ds-space-250, 20px)",
|
|
21
21
|
marginTop: "0"
|
|
22
22
|
}), /*#__PURE__*/React.createElement(LoadingRectangle, {
|
|
23
23
|
contentWidth: "90%"
|
|
@@ -1,63 +1,64 @@
|
|
|
1
|
+
/* eslint-disable @atlaskit/design-system/no-exported-keyframes */
|
|
2
|
+
/* eslint-disable @atlaskit/design-system/no-styled-tagged-template-expression */
|
|
1
3
|
/** @jsx jsx */
|
|
2
4
|
|
|
3
5
|
import { keyframes } from '@emotion/react';
|
|
4
6
|
import styled from '@emotion/styled';
|
|
5
7
|
import * as colors from '@atlaskit/theme/colors';
|
|
6
|
-
export const Container = styled.div
|
|
7
|
-
position: absolute
|
|
8
|
-
top: 0
|
|
9
|
-
bottom: 0
|
|
10
|
-
left: 0
|
|
11
|
-
width: 100
|
|
12
|
-
display: flex
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
export const Section = styled.div
|
|
17
|
-
|
|
18
|
-
display: flex
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
export const DividerLine = styled.div
|
|
23
|
-
|
|
24
|
-
height: 2px
|
|
25
|
-
width: 100
|
|
26
|
-
padding: 0 ${"var(--ds-space-200, 16px)"}
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
const
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
`;
|
|
8
|
+
export const Container = styled.div({
|
|
9
|
+
position: 'absolute',
|
|
10
|
+
top: 0,
|
|
11
|
+
bottom: 0,
|
|
12
|
+
left: 0,
|
|
13
|
+
width: '100%',
|
|
14
|
+
display: 'flex',
|
|
15
|
+
flexDirection: 'column',
|
|
16
|
+
backgroundColor: "var(--ds-surface, #FFFFFF)"
|
|
17
|
+
});
|
|
18
|
+
export const Section = styled.div({
|
|
19
|
+
flexGrow: 1,
|
|
20
|
+
display: 'flex',
|
|
21
|
+
flexDirection: 'column',
|
|
22
|
+
minHeight: 0
|
|
23
|
+
});
|
|
24
|
+
export const DividerLine = styled.div({
|
|
25
|
+
backgroundColor: `var(--ds-border, ${colors.N30A})`,
|
|
26
|
+
height: "var(--ds-space-025, 2px)",
|
|
27
|
+
width: '100%',
|
|
28
|
+
padding: `0 ${"var(--ds-space-200, 16px)"}`,
|
|
29
|
+
marginTop: "var(--ds-space-200, 16px)",
|
|
30
|
+
boxSizing: 'border-box'
|
|
31
|
+
});
|
|
32
|
+
export const HelpFooter = styled.div({
|
|
33
|
+
padding: `${"var(--ds-space-100, 8px)"} 0`,
|
|
34
|
+
boxSizing: 'border-box',
|
|
35
|
+
backgroundColor: `var(--ds-background-neutral, ${colors.N10})`,
|
|
36
|
+
borderTop: `${"var(--ds-space-025, 2px)"} solid ${`var(--ds-border, ${colors.N30})`}`,
|
|
37
|
+
justifyContent: 'space-between'
|
|
38
|
+
});
|
|
38
39
|
|
|
39
40
|
/**
|
|
40
41
|
* Loading
|
|
41
42
|
*/
|
|
42
43
|
|
|
43
|
-
export const LoadingContainer = styled.div
|
|
44
|
-
padding:
|
|
45
|
-
height: 100
|
|
46
|
-
|
|
47
|
-
const shimmer = keyframes
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
44
|
+
export const LoadingContainer = styled.div({
|
|
45
|
+
padding: "var(--ds-space-200, 16px)",
|
|
46
|
+
height: '100%'
|
|
47
|
+
});
|
|
48
|
+
const shimmer = keyframes({
|
|
49
|
+
'0%': {
|
|
50
|
+
backgroundPosition: '-300px 0'
|
|
51
|
+
},
|
|
52
|
+
'100%': {
|
|
53
|
+
backgroundPosition: '1000px 0'
|
|
54
|
+
}
|
|
55
|
+
});
|
|
55
56
|
export const LoadingRectangle = styled.div`
|
|
56
57
|
position: relative;
|
|
57
|
-
height: ${props => props.contentHeight ? props.contentHeight :
|
|
58
|
+
height: ${props => props.contentHeight ? props.contentHeight : "var(--ds-space-200, 1rem)"};
|
|
58
59
|
margin-top: ${props => props.marginTop ? props.marginTop : "var(--ds-space-100, 8px)"};
|
|
59
60
|
width: ${props => props.contentWidth ? props.contentWidth : '100%'};
|
|
60
|
-
border-radius: 2px;
|
|
61
|
+
border-radius: ${"var(--ds-space-025, 2px)"};
|
|
61
62
|
animation-duration: 1.2s;
|
|
62
63
|
animation-fill-mode: forwards;
|
|
63
64
|
animation-iteration-count: infinite;
|
package/dist/es2019/messages.js
CHANGED
|
@@ -19,5 +19,10 @@ export const messages = defineMessages({
|
|
|
19
19
|
id: 'helpPanel.header.close',
|
|
20
20
|
defaultMessage: 'Close',
|
|
21
21
|
description: ''
|
|
22
|
+
},
|
|
23
|
+
help_panel_header_close_button: {
|
|
24
|
+
id: 'helpPanel.header.close.button',
|
|
25
|
+
defaultMessage: 'Close Help Panel',
|
|
26
|
+
description: ''
|
|
22
27
|
}
|
|
23
28
|
});
|
package/dist/esm/analytics.js
CHANGED
|
@@ -68,7 +68,7 @@ var BackButtonWithContext = function BackButtonWithContext(props) {
|
|
|
68
68
|
data: {
|
|
69
69
|
componentName: 'backButton',
|
|
70
70
|
packageName: "@atlaskit/help-layout",
|
|
71
|
-
packageVersion: "4.2.
|
|
71
|
+
packageVersion: "4.2.15"
|
|
72
72
|
}
|
|
73
73
|
}, /*#__PURE__*/React.createElement(BackButton, props));
|
|
74
74
|
};
|
|
@@ -31,6 +31,7 @@ export var CloseButton = function CloseButton(_ref) {
|
|
|
31
31
|
}, /*#__PURE__*/React.createElement(Button, {
|
|
32
32
|
onClick: handleOnClick,
|
|
33
33
|
appearance: "subtle",
|
|
34
|
+
"aria-label": formatMessage(messages.help_panel_header_close_button),
|
|
34
35
|
iconBefore: /*#__PURE__*/React.createElement(EditorCloseIcon, {
|
|
35
36
|
label: formatMessage(messages.help_panel_header_close),
|
|
36
37
|
size: "medium"
|
|
@@ -42,7 +43,7 @@ var CloseButtonWithContext = function CloseButtonWithContext(props) {
|
|
|
42
43
|
data: {
|
|
43
44
|
componentName: 'closeButton',
|
|
44
45
|
packageName: "@atlaskit/help-layout",
|
|
45
|
-
packageVersion: "4.2.
|
|
46
|
+
packageVersion: "4.2.15"
|
|
46
47
|
}
|
|
47
48
|
}, /*#__PURE__*/React.createElement(CloseButton, props));
|
|
48
49
|
};
|
|
@@ -1,13 +1,35 @@
|
|
|
1
|
-
import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
|
|
2
|
-
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
|
|
3
1
|
/** @jsx jsx */
|
|
4
2
|
import styled from '@emotion/styled';
|
|
5
|
-
import { gridSize } from '@atlaskit/theme/constants';
|
|
6
3
|
import * as colors from '@atlaskit/theme/colors';
|
|
7
|
-
var
|
|
8
|
-
var
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
export var
|
|
4
|
+
export var HeaderContainer = styled.div({
|
|
5
|
+
backgroundColor: "var(--ds-background-neutral, ".concat(colors.N10, ")"),
|
|
6
|
+
borderBottom: "var(--ds-space-025, 2px)".concat(" solid ", "var(--ds-border, ".concat(colors.N30, ")")),
|
|
7
|
+
justifyContent: 'space-between',
|
|
8
|
+
position: 'relative'
|
|
9
|
+
});
|
|
10
|
+
export var CloseButtonContainer = styled.div({
|
|
11
|
+
position: 'absolute',
|
|
12
|
+
right: "var(--ds-space-100, 8px)",
|
|
13
|
+
top: "var(--ds-space-150, 12px)"
|
|
14
|
+
});
|
|
15
|
+
export var BackButtonContainer = styled.div({
|
|
16
|
+
position: 'absolute',
|
|
17
|
+
top: "var(--ds-space-150, 12px)",
|
|
18
|
+
left: "var(--ds-space-100, 8px)"
|
|
19
|
+
});
|
|
20
|
+
export var HeaderTitle = styled.div({
|
|
21
|
+
color: "var(--ds-text-subtle, ".concat(colors.N500, ")"),
|
|
22
|
+
textAlign: 'center',
|
|
23
|
+
fontSize: '1rem',
|
|
24
|
+
fontWeight: 600,
|
|
25
|
+
lineHeight: "var(--ds-space-800, 56px)",
|
|
26
|
+
width: '100%',
|
|
27
|
+
whiteSpace: 'nowrap',
|
|
28
|
+
textOverflow: 'ellipsis',
|
|
29
|
+
display: 'inline-block',
|
|
30
|
+
overflow: 'hidden',
|
|
31
|
+
verticalAlign: 'middle'
|
|
32
|
+
});
|
|
33
|
+
export var HeaderContent = styled.div({
|
|
34
|
+
padding: "0 ".concat("var(--ds-space-200, 16px)", " ", "var(--ds-space-200, 16px)", " ", "var(--ds-space-200, 16px)")
|
|
35
|
+
});
|
|
@@ -16,7 +16,7 @@ export var HelpContent = function HelpContent(props) {
|
|
|
16
16
|
"aria-label": formatMessage(messages.help_loading),
|
|
17
17
|
role: "img"
|
|
18
18
|
}, /*#__PURE__*/React.createElement(LoadingRectangle, {
|
|
19
|
-
contentHeight: "20px",
|
|
19
|
+
contentHeight: "var(--ds-space-250, 20px)",
|
|
20
20
|
marginTop: "0"
|
|
21
21
|
}), /*#__PURE__*/React.createElement(LoadingRectangle, {
|
|
22
22
|
contentWidth: "90%"
|
|
@@ -1,26 +1,64 @@
|
|
|
1
1
|
import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
|
|
2
|
-
var _templateObject
|
|
2
|
+
var _templateObject;
|
|
3
|
+
/* eslint-disable @atlaskit/design-system/no-exported-keyframes */
|
|
4
|
+
/* eslint-disable @atlaskit/design-system/no-styled-tagged-template-expression */
|
|
3
5
|
/** @jsx jsx */
|
|
4
6
|
|
|
5
7
|
import { keyframes } from '@emotion/react';
|
|
6
8
|
import styled from '@emotion/styled';
|
|
7
9
|
import * as colors from '@atlaskit/theme/colors';
|
|
8
|
-
export var Container = styled.div(
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
10
|
+
export var Container = styled.div({
|
|
11
|
+
position: 'absolute',
|
|
12
|
+
top: 0,
|
|
13
|
+
bottom: 0,
|
|
14
|
+
left: 0,
|
|
15
|
+
width: '100%',
|
|
16
|
+
display: 'flex',
|
|
17
|
+
flexDirection: 'column',
|
|
18
|
+
backgroundColor: "var(--ds-surface, #FFFFFF)"
|
|
19
|
+
});
|
|
20
|
+
export var Section = styled.div({
|
|
21
|
+
flexGrow: 1,
|
|
22
|
+
display: 'flex',
|
|
23
|
+
flexDirection: 'column',
|
|
24
|
+
minHeight: 0
|
|
25
|
+
});
|
|
26
|
+
export var DividerLine = styled.div({
|
|
27
|
+
backgroundColor: "var(--ds-border, ".concat(colors.N30A, ")"),
|
|
28
|
+
height: "var(--ds-space-025, 2px)",
|
|
29
|
+
width: '100%',
|
|
30
|
+
padding: "0 ".concat("var(--ds-space-200, 16px)"),
|
|
31
|
+
marginTop: "var(--ds-space-200, 16px)",
|
|
32
|
+
boxSizing: 'border-box'
|
|
33
|
+
});
|
|
34
|
+
export var HelpFooter = styled.div({
|
|
35
|
+
padding: "var(--ds-space-100, 8px)".concat(" 0"),
|
|
36
|
+
boxSizing: 'border-box',
|
|
37
|
+
backgroundColor: "var(--ds-background-neutral, ".concat(colors.N10, ")"),
|
|
38
|
+
borderTop: "var(--ds-space-025, 2px)".concat(" solid ", "var(--ds-border, ".concat(colors.N30, ")")),
|
|
39
|
+
justifyContent: 'space-between'
|
|
40
|
+
});
|
|
13
41
|
|
|
14
42
|
/**
|
|
15
43
|
* Loading
|
|
16
44
|
*/
|
|
17
45
|
|
|
18
|
-
export var LoadingContainer = styled.div(
|
|
19
|
-
var
|
|
20
|
-
|
|
21
|
-
|
|
46
|
+
export var LoadingContainer = styled.div({
|
|
47
|
+
padding: "var(--ds-space-200, 16px)",
|
|
48
|
+
height: '100%'
|
|
49
|
+
});
|
|
50
|
+
var shimmer = keyframes({
|
|
51
|
+
'0%': {
|
|
52
|
+
backgroundPosition: '-300px 0'
|
|
53
|
+
},
|
|
54
|
+
'100%': {
|
|
55
|
+
backgroundPosition: '1000px 0'
|
|
56
|
+
}
|
|
57
|
+
});
|
|
58
|
+
export var LoadingRectangle = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n position: relative;\n height: ", ";\n margin-top: ", ";\n width: ", ";\n border-radius: ", ";\n animation-duration: 1.2s;\n animation-fill-mode: forwards;\n animation-iteration-count: infinite;\n animation-name: ", ";\n animation-timing-function: linear;\n background-color: ", ";\n background-image: linear-gradient(\n to right,\n ", " 10%,\n ", " 20%,\n ", " 30%\n );\n background-repeat: no-repeat;\n"])), function (props) {
|
|
59
|
+
return props.contentHeight ? props.contentHeight : "var(--ds-space-200, 1rem)";
|
|
22
60
|
}, function (props) {
|
|
23
61
|
return props.marginTop ? props.marginTop : "var(--ds-space-100, 8px)";
|
|
24
62
|
}, function (props) {
|
|
25
63
|
return props.contentWidth ? props.contentWidth : '100%';
|
|
26
|
-
}, shimmer, "var(--ds-background-neutral, ".concat(colors.N30, ")"), "var(--ds-background-neutral-subtle, ".concat(colors.N30, ")"), "var(--ds-background-neutral, ".concat(colors.N40, ")"), "var(--ds-background-neutral-subtle, ".concat(colors.N30, ")"));
|
|
64
|
+
}, "var(--ds-space-025, 2px)", shimmer, "var(--ds-background-neutral, ".concat(colors.N30, ")"), "var(--ds-background-neutral-subtle, ".concat(colors.N30, ")"), "var(--ds-background-neutral, ".concat(colors.N40, ")"), "var(--ds-background-neutral-subtle, ".concat(colors.N30, ")"));
|
package/dist/esm/messages.js
CHANGED
|
@@ -19,5 +19,10 @@ export var messages = defineMessages({
|
|
|
19
19
|
id: 'helpPanel.header.close',
|
|
20
20
|
defaultMessage: 'Close',
|
|
21
21
|
description: ''
|
|
22
|
+
},
|
|
23
|
+
help_panel_header_close_button: {
|
|
24
|
+
id: 'helpPanel.header.close.button',
|
|
25
|
+
defaultMessage: 'Close Help Panel',
|
|
26
|
+
description: ''
|
|
22
27
|
}
|
|
23
28
|
});
|
package/dist/types/messages.d.ts
CHANGED
package/docs/0-intro.tsx
CHANGED
|
@@ -1,30 +1,15 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import {
|
|
3
|
-
md,
|
|
4
|
-
code,
|
|
5
|
-
Props,
|
|
6
|
-
AtlassianInternalWarning,
|
|
7
|
-
DevPreviewWarning,
|
|
8
|
-
} from '@atlaskit/docs';
|
|
2
|
+
import { md, code, Props, AtlassianInternalWarning } from '@atlaskit/docs';
|
|
9
3
|
|
|
10
4
|
const helpPanelProps = require('!!extract-react-types-loader!../src/components/HelpLayout');
|
|
11
5
|
|
|
12
6
|
export default md`
|
|
13
|
-
${(
|
|
14
|
-
<>
|
|
15
|
-
<div style={{ marginBottom: '0.5rem' }}>
|
|
16
|
-
<AtlassianInternalWarning />
|
|
17
|
-
</div>
|
|
18
|
-
<div style={{ marginTop: '0.5rem' }}>
|
|
19
|
-
<DevPreviewWarning />
|
|
20
|
-
</div>
|
|
21
|
-
</>
|
|
22
|
-
)}
|
|
7
|
+
${(<AtlassianInternalWarning />)}
|
|
23
8
|
|
|
24
9
|
## Usage
|
|
25
10
|
|
|
26
11
|
${code`
|
|
27
|
-
|
|
12
|
+
import React from 'react';
|
|
28
13
|
import { AnalyticsListener } from '@atlaskit/analytics-next';
|
|
29
14
|
import Page from '@atlaskit/page';
|
|
30
15
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/help-layout",
|
|
3
|
-
"version": "4.2.
|
|
3
|
+
"version": "4.2.15",
|
|
4
4
|
"description": "Layout for the atlaskit/help component.",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"registry": "https://registry.npmjs.org/"
|
|
@@ -33,11 +33,11 @@
|
|
|
33
33
|
}
|
|
34
34
|
},
|
|
35
35
|
"dependencies": {
|
|
36
|
-
"@atlaskit/analytics-next": "^9.
|
|
37
|
-
"@atlaskit/button": "^17.
|
|
38
|
-
"@atlaskit/icon": "^22.
|
|
36
|
+
"@atlaskit/analytics-next": "^9.2.0",
|
|
37
|
+
"@atlaskit/button": "^17.6.0",
|
|
38
|
+
"@atlaskit/icon": "^22.1.0",
|
|
39
39
|
"@atlaskit/theme": "^12.6.0",
|
|
40
|
-
"@atlaskit/tokens": "^1.
|
|
40
|
+
"@atlaskit/tokens": "^1.38.0",
|
|
41
41
|
"@atlaskit/tooltip": "^18.1.0",
|
|
42
42
|
"@babel/runtime": "^7.0.0",
|
|
43
43
|
"@emotion/react": "^11.7.1",
|
|
@@ -79,4 +79,4 @@
|
|
|
79
79
|
"./analytics": "./src/analytics.ts",
|
|
80
80
|
"./messages": "./src/messages.ts"
|
|
81
81
|
}
|
|
82
|
-
}
|
|
82
|
+
}
|