Consitent components

waynestate · Dec 19, 2023 · d5d2a6c · d5d2a6c
1 parent 769ff2a
commit d5d2a6c
Show file tree

Hide file tree

Showing 14 changed files with 111 additions and 107 deletions.
diff --git a/resources/scss/components/_play-video-button.scss b/resources/scss/components/_play-video-button.scss
@@ -2,11 +2,10 @@
     @apply relative block;
 
     &::after {
-        @apply absolute inset-0 opacity-70 transition-all bg-no-repeat bg-center group-hover:opacity-100 hover:opacity-100;
+        @apply absolute inset-0 opacity-70 transition-all bg-no-repeat bg-center group-hover:opacity-100 hover:opacity-100 bg-[length:50%] md:bg-[length:100px];
 
         content: '';
         background-image: url('/_resources/images/youtube-play.svg');
-        background-size: 100px;
     }
 
     img {

diff --git a/resources/views/childpage.blade.php b/resources/views/childpage.blade.php
@@ -12,7 +12,7 @@
             @foreach($components as $componentName => $component)
                 @if(!empty($component['data']) && !empty($component['component']['filename']))
                     <div class="col-span-2 {{ str_contains($component['component']['filename'], 'column') ? 'md:col-span-1' : 'md:col-span-2' }}">
-                        @if(!empty($component['component']['heading']))<h2 class="mt-0">{{ $component['component']['heading'] }}</h2>@endif
+                        @if(!empty($component['component']['heading']))<h2 class="mt-0" id="{{ Str::slug($component['component']['heading']) }}">{{ $component['component']['heading'] }}</h2>@endif
 
                         @include('components/'.$component['component']['filename'], ['data' => $component['data'], 'component' => $component['component']])
                     </div>

diff --git a/resources/views/components/catalog.blade.php b/resources/views/components/catalog.blade.php
@@ -18,17 +18,13 @@
             @if(!empty($component['columns']) && $component['columns'] == 1)
                 <div class="grid gap-6">
                     @foreach($group_items as $item)
-                        @include('components/promo/list-item-small')
+                        @include('components/promo/list-item-large')
                     @endforeach
                 </div>
             @else
-                <div class="grid gap-6 sm:grid-cols-2 lg:grid-cols-{{ !empty($component['columns']) && count($data) % 2 == 0 ? '2' : '3' }} xl:grid-cols-{{ !empty($component['columns']) ? $component['columns'] : '3' }}">
+                <div class="grid gap-6 {{ !empty($component['columns']) && $component['columns'] % 2 == 0 ? ' sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-'.($component['columns']) : ' sm:grid-cols-2 md:grid-cols-3' }}"> 
                     @foreach($group_items as $item)
-                        @if(!empty($component['gradientOverlay']) && $component['gradientOverlay'] === true)
-                            @include('components/promo/grid-item-gradient-overlay')
-                        @else
-                            @include('components/promo/grid-item')
-                        @endif
+                        @include('components/promo/grid-item')
                     @endforeach
                 </div>
             @endif
@@ -37,17 +33,13 @@
         @if(!empty($component['columns']) && $component['columns'] == 1)
             <div class="grid gap-6">
                 @foreach($data as $item)
-                    @include('components/promo/list-item-small')
+                    @include('components/promo/list-item-large')
                 @endforeach
             </div>
         @else
-            <div class="grid gap-6 sm:grid-cols-2 lg:grid-cols-{{ !empty($component['columns']) && count($data) % 2 == 0 ? '2' : '3' }} xl:grid-cols-{{ !empty($component['columns']) ? $component['columns'] : '3' }}">
+            <div class="grid gap-6 {{ !empty($component['columns']) && $component['columns'] % 2 == 0 ? (count($data) >= 4 ? ' sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-'.($component['columns']) : ' md:grid-cols-'.$component['columns']) : (count($data) >= 3 ? ' sm:grid-cols-1 md:grid-cols-3' : ' md:grid-cols-'.$component['columns']) }}"> 
                 @foreach($data as $item)
-                    @if(!empty($component['gradientOverlay']) && $component['gradientOverlay'] === true)
-                        @include('components/promo/grid-item-gradient-overlay')
-                    @else
-                        @include('components/promo/grid-item')
-                    @endif
+                    @include('components/promo/grid-item')
                 @endforeach
             </div>
         @endif

diff --git a/resources/views/components/promo-column.blade.php b/resources/views/components/promo-column.blade.php
@@ -3,9 +3,5 @@
     $image_promo => single // ['title', 'link', 'filename_url', 'filename_alt_text']
 --}}
 @foreach($data as $item)
