@atlaskit/logo 14.0.0 → 14.1.0

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @atlaskit/logo
 
+## 14.1.0
+
+### Minor Changes
+
+- [#110670](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/110670)
+  [`c733254a2dd6e`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/c733254a2dd6e) -
+  Explicitly set jsxRuntime to classic via pragma comments in order to avoid issues where jsxRuntime
+  is implicitly set to automatic.
+
 ## 14.0.0
 
 ### Major Changes
@@ -59,7 +68,7 @@
 
 - [#96639](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/96639)
   [`f6cdb5e53e81`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/f6cdb5e53e81) -
-  Add support for React 18.
+  Add support for React 18 in non-strict mode.
 
 ## 13.15.4
 

package/README.md

@@ -1,6 +1,7 @@
 # Logo
 
-A logo is a visual representation of a brand or product. It can be a word or an image, or a combination of both.
+A logo is a visual representation of a brand or product. It can be a word or an image, or a
+combination of both.
 
 ## Installation
 

package/codemods/13.6.0-rename-imports.tsx

@@ -1,90 +1,80 @@
 import {
-  type API,
-  type ASTPath,
-  type FileInfo,
-  type ImportDeclaration,
-  type ImportSpecifier,
-  type Options,
+	type API,
+	type ASTPath,
+	type FileInfo,
+	type ImportDeclaration,
+	type ImportSpecifier,
+	type Options,
 } from 'jscodeshift';
 
 import { addCommentBefore } from './utils';
 
 const replacementMapping: { [name: string]: string } = {
-  Props: 'LogoProps',
-  DefaultProps: 'defaultLogoParams',
-  JiraCoreIcon: 'JiraWorkManagementIcon',
-  JiraCoreLogo: 'JiraWorkManagementLogo',
-  JiraCoreWordmark: 'JiraWorkManagementWordmark',
-  JiraServiceDeskIcon: 'JiraServiceManagementIcon',
-  JiraServiceDeskLogo: 'JiraServiceManagementLogo',
-  JiraServiceDeskWordmark: 'JiraServiceManagementWordmark',
-  OpsGenieIcon: 'OpsgenieIcon',
-  OpsGenieIconLogo: 'OpsgenieIconLogo',
-  OpsGenieIconWordmark: 'OpsgenieIconWordmark',
-  StrideIcon: 'NO_ALTERNATIVE_COMPONENT',
-  StrideLogo: 'NO_ALTERNATIVE_COMPONENT',
-  StrideWordmark: 'NO_ALTERNATIVE_COMPONENT',
-  HipchatIcon: 'NO_ALTERNATIVE_COMPONENT',
-  HipchatLogo: 'NO_ALTERNATIVE_COMPONENT',
-  HipchatWordmark: 'NO_ALTERNATIVE_COMPONENT',
+	Props: 'LogoProps',
+	DefaultProps: 'defaultLogoParams',
+	JiraCoreIcon: 'JiraWorkManagementIcon',
+	JiraCoreLogo: 'JiraWorkManagementLogo',
+	JiraCoreWordmark: 'JiraWorkManagementWordmark',
+	JiraServiceDeskIcon: 'JiraServiceManagementIcon',
+	JiraServiceDeskLogo: 'JiraServiceManagementLogo',
+	JiraServiceDeskWordmark: 'JiraServiceManagementWordmark',
+	OpsGenieIcon: 'OpsgenieIcon',
+	OpsGenieIconLogo: 'OpsgenieIconLogo',
+	OpsGenieIconWordmark: 'OpsgenieIconWordmark',
+	StrideIcon: 'NO_ALTERNATIVE_COMPONENT',
+	StrideLogo: 'NO_ALTERNATIVE_COMPONENT',
+	StrideWordmark: 'NO_ALTERNATIVE_COMPONENT',
+	HipchatIcon: 'NO_ALTERNATIVE_COMPONENT',
+	HipchatLogo: 'NO_ALTERNATIVE_COMPONENT',
+	HipchatWordmark: 'NO_ALTERNATIVE_COMPONENT',
 };
 
-export default function transform(
-  file: FileInfo,
-  { jscodeshift: j }: API,
-  options: Options,
-) {
-  const source = j(file.source);
-  const target = source
-    .find(j.ImportDeclaration)
-    .filter((path: ASTPath<ImportDeclaration>) => {
-      const value = path.node.source.value as string;
-      return value.includes('@atlaskit/logo');
-    });
-  const logoImports = target.find(j.ImportSpecifier);
+export default function transform(file: FileInfo, { jscodeshift: j }: API, options: Options) {
+	const source = j(file.source);
+	const target = source.find(j.ImportDeclaration).filter((path: ASTPath<ImportDeclaration>) => {
+		const value = path.node.source.value as string;
+		return value.includes('@atlaskit/logo');
+	});
+	const logoImports = target.find(j.ImportSpecifier);
 
-  if (!logoImports.length) {
-    // Returns original source file, untouched and unformatted
-    return file.source;
-  }
+	if (!logoImports.length) {
+		// Returns original source file, untouched and unformatted
+		return file.source;
+	}
 
-  logoImports.forEach((path: ASTPath<ImportSpecifier>) => {
-    const foundKey = Object.keys(replacementMapping).find(
-      (key) => key === path.node.imported.name,
-    );
+	logoImports.forEach((path: ASTPath<ImportSpecifier>) => {
+		const foundKey = Object.keys(replacementMapping).find((key) => key === path.node.imported.name);
 
-    if (!foundKey || !replacementMapping[foundKey] || !path.node.local) {
-      return;
-    }
-    // add comment for logo component that don't have alternatives
-    if (replacementMapping[foundKey] === 'NO_ALTERNATIVE_COMPONENT') {
-      addCommentBefore(
-        j,
-        target,
-        `This file uses the @atlaskit/logo \`${foundKey}\` 
+		if (!foundKey || !replacementMapping[foundKey] || !path.node.local) {
+			return;
+		}
+		// add comment for logo component that don't have alternatives
+		if (replacementMapping[foundKey] === 'NO_ALTERNATIVE_COMPONENT') {
+			addCommentBefore(
+				j,
+				target,
+				`This file uses the @atlaskit/logo \`${foundKey}\` 
         which will be removed with no alternative in the next major version.`,
-      );
-      return;
-    }
+			);
+			return;
+		}
 
-    // replace the import with mapping name
-    const newLogoImport: ImportSpecifier = j.importSpecifier(
-      j.identifier(replacementMapping[foundKey]),
-      // if aliased import exist, keep the alias name unchanged, i.e.
-      // before: import { JiraCoreLogo as JCLogo } from '@atlaskit/logo';
-      // after: import { JiraWorkManagementLogo as JCLogo } from '@atlaskit/logo';
-      // otherwise alias the import using the original name, i.e.
-      // before: import { JiraCoreLogo } from '@atlaskit/logo';
-      // after: import { JiraWorkManagementLogo as JiraCoreLogo } from '@atlaskit/logo';
-      j.identifier(
-        path.node.local.name !== path.node.imported.name
-          ? path.node.local.name
-          : foundKey,
-      ),
-    );
+		// replace the import with mapping name
+		const newLogoImport: ImportSpecifier = j.importSpecifier(
+			j.identifier(replacementMapping[foundKey]),
+			// if aliased import exist, keep the alias name unchanged, i.e.
+			// before: import { JiraCoreLogo as JCLogo } from '@atlaskit/logo';
+			// after: import { JiraWorkManagementLogo as JCLogo } from '@atlaskit/logo';
+			// otherwise alias the import using the original name, i.e.
+			// before: import { JiraCoreLogo } from '@atlaskit/logo';
+			// after: import { JiraWorkManagementLogo as JiraCoreLogo } from '@atlaskit/logo';
+			j.identifier(
+				path.node.local.name !== path.node.imported.name ? path.node.local.name : foundKey,
+			),
+		);
 
-    j(path).replaceWith(newLogoImport);
-  });
+		j(path).replaceWith(newLogoImport);
+	});
 
-  return source.toSource(options.printOptions);
+	return source.toSource(options.printOptions);
 }

package/codemods/__tests__/13.6.0-rename-imports.test.tsx

@@ -5,29 +5,29 @@ import transformer from '../13.6.0-rename-imports';
 const defineInlineTest = require('jscodeshift/dist/testUtils').defineInlineTest;
 
 describe('Rename Logo import code-mods', () => {
-  ['tsx', 'babylon'].forEach((parser) => {
-    describe(`parser: ${parser}`, () => {
-      defineInlineTest(
-        { default: transformer, parser },
-        {},
-        `
+	['tsx', 'babylon'].forEach((parser) => {
+		describe(`parser: ${parser}`, () => {
+			defineInlineTest(
+				{ default: transformer, parser },
+				{},
+				`
         import React from 'react';
         import { JiraCoreLogo } from '@atlaskit/logo';
 
         const Logo = () => (<JiraCoreLogo />);
         `,
-        `
+				`
         import React from 'react';
         import { JiraWorkManagementLogo as JiraCoreLogo } from '@atlaskit/logo';
 
         const Logo = () => (<JiraCoreLogo />);
         `,
-        'should alias the import using alternative components',
-      );
-      defineInlineTest(
-        { default: transformer, parser },
-        {},
-        `
+				'should alias the import using alternative components',
+			);
+			defineInlineTest(
+				{ default: transformer, parser },
+				{},
+				`
         import React from 'react';
         import {
           AtlassianIcon,
@@ -43,7 +43,7 @@ describe('Rename Logo import code-mods', () => {
         }
         const Logo = () => getProductIcon();
         `,
-        `
+				`
         import React from 'react';
         import {
           AtlassianIcon,
@@ -59,29 +59,29 @@ describe('Rename Logo import code-mods', () => {
         }
         const Logo = () => getProductIcon();
         `,
-        'should alias the import using alternative components, and keep other logo components unchanged',
-      );
-      defineInlineTest(
-        { default: transformer, parser },
-        {},
-        `
+				'should alias the import using alternative components, and keep other logo components unchanged',
+			);
+			defineInlineTest(
+				{ default: transformer, parser },
+				{},
+				`
         import React from 'react';
         import { JiraCoreLogo } from '@atlaskit/logo';
 
         const Logo = ({textColor}) => (<JiraCoreLogo textColor={textColor} />);
         `,
-        `
+				`
         import React from 'react';
         import { JiraWorkManagementLogo as JiraCoreLogo } from '@atlaskit/logo';
 
         const Logo = ({textColor}) => (<JiraCoreLogo textColor={textColor} />);
         `,
-        'should replace imports with alternative component with props unchanged',
-      );
-      defineInlineTest(
-        { default: transformer, parser },
-        {},
-        `
+				'should replace imports with alternative component with props unchanged',
+			);
+			defineInlineTest(
+				{ default: transformer, parser },
+				{},
+				`
         import React from 'react';
         import {
           JiraCoreWordmark,
@@ -90,7 +90,7 @@ describe('Rename Logo import code-mods', () => {
 
         const Logo = () => (<><JiraCoreIcon /><JiraCoreWordmark /></>);
         `,
-        `
+				`
         import React from 'react';
         import {
           JiraWorkManagementWordmark as JiraCoreWordmark,
@@ -99,35 +99,35 @@ describe('Rename Logo import code-mods', () => {
 
         const Logo = () => (<><JiraCoreIcon /><JiraCoreWordmark /></>);
         `,
-        'should alias multiple imports using alternative components',
-      );
-      defineInlineTest(
-        { default: transformer, parser },
-        {},
-        `
+				'should alias multiple imports using alternative components',
+			);
+			defineInlineTest(
+				{ default: transformer, parser },
+				{},
+				`
         import React from 'react';
         import { JiraCoreLogo as JCLogo } from '@atlaskit/logo';
 
         const Logo = () => (<JCLogo />);
         `,
-        `
+				`
         import React from 'react';
         import { JiraWorkManagementLogo as JCLogo } from '@atlaskit/logo';
 
         const Logo = () => (<JCLogo />);
         `,
-        'should replace aliased import and JSX element with alternative components',
-      );
-      defineInlineTest(
-        { default: transformer, parser },
-        {},
-        `
+				'should replace aliased import and JSX element with alternative components',
+			);
+			defineInlineTest(
+				{ default: transformer, parser },
+				{},
+				`
         import React from 'react';
         import { StrideIcon } from '@atlaskit/logo';
 
         const Logo = () => (<StrideIcon />);
         `,
-        `
+				`
         import React from 'react';
         /* TODO: (from codemod) This file uses the @atlaskit/logo \`StrideIcon\` 
         which will be removed with no alternative in the next major version. */
@@ -135,99 +135,99 @@ describe('Rename Logo import code-mods', () => {
 
         const Logo = () => (<StrideIcon />);
         `,
-        'should prompt user when using logo components with no alternatives',
-      );
-      defineInlineTest(
-        { default: transformer, parser },
-        {},
-        `
+				'should prompt user when using logo components with no alternatives',
+			);
+			defineInlineTest(
+				{ default: transformer, parser },
+				{},
+				`
         import React from 'react';
         import { JiraCoreIcon, HipchatIcon } from '@atlaskit/logo';
         const Logo = () => (<><JiraCoreIcon /><HipchatIcon /></>);
         `,
-        `
+				`
         import React from 'react';
         /* TODO: (from codemod) This file uses the @atlaskit/logo \`HipchatIcon\` 
         which will be removed with no alternative in the next major version. */
         import { JiraWorkManagementIcon as JiraCoreIcon, HipchatIcon } from '@atlaskit/logo';
         const Logo = () => (<><JiraCoreIcon /><HipchatIcon /></>);
         `,
-        'should alias imports using alternative component and propt user when using logo compontns with no alternatives',
-      );
-      defineInlineTest(
-        { default: transformer, parser },
-        {},
-        `
+				'should alias imports using alternative component and propt user when using logo compontns with no alternatives',
+			);
+			defineInlineTest(
+				{ default: transformer, parser },
+				{},
+				`
         import React from 'react';
 
         const MyComponent = () => (<div />);
         `,
-        `
+				`
         import React from 'react';
 
         const MyComponent = () => (<div />);
         `,
-        'should not modify files that are not using @atlaskit/logo',
-      );
-    });
-    describe(`parser: ${parser}`, () => {
-      defineInlineTest(
-        { default: transformer, parser },
-        {},
-        `
+				'should not modify files that are not using @atlaskit/logo',
+			);
+		});
+		describe(`parser: ${parser}`, () => {
+			defineInlineTest(
+				{ default: transformer, parser },
+				{},
+				`
         import React from 'react';
         import { Props } from '@atlaskit/logo/constants';
 
         const ExampleLogoProps = Props;
         `,
-        `
+				`
         import React from 'react';
         import { LogoProps as Props } from '@atlaskit/logo/constants';
 
         const ExampleLogoProps = Props;
         `,
-        'should alias the Props import using LogoProps',
-      );
-    });
-    describe(`parser: ${parser}`, () => {
-      defineInlineTest(
-        { default: transformer, parser },
-        {},
-        `
+				'should alias the Props import using LogoProps',
+			);
+		});
+		describe(`parser: ${parser}`, () => {
+			defineInlineTest(
+				{ default: transformer, parser },
+				{},
+				`
         import React from 'react';
         import { DefaultProps } from '@atlaskit/logo/constants';
 
         const ExampleLogoProps = DefaultProps;
         `,
-        `
+				`
         import React from 'react';
         import { defaultLogoParams as DefaultProps } from '@atlaskit/logo/constants';
 
         const ExampleLogoProps = DefaultProps;
         `,
-        'should alias the DefaultProps import using defaultLogoParams',
-      );
-    });
-    describe(`parser: ${parser}`, () => {
-      defineInlineTest(
-        { default: transformer, parser },
-        {},
-        `
+				'should alias the DefaultProps import using defaultLogoParams',
+			);
+		});
+		describe(`parser: ${parser}`, () => {
+			defineInlineTest(
+				{ default: transformer, parser },
+				{},
+				`
         import React from 'react';
         import { JiraCoreIcon } from '@atlaskit/logo';
         import { DefaultProps } from '@atlaskit/logo/constants';
 
         const Logo = (DefaultProps) => (<JiraCoreIcon />);
         `,
-        `
+				`
         import React from 'react';
         import { JiraWorkManagementIcon as JiraCoreIcon } from '@atlaskit/logo';
         import { defaultLogoParams as DefaultProps } from '@atlaskit/logo/constants';
 
         const Logo = (DefaultProps) => (<JiraCoreIcon />);
         `,
-        'should alias imports from both @atlaskit/logo and the /constants entrypoint at the same time',
-      );
-    });
-  });
+				'should alias imports from both @atlaskit/logo and the /constants entrypoint at the same time',
+			);
+		});
+	});
 });

package/codemods/utils.tsx

@@ -6,30 +6,21 @@ const spacesAndTabs: RegExp = /[ \t]{2,}/g;
 const lineStartWithSpaces: RegExp = /^[ \t]*/gm;
 
 function clean(value: string): string {
-  return value
-    .replace(spacesAndTabs, ' ')
-    .replace(lineStartWithSpaces, '')
-    .trim();
+	return value.replace(spacesAndTabs, ' ').replace(lineStartWithSpaces, '').trim();
 }
 
-export function addCommentBefore(
-  j: core.JSCodeshift,
-  target: Collection<any>,
-  message: string,
-) {
-  const content: string = ` TODO: (from codemod) ${clean(message)} `;
-  target.forEach((path: ASTPath<any>) => {
-    path.value.comments = path.value.comments || [];
+export function addCommentBefore(j: core.JSCodeshift, target: Collection<any>, message: string) {
+	const content: string = ` TODO: (from codemod) ${clean(message)} `;
+	target.forEach((path: ASTPath<any>) => {
+		path.value.comments = path.value.comments || [];
 
-    const exists = path.value.comments.find(
-      (comment: any) => comment.value === content,
-    );
+		const exists = path.value.comments.find((comment: any) => comment.value === content);
 
-    // avoiding duplicates of the same comment
-    if (exists) {
-      return;
-    }
+		// avoiding duplicates of the same comment
+		if (exists) {
+			return;
+		}
 
-    path.value.comments.push(j.commentBlock(content));
-  });
+		path.value.comments.push(j.commentBlock(content));
+	});
 }

package/dist/cjs/wrapper.js

@@ -12,7 +12,11 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _react = require("@emotion/react");
 var _constants = require("./constants");
 var _excluded = ["label", "svg", "size", "appearance", "iconColor", "textColor", "testId"];
+/**
+ * @jsxRuntime classic
+ */
 /** @jsx jsx */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 var CSS_VAR_COLOR = '--logo-color';
 var CSS_VAR_FILL = '--logo-fill';
 var baseWrapperStyles = (0, _react.css)({
@@ -23,14 +27,14 @@ var baseWrapperStyles = (0, _react.css)({
   lineHeight: 1,
   userSelect: 'none',
   whiteSpace: 'normal',
-  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
+  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles, @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   '> svg': {
     height: '100%',
     fill: 'inherit'
   }
 });
 var stopColorStyles = (0, _react.css)({
-  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
+  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles, @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   stop: {
     stopColor: 'currentColor'
   }
@@ -40,6 +44,7 @@ var sizeStyles = Object.entries(_constants.sizes).reduce(function (acc, _ref) {
     key = _ref2[0],
     val = _ref2[1];
   acc[key] = (0, _react.css)({
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
     height: "".concat(val, "px")
   });
   return acc;

package/dist/es2019/wrapper.js

@@ -1,6 +1,10 @@
 import _extends from "@babel/runtime/helpers/extends";
+/**
+ * @jsxRuntime classic
+ */
 /** @jsx jsx */
 
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import { sizes } from './constants';
 const CSS_VAR_COLOR = '--logo-color';
@@ -13,20 +17,21 @@ const baseWrapperStyles = css({
   lineHeight: 1,
   userSelect: 'none',
   whiteSpace: 'normal',
-  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
+  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles, @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   '> svg': {
     height: '100%',
     fill: 'inherit'
   }
 });
 const stopColorStyles = css({
-  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
+  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles, @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   stop: {
     stopColor: 'currentColor'
   }
 });
 const sizeStyles = Object.entries(sizes).reduce((acc, [key, val]) => {
   acc[key] = css({
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
     height: `${val}px`
   });
   return acc;

package/dist/esm/wrapper.js

@@ -3,8 +3,12 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 var _excluded = ["label", "svg", "size", "appearance", "iconColor", "textColor", "testId"];
+/**
+ * @jsxRuntime classic
+ */
 /** @jsx jsx */
 
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import { sizes } from './constants';
 var CSS_VAR_COLOR = '--logo-color';
@@ -17,14 +21,14 @@ var baseWrapperStyles = css({
   lineHeight: 1,
   userSelect: 'none',
   whiteSpace: 'normal',
-  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
+  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles, @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   '> svg': {
     height: '100%',
     fill: 'inherit'
   }
 });
 var stopColorStyles = css({
-  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
+  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles, @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   stop: {
     stopColor: 'currentColor'
   }
@@ -34,6 +38,7 @@ var sizeStyles = Object.entries(sizes).reduce(function (acc, _ref) {
     key = _ref2[0],
     val = _ref2[1];
   acc[key] = css({
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
     height: "".concat(val, "px")
   });
   return acc;