rapidez · Roene-JustBetter · Sep 6, 2024 · Sep 6, 2024 · Oct 1, 2024 · Oct 8, 2024
diff --git a/.github/media/buttons.png b/.github/media/buttons.png
diff --git a/.github/media/screenshot.png b/.github/media/screenshot.png
diff --git a/README.md b/README.md
@@ -2,6 +2,8 @@
 
 This package includes some Tailwind CSS styled Blade components, the components do not need or require Rapidez. This package is only used within Rapidez by default, but **can be used in any Laravel project**.
 
+### Inputs
+
 - [Input](https://github.com/rapidez/blade-components/blob/master/resources/views/components/input/index.blade.php)
 - [Checkbox](https://github.com/rapidez/blade-components/blob/master/resources/views/components/input/checkbox/index.blade.php)
 - [Radio](https://github.com/rapidez/blade-components/blob/master/resources/views/components/input/radio/index.blade.php)
@@ -15,6 +17,22 @@ We don't provide a input + label combination component as you'll end up with att
 
 ![](.github/media/screenshot.png)
 
+### Buttons
+
+- [Base](https://github.com/rapidez/blade-components/blob/master/resources/views/components/button/base.blade.php)
+- [Index](https://github.com/rapidez/blade-components/blob/master/resources/views/components/button/index.blade.php)
+- [Primary](https://github.com/rapidez/blade-components/blob/master/resources/views/components/button/primary.blade.php)
+- [Secondary](https://github.com/rapidez/blade-components/blob/master/resources/views/components/button/secondary.blade.php)
+- [Outline](https://github.com/rapidez/blade-components/blob/master/resources/views/components/button/outline.blade.php)
+- [Enhanced](https://github.com/rapidez/blade-components/blob/master/resources/views/components/button/enhanced.blade.php)
+- [Slider](https://github.com/rapidez/blade-components/blob/master/resources/views/components/button/slider.blade.php)
+
+The base button doesn't have any styling; here, we only use the `x-tag`.
+All other buttons use the `button/index`, which contains the basic styling for buttons, such as padding, hover effects, and the disabled state.
+The button variants contain styling for the background and text color. There is only one exception: the `button/slider`, which has more custom styling than the other button variants.
+
+![](.github/media/buttons.png)
+
 ## Installation
 
 ```
@@ -24,10 +42,21 @@ composer require rapidez/blade-components
 And make sure these colors are present in your Tailwind config:
 ```js
 colors: {
-    neutral: '#334155',
-    inactive: '#64748b',
-    border: '#e7ebef',
-    disabled: '#ebe8de',
+    colors: {
+        primary: {
+            DEFAULT: '#2FBC85',
+            text: '#FFFFFF',
+        },
+        secondary: {
+            DEFAULT: '#F97316',
+            text: '#FFFFFF',
+        },
+        neutral: '#334155',
+        inactive: '#64748B',
+        border: '#E7EBEF',
+        disabled: '#EBE8DE',
+        enhanced: '#36B422'
+    }
 }
 ```
 
@@ -61,6 +90,26 @@ Just like any other Blade component, check out the [Laravel Blade docs](https://
 </x-rapidez::input.checkbox>
 ```
 
+## x-tag
+
+It is a Blade version of a [dynamic Vue component](https://vuejs.org/guide/essentials/component-basics.html#dynamic-components)
+
+### Usage
+
+```blade
+<x-tag is="span" class="font-bold">
+    Something
+</x-tag>
+```
+
+which will result in
+
+```html
+<span class="font-bold">
+    Something
+</span>
+```
+
 ## Preview
 
 There is a preview Blade file included with all the components, to view that in your project you could register a route for it within `routes/web.php` and visit the `/components` route from your browser:

diff --git a/resources/views/components-preview.blade.php b/resources/views/components-preview.blade.php
@@ -3,7 +3,7 @@
     <head>
         <meta charset="utf-8">
         <meta name="viewport" content="width=device-width, initial-scale=1">
-        <script src="https://cdn.tailwindcss.com"></script>
+        <script src="https://cdn.tailwindcss.com?plugins=forms"></script>
 
         <title>Preview</title>
 
@@ -12,10 +12,19 @@
             theme: {
                 extend: {
                     colors: {
+                        primary: {
+                            DEFAULT: '#2FBC85',
+                            text: '#FFFFFF',
+                        },
+                        secondary: {
+                            DEFAULT: '#F97316',
+                            text: '#FFFFFF',
+                        },
                         neutral: '#334155',
-                        inactive: '#64748b',
-                        border: '#e7ebef',
-                        disabled: '#ebe8de',
+                        inactive: '#64748B',
+                        border: '#E7EBEF',
+                        disabled: '#EBE8DE',
+                        enhanced: '#36B422'
                     }
                 }
             }
@@ -142,7 +151,20 @@
             </div>
 
             <h2 class="font-bold text-lg">Button components</h2>
-            Soon...
+            <div class="grid grid-cols-5 gap-5">
+                <x-rapidez::button>Default</x-rapidez::button>
+                <x-rapidez::button.primary>Primary</x-rapidez::button.primary>
+                <x-rapidez::button.secondary>Secondary</x-rapidez::button.secondary>
+                <x-rapidez::button.outline>Outline</x-rapidez::button.outline>
+                <x-rapidez::button.enhanced>Enhanced</x-rapidez::button.enhanced>
+                <div class="flex flex-col gap-2">
+                    <strong>Slider:</strong>
+                    <div class="flex items-center gap-2">
+                        <x-rapidez::button.slider><</x-rapidez::button.slider>
+                        <x-rapidez::button.slider>></x-rapidez::button.slider>
+                    </div>
+                </div>
+            </div>
 
             <h2 class="font-bold text-lg">Slideover component</h2>
             Soon...

diff --git a/resources/views/components/button/base.blade.php b/resources/views/components/button/base.blade.php
@@ -0,0 +1,30 @@
+{{--
+This is the base for all the buttons. In here we don't need classes.
+If you want to change styling for buttons go to the button/index.
+<x-tag> Is a dynamic tag when a button has a href it will be a <a>,
+when you add a for on the button the button will be a <label>.
+If the button doesn't have a href or label it will be a <button>
+Examples:
+
+```
+<x-rapidez::button href="something">Something</x-rapidez::button>
+```
+
+```
+<x-rapidez::button for="something">Something</x-rapidez::button>
+```
+
+```
+<x-rapidez::button>Something</x-rapidez::button>
+```
+--}}
+@props(['tag' => 'button'])
+
+@php
+    $tag = $attributes->hasAny('href', ':href', 'v-bind:href', 'x-bind:href') ? 'a' : $tag;
+    $tag = $attributes->has('for') ? 'label' : $tag;
+@endphp
+
+<x-tag is="{{ $tag }}" {{ $attributes }}>
+    {{ $slot }}
+</x-tag>
diff --git a/resources/views/components/button/enhanced.blade.php b/resources/views/components/button/enhanced.blade.php
@@ -0,0 +1,12 @@
+{{--
+The enhanced button is a variant specifically used for anything conversion related.
+Like purchasing a product or completing the checkout.
+Example:
+
+```
+<x-rapidez::button.enhanced>Something</x-rapidez::button.enhanced>
+```
+--}}
+<x-rapidez::button {{ $attributes->twMerge('bg-enhanced text-white border-b border-black/15') }}>
+    {{ $slot }}
+</x-rapidez::button>
diff --git a/resources/views/components/button/index.blade.php b/resources/views/components/button/index.blade.php
@@ -0,0 +1,11 @@
+{{--
+This is the default button if you use the example you get this.
+Example:
+
+```
+<x-rapidez::button>Something</x-rapidez::button>
+```
+--}}
+<x-rapidez::button.base {{ $attributes->twMerge('relative inline-flex items-center justify-center transition text-white bg-neutral text-base font-medium rounded min-h-12 py-1.5 px-5 hover:bg-opacity-80 border-b border-black/15 disabled:text-inactive disabled:bg-disabled disabled:cursor-not-allowed') }}>
+    {{ $slot }}
+</x-rapidez::button.base>
diff --git a/resources/views/components/button/outline.blade.php b/resources/views/components/button/outline.blade.php
@@ -0,0 +1,11 @@
+{{--
+This is an outline button so it doesn't need a background and only need a border.
+Example:
+
+```
+<x-rapidez::button.outline>Something</x-rapidez::button.outline>
+```
+--}}
+<x-rapidez::button {{ $attributes->twMerge('bg-transparent border text-neutral hover:border-neutral') }}>
+    {{ $slot }}
+</x-rapidez::button>
diff --git a/resources/views/components/button/primary.blade.php b/resources/views/components/button/primary.blade.php
@@ -0,0 +1,11 @@
+{{--
+This is the primary button.
+Example:
+
+```
+<x-rapidez::button.primary>Something</x-rapidez::button.primary>
+```
+--}}
+<x-rapidez::button {{ $attributes->twMerge('bg-primary text-primary-text') }}>
+    {{ $slot }}
+</x-rapidez::button>
diff --git a/resources/views/components/button/secondary.blade.php b/resources/views/components/button/secondary.blade.php
@@ -0,0 +1,11 @@
+{{--
+This is the secondary button.
+Example:
+
+```
+<x-rapidez::button.secondary>Something</x-rapidez::button.secondary>
+```
+--}}
+<x-rapidez::button {{ $attributes->twMerge('bg-secondary text-secondary-text') }}>
+    {{ $slot }}
+</x-rapidez::button>
diff --git a/resources/views/components/button/slider.blade.php b/resources/views/components/button/slider.blade.php
@@ -0,0 +1,11 @@
+{{--
+This button is used for sliders.
+Example:
+
+```
+<x-rapidez::button.slider>Icon</x-rapidez::button.slider>
+```
+--}}
+<x-rapidez::button {{ $attributes->twMerge('inline-flex bg-white p-0 rounded-full size-14 items-center justify-center shadow text-neutral border') }}>
+    {{ $slot }}
+</x-rapidez::button>
diff --git a/resources/views/components/input/index.blade.php b/resources/views/components/input/index.blade.php
@@ -14,5 +14,4 @@
 </label>
 ```
 --}}
-
 <input {{ $attributes->twMerge('w-full py-3 px-5 border rounded-md border-border outline-0 ring-0 text-sm transition-colors focus:ring-transparent focus:border-neutral disabled:cursor-not-allowed disabled:bg-disabled disabled:border-disabled placeholder:text-inactive [&::-webkit-inner-spin-button]:appearance-none [&:user-invalid:not(:placeholder-shown)]:border-red-500') }} />
diff --git a/resources/views/components/input/radio/base.blade.php b/resources/views/components/input/radio/base.blade.php
@@ -6,5 +6,4 @@
 <x-rapidez::input.radio.base />
 ```
 --}}
-
 <input type="radio" {{ $attributes->twMerge('cursor-pointer border size-5 text-neutral border-border focus:outline-none focus:ring-0 focus:ring-offset-0') }} />
diff --git a/resources/views/components/tag.blade.php b/resources/views/components/tag.blade.php
@@ -0,0 +1,5 @@
+@props(['is' => 'div'])
+
+<{{ $is }} {{ $attributes }}>
+    {{ $slot }}
+</{{ $is }}>