@arc-ui/community-components 3.9.0 → 3.10.0

package/lib/index.cjs

@@ -1,10 +1,15 @@
 'use strict';
 
 var React = require('react');
+var NavigationHeader = require('@arc-ui/components/NavigationHeader');
+var Popover = require('@arc-ui/components/Popover');
+var Icon = require('@arc-ui/components/Icon');
+var Image$2 = require('@arc-ui/components/Image');
 var Heading = require('@arc-ui/components/Heading');
 var Text = require('@arc-ui/components/Text');
+var Tooltip = require('@arc-ui/components/Tooltip');
+var ButtonV2 = require('@arc-ui/components/ButtonV2');
 var VerticalSpace = require('@arc-ui/components/VerticalSpace');
-var Image$2 = require('@arc-ui/components/Image');
 var Disclosure = require('@arc-ui/components/Disclosure');
 var Carousel = require('@arc-ui/components/Carousel');
 var Columns = require('@arc-ui/components/Columns');
@@ -12,8 +17,6 @@ var MediaCard = require('@arc-ui/components/MediaCard');
 var useMediaQuery = require('@arc-ui/components/use-media-query');
 var Grid = require('@arc-ui/components/Grid');
 var Avatar = require('@arc-ui/components/Avatar');
-var Icon = require('@arc-ui/components/Icon');
-var ButtonV2 = require('@arc-ui/components/ButtonV2');
 var Download = require('@arc-ui/components/Download');
 var Link = require('@arc-ui/components/Link');
 var Tabs = require('@arc-ui/components/Tabs');
@@ -153,6 +156,48 @@ var filterAttrs = function (props) {
     return filteredProps;
 };
 
+/**
+ * Do not edit directly
+ * Generated file
+ */
+
+const BtIconCrossAlt =
+  "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3e%3cpath fill='currentColor' d='m16.707 16.02 4.482-4.494a.5.5 0 1 0-.707-.706l-4.48 4.493-4.482-4.493a.5.5 0 1 0-.707.706l4.483 4.494-4.483 4.494a.5.5 0 1 0 .707.706l4.481-4.493 4.481 4.493a.5.5 0 1 0 .707-.706Z'/%3e%3c/svg%3e";
+
+var styles$v = {"container":"HeaderBarNotification-module_container__18nau","content":"HeaderBarNotification-module_content__SUo-l","image":"HeaderBarNotification-module_image__uV-nD","details":"HeaderBarNotification-module_details__S5Rrx","closeButtonContainer":"HeaderBarNotification-module_closeButtonContainer__b1UDI"};
+
+var HeaderBarNotification = function (_a) {
+    var headerActionProps = _a.headerActionProps, notificationId = _a.notificationId, _b = _a.isPersistant, isPersistant = _b === void 0 ? false : _b, icon = _a.icon, image = _a.image, heading = _a.heading, tagline = _a.tagline, children = _a.children, button = _a.button, props = __rest(_a, ["headerActionProps", "notificationId", "isPersistant", "icon", "image", "heading", "tagline", "children", "button"]);
+    var _c = React.useState(isPersistant), showNotification = _c[0], setShowNotification = _c[1];
+    var localStorageId = "hide".concat(notificationId.replace(/[^a-zA-Z0-9\-_]/g, ""));
+    // Check to see if the notication has been hidden or not and show it if so
+    React.useEffect(function () {
+        if (typeof window !== "undefined" && !isPersistant) {
+            setShowNotification(!localStorage.getItem(localStorageId));
+        }
+    }, []);
+    // Handle the closure of the notification, store it in the session so we don't keep showing it.
+    var handleClosePopup = function () {
+        if (!isPersistant)
+            localStorage.setItem(localStorageId, "true");
+        setShowNotification(false);
+    };
+    return (React.createElement(Popover.Popover, __assign({ open: showNotification, side: "bottom", sideOffset: 12, maxWidth: 900, arrow: true, content: React.createElement("div", { className: styles$v.container },
+            React.createElement("div", { className: styles$v.content },
+                (image || icon) && (React.createElement("div", { className: styles$v.image },
+                    image && (React.createElement(Image$2.Image, { src: image, alt: heading, fit: "cover", width: 55 })),
+                    icon && React.createElement(Icon.Icon, { icon: icon, size: 35 }))),
+                React.createElement("div", { className: styles$v.details },
+                    tagline && (React.createElement(Text.Text, { size: "m", tone: "muted" }, tagline)),
+                    React.createElement(Heading.Heading, { size: "s", level: "3" }, heading),
+                    children)),
+            button && (React.createElement(ButtonV2.ButtonV2, { onClick: button.handleClick, label: button.text, buttonStyle: "secondary", isFullWidth: true })),
+            React.createElement("div", { className: styles$v.closeButtonContainer },
+                React.createElement(Tooltip.Tooltip, { side: "bottom", title: "Dismiss Notification", asChild: true },
+                    React.createElement(ButtonV2.ButtonV2, { "data-testid": localStorageId, buttonStyle: "tertiary", "aria-label": "Close ".concat(notificationId, " popup"), onClick: handleClosePopup, icon: BtIconCrossAlt })))) }, filterAttrs(props)),
+        React.createElement(NavigationHeader.NavigationHeaderAction, __assign({ isAttention: true }, headerActionProps))));
+};
+
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
 function getDefaultExportFromCjs (x) {
@@ -3942,23 +3987,23 @@ var ProductNavigation = function (_a) {
             return (React.createElement("li", { key: "displayList-".concat(i), tabIndex: -1, ref: i === skipLinkCard ? cardRef : undefined, "data-cy": "list-item-".concat(i) },
                 React.createElement(InformationCard.InformationCard, __assign({}, cardProps, { minHeight: minHeight !== null && minHeight !== void 0 ? minHeight : cardProps.minHeight, headingLevel: (_a = cardProps.headingLevel) !== null && _a !== void 0 ? _a : "2" }))));
         })),