-    @if(!empty($component['gradientOverlay']) && $component['gradientOverlay'] === true)
-        @include('components/promo/grid-item-gradient-overlay')
-    @else
-        @include('components/promo/grid-item')
-    @endif
+    @include('components/promo/grid-item')
 @endforeach
diff --git a/resources/views/components/promo-row.blade.php b/resources/views/components/promo-row.blade.php
@@ -2,5 +2,5 @@
     $item => single // ['title', 'excerpt', 'description', 'link', 'relative_url', 'filename_alt_text']
 --}}
 @foreach($data as $item)
-    @include('components/promo/list-item-small')
+    @include('components/promo/list-item-large')
 @endforeach
diff --git a/resources/views/components/promo/grid-item-gradient-overlay.blade.php b/resources/views/components/promo/grid-item-gradient-overlay.blade.php
diff --git a/resources/views/components/promo/grid-item.blade.php b/resources/views/components/promo/grid-item.blade.php
@@ -3,9 +3,9 @@
     $item => array // ['title', 'link', 'description', 'excerpt', 'relative_url', 'option']
 --}}
 
-<{{ !empty($item['link']) ? 'a href='.$item['link'] : 'div' }} class="block {{ !empty($item['link']) ? 'group' : '' }}">
+<{{ !empty($item['link']) ? 'a href='.$item['link'] : 'div' }} class="block {{ !empty($component['gradientOverlay']) && $component['gradientOverlay'] === true ? 'bg-green-800 relative overflow-hidden' : '' }} {{ !empty($item['link']) ? 'group' : '' }}">
     @if(!empty($item['youtube_id']))
-        <div class="play-video-button w-1/4 md:w-full">
+        <div class="play-video-button">
             @if(!empty($item['relative_url']))
                 @image($item['relative_url'], $item['filename_alt_text'], "lazy w-full")
             @else
@@ -15,17 +15,19 @@
     @elseif(!empty($item['relative_url']))
         @image($item['relative_url'], $item['filename_alt_text'], "lazy w-full")
     @endif
