@atlaskit/storybook-addon-design-system 0.5.1 → 0.6.0

package/CHANGELOG.md

@@ -1,26 +1,39 @@
 # @atlaskit/storybook-addon-design-system
 
+## 0.6.0
+
+### Minor Changes
+
+- [#77691](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/77691) [`14d18ea34852`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/14d18ea34852) - - Enables new `typography` and `shape` themes
+  - Sets the color theme to `auto` by default
+
+## 0.5.2
+
+### Patch Changes
+
+- [#32935](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/32935) [`b1bdec7cce2`](https://bitbucket.org/atlassian/atlassian-frontend/commits/b1bdec7cce2) - Internal change to enforce token usage for spacing properties. There is no expected visual or behaviour change.
+
 ## 0.5.1
 
 ### Patch Changes
 
-- [`9d00501a414`](https://bitbucket.org/atlassian/atlassian-frontend/commits/9d00501a414) - Ensure legacy types are published for TS 4.5-4.8
+- [#33793](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/33793) [`9d00501a414`](https://bitbucket.org/atlassian/atlassian-frontend/commits/9d00501a414) - Ensure legacy types are published for TS 4.5-4.8
 
 ## 0.5.0
 
 ### Minor Changes
 
-- [`389ab86b2a3`](https://bitbucket.org/atlassian/atlassian-frontend/commits/389ab86b2a3) - Adding spacing tokens to storybook addon so that users spacing tokens appear in storybook
+- [#33632](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/33632) [`389ab86b2a3`](https://bitbucket.org/atlassian/atlassian-frontend/commits/389ab86b2a3) - Adding spacing tokens to storybook addon so that users spacing tokens appear in storybook
 
 ### Patch Changes
 
-- [`41fae2c6f68`](https://bitbucket.org/atlassian/atlassian-frontend/commits/41fae2c6f68) - Upgrade Typescript from `4.5.5` to `4.9.5`
+- [#33649](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/33649) [`41fae2c6f68`](https://bitbucket.org/atlassian/atlassian-frontend/commits/41fae2c6f68) - Upgrade Typescript from `4.5.5` to `4.9.5`
 
 ## 0.4.0
 
 ### Minor Changes
 
-- [`56507598609`](https://bitbucket.org/atlassian/atlassian-frontend/commits/56507598609) - Skip minor dependency bump
+- [#33258](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/33258) [`56507598609`](https://bitbucket.org/atlassian/atlassian-frontend/commits/56507598609) - Skip minor dependency bump
 
 ### Patch Changes
 
@@ -30,7 +43,7 @@
 
 ### Patch Changes
 
-- [`718d5ad3044`](https://bitbucket.org/atlassian/atlassian-frontend/commits/718d5ad3044) - Updates to support the new `@atlaskit/tokens` theming API.
+- [#27634](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/27634) [`718d5ad3044`](https://bitbucket.org/atlassian/atlassian-frontend/commits/718d5ad3044) - Updates to support the new `@atlaskit/tokens` theming API.
 - Updated dependencies
 
 ## 0.3.8
@@ -49,7 +62,7 @@
 
 ### Patch Changes
 
-- [`f824dcfff6e`](https://bitbucket.org/atlassian/atlassian-frontend/commits/f824dcfff6e) - Internal changes to satisfy various lint warnings & errors
+- [#27629](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/27629) [`f824dcfff6e`](https://bitbucket.org/atlassian/atlassian-frontend/commits/f824dcfff6e) - Internal changes to satisfy various lint warnings & errors
 
 ## 0.3.5
 
@@ -61,31 +74,31 @@
 
 ### Patch Changes
 
-- [`43464a5fb17`](https://bitbucket.org/atlassian/atlassian-frontend/commits/43464a5fb17) - Update split and stack theme settings to use tilde selectors
+- [#26467](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/26467) [`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.
+- [#26303](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/26303) [`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
 
-- [`d4be43fdc44`](https://bitbucket.org/atlassian/atlassian-frontend/commits/d4be43fdc44) - Set the innerText in our hack correctly - oops!
+- [#24660](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/24660) [`d4be43fdc44`](https://bitbucket.org/atlassian/atlassian-frontend/commits/d4be43fdc44) - Set the innerText in our hack correctly - oops!
 
 ## 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
+- [#24626](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/24626) [`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
 
-- [`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
+- [#21484](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/21484) [`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
 
@@ -95,7 +108,7 @@
 
 ### 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.
+- [#21487](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/21487) [`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
 
@@ -131,16 +144,16 @@
 
 ### Minor Changes
 
-- [`068c9a0b770`](https://bitbucket.org/atlassian/atlassian-frontend/commits/068c9a0b770) - Refactors the storybook addon into a "tool addon"
+- [#18080](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/18080) [`068c9a0b770`](https://bitbucket.org/atlassian/atlassian-frontend/commits/068c9a0b770) - Refactors the storybook addon into a "tool addon"
 
 ## 0.1.1
 
 ### Patch Changes
 
-- [`32f8832d6c5`](https://bitbucket.org/atlassian/atlassian-frontend/commits/32f8832d6c5) - Temporarily disable css imports to side-step recent changes to the monorepo which trigged a bug
+- [#18020](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/18020) [`32f8832d6c5`](https://bitbucket.org/atlassian/atlassian-frontend/commits/32f8832d6c5) - Temporarily disable css imports to side-step recent changes to the monorepo which trigged a bug
 
 ## 0.1.0
 
 ### Minor Changes
 
-- [`ddbec37a16c`](https://bitbucket.org/atlassian/atlassian-frontend/commits/ddbec37a16c) - Initial release of the design system storybook addon package. Intended to be a generic package for all storybook releated DS tooling
+- [#17460](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/17460) [`ddbec37a16c`](https://bitbucket.org/atlassian/atlassian-frontend/commits/ddbec37a16c) - Initial release of the design system storybook addon package. Intended to be a generic package for all storybook releated DS tooling

package/constellation/index/props.mdx

@@ -0,0 +1,55 @@
+After installing the package, register the addon with your Storybook configuration in the `.storybook/main.js` file.
+
+```diff
+module.exports = {
+  addons: [
++    '@atlaskit/storybook-addon-design-system'
+  ]
+};
+```
+
+## Storybook v6 and below
+
+Add the decorator to `.storybook/preview.js`, which is responsible for applying the logic which has the ability to modify the DOM of your stories.
+
+```diff
++ import { withDesignTokens } from '@atlaskit/storybook-addon-design-system';
+
+const { addDecorator } = require('@storybook/react');
+
++ addDecorator(withDesignTokens);
+```
+
+## Storybook v7 and above
+
+For Storybook version 7, the following changes are necessary:
+
+1. Initialising the `globalTypes.adsTheme` property in the global context
+2. Disable the [built in `backgrounds` add on](https://storybook.js.org/docs/essentials/backgrounds#disable-backgrounds), as it conflicts with the ADS theming
+
+Both of these can be done in [the `preview` file](https://storybook.js.org/docs/configure#configure-story-rendering):
+
+```diff
++ import { withDesignTokens } from '@atlaskit/storybook-addon-design-system';
+
+const preview = {
+  globalTypes: {
++     adsTheme: {
++       description: 'Atlassian Design System theming options',
++       defaultValue: 'light',
+    },
+  },
+  decorators: [
++     withDesignTokens
+  ],
+  parameters: {
++     /**
++      * Disabling the builtin backgrounds addon so it doesn't override the ADS theming
++      * See: https://storybook.js.org/docs/essentials/backgrounds#disable-backgrounds
++      */
++     backgrounds: { disable: true },
+  },
+};
+
+export default preview;
+```

package/constellation/index/usage.mdx

@@ -1,5 +1,13 @@
 ---
-order: 2
+order: 0
 ---
 
-usage
+The Design System Storybook Addon allows you to test your UI components in various themes, directly in Storybook.
+It allows you to visualize and compare component appearances across different themes, ensuring correct and consistent design token application.
+
+![Design tokens storybook addon screenshot](../images/storybook-addon.png 'Design tokens storybook addon screenshot')
+
+## Features
+
+- **Theme Testing:** Test UI components in multiple themes to ensure they look good across various styles and branding choices.
+- **Split View:** The split view functionality allows you compare components side-by-side in different themes.

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

@@ -101,5 +101,4 @@ var Tool = function Tool() {
     })) === null || _themeOptions$find === void 0 ? void 0 : _themeOptions$find.icon) || 'circlehollow'
   }), '\xa0ADS Theme'));
 };
-var _default = Tool;
-exports.default = _default;
+var _default = exports.default = Tool;

package/dist/cjs/tokens/constants.js

@@ -4,13 +4,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 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 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';
-exports.DECORATOR_PARAM = DECORATOR_PARAM;
+var ADDON_ID = exports.ADDON_ID = 'ads-tokens';
+var TOOL_ID = exports.TOOL_ID = "".concat(ADDON_ID, "/tool");
+var TITLE = exports.TITLE = 'Design Tokens';
+var DECORATOR_ID = exports.DECORATOR_ID = 'withDesignTokens';
+var DECORATOR_PARAM = exports.DECORATOR_PARAM = 'DesignTokens';

package/dist/cjs/tokens/decorator.js

@@ -15,8 +15,8 @@ var _tokens = require("@atlaskit/tokens");
 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; }
-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; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var splitColumnStyles = {
   position: 'absolute',
   boxSizing: 'border-box',
@@ -56,7 +56,9 @@ var withDesignTokens = (0, _addons.makeDecorator)({
               _context.next = 5;
               return (0, _tokens.setGlobalTheme)({
                 colorMode: theme,
-                spacing: 'spacing'
+                spacing: 'spacing',
+                shape: 'shape',
+                typography: 'typography-minor3'
               });
             case 5:
               return _context.abrupt("break", 15);
@@ -64,7 +66,9 @@ var withDesignTokens = (0, _addons.makeDecorator)({
               _context.next = 8;
               return (0, _tokens.setGlobalTheme)({
                 colorMode: 'light',
-                spacing: 'spacing'
+                spacing: 'spacing',
+                shape: 'shape',
+                typography: 'typography-minor3'
               });
             case 8:
               document.documentElement.querySelectorAll('style[data-theme]').forEach(function (el) {
@@ -117,5 +121,4 @@ var withDesignTokens = (0, _addons.makeDecorator)({
     return renderStory();
   }
 });
-var _default = withDesignTokens;
-exports.default = _default;
+var _default = exports.default = withDesignTokens;

package/dist/es2019/tokens/decorator.js

@@ -37,14 +37,18 @@ const withDesignTokens = makeDecorator({
           case 'auto':
             await setGlobalTheme({
               colorMode: theme,
-              spacing: 'spacing'
+              spacing: 'spacing',
+              shape: 'shape',
+              typography: 'typography-minor3'
             });
             break;
           case 'split':
           case 'stack':
             await setGlobalTheme({
               colorMode: 'light',
-              spacing: 'spacing'
+              spacing: 'spacing',
+              shape: 'shape',
+              typography: 'typography-minor3'
             });
             document.documentElement.querySelectorAll('style[data-theme]').forEach(el => {
               const clone = el.cloneNode(true);

package/dist/esm/tokens/decorator.js

@@ -1,7 +1,7 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
-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; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import _regeneratorRuntime from "@babel/runtime/regenerator";
 import React, { Fragment } from 'react';
 import { makeDecorator, useEffect } from '@storybook/addons';
@@ -46,7 +46,9 @@ var withDesignTokens = makeDecorator({
               _context.next = 5;
               return setGlobalTheme({
                 colorMode: theme,
-                spacing: 'spacing'
+                spacing: 'spacing',
+                shape: 'shape',
+                typography: 'typography-minor3'
               });
             case 5:
               return _context.abrupt("break", 15);
@@ -54,7 +56,9 @@ var withDesignTokens = makeDecorator({
               _context.next = 8;
               return setGlobalTheme({
                 colorMode: 'light',
-                spacing: 'spacing'
+                spacing: 'spacing',
+                shape: 'shape',
+                typography: 'typography-minor3'
               });
             case 8:
               document.documentElement.querySelectorAll('style[data-theme]').forEach(function (el) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/storybook-addon-design-system",
-  "version": "0.5.1",
+  "version": "0.6.0",
   "description": "Design token storybook addon",
   "author": "Atlassian Pty Ltd",
   "publishConfig": {
@@ -8,13 +8,10 @@
   },
   "atlassian": {
     "team": "Design System Team",
-    "releaseModel": "scheduled",
+    "releaseModel": "continuous",
     "website": {
       "name": "Storybook addon",
-      "category": "Tooling",
-      "status": {
-        "type": "alpha"
-      }
+      "category": "Tooling"
     }
   },
   "repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
@@ -36,7 +33,7 @@
     ".": "./src/index.tsx"
   },
   "dependencies": {
-    "@atlaskit/tokens": "^1.4.0",
+    "@atlaskit/tokens": "^1.38.0",
     "@babel/runtime": "^7.0.0",
     "@storybook/addons": "^6.4.0",
     "@storybook/api": "^6.4.0",
@@ -56,7 +53,8 @@
       "dom-events": "use-bind-event-listener",
       "design-system": "v1",
       "design-tokens": [
-        "color"
+        "color",
+        "spacing"
       ],
       "deprecation": "no-deprecated-imports",
       "styling": "emotion"

package/constellation/index/examples.mdx

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

package/dist/cjs/version.json

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

package/dist/es2019/version.json

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

package/dist/esm/version.json

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