@atlaskit/icon-object 6.7.1 → 6.8.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @atlaskit/icon-object
 
+## 6.8.0
+
+### Minor Changes
+
+- [#169436](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/169436)
+  [`571aeaa4c8c45`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/571aeaa4c8c45) -
+  Migrate to new icons and icon-tile, behind a feature flag. Icon tile components have also been
+  updated to use the standard export process for `@atlaskit` components, with optimised exports for
+  cjs, es2019 and esm.
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 6.7.1
 
 ### Patch Changes

package/__perf__/default.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
 
-import CodeIcon24 from '../glyph/code/24';
+import CodeIcon24 from '../src/artifacts/glyph/code/24';
 
 export default () => <CodeIcon24 label="CodeIcon 24" />;

package/afm-cc/tsconfig.json

@@ -19,6 +19,9 @@
     "references": [
         {
             "path": "../../icon/afm-cc/tsconfig.json"
+        },
+        {
+            "path": "../../../platform/feature-flags/afm-cc/tsconfig.json"
         }
     ]
 }

package/build/index.tsx

@@ -1,35 +1,44 @@
 import path from 'path';
+
+import fs from 'fs-extra';
+import pkgDir from 'pkg-dir';
+
+import format from '@af/formatting/sync';
 import { build, createIconDocs, tidy } from '@af/icon-build-process';
 import type { IconBuildConfig } from '@af/icon-build-process';
-import pkgDir from 'pkg-dir';
-import fs from 'fs-extra';
+import { createSignedArtifact } from '@atlassian/codegen';
+
+import { getIconObjectJSX, iconObjectMapping } from './utils';
 
 const root = pkgDir.sync();
 
 const config16: IconBuildConfig = {
 	srcDir: path.resolve(root!, 'svgs_raw'),
 	processedDir: path.resolve(root!, 'svgs'),
-	destDir: path.resolve(root!, 'glyph'),
+	destDir: path.resolve(root!, 'src', 'artifacts', 'glyph-legacy'),
 	maxWidth: 16,
 	maxHeight: 16,
 	glob: '**/16.svg',
 	size: 'small',
 	baseIconEntryPoint: '@atlaskit/icon/base',
+	outputSource: true,
 	isColorsDisabled: true,
 };
 
 const config24: IconBuildConfig = {
 	srcDir: path.resolve(root!, 'svgs_raw'),
 	processedDir: path.resolve(root!, 'svgs'),
-	destDir: path.resolve(root!, 'glyph'),
+	destDir: path.resolve(root!, 'src', 'artifacts', 'glyph-legacy'),
 	maxWidth: 24,
 	maxHeight: 24,
 	glob: '**/24.svg',
 	size: 'medium',
 	baseIconEntryPoint: '@atlaskit/icon/base',
+	outputSource: true,
 	isColorsDisabled: true,
 };
 
+// Create legacy icons and docs
 tidy(config16)
 	.then(() => Promise.all([build(config16), build(config24)]))
 	.then(([sixteen, twentyfour]) => {
@@ -43,3 +52,20 @@ tidy(config16)
 
 		return fs.outputFile(path.resolve(root!, 'src/metadata.tsx'), iconDocs);
 	});
+
+// For each size (16px and 24px) and each iconObjectMapping, create a new JSX file
+// based on the function getIconObjectJSX and write it to the format ./glyph/{name}/{size}.jsx
+Object.entries(iconObjectMapping).forEach(([name, iconObject]) => {
+	// empty existing folder
+	fs.emptyDirSync(path.resolve(root!, 'src', 'artifacts', 'glyph', name));
+	(['16', '24'] as const).forEach((size) => {
+		const iconObjectJSX = getIconObjectJSX(name, iconObject.icon, iconObject.appearance, size);
+		// create file if it doesn't exist
+		fs.ensureFileSync(path.resolve(root!, 'src', 'artifacts', 'glyph', name, `${size}.tsx`));
+		// write new content
+		fs.writeFileSync(
+			path.resolve(root!, 'src', 'artifacts', 'glyph', name, `${size}.tsx`),
+			createSignedArtifact(format(iconObjectJSX, 'tsx'), 'yarn build:icon-glyphs'),
+		);
+	});
+});

