@atlaskit/storybook-addon-design-system 0.3.8 → 0.4.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.
Files changed (18) hide show
  1. package/CHANGELOG.md +17 -0
  2. package/dist/cjs/index.js +0 -1
  3. package/dist/cjs/tokens/components/index.js +0 -2
  4. package/dist/cjs/tokens/components/tool.js +13 -25
  5. package/dist/cjs/tokens/decorator.js +66 -86
  6. package/dist/cjs/tokens/index.js +0 -2
  7. package/dist/cjs/tokens/register.js +0 -3
  8. package/dist/cjs/version.json +1 -1
  9. package/dist/es2019/tokens/components/tool.js +5 -3
  10. package/dist/es2019/tokens/decorator.js +55 -71
  11. package/dist/es2019/version.json +1 -1
  12. package/dist/esm/tokens/components/tool.js +13 -13
  13. package/dist/esm/tokens/decorator.js +67 -76
  14. package/dist/esm/version.json +1 -1
  15. package/dist/types/tokens/decorator.d.ts +0 -2
  16. package/dist/types/tokens/types.d.ts +1 -1
  17. package/package.json +5 -4
  18. package/report.api.md +14 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,22 @@
1
1
  # @atlaskit/storybook-addon-design-system
2
2
 
3
+ ## 0.4.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [`56507598609`](https://bitbucket.org/atlassian/atlassian-frontend/commits/56507598609) - Skip minor dependency bump
8
+
9
+ ### Patch Changes
10
+
11
+ - Updated dependencies
12
+
13
+ ## 0.3.9
14
+
15
+ ### Patch Changes
16
+
17
+ - [`718d5ad3044`](https://bitbucket.org/atlassian/atlassian-frontend/commits/718d5ad3044) - Updates to support the new `@atlaskit/tokens` theming API.
18
+ - Updated dependencies
19
+
3
20
  ## 0.3.8
4
21
 
5
22
  ### Patch Changes
package/dist/cjs/index.js CHANGED
@@ -9,5 +9,4 @@ Object.defineProperty(exports, "withDesignTokens", {
9
9
  return _tokens.withDesignTokens;
10
10
  }
11
11
  });
12
-
13
12
  var _tokens = require("./tokens");
package/dist/cjs/tokens/components/index.js CHANGED
@@ -1,7 +1,6 @@
1
1
  "use strict";
2
2
 
3
3
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
-
5
4
  Object.defineProperty(exports, "__esModule", {
6
5
  value: true
7
6
  });
@@ -11,5 +10,4 @@ Object.defineProperty(exports, "Tool", {
11
10
  return _tool.default;
12
11
  }
13
12
  });
14
-
15
13
  var _tool = _interopRequireDefault(require("./tool"));
package/dist/cjs/tokens/components/tool.js CHANGED
@@ -1,32 +1,26 @@
1
1
  "use strict";
2
2
 
3
3
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
-
5
4
  var _typeof = require("@babel/runtime/helpers/typeof");
6
-
7
5
  Object.defineProperty(exports, "__esModule", {
8
6
  value: true
9
7
  });
10
8
  exports.default = void 0;
11
-
12
9
  var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
13
-
14
10
  var _react = _interopRequireWildcard(require("react"));
15
-
16
11
  var _api = require("@storybook/api");
17
-
18
12
  var _components = require("@storybook/components");
19
-
20
13
  var _constants = require("../constants");
21
-
22
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); }
23
-
24
15
  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; }
