@arc-ui/components 11.13.1 → 11.15.0

package/dist/index.js

@@ -653,7 +653,6 @@ var Base = function (_a) {
         React__default["default"].createElement(ArcRootElementContext.Provider, { value: arcRoot }, children)));
 };
 
-// Do equal height boxes story
 /**
  * Use `Box` as a simple way to group bespoke content and interactive elements together.
  */
@@ -2100,6 +2099,164 @@ var GroupItem = function (_a) {
 };
 Group.Item = GroupItem;
 
+/**
+ * Do not edit directly
+ * Generated file
+ */
+var ArcBreakpointS = 636;
+var ArcBreakpointM = 768;
+var ArcBreakpointL = 1024;
+
+const BtIconArrowRight = (props) =>
+  /*#__PURE__*/ React__default["default"].createElement(
+    "svg",
+    Object.assign(
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: "0 0 32 32",
+      },
+      props,
+    ),
+    /*#__PURE__*/ React__default["default"].createElement("defs", null),
+    /*#__PURE__*/ React__default["default"].createElement("path", {
+      d: "M16,2A14,14,0,1,0,30,16,14,14,0,0,0,16,2Zm0,27A13,13,0,1,1,29,16,13.01474,13.01474,0,0,1,16,29Z",
+      fill: "currentColor",
+    }),
+    /*#__PURE__*/ React__default["default"].createElement("path", {
+      d: "M18.14648,11.64648a.49983.49983,0,0,0,0,.707L21.293,15.5H9.5a.5.5,0,0,0,0,1H21.293l-3.14649,3.14648a.5.5,0,1,0,.707.707L23.207,16l-4.35351-4.35352A.49983.49983,0,0,0,18.14648,11.64648Z",
+      fill: "currentColor",
+    }),
+  );
+
+const BtIconCross = (props) =>
+  /*#__PURE__*/ React__default["default"].createElement(
+    "svg",
+    Object.assign(
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: "0 0 32 32",
+      },
+      props,
+    ),
+    /*#__PURE__*/ React__default["default"].createElement("defs", null),
+    /*#__PURE__*/ React__default["default"].createElement("path", {
+      d: "M16,2A14,14,0,1,0,30,16,14,14,0,0,0,16,2Zm0,27A13,13,0,1,1,29,16,13.01474,13.01474,0,0,1,16,29Z",
+      fill: "currentColor",
+    }),
+    /*#__PURE__*/ React__default["default"].createElement("path", {
+      d: "M20.85352,11.14648a.49983.49983,0,0,0-.707,0L16,15.293l-4.14648-4.14649a.5.5,0,0,0-.707.707L15.293,16l-4.14649,4.14648a.5.5,0,1,0,.707.707L16,16.707l4.14648,4.14649a.5.5,0,0,0,.707-.707L16.707,16l4.14649-4.14648A.49983.49983,0,0,0,20.85352,11.14648Z",
+      fill: "currentColor",
+    }),
+  );
+
+const BtIconCrossFill = (props) =>
+  /*#__PURE__*/ React__default["default"].createElement(
+    "svg",
+    Object.assign(
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: "0 0 32 32",
+      },
+      props,
+    ),
+    /*#__PURE__*/ React__default["default"].createElement("defs", null),
+    /*#__PURE__*/ React__default["default"].createElement("path", {
+      d: "M16,2A14,14,0,1,0,30,16,14,14,0,0,0,16,2Zm4.85352,18.14648a.5.5,0,1,1-.707.707L16,16.707l-4.14648,4.14649a.5.5,0,0,1-.707-.707L15.293,16l-4.14649-4.14648a.5.5,0,0,1,.707-.707L16,15.293l4.14648-4.14649a.5.5,0,0,1,.707.707L16.707,16Z",
+      fill: "currentColor",
+    }),
+  );
+
+/**
+ * use `Tag` to promote features and manage filtering.
+ */
+var Tag = function (_a) {
+    var children = _a.children, isRemovable = _a.isRemovable, link = _a.link, icon = _a.icon, onClick = _a.onClick, onRemove = _a.onRemove, props = __rest(_a, ["children", "isRemovable", "link", "icon", "onClick", "onRemove"]);
+    var surface = React.useContext(Context$3).surface;
+    var _b = React.useState(false), isRemoved = _b[0], setIsRemoved = _b[1];
+    var onRemoveHandler = function () {
+        setIsRemoved(function (p) { return !p; });
+        onRemove && onRemove();
+    };
+    return (React__default["default"].createElement("div", __assign({ className: classNames("arc-Tag", {
+            "arc-Tag--onDarkSurface": surface === "dark",
+            "arc-Tag--isRemovable": isRemovable,
+            "arc-Tag--hasIcon": icon,
+            "arc-Tag--hasLink": link || onClick,
+            "arc-Tag--removed": isRemoved
+        }) }, (isRemoved && { "aria-hidden": true }), filterDataAttrs(props)),
+        link ? (React__default["default"].createElement("a", { className: "arc-Tag-content", href: link, tabIndex: 0 },
+            icon && (React__default["default"].createElement("span", { className: "arc-Tag-icon" },
+                React__default["default"].createElement(Icon, { "data-testid": "arc-Tag-icon", icon: icon, size: 16 }))),
+            React__default["default"].createElement("div", { className: "arc-Tag-label" }, children))) : (React__default["default"].createElement(React__default["default"].Fragment, null, onClick ? (React__default["default"].createElement("button", { className: "arc-Tag-content", onClick: onClick, "data-testid": "arc-Tag-content" },
+            icon && (React__default["default"].createElement("span", { className: "arc-Tag-icon" },
+                React__default["default"].createElement(Icon, { "data-testid": "arc-Tag-icon", icon: icon, size: 16 }))),
+            React__default["default"].createElement("div", { className: "arc-Tag-label" }, children))) : (React__default["default"].createElement("div", { className: "arc-Tag-content", "data-testid": "arc-Tag-content" },
+            icon && (React__default["default"].createElement("span", { className: "arc-Tag-icon" },
+                React__default["default"].createElement(Icon, { "data-testid": "arc-Tag-icon", icon: icon, size: 16 }))),
+            React__default["default"].createElement("div", { className: "arc-Tag-label" }, children))))),
+        isRemovable && (React__default["default"].createElement("button", { className: "arc-Tag-icon arc-Tag-icon--removable", onClick: onRemoveHandler, "data-testid": "arc-Tag-icon-removable", "aria-live": "polite", "aria-roledescription": "remove tag" },
+            React__default["default"].createElement(Icon, { icon: BtIconCross, color: "brand", size: 20 }),
+            React__default["default"].createElement(Icon, { icon: BtIconCrossFill, color: "brand", size: 20 })))));
+};
+
+/**
+ * Use `VerticalSpace` to create vertical space between components.
+ */
+var VerticalSpace = function (_a) {
+    var _b;
+    var _c = _a.isDebugVisible, isDebugVisible = _c === void 0 ? false : _c, _d = _a.size, size = _d === void 0 ? "24" : _d, sizeS = _a.sizeS, sizeM = _a.sizeM, sizeL = _a.sizeL, sizeXL = _a.sizeXL, props = __rest(_a, ["isDebugVisible", "size", "sizeS", "sizeM", "sizeL", "sizeXL"]);
+    return (React__default["default"].createElement("div", __assign({ className: classNames((_b = {
+                "arc-VerticalSpace": true
+            },
+            _b["arc-VerticalSpace--size".concat(size)] = size,
+            _b["arc-VerticalSpace--sizeS".concat(sizeS)] = sizeS && sizeS,
+            _b["arc-VerticalSpace--sizeM".concat(sizeM)] = sizeM && sizeM,
+            _b["arc-VerticalSpace--sizeL".concat(sizeL)] = sizeL && sizeL,
+            _b["arc-VerticalSpace--sizeXL".concat(sizeXL)] = sizeXL && sizeXL,
+            _b["arc-VerticalSpace--debugVisible"] = isDebugVisible,
+            _b)) }, filterDataAttrs(props))));
+};
+
+var InformationCard = function (_a) {
+    var cardUrl = _a.cardUrl, onClick = _a.onClick, heading = _a.heading, text = _a.text, label = _a.label, footerLogo = _a.footerLogo, button = _a.button, image = _a.image, tags = _a.tags, icon = _a.icon, _b = _a.headingLevel, headingLevel = _b === void 0 ? "2" : _b, props = __rest(_a, ["cardUrl", "onClick", "heading", "text", "label", "footerLogo", "button", "image", "tags", "icon", "headingLevel"]);
+    var isMinWidthArcBreakpointS = useMediaQuery("(min-width: ".concat(ArcBreakpointS, "px)"));
+    var isMinWidthArcBreakpointM = useMediaQuery("(min-width: ".concat(ArcBreakpointM, "px)"));
+    var headingSpacing = isMinWidthArcBreakpointS ? "16" : "8";
+    var assetSpacing = isMinWidthArcBreakpointM ? "24" : "20";
+    var containerSpacing = isMinWidthArcBreakpointS ? "32" : "24";
+    var HeadingElement = "h".concat(headingLevel);
+    return (React__default["default"].createElement("div", __assign({ className: classNames("arc-InformationCard", {
+            "arc-InformationCard--interactive": cardUrl
+        }) }, filterDataAttrs(props)),
+        React__default["default"].createElement(Surface, { growVertically: true, padding: containerSpacing, background: "white" },
+            image && (React__default["default"].createElement("div", { className: "arc-InformationCard-img" },
+                React__default["default"].createElement(Image, __assign({}, image)),
+                React__default["default"].createElement(VerticalSpace, { size: assetSpacing }))),
+            icon && (React__default["default"].createElement(React__default["default"].Fragment, null,
+                React__default["default"].createElement(Icon, { testId: "information-card-icon", icon: icon, size: 96 }),
+                React__default["default"].createElement(VerticalSpace, { size: assetSpacing }))),
+            label && (React__default["default"].createElement(React__default["default"].Fragment, null,
+                React__default["default"].createElement("span", { className: "arc-InformationCard-label" }, label),
+                React__default["default"].createElement(VerticalSpace, { size: headingSpacing }))),
+            React__default["default"].createElement(HeadingElement, { className: "arc-InformationCard-heading" }, cardUrl ? (React__default["default"].createElement("a", { className: "arc-InformationCard-headingLink", href: cardUrl, onClick: onClick }, heading)) : (heading)),
+            React__default["default"].createElement("div", { className: "arc-InformationCard-textContainer" }, text && (React__default["default"].createElement(React__default["default"].Fragment, null,
+                React__default["default"].createElement(VerticalSpace, { size: headingSpacing }),
+                React__default["default"].createElement(Text, null, text),
+                (button || tags || footerLogo) && React__default["default"].createElement(VerticalSpace, { size: "24" })))),
+            tags && (React__default["default"].createElement(React__default["default"].Fragment, null,
+                React__default["default"].createElement("div", { className: "arc-InformationCard-tagContainer" }, tags.map(function (_a, i) {
+                    var text = _a.text, tagProps = __rest(_a, ["text"]);
+                    return (React__default["default"].createElement("div", { className: "arc-InformationCard-tag", key: "information-card-tag-".concat(i) },
+                        React__default["default"].createElement(Tag, __assign({}, tagProps), text)));
+                })),
+                (button || footerLogo) && React__default["default"].createElement(VerticalSpace, { size: "24" }))),
+            React__default["default"].createElement("div", { className: "arc-InformationCard-footer" },
+                button && !cardUrl && (React__default["default"].createElement("div", { className: "arc-InformationCard-footerButtonContainer" },
+                    React__default["default"].createElement(Button, __assign({}, button, { iconPosition: "beforeText", fill: "flat", icon: BtIconArrowRight })))),
+                footerLogo && (React__default["default"].createElement("div", { className: "arc-InformationCard-footerLogoContainer" },
+                    React__default["default"].createElement(Image, __assign({}, footerLogo))))))));
+};
+
 /**
  * Use `Markup` to display HTML-formatted text.
  */
