From 8a822516789063b690321637d48764acb345d03a Mon Sep 17 00:00:00 2001
From: Jenny Porada <jennyingles@gmail.com>
Date: Fri, 28 Jun 2024 15:01:50 -0400
Subject: [PATCH] Adding custom heading styles to components, and also allowing
 list overrides in content class scoped areas

---
 package.json                                  |  2 +-
 resources/scss/components/_content.scss       | 52 ++++++++++++++-----
 resources/views/childpage.blade.php           | 16 +-----
 resources/views/components/catalog.blade.php  |  4 +-
 resources/views/components/heading.blade.php  | 12 ++---
 .../components/promo/grid-item.blade.php      |  4 +-
 .../components/promo/list-item.blade.php      |  4 +-
 .../views/partials/component-loop.blade.php   |  4 +-
 resources/views/partials/heading.blade.php    |  8 +++
 .../ComponentCatalogController.php            |  2 +-
 .../ComponentHeadingController.php            | 11 +++-
 styleguide/Pages/ComponentHeading.php         |  2 +-
 styleguide/Pages/ComponentHeading3.php        | 25 +++++++++
 .../styleguide-component-guide.blade.php      | 10 +++-
 styleguide/menu.json                          | 23 +++++++-
 15 files changed, 129 insertions(+), 50 deletions(-)
 create mode 100644 resources/views/partials/heading.blade.php
 create mode 100644 styleguide/Pages/ComponentHeading3.php

diff --git a/package.json b/package.json
index c57cead2..c05e4b45 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "base",
   "private": true,
