@atlaskit/image 1.0.3 → 1.1.0

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/image
 
+## 1.1.0
+
+### Minor Changes
+
+- [`56507598609`](https://bitbucket.org/atlassian/atlassian-frontend/commits/56507598609) - Skip minor dependency bump
+
+### Patch Changes
+
+- Updated dependencies
+
+## 1.0.4
+
+### Patch Changes
+
+- [`718d5ad3044`](https://bitbucket.org/atlassian/atlassian-frontend/commits/718d5ad3044) - Updates to support the new `@atlaskit/tokens` theming API.
+- Updated dependencies
+
 ## 1.0.3
 
 ### Patch Changes

package/README.md

@@ -2,8 +2,14 @@
 
 An image component with additional features, such as support for themes.
 
+## Installation
+
+```sh
+yarn add @atlaskit/image
+```
+
 ## Usage
 
 `import Image from '@atlaskit/image';`
 
-Detailed docs and example usage can be found [here](https://atlaskit.atlassian.com/packages/design-system/image).
+[View documentation](https://atlassian.design/components/image/).

package/dist/cjs/index.js

@@ -1,7 +1,6 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -11,5 +10,4 @@ Object.defineProperty(exports, "default", {
     return _image.default;
   }
 });
-
 var _image = _interopRequireDefault(require("./ui/image"));

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

@@ -1,29 +1,22 @@
 "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 _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
 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"];
+/** @jsx jsx */
 var imageStyles = (0, _react2.css)({
   maxWidth: '100%',
   height: 'auto'
 });
+
 /**
  * __Image__
  *
@@ -33,49 +26,32 @@ var imageStyles = (0, _react2.css)({
  * - [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);
+    srcDark = _ref.srcDark,
+    alt = _ref.alt,
+    testId = _ref.testId,
+    props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var imgRef = (0, _react.useRef)(null);
-
-  var _useState = (0, _react.useState)(''),
-      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-      colorMode = _useState2[0],
-      setColorMode = _useState2[1];
-
-  var theme = (0, _tokens.useThemeObserver)();
+  var _useThemeObserver = (0, _tokens.useThemeObserver)(),
+    colorMode = _useThemeObserver.colorMode;
   (0, _react.useEffect)(function () {
     if (imgRef === null || imgRef.current === null) {
       return;
     }
-
-    if (srcDark && theme === 'dark') {
+    if (srcDark && colorMode === 'dark') {
       imgRef.current.src = srcDark;
     } else if (src) {
       imgRef.current.src = src;
     }
-  }, [src, srcDark, theme]);
-  /**
-   * TODO: Remove the following once useThemeObserver reports `color-mode`
-   */
-
-  (0, _react.useEffect)(function () {
-    setColorMode(document.documentElement.getAttribute('data-color-mode') || '');
-  }, [theme, setColorMode]);
-  return (0, _react2.jsx)("picture", null, srcDark && colorMode === 'auto' && (0, _react2.jsx)("source", {
-    srcSet: srcDark,
-    media: "(prefers-color-scheme: dark)"
-  }), (0, _react2.jsx)("img", (0, _extends2.default)({
+  }, [src, srcDark, colorMode]);
+  return (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.
+    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)));
+  }, props));
 }

package/dist/cjs/version.json

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

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

@@ -1,13 +1,13 @@
 import _extends from "@babel/runtime/helpers/extends";
-
 /** @jsx jsx */
-import { useEffect, useRef, useState } from 'react';
+import { useEffect, useRef } from 'react';
 import { css, jsx } from '@emotion/react';
 import { useThemeObserver } from '@atlaskit/tokens';
 const imageStyles = css({
   maxWidth: '100%',
   height: 'auto'
 });
+
 /**
  * __Image__
  *
@@ -17,7 +17,6 @@ const imageStyles = css({
  * - [Code](https://atlassian.design/components/image/code)
  * - [Usage](https://atlassian.design/components/image/usage)
  */
