Merge pull request #10 from chrisrhymes/feature/additional-classes-to…

…-components Test setting additional classes. Test select placeholders
chrisrhymes · Jun 30, 2021 · eb960b8 · eb960b8
2 parents 47da098 + 76b1c79
commit eb960b8
Show file tree

Hide file tree

Showing 10 changed files with 183 additions and 6 deletions.
diff --git a/README.md b/README.md
@@ -19,6 +19,7 @@ This package also contains authentication views to use with [Laravel Fortify](ht
         * [Options](#options)
         * [Read Only](#read-only)
         * [Placeholder](#placeholder)
+        * [Additional Classes](#additional-classes)
     * [Card](#card)
     * [Media](#media)
     * [Message](#message)
@@ -126,8 +127,27 @@ The following input components can be made readonly by setting `:readonly="true"
 The following input components can have a placeholder set by setting the `placeholder="The placeholder text"`
 
 * horizontal-input
+* horizontal-select
+* horizontal-textarea
+* input
+* select
+* textarea
+
+#### Additional Classes
+
+Bulma allows you to set the colours, sizes and states for `input`, `textarea` and `select`. You can pass in the additional classes and they will be added to the component. 
+
+```html
+<x-bbui::input label="Username" name="usermane" value="myusername" class="is-primary is-large is-rounded is-loading"></x-bbui::input>
+```
+
+This applies to the following input components
+
+* horizontal-input
+* horizontal-select
 * horizontal-textarea
 * input
+* select
 * textarea
 
 ### Livewire Inputs (Experimental)
@@ -138,6 +158,17 @@ To use inputs with Livewire, set the `wire:model="modelName"` as an attribute wi
 <x-bbui::input label="Username" name="usermane" value="myusername" wire:model="modelName"></x-bbui::input>
 ```
 
+You can also add `defer`, `lazy` or `debounce` to the following inputs:
+
+* horizontal-input
+* horizontal-textarea
+* input
+* textarea
+
+```html
+<x-bbui::input label="Username" name="usermane" value="myusername" wire:model.debounce.500ms="modelName"></x-bbui::input>
+```
+
 ### Card
 
 The card allows a card with a title or with an image. The card also allows a footer by using the named slot. 

diff --git a/resources/views/components/horizontal-select.blade.php b/resources/views/components/horizontal-select.blade.php
@@ -6,12 +6,14 @@
     <div class="field-body">
         <div class="field">
             <div class="control is-expanded">
-                <div class="select is-fullwidth">
+                <div {{ $attributes->class(['select', 'is-danger' => $errors->has($name)])->only(['class']) }}>
                     <select name="{{ $name }}" id="{{ \Illuminate\Support\Str::camel($name) }}"
-                            class="@if($errors->has($name)) is-danger @endif"
                             {!! $attributes->getFirstLike('wire:model') !!}
                             @if($required) required @endif
                     >
+                        @if($attributes->has('placeholder'))
+                            <option value="">{{ $attributes->get('placeholder') }}</option>
+                        @endif
                         @foreach($options as $key => $option)
                             <option value="{{ $key }}" @if($key == $value) selected @endif>
                                 {{ $option }}

diff --git a/resources/views/components/select.blade.php b/resources/views/components/select.blade.php
@@ -2,13 +2,15 @@
 <div class="field">
     <label class="label" for="{{ \Illuminate\Support\Str::camel($name) }}">{{ $label }}</label>
     <div class="control">
-        <div class="select is-fullwidth">
+        <div {{ $attributes->class(['select', 'is-danger' => $errors->has($name)])->only(['class']) }}>
             <select name="{{ $name }}"
                     id="{{ \Illuminate\Support\Str::camel($name) }}"
-                    class="@if($errors->has($name)) is-danger @endif"
                     {!! $attributes->getFirstLike('wire:model') !!}
                     @if($required) required @endif
             >
+                @if($attributes->has('placeholder'))
+                    <option value="">{{ $attributes->get('placeholder') }}</option>
+                @endif
                 @foreach($options as $key => $option)
                     <option value="{{ $key }}" @if($key === $value) selected @endif>
                         {{ $option }}

diff --git a/tests/Components/HorizontalInputTest.php b/tests/Components/HorizontalInputTest.php
@@ -10,6 +10,7 @@ class HorizontalInputTest extends TestCase
     use BaseInputComponentTests;
     use ReadOnlyInputComponentTests;
     use PlaceholderInputTests;
+    use LivewireModelTests;
 
     protected $component = 'horizontal-input';
 
@@ -37,4 +38,16 @@ public function horizontalInputTypes()
             'email' => ['email', 'email'],
         ];
     }
+
+    /** @test */
+    public function additional_classes_can_be_passed_to_horizontal_input()
+    {
+        $view = $this->withViewErrors([])
+            ->blade(
+                '<x-bbui::horizontal-input :label="$label" :name="$name" :options="$options" :class="$class"></x-bbui::horizontal-input>',
+                ['label' => 'The Input Label', 'name' => 'test', 'options' => ['first' => 'First option'], 'class' => 'is-large is-rounded is-static']
+            );
+
+        $view->assertSee('class="input is-large is-rounded is-static"', false);
+    }
 }
diff --git a/tests/Components/HorizontalSelectTest.php b/tests/Components/HorizontalSelectTest.php
@@ -23,4 +23,28 @@ public function options_are_listed()
         $view->assertSeeInOrder(['first', 'second']);
         $view->assertSeeInOrder(['First option', 'Second option']);
     }
+
+    /** @test */
+    public function additional_classes_can_be_passed_to_horizontal_select()
+    {
+        $view = $this->withViewErrors([])
+            ->blade(
+                '<x-bbui::'.$this->component.' :label="$label" :name="$name" :options="$options" :class="$class"></x-bbui::'.$this->component.'>',
+                ['label' => 'The Input Label', 'name' => 'test', 'options' => ['first' => 'First option'], 'class' => 'is-large is-rounded is-static']
+            );
+
+        $view->assertSee('class="select is-large is-rounded is-static"', false);
+    }
+
+    /** @test */
+    public function horizontal_select_render_placeholder_when_set()
+    {
+        $view = $this->withViewErrors([])
+            ->blade(
+                '<x-bbui::'.$this->component.' :label="$label" :name="$name" :options="$options" :placeholder="$placeholder"></x-bbui::'.$this->component.'>',
+                ['label' => 'The Input Label', 'name' => 'test', 'options' => ['first' => 'First option'], 'placeholder' => 'Select an option']
+            );
+
+        $view->assertSee('<option value="">Select an option</option>', false);
+    }
 }
diff --git a/tests/Components/HorizontalTextareaTest.php b/tests/Components/HorizontalTextareaTest.php
@@ -9,6 +9,19 @@ class HorizontalTextareaTest extends TestCase
     use BaseInputComponentTests;
     use ReadOnlyInputComponentTests;
     use PlaceholderInputTests;
+    use LivewireModelTests;
 
-    protected $component = 'horizontal-input';
+    protected $component = 'horizontal-textarea';
+
+    /** @test */
+    public function additional_classes_can_be_passed_to_horizontal_textarea()
+    {
+        $view = $this->withViewErrors([])
+            ->blade(
+                '<x-bbui::'.$this->component.' :label="$label" :name="$name" :options="$options" :class="$class"></x-bbui::'.$this->component.'>',
+                ['label' => 'The Input Label', 'name' => 'test', 'options' => ['first' => 'First option'], 'class' => 'is-large is-rounded is-static']
+            );
+
+        $view->assertSee('class="textarea is-large is-rounded is-static"', false);
+    }
 }
diff --git a/tests/Components/InputTest.php b/tests/Components/InputTest.php
@@ -9,14 +9,15 @@ class InputTest extends TestCase
     use BaseInputComponentTests;
     use ReadOnlyInputComponentTests;
     use PlaceholderInputTests;
+    use LivewireModelTests;
 
     protected $component = 'input';
 
     /**
      * @test
      * @dataProvider inputTypes
      */
-    public function input_component_sets_password_type($type, $expected)
+    public function input_component_sets_provided_type($type, $expected)
     {
         $view = $this->withViewErrors([])
             ->blade(
@@ -36,4 +37,16 @@ public function inputTypes()
             'email' => ['email', 'email'],
         ];
     }
+
+    /** @test */
+    public function additional_classes_can_be_passed_to_input()
+    {
+        $view = $this->withViewErrors([])
+            ->blade(
+                '<x-bbui::input :label="$label" :name="$name" :options="$options" :class="$class"></x-bbui::input>',
+                ['label' => 'The Input Label', 'name' => 'test', 'options' => ['first' => 'First option'], 'class' => 'is-large is-rounded is-static']
+            );
+
+        $view->assertSee('class="input is-large is-rounded is-static"', false);
+    }
 }
diff --git a/tests/Components/LivewireModelTests.php b/tests/Components/LivewireModelTests.php
@@ -0,0 +1,42 @@
+<?php
+
+namespace Tests\Components;
+
+trait LivewireModelTests
+{
+    /** @test */
+    public function wire_model_can_be_debounced()
+    {
+        $view = $this->withViewErrors([])
+            ->blade(
+                '<x-bbui::'.$this->component.' :label="$label" :name="$name" :wire:model.debounce.500ms="$model" :options="$options"></x-bbui::'.$this->component.'>',
+                ['label' => 'The Input Label', 'name' => 'test', 'options' => ['first' => 'First option'], 'model' => 'testModel']
+            );
+
+        $view->assertSee('wire:model.debounce.500ms="testModel"', false);
+    }
+
+    /** @test */
+    public function wire_model_can_be_lazy()
+    {
+        $view = $this->withViewErrors([])
+            ->blade(
+                '<x-bbui::'.$this->component.' :label="$label" :name="$name" :wire:model.lazy="$model" :options="$options"></x-bbui::'.$this->component.'>',
+                ['label' => 'The Input Label', 'name' => 'test', 'options' => ['first' => 'First option'], 'model' => 'testModel']
+            );
+
+        $view->assertSee('wire:model.lazy="testModel"', false);
+    }
+
+    /** @test */
+    public function wire_model_can_be_deferred()
+    {
+        $view = $this->withViewErrors([])
+            ->blade(
+                '<x-bbui::'.$this->component.' :label="$label" :name="$name" :wire:model.defer="$model" :options="$options"></x-bbui::'.$this->component.'>',
+                ['label' => 'The Input Label', 'name' => 'test', 'options' => ['first' => 'First option'], 'model' => 'testModel']
+            );
+
+        $view->assertSee('wire:model.defer="testModel"', false);
+    }
+}
diff --git a/tests/Components/SelectTest.php b/tests/Components/SelectTest.php
@@ -23,4 +23,28 @@ public function options_are_listed()
         $view->assertSeeInOrder(['first', 'second']);
         $view->assertSeeInOrder(['First option', 'Second option']);
     }