25
-
26
16
  var themeOptions = [{
27
17
  id: 'none',
28
18
  title: 'Disable',
29
19
  icon: 'cross'
20
+ }, {
21
+ id: 'auto',
22
+ title: 'Same as system',
23
+ icon: 'circlehollow'
30
24
  }, {
31
25
  id: 'light',
32
26
  title: 'Light theme',
@@ -44,25 +38,22 @@ var themeOptions = [{
44
38
  title: 'Stacked',
45
39
  icon: 'bottombar'
46
40
  }];
41
+
47
42
  /**
48
43
  * __Tool__
49
44
  *
50
45
  * ADS Toolbar UI, visible in the topbar of the storybook UI.
51
46
  */
52
-
53
47
  var Tool = function Tool() {
54
48
  var _themeOptions$find;
55
-
56
49
  var _useState = (0, _react.useState)(false),
57
- _useState2 = (0, _slicedToArray2.default)(_useState, 2),
58
- isVisible = _useState2[0],
59
- setIsVisible = _useState2[1];
60
-
50
+ _useState2 = (0, _slicedToArray2.default)(_useState, 2),
51
+ isVisible = _useState2[0],
52
+ setIsVisible = _useState2[1];
61
53
  var _useGlobals = (0, _api.useGlobals)(),
62
- _useGlobals2 = (0, _slicedToArray2.default)(_useGlobals, 2),
63
- adsTheme = _useGlobals2[0].adsTheme,
64
- updateGlobals = _useGlobals2[1];
65
-
54
+ _useGlobals2 = (0, _slicedToArray2.default)(_useGlobals, 2),
55
+ adsTheme = _useGlobals2[0].adsTheme,
56
+ updateGlobals = _useGlobals2[1];
66
57
  var setTheme = (0, _react.useCallback)(function (theme) {
67
58
  return updateGlobals({
68
59
  adsTheme: theme
@@ -78,16 +69,14 @@ var Tool = function Tool() {
78
69
  return /*#__PURE__*/_react.default.createElement(_components.TooltipLinkList, {
79
70
  links: themeOptions.map(function (_ref2) {
80
71
  var id = _ref2.id,
81
- title = _ref2.title,
82
- icon = _ref2.icon;
83
-
72
+ title = _ref2.title,
73
+ icon = _ref2.icon;
84
74
  var Icon = /*#__PURE__*/_react.default.createElement(_components.Icons, {
85
75
  style: {
86
76
  opacity: 1
87
77
  },
88
78
  icon: icon
89
79
  });
90
-
91
80
  return {
92
81
  id: id,
93
82
  title: title,
@@ -112,6 +101,5 @@ var Tool = function Tool() {
112
101
  })) === null || _themeOptions$find === void 0 ? void 0 : _themeOptions$find.icon) || 'circlehollow'
113
102
  }), '\xa0ADS Theme'));
114
103
  };
115
-
116
104
  var _default = Tool;
117
105
  exports.default = _default;
package/dist/cjs/tokens/decorator.js CHANGED
@@ -1,36 +1,22 @@
1
1
  "use strict";
2
2
 
3
3
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
-
5
4
  var _typeof = require("@babel/runtime/helpers/typeof");
6
-
7
5
  Object.defineProperty(exports, "__esModule", {
8
6
  value: true
9
7
  });
10
8
  exports.default = void 0;
11
-
9
+ var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
12
10
  var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
13
-
11
+ var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
14
12
  var _react = _interopRequireWildcard(require("react"));
15
-
16
13
  var _addons = require("@storybook/addons");
17
-
18
14
  var _tokens = require("@atlaskit/tokens");
19
-
20
- require("@atlaskit/tokens/css/atlassian-light.css");
21
-
22
- require("@atlaskit/tokens/css/atlassian-dark.css");
23
-
24
15
  var _constants = require("./constants");
25
-
26
16
  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); }
27
-
28
17
  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; }
29
-
30
18
  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; }
31
-
32
19
  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) { (0, _defineProperty2.default)(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; }
33
-
34
20
  var splitColumnStyles = {
35
21
  position: 'absolute',
36
22
  boxSizing: 'border-box',
@@ -51,87 +37,81 @@ var stackColumnStyles = {
51
37
  background: (0, _tokens.token)('elevation.surface', 'white'),
52
38
  color: (0, _tokens.token)('color.text', '#172B4D')
53
39
  };
54
- /**
55
- * Forcefully retarget the token declarations to apply to our hacked class,
56
- * .ads-theme-override, for split and stack views.
57
- */
58
-
59
- var hackThemeOverrideOnStyleElement = function hackThemeOverrideOnStyleElement(style) {
60
- var regex = /html\[(data-theme.?=)"(light|dark)"\](\s{)/i;
61
-
62
- if (regex.test(style.innerText)) {
63
- style.innerText = style.textContent.replace(regex, "html[$1\"$2\"], .ads-theme-override[$1\"$2\"]$3");
64
- }
65
- };
66
-
67
40
  var withDesignTokens = (0, _addons.makeDecorator)({
68
41
  name: _constants.DECORATOR_ID,
69
42
  parameterName: _constants.DECORATOR_PARAM,
70
43
  wrapper: function wrapper(storyFn, context) {
71
- var theme = context.globals.adsTheme; // eslint-disable-next-line react-hooks/rules-of-hooks
72
-
73
- (0, _addons.useEffect)(function () {
74
- document.querySelectorAll('style').forEach(function (el) {
75
- hackThemeOverrideOnStyleElement(el);
76
- });
77
- }, [context.id]); // eslint-disable-next-line react-hooks/rules-of-hooks
44
+ var theme = context.globals.adsTheme;
78
45
 
46
+ // eslint-disable-next-line react-hooks/rules-of-hooks
79
47
  (0, _addons.useEffect)(function () {
80
- if (!theme || theme === 'none') {
81
- delete document.documentElement.dataset.theme;
82
- return;
83
- }
84
-
85
- document.documentElement.dataset.theme = theme;
48
+ (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
49
+ return _regenerator.default.wrap(function _callee$(_context) {
50
+ while (1) switch (_context.prev = _context.next) {
51
+ case 0:
52
+ _context.t0 = theme;
53
+ _context.next = _context.t0 === 'light' ? 3 : _context.t0 === 'dark' ? 3 : _context.t0 === 'auto' ? 3 : _context.t0 === 'split' ? 6 : _context.t0 === 'stack' ? 6 : _context.t0 === 'none' ? 10 : 14;
54
+ break;
55
+ case 3:
56
+ _context.next = 5;
57
+ return (0, _tokens.setGlobalTheme)({
58
+ colorMode: theme
59
+ });
60
+ case 5:
61
+ return _context.abrupt("break", 15);
62
+ case 6:
63
+ _context.next = 8;
64
+ return (0, _tokens.setGlobalTheme)({
65
+ colorMode: 'light'
66
+ });
67
+ case 8:
68
+ document.documentElement.querySelectorAll('style[data-theme]').forEach(function (el) {
69
+ var clone = el.cloneNode(true);
70
+ clone.setAttribute('data-theme', clone.getAttribute('data-theme') + '-clone');
71
+ // HACK: re-target theme selectors to split div containers
72
+ clone.textContent = clone.textContent.replace(/html\[/g, '[');
73
+ document.head.append(clone);
74
+ });
75
+ return _context.abrupt("break", 15);
76
+ case 10:
77
+ delete document.documentElement.dataset.theme;
78
+ delete document.documentElement.dataset.colorMode;
79
+ document.documentElement.querySelectorAll('style[data-theme]').forEach(function (el) {
80
+ return el.remove();
81
+ });
82
+ return _context.abrupt("break", 15);
83
+ case 14:
84
+ return _context.abrupt("break", 15);
85
+ case 15:
86
+ case "end":
87
+ return _context.stop();
88
+ }
89
+ }, _callee);
90
+ }))();
86
91
  }, [context.id, theme]);
87
-
88
92
  function renderStory() {
89
93
  var story = storyFn(context);
90
-
91
- switch (theme) {
92
- case 'split':
93
- {
94
- return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
95
- className: "ads-theme-override",
96
- "data-theme": "light",
97
- style: _objectSpread(_objectSpread({}, splitColumnStyles), {}, {
98
- inset: '0px 50vw 0px 0px'
99
- })
100
- }, story), /*#__PURE__*/_react.default.createElement("div", {
101
- className: "ads-theme-override",
102
- "data-theme": "dark",
103
- style: _objectSpread(_objectSpread({}, splitColumnStyles), {}, {
104
- inset: '0px 0px 0px 50vw'
105
- })
106
- }, story));
107
- }
108
-
109
- case 'stack':
110
- {
111
- return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
112
- className: "ads-theme-override",
113
- "data-theme": "light",
114
- style: _objectSpread(_objectSpread({}, stackColumnStyles), {}, {
115
- inset: '0px 0px 50% 0px'
116
- })
117
- }, story), /*#__PURE__*/_react.default.createElement("div", {
118
- className: "ads-theme-override",
119
- "data-theme": "dark",
120
- style: _objectSpread(_objectSpread({}, stackColumnStyles), {}, {
121
- inset: '50% 0px 0px 0px'
122
- })
123
- }, story));
124
- }
125
-
126
- default:
127
- {
128
- return /*#__PURE__*/_react.default.createElement("div", {
129
- "data-theme": theme
130
- }, story);
131
- }
94
+ if (theme === 'split' || theme === 'stack') {
95
+ return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
96
+ "data-theme": "light:light",
97
+ "data-color-mode": "light",
98
+ style: theme === 'split' ? _objectSpread(_objectSpread({}, splitColumnStyles), {}, {
99
+ inset: '0px 50vw 0px 0px'
100
+ }) : _objectSpread(_objectSpread({}, stackColumnStyles), {}, {
101
+ inset: '0px 0px 50% 0px'
102
+ })
103
+ }, story), /*#__PURE__*/_react.default.createElement("div", {
104
+ "data-theme": "dark:dark",
105
+ "data-color-mode": "dark",
106
+ style: theme === 'split' ? _objectSpread(_objectSpread({}, splitColumnStyles), {}, {
107
+ inset: '0px 0px 0px 50vw'
108
+ }) : _objectSpread(_objectSpread({}, stackColumnStyles), {}, {
109
+ inset: '50% 0px 0px 0px'
110
+ })
111
+ }, story));
132
112
  }