-        React.createElement(VerticalSpace.VerticalSpace, { size: "40" }),
-        React.createElement("div", { style: { display: "flex" } },
-            !hideButton && !hideLessButton && (React.createElement(ButtonV2.ButtonV2, { label: displayList.length < productList.length
-                    ? "Show more"
-                    : "Show less", buttonStyle: "secondary", onClick: clickController, isFullWidth: isMinWidthArcBreakpointS ? false : true, isLoading: isLoading })),
-            hideButton ||
-                (displaySkipButton && displayList.length > cardsToDisplay && (React.createElement("div", { id: "skip-link", className: classNames(styles$d["productNavigation-skipLink"]), tabIndex: -1 },
-                    React.createElement(ButtonV2.ButtonV2, { label: "Move to first new card", buttonStyle: "primary", onClick: moveFocus, isFullWidth: isMinWidthArcBreakpointS ? false : true })))),
-            React.createElement(VisuallyHidden.VisuallyHidden, null,
-                React.createElement("div", { "aria-live": "polite", id: "aria-live-region", "aria-atomic": true },
-                    React.createElement("p", null,
-                        "Total products listed ",
-                        displayList.length,
-                        ". Total products hidden",
-                        " ",
-                        productList.length - displayList.length,
-                        "."))))));
+        !hideButton &&
+            !(defaultExpanded && displayList.length === productList.length) && (React.createElement(React.Fragment, null,
+            React.createElement(VerticalSpace.VerticalSpace, { size: "40" }),
+            React.createElement("div", { style: { display: "flex" } },
+                !hideLessButton && (React.createElement(ButtonV2.ButtonV2, { label: displayList.length < productList.length
+                        ? "Show more"
+                        : "Show less", buttonStyle: "secondary", onClick: clickController, isFullWidth: isMinWidthArcBreakpointS ? false : true, isLoading: isLoading })),
+                displaySkipButton && displayList.length > cardsToDisplay && (React.createElement("div", { id: "skip-link", className: classNames(styles$d["productNavigation-skipLink"]), tabIndex: -1 },
+                    React.createElement(ButtonV2.ButtonV2, { label: "Move to first new card", buttonStyle: "primary", onClick: moveFocus, isFullWidth: isMinWidthArcBreakpointS ? false : true }))),
+                React.createElement(VisuallyHidden.VisuallyHidden, null,
+                    React.createElement("div", { "aria-live": "polite", id: "aria-live-region", "aria-atomic": true },
+                        React.createElement("p", null,
+                            "Total products listed ",
+                            displayList.length,
+                            ". Total products hidden ",
+                            productList.length - displayList.length,
+                            "."))))))));
 };
 
 var styles$c = {"container":"ContentInfoWidget-module_container__yaS-8","text":"ContentInfoWidget-module_text__O1BdZ","icon":"ContentInfoWidget-module_icon__LEww1"};
