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

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/storybook-addon-design-system
 
+## 0.3.1
+
+### Patch Changes
+
+- [`6dd7050ad7a`](https://bitbucket.org/atlassian/atlassian-frontend/commits/6dd7050ad7a) - Reimplement the style tag hack required for enabling split & stack view in the Storybook addon
+
 ## 0.3.0
 
 ### Minor Changes

package/dist/cjs/tokens/decorator.js

@@ -51,12 +51,32 @@ var stackColumnStyles = {
   background: (0, _tokens.token)('color.background.default'),
   color: (0, _tokens.token)('color.text.highEmphasis')
 };
+/**
+ * Forcefully retarget the token declarations to apply to our hacked class,
+ * .ads-theme-override, for split and stack views.
+ */
+
+var hackThemeOverrideOnStyleElement = function hackThemeOverrideOnStyleElement(style, theme) {
+  return style.innerText.replace("html[data-theme=\"".concat(theme, "\"]"), "html[data-theme=\"".concat(theme, "\"],.ads-theme-override[data-theme=\"").concat(theme, "\"]"));
+};
+
 var withDesignTokens = (0, _addons.makeDecorator)({
   name: _constants.DECORATOR_ID,
   parameterName: _constants.DECORATOR_PARAM,
   wrapper: function wrapper(storyFn, context) {
     var theme = context.globals.adsTheme; // eslint-disable-next-line react-hooks/rules-of-hooks
 
+    (0, _addons.useEffect)(function () {
+      var adsThemes = ['light', 'dark'];
+      document.querySelectorAll('style').forEach(function (el) {
+        adsThemes.forEach(function (adsTheme) {
+          if (el.innerText.includes("html[data-theme=\"".concat(adsTheme, "\"] {"))) {
+            hackThemeOverrideOnStyleElement(el, adsTheme);
+          }
+        });
+      });
+    }, [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.3.0",
+	"version": "0.3.1",
 	"sideEffects": false
 }

package/dist/es2019/tokens/decorator.js

@@ -24,12 +24,30 @@ const stackColumnStyles = {
   background: token('color.background.default'),
   color: token('color.text.highEmphasis')
 };
+/**
+ * Forcefully retarget the token declarations to apply to our hacked class,
+ * .ads-theme-override, for split and stack views.
+ */
+
+const hackThemeOverrideOnStyleElement = (style, theme) => style.innerText.replace(`html[data-theme="${theme}"]`, `html[data-theme="${theme}"],.ads-theme-override[data-theme="${theme}"]`);
+
 const withDesignTokens = makeDecorator({
   name: DECORATOR_ID,
   parameterName: DECORATOR_PARAM,
   wrapper: (storyFn, context) => {
     const theme = context.globals.adsTheme; // eslint-disable-next-line react-hooks/rules-of-hooks
 
+    useEffect(() => {
+      const adsThemes = ['light', 'dark'];
+      document.querySelectorAll('style').forEach(el => {
+        adsThemes.forEach(adsTheme => {
+          if (el.innerText.includes(`html[data-theme="${adsTheme}"] {`)) {
+            hackThemeOverrideOnStyleElement(el, adsTheme);
+          }
+        });
+      });
+    }, [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.3.0",
+	"version": "0.3.1",
 	"sideEffects": false
 }

package/dist/esm/tokens/decorator.js

@@ -30,12 +30,32 @@ var stackColumnStyles = {
   background: token('color.background.default'),
   color: token('color.text.highEmphasis')
 };
+/**
+ * Forcefully retarget the token declarations to apply to our hacked class,
+ * .ads-theme-override, for split and stack views.
+ */
+
+var hackThemeOverrideOnStyleElement = function hackThemeOverrideOnStyleElement(style, theme) {
+  return style.innerText.replace("html[data-theme=\"".concat(theme, "\"]"), "html[data-theme=\"".concat(theme, "\"],.ads-theme-override[data-theme=\"").concat(theme, "\"]"));
+};
+
 var withDesignTokens = makeDecorator({
   name: DECORATOR_ID,
   parameterName: DECORATOR_PARAM,
   wrapper: function wrapper(storyFn, context) {
     var theme = context.globals.adsTheme; // eslint-disable-next-line react-hooks/rules-of-hooks
 
+    useEffect(function () {
+      var adsThemes = ['light', 'dark'];
+      document.querySelectorAll('style').forEach(function (el) {
+        adsThemes.forEach(function (adsTheme) {
+          if (el.innerText.includes("html[data-theme=\"".concat(adsTheme, "\"] {"))) {
+            hackThemeOverrideOnStyleElement(el, adsTheme);
+          }
+        });
+      });
+    }, [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.3.0",
+	"version": "0.3.1",
 	"sideEffects": false
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/storybook-addon-design-system",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "description": "Design token storybook addon",
   "author": "Atlassian Pty Ltd",
   "publishConfig": {
@@ -15,7 +15,7 @@
       "draft": true
     }
   },
-  "repository": "https://bitbucket.org/atlassian/atlassian-frontend",
+  "repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "module:es2019": "dist/es2019/index.js",
@@ -43,6 +43,7 @@
       "import-structure": "atlassian-conventions"
     },
     "@repo/internal": {
+      "dom-events": "use-bind-event-listener",
       "design-system": "v1",
       "deprecation": "no-deprecated-imports",
       "styling": "emotion"

package/report.api.md

@@ -0,0 +1,9 @@
+## API Report File for "@atlaskit/storybook-addon-design-system"
+
+> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
+
+```ts
+export declare const withDesignTokens: (...args: any) => any;
+
+export {};
+```