113
+ return /*#__PURE__*/_react.default.createElement("div", null, story);
133
114
  }
134
-
135
115
  return renderStory();
136
116
  }
137
117
  });
package/dist/cjs/tokens/index.js CHANGED
@@ -1,7 +1,6 @@
1
1
  "use strict";
2
2
 
3
3
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
-
5
4
  Object.defineProperty(exports, "__esModule", {
6
5
  value: true
7
6
  });
@@ -11,5 +10,4 @@ Object.defineProperty(exports, "withDesignTokens", {
11
10
  return _decorator.default;
12
11
  }
13
12
  });
14
-
15
13
  var _decorator = _interopRequireDefault(require("./decorator"));
package/dist/cjs/tokens/register.js CHANGED
@@ -1,11 +1,8 @@
1
1
  "use strict";
2
2
 
3
3
  var _addons = require("@storybook/addons");
4
-
5
4
  var _components = require("./components");
6
-
7
5
  var _constants = require("./constants");
8
-
9
6
  _addons.addons.register(_constants.ADDON_ID, function () {
10
7
  _addons.addons.add(_constants.TOOL_ID, {
11
8
  type: _addons.types.TOOL,
package/dist/cjs/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/storybook-addon-design-system",
3
- "version": "0.3.8",
3
+ "version": "0.4.0",
4
4
  "sideEffects": false
5
5
  }
package/dist/es2019/tokens/components/tool.js CHANGED
@@ -6,6 +6,10 @@ const themeOptions = [{
6
6
  id: 'none',
7
7
  title: 'Disable',
8
8
  icon: 'cross'
9
+ }, {
10
+ id: 'auto',
11
+ title: 'Same as system',
12
+ icon: 'circlehollow'
9
13
  }, {
10
14
  id: 'light',
11
15
  title: 'Light theme',
@@ -23,15 +27,14 @@ const themeOptions = [{
23
27
  title: 'Stacked',
24
28
  icon: 'bottombar'
25
29
  }];
30
+
26
31
  /**
27
32
  * __Tool__
28
33
  *
29
34
  * ADS Toolbar UI, visible in the topbar of the storybook UI.
30
35
  */
31
-
32
36
  const Tool = () => {
33
37
  var _themeOptions$find;
34
-
35
38
  const [isVisible, setIsVisible] = useState(false);
36
39
  const [{
37
40
  adsTheme
@@ -80,5 +83,4 @@ const Tool = () => {
80
83
  }) => id === adsTheme)) === null || _themeOptions$find === void 0 ? void 0 : _themeOptions$find.icon) || 'circlehollow'
81
84
  }), '\xa0ADS Theme'));
