@atlaskit/tile 0.2.2 → 1.0.1

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlaskit/tile
 
+## 1.0.1
+
+### Patch Changes
+
+- Updated dependencies
+
+## 1.0.0
+
+### Major Changes
+
+- [`951d5982db119`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/951d5982db119) -
+  Released for general availability
+
 ## 0.2.2
 
 ### Patch Changes

package/constellation/index/examples.mdx

@@ -10,6 +10,7 @@ import TileBorder from '../../examples/constellation/tile-border';
 import TileInset from '../../examples/constellation/tile-inset';
 import TileLabelling from '../../examples/constellation/tile-labelling';
 import TileThemed from '../../examples/constellation/tile-themed';
+import TileSkeletonExample from '../../examples/constellation/tile-skeleton';
 
 ## Default
 
@@ -80,3 +81,16 @@ tile's <inlineCode>color</inlineCode>, which is already themed using the design
 <inlineCode>color.text</inlineCode>.
 
 <Example Component={TileThemed} packageName="@atlaskit/tile" appearance="source-only" />
+
+## Loading skeleton
+
+A loading skeleton is provided called <inlineCode>TileSkeleton</inlineCode>. This can be used in
+conjunction with the [Skeleton component](/components/skeleton), which
+
+<inlineCode>TileSkeleton</inlineCode> utilizes internally – with added consistent sizing for tiles
+to prevent layout shift.
+
+This is useful for when you need to display a loading state for a tile, such as when fetching data
+or waiting for an API response.
+
+<Example Component={TileSkeletonExample} packageName="@atlaskit/tile/skeleton" />

package/constellation/index/props.mdx

@@ -5,10 +5,15 @@ props:
   includeInternal: true
   exports:
     - default
+    - TileSkeleton
 ---
 
-import Tile from '@atlaskit/tile';
-
 ## Props
 
+### Tile props
+
 <TSMorphProps exportName="default" packageName="@atlaskit/tile" />
+
+### TileSkeleton props
+
+<TSMorphProps exportName="TileSkeleton" packageName="@atlaskit/tile" />

