@arc-ui/components 8.0.1 → 9.0.0

package/README.md

@@ -2,6 +2,4 @@
 
 [Arc UI System](https://ui.digital-ent-int.bt.com/latest/) React components.
 
-> ⚠️ EE variants are experimental and should not be used on production sites.
-
 See [Arc Documentation](https://ui.digital-ent-int.bt.com/latest/) for more information.

package/dist/index.es.js

@@ -343,13 +343,14 @@ var backgroundsShared = [
     "brand-flat",
     "dark",
     "darker",
+    "coral",
+    "turquoise",
     "light",
     "lighter",
     "white"
 ];
 __spreadArray([], backgroundsShared, true);
 __spreadArray([], backgroundsShared, true);
-__spreadArray([], backgroundsShared, true);
 
 /**
  * Use `BrandLogo` to display the brand logo.
@@ -700,7 +701,7 @@ var ButtonIcon = function (_a) {
  */
 var Image = function (_a) {
     var _b;
-    var alt = _a.alt, _c = _a.anchor, anchor = _c === void 0 ? "C" : _c, fillColor = _a.fillColor, fit = _a.fit, height = _a.height, overlay = _a.overlay, sizes = _a.sizes, src = _a.src, srcSet = _a.srcSet, width = _a.width, props = __rest(_a, ["alt", "anchor", "fillColor", "fit", "height", "overlay", "sizes", "src", "srcSet", "width"]);
+    var alt = _a.alt, _c = _a.anchor, anchor = _c === void 0 ? "C" : _c, fillColor = _a.fillColor, fit = _a.fit, height = _a.height, loading = _a.loading, overlay = _a.overlay, sizes = _a.sizes, src = _a.src, srcSet = _a.srcSet, width = _a.width, props = __rest(_a, ["alt", "anchor", "fillColor", "fit", "height", "loading", "overlay", "sizes", "src", "srcSet", "width"]);
     return (React.createElement("div", __assign({ className: classNames((_b = {
                 "arc-Image": true,
                 "arc-Image--cover": fit === "cover"
@@ -708,7 +709,7 @@ var Image = function (_a) {
             _b["arc-Image--anchor".concat(anchor)] = fit === "cover",
             _b[suffixModifier("arc-Image--overlay", overlay || "")] = overlay,
             _b)), style: __assign(__assign(__assign(__assign({}, (fillColor && { backgroundColor: fillColor })), (fit === "cover" && { backgroundImage: "url(".concat(src, ")") })), (height && { height: "".concat(height, "px") })), (width && { width: "".concat(width, "px") })) }, filterDataAttrs(props)),
-        React.createElement("img", { className: "arc-Image-img", alt: alt, height: height, sizes: sizes, src: src, srcSet: srcSet, width: width })));
+        React.createElement("img", { className: "arc-Image-img", alt: alt, height: height, loading: loading, sizes: sizes, src: src, srcSet: srcSet, width: width })));
 };
 
 /**
@@ -716,7 +717,7 @@ var Image = function (_a) {
  */
 var Heading = function (_a) {
     var _b;
-    var _c = _a.align, align = _c === void 0 ? "left" : _c, _d = _a.casing, casing = _d === void 0 ? "auto" : _d, children = _a.children, _e = _a.color, color = _e === void 0 ? "auto" : _e, level = _a.level, size = _a.size, _f = _a.typeface, typeface = _f === void 0 ? "default" : _f, props = __rest(_a, ["align", "casing", "children", "color", "level", "size", "typeface"]);
+    var _c = _a.align, align = _c === void 0 ? "left" : _c, _d = _a.casing, casing = _d === void 0 ? "auto" : _d, children = _a.children, _e = _a.color, color = _e === void 0 ? "auto" : _e, level = _a.level, size = _a.size, props = __rest(_a, ["align", "casing", "children", "color", "level", "size"]);
     var surface = useContext(Context$3).surface;
     var Element = "span";
     if (level) {
@@ -729,7 +730,6 @@ var Heading = function (_a) {
             _b["arc-Heading--size".concat(size && size.toUpperCase())] = size,
             _b["arc-Heading--casingNone"] = casing === "none",
             _b["arc-Heading--colorBrand"] = color === "brand",
-            _b["arc-Heading--typefaceEeBrand"] = typeface === "ee-brand",
             _b["arc-Heading--onDarkSurface"] = surface === "dark",
             _b)) }, filterDataAttrs(props)), children));
 };
