@ceed/cds 1.34.1 → 1.36.0

package/dist/components/data-display/Badge.md

@@ -8,10 +8,10 @@ Badge supports multiple colors, variants, and sizes for flexible visual customiz
 
 ```tsx
 <Badge {...args}>
-  <IconButton>
-    <NotificationsIcon />
-  </IconButton>
-</Badge>
+    <IconButton>
+      <NotificationsIcon />
+    </IconButton>
+  </Badge>
 ```
 
 | Field        | Description         | Default   |
@@ -46,28 +46,30 @@ function MyComponent() {
 Basic Badge usage showing numeric counts, max overflow, and text content.
 
 ```tsx
-<div style={{
-  display: 'flex',
-  gap: '2rem'
-}}>
-<Badge badgeContent={4}>
-  <IconButton>
-    <NotificationsIcon />
-  </IconButton>
-</Badge>
-
-<Badge badgeContent={100} max={99}>
-  <IconButton>
-    <EmailIcon />
-  </IconButton>
-</Badge>
-
-<Badge badgeContent="NEW">
-  <IconButton>
-    <NotificationsIcon />
-  </IconButton>
-</Badge>
-</div>
+<div
+    style={{
+      display: "flex",
+      gap: "2rem"
+    }}
+  >
+    <Badge badgeContent={4}>
+      <IconButton>
+        <NotificationsIcon />
+      </IconButton>
+    </Badge>
+
+    <Badge badgeContent={100} max={99}>
+      <IconButton>
+        <EmailIcon />
+      </IconButton>
+    </Badge>
+
+    <Badge badgeContent="NEW">
+      <IconButton>
+        <NotificationsIcon />
+      </IconButton>
+    </Badge>
+  </div>
 ```
 
 ## Colors
@@ -75,40 +77,42 @@ Basic Badge usage showing numeric counts, max overflow, and text content.
 Apply semantic colors to convey the badge's meaning: `primary` for general counts, `danger` for urgent notifications, `success` for online status, and `warning` for attention items.
 
 ```tsx
-<div style={{
-  display: 'flex',
-  gap: '2rem'
-}}>
-<Badge badgeContent={4} color="primary">
-  <IconButton>
-    <NotificationsIcon />
-  </IconButton>
-</Badge>
-
-<Badge badgeContent={4} color="neutral">
-  <IconButton>
-    <NotificationsIcon />
-  </IconButton>
-</Badge>
-
-<Badge badgeContent={4} color="danger">
-  <IconButton>
-    <NotificationsIcon />
-  </IconButton>
-</Badge>
-
-<Badge badgeContent={4} color="success">
-  <IconButton>
-    <NotificationsIcon />
-  </IconButton>
-</Badge>
-
-<Badge badgeContent={4} color="warning">
-  <IconButton>
-    <NotificationsIcon />
-  </IconButton>
-</Badge>
-</div>
+<div
+    style={{
+      display: "flex",
+      gap: "2rem"
+    }}
+  >
+    <Badge badgeContent={4} color="primary">
+      <IconButton>
+        <NotificationsIcon />
+      </IconButton>
+    </Badge>
+
+    <Badge badgeContent={4} color="neutral">
+      <IconButton>
+        <NotificationsIcon />
+      </IconButton>
+    </Badge>
+
+    <Badge badgeContent={4} color="danger">
+      <IconButton>
+        <NotificationsIcon />
+      </IconButton>
+    </Badge>
+
+    <Badge badgeContent={4} color="success">
+      <IconButton>
+        <NotificationsIcon />
+      </IconButton>
+    </Badge>
+
+    <Badge badgeContent={4} color="warning">
+      <IconButton>
+        <NotificationsIcon />
+      </IconButton>
+    </Badge>
+  </div>
 ```
 
 ## Variants
@@ -116,34 +120,36 @@ Apply semantic colors to convey the badge's meaning: `primary` for general count
 Four style variants are available: `solid` (filled), `soft` (subtle background), `outlined` (border only), and `plain` (minimal).
 
 ```tsx
-<div style={{
-  display: 'flex',
-  gap: '2rem'
-}}>
-<Badge badgeContent={4} variant="solid">
-  <IconButton>
-    <NotificationsIcon />
-  </IconButton>
-</Badge>
-
-<Badge badgeContent={4} variant="soft">
-  <IconButton>
-    <NotificationsIcon />
-  </IconButton>
-</Badge>
-
-<Badge badgeContent={4} variant="outlined">
-  <IconButton>
-    <NotificationsIcon />
-  </IconButton>
-</Badge>
-
-<Badge badgeContent={4} variant="plain">
-  <IconButton>
-    <NotificationsIcon />
-  </IconButton>
-</Badge>
-</div>
+<div
+    style={{
+      display: "flex",
+      gap: "2rem"
+    }}
+  >
+    <Badge badgeContent={4} variant="solid">
+      <IconButton>
+        <NotificationsIcon />
+      </IconButton>
+    </Badge>
+
+    <Badge badgeContent={4} variant="soft">
+      <IconButton>
+        <NotificationsIcon />
+      </IconButton>
+    </Badge>
+
+    <Badge badgeContent={4} variant="outlined">
+      <IconButton>
+        <NotificationsIcon />
+      </IconButton>
+    </Badge>
+
+    <Badge badgeContent={4} variant="plain">
+      <IconButton>
+        <NotificationsIcon />
+      </IconButton>
+    </Badge>
+  </div>
 ```
 
 ## Sizes
@@ -151,29 +157,31 @@ Four style variants are available: `solid` (filled), `soft` (subtle background),
 Three sizes -- `sm`, `md`, and `lg` -- allow the badge to scale proportionally with its wrapped element.
 
 ```tsx
-<div style={{
-  display: 'flex',
-  gap: '2rem',
-  alignItems: 'center'
-}}>
-<Badge badgeContent={4} size="sm">
-  <IconButton size="sm">
-    <NotificationsIcon />
-  </IconButton>
-</Badge>
-
-<Badge badgeContent={4} size="md">
-  <IconButton size="md">
-    <NotificationsIcon />
-  </IconButton>
-</Badge>
-
-<Badge badgeContent={4} size="lg">
-  <IconButton size="lg">
-    <NotificationsIcon />
-  </IconButton>
-</Badge>
-</div>
+<div
+    style={{
+      display: "flex",
+      gap: "2rem",
+      alignItems: "center"
+    }}
+  >
+    <Badge badgeContent={4} size="sm">
+      <IconButton size="sm">
+        <NotificationsIcon />
+      </IconButton>
+    </Badge>
+
+    <Badge badgeContent={4} size="md">
+      <IconButton size="md">
+        <NotificationsIcon />
+      </IconButton>
+    </Badge>
+
+    <Badge badgeContent={4} size="lg">
+      <IconButton size="lg">
+        <NotificationsIcon />
+      </IconButton>
+    </Badge>
+  </div>
 ```
 
 ## With Avatar
@@ -181,18 +189,20 @@ Three sizes -- `sm`, `md`, and `lg` -- allow the badge to scale proportionally w
 Badge pairs naturally with Avatar to indicate user status (e.g., notification count or online indicator).
 
 ```tsx
-<div style={{
-  display: 'flex',
-  gap: '2rem'
-}}>
-<Badge badgeContent={4} color="danger">
-  <Avatar src="https://i.pravatar.cc/40?img=1" />
-</Badge>
-
-<Badge badgeContent="●" color="success">
-  <Avatar src="https://i.pravatar.cc/40?img=2" />
-</Badge>
-</div>
+<div
+    style={{
+      display: "flex",
+      gap: "2rem"
+    }}
+  >
+    <Badge badgeContent={4} color="danger">
+      <Avatar src="https://i.pravatar.cc/40?img=1" />
+    </Badge>
+
+    <Badge badgeContent="●" color="success">
+      <Avatar src="https://i.pravatar.cc/40?img=2" />
+    </Badge>
+  </div>
 ```
 
 ## Dot Badge
@@ -200,20 +210,22 @@ Badge pairs naturally with Avatar to indicate user status (e.g., notification co
 When no `badgeContent` is provided, Badge renders as a small dot. This is useful for simple presence or status indicators without a specific count.
 
 ```tsx
-<div style={{
-  display: 'flex',
-  gap: '2rem'
-}}>
-<Badge variant="solid" color="danger">
-  <IconButton>
-    <NotificationsIcon />
-  </IconButton>
-</Badge>
-
-<Badge variant="solid" color="success">
-  <Avatar src="https://i.pravatar.cc/40?img=3" />
-</Badge>
-</div>
+<div
+    style={{
+      display: "flex",
+      gap: "2rem"
+    }}
+  >
+    <Badge variant="solid" color="danger">
+      <IconButton>
+        <NotificationsIcon />
+      </IconButton>
+    </Badge>
+
+    <Badge variant="solid" color="success">
+      <Avatar src="https://i.pravatar.cc/40?img=3" />
+    </Badge>
+  </div>
 ```
 
 ## Max Count
@@ -221,28 +233,30 @@ When no `badgeContent` is provided, Badge renders as a small dot. This is useful
 Use the `max` prop to cap the displayed number. When `badgeContent` exceeds `max`, it renders as "max+" (e.g., "99+").
 
 ```tsx
-<div style={{
-  display: 'flex',
-  gap: '2rem'
-}}>
-<Badge badgeContent={99}>
-  <IconButton>
-    <NotificationsIcon />
-  </IconButton>
-</Badge>
-
-<Badge badgeContent={100} max={99}>
-  <IconButton>
-    <NotificationsIcon />
-  </IconButton>
-</Badge>
-
-<Badge badgeContent={1000} max={999}>
-  <IconButton>
-    <NotificationsIcon />
-  </IconButton>
-</Badge>
-</div>
+<div
+    style={{
+      display: "flex",
+      gap: "2rem"
+    }}
+  >
+    <Badge badgeContent={99}>
+      <IconButton>
+        <NotificationsIcon />
+      </IconButton>
+    </Badge>
+
+    <Badge badgeContent={100} max={99}>
+      <IconButton>
+        <NotificationsIcon />
+      </IconButton>
+    </Badge>
+
+    <Badge badgeContent={1000} max={999}>
+      <IconButton>
+        <NotificationsIcon />
+      </IconButton>
+    </Badge>
+  </div>
 ```
 
 ## Show Zero
@@ -250,28 +264,30 @@ Use the `max` prop to cap the displayed number. When `badgeContent` exceeds `max
 By default, Badge hides when `badgeContent` is `0`. Use the `showZero` prop to force it to remain visible.
 
 ```tsx
-<div style={{
-  display: 'flex',
-  gap: '2rem'
-}}>
-<div>
-  <p>Default (0 숨김)</p>
-  <Badge badgeContent={0}>
-    <IconButton>
-      <NotificationsIcon />
-    </IconButton>
-  </Badge>
-</div>
-
-<div>
-  <p>Show zero</p>
-  <Badge badgeContent={0} showZero>
-    <IconButton>
-      <NotificationsIcon />
-    </IconButton>
-  </Badge>
-</div>
-</div>
+<div
+    style={{
+      display: "flex",
+      gap: "2rem"
+    }}
+  >
+    <div>
+      <p>Default (0 숨김)</p>
+      <Badge badgeContent={0}>
+        <IconButton>
+          <NotificationsIcon />
+        </IconButton>
+      </Badge>
+    </div>
+
+    <div>
+      <p>Show zero</p>
+      <Badge badgeContent={0} showZero>
+        <IconButton>
+          <NotificationsIcon />
+        </IconButton>
+      </Badge>
+    </div>
+  </div>
 ```
 
 ## Common Use Cases