@atlaskit/image 3.0.10 → 4.0.0

package/CHANGELOG.md

@@ -1,5 +1,38 @@
 # @atlaskit/image
 
+## 4.0.0
+
+### Major Changes
+
+- [`f2dc9097319f0`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/f2dc9097319f0) - ###
+  Dropped support for _legacy_ Typescript 4 types. **Typescript 5 is now the new minimum**.
+
+  Removes the `typesVersions` property and `dist/types-ts4.5` directory from the dist.
+
+  Types are now exclusively via the `"types": "dist/types/index.d.ts"` property.
+
+  ```diff
+  - "typesVersions": {
+  -    ">=4.5 <4.9": {
+  -        "*": [
+  -            "dist/types-ts4.5/*",
+  -            "dist/types-ts4.5/index.d.ts"
+  -        ]
+  -    }
+  - },
+  ```
+
+### Patch Changes
+
+- Updated dependencies
+
+## 3.1.0
+
+### Minor Changes
+
+- [`afbd895691509`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/afbd895691509) -
+  Promote `@atlaskit/image` to general availability.
+
 ## 3.0.10
 
 ### Patch Changes

package/README.md

@@ -2,6 +2,10 @@
 
 An image component with additional features, such as support for themes.
 
+## Release stage: General availability
+
+This package is supported for production use.
+
 ## Installation
 
 ```sh

package/image.docs.tsx

@@ -1,47 +1,49 @@
 import path from 'path';
 
-import type { ComponentStructuredContentSource } from '@atlassian/structured-docs-types';
+import type { StructuredContentSource } from '@atlassian/structured-docs-types/types';
 
-const documentation: ComponentStructuredContentSource[] = [
-	{
-		name: 'Image',
-		description: 'A component for displaying images with theme support.',
-		status: 'open-beta',
-		import: {
+const documentation: StructuredContentSource = {
+	components: [
+		{
 			name: 'Image',
-			package: '@atlaskit/image',
-			type: 'default',
-			packagePath: path.resolve(__dirname),
-			packageJson: require('./package.json'),
-		},
-		usageGuidelines: [
-			'Use for displaying images in content',
-			'Provide appropriate alt text',
-			'Consider responsive image sizing',
-			'Handle loading and error states',
-		],
-		contentGuidelines: [
-			'Use clear, descriptive alt text',
-			'Choose appropriate image dimensions',
-			'Consider image quality and file size',
-			'Use meaningful image content',
-		],
-		accessibilityGuidelines: [
-			'Always provide meaningful alt text',
-			'Ensure appropriate image sizing',
-			'Consider loading states and error handling',
-			'Use appropriate image formats',
-		],
-		examples: [
-			{
+			description: 'A component for displaying images with theme support.',
+			status: 'general-availability',
+			import: {
 				name: 'Image',
-				description: 'Image example',
-				source: path.resolve(__dirname, './examples/ai/image.tsx'),
+				package: '@atlaskit/image',
+				type: 'default',
+				packagePath: path.resolve(__dirname),
+				packageJson: require('./package.json'),
 			},
-		],
-		keywords: ['image', 'picture', 'photo', 'visual', 'media'],
-		categories: ['data-display'],
-	},
-];
+			usageGuidelines: [
+				'Use for displaying images in content',
+				'Provide appropriate alt text',
+				'Consider responsive image sizing',
+				'Handle loading and error states',
+			],
+			contentGuidelines: [
+				'Use clear, descriptive alt text',
+				'Choose appropriate image dimensions',
+				'Consider image quality and file size',
+				'Use meaningful image content',
+			],
+			accessibilityGuidelines: [
+				'Always provide meaningful alt text',
+				'Ensure appropriate image sizing',
+				'Consider loading states and error handling',
+				'Use appropriate image formats',
+			],
+			examples: [
+				{
+					name: 'Image',
+					description: 'Image example',
+					source: path.resolve(__dirname, './examples/ai/image.tsx'),
+				},
+			],
+			keywords: ['image', 'picture', 'photo', 'visual', 'media'],
+			categories: ['data-display'],
+		},
+	],
+};
 
 export default documentation;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/image",
-	"version": "3.0.10",
+	"version": "4.0.0",
 	"description": "An image that changes in light or dark themes.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -27,15 +27,12 @@
 		"team": "Design System Team",
 		"website": {
 			"name": "Image",
-			"category": "Images and icons",
-			"status": {
-				"type": "beta"
-			}
+			"category": "Images and icons"
 		}
 	},
 	"dependencies": {
-		"@atlaskit/app-provider": "^4.2.0",
-		"@atlaskit/tokens": "^13.0.0",
+		"@atlaskit/app-provider": "^5.0.0",
+		"@atlaskit/tokens": "^14.0.0",
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^0.20.0"
 	},
@@ -46,14 +43,15 @@
 		"@af/accessibility-testing": "workspace:^",
 		"@af/integration-testing": "workspace:^",
 		"@af/visual-regression": "workspace:^",
-		"@atlaskit/docs": "^11.7.0",
-		"@atlaskit/link": "^3.4.0",
-		"@atlaskit/primitives": "^19.0.0",
-		"@atlaskit/section-message": "^8.12.0",
+		"@atlaskit/docs": "^12.0.0",
+		"@atlaskit/link": "^4.0.0",
+		"@atlaskit/primitives": "^20.0.0",
+		"@atlaskit/section-message": "^9.0.0",
 		"@atlassian/react-compiler-gating": "workspace:^",
 		"@atlassian/ssr-tests": "workspace:^",
 		"@atlassian/structured-docs-types": "workspace:^",
 		"@testing-library/react": "^16.3.0",
+		"react": "^18.2.0",
 		"react-dom": "^18.2.0"
 	},
 	"techstack": {
@@ -93,13 +91,5 @@
 			]
 		}
 	},
-	"homepage": "https://atlassian.design/components/image/",
-	"typesVersions": {
-		">=4.5 <4.9": {
-			"*": [
-				"dist/types-ts4.5/*",
-				"dist/types-ts4.5/index.d.ts"
-			]
-		}
-	}
+	"homepage": "https://atlassian.design/components/image/"
 }

package/dist/types-ts4.5/index.d.ts

@@ -1 +0,0 @@
-export { default } from './ui/image';

package/dist/types-ts4.5/ui/image/index.d.ts

@@ -1,24 +0,0 @@
-interface ImageProps extends React.ImgHTMLAttributes<HTMLImageElement> {
-    /**
-     * Image URL to use for dark mode. This overrides `src` when the user
-     * has selected dark mode either in the app or on their operating system.
-     */
-    srcDark?: string;
-    /**
-     * A `testId` prop is provided for specified elements, which is a unique
-     * string that appears as a data attribute `data-testid` in the rendered code,
-     * serving as a hook for automated tests.
-     */
-    testId?: string;
-}
-/**
- * __Image__
- *
- * This component can be used interchangeably with the native `img` element. It includes additional functionality, such as theme support.
- *
- * - [Examples](https://atlassian.design/components/image/examples)
- * - [Code](https://atlassian.design/components/image/code)
- * - [Usage](https://atlassian.design/components/image/usage)
- */
-export default function Image({ src, srcDark, alt, testId, className, ...props }: ImageProps): JSX.Element;
-export {};

package/offerings.json

@@ -1,34 +0,0 @@
-[
-	{
-		"name": "Image",
-		"package": "@atlaskit/image",
-		"import": {
-			"name": "Image",
-			"package": "@atlaskit/image",
-			"type": "default"
-		},
-		"keywords": ["image", "picture", "photo", "visual", "media"],
-		"categories": ["data-display"],
-		"shortDescription": "A component for displaying images with theme support.",
-		"status": "open-beta",
-		"accessibilityGuidelines": [
-			"Always provide meaningful alt text",
-			"Ensure appropriate image sizing",
-			"Consider loading states and error handling",
-			"Use appropriate image formats"
-		],
-		"usageGuidelines": [
-			"Use for displaying images in content",
-			"Provide appropriate alt text",
-			"Consider responsive image sizing",
-			"Handle loading and error states"
-		],
-		"contentGuidelines": [
-			"Use clear, descriptive alt text",
-			"Choose appropriate image dimensions",
-			"Consider image quality and file size",
-			"Use meaningful image content"
-		],
-		"examples": ["./examples/ai/image.tsx"]
-	}
-]