-
 export default function Image({
   src,
   srcDark,
@@ -26,36 +25,26 @@ export default function Image({
   ...props
 }) {
   const imgRef = useRef(null);
-  const [colorMode, setColorMode] = useState('');
-  const theme = useThemeObserver();
+  const {
+    colorMode
+  } = useThemeObserver();
   useEffect(() => {
     if (imgRef === null || imgRef.current === null) {
       return;
     }
-
-    if (srcDark && theme === 'dark') {
+    if (srcDark && colorMode === 'dark') {
       imgRef.current.src = srcDark;
     } else if (src) {
       imgRef.current.src = src;
     }
-  }, [src, srcDark, theme]);
-  /**
-   * TODO: Remove the following once useThemeObserver reports `color-mode`
-   */
-
-  useEffect(() => {
-    setColorMode(document.documentElement.getAttribute('data-color-mode') || '');
-  }, [theme, setColorMode]);
-  return jsx("picture", null, srcDark && colorMode === 'auto' && jsx("source", {
-    srcSet: srcDark,
-    media: "(prefers-color-scheme: dark)"
-  }), jsx("img", _extends({
+  }, [src, srcDark, colorMode]);
+  return 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.
+    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)));
+  }, props));
 }

package/dist/es2019/version.json

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

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

@@ -1,16 +1,15 @@
 import _extends from "@babel/runtime/helpers/extends";
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["src", "srcDark", "alt", "testId"];
-
 /** @jsx jsx */
-import { useEffect, useRef, useState } from 'react';
+import { useEffect, useRef } from 'react';
 import { css, jsx } from '@emotion/react';
 import { useThemeObserver } from '@atlaskit/tokens';
 var imageStyles = css({
   maxWidth: '100%',
   height: 'auto'
 });
+
 /**
  * __Image__
  *
@@ -20,50 +19,32 @@ var imageStyles = css({
  * - [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);
-
+    srcDark = _ref.srcDark,
+    alt = _ref.alt,
+    testId = _ref.testId,
+    props = _objectWithoutProperties(_ref, _excluded);
   var imgRef = useRef(null);
-
-  var _useState = useState(''),
-      _useState2 = _slicedToArray(_useState, 2),
-      colorMode = _useState2[0],
-      setColorMode = _useState2[1];
-
-  var theme = useThemeObserver();
+  var _useThemeObserver = useThemeObserver(),
+    colorMode = _useThemeObserver.colorMode;
   useEffect(function () {
     if (imgRef === null || imgRef.current === null) {
       return;
     }
-
-    if (srcDark && theme === 'dark') {
+    if (srcDark && colorMode === 'dark') {
       imgRef.current.src = srcDark;
     } else if (src) {
       imgRef.current.src = src;
     }
-  }, [src, srcDark, theme]);
-  /**
-   * TODO: Remove the following once useThemeObserver reports `color-mode`
-   */
-
-  useEffect(function () {
-    setColorMode(document.documentElement.getAttribute('data-color-mode') || '');
-  }, [theme, setColorMode]);
-  return jsx("picture", null, srcDark && colorMode === 'auto' && jsx("source", {
-    srcSet: srcDark,
-    media: "(prefers-color-scheme: dark)"
-  }), jsx("img", _extends({
+  }, [src, srcDark, colorMode]);
+  return 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.
+    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)));
+  }, props));
 }

package/dist/esm/version.json

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/image",
-  "version": "1.0.3",
+  "version": "1.1.0",
   "description": "An image that changes in light or dark themes.",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
@@ -31,7 +31,7 @@
     ".": "./src/index.tsx"
   },
   "dependencies": {
-    "@atlaskit/tokens": "^0.13.0",
+    "@atlaskit/tokens": "^1.3.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1"
   },
@@ -40,7 +40,7 @@
   },
   "devDependencies": {
     "@atlaskit/docs": "*",
-    "@atlaskit/ds-lib": "^2.1.1",
+    "@atlaskit/ds-lib": "^2.2.0",
     "@atlaskit/section-message": "*",
     "@atlaskit/ssr": "*",
     "@atlaskit/visual-regression": "*",
@@ -68,8 +68,11 @@
       "analytics": [
         "analytics-next"
       ],
+      "design-tokens": [
+        "color"
+      ],
       "theming": [
-        "tokens"
+        "react-context"
       ],
       "ui-components": [
         "lite-mode"

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

@@ -1,23 +0,0 @@
-## 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)
-
-```