@atlaskit/storybook-addon-design-system 0.2.4 → 0.3.0

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @atlaskit/storybook-addon-design-system
 
+## 0.3.0
+
+### Minor Changes
+
+- [`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
+
+### Patch Changes
+
+- Updated dependencies
+
+## 0.2.6
+
+### Patch Changes
+
+- [`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.
+
+## 0.2.5
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 0.2.4
 
 ### Patch Changes

package/constellation/index/examples.mdx

@@ -0,0 +1,5 @@
+---
+order: 0
+---
+
+examples

package/constellation/index/usage.mdx

@@ -0,0 +1,5 @@
+---
+order: 2
+---
+
+usage

package/dist/cjs/tokens/decorator.js

@@ -57,23 +57,6 @@ var withDesignTokens = (0, _addons.makeDecorator)({
   wrapper: function wrapper(storyFn, context) {
     var theme = context.globals.adsTheme; // eslint-disable-next-line react-hooks/rules-of-hooks
 
-    (0, _addons.useEffect)(function () {
-      document.querySelectorAll('style').forEach(function (el) {
-        if (el.innerText.includes(':root, html[data-theme="light"]')) {
-          // HACK: Allows us to disable the light mode style since it uses root:
-          el.innerText = el.textContent.replace(':root,', ''); // HACK: Allows us to apply the theme to children elements
-
-          el.innerText = el.textContent.replace('html[data-theme="light"]', 'html[data-theme="light"],.ads-theme-override[data-theme="light"]');
-        }
-      });
-      document.querySelectorAll('style').forEach(function (el) {
-        if (el.innerText.includes('html[data-theme="dark"]')) {
-          // HACK: Allows us to apply the theme to children elements
-          el.innerText = el.textContent.replace('html[data-theme="dark"]', 'html[data-theme="dark"],.ads-theme-override[data-theme="dark"]');
-        }
-      });
-    }, [context.id]); // eslint-disable-next-line react-hooks/rules-of-hooks
-
     (0, _addons.useEffect)(function () {
       if (!theme || theme === 'none') {
         delete document.documentElement.dataset.theme;

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/storybook-addon-design-system",
-	"version": "0.2.4",
+	"version": "0.3.0",
 	"sideEffects": false
 }

package/dist/es2019/tokens/decorator.js

@@ -1,9 +1,7 @@
 import React, { Fragment } from 'react';
 import { makeDecorator, useEffect } from '@storybook/addons';
-import { token } from '@atlaskit/tokens'; // eslint-disable-next-line
-
-import '@atlaskit/tokens/css/atlassian-light.css'; // eslint-disable-next-line
-
+import { token } from '@atlaskit/tokens';
+import '@atlaskit/tokens/css/atlassian-light.css';
 import '@atlaskit/tokens/css/atlassian-dark.css';
 import { DECORATOR_ID, DECORATOR_PARAM } from './constants';
 const splitColumnStyles = {
@@ -32,23 +30,6 @@ const withDesignTokens = makeDecorator({
   wrapper: (storyFn, context) => {
     const theme = context.globals.adsTheme; // eslint-disable-next-line react-hooks/rules-of-hooks
 
-    useEffect(() => {
-      document.querySelectorAll('style').forEach(el => {
-        if (el.innerText.includes(':root, html[data-theme="light"]')) {
-          // HACK: Allows us to disable the light mode style since it uses root:
-          el.innerText = el.textContent.replace(':root,', ''); // HACK: Allows us to apply the theme to children elements
-
-          el.innerText = el.textContent.replace('html[data-theme="light"]', 'html[data-theme="light"],.ads-theme-override[data-theme="light"]');
-        }
-      });
-      document.querySelectorAll('style').forEach(el => {
-        if (el.innerText.includes('html[data-theme="dark"]')) {
-          // HACK: Allows us to apply the theme to children elements
-          el.innerText = el.textContent.replace('html[data-theme="dark"]', 'html[data-theme="dark"],.ads-theme-override[data-theme="dark"]');
-        }
-      });
-    }, [context.id]); // eslint-disable-next-line react-hooks/rules-of-hooks
-
     useEffect(() => {
       if (!theme || theme === 'none') {
         delete document.documentElement.dataset.theme;

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/storybook-addon-design-system",
-	"version": "0.2.4",
+	"version": "0.3.0",
 	"sideEffects": false
 }

package/dist/esm/tokens/decorator.js

@@ -6,10 +6,8 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 import React, { Fragment } from 'react';
 import { makeDecorator, useEffect } from '@storybook/addons';
-import { token } from '@atlaskit/tokens'; // eslint-disable-next-line
-
-import '@atlaskit/tokens/css/atlassian-light.css'; // eslint-disable-next-line
-
+import { token } from '@atlaskit/tokens';
+import '@atlaskit/tokens/css/atlassian-light.css';
 import '@atlaskit/tokens/css/atlassian-dark.css';
 import { DECORATOR_ID, DECORATOR_PARAM } from './constants';
 var splitColumnStyles = {
@@ -38,23 +36,6 @@ var withDesignTokens = makeDecorator({
   wrapper: function wrapper(storyFn, context) {
     var theme = context.globals.adsTheme; // eslint-disable-next-line react-hooks/rules-of-hooks
 
-    useEffect(function () {
-      document.querySelectorAll('style').forEach(function (el) {
-        if (el.innerText.includes(':root, html[data-theme="light"]')) {
-          // HACK: Allows us to disable the light mode style since it uses root:
-          el.innerText = el.textContent.replace(':root,', ''); // HACK: Allows us to apply the theme to children elements
-
-          el.innerText = el.textContent.replace('html[data-theme="light"]', 'html[data-theme="light"],.ads-theme-override[data-theme="light"]');
-        }
-      });
-      document.querySelectorAll('style').forEach(function (el) {
-        if (el.innerText.includes('html[data-theme="dark"]')) {
-          // HACK: Allows us to apply the theme to children elements
-          el.innerText = el.textContent.replace('html[data-theme="dark"]', 'html[data-theme="dark"],.ads-theme-override[data-theme="dark"]');
-        }
-      });
-    }, [context.id]); // eslint-disable-next-line react-hooks/rules-of-hooks
-
     useEffect(function () {
       if (!theme || theme === 'none') {
         delete document.documentElement.dataset.theme;

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/storybook-addon-design-system",
-	"version": "0.2.4",
+	"version": "0.3.0",
 	"sideEffects": false
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/storybook-addon-design-system",
-  "version": "0.2.4",
+  "version": "0.3.0",
   "description": "Design token storybook addon",
   "author": "Atlassian Pty Ltd",
   "publishConfig": {
@@ -8,7 +8,12 @@
   },
   "atlassian": {
     "team": "Design System Team",
-    "releaseModel": "scheduled"
+    "releaseModel": "scheduled",
+    "website": {
+      "name": "Storybook addon",
+      "category": "Tooling",
+      "draft": true
+    }
   },
   "repository": "https://bitbucket.org/atlassian/atlassian-frontend",
   "main": "dist/cjs/index.js",
@@ -21,7 +26,7 @@
     ".": "./src/index.tsx"
   },
   "dependencies": {
-    "@atlaskit/tokens": "^0.8.0",
+    "@atlaskit/tokens": "^0.10.0",
     "@babel/runtime": "^7.0.0",
     "@storybook/addons": "^6.4.0",
     "@storybook/api": "^6.4.0",
@@ -43,5 +48,6 @@
       "styling": "emotion"
     }
   },
+  "homepage": "https://atlassian.design/components/storybook-addon-design-system",
   "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1"
 }