@useblu/ocean-react 1.135.0 → 1.136.0

package/index.js

@@ -5478,9 +5478,17 @@ var SkeletonBar = function (_a) {
     return (e.createElement("div", __assign$1({ className: "ods-skeleton-bar", style: { width: width, height: height } }, props)));
 };
 
+var CornerTag = e.forwardRef(function (_a, ref) {
+    var label = _a.label, _b = _a.color, color = _b === void 0 ? 'primaryDown' : _b, className = _a.className;
+    if (!label)
+        return null;
+    return (e.createElement("span", { ref: ref, className: classNames('ods-corner-tag', "ods-corner-tag--".concat(color), className), "aria-label": label }, label));
+});
+CornerTag.displayName = 'CornerTag';
+
 var ListContainer = e.forwardRef(function (_a, ref) {
     var _b, _c;
-    var _d = _a.type, type = _d === void 0 ? 'card' : _d, _e = _a.showDivider, showDivider = _e === void 0 ? false : _e, _f = _a.hasError, hasError = _f === void 0 ? false : _f, highlight = _a.highlight, children = _a.children, className = _a.className, rest = __rest$1(_a, ["type", "showDivider", "hasError", "highlight", "children", "className"]);
+    var _d = _a.type, type = _d === void 0 ? 'card' : _d, _e = _a.showDivider, showDivider = _e === void 0 ? false : _e, _f = _a.hasError, hasError = _f === void 0 ? false : _f, highlight = _a.highlight, cornerTag = _a.cornerTag, children = _a.children, className = _a.className, rest = __rest$1(_a, ["type", "showDivider", "hasError", "highlight", "cornerTag", "children", "className"]);
     return (e.createElement("div", { className: "ods-list-container" },
         e.createElement("div", __assign$1({ ref: ref, className: classNames('ods-list-container__content', className, {
                 'ods-list-container__content--card': type === 'card',
@@ -5488,7 +5496,8 @@ var ListContainer = e.forwardRef(function (_a, ref) {
                 'ods-list-container__content--text': type === 'text',
             }) }, rest),
             children,
-            showDivider && type === 'text' && (e.createElement("div", { className: "ods-list-container__content__divider" }))),
+            showDivider && type === 'text' && (e.createElement("div", { className: "ods-list-container__content__divider" })),
+            type === 'card' && (cornerTag === null || cornerTag === void 0 ? void 0 : cornerTag.label) && e.createElement(CornerTag, __assign$1({}, cornerTag))),
         (highlight === null || highlight === void 0 ? void 0 : highlight.caption) && (e.createElement("div", { className: "ods-list-container__highlight", "data-testid": "list-container-highlight", style: { backgroundColor: (_b = highlight.backgroundColor) !== null && _b !== void 0 ? _b : '#F3F5FE' } },
             e.createElement("p", { className: "ods-typography ods-typography__caption", style: { color: (_c = highlight.captionColor) !== null && _c !== void 0 ? _c : '#67697A' } }, highlight.caption)))));
 });
@@ -5496,7 +5505,7 @@ 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, rest = __rest$1(_a, ["title", "description", "strikethroughDescription", "caption", "icon", "indicator", "type", "status", "inverted", "disabled", "loading", "className", "showDivider", "highlight"]);
+    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 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" }))); };
@@ -5513,14 +5522,15 @@ var ListReadOnly = e.forwardRef(function (_a, ref) {
         },
         _b["ods-list-readonly--".concat(type)] = type,
         _b));
-    return (e.createElement(ListContainer, { type: type, showDivider: showDivider, highlight: highlight },
+    return (e.createElement(ListContainer, { type: type, showDivider: showDivider, highlight: highlight, cornerTag: cornerTag },
         e.createElement("div", __assign$1({ ref: ref, "data-testid": "card-list-readonly", className: cardClassName }, rest), loading ? renderLoadingContent() : renderContent())));
 });
 ListReadOnly.displayName = 'ListReadOnly';
 
-var ListSelectable = e.forwardRef(function (_a, ref) {
-    var _b;
-    var title = _a.title, description = _a.description, caption = _a.caption, strikethroughDescription = _a.strikethroughDescription, inverted = _a.inverted, loading = _a.loading, disabled = _a.disabled, checkbox = _a.checkbox, radio = _a.radio, className = _a.className, showDivider = _a.showDivider, indicator = _a.indicator, isSelectableDisabled = _a.isSelectableDisabled, highlight = _a.highlight, _c = _a.status, status = _c === void 0 ? 'default' : _c, _d = _a.type, type = _d === void 0 ? 'card' : _d, _e = _a.platform, platform = _e === void 0 ? 'web' : _e, rest = __rest$1(_a, ["title", "description", "caption", "strikethroughDescription", "inverted", "loading", "disabled", "checkbox", "radio", "className", "showDivider", "indicator", "isSelectableDisabled", "highlight", "status", "type", "platform"]);
+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 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 internalList = e.useMemo(function () {
@@ -5547,14 +5557,14 @@ var ListSelectable = e.forwardRef(function (_a, 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 }, 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, caption: caption, strikethroughDescription: strikethroughDescription, highlight: highlight, cornerTag: cardCornerTag }, rest, { ref: ref })));
     }
-    return (e.createElement(ListContainer, { type: type, showDivider: showDivider, hasError: hasError, highlight: highlight },
-        e.createElement("div", __assign$1({ className: classNames('ods-list-selectable', className, (_b = {
+    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 = {
                     'ods-list-selectable--disabled': isInputDisabled
                 },
-                _b["ods-list-selectable--".concat(platform)] = platform,
-                _b)), ref: ref }, rest),
+                _a["ods-list-selectable--".concat(platform)] = platform,
+                _a)), ref: ref }, rest),
             checkbox && e.createElement(Checkbox, __assign$1({}, checkbox, { label: internalList })),
             radio && e.createElement(Radio, __assign$1({}, radio, { label: internalList })))));
 });