package/dist/cjs/index.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "Skeleton", {
+Object.defineProperty(exports, "TileSkeleton", {
   enumerable: true,
   get: function get() {
     return _skeleton.default;

package/dist/cjs/skeleton.js

@@ -9,9 +9,9 @@ var _react = _interopRequireDefault(require("react"));
 var _skeleton = _interopRequireDefault(require("@atlaskit/skeleton"));
 var _tile = _interopRequireDefault(require("./tile"));
 /**
- * __Skeleton__
+ * __Tile Skeleton__
  *
- * A skeleton is the loading state for the tile component.
+ * A tile skeleton is the loading state for the tile component.
  *
  */
 function TileSkeleton(_ref) {

package/dist/es2019/index.js

@@ -1,2 +1,2 @@
 export { default } from './tile';
-export { default as Skeleton } from './entry-point/skeleton';
+export { default as TileSkeleton } from './entry-point/skeleton';

package/dist/es2019/skeleton.js

@@ -2,9 +2,9 @@ import React from 'react';
 import Skeleton from '@atlaskit/skeleton';
 import Tile from './tile';
 /**
- * __Skeleton__
+ * __Tile Skeleton__
  *
- * A skeleton is the loading state for the tile component.
+ * A tile skeleton is the loading state for the tile component.
  *
  */
 export default function TileSkeleton({

package/dist/esm/index.js

@@ -1,2 +1,2 @@
 export { default } from './tile';
-export { default as Skeleton } from './entry-point/skeleton';
+export { default as TileSkeleton } from './entry-point/skeleton';

package/dist/esm/skeleton.js

@@ -2,9 +2,9 @@ import React from 'react';
 import Skeleton from '@atlaskit/skeleton';
 import Tile from './tile';
 /**
- * __Skeleton__
+ * __Tile Skeleton__
  *
- * A skeleton is the loading state for the tile component.
+ * A tile skeleton is the loading state for the tile component.
  *
  */
 export default function TileSkeleton(_ref) {

package/dist/types/entry-point/skeleton.d.ts

@@ -1,2 +1,2 @@
 export { default } from '../skeleton';
-export { type SkeletonProps } from '../types';
+export { type TileSkeletonProps } from '../types';

package/dist/types/index.d.ts

@@ -1,3 +1,3 @@
 export { default } from './tile';
 export { type TileProps } from './types';
-export { default as Skeleton, type SkeletonProps } from './entry-point/skeleton';
+export { default as TileSkeleton, type TileSkeletonProps } from './entry-point/skeleton';

package/dist/types/skeleton.d.ts

@@ -1,9 +1,9 @@
 import React from 'react';
-import type { SkeletonProps } from './types';
+import type { TileSkeletonProps } from './types';
 /**
- * __Skeleton__
+ * __Tile Skeleton__
  *
- * A skeleton is the loading state for the tile component.
+ * A tile skeleton is the loading state for the tile component.
  *
  */
-export default function TileSkeleton({ color, isShimmering, shimmeringEndColor, size, testId, }: SkeletonProps): React.JSX.Element;
+export default function TileSkeleton({ color, isShimmering, shimmeringEndColor, size, testId, }: TileSkeletonProps): React.JSX.Element;

package/dist/types/types.d.ts

@@ -47,9 +47,9 @@ export type TileProps = {
      */
     testId?: string;
 };
-export type SkeletonProps = {
+export type TileSkeletonProps = {
     /**
-     * Overrides the default color of skeleton, and overrides the default shimmering start color if ShimmeringEndColor also provided.
+     * Overrides the default color of skeleton, and overrides the default shimmering start color if `shimmeringEndColor` is also provided.
      */
     color?: string;
     /**

package/dist/types-ts4.5/entry-point/skeleton.d.ts

@@ -1,2 +1,2 @@
 export { default } from '../skeleton';
-export { type SkeletonProps } from '../types';
+export { type TileSkeletonProps } from '../types';

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

@@ -1,3 +1,3 @@
 export { default } from './tile';
 export { type TileProps } from './types';
-export { default as Skeleton, type SkeletonProps } from './entry-point/skeleton';
+export { default as TileSkeleton, type TileSkeletonProps } from './entry-point/skeleton';

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

@@ -1,9 +1,9 @@
 import React from 'react';
-import type { SkeletonProps } from './types';
+import type { TileSkeletonProps } from './types';
 /**
- * __Skeleton__
+ * __Tile Skeleton__
  *
- * A skeleton is the loading state for the tile component.
+ * A tile skeleton is the loading state for the tile component.
  *
  */
-export default function TileSkeleton({ color, isShimmering, shimmeringEndColor, size, testId, }: SkeletonProps): React.JSX.Element;
+export default function TileSkeleton({ color, isShimmering, shimmeringEndColor, size, testId, }: TileSkeletonProps): React.JSX.Element;

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

@@ -47,9 +47,9 @@ export type TileProps = {
      */
     testId?: string;
 };
-export type SkeletonProps = {
+export type TileSkeletonProps = {
     /**
-     * Overrides the default color of skeleton, and overrides the default shimmering start color if ShimmeringEndColor also provided.
+     * Overrides the default color of skeleton, and overrides the default shimmering start color if `shimmeringEndColor` is also provided.
      */
     color?: string;
     /**

package/package.json

@@ -26,7 +26,7 @@
 	"atlaskit:src": "src/index.tsx",
 	"dependencies": {
 		"@atlaskit/skeleton": "^2.1.0",
-		"@atlaskit/tokens": "^7.0.0",
+		"@atlaskit/tokens": "^8.0.0",
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^0.18.6"
 	},
@@ -37,7 +37,7 @@
 		"@af/accessibility-testing": "workspace:^",
 		"@af/integration-testing": "workspace:^",
 		"@af/visual-regression": "workspace:^",
-		"@atlaskit/ds-lib": "^5.1.0",
+		"@atlaskit/ds-lib": "^5.2.0",
 		"@atlaskit/ssr": "workspace:^",
 		"@testing-library/react": "^13.4.0",
 		"react-dom": "^18.2.0"
@@ -80,7 +80,7 @@
 		}
 	},
 	"name": "@atlaskit/tile",
-	"version": "0.2.2",
+	"version": "1.0.1",
 	"description": "A tile is a rounded square that takes an asset and represents a noun.",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",