@atlaskit/storybook-addon-design-system 0.3.2 → 0.3.4

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/storybook-addon-design-system
 
+## 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
+
+- [`9827dcb82b8`](https://bitbucket.org/atlassian/atlassian-frontend/commits/9827dcb82b8) - No-op change to introduce spacing tokens to design system components.
+
 ## 0.3.2
 
 ### 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.2",
+	"version": "0.3.4",
 	"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.2",
+	"version": "0.3.4",
 	"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.2",
+	"version": "0.3.4",
 	"sideEffects": false
 }

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

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

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

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

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

@@ -0,0 +1,8 @@
+/// <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

@@ -0,0 +1,5 @@
+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

@@ -0,0 +1,4 @@
+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

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

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

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

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

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

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "@atlaskit/storybook-addon-design-system",
-  "version": "0.3.2",
+  "version": "0.3.4",
   "description": "Design token storybook addon",
   "author": "Atlassian Pty Ltd",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
   },
   "atlassian": {
+    "disableProductCI": true,
     "team": "Design System Team",
     "releaseModel": "scheduled",
     "website": {
@@ -20,6 +21,14 @@
   "module": "dist/esm/index.js",
   "module:es2019": "dist/es2019/index.js",
   "types": "dist/types/index.d.ts",
+  "typesVersions": {
+    ">=4.0 <4.5": {
+      "*": [
+        "dist/types-ts4.0/*",
+        "dist/types-ts4.0/index.d.ts"
+      ]
+    }
+  },
   "sideEffects": false,
   "atlaskit:src": "src/index.tsx",
   "af:exports": {

package/report.api.md

@@ -1,6 +1,8 @@
-## API Report File for "@atlaskit/storybook-addon-design-system"
+## 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/).
+> Do not edit this file. This report is auto-generated by [API Extractor](https://api-extractor.com/).
+
+[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;