-    <div class="w-full mt-1 md:mt-2">
-        <div class="font-bold text-xl {{ !empty($item['link']) ? 'group-hover:underline group-focus:underline' : '' }}">{{ $item['title'] }}</div>
-        @if(!empty($item['excerpt']))<p class="text-black mb-0 mt-1">{!! strip_tags($item['excerpt'], ['em', 'strong']) !!}</p>@endif 
-        @if(!empty($item['description']))
-            @if (!empty($item['link']))
-                <div class="w-full mt-1 -mb-4 text-black">{!! preg_replace(array('"<a href(.*?)>"', '"</a>"'), array('',''), $item['description']) !!}</div>
-            @else
-                <div class="w-full mt-1 -mb-4 text-black">{!! $item['description'] !!}</div>
-            @endif
-        @endif
+    <div class="w-full {{ !empty($component['gradientOverlay']) && $component['gradientOverlay'] === true ? 'bg-gradient-darkest absolute inset-x-0 bottom-0' : 'mt-1 md:mt-2'}}">
+        <div class="content {{ !empty($component['gradientOverlay']) && $component['gradientOverlay'] === true ? 'white-links text-white relative p-4 pb-3 pt-14 drop-shadow-px' : '' }}">
+            <div class="mb-1 font-bold {{ !empty($component['columns']) ? ($component['columns'] < 4 ? ($component['columns'] < 3 ? 'text-lg lg:text-xl' : 'text-lg') : 'text-lg lg:text-base') : 'text-xl' }} {{ !empty($item['link']) ? 'group-hover:underline group-focus:underline' : '' }} leading-snug xl:leading-tight">{{ $item['title'] }}</div>
+            <div class="{{ !empty($component['columns']) ? ($component['columns'] < 4 ? ($component['columns'] < 3 ? 'text-base sm:text-sm md:text-base leading-tight sm:leading-tight md:leading-tight' : 'text-base md:text-sm xl:text-base leading-normal') : 'text-base sm:text-sm') : 'text-base leading-normal' }} {{ !empty($component['gradientOverlay']) && $component['gradientOverlay'] === true ? 'xl:leading-tight' : 'text-black'}}">
+                @if(!empty($item['excerpt']))<p class="my-1">{!! strip_tags($item['excerpt'], ['em', 'strong']) !!}</p>@endif 
+                @if(!empty($item['description']))
+                    @if (!empty($item['link']))
+                        <div class="-mb-3">{!! preg_replace(array('"<a href(.*?)>"', '"</a>"'), array('',''), $item['description']) !!}</div>
+                    @else
+                        <div class="-mb-3">{!! $item['description'] !!}</div>
+                    @endif
+                @endif
+            </div>
+        </div>
     </div>
 <{{ !empty($item['link']) ? '/a' : '/div' }}>
-
-
diff --git a/resources/views/components/promo/list-item-large.blade.php b/resources/views/components/promo/list-item-large.blade.php
@@ -3,8 +3,10 @@
     $item => array // ['title', 'link', 'description', 'excerpt', 'relative_url', 'option']
 --}}
 
-<{{ !empty($item['link']) ? 'a href='.$item['link'] : 'div' }} class="md:flex items-center gap-x-3 lg:gap-x-6 mb-8 {{ !empty($item['link']) ? 'group' : '' }}">
-    <div class="md:w-1/2 shrink-0 grow-0 @if(!empty($component['imagePosition']) && $component['imagePosition'] === 'right') md:order-2 @endif">
+<{{ !empty($item['link']) ? 'a href='.$item['link'] : 'div' }} 
+class="{{ !empty($component['imageSize']) && $component['imageSize'] === 'small' ? 'flex items-start' : 'md:flex items-center' }} gap-x-3 lg:gap-x-6 {{ !empty($item['link']) ? 'group' : '' }}">
+    <div class="shrink-0 grow-0 {{ !empty($component['imageSize']) && $component['imageSize'] === 'small' ? 'w-1/4' : 'md:w-2/5' }}  
+        @if(!empty($component['imagePosition']) && ($component['imagePosition'] === 'right' || ($component['imagePosition'] === 'alternate' && $loop->even))) md:order-2 @endif">
         @if(!empty($item['youtube_id']))
             <div class="play-video-button">
                 @if(!empty($item['relative_url']))
@@ -19,16 +21,18 @@
     </div>
 
     <div class="content">
-        <div class="font-bold text-xl lg:text-2xl mt-2 lg:mt-0 group-hover:underline group-focus:underline">{{ $item['title'] }}</div>
-        @if(!empty($item['excerpt']))
-            <div class="text-black mt-1">{!! strip_tags($item['excerpt'], ['em', 'strong']) !!}</div>
-        @endif
-        @if(!empty($item['description']))
-            @if (!empty($item['link']))
-                <div class="text-black mt-1">{!! preg_replace(array('"<a href(.*?)>"', '"</a>"'), array('',''), $item['description']) !!}</div>
-            @else
-                <div class="text-black mt-1">{!! $item['description'] !!}</div>
+        <div class="font-bold group-hover:underline group-focus:underline {{ !empty($component['imageSize']) && $component['imageSize'] === 'small' ? 'text-lg lg:text-xl' : 'text-xl lg:text-2xl ' }}">{{ $item['title'] }}</div>
+        <div class="text-black mt-1 {{ !empty($component['imageSize']) && $component['imageSize'] === 'small' ? 'text-sm lg:text-base' : 'text-base' }}">
+            @if(!empty($item['excerpt']))
+                <p>{!! strip_tags($item['excerpt'], ['em', 'strong']) !!}</p>
             @endif
