design system token v0.1

stories/Composition/Footer.stories.tsx

@@ -0,0 +1,92 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { Footer } from '@/components/ui/footer'
+import { Logo } from '@/components/ui/logo'
+import { Button } from '@/components/ui/button'
+
+const meta = {
+  title: 'Composition/Footer',
+  component: Footer,
+  tags: ['autodocs'],
+  parameters: { layout: 'fullscreen' },
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['minimal', 'full'],
+    },
+  },
+} satisfies Meta<typeof Footer>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Minimal: Story = {
+  args: {
+    variant: 'minimal',
+    logo: <Logo size="sm" />,
+    copyright: <>&copy; 2026 Greyhaven. All rights reserved.</>,
+    actions: (
+      <div className="flex gap-4 text-sm text-muted-foreground">
+        <a href="#" className="hover:text-foreground transition-colors">Privacy</a>
+        <a href="#" className="hover:text-foreground transition-colors">Terms</a>
+        <a href="#" className="hover:text-foreground transition-colors">Contact</a>
+      </div>
+    ),
+  },
+}
+
+export const Full: Story = {
+  args: {
+    variant: 'full',
+    logo: <Logo size="md" />,
+    copyright: <>&copy; 2026 Greyhaven. All rights reserved.</>,
+    linkGroups: [
+      {
+        title: 'Product',
+        links: [
+          { label: 'Features', href: '#' },
+          { label: 'Pricing', href: '#' },
+          { label: 'Changelog', href: '#' },
+          { label: 'Docs', href: '#' },
+        ],
+      },
+      {
+        title: 'Company',
+        links: [
+          { label: 'About', href: '#' },
+          { label: 'Blog', href: '#' },
+          { label: 'Careers', href: '#' },
+          { label: 'Contact', href: '#' },
+        ],
+      },
+      {
+        title: 'Legal',
+        links: [
+          { label: 'Privacy Policy', href: '#' },
+          { label: 'Terms of Service', href: '#' },
+          { label: 'Cookie Policy', href: '#' },
+        ],
+      },
+    ],
+    actions: (
+      <div className="flex gap-2">
+        <Button variant="ghost" size="sm">Twitter</Button>
+        <Button variant="ghost" size="sm">GitHub</Button>
+        <Button variant="ghost" size="sm">Discord</Button>
+      </div>
+    ),
+  },
+}
+
+export const MinimalNoCopyright: Story = {
+  args: {
+    variant: 'minimal',
+    logo: <Logo size="sm" />,
+    actions: (
+      <div className="flex gap-4 text-sm text-muted-foreground">
+        <a href="#" className="hover:text-foreground transition-colors">Docs</a>
+        <a href="#" className="hover:text-foreground transition-colors">GitHub</a>
+      </div>
+    ),
+  },
+}