@atlaskit/tile 0.1.3 → 0.2.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @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
+
+- [`99f4f441fac8c`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/99f4f441fac8c) -
+  Removed unused dependencies.
+
 ## 0.1.3
 
 ### 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

@@ -3,6 +3,8 @@
 ._189ee4h9{border-width:var(--ds-border-width,1px)}
 ._1dqonqa1{border-style:solid}
 ._1h6dmuej{border-color:var(--ds-border,#091e4224)}._16jlidpf{flex-grow:0}
+._17521osq svg{height:100%}
+._17521wug svg{height:auto}
 ._18m915vq{overflow-y:hidden}
 ._1bah1h6o{justify-content:center}
 ._1bsb1tcg{width:24px}
@@ -12,16 +14,16 @@
 ._1bsbgktf{width:20px}
 ._1bsbzwfg{width:2pc}
 ._1e0c116y{display:inline-flex}
-._1iia1osq div, ._bna71osq img, ._1xjx1osq span, ._17521osq svg{height:100%}
-._1iia1wug div, ._bna71wug img, ._1xjx1wug span, ._17521wug svg{height:auto}
+._1iia1osq div{height:100%}
+._1iia1wug div{height:auto}
 ._1o9zidpf{flex-shrink:0}
-._1qwg19bv div, ._mezj19bv img, ._e2oo19bv span, ._w8l519bv svg{width:10px}
-._1qwg1crf div, ._mezj1crf img, ._e2oo1crf span, ._w8l51crf svg{width:9pt}
-._1qwg1osq div, ._mezj1osq img, ._e2oo1osq span, ._w8l51osq svg{width:100%}
-._1qwg1tcg div, ._mezj1tcg img, ._e2oo1tcg span, ._w8l51tcg svg{width:24px}
-._1qwg7vkz div, ._mezj7vkz img, ._e2oo7vkz span, ._w8l57vkz svg{width:1pc}
-._1qwgdlk8 div, ._mezjdlk8 img, ._e2oodlk8 span, ._w8l5dlk8 svg{width:14px}
-._1qwggktf div, ._mezjgktf img, ._e2oogktf span, ._w8l5gktf svg{width:20px}
+._1qwg19bv div{width:10px}
+._1qwg1crf div{width:9pt}
+._1qwg1osq div{width:100%}
+._1qwg1tcg div{width:24px}
+._1qwg7vkz div{width:1pc}
+._1qwgdlk8 div{width:14px}
+._1qwggktf div{width:20px}
 ._1reo15vq{overflow-x:hidden}
 ._1tkeidpf{min-height:0}
 ._1ul9idpf{min-width:0}
@@ -31,6 +33,8 @@
 ._1wyb7vkz{font-size:1pc}
 ._1wybdlk8{font-size:14px}
 ._1wybgktf{font-size:20px}
+._1xjx1osq span{height:100%}
+._1xjx1wug span{height:auto}
 ._4cvr1h6o{align-items:center}
 ._4t3i1tcg{height:24px}
 ._4t3i1ylp{height:40px}
@@ -47,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)}
@@ -96,5 +101,28 @@
 ._bfhkybec{background-color:var(--ds-background-danger-bold,#c9372c)}
 ._bfhkygwo{background-color:var(--ds-background-accent-purple-bolder,#6e5dc6)}
 ._bfhkz2ec{background-color:var(--ds-background-accent-lime-subtler,#d3f1a7)}
+._bna71osq img{height:100%}
+._bna71wug img{height:auto}
+._e2oo19bv span{width:10px}
+._e2oo1crf span{width:9pt}
+._e2oo1osq span{width:100%}
+._e2oo1tcg span{width:24px}
+._e2oo7vkz span{width:1pc}
+._e2oodlk8 span{width:14px}
+._e2oogktf span{width:20px}
 ._kqswh2mm{position:relative}
-._vchhusvi{box-sizing:border-box}
+._mezj19bv img{width:10px}
+._mezj1crf img{width:9pt}
+._mezj1osq img{width:100%}
+._mezj1tcg img{width:24px}
+._mezj7vkz img{width:1pc}
+._mezjdlk8 img{width:14px}
+._mezjgktf img{width:20px}
+._vchhusvi{box-sizing:border-box}
+._w8l519bv svg{width:10px}
+._w8l51crf svg{width:9pt}
+._w8l51osq svg{width:100%}
+._w8l51tcg svg{width:24px}
+._w8l57vkz svg{width:1pc}
+._w8l5dlk8 svg{width:14px}
+._w8l5gktf svg{width:20px}

package/dist/cjs/tile.js

@@ -1,4 +1,4 @@
-/* tile.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* tile.tsx generated by @compiled/babel-plugin v0.38.1 */
 "use strict";
 
 var _typeof = require("@babel/runtime/helpers/typeof");
@@ -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

@@ -3,6 +3,8 @@
 ._189ee4h9{border-width:var(--ds-border-width,1px)}
 ._1dqonqa1{border-style:solid}
 ._1h6dmuej{border-color:var(--ds-border,#091e4224)}._16jlidpf{flex-grow:0}
+._17521osq svg{height:100%}
+._17521wug svg{height:auto}
 ._18m915vq{overflow-y:hidden}
 ._1bah1h6o{justify-content:center}
 ._1bsb1tcg{width:24px}
@@ -12,16 +14,16 @@
 ._1bsbgktf{width:20px}
 ._1bsbzwfg{width:2pc}
 ._1e0c116y{display:inline-flex}
-._1iia1osq div, ._bna71osq img, ._1xjx1osq span, ._17521osq svg{height:100%}
-._1iia1wug div, ._bna71wug img, ._1xjx1wug span, ._17521wug svg{height:auto}
+._1iia1osq div{height:100%}
+._1iia1wug div{height:auto}
 ._1o9zidpf{flex-shrink:0}
-._1qwg19bv div, ._mezj19bv img, ._e2oo19bv span, ._w8l519bv svg{width:10px}
-._1qwg1crf div, ._mezj1crf img, ._e2oo1crf span, ._w8l51crf svg{width:9pt}
-._1qwg1osq div, ._mezj1osq img, ._e2oo1osq span, ._w8l51osq svg{width:100%}
-._1qwg1tcg div, ._mezj1tcg img, ._e2oo1tcg span, ._w8l51tcg svg{width:24px}
-._1qwg7vkz div, ._mezj7vkz img, ._e2oo7vkz span, ._w8l57vkz svg{width:1pc}
-._1qwgdlk8 div, ._mezjdlk8 img, ._e2oodlk8 span, ._w8l5dlk8 svg{width:14px}
-._1qwggktf div, ._mezjgktf img, ._e2oogktf span, ._w8l5gktf svg{width:20px}
+._1qwg19bv div{width:10px}
+._1qwg1crf div{width:9pt}
+._1qwg1osq div{width:100%}
+._1qwg1tcg div{width:24px}
+._1qwg7vkz div{width:1pc}
+._1qwgdlk8 div{width:14px}
+._1qwggktf div{width:20px}
 ._1reo15vq{overflow-x:hidden}
 ._1tkeidpf{min-height:0}
 ._1ul9idpf{min-width:0}
@@ -31,6 +33,8 @@
 ._1wyb7vkz{font-size:1pc}
 ._1wybdlk8{font-size:14px}
 ._1wybgktf{font-size:20px}
+._1xjx1osq span{height:100%}
+._1xjx1wug span{height:auto}
 ._4cvr1h6o{align-items:center}
 ._4t3i1tcg{height:24px}
 ._4t3i1ylp{height:40px}
@@ -47,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)}
@@ -96,5 +101,28 @@
 ._bfhkybec{background-color:var(--ds-background-danger-bold,#c9372c)}
 ._bfhkygwo{background-color:var(--ds-background-accent-purple-bolder,#6e5dc6)}
 ._bfhkz2ec{background-color:var(--ds-background-accent-lime-subtler,#d3f1a7)}
+._bna71osq img{height:100%}
+._bna71wug img{height:auto}
+._e2oo19bv span{width:10px}
+._e2oo1crf span{width:9pt}
+._e2oo1osq span{width:100%}
+._e2oo1tcg span{width:24px}
+._e2oo7vkz span{width:1pc}
+._e2oodlk8 span{width:14px}
+._e2oogktf span{width:20px}
 ._kqswh2mm{position:relative}
-._vchhusvi{box-sizing:border-box}
+._mezj19bv img{width:10px}
+._mezj1crf img{width:9pt}
+._mezj1osq img{width:100%}
+._mezj1tcg img{width:24px}
+._mezj7vkz img{width:1pc}
+._mezjdlk8 img{width:14px}
+._mezjgktf img{width:20px}
+._vchhusvi{box-sizing:border-box}
+._w8l519bv svg{width:10px}
+._w8l51crf svg{width:9pt}
+._w8l51osq svg{width:100%}
+._w8l51tcg svg{width:24px}
+._w8l57vkz svg{width:1pc}
+._w8l5dlk8 svg{width:14px}
+._w8l5gktf svg{width:20px}

package/dist/es2019/tile.js

@@ -1,4 +1,4 @@
-/* tile.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* tile.tsx generated by @compiled/babel-plugin v0.38.1 */
 import "./tile.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
@@ -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

@@ -3,6 +3,8 @@
 ._189ee4h9{border-width:var(--ds-border-width,1px)}
 ._1dqonqa1{border-style:solid}
 ._1h6dmuej{border-color:var(--ds-border,#091e4224)}._16jlidpf{flex-grow:0}
+._17521osq svg{height:100%}
+._17521wug svg{height:auto}
 ._18m915vq{overflow-y:hidden}
 ._1bah1h6o{justify-content:center}
 ._1bsb1tcg{width:24px}
@@ -12,16 +14,16 @@
 ._1bsbgktf{width:20px}
 ._1bsbzwfg{width:2pc}
 ._1e0c116y{display:inline-flex}
-._1iia1osq div, ._bna71osq img, ._1xjx1osq span, ._17521osq svg{height:100%}
-._1iia1wug div, ._bna71wug img, ._1xjx1wug span, ._17521wug svg{height:auto}
+._1iia1osq div{height:100%}
+._1iia1wug div{height:auto}
 ._1o9zidpf{flex-shrink:0}
-._1qwg19bv div, ._mezj19bv img, ._e2oo19bv span, ._w8l519bv svg{width:10px}
-._1qwg1crf div, ._mezj1crf img, ._e2oo1crf span, ._w8l51crf svg{width:9pt}
-._1qwg1osq div, ._mezj1osq img, ._e2oo1osq span, ._w8l51osq svg{width:100%}
-._1qwg1tcg div, ._mezj1tcg img, ._e2oo1tcg span, ._w8l51tcg svg{width:24px}
-._1qwg7vkz div, ._mezj7vkz img, ._e2oo7vkz span, ._w8l57vkz svg{width:1pc}
-._1qwgdlk8 div, ._mezjdlk8 img, ._e2oodlk8 span, ._w8l5dlk8 svg{width:14px}
-._1qwggktf div, ._mezjgktf img, ._e2oogktf span, ._w8l5gktf svg{width:20px}
+._1qwg19bv div{width:10px}
+._1qwg1crf div{width:9pt}
+._1qwg1osq div{width:100%}
+._1qwg1tcg div{width:24px}
+._1qwg7vkz div{width:1pc}
+._1qwgdlk8 div{width:14px}
+._1qwggktf div{width:20px}
 ._1reo15vq{overflow-x:hidden}
 ._1tkeidpf{min-height:0}
 ._1ul9idpf{min-width:0}
@@ -31,6 +33,8 @@
 ._1wyb7vkz{font-size:1pc}
 ._1wybdlk8{font-size:14px}
 ._1wybgktf{font-size:20px}
+._1xjx1osq span{height:100%}
+._1xjx1wug span{height:auto}
 ._4cvr1h6o{align-items:center}
 ._4t3i1tcg{height:24px}
 ._4t3i1ylp{height:40px}
@@ -47,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)}
@@ -96,5 +101,28 @@
 ._bfhkybec{background-color:var(--ds-background-danger-bold,#c9372c)}
 ._bfhkygwo{background-color:var(--ds-background-accent-purple-bolder,#6e5dc6)}
 ._bfhkz2ec{background-color:var(--ds-background-accent-lime-subtler,#d3f1a7)}
+._bna71osq img{height:100%}
+._bna71wug img{height:auto}
+._e2oo19bv span{width:10px}
+._e2oo1crf span{width:9pt}
+._e2oo1osq span{width:100%}
+._e2oo1tcg span{width:24px}
+._e2oo7vkz span{width:1pc}
+._e2oodlk8 span{width:14px}
+._e2oogktf span{width:20px}
 ._kqswh2mm{position:relative}
-._vchhusvi{box-sizing:border-box}
+._mezj19bv img{width:10px}
+._mezj1crf img{width:9pt}
+._mezj1osq img{width:100%}
+._mezj1tcg img{width:24px}
+._mezj7vkz img{width:1pc}
+._mezjdlk8 img{width:14px}
+._mezjgktf img{width:20px}
+._vchhusvi{box-sizing:border-box}
+._w8l519bv svg{width:10px}
+._w8l51crf svg{width:9pt}
+._w8l51osq svg{width:100%}
+._w8l51tcg svg{width:24px}
+._w8l57vkz svg{width:1pc}
+._w8l5dlk8 svg{width:14px}
+._w8l5gktf svg{width:20px}

package/dist/esm/tile.js

@@ -1,4 +1,4 @@
-/* tile.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* tile.tsx generated by @compiled/babel-plugin v0.38.1 */
 import "./tile.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
@@ -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

@@ -27,13 +27,9 @@
 		"*.compiled.css"
 	],
 	"atlaskit:src": "src/index.tsx",
-	"af:exports": {
-		".": "./src/index.tsx"
-	},
 	"dependencies": {
-		"@atlaskit/css": "^0.14.0",
-		"@atlaskit/primitives": "^14.14.0",
-		"@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"
 	},
@@ -44,7 +40,7 @@
 		"@af/accessibility-testing": "workspace:^",
 		"@af/integration-testing": "workspace:^",
 		"@af/visual-regression": "workspace:^",
-		"@atlaskit/ds-lib": "^5.0.0",
+		"@atlaskit/ds-lib": "^5.1.0",
 		"@atlaskit/ssr": "workspace:^",
 		"@testing-library/react": "^13.4.0",
 		"react-dom": "^18.2.0"
@@ -87,7 +83,7 @@
 		}
 	},
 	"name": "@atlaskit/tile",
-	"version": "0.1.3",
+	"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"
+      ]
+    }
+  }
+}