@atlaskit/storybook-addon-design-system 0.1.1 → 0.2.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/storybook-addon-design-system
 
+## 0.2.0
+
+### Minor Changes
+
+- [`068c9a0b770`](https://bitbucket.org/atlassian/atlassian-frontend/commits/068c9a0b770) - Refactors the storybook addon into a "tool addon"
+
 ## 0.1.1
 
 ### Patch Changes

package/dist/cjs/tokens/components/index.js

@@ -0,0 +1,15 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Tool", {
+  enumerable: true,
+  get: function get() {
+    return _tool.default;
+  }
+});
+
+var _tool = _interopRequireDefault(require("./tool"));

package/dist/cjs/tokens/components/tool.js

@@ -0,0 +1,117 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _api = require("@storybook/api");
+
+var _components = require("@storybook/components");
+
+var _constants = require("../constants");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var themeOptions = [{
+  id: 'none',
+  title: 'Disable',
+  icon: 'cross'
+}, {
+  id: 'light',
+  title: 'Light theme',
+  icon: 'circlehollow'
+}, {
+  id: 'dark',
+  title: 'Dark theme',
+  icon: 'circle'
+}, {
+  id: 'split',
+  title: 'Side by side',
+  icon: 'sidebar'
+}, {
+  id: 'stack',
+  title: 'Stacked',
+  icon: 'bottombar'
+}];
+/**
+ * __Tool__
+ *
+ * ADS Toolbar UI, visible in the topbar of the storybook UI.
+ */
+
+var Tool = function Tool() {
+  var _themeOptions$find;
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      isVisible = _useState2[0],
+      setIsVisible = _useState2[1];
+
+  var _useGlobals = (0, _api.useGlobals)(),
+      _useGlobals2 = (0, _slicedToArray2.default)(_useGlobals, 2),
+      adsTheme = _useGlobals2[0].adsTheme,
+      updateGlobals = _useGlobals2[1];
+
+  var setTheme = (0, _react.useCallback)(function (theme) {
+    return updateGlobals({
+      adsTheme: theme
+    });
+  }, [updateGlobals]);
+  return /*#__PURE__*/_react.default.createElement(_components.WithTooltip, {
+    placement: "top",
+    trigger: "click",
+    closeOnClick: true,
+    onVisibilityChange: setIsVisible,
+    tooltip: function tooltip(_ref) {
+      var onHide = _ref.onHide;
+      return /*#__PURE__*/_react.default.createElement(_components.TooltipLinkList, {
+        links: themeOptions.map(function (_ref2) {
+          var id = _ref2.id,
+              title = _ref2.title,
+              icon = _ref2.icon;
+
+          var Icon = /*#__PURE__*/_react.default.createElement(_components.Icons, {
+            style: {
+              opacity: 1
+            },
+            icon: icon
+          });
+
+          return {
+            id: id,
+            title: title,
+            active: adsTheme === id,
+            right: Icon,
+            onClick: function onClick() {
+              setTheme(id);
+              onHide();
+            }
+          };
+        })
+      });
+    }
+  }, /*#__PURE__*/_react.default.createElement(_components.IconButton, {
+    key: _constants.TOOL_ID,
+    active: isVisible,
+    title: "Apply ADS themes to your story"
+  }, /*#__PURE__*/_react.default.createElement(_components.Icons, {
+    icon: ((_themeOptions$find = themeOptions.find(function (_ref3) {
+      var id = _ref3.id;
+      return id === adsTheme;
+    })) === null || _themeOptions$find === void 0 ? void 0 : _themeOptions$find.icon) || 'circlehollow'
+  }), '\xa0ADS Theme'));
+};
+
+var _default = Tool;
+exports.default = _default;

package/dist/cjs/tokens/constants.js

@@ -3,15 +3,13 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.PANEL_TITLE = exports.PANEL_ID = exports.EVENT_THEME_CHANGED = exports.DECORATOR_PARAM = exports.DECORATOR_ID = exports.ADDON_ID = void 0;
+exports.TOOL_ID = exports.TITLE = exports.DECORATOR_PARAM = exports.DECORATOR_ID = exports.ADDON_ID = void 0;
 var ADDON_ID = 'ads-tokens';
 exports.ADDON_ID = ADDON_ID;
