added button component

app/View/Components/Card.php

@@ -1,21 +0,0 @@
-<?php
-
-declare(strict_types=1);
-
-namespace App\View\Components;
-
-use Illuminate\Contracts\View\View;
-use Illuminate\View\Component;
-
-class Card extends Component
-{
-    public function __construct(public string $header = '')
-    {
-        //
-    }
-
-    public function render(): View
-    {
-        return view('components.card');
-    }
-}

resources/css/app.css

@@ -24,7 +24,7 @@
     --color-background-dark: #E2E8F0;
 
     /* SURFACE */
-    --color-surface: #FFFFFF;
+    --color-surface: #ffffff;
     --color-surface-muted: #F1F5F9;
 
     /* TEXT */

resources/views/components/card.blade.php

@@ -1,10 +0,0 @@
-<div class="card bg-surface rounded border border-primary shadow">
-    @if(!empty($header))
-    <div class="card-header p-4 border-b border-primary">
-        <h3 class="font-semibold">{{ $header }}</h3>
-    </div>
-    @endif
-    <div class="card-body p-4">
-        {{ $slot }}
-    </div>
-</div>

resources/views/storybook/index.blade.php

@@ -10,10 +10,67 @@
 
         <h1 class="text-3xl font-bold">Storybook</h1>
 
-        @include('storybook.sections.colours')
+        <!-- COLOURS -->
-        @include('storybook.sections.buttons')
+        <section class="space-y-4">
-        @include('storybook.sections.cards')
+            <h2 class="text-xl font-semibold">Colors</h2>
-        @include('storybook.sections.typography')
+
+            <div class="grid grid-cols-3 gap-4">
+                <div class="p-4 bg-primary text-text-inverted rounded">Primary</div>
+                <div class="p-4 bg-secondary text-black rounded">Secondary</div>
+                <div class="p-4 bg-surface border rounded">Surface</div>
+            </div>
+        </section>
+
+        <!-- BUTTONS -->
+        <section class="space-y-4">
+            <h2 class="text-xl font-semibold">Buttons</h2>
+            <h3 class="text-l font-semibold">Enabled</h3>
+
+            <div class="flex gap-4">
+                <x-button onclick="alert('Default was clicked!')">Default</x-button>
+
+                <x-button variant="primary" onclick="alert('Primary was clicked!')">Primary</x-button>
+
+
+                <x-button variant="secondary" onclick="alert('Secondary was clicked!')">Secondary</x-button>
+
+
+                <x-button variant="outline" onclick="alert('Outline was clicked!')">Outline</x-button>
+            </div>
+
+            <h3 class="text-l font-semibold">Disabled</h3>
+
+            <div class="flex gap-4">
+                <x-button disabled>Default</x-button>
+
+                <x-button variant="primary" disabled>Primary</x-button>
+
+
+                <x-button variant="secondary" disabled>Secondary</x-button>
+
+
+                <x-button variant="outline" disabled>Outline</x-button>
+            </div>
+        </section>
+
+        <!-- CARDS -->
+        <section class="space-y-4">
+            <h2 class="text-xl font-semibold">Cards</h2>
+
+            <div class="bg-surface p-6 rounded shadow">
+                <h3 class="font-semibold">Card title</h3>
+                <p class="text-text-muted">This is a simple card component.</p>
+            </div>
+        </section>
+
+        <!-- TYPOGRAPHY -->
+        <section class="space-y-2">
+            <h2 class="text-xl font-semibold">Typography</h2>
+
+            <p class="text-text">Default text</p>
+            <p class="text-text-muted">Muted text</p>
+            <p class="text-primary">Primary text</p>
+        </section>
 
     </body>
 </html>

resources/views/storybook/sections/buttons.blade.php

@@ -1,30 +0,0 @@
-<section class="space-y-4">
-    <h2 class="text-xl font-semibold">Buttons</h2>
-    <h3 class="text-l font-semibold">Enabled</h3>
-
-    <div class="flex gap-4">
-        <x-button onclick="alert('Default was clicked!')">Default</x-button>
-
-        <x-button variant="primary" onclick="alert('Primary was clicked!')">Primary</x-button>
-
-
-        <x-button variant="secondary" onclick="alert('Secondary was clicked!')">Secondary</x-button>
-
-
-        <x-button variant="outline" onclick="alert('Outline was clicked!')">Outline</x-button>
-    </div>
-
-    <h3 class="text-l font-semibold">Disabled</h3>
-
-    <div class="flex gap-4">
-        <x-button disabled>Default</x-button>
-
-        <x-button variant="primary" disabled>Primary</x-button>
-
-
-        <x-button variant="secondary" disabled>Secondary</x-button>
-
-
-        <x-button variant="outline" disabled>Outline</x-button>
-    </div>
-</section>

resources/views/storybook/sections/cards.blade.php

@@ -1,13 +0,0 @@
-<section class="space-y-4">
-    <h2 class="text-xl font-semibold">Cards</h2>
-    <h3 class="text-l font-semibold">With Header</h3>
-
-    <x-card header="Card Header">
-        <p class="text-text-muted">This is a card component with header.</p>
-    </x-card>
-
-    <h3 class="text-l font-semibold">Without Header</h3>
-    <x-card>
-        <p class="text-text-muted">This is a card component without header.</p>
-    </x-card>
-</section>

resources/views/storybook/sections/colours.blade.php

@@ -1,9 +0,0 @@
-<section class="space-y-4">
-    <h2 class="text-xl font-semibold">Colors</h2>
-
-    <div class="grid grid-cols-3 gap-4">
-        <div class="p-4 bg-primary text-text-inverted rounded">Primary</div>
-        <div class="p-4 bg-secondary text-black rounded">Secondary</div>
-        <div class="p-4 bg-surface border rounded">Surface</div>
-    </div>
-</section>

resources/views/storybook/sections/typography.blade.php

@@ -1,7 +0,0 @@
-<section class="space-y-2">
-    <h2 class="text-xl font-semibold">Typography</h2>
-
-    <p class="text-text">Default text</p>
-    <p class="text-text-muted">Muted text</p>
-    <p class="text-primary">Primary text</p>
-</section>

tests/Feature/Component/CardTest.php

@@ -1,34 +0,0 @@
-<?php
-
-declare(strict_types=1);
-
-namespace Tests\Feature\Component;
-
-use Tests\TestCase;
-
-class CardTest extends TestCase
-{
-    public function testCardWithHeader(): void
-    {
-        $view = $this->blade('<x-card header="Test Header">Card Content</x-card>');
-
-        $view->assertSeeHtml('<div class="card-header ');
-        $view->assertSeeHtml('<h3 class="font-semibold">Test Header</h3>');
-    }
-
-    public function testCardWithoutHeader(): void
-    {
-        $view = $this->blade('<x-card>Card Content</x-card>');
-
-        $view->assertDontSeeHtml('<div class="card-header ');
-        $view->assertDontSeeHtml('<h3 class="font-semibold">');
-    }
-
-    public function testCardContent(): void
-    {
-        $cardContent = '<p class="card-content">This is the card content.</p>';
-        $view = $this->blade("<x-card>{$cardContent}</x-card>");
-
-        $view->assertSeeHtml($cardContent);
-    }
-}