@atlaskit/storybook-addon-design-system 1.1.0 → 1.2.0

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 (9) hide show
  1. package/CHANGELOG.md +25 -0
  2. package/constellation/index/props.mdx +48 -26
  3. package/dist/cjs/decorator.js +2 -2
  4. package/dist/es2019/decorator.js +2 -2
  5. package/dist/esm/decorator.js +2 -2
  6. package/package.json +3 -3
  7. package/src/decorator.tsx +2 -2
  8. package/src/manager.tsx +2 -1
  9. package/src/tool.tsx +1 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,30 @@
1
1
  # @atlaskit/storybook-addon-design-system
2
2
 
3
+ ## 1.2.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [#127511](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/127511)
8
+ [`db30e29344013`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/db30e29344013) -
9
+ Widening range of `react` and `react-dom` peer dependencies from `^16.8.0 || ^17.0.0 || ~18.2.0`
10
+ to the wider range of ``^16.8.0 || ^17.0.0 || ^18.0.0` (where applicable).
11
+
12
+ This change has been done to enable usage of `react@18.3` as well as to have a consistent peer
13
+ dependency range for `react` and `react-dom` for `/platform` packages.
14
+
15
+ ### Patch Changes
16
+
17
+ - Updated dependencies
18
+
19
+ ## 1.1.1
20
+
21
+ ### Patch Changes
22
+
23
+ - [#121959](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/121959)
24
+ [`44763b631bec5`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/44763b631bec5) -
25
+ Renamed `typography-minor3` theme to `typography-modernized`. There are no visual changes, purely
26
+ just a rename.
27
+
3
28
  ## 1.1.0
4
29
 
5
30
  ### Minor Changes
package/constellation/index/props.mdx CHANGED
@@ -1,38 +1,36 @@
1
- After installing the package, register the addon with your Storybook configuration in the
2
- `.storybook/main.js` file.
1
+ ## Storybook v8
3
2
 
4
- ```diff
5
- module.exports = {
6
- addons: [
7
- + '@atlaskit/storybook-addon-design-system'
8
- ]
9
- };
10
- ```
11
-
12
- ## Storybook v6 and below
13
-
14
- Add the decorator to `.storybook/preview.js`, which is responsible for applying the logic which has
15
- the ability to modify the DOM of your stories.
16
-
17
- ```diff
18
- + import { withDesignTokens } from '@atlaskit/storybook-addon-design-system';
3
+ 1. Install a latest v1 version of the addon (e.g., `1.1.0`).
4
+ 2. Register the addon with your Storybook configuration in the `.storybook/main.js` file.
19
5
 
20
- const { addDecorator } = require('@storybook/react');
6
+ ```diff
7
+ module.exports = {
8
+ addons: [
9
+ + '@atlaskit/storybook-addon-design-system'
10
+ ]
11
+ };
12
+ ```
21
13
 
22
- + addDecorator(withDesignTokens);
23
- ```
14
+ ## Storybook v7
24
15
 
25
- ## Storybook v7 and above
16
+ 1. Install a pre-1.0 version of the addon (e.g., `0.8.0`).
17
+ 2. Register the addon with your Storybook configuration in the `.storybook/main.js` file.
26
18
 
27
- For Storybook version 7, the following changes are necessary:
19
+ ```diff
20
+ module.exports = {
21
+ addons: [
22
+ + '@atlaskit/storybook-addon-design-system'
23
+ ]
24
+ };
25
+ ```
28
26
 
29
- 1. Initialising the `globalTypes.adsTheme` property in the global context
30
- 2. Disable the
27
+ 3. Initialise the `globalTypes.adsTheme` property in the global context
28
+ 4. Disable the
31
29
  [built in `backgrounds` add on](https://storybook.js.org/docs/essentials/backgrounds#disable-backgrounds),
32
30
  as it conflicts with the ADS theming
33
31
 
34
- Both of these can be done in
35
- [the `preview` file](https://storybook.js.org/docs/configure#configure-story-rendering):
32
+ Both step 3 and step 4 can be done in
33
+ [the `preview.js` file](https://storybook.js.org/docs/configure#configure-story-rendering):
36
34
 
37
35
  ```diff
38
36
  + import { withDesignTokens } from '@atlaskit/storybook-addon-design-system';
