Rebranding component: PostGrid with Teaser

DistributionPackages/Neos.Presentation/Resources/Private/Fusion/Module/Readme.md

@@ -1,6 +1,6 @@
 # Modules
 
-Modules are the closest thing to content components in the Presentation package. They use the full width space and can used next to each other.
+Modules are the closest thing to content components in the Presentation package. They use the full width space and can be used next to each other.
 
 Please only use inline Tailwind and Alpinejs in the Modules folder, besides the Atoms and Molecules. 
 If you create something more complex, then you probably need to create Molecules or sometimes even Organisms. 

DistributionPackages/Neos.Presentation/Resources/Private/Fusion/Molecule/PostGrid/PostGrid.Teaser.fusion

@@ -0,0 +1,60 @@
+prototype(Neos.Presentation:PostGrid.Teaser) < prototype(Neos.Fusion:Component) {
+
+    @propTypes {
+        title = PropTypes:String
+        teaser = PropTypes:String
+        date = PropTypes:String
+        url = PropTypes:String
+        isFeature = PropTypes:Bool
+        image = PropTypes:FromPrototype {
+            prototypeName = Sitegeist.Kaleidoscope:Image
+        }
+    }
+
+    isFeature = false
+
+    @private {
+        accentColors = ${['purple', 'blue', 'lightblue', 'green', 'yellow', 'orange', 'red']}
+        background = ${props.isFeature ? 'accent-' + Array.random(private.accentColors) : 'gradient'}
+    }
+
+    renderer = afx`
+        <li class={AtomicFusion.classNames('group w-full h-full relative', {
+            'aspect-[4/3] md:aspect-video xl:aspect-[4/3] md:col-span-2 md:row-span-2': props.isFeature,
+            'aspect-[7/5]': !props.isFeature
+        })}>
+            <Neos.Presentation:Background
+                variant={private.background}
+                class="w-full h-[fit-content] xs:h-full grid grid-cols-1 xs:grid-rows-1 overflow-hidden">
+                <Sitegeist.Kaleidoscope:Image
+                    @if.hasImage={props.image && props.image.imageSource}
+                    {...props.image}
+                    class="xs:col-start-1 xs:row-start-1 inset-0 w-full h-full object-cover group-hover:scale-105 duration-700"
+                />
+
+                <div class="xs:col-start-1 xs:row-start-1 flex flex-col justify-between bg-black bg-opacity-25 z-10">
+                    <div class="grid p-8 pb-4">
+                        <h2 class={AtomicFusion.classNames('text-white text-2xl font-bold text-balance', {
+                            'sm:text-4xl': props.isFeature
+                        })}>{props.title}</h2>
+
+                        <p class="text-white text-sm mb-8">{props.date}</p>
+
+                        <p class={AtomicFusion.classNames('max-w-md text-white text-sm text-pretty xs:line-clamp-3 sm:line-clamp-2', {
+                            'sm:text-md md:line-clamp-6': props.isFeature
+                        })}>{props.teaser}</p>
+                    </div>
+
+                    <a href={props.url}
+                       class={AtomicFusion.classNames('flex items-center gap-2 p-8 pt-4', {
+                            'justify-end': props.isFeature
+                    })}>
+                        <span class="absolute inset-0 pointer-events-auto"></span>
+                        <span class="text-white text-sm">Read more</span>
+                        <Neos.Presentation:Atom.AnimatedArrow class="w-4 fill-white" />
+                    </a>
+                </div>
+            </Neos.Presentation:Background>
+        </li>
+    `
+}

DistributionPackages/Neos.Presentation/Resources/Private/Fusion/Molecule/PostGrid/PostGrid.fusion

@@ -0,0 +1,86 @@
+prototype(Neos.Presentation:PostGrid) < prototype(Neos.Fusion:Component) {
+
+    @styleguide {
+        title = "Post Grid"
+        description = "A grid of posts with a headline. The posts are displayed as cards with an image, a title, a date, a teaser and a link to the full post and can be featured with a highlighted background color."
+        props {
+            headline.text = 'Blog'
+            posts = Neos.Fusion:DataStructure {
+                0 {
+                    title = 'First post example title'
+                    teaser = 'This is a teaser for the first post example. It should be a short text that gives a quick overview of the post. It should be a short text that gives a quick overview of the post. This is more text to show the ellipsis on the teaser. It goes on and on and then there is even more text until it finally ends right here and right now.'
+                    date = '01.06.2023'
+                    url = '#'
+                    isFeature = true
+                    image.imageSource = Sitegeist.Kaleidoscope:UriImageSource {
+                        uri = 'https://picsum.photos/1128/640?1'
+                    }
+                }
+                1 {
+                    title = 'Second post example title'
+                    teaser = 'This is a teaser for the second post example. It should be a short text that gives a quick overview of the post.'
+                    date = '01.05.2023'
+                    url = '#'
+                }
+                2 {
+                    title = 'Third post example title'
+                    teaser = 'This is a teaser for the third post example. It should be a short text that gives a quick overview of the post.'
+                    date = '01.04.2023'
+                    url = '#'
+                    image.imageSource = Sitegeist.Kaleidoscope:UriImageSource {
+                        uri = 'https://picsum.photos/720/512?3'
+                    }
+                }
+                3 {
+                    title = 'Fourth post example title'
+                    teaser = 'This is a teaser for the fourth post example. It should be a short text that gives a quick overview of the post.'
+                    date = '01.03.2023'
+                    url = '#'
+                    image.imageSource = Sitegeist.Kaleidoscope:UriImageSource {
+                        uri = 'https://picsum.photos/720/512?4'
+                    }
+                }
+                4 {
+                    title = 'Fifth post example title'
+                    teaser = 'This is a teaser for the fifth post example. It should be a short text that gives a quick overview of the post.'
+                    date = '01.02.2023'
+                    url = '#'
+                    isFeature = true
+                }
+                5 {
+                    title = 'Sixth post example title'
+                    teaser = 'This is a teaser for the sixth post example. It should be a short text that gives a quick overview of the post.'
+                    date = '01.01.2023'
+                    url = '#'
+                }
+            }
+        }
+    }
+
+    @propTypes {
+        headline = PropTypes:FromPrototype {
+            prototypeName = 'Neos.Presentation:Headline'
+        }
+        posts = PropTypes:Array {
+            type = PropTypes:FromPrototype {
+                prototypeName = 'Neos.Presentation:PostGrid.Teaser'
+            }
+        }
+    }
+
+    renderer = afx`
+        <Neos.Presentation:Spacing size x y>
+            <Neos.Presentation:Spacing y>
+                <Neos.Presentation:Headline {...props.headline} display="headline-lg" class="text-lightblue" />
+            </Neos.Presentation:Spacing>
+
+            <Neos.Presentation:Spacing y="small">
+                <ul class="grid md:grid-cols-2 xl:grid-cols-3 gap-x-4 gap-y-8 mx-0">
+                    <Neos.Fusion:Loop items={props.posts} itemName="post">
+                        <Neos.Presentation:PostGrid.Teaser {...post} />
+                    </Neos.Fusion:Loop>
+                </ul>
+            </Neos.Presentation:Spacing>
+        </Neos.Presentation:Spacing>
+    `
+}