@atlaskit/image 0.2.0

package/CHANGELOG.md

@@ -0,0 +1,11 @@
+# @atlaskit/image
+
+## 0.2.0
+
+### Minor Changes
+
+- [`8ab96dfc824`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8ab96dfc824) - Adds a new Image primitive that works like the native HTML img element, with the added functionality of being theme-aware.
+
+## 0.1.0
+
+- Create Image component with theme functionality.

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 @@
+# Image
+
+An image component with additional features, such as support for themes.
+
+## Usage
+
+`import Image from '@atlaskit/image';`
+
+Detailed docs and example usage can be found [here](https://atlaskit.atlassian.com/packages/design-system/image).

package/dist/cjs/index.js

@@ -0,0 +1,15 @@
+"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 _image.default;
+  }
+});
+
+var _image = _interopRequireDefault(require("./ui/image"));

package/dist/cjs/ui/image/index.js

@@ -0,0 +1,66 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = Image;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _react = require("react");
+
+var _react2 = require("@emotion/react");
+
+var _tokens = require("@atlaskit/tokens");
+
+var _excluded = ["src", "srcDark", "alt", "testId"];
+var imageStyles = (0, _react2.css)({
+  maxWidth: '100%',
+  height: 'auto'
+});
+/**
+ * __Image__
+ *
+ * This component can be used interchangeably with the native `img` element. It includes additional functionality, such as theme support.
+ *
+ * - [Examples](https://atlassian.design/components/image/examples)
+ * - [Code](https://atlassian.design/components/image/code)
+ * - [Usage](https://atlassian.design/components/image/usage)
+ */
+
+function Image(_ref) {
+  var src = _ref.src,
+      srcDark = _ref.srcDark,
+      alt = _ref.alt,
+      testId = _ref.testId,
+      props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var imgRef = (0, _react.useRef)(null);
+  var theme = (0, _tokens.useThemeObserver)();
+  (0, _react.useEffect)(function () {
+    if (imgRef === null || imgRef.current === null) {
+      return;
+    }
+
+    if (srcDark && theme === 'dark') {
+      imgRef.current.src = srcDark;
+    } else if (src) {
+      imgRef.current.src = src;
+    }
+  }, [src, srcDark, theme]);
+  return (0, _react2.jsx)("picture", null, srcDark && (0, _react2.jsx)("source", {
+    srcSet: srcDark,
+    media: "(prefers-color-scheme: dark)"
+  }), (0, _react2.jsx)("img", (0, _extends2.default)({
+    alt: alt,
+    css: imageStyles,
+    "data-testid": testId,
+    src: src,
+    ref: imgRef // The spread operator is necessary since the component can accept all the props of an `img` element.
+    // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+
+  }, props)));
+}

package/dist/cjs/version.json

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

package/dist/es2019/index.js

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

package/dist/es2019/ui/image/index.js

@@ -0,0 +1,53 @@
+import _extends from "@babel/runtime/helpers/extends";
+
+/** @jsx jsx */
+import { useEffect, useRef } from 'react';
+import { css, jsx } from '@emotion/react';
+import { useThemeObserver } from '@atlaskit/tokens';
+const imageStyles = css({
+  maxWidth: '100%',
+  height: 'auto'
+});
+/**
+ * __Image__
+ *
+ * This component can be used interchangeably with the native `img` element. It includes additional functionality, such as theme support.
+ *
+ * - [Examples](https://atlassian.design/components/image/examples)
+ * - [Code](https://atlassian.design/components/image/code)
+ * - [Usage](https://atlassian.design/components/image/usage)
+ */
+
+export default function Image({
+  src,
+  srcDark,
+  alt,
+  testId,
+  ...props
+}) {
+  const imgRef = useRef(null);
+  const theme = useThemeObserver();
+  useEffect(() => {
+    if (imgRef === null || imgRef.current === null) {
+      return;
+    }
+
+    if (srcDark && theme === 'dark') {
+      imgRef.current.src = srcDark;
+    } else if (src) {
+      imgRef.current.src = src;
+    }
+  }, [src, srcDark, theme]);
+  return jsx("picture", null, srcDark && jsx("source", {
+    srcSet: srcDark,
+    media: "(prefers-color-scheme: dark)"
+  }), jsx("img", _extends({
+    alt: alt,
+    css: imageStyles,
+    "data-testid": testId,
+    src: src,
+    ref: imgRef // The spread operator is necessary since the component can accept all the props of an `img` element.
+    // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+
+  }, props)));
+}

package/dist/es2019/version.json

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

package/dist/esm/index.js

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

package/dist/esm/ui/image/index.js