package/build/utils.tsx

@@ -0,0 +1,132 @@
+export const iconObjectMapping: Record<string, { icon: string; appearance: string }> = {
+	blog: {
+		icon: 'quotation-mark',
+		appearance: 'blueBold',
+	},
+	branch: {
+		icon: 'branch',
+		appearance: 'blueBold',
+	},
+	bug: {
+		icon: 'bug',
+		appearance: 'redBold',
+	},
+	calendar: {
+		icon: 'calendar',
+		appearance: 'redBold',
+	},
+	changes: {
+		icon: 'changes',
+		appearance: 'orangeBold',
+	},
+	code: {
+		icon: 'angle-brackets',
+		appearance: 'purpleBold',
+	},
+	commit: {
+		icon: 'commit',
+		appearance: 'orangeBold',
+	},
+	epic: {
+		icon: 'epic',
+		appearance: 'purpleBold',
+	},
+	improvement: {
+		icon: 'arrow-up',
+		appearance: 'greenBold',
+	},
+	incident: {
+		icon: 'incident',
+		appearance: 'redBold',
+	},
+	issue: {
+		icon: 'issue',
+		appearance: 'blueBold',
+	},
+	'new-feature': {
+		icon: 'add',
+		appearance: 'greenBold',
+	},
+	page: {
+		icon: 'page',
+		appearance: 'blueBold',
+	},
+	problem: {
+		icon: 'problem',
+		appearance: 'redBold',
+	},
+	'pull-request': {
+		icon: 'pull-request',
+		appearance: 'greenBold',
+	},
+	question: {
+		icon: 'question-circle',
+		appearance: 'purpleBold',
+	},
+	story: {
+		icon: 'story',
+		appearance: 'greenBold',
+	},
+	subtask: {
+		icon: 'subtasks',
+		appearance: 'blueBold',
+	},
+	task: {
+		icon: 'task',
+		appearance: 'blueBold',
+	},
+};
+
+export const getIconObjectJSX = (
+	name: string,
+	icon: string,
+	appearance: string,
+	size: '16' | '24',
+) => {
+	// convert name to PascalCase from kebab-case
+	const componentName = `${name
+		.split('-')
+		.map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+		.join('')}${size}Icon`;
+
+	return `import React from 'react';
+
+import { IconTile } from '@atlaskit/icon';
+import NewIcon from '@atlaskit/icon/core/${icon}';
+import type { GlyphProps } from '@atlaskit/icon/types';
+import { fg } from '@atlaskit/platform-feature-flags';
+
+import IconObjectOld from '../../glyph-legacy/${name}/${size}';
+
+/**
+ * __${size}px \`${name}\` icon object__
+ *
+ * - [Examples](https://atlassian.design/components/icon-object/examples)
+ * - [Code](https://atlassian.design/components/icon-object/code)
+ * - [Usage](https://atlassian.design/components/icon-object/usage)
+ */
+const ${componentName} = ({
+	label,
+	testId,
+}: Omit<GlyphProps, 'primaryColor' | 'secondaryColor' | 'size'>) => {
+	if (fg('icon-object-migration')) {
+		return (
+			<IconTile
+				icon={NewIcon}
+				appearance="${appearance}"
+				size="${size}"
+				label={label}
+				testId={testId}
+				LEGACY_fallbackComponent={<IconObjectOld label={label} testId={testId} />}
+			/>
+		);
+	} else {
+		return <IconObjectOld label={label} testId={testId} />
+	}
+};
+
+${componentName}.displayName = '${componentName}';
+
+export default ${componentName};
+`;
+};

package/dist/cjs/artifacts/glyph/blog/16.js

