WIP: added button component

improve disabled and hover states

app/View/Components/Button.php

@@ -1,61 +1,42 @@
 <?php
 
-declare(strict_types=1);
-
 namespace App\View\Components;
 
+use Closure;
 use Illuminate\Contracts\View\View;
 use Illuminate\View\Component;
 
 class Button extends Component
 {
-    public const VARIANT_PRIMARY = 'primary';
-    public const VARIANT_SECONDARY = 'secondary';
-    public const VARIANT_OUTLINE = 'outline';
 
-    public function __construct(public string $variant = self::VARIANT_PRIMARY, public bool $disabled = false)
+    public function __construct(public string $variant = 'primary', public bool $disabled = false)
     {
         //
     }
 
     public function classes(): string
     {
-        $base = 'inline-flex items-center justify-center px-4 py-2 rounded-md text-sm font-medium transition ' .
-            'duration-150 ease-in-out';
+        $base = 'inline-flex items-center justify-center px-4 py-2 rounded-md text-sm font-medium transition duration-150 ease-in-out';
 
-        $classes = match ($this->variant) {
-            self::VARIANT_SECONDARY => [
-                'base' => 'bg-secondary text-text',
-                'hover' => 'hover:bg-secondary-dark',
-                'disabled' => 'disabled:bg-secondary',
-            ],
-            self::VARIANT_OUTLINE => [
-                'base' => 'bg-surface border border-primary text-primary',
-                'hover' => 'hover:bg-primary hover:text-text-inverted',
-                'disabled' => 'disabled:bg-surface disabled:text-primary',
-            ],
-            default => [
-                'base' => 'bg-primary text-text-inverted',
-                'hover' => 'hover:bg-primary-dark',
-                'disabled' => 'disabled:bg-primary'
-            ]
-        };
+        $variants = [
+            'primary' => 'bg-primary text-text-inverted hover:bg-blue-700',
+            'secondary' => 'bg-secondary text-text hover:bg-gray-300',
+            'outline' => 'border border-primary text-primary hover:bg-red-700',
+        ];
 
-        $baseDisabled = 'disabled:cursor-not-allowed disabled:opacity-60';
+        $disabled = 'disabled:bg-gray-300 disabled:text-gray-500 disabled:cursor-not-allowed disabled:opacity-60';
 
         return trim(
             $base . ' ' .
-            $classes['base'] . ' ' .
-            $classes['hover'] . ' ' .
-            $baseDisabled . ' ' .
-            $classes['disabled']
+            ($variants[$this->variant] ?? $variants['primary']) . ' ' .
+            $disabled
         );
     }
 
     /**
      * Get the view / contents that represent the component.
      */
-    public function render(): View
+    public function render(): View|Closure|string
     {
         return view('components.button');
     }

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

@@ -27,15 +27,15 @@
             <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>Default</x-button>
 
-                <x-button variant="primary" onclick="alert('Primary was clicked!')">Primary</x-button>
+                <x-button variant="primary">Primary</x-button>
 
 
-                <x-button variant="secondary" onclick="alert('Secondary was clicked!')">Secondary</x-button>
+                <x-button variant="secondary">Secondary</x-button>
 
 
-                <x-button variant="outline" onclick="alert('Outline was clicked!')">Outline</x-button>
+                <x-button variant="outline">Outline</x-button>
             </div>
 
             <h3 class="text-l font-semibold">Disabled</h3>
@@ -56,16 +56,11 @@
         <!-- CARDS -->
         <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>
+            <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 -->

tests/Feature/Component/ButtonTest.php

@@ -1,43 +0,0 @@
-<?php
-
-declare(strict_types=1);
-
-namespace Tests\Feature\Component;
-
-use Tests\Feature\Component\DataProvider\ButtonTestDataProvider;
-use Tests\TestCase;
-
-class ButtonTest extends TestCase
-{
-    public function testGeneratesButtonElement(): void
-    {
-        $view = $this->blade('<x-button>Click!</x-button>');
-
-        $view->assertSeeHtml('<button ');
-        $view->assertDontSeeHtml('<a ');
-    }
-
-    public function testButtonCanHaveAttributes(): void
-    {
-        $view = $this->blade('<x-button data-attr="123">Click!</x-button>');
-
-        $view->assertSeeHtml('data-attr="123"');
-    }
-
-    public function testDefaultVariantIsPrimary(): void
-    {
-        $view = $this->blade('<x-button>Click!</x-button>');
-
-        $view->assertSeeHtml('bg-primary text-text-inverted');
-    }
-
-
-    #[\PHPUnit\Framework\Attributes\DataProviderExternal(ButtonTestDataProvider::class, 'getDataForButtonTestWithButtons')]
-    public function testVariants(string $variant, string $expectedHtml): void
-    {
-        $button = sprintf('<x-button variant="%s">Click!</x-button>', $variant);
-        $view = $this->blade($button);
-
-        $view->assertSeeHtml($expectedHtml);
-    }
-}

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);
-    }
-}

tests/Feature/Component/DataProvider/ButtonTestDataProvider.php

@@ -1,28 +0,0 @@
-<?php
-
-declare(strict_types=1);
-
-namespace Tests\Feature\Component\DataProvider;
-
-use App\View\Components\Button;
-
-class ButtonTestDataProvider
-{
-    public static function getDataForButtonTestWithButtons(): array
-    {
-        return [
-           'primary variant' => [
-                'variant' => Button::VARIANT_PRIMARY,
-                'expectedHtml' => 'bg-primary text-text-inverted'
-            ],
-            'secondary variant' => [
-                'variant' => Button::VARIANT_SECONDARY,
-                'expectedHtml' => 'bg-secondary text-text'
-            ],
-            'outline variant' => [
-                'variant' => Button::VARIANT_OUTLINE,
-                'expectedHtml' => 'bg-surface border border-primary text-primary'
-            ],
-        ];
-    }
-}