@@ -35051,24 +35208,6 @@ const $5d3850c4d0b4e6c7$export$7c6e2c02157bb7d2 = $5d3850c4d0b4e6c7$export$b6d95
 const $5d3850c4d0b4e6c7$export$f99233281efd08a0 = $5d3850c4d0b4e6c7$export$16f7638e4a34b909;
 const $5d3850c4d0b4e6c7$export$393edc798c47379d = $5d3850c4d0b4e6c7$export$94e94c2ec2c954d5;
 
-/**
- * Use `VerticalSpace` to create vertical space between components.
- */
-var VerticalSpace = function (_a) {
-    var _b;
-    var _c = _a.isDebugVisible, isDebugVisible = _c === void 0 ? false : _c, _d = _a.size, size = _d === void 0 ? "24" : _d, sizeS = _a.sizeS, sizeM = _a.sizeM, sizeL = _a.sizeL, sizeXL = _a.sizeXL, props = __rest(_a, ["isDebugVisible", "size", "sizeS", "sizeM", "sizeL", "sizeXL"]);
-    return (React__default["default"].createElement("div", __assign({ className: classNames((_b = {
-                "arc-VerticalSpace": true
-            },
-            _b["arc-VerticalSpace--size".concat(size)] = size,
-            _b["arc-VerticalSpace--sizeS".concat(sizeS)] = sizeS && sizeS,
-            _b["arc-VerticalSpace--sizeM".concat(sizeM)] = sizeM && sizeM,
-            _b["arc-VerticalSpace--sizeL".concat(sizeL)] = sizeL && sizeL,
-            _b["arc-VerticalSpace--sizeXL".concat(sizeXL)] = sizeXL && sizeXL,
-            _b["arc-VerticalSpace--debugVisible"] = isDebugVisible,
-            _b)) }, filterDataAttrs(props))));
-};
-
 /** Use `Modal` to focus a user's attention to an urgent or required prompt for interaction or input. */
 var Modal = function (_a) {
     var title = _a.title, description = _a.description, ariaDescribedBy = _a.ariaDescribedBy, isOpen = _a.isOpen, actions = _a.actions, onRequestClose = _a.onRequestClose, children = _a.children, _b = _a.role, role = _b === void 0 ? "dialog" : _b, _c = _a.shouldReturnFocus, shouldReturnFocus = _c === void 0 ? true : _c, _d = _a.isContentScrollable, isContentScrollable = _d === void 0 ? false : _d, _e = _a.size, size = _e === void 0 ? "l" : _e, props = __rest(_a, ["title", "description", "ariaDescribedBy", "isOpen", "actions", "onRequestClose", "children", "role", "shouldReturnFocus", "isContentScrollable", "size"]);
@@ -37675,13 +37814,6 @@ var Select = function (_a) {
                         React__default["default"].createElement(Icon, { icon: BtIconChevronDown2Px, size: 16 })))))));
 };
 