@@ -58,3 +56,27 @@ const preview = {
58
56
 
59
57
  export default preview;
60
58
  ```
59
+
60
+ ## Storybook v6 and below
61
+
62
+ 1. Install a pre-1.0 version of the addon (e.g., `0.8.0`).
63
+ 2. Register the addon with your Storybook configuration in the `.storybook/main.js` file.
64
+
65
+ ```diff
66
+ module.exports = {
67
+ addons: [
68
+ + '@atlaskit/storybook-addon-design-system'
69
+ ]
70
+ };
71
+ ```
72
+
73
+ 3. Add the decorator to `.storybook/preview.js`, which is responsible for applying the logic which
74
+ has the ability to modify the DOM of your stories.
75
+
76
+ ```diff
77
+ + import { withDesignTokens } from '@atlaskit/storybook-addon-design-system';
78
+
79
+ const { addDecorator } = require('@storybook/react');
80
+
81
+ + addDecorator(withDesignTokens);
82
+ ```
package/dist/cjs/decorator.js CHANGED
@@ -54,7 +54,7 @@ var withDesignTokens = function withDesignTokens(StoryFn, context) {
54
54
  colorMode: theme,
55
55
  spacing: 'spacing',
56
56
  shape: 'shape',
57
- typography: 'typography-minor3'
57
+ typography: 'typography-modernized'
58
58
  });
59
59
  case 5:
60
60
  return _context.abrupt("break", 15);
@@ -64,7 +64,7 @@ var withDesignTokens = function withDesignTokens(StoryFn, context) {
64
64
  colorMode: 'light',
65
65
  spacing: 'spacing',
66
66
  shape: 'shape',
67
- typography: 'typography-minor3'
67
+ typography: 'typography-modernized'
68
68
  });
69
69
  case 8:
70
70
  document.documentElement.querySelectorAll('style[data-theme]').forEach(function (el) {
package/dist/es2019/decorator.js CHANGED
@@ -35,7 +35,7 @@ const withDesignTokens = (StoryFn, context) => {
35
35
  colorMode: theme,
36
36
  spacing: 'spacing',
37
37
  shape: 'shape',
38
- typography: 'typography-minor3'
38
+ typography: 'typography-modernized'
39
39
  });
40
40
  break;
41
41
  case 'split':
@@ -44,7 +44,7 @@ const withDesignTokens = (StoryFn, context) => {
44
44
  colorMode: 'light',
45
45
  spacing: 'spacing',
46
46
  shape: 'shape',
47
- typography: 'typography-minor3'
47
+ typography: 'typography-modernized'
48
48
  });
49
49
  document.documentElement.querySelectorAll('style[data-theme]').forEach(el => {
50
50
  const clone = el.cloneNode(true);
package/dist/esm/decorator.js CHANGED
@@ -44,7 +44,7 @@ var withDesignTokens = function withDesignTokens(StoryFn, context) {
44
44
  colorMode: theme,
45
45
  spacing: 'spacing',
46
46
  shape: 'shape',
47
- typography: 'typography-minor3'
47
+ typography: 'typography-modernized'
48
48
  });
49
49
  case 5:
50
50
  return _context.abrupt("break", 15);
@@ -54,7 +54,7 @@ var withDesignTokens = function withDesignTokens(StoryFn, context) {
54
54
  colorMode: 'light',
55
55
  spacing: 'spacing',
56
56
  shape: 'shape',
57
- typography: 'typography-minor3'
57
+ typography: 'typography-modernized'
58
58
  });
59
59
  case 8:
60
60
  document.documentElement.querySelectorAll('style[data-theme]').forEach(function (el) {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/storybook-addon-design-system",
3
- "version": "1.1.0",
3
+ "version": "1.2.0",
4
4
  "description": "Design token storybook addon",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "publishConfig": {
@@ -32,7 +32,7 @@
32
32
  ".": "./src/index.tsx"
33
33
  },
34
34
  "dependencies": {
35
- "@atlaskit/tokens": "^1.56.0",
35
+ "@atlaskit/tokens": "^1.58.0",
36
36
  "@babel/runtime": "^7.0.0",
37
37
  "@storybook/components": "^8.1.0",
38
38
  "@storybook/icons": "^1.2.9",
@@ -41,7 +41,7 @@
41
41
  "@storybook/types": "8.0.0"
42
42
  },
43
43
  "peerDependencies": {
44
- "react": "^16.8.0 || ^17.0.0 || ~18.2.0"
44
+ "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
45
45
  },
46
46
  "bundler": {
47
47
  "exportEntries": [
package/src/decorator.tsx CHANGED
@@ -43,7 +43,7 @@ const withDesignTokens = (StoryFn: StoryFunction<Renderer>, context: StoryContex
43
43
  colorMode: theme,
44
44
  spacing: 'spacing',
45
45
  shape: 'shape',
46
- typography: 'typography-minor3',
46
+ typography: 'typography-modernized',
47
47
  });
48
48
  break;
49
49
  case 'split':
@@ -52,7 +52,7 @@ const withDesignTokens = (StoryFn: StoryFunction<Renderer>, context: StoryContex
52
52
  colorMode: 'light',
53
53
  spacing: 'spacing',
54
54
  shape: 'shape',
55
- typography: 'typography-minor3',
55
+ typography: 'typography-modernized',
56
56
  });
57
57
 
58
58
  document.documentElement.querySelectorAll('style[data-theme]').forEach((el) => {
package/src/manager.tsx CHANGED
@@ -7,7 +7,8 @@ addons.register(ADDON_ID, () => {
7
7
  addons.add(TOOL_ID, {
8
8
  type: types.TOOL,
9
9
  title: TITLE,
10
- match: ({ viewMode }) => !!(viewMode && viewMode.match(/^(story|docs)$/)),
10
+ match: ({ viewMode }: { viewMode?: string | undefined }) =>
11
+ !!(viewMode && viewMode.match(/^(story|docs)$/)),
11
12
  render: Tool,
12
13
  });
13
14
  });
package/src/tool.tsx CHANGED
@@ -49,7 +49,7 @@ const Tool = () => {
49
49
  trigger="click"
50
50
  // closeOnClick
51
51
  onVisibleChange={setIsVisible}
52
- tooltip={({ onHide }) => (
52
+ tooltip={({ onHide }: { onHide: () => void }) => (
53
53
  <TooltipLinkList
54
54
  links={themeOptions.map(({ id, title, icon }) => ({
55
55
  id,