+
+    /** @test */
+    public function additional_classes_can_be_passed_to_select()
+    {
+        $view = $this->withViewErrors([])
+            ->blade(
+                '<x-bbui::'.$this->component.' :label="$label" :name="$name" :options="$options" :class="$class"></x-bbui::'.$this->component.'>',
+                ['label' => 'The Input Label', 'name' => 'test', 'options' => ['first' => 'First option'], 'class' => 'is-large is-rounded is-static']
+            );
+
+        $view->assertSee('class="select is-large is-rounded is-static"', false);
+    }
+
+    /** @test */
+    public function select_render_placeholder_when_set()
+    {
+        $view = $this->withViewErrors([])
+            ->blade(
+                '<x-bbui::'.$this->component.' :label="$label" :name="$name" :options="$options" :placeholder="$placeholder"></x-bbui::'.$this->component.'>',
+                ['label' => 'The Input Label', 'name' => 'test', 'options' => ['first' => 'First option'], 'placeholder' => 'Select an option']
+            );
+
+        $view->assertSee('<option value="">Select an option</option>', false);
+    }
 }
diff --git a/tests/Components/TextareaTest.php b/tests/Components/TextareaTest.php
@@ -9,6 +9,19 @@ class TextareaTest extends TestCase
     use BaseInputComponentTests;
     use ReadOnlyInputComponentTests;
     use PlaceholderInputTests;
+    use LivewireModelTests;
 
     protected $component = 'textarea';
+
+    /** @test */
+    public function additional_classes_can_be_passed_to_textarea()
+    {
+        $view = $this->withViewErrors([])
+            ->blade(
+                '<x-bbui::'.$this->component.' :label="$label" :name="$name" :options="$options" :class="$class"></x-bbui::'.$this->component.'>',
+                ['label' => 'The Input Label', 'name' => 'test', 'options' => ['first' => 'First option'], 'class' => 'is-large is-rounded is-static']
+            );
+
+        $view->assertSee('class="textarea is-large is-rounded is-static"', false);
+    }
 }