@@ -0,0 +1,55 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["src", "srcDark", "alt", "testId"];
+
+/** @jsx jsx */
+import { useEffect, useRef } from 'react';
+import { css, jsx } from '@emotion/react';
+import { useThemeObserver } from '@atlaskit/tokens';
+var imageStyles = css({
+  maxWidth: '100%',
+  height: 'auto'
+});
+/**
+ * __Image__
+ *
+ * This component can be used interchangeably with the native `img` element. It includes additional functionality, such as theme support.
+ *
+ * - [Examples](https://atlassian.design/components/image/examples)
+ * - [Code](https://atlassian.design/components/image/code)
+ * - [Usage](https://atlassian.design/components/image/usage)
+ */
+
+export default function Image(_ref) {
+  var src = _ref.src,
+      srcDark = _ref.srcDark,
+      alt = _ref.alt,
+      testId = _ref.testId,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  var imgRef = useRef(null);
+  var theme = useThemeObserver();
+  useEffect(function () {
+    if (imgRef === null || imgRef.current === null) {
+      return;
+    }
+
+    if (srcDark && theme === 'dark') {
+      imgRef.current.src = srcDark;
+    } else if (src) {
+      imgRef.current.src = src;
+    }
+  }, [src, srcDark, theme]);
+  return jsx("picture", null, srcDark && jsx("source", {
+    srcSet: srcDark,
+    media: "(prefers-color-scheme: dark)"
+  }), jsx("img", _extends({
+    alt: alt,
+    css: imageStyles,
+    "data-testid": testId,
+    src: src,
+    ref: imgRef // The spread operator is necessary since the component can accept all the props of an `img` element.
+    // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+
+  }, props)));
+}

package/dist/esm/version.json

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

package/dist/types/index.d.ts

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

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

@@ -0,0 +1,26 @@
+/// <reference types="react" />
+import { jsx } from '@emotion/react';
+interface ImageProps extends React.ImgHTMLAttributes<HTMLImageElement> {
+    /**
+     * Image URL to use for dark mode. This overrides `src` when the user
+     * has selected dark mode either in the app or on their operating system.
+     */
+    srcDark?: string;
+    /**
+     * 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;
+}
+/**
+ * __Image__
+ *
+ * This component can be used interchangeably with the native `img` element. It includes additional functionality, such as theme support.
+ *
+ * - [Examples](https://atlassian.design/components/image/examples)
+ * - [Code](https://atlassian.design/components/image/code)
+ * - [Usage](https://atlassian.design/components/image/usage)
+ */
+export default function Image({ src, srcDark, alt, testId, ...props }: ImageProps): jsx.JSX.Element;
+export {};

package/package.json

@@ -0,0 +1,84 @@
+{
+  "name": "@atlaskit/image",
+  "version": "0.2.0",
+  "description": "Image component with additional functionality.",
+  "author": "Atlassian Pty Ltd",
+  "license": "Apache-2.0",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
+  },
+  "homepage": "https://atlassian.design/components/image/",
+  "atlassian": {
+    "team": "Design System Team",
+    "inPublicMirror": true,
+    "releaseModel": "continuous",
+    "website": {
+      "name": "Image",
+      "category": "Components"
+    }
+  },
+  "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/tokens": "^0.11.2",
+    "@babel/runtime": "^7.0.0",
+    "@emotion/react": "^11.7.1"
+  },
+  "peerDependencies": {
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+  },
+  "devDependencies": {
+    "@atlaskit/docs": "*",
+    "@atlaskit/ds-lib": "^2.1.1",
+    "@atlaskit/section-message": "*",
+    "@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": {
+      "design-system": "v1",
+      "analytics": [
+        "analytics-next"
+      ],
+      "theming": [
+        "tokens"
+      ],
+      "ui-components": [
+        "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,40 @@
+<!-- API Report Version: 2.3 -->
+
+## API Report File for "@atlaskit/image"
+
+> 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)
+
+### Main Entry Types
+
+<!--SECTION START: Main Entry Types-->
+
+```ts
+/// <reference types="react" />
+
+import { jsx } from '@emotion/react';
+
+// @public
+function Image_2({
+  src,
+  srcDark,
+  alt,
+  testId,
+  ...props
+}: ImageProps): jsx.JSX.Element;
+export default Image_2;
+
+// @public (undocumented)
+interface ImageProps extends React.ImgHTMLAttributes<HTMLImageElement> {
+  srcDark?: string;
+  testId?: string;
+}
+
+// (No @packageDocumentation comment for this package)
+```
+
+<!--SECTION END: Main Entry Types-->

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

@@ -0,0 +1,23 @@
+## API Report File for "@atlaskit/image"
+
+> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
+
+```ts
+
+/// <reference types="react" />
+
+import { jsx } from '@emotion/react';
+
+// @public
+function Image_2({ src, srcDark, alt, testId, ...props }: ImageProps): jsx.JSX.Element;
+export default Image_2;
+
+// @public (undocumented)
+interface ImageProps extends React.ImgHTMLAttributes<HTMLImageElement> {
+    srcDark?: string;
+    testId?: string;
+}
+
+// (No @packageDocumentation comment for this package)
+
+```