@atlaskit/skeleton 0.1.0

package/CHANGELOG.md

@@ -0,0 +1,7 @@
+# @atlaskit/skeleton
+
+## 0.1.0
+
+### Minor Changes
+
+- [`bc3550c9773`](https://bitbucket.org/atlassian/atlassian-frontend/commits/bc3550c9773) - Added new Skeleton component for displaying a placeholder whilst loading.

package/LICENSE.md

@@ -0,0 +1,13 @@
+Copyright 2022 Atlassian Pty Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.

package/README.md

@@ -0,0 +1,9 @@
+# Skeleton
+
+A skeleton acts as a placeholder for content, usually while the content loads.
+
+## Usage
+
+`import Skeleton from '@atlaskit/skeleton';`
+
+Detailed docs and example usage can be found [here](https://atlaskit.atlassian.com/packages/design-system/skeleton).

package/dist/cjs/index.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 _ui.default;
+  }
+});
+var _ui = _interopRequireDefault(require("./ui"));

package/dist/cjs/ui/index.js

@@ -0,0 +1,54 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = require("@emotion/react");
+var _constants = require("@atlaskit/theme/constants");
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var shimmer = (0, _constants.skeletonShimmer)();
+var shimmerKeyframes = (0, _react.keyframes)(shimmer.keyframes);
+var skeletonStyles = (0, _react.css)(_objectSpread({}, shimmer.css));
+var activeShimmerStyles = (0, _react.css)({
+  animationName: "".concat(shimmerKeyframes)
+});
+
+/**
+ * __Skeleton__
+ *
+ * A skeleton acts as a placeholder for content, usually while the content loads.
+ *
+ * - [Examples](https://atlassian.design/components/skeleton/examples)
+ * - [Code](https://atlassian.design/components/skeleton/code)
+ */
+var Skeleton = function Skeleton(_ref) {
+  var width = _ref.width,
+    height = _ref.height,
+    _ref$borderRadius = _ref.borderRadius,
+    borderRadius = _ref$borderRadius === void 0 ? '100px' : _ref$borderRadius,
+    _ref$isShimmering = _ref.isShimmering,
+    isShimmering = _ref$isShimmering === void 0 ? false : _ref$isShimmering,
+    groupName = _ref.groupName,
+    testId = _ref.testId;
+  var groupDataAttribute = groupName && "data-".concat(groupName);
+  return (
+    // eslint-disable-next-line @repo/internal/react/use-primitives
+    (0, _react.jsx)("div", (0, _extends2.default)({
+      "data-testid": testId,
+      css: [skeletonStyles, isShimmering && activeShimmerStyles,
+      // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+      {
+        width: width,
+        height: height,
+        borderRadius: borderRadius
+      }]
+    }, groupDataAttribute && (0, _defineProperty2.default)({}, groupDataAttribute, 'true')))
+  );
+};
+var _default = Skeleton;
+exports.default = _default;

package/dist/cjs/version.json

@@ -0,0 +1,5 @@
+{
+	"name": "@atlaskit/skeleton",
+	"version": "0.1.0",
+	"sideEffects": false
+}

package/dist/es2019/index.js

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

package/dist/es2019/ui/index.js

@@ -0,0 +1,48 @@
+import _extends from "@babel/runtime/helpers/extends";
+/** @jsx jsx */
+import { css, jsx, keyframes } from '@emotion/react';
+import { skeletonShimmer } from '@atlaskit/theme/constants';
+const shimmer = skeletonShimmer();
+const shimmerKeyframes = keyframes(shimmer.keyframes);
+const skeletonStyles = css({
+  // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+  ...shimmer.css
+});
+const activeShimmerStyles = css({
+  animationName: `${shimmerKeyframes}`
+});
+
+/**
+ * __Skeleton__
+ *
+ * A skeleton acts as a placeholder for content, usually while the content loads.
+ *
+ * - [Examples](https://atlassian.design/components/skeleton/examples)
+ * - [Code](https://atlassian.design/components/skeleton/code)
+ */
+const Skeleton = ({
+  width,
+  height,
+  borderRadius = '100px',
+  isShimmering = false,
+  groupName,
+  testId
+}) => {
+  const groupDataAttribute = groupName && `data-${groupName}`;
+  return (
+    // eslint-disable-next-line @repo/internal/react/use-primitives
+    jsx("div", _extends({
+      "data-testid": testId,
+      css: [skeletonStyles, isShimmering && activeShimmerStyles,
+      // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+      {
+        width,
+        height,
+        borderRadius
+      }]
+    }, groupDataAttribute && {
+      [groupDataAttribute]: 'true'
+    }))
+  );
+};
+export default Skeleton;

