@useblu/ocean-react 1.136.0 → 1.137.0

package/index.js

@@ -5450,8 +5450,10 @@ TextArea.displayName = 'TextArea';
 
 var ContentList = function (_a) {
     var _b, _c, _d;
-    var title = _a.title, description = _a.description, strikethroughDescription = _a.strikethroughDescription, caption = _a.caption, _e = _a.inverted, inverted = _e === void 0 ? false : _e, _f = _a.type, type = _f === void 0 ? 'default' : _f;
+    var title = _a.title, description = _a.description, strikethroughDescription = _a.strikethroughDescription, caption = _a.caption, _e = _a.inverted, inverted = _e === void 0 ? false : _e, _f = _a.type, type = _f === void 0 ? 'default' : _f, indicator = _a.indicator, indicatorPosition = _a.indicatorPosition;
+    var stackedIndicator = indicator && indicatorPosition && (e.createElement("div", { className: classNames('ods-content-list__indicator', "ods-content-list__indicator--".concat(indicatorPosition)) }, indicator));
     return (e.createElement("div", { className: "ods-content-list" },
+        indicatorPosition === 'above' && stackedIndicator,
         e.createElement("p", { className: classNames('ods-typography', (_b = {
                     'ods-typography__paragraph': !inverted,
                     'ods-typography__description': inverted
@@ -5470,7 +5472,8 @@ var ContentList = function (_a) {
             description)),
         caption && (e.createElement("p", { className: classNames("ods-typography ods-typography__captionbold", (_d = {},
                 _d["ods-typography__paragraph--".concat(type)] = type && type === 'inactive',
-                _d)) }, caption))));
+                _d)) }, caption)),
+        indicatorPosition === 'below' && stackedIndicator));
 };
 
 var SkeletonBar = function (_a) {
@@ -5505,16 +5508,17 @@ ListContainer.displayName = 'ListContainer';
 
 var ListReadOnly = e.forwardRef(function (_a, ref) {
     var _b;
-    var title = _a.title, description = _a.description, strikethroughDescription = _a.strikethroughDescription, caption = _a.caption, icon = _a.icon, indicator = _a.indicator, _c = _a.type, type = _c === void 0 ? 'card' : _c, _d = _a.status, status = _d === void 0 ? 'default' : _d, _e = _a.inverted, inverted = _e === void 0 ? false : _e, _f = _a.disabled, disabled = _f === void 0 ? false : _f, _g = _a.loading, loading = _g === void 0 ? false : _g, className = _a.className, _h = _a.showDivider, showDivider = _h === void 0 ? false : _h, highlight = _a.highlight, cornerTag = _a.cornerTag, rest = __rest$1(_a, ["title", "description", "strikethroughDescription", "caption", "icon", "indicator", "type", "status", "inverted", "disabled", "loading", "className", "showDivider", "highlight", "cornerTag"]);
+    var title = _a.title, description = _a.description, strikethroughDescription = _a.strikethroughDescription, caption = _a.caption, icon = _a.icon, indicator = _a.indicator, _c = _a.indicatorPosition, indicatorPosition = _c === void 0 ? 'inline' : _c, _d = _a.type, type = _d === void 0 ? 'card' : _d, _e = _a.status, status = _e === void 0 ? 'default' : _e, _f = _a.inverted, inverted = _f === void 0 ? false : _f, _g = _a.disabled, disabled = _g === void 0 ? false : _g, _h = _a.loading, loading = _h === void 0 ? false : _h, className = _a.className, _j = _a.showDivider, showDivider = _j === void 0 ? false : _j, highlight = _a.highlight, cornerTag = _a.cornerTag, rest = __rest$1(_a, ["title", "description", "strikethroughDescription", "caption", "icon", "indicator", "indicatorPosition", "type", "status", "inverted", "disabled", "loading", "className", "showDivider", "highlight", "cornerTag"]);
     var renderLoadingContent = function () { return (e.createElement("div", { className: "ods-list-readonly__skeleton" },
         e.createElement(SkeletonBar, { width: "40%", height: "16px" }),
         e.createElement(SkeletonBar, { width: "100%", height: "16px" }))); };
+    var stackedPosition = indicatorPosition !== 'inline' ? indicatorPosition : undefined;
     var renderContent = function () { return (e.createElement(e.Fragment, null,
         icon && (e.createElement("div", { className: classNames('ods-list-readonly__icon', {
                 'ods-list-readonly__icon--inactive': status === 'inactive',
             }) }, icon)),
-        e.createElement(ContentList, { title: title, description: description, strikethroughDescription: strikethroughDescription, caption: caption, inverted: inverted, type: status }),
-        indicator && (e.createElement("div", { className: "ods-list-readonly__trailing" },
+        e.createElement(ContentList, { title: title, description: description, strikethroughDescription: strikethroughDescription, caption: caption, inverted: inverted, type: status, indicator: stackedPosition ? indicator : undefined, indicatorPosition: stackedPosition }),
+        indicator && !stackedPosition && (e.createElement("div", { className: "ods-list-readonly__trailing" },
             e.createElement("div", { className: "ods-list-readonly__indicator" }, indicator))))); };
     var cardClassName = classNames('ods-list-readonly', className, (_b = {
             'ods-list-readonly--loading': loading,
@@ -5529,15 +5533,16 @@ ListReadOnly.displayName = 'ListReadOnly';
 
 var ListSelectable = e.forwardRef(function (props, ref) {
     var _a;
-    var _b = props, title = _b.title, description = _b.description, caption = _b.caption, strikethroughDescription = _b.strikethroughDescription, inverted = _b.inverted, loading = _b.loading, disabled = _b.disabled, checkbox = _b.checkbox, radio = _b.radio, className = _b.className, showDivider = _b.showDivider, indicator = _b.indicator, isSelectableDisabled = _b.isSelectableDisabled, highlight = _b.highlight, _c = _b.status, status = _c === void 0 ? 'default' : _c, _d = _b.type, type = _d === void 0 ? 'card' : _d, _e = _b.platform, platform = _e === void 0 ? 'web' : _e, cornerTag = _b.cornerTag, rest = __rest$1(_b, ["title", "description", "caption", "strikethroughDescription", "inverted", "loading", "disabled", "checkbox", "radio", "className", "showDivider", "indicator", "isSelectableDisabled", "highlight", "status", "type", "platform", "cornerTag"]);
+    var _b = props, title = _b.title, description = _b.description, caption = _b.caption, strikethroughDescription = _b.strikethroughDescription, inverted = _b.inverted, loading = _b.loading, disabled = _b.disabled, checkbox = _b.checkbox, radio = _b.radio, className = _b.className, showDivider = _b.showDivider, indicator = _b.indicator, _c = _b.indicatorPosition, indicatorPosition = _c === void 0 ? 'inline' : _c, isSelectableDisabled = _b.isSelectableDisabled, highlight = _b.highlight, _d = _b.status, status = _d === void 0 ? 'default' : _d, _e = _b.type, type = _e === void 0 ? 'card' : _e, _f = _b.platform, platform = _f === void 0 ? 'web' : _f, cornerTag = _b.cornerTag, rest = __rest$1(_b, ["title", "description", "caption", "strikethroughDescription", "inverted", "loading", "disabled", "checkbox", "radio", "className", "showDivider", "indicator", "indicatorPosition", "isSelectableDisabled", "highlight", "status", "type", "platform", "cornerTag"]);
     var cardCornerTag = type === 'card' ? cornerTag : undefined;
     var hasError = e.useMemo(function () { return (radio === null || radio === void 0 ? void 0 : radio.error) || (checkbox === null || checkbox === void 0 ? void 0 : checkbox.error); }, [radio === null || radio === void 0 ? void 0 : radio.error, checkbox === null || checkbox === void 0 ? void 0 : checkbox.error]);
     var isInputDisabled = e.useMemo(function () { return (radio === null || radio === void 0 ? void 0 : radio.disabled) || (checkbox === null || checkbox === void 0 ? void 0 : checkbox.disabled) || disabled; }, [radio === null || radio === void 0 ? void 0 : radio.disabled, checkbox === null || checkbox === void 0 ? void 0 : checkbox.disabled, disabled]);
+    var stackedPosition = indicatorPosition !== 'inline' ? indicatorPosition : undefined;
     var internalList = e.useMemo(function () {
         var _a;
         return (e.createElement(e.Fragment, null,
-            e.createElement(ContentList, { title: title, description: description, strikethroughDescription: strikethroughDescription, caption: caption, inverted: inverted, type: disabled ? 'inactive' : status }),
-            indicator && (e.createElement("div", { className: classNames('ods-list-selectable__indicator', (_a = {},
+            e.createElement(ContentList, { title: title, description: description, strikethroughDescription: strikethroughDescription, caption: caption, inverted: inverted, type: disabled ? 'inactive' : status, indicator: stackedPosition ? indicator : undefined, indicatorPosition: stackedPosition }),
+            indicator && !stackedPosition && (e.createElement("div", { className: classNames('ods-list-selectable__indicator', (_a = {},
                     _a["ods-list-selectable__indicator--".concat(platform)] = platform,
                     _a)) }, indicator))));
     }, [
@@ -5548,6 +5553,7 @@ var ListSelectable = e.forwardRef(function (props, ref) {
         inverted,
         status,
         indicator,
+        stackedPosition,
         disabled,
         platform,
     ]);
@@ -5557,7 +5563,7 @@ var ListSelectable = e.forwardRef(function (props, ref) {
             e.createElement(SkeletonBar, { width: "100%", height: "16px" })));
     }
     if (isSelectableDisabled) {
-        return (e.createElement(ListReadOnly, __assign$1({ title: title, description: description, status: status, type: type, inverted: inverted, disabled: disabled, loading: loading, className: className, showDivider: showDivider, indicator: indicator, caption: caption, strikethroughDescription: strikethroughDescription, highlight: highlight, cornerTag: cardCornerTag }, rest, { ref: ref })));
+        return (e.createElement(ListReadOnly, __assign$1({ title: title, description: description, status: status, type: type, inverted: inverted, disabled: disabled, loading: loading, className: className, showDivider: showDivider, indicator: indicator, indicatorPosition: indicatorPosition, caption: caption, strikethroughDescription: strikethroughDescription, highlight: highlight, cornerTag: cardCornerTag }, rest, { ref: ref })));
     }
     return (e.createElement(ListContainer, { type: type, showDivider: showDivider, hasError: hasError, highlight: highlight, cornerTag: cardCornerTag },
         e.createElement("div", __assign$1({ className: classNames('ods-list-selectable', className, (_a = {
@@ -26275,6 +26281,36 @@ var Steps = function (_a) {
     return (e.createElement("svg", { height: "20", width: 30 * (steps - 1) + 22, viewBox: "0 0 ".concat(30 * (steps - 1) + 22, " 20"), fill: "none", xmlns: "http://www.w3.org/2000/svg", "data-testid": "step-".concat(currentStep) }, Array.from(Array(steps).keys()).map(function (step) { return (e.createElement("g", { key: step }, getCurrentStep(step + 1))); })));
 };
 
+var PRIMARY_VARIANT_MAP = {
+    default: 'primary',
+    warning: 'primaryWarning',
+    negative: 'primaryCritical',
+    emphasys: 'secondary',
+};
+var SECONDARY_VARIANT_MAP = {
+    default: 'tertiary',
+    warning: 'tertiaryWarning',
+    negative: 'tertiaryCritical',
+    emphasys: 'tertiary',
+};
+var Banner = e.forwardRef(function (_a, ref) {
+    var _b = _a.size, size = _b === void 0 ? 'large' : _b, _c = _a.type, type = _c === void 0 ? 'default' : _c, title = _a.title, description = _a.description, image = _a.image, primaryAction = _a.primaryAction, secondaryAction = _a.secondaryAction, className = _a.className, rest = __rest$1(_a, ["size", "type", "title", "description", "image", "primaryAction", "secondaryAction", "className"]);
+    var isEmphasys = type === 'emphasys';
+    var hasActions = primaryAction || secondaryAction;
+    var imageEl = image ? (e.createElement("img", { className: "ods-banner__image", src: image, alt: "", "aria-hidden": "true" })) : null;
+    return (e.createElement("div", __assign$1({ ref: ref }, rest, { className: classNames('ods-banner', "ods-banner--".concat(size), "ods-banner--".concat(type), className) }),
+        imageEl && size === 'large' && (e.createElement("div", { className: "ods-banner__image-wrapper ods-banner__image-wrapper--top" }, imageEl)),
+        e.createElement("div", { className: "ods-banner__body" },
+            e.createElement("div", { className: "ods-banner__content" },
+                e.createElement(Typography, { variant: "heading4", inverse: isEmphasys, className: "ods-banner__title" }, title),
+                description && (e.createElement(Typography, { variant: "description", inverse: isEmphasys, className: "ods-banner__description" }, description)),
+                hasActions && (e.createElement("div", { className: "ods-banner__actions" },
+                    primaryAction && (e.createElement(Button$1, { size: "sm", variant: PRIMARY_VARIANT_MAP[type], onClick: primaryAction.onClick }, primaryAction.label)),
+                    secondaryAction && (e.createElement(Button$1, { size: "sm", variant: SECONDARY_VARIANT_MAP[type], onClick: secondaryAction.onClick }, secondaryAction.label))))),
+            imageEl && size === 'small' && (e.createElement("div", { className: "ods-banner__image-wrapper ods-banner__image-wrapper--side" }, imageEl)))));
+});
+Banner.displayName = 'Banner';
+
 var CrossSellCard = e.forwardRef(function (_a, ref) {
     var title = _a.title, className = _a.className, description = _a.description, imageSrc = _a.imageSrc, ctaText = _a.ctaText, ctaAction = _a.ctaAction, customIcon = _a.customIcon, rest = __rest$1(_a, ["title", "className", "description", "imageSrc", "ctaText", "ctaAction", "customIcon"]);
     return (e.createElement("div", __assign$1({ ref: ref }, rest, { className: classNames('ods-cross-sell-card', className) }),
@@ -47855,9 +47891,9 @@ var AmountDetails = function (_a) {
 
 var ListAction = e.forwardRef(function (_a, ref) {
     var _b;
-    var title = _a.title, description = _a.description, strikethroughDescription = _a.strikethroughDescription, caption = _a.caption, _c = _a.inverted, inverted = _c === void 0 ? false : _c, _d = _a.type, type = _d === void 0 ? 'card' : _d, _e = _a.status, status = _e === void 0 ? 'default' : _e, _f = _a.disabled, disabled = _f === void 0 ? false : _f, _g = _a.loading, loading = _g === void 0 ? false : _g, icon = _a.icon, indicator = _a.indicator, _h = _a.actionType, actionType = _h === void 0 ? 'chevron' : _h, menuActions = _a.menuActions, _j = _a.menuPosition, menuPosition = _j === void 0 ? 'bottom-right' : _j, onClick = _a.onClick, className = _a.className, _k = _a.showDivider, showDivider = _k === void 0 ? false : _k, amountDetails = _a.amountDetails, position = _a.position, highlight = _a.highlight, rest = __rest$1(_a, ["title", "description", "strikethroughDescription", "caption", "inverted", "type", "status", "disabled", "loading", "icon", "indicator", "actionType", "menuActions", "menuPosition", "onClick", "className", "showDivider", "amountDetails", "position", "highlight"]);
-    var _l = e.useState(false), isSwipeOpen = _l[0], setIsSwipeOpen = _l[1];
-    var _m = e.useState(0), menuWidth = _m[0], setMenuWidth = _m[1];
+    var title = _a.title, description = _a.description, strikethroughDescription = _a.strikethroughDescription, caption = _a.caption, _c = _a.inverted, inverted = _c === void 0 ? false : _c, _d = _a.type, type = _d === void 0 ? 'card' : _d, _e = _a.status, status = _e === void 0 ? 'default' : _e, _f = _a.disabled, disabled = _f === void 0 ? false : _f, _g = _a.loading, loading = _g === void 0 ? false : _g, icon = _a.icon, indicator = _a.indicator, _h = _a.indicatorPosition, indicatorPosition = _h === void 0 ? 'inline' : _h, _j = _a.actionType, actionType = _j === void 0 ? 'chevron' : _j, menuActions = _a.menuActions, _k = _a.menuPosition, menuPosition = _k === void 0 ? 'bottom-right' : _k, onClick = _a.onClick, className = _a.className, _l = _a.showDivider, showDivider = _l === void 0 ? false : _l, amountDetails = _a.amountDetails, position = _a.position, highlight = _a.highlight, rest = __rest$1(_a, ["title", "description", "strikethroughDescription", "caption", "inverted", "type", "status", "disabled", "loading", "icon", "indicator", "indicatorPosition", "actionType", "menuActions", "menuPosition", "onClick", "className", "showDivider", "amountDetails", "position", "highlight"]);
+    var _m = e.useState(false), isSwipeOpen = _m[0], setIsSwipeOpen = _m[1];
+    var _o = e.useState(0), menuWidth = _o[0], setMenuWidth = _o[1];
     var handleSwipeOpenChange = function (isOpen, width) {
         setIsSwipeOpen(isOpen);
         if (width !== undefined) {
@@ -47880,6 +47916,7 @@ var ListAction = e.forwardRef(function (_a, ref) {
     var contentStyle = isSwipeOpen && menuWidth > 0
         ? { transform: "translateX(-".concat(menuWidth, "px)") }
         : {};
+    var stackedPosition = indicatorPosition !== 'inline' ? indicatorPosition : undefined;
     var showLeading = position && icon;
     var showLineAbove = position === 'middle' || position === 'last';
     var showLineBelow = position === 'first' || position === 'middle';
@@ -47897,9 +47934,9 @@ var ListAction = e.forwardRef(function (_a, ref) {
                     }) }))) : (icon && (e.createElement("div", { className: classNames('ods-list-action__icon', {
                     'ods-list-action__icon--inactive': status === 'inactive',
                 }) }, icon))),
-            e.createElement(ContentList, { title: title, description: description, strikethroughDescription: strikethroughDescription, caption: caption, inverted: inverted, type: status }),
+            e.createElement(ContentList, { title: title, description: description, strikethroughDescription: strikethroughDescription, caption: caption, inverted: inverted, type: status, indicator: stackedPosition ? indicator : undefined, indicatorPosition: stackedPosition }),
             amountDetails && e.createElement(AmountDetails, __assign$1({ type: status }, amountDetails)),
-            indicator && (e.createElement("div", { className: "ods-list-action__indicator" }, indicator))),
+            indicator && !stackedPosition && (e.createElement("div", { className: "ods-list-action__indicator" }, indicator))),
         renderActionIcon())); };
     var buttonClassName = classNames('ods-list-action', className, (_b = {
             'ods-list-action--loading': loading,
@@ -47916,8 +47953,8 @@ ListAction.displayName = 'ListAction';
 
 var ListExpandable = e.forwardRef(function (_a, ref) {
     var _b;
-    var title = _a.title, description = _a.description, strikethroughDescription = _a.strikethroughDescription, caption = _a.caption, _c = _a.inverted, inverted = _c === void 0 ? false : _c, _d = _a.type, type = _d === void 0 ? 'card' : _d, _e = _a.status, status = _e === void 0 ? 'default' : _e, _f = _a.loading, loading = _f === void 0 ? false : _f, icon = _a.icon, indicator = _a.indicator, controlledExpanded = _a.expanded, _g = _a.defaultExpanded, defaultExpanded = _g === void 0 ? false : _g, onToggle = _a.onToggle, children = _a.children, className = _a.className, _h = _a.disabled, disabled = _h === void 0 ? false : _h, _j = _a.showDivider, showDivider = _j === void 0 ? false : _j, highlight = _a.highlight, rest = __rest$1(_a, ["title", "description", "strikethroughDescription", "caption", "inverted", "type", "status", "loading", "icon", "indicator", "expanded", "defaultExpanded", "onToggle", "children", "className", "disabled", "showDivider", "highlight"]);
-    var _k = e.useState(defaultExpanded), internalExpanded = _k[0], setInternalExpanded = _k[1];
+    var title = _a.title, description = _a.description, strikethroughDescription = _a.strikethroughDescription, caption = _a.caption, _c = _a.inverted, inverted = _c === void 0 ? false : _c, _d = _a.type, type = _d === void 0 ? 'card' : _d, _e = _a.status, status = _e === void 0 ? 'default' : _e, _f = _a.loading, loading = _f === void 0 ? false : _f, icon = _a.icon, indicator = _a.indicator, _g = _a.indicatorPosition, indicatorPosition = _g === void 0 ? 'inline' : _g, controlledExpanded = _a.expanded, _h = _a.defaultExpanded, defaultExpanded = _h === void 0 ? false : _h, onToggle = _a.onToggle, children = _a.children, className = _a.className, _j = _a.disabled, disabled = _j === void 0 ? false : _j, _k = _a.showDivider, showDivider = _k === void 0 ? false : _k, highlight = _a.highlight, rest = __rest$1(_a, ["title", "description", "strikethroughDescription", "caption", "inverted", "type", "status", "loading", "icon", "indicator", "indicatorPosition", "expanded", "defaultExpanded", "onToggle", "children", "className", "disabled", "showDivider", "highlight"]);
+    var _l = e.useState(defaultExpanded), internalExpanded = _l[0], setInternalExpanded = _l[1];
     var isControlled = controlledExpanded !== undefined;
     var isExpanded = isControlled ? controlledExpanded : internalExpanded;
     var handleToggle = function () {
@@ -47930,13 +47967,14 @@ var ListExpandable = e.forwardRef(function (_a, ref) {
     var renderLoadingContent = function () { return (e.createElement("div", { className: "ods-list-expandable__skeleton" },
         e.createElement(SkeletonBar, { width: "40%", height: "16px" }),
         e.createElement(SkeletonBar, { width: "100%", height: "16px" }))); };
+    var stackedPosition = indicatorPosition !== 'inline' ? indicatorPosition : undefined;
     var renderContent = function () { return (e.createElement(e.Fragment, null,
         icon && (e.createElement("div", { className: classNames('ods-list-expandable__icon', {
                 'ods-list-expandable__icon--inactive': status === 'inactive',
             }) }, icon)),
-        e.createElement(ContentList, { title: title, description: description, strikethroughDescription: strikethroughDescription, caption: caption, inverted: inverted, type: status }),
+        e.createElement(ContentList, { title: title, description: description, strikethroughDescription: strikethroughDescription, caption: caption, inverted: inverted, type: status, indicator: stackedPosition ? indicator : undefined, indicatorPosition: stackedPosition }),
         e.createElement("div", { className: "ods-list-expandable__trailing" },
-            indicator && (e.createElement("div", { className: "ods-list-expandable__indicator" }, indicator)),
+            indicator && !stackedPosition && (e.createElement("div", { className: "ods-list-expandable__indicator" }, indicator)),
             e.createElement("div", { className: "ods-list-expandable__action" }, isExpanded ? e.createElement(ae, { size: 20 }) : e.createElement(ee, { size: 20 }))))); };
     var containerClassName = classNames('ods-list-expandable', className, (_b = {
             'ods-list-expandable--expanded': isExpanded,
@@ -48073,6 +48111,7 @@ ListSettings.displayName = 'ListSettings';
 exports.Accordion = Accordion;
 exports.Alert = Alert;
 exports.Badge = Badge;
+exports.Banner = Banner;
 exports.Breadcrumb = Breadcrumb;
 exports.Button = Button$1;
 exports.CardGroup = CardGroup;