Merge pull request #353 from appwrite/feat-add-badge-to-fieldset

Author: ItzNotABug

v2/pink-sb/src/lib/Fieldset.svelte

@@ -1,9 +1,23 @@
 <script lang="ts">
+    import Badge from './Badge.svelte';
+    import Stack from './layout/Stack.svelte';
+
     export let legend: string;
+    export let badge: string | undefined = undefined;
+    export let badgeVariant: 'primary' | 'secondary' | 'accent' = 'secondary';
 </script>
 
 <fieldset>
-    <legend><span>{legend}</span></legend>
+    <legend>
+        <span>
+            <Stack inline direction="row" alignItems="center" gap="xxs">
+                <span class="legend-text">{legend}</span>
+                {#if badge}
+                    <Badge content={badge} variant={badgeVariant} size="xs" />
+                {/if}
+            </Stack>
+        </span>
+    </legend>
     <div class="content"><slot /></div>
 </fieldset>
 
@@ -20,8 +34,7 @@
         margin-left: var(--space-6, 12px);
     }
 
-    span {
-        padding: 0 var(--space-2, 4px);
+    .legend-text {
         font-family: var(--font-family-sansserif);
         font-size: var(--font-size-xs, 12px);
         font-style: normal;

v2/pink-sb/src/stories/Fieldset.stories.svelte

@@ -8,6 +8,15 @@
         component: Fieldset,
         args: {
             legend: 'Legend'
+        },
+        argTypes: {
+            badge: {
+                control: { type: 'text' }
+            },
+            badgeVariant: {
+                control: { type: 'select' },
+                options: ['primary', 'secondary', 'accent']
+            }
         }
     };
 </script>
@@ -17,6 +26,12 @@
         <Story name="Default" let:args>
             <Fieldset {...args}><div class="demo-block">Demo block</div></Fieldset>
         </Story>
+
+        <Story name="With Badge" let:args>
+            <Fieldset {...args} badge="New">
+                <div class="demo-block">Demo block with badge</div>
+            </Fieldset>
+        </Story>
     </div>
 </div>