@atlaskit/tile 0.1.4 → 0.2.0

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @atlaskit/tile
 
+## 0.2.0
+
+### Minor Changes
+
+- [`f20393c20ed30`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/f20393c20ed30) -
+  Added new Tile Skeleton to act as a placeholder while content loads.
+
 ## 0.1.4
 
 ### Patch Changes

package/dist/cjs/entry-point/skeleton.js

@@ -0,0 +1,13 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _skeleton.default;
+  }
+});
+var _skeleton = _interopRequireDefault(require("../skeleton"));

package/dist/cjs/index.js

@@ -4,10 +4,17 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+Object.defineProperty(exports, "Skeleton", {
+  enumerable: true,
+  get: function get() {
+    return _skeleton.default;
+  }
+});
 Object.defineProperty(exports, "default", {
   enumerable: true,
   get: function get() {
     return _tile.default;
   }
 });
-var _tile = _interopRequireDefault(require("./tile"));
+var _tile = _interopRequireDefault(require("./tile"));
+var _skeleton = _interopRequireDefault(require("./entry-point/skeleton"));

package/dist/cjs/skeleton.js

@@ -0,0 +1,37 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = TileSkeleton;
+var _react = _interopRequireDefault(require("react"));
+var _skeleton = _interopRequireDefault(require("@atlaskit/skeleton"));
+var _tile = _interopRequireDefault(require("./tile"));
+/**
+ * __Skeleton__
+ *
+ * A skeleton is the loading state for the tile component.
+ *
+ */
+function TileSkeleton(_ref) {
+  var color = _ref.color,
+    isShimmering = _ref.isShimmering,
+    shimmeringEndColor = _ref.shimmeringEndColor,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'medium' : _ref$size,
+    testId = _ref.testId;
+  return /*#__PURE__*/_react.default.createElement(_tile.default, {
+    label: "",
+    size: size,
+    testId: testId,
+    backgroundColor: "transparent"
+  }, /*#__PURE__*/_react.default.createElement(_skeleton.default, {
+    color: color,
+    isShimmering: isShimmering,
+    ShimmeringEndColor: shimmeringEndColor,
+    width: '100%',
+    height: '100%',
+    testId: testId ? "".concat(testId, "--skeleton") : undefined
+  }));
+}

package/dist/cjs/tile.compiled.css

