@atlaskit/storybook-addon-design-system 3.2.2 → 3.2.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (13) hide show
  1. package/CHANGELOG.md +9 -0
  2. package/dist/cjs/decorator.js +5 -3
  3. package/dist/es2019/decorator.js +5 -3
  4. package/dist/esm/decorator.js +5 -3
  5. package/dist/types/constants.d.ts +1 -1
  6. package/dist/types-ts4.5/constants.d.ts +1 -1
  7. package/manager.js +3 -1
  8. package/package.json +5 -2
  9. package/preset.js +1 -1
  10. package/preview.js +3 -1
  11. package/src/constants.tsx +1 -1
  12. package/src/decorator.tsx +3 -1
  13. package/src/preset.tsx +1 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,14 @@
1
1
  # @atlaskit/storybook-addon-design-system
2
2
 
3
+ ## 3.2.3
4
+
5
+ ### Patch Changes
6
+
7
+ - [`8ee405518dbc3`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/8ee405518dbc3) -
8
+ Fixed ADS theme switcher not applying dark and split/stack themes in Storybook. Added `motion` to
9
+ `setGlobalTheme` calls to prevent a `ReferenceError` from an uninitialized feature flag, and
10
+ changed split/stack mode to load both light and dark theme CSS.
11
+
3
12
  ## 3.2.2
4
13
 
5
14
  ### Patch Changes
package/dist/cjs/decorator.js CHANGED
@@ -53,17 +53,19 @@ var withDesignTokens = function withDesignTokens(StoryFn, context) {
53
53
  colorMode: theme,
54
54
  spacing: 'spacing',
55
55
  shape: 'shape',
56
- typography: 'typography'
56
+ typography: 'typography',
57
+ motion: 'motion'
57
58
  });
58
59
  case 5:
59
60
  return _context.abrupt("break", 15);
60
61
  case 6:
61
62
  _context.next = 8;
62
63
  return (0, _tokens.setGlobalTheme)({
63
- colorMode: 'light',
64
+ colorMode: 'auto',
64
65
  spacing: 'spacing',
65
66
  shape: 'shape',
66
- typography: 'typography'
67
+ typography: 'typography',
68
+ motion: 'motion'
67
69
  });
68
70
  case 8:
