pcabral/kazi
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: pcabral:main
Branches Tags
pcabral:main
..
compare: pcabral:1bc3e5f885c91fa4cd98155e2b98c913b7050515
Branches Tags
pcabral:main

3 Commits
main ... 1bc3e5f885

Author SHA1 Message Date
Pedro Cabral
1bc3e5f885 added button component 2026-05-08 20:38:00 +02:00
Pedro Cabral
1b5d3f5bdf added storybook 2026-04-28 12:09:02 +02:00
Pedro Cabral
5c04ff57ac added colour palette 2026-04-28 12:08:53 +02:00
9 changed files with 63 additions and 130 deletions
Expand all files Collapse all files

21
app/View/Components/Card.php
View File

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

2
resources/css/app.css
View File

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

10
resources/views/components/card.blade.php
View File

@@ -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>

67
resources/views/storybook/index.blade.php
View File

@@ -10,10 +10,67 @@
<h1 class="text-3xl font-bold">Storybook</h1>
@include('storybook.sections.colours')
@include('storybook.sections.buttons')
@include('storybook.sections.cards')
@include('storybook.sections.typography')
<!-- 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>
<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>
</html>

30
resources/views/storybook/sections/buttons.blade.php
View File

@@ -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>

13
resources/views/storybook/sections/cards.blade.php
View File

@@ -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>

9
resources/views/storybook/sections/colours.blade.php
View File

@@ -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>

7
resources/views/storybook/sections/typography.blade.php
View File

@@ -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>

34
tests/Feature/Component/CardTest.php
View File

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