TASK: BentoBoxes presentation component

DistributionPackages/Neos.Presentation/Resources/Private/Fusion/Molecule/BentoBoxes/BentoBoxes.Box.fusion

@@ -0,0 +1,99 @@
+prototype(Neos.Presentation:BentoBoxes.Box) < prototype(Neos.Fusion:Component) {
+
+    @propTypes {
+        background = PropTypes:Enum {
+            1 = 'gradient'
+            2 = 'brand'
+            3 = 'accent-purple'
+            4 = 'accent-blue'
+            5 = 'accent-lightblue'
+            6 = 'accent-green'
+            7 = 'accent-yellow'
+            8 = 'accent-orange'
+            9 = 'accent-red'
+        }
+        link = PropTypes:String
+        assetAlign = PropTypes:String
+        heading = PropTypes:FromPrototype {
+            prototypeName = 'Neos.Presentation:Headline'
+        }
+        linkLabel = PropTypes:String
+        video = PropTypes:FromPrototype {
+            prototypeName = 'Neos.Presentation:InlineVideo'
+        }
+        image = PropTypes:DataStructure {
+            imageSource = PropTypes:InstanceOf {
+                type = '\\Sitegeist\\Kaleidoscope\\Domain\\ImageSourceInterface'
+            }
+        }
+    }
+
+    background = null
+    link = ''
+    assetAlign = ''
+    heading = Neos.Fusion:DataStructure {
+        text = ''
+        tagName = 'h2'
+    }
+    linkLabel = ''
+    video = Neos.Fusion:DataStructure {
+        sources = null
+        assets = null
+    }
+    image = Neos.Fusion:DataStructure {
+        imageSource = null
+    }
+
+    @private {
+        linkClass = ${AtomicFusion.classNames(
+            'pl-6 sm:pl-8 lg:pl-14 pr-6 2xl:pr-20 pt-8 2xl:pt-14 grow-0 before:absolute before:inset-0 before:z-10',
+            {
+                'pb-8 2xl:pb-14': props.assetAlign == 'center' || !props.link,
+                'pb-8 2xl:pb-0': props.assetAlign == 'right' && props.link
+            }
+        )}
+
+        assetWrapperClass = ${AtomicFusion.classNames(
+            'grow flex items-end',
+            {
+                'justify-center px-8 lg:px-14': props.assetAlign == 'center',
+                'justify-end pl-8 sm:pl-14': props.assetAlign == 'right'
+            }
+        )}
+    }
+
+    renderer = afx`
+        <div class="bento-boxes__box-wrapper max-w-full">
+            <Neos.Presentation:Background
+                class="bento-boxes__box h-full flex flex-col relative" variant={props.background}>
+                <Neos.Fusion:Tag
+                    tagName={props.link ? 'a' : 'div'} attributes.class={private.linkClass}
+                    attributes.href={props.link ? props.link : null}>
+                    <Neos.Presentation:Headline
+                        {...props.heading} display="title-lg text-2xl mdl:text-3xl 2xl:text-4xl"
+                    />
+
+                    <Neos.Presentation:Paragraph
+                        @if={props.link} display="cta-xl" class="mt-8 2xl:mt-14 text-md mdl:text-lg">
+                        {props.linkLabel} <Neos.Presentation:Atom.AnimatedArrow />
+                    </Neos.Presentation:Paragraph>
+                </Neos.Fusion:Tag>
+
+                <div class={private.assetWrapperClass}>
+                    <div class="overflow-hidden">
+                        <Neos.Presentation:InlineVideo
+                            @if.hasVideo={props.video && (props.video.sources || props.video.assets)} {...props.video}
+                            poster={props.image && props.image.imageSource ? props.image.imageSource : null}
+                            class={AtomicFusion.classNames({ 'max-w-none': props.assetAlign == 'right' })}
+                        />
+
+                        <Sitegeist.Kaleidoscope:Image
+                            @if.hasImage={props.image && (props.image.imageSource) && !(props.video && (props.video.assets || props.video.sources))}
+                            {...props.image} class={AtomicFusion.classNames({ 'max-w-none': props.assetAlign == 'right' })}
+                        />
+                    </div>
+                </div>
+            </Neos.Presentation:Background>
+        </div>
+    `
+}

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

