Component tweaks

waynestate · Dec 7, 2023 · d493244 · d493244
1 parent ce0a589
commit d493244
Show file tree

Hide file tree

Showing 15 changed files with 348 additions and 62 deletions.
diff --git a/factories/GenericPromo.php b/factories/GenericPromo.php
@@ -29,7 +29,6 @@ public function create($limit = 1, $flatten = false, $options = [])
                 'title' => ucfirst(implode(' ', $this->faker->words(6))),
                 'excerpt' => $this->faker->catchPhrase,
                 'description' => '<p>' . $this->faker->text(100) . ' <a href="https://wayne.edu">'. $this->faker->sentence(3)  .'</a></p>',
-                'description' => '<p>' . $this->faker->text(100) . ' <a href="https://wayne.edu">'. $this->faker->sentence(3)  .'</a></p>',
                 'link' => 'https://wayne.edu',
                 'promo_item_id' => $i,
                 'promo_group_id' => strval($promo_group_id),

diff --git a/factories/Icon.php b/factories/Icon.php
@@ -0,0 +1,51 @@
+<?php
+
+namespace Factories;
+
+use Contracts\Factories\FactoryContract;
+use Faker\Factory;
+
+class Icon implements FactoryContract
+{
+    /**
+     * Construct the factory.
+     */
+    public function __construct(Factory $faker)
+    {
+        $this->faker = $faker->create();
+    }
+
+    /**
+     * {@inheritdoc}
+     */
+    public function create($limit = 1, $flatten = false, $options = [])
+    {
+        $icon_green = "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI2LjAuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAxMDAgMTAwOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+Cgkuc3Qwe2ZpbGw6IzA4MzUyRjt9Cjwvc3R5bGU+CjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik01MCwyLjVDMjMuOCwyLjUsMi41LDIzLjgsMi41LDUwUzIzLjgsOTcuNSw1MCw5Ny41Uzk3LjUsNzYuMiw5Ny41LDUwUzc2LjIsMi41LDUwLDIuNXogTTQzLjgsMjAuOQoJYzEuNi0xLjUsMy41LTIuMiw1LjYtMi4yYzIuMiwwLDQuMSwwLjcsNS42LDIuMmMxLjYsMS41LDIuMywzLjIsMi4zLDUuM2MwLDItMC44LDMuOC0yLjQsNS4yYy0xLjYsMS40LTMuNCwyLjItNS42LDIuMgoJYy0yLjIsMC00LjEtMC43LTUuNi0yLjJjLTEuNi0xLjQtMi40LTMuMi0yLjQtNS4yQzQxLjQsMjQuMSw0Mi4yLDIyLjMsNDMuOCwyMC45eiBNNjMuMyw4MS4zSDM3Ljd2LTNjMC43LTAuMSwxLjQtMC4xLDIuMS0wLjIKCXMxLjMtMC4yLDEuNy0wLjRjMC45LTAuMywxLjUtMC44LDEuOC0xLjRzMC41LTEuNCwwLjUtMi40VjUwLjRjMC0wLjktMC4yLTEuOC0wLjYtMi41Yy0wLjQtMC43LTEtMS4zLTEuNi0xLjcKCWMtMC41LTAuMy0xLjItMC42LTIuMi0wLjlzLTEuOS0wLjUtMi43LTAuNnYtM2wxOS44LTEuMWwwLjYsMC42djMyLjFjMCwwLjksMC4yLDEuNywwLjYsMi40YzAuNCwwLjcsMSwxLjIsMS43LDEuNQoJYzAuNSwwLjIsMS4xLDAuNSwxLjgsMC42YzAuNiwwLjIsMS4zLDAuMywyLDAuNHYzLjFDNjMuMiw4MS4zLDYzLjMsODEuMyw2My4zLDgxLjN6Ii8+Cjwvc3ZnPgo=";
+
+        for ($i = 1; $i <= $limit; $i++) {
+            $data[$i] = [
+                'link' => '#',
+                //'title' => 'Step '.$i,
+                'title' => ucfirst(implode(' ', $this->faker->words(2))),
+                'excerpt' => ucfirst(implode(' ', $this->faker->words(5))),
+                'description' => '<p>'.ucfirst(implode(' ', $this->faker->words(10))).' <a href="#">'.implode(' ', $this->faker->words(2)).'</a>.</p>',
+                //'description' => '<p>' . $this->faker->text(20) . ' <a href="https://wayne.edu">'. $this->faker->sentence(3)  .'</a></p>',
+                'promo_item_id' => $i,
+                'relative_url' => $icon_green,
+                'filename_alt_text' => 'Placeholder icon '.$i,
+                'option' => '',
+                'group' => [
+                    'title' => 'Promo group title',
+                ],
+            ];
+
+            $data[$i] = array_replace_recursive($data[$i], $options);
+        }
+
+        if ($limit === 1 && $flatten === true) {
+            return current($data);
+        }
+
+        return $data;
+    }
+}
diff --git a/resources/scss/components/_global-tables.scss b/resources/scss/components/_global-tables.scss
@@ -37,6 +37,10 @@ table {
         }
     }
 
