From 647498f8cecd5cadacd2331c2b86d0f5d4f8ea1c Mon Sep 17 00:00:00 2001
From: ievavizg <36439165+ievavizg@users.noreply.github.com>
Date: Fri, 4 Aug 2023 13:25:21 +0300
Subject: [PATCH] Handle close on Tag cross click (#633)

---
 package-lock.json                  | 4 ++--
 package.json                       | 2 +-
 src/components/tag/Tag.stories.mdx | 1 +
 src/components/tag/Tag.tsx         | 6 ++++--
 4 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index bdb1ae2d..30e05eea 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@nordcloud/gnui",
-  "version": "8.13.2",
+  "version": "8.13.3",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@nordcloud/gnui",
-      "version": "8.13.2",
+      "version": "8.13.3",
       "hasInstallScript": true,
       "license": "MIT",
       "dependencies": {
diff --git a/package.json b/package.json
index 74716c95..5d8f6ae3 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@nordcloud/gnui",
   "description": "Nordcloud Design System - a collection of reusable React components used in Nordcloud's SaaS products",
-  "version": "8.13.3",
+  "version": "8.13.4",
   "license": "MIT",
   "repository": {
     "type": "git",
diff --git a/src/components/tag/Tag.stories.mdx b/src/components/tag/Tag.stories.mdx
index 251ab1d6..4e356ee3 100644
--- a/src/components/tag/Tag.stories.mdx
+++ b/src/components/tag/Tag.stories.mdx
@@ -66,6 +66,7 @@ import { Breadcrumbs } from "../breadcrumbs";
       text="Help"
       showClose
       onClick={() => alert("clicked")}
+      onCloseClick={() => alert("clicked close")}
     />
     <Tag
       color="purple"
diff --git a/src/components/tag/Tag.tsx b/src/components/tag/Tag.tsx
index 6b304843..b5f5443c 100644
--- a/src/components/tag/Tag.tsx
+++ b/src/components/tag/Tag.tsx
@@ -12,6 +12,7 @@ type TagProps = {
   text?: string;
   icon?: SVGIconProps["name"];
   onClick?: () => void;
+  onCloseClick?: () => void;
   showClose?: boolean;
   isTransparent?: boolean;
 };
@@ -125,6 +126,7 @@ export function Tag({
   onClick,
   showClose,
   isTransparent,
+  onCloseClick,
   ...props
 }: TagProps) {
   return (
@@ -132,9 +134,9 @@ export function Tag({
       color={color}
       colorText={colorText}
       icon={icon}
-      onClick={onClick}
       showClose={showClose}
       isTransparent={isTransparent}
+      onClick={onCloseClick ? undefined : onClick}
       {...props}
     >
       {icon && (
@@ -145,7 +147,7 @@ export function Tag({
       {text && <div className="tag-text">{text}</div>}
       {showClose && (
         <div className="tag-close-button">
-          <SVGIcon name="close" size="sm" />
+          <SVGIcon name="close" size="sm" onClick={onCloseClick} />
         </div>
       )}
     </StyledTag>