-var PANEL_ID = "".concat(ADDON_ID, "/panel");
-exports.PANEL_ID = PANEL_ID;
-var PANEL_TITLE = "Design Tokens";
-exports.PANEL_TITLE = PANEL_TITLE;
-var EVENT_THEME_CHANGED = "".concat(ADDON_ID, "/on-theme-change");
-exports.EVENT_THEME_CHANGED = EVENT_THEME_CHANGED;
+var TOOL_ID = "".concat(ADDON_ID, "/tool");
+exports.TOOL_ID = TOOL_ID;
+var TITLE = 'Design Tokens';
+exports.TITLE = TITLE;
 var DECORATOR_ID = 'withDesignTokens';
 exports.DECORATOR_ID = DECORATOR_ID;
 var DECORATOR_PARAM = 'DesignTokens';

package/dist/cjs/tokens/decorator.js

@@ -1,50 +1,136 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
 
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = _interopRequireWildcard(require("react"));
+
 var _addons = require("@storybook/addons");
 
+var _tokens = require("@atlaskit/tokens");
+
+require("@atlaskit/tokens/css/atlassian-light.css");
+
+require("@atlaskit/tokens/css/atlassian-dark.css");
+
 var _constants = require("./constants");
 
-// // eslint-disable-next-line
-// import '../../../node_modules/@atlaskit/tokens/css/atlassian-light.css';
-// // eslint-disable-next-line
-// import '../../../node_modules/@atlaskit/tokens/css/atlassian-dark.css';
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+var splitColumnStyles = {
+  position: 'absolute',
+  boxSizing: 'border-box',
+  width: '50vw',
+  height: '100vh',
+  overflow: 'auto',
+  padding: '10px',
+  background: (0, _tokens.token)('color.background.default'),
+  color: (0, _tokens.token)('color.text.highEmphasis')
+};
+var stackColumnStyles = {
+  position: 'absolute',
+  boxSizing: 'border-box',
+  width: '100%',
+  height: '50%',
+  overflow: 'auto',
+  padding: '10px',
+  background: (0, _tokens.token)('color.background.default'),
+  color: (0, _tokens.token)('color.text.highEmphasis')
+};
 var withDesignTokens = (0, _addons.makeDecorator)({
   name: _constants.DECORATOR_ID,
   parameterName: _constants.DECORATOR_PARAM,
   wrapper: function wrapper(storyFn, context) {
-    // eslint-disable-next-line react-hooks/rules-of-hooks
+    var theme = context.globals.adsTheme; // eslint-disable-next-line react-hooks/rules-of-hooks
+
     (0, _addons.useEffect)(function () {
-      var setTheme = function setTheme(theme) {
-        if (!theme || theme === 'none') {
-          delete document.documentElement.dataset.theme;
-          return;
-        } // HACK: Allows us to disable the light mode style since it uses root:
-
-
-        if (theme === 'light') {
-          document.querySelectorAll('style').forEach(function (el) {
-            if (el.innerText.includes(':root, html[data-theme="light"]')) {
-              el.innerText = el.textContent.replace(':root,', '');
-            }
-          });
+      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;
+        return;
+      }
+
+      document.documentElement.dataset.theme = theme;
+    }, [context.id, theme]);
+
+    function renderStory() {
+      var story = storyFn(context);
+
+      switch (theme) {
+        case 'split':
+          {
+            return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+              className: "ads-theme-override",
+              "data-theme": "light",
+              style: _objectSpread(_objectSpread({}, splitColumnStyles), {}, {
+                inset: '0px 50vw 0px 0px'
+              })
+            }, story), /*#__PURE__*/_react.default.createElement("div", {
+              className: "ads-theme-override",
+              "data-theme": "dark",
+              style: _objectSpread(_objectSpread({}, splitColumnStyles), {}, {
+                inset: '0px 0px 0px 50vw'
+              })
+            }, story));
+          }
 
-        document.documentElement.dataset.theme = theme;
-      };
+        case 'stack':
+          {
+            return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+              className: "ads-theme-override",
+              "data-theme": "light",
+              style: _objectSpread(_objectSpread({}, stackColumnStyles), {}, {
+                inset: '0px 0px 50% 0px'
+              })
+            }, story), /*#__PURE__*/_react.default.createElement("div", {
+              className: "ads-theme-override",
+              "data-theme": "dark",
+              style: _objectSpread(_objectSpread({}, stackColumnStyles), {}, {
+                inset: '50% 0px 0px 0px'
+              })
+            }, story));
+          }
 
