Skip to content

Commit

Permalink
Merge pull request #28 from kampsy/dev
Browse files Browse the repository at this point in the history 
refactor: 🎨 remove capitalize from badge inner span
  • Loading branch information
@kampsy
kampsy authored Dec 24, 2024
2 parents cee42c4 + ae9235e commit 3177dbb
Show file tree
Hide file tree
Showing 3 changed files with 43 additions and 43 deletions.
42 changes: 21 additions & 21 deletions src/docs/data/badge.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,46 +2,46 @@ export const badgeVariants = `
import { Badge } from 'kampsy-ui';
<div class="flex flex-col gap-2">
<div class="flex gap-1">
<div class="flex gap-1 capitalize">
<Badge variant="gray">gray</Badge>
<Badge variant="gray-subtle">gray-subtle</Badge>
</div>
<div class="flex gap-1">
<div class="flex gap-1 capitalize">
<Badge variant="blue">blue</Badge>
<Badge variant="blue-subtle">blue-subtle</Badge>
</div>
<div class="flex gap-1">
<div class="flex gap-1 capitalize">
<Badge variant="purple">purple</Badge>
<Badge variant="purple-subtle">purple-subtle</Badge>
</div>
<div class="flex gap-1">
<div class="flex gap-1 capitalize">
<Badge variant="amber">amber</Badge>
<Badge variant="amber-subtle">amber-subtle</Badge>
</div>
<div class="flex gap-1">
<div class="flex gap-1 capitalize">
<Badge variant="red">red</Badge>
<Badge variant="red-subtle">red-subtle</Badge>
</div>
<div class="flex gap-1">
<div class="flex gap-1 capitalize">
<Badge variant="pink">pink</Badge>
<Badge variant="pink-subtle">pink-subtle</Badge>
</div>
<div class="flex gap-1">
<div class="flex gap-1 capitalize">
<Badge variant="green">green</Badge>
<Badge variant="green-subtle">green-subtle</Badge>
</div>
<div class="flex gap-1">
<div class="flex gap-1 capitalize">
<Badge variant="teal">teal</Badge>
<Badge variant="teal-subtle">teal-subtle</Badge>
</div>
<div class="flex gap-1">
<div class="flex gap-1 capitalize">
<Badge variant="inverted">inverted</Badge>
</div>
</div>`;
Expand All @@ -51,15 +51,15 @@ import { Badge } from 'kampsy-ui';
<div class="flex flex-col gap-2">
<div class="flex gap-1">
<div class="flex gap-1 capitalize">
<Badge size="sm" >small</Badge>
</div>
<div class="flex gap-1">
<div class="flex gap-1 capitalize">
<Badge size="md" >medium</Badge>
</div>
<div class="flex gap-1">
<div class="flex gap-1 capitalize">
<Badge size="lg" >large</Badge>
</div>
</div>`;
Expand All @@ -70,7 +70,7 @@ import { Shield } from 'kampsy-ui/icons';
<div class="flex flex-col gap-2">
<div class="flex items-center gap-1">
<div class="flex items-center gap-1 capitalize">
<Badge icon={Shield} size="lg" variant="gray">gray</Badge>
<Badge icon={Shield} size="md" variant="gray" >gray</Badge>
<Badge icon={Shield} size="sm" variant="gray">gray</Badge>
Expand All @@ -79,7 +79,7 @@ import { Shield } from 'kampsy-ui/icons';
<Badge icon={Shield} size="lg" variant="gray-subtle">gray</Badge>
</div>
<div class="flex items-center gap-1">
<div class="flex items-center gap-1 capitalize">
<Badge icon={Shield} size="lg" variant="blue">blue</Badge>
<Badge icon={Shield} size="md" variant="blue" >blue</Badge>
<Badge icon={Shield} size="sm" variant="blue">blue</Badge>
Expand All @@ -88,7 +88,7 @@ import { Shield } from 'kampsy-ui/icons';
<Badge icon={Shield} size="lg" variant="blue-subtle">blue</Badge>
</div>
<div class="flex items-center gap-1">
<div class="flex items-center gap-1 capitalize">
<Badge icon={Shield} size="lg" variant="purple">purple</Badge>
<Badge icon={Shield} size="md" variant="purple" >purple</Badge>
<Badge icon={Shield} size="sm" variant="purple">purple</Badge>
Expand All @@ -97,7 +97,7 @@ import { Shield } from 'kampsy-ui/icons';
<Badge icon={Shield} size="lg" variant="purple-subtle">purple</Badge>
</div>
<div class="flex items-center gap-1">
<div class="flex items-center gap-1 capitalize">
<Badge icon={Shield} size="lg" variant="amber">amber</Badge>
<Badge icon={Shield} size="md" variant="amber" >amber</Badge>
<Badge icon={Shield} size="sm" variant="amber">amber</Badge>
Expand All @@ -106,7 +106,7 @@ import { Shield } from 'kampsy-ui/icons';
<Badge icon={Shield} size="lg" variant="amber-subtle">amber</Badge>
</div>
<div class="flex items-center gap-1">
<div class="flex items-center gap-1 capitalize">
<Badge icon={Shield} size="lg" variant="red">red</Badge>
<Badge icon={Shield} size="md" variant="red" >red</Badge>
<Badge icon={Shield} size="sm" variant="red">red</Badge>
Expand All @@ -115,7 +115,7 @@ import { Shield } from 'kampsy-ui/icons';
<Badge icon={Shield} size="lg" variant="red-subtle">red</Badge>
</div>
<div class="flex items-center gap-1">
<div class="flex items-center gap-1 capitalize">
<Badge icon={Shield} size="lg" variant="pink">pink</Badge>
<Badge icon={Shield} size="md" variant="pink" >pink</Badge>
<Badge icon={Shield} size="sm" variant="pink">pink</Badge>
Expand All @@ -124,7 +124,7 @@ import { Shield } from 'kampsy-ui/icons';
<Badge icon={Shield} size="lg" variant="pink-subtle">pink</Badge>
</div>
<div class="flex items-center gap-1">
<div class="flex items-center gap-1 capitalize">
<Badge icon={Shield} size="lg" variant="green">green</Badge>
<Badge icon={Shield} size="md" variant="green" >green</Badge>
<Badge icon={Shield} size="sm" variant="green">green</Badge>
Expand All @@ -133,7 +133,7 @@ import { Shield } from 'kampsy-ui/icons';
<Badge icon={Shield} size="lg" variant="green-subtle">green</Badge>
</div>
<div class="flex items-center gap-1">
<div class="flex items-center gap-1 capitalize">
<Badge icon={Shield} size="lg" variant="teal">teal</Badge>
<Badge icon={Shield} size="md" variant="teal" >teal</Badge>
<Badge icon={Shield} size="sm" variant="teal">teal</Badge>
Expand All @@ -142,7 +142,7 @@ import { Shield } from 'kampsy-ui/icons';
<Badge icon={Shield} size="lg" variant="teal-subtle">teal</Badge>
</div>
<div class="flex items-center gap-1">
<div class="flex items-center gap-1 capitalize">
<Badge icon={Shield} size="lg" variant="inverted">inverted</Badge>
<Badge icon={Shield} size="md" variant="inverted" >inverted</Badge>
<Badge icon={Shield} size="sm" variant="inverted">inverted</Badge>
Expand Down
2 changes: 1 addition & 1 deletion src/lib/badge/badge.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -113,7 +113,7 @@
{/snippet}

<span class="flex items-center justify-center rounded-full {badgeClass} {klass}">
<span class="flex items-center {iconXGap} capitalize">
<span class="flex items-center {iconXGap}">
{@render iconSnip()}
{@render children()}
</span>
Expand Down
42 changes: 21 additions & 21 deletions src/routes/badge/+page.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,47 +53,47 @@
<div class="mt-4 xl:mt-7">
{#snippet demo()}
<div class="flex flex-col gap-2">
<div class="flex gap-1">
<div class="flex gap-1 capitalize">
<Badge variant="gray">gray</Badge>
<Badge variant="gray-subtle">gray-subtle</Badge>
</div>

<div class="flex gap-1">
<div class="flex gap-1 capitalize">
<Badge variant="blue">blue</Badge>
<Badge variant="blue-subtle">blue-subtle</Badge>
</div>

<div class="flex gap-1">
<div class="flex gap-1 capitalize">
<Badge variant="purple">purple</Badge>
<Badge variant="purple-subtle">purple-subtle</Badge>
</div>

<div class="flex gap-1">
<div class="flex gap-1 capitalize">
<Badge variant="amber">amber</Badge>
<Badge variant="amber-subtle">amber-subtle</Badge>
</div>

<div class="flex gap-1">
<div class="flex gap-1 capitalize">
<Badge variant="red">red</Badge>
<Badge variant="red-subtle">red-subtle</Badge>
</div>

<div class="flex gap-1">
<div class="flex gap-1 capitalize">
<Badge variant="pink">pink</Badge>
<Badge variant="pink-subtle">pink-subtle</Badge>
</div>

<div class="flex gap-1">
<div class="flex gap-1 capitalize">
<Badge variant="green">green</Badge>
<Badge variant="green-subtle">green-subtle</Badge>
</div>

<div class="flex gap-1">
<div class="flex gap-1 capitalize">
<Badge variant="teal">teal</Badge>
<Badge variant="teal-subtle">teal-subtle</Badge>
</div>

<div class="flex gap-1">
<div class="flex gap-1 capitalize">
<Badge variant="inverted">inverted</Badge>
</div>
</div>
Expand All @@ -113,15 +113,15 @@
<div class="mt-4 xl:mt-7">
{#snippet demo()}
<div class="flex flex-col gap-2">
<div class="flex gap-1">
<div class="flex gap-1 capitalize">
<Badge size="sm">small</Badge>
</div>

<div class="flex gap-1">
<div class="flex gap-1 capitalize">
<Badge size="md">medium</Badge>
</div>

<div class="flex gap-1">
<div class="flex gap-1 capitalize">
<Badge size="lg">large</Badge>
</div>
</div>
Expand All @@ -142,7 +142,7 @@
<div class="mt-4 xl:mt-7">
{#snippet demo()}
<div class="flex flex-col gap-2">
<div class="flex items-center gap-1">
<div class="flex items-center gap-1 capitalize">
<Badge icon={Shield} size="lg" variant="gray">gray</Badge>
<Badge icon={Shield} size="md" variant="gray" >gray</Badge>
<Badge icon={Shield} size="sm" variant="gray">gray</Badge>
Expand All @@ -151,7 +151,7 @@
<Badge icon={Shield} size="lg" variant="gray-subtle">gray</Badge>
</div>

<div class="flex items-center gap-1">
<div class="flex items-center gap-1 capitalize">
<Badge icon={Shield} size="lg" variant="blue">blue</Badge>
<Badge icon={Shield} size="md" variant="blue" >blue</Badge>
<Badge icon={Shield} size="sm" variant="blue">blue</Badge>
Expand All @@ -160,7 +160,7 @@
<Badge icon={Shield} size="lg" variant="blue-subtle">blue</Badge>
</div>

<div class="flex items-center gap-1">
<div class="flex items-center gap-1 capitalize">
<Badge icon={Shield} size="lg" variant="purple">purple</Badge>
<Badge icon={Shield} size="md" variant="purple" >purple</Badge>
<Badge icon={Shield} size="sm" variant="purple">purple</Badge>
Expand All @@ -169,7 +169,7 @@
<Badge icon={Shield} size="lg" variant="purple-subtle">purple</Badge>
</div>

<div class="flex items-center gap-1">
<div class="flex items-center gap-1 capitalize">
<Badge icon={Shield} size="lg" variant="amber">amber</Badge>
<Badge icon={Shield} size="md" variant="amber" >amber</Badge>
<Badge icon={Shield} size="sm" variant="amber">amber</Badge>
Expand All @@ -178,7 +178,7 @@
<Badge icon={Shield} size="lg" variant="amber-subtle">amber</Badge>
</div>

<div class="flex items-center gap-1">
<div class="flex items-center gap-1 capitalize">
<Badge icon={Shield} size="lg" variant="red">red</Badge>
<Badge icon={Shield} size="md" variant="red" >red</Badge>
<Badge icon={Shield} size="sm" variant="red">red</Badge>
Expand All @@ -187,7 +187,7 @@
<Badge icon={Shield} size="lg" variant="red-subtle">red</Badge>
</div>

<div class="flex items-center gap-1">
<div class="flex items-center gap-1 capitalize">
<Badge icon={Shield} size="lg" variant="pink">pink</Badge>
<Badge icon={Shield} size="md" variant="pink" >pink</Badge>
<Badge icon={Shield} size="sm" variant="pink">pink</Badge>
Expand All @@ -196,7 +196,7 @@
<Badge icon={Shield} size="lg" variant="pink-subtle">pink</Badge>
</div>

<div class="flex items-center gap-1">
<div class="flex items-center gap-1 capitalize">
<Badge icon={Shield} size="lg" variant="green">green</Badge>
<Badge icon={Shield} size="md" variant="green" >green</Badge>
<Badge icon={Shield} size="sm" variant="green">green</Badge>
Expand All @@ -205,7 +205,7 @@
<Badge icon={Shield} size="lg" variant="green-subtle">green</Badge>
</div>

<div class="flex items-center gap-1">
<div class="flex items-center gap-1 capitalize">
<Badge icon={Shield} size="lg" variant="teal">teal</Badge>
<Badge icon={Shield} size="md" variant="teal" >teal</Badge>
<Badge icon={Shield} size="sm" variant="teal">teal</Badge>
Expand All @@ -214,7 +214,7 @@
<Badge icon={Shield} size="lg" variant="teal-subtle">teal</Badge>
</div>

<div class="flex items-center gap-1">
<div class="flex items-center gap-1 capitalize">
<Badge icon={Shield} size="lg" variant="inverted">inverted</Badge>
<Badge icon={Shield} size="md" variant="inverted" >inverted</Badge>
<Badge icon={Shield} size="sm" variant="inverted">inverted</Badge>
Expand Down

0 comments on commit 3177dbb

Please sign in to comment.