added button component

app/View/Components/Button.php

@@ -0,0 +1,62 @@
+<?php
+
+declare(strict_types=1);
+
+namespace App\View\Components;
+
+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 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';
+
+        $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'
+            ]
+        };
+
+        $baseDisabled = 'disabled:cursor-not-allowed disabled:opacity-60';
+
+        return trim(
+            $base . ' ' .
+            $classes['base'] . ' ' .
+            $classes['hover'] . ' ' .
+            $baseDisabled . ' ' .
+            $classes['disabled']
+        );
+    }
+
+    /**
+     * Get the view / contents that represent the component.
+     */
+    public function render(): View
+    {
+        return view('components.button');
+    }
+}

resources/views/components/button.blade.php

@@ -0,0 +1,8 @@
+<button 
+    {{ $attributes
+        ->merge(['class' => $classes()])
+        ->merge(['disabled' => $disabled])
+    }}
+>
+    {{ $slot }}
+</button>

resources/views/storybook/index.blade.php

@@ -27,33 +27,29 @@
             <h3 class="text-l font-semibold">Enabled</h3>
 
             <div class="flex gap-4">
-                <button class="bg-primary text-text-inverted px-4 py-2 rounded">
+                <x-button onclick="alert('Default was clicked!')">Default</x-button>
-                    Primary
-                </button>
 
-                <button class="bg-secondary text-black px-4 py-2 rounded">
+                <x-button variant="primary" onclick="alert('Primary was clicked!')">Primary</x-button>
-                    Secondary
-                </button>
 
-                <button class="border border-primary text-primary px-4 py-2 rounded">
+
-                    Outline
+                <x-button variant="secondary" onclick="alert('Secondary was clicked!')">Secondary</x-button>
-                </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">
-                <button class="bg-primary text-text-inverted px-4 py-2 rounded" disabled>
+                <x-button disabled>Default</x-button>
-                    Primary
-                </button>
 
-                <button class="bg-secondary text-black px-4 py-2 rounded" disabled>
+                <x-button variant="primary" disabled>Primary</x-button>
-                    Secondary
-                </button>
 
-                <button class="border border-primary text-primary px-4 py-2 rounded" disabled>
+
-                    Outline
+                <x-button variant="secondary" disabled>Secondary</x-button>
-                </button>
+
+
+                <x-button variant="outline" disabled>Outline</x-button>
             </div>
         </section>
 

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'
+            ],
+        ];
+    }
+}