-      var channel = _addons.addons.getChannel();
+        default:
+          {
+            return /*#__PURE__*/_react.default.createElement("div", {
+              "data-theme": theme
+            }, story);
+          }
+      }
+    }
 
-      channel.on(_constants.EVENT_THEME_CHANGED, setTheme);
-      return function () {
-        channel.off(_constants.EVENT_THEME_CHANGED, setTheme);
-      };
-    }, [context.id]);
-    return storyFn(context);
+    return renderStory();
   }
 });
 var _default = withDesignTokens;

package/dist/cjs/tokens/register.js

@@ -1,52 +1,19 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-var _react = _interopRequireDefault(require("react"));
-
 var _addons = require("@storybook/addons");
 
-var _components = require("@storybook/components");
+var _components = require("./components");
 
 var _constants = require("./constants");
 
-// eslint-disable-next-line import/no-extraneous-dependencies
-// eslint-disable-next-line import/no-extraneous-dependencies
-var TokensPanel = function TokensPanel(_ref) {
-  var onThemeChange = _ref.onThemeChange;
-  return /*#__PURE__*/_react.default.createElement("div", {
-    style: {
-      padding: '20px'
-    }
-  }, /*#__PURE__*/_react.default.createElement("h1", null, "ADS Design Tokens"), /*#__PURE__*/_react.default.createElement("select", {
-    name: "theme",
-    onChange: function onChange(event) {
-      return onThemeChange(event.target.value);
-    }
-  }, /*#__PURE__*/_react.default.createElement("option", {
-    value: "none"
-  }, "Disable theme"), /*#__PURE__*/_react.default.createElement("option", {
-    value: "light"
-  }, "Light theme"), /*#__PURE__*/_react.default.createElement("option", {
-    value: "dark"
-  }, "Dark theme")));
-};
-
-_addons.addons.register(_constants.ADDON_ID, function (api) {
-  _addons.addons.add(_constants.PANEL_ID, {
-    type: _addons.types.PANEL,
-    title: _constants.PANEL_TITLE,
-    render: function render(_ref2) {
-      var active = _ref2.active,
-          key = _ref2.key;
-      return /*#__PURE__*/_react.default.createElement(_components.AddonPanel, {
-        active: active || false,
-        key: key
-      }, /*#__PURE__*/_react.default.createElement(TokensPanel, {
-        onThemeChange: function onThemeChange(theme) {
-          return api.emit(_constants.EVENT_THEME_CHANGED, theme);
-        }
-      }));
-    }
+_addons.addons.register(_constants.ADDON_ID, function () {
+  _addons.addons.add(_constants.TOOL_ID, {
+    type: _addons.types.TOOL,
+    title: _constants.TITLE,
+    match: function match(_ref) {
+      var viewMode = _ref.viewMode;
+      return !!(viewMode && viewMode.match(/^(story|docs)$/));
+    },
+    render: _components.Tool
   });
 });

package/dist/cjs/tokens/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/dist/cjs/version.json

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

package/dist/es2019/tokens/components/index.js

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

package/dist/es2019/tokens/components/tool.js

@@ -0,0 +1,84 @@
+import React, { useCallback, useState } from 'react';
+import { useGlobals } from '@storybook/api';
+import { IconButton, Icons, TooltipLinkList, WithTooltip } from '@storybook/components';
+import { TOOL_ID } from '../constants';
+const themeOptions = [{
+  id: 'none',
+  title: 'Disable',
+  icon: 'cross'
+}, {
+  id: 'light',
+  title: 'Light theme',
+  icon: 'circlehollow'
+}, {
+  id: 'dark',
+  title: 'Dark theme',
+  icon: 'circle'
+}, {
+  id: 'split',
+  title: 'Side by side',
+  icon: 'sidebar'
+}, {
+  id: 'stack',
+  title: 'Stacked',
+  icon: 'bottombar'
+}];
+/**
+ * __Tool__
+ *
+ * ADS Toolbar UI, visible in the topbar of the storybook UI.
+ */
+
+const Tool = () => {
+  var _themeOptions$find;
+
+  const [isVisible, setIsVisible] = useState(false);
+  const [{
+    adsTheme
+  }, updateGlobals] = useGlobals();
+  const setTheme = useCallback(theme => updateGlobals({
+    adsTheme: theme
+  }), [updateGlobals]);
+  return /*#__PURE__*/React.createElement(WithTooltip, {
+    placement: "top",
+    trigger: "click",
+    closeOnClick: true,
+    onVisibilityChange: setIsVisible,
+    tooltip: ({
+      onHide
+    }) => /*#__PURE__*/React.createElement(TooltipLinkList, {
+      links: themeOptions.map(({
+        id,
+        title,
+        icon
+      }) => {
+        const Icon = /*#__PURE__*/React.createElement(Icons, {
+          style: {
+            opacity: 1
+          },
+          icon: icon
+        });
+        return {
+          id,
+          title,
+          active: adsTheme === id,
+          right: Icon,
+          onClick: () => {
+            setTheme(id);
+            onHide();
+          }
+        };
+      })
+    })
+  }, /*#__PURE__*/React.createElement(IconButton, {
+    key: TOOL_ID,
+    active: isVisible,
+    title: "Apply ADS themes to your story"
+  }, /*#__PURE__*/React.createElement(Icons, {
+    icon: ((_themeOptions$find = themeOptions.find(({
+      id
+    }) => id === adsTheme)) === null || _themeOptions$find === void 0 ? void 0 : _themeOptions$find.icon) || 'circlehollow'
+  }), '\xa0ADS Theme'));
+};
+
+export default Tool;

package/dist/es2019/tokens/constants.js

@@ -1,6 +1,5 @@
 export const ADDON_ID = 'ads-tokens';
-export const PANEL_ID = `${ADDON_ID}/panel`;
-export const PANEL_TITLE = `Design Tokens`;
-export const EVENT_THEME_CHANGED = `${ADDON_ID}/on-theme-change`;
+export const TOOL_ID = `${ADDON_ID}/tool`;
+export const TITLE = 'Design Tokens';
 export const DECORATOR_ID = 'withDesignTokens';
 export const DECORATOR_PARAM = 'DesignTokens';

package/dist/es2019/tokens/decorator.js

@@ -1,40 +1,111 @@
-import { addons, makeDecorator, useEffect } from '@storybook/addons'; // // eslint-disable-next-line
-// import '../../../node_modules/@atlaskit/tokens/css/atlassian-light.css';
-// // eslint-disable-next-line
-// import '../../../node_modules/@atlaskit/tokens/css/atlassian-dark.css';
+import React, { Fragment } from 'react';
+import { makeDecorator, useEffect } from '@storybook/addons';
+import { token } from '@atlaskit/tokens'; // eslint-disable-next-line
 
-import { DECORATOR_ID, DECORATOR_PARAM, EVENT_THEME_CHANGED } from './constants';
+import '@atlaskit/tokens/css/atlassian-light.css'; // eslint-disable-next-line
+
+import '@atlaskit/tokens/css/atlassian-dark.css';
+import { DECORATOR_ID, DECORATOR_PARAM } from './constants';
+const splitColumnStyles = {
+  position: 'absolute',
+  boxSizing: 'border-box',
+  width: '50vw',
+  height: '100vh',
+  overflow: 'auto',
+  padding: '10px',
+  background: token('color.background.default'),
+  color: token('color.text.highEmphasis')
+};
+const stackColumnStyles = {
+  position: 'absolute',
+  boxSizing: 'border-box',
+  width: '100%',
+  height: '50%',
+  overflow: 'auto',
+  padding: '10px',
+  background: token('color.background.default'),
+  color: token('color.text.highEmphasis')
+};
 const withDesignTokens = makeDecorator({
   name: DECORATOR_ID,
   parameterName: DECORATOR_PARAM,
   wrapper: (storyFn, context) => {
-    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const theme = context.globals.adsTheme; // eslint-disable-next-line react-hooks/rules-of-hooks
+
     useEffect(() => {
-      const setTheme = theme => {
-        if (!theme || theme === 'none') {
-          delete document.documentElement.dataset.theme;
-          return;
-        } // HACK: Allows us to disable the light mode style since it uses root:
-
-
-        if (theme === 'light') {
-          document.querySelectorAll('style').forEach(el => {
-            if (el.innerText.includes(':root, html[data-theme="light"]')) {
-              el.innerText = el.textContent.replace(':root,', '');
-            }
-          });
+      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;
+        return;
+      }
+
+      document.documentElement.dataset.theme = theme;
+    }, [context.id, theme]);
+
+    function renderStory() {
+      const story = storyFn(context);
+
+      switch (theme) {
+        case 'split':
+          {
+            return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
+              className: "ads-theme-override",
+              "data-theme": "light",
+              style: { ...splitColumnStyles,
+                inset: '0px 50vw 0px 0px'
+              }
+            }, story), /*#__PURE__*/React.createElement("div", {
+              className: "ads-theme-override",
+              "data-theme": "dark",
+              style: { ...splitColumnStyles,
+                inset: '0px 0px 0px 50vw'
+              }
+            }, story));
+          }
+
+        case 'stack':
+          {
+            return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
+              className: "ads-theme-override",
+              "data-theme": "light",
+              style: { ...stackColumnStyles,
+                inset: '0px 0px 50% 0px'
+              }
+            }, story), /*#__PURE__*/React.createElement("div", {
+              className: "ads-theme-override",
+              "data-theme": "dark",
+              style: { ...stackColumnStyles,
+                inset: '50% 0px 0px 0px'
+              }
+            }, story));
+          }
 
-        document.documentElement.dataset.theme = theme;
-      };
+        default:
+          {
+            return /*#__PURE__*/React.createElement("div", {
+              "data-theme": theme
+            }, story);
+          }
+      }
+    }
 
-      const channel = addons.getChannel();
-      channel.on(EVENT_THEME_CHANGED, setTheme);
-      return () => {
-        channel.off(EVENT_THEME_CHANGED, setTheme);
-      };
-    }, [context.id]);
-    return storyFn(context);
+    return renderStory();
   }
 });
 export default withDesignTokens;