82
85
  };
83
-
84
86
  export default Tool;
package/dist/es2019/tokens/decorator.js CHANGED
@@ -1,8 +1,6 @@
1
1
  import React, { Fragment } from 'react';
2
2
  import { makeDecorator, useEffect } from '@storybook/addons';
3
- import { token } from '@atlaskit/tokens';
4
- import '@atlaskit/tokens/css/atlassian-light.css';
5
- import '@atlaskit/tokens/css/atlassian-dark.css';
3
+ import { setGlobalTheme, token } from '@atlaskit/tokens';
6
4
  import { DECORATOR_ID, DECORATOR_PARAM } from './constants';
7
5
  const splitColumnStyles = {
8
6
  position: 'absolute',
@@ -24,87 +22,73 @@ const stackColumnStyles = {
24
22
  background: token('elevation.surface', 'white'),
25
23
  color: token('color.text', '#172B4D')
26
24
  };
27
- /**
28
- * Forcefully retarget the token declarations to apply to our hacked class,
29
- * .ads-theme-override, for split and stack views.
30
- */
31
-
32
- const hackThemeOverrideOnStyleElement = style => {
33
- const regex = /html\[(data-theme.?=)"(light|dark)"\](\s{)/i;
34
-
35
- if (regex.test(style.innerText)) {
36
- style.innerText = style.textContent.replace(regex, `html[$1"$2"], .ads-theme-override[$1"$2"]$3`);
37
- }
38
- };
39
-
40
25
  const withDesignTokens = makeDecorator({
41
26
  name: DECORATOR_ID,
42
27
  parameterName: DECORATOR_PARAM,
43
28
  wrapper: (storyFn, context) => {
44
- const theme = context.globals.adsTheme; // eslint-disable-next-line react-hooks/rules-of-hooks
45
-
46
- useEffect(() => {
47
- document.querySelectorAll('style').forEach(el => {
48
- hackThemeOverrideOnStyleElement(el);
49
- });
50
- }, [context.id]); // eslint-disable-next-line react-hooks/rules-of-hooks
29
+ const theme = context.globals.adsTheme;
51
30
 
31
+ // eslint-disable-next-line react-hooks/rules-of-hooks
52
32
  useEffect(() => {
53
- if (!theme || theme === 'none') {
54
- delete document.documentElement.dataset.theme;
55
- return;
56
- }
57
-
58
- document.documentElement.dataset.theme = theme;
33
+ (async () => {
34
+ switch (theme) {
35
+ case 'light':
36
+ case 'dark':
37
+ case 'auto':
38
+ await setGlobalTheme({
39
+ colorMode: theme
40
+ });
41
+ break;
42
+ case 'split':
43
+ case 'stack':
44
+ await setGlobalTheme({
45
+ colorMode: 'light'
46
+ });
47
+ document.documentElement.querySelectorAll('style[data-theme]').forEach(el => {
48
+ const clone = el.cloneNode(true);
49
+ clone.setAttribute('data-theme', clone.getAttribute('data-theme') + '-clone');
50
+ // HACK: re-target theme selectors to split div containers
51
+ clone.textContent = clone.textContent.replace(/html\[/g, '[');
52
+ document.head.append(clone);
53
+ });
54
+ break;
55
+ case 'none':
56
+ delete document.documentElement.dataset.theme;
57
+ delete document.documentElement.dataset.colorMode;
58
+ document.documentElement.querySelectorAll('style[data-theme]').forEach(el => el.remove());
59
+ break;
60
+ default:
61
+ break;
62
+ }
63
+ })();
59
64
  }, [context.id, theme]);
60
-
61
65
  function renderStory() {
62
66
  const story = storyFn(context);
63
-
64
- switch (theme) {
65
- case 'split':
66
- {
67
- return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
68
- className: "ads-theme-override",
69
- "data-theme": "light",
70
- style: { ...splitColumnStyles,
71
- inset: '0px 50vw 0px 0px'
72
- }
73
- }, story), /*#__PURE__*/React.createElement("div", {
74
- className: "ads-theme-override",
75
- "data-theme": "dark",
76
- style: { ...splitColumnStyles,
77
- inset: '0px 0px 0px 50vw'
78
- }
79
- }, story));
67
+ if (theme === 'split' || theme === 'stack') {
68
+ return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
69
+ "data-theme": "light:light",
70
+ "data-color-mode": "light",
71
+ style: theme === 'split' ? {
72
+ ...splitColumnStyles,
73
+ inset: '0px 50vw 0px 0px'
74
+ } : {
75
+ ...stackColumnStyles,
76
+ inset: '0px 0px 50% 0px'
80
77
  }
81
-
82
- case 'stack':
83
- {
84
- return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
85
- className: "ads-theme-override",
86
- "data-theme": "light",
87
- style: { ...stackColumnStyles,
88
- inset: '0px 0px 50% 0px'
89
- }
90
- }, story), /*#__PURE__*/React.createElement("div", {
91
- className: "ads-theme-override",
92
- "data-theme": "dark",
93
- style: { ...stackColumnStyles,
94
- inset: '50% 0px 0px 0px'
95
- }
96
- }, story));
97
- }
98
-
99
- default:
100
- {
101
- return /*#__PURE__*/React.createElement("div", {
102
- "data-theme": theme
103
- }, story);
78
+ }, story), /*#__PURE__*/React.createElement("div", {
79
+ "data-theme": "dark:dark",
80
+ "data-color-mode": "dark",
81
+ style: theme === 'split' ? {
82
+ ...splitColumnStyles,
83
+ inset: '0px 0px 0px 50vw'
84
+ } : {
85
+ ...stackColumnStyles,
86
+ inset: '50% 0px 0px 0px'
104
87
  }
88
+ }, story));
105
89
  }
90
+ return /*#__PURE__*/React.createElement("div", null, story);
106
91
  }