+    &.no-stripe tr {
+        @apply bg-white;
+    }
+
     th {
         @apply bg-gray-100 font-bold px-4 py-3 text-green-600 leading-none border-b border-b-gray-300;
     }

diff --git a/resources/views/components/button-row.blade.php b/resources/views/components/button-row.blade.php
@@ -2,7 +2,7 @@
     $button => array // ['title', 'link']
 --}}
 
-<ul class="grid md:grid-cols-2 lg:grid-cols-{{ !empty($component['columns']) && $component['columns'] >= 4 ? '2' : '3' }} xl:grid-cols-{{ !empty($component['columns']) ? $component['columns'] : '3' }} xl:mx-0 items-start gap-x-4 gap-y-2">
+<ul class="grid  md:grid-cols-{{ !empty($component['columns']) && count($data) % 2 == 0 ? '2' : '3' }} xl:grid-cols-{{ !empty($component['columns']) ? $component['columns'] : '3' }} xl:mx-0 items-start gap-x-4 gap-y-2">
     @foreach($data as $button)
         <li class="block">
             @if(!empty($button['option']) && $button['option'] === 'Image')

diff --git a/resources/views/components/catalog.blade.php b/resources/views/components/catalog.blade.php
@@ -22,7 +22,7 @@
                     @endforeach
                 </div>
             @else
-                <div class="grid gap-6 md:grid-cols-2 lg:grid-cols-{{ !empty($component['columns']) && $component['columns'] >= 3 ? '3' : '2' }} xl:grid-cols-{{ !empty($component['columns']) ? $component['columns'] : '3' }}">
+                <div class="grid gap-6 md:grid-cols-2 lg:grid-cols-{{ !empty($component['columns']) && count($data) % 2 == 0 ? '2' : '3' }} xl:grid-cols-{{ !empty($component['columns']) ? $component['columns'] : '3' }}">
                     @foreach($group_items as $item)
                         @include('components/promo-grid-item')
                     @endforeach
@@ -37,7 +37,7 @@
                 @endforeach
             </div>
         @else
-            <div class="grid gap-6 md:grid-cols-2 lg:grid-cols-{{ !empty($component['columns']) && $component['columns'] >= 3 ? '3' : '2' }} xl:grid-cols-{{ !empty($component['columns']) ? $component['columns'] : '3' }}">
+            <div class="grid gap-6 md:grid-cols-2 lg:grid-cols-{{ !empty($component['columns']) && count($data) % 2 == 0 ? '2' : '3' }} xl:grid-cols-{{ !empty($component['columns']) ? $component['columns'] : '3' }}">
                 @foreach($data as $item)
                     @include('components/promo-grid-item')
                 @endforeach

diff --git a/resources/views/components/icons-column.blade.php b/resources/views/components/icons-column.blade.php
@@ -1,20 +1,19 @@
 {{--
     $item => array // ['title', 'link', 'excerpt', 'filename_url', 'filename_alt_text']
 --}}
-<ul class="grid grid-cols-1 gap-6">
-@foreach($data as $step)
-    <li>
-        <a class="block group" href="{{ $step['link'] }}">
-            <div class="flex gap-3">
-                <div class="w-16 grow-0 shrink-0">
-                    @image($step['filename_url'], $step['filename_alt_text'], 'block mx-auto')
-                </div>
+<ul class="grid grid-cols-1 items-start gap-6 lg:gap-8 mt-2 mb-8 lg:my-8">
+    @foreach($data as $item)
+        <li>
+            <{{ !empty($item['link']) ? 'a href='.$item['link'] : 'div' }} class="flex items-start gap-x-4 {{ !empty($item['link']) ? 'group' : '' }}">
+                @image($item['relative_url'], $item['filename_alt_text'], 'grow-0 shrink-0 w-16')
                 <div>
