Compare commits
1 Commits
feature/se
...
8faa7ab974
| Author | SHA1 | Date | |
|---|---|---|---|
|
8faa7ab974 |
@@ -1,62 +0,0 @@
|
|||||||
<?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');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -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');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -24,7 +24,7 @@
|
|||||||
--color-background-dark: #E2E8F0;
|
--color-background-dark: #E2E8F0;
|
||||||
|
|
||||||
/* SURFACE */
|
/* SURFACE */
|
||||||
--color-surface: #ffffff;
|
--color-surface: #FFFFFF;
|
||||||
--color-surface-muted: #F1F5F9;
|
--color-surface-muted: #F1F5F9;
|
||||||
|
|
||||||
/* TEXT */
|
/* TEXT */
|
||||||
|
|||||||
@@ -1,8 +0,0 @@
|
|||||||
<button
|
|
||||||
{{ $attributes
|
|
||||||
->merge(['class' => $classes()])
|
|
||||||
->merge(['disabled' => $disabled])
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{{ $slot }}
|
|
||||||
</button>
|
|
||||||
@@ -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>
|
|
||||||
@@ -1,81 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<title>Storybook</title>
|
|
||||||
|
|
||||||
@vite(['resources/css/app.css', 'resources/js/app.js'])
|
|
||||||
</head>
|
|
||||||
<body class="bg-background text-text p-10 space-y-12">
|
|
||||||
|
|
||||||
<h1 class="text-3xl font-bold">Storybook</h1>
|
|
||||||
|
|
||||||
<!-- COLOURS -->
|
|
||||||
<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>
|
|
||||||
|
|
||||||
<!-- 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>
|
|
||||||
<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>
|
|
||||||
|
|
||||||
<!-- 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>
|
|
||||||
@@ -5,7 +5,3 @@ use Illuminate\Support\Facades\Route;
|
|||||||
Route::get('/', function () {
|
Route::get('/', function () {
|
||||||
return view('welcome');
|
return view('welcome');
|
||||||
});
|
});
|
||||||
|
|
||||||
Route::get('/storybook', function () {
|
|
||||||
return view('storybook.index');
|
|
||||||
})->name('storybook');
|
|
||||||
|
|||||||
@@ -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);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -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);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -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'
|
|
||||||
],
|
|
||||||
];
|
|
||||||
}
|
|
||||||
}
|
|
||||||
Reference in New Issue
Block a user