package/dist/es2019/tokens/register.js

@@ -1,39 +1,13 @@
-import React from 'react'; // eslint-disable-next-line import/no-extraneous-dependencies
-
-import { addons, types } from '@storybook/addons'; // eslint-disable-next-line import/no-extraneous-dependencies
-
-import { AddonPanel } from '@storybook/components';
-import { ADDON_ID, EVENT_THEME_CHANGED, PANEL_ID, PANEL_TITLE } from './constants';
-
-const TokensPanel = ({
-  onThemeChange
-}) => /*#__PURE__*/React.createElement("div", {
-  style: {
-    padding: '20px'
-  }
-}, /*#__PURE__*/React.createElement("h1", null, "ADS Design Tokens"), /*#__PURE__*/React.createElement("select", {
-  name: "theme",
-  onChange: event => onThemeChange(event.target.value)
-}, /*#__PURE__*/React.createElement("option", {
-  value: "none"
-}, "Disable theme"), /*#__PURE__*/React.createElement("option", {
-  value: "light"
-}, "Light theme"), /*#__PURE__*/React.createElement("option", {
-  value: "dark"
-}, "Dark theme")));
-
-addons.register(ADDON_ID, api => {
-  addons.add(PANEL_ID, {
-    type: types.PANEL,
-    title: PANEL_TITLE,
-    render: ({
-      active,
-      key
-    }) => /*#__PURE__*/React.createElement(AddonPanel, {
-      active: active || false,
-      key: key
-    }, /*#__PURE__*/React.createElement(TokensPanel, {
-      onThemeChange: theme => api.emit(EVENT_THEME_CHANGED, theme)
-    }))
+import { addons, types } from '@storybook/addons';
+import { Tool } from './components';
+import { ADDON_ID, TITLE, TOOL_ID } from './constants';
+addons.register(ADDON_ID, () => {
+  addons.add(TOOL_ID, {
+    type: types.TOOL,
+    title: TITLE,
+    match: ({
+      viewMode
+    }) => !!(viewMode && viewMode.match(/^(story|docs)$/)),
+    render: Tool
   });
 });

package/dist/es2019/tokens/types.js

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

package/dist/es2019/version.json

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

package/dist/esm/tokens/components/index.js

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

package/dist/esm/tokens/components/tool.js

@@ -0,0 +1,94 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import React, { useCallback, useState } from 'react';
+import { useGlobals } from '@storybook/api';
+import { IconButton, Icons, TooltipLinkList, WithTooltip } from '@storybook/components';
+import { TOOL_ID } from '../constants';
+var themeOptions = [{
+  id: 'none',
+  title: 'Disable',
+  icon: 'cross'
+}, {
+  id: 'light',
+  title: 'Light theme',
+  icon: 'circlehollow'
+}, {
+  id: 'dark',
+  title: 'Dark theme',
+  icon: 'circle'
+}, {
+  id: 'split',
+  title: 'Side by side',
+  icon: 'sidebar'
+}, {
+  id: 'stack',
+  title: 'Stacked',
+  icon: 'bottombar'
+}];
+/**
+ * __Tool__
+ *
+ * ADS Toolbar UI, visible in the topbar of the storybook UI.
+ */
+
+var Tool = function Tool() {
+  var _themeOptions$find;
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      isVisible = _useState2[0],
+      setIsVisible = _useState2[1];
+
+  var _useGlobals = useGlobals(),
+      _useGlobals2 = _slicedToArray(_useGlobals, 2),
+      adsTheme = _useGlobals2[0].adsTheme,
+      updateGlobals = _useGlobals2[1];
+
+  var setTheme = useCallback(function (theme) {
+    return updateGlobals({
+      adsTheme: theme
+    });
+  }, [updateGlobals]);
+  return /*#__PURE__*/React.createElement(WithTooltip, {
+    placement: "top",
+    trigger: "click",
+    closeOnClick: true,
+    onVisibilityChange: setIsVisible,
+    tooltip: function tooltip(_ref) {
+      var onHide = _ref.onHide;
+      return /*#__PURE__*/React.createElement(TooltipLinkList, {
+        links: themeOptions.map(function (_ref2) {
+          var id = _ref2.id,
+              title = _ref2.title,
+              icon = _ref2.icon;
+          var Icon = /*#__PURE__*/React.createElement(Icons, {
+            style: {
+              opacity: 1
+            },
+            icon: icon
+          });
+          return {
+            id: id,
+            title: title,
+            active: adsTheme === id,
+            right: Icon,
+            onClick: function onClick() {
+              setTheme(id);
+              onHide();
+            }
+          };
+        })
+      });
+    }
+  }, /*#__PURE__*/React.createElement(IconButton, {
+    key: TOOL_ID,
+    active: isVisible,
+    title: "Apply ADS themes to your story"
+  }, /*#__PURE__*/React.createElement(Icons, {
+    icon: ((_themeOptions$find = themeOptions.find(function (_ref3) {
+      var id = _ref3.id;
+      return id === adsTheme;
+    })) === null || _themeOptions$find === void 0 ? void 0 : _themeOptions$find.icon) || 'circlehollow'
+  }), '\xa0ADS Theme'));
+};
+
+export default Tool;

package/dist/esm/tokens/constants.js

@@ -1,6 +1,5 @@
 export var ADDON_ID = 'ads-tokens';
-export var PANEL_ID = "".concat(ADDON_ID, "/panel");
-export var PANEL_TITLE = "Design Tokens";
-export var EVENT_THEME_CHANGED = "".concat(ADDON_ID, "/on-theme-change");
+export var TOOL_ID = "".concat(ADDON_ID, "/tool");
+export var TITLE = 'Design Tokens';
 export var DECORATOR_ID = 'withDesignTokens';
 export var DECORATOR_PARAM = 'DesignTokens';

package/dist/esm/tokens/decorator.js

@@ -1,40 +1,117 @@
-import { addons, makeDecorator, useEffect } from '@storybook/addons'; // // eslint-disable-next-line
-// import '../../../node_modules/@atlaskit/tokens/css/atlassian-light.css';
-// // eslint-disable-next-line
-// import '../../../node_modules/@atlaskit/tokens/css/atlassian-dark.css';
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 
-import { DECORATOR_ID, DECORATOR_PARAM, EVENT_THEME_CHANGED } from './constants';
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+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 '@atlaskit/tokens/css/atlassian-dark.css';
+import { DECORATOR_ID, DECORATOR_PARAM } from './constants';
+var splitColumnStyles = {
+  position: 'absolute',
+  boxSizing: 'border-box',
+  width: '50vw',
+  height: '100vh',
+  overflow: 'auto',
+  padding: '10px',
+  background: token('color.background.default'),
+  color: token('color.text.highEmphasis')
+};
+var stackColumnStyles = {
+  position: 'absolute',
+  boxSizing: 'border-box',
+  width: '100%',
+  height: '50%',
+  overflow: 'auto',
+  padding: '10px',
+  background: token('color.background.default'),
+  color: token('color.text.highEmphasis')
+};
 var withDesignTokens = makeDecorator({
   name: DECORATOR_ID,
   parameterName: DECORATOR_PARAM,
   wrapper: function wrapper(storyFn, context) {
-    // eslint-disable-next-line react-hooks/rules-of-hooks
+    var theme = context.globals.adsTheme; // eslint-disable-next-line react-hooks/rules-of-hooks
+
     useEffect(function () {
-      var setTheme = function setTheme(theme) {
-        if (!theme || theme === 'none') {
-          delete document.documentElement.dataset.theme;
-          return;
-        } // HACK: Allows us to disable the light mode style since it uses root:
-
-
-        if (theme === 'light') {
-          document.querySelectorAll('style').forEach(function (el) {
-            if (el.innerText.includes(':root, html[data-theme="light"]')) {
-              el.innerText = el.textContent.replace(':root,', '');
-            }
-          });
+      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;
+        return;
+      }
+
+      document.documentElement.dataset.theme = theme;
+    }, [context.id, theme]);
+
+    function renderStory() {
+      var story = storyFn(context);
+
+      switch (theme) {
+        case 'split':
+          {
+            return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
+              className: "ads-theme-override",
+              "data-theme": "light",
+              style: _objectSpread(_objectSpread({}, splitColumnStyles), {}, {
+                inset: '0px 50vw 0px 0px'
+              })
+            }, story), /*#__PURE__*/React.createElement("div", {
+              className: "ads-theme-override",
+              "data-theme": "dark",
+              style: _objectSpread(_objectSpread({}, splitColumnStyles), {}, {
+                inset: '0px 0px 0px 50vw'
+              })
+            }, story));
+          }
+
+        case 'stack':
+          {
+            return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
+              className: "ads-theme-override",
+              "data-theme": "light",
+              style: _objectSpread(_objectSpread({}, stackColumnStyles), {}, {
+                inset: '0px 0px 50% 0px'
+              })
+            }, story), /*#__PURE__*/React.createElement("div", {
+              className: "ads-theme-override",
+              "data-theme": "dark",
+              style: _objectSpread(_objectSpread({}, stackColumnStyles), {}, {
+                inset: '50% 0px 0px 0px'
+              })
+            }, story));
+          }
 
-        document.documentElement.dataset.theme = theme;
-      };
+        default:
+          {
+            return /*#__PURE__*/React.createElement("div", {
+              "data-theme": theme
+            }, story);
+          }
+      }
+    }
 
-      var channel = addons.getChannel();
-      channel.on(EVENT_THEME_CHANGED, setTheme);
-      return function () {
-        channel.off(EVENT_THEME_CHANGED, setTheme);
-      };
-    }, [context.id]);
-    return storyFn(context);
+    return renderStory();
   }
 });
 export default withDesignTokens;

