@atlaskit/help-layout 4.1.14 → 4.1.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.
Files changed (11) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/dist/cjs/components/Header/styled.js +3 -3
  3. package/dist/cjs/components/styled.js +4 -5
  4. package/dist/cjs/version.json +1 -1
  5. package/dist/es2019/components/Header/styled.js +6 -5
  6. package/dist/es2019/components/styled.js +5 -6
  7. package/dist/es2019/version.json +1 -1
  8. package/dist/esm/components/Header/styled.js +3 -3
  9. package/dist/esm/components/styled.js +4 -5
  10. package/dist/esm/version.json +1 -1
  11. package/package.json +4 -4
package/CHANGELOG.md CHANGED
@@ -1,5 +1,11 @@
1
1
  # @atlaskit/help-layout
2
2
 
3
+ ## 4.1.15
4
+
5
+ ### Patch Changes
6
+
7
+ - [`ad5cbfa5a71`](https://bitbucket.org/atlassian/atlassian-frontend/commits/ad5cbfa5a71) - Migrated use of `gridSize` to space tokens where possible. There is no expected visual or behaviour change.
8
+
3
9
  ## 4.1.14
4
10
 
5
11
  ### Patch Changes
package/dist/cjs/components/Header/styled.js CHANGED
@@ -17,11 +17,11 @@ var HEADER_TITLE_HEIGHT = (0, _constants.gridSize)() * 7;
17
17
  var HEADER_TITLE_BORDER_BOTTOM = 2;
18
18
  var HeaderContainer = _styled.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n background-color: ", ";\n border-bottom: ", "px solid\n ", ";\n justify-content: space-between;\n position: relative;\n"])), "var(--ds-background-neutral, ".concat(colors.N10, ")"), HEADER_TITLE_BORDER_BOTTOM, "var(--ds-border, ".concat(colors.N30, ")"));
19
19
  exports.HeaderContainer = HeaderContainer;
20
- var CloseButtonContainer = _styled.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n position: absolute;\n right: ", "px;\n top: ", "px;\n"])), (0, _constants.gridSize)(), (0, _constants.gridSize)() * 1.5);
20
+ var CloseButtonContainer = _styled.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n position: absolute;\n right: ", ";\n top: ", ";\n"])), "var(--ds-space-100, 8px)", "var(--ds-space-150, 12px)");
21
21
  exports.CloseButtonContainer = CloseButtonContainer;
22
- var BackButtonContainer = _styled.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n position: absolute;\n top: ", "px;\n left: ", "px;\n"])), (0, _constants.gridSize)() * 1.5, (0, _constants.gridSize)());
22
+ var BackButtonContainer = _styled.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n position: absolute;\n top: ", ";\n left: ", ";\n"])), "var(--ds-space-150, 12px)", "var(--ds-space-100, 8px)");
23
23
  exports.BackButtonContainer = BackButtonContainer;
24
24
  var HeaderTitle = _styled.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n color: ", ";\n text-align: center;\n font-size: 1rem;\n font-weight: 600;\n line-height: ", "px;\n width: 100%;\n white-space: nowrap;\n text-overflow: ellipsis;\n display: inline-block;\n overflow: hidden;\n vertical-align: middle;\n"])), "var(--ds-text-subtle, ".concat(colors.N500, ")"), HEADER_TITLE_HEIGHT);
25
25
  exports.HeaderTitle = HeaderTitle;
26
- var HeaderContent = _styled.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n padding: 0 ", "px ", "px ", "px;\n"])), (0, _constants.gridSize)() * 2, (0, _constants.gridSize)() * 2, (0, _constants.gridSize)() * 2);
26
+ var HeaderContent = _styled.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n padding: 0 ", " ", "\n ", ";\n"])), "var(--ds-space-200, 16px)", "var(--ds-space-200, 16px)", "var(--ds-space-200, 16px)");
27
27
  exports.HeaderContent = HeaderContent;
package/dist/cjs/components/styled.js CHANGED
@@ -9,7 +9,6 @@ exports.Section = exports.LoadingRectangle = exports.LoadingContainer = exports.
9
9
  var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
10
10
  var _styled = _interopRequireDefault(require("@emotion/styled"));
11
11
  var _core = require("@emotion/core");
12
- var _constants = require("@atlaskit/theme/constants");
13
12
  var colors = _interopRequireWildcard(require("@atlaskit/theme/colors"));
14
13
  var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
15
14
  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); }
