@atlaskit/icon 21.7.4 → 21.9.1

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 (22) hide show
  1. package/CHANGELOG.md +36 -0
  2. package/README.md +1 -0
  3. package/build/index.tsx +1 -1
  4. package/dist/cjs/components/utils.js +5 -7
  5. package/dist/cjs/metadata.js +5 -0
  6. package/dist/cjs/version.json +1 -1
  7. package/dist/es2019/components/utils.js +3 -7
  8. package/dist/es2019/metadata.js +5 -0
  9. package/dist/es2019/version.json +1 -1
  10. package/dist/esm/components/utils.js +3 -7
  11. package/dist/esm/metadata.js +5 -0
  12. package/dist/esm/version.json +1 -1
  13. package/dist/types/components/utils.d.ts +1 -1
  14. package/glyph/editor/file-preview.d.ts +4 -0
  15. package/glyph/editor/file-preview.js +20 -0
  16. package/glyph/editor/layout-single.d.ts +4 -0
  17. package/glyph/editor/layout-single.js +20 -0
  18. package/package.json +7 -6
  19. package/svgs/editor/file-preview.svg +1 -0
  20. package/svgs/editor/layout-single.svg +1 -0
  21. package/svgs_raw/editor/file-preview.svg +5 -0
  22. package/svgs_raw/editor/layout-single.svg +3 -0
package/CHANGELOG.md CHANGED
@@ -1,5 +1,41 @@
1
1
  # @atlaskit/icon
2
2
 
