@atlaskit/storybook-addon-design-system 0.3.3 → 0.3.5

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/storybook-addon-design-system
 
+## 0.3.5
+
+### Patch Changes
+
+- Updated dependencies
+
+## 0.3.4
+
+### Patch Changes
+
+- [`43464a5fb17`](https://bitbucket.org/atlassian/atlassian-frontend/commits/43464a5fb17) - Update split and stack theme settings to use tilde selectors
+
 ## 0.3.3
 
 ### Patch Changes

package/dist/cjs/tokens/decorator.js

@@ -56,8 +56,12 @@ var stackColumnStyles = {
  * .ads-theme-override, for split and stack views.
  */
 
-var hackThemeOverrideOnStyleElement = function hackThemeOverrideOnStyleElement(style, theme) {
-  style.innerText = style.textContent.replace("html[data-theme=\"".concat(theme, "\"]"), "html[data-theme=\"".concat(theme, "\"],.ads-theme-override[data-theme=\"").concat(theme, "\"]"));
+var hackThemeOverrideOnStyleElement = function hackThemeOverrideOnStyleElement(style) {
+  var regex = /html\[(data-theme.?=)"(light|dark)"\](\s{)/i;
+
+  if (regex.test(style.innerText)) {
+    style.innerText = style.textContent.replace(regex, "html[$1\"$2\"], .ads-theme-override[$1\"$2\"]$3");
+  }
 };
 
 var withDesignTokens = (0, _addons.makeDecorator)({
@@ -67,13 +71,8 @@ var withDesignTokens = (0, _addons.makeDecorator)({
     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);
-          }
-        });
+        hackThemeOverrideOnStyleElement(el);
       });
     }, [context.id]); // eslint-disable-next-line react-hooks/rules-of-hooks
 

package/dist/cjs/version.json

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

package/dist/es2019/tokens/decorator.js

@@ -29,8 +29,12 @@ const stackColumnStyles = {
  * .ads-theme-override, for split and stack views.
  */
 
-const hackThemeOverrideOnStyleElement = (style, theme) => {
-  style.innerText = style.textContent.replace(`html[data-theme="${theme}"]`, `html[data-theme="${theme}"],.ads-theme-override[data-theme="${theme}"]`);
+const hackThemeOverrideOnStyleElement = style => {
+  const regex = /html\[(data-theme.?=)"(light|dark)"\](\s{)/i;
+
+  if (regex.test(style.innerText)) {
+    style.innerText = style.textContent.replace(regex, `html[$1"$2"], .ads-theme-override[$1"$2"]$3`);
+  }
 };
 
 const withDesignTokens = makeDecorator({
@@ -40,13 +44,8 @@ const withDesignTokens = makeDecorator({
     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);
-          }
-        });
+        hackThemeOverrideOnStyleElement(el);
       });
     }, [context.id]); // eslint-disable-next-line react-hooks/rules-of-hooks
 

package/dist/es2019/version.json

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

package/dist/esm/tokens/decorator.js

@@ -35,8 +35,12 @@ var stackColumnStyles = {
  * .ads-theme-override, for split and stack views.
  */
 
-var hackThemeOverrideOnStyleElement = function hackThemeOverrideOnStyleElement(style, theme) {
-  style.innerText = style.textContent.replace("html[data-theme=\"".concat(theme, "\"]"), "html[data-theme=\"".concat(theme, "\"],.ads-theme-override[data-theme=\"").concat(theme, "\"]"));
+var hackThemeOverrideOnStyleElement = function hackThemeOverrideOnStyleElement(style) {
+  var regex = /html\[(data-theme.?=)"(light|dark)"\](\s{)/i;
+
+  if (regex.test(style.innerText)) {
+    style.innerText = style.textContent.replace(regex, "html[$1\"$2\"], .ads-theme-override[$1\"$2\"]$3");
+  }
 };
 
 var withDesignTokens = makeDecorator({
@@ -46,13 +50,8 @@ var withDesignTokens = makeDecorator({
     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);
-          }
-        });
+        hackThemeOverrideOnStyleElement(el);
       });
     }, [context.id]); // eslint-disable-next-line react-hooks/rules-of-hooks
 

package/dist/esm/version.json

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/storybook-addon-design-system",
-  "version": "0.3.3",
+  "version": "0.3.5",
   "description": "Design token storybook addon",
   "author": "Atlassian Pty Ltd",
   "publishConfig": {
@@ -35,7 +35,7 @@
     ".": "./src/index.tsx"
   },
   "dependencies": {
-    "@atlaskit/tokens": "^0.10.0",
+    "@atlaskit/tokens": "^0.11.0",
     "@babel/runtime": "^7.0.0",
     "@storybook/addons": "^6.4.0",
     "@storybook/api": "^6.4.0",
@@ -55,7 +55,9 @@
       "dom-events": "use-bind-event-listener",
       "design-system": "v1",
       "deprecation": "no-deprecated-imports",
-      "styling": "emotion"
+      "styling": [
+        "emotion"
+      ]
     }
   },
   "homepage": "https://atlassian.design/components/storybook-addon-design-system",

package/report.api.md

@@ -1,11 +1,16 @@
-## API Report File for "@atlaskit/storybook-addon-design-system".
+## API Report File for "@atlaskit/storybook-addon-design-system"
 
-> Do not edit this file. This report is auto-generated by [API Extractor](https://api-extractor.com/).
+> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
+
+<!--
+	Generated API Report version: 2.0
+-->
 
 [Learn more about API reports](https://hello.atlassian.net/wiki/spaces/UR/pages/1825484529/Package+API+Reports)
 
 ```ts
-export declare const withDesignTokens: (...args: any) => any;
+// @public (undocumented)
+export const withDesignTokens: (...args: any) => any;
 
-export {};
+// (No @packageDocumentation comment for this package)
 ```

package/dist/types-ts4.0/index.d.ts

@@ -1 +0,0 @@
-export { withDesignTokens } from './tokens';

package/dist/types-ts4.0/tokens/components/index.d.ts

@@ -1 +0,0 @@
-export { default as Tool } from './tool';

package/dist/types-ts4.0/tokens/components/tool.d.ts

@@ -1,8 +0,0 @@
-/// <reference types="react" />
-/**
- * __Tool__
- *
- * ADS Toolbar UI, visible in the topbar of the storybook UI.
- */
-declare const Tool: () => JSX.Element;
-export default Tool;

package/dist/types-ts4.0/tokens/constants.d.ts

@@ -1,5 +0,0 @@
-export declare const ADDON_ID = "ads-tokens";
-export declare const TOOL_ID: string;
-export declare const TITLE = "Design Tokens";
-export declare const DECORATOR_ID = "withDesignTokens";
-export declare const DECORATOR_PARAM = "DesignTokens";

package/dist/types-ts4.0/tokens/decorator.d.ts

@@ -1,4 +0,0 @@
-import '@atlaskit/tokens/css/atlassian-light.css';
-import '@atlaskit/tokens/css/atlassian-dark.css';
-declare const withDesignTokens: (...args: any) => any;
-export default withDesignTokens;

package/dist/types-ts4.0/tokens/index.d.ts

@@ -1 +0,0 @@
-export { default as withDesignTokens } from './decorator';

package/dist/types-ts4.0/tokens/register.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/types-ts4.0/tokens/types.d.ts

@@ -1 +0,0 @@
-export declare type Themes = 'light' | 'dark' | 'none' | 'split' | 'stack';