-  "version": "8.10.3",
+  "version": "8.10.4",
   "description": "",
   "scripts": {
     "dev": "npm run development",
diff --git a/resources/scss/components/_content.scss b/resources/scss/components/_content.scss
index ef67847b..d4e9e7e9 100644
--- a/resources/scss/components/_content.scss
+++ b/resources/scss/components/_content.scss
@@ -1,33 +1,59 @@
 // Content returning from CMS
 .content {
-    dl,
-    ol,
     ul {
-        @apply mb-4;
-    }
-
-    ul {
-        @apply ml-8 list-disc;
+        @apply list-disc;
     }
 
     ul ul {
-        @apply mb-0 list-circle;
+        @apply list-circle;
     }
 
     ul ul ul {
-        @apply mb-0 list-square;
+        @apply list-square;
     }
 
     ol {
-        @apply ml-8 list-decimal;
+        @apply list-decimal;
     }
 
     ol ol {
-        @apply mb-0 list-lower-alpha;
+        @apply list-lower-alpha;
     }
 
     ol ol ol {
-        @apply mb-0 list-lower-roman;
+        @apply list-lower-roman;
+    }
+
+    li {
+        @apply mb-1;
+    }
+
+    dl dt:not([class*='font-']) {
+        @apply font-bold;
+    }
+
+    dl dd:not([class*='mb-']) {
+        @apply mb-3;
+    }
+
+    ol:not([class*='ml-']),
+    ul:not([class*='ml-']) {
+        @apply ml-8;
+    }
+
+    ol:not([class*='mb-']),
+    ul:not([class*='mb-']) {
+        @apply mb-4;
+    }
+
+    ul.list-none,
+    ul.list-none ul {
+        list-style-type: none;
+    }
+
+    ol:first-of-type:not([class*='mb-']),
+    ul:first-of-type:not([class*='mb-']) {
+        @apply mb-0;
     }
 
     // Tailwind preflight sets images to block
@@ -36,7 +62,7 @@
     }
 
     // TODO wtf stylelint
-    // Do not rearrange this any of this link and heading link css
+    // Do not rearrange any of this link and heading link css
     // Underline all content links
     a {
         @apply underline;
diff --git a/resources/views/childpage.blade.php b/resources/views/childpage.blade.php
index 0d4b5863..75b01325 100644
--- a/resources/views/childpage.blade.php
+++ b/resources/views/childpage.blade.php
@@ -9,19 +9,5 @@
         </div>
     @endif
 
-    @if(!empty($base['components']))
-        <div class="grid grid-cols-1 md:grid-cols-2 items-start gap-y-8 sm:gap-x-4 lg:gap-x-8 mt-8 mb-4">
-            @foreach($base['components'] as $componentName => $component)
-                @if(!empty($component['data']) && !empty($component['component']['filename']))
-                    @if(\View::exists('components/'.$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" id="{{ Str::slug($component['component']['heading']) }}">{{ $component['component']['heading'] }}</h2>@endif
-
-                            @include('components/'.$component['component']['filename'], ['data' => $component['data'], 'component' => $component['component']])
-                        </div>
-                    @endif
-                @endif
-            @endforeach
-        </div>
-    @endif
+    @include('partials.component-loop')
 @endsection
diff --git a/resources/views/components/catalog.blade.php b/resources/views/components/catalog.blade.php
index 4823b718..88c58b1a 100644
--- a/resources/views/components/catalog.blade.php
+++ b/resources/views/components/catalog.blade.php
@@ -7,9 +7,9 @@
         @foreach($data as $group => $group_items)
             @if(!empty($group))
                 @if(!empty($component['heading']))
-                    <h3 class="border-solid border-b-2 pb-1 border-gold mt-6 mt-4">{{ $group }}</h3>
+                    @include('partials/heading', ['heading' => $group, 'headingClass' => 'divider-gold pb-1 mt-6 ', 'headingLevel' => !empty($component['headingLevel']) ? $component['headingLevel'] : 'h3'])
                 @else
-                    <h2 class="border-solid border-b-2 pb-1 border-gold mt-6 mt-4">{{ $group }}</h2>
+                    @include('partials/heading', ['heading' => $group, 'headingClass' => 'divider-gold pb-1 mt-6 '.($component['headingClass'] ?? ''), 'headingLevel' => !empty($component['headingLevel']) ? $component['headingLevel'] : 'h2'])
                 @endif
             @else
                 <hr class="border-gold border-b-2 mt-6" />
diff --git a/resources/views/components/heading.blade.php b/resources/views/components/heading.blade.php
index 4226c185..f376ada1 100644
--- a/resources/views/components/heading.blade.php
+++ b/resources/views/components/heading.blade.php
@@ -1,10 +1,8 @@
 {{--
-    Label: "heading-1"
-    Data: {
-    "heading": "My heading"
-    }
+    "heading":"Heading text",
+    "headingLevel":["h2", "h3", "h4"],
+    "headingClass":"text-green gold-divider"
 --}}
-
-@foreach ($data as $item)
-    <h2 class="mt-0 -mb-3" id="{{ Str::slug($item['heading']) }}">{{ $item['heading'] }}</h2>
+@foreach($data as $item)
+    @include('partials/heading', ['heading' => $item['heading'], 'headingLevel' => $component['headingLevel'] ?? '', 'headingClass' => !empty($component['headingClass']) ? $component['headingClass'].' mt-0 -mb-3' : 'mt-0 -mb-3'])
 @endforeach
diff --git a/resources/views/components/promo/grid-item.blade.php b/resources/views/components/promo/grid-item.blade.php
index 4278616e..040b82b6 100644
--- a/resources/views/components/promo/grid-item.blade.php
+++ b/resources/views/components/promo/grid-item.blade.php
@@ -25,9 +25,7 @@
                     {{ $item['title'] }}
                 </div>
             @else
-                <h3 class="mt-0 mb-3 font-bold {{ !empty($component['columns']) ? ($component['columns'] < 3 ? 'text-2xl' : 'text-xl') : 'text-2xl' }} group-hover:underline group-focus:underline leading-snug xl:leading-tight">
-                    {{ $item['title'] }}
-                </h3>
+                @include('partials/heading', ['heading' => $item['title'], 'headingLevel' => $component['headingLevel'] ?? 'h3', 'headingClass' => (!empty($component['columns']) ? ($component['columns'] < 3 ? 'text-2xl' : 'text-xl') : 'text-2xl').' group-hover:underline group-focus:underline leading-snug xl:leading-tight '.($component['headingClass'] ?? '')])
             @endif
             <div class="{{ !empty($component['columns']) ? ($component['columns'] < 4 ? ($component['columns'] < 3 ? 'text-base md:text-base' : 'text-base md:text-sm xl:text-base') : 'text-sm') : 'text-base' }} {{ !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 
diff --git a/resources/views/components/promo/list-item.blade.php b/resources/views/components/promo/list-item.blade.php
index 85973841..8b055aa4 100644
--- a/resources/views/components/promo/list-item.blade.php
+++ b/resources/views/components/promo/list-item.blade.php
@@ -24,10 +24,8 @@
     <div class="content w-full">
         @if(!empty($item['youtube_id']) || !empty($item['relative_url']))
             <div class="mb-1 font-bold group-hover:underline group-focus:underline leading-tight text-lg lg:text-xl {{ !empty($component['imageSize']) && $component['imageSize'] === 'small' ? '' : 'mt-2 lg:mt-0' }}">{{ $item['title'] }}</div>
-        @elseif (!empty($component['heading']))
-            <h3 class="mt-0 mb-3 group-hover:underline group-focus:underline leading-tight">{{ $item['title'] }}</h3>
         @else
-            <h2 class="mt-0 group-hover:underline group-focus:underline leading-tight">{{ $item['title'] }}</h2>
+            @include('partials/heading', ['heading' => $item['title'], 'headingLevel' => $component['headingLevel'] ?? 'h3', 'headingClass' => (!empty($component['columns']) ? ($component['columns'] < 3 ? 'text-2xl' : 'text-xl') : 'text-2xl').' group-hover:underline group-focus:underline leading-snug xl:leading-tight '.($component['headingClass'] ?? '')])
         @endif
         <div class="text-black">
             @if(!empty($item['excerpt']))<p class="my-1">{!! strip_tags($item['excerpt'], ['em', 'strong']) !!}</p>@endif 
diff --git a/resources/views/partials/component-loop.blade.php b/resources/views/partials/component-loop.blade.php
index dc34db02..a976414a 100644
--- a/resources/views/partials/component-loop.blade.php
+++ b/resources/views/partials/component-loop.blade.php
@@ -4,7 +4,9 @@
             @if(!empty($component['data']) && !empty($component['component']['filename']))
                 @if(\View::exists('components/'.$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" id="{{ Str::slug($component['component']['heading']) }}">{{ $component['component']['heading'] }}</h2>@endif
+                        @if(!empty($component['component']['heading']))
+                            @include('partials/heading', ['heading' => $component['component']['heading'], 'headingClass' => 'mt-0 '.($component['component']['headingClass'] ?? ''), 'headingLevel' => !empty($component['component']['headingLevel']) ? $component['component']['headingLevel'] : 'h2'])
+                        @endif
 
                         @include('components/'.$component['component']['filename'], ['data' => $component['data'], 'component' => $component['component']])
                     </div>
diff --git a/resources/views/partials/heading.blade.php b/resources/views/partials/heading.blade.php
new file mode 100644
index 00000000..9a3276b1
--- /dev/null
+++ b/resources/views/partials/heading.blade.php
@@ -0,0 +1,8 @@
+{{--
+    "heading":"Heading text",
+    "headingLevel":["h2", "h3", "h4"],
+    "headingClass":"text-green gold-divider"
+--}}
+<{{ !empty($headingLevel) && strtolower($headingLevel) != 'h1' ? $headingLevel : 'h2' }} id="{{ Str::slug($heading) }}" class="{{ $headingClass ?? '' }}">
+    {!! strip_tags($heading, ['em', 'strong']) !!}
+</{{ !empty($headingLevel) && strtolower($headingLevel) != 'h1' ? $headingLevel : 'h2' }}>
diff --git a/styleguide/Http/Controllers/ComponentCatalogController.php b/styleguide/Http/Controllers/ComponentCatalogController.php
index 254b0d7c..e66b7c89 100644
--- a/styleguide/Http/Controllers/ComponentCatalogController.php
+++ b/styleguide/Http/Controllers/ComponentCatalogController.php
@@ -91,7 +91,7 @@ public function index(Request $request): View
                 'data' => app(GenericPromo::class)->create(3, false, [
                 ]),
                 'component' => [
-                    'heading' => 'One-column catalog',
+                    'heading' => 'One-column catalog lkjla',
                     'filename' => 'catalog',
                     'columns' => '1',
                     'showDescription' => false,
diff --git a/styleguide/Http/Controllers/ComponentHeadingController.php b/styleguide/Http/Controllers/ComponentHeadingController.php
index 080bf0c3..422d4a0e 100644
--- a/styleguide/Http/Controllers/ComponentHeadingController.php
+++ b/styleguide/Http/Controllers/ComponentHeadingController.php
@@ -29,7 +29,9 @@ public function index(Request $request): View
                         'tr1' => [
                             'Page field' => 'modular-heading-1',
                             'Data' => '{
-"heading":"My heading"
+"heading":"My heading",
+"headingClass":"gold-divider text-green",
+"headingLevel":"h3"
 }',
                         ],
                     ],
@@ -69,6 +71,13 @@ public function index(Request $request): View
             ],
         ];
 
+        // Different data for h3 page
+        if($request->data['base']['page']['id'] === 122100200) {
+            $components['heading-1']['data'][0]['heading'] = "My example h3";
+            $components['heading-1']['component']['headingLevel'] = "h3";
+            $components['heading-1']['component']['headingClass'] = "divider-gold text-green";
+        }
+
         // Assign components globally
         $request->data['base']['components'] = $components;
 
diff --git a/styleguide/Pages/ComponentHeading.php b/styleguide/Pages/ComponentHeading.php
index 0471ffdd..c72a1ce9 100644
--- a/styleguide/Pages/ComponentHeading.php
+++ b/styleguide/Pages/ComponentHeading.php
@@ -15,7 +15,7 @@ public function getPageData()
             'page' => [
                 'controller' => 'ComponentHeadingController',
                 'title' => 'Heading',
-                'id' => 122100,
+                'id' => 122100100,
                 'content' => [
                     'main' => '',
                 ],
diff --git a/styleguide/Pages/ComponentHeading3.php b/styleguide/Pages/ComponentHeading3.php
new file mode 100644
index 00000000..907f5cba
--- /dev/null
+++ b/styleguide/Pages/ComponentHeading3.php
@@ -0,0 +1,25 @@
+<?php
+
+namespace Styleguide\Pages;
+
+use Factories\Page as PageFactory;
+
+class ComponentHeading3 extends Page
+{
+    /**
+     * {@inheritdoc}
+     */
+    public function getPageData()
+    {
+        return app(PageFactory::class)->create(1, true, [
+            'page' => [
+                'controller' => 'ComponentHeadingController',
+                'title' => 'H3',
+                'id' => 122100200,
+                'content' => [
+                    'main' => '',
+                ],
+            ],
+        ]);
+    }
+}
diff --git a/styleguide/Views/styleguide-component-guide.blade.php b/styleguide/Views/styleguide-component-guide.blade.php
index f90dabec..eba7c364 100644
--- a/styleguide/Views/styleguide-component-guide.blade.php
+++ b/styleguide/Views/styleguide-component-guide.blade.php
@@ -57,7 +57,15 @@
                 </tr>
                 <tr>
                     <td class="font-bold">heading</td>
-                    <td>Add a component heading (h2)</td>
+                    <td>Add a component heading<br />Default is h2</td>
+                </tr>
+                <tr>
+                    <td class="font-bold">headingClass</td>
+                    <td>Add any number of classes to a component heading.<br />"text-green divider-gold"</td>
+                </tr>
+                <tr>
+                    <td class="font-bold">headingLevel</td>
+                    <td>Change default component heading level from h2 to h3 or h4.<br />"h3"</td>
                 </tr>
                 <tr>
                     <td class="font-bold">config</td>
diff --git a/styleguide/menu.json b/styleguide/menu.json
index 7628f26c..6fea8d73 100644
--- a/styleguide/menu.json
+++ b/styleguide/menu.json
@@ -208,7 +208,28 @@
                 "display_name": "Heading",
                 "class_name": "",
                 "relative_url": "/styleguide/component/heading",
-                "submenu": []
+                "submenu": {
+                    "122100100": {
+                        "menu_item_id": 122100100,
+                        "is_active": 1,
+                        "page_id": 122100100,
+                        "target": "",
+                        "display_name": "H2",
+                        "class_name": "",
+                        "relative_url": "/styleguide/component/heading",
+                        "submenu": []
+                    },
+                    "122100200": {
+                        "menu_item_id": 122100200,
+                        "is_active": 1,
+                        "page_id": 122100200,
+                        "target": "",
+                        "display_name": "H3",
+                        "class_name": "",
+                        "relative_url": "/styleguide/component/heading3",
+                        "submenu": []
+                    }
+                }
             },
             "105100": {
                 "menu_item_id": 105100,