feat(footer,org): Footer-Redesign + OrganisationCard auf InfoCard-Basis
Footer: - Newsletter 2-spaltig (Titel/Desc links, Formular rechts), Desc als Translation-Key newsletter_inline_desc - Link-Spalten-Überschriften als kleine Label-Kappen, Links ohne Unterstrich - Bottom-Bar: Logo + Site-Name (data.siteName) links, Copyright/Lizenz rechts - Site-Name-Default "Windwiderstand Thüringen" (constants.ts) OrganisationCard: - Neue Komponente auf InfoCard-Basis; InfoCard um href/media/badge/footer-Slots erweitert - OrganisationsBlock: 4 divergierende Kartenpfade → 1 OrganisationCard - Story + CTA-Button (mitmachen) size md + Icon Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -0,0 +1,54 @@
|
||||
import type { Meta, StoryObj } from '@storybook/sveltekit';
|
||||
import OrganisationCard from './OrganisationCard.svelte';
|
||||
import type { OrganisationEntry } from '$lib/block-types';
|
||||
|
||||
const LOGO =
|
||||
'https://cms.pm86.de/api/assets/pages/img_2814-ar4x2.webp?_environment=windwiderstand';
|
||||
|
||||
const base: OrganisationEntry = {
|
||||
name: 'BI Steigerwald',
|
||||
description:
|
||||
'Bürgerinitiative gegen überdimensionierte Windkraftplanung im Steigerwald. Aktiv seit 2021.',
|
||||
link: { url: 'https://example.org' },
|
||||
};
|
||||
|
||||
const meta = {
|
||||
title: 'Molecules/OrganisationCard',
|
||||
component: OrganisationCard,
|
||||
tags: ['autodocs'],
|
||||
parameters: { layout: 'centered' },
|
||||
argTypes: {
|
||||
compact: { control: 'boolean' },
|
||||
},
|
||||
} satisfies Meta<typeof OrganisationCard>;
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof meta>;
|
||||
|
||||
// Logo aus CMS.
|
||||
export const MitLogo: Story = {
|
||||
args: { org: { ...base, logo: { src: LOGO } } },
|
||||
};
|
||||
|
||||
// Ohne Logo → Fisch-Fallback.
|
||||
export const FischFallback: Story = {
|
||||
args: { org: { ...base, logo: undefined } },
|
||||
};
|
||||
|
||||
// Badge oben rechts + Social-Chips.
|
||||
export const BadgeUndSocial: Story = {
|
||||
args: {
|
||||
org: {
|
||||
...base,
|
||||
logo: { src: LOGO },
|
||||
badge: { label: 'Neu', color: 'green' },
|
||||
whatsapp: 'https://chat.whatsapp.com/xyz',
|
||||
youtube: 'https://youtube.com/@example',
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
// Kompakt: Logo links, kein Social, dichteres Grid.
|
||||
export const Kompakt: Story = {
|
||||
args: { org: { ...base, logo: { src: LOGO } }, compact: true },
|
||||
};
|
||||
Reference in New Issue
Block a user