Skip to content

Commit

Permalink
Merge pull request #552 from elkamyko/feature/bento-boxes
Browse files Browse the repository at this point in the history 
TASK: BentoBoxes presentation component
  • Loading branch information
@jonnitto
jonnitto committed Feb 22, 2024
2 parents 56ec9d7 + 09bf489 commit 12232e8
Show file tree
Hide file tree
Showing 6 changed files with 713 additions and 40 deletions.
99 changes: 99 additions & 0 deletions ...ages/Neos.Presentation/Resources/Private/Fusion/Molecule/BentoBoxes/BentoBoxes.Box.fusion
View file
Original file line number Diff line number Diff line change
@@ -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>
`
}
155 changes: 155 additions & 0 deletions ...Packages/Neos.Presentation/Resources/Private/Fusion/Molecule/BentoBoxes/BentoBoxes.fusion
View file
Original file line number Diff line number Diff line change
@@ -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>
`
}
125 changes: 125 additions & 0 deletions ...onPackages/Neos.Presentation/Resources/Private/Fusion/Molecule/BentoBoxes/BentoBoxes.pcss
View file
Original file line number Diff line number Diff line change
@@ -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%;
}
}
}
}
}
3 changes: 2 additions & 1 deletion DistributionPackages/Neos.Presentation/composer.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,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": {
Expand Down

0 comments on commit 12232e8

Please sign in to comment.