69
71
  document.documentElement.querySelectorAll('style[data-theme]').forEach(function (el) {
package/dist/es2019/decorator.js CHANGED
@@ -35,16 +35,18 @@ const withDesignTokens = (StoryFn, context) => {
35
35
  colorMode: theme,
36
36
  spacing: 'spacing',
37
37
  shape: 'shape',
38
- typography: 'typography'
38
+ typography: 'typography',
39
+ motion: 'motion'
39
40
  });
40
41
  break;
41
42
  case 'split':
42
43
  case 'stack':
43
44
  await setGlobalTheme({
44
- colorMode: 'light',
45
+ colorMode: 'auto',
45
46
  spacing: 'spacing',
46
47
  shape: 'shape',
47
- typography: 'typography'
48
+ typography: 'typography',
49
+ motion: 'motion'
48
50
  });
49
51
  document.documentElement.querySelectorAll('style[data-theme]').forEach(el => {
50
52
  const clone = el.cloneNode(true);
package/dist/esm/decorator.js CHANGED
@@ -44,17 +44,19 @@ var withDesignTokens = function withDesignTokens(StoryFn, context) {
44
44
  colorMode: theme,
45
45
  spacing: 'spacing',
46
46
  shape: 'shape',
47
- typography: 'typography'
47
+ typography: 'typography',
48
+ motion: 'motion'
48
49
  });
49
50
  case 5:
50
51
  return _context.abrupt("break", 15);
51
52
  case 6:
52
53
  _context.next = 8;
53
54
  return setGlobalTheme({
54
- colorMode: 'light',
55
+ colorMode: 'auto',
55
56
  spacing: 'spacing',
56
57
  shape: 'shape',
57
- typography: 'typography'
58
+ typography: 'typography',
59
+ motion: 'motion'
58
60
  });
59
61
  case 8:
60
62
  document.documentElement.querySelectorAll('style[data-theme]').forEach(function (el) {
package/dist/types/constants.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  export declare const ADDON_ID = "ads-tokens";
2
- export declare const TOOL_ID = "ads-tokens/tool";
2
+ export declare const TOOL_ID: 'ads-tokens/tool';
3
3
  export declare const TITLE = "Design Tokens";
4
4
  export declare const DECORATOR_ID = "withDesignTokens";
5
5
  export declare const DECORATOR_PARAM = "DesignTokens";
package/dist/types-ts4.5/constants.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  export declare const ADDON_ID = "ads-tokens";
2
- export declare const TOOL_ID = "ads-tokens/tool";
2
+ export declare const TOOL_ID: 'ads-tokens/tool';
3
3
  export declare const TITLE = "Design Tokens";
4
4
  export declare const DECORATOR_ID = "withDesignTokens";
5
5
  export declare const DECORATOR_PARAM = "DesignTokens";
package/manager.js CHANGED
@@ -1,2 +1,4 @@
1
1
  /* eslint-disable */
2
- import './dist/esm/manager.js';
2
+ // Points to local source for AFM workspace use. Storybook's bundler handles TSX transpilation.
3
+ // The ak-postbuild script rewrites this to ./dist/esm/manager.js for published dists.
4
+ import './src/manager.tsx';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/storybook-addon-design-system",
3
- "version": "3.2.2",
3
+ "version": "3.2.3",
4
4
  "description": "Design token storybook addon",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "publishConfig": {
@@ -29,7 +29,7 @@
29
29
  ],
30
30
  "atlaskit:src": "src/index.tsx",
31
31
  "dependencies": {
32
- "@atlaskit/tokens": "^11.0.0",
32
+ "@atlaskit/tokens": "^11.4.0",
33
33
  "@babel/runtime": "^7.0.0",
34
34
  "@storybook/components": "^8.4.7",
35
35
  "@storybook/icons": "^1.2.9",
@@ -41,6 +41,9 @@
41
41
  "peerDependencies": {
42
42
  "react": "^18.2.0"
43
43
  },
44
+ "scripts": {
45
+ "ak-postbuild": "echo \"/* eslint-disable */\nimport './dist/esm/manager.js';\" > manager.js && echo \"/* eslint-disable */\nexport { default } from './dist/esm/preview.js';\" > preview.js && echo \"/* eslint-disable */\nexport { webpack } from './dist/esm/preset.js';\" > preset.js"
46
+ },
44
47
  "bundler": {
45
48
  "exportEntries": [
46
49
  "src/index.tsx"
package/preset.js CHANGED
@@ -1,2 +1,2 @@
1
1
  /* eslint-disable */
2
- export { webpack } from './dist/esm/preset.js';
2
+ export const webpack = async (config) => config;
package/preview.js CHANGED
@@ -1,2 +1,4 @@
1
1
  /* eslint-disable */
2
- export { default } from './dist/esm/preview.js';
2
+ // Points to local source for AFM workspace use. Storybook's bundler handles TSX transpilation.
3
+ // The ak-postbuild script rewrites this to ./dist/esm/preview.js for published dists.
4
+ export { default } from './src/preview.tsx';
package/src/constants.tsx CHANGED
@@ -1,5 +1,5 @@
1
1
  export const ADDON_ID = 'ads-tokens';
2
- export const TOOL_ID = `${ADDON_ID}/tool`;
2
+ export const TOOL_ID: 'ads-tokens/tool' = `${ADDON_ID}/tool`;
3
3
  export const TITLE = 'Design Tokens';
4
4
  export const DECORATOR_ID = 'withDesignTokens';
5
5
  export const DECORATOR_PARAM = 'DesignTokens';
package/src/decorator.tsx CHANGED
@@ -47,15 +47,17 @@ const withDesignTokens = (
47
47
  spacing: 'spacing',
48
48
  shape: 'shape',
49
49
  typography: 'typography',
50
+ motion: 'motion',
50
51
  });
51
52
  break;
52
53
  case 'split':
53
54
  case 'stack':
54
55
  await setGlobalTheme({
55
- colorMode: 'light',
56
+ colorMode: 'auto',
56
57
  spacing: 'spacing',
57
58
  shape: 'shape',
58
59
  typography: 'typography',
60
+ motion: 'motion',
59
61
  });
60
62
 
61
63
  document.documentElement.querySelectorAll('style[data-theme]').forEach((el) => {
package/src/preset.tsx CHANGED
@@ -1,3 +1,3 @@
1
- export const webpack = async (config: any) => {
1
+ export const webpack: (config: any) => Promise<any> = async (config: any) => {
2
2
  return config;
3
3
  };