@@ -18,22 +17,22 @@ var Container = _styled.default.div(_templateObject || (_templateObject = (0, _t
18
17
  exports.Container = Container;
19
18
  var Section = _styled.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n flex-grow: 1;\n display: flex;\n flex-direction: column;\n min-height: 0;\n"])));
20
19
  exports.Section = Section;
21
- var DividerLine = _styled.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n background-color: ", ";\n height: 2px;\n width: 100%;\n padding: 0 ", "px;\n margin-top: ", "px;\n box-sizing: border-box;\n"])), "var(--ds-border, ".concat(colors.N30A, ")"), 2 * (0, _constants.gridSize)(), (0, _constants.gridSize)() * 2);
20
+ var DividerLine = _styled.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n background-color: ", ";\n height: 2px;\n width: 100%;\n padding: 0 ", ";\n margin-top: ", ";\n box-sizing: border-box;\n"])), "var(--ds-border, ".concat(colors.N30A, ")"), "var(--ds-space-200, 16px)", "var(--ds-space-200, 16px)");
22
21
  exports.DividerLine = DividerLine;
23
22
  var FOOTER_BORDER_TOP = 2;
24
- var HelpFooter = _styled.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n padding: ", "px 0;\n box-sizing: border-box;\n background-color: ", ";\n border-top: ", "px solid ", ";\n justify-content: space-between;\n"])), (0, _constants.gridSize)(), "var(--ds-background-neutral, ".concat(colors.N10, ")"), FOOTER_BORDER_TOP, "var(--ds-border, ".concat(colors.N30, ")"));
23
+ var HelpFooter = _styled.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n padding: ", " 0;\n box-sizing: border-box;\n background-color: ", ";\n border-top: ", "px solid ", ";\n justify-content: space-between;\n"])), "var(--ds-space-100, 8px)", "var(--ds-background-neutral, ".concat(colors.N10, ")"), FOOTER_BORDER_TOP, "var(--ds-border, ".concat(colors.N30, ")"));
25
24
 
26
25
  /**
27
26
  * Loading
28
27
  */
29
28
  exports.HelpFooter = HelpFooter;
30
- var LoadingContainer = _styled.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n padding: ", "px;\n height: 100%;\n"])), 2 * (0, _constants.gridSize)());
29
+ var LoadingContainer = _styled.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n padding: ", ";\n height: 100%;\n"])), "var(--ds-space-200, 16px)");
31
30
  exports.LoadingContainer = LoadingContainer;
32
31
  var shimmer = (0, _core.keyframes)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n 0% {\n background-position: -300px 0;\n }\n 100% {\n background-position: 1000px 0;\n }\n"])));
33
32
  var LoadingRectangle = _styled.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n position: relative;\n height: ", ";\n margin-top: ", ";\n width: ", ";\n border-radius: 2px;\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) {
34
33
  return props.contentHeight ? props.contentHeight : '1rem';
35
34
  }, function (props) {
36
- return props.marginTop ? props.marginTop : (0, _constants.gridSize)() + 'px';
35
+ return props.marginTop ? props.marginTop : "var(--ds-space-100, 8px)";
37
36
  }, function (props) {
38
37
  return props.contentWidth ? props.contentWidth : '100%';
39
38
  }, 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/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/help-layout",
3
- "version": "4.1.14",
3
+ "version": "4.1.15",
4
4
  "sideEffects": false
5
5
  }
package/dist/es2019/components/Header/styled.js CHANGED
@@ -13,13 +13,13 @@ export const HeaderContainer = styled.div`
13
13
  `;
14
14
  export const CloseButtonContainer = styled.div`
15
15
  position: absolute;
16
- right: ${gridSize()}px;
17
- top: ${gridSize() * 1.5}px;
16
+ right: ${"var(--ds-space-100, 8px)"};
17
+ top: ${"var(--ds-space-150, 12px)"};
18
18
  `;
19
19
  export const BackButtonContainer = styled.div`
20
20
  position: absolute;
21
- top: ${gridSize() * 1.5}px;
22
- left: ${gridSize()}px;
21
+ top: ${"var(--ds-space-150, 12px)"};
22
+ left: ${"var(--ds-space-100, 8px)"};
23
23
  `;
24
24
  export const HeaderTitle = styled.div`
25
25
  color: ${`var(--ds-text-subtle, ${colors.N500})`};
@@ -35,5 +35,6 @@ export const HeaderTitle = styled.div`
35
35
  vertical-align: middle;
36
36
  `;
37
37
  export const HeaderContent = styled.div`
38
- padding: 0 ${gridSize() * 2}px ${gridSize() * 2}px ${gridSize() * 2}px;
38
+ padding: 0 ${"var(--ds-space-200, 16px)"} ${"var(--ds-space-200, 16px)"}
39
+ ${"var(--ds-space-200, 16px)"};
39
40
  `;
package/dist/es2019/components/styled.js CHANGED
@@ -2,7 +2,6 @@
2
2
 
3
3
  import styled from '@emotion/styled';
4
4
  import { keyframes } from '@emotion/core';
5
- import { gridSize } from '@atlaskit/theme/constants';
6
5
  import * as colors from '@atlaskit/theme/colors';
7
6
  export const Container = styled.div`
8
7
  position: absolute;
@@ -24,13 +23,13 @@ export const DividerLine = styled.div`
24
23
  background-color: ${`var(--ds-border, ${colors.N30A})`};
25
24
  height: 2px;
26
25
  width: 100%;
27
- padding: 0 ${2 * gridSize()}px;
28
- margin-top: ${gridSize() * 2}px;
26
+ padding: 0 ${"var(--ds-space-200, 16px)"};
27
+ margin-top: ${"var(--ds-space-200, 16px)"};
29
28
  box-sizing: border-box;
30
29
  `;
31
30
  const FOOTER_BORDER_TOP = 2;
32
31
  export const HelpFooter = styled.div`
33
- padding: ${gridSize()}px 0;
32
+ padding: ${"var(--ds-space-100, 8px)"} 0;
34
33
  box-sizing: border-box;
35
34
  background-color: ${`var(--ds-background-neutral, ${colors.N10})`};
36
35
  border-top: ${FOOTER_BORDER_TOP}px solid ${`var(--ds-border, ${colors.N30})`};
@@ -42,7 +41,7 @@ export const HelpFooter = styled.div`
42
41
  */
43
42
 
44
43
  export const LoadingContainer = styled.div`
45
- padding: ${2 * gridSize()}px;
44
+ padding: ${"var(--ds-space-200, 16px)"};
46
45
  height: 100%;
47
46
  `;
48
47
  const shimmer = keyframes`
@@ -56,7 +55,7 @@ const shimmer = keyframes`
56
55
  export const LoadingRectangle = styled.div`
57
56
  position: relative;
58
57
  height: ${props => props.contentHeight ? props.contentHeight : '1rem'};
59
- margin-top: ${props => props.marginTop ? props.marginTop : gridSize() + 'px'};
58
+ margin-top: ${props => props.marginTop ? props.marginTop : "var(--ds-space-100, 8px)"};
60
59
  width: ${props => props.contentWidth ? props.contentWidth : '100%'};
61
60
  border-radius: 2px;
62
61
  animation-duration: 1.2s;
package/dist/es2019/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/help-layout",
3
- "version": "4.1.14",
3
+ "version": "4.1.15",
4
4
  "sideEffects": false
5
5
  }
package/dist/esm/components/Header/styled.js CHANGED
@@ -7,7 +7,7 @@ import * as colors from '@atlaskit/theme/colors';
7
7
  var HEADER_TITLE_HEIGHT = gridSize() * 7;
8
8
  var HEADER_TITLE_BORDER_BOTTOM = 2;
9
9
  export var HeaderContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n background-color: ", ";\n border-bottom: ", "px solid\n ", ";\n justify-content: space-between;\n position: relative;\n"])), "var(--ds-background-neutral, ".concat(colors.N10, ")"), HEADER_TITLE_BORDER_BOTTOM, "var(--ds-border, ".concat(colors.N30, ")"));
10
- export var CloseButtonContainer = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n position: absolute;\n right: ", "px;\n top: ", "px;\n"])), gridSize(), gridSize() * 1.5);
11
- export var BackButtonContainer = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n position: absolute;\n top: ", "px;\n left: ", "px;\n"])), gridSize() * 1.5, gridSize());
10
+ export var CloseButtonContainer = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n position: absolute;\n right: ", ";\n top: ", ";\n"])), "var(--ds-space-100, 8px)", "var(--ds-space-150, 12px)");
11
+ export var BackButtonContainer = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n position: absolute;\n top: ", ";\n left: ", ";\n"])), "var(--ds-space-150, 12px)", "var(--ds-space-100, 8px)");
12
12
  export var HeaderTitle = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n color: ", ";\n text-align: center;\n font-size: 1rem;\n font-weight: 600;\n line-height: ", "px;\n width: 100%;\n white-space: nowrap;\n text-overflow: ellipsis;\n display: inline-block;\n overflow: hidden;\n vertical-align: middle;\n"])), "var(--ds-text-subtle, ".concat(colors.N500, ")"), HEADER_TITLE_HEIGHT);
13
- export var HeaderContent = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n padding: 0 ", "px ", "px ", "px;\n"])), gridSize() * 2, gridSize() * 2, gridSize() * 2);
13
+ export var HeaderContent = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n padding: 0 ", " ", "\n ", ";\n"])), "var(--ds-space-200, 16px)", "var(--ds-space-200, 16px)", "var(--ds-space-200, 16px)");
package/dist/esm/components/styled.js CHANGED
@@ -4,24 +4,23 @@ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _temp
4
4
 
5
5
  import styled from '@emotion/styled';
6
6
  import { keyframes } from '@emotion/core';
7
- import { gridSize } from '@atlaskit/theme/constants';
8
7
  import * as colors from '@atlaskit/theme/colors';
9
8
  export var Container = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n width: 100%;\n display: flex;\n flex-direction: column;\n background-color: ", ";\n"])), "var(--ds-surface, #FFFFFF)");
10
9
  export var Section = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n flex-grow: 1;\n display: flex;\n flex-direction: column;\n min-height: 0;\n"])));
11
- export var DividerLine = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n background-color: ", ";\n height: 2px;\n width: 100%;\n padding: 0 ", "px;\n margin-top: ", "px;\n box-sizing: border-box;\n"])), "var(--ds-border, ".concat(colors.N30A, ")"), 2 * gridSize(), gridSize() * 2);
10
+ export var DividerLine = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n background-color: ", ";\n height: 2px;\n width: 100%;\n padding: 0 ", ";\n margin-top: ", ";\n box-sizing: border-box;\n"])), "var(--ds-border, ".concat(colors.N30A, ")"), "var(--ds-space-200, 16px)", "var(--ds-space-200, 16px)");
12
11
  var FOOTER_BORDER_TOP = 2;
13
- export var HelpFooter = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n padding: ", "px 0;\n box-sizing: border-box;\n background-color: ", ";\n border-top: ", "px solid ", ";\n justify-content: space-between;\n"])), gridSize(), "var(--ds-background-neutral, ".concat(colors.N10, ")"), FOOTER_BORDER_TOP, "var(--ds-border, ".concat(colors.N30, ")"));
12
+ export var HelpFooter = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n padding: ", " 0;\n box-sizing: border-box;\n background-color: ", ";\n border-top: ", "px solid ", ";\n justify-content: space-between;\n"])), "var(--ds-space-100, 8px)", "var(--ds-background-neutral, ".concat(colors.N10, ")"), FOOTER_BORDER_TOP, "var(--ds-border, ".concat(colors.N30, ")"));
14
13
 
15
14
  /**
16
15
  * Loading
17
16
  */
18
17
 
19
- export var LoadingContainer = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n padding: ", "px;\n height: 100%;\n"])), 2 * gridSize());
18
+ export var LoadingContainer = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n padding: ", ";\n height: 100%;\n"])), "var(--ds-space-200, 16px)");
20
19
  var shimmer = keyframes(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n 0% {\n background-position: -300px 0;\n }\n 100% {\n background-position: 1000px 0;\n }\n"])));
21
20
  export var LoadingRectangle = styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n position: relative;\n height: ", ";\n margin-top: ", ";\n width: ", ";\n border-radius: 2px;\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) {
22
21
  return props.contentHeight ? props.contentHeight : '1rem';
23
22
  }, function (props) {
24
- return props.marginTop ? props.marginTop : gridSize() + 'px';
23
+ return props.marginTop ? props.marginTop : "var(--ds-space-100, 8px)";
25
24
  }, function (props) {
26
25
  return props.contentWidth ? props.contentWidth : '100%';
27
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, ")"));
package/dist/esm/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/help-layout",
3
- "version": "4.1.14",
3
+ "version": "4.1.15",
4
4
  "sideEffects": false
5
5
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/help-layout",
3
- "version": "4.1.14",
3
+ "version": "4.1.15",
4
4
  "description": "Layout for the atlaskit/help component.",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -25,11 +25,11 @@
25
25
  "dependencies": {
26
26
  "@atlaskit/analytics": "^8.0.0",
27
27
  "@atlaskit/analytics-next": "^9.0.0",
28
- "@atlaskit/button": "^16.5.0",
28
+ "@atlaskit/button": "^16.6.0",
29
29
  "@atlaskit/icon": "^21.11.0",
30
- "@atlaskit/theme": "^12.2.0",
30
+ "@atlaskit/theme": "^12.3.0",
31
31
  "@atlaskit/tokens": "^1.2.0",
32
- "@atlaskit/tooltip": "^17.6.0",
32
+ "@atlaskit/tooltip": "^17.7.0",
33
33
  "@babel/runtime": "^7.0.0",
34
34
  "@emotion/core": "^10.0.9",
35
35
  "@emotion/styled": "^10.0.7",