@@ -0,0 +1,155 @@
+prototype(Neos.Presentation:BentoBoxes) < prototype(Neos.Fusion:Component) {
+
+    @styleguide {
+        title = 'Bento Boxes'
+        props {
+            heading = Neos.Fusion:DataStructure {
+                text = 'Tools that transform your digital journey'
+                tagName = 'h2'
+            }
+            text = 'Take control of HTML, CSS, and JavaScript in a visual canvas. Webflow generates clean, semantic code that’s ready.'
+            boxes = Neos.Fusion:DataStructure {
+                1 = Neos.Fusion:DataStructure {
+                    heading = Neos.Fusion:DataStructure {
+                        text = 'Enterprise Features like Role Management and Media Center'
+                        tagName = 'h2'
+                    }
+                    background = 'brand'
+                    image.imageSource = Sitegeist.Kaleidoscope:UriImageSource {
+                        uri = 'https://source.unsplash.com/random/300x400?1'
+                    }
+                    assetAlign = 'center'
+                }
+                2 = Neos.Fusion:DataStructure {
+                    heading = Neos.Fusion:DataStructure {
+                        text = 'What you see, is what you get. Our True Inline Editor.'
+                        tagName = 'h2'
+                    }
+                    background = 'accent-blue'
+                    image.imageSource = Sitegeist.Kaleidoscope:UriImageSource {
+                        uri = 'https://source.unsplash.com/random/800x400?2'
+                    }
+                    assetAlign = 'right'
+                }
+                3 = Neos.Fusion:DataStructure {
+                    heading = Neos.Fusion:DataStructure {
+                        text = 'Multi-language and Multi-site Functionality'
+                        tagName = 'h2'
+                    }
+                    link = '#'
+                    linkLabel = 'Mehr erfahren'
+                    background = 'accent-lightblue'
+                    image.imageSource = Sitegeist.Kaleidoscope:UriImageSource {
+                        uri = 'https://source.unsplash.com/random/360x240?3'
+                    }
+                    assetAlign = 'center'
+                }
+                4 = Neos.Fusion:DataStructure {
+                    heading = Neos.Fusion:DataStructure {
+                        text = 'SEO Optimization Tools for the best performance'
+                        tagName = 'h2'
+                    }
+                    background = 'brand'
+                    image.imageSource = Sitegeist.Kaleidoscope:UriImageSource {
+                        uri = 'https://source.unsplash.com/random/600x300?4'
+                    }
+                    assetAlign = 'right'
+                }
+            }
+        }
+    }
+
+    @propTypes {
+        heading = PropTypes:DataStructure {
+            text = PropTypes:String
+            tagName = PropTypes:Enum {
+                1 = 'h1'
+                2 = 'h2'
+                3 = 'h3'
+                4 = 'h4'
+                5 = 'h5'
+                6 = 'h6'
+                p = 'p'
+            }
+        }
+        text = PropTypes:String
+        boxes = PropTypes:Array {
+            type = PropTypes:DataStructure {
+                heading = PropTypes:FromPrototype {
+                    prototypeName = 'Neos.Presentation:Headline'
+                }
+                link = PropTypes:String
+                linkLabel = PropTypes:String
+                background = PropTypes:Enum {
+                    1 = 'gradient'
+                    2 = 'brand'
+                    3 = 'accent-purple'
+                    4 = 'accent-blue'
+                    5 = 'accent-lightblue'
+                    6 = 'accent-green'
+                    7 = 'accent-yellow'
+                    8 = 'accent-orange'
+                    9 = 'accent-red'
+                }
+                image = PropTypes:DataStructure {
+                    imageSource = PropTypes:InstanceOf {
+                        type = '\\Sitegeist\\Kaleidoscope\\Domain\\ImageSourceInterface'
+                    }
+                }
+                video = PropTypes:FromPrototype {
+                    prototypeName = 'Neos.Presentation:InlineVideo'
+                }
+                assetAlign = PropTypes:Enum {
+                    1 = 'center'
+                    2 = 'right'
+                }
+            }
+        }
+    }
+
+    heading = Neos.Fusion:DataStructure {
+        text = ''
+        tagName = 'h2'
+    }
+    text = ''
+    boxes = ${[]}
+
+    @private {
+        boxes = ${Carbon.Array.chunk(props.boxes, 2)}
+
+        headlineClass = ${AtomicFusion.classNames(
+            'bento-boxes__heading p-0 2xl:pr-[40%] text-darkblue text-5xl sm:text-5xl mdl:text-7xl 2xl:text-9xl',
+            { 'pb-10 mdl:pb-0': props.text }
+        )}
+
+        wrapperClass = ${AtomicFusion.classNames(
+            'flex flex-col gap-6 mdl:gap-10',
+            { 'pt-14 mdl:pt-20 2xl:pt-10': props.text || props.heading.text }
+        )}
+    }
+
+    renderer = afx`
+        <Neos.Presentation:Spacing size x y class="bento-boxes">
+            <div class="flex flex-col md:flex-row 2xl:flex-col gap-0 mdl:gap-10 2xl:gap-0">
+                <Neos.Presentation:Headline
+                    @if={props.heading.text} {...props.heading}
+                    display="headline-lg" class={private.headlineClass}
+                />
+                <Neos.Presentation:Paragraph
+                    @if={props.text} text={props.text} display="lead"
+                    class="bento-boxes__heading text-black/75 sm:text-base mdl:text-md p-0 mdl:pt-8 2xl:pt-0 2xl:pl-[60%]"
+                />
+            </div>
+
+            <div class={private.wrapperClass}>
+                <Neos.Fusion:Loop items={private.boxes} itemName="chunk">
+                    <div class="bento-boxes__row flex flex-row flex-wrap md:flex-nowrap gap-6 mdl:gap-10 items-stretch">
+                        <Neos.Fusion:Loop items={chunk} itemName="box">
+                            <Neos.Presentation:BentoBoxes.Box {...box} />
+                        </Neos.Fusion:Loop>
+                    </div>
+                </Neos.Fusion:Loop>
+            </div>
+        </Neos.Presentation:Spacing>
+    `
+}

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

