Merge branch 'feature/refactor' into develop

waynestate · Jan 17, 2024 · 6da6f42 · 6da6f42
2 parents d5e50cb + b184811
commit 6da6f42
Show file tree

Hide file tree

Showing 53 changed files with 695 additions and 243 deletions.
diff --git a/app/Http/Controllers/HomepageController.php b/app/Http/Controllers/HomepageController.php
@@ -30,6 +30,7 @@ public function __construct(HomepageRepositoryContract $promo, ArticleRepository
      */
     public function index(Request $request): View
     {
+        // $request->data['base']['show_site_menu'] = false;
         // $promos = $this->promo->getHomepagePromos();
 
         $articles = $this->article->listing($request->data['base']['site']['news']['application_id']);

diff --git a/config/base.php b/config/base.php
@@ -263,7 +263,7 @@
                     'id' => 3001,
                     'config' => 'page_id:{$page_id}|randomize|limit:1',
                 ],
-                'banner' => [
+                'flag' => [
                     'id' => 4246,
                     'config' => 'page_id:{$page_id}|first',
                 ],

diff --git a/factories/Banner.php → factories/Flag.php b/factories/Banner.php → factories/Flag.php
@@ -5,7 +5,7 @@
 use Contracts\Factories\FactoryContract;
 use Faker\Factory;
 
-class Banner implements FactoryContract
+class Flag implements FactoryContract
 {
     /**
      * Construct the factory.
@@ -22,7 +22,7 @@ public function create($limit = 1, $flatten = false, $options = [])
     {
         for ($i = 1; $i <= $limit; $i++) {
             $data[$i] = [
-                'class' => 'banner',
+                'class' => 'flag',
                 'title' => 'Make a',
                 'link' => 'https://wayne.edu',
                 'excerpt' => 'Gift',

diff --git a/factories/HeroImageRotate.php b/factories/HeroImageRotate.php
@@ -0,0 +1,44 @@
+<?php
+
+namespace Factories;
+
+use Contracts\Factories\FactoryContract;
+use Faker\Factory;
+
+class HeroImageRotate implements FactoryContract
+{
+    /**
+     * Construct the factory.
+     */
+    public function __construct(Factory $faker)
+    {
+        $this->faker = $faker->create();
+    }
+
+    /**
+     * {@inheritdoc}
+     */
+    public function create($limit = 1, $flatten = false, $options = [])
+    {
+        for ($i = 1; $i <= $limit; $i++) {
+            $data[$i] = [
+                'title' => $this->faker->sentence(3),
+                'description' => '<p>' . $this->faker->text(100) . ' <a href="https://wayne.edu">'. $this->faker->sentence(3)  .'</a></p>',
+                'link' => 'https://wayne.edu',
+                'relative_url' => '/styleguide/image/1600x580?text=Primary%20image%20('.$i.')',
+                'filename_alt_text' => 'Example background image',
+                'secondary_relative_url' => '/styleguide/image/400x250?text=Secondary%20image%20('.$i.')',
+                'secondary_alt_text' => 'Example secondary image',
+                'option' => $this->faker->randomElement(['Text Overlay', 'Half', 'Logo Overlay', '']),
+            ];
+
+            $data[$i] = array_replace_recursive($data[$i], $options);
+        }
+
+        if ($limit === 1 && $flatten === true) {
+            return current($data);
+        }
+
+        return $data;
+    }
+}
diff --git a/resources/js/modules/carousel.js b/resources/js/modules/carousel.js
@@ -4,7 +4,7 @@ var Flickity = require('flickity');
     "use strict";
 
     if(document.querySelector('.rotate') !== null) {
-        new Flickity('.rotate', {
+        var carousel = new Flickity('.rotate', {
             on: {
                 ready: function() {
                     // Get the height of the first image that loaded and dynamically set the height
@@ -24,6 +24,7 @@ var Flickity = require('flickity');
             resize: true,
             setGallerySize: true,
             wrapAround: true,
+            adaptiveHeight: true,
         });
 
         document.querySelector('.rotate').removeAttribute('tabindex');
@@ -45,5 +46,15 @@ var Flickity = require('flickity');
         document.querySelectorAll('.flickity-button').forEach(function (item) {
            item.addEventListener('click', EnableTabbableItems);
         });
+
+        // Allows the carousel to adjust the height after all the content has loaded
+        carousel.resize()
+
+        // Adding these transitions after load prevents the initial load being delayed 
+        document.querySelector('.flickity-viewport').style['transition-property'] = 'height';
+        document.querySelector('.flickity-viewport').style['transition-timing-function'] = 'cubic-bezier(0.4, 0, 0.2, 1)';
+        document.querySelector('.flickity-viewport').style['transition-duration'] = '1000ms';
     }
 })(Flickity);
+
+
diff --git a/resources/scss/components/_content.scss b/resources/scss/components/_content.scss
@@ -61,4 +61,20 @@
     h6 a:focus {
         @apply border-0;
     }
+
+    blockquote {
+        @apply border-l-12 border-gold mx-4 xl:mx-auto my-8 py-4 pl-8 xl:w-4/5;
+
+        p {
+            @apply text-lg xl:text-xl text-green-700;
+        }
+
+        > *:last-child {
+            @apply mb-2;
+        }
+
+        cite {
+            @apply block mb-4 text-green-700 not-italic;
+        }
+    }
 }
diff --git a/resources/scss/components/_banner.scss → resources/scss/components/_flag.scss b/resources/scss/components/_banner.scss → resources/scss/components/_flag.scss
@@ -1,4 +1,4 @@
-.banner {
+.flag {
     @apply absolute hidden mt:flex z-40 bg-gold text-green-800 hover:text-green-900 items-center justify-center mr-4 right-0 pt-0 duration-500;
 
     transition-property: height, padding;

diff --git a/resources/scss/components/_full-width-styleguide-hero.scss b/resources/scss/components/_full-width-styleguide-hero.scss
@@ -0,0 +1,21 @@
+.full-width-styleguide-hero .hero {
+    &__title {
+        @apply text-5xl xl:text-7xl mb-4 italic font-light;
+
+        em {
+            @apply text-gold font-bold;
+        }
+    }
+
+    &__content {
+        @apply mb-4;
+
+        .button {
+            @apply xl:py-4;
+
+            @media only screen and (max-width: 576px) {
+                @apply bg-green text-white hover:bg-green-700 focus:bg-green-700;
+            }
+        }
+    }
+}
diff --git a/resources/scss/components/_global.scss b/resources/scss/components/_global.scss
@@ -27,6 +27,11 @@ p {
     @apply mb-4;
 }
 
+// To maintain consistent spacing when using paragraphs inside of grid
+.grid p:last-of-type {
+    @apply mb-0;
+}
+
 // Tailwind preflight sets this to .5 which isn't ADA compliant
 input::placeholder,
 textarea::placeholder {
@@ -37,18 +42,6 @@ hr {
     @apply border-b border-solid border-gray-200 my-5;
 }
 
-blockquote {
-    @apply ml-8 my-8 border-l-4 border-gray-400 pl-4 pt-2 pb-1;
-
-    > *:last-child {
-        @apply mb-2;
-    }
-
-    cite {
-        @apply block mb-4;
-    }
-}
-
 figure {
     @apply mt-2 mb-4 mx-auto;
 

diff --git a/resources/scss/components/_menu-icon.scss b/resources/scss/components/_menu-icon.scss
@@ -17,5 +17,5 @@
 }
 
 .menu-icon:hover::after {
-    @apply bg-gray-400 shadow-grey;
+    @apply bg-gray-400 shadow-gray;
 }
diff --git a/resources/scss/main.scss b/resources/scss/main.scss
@@ -10,7 +10,7 @@
 @import "components/global-headings";
 @import "components/global-buttons";
 @import "components/accordion";
-@import "components/banner";
+@import "components/flag";
 @import "components/bg-gradient";
 @import "components/carousel";
 @import "components/content";
@@ -32,6 +32,7 @@
 @import "components/cms-layouts";
 @import "components/play-video-button";
 @import "components/pdf";
+@import "components/full-width-styleguide-hero";
 
 // Tailwind
 @tailwind components;

diff --git a/resources/views/components/banner.blade.php b/resources/views/components/banner.blade.php
diff --git a/resources/views/components/breadcrumbs.blade.php b/resources/views/components/breadcrumbs.blade.php
@@ -1,7 +1,7 @@
 {{--
     $breadcrumbs => array // ['display_name', 'relative_url']
 --}}
-<nav id="breadcrumbs-menu" class="breadcrumbs mt-6 mb-2 print:mt-0" aria-label="Breadcrumbs">
+<nav id="breadcrumbs-menu" class="breadcrumbs mt-6 mb-2 print:mt-0 max-w-screen-3xl px-4 mx-auto" aria-label="Breadcrumbs">
     <ul class="text-sm">
         @foreach($breadcrumbs as $key=>$crumb)
             @if($key == 0)

diff --git a/resources/views/components/catalog.blade.php b/resources/views/components/catalog.blade.php
@@ -7,22 +7,22 @@
         @foreach($data as $group => $group_items)
             @if(!empty($group))
                 @if(!empty($component['heading']))
-                    <h3 class="border-solid border-b-2 pb-1 border-gold my-4">{{ $group }}</h3>
+                    <h3 class="border-solid border-b-2 pb-1 border-gold mt-6 mt-4">{{ $group }}</h3>
                 @else
-                    <h2 class="border-solid border-b-2 pb-1 border-gold my-4">{{ $group }}</h2>
+                    <h2 class="border-solid border-b-2 pb-1 border-gold mt-6 mt-4">{{ $group }}</h2>
                 @endif
             @else
-                <hr class="border-gold border-b-2 my-4" />
+                <hr class="border-gold border-b-2 mt-6" />
             @endif
 
             @if(!empty($component['columns']) && $component['columns'] == 1)
-                <div class="grid gap-6">
+                <div class="grid gap-8 mt-6">
                     @foreach($group_items as $item)
                         @include('components/promo/list-item', [$component['imageSize'] = 'small'])
                     @endforeach
                 </div>
             @else
-                <div class="grid gap-6 {{ !empty($component['columns']) && $component['columns'] % 2 == 0 ? ($component['columns'] >= 4 ? ' grid-cols-2' : ' sm-grid-cols-2').' md:grid-cols-3 xl:grid-cols-'.($component['columns']) : ' sm:grid-cols-2 md:grid-cols-3' }}"> 
+                <div class="grid gap-8 mt-6 {{ !empty($component['columns']) && $component['columns'] % 2 == 0 ? ($component['columns'] >= 4 ? ' grid-cols-2' : ' 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)
                         @include('components/promo/grid-item')
                     @endforeach
@@ -31,13 +31,13 @@
         @endforeach
     @else
         @if(!empty($component['columns']) && $component['columns'] == 1)
-            <div class="grid gap-6">
+            <div class="grid gap-8 mt-6">
                 @foreach($data as $item)
                     @include('components/promo/list-item', [$component['imageSize'] = 'small'])
                 @endforeach
             </div>
         @else
-            <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']) }}"> 
+            <div class="grid gap-8 mt-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)
                     @include('components/promo/grid-item')
                 @endforeach

diff --git a/resources/views/components/content-area.blade.php b/resources/views/components/content-area.blade.php
@@ -3,7 +3,7 @@
 @section('content-area')
     @yield('top')
 
-    @if(!empty($base['hero']) && in_array($base['page']['controller'], config('base.hero_full_controllers')))
+    @if(!empty($base['hero']))
         @include('components.hero', ['data' => $base['hero']])
 
         @yield('under-hero')
@@ -31,9 +31,9 @@
                     {!! $base['site_menu_output'] !!}
                 @endif
 
-                @if(!empty($base['banner']))
+                @if(!empty($base['flag']))
                     <div class="min-w-full px-4 mt:px-0 mb-4 mt:hidden">
-                        <a href="{{ $base['banner']['link'] }}" class="button w-full banner__title">{{ $base['banner']['title'] }} <span class="banner__excerpt">{{ $base['banner']['excerpt'] }}</span></a>
+                        <a href="{{ $base['flag']['link'] }}" class="button w-full flag__title">{{ $base['flag']['title'] }} <span class="flag__excerpt">{{ $base['flag']['excerpt'] }}</span></a>
                     </div>
                 @endif
 
@@ -45,18 +45,13 @@
             </nav>
         </div>
 
-        <main class="w-full{{ !in_array($base['page']['controller'], config('base.full_width_controllers')) ? ' px-4' : '' }} {{$base['show_site_menu'] === true ? 'mt:w-3/4' : '' }} content-area mb-8 print:w-full" tabindex="-1">
-            @if(!empty($base['hero']) && !in_array($base['page']['controller'], config('base.hero_full_controllers')))
-                @include('components.hero', ['data' => $base['hero']])
-
-                @yield('under-hero')
-            @endif
+        <main class="w-full {{$base['show_site_menu'] === true ? 'mt:w-3/4' : '' }} content-area mb-8 print:w-full" tabindex="-1">
 
             @if(!empty($base['breadcrumbs']))
                 @include('components.breadcrumbs', ['breadcrumbs' => $base['breadcrumbs']])
             @endif
 
-            <div id="content" tabindex="-1">
+            <div id="content" tabindex="-1" class="{{ !in_array($base['page']['controller'], config('base.full_width_controllers')) ? 'px-4' : '' }}">
                 @yield('content')
             </div>
         </main>

diff --git a/resources/views/components/content-column.blade.php b/resources/views/components/content-column.blade.php
diff --git a/resources/views/components/content-row.blade.php b/resources/views/components/content-row.blade.php
diff --git a/resources/views/components/flag.blade.php b/resources/views/components/flag.blade.php
@@ -0,0 +1,11 @@
+{{--
+    $flag => array // [['title', 'link', 'excerpt']]
+--}}
+<div class="row relative">
+    <a class="flag" href="{{ $flag['link'] }}">
+        <span class="flag__title">{{ $flag['title'] }}</span>
+        @if($flag['excerpt'] != '')
+            <span class="flag__excerpt">{{ $flag['excerpt'] }}</span>
+        @endif
+    </a>
+</div>
diff --git a/resources/views/components/hero.blade.php b/resources/views/components/hero.blade.php
@@ -5,12 +5,10 @@
     Add your specific css in scss/subsite/_main.scss
 --}}
 @if(!empty($data))
-    <div {!! (in_array($base['page']['controller'], config('base.hero_full_controllers'))) ? ' role="complementary"' : '' !!}
-        class="GTM-hero mt:mx-0
-        {{ !empty($class) ? $class : '' }}
+    <div role="complementary" class="GTM-hero 
+        {{ $heroClass ?? '' }}
+        {{ config('base.global.sites.'.$base['site']['id'].'.promos.hero.class') ?? ''}}
         {{ !empty($data) && count($data) > 1 ? ' rotate' : '' }}
-        {{!in_array($base['page']['controller'], config('base.hero_full_controllers'))  ? '  -mx-4' : '' }}
-        {{!empty(config('base.global.sites.'.$base['site']['id'].'.promos.hero.class')) ? ' '.config('base.global.sites.'.$base['site']['id'].'.promos.hero.class') : ''}}
     ">
         @foreach($data as $hero)
             @if(!empty($hero['relative_url']))

diff --git a/resources/views/components/hero/banner.blade.php b/resources/views/components/hero/banner.blade.php
@@ -0,0 +1,8 @@
+{{--
+    $hero => array // ['relative_url', 'title']
+--}}
+
+<div class="hero__wrapper w-full">
+    <div class="hero__primary-image w-full h-hero-skinny max-h-hero-skinny bg-cover bg-center relative" style="background-image: url('{{ $hero['relative_url'] }}')"></div>
+</div>
+
diff --git a/resources/views/components/hero/default.blade.php b/resources/views/components/hero/default.blade.php
@@ -1,6 +1,7 @@
+{{--
+    $hero => array // ['relative_url', 'title']
+--}}
+
 <div class="hero__wrapper w-full">
-    <div 
-        class="hero__bg pt-hero w-full bg-cover bg-top relative{{ $loop->first !== true ? ' lazy' : '' }}" 
-        @if($loop->first === true) style="background-image: url('{{ $hero['relative_url'] }}')" @else data-src="{{ $hero['relative_url'] }}"@endif>
-    </div>
+    <div class="hero__bg h-hero max-h-hero w-full bg-cover bg-center relative{{ $loop->first !== true ? ' lazy' : '' }}" @if($loop->first === true) style="background-image: url('{{ $hero['relative_url'] }}')" @else data-src="{{ $hero['relative_url'] }}"@endif></div>
 </div>