107
-
108
92
  return renderStory();
109
93
  }
110
94
  });
package/dist/es2019/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/storybook-addon-design-system",
3
- "version": "0.3.8",
3
+ "version": "0.4.0",
4
4
  "sideEffects": false
5
5
  }
package/dist/esm/tokens/components/tool.js CHANGED
@@ -7,6 +7,10 @@ var themeOptions = [{
7
7
  id: 'none',
8
8
  title: 'Disable',
9
9
  icon: 'cross'
10
+ }, {
11
+ id: 'auto',
12
+ title: 'Same as system',
13
+ icon: 'circlehollow'
10
14
  }, {
11
15
  id: 'light',
12
16
  title: 'Light theme',
@@ -24,25 +28,22 @@ var themeOptions = [{
24
28
  title: 'Stacked',
25
29
  icon: 'bottombar'
26
30
  }];
31
+
27
32
  /**
28
33
  * __Tool__
29
34
  *
30
35
  * ADS Toolbar UI, visible in the topbar of the storybook UI.
31
36
  */
32
-
33
37
  var Tool = function Tool() {
34
38
  var _themeOptions$find;
35
-
36
39
  var _useState = useState(false),
37
- _useState2 = _slicedToArray(_useState, 2),
38
- isVisible = _useState2[0],
39
- setIsVisible = _useState2[1];
40
-
40
+ _useState2 = _slicedToArray(_useState, 2),
41
+ isVisible = _useState2[0],
42
+ setIsVisible = _useState2[1];
41
43
  var _useGlobals = useGlobals(),
42
- _useGlobals2 = _slicedToArray(_useGlobals, 2),
43
- adsTheme = _useGlobals2[0].adsTheme,
44
- updateGlobals = _useGlobals2[1];
45
-
44
+ _useGlobals2 = _slicedToArray(_useGlobals, 2),
45
+ adsTheme = _useGlobals2[0].adsTheme,
46
+ updateGlobals = _useGlobals2[1];
46
47
  var setTheme = useCallback(function (theme) {
47
48
  return updateGlobals({
48
49
  adsTheme: theme
@@ -58,8 +59,8 @@ var Tool = function Tool() {
58
59
  return /*#__PURE__*/React.createElement(TooltipLinkList, {
59
60
  links: themeOptions.map(function (_ref2) {
60
61
  var id = _ref2.id,
61
- title = _ref2.title,
62
- icon = _ref2.icon;
62
+ title = _ref2.title,
63
+ icon = _ref2.icon;
63
64
  var Icon = /*#__PURE__*/React.createElement(Icons, {
64
65
  style: {
65
66
  opacity: 1
@@ -90,5 +91,4 @@ var Tool = function Tool() {
90
91
  })) === null || _themeOptions$find === void 0 ? void 0 : _themeOptions$find.icon) || 'circlehollow'
91
92
  }), '\xa0ADS Theme'));
92
93
  };
93
-
94
94
  export default Tool;
package/dist/esm/tokens/decorator.js CHANGED
@@ -1,14 +1,11 @@
1
1
  import _defineProperty from "@babel/runtime/helpers/defineProperty";
2
-
2
+ import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
3
3
  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; }
4
-
5
4
  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; }
6
-
5
+ import _regeneratorRuntime from "@babel/runtime/regenerator";
7
6
  import React, { Fragment } from 'react';
8
7
  import { makeDecorator, useEffect } from '@storybook/addons';
9
- import { token } from '@atlaskit/tokens';
10
- import '@atlaskit/tokens/css/atlassian-light.css';
11
- import '@atlaskit/tokens/css/atlassian-dark.css';
8
+ import { setGlobalTheme, token } from '@atlaskit/tokens';
12
9
  import { DECORATOR_ID, DECORATOR_PARAM } from './constants';
13
10
  var splitColumnStyles = {
14
11
  position: 'absolute',
@@ -30,87 +27,81 @@ var stackColumnStyles = {
30
27
  background: token('elevation.surface', 'white'),
31
28
  color: token('color.text', '#172B4D')
32
29
  };
33
- /**
34
- * Forcefully retarget the token declarations to apply to our hacked class,
35
- * .ads-theme-override, for split and stack views.
36
- */
37
-
38
- var hackThemeOverrideOnStyleElement = function hackThemeOverrideOnStyleElement(style) {
39
- var regex = /html\[(data-theme.?=)"(light|dark)"\](\s{)/i;
40
-
41
- if (regex.test(style.innerText)) {
42
- style.innerText = style.textContent.replace(regex, "html[$1\"$2\"], .ads-theme-override[$1\"$2\"]$3");
43
- }
44
- };
45
-
46
30
  var withDesignTokens = makeDecorator({
47
31
  name: DECORATOR_ID,
48
32
  parameterName: DECORATOR_PARAM,
49
33
  wrapper: function wrapper(storyFn, context) {
50
- var theme = context.globals.adsTheme; // eslint-disable-next-line react-hooks/rules-of-hooks
34
+ var theme = context.globals.adsTheme;
51
35
 
36
+ // eslint-disable-next-line react-hooks/rules-of-hooks
52
37
  useEffect(function () {
53
- document.querySelectorAll('style').forEach(function (el) {
54
- hackThemeOverrideOnStyleElement(el);
55
- });
56
- }, [context.id]); // eslint-disable-next-line react-hooks/rules-of-hooks
57
-
58
- useEffect(function () {
59
- if (!theme || theme === 'none') {
60
- delete document.documentElement.dataset.theme;
61
- return;
62
- }
63
-
64
- document.documentElement.dataset.theme = theme;
38
+ _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
39
+ return _regeneratorRuntime.wrap(function _callee$(_context) {
40
+ while (1) switch (_context.prev = _context.next) {
41
+ case 0:
42
+ _context.t0 = theme;
43
+ _context.next = _context.t0 === 'light' ? 3 : _context.t0 === 'dark' ? 3 : _context.t0 === 'auto' ? 3 : _context.t0 === 'split' ? 6 : _context.t0 === 'stack' ? 6 : _context.t0 === 'none' ? 10 : 14;
44
+ break;
45
+ case 3:
46
+ _context.next = 5;
47
+ return setGlobalTheme({
48
+ colorMode: theme
49
+ });
50
+ case 5:
51
+ return _context.abrupt("break", 15);
52
+ case 6:
53
+ _context.next = 8;
54
+ return setGlobalTheme({
55
+ colorMode: 'light'
56
+ });
57
+ case 8:
58
+ document.documentElement.querySelectorAll('style[data-theme]').forEach(function (el) {
59
+ var clone = el.cloneNode(true);
60
+ clone.setAttribute('data-theme', clone.getAttribute('data-theme') + '-clone');
61
+ // HACK: re-target theme selectors to split div containers
62
+ clone.textContent = clone.textContent.replace(/html\[/g, '[');
63
+ document.head.append(clone);
64
+ });
65
+ return _context.abrupt("break", 15);
66
+ case 10:
67
+ delete document.documentElement.dataset.theme;
68
+ delete document.documentElement.dataset.colorMode;
69
+ document.documentElement.querySelectorAll('style[data-theme]').forEach(function (el) {
70
+ return el.remove();
71
+ });
72
+ return _context.abrupt("break", 15);
73
+ case 14:
74
+ return _context.abrupt("break", 15);
75
+ case 15:
76
+ case "end":
77
+ return _context.stop();
78
+ }
79
+ }, _callee);
80
+ }))();
65
81
  }, [context.id, theme]);
66
-
67
82
  function renderStory() {
68
83
  var story = storyFn(context);
69
-
70
- switch (theme) {
71
- case 'split':
72
- {
73
- return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
74
- className: "ads-theme-override",
75
- "data-theme": "light",
76
- style: _objectSpread(_objectSpread({}, splitColumnStyles), {}, {
77
- inset: '0px 50vw 0px 0px'
78
- })
79
- }, story), /*#__PURE__*/React.createElement("div", {
80
- className: "ads-theme-override",
81
- "data-theme": "dark",
82
- style: _objectSpread(_objectSpread({}, splitColumnStyles), {}, {
83
- inset: '0px 0px 0px 50vw'
84
- })
85
- }, story));
86
- }
87
-
88
- case 'stack':
89
- {
90
- return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
91
- className: "ads-theme-override",
92
- "data-theme": "light",
93
- style: _objectSpread(_objectSpread({}, stackColumnStyles), {}, {
94
- inset: '0px 0px 50% 0px'
95
- })
96
- }, story), /*#__PURE__*/React.createElement("div", {
97
- className: "ads-theme-override",
98
- "data-theme": "dark",
99
- style: _objectSpread(_objectSpread({}, stackColumnStyles), {}, {
100
- inset: '50% 0px 0px 0px'
101
- })
102
- }, story));
103
- }
104
-
105
- default:
106
- {
107
- return /*#__PURE__*/React.createElement("div", {
108
- "data-theme": theme
109
- }, story);
110
- }
84
+ if (theme === 'split' || theme === 'stack') {
85
+ return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
86
+ "data-theme": "light:light",
87
+ "data-color-mode": "light",
88
+ style: theme === 'split' ? _objectSpread(_objectSpread({}, splitColumnStyles), {}, {
89
+ inset: '0px 50vw 0px 0px'
90
+ }) : _objectSpread(_objectSpread({}, stackColumnStyles), {}, {
91
+ inset: '0px 0px 50% 0px'
92
+ })
93
+ }, story), /*#__PURE__*/React.createElement("div", {
94
+ "data-theme": "dark:dark",
95
+ "data-color-mode": "dark",
96
+ style: theme === 'split' ? _objectSpread(_objectSpread({}, splitColumnStyles), {}, {
97
+ inset: '0px 0px 0px 50vw'
98
+ }) : _objectSpread(_objectSpread({}, stackColumnStyles), {}, {
99
+ inset: '50% 0px 0px 0px'
100
+ })
101
+ }, story));
111
102
  }
103
+ return /*#__PURE__*/React.createElement("div", null, story);
112
104
  }