@@ -0,0 +1,125 @@
+.bento-boxes {
+  --bento-boxes-gap-width: 0;
+
+  .n-background--accent-lightblue {
+    @apply text-white;
+  }
+
+  @screen md {
+    --bento-boxes-gap-width: 2.5rem;
+  }
+
+  .bento-boxes__heading {
+    @apply w-full 2xl:w-full;
+
+    @screen md {
+      width: 40%;
+    }
+
+    @screen 2xl {
+      @apply w-full;
+    }
+  }
+
+  .bento-boxes__lead {
+    @apply w-full 2xl:w-full;
+
+    @screen md {
+      width: 50%;
+    }
+
+    @screen 2xl {
+      @apply w-full;
+    }
+  }
+
+  .bento-boxes__row {
+    .bento-boxes__box-wrapper {
+      --bento-boxes-column-width: 100%;
+      @apply p-0 w-full;
+
+      @screen md {
+        --bento-boxes-column-width: 50%;
+        width: var(--bento-boxes-column-width);
+      }
+
+      .n-paragraph svg {
+        @apply inline-block;
+      }
+
+      &:hover .n-paragraph svg > path:first-child {
+        @apply scale-x-100;
+      }
+    }
+
+    @screen md {
+      &:first-child .bento-boxes__box-wrapper {
+        @apply pt-20;
+
+        &:first-child {
+          @apply pt-0;
+        }
+      }
+
+      &:last-child .bento-boxes__box-wrapper {
+        @apply pb-10;
+
+        &:last-child {
+          @apply pb-0;
+        }
+      }
+
+      &:nth-child(2n) .bento-boxes__box-wrapper {
+        &:first-child {
+          --bento-boxes-column-width: 60%;
+        }
+
+        &:last-child {
+          --bento-boxes-column-width: 40%;
+        }
+      }
+
+      &:nth-child(2n + 1) .bento-boxes__box-wrapper {
+        &:first-child {
+          --bento-boxes-column-width: 40%;
+        }
+
+        &:last-child {
+          --bento-boxes-column-width: 60%;
+        }
+      }
+    }
+
+    @screen 2xl {
+      &:nth-child(2n) .bento-boxes__box-wrapper {
+        &:first-child {
+          --bento-boxes-column-width: 50%;
+        }
+
+        &:last-child {
+          --bento-boxes-column-width: 50%;
+        }
+      }
+
+      &:nth-child(4n + 1) .bento-boxes__box-wrapper {
+        &:first-child {
+          --bento-boxes-column-width: 40%;
+        }
+
+        &:last-child {
+          --bento-boxes-column-width: 60%;
+        }
+      }
+
+      &:nth-child(4n + 3) .bento-boxes__box-wrapper {
+        &:first-child {
+          --bento-boxes-column-width: 60%;
+        }
+
+        &:last-child {
+          --bento-boxes-column-width: 40%;
+        }
+      }
+    }
+  }
+}

DistributionPackages/Neos.Presentation/composer.json

@@ -10,7 +10,8 @@
         "sitegeist/monocle": "^7.8",
         "packagefactory/atomicfusion-classnames": "^v1.0",
         "packagefactory/atomicfusion-proptypes": "^2.2",
-        "sitegeist/monocle-proptypes" : "^1.0"
+        "sitegeist/monocle-proptypes" : "^1.0",
+        "carbon/eel": "^2.7"
     },
     "autoload": {
         "psr-4": {