@@ -860,14 +860,14 @@ var useNumericInput = function (props) {
  */
 var Card = function (_a) {
     var _b;
-    var actionId = _a.actionId, _c = _a.actionLabel, actionLabel = _c === void 0 ? "Read more" : _c, children = _a.children, _d = _a.fill, fill = _d === void 0 ? "solid" : _d, href = _a.href, imageAlt = _a.imageAlt, imageSrc = _a.imageSrc, imageSrcSet = _a.imageSrcSet, imageHeight = _a.imageHeight, linkData = _a.linkData, minHeight = _a.minHeight, target = _a.target, title = _a.title, _e = _a.titleSize, titleSize = _e === void 0 ? "s" : _e, props = __rest(_a, ["actionId", "actionLabel", "children", "fill", "href", "imageAlt", "imageSrc", "imageSrcSet", "imageHeight", "linkData", "minHeight", "target", "title", "titleSize"]);
+    var actionId = _a.actionId, _c = _a.actionLabel, actionLabel = _c === void 0 ? "Read more" : _c, children = _a.children, _d = _a.fill, fill = _d === void 0 ? "solid" : _d, href = _a.href, imageAlt = _a.imageAlt, imageHeight = _a.imageHeight, imageLoading = _a.imageLoading, imageSrc = _a.imageSrc, imageSrcSet = _a.imageSrcSet, linkData = _a.linkData, minHeight = _a.minHeight, target = _a.target, title = _a.title, _e = _a.titleSize, titleSize = _e === void 0 ? "s" : _e, props = __rest(_a, ["actionId", "actionLabel", "children", "fill", "href", "imageAlt", "imageHeight", "imageLoading", "imageSrc", "imageSrcSet", "linkData", "minHeight", "target", "title", "titleSize"]);
     var surface = useContext(Context$3).surface;
     var interactionMode = useInteractionMode().interactionMode;
     var Wrapper = function (_a) {
         var children = _a.children;
         return fill === "outlined" || fill === "neutral" ? (React.createElement("div", null, children)) : (React.createElement(Surface, { background: surface === "dark" ? "white" : "darker" }, children));
     };
-    var coverImage = imageSrc && (React.createElement(CardImage, { alt: imageAlt, src: imageSrc, srcSet: imageSrcSet, height: imageHeight }));
+    var coverImage = imageSrc && (React.createElement(CardImage, { alt: imageAlt, height: imageHeight, loading: imageLoading, src: imageSrc, srcSet: imageSrcSet }));
     return (React.createElement("div", __assign({ className: classNames((_b = {
                 "arc-Card": true,
                 "arc-Card--onDarkSurface": surface === "dark"
@@ -907,11 +907,11 @@ Card.Block = CardBlock;
  * Internal `Card.Image` component to show an image within a Card.
  */
 var CardImage = function (_a) {
-    var _b = _a.alt, alt = _b === void 0 ? "" : _b, _c = _a.height, height = _c === void 0 ? 176 : _c, sizes = _a.sizes, src = _a.src, srcSet = _a.srcSet;
+    var _b = _a.alt, alt = _b === void 0 ? "" : _b, _c = _a.height, height = _c === void 0 ? 176 : _c, loading = _a.loading, sizes = _a.sizes, src = _a.src, srcSet = _a.srcSet;
     return (React.createElement("div", { className: classNames({
             "arc-Card-image": true
         }) },
-        React.createElement(Image, { alt: alt, fit: "cover", sizes: sizes, src: src, srcSet: srcSet, height: height })));
+        React.createElement(Image, { alt: alt, fit: "cover", height: height, loading: loading, sizes: sizes, src: src, srcSet: srcSet })));
 };
 CardImage.displayName = "Card.Image";
 Card.Image = CardImage;
@@ -1212,8 +1212,8 @@ UniversalHeaderItem.displayName = "UniversalHeader.Item";
 UniversalHeader.Item = UniversalHeaderItem;
 
 var PosterImage = function (_a) {
-    var alt = _a.alt, _b = _a.anchor, anchor = _b === void 0 ? "C" : _b, sizes = _a.sizes, src = _a.src, srcSet = _a.srcSet, props = __rest(_a, ["alt", "anchor", "sizes", "src", "srcSet"]);
-    return (React.createElement(Image, __assign({ alt: alt, anchor: anchor, fit: "cover", sizes: sizes, src: src, srcSet: srcSet }, props)));
+    var alt = _a.alt, _b = _a.anchor, anchor = _b === void 0 ? "C" : _b, loading = _a.loading, sizes = _a.sizes, src = _a.src, srcSet = _a.srcSet, props = __rest(_a, ["alt", "anchor", "loading", "sizes", "src", "srcSet"]);
+    return (React.createElement(Image, __assign({ alt: alt, anchor: anchor, fit: "cover", loading: loading, sizes: sizes, src: src, srcSet: srcSet }, props)));
 };
 PosterImage.displayName = "Poster.Image";