diff --git a/src/lib/components/Badge.stories.svelte b/src/lib/components/Badge.stories.svelte index 907d6dc..11441b6 100644 --- a/src/lib/components/Badge.stories.svelte +++ b/src/lib/components/Badge.stories.svelte @@ -6,9 +6,21 @@ title: 'Molecules/Badge', component: Badge, tags: ['autodocs'], + argTypes: { + color: { + control: 'select', + options: ['green', 'blue', 'amber', 'orange', 'purple', 'teal', 'slate', undefined], + }, + }, }); -Neu -Aktiv -Dringend + +Neu +Gründer +Mitglied +Anfrage läuft +Südwestthüringen +Ostthüringen +Mittelthüringen +Nordthüringen diff --git a/src/lib/components/Badge.svelte b/src/lib/components/Badge.svelte index efd127a..79b9857 100644 --- a/src/lib/components/Badge.svelte +++ b/src/lib/components/Badge.svelte @@ -7,16 +7,26 @@ class: className = "", }: { children?: Snippet; color?: string; class?: string } = $props(); + // Die einzige Badge-Farbquelle. Deckt alle CMS-badge.color-Werte ab + // (green/blue/amber/orange/purple/teal/slate) + Fallback. Marken-Töne + // (wald/himmel) wo möglich, sonst Tailwind-Palette für klar unterscheidbare + // Regionen-Badges. KEINE Eigenimplementierungen woanders — immer . function colorClasses(c?: string): string { switch (c) { - case "green": return "bg-wald-50 text-wald-700 border border-wald-200"; - case "blue": return "bg-himmel-50 text-himmel-700 border border-himmel-200"; - case "amber": return "bg-erde-50 text-erde-700 border border-erde-200"; - default: return "bg-stein-100 text-stein-600 border border-stein-200"; + case "green": return "bg-wald-50 text-wald-700 border-wald-200"; + case "blue": return "bg-himmel-50 text-himmel-700 border-himmel-200"; + case "amber": return "bg-amber-50 text-amber-700 border-amber-200"; + case "orange": return "bg-orange-50 text-orange-700 border-orange-200"; + case "purple": return "bg-purple-50 text-purple-700 border-purple-200"; + case "teal": return "bg-teal-50 text-teal-700 border-teal-200"; + case "slate": return "bg-slate-100 text-slate-700 border-slate-300"; + default: return "bg-stein-100 text-stein-600 border-stein-200"; } } - + {@render children?.()} diff --git a/src/lib/components/ContactCard.svelte b/src/lib/components/ContactCard.svelte index c278c1e..d75a364 100644 --- a/src/lib/components/ContactCard.svelte +++ b/src/lib/components/ContactCard.svelte @@ -3,6 +3,7 @@ import "$lib/iconify-offline"; import type { ContactEntry } from "$lib/block-types"; import { downloadVCard } from "$lib/vcard"; + import Badge from "$lib/components/Badge.svelte"; let { contact }: { contact: ContactEntry } = $props(); @@ -23,14 +24,10 @@ {#if contact.role || orgNames.length > 0}
{#if contact.role} - - {contact.role} - + {contact.role} {/if} {#each orgNames as org} - - {org} - + {org} {/each}
{/if} diff --git a/src/lib/components/blocks/AdressbuchBlock.svelte b/src/lib/components/blocks/AdressbuchBlock.svelte index bc00486..22c241a 100644 --- a/src/lib/components/blocks/AdressbuchBlock.svelte +++ b/src/lib/components/blocks/AdressbuchBlock.svelte @@ -6,6 +6,7 @@ import { downloadVCard, downloadVCardAll, buildVCardString } from "$lib/vcard"; import QrButton from "$lib/components/QrButton.svelte"; import Button from "$lib/ui/Button.svelte"; + import Badge from "$lib/components/Badge.svelte"; let { block }: { block: AdressbuchBlockData } = $props(); @@ -241,14 +242,10 @@ {#if contact.role || (contact.organisations ?? []).some((o) => typeof o === "object" && o.name)}
{#if contact.role} - - {contact.role} - + {contact.role} {/if} {#each (contact.organisations ?? []).filter((o): o is { _slug?: string; name?: string } => typeof o === "object" && !!o.name) as org} - - {org.name} - + {org.name} {/each}
{/if} diff --git a/src/lib/ui/Badge.stories.ts b/src/lib/ui/Badge.stories.ts deleted file mode 100644 index db55968..0000000 --- a/src/lib/ui/Badge.stories.ts +++ /dev/null @@ -1,16 +0,0 @@ -import type { Meta, StoryObj } from '@storybook/sveltekit'; -import Badge from './Badge.svelte'; - -const meta = { - title: 'Atoms/Badge', - component: Badge, - tags: ['autodocs'], - args: { label: 'Neu' }, -} satisfies Meta; - -export default meta; -type Story = StoryObj; - -export const Default: Story = {}; -export const AlsLink: Story = { args: { label: 'Mehr', href: '#' } }; -export const Aktiv: Story = { args: { label: 'Aktiv', active: true } }; diff --git a/src/lib/ui/Badge.svelte b/src/lib/ui/Badge.svelte deleted file mode 100644 index b7a7cc2..0000000 --- a/src/lib/ui/Badge.svelte +++ /dev/null @@ -1,57 +0,0 @@ - - -{#if href} - - {label} - -{:else if onclick} - -{:else} - {label} -{/if} diff --git a/src/lib/ui/index.ts b/src/lib/ui/index.ts index 286f467..c4306eb 100644 --- a/src/lib/ui/index.ts +++ b/src/lib/ui/index.ts @@ -12,5 +12,4 @@ export { default as Toggle } from './Toggle.svelte'; export { default as Checkbox } from './Checkbox.svelte'; export { default as Radio } from './Radio.svelte'; export { default as Slider } from './Slider.svelte'; -export { default as Badge } from './Badge.svelte'; export { default as Tooltip } from './Tooltip.svelte';