3
+ ## 21.9.1
4
+
5
+ ### Patch Changes
6
+
7
+ - Updated dependencies
8
+
9
+ ## 21.9.0
10
+
11
+ ### Minor Changes
12
+
13
+ - [`cf853e39278`](https://bitbucket.org/atlassian/atlassian-frontend/commits/cf853e39278) - [ux] add single layout support for layout
14
+
15
+ ### Patch Changes
16
+
17
+ - Updated dependencies
18
+
19
+ ## 21.8.1
20
+
21
+ ### Patch Changes
22
+
23
+ - Updated dependencies
24
+
25
+ ## 21.8.0
26
+
27
+ ### Minor Changes
28
+
29
+ - [`22b8dd3f590`](https://bitbucket.org/atlassian/atlassian-frontend/commits/22b8dd3f590) - Instrumented Icon with the new theming package, `@atlaskit/tokens`.
30
+
31
+ New tokens will be visible only in applications configured to use the new Tokens API (currently in alpha). These changes are intended to be interoperable with the legacy theme implementation. Legacy dark mode users should expect no visual or breaking changes.
32
+
33
+ - [`88ff832bd2b`](https://bitbucket.org/atlassian/atlassian-frontend/commits/88ff832bd2b) - Add @atlaskit/icon/glyph/editor/file-preview to atlaskit/icon package for media group toolbar
34
+
35
+ ### Patch Changes
36
+
37
+ - Updated dependencies
38
+
3
39
  ## 21.7.4
4
40
 
5
41
  ### Patch Changes
package/README.md CHANGED
@@ -11,3 +11,4 @@ yarn add @atlaskit/icon
11
11
  ## Usage
12
12
 
13
13
  Detailed docs and example usage can be found [here](https://atlaskit.atlassian.com/packages/design-system/icon).
14
+ For adding a new icon to the icon set please follow the [adding new icons](https://developer.atlassian.com/cloud/framework/atlassian-frontend/documentation/02-adding-new-icons/) documentation.
package/build/index.tsx CHANGED
@@ -27,5 +27,5 @@ buildIcons(config).then((icons) => {
27
27
  'core',
28
28
  ]);
29
29
 
30
- return fs.outputFile(path.resolve(root, 'src/metadata.ts'), iconDocs);
30
+ return fs.outputFile(path.resolve(root, 'src/metadata.tsx'), iconDocs);
31
31
  });
package/dist/cjs/components/utils.js CHANGED
@@ -4,14 +4,12 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.getBackground = void 0;
7
- // These are duplicates of colors imports -
8
- // Not bringing in colors to reduce dependency on theme
9
- // These values are enforced via unit tests
10
- var DN30 = '#1B2638';
11
- var N0 = '#FFFFFF';
7
+
8
+ var _tokens = require("@atlaskit/tokens");
9
+
12
10
  var themedBackground = {
13
- light: N0,
14
- dark: DN30
11
+ light: (0, _tokens.token)('color.background.default', '#FFFFFF'),
12
+ dark: (0, _tokens.token)('color.background.default', '#1B2638')
15
13
  };
16
14
  /**
17
15
  * Returns the background color depending on the passed through mode.
package/dist/cjs/metadata.js CHANGED
@@ -602,6 +602,11 @@ var metaData = {
602
602
  componentName: 'EditorItalicIcon',
603
603
  package: '@atlaskit/icon/glyph/editor/italic'
604
604
  },
605
+ 'editor/layout-single': {
606
+ keywords: ['editor/layout-single', 'editorlayoutsingle', 'icon', 'core'],
607
+ componentName: 'EditorLayoutSingleIcon',
608
+ package: '@atlaskit/icon/glyph/editor/layout-single'
609
+ },
605
610
  'editor/layout-three-equal': {
606
611
  keywords: ['editor/layout-three-equal', 'editorlayoutthreeequal', 'icon', 'core'],
607
612
  componentName: 'EditorLayoutThreeEqualIcon',
package/dist/cjs/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/icon",
3
- "version": "21.7.4",
3
+ "version": "21.9.1",
4
4
  "sideEffects": false
5
5
  }
package/dist/es2019/components/utils.js CHANGED
@@ -1,11 +1,7 @@
1
- // These are duplicates of colors imports -
2
- // Not bringing in colors to reduce dependency on theme
3
- // These values are enforced via unit tests
4
- const DN30 = '#1B2638';
5
- const N0 = '#FFFFFF';
1
+ import { token } from '@atlaskit/tokens';
6
2
  const themedBackground = {
7
- light: N0,
8
- dark: DN30
3
+ light: token('color.background.default', '#FFFFFF'),
4
+ dark: token('color.background.default', '#1B2638')
9
5
  };
10
6
  /**
11
7
  * Returns the background color depending on the passed through mode.
package/dist/es2019/metadata.js CHANGED
@@ -595,6 +595,11 @@ const metaData = {
595
595
  componentName: 'EditorItalicIcon',
596
596
  package: '@atlaskit/icon/glyph/editor/italic'
597
597
  },
598
+ 'editor/layout-single': {
599
+ keywords: ['editor/layout-single', 'editorlayoutsingle', 'icon', 'core'],
600
+ componentName: 'EditorLayoutSingleIcon',
601
+ package: '@atlaskit/icon/glyph/editor/layout-single'
602
+ },
598
603
  'editor/layout-three-equal': {
599
604
  keywords: ['editor/layout-three-equal', 'editorlayoutthreeequal', 'icon', 'core'],
600
605
  componentName: 'EditorLayoutThreeEqualIcon',
package/dist/es2019/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/icon",
3
- "version": "21.7.4",
3
+ "version": "21.9.1",
4
4
  "sideEffects": false
5
5
  }
package/dist/esm/components/utils.js CHANGED
@@ -1,11 +1,7 @@
1
- // These are duplicates of colors imports -
2
- // Not bringing in colors to reduce dependency on theme
3
- // These values are enforced via unit tests
4
- var DN30 = '#1B2638';
5
- var N0 = '#FFFFFF';
1
+ import { token } from '@atlaskit/tokens';
6
2
  var themedBackground = {
7
- light: N0,
8
- dark: DN30
3
+ light: token('color.background.default', '#FFFFFF'),
4
+ dark: token('color.background.default', '#1B2638')
9
5
  };
10
6
  /**
11
7
  * Returns the background color depending on the passed through mode.
package/dist/esm/metadata.js CHANGED
@@ -595,6 +595,11 @@ var metaData = {
595
595
  componentName: 'EditorItalicIcon',
596
596
  package: '@atlaskit/icon/glyph/editor/italic'
597
597
  },
598
+ 'editor/layout-single': {
599
+ keywords: ['editor/layout-single', 'editorlayoutsingle', 'icon', 'core'],
600
+ componentName: 'EditorLayoutSingleIcon',
601
+ package: '@atlaskit/icon/glyph/editor/layout-single'
602
+ },
598
603
  'editor/layout-three-equal': {
599
604
  keywords: ['editor/layout-three-equal', 'editorlayoutthreeequal', 'icon', 'core'],
600
605
  componentName: 'EditorLayoutThreeEqualIcon',
package/dist/esm/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/icon",
3
- "version": "21.7.4",
3
+ "version": "21.9.1",
4
4
  "sideEffects": false
5
5
  }
package/dist/types/components/utils.d.ts CHANGED
@@ -3,4 +3,4 @@ import type { ThemeModes } from '@atlaskit/theme/types';
3
3
  * Returns the background color depending on the passed through mode.
4
4
  * @param mode
5
5
  */
6
- export declare const getBackground: (mode?: ThemeModes) => "#1B2638" | "#FFFFFF";
6
+ export declare const getBackground: (mode?: ThemeModes) => "var(--ds-background-default)";
package/glyph/editor/file-preview.d.ts ADDED
@@ -0,0 +1,4 @@
1
+ import { PureComponent } from 'react';
2
+ import type { GlyphProps } from '@atlaskit/icon/types';
3
+
4
+ export default class extends PureComponent<GlyphProps> {}
package/glyph/editor/file-preview.js ADDED
@@ -0,0 +1,20 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.default = void 0;
7
+
8
+ var _react = _interopRequireDefault(require("react"));
9
+
10
+ var _base = require("@atlaskit/icon/base");
11
+
12
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
13
+
14
+ const EditorFilePreviewIcon = props => /*#__PURE__*/_react.default.createElement(_base.Icon, Object.assign({
15
+ dangerouslySetGlyph: `<svg width="24" height="24" viewBox="0 0 24 24" role="presentation"><path fill="#fff" fill-opacity=".01" d="M0 0h24v24H0z"/><path fill-rule="evenodd" clip-rule="evenodd" d="M6 18h3a1 1 0 010 2H6a2 2 0 01-2-2v-3a1 1 0 112 0v3zm12 2h-3a1 1 0 010-2h3v-3a1 1 0 012 0v3a2 2 0 01-2 2zM6 4h3a1 1 0 010 2H6v3a1 1 0 01-2 0V6a2 2 0 012-2zm12 2h-3a1 1 0 110-2h3a2 2 0 012 2v3a1 1 0 01-2 0V6z" fill="currentColor"/><path d="M10.55 12.061l-1.873.337a.998.998 0 01-.718-1.713 1 1 0 01.718-.287h3.7c.316-.08.686.021.957.293.272.271.373.641.293.957v3.7a1 1 0 01-2 0l.337-1.873-2.602 2.603c-.345.344-.94.306-1.33-.084-.391-.39-.429-.986-.084-1.33l2.602-2.603z" fill="currentColor"/></svg>`
16
+ }, props));
17
+
18
+ EditorFilePreviewIcon.displayName = 'EditorFilePreviewIcon';
19
+ var _default = EditorFilePreviewIcon;
20
+ exports.default = _default;
package/glyph/editor/layout-single.d.ts ADDED
@@ -0,0 +1,4 @@
1
+ import { PureComponent } from 'react';
2
+ import type { GlyphProps } from '@atlaskit/icon/types';
3
+
4
+ export default class extends PureComponent<GlyphProps> {}
package/glyph/editor/layout-single.js ADDED
@@ -0,0 +1,20 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.default = void 0;
7
+
8
+ var _react = _interopRequireDefault(require("react"));
9
+
10
+ var _base = require("@atlaskit/icon/base");
11
+
12
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
13
+
14
+ const EditorLayoutSingleIcon = props => /*#__PURE__*/_react.default.createElement(_base.Icon, Object.assign({
15
+ dangerouslySetGlyph: `<svg width="24" height="24" viewBox="0 0 24 24" role="presentation"><rect x="4" y="5" width="16" height="14" rx="2" fill="currentColor"/></svg>`
16
+ }, props));
17
+
18
+ EditorLayoutSingleIcon.displayName = 'EditorLayoutSingleIcon';
19
+ var _default = EditorLayoutSingleIcon;
20
+ exports.default = _default;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/icon",
3
- "version": "21.7.4",
3
+ "version": "21.9.1",
4
4
  "description": "An icon is used as a visual representation of common actions and commands to provide context.",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -35,7 +35,8 @@
35
35
  "build-glyphs": "ts-node --project ../../../tsconfig.node.json ./build/index.tsx"
36
36
  },
37
37
  "dependencies": {
38
- "@atlaskit/theme": "^11.4.0",
38
+ "@atlaskit/theme": "^12.0.0",
39
+ "@atlaskit/tokens": "^0.3.0",
39
40
  "@babel/runtime": "^7.0.0",
40
41
  "@emotion/core": "^10.0.9"
41
42
  },
@@ -47,16 +48,16 @@
47
48
  "@atlaskit/build-utils": "*",
48
49
  "@atlaskit/button": "^16.1.0",
49
50
  "@atlaskit/docs": "*",
50
- "@atlaskit/dynamic-table": "^14.3.0",
51
+ "@atlaskit/dynamic-table": "^14.4.0",
51
52
  "@atlaskit/icon-file-type": "^6.3.0",
52
53
  "@atlaskit/icon-object": "^6.2.0",
53
54
  "@atlaskit/icon-priority": "^6.2.0",
54
55
  "@atlaskit/logo": "^13.5.0",
55
- "@atlaskit/modal-dialog": "^11.7.0",
56
+ "@atlaskit/modal-dialog": "^12.1.0",
56
57
  "@atlaskit/section-message": "^6.1.0",
57
58
  "@atlaskit/ssr": "*",
58
59
  "@atlaskit/textfield": "^5.1.0",
59
- "@atlaskit/tooltip": "^17.4.0",
60
+ "@atlaskit/tooltip": "^17.5.0",
60
61
  "@atlaskit/visual-regression": "*",
61
62
  "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
62
63
  "@babel/core": "^7.12.3",
@@ -83,7 +84,7 @@
83
84
  "styling": "emotion",
84
85
  "ui-components": "lite-mode",
85
86
  "analytics": "analytics-next",
86
- "theming": "new-theming-api",
87
+ "theming": "tokens",
87
88
  "deprecation": "no-deprecated-imports"
88
89
  }
89
90
  },
