@atlaskit/storybook-addon-design-system 0.2.6 → 0.3.2
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/dist/cjs/tokens/decorator.js +15 -12
- package/dist/cjs/version.json +1 -1
- package/dist/es2019/tokens/decorator.js +15 -12
- package/dist/es2019/version.json +1 -1
- package/dist/esm/tokens/decorator.js +15 -12
- package/dist/esm/version.json +1 -1
- package/package.json +4 -3
- 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.2
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [`d4be43fdc44`](https://bitbucket.org/atlassian/atlassian-frontend/commits/d4be43fdc44) - Set the innerText in our hack correctly - oops!
|
|
8
|
+
|
|
9
|
+
## 0.3.1
|
|
10
|
+
|
|
11
|
+
### Patch Changes
|
|
12
|
+
|
|
13
|
+
- [`6dd7050ad7a`](https://bitbucket.org/atlassian/atlassian-frontend/commits/6dd7050ad7a) - Reimplement the style tag hack required for enabling split & stack view in the Storybook addon
|
|
14
|
+
|
|
15
|
+
## 0.3.0
|
|
16
|
+
|
|
17
|
+
### Minor Changes
|
|
18
|
+
|
|
19
|
+
- [`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
|
|
20
|
+
|
|
21
|
+
### Patch Changes
|
|
22
|
+
|
|
23
|
+
- Updated dependencies
|
|
24
|
+
|
|
3
25
|
## 0.2.6
|
|
4
26
|
|
|
5
27
|
### Patch 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
|
+
style.innerText = style.textContent.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
|
@@ -24,6 +24,15 @@ const stackColumnStyles = {
|
|
|
24
24
|
background: token('color.background.default'),
|
|
25
25
|
color: token('color.text.highEmphasis')
|
|
26
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) => {
|
|
33
|
+
style.innerText = style.textContent.replace(`html[data-theme="${theme}"]`, `html[data-theme="${theme}"],.ads-theme-override[data-theme="${theme}"]`);
|
|
34
|
+
};
|
|
35
|
+
|
|
27
36
|
const withDesignTokens = makeDecorator({
|
|
28
37
|
name: DECORATOR_ID,
|
|
29
38
|
parameterName: DECORATOR_PARAM,
|
|
@@ -31,19 +40,13 @@ const withDesignTokens = makeDecorator({
|
|
|
31
40
|
const theme = context.globals.adsTheme; // eslint-disable-next-line react-hooks/rules-of-hooks
|
|
32
41
|
|
|
33
42
|
useEffect(() => {
|
|
43
|
+
const adsThemes = ['light', 'dark'];
|
|
34
44
|
document.querySelectorAll('style').forEach(el => {
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
}
|
|
41
|
-
});
|
|
42
|
-
document.querySelectorAll('style').forEach(el => {
|
|
43
|
-
if (el.innerText.includes('html[data-theme="dark"]')) {
|
|
44
|
-
// HACK: Allows us to apply the theme to children elements
|
|
45
|
-
el.innerText = el.textContent.replace('html[data-theme="dark"]', 'html[data-theme="dark"],.ads-theme-override[data-theme="dark"]');
|
|
46
|
-
}
|
|
45
|
+
adsThemes.forEach(adsTheme => {
|
|
46
|
+
if (el.innerText.includes(`html[data-theme="${adsTheme}"] {`)) {
|
|
47
|
+
hackThemeOverrideOnStyleElement(el, adsTheme);
|
|
48
|
+
}
|
|
49
|
+
});
|
|
47
50
|
});
|
|
48
51
|
}, [context.id]); // eslint-disable-next-line react-hooks/rules-of-hooks
|
|
49
52
|
|
package/dist/es2019/version.json
CHANGED
|
@@ -30,6 +30,15 @@ var stackColumnStyles = {
|
|
|
30
30
|
background: token('color.background.default'),
|
|
31
31
|
color: token('color.text.highEmphasis')
|
|
32
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
|
+
style.innerText = style.textContent.replace("html[data-theme=\"".concat(theme, "\"]"), "html[data-theme=\"".concat(theme, "\"],.ads-theme-override[data-theme=\"").concat(theme, "\"]"));
|
|
40
|
+
};
|
|
41
|
+
|
|
33
42
|
var withDesignTokens = makeDecorator({
|
|
34
43
|
name: DECORATOR_ID,
|
|
35
44
|
parameterName: DECORATOR_PARAM,
|
|
@@ -37,19 +46,13 @@ var withDesignTokens = makeDecorator({
|
|
|
37
46
|
var theme = context.globals.adsTheme; // eslint-disable-next-line react-hooks/rules-of-hooks
|
|
38
47
|
|
|
39
48
|
useEffect(function () {
|
|
49
|
+
var adsThemes = ['light', 'dark'];
|
|
40
50
|
document.querySelectorAll('style').forEach(function (el) {
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
}
|
|
47
|
-
});
|
|
48
|
-
document.querySelectorAll('style').forEach(function (el) {
|
|
49
|
-
if (el.innerText.includes('html[data-theme="dark"]')) {
|
|
50
|
-
// HACK: Allows us to apply the theme to children elements
|
|
51
|
-
el.innerText = el.textContent.replace('html[data-theme="dark"]', 'html[data-theme="dark"],.ads-theme-override[data-theme="dark"]');
|
|
52
|
-
}
|
|
51
|
+
adsThemes.forEach(function (adsTheme) {
|
|
52
|
+
if (el.innerText.includes("html[data-theme=\"".concat(adsTheme, "\"] {"))) {
|
|
53
|
+
hackThemeOverrideOnStyleElement(el, adsTheme);
|
|
54
|
+
}
|
|
55
|
+
});
|
|
53
56
|
});
|
|
54
57
|
}, [context.id]); // eslint-disable-next-line react-hooks/rules-of-hooks
|
|
55
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.2
|
|
3
|
+
"version": "0.3.2",
|
|
4
4
|
"description": "Design token storybook addon",
|
|
5
5
|
"author": "Atlassian Pty Ltd",
|
|
6
6
|
"publishConfig": {
|
|
@@ -15,7 +15,7 @@
|
|
|
15
15
|
"draft": true
|
|
16
16
|
}
|
|
17
17
|
},
|
|
18
|
-
"repository": "https://bitbucket.org/atlassian/atlassian-frontend",
|
|
18
|
+
"repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
|
|
19
19
|
"main": "dist/cjs/index.js",
|
|
20
20
|
"module": "dist/esm/index.js",
|
|
21
21
|
"module:es2019": "dist/es2019/index.js",
|
|
@@ -26,7 +26,7 @@
|
|
|
26
26
|
".": "./src/index.tsx"
|
|
27
27
|
},
|
|
28
28
|
"dependencies": {
|
|
29
|
-
"@atlaskit/tokens": "^0.
|
|
29
|
+
"@atlaskit/tokens": "^0.10.0",
|
|
30
30
|
"@babel/runtime": "^7.0.0",
|
|
31
31
|
"@storybook/addons": "^6.4.0",
|
|
32
32
|
"@storybook/api": "^6.4.0",
|
|
@@ -43,6 +43,7 @@
|
|
|
43
43
|
"import-structure": "atlassian-conventions"
|
|
44
44
|
},
|
|
45
45
|
"@repo/internal": {
|
|
46
|
+
"dom-events": "use-bind-event-listener",
|
|
46
47
|
"design-system": "v1",
|
|
47
48
|
"deprecation": "no-deprecated-imports",
|
|
48
49
|
"styling": "emotion"
|
package/report.api.md
ADDED