@@ -3972,23 +4017,24 @@ var ContentInfoWidget = function (_a) {
             React.createElement(Text.Text, { size: "xs", tone: "muted" }, text))));
 };
 
-var styles$b = {"action-tile":"ActionTile-module_action-tile__JPwGb","action-tile-content":"ActionTile-module_action-tile-content__ZkgHc","action-tile-icon":"ActionTile-module_action-tile-icon__PY1EN","action-tile-heading":"ActionTile-module_action-tile-heading__Uxdu9","action-tile--active":"ActionTile-module_action-tile--active__-aWze","action-tile-tick":"ActionTile-module_action-tile-tick__vhsJE"};
+var styles$b = {"action-tile":"ActionTile-module_action-tile__JPwGb","action-tile-content":"ActionTile-module_action-tile-content__ZkgHc","action-tile-content--without-icon":"ActionTile-module_action-tile-content--without-icon__7F5xj","action-tile-icon":"ActionTile-module_action-tile-icon__PY1EN","action-tile-heading":"ActionTile-module_action-tile-heading__Uxdu9","action-tile--active":"ActionTile-module_action-tile--active__-aWze","action-tile-tick":"ActionTile-module_action-tile-tick__vhsJE"};
 
 var ActionTile = function (_a) {
-    var _b;
-    var icon = _a.icon, activeIcon = _a.activeIcon, heading = _a.heading, _c = _a.isActive, isActive = _c === void 0 ? false : _c, onClick = _a.onClick, className = _a.className, props = __rest(_a, ["icon", "activeIcon", "heading", "isActive", "onClick", "className"]);
-    var tileClasses = classNames(styles$b["action-tile"], (_b = {},
-        _b[styles$b["action-tile--active"]] = isActive,
-        _b), className);
+    var _b, _c;
+    var icon = _a.icon, activeIcon = _a.activeIcon, heading = _a.heading, _d = _a.isActive, isActive = _d === void 0 ? false : _d, onClick = _a.onClick, props = __rest(_a, ["icon", "activeIcon", "heading", "isActive", "onClick"]);
     var displayIcon = isActive && activeIcon ? activeIcon : icon;
     var content = (React.createElement(React.Fragment, null,
-        React.createElement("div", { className: styles$b["action-tile-content"] },
+        React.createElement("div", { className: classNames(styles$b["action-tile-content"], (_b = {},
+                _b[styles$b["action-tile-content--without-icon"]] = !displayIcon,
+                _b)) },
             displayIcon && (React.createElement("div", { className: styles$b["action-tile-icon"] },
                 React.createElement(Icon.Icon, { icon: displayIcon, size: 48 }))),
             React.createElement("span", { className: styles$b["action-tile-heading"] }, heading)),
         isActive && (React.createElement("div", { className: styles$b["action-tile-tick"] },
             React.createElement(Icon.Icon, { icon: BtIconTickAlt2Px, size: 28 })))));
-    return (React.createElement("button", __assign({ type: "button", className: tileClasses, onClick: onClick, "aria-pressed": isActive }, filterAttrs(props)), content));
+    return (React.createElement("button", __assign({ type: "button", className: classNames(styles$b["action-tile"], (_c = {},
+            _c[styles$b["action-tile--active"]] = isActive,
+            _c)), onClick: onClick, "aria-pressed": isActive }, filterAttrs(props)), content));
 };
 
 var styles$a = {"link-tile":"LinkTile-module_link-tile__xVUP3","link-tile-content":"LinkTile-module_link-tile-content__H-QN8","link-tile-icon":"LinkTile-module_link-tile-icon__kTMfH","link-tile-text":"LinkTile-module_link-tile-text__0K6zf"};
@@ -4265,6 +4311,7 @@ exports.CopyLead = CopyLead;
 exports.DownloadList = DownloadList;
 exports.FAQs = FAQs;
 exports.FeaturePost = FeaturePost;
+exports.HeaderBarNotification = HeaderBarNotification;
 exports.Highlights = Highlights;
 exports.InlineLinkGroup = InlineLinkGroup;
 exports.LinkTile = LinkTile;