113
-
114
105
  return renderStory();
115
106
  }
116
107
  });
package/dist/esm/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/storybook-addon-design-system",
3
- "version": "0.3.8",
3
+ "version": "0.4.0",
4
4
  "sideEffects": false
5
5
  }
package/dist/types/tokens/decorator.d.ts CHANGED
@@ -1,4 +1,2 @@
1
- import '@atlaskit/tokens/css/atlassian-light.css';
2
- import '@atlaskit/tokens/css/atlassian-dark.css';
3
1
  declare const withDesignTokens: (...args: any) => any;
4
2
  export default withDesignTokens;
package/dist/types/tokens/types.d.ts CHANGED
@@ -1 +1 @@
1
- export declare type Themes = 'light' | 'dark' | 'none' | 'split' | 'stack';
1
+ export declare type Themes = 'light' | 'dark' | 'auto' | 'none' | 'split' | 'stack';
package/package.json CHANGED
@@ -1,13 +1,12 @@
1
1
  {
2
2
  "name": "@atlaskit/storybook-addon-design-system",
3
- "version": "0.3.8",
3
+ "version": "0.4.0",
4
4
  "description": "Design token storybook addon",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "publishConfig": {
7
7
  "registry": "https://registry.npmjs.org/"
8
8
  },
9
9
  "atlassian": {
10
- "disableProductCI": true,
11
10
  "team": "Design System Team",
12
11
  "releaseModel": "scheduled",
13
12
  "website": {
@@ -37,7 +36,7 @@
37
36
  ".": "./src/index.tsx"
38
37
  },
39
38
  "dependencies": {
40
- "@atlaskit/tokens": "^0.13.0",
39
+ "@atlaskit/tokens": "^1.3.0",
41
40
  "@babel/runtime": "^7.0.0",
42
41
  "@storybook/addons": "^6.4.0",
43
42
  "@storybook/api": "^6.4.0",
@@ -56,8 +55,10 @@
56
55
  "@repo/internal": {
57
56
  "dom-events": "use-bind-event-listener",
58
57
  "design-system": "v1",
58
+ "design-tokens": [
59
+ "color"
60
+ ],
59
61
  "deprecation": "no-deprecated-imports",
60
- "theming": "tokens",
61
62
  "styling": "emotion"
62
63
  }
63
64
  },
package/report.api.md CHANGED
@@ -1,4 +1,4 @@
1
- <!-- API Report Version: 2.2 -->
1
+ <!-- API Report Version: 2.3 -->
2
2
 
3
3
  ## API Report File for "@atlaskit/storybook-addon-design-system"
4
4
 
@@ -8,6 +8,7 @@
8
8
  ### Table of contents
9
9
 
10
10
  - [Main Entry Types](#main-entry-types)
11
+ - [Peer Dependencies](#peer-dependencies)
11
12
 
12
13
  ### Main Entry Types
13
14
 
@@ -21,3 +22,15 @@ export const withDesignTokens: (...args: any) => any;
21
22
  ```
22
23
 
23
24
  <!--SECTION END: Main Entry Types-->
25
+
26
+ ### Peer Dependencies
27
+
28
+ <!--SECTION START: Peer Dependencies-->
29
+
30
+ ```json
31
+ {
32
+ "react": "^16.8.0"
33
+ }
34
+ ```
35
+
36
+ <!--SECTION END: Peer Dependencies-->