@atlaskit/skeleton 2.1.9 → 2.2.0

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlaskit/skeleton
 
+## 2.2.0
+
+### Minor Changes
+
+- [`455d238d83ce3`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/455d238d83ce3) -
+  Promote `@atlaskit/skeleton` to general availability and add usage and props documentation.
+
+## 2.1.10
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 2.1.9
 
 ### Patch Changes

package/README.md

@@ -2,9 +2,13 @@
 
 A skeleton acts as a placeholder for content, usually while the content loads.
 
+## Release stage: General availability
+
+This package is supported for production use.
+
 ## Usage
 
 `import Skeleton from '@atlaskit/skeleton';`
 
 Detailed docs and example usage can be found
-[here](https://atlaskit.atlassian.com/packages/design-system/skeleton).
+[here](https://atlassian.design/components/skeleton).

package/dist/types/ui/index.d.ts

@@ -1,5 +1,11 @@
 type SkeletonProps = {
+    /**
+     * Width of the skeleton.
+     */
     width: string | number;
+    /**
+     * Height of the skeleton.
+     */
     height: string | number;
     /**
      * Controls the border radius, or rounding of the skeleton's corners.
@@ -24,6 +30,9 @@ type SkeletonProps = {
      * ```
      */
     groupName?: string;
+    /**
+     * A test id for automated testing.
+     */
     testId?: string;
 };
 /**

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

@@ -1,5 +1,11 @@
 type SkeletonProps = {
+    /**
+     * Width of the skeleton.
+     */
     width: string | number;
+    /**
+     * Height of the skeleton.
+     */
     height: string | number;
     /**
      * Controls the border radius, or rounding of the skeleton's corners.
@@ -24,6 +30,9 @@ type SkeletonProps = {
      * ```
      */
     groupName?: string;
+    /**
+     * A test id for automated testing.
+     */
     testId?: string;
 };
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/skeleton",
-	"version": "2.1.9",
+	"version": "2.2.0",
 	"description": "A skeleton acts as a placeholder for content, usually while the content loads.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -27,14 +27,11 @@
 		"team": "Design System Team",
 		"website": {
 			"name": "Skeleton",
-			"category": "Loading",
-			"status": {
-				"type": "alpha"
-			}
+			"category": "Loading"
 		}
 	},
 	"dependencies": {
-		"@atlaskit/tokens": "^12.0.0",
+		"@atlaskit/tokens": "^13.3.0",
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^0.20.0"
 	},
@@ -45,13 +42,14 @@
 		"@af/accessibility-testing": "workspace:^",
 		"@af/integration-testing": "workspace:^",
 		"@af/visual-regression": "workspace:^",
-		"@atlaskit/docs": "^11.7.0",
+		"@atlaskit/docs": "^11.8.0",
 		"@atlaskit/link": "^3.4.0",
-		"@atlaskit/primitives": "^18.1.0",
-		"@atlaskit/section-message": "^8.12.0",
+		"@atlaskit/primitives": "^19.0.0",
+		"@atlaskit/section-message": "^8.13.0",
 		"@atlassian/react-compiler-gating": "workspace:^",
 		"@atlassian/structured-docs-types": "workspace:^",
 		"@testing-library/react": "^16.3.0",
