@atlaskit/storybook-addon-design-system 0.2.6 → 0.3.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.
package/CHANGELOG.md CHANGED
@@ -1,5 +1,15 @@
1
1
  # @atlaskit/storybook-addon-design-system
2
2
 
3
+ ## 0.3.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [`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
8
+
9
+ ### Patch Changes
10
+
11
+ - Updated dependencies
12
+
3
13
  ## 0.2.6
4
14
 
5
15
  ### Patch Changes
@@ -57,23 +57,6 @@ var withDesignTokens = (0, _addons.makeDecorator)({
57
57
  wrapper: function wrapper(storyFn, context) {
58
58
  var theme = context.globals.adsTheme; // eslint-disable-next-line react-hooks/rules-of-hooks
59
59
 
60
- (0, _addons.useEffect)(function () {
61
- document.querySelectorAll('style').forEach(function (el) {
62
- if (el.innerText.includes(':root, html[data-theme="light"]')) {
63
- // HACK: Allows us to disable the light mode style since it uses root:
64
- el.innerText = el.textContent.replace(':root,', ''); // HACK: Allows us to apply the theme to children elements
65
-
66
- el.innerText = el.textContent.replace('html[data-theme="light"]', 'html[data-theme="light"],.ads-theme-override[data-theme="light"]');
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
- }
74
- });
75
- }, [context.id]); // eslint-disable-next-line react-hooks/rules-of-hooks
76
-
77
60
  (0, _addons.useEffect)(function () {
78
61
  if (!theme || theme === 'none') {
79
62
  delete document.documentElement.dataset.theme;
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/storybook-addon-design-system",
3
- "version": "0.2.6",
3
+ "version": "0.3.0",
4
4
  "sideEffects": false
5
5
  }
@@ -30,23 +30,6 @@ const withDesignTokens = makeDecorator({
30
30
  wrapper: (storyFn, context) => {
31
31
  const theme = context.globals.adsTheme; // eslint-disable-next-line react-hooks/rules-of-hooks
32
32
 
33
- useEffect(() => {
34
- document.querySelectorAll('style').forEach(el => {
35
- if (el.innerText.includes(':root, html[data-theme="light"]')) {
36
- // HACK: Allows us to disable the light mode style since it uses root:
37
- el.innerText = el.textContent.replace(':root,', ''); // HACK: Allows us to apply the theme to children elements
38
-
39
- el.innerText = el.textContent.replace('html[data-theme="light"]', 'html[data-theme="light"],.ads-theme-override[data-theme="light"]');
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
- }
47
- });
48
- }, [context.id]); // eslint-disable-next-line react-hooks/rules-of-hooks
49
-
50
33
  useEffect(() => {
51
34
  if (!theme || theme === 'none') {
52
35
  delete document.documentElement.dataset.theme;
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/storybook-addon-design-system",
3
- "version": "0.2.6",
3
+ "version": "0.3.0",
4
4
  "sideEffects": false
5
5
  }
@@ -36,23 +36,6 @@ var withDesignTokens = makeDecorator({
36
36
  wrapper: function wrapper(storyFn, context) {
37
37
  var theme = context.globals.adsTheme; // eslint-disable-next-line react-hooks/rules-of-hooks
38
38
 
39
- useEffect(function () {
40
- document.querySelectorAll('style').forEach(function (el) {
41
- if (el.innerText.includes(':root, html[data-theme="light"]')) {
42
- // HACK: Allows us to disable the light mode style since it uses root:
43
- el.innerText = el.textContent.replace(':root,', ''); // HACK: Allows us to apply the theme to children elements
44
-
45
- el.innerText = el.textContent.replace('html[data-theme="light"]', 'html[data-theme="light"],.ads-theme-override[data-theme="light"]');
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
- }
53
- });
54
- }, [context.id]); // eslint-disable-next-line react-hooks/rules-of-hooks
55
-
56
39
  useEffect(function () {
57
40
  if (!theme || theme === 'none') {
58
41
  delete document.documentElement.dataset.theme;
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/storybook-addon-design-system",
3
- "version": "0.2.6",
3
+ "version": "0.3.0",
4
4
  "sideEffects": false
5
5
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/storybook-addon-design-system",
3
- "version": "0.2.6",
3
+ "version": "0.3.0",
4
4
  "description": "Design token storybook addon",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "publishConfig": {
@@ -26,7 +26,7 @@
26
26
  ".": "./src/index.tsx"
27
27
  },
28
28
  "dependencies": {
29
- "@atlaskit/tokens": "^0.9.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",