FEATURE: Map Teaser

DistributionPackages/Neos.Presentation/Resources/Private/Fusion/Atom/Tag/Tag.fusion

@@ -0,0 +1,48 @@
+prototype(Neos.Presentation:Tag) < prototype(Neos.Fusion:Component) {
+
+    @styleguide {
+        title = "Tag"
+        props {
+            text = 'Tag Text'
+            href = '#link'
+        }
+        useCases {
+            numbered.props {
+                text = 'Tag Text'
+                number = 42
+                href = '#link'
+            }
+        }
+    }
+
+    @propTypes {
+        text = ${PropTypes.string.isRequired}
+        href = ${PropTypes.anyOf(PropTypes.string)}
+        number = ${PropTypes.integer}
+        disabled = ${PropTypes.boolean}
+    }
+
+    text = null
+    href = null
+    number = null
+
+    attributes = Neos.Fusion:DataStructure
+    class = null
+
+    renderer = Neos.Fusion:Tag {
+        tagName = 'a'
+        attributes {
+            @apply.attributes = ${props.attributes}
+            class = ${AtomicFusion.classNames(
+                'n-tag',
+                'display-body-md',
+                props.class
+            )}
+            href = ${props.href}
+        }
+        content = afx`
+            <span>{props.text}</span>
+            <span @if={props.number}>{props.number}</span>
+        `
+    }
+}

DistributionPackages/Neos.Presentation/Resources/Private/Fusion/Atom/Tag/Tag.pcss

@@ -0,0 +1,23 @@
+.n-tag {
+  @apply inline-block;
+
+  span {
+    @apply inline-flex h-9 px-3 bg-darkblue text-white flex flex-col justify-center text-center;
+  }
+
+  &:hover span {
+    @apply bg-accent-purple;
+  }
+
+  span:only-child {
+    @apply rounded;
+  }
+
+  span:first-child {
+    @apply mr-[2px] rounded-tl rounded-bl;
+  }
+
+  span:last-child {
+    @apply rounded-tr rounded-br;
+  }
+}

DistributionPackages/Neos.Presentation/Resources/Private/Fusion/Module/Teaser.fusion