@@ -0,0 +1,49 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _icon = require("@atlaskit/icon");
+var _quotationMark = _interopRequireDefault(require("@atlaskit/icon/core/quotation-mark"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _ = _interopRequireDefault(require("../../glyph-legacy/blog/16"));
+/**
+ * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
+ * @codegen <<SignedSource::845767e81b63ae055da0ba81295847f0>>
+ * @codegenCommand yarn build:icon-glyphs
+ */
+
+/**
+ * __16px `blog` icon object__
+ *
+ * - [Examples](https://atlassian.design/components/icon-object/examples)
+ * - [Code](https://atlassian.design/components/icon-object/code)
+ * - [Usage](https://atlassian.design/components/icon-object/usage)
+ */
+var Blog16Icon = function Blog16Icon(_ref) {
+  var label = _ref.label,
+    testId = _ref.testId;
+  if ((0, _platformFeatureFlags.fg)('icon-object-migration')) {
+    return /*#__PURE__*/_react.default.createElement(_icon.IconTile, {
+      icon: _quotationMark.default,
+      appearance: "blueBold",
+      size: "16",
+      label: label,
+      testId: testId,
+      LEGACY_fallbackComponent: /*#__PURE__*/_react.default.createElement(_.default, {
+        label: label,
+        testId: testId
+      })
+    });
+  } else {
+    return /*#__PURE__*/_react.default.createElement(_.default, {
+      label: label,
+      testId: testId
+    });
+  }
+};
+Blog16Icon.displayName = 'Blog16Icon';
+var _default = exports.default = Blog16Icon;

package/dist/cjs/artifacts/glyph/blog/24.js

@@ -0,0 +1,49 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _icon = require("@atlaskit/icon");
+var _quotationMark = _interopRequireDefault(require("@atlaskit/icon/core/quotation-mark"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _ = _interopRequireDefault(require("../../glyph-legacy/blog/24"));
+/**
+ * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
+ * @codegen <<SignedSource::bba35c7457f1c82d9d31626969c259a0>>
+ * @codegenCommand yarn build:icon-glyphs
+ */
+
+/**
+ * __24px `blog` icon object__
+ *
+ * - [Examples](https://atlassian.design/components/icon-object/examples)
+ * - [Code](https://atlassian.design/components/icon-object/code)
+ * - [Usage](https://atlassian.design/components/icon-object/usage)
+ */
+var Blog24Icon = function Blog24Icon(_ref) {
+  var label = _ref.label,
+    testId = _ref.testId;
+  if ((0, _platformFeatureFlags.fg)('icon-object-migration')) {
+    return /*#__PURE__*/_react.default.createElement(_icon.IconTile, {
+      icon: _quotationMark.default,
+      appearance: "blueBold",
+      size: "24",
+      label: label,
+      testId: testId,
+      LEGACY_fallbackComponent: /*#__PURE__*/_react.default.createElement(_.default, {
+        label: label,
+        testId: testId
+      })
+    });
+  } else {
+    return /*#__PURE__*/_react.default.createElement(_.default, {
+      label: label,
+      testId: testId
+    });
+  }
+};
+Blog24Icon.displayName = 'Blog24Icon';
+var _default = exports.default = Blog24Icon;

package/dist/cjs/artifacts/glyph/branch/16.js

@@ -0,0 +1,49 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _icon = require("@atlaskit/icon");
+var _branch = _interopRequireDefault(require("@atlaskit/icon/core/branch"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _ = _interopRequireDefault(require("../../glyph-legacy/branch/16"));
+/**
+ * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
+ * @codegen <<SignedSource::bd5a8d264ca7a1e79e3d50d476094729>>
+ * @codegenCommand yarn build:icon-glyphs
+ */
+
+/**
+ * __16px `branch` icon object__
+ *
+ * - [Examples](https://atlassian.design/components/icon-object/examples)
+ * - [Code](https://atlassian.design/components/icon-object/code)
+ * - [Usage](https://atlassian.design/components/icon-object/usage)
+ */
+var Branch16Icon = function Branch16Icon(_ref) {
+  var label = _ref.label,
+    testId = _ref.testId;
+  if ((0, _platformFeatureFlags.fg)('icon-object-migration')) {
+    return /*#__PURE__*/_react.default.createElement(_icon.IconTile, {
+      icon: _branch.default,
+      appearance: "blueBold",
+      size: "16",
+      label: label,
+      testId: testId,
+      LEGACY_fallbackComponent: /*#__PURE__*/_react.default.createElement(_.default, {
+        label: label,
+        testId: testId
+      })
+    });
+  } else {
+    return /*#__PURE__*/_react.default.createElement(_.default, {
+      label: label,
+      testId: testId
+    });
+  }
+};
+Branch16Icon.displayName = 'Branch16Icon';
+var _default = exports.default = Branch16Icon;

package/dist/cjs/artifacts/glyph/branch/24.js

@@ -0,0 +1,49 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _icon = require("@atlaskit/icon");
+var _branch = _interopRequireDefault(require("@atlaskit/icon/core/branch"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _ = _interopRequireDefault(require("../../glyph-legacy/branch/24"));
+/**
+ * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
+ * @codegen <<SignedSource::ca37b82809aaa3e9f4d0507d70c71707>>
+ * @codegenCommand yarn build:icon-glyphs
+ */
+
+/**
+ * __24px `branch` icon object__
+ *
+ * - [Examples](https://atlassian.design/components/icon-object/examples)
+ * - [Code](https://atlassian.design/components/icon-object/code)
+ * - [Usage](https://atlassian.design/components/icon-object/usage)
+ */
+var Branch24Icon = function Branch24Icon(_ref) {
+  var label = _ref.label,
+    testId = _ref.testId;
+  if ((0, _platformFeatureFlags.fg)('icon-object-migration')) {
+    return /*#__PURE__*/_react.default.createElement(_icon.IconTile, {
+      icon: _branch.default,
+      appearance: "blueBold",
+      size: "24",
+      label: label,
+      testId: testId,
+      LEGACY_fallbackComponent: /*#__PURE__*/_react.default.createElement(_.default, {
+        label: label,
+        testId: testId
+      })
+    });
+  } else {
+    return /*#__PURE__*/_react.default.createElement(_.default, {
+      label: label,
+      testId: testId
+    });
+  }
+};
+Branch24Icon.displayName = 'Branch24Icon';
+var _default = exports.default = Branch24Icon;

package/dist/cjs/artifacts/glyph/bug/16.js

@@ -0,0 +1,49 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _icon = require("@atlaskit/icon");
+var _bug = _interopRequireDefault(require("@atlaskit/icon/core/bug"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _ = _interopRequireDefault(require("../../glyph-legacy/bug/16"));
+/**
+ * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
+ * @codegen <<SignedSource::54f047f6f7bd48e9a2ba7394ee23b095>>
+ * @codegenCommand yarn build:icon-glyphs
+ */
+
+/**
+ * __16px `bug` icon object__
+ *
+ * - [Examples](https://atlassian.design/components/icon-object/examples)
+ * - [Code](https://atlassian.design/components/icon-object/code)
+ * - [Usage](https://atlassian.design/components/icon-object/usage)
+ */
+var Bug16Icon = function Bug16Icon(_ref) {
+  var label = _ref.label,
+    testId = _ref.testId;
+  if ((0, _platformFeatureFlags.fg)('icon-object-migration')) {
+    return /*#__PURE__*/_react.default.createElement(_icon.IconTile, {
+      icon: _bug.default,
+      appearance: "redBold",
+      size: "16",
+      label: label,
+      testId: testId,
+      LEGACY_fallbackComponent: /*#__PURE__*/_react.default.createElement(_.default, {
+        label: label,
+        testId: testId
+      })
+    });
+  } else {
+    return /*#__PURE__*/_react.default.createElement(_.default, {
+      label: label,
+      testId: testId
+    });
+  }
+};
+Bug16Icon.displayName = 'Bug16Icon';
+var _default = exports.default = Bug16Icon;

package/dist/cjs/artifacts/glyph/bug/24.js

@@ -0,0 +1,49 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _icon = require("@atlaskit/icon");
+var _bug = _interopRequireDefault(require("@atlaskit/icon/core/bug"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _ = _interopRequireDefault(require("../../glyph-legacy/bug/24"));
+/**
+ * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
+ * @codegen <<SignedSource::6e6792688f4276aeff3ed0e6f212af14>>
+ * @codegenCommand yarn build:icon-glyphs
+ */
+
+/**
+ * __24px `bug` icon object__
+ *
+ * - [Examples](https://atlassian.design/components/icon-object/examples)
+ * - [Code](https://atlassian.design/components/icon-object/code)
+ * - [Usage](https://atlassian.design/components/icon-object/usage)
+ */
+var Bug24Icon = function Bug24Icon(_ref) {
+  var label = _ref.label,
+    testId = _ref.testId;
+  if ((0, _platformFeatureFlags.fg)('icon-object-migration')) {
+    return /*#__PURE__*/_react.default.createElement(_icon.IconTile, {
+      icon: _bug.default,
+      appearance: "redBold",
+      size: "24",
+      label: label,
+      testId: testId,
+      LEGACY_fallbackComponent: /*#__PURE__*/_react.default.createElement(_.default, {
+        label: label,
+        testId: testId
+      })
+    });
+  } else {
+    return /*#__PURE__*/_react.default.createElement(_.default, {
+      label: label,
+      testId: testId
+    });
+  }
+};
+Bug24Icon.displayName = 'Bug24Icon';
+var _default = exports.default = Bug24Icon;

package/dist/cjs/artifacts/glyph/calendar/16.js

@@ -0,0 +1,49 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _icon = require("@atlaskit/icon");
+var _calendar = _interopRequireDefault(require("@atlaskit/icon/core/calendar"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _ = _interopRequireDefault(require("../../glyph-legacy/calendar/16"));
+/**
+ * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
+ * @codegen <<SignedSource::a6da197bbcce0892f27de2b06510f3b6>>
+ * @codegenCommand yarn build:icon-glyphs
+ */
+
+/**
+ * __16px `calendar` icon object__
+ *
+ * - [Examples](https://atlassian.design/components/icon-object/examples)
+ * - [Code](https://atlassian.design/components/icon-object/code)
+ * - [Usage](https://atlassian.design/components/icon-object/usage)
+ */
+var Calendar16Icon = function Calendar16Icon(_ref) {
+  var label = _ref.label,
+    testId = _ref.testId;
+  if ((0, _platformFeatureFlags.fg)('icon-object-migration')) {
+    return /*#__PURE__*/_react.default.createElement(_icon.IconTile, {
+      icon: _calendar.default,
+      appearance: "redBold",
+      size: "16",
+      label: label,
+      testId: testId,
+      LEGACY_fallbackComponent: /*#__PURE__*/_react.default.createElement(_.default, {
+        label: label,
+        testId: testId
+      })
+    });
+  } else {
+    return /*#__PURE__*/_react.default.createElement(_.default, {
+      label: label,
+      testId: testId
+    });
+  }
+};
+Calendar16Icon.displayName = 'Calendar16Icon';
+var _default = exports.default = Calendar16Icon;

package/dist/cjs/artifacts/glyph/calendar/24.js

@@ -0,0 +1,49 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _icon = require("@atlaskit/icon");
+var _calendar = _interopRequireDefault(require("@atlaskit/icon/core/calendar"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _ = _interopRequireDefault(require("../../glyph-legacy/calendar/24"));
+/**
+ * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
+ * @codegen <<SignedSource::03611d977353356cfe6a822232b999af>>
+ * @codegenCommand yarn build:icon-glyphs
+ */
+
+/**
+ * __24px `calendar` icon object__
+ *
+ * - [Examples](https://atlassian.design/components/icon-object/examples)
+ * - [Code](https://atlassian.design/components/icon-object/code)
+ * - [Usage](https://atlassian.design/components/icon-object/usage)
+ */
+var Calendar24Icon = function Calendar24Icon(_ref) {
+  var label = _ref.label,
+    testId = _ref.testId;
+  if ((0, _platformFeatureFlags.fg)('icon-object-migration')) {
+    return /*#__PURE__*/_react.default.createElement(_icon.IconTile, {
+      icon: _calendar.default,
+      appearance: "redBold",
+      size: "24",
+      label: label,
+      testId: testId,
+      LEGACY_fallbackComponent: /*#__PURE__*/_react.default.createElement(_.default, {
+        label: label,
+        testId: testId
+      })
+    });
+  } else {
+    return /*#__PURE__*/_react.default.createElement(_.default, {
+      label: label,
+      testId: testId
+    });
+  }
+};
+Calendar24Icon.displayName = 'Calendar24Icon';
+var _default = exports.default = Calendar24Icon;