From 52db947d640734e2ef6e3afabe7382ac10c5eaae Mon Sep 17 00:00:00 2001
From: Klaudija Ljevar <klaudija.ljevar@gmail.com>
Date: Fri, 9 Feb 2024 09:13:58 +0100
Subject: [PATCH] Stamp spacings for the label and icon (#2717)

* chore: adjust the spacings of the stamp's icon and label

* chore: changeset

* chore: updating the tests

* chore: updating the tests
---
 .changeset/odd-students-fix.md                      | 5 +++++
 packages/components/stamp/src/stamp.tsx             | 5 ++++-
 packages/components/stamp/src/stamp.visualroute.jsx | 7 +++++++
 3 files changed, 16 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/odd-students-fix.md

diff --git a/.changeset/odd-students-fix.md b/.changeset/odd-students-fix.md
new file mode 100644
index 0000000000..996643e27e
--- /dev/null
+++ b/.changeset/odd-students-fix.md
@@ -0,0 +1,5 @@
+---
+'@commercetools-uikit/stamp': patch
+---
+
+Adjust the spacing for the stamp's icon and label.
diff --git a/packages/components/stamp/src/stamp.tsx b/packages/components/stamp/src/stamp.tsx
index c8395b9c1d..972246f57e 100644
--- a/packages/components/stamp/src/stamp.tsx
+++ b/packages/components/stamp/src/stamp.tsx
@@ -189,7 +189,10 @@ const Stamp = (props: TStampProps) => {
         getPaddingStyle(props),
       ]}
     >
-      <SpacingsInline alignItems="center">
+      <SpacingsInline
+        alignItems="center"
+        scale={props.isCondensed ? 'xs' : 's'}
+      >
         {Icon}
         {props.label ? <StampLabel>{props.label}</StampLabel> : props.children}
       </SpacingsInline>
diff --git a/packages/components/stamp/src/stamp.visualroute.jsx b/packages/components/stamp/src/stamp.visualroute.jsx
index 777632fd66..8fbaaba7e7 100644
--- a/packages/components/stamp/src/stamp.visualroute.jsx
+++ b/packages/components/stamp/src/stamp.visualroute.jsx
@@ -1,4 +1,5 @@
 import { Stamp } from '@commercetools-frontend/ui-kit';
+import { ClockIcon } from '@commercetools-uikit/icons';
 import { Suite, Spec } from '../../../../test/percy';
 
 export const routePath = '/stamp';
@@ -28,5 +29,11 @@ export const component = () => (
         Secondary
       </Stamp>
     </Spec>
+    <Spec label="when condensed with icon and label">
+      <Stamp tone="information" isCondensed={true} label="Hello" icon={<ClockIcon />} />
+    </Spec>
+    <Spec label="when not condensed with icon and label">
+      <Stamp tone="information" isCondensed={false} label="Hello" icon={<ClockIcon />} />
+    </Spec>
   </Suite>
 );