@atlaskit/storybook-addon-design-system 0.2.5 → 0.3.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 +22 -0
- package/constellation/index/examples.mdx +5 -0
- package/constellation/index/props.mdx +0 -0
- package/constellation/index/usage.mdx +5 -0
- package/dist/cjs/tokens/decorator.js +15 -12
- package/dist/cjs/version.json +1 -1
- package/dist/es2019/tokens/decorator.js +15 -16
- package/dist/es2019/version.json +1 -1
- package/dist/esm/tokens/decorator.js +17 -16
- package/dist/esm/version.json +1 -1
- package/package.json +11 -4
- package/report.api.md +9 -0
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,27 @@
|
|
|
1
1
|
# @atlaskit/storybook-addon-design-system
|
|
2
2
|
|
|
3
|
+
## 0.3.1
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [`6dd7050ad7a`](https://bitbucket.org/atlassian/atlassian-frontend/commits/6dd7050ad7a) - Reimplement the style tag hack required for enabling split & stack view in the Storybook addon
|
|
8
|
+
|
|
9
|
+
## 0.3.0
|
|
10
|
+
|
|
11
|
+
### Minor Changes
|
|
12
|
+
|
|
13
|
+
- [`6c65a3147c1`](https://bitbucket.org/atlassian/atlassian-frontend/commits/6c65a3147c1) - Removes root selector hack from lightmode, this is no longer necessary since the default theme no longer enables tokens by default
|
|
14
|
+
|
|
15
|
+
### Patch Changes
|
|
16
|
+
|
|
17
|
+
- Updated dependencies
|
|
18
|
+
|
|
19
|
+
## 0.2.6
|
|
20
|
+
|
|
21
|
+
### Patch Changes
|
|
22
|
+
|
|
23
|
+
- [`4942487a9f6`](https://bitbucket.org/atlassian/atlassian-frontend/commits/4942487a9f6) - Fixes internal representation of CSS entrypoints for themes. This is an internal change only and does not effect public APIs.
|
|
24
|
+
|
|
3
25
|
## 0.2.5
|
|
4
26
|
|
|
5
27
|
### Patch Changes
|
|
File without changes
|
|
@@ -51,6 +51,15 @@ var stackColumnStyles = {
|
|
|
51
51
|
background: (0, _tokens.token)('color.background.default'),
|
|
52
52
|
color: (0, _tokens.token)('color.text.highEmphasis')
|
|
53
53
|
};
|
|
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, theme) {
|
|
60
|
+
return style.innerText.replace("html[data-theme=\"".concat(theme, "\"]"), "html[data-theme=\"".concat(theme, "\"],.ads-theme-override[data-theme=\"").concat(theme, "\"]"));
|
|
61
|
+
};
|
|
62
|
+
|
|
54
63
|
var withDesignTokens = (0, _addons.makeDecorator)({
|
|
55
64
|
name: _constants.DECORATOR_ID,
|
|
56
65
|
parameterName: _constants.DECORATOR_PARAM,
|
|
@@ -58,19 +67,13 @@ var withDesignTokens = (0, _addons.makeDecorator)({
|
|
|
58
67
|
var theme = context.globals.adsTheme; // eslint-disable-next-line react-hooks/rules-of-hooks
|
|
59
68
|
|
|
60
69
|
(0, _addons.useEffect)(function () {
|
|
70
|
+
var adsThemes = ['light', 'dark'];
|
|
61
71
|
document.querySelectorAll('style').forEach(function (el) {
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
}
|
|
68
|
-
});
|
|
69
|
-
document.querySelectorAll('style').forEach(function (el) {
|
|
70
|
-
if (el.innerText.includes('html[data-theme="dark"]')) {
|
|
71
|
-
// HACK: Allows us to apply the theme to children elements
|
|
72
|
-
el.innerText = el.textContent.replace('html[data-theme="dark"]', 'html[data-theme="dark"],.ads-theme-override[data-theme="dark"]');
|
|
73
|
-
}
|
|
72
|
+
adsThemes.forEach(function (adsTheme) {
|
|
73
|
+
if (el.innerText.includes("html[data-theme=\"".concat(adsTheme, "\"] {"))) {
|
|
74
|
+
hackThemeOverrideOnStyleElement(el, adsTheme);
|
|
75
|
+
}
|
|
76
|
+
});
|
|
74
77
|
});
|
|
75
78
|
}, [context.id]); // eslint-disable-next-line react-hooks/rules-of-hooks
|
|
76
79
|
|
package/dist/cjs/version.json
CHANGED
|
@@ -1,9 +1,7 @@
|
|
|
1
1
|
import React, { Fragment } from 'react';
|
|
2
2
|
import { makeDecorator, useEffect } from '@storybook/addons';
|
|
3
|
-
import { token } from '@atlaskit/tokens';
|
|
4
|
-
|
|
5
|
-
import '@atlaskit/tokens/css/atlassian-light.css'; // eslint-disable-next-line
|
|
6
|
-
|
|
3
|
+
import { token } from '@atlaskit/tokens';
|
|
4
|
+
import '@atlaskit/tokens/css/atlassian-light.css';
|
|
7
5
|
import '@atlaskit/tokens/css/atlassian-dark.css';
|
|
8
6
|
import { DECORATOR_ID, DECORATOR_PARAM } from './constants';
|
|
9
7
|
const splitColumnStyles = {
|
|
@@ -26,6 +24,13 @@ const stackColumnStyles = {
|
|
|
26
24
|
background: token('color.background.default'),
|
|
27
25
|
color: token('color.text.highEmphasis')
|
|
28
26
|
};
|
|
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, theme) => style.innerText.replace(`html[data-theme="${theme}"]`, `html[data-theme="${theme}"],.ads-theme-override[data-theme="${theme}"]`);
|
|
33
|
+
|
|
29
34
|
const withDesignTokens = makeDecorator({
|
|
30
35
|
name: DECORATOR_ID,
|
|
31
36
|
parameterName: DECORATOR_PARAM,
|
|
@@ -33,19 +38,13 @@ const withDesignTokens = makeDecorator({
|
|
|
33
38
|
const theme = context.globals.adsTheme; // eslint-disable-next-line react-hooks/rules-of-hooks
|
|
34
39
|
|
|
35
40
|
useEffect(() => {
|
|
41
|
+
const adsThemes = ['light', 'dark'];
|
|
36
42
|
document.querySelectorAll('style').forEach(el => {
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
}
|
|
43
|
-
});
|
|
44
|
-
document.querySelectorAll('style').forEach(el => {
|
|
45
|
-
if (el.innerText.includes('html[data-theme="dark"]')) {
|
|
46
|
-
// HACK: Allows us to apply the theme to children elements
|
|
47
|
-
el.innerText = el.textContent.replace('html[data-theme="dark"]', 'html[data-theme="dark"],.ads-theme-override[data-theme="dark"]');
|
|
48
|
-
}
|
|
43
|
+
adsThemes.forEach(adsTheme => {
|
|
44
|
+
if (el.innerText.includes(`html[data-theme="${adsTheme}"] {`)) {
|
|
45
|
+
hackThemeOverrideOnStyleElement(el, adsTheme);
|
|
46
|
+
}
|
|
47
|
+
});
|
|
49
48
|
});
|
|
50
49
|
}, [context.id]); // eslint-disable-next-line react-hooks/rules-of-hooks
|
|
51
50
|
|
package/dist/es2019/version.json
CHANGED
|
@@ -6,10 +6,8 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
|
|
|
6
6
|
|
|
7
7
|
import React, { Fragment } from 'react';
|
|
8
8
|
import { makeDecorator, useEffect } from '@storybook/addons';
|
|
9
|
-
import { token } from '@atlaskit/tokens';
|
|
10
|
-
|
|
11
|
-
import '@atlaskit/tokens/css/atlassian-light.css'; // eslint-disable-next-line
|
|
12
|
-
|
|
9
|
+
import { token } from '@atlaskit/tokens';
|
|
10
|
+
import '@atlaskit/tokens/css/atlassian-light.css';
|
|
13
11
|
import '@atlaskit/tokens/css/atlassian-dark.css';
|
|
14
12
|
import { DECORATOR_ID, DECORATOR_PARAM } from './constants';
|
|
15
13
|
var splitColumnStyles = {
|
|
@@ -32,6 +30,15 @@ var stackColumnStyles = {
|
|
|
32
30
|
background: token('color.background.default'),
|
|
33
31
|
color: token('color.text.highEmphasis')
|
|
34
32
|
};
|
|
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, theme) {
|
|
39
|
+
return style.innerText.replace("html[data-theme=\"".concat(theme, "\"]"), "html[data-theme=\"".concat(theme, "\"],.ads-theme-override[data-theme=\"").concat(theme, "\"]"));
|
|
40
|
+
};
|
|
41
|
+
|
|
35
42
|
var withDesignTokens = makeDecorator({
|
|
36
43
|
name: DECORATOR_ID,
|
|
37
44
|
parameterName: DECORATOR_PARAM,
|
|
@@ -39,19 +46,13 @@ var withDesignTokens = makeDecorator({
|
|
|
39
46
|
var theme = context.globals.adsTheme; // eslint-disable-next-line react-hooks/rules-of-hooks
|
|
40
47
|
|
|
41
48
|
useEffect(function () {
|
|
49
|
+
var adsThemes = ['light', 'dark'];
|
|
42
50
|
document.querySelectorAll('style').forEach(function (el) {
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
}
|
|
49
|
-
});
|
|
50
|
-
document.querySelectorAll('style').forEach(function (el) {
|
|
51
|
-
if (el.innerText.includes('html[data-theme="dark"]')) {
|
|
52
|
-
// HACK: Allows us to apply the theme to children elements
|
|
53
|
-
el.innerText = el.textContent.replace('html[data-theme="dark"]', 'html[data-theme="dark"],.ads-theme-override[data-theme="dark"]');
|
|
54
|
-
}
|
|
51
|
+
adsThemes.forEach(function (adsTheme) {
|
|
52
|
+
if (el.innerText.includes("html[data-theme=\"".concat(adsTheme, "\"] {"))) {
|
|
53
|
+
hackThemeOverrideOnStyleElement(el, adsTheme);
|
|
54
|
+
}
|
|
55
|
+
});
|
|
55
56
|
});
|
|
56
57
|
}, [context.id]); // eslint-disable-next-line react-hooks/rules-of-hooks
|
|
57
58
|
|
package/dist/esm/version.json
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/storybook-addon-design-system",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.3.1",
|
|
4
4
|
"description": "Design token storybook addon",
|
|
5
5
|
"author": "Atlassian Pty Ltd",
|
|
6
6
|
"publishConfig": {
|
|
@@ -8,9 +8,14 @@
|
|
|
8
8
|
},
|
|
9
9
|
"atlassian": {
|
|
10
10
|
"team": "Design System Team",
|
|
11
|
-
"releaseModel": "scheduled"
|
|
11
|
+
"releaseModel": "scheduled",
|
|
12
|
+
"website": {
|
|
13
|
+
"name": "Storybook addon",
|
|
14
|
+
"category": "Tooling",
|
|
15
|
+
"draft": true
|
|
16
|
+
}
|
|
12
17
|
},
|
|
13
|
-
"repository": "https://bitbucket.org/atlassian/atlassian-frontend",
|
|
18
|
+
"repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
|
|
14
19
|
"main": "dist/cjs/index.js",
|
|
15
20
|
"module": "dist/esm/index.js",
|
|
16
21
|
"module:es2019": "dist/es2019/index.js",
|
|
@@ -21,7 +26,7 @@
|
|
|
21
26
|
".": "./src/index.tsx"
|
|
22
27
|
},
|
|
23
28
|
"dependencies": {
|
|
24
|
-
"@atlaskit/tokens": "^0.
|
|
29
|
+
"@atlaskit/tokens": "^0.10.0",
|
|
25
30
|
"@babel/runtime": "^7.0.0",
|
|
26
31
|
"@storybook/addons": "^6.4.0",
|
|
27
32
|
"@storybook/api": "^6.4.0",
|
|
@@ -38,10 +43,12 @@
|
|
|
38
43
|
"import-structure": "atlassian-conventions"
|
|
39
44
|
},
|
|
40
45
|
"@repo/internal": {
|
|
46
|
+
"dom-events": "use-bind-event-listener",
|
|
41
47
|
"design-system": "v1",
|
|
42
48
|
"deprecation": "no-deprecated-imports",
|
|
43
49
|
"styling": "emotion"
|
|
44
50
|
}
|
|
45
51
|
},
|
|
52
|
+
"homepage": "https://atlassian.design/components/storybook-addon-design-system",
|
|
46
53
|
"prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1"
|
|
47
54
|
}
|
package/report.api.md
ADDED