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
commercetools · Feb 9, 2024 · 52db947 · 52db947
1 parent c029c7c
commit 52db947
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 1 deletion.
diff --git a/.changeset/odd-students-fix.md 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
@@ -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
@@ -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>
 );