-                    <div class="text-lg lg:text-base xl:text-xl mt-0 mb-1 underline group-hover:no-underline">{{ $step['title'] }}</div>
-                    <p class="text-base lg:text-sm xl:text-base text-black mb-0">{{ $step['excerpt'] }}</p>
+                    <div class="font-bold text-xl mt-0 mb-1 text-green no-underline group-hover:underline">{{ $item['title'] }}</div>
+                    @if(!empty($item['excerpt']))<div class="text-sm text-black">{{ $item['excerpt'] }}</div>@endif
+                    @if(!empty($item['description']))
+                        <div class="text-sm text-black">{!! !empty($item['link']) ? preg_replace(array('"<a href(.*?)>"', '"</a>"'), array('',''), $item['description']) : $item['description'] !!}</div>
+                    @endif
                 </div>
-            </div>
-        </a>
-    </li>
-@endforeach
+            <{{ !empty($item['link']) ? '/a' : '/div' }}>
+        </li>
+    @endforeach
 </ul>
diff --git a/resources/views/components/icons-row.blade.php b/resources/views/components/icons-row.blade.php
@@ -0,0 +1,19 @@
+{{--
+    $item => array // ['title', 'link', 'excerpt', 'filename_url', 'filename_alt_text']
+--}}
+<ul class="grid items-start gap-6 lg:gap-8 mt-2 mb-8 lg:my-8 md:grid-cols-2 lg:grid-cols-{{ !empty($component['columns']) && $component['columns'] >= 3 ? '3' : '2' }} xl:grid-cols-{{ !empty($component['columns']) ? $component['columns'] : '2' }}">
+    @foreach($data as $item)
+        <li>
+            <{{ !empty($item['link']) ? 'a href='.$item['link'] : 'div' }} class="flex items-start gap-x-4 {{ !empty($item['link']) ? 'group' : '' }}">
+                @image($item['relative_url'], $item['filename_alt_text'], 'grow-0 shrink-0 w-16 '.(!empty($component['columns']) && $component['columns'] >= 3 ? ' xl:w-16' : ' xl:w-20'))
+                <div>
+                    <div class="font-bold text-xl xl:text-2xl mt-0 mb-1 no-underline group-hover:underline">{{ $item['title'] }}</div>
+                    @if(!empty($item['excerpt']))<div class="text-sm lg:text-base text-black">{{ $item['excerpt'] }}</div>@endif
+                    @if(!empty($item['description']))
+                        <div class="text-sm xl:text-base text-black content">{!! !empty($item['link']) ? preg_replace(array('"<a href(.*?)>"', '"</a>"'), array('',''), $item['description']) : $item['description'] !!}</div>
+                    @endif
+                </div>
+            <{{ !empty($item['link']) ? '/a' : '/div' }}>
+        </li>
+    @endforeach
+</ul>
diff --git a/resources/views/components/icons-top-row.blade.php b/resources/views/components/icons-top-row.blade.php
@@ -0,0 +1,19 @@
+{{--
+    $item => array // ['title', 'link', 'excerpt', 'filename_url', 'filename_alt_text']
+--}}
+<ul class="grid items-start gap-6 gap-y-2 lg:gap-8 lg:gap-y-4 mt-2 mb-8 lg:my-8 grid-cols-2 lg:grid-cols-{{ !empty($component['columns']) && count($data) % 2 == 0 ? '2' : '3' }} xl:grid-cols-{{ !empty($component['columns']) ? $component['columns'] : '2' }}">
+    @foreach($data as $item)
+        <li>
+            <{{ !empty($item['link']) ? 'a href='.$item['link'] : 'div' }} {{ !empty($item['link']) ? 'class="group"' : '' }}>
+                @image($item['relative_url'], $item['filename_alt_text'], 'grow-0 shrink-0 mb-2 w-16'.(!empty($component['columns']) && $component['columns'] >= 5 ? ' xl:w-16' : ' xl:w-20'))
+                <div>
+                    <div class="font-bold text-xl mt-0 mb-1 no-underline group-hover:underline">{{ $item['title'] }}</div>
+                    @if(!empty($item['excerpt']))<div class="text-sm text-black">{{ $item['excerpt'] }}</div>@endif
+                    @if(!empty($item['description']))
+                        <div class="text-sm text-black content">{!! !empty($item['link']) ? preg_replace(array('"<a href(.*?)>"', '"</a>"'), array('',''), $item['description']) : $item['description'] !!}</div>
+                    @endif
+                </div>
+            <{{ !empty($item['link']) ? '/a' : '/div' }}>
+        </li>
+    @endforeach
+</ul>
diff --git a/styleguide/Http/Controllers/ArticleListingController.php b/styleguide/Http/Controllers/ArticleListingController.php
@@ -30,36 +30,54 @@ public function index(Request $request): View
                         'promo_item_id' => 0,
                         'title' => 'Configuration',
                         'description' => '
