added button component

app/View/Components/Button.php

@@ -1,15 +1,19 @@
 <?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 = 'primary', public bool $disabled = false)
+    public function __construct(public string $variant = self::VARIANT_PRIMARY, public bool $disabled = false)
     {
         //
     }
@@ -20,15 +24,15 @@ class Button extends Component
             'duration-150 ease-in-out';
 
         $classes = match ($this->variant) {
-            'secondary' => [
+            self::VARIANT_SECONDARY => [
                 'base' => 'bg-secondary text-text',
                 'hover' => 'hover:bg-secondary-dark',
                 'disabled' => 'disabled:bg-secondary',
             ],
-            'outline' => [
-                'base' => 'bg-outline border border-primary text-primary',
+            self::VARIANT_OUTLINE => [
+                'base' => 'bg-surface border border-primary text-primary',
                 'hover' => 'hover:bg-primary hover:text-text-inverted',
-                'disabled' => 'disabled:bg-outline disabled:text-primary',
+                'disabled' => 'disabled:bg-surface disabled:text-primary',
             ],
             default => [
                 'base' => 'bg-primary text-text-inverted',
@@ -51,7 +55,7 @@ class Button extends Component
     /**
      * Get the view / contents that represent the component.
      */
-    public function render(): View|Closure|string
+    public function render(): View
     {
         return view('components.button');
     }

resources/css/app.css

@@ -19,15 +19,12 @@
     --color-secondary-light: #FCD34D;
     --color-secondary-dark: #B45309;
 
-    /* OUTLINE */
-    --color-outline: rgba(0, 0, 0 ,0);
-
     /* BACKGROUND */
     --color-background: #F8FAFC;
     --color-background-dark: #E2E8F0;
 
     /* SURFACE */
-    --color-surface: #FFFFFF;
+    --color-surface: #ffffff;
     --color-surface-muted: #F1F5F9;
 
     /* TEXT */

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

tests/Feature/Component/ButtonTest.php

@@ -0,0 +1,43 @@
+<?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/DataProvider/ButtonTestDataProvider.php

@@ -0,0 +1,28 @@
+<?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'
+            ],
+        ];
+    }
+}