New layouts

resources/views/components/wms/page-hero.blade.php

@@ -2,31 +2,40 @@
     'eyebrow' => 'MPBA WMS',
     'title',
     'description' => null,
+    'icon' => null,
     'stats' => [],
 ])
 
-<section class="wms-page-hero">
+<section {{ $attributes->merge(['class' => 'wms-page-hero']) }}>
     <div class="wms-page-hero-copy">
-        <p class="wms-page-hero-eyebrow">{{ $eyebrow }}</p>
+        <p class="wms-page-hero-kicker">{{ $eyebrow }}</p>
         <h1 class="wms-page-hero-title">{{ $title }}</h1>
         @if($description)
             <p class="wms-page-hero-description">{{ $description }}</p>
         @endif
     </div>
 
-    @if(count($stats))
-        <div class="wms-page-hero-stats">
-            @foreach($stats as $stat)
-                <article class="wms-page-hero-stat">
-                    <p class="wms-page-hero-stat-label">{{ $stat['label'] ?? '' }}</p>
-                    <p class="wms-page-hero-stat-value">
-                        @if(! empty($stat['icon']))
-                            <i class="{{ $stat['icon'] }}" aria-hidden="true"></i>
-                        @endif
-                        <span>{{ $stat['value'] ?? '' }}</span>
-                    </p>
-                </article>
-            @endforeach
-        </div>
-    @endif
+    <div class="wms-page-hero-actions">
+        @foreach($stats as $stat)
+            <article class="wms-page-hero-stat">
+                <span>{{ $stat['label'] ?? '' }}</span>
+                <strong>
+                    @if(! empty($stat['icon']))
+                        <i class="{{ $stat['icon'] }}" aria-hidden="true"></i>
+                    @endif
+                    {{ $stat['value'] ?? '' }}
+                </strong>
+            </article>
+        @endforeach
+
+        @if($icon && count($stats) === 0)
+            <article class="wms-page-hero-stat wms-page-hero-icon-card" aria-hidden="true">
+                <strong><i class="{{ $icon }}"></i></strong>
+            </article>
+        @endif
+
+        @if($slot->isNotEmpty())
+            {{ $slot }}
+        @endif
+    </div>
 </section>