-<p>Visit the modular documentation for more information</p>
-<div class="grid grid-cols-1 lg:grid-cols-3 border-x border-b">
-    <div class="lg:col-span-1 p-2 bg-gray-100 font-bold lg:border-r border-y order-1 lg:order-none">Page field</div>
-    <div class="lg:col-span-2 p-2 bg-gray-100 font-bold border-y order-3 lg:order-none">Data</div>
-    <div class="lg:col-span-1 p-2 lg:border-r order-2 lg:order-none">
-        <pre class="w-full">modular-news-column-1</pre>
-        <pre class="w-full">modular-news-row-1</pre>
-    </div>
-    <div class="lg:col-span-2 p-2 order-4 lg:order-none">
-Use default settings
+<table class="no-stripe">
+    <thead>
+        <tr>
+            <th class="md:w-2/5">Page field</th>
+            <th>Data</th>
+        </tr>
+    </thead>
+    <tbody>
+        <tr>
+            <td>
+                <pre class="w-full">modular-news-column-1</pre>
+            </td>
+            <td>
 <pre class="w-full" tabindex="0">
-{}
+{
+"id":7,
+"heading":"News",
+"link_text":"More news",
+"featured":null,
+"limit":4,
+"news_route":null,
+"topics":[]
+}
 </pre>
 Use default calendar by omitting ID and set other configuration items
 <pre class="w-full" tabindex="0">
 {
 "heading": "My news"
 }
 </pre>
+            </td>
+        </tr>
+        <tr>
+            <td>
+                <pre class="w-full">modular-news-row-1</pre>
+            </td>
+            <td>
 <pre class="w-full" tabindex="0">
 {
-"id":null,
-"heading":"News",
-"link_text":"More news",
-"featured":null,
-"limit":4,
-"news_route":null,
-"topics":[]
+"heading":"Featured news",
+"featured":true,
+"columns":4
 }
-</pre></div></div>',
+</pre>
+            </td>
+        </tr>
+    </tbody>
+</table>',
                     ],
                 ],
                 'component' => [

diff --git a/styleguide/Http/Controllers/ButtonSetController.php b/styleguide/Http/Controllers/ButtonSetController.php
@@ -120,7 +120,7 @@ public function index(Request $request): View
                         'promo_item_id' => 1,
                         'title' => 'Configuration',
                         'description' => '
-<table>
+<table class="no-stripe">
     <thead>
         <tr>
             <th class="md:w-2/5">Page field</th>
@@ -131,7 +131,6 @@ public function index(Request $request): View
         <tr>
             <td>
                 <pre class="w-full">modular-button-column-1</pre>
-                <pre class="w-full">modular-button-row-1</pre>
             </td>
             <td>
 <pre class="w-full" tabindex="0">
@@ -140,6 +139,21 @@ public function index(Request $request): View
 "heading":"Buttons",
 "config":"limit:3|page_id"
 }
+</pre>
+            </td>
+        </tr>
+        <tr>
+            <td>
+                <pre class="w-full">modular-button-row-1</pre>
+            </td>
+            <td>
+<pre class="w-full" tabindex="0">
+{
+"id":000000,
+"heading":"Buttons",
+"config":"limit:3|page_id",
+"columns":3
+}
 </pre>
             </td>
         </tr>
@@ -160,6 +174,7 @@ public function index(Request $request): View
                 'component' => [
                     'heading' => 'Button row',
                     'filename' => 'button-row',
+                    'columns' => 3
                 ],
             ],
             'button-column-10' => [

diff --git a/styleguide/Http/Controllers/CatalogController.php b/styleguide/Http/Controllers/CatalogController.php
@@ -47,6 +47,7 @@ public function index(Request $request): View
 "id":000000,
 "heading":"Catalog",
 "config":"randomize|limit:1|page_id|youtube",
+"columns":3,
 "singlePromoView":true,
 "showExcerpt":true,
 "showDescription":false