Styling buttons | Added new button | Added anmation for add to cart b…

…utton
Roene-JustBetter · Aug 7, 2024 · fab8271 · fab8271
1 parent 3a1a4a7
commit fab8271
Show file tree

Hide file tree

Showing 22 changed files with 164 additions and 61 deletions.
diff --git a/resources/css/app.css b/resources/css/app.css
@@ -1,4 +1,5 @@
 @import 'components/vue-slider';
+@import 'components/add-to-cart';
 @import './theme-variables.css';
 
 @tailwind base;

diff --git a/resources/css/components/add-to-cart.css b/resources/css/components/add-to-cart.css
@@ -0,0 +1,22 @@
+@keyframes is-loading {
+    0% {
+        left: 0;
+        width: 0;
+    }
+    50% {
+        left: 0;
+        width: 100%;
+    }
+    to {
+        left: 100%;
+        width: 0;
+    }
+}
+
+.button-loading {
+    @apply overflow-hidden !bg-enhanced/10 hover:!bg-enhanced/10 !text-white !cursor-progress before:absolute before:block before:h-1 before:bg-enhanced before:top-0 before:left-0 before:w-16;
+}
+
+.button-loading:before {
+    animation: is-loading 1s infinite;
+}
diff --git a/resources/css/theme-variables.css b/resources/css/theme-variables.css
@@ -7,4 +7,6 @@
     --inactive: 100 116 139;
     --highlight: 241 245 249;
     --border: 231 235 239;
+    --disabled: 231 235 239;
+    --enhanced: 54 180 34;
 }
diff --git a/resources/views/cart/coupon/add.blade.php b/resources/views/cart/coupon/add.blade.php
@@ -11,14 +11,15 @@
     <form v-on:submit.prevent="mutate" class="flex gap-3">
         <x-rapidez::input
             :label="false"
+            wrapperClass="flex flex-1"
             name="couponCode"
             placeholder="Coupon code"
             v-model="variables.coupon_code"
             v-bind:disabled="$root.loading"
             required
         />
-        <x-rapidez::button type="submit" class="sm:text-sm" dusk="apply-coupon">
+        <x-rapidez::button.enhanced type="submit" class="sm:text-sm" dusk="apply-coupon">
             @lang('Apply')
-        </x-rapidez::button>
+        </x-rapidez::button.enhanced>
     </form>
 </graphql-mutation>
diff --git a/resources/views/cart/sidebar.blade.php b/resources/views/cart/sidebar.blade.php
@@ -28,6 +28,6 @@
     </div>
 </dl>
 
-<x-rapidez::button href="{{ route('checkout') }}" dusk="checkout" class="w-full text-center">
+<x-rapidez::button.enhanced href="{{ route('checkout') }}" dusk="checkout" class="w-full text-center">
     @lang('Checkout')
-</x-rapidez::button>
+</x-rapidez::button.enhanced>
diff --git a/resources/views/checkout/steps/credentials.blade.php b/resources/views/checkout/steps/credentials.blade.php
@@ -35,7 +35,7 @@
         </p>
         @include('rapidez::checkout.partials.create-account')
     </div>
-    <x-rapidez::button type="submit" dusk="continue" class="self-start">
+    <x-rapidez::button.enhanced type="submit" dusk="continue" class="self-start">
         @lang('Continue')
-    </x-rapidez::button>
+    </x-rapidez::button.enhanced>
 </form>
diff --git a/resources/views/checkout/steps/login.blade.php b/resources/views/checkout/steps/login.blade.php
@@ -24,9 +24,9 @@ class="mt-3"
                 required
             />
 
-            <x-rapidez::button type="submit" class="w-full mt-5" dusk="continue">
+            <x-rapidez::button.enhanced type="submit" class="w-full mt-5" dusk="continue">
                 @lang('Continue')
-            </x-rapidez::button>
+            </x-rapidez::button.enhanced>
 
             @if (App::providerIsLoaded('Rapidez\Account\AccountServiceProvider'))
                 <a href="{{ route('account.forgotpassword') }}" class="inline-block text-sm hover:underline mt-5" v-if="!emailAvailable">

diff --git a/resources/views/checkout/steps/payment.blade.php b/resources/views/checkout/steps/payment.blade.php
@@ -62,7 +62,7 @@ class="ml-auto w-8 h-8"
         </div>
     @endif
 
-    <x-rapidez::button type="submit" class="mt-5" dusk="continue">
+    <x-rapidez::button.enhanced type="submit" class="mt-5" dusk="continue">
         @lang('Place order')
-    </x-rapidez::button>
+    </x-rapidez::button.enhanced>
 </form>