package/svgs/editor/file-preview.svg ADDED
@@ -0,0 +1 @@
1
+ <svg width="24" height="24" viewBox="0 0 24 24"><path fill="#fff" fill-opacity=".01" d="M0 0h24v24H0z"/><path fill-rule="evenodd" clip-rule="evenodd" d="M6 18h3a1 1 0 010 2H6a2 2 0 01-2-2v-3a1 1 0 112 0v3zm12 2h-3a1 1 0 010-2h3v-3a1 1 0 012 0v3a2 2 0 01-2 2zM6 4h3a1 1 0 010 2H6v3a1 1 0 01-2 0V6a2 2 0 012-2zm12 2h-3a1 1 0 110-2h3a2 2 0 012 2v3a1 1 0 01-2 0V6z" fill="currentColor"/><path d="M10.55 12.061l-1.873.337a.998.998 0 01-.718-1.713 1 1 0 01.718-.287h3.7c.316-.08.686.021.957.293.272.271.373.641.293.957v3.7a1 1 0 01-2 0l.337-1.873-2.602 2.603c-.345.344-.94.306-1.33-.084-.391-.39-.429-.986-.084-1.33l2.602-2.603z" fill="currentColor"/></svg>
package/svgs/editor/layout-single.svg ADDED
@@ -0,0 +1 @@
1
+ <svg width="24" height="24" viewBox="0 0 24 24"><rect x="4" y="5" width="16" height="14" rx="2" fill="currentColor"/></svg>
package/svgs_raw/editor/file-preview.svg ADDED
@@ -0,0 +1,5 @@
1
+ <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <rect width="24" height="24" fill="white" fill-opacity="0.01"/>
3
+ <path fill-rule="evenodd" clip-rule="evenodd" d="M6 18H9C9.26522 18 9.51957 18.1054 9.70711 18.2929C9.89464 18.4804 10 18.7348 10 19C10 19.2652 9.89464 19.5196 9.70711 19.7071C9.51957 19.8946 9.26522 20 9 20H6C5.46957 20 4.96086 19.7893 4.58579 19.4142C4.21071 19.0391 4 18.5304 4 18V15C4 14.7348 4.10536 14.4804 4.29289 14.2929C4.48043 14.1054 4.73478 14 5 14C5.26522 14 5.51957 14.1054 5.70711 14.2929C5.89464 14.4804 6 14.7348 6 15V18ZM18 20H15C14.7348 20 14.4804 19.8946 14.2929 19.7071C14.1054 19.5196 14 19.2652 14 19C14 18.7348 14.1054 18.4804 14.2929 18.2929C14.4804 18.1054 14.7348 18 15 18H18V15C18 14.7348 18.1054 14.4804 18.2929 14.2929C18.4804 14.1054 18.7348 14 19 14C19.2652 14 19.5196 14.1054 19.7071 14.2929C19.8946 14.4804 20 14.7348 20 15V18C20 18.5304 19.7893 19.0391 19.4142 19.4142C19.0391 19.7893 18.5304 20 18 20ZM6 4H9C9.26522 4 9.51957 4.10536 9.70711 4.29289C9.89464 4.48043 10 4.73478 10 5C10 5.26522 9.89464 5.51957 9.70711 5.70711C9.51957 5.89464 9.26522 6 9 6H6V9C6 9.26522 5.89464 9.51957 5.70711 9.70711C5.51957 9.89464 5.26522 10 5 10C4.73478 10 4.48043 9.89464 4.29289 9.70711C4.10536 9.51957 4 9.26522 4 9V6C4 5.46957 4.21071 4.96086 4.58579 4.58579C4.96086 4.21071 5.46957 4 6 4ZM18 6H15C14.7348 6 14.4804 5.89464 14.2929 5.70711C14.1054 5.51957 14 5.26522 14 5C14 4.73478 14.1054 4.48043 14.2929 4.29289C14.4804 4.10536 14.7348 4 15 4H18C18.5304 4 19.0391 4.21071 19.4142 4.58579C19.7893 4.96086 20 5.46957 20 6V9C20 9.26522 19.8946 9.51957 19.7071 9.70711C19.5196 9.89464 19.2652 10 19 10C18.7348 10 18.4804 9.89464 18.2929 9.70711C18.1054 9.51957 18 9.26522 18 9V6Z" fill="#42526E"/>
4
+ <path d="M10.5498 12.0612L8.67737 12.3977C8.54461 12.4001 8.41271 12.3759 8.28938 12.3267C8.16606 12.2775 8.05376 12.2042 7.95906 12.1111C7.86435 12.018 7.78913 11.907 7.73779 11.7846C7.68644 11.6621 7.65999 11.5307 7.65999 11.3979C7.65999 11.2651 7.68644 11.1337 7.73779 11.0112C7.78913 10.8887 7.86435 10.7777 7.95906 10.6847C8.05376 10.5916 8.16606 10.5183 8.28939 10.4691C8.41271 10.4199 8.54461 10.3957 8.67737 10.398L12.377 10.398C12.693 10.3181 13.0628 10.4193 13.3344 10.6908C13.6059 10.9623 13.707 11.3321 13.6271 11.6482L13.6271 15.3478C13.6226 15.61 13.5152 15.8599 13.3282 16.0436C13.1412 16.2274 12.8895 16.3304 12.6273 16.3304C12.3651 16.3304 12.1133 16.2274 11.9263 16.0436C11.7393 15.8599 11.632 15.61 11.6274 15.3478L11.964 13.4754L9.36185 16.0775C9.01749 16.4219 8.4214 16.3844 8.03108 15.9941C7.64075 15.6038 7.60328 15.0077 7.94764 14.6633L10.5498 12.0612Z" fill="#42526E"/>
5
+ </svg>
package/svgs_raw/editor/layout-single.svg ADDED
@@ -0,0 +1,3 @@
1
+ <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <rect x="4" y="5" width="16" height="14" rx="2" fill="#42526E"/>
3
+ </svg>