@@ -3,6 +3,7 @@ prototype(Neos.Presentation:Module.Teaser) < prototype(Neos.Fusion:Component) {
     @styleguide {
         title = "Teaser"
         props {
+            variant = 'default'
             headline.text = 'Ready for <strong>Neos CMS?</strong>'
             primaryLink.text = 'Try Neos now'
             primaryLink.icon = Neos.Presentation:Icon {
@@ -14,6 +15,34 @@ prototype(Neos.Presentation:Module.Teaser) < prototype(Neos.Fusion:Component) {
                 uri = 'https://source.unsplash.com/random/800x600'
             }
         }
+        useCases {
+            imageBackgroundWithFreeContent.props {
+                variant = 'imageBackground'
+                headline.text = 'Find your <strong>nearest Neos Partner</strong>'
+                content = afx`
+                    <Neos.Presentation:Paragraph text="Choose by your interest:"/>
+                    <Neos.Presentation:TagGroup variant="list">
+                        <Neos.Presentation:Tag text="# full service agency" href="#" number={34} />
+                        <Neos.Presentation:Tag text="# freelancer" href="#" number={12} />
+                        <Neos.Presentation:Tag text="# plugin development" href="#" number={6} />
+                        <Neos.Presentation:Tag text="# core development" href="#" number={3} />
+                        <Neos.Presentation:Tag text="# hosting" href="#" number={2} />
+                    </Neos.Presentation:TagGroup>
+                `
+                image.imageSource = Sitegeist.Kaleidoscope:ResourceImageSource {
+                    package = 'Neos.Presentation'
+                    path = 'Assets/Styleguide/teaser/EuropaNeosMap.svg'
+                }
+                secondaryLink {
+                    text = 'All Service Providers'
+                    icon = Neos.Presentation:Icon {
+                        name = 'pixel-chevron-right'
+                        class = 'h-6'
+                    }
+                    href = '#'
+                }
+            }
+        }
     }
 
     @propTypes {
@@ -34,27 +63,40 @@ prototype(Neos.Presentation:Module.Teaser) < prototype(Neos.Fusion:Component) {
         }
     }
 
+    variant = 'default'
+    image = null
+    headline = null
+    description = null
+    content = null
+    primaryLink = null
+    secondaryLink = null
+
     renderer = afx`
         <Neos.Presentation:Spacing size>
-            <div class="grid md:grid-cols-2 items-center">
-                <Neos.Presentation:Spacing x y="small">
-                    <Neos.Presentation:Spacing y="small">
-                        <Neos.Presentation:Headline {...props.headline} display="headline-lg" />
-                        <Neos.Presentation:Paragraph {...props.description} display="lead" />
-                    </Neos.Presentation:Spacing>
-                    <Neos.Presentation:Spacing y="small">
-                        <div class="flex flex-wrap gap-10 items-center">
-                            <Neos.Presentation:Link
-                                @if={props.primaryLink.text}
-                                {...props.primaryLink}
-                                variant="button" />
-                            <Neos.Presentation:Link
-                                @if={props.secondaryLink.text}
-                                {...props.secondaryLink} />
-                        </div>
+            <div class="relative grid md:grid-cols-2 items-center">
+                <div class={AtomicFusion.classNames({"bg-gradient-to-r from-white to-white/0": props.variant == 'imageBackground'})}>
+                    <Neos.Presentation:Spacing x y="small">
+                        <Neos.Presentation:Spacing y="small">
+                            <Neos.Presentation:Headline {...props.headline} display="headline-lg" />
+                            <Neos.Presentation:Spacing y="small">
+                                <Neos.Presentation:Paragraph @if={props.description.text} {...props.description} display="lead" />
+                                {props.content}
+                            </Neos.Presentation:Spacing>
+                        </Neos.Presentation:Spacing>
+                        <Neos.Presentation:Spacing y="small">
+                            <div class="flex flex-wrap gap-10 items-center">
+                                <Neos.Presentation:Link
+                                    @if={props.primaryLink.text}
+                                    {...props.primaryLink}
+                                    variant="button" />
+                                <Neos.Presentation:Link
+                                    @if={props.secondaryLink.text}
+                                    {...props.secondaryLink} />
+                            </div>
+                        </Neos.Presentation:Spacing>
                     </Neos.Presentation:Spacing>
-                </Neos.Presentation:Spacing>
-                <Sitegeist.Kaleidoscope:Image {...props.image} />
+                </div>
+                <Sitegeist.Kaleidoscope:Image {...props.image} class={AtomicFusion.classNames({"absolute top-0 left-0 w-full h-full object-cover -z-10": props.variant == 'imageBackground'})} />
             </div>
         </Neos.Presentation:Spacing>
     `

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

@@ -0,0 +1,72 @@
+prototype(Neos.Presentation:TagGroup) < prototype(Neos.Fusion:Component) {
+
+    @styleguide {
+        title = "Tag Group"
+        props {
+            variant = 'default'
+            content = Neos.Fusion:Join {
+                tag1 = Sitegeist.Monocle:Preview.Prototype {
+                    prototypeName = 'Neos.Presentation:Tag'
+                    useCase = 'numbered'
+                    props.text = 'Numquam amet tempora'
+                }
+                tag2 = Sitegeist.Monocle:Preview.Prototype {
+                    prototypeName = 'Neos.Presentation:Tag'
+                    useCase = 'numbered'
+                    props.text = 'Labore eius neque non'
+                }
+                tag3 = Sitegeist.Monocle:Preview.Prototype {
+                    prototypeName = 'Neos.Presentation:Tag'
+                    useCase = 'numbered'
+                    props.text = 'Non velit dolore'
+                }
+            }
+        }
+        useCases {
+            list.props {
+                variant = 'list'
+                content = Neos.Fusion:Join {
+                    tag1 = Sitegeist.Monocle:Preview.Prototype {
+                        prototypeName = 'Neos.Presentation:Tag'
+                        useCase = 'numbered'
+                        props.text = 'Numquam amet tempora'
+                    }
+                    tag2 = Sitegeist.Monocle:Preview.Prototype {
+                        prototypeName = 'Neos.Presentation:Tag'
+                        useCase = 'numbered'
+                        props.text = 'Labore eius neque non'
+                    }
+                    tag3 = Sitegeist.Monocle:Preview.Prototype {
+                        prototypeName = 'Neos.Presentation:Tag'
+                        useCase = 'numbered'
+                        props.text = 'Non velit dolore'
+                    }
+                }
+            }
+        }
+    }
+
+    @propTypes {
+        variant = ${PropTypes.string.isRequired}
+    }
+
+    variant = 'default'
+    content = null
+
+    attributes = Neos.Fusion:DataStructure
+    class = null
+
+    renderer = Neos.Fusion:Tag {
+        attributes {
+            @apply.attributes = ${props.attributes}
+            class = ${AtomicFusion.classNames(
+                'n-tag-group',
+                {
+                    'n-tag-group--list': props.variant == 'list'
+                },
+                props.class
+            )}
+        }
+        content = ${props.content}
+    }
+}

DistributionPackages/Neos.Presentation/Resources/Private/Fusion/Molecule/TagGroup/TagGroup.pcss

@@ -0,0 +1,7 @@
+.n-tag-group {
+  @apply flex flex-wrap items-start gap-1;
+}
+
+.n-tag-group--list {
+  @apply flex-col;
+}