package/dist/esm/tokens/register.js

@@ -1,45 +1,14 @@
-import React from 'react'; // eslint-disable-next-line import/no-extraneous-dependencies
-
-import { addons, types } from '@storybook/addons'; // eslint-disable-next-line import/no-extraneous-dependencies
-
-import { AddonPanel } from '@storybook/components';
-import { ADDON_ID, EVENT_THEME_CHANGED, PANEL_ID, PANEL_TITLE } from './constants';
-
-var TokensPanel = function TokensPanel(_ref) {
-  var onThemeChange = _ref.onThemeChange;
-  return /*#__PURE__*/React.createElement("div", {
-    style: {
-      padding: '20px'
-    }
-  }, /*#__PURE__*/React.createElement("h1", null, "ADS Design Tokens"), /*#__PURE__*/React.createElement("select", {
-    name: "theme",
-    onChange: function onChange(event) {
-      return onThemeChange(event.target.value);
-    }
-  }, /*#__PURE__*/React.createElement("option", {
-    value: "none"
-  }, "Disable theme"), /*#__PURE__*/React.createElement("option", {
-    value: "light"
-  }, "Light theme"), /*#__PURE__*/React.createElement("option", {
-    value: "dark"
-  }, "Dark theme")));
-};
-
-addons.register(ADDON_ID, function (api) {
-  addons.add(PANEL_ID, {
-    type: types.PANEL,
-    title: PANEL_TITLE,
-    render: function render(_ref2) {
-      var active = _ref2.active,
-          key = _ref2.key;
-      return /*#__PURE__*/React.createElement(AddonPanel, {
-        active: active || false,
-        key: key
-      }, /*#__PURE__*/React.createElement(TokensPanel, {
-        onThemeChange: function onThemeChange(theme) {
-          return api.emit(EVENT_THEME_CHANGED, theme);
-        }
-      }));
-    }
+import { addons, types } from '@storybook/addons';
+import { Tool } from './components';
+import { ADDON_ID, TITLE, TOOL_ID } from './constants';
+addons.register(ADDON_ID, function () {
+  addons.add(TOOL_ID, {
+    type: types.TOOL,
+    title: TITLE,
+    match: function match(_ref) {
+      var viewMode = _ref.viewMode;
+      return !!(viewMode && viewMode.match(/^(story|docs)$/));
+    },
+    render: Tool
   });
 });

package/dist/esm/tokens/types.js

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

package/dist/esm/version.json

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

package/dist/types/tokens/components/index.d.ts

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

package/dist/types/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/tokens/constants.d.ts

@@ -1,6 +1,5 @@
 export declare const ADDON_ID = "ads-tokens";
-export declare const PANEL_ID: string;
-export declare const PANEL_TITLE = "Design Tokens";
-export declare const EVENT_THEME_CHANGED: string;
+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/tokens/decorator.d.ts

@@ -1,2 +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/tokens/types.d.ts

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

package/package.json

@@ -1,6 +1,7 @@
 {
   "name": "@atlaskit/storybook-addon-design-system",
-  "version": "0.1.1",
+  "version": "0.2.0",
+  "description": "Design token storybook addon",
   "author": "Atlassian Pty Ltd",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -20,8 +21,10 @@
     ".": "./src/index.tsx"
   },
   "dependencies": {
+    "@atlaskit/tokens": "^0.4.0",
     "@babel/runtime": "^7.0.0",
     "@storybook/addons": "^6.4.0",
+    "@storybook/api": "^6.4.0",
     "@storybook/components": "^6.4.0"
   },
   "devDependencies": {