package/dist/es2019/version.json

@@ -0,0 +1,5 @@
+{
+	"name": "@atlaskit/skeleton",
+	"version": "0.1.0",
+	"sideEffects": false
+}

package/dist/esm/index.js

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

package/dist/esm/ui/index.js

@@ -0,0 +1,47 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+/** @jsx jsx */
+import { css, jsx, keyframes } from '@emotion/react';
+import { skeletonShimmer } from '@atlaskit/theme/constants';
+var shimmer = skeletonShimmer();
+var shimmerKeyframes = keyframes(shimmer.keyframes);
+var skeletonStyles = css(_objectSpread({}, shimmer.css));
+var activeShimmerStyles = css({
+  animationName: "".concat(shimmerKeyframes)
+});
+
+/**
+ * __Skeleton__
+ *
+ * A skeleton acts as a placeholder for content, usually while the content loads.
+ *
+ * - [Examples](https://atlassian.design/components/skeleton/examples)
+ * - [Code](https://atlassian.design/components/skeleton/code)
+ */
+var Skeleton = function Skeleton(_ref) {
+  var width = _ref.width,
+    height = _ref.height,
+    _ref$borderRadius = _ref.borderRadius,
+    borderRadius = _ref$borderRadius === void 0 ? '100px' : _ref$borderRadius,
+    _ref$isShimmering = _ref.isShimmering,
+    isShimmering = _ref$isShimmering === void 0 ? false : _ref$isShimmering,
+    groupName = _ref.groupName,
+    testId = _ref.testId;
+  var groupDataAttribute = groupName && "data-".concat(groupName);
+  return (
+    // eslint-disable-next-line @repo/internal/react/use-primitives
+    jsx("div", _extends({
+      "data-testid": testId,
+      css: [skeletonStyles, isShimmering && activeShimmerStyles,
+      // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+      {
+        width: width,
+        height: height,
+        borderRadius: borderRadius
+      }]
+    }, groupDataAttribute && _defineProperty({}, groupDataAttribute, 'true')))
+  );
+};
+export default Skeleton;

package/dist/esm/version.json

@@ -0,0 +1,5 @@
+{
+	"name": "@atlaskit/skeleton",
+	"version": "0.1.0",
+	"sideEffects": false
+}

package/dist/types/index.d.ts

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

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

@@ -0,0 +1,32 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+declare type SkeletonProps = {
+    width: string | number;
+    height: string | number;
+    /**
+     * Defaults to 100px to allow for any reasonable size skeleton having rounded corners.
+     */
+    borderRadius?: string | number;
+    /**
+     * Enables the shimmering animation.
+     */
+    isShimmering?: boolean;
+    /**
+     * Applied as a data-attribute. Use this to target groups of skeletons with the same name (e.g. for applying custom styles)
+     * ```
+     * groupName="my-skeleton" -> <div data-my-skeleton>
+     * ```
+     */
+    groupName?: string;
+    testId?: string;
+};
+/**
+ * __Skeleton__
+ *
+ * A skeleton acts as a placeholder for content, usually while the content loads.
+ *
+ * - [Examples](https://atlassian.design/components/skeleton/examples)
+ * - [Code](https://atlassian.design/components/skeleton/code)
+ */
+declare const Skeleton: ({ width, height, borderRadius, isShimmering, groupName, testId, }: SkeletonProps) => jsx.JSX.Element;
+export default Skeleton;

package/package.json