+		"react": "^18.2.0",
 		"react-dom": "^18.2.0"
 	},
 	"techstack": {

package/skeleton.docs.tsx

@@ -1,48 +1,50 @@
 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: 'Skeleton',
-		description: 'A skeleton acts as a placeholder for content, usually while the content loads.',
-		status: 'early-access',
-		import: {
+const documentation: StructuredContentSource = {
+	components: [
+		{
 			name: 'Skeleton',
-			package: '@atlaskit/skeleton',
-			type: 'default',
-			packagePath: path.resolve(__dirname),
-			packageJson: require('./package.json'),
-		},
-		usageGuidelines: [
-			'Use to indicate content is loading',
-			'Match skeleton structure to actual content layout',
-			'Use appropriate animation and timing',
-			'Replace with actual content when ready',
-			'Consider different skeleton patterns for different content types',
-		],
-		contentGuidelines: [
-			'Use skeleton patterns that represent actual content structure',
-			'Maintain consistent skeleton styling',
-			'Consider content hierarchy in skeleton design',
-			'Use appropriate animation timing',
-		],
-		accessibilityGuidelines: [
-			'Provide appropriate loading announcements',
-			'Use skeleton patterns that match actual content structure',
-			'Ensure skeleton content is not announced as actual content',
-			'Consider screen reader experience during loading states',
-		],
-		examples: [
-			{
+			description: 'A skeleton acts as a placeholder for content, usually while the content loads.',
+			status: 'general-availability',
+			import: {
 				name: 'Skeleton',
-				description: 'Skeleton example',
-				source: path.resolve(__dirname, './examples/ai/skeleton.tsx'),
+				package: '@atlaskit/skeleton',
+				type: 'default',
+				packagePath: path.resolve(__dirname),
+				packageJson: require('./package.json'),
 			},
-		],
-		keywords: ['skeleton', 'placeholder', 'loading', 'content', 'shimmer', 'animation'],
-		categories: ['loading'],
-	},
-];
+			usageGuidelines: [
+				'Use to indicate content is loading',
+				'Match skeleton structure to actual content layout',
+				'Use appropriate animation and timing',
+				'Replace with actual content when ready',
+				'Consider different skeleton patterns for different content types',
+			],
+			contentGuidelines: [
+				'Use skeleton patterns that represent actual content structure',
+				'Maintain consistent skeleton styling',
+				'Consider content hierarchy in skeleton design',
+				'Use appropriate animation timing',
+			],
+			accessibilityGuidelines: [
+				'Provide appropriate loading announcements',
+				'Use skeleton patterns that match actual content structure',
+				'Ensure skeleton content is not announced as actual content',
+				'Consider screen reader experience during loading states',
+			],
+			examples: [
+				{
+					name: 'Skeleton',
+					description: 'Skeleton example',
+					source: path.resolve(__dirname, './examples/ai/skeleton.tsx'),
+				},
+			],
+			keywords: ['skeleton', 'placeholder', 'loading', 'content', 'shimmer', 'animation'],
+			categories: ['loading'],
+		},
+	],
+};
 
 export default documentation;

package/offerings.json

@@ -1,36 +0,0 @@
-[
-	{
-		"name": "Skeleton",
-		"package": "@atlaskit/skeleton",
-		"import": {
-			"name": "Skeleton",
-			"package": "@atlaskit/skeleton",
-			"type": "default"
-		},
-		"keywords": ["skeleton", "placeholder", "loading", "content", "shimmer", "animation"],
-		"categories": ["loading"],
-		"shortDescription": "A skeleton acts as a placeholder for content, usually while the content loads.",
-		"status": "early-access",
-		"accessibilityGuidelines": [
-			"Provide appropriate loading announcements",
-			"Use skeleton patterns that match actual content structure",
-			"Ensure skeleton content is not announced as actual content",
-			"Consider screen reader experience during loading states"
-		],
-		"usageGuidelines": [
-			"Use to indicate content is loading",
-			"Match skeleton structure to actual content layout",
-			"Use appropriate animation and timing",
-			"Replace with actual content when ready",
-			"Consider different skeleton patterns for different content types"
-		],
-		"contentGuidelines": [
-			"Use skeleton patterns that represent actual content structure",
-			"Maintain consistent skeleton styling",
-			"Consider content hierarchy in skeleton design",
-			"Use appropriate animation timing"
-		],
-		"generativeInstructions": "./docs/ai/skeleton-instructions.md",
-		"examples": ["./examples/ai/skeleton.tsx"]
-	}
-]