@arc-ui/components 9.2.0 → 10.0.0

package/dist/types/components/Image/Image.d.ts

@@ -1,9 +1,39 @@
-import { FC, HTMLAttributes } from "react";
+import { FC, HTMLAttributes, ReactNode } from "react";
 import { anchorPoints } from "../../helpers";
 /**
- * Use `Image` to render a single image, or set of images, with support for image fitting.
+ * Use `Image` to render a single image, or set of images, with support for
+ * image fitting and art direction.
  */
-declare const Image: FC<ImageProps>;
+declare const Image: FC<ImageProps> & {
+    Source: typeof ImageSource;
+};
+export declare const ImageSource: FC<ImageSourceProps>;
+export interface ImageSourceProps {
+    /**
+     * The intrinsic height of the ImageSource, in pixels
+     */
+    height?: number;
+    /**
+     * Media condition (similar to a media query) that the user agent will evaluate for each ImageSource element. Same format as [media](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/source#attr-media), i.e. `(min-width: 600px)`
+     */
+    media?: string;
+    /**
+     * The HTML [sizes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/source#attr-sizes) attribute. Only required if srcSet is switching widths.
+     */
+    sizes?: string;
+    /**
+     * A comma-separated list indicating a set of possible sources for the user agent to use for different screen sizes for the ImageSource element. Same format as [srcSet](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/source#attr-srcset), i.e. `my-image-200.png 200w, my-image-200.png 200w`.
+     */
+    srcSet: string;
+    /**
+     * MIME type for the resource URL(s) in the ImageSource element's srcset attribute. If the user agent does not support the given type, the element is skipped. Same format as [type](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/source#attr-type), i.e. `image/jpeg`.
+     */
+    type?: string;
+    /**
+     * The intrinsic width of the ImageSource, in pixels
+     */
+    width?: number;
+}
 export declare const fitOptions: readonly ["cover"];
 export declare const loadingOptions: readonly ["eager", "lazy"];
 export declare const overlayOptions: readonly ["scrimBottomDark"];
@@ -16,6 +46,11 @@ export interface ImageProps extends HTMLAttributes<HTMLElement> {
      * Anchor point for the Image if using fit="cover".
      */
     anchor?: typeof anchorPoints[number];
+    /**
+     * Optionally enable HTML <picture> functionality by passing `Image.Source`
+     * components as children.
+     */
+    children?: ReactNode;
     /**
      * Fallback hexadecimal fill color. The intent is to increase perceived loading speed. Do not use on images with transparency. Requires that an explicit width and height be set for the image.
      */
@@ -25,7 +60,8 @@ export interface ImageProps extends HTMLAttributes<HTMLElement> {
      */
     fit?: typeof fitOptions[number];
     /**
-     * Height of the Image, in pixels
+     * Height dimension of the Image, in pixels. If fit="cover", the height in which
+     * to fit the Image. Otherwise, the intrinsic height of the Image element.
      */
     height?: number;
     /**
@@ -38,7 +74,7 @@ export interface ImageProps extends HTMLAttributes<HTMLElement> {
      */
     overlay?: typeof overlayOptions[number];
     /**
-     * The HTML [sizes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#Example_4_Using_the_srcset_and_sizes_attributes) attribute. Required if srcSet is defined.
+     * The HTML [sizes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#Example_4_Using_the_srcset_and_sizes_attributes) attribute. Only required if srcSet is switching widths. Ignored if `children` (<source> elements) are present.
      */
     sizes?: string;
     /**
@@ -46,11 +82,12 @@ export interface ImageProps extends HTMLAttributes<HTMLElement> {
      */
     src: string;
     /**
-     * A comma-separated list indicating a set of possible sources for the user agent to use for different screen sizes for the Image. Same format as [srcSet](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#Example_4_Using_the_srcset_and_sizes_attributes), i.e. `my-image-200.png 200w, my-image-200.png 200w`.
+     * A comma-separated list indicating a set of possible sources for the user agent to use for different screen sizes for the Image. Same format as [srcSet](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#Example_4_Using_the_srcset_and_sizes_attributes), i.e. `my-image-200.png 200w, my-image-200.png 200w`. Ignored if `children` (<source> elements) are present.
      */
     srcSet?: string;
     /**
-     * Width of the Image, in pixels
+     * Width dimension of the Image, in pixels. If fit="cover", the width in which
+     * to fit the Image. Otherwise, the intrinsic width of the Image element.
      */
     width?: number;
 }

package/dist/types/styles.d.ts

@@ -38,7 +38,6 @@ import "./components/FormControl/FormControl.bt.css";
 import "./components/Group/Group.bt.css";
 import "./components/Heading/Heading.bt.css";
 import "./components/Icon/Icon.bt.css";
-import "./components/Image/Image.bt.css";
 import "./components/Markup/Markup.bt.css";
 import "./components/Poster/Poster.bt.css";
 import "./components/RadioGroup/RadioGroup.bt.css";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arc-ui/components",
-  "version": "9.2.0",
+  "version": "10.0.0",
   "homepage": "https://ui.digital-ent-int.bt.com",
   "author": "BT Enterprise Digital UI Team <ui-digital-ent-int@bt.com>",
   "main": "dist/index.js",
@@ -25,8 +25,8 @@
     "react": "^17.0.0"
   },
   "devDependencies": {
-    "@arc-ui/fonts": "^9.2.0",
-    "@arc-ui/tokens": "^9.2.0",
+    "@arc-ui/fonts": "^10.0.0",
+    "@arc-ui/tokens": "^10.0.0",
     "@babel/core": "^7.14.3",
     "@babel/helper-define-map": "^7.14.3",
     "@storybook/addon-essentials": "^6.3.6",
@@ -44,9 +44,9 @@
     "classnames": "^2.2.6",
     "formik": "^2.2.9",
     "prop-types": "^15.7.2",
-    "react": "^17.0.0",
-    "react-dom": "^17.0.0",
-    "react-is": "^17.0.0",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "react-is": "^18.0.0",
     "tslib": "^2.0.1",
     "typescript": "^4.0.2",
     "yup": "^0.32.11"