-        @endif
+            @if(!empty($item['description']))
+                @if (!empty($item['link']))
+                    <div>{!! preg_replace(array('"<a href(.*?)>"', '"</a>"'), array('',''), $item['description']) !!}</div>
+                @else
+                    <div>{!! $item['description'] !!}</div>
+                @endif
+            @endif
+        </div>
     </div>
 <{{ !empty($item['link']) ? '/a' : '/div' }}>
diff --git a/resources/views/components/promo/list-item-small.blade.php b/resources/views/components/promo/list-item-small.blade.php
@@ -3,7 +3,7 @@
     $item => array // ['title', 'link', 'description', 'excerpt', 'relative_url', 'option']
 --}}
 
-<{{ !empty($item['link']) ? 'a href='.$item['link'] : 'div' }} class="flex items-start space-x-3 md:space-x-6 mb-8 {{ !empty($item['link']) ? 'group' : '' }}">
+<{{ !empty($item['link']) ? 'a href='.$item['link'] : 'div' }} class=" flex items-start space-x-3 md:space-x-6 mb-8 {{ !empty($item['link']) ? 'group' : '' }}">
     @if(!empty($item['youtube_id']))
         <div class="play-video-button w-1/4 shrink-0">
             @if(!empty($item['filename_url']))

diff --git a/styleguide/Http/Controllers/CatalogController.php b/styleguide/Http/Controllers/CatalogController.php
@@ -59,7 +59,8 @@ public function index(Request $request): View
 "showExcerpt":true,
 "showDescription":false,
 "groupByOptions":false,
-"gradientOverlay":false
+"gradientOverlay":false,
+"imageSize":small
 }
 </pre>
             </td>
@@ -118,14 +119,25 @@ public function index(Request $request): View
                 ],
             ],
             'catalog-1' => [
-                'data' => app(GenericPromo::class)->create(5, false, [
+                'data' => app(GenericPromo::class)->create(3, false, [
                     'description' => '',
                 ]),
                 'component' => [
                     'heading' => 'Three-column catalog',
                     'filename' => 'catalog',
                     'columns' => '3',
                     'showDescription' => false,
+                ],
+            ],
+            'catalog-9' => [
+                'data' => app(GenericPromo::class)->create(2, false, [
+                    'description' => '',
+                ]),
+                'component' => [
+                    'heading' => 'Two-column catalog',
+                    'filename' => 'catalog',
+                    'columns' => '2',
+                    'showDescription' => false,
                     'gradientOverlay' => false,
                 ],
             ],
@@ -138,22 +150,23 @@ public function index(Request $request): View
                     'filename' => 'catalog',
                     'columns' => '1',
                     'showDescription' => false,
+                    'imageSize' => 'small',
                 ],
             ],
             'catalog-3' => [
                 'data' => app(PromoWithOptions::class)->create(8, false, [
                     'excerpt' => '',
                 ]),
                 'component' => [
-                    'heading' => 'Catalog sorted by option',
+                    'heading' => 'Four-column catalog sorted by option',
                     'filename' => 'catalog',
                     'columns' => '4',
                     'showDescription' => false,
                     'groupByOptions' => true,
                 ],
             ],