diff --git a/resources/views/components/button/base.blade.php b/resources/views/components/button/base.blade.php
@@ -1,3 +1,23 @@
+{{--
+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(['disableWhenLoading' => true])
 
 @php
@@ -7,9 +27,6 @@
 
 <x-tag
     is="{{ $tag }}"
-    {{ $attributes->merge([
-        'class' => 'flex items-center justify-center font-semibold py-2 px-4 border rounded disabled:opacity-50 disabled:cursor-not-allowed hover:opacity-75 whitespace-nowrap transition',
-        ':disabled' => $attributes->has('href') || $attributes->has(':href') || !$disableWhenLoading ? null : '$root.loading' ]) }}
->
+    {{ $attributes->merge([':disabled' => $attributes->has('href') || $attributes->has(':href') || !$disableWhenLoading ? null : '$root.loading' ]) }}>
     {{ $slot }}
 </x-tag>
diff --git a/resources/views/components/button/cart.blade.php b/resources/views/components/button/cart.blade.php
@@ -1,11 +1,19 @@
-<x-rapidez::button {{ $attributes->merge([
-    'type' => 'submit',
-    'dusk' => 'add-to-cart',
-])->class('flex items-center') }}>
-    <x-heroicon-o-shopping-cart class="mr-2 h-5 w-5" v-if="!addToCart.adding && !addToCart.added" />
-    <x-heroicon-o-arrow-path class="mr-2 h-5 w-5 animate-spin" v-if="addToCart.adding" v-cloak />
-    <x-heroicon-o-check class="mr-2 h-5 w-5" v-if="addToCart.added" v-cloak />
+{{--
+This is the default add to cart button and has a nice loading animation when you click on it.
+
+Example:
+```
+    <x-rapidez:button.card>Something</x-rapidez:button.card>
+```
+--}}
+
+<x-rapidez::button.enhanced
+    v-bind:class="{ 'button-loading': addToCart.adding }"
+    class="flex-1"
+    {{ $attributes->merge([ 'type' => 'submit', 'dusk' => 'add-to-cart']) }}
+>
+    <x-heroicon-o-shopping-cart class="mr-2 size-5" />
     <span v-if="!addToCart.adding && !addToCart.added">@lang('Add to cart')</span>
-    <span v-if="addToCart.adding" v-cloak>@lang('Adding')...</span>
+    <span v-if="addToCart.adding" v-cloak>@lang('Adding')</span>
     <span v-if="addToCart.added" v-cloak>@lang('Added')</span>
-</x-rapidez::button>
+</x-rapidez::button.enhanced>
diff --git a/resources/views/components/button/enhanced.blade.php b/resources/views/components/button/enhanced.blade.php
@@ -0,0 +1,13 @@
+{{--
+This is the enhanced button the button will be used for the add to cart buttons
+and it is used in 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
@@ -1,3 +1,12 @@
-<x-rapidez::button.base {{ $attributes->class('bg-inactive text-white') }}>
+{{--
+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
@@ -1,3 +1,12 @@
-<x-rapidez::button.base {{ $attributes->class('bg-transparent hover:bg-neutral text-neutral hover:text-white border-neutral hover:border-transparent') }}>
+{{--
+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.base>
+</x-rapidez::button>
diff --git a/resources/views/components/button/primary.blade.php b/resources/views/components/button/primary.blade.php
@@ -1,3 +1,12 @@
-<x-rapidez::button.base {{ $attributes->class('bg-primary text-primary-text') }}>
+{{--
+This is the primary button.
+
+Example:
+```
+    <x-rapidez:button.primary>Something</x-rapidez:button.primary>
+```
+--}}
+
+<x-rapidez::button {{ $attributes->twMerge('bg-primary text-white border-b border-black/15') }}>
     {{ $slot }}
-</x-rapidez::button.base>
+</x-rapidez::button>
diff --git a/resources/views/components/button/slider.blade.php b/resources/views/components/button/slider.blade.php
@@ -1,3 +1,12 @@
-<x-rapidez::button.base {{ $attributes->class('rounded-full w-12 h-12 bg-white border hover:bg-neutral hover:text-white') }}>
+{{--
+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 bg-white text-neutral border') }}>
     {{ $slot }}
-</x-rapidez::button.base>
+</x-rapidez::button>
diff --git a/resources/views/layouts/partials/footer/newsletter.blade.php b/resources/views/layouts/partials/footer/newsletter.blade.php
@@ -23,13 +23,13 @@ class="w-full min-w-0 appearance-none rounded-md border h-10 border-text-inactiv
                                 required
                             />
                             <div class="mt-3 rounded-md sm:mt-0 sm:ml-3 sm:flex-shrink-0">
-                                <x-rapidez::button
+                                <x-rapidez::button.primary
                                     type="submit"
                                     dusk="newsletter-submit"
                                     class="w-full"
                                 >
                                     @lang('Subscribe')
-                                </x-rapidez::button>
+                                </x-rapidez::button.primary>
                             </div>
                         </form>
                         <p v-if="error" class="mt-3 text-sm text-red-700" v-cloak>

diff --git a/resources/views/layouts/partials/header/minicart.blade.php b/resources/views/layouts/partials/header/minicart.blade.php
@@ -20,9 +20,9 @@
                 <x-rapidez::button.outline href="{{ route('cart') }}" class="mr-5">
                     @lang('Show cart')
                 </x-rapidez::button.outline>
-                <x-rapidez::button href="{{ route('checkout') }}">
+                <x-rapidez::button.enhanced href="{{ route('checkout') }}">
                     @lang('Checkout')
-                </x-rapidez::button>
+                </x-rapidez::button.enhanced>
             </div>
         </div>
     </div>

diff --git a/resources/views/listing/filters.blade.php b/resources/views/listing/filters.blade.php
@@ -1,23 +1,24 @@
-@php($id = uniqid('filters-'))
-<x-rapidez::slideover.mobile :$id :title="__('Filters')" position="right">
-    <div class="w-full p-2">
-        {{-- On mobile the filters aren't immedately visible so we should defer loading --}}
-        <lazy>
-            @include('rapidez::listing.partials.filter.selected')
-            @include('rapidez::listing.partials.filter.category')
-            <template v-for="filter in filters">
-                @include('rapidez::listing.partials.filter.price')
-                @include('rapidez::listing.partials.filter.swatch')
-                @include('rapidez::listing.partials.filter.boolean')
-                @include('rapidez::listing.partials.filter.select')
-            </template>
-        </lazy>
-        <x-rapidez::button for="{{ $id }}" class="w-full text-sm lg:hidden">
-            @lang('Show results')
-        </x-rapidez::button>
-    </div>
-</x-rapidez::slideover.mobile>
-
-<x-rapidez::button :for="$id" class="mb-3 w-full lg:hidden">
-    @lang('Filters')
-</x-rapidez::button>
+<x-rapidez::slideover :mobile-only="true">
+    <x-slot:button>
+        <x-rapidez::button.primary v-on:click="toggle" class="mb-3 w-full md:hidden">
+            @lang('Filters')
+        </x-rapidez::button.primary>
+    </x-slot:button>
+    <x-slot:title>
+        @lang('Filters')
+    </x-slot:title>
+    {{-- On mobile the filters aren't immedately visible so we should defer loading --}}
+    <lazy>
+        @include('rapidez::listing.partials.filter.selected')
+        @include('rapidez::listing.partials.filter.category')
+        <template v-for="filter in filters">
+            @include('rapidez::listing.partials.filter.price')
+            @include('rapidez::listing.partials.filter.swatch')
+            @include('rapidez::listing.partials.filter.boolean')
+            @include('rapidez::listing.partials.filter.select')
+        </template>
+    </lazy>
+    <x-rapidez::button.primary v-on:click="toggle" class="w-full text-sm md:hidden">
+        @lang('Show results')
+    </x-rapidez::button.primary>
+</x-rapidez::slideover>
diff --git a/resources/views/listing/partials/item/addtocart.blade.php b/resources/views/listing/partials/item/addtocart.blade.php
@@ -15,7 +15,7 @@
         <div v-else>
             @include('rapidez::listing.partials.item.super_attributes')
 
-            <x-rapidez::button.cart/>
+            <x-rapidez::button.cart class="w-40"/>
         </div>
     </form>
 </add-to-cart>
diff --git a/resources/views/product/partials/addtocart.blade.php b/resources/views/product/partials/addtocart.blade.php
@@ -14,7 +14,7 @@
                 </div>
             @endif
 
-            <div class="flex flex-wrap items-center gap-3">
+            <div class="flex flex-wrap items-center gap-3 lg:max-w-96">
                 <div>
                     <div class="text-2xl font-bold text-neutral" v-text="$options.filters.price(addToCart.specialPrice || addToCart.price)">
                         {{ price($product->special_price ?: $product->price) }}
@@ -26,7 +26,7 @@
 
                 @include('rapidez::product.partials.quantity')
 
-                <x-rapidez::button.cart/>
+                <x-rapidez::button.cart class="w-40"/>
             </div>
         @endif
     </form>

diff --git a/resources/views/product/partials/grouped.blade.php b/resources/views/product/partials/grouped.blade.php
@@ -19,7 +19,7 @@
                 @else
                     @include('rapidez::product.partials.quantity', ['product' => $groupedProduct])
 
-                    <x-rapidez::button.cart/>
+                    <x-rapidez::button.cart class="w-40"/>
                 @endif
             </form>
         </add-to-cart>

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -29,6 +29,8 @@ module.exports = {
                 inactive: 'rgb(var(--inactive) / <alpha-value>)', // Inactive text color
                 highlight: 'rgb(var(--highlight) / <alpha-value>)', // Background highlight color
                 border: 'rgb(var(--border) / <alpha-value>)', // Border color
+                disabled: 'rgb(var(--disabled) / <alpha-value>)', // Disabled color
+                enhanced: 'rgb(var(--enhanced) / <alpha-value>)' // Enhanced color
             },
             borderColor: {
                 DEFAULT: 'rgb(var(--border) / <alpha-value>)', // Border color default so it gets used when only using border