Merge pull request #5 from chrisrhymes/feature/modals

Added modal and modal-card components
chrisrhymes · Jun 10, 2021 · 38414c3 · 38414c3
2 parents 9d2a455 + 3a4c92a
commit 38414c3
Show file tree

Hide file tree

Showing 5 changed files with 191 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -16,6 +16,7 @@ This package also contains authentication views to use with [Laravel Fortify](ht
     * [Message](#message)
     * [Notification](#notification)
     * [Tabs](#tabs)
+    * [Modal](#modal)
 * [Auth Views](#auth-views)
 * [Tests](#tests)
 
@@ -58,6 +59,8 @@ The package has the following components available:
 * input
 * media
 * message
+* modal
+* modal-card
 * multi-checkbox
 * notification
 * radio
@@ -216,6 +219,63 @@ The tabs component uses Alpine.js to show and hide the tab content.
 </x-bbui::tabs>
 ```
 
+### Modal
+
+There are modal and modal-card components. Both require Alpine.js.
+
+* Both require a `<x-slot name="trigger">` to define the content of the button that will trigger the modal.
+* The modal component will display the content that is provided using the default `$slot`.
+* You can override the trigger button class by setting the type. By default, it uses `is-primary`.
+* Modal card requires a `title`
+* Modal card has a footer slot that contains a Cancel button to close the modal. You can override the cancel text by setting `cancel="Cancel"` attribute.
+* If you add a button to the footer that also closes the modal then ensure you add `@click="active = false"` to the button.
+
+```html
+<!-- Modal -->
+<x-bbui::modal type="is-info">
+    <x-slot name="trigger">
+        <span class="icon"><i class="fas fa-eye"></i></span>
+        <span>Open Modal</span>
+    </x-slot>
+
+    <!-- The modal content -->
+    <div class="box">
+        <p>Modal content</p>
+    </div>
+</x-bbui::modal>
+
+<!-- Modal with image content -->
+<x-bbui::modal>
+    <x-slot name="trigger">
+        <span class="icon"><i class="fas fa-eye"></i></span>
+        <span>Open Modal</span>
+    </x-slot>
+
+    <!-- The modal content -->
+    <figure class="image is-4by3">
+        <img src="https://bulma.io/images/placeholders/1280x960.png" alt="">
+    </figure>
+</x-bbui::modal>
+
+<!-- Modal Card -->
+<x-bbui::modal-card type="is-danger" title="Are you sure?">
+    <x-slot name="trigger">
+        <span class="icon"><i class="fas fa-times"></i></span>
+        <span>Delete</span>
+    </x-slot>
+
+    <!-- The modal content -->
+    <p>Are you sure you want to delete this?</p>
+
+    <x-slot name="footer">
+        <button class="button" @click="active = false">
+            <span class="icon"><i class="fas fa-check"></i></span>
+            <span>Confirm</span>
+        </button>
+    </x-slot>
+</x-bbui::modal-card>
+```
+
 ## Auth Views
 
 If you use Laravel Fortify and want to make use of the package's authentication views then set the below in the boot() method of your `App\Providers\FortifyServiceProvider`

diff --git a/resources/views/components/modal-card.blade.php b/resources/views/components/modal-card.blade.php
@@ -0,0 +1,22 @@
+@props(['trigger', 'type' => 'is-primary', 'title', 'cancel' => 'Cancel'])
+<div x-data="{ active: false }">
+    <button {{ $attributes->merge(['class' => 'button '.$type]) }} @click="active = true">{{ $trigger }}</button>
+    <div class="modal" :class="{ 'is-active': active == true }">
+        <div class="modal-background" @click="active = false"></div>
+        <div class="modal-card">
+            <header class="modal-card-head">
+                <p class="modal-card-title">{{ $title }}</p>
+                <button class="delete" aria-label="close" @click="active = false"></button>
+            </header>
+            <section class="modal-card-body">
+                {{ $slot }}
+            </section>
+            @isset($footer)
+                <footer class="modal-card-foot">
+                    <button class="button" @click="active = false">{{ $cancel }}</button>
+                    {{ $footer }}
+                </footer>
+            @endisset
+        </div>
+    </div>
+</div>
diff --git a/resources/views/components/modal.blade.php b/resources/views/components/modal.blade.php
@@ -0,0 +1,11 @@
+@props(['trigger', 'type' => 'is-primary'])
+<div x-data="{ active: false }">
+    <button {{ $attributes->merge(['class' => 'button '.$type]) }} @click="active = true">{{ $trigger }}</button>
+    <div class="modal" :class="{ 'is-active': active == true }">
+        <div class="modal-background" @click="active = false"></div>
+        <div class="modal-content">
+            {{ $slot }}
+        </div>
+        <button class="modal-close is-large" aria-label="close" @click="active = false"></button>
+    </div>
+</div>
diff --git a/tests/Components/ModalCardTest.php b/tests/Components/ModalCardTest.php
@@ -0,0 +1,59 @@
+<?php
+
+namespace Tests\Components;
+
+use Tests\TestCase;
+
+class ModalCardTest extends TestCase
+{
+    /** @test */
+    public function it_renders_the_message_component()
+    {
+        $view = $this->blade(
+            '<x-bbui::modal-card :title="$title">
+            <x-slot name="trigger">Open Modal</x-slot>
+            The modal content
+            </x-bbui::modal-card>',
+            ['title' => 'The modal title']
+        );
+
+        $view->assertSee('The modal content');
+        $view->assertSee('button is-primary');
+        $view->assertSee('modal-background');
+    }
+
+    /** @test */
+    public function it_overrides_the_type()
+    {
+        $view = $this->blade(
+            '<x-bbui::modal-card :title="$title" :type="$type">
+            <x-slot name="trigger">Open Modal</x-slot>
+            The modal content
+            </x-bbui::modal-card>',
+            ['title' => 'The modal title', 'type' => 'is-danger']
+        );
+
+        $view->assertSee('button is-danger');
+        $view->assertDontSee('button is-primary');
+    }
+
+    /** @test */
+    public function it_renders_the_footer()
+    {
+        $view = $this->blade(
+            '<x-bbui::modal-card :title="$title" :cancel="$cancel">
+            <x-slot name="trigger">Open Modal</x-slot>
+            The modal content
+            <x-slot name="footer">
+                <button class="button is-info" @click="active = false">Confirm</button>
+            </x-slot>
+            </x-bbui::modal-card>',
+            ['title' => 'The modal title', 'cancel' => 'Close Modal']
+        );
+
+        $view->assertSee('modal-card-foot');
+        $view->assertSee('Close Modal');
+        $view->assertDontSee('Cancel');
+        $view->assertSee('Confirm');
+    }
+}
diff --git a/tests/Components/ModalTest.php b/tests/Components/ModalTest.php
@@ -0,0 +1,39 @@
+<?php
+
+namespace Tests\Components;
+
+use Tests\TestCase;
+
+class ModalTest extends TestCase
+{
+    /** @test */
+    public function it_renders_the_message_component()
+    {
+        $view = $this->blade(
+            '<x-bbui::modal>
+            <x-slot name="trigger">Open Modal</x-slot>
+            The modal content
+            </x-bbui::modal>',
+            []
+        );
+
+        $view->assertSee('The modal content');
+        $view->assertSee('button is-primary');
+        $view->assertSee('modal-background');
+    }
+
+    /** @test */
+    public function it_overrides_the_type()
+    {
+        $view = $this->blade(
+            '<x-bbui::modal :type="$type">
+            <x-slot name="trigger">Open Modal</x-slot>
+            The modal content
+            </x-bbui::modal>',
+            ['type' => 'is-danger']
+        );
+
+        $view->assertSee('button is-danger');
+        $view->assertDontSee('button is-primary');
+    }
+}