-            'catalog-10' => [
-                'data' => app(GenericPromo::class)->create(5, false, [
+            'catalog-5' => [
+                'data' => app(GenericPromo::class)->create(3, false, [
                     'relative_url' => '/styleguide/image/450x600',
                     'description' => '',
                 ]),
@@ -165,6 +178,20 @@ public function index(Request $request): View
                     'gradientOverlay' => true,
                 ],
             ],
+            'catalog-6' => [
+                'data' => app(GenericPromo::class)->create(3, false, [
+                    'relative_url' => '',
+                    'excerpt' => '',
+                    'youtube_id' => '',
+                    'link' => '',
+                ]),
+                'component' => [
+                    'heading' => 'Catalog without images',
+                    'filename' => 'catalog',
+                    'columns' => '3',
+                    'showDescription' => true,
+                ],
+            ],
         ];
 
         $components['components']['catalog-3']['data'] = $this->components->organizePromoItemsByOption($components['components']['catalog-3']['data']);

diff --git a/styleguide/Http/Controllers/ChildpageWithComponentsController.php b/styleguide/Http/Controllers/ChildpageWithComponentsController.php
@@ -137,6 +137,18 @@ public function index(Request $request): View
                 ],
             ],
 
+            'catalog-10' => [
+                'data' => app(GenericPromo::class)->create(4, false, [
+                    'description' => '',
+                ]),
+                'component' => [
+                    'heading' => 'Three column catalog',
+                    'filename' => 'catalog',
+                    'columns' => '3',
+                    'showDescription' => false,
+                ],
+            ],
+
             'content-row-1' => [
                 'data' => app(GenericPromo::class)->create(1, false, [
                     'title' => 'Content row',
@@ -205,6 +217,7 @@ public function index(Request $request): View
                     'filename' => 'catalog',
                     'columns' => '1',
                     'showDescription' => false,
+                    'imageSize' => 'small',
                 ],
             ],
 
@@ -218,25 +231,18 @@ public function index(Request $request): View
             ],
 
             'promo-row-1' => [
-                'data' => app(GenericPromo::class)->create(1, false),
-                'component' => [
-                    'heading' => 'Video row',
-                    'filename' => 'promo-row',
-                ],
-            ],
-
-            'promo-row-2' => [
-                'data' => app(Video::class)->create(1, false),
+                'data' => app(GenericPromo::class)->create(2, false),
                 'component' => [
+                    'heading' => 'Promo row',
                     'filename' => 'promo-row',
-                    'imagePosition' => 'right',
+                    'imagePosition' => 'alternate',
                 ],
             ],
 
-            'promo-column-1' => [
+            'promo-column-3' => [
                 'data' => app(Video::class)->create(1, false),
                 'component' => [
-                    'heading' => 'Video column',
+                    'heading' => 'Promo column',
                     'filename' => 'promo-column',
                 ],
             ],
@@ -245,7 +251,6 @@ public function index(Request $request): View
                 'data' => app(GenericPromo::class)->create(4, false, [
                     'option' => 'Default',
                     'excerpt' => '',
-                    'relative_url' => '',
                 ]),
                 'component' => [
                     'heading' => 'Button column',

diff --git a/styleguide/Http/Controllers/SinglePromoController.php b/styleguide/Http/Controllers/SinglePromoController.php
@@ -103,6 +103,7 @@ public function index(Request $request): View
 "singlePromoView":true,
 "showExcerpt":true,
 "showDescription":false,
+"imagePosition":alternate,
 }
 </pre>
             </td>

diff --git a/styleguide/Pages/UsingComponents.php b/styleguide/Pages/UsingComponents.php
@@ -26,12 +26,6 @@ public function getPageData()
                     'application_id' => 1,
                 ],
             ],
-            'data' => [
-                'modular-hero-1' => '{"id":"1"}',
-                'modular-buttons' => '{}',
-                'modular-events-column-1' => 1,
-                'modular-news-column-1' => 2,
-            ],
         ]);
     }
 }