@useblu/ocean-react 1.110.0 → 1.112.1

package/CHANGELOG.md

@@ -3,6 +3,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.112.1](https://github.com/ocean-ds/ocean-web/compare/v1.112.0...v1.112.1) (2025-10-07)
+
+### Bug Fixes
+
+- tag position and limit props to accept only tag or count prop ([#1191](https://github.com/ocean-ds/ocean-web/issues/1191)) ([7d0952f](https://github.com/ocean-ds/ocean-web/commit/7d0952fe23e34c5ebb36ab30303e2a0bbf39028f))
+
+# [1.112.0](https://github.com/ocean-ds/ocean-web/compare/v1.111.0...v1.112.0) (2025-10-07)
+
+### Features
+
+- add tag and actionCount ([#1192](https://github.com/ocean-ds/ocean-web/issues/1192)) ([77e9f5f](https://github.com/ocean-ds/ocean-web/commit/77e9f5fb31eadb1f26820f6b105b966450af6b46))
+
 # [1.110.0](https://github.com/ocean-ds/ocean-web/compare/v1.109.0...v1.110.0) (2025-08-25)
 
 ### Features

package/CardGroup/ActionButton.d.ts

@@ -1,7 +1,8 @@
 interface IActionButtonProps {
     actionLabel?: string;
+    actionCount?: number;
     actionClick?: () => void;
 }
-declare const ActionButton: ({ actionLabel, actionClick, }: IActionButtonProps) => JSX.Element;
+declare const ActionButton: ({ actionLabel, actionCount, actionClick, }: IActionButtonProps) => JSX.Element;
 export default ActionButton;
 //# sourceMappingURL=ActionButton.d.ts.map

package/CardGroup/ActionButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ActionButton.d.ts","sourceRoot":"","sources":["../../src/CardGroup/ActionButton.tsx"],"names":[],"mappings":"AAGA,UAAU,kBAAkB;IAC1B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;CAC1B;AAED,QAAA,MAAM,YAAY,GAAI,+BAGnB,kBAAkB,KAAG,GAAG,CAAC,OAa3B,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"ActionButton.d.ts","sourceRoot":"","sources":["../../src/CardGroup/ActionButton.tsx"],"names":[],"mappings":"AAIA,UAAU,kBAAkB;IAC1B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;CAC1B;AAED,QAAA,MAAM,YAAY,GAAI,4CAInB,kBAAkB,KAAG,GAAG,CAAC,OAsB3B,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/CardGroup/CardGroup.d.ts

@@ -1,10 +1,13 @@
 import React from 'react';
+import { TagProps } from '../Tag/Tag';
 export interface ICardGroupProps {
     title?: string;
     subtitle?: string;
     variant?: 'minimal' | 'header';
     count?: number;
+    tag?: TagProps;
     actionLabel?: string;
+    actionCount?: number;
     actionClick?: () => void;
     children?: React.ReactNode;
 }

package/CardGroup/CardGroup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CardGroup.d.ts","sourceRoot":"","sources":["../../src/CardGroup/CardGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAK1C,MAAM,WAAW,eAAe;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,QAAA,MAAM,SAAS,wFAoCd,CAAC;AAIF,eAAe,SAAS,CAAC"}
+{"version":3,"file":"CardGroup.d.ts","sourceRoot":"","sources":["../../src/CardGroup/CardGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAI1C,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAEtC,MAAM,WAAW,eAAe;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,GAAG,CAAC,EAAE,QAAQ,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,QAAA,MAAM,SAAS,wFA0Cd,CAAC;AAIF,eAAe,SAAS,CAAC"}

package/CardGroup/Header.d.ts

@@ -1,8 +1,10 @@
+import { TagProps } from '../Tag/Tag';
 interface IHeaderProps {
     title?: string;
     subtitle?: string;
     count?: number;
+    tag?: TagProps;
 }
-declare const Header: ({ title, subtitle, count }: IHeaderProps) => JSX.Element;
+declare const Header: ({ title, subtitle, count, tag }: IHeaderProps) => JSX.Element;
 export default Header;
 //# sourceMappingURL=Header.d.ts.map

package/CardGroup/Header.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Header.d.ts","sourceRoot":"","sources":["../../src/CardGroup/Header.tsx"],"names":[],"mappings":"AAGA,UAAU,YAAY;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AACD,QAAA,MAAM,MAAM,GAAI,4BAA4B,YAAY,KAAG,GAAG,CAAC,OAgB9D,CAAC;AAEF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Header.d.ts","sourceRoot":"","sources":["../../src/CardGroup/Header.tsx"],"names":[],"mappings":"AAEA,OAAY,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAE3C,UAAU,YAAY;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,GAAG,CAAC,EAAE,QAAQ,CAAC;CAChB;AACD,QAAA,MAAM,MAAM,GAAI,iCAAiC,YAAY,KAAG,GAAG,CAAC,OAmBnE,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/Shortcut/Shortcut.d.ts

@@ -1,5 +1,15 @@
 import React from 'react';
 type ShortcutSize = 'tiny' | 'small' | 'medium';
+type ExclusiveTagOrCount = {
+    tag: string;
+    count?: never;
+} | {
+    tag?: never;
+    count: number;
+} | {
+    tag?: never;
+    count?: never;
+};
 export type ShortcutProps = {
     icon: React.ReactNode;
     label: string;
@@ -7,11 +17,9 @@ export type ShortcutProps = {
     size?: ShortcutSize;
     blocked?: boolean;
     disabled?: boolean;
-    count?: number;
     fullWidth?: boolean;
     orientation?: 'horizontal' | 'vertical';
-    tag?: string;
-} & React.ComponentPropsWithoutRef<'div'>;
+} & ExclusiveTagOrCount & React.ComponentPropsWithoutRef<'div'>;
 declare const Shortcut: ({ icon, label, description, size, blocked, disabled, fullWidth, orientation, count, tag, ...rest }: ShortcutProps) => React.ReactElement;
 export default Shortcut;
 //# sourceMappingURL=Shortcut.d.ts.map

package/Shortcut/Shortcut.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Shortcut.d.ts","sourceRoot":"","sources":["../../src/Shortcut/Shortcut.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,KAAK,YAAY,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAC;AAEhD,MAAM,MAAM,aAAa,GAAG;IAC1B,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACxC,GAAG,CAAC,EAAE,MAAM,CAAC;CACd,GAAG,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,CAAC;AAE1C,QAAA,MAAM,QAAQ,GAAI,oGAYf,aAAa,KAAG,KAAK,CAAC,YA0DxB,CAAC;AAEF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"Shortcut.d.ts","sourceRoot":"","sources":["../../src/Shortcut/Shortcut.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,KAAK,YAAY,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAC;AAEhD,KAAK,mBAAmB,GACpB;IAAE,GAAG,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,KAAK,CAAA;CAAE,GAC9B;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,GAC9B;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC;IAAC,KAAK,CAAC,EAAE,KAAK,CAAA;CAAE,CAAC;AAEnC,MAAM,MAAM,aAAa,GAAG;IAC1B,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;CACzC,GAAG,mBAAmB,GACrB,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,CAAC;AAExC,QAAA,MAAM,QAAQ,GAAI,oGAYf,aAAa,KAAG,KAAK,CAAC,YA+DxB,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/index.es.js

@@ -466,31 +466,35 @@ var Badge = e.forwardRef(function (_a, ref) {
 Badge.displayName = 'Badge';
 
 var Header = function (_a) {
-    var title = _a.title, subtitle = _a.subtitle, count = _a.count;
+    var title = _a.title, subtitle = _a.subtitle, count = _a.count, tag = _a.tag;
     return (e.createElement("div", { className: "ods-card-group__header" },
         e.createElement("div", { className: "ods-card-group__header--content" },
-            e.createElement("p", { className: "ods-typography ods-typography__heading4" }, title),
+            e.createElement("div", { className: "container-line" },
+                e.createElement("p", { className: "ods-typography ods-typography__heading4" }, title),
+                tag && e.createElement(Tag, __assign$1({ size: "medium", setIconOff: true }, tag))),
             subtitle && (e.createElement("p", { className: "ods-typography ods-typography__description" }, subtitle))),
         count !== undefined && (e.createElement(Badge, { variation: "medium", color: count === 0 ? 'neutral' : 'alert', count: count }))));
 };
 
 var ActionButton = function (_a) {
-    var actionLabel = _a.actionLabel, actionClick = _a.actionClick;
+    var actionLabel = _a.actionLabel, actionCount = _a.actionCount, actionClick = _a.actionClick;
     return (e.createElement(e.Fragment, null,
         e.createElement("hr", { className: "ods-divider" }),
         e.createElement("button", { onClick: actionClick, type: "button", className: "ods-card-group__action", "aria-label": actionLabel },
             e.createElement("span", { className: "ods-card-group__action--label" }, actionLabel),
-            e.createElement(re, { size: 20 }))));
+            e.createElement("div", { className: "ods-card-group__action--right" },
+                actionCount !== undefined && (e.createElement(Badge, { variation: "medium", color: actionCount === 0 ? 'neutral' : 'alert', count: actionCount })),
+                e.createElement(re, { size: 20 })))));
 };
 
 var CardGroup = forwardRef(function (_a, ref) {
-    var title = _a.title, subtitle = _a.subtitle, actionLabel = _a.actionLabel, actionClick = _a.actionClick, count = _a.count, children = _a.children, _b = _a.variant, variant = _b === void 0 ? 'minimal' : _b, rest = __rest$1(_a, ["title", "subtitle", "actionLabel", "actionClick", "count", "children", "variant"]);
+    var title = _a.title, subtitle = _a.subtitle, actionLabel = _a.actionLabel, actionCount = _a.actionCount, actionClick = _a.actionClick, count = _a.count, tag = _a.tag, children = _a.children, _b = _a.variant, variant = _b === void 0 ? 'minimal' : _b, rest = __rest$1(_a, ["title", "subtitle", "actionLabel", "actionCount", "actionClick", "count", "tag", "children", "variant"]);
     return (e.createElement("div", __assign$1({ ref: ref }, rest, { "data-testid": "card-group", className: classNames('ods-card-group', "ods-card-group--".concat(variant)) }),
-        (title || subtitle) && (e.createElement(Header, { title: title, subtitle: subtitle, count: count })),
+        (title || subtitle) && (e.createElement(Header, { title: title, subtitle: subtitle, count: count, tag: tag })),
         children && variant !== 'header' && (e.createElement(e.Fragment, null,
             (title || subtitle) && e.createElement("hr", { className: "ods-divider" }),
             e.createElement("div", null, children))),
-        actionLabel && variant !== 'header' && (e.createElement(ActionButton, { actionLabel: actionLabel, actionClick: actionClick }))));
+        actionLabel && variant !== 'header' && (e.createElement(ActionButton, { actionLabel: actionLabel, actionCount: actionCount, actionClick: actionClick }))));
 });
 CardGroup.displayName = 'CardGroup';
 
@@ -46883,11 +46887,12 @@ var Shortcut = function (_a) {
     return (e.createElement("div", __assign$1({ className: classNames('ods-shortcut', "ods-shortcut--".concat(size), blocked && 'ods-shortcut--blocked', disabled && 'ods-shortcut--disabled', fullWidth && 'ods-shortcut--full-width', count && 'ods-shortcut--with-badge', "ods-shortcut--".concat(orientation)) }, rest),
         blocked && (e.createElement("div", { className: "ods-shortcut__blocked" },
             e.createElement(At, null))),
-        count ? (e.createElement(Badge, { className: "ods-shortcut__badge", variation: "small", color: "alert", count: count })) : null,
+        !blocked && count ? (e.createElement(Badge, { className: "ods-shortcut__badge", variation: "small", color: disabled ? 'neutral' : 'alert', count: count })) : null,
+        !blocked && tag && orientation === 'vertical' && (e.createElement(Tag, { className: "ods-shortcut__tag", variant: "highlight", type: "important" }, tag)),
         e.createElement("div", { className: classNames('ods-shortcut__content', "ods-shortcut__content--".concat(orientation)) },
             e.createElement("div", { className: "ods-shortcut__icon" }, icon),
             e.createElement("h5", { className: classNames('ods-shortcut__label', 'ods-typography__heading5') }, label),
-            tag && (e.createElement(Tag, { variant: "highlight", type: "important" }, tag))),
+            tag && orientation === 'horizontal' && (e.createElement(Tag, { variant: "highlight", type: "important" }, tag))),
         size === 'medium' && description && (e.createElement("span", { className: classNames('ods-shortcut__description', 'ods-typography__description') }, description))));
 };