@@ -0,0 +1,89 @@
+{
+  "name": "@atlaskit/skeleton",
+  "version": "0.1.0",
+  "description": "A skeleton acts as a placeholder for content, usually while the content loads.",
+  "author": "Atlassian Pty Ltd",
+  "license": "Apache-2.0",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
+  },
+  "homepage": "https://atlassian.design/components/skeleton",
+  "atlassian": {
+    "team": "Design System Team",
+    "inPublicMirror": false,
+    "releaseModel": "continuous",
+    "website": {
+      "name": "Skeleton",
+      "category": "Components",
+      "status": {
+        "type": "alpha"
+      }
+    }
+  },
+  "repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
+  "main": "dist/cjs/index.js",
+  "module": "dist/esm/index.js",
+  "module:es2019": "dist/es2019/index.js",
+  "types": "dist/types/index.d.ts",
+  "sideEffects": false,
+  "atlaskit:src": "src/index.tsx",
+  "af:exports": {
+    ".": "./src/index.tsx"
+  },
+  "dependencies": {
+    "@atlaskit/theme": "^12.2.0",
+    "@babel/runtime": "^7.0.0",
+    "@emotion/react": "^11.7.1"
+  },
+  "peerDependencies": {
+    "react": "^16.8.0"
+  },
+  "devDependencies": {
+    "@atlaskit/docs": "*",
+    "@atlaskit/ds-explorations": "^2.0.5",
+    "@atlaskit/primitives": "^0.2.1",
+    "@atlaskit/ssr": "*",
+    "@atlaskit/visual-regression": "*",
+    "@atlaskit/webdriver-runner": "*",
+    "@atlassian/atlassian-frontend-prettier-config-1.0.0": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.0",
+    "@testing-library/react": "^12.1.5",
+    "react-dom": "^16.8.0",
+    "typescript": "4.5.5",
+    "wait-for-expect": "^1.2.0"
+  },
+  "techstack": {
+    "@atlassian/frontend": {
+      "code-structure": [
+        "tangerine-next"
+      ],
+      "import-structure": [
+        "atlassian-conventions"
+      ],
+      "circular-dependencies": [
+        "file-and-folder-level"
+      ]
+    },
+    "@repo/internal": {
+      "dom-events": "use-bind-event-listener",
+      "analytics": [
+        "analytics-next"
+      ],
+      "theming": [
+        "react-context",
+        "tokens"
+      ],
+      "ui-components": [
+        "primitives",
+        "lite-mode"
+      ],
+      "deprecation": [
+        "no-deprecated-imports"
+      ],
+      "styling": [
+        "static",
+        "emotion"
+      ]
+    }
+  },
+  "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.0"
+}

package/report.api.md

@@ -0,0 +1,56 @@
+<!-- API Report Version: 2.3 -->
+
+## API Report File for "@atlaskit/skeleton"
+
+> Do not edit this file. This report is auto-generated using [API Extractor](https://api-extractor.com/).
+> [Learn more about API reports](https://hello.atlassian.net/wiki/spaces/UR/pages/1825484529/Package+API+Reports)
+
+### Table of contents
+
+- [Main Entry Types](#main-entry-types)
+- [Peer Dependencies](#peer-dependencies)
+
+### Main Entry Types
+
+<!--SECTION START: Main Entry Types-->
+
+```ts
+import { jsx } from '@emotion/react';
+
+// @public
+const Skeleton: ({
+  width,
+  height,
+  borderRadius,
+  isShimmering,
+  groupName,
+  testId,
+}: SkeletonProps) => jsx.JSX.Element;
+export default Skeleton;
+
+// @public (undocumented)
+type SkeletonProps = {
+  width: number | string;
+  height: number | string;
+  borderRadius?: number | string;
+  isShimmering?: boolean;
+  groupName?: string;
+  testId?: string;
+};
+
+// (No @packageDocumentation comment for this package)
+```
+
+<!--SECTION END: Main Entry Types-->
+
+### Peer Dependencies
+
+<!--SECTION START: Peer Dependencies-->
+
+```json
+{
+  "react": "^16.8.0"
+}
+```
+
+<!--SECTION END: Peer Dependencies-->

package/tmp/api-report-tmp.d.ts

@@ -0,0 +1,25 @@
+## API Report File for "@atlaskit/skeleton"
+
+> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
+
+```ts
+
+import { jsx } from '@emotion/react';
+
+// @public
+const Skeleton: ({ width, height, borderRadius, isShimmering, groupName, testId, }: SkeletonProps) => jsx.JSX.Element;
+export default Skeleton;
+
+// @public (undocumented)
+type SkeletonProps = {
+    width: number | string;
+    height: number | string;
+    borderRadius?: number | string;
+    isShimmering?: boolean;
+    groupName?: string;
+    testId?: string;
+};
+
+// (No @packageDocumentation comment for this package)
+
+```