-/**
- * Do not edit directly
- * Generated file
- */
-var ArcBreakpointM = 768;
-var ArcBreakpointL = 1024;
-
 /**
  * Use `SiteFooter` to display information at the bottom of a page.
  */
@@ -39160,77 +39292,6 @@ Tabs.Tab = Tab;
 Tabs.List = TabsList;
 Tabs.Content = TabContent;
 
-const BtIconCross = (props) =>
-  /*#__PURE__*/ React__default["default"].createElement(
-    "svg",
-    Object.assign(
-      {
-        xmlns: "http://www.w3.org/2000/svg",
-        viewBox: "0 0 32 32",
-      },
-      props,
-    ),
-    /*#__PURE__*/ React__default["default"].createElement("defs", null),
-    /*#__PURE__*/ React__default["default"].createElement("path", {
-      d: "M16,2A14,14,0,1,0,30,16,14,14,0,0,0,16,2Zm0,27A13,13,0,1,1,29,16,13.01474,13.01474,0,0,1,16,29Z",
-      fill: "currentColor",
-    }),
-    /*#__PURE__*/ React__default["default"].createElement("path", {
-      d: "M20.85352,11.14648a.49983.49983,0,0,0-.707,0L16,15.293l-4.14648-4.14649a.5.5,0,0,0-.707.707L15.293,16l-4.14649,4.14648a.5.5,0,1,0,.707.707L16,16.707l4.14648,4.14649a.5.5,0,0,0,.707-.707L16.707,16l4.14649-4.14648A.49983.49983,0,0,0,20.85352,11.14648Z",
-      fill: "currentColor",
-    }),
-  );
-
-const BtIconCrossFill = (props) =>
-  /*#__PURE__*/ React__default["default"].createElement(
-    "svg",
-    Object.assign(
-      {
-        xmlns: "http://www.w3.org/2000/svg",
-        viewBox: "0 0 32 32",
-      },
-      props,
-    ),
-    /*#__PURE__*/ React__default["default"].createElement("defs", null),
-    /*#__PURE__*/ React__default["default"].createElement("path", {
-      d: "M16,2A14,14,0,1,0,30,16,14,14,0,0,0,16,2Zm4.85352,18.14648a.5.5,0,1,1-.707.707L16,16.707l-4.14648,4.14649a.5.5,0,0,1-.707-.707L15.293,16l-4.14649-4.14648a.5.5,0,0,1,.707-.707L16,15.293l4.14648-4.14649a.5.5,0,0,1,.707.707L16.707,16Z",
-      fill: "currentColor",
-    }),
-  );
-
-/**
- * use `Tag` to promote features and manage filtering.
- */
-var Tag = function (_a) {
-    var children = _a.children, isRemovable = _a.isRemovable, link = _a.link, icon = _a.icon, onClick = _a.onClick, onRemove = _a.onRemove, props = __rest(_a, ["children", "isRemovable", "link", "icon", "onClick", "onRemove"]);
-    var surface = React.useContext(Context$3).surface;
-    var _b = React.useState(false), isRemoved = _b[0], setIsRemoved = _b[1];
-    var onRemoveHandler = function () {
-        setIsRemoved(function (p) { return !p; });
-        onRemove && onRemove();
-    };
-    return (React__default["default"].createElement("div", __assign({ className: classNames("arc-Tag", {
-            "arc-Tag--onDarkSurface": surface === "dark",
-            "arc-Tag--isRemovable": isRemovable,
-            "arc-Tag--hasIcon": icon,
-            "arc-Tag--hasLink": link || onClick,
-            "arc-Tag--removed": isRemoved
-        }) }, (isRemoved && { "aria-hidden": true }), filterDataAttrs(props)),
-        link ? (React__default["default"].createElement("a", { className: "arc-Tag-content", href: link, tabIndex: 0 },
-            icon && (React__default["default"].createElement("span", { className: "arc-Tag-icon" },
-                React__default["default"].createElement(Icon, { "data-testid": "arc-Tag-icon", icon: icon, size: 16 }))),
-            React__default["default"].createElement("div", { className: "arc-Tag-label" }, children))) : (React__default["default"].createElement(React__default["default"].Fragment, null, onClick ? (React__default["default"].createElement("button", { className: "arc-Tag-content", onClick: onClick, "data-testid": "arc-Tag-content" },
-            icon && (React__default["default"].createElement("span", { className: "arc-Tag-icon" },
-                React__default["default"].createElement(Icon, { "data-testid": "arc-Tag-icon", icon: icon, size: 16 }))),
-            React__default["default"].createElement("div", { className: "arc-Tag-label" }, children))) : (React__default["default"].createElement("div", { className: "arc-Tag-content", "data-testid": "arc-Tag-content" },
-            icon && (React__default["default"].createElement("span", { className: "arc-Tag-icon" },
-                React__default["default"].createElement(Icon, { "data-testid": "arc-Tag-icon", icon: icon, size: 16 }))),
-            React__default["default"].createElement("div", { className: "arc-Tag-label" }, children))))),
-        isRemovable && (React__default["default"].createElement("button", { className: "arc-Tag-icon arc-Tag-icon--removable", onClick: onRemoveHandler, "data-testid": "arc-Tag-icon-removable", "aria-live": "polite", "aria-roledescription": "remove tag" },
-            React__default["default"].createElement(Icon, { icon: BtIconCross, color: "brand", size: 20 }),
-            React__default["default"].createElement(Icon, { icon: BtIconCrossFill, color: "brand", size: 20 })))));
-};
-
 /** Use `TextArea` to allow custom user text entry via keyboard, for long-form and multi-line descriptions */
 var TextArea = React.forwardRef(function (_a, ref) {
     var _b = _a.defaultValue, defaultValue = _b === void 0 ? "" : _b, errorMessage = _a.errorMessage, helper = _a.helper, id = _a.id, _c = _a.resize, resize = _c === void 0 ? "manual" : _c, _d = _a.isDisabled, isDisabled = _d === void 0 ? false : _d, _e = _a.isReadOnly, isReadOnly = _e === void 0 ? false : _e, _f = _a.isRequired, isRequired = _f === void 0 ? false : _f, _g = _a.showCharacterCount, showCharacterCount = _g === void 0 ? true : _g, label = _a.label, _h = _a.labelSize, labelSize = _h === void 0 ? "l" : _h, maxLength = _a.maxLength, name = _a.name, onBlur = _a.onBlur, onChange = _a.onChange, onClickDisclosure = _a.onClickDisclosure, value = _a.value, disclosureTitle = _a.disclosureTitle, disclosureText = _a.disclosureText, props = __rest(_a, ["defaultValue", "errorMessage", "helper", "id", "resize", "isDisabled", "isReadOnly", "isRequired", "showCharacterCount", "label", "labelSize", "maxLength", "name", "onBlur", "onChange", "onClickDisclosure", "value", "disclosureTitle", "disclosureText"]);
@@ -40030,7 +40091,7 @@ var Truncate = function (_a) {
  * Use `UniversalHeader` to display a group-level page header.
  */
 var UniversalHeader = function (_a) {
-    var children = _a.children, props = __rest(_a, ["children"]);
+    var children = _a.children, ContentSlot = _a.ContentSlot, props = __rest(_a, ["children", "ContentSlot"]);
     React.useEffect(function () {
         React__default["default"].Children.map(children, function (item) {
             if (item && item.type !== UniversalHeaderItem) {
@@ -40040,7 +40101,9 @@ var UniversalHeader = function (_a) {
     }, [children]);
     return (React__default["default"].createElement("nav", __assign({ className: "arc-UniversalHeader" }, filterDataAttrs(props)),
         React__default["default"].createElement(Surface, { background: "light" },
-            React__default["default"].createElement("ul", { className: "arc-UniversalHeader-items" }, children))));
+            React__default["default"].createElement("ul", { className: "arc-UniversalHeader-items" },
+                children,
+                ContentSlot && (React__default["default"].createElement("li", { className: "arc-UniversalHeader-contentSlot" }, ContentSlot))))));
 };
 var UniversalHeaderItem = function (_a) {
     var children = _a.children, href = _a.href, props = __rest(_a, ["children", "href"]);
@@ -40072,6 +40135,7 @@ exports.Group = Group;
 exports.Heading = Heading;
 exports.Icon = Icon;
 exports.Image = Image;
+exports.InformationCard = InformationCard;
 exports.Markup = Markup;
 exports.MediaCard = MediaCard;
 exports.Modal = Modal;