@@ -51,6 +51,7 @@
 ._bfhk1g3m{background-color:var(--ds-background-accent-orange-subtlest,#fff3eb)}
 ._bfhk1g6e{background-color:var(--ds-background-accent-orange-subtle,#fea362)}
 ._bfhk1gly{background-color:var(--ds-background-danger,#ffeceb)}
+._bfhk1j28{background-color:transparent}
 ._bfhk1j89{background-color:var(--ds-background-accent-blue-subtle,#579dff)}
 ._bfhk1jkz{background-color:var(--ds-background-accent-purple-subtler,#dfd8fd)}
 ._bfhk1lri{background-color:var(--ds-background-discovery-bold,#6e5dc6)}

package/dist/cjs/tile.js

@@ -35,6 +35,7 @@ var insetSizeMap = {
 var backgroundColorMap = {
   white: "_bfhku67f",
   black: "_bfhkr3uz",
+  transparent: "_bfhk1j28",
   'color.background.accent.lime.subtlest': "_bfhkm890",
   'color.background.accent.lime.subtler': "_bfhkz2ec",
   'color.background.accent.lime.subtle': "_bfhkbq5w",
@@ -111,6 +112,7 @@ function Tile(props) {
     testId = props.testId;
   return /*#__PURE__*/React.createElement("span", {
     "data-testid": testId,
+    // eslint-disable-next-line @atlassian/i18n/no-literal-string-in-jsx
     "aria-label": label !== '' ? label : undefined,
     role: label !== '' ? 'img' : undefined,
     className: (0, _runtime.ax)([styles.root, sizeMap[size], isInset ? styles.inset : styles.nonInset, isInset && insetSizeMap[size], backgroundColorMap[backgroundColor || 'color.background.neutral'], hasBorder && styles.border])

package/dist/es2019/entry-point/skeleton.js

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

package/dist/es2019/index.js

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

package/dist/es2019/skeleton.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import Skeleton from '@atlaskit/skeleton';
+import Tile from './tile';
+/**
+ * __Skeleton__
+ *
+ * A skeleton is the loading state for the tile component.
+ *
+ */
+export default function TileSkeleton({
+  color,
+  isShimmering,
+  shimmeringEndColor,
+  size = 'medium',
+  testId
+}) {
+  return /*#__PURE__*/React.createElement(Tile, {
+    label: "",
+    size: size,
+    testId: testId,
+    backgroundColor: "transparent"
+  }, /*#__PURE__*/React.createElement(Skeleton, {
+    color: color,
+    isShimmering: isShimmering,
+    ShimmeringEndColor: shimmeringEndColor,
+    width: '100%',
+    height: '100%',
+    testId: testId ? `${testId}--skeleton` : undefined
+  }));
+}

package/dist/es2019/tile.compiled.css

@@ -51,6 +51,7 @@
 ._bfhk1g3m{background-color:var(--ds-background-accent-orange-subtlest,#fff3eb)}
 ._bfhk1g6e{background-color:var(--ds-background-accent-orange-subtle,#fea362)}
 ._bfhk1gly{background-color:var(--ds-background-danger,#ffeceb)}
+._bfhk1j28{background-color:transparent}
 ._bfhk1j89{background-color:var(--ds-background-accent-blue-subtle,#579dff)}
 ._bfhk1jkz{background-color:var(--ds-background-accent-purple-subtler,#dfd8fd)}
 ._bfhk1lri{background-color:var(--ds-background-discovery-bold,#6e5dc6)}

package/dist/es2019/tile.js

@@ -27,6 +27,7 @@ const insetSizeMap = {
 const backgroundColorMap = {
   white: "_bfhku67f",
   black: "_bfhkr3uz",
+  transparent: "_bfhk1j28",
   'color.background.accent.lime.subtlest': "_bfhkm890",
   'color.background.accent.lime.subtler': "_bfhkz2ec",
   'color.background.accent.lime.subtle': "_bfhkbq5w",
@@ -103,6 +104,7 @@ export default function Tile(props) {
   } = props;
   return /*#__PURE__*/React.createElement("span", {
     "data-testid": testId,
+    // eslint-disable-next-line @atlassian/i18n/no-literal-string-in-jsx
     "aria-label": label !== '' ? label : undefined,
     role: label !== '' ? 'img' : undefined,
     className: ax([styles.root, sizeMap[size], isInset ? styles.inset : styles.nonInset, isInset && insetSizeMap[size], backgroundColorMap[backgroundColor || 'color.background.neutral'], hasBorder && styles.border])

package/dist/esm/entry-point/skeleton.js

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

package/dist/esm/index.js

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

package/dist/esm/skeleton.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import Skeleton from '@atlaskit/skeleton';
+import Tile from './tile';
+/**
+ * __Skeleton__
+ *
+ * A skeleton is the loading state for the tile component.
+ *
+ */
+export default function TileSkeleton(_ref) {
+  var color = _ref.color,
+    isShimmering = _ref.isShimmering,
+    shimmeringEndColor = _ref.shimmeringEndColor,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'medium' : _ref$size,
+    testId = _ref.testId;
+  return /*#__PURE__*/React.createElement(Tile, {
+    label: "",
+    size: size,
+    testId: testId,
+    backgroundColor: "transparent"
+  }, /*#__PURE__*/React.createElement(Skeleton, {
+    color: color,
+    isShimmering: isShimmering,
+    ShimmeringEndColor: shimmeringEndColor,
+    width: '100%',
+    height: '100%',
+    testId: testId ? "".concat(testId, "--skeleton") : undefined
+  }));
+}

package/dist/esm/tile.compiled.css

@@ -51,6 +51,7 @@
 ._bfhk1g3m{background-color:var(--ds-background-accent-orange-subtlest,#fff3eb)}
 ._bfhk1g6e{background-color:var(--ds-background-accent-orange-subtle,#fea362)}
 ._bfhk1gly{background-color:var(--ds-background-danger,#ffeceb)}
+._bfhk1j28{background-color:transparent}
 ._bfhk1j89{background-color:var(--ds-background-accent-blue-subtle,#579dff)}
 ._bfhk1jkz{background-color:var(--ds-background-accent-purple-subtler,#dfd8fd)}
 ._bfhk1lri{background-color:var(--ds-background-discovery-bold,#6e5dc6)}

package/dist/esm/tile.js

@@ -27,6 +27,7 @@ var insetSizeMap = {
 var backgroundColorMap = {
   white: "_bfhku67f",
   black: "_bfhkr3uz",
+  transparent: "_bfhk1j28",
   'color.background.accent.lime.subtlest': "_bfhkm890",
   'color.background.accent.lime.subtler': "_bfhkz2ec",
   'color.background.accent.lime.subtle': "_bfhkbq5w",
@@ -103,6 +104,7 @@ export default function Tile(props) {
     testId = props.testId;
   return /*#__PURE__*/React.createElement("span", {
     "data-testid": testId,
+    // eslint-disable-next-line @atlassian/i18n/no-literal-string-in-jsx
     "aria-label": label !== '' ? label : undefined,
     role: label !== '' ? 'img' : undefined,
     className: ax([styles.root, sizeMap[size], isInset ? styles.inset : styles.nonInset, isInset && insetSizeMap[size], backgroundColorMap[backgroundColor || 'color.background.neutral'], hasBorder && styles.border])

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

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

package/dist/types/index.d.ts

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

package/dist/types/skeleton.d.ts

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

package/dist/types/types.d.ts

@@ -1,5 +1,5 @@
 export type TileSize = 'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
-export type TileBackgroundColor = 'color.background.accent.lime.subtlest' | 'color.background.accent.lime.subtler' | 'color.background.accent.lime.subtle' | 'color.background.accent.lime.bolder' | 'color.background.accent.red.subtlest' | 'color.background.accent.red.subtler' | 'color.background.accent.red.subtle' | 'color.background.accent.red.bolder' | 'color.background.accent.orange.subtlest' | 'color.background.accent.orange.subtler' | 'color.background.accent.orange.subtle' | 'color.background.accent.orange.bolder' | 'color.background.accent.yellow.subtlest' | 'color.background.accent.yellow.subtler' | 'color.background.accent.yellow.subtle' | 'color.background.accent.yellow.bolder' | 'color.background.accent.green.subtlest' | 'color.background.accent.green.subtler' | 'color.background.accent.green.subtle' | 'color.background.accent.green.bolder' | 'color.background.accent.teal.subtlest' | 'color.background.accent.teal.subtler' | 'color.background.accent.teal.subtle' | 'color.background.accent.teal.bolder' | 'color.background.accent.blue.subtlest' | 'color.background.accent.blue.subtler' | 'color.background.accent.blue.subtle' | 'color.background.accent.blue.bolder' | 'color.background.accent.purple.subtlest' | 'color.background.accent.purple.subtler' | 'color.background.accent.purple.subtle' | 'color.background.accent.purple.bolder' | 'color.background.accent.magenta.subtlest' | 'color.background.accent.magenta.subtler' | 'color.background.accent.magenta.subtle' | 'color.background.accent.magenta.bolder' | 'color.background.accent.gray.subtlest' | 'color.background.accent.gray.subtler' | 'color.background.accent.gray.subtle' | 'color.background.accent.gray.bolder' | 'color.background.inverse.subtle' | 'color.background.neutral' | 'color.background.neutral.bold' | 'color.background.brand.subtlest' | 'color.background.brand.bold' | 'color.background.brand.boldest' | 'color.background.danger' | 'color.background.danger.bold' | 'color.background.warning' | 'color.background.warning.bold' | 'color.background.success' | 'color.background.success.bold' | 'color.background.discovery' | 'color.background.discovery.bold' | 'color.background.information' | 'color.background.information.bold' | 'white' | 'black';
+export type TileBackgroundColor = 'color.background.accent.lime.subtlest' | 'color.background.accent.lime.subtler' | 'color.background.accent.lime.subtle' | 'color.background.accent.lime.bolder' | 'color.background.accent.red.subtlest' | 'color.background.accent.red.subtler' | 'color.background.accent.red.subtle' | 'color.background.accent.red.bolder' | 'color.background.accent.orange.subtlest' | 'color.background.accent.orange.subtler' | 'color.background.accent.orange.subtle' | 'color.background.accent.orange.bolder' | 'color.background.accent.yellow.subtlest' | 'color.background.accent.yellow.subtler' | 'color.background.accent.yellow.subtle' | 'color.background.accent.yellow.bolder' | 'color.background.accent.green.subtlest' | 'color.background.accent.green.subtler' | 'color.background.accent.green.subtle' | 'color.background.accent.green.bolder' | 'color.background.accent.teal.subtlest' | 'color.background.accent.teal.subtler' | 'color.background.accent.teal.subtle' | 'color.background.accent.teal.bolder' | 'color.background.accent.blue.subtlest' | 'color.background.accent.blue.subtler' | 'color.background.accent.blue.subtle' | 'color.background.accent.blue.bolder' | 'color.background.accent.purple.subtlest' | 'color.background.accent.purple.subtler' | 'color.background.accent.purple.subtle' | 'color.background.accent.purple.bolder' | 'color.background.accent.magenta.subtlest' | 'color.background.accent.magenta.subtler' | 'color.background.accent.magenta.subtle' | 'color.background.accent.magenta.bolder' | 'color.background.accent.gray.subtlest' | 'color.background.accent.gray.subtler' | 'color.background.accent.gray.subtle' | 'color.background.accent.gray.bolder' | 'color.background.inverse.subtle' | 'color.background.neutral' | 'color.background.neutral.bold' | 'color.background.brand.subtlest' | 'color.background.brand.bold' | 'color.background.brand.boldest' | 'color.background.danger' | 'color.background.danger.bold' | 'color.background.warning' | 'color.background.warning.bold' | 'color.background.success' | 'color.background.success.bold' | 'color.background.discovery' | 'color.background.discovery.bold' | 'color.background.information' | 'color.background.information.bold' | 'transparent' | 'white' | 'black';
 export type TileProps = {
     /**
      * The label for the icon.
@@ -47,3 +47,24 @@ export type TileProps = {
      */
     testId?: string;
 };
+export type SkeletonProps = {
+    /**
+     * Overrides the default color of skeleton, and overrides the default shimmering start color if ShimmeringEndColor also provided.
+     */
+    color?: string;
+    /**
+     * Overrides the default shimmering ending color of skeleton.
+     */
+    shimmeringEndColor?: string;
+    /**
+     * Enables the shimmering animation.
+     */
+    isShimmering?: boolean;
+    size?: TileProps['size'];
+    /**
+     * 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;
+};

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

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

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

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

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

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

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

@@ -1,5 +1,5 @@
 export type TileSize = 'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
-export type TileBackgroundColor = 'color.background.accent.lime.subtlest' | 'color.background.accent.lime.subtler' | 'color.background.accent.lime.subtle' | 'color.background.accent.lime.bolder' | 'color.background.accent.red.subtlest' | 'color.background.accent.red.subtler' | 'color.background.accent.red.subtle' | 'color.background.accent.red.bolder' | 'color.background.accent.orange.subtlest' | 'color.background.accent.orange.subtler' | 'color.background.accent.orange.subtle' | 'color.background.accent.orange.bolder' | 'color.background.accent.yellow.subtlest' | 'color.background.accent.yellow.subtler' | 'color.background.accent.yellow.subtle' | 'color.background.accent.yellow.bolder' | 'color.background.accent.green.subtlest' | 'color.background.accent.green.subtler' | 'color.background.accent.green.subtle' | 'color.background.accent.green.bolder' | 'color.background.accent.teal.subtlest' | 'color.background.accent.teal.subtler' | 'color.background.accent.teal.subtle' | 'color.background.accent.teal.bolder' | 'color.background.accent.blue.subtlest' | 'color.background.accent.blue.subtler' | 'color.background.accent.blue.subtle' | 'color.background.accent.blue.bolder' | 'color.background.accent.purple.subtlest' | 'color.background.accent.purple.subtler' | 'color.background.accent.purple.subtle' | 'color.background.accent.purple.bolder' | 'color.background.accent.magenta.subtlest' | 'color.background.accent.magenta.subtler' | 'color.background.accent.magenta.subtle' | 'color.background.accent.magenta.bolder' | 'color.background.accent.gray.subtlest' | 'color.background.accent.gray.subtler' | 'color.background.accent.gray.subtle' | 'color.background.accent.gray.bolder' | 'color.background.inverse.subtle' | 'color.background.neutral' | 'color.background.neutral.bold' | 'color.background.brand.subtlest' | 'color.background.brand.bold' | 'color.background.brand.boldest' | 'color.background.danger' | 'color.background.danger.bold' | 'color.background.warning' | 'color.background.warning.bold' | 'color.background.success' | 'color.background.success.bold' | 'color.background.discovery' | 'color.background.discovery.bold' | 'color.background.information' | 'color.background.information.bold' | 'white' | 'black';
+export type TileBackgroundColor = 'color.background.accent.lime.subtlest' | 'color.background.accent.lime.subtler' | 'color.background.accent.lime.subtle' | 'color.background.accent.lime.bolder' | 'color.background.accent.red.subtlest' | 'color.background.accent.red.subtler' | 'color.background.accent.red.subtle' | 'color.background.accent.red.bolder' | 'color.background.accent.orange.subtlest' | 'color.background.accent.orange.subtler' | 'color.background.accent.orange.subtle' | 'color.background.accent.orange.bolder' | 'color.background.accent.yellow.subtlest' | 'color.background.accent.yellow.subtler' | 'color.background.accent.yellow.subtle' | 'color.background.accent.yellow.bolder' | 'color.background.accent.green.subtlest' | 'color.background.accent.green.subtler' | 'color.background.accent.green.subtle' | 'color.background.accent.green.bolder' | 'color.background.accent.teal.subtlest' | 'color.background.accent.teal.subtler' | 'color.background.accent.teal.subtle' | 'color.background.accent.teal.bolder' | 'color.background.accent.blue.subtlest' | 'color.background.accent.blue.subtler' | 'color.background.accent.blue.subtle' | 'color.background.accent.blue.bolder' | 'color.background.accent.purple.subtlest' | 'color.background.accent.purple.subtler' | 'color.background.accent.purple.subtle' | 'color.background.accent.purple.bolder' | 'color.background.accent.magenta.subtlest' | 'color.background.accent.magenta.subtler' | 'color.background.accent.magenta.subtle' | 'color.background.accent.magenta.bolder' | 'color.background.accent.gray.subtlest' | 'color.background.accent.gray.subtler' | 'color.background.accent.gray.subtle' | 'color.background.accent.gray.bolder' | 'color.background.inverse.subtle' | 'color.background.neutral' | 'color.background.neutral.bold' | 'color.background.brand.subtlest' | 'color.background.brand.bold' | 'color.background.brand.boldest' | 'color.background.danger' | 'color.background.danger.bold' | 'color.background.warning' | 'color.background.warning.bold' | 'color.background.success' | 'color.background.success.bold' | 'color.background.discovery' | 'color.background.discovery.bold' | 'color.background.information' | 'color.background.information.bold' | 'transparent' | 'white' | 'black';
 export type TileProps = {
     /**
      * The label for the icon.
@@ -47,3 +47,24 @@ export type TileProps = {
      */
     testId?: string;
 };
+export type SkeletonProps = {
+    /**
+     * Overrides the default color of skeleton, and overrides the default shimmering start color if ShimmeringEndColor also provided.
+     */
+    color?: string;
+    /**
+     * Overrides the default shimmering ending color of skeleton.
+     */
+    shimmeringEndColor?: string;
+    /**
+     * Enables the shimmering animation.
+     */
+    isShimmering?: boolean;
+    size?: TileProps['size'];
+    /**
+     * 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;
+};

package/package.json

@@ -28,7 +28,8 @@
 	],
 	"atlaskit:src": "src/index.tsx",
 	"dependencies": {
-		"@atlaskit/tokens": "^6.3.0",
+		"@atlaskit/skeleton": "^2.1.0",
+		"@atlaskit/tokens": "^6.4.0",
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^0.18.3"
 	},
@@ -82,7 +83,7 @@
 		}
 	},
 	"name": "@atlaskit/tile",
-	"version": "0.1.4",
+	"version": "0.2.0",
 	"description": "A tile is a rounded square that takes an asset (Image, Icon, Logo) and represents a noun.",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",

package/skeleton/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "@atlaskit/tile/skeleton",
+  "main": "../dist/cjs/entry-point/skeleton.js",
+  "module": "../dist/esm/entry-point/skeleton.js",
+  "module:es2019": "../dist/es2019/entry-point/skeleton.js",
+  "sideEffects": [
+    "*.compiled.css"
+  ],
+  "types": "../dist/types/entry-point/skeleton.d.ts",
+  "typesVersions": {
+    ">=4.5 <5.9": {
+      "*": [
+        "../dist/types-ts4.5/entry-point/skeleton.d.ts"
+      ]
+    }
+  }
+}