diff --git a/DistributionPackages/Neos.Presentation/Resources/Private/Fusion/Main.pcss b/DistributionPackages/Neos.Presentation/Resources/Private/Fusion/Main.pcss index 63d656048..99f05720f 100644 --- a/DistributionPackages/Neos.Presentation/Resources/Private/Fusion/Main.pcss +++ b/DistributionPackages/Neos.Presentation/Resources/Private/Fusion/Main.pcss @@ -4,6 +4,7 @@ /* Add here the imports from subfolders */ @import url("Atom/**/*.pcss"); @import url("Molecule/**/*.pcss"); +@import url("Module/**/*.pcss"); /* Modules should not contain any custom CSS or JS/TS and instead use inline Tailwind and Alpinejs */ @import url("Organism/**/*.pcss"); diff --git a/DistributionPackages/Neos.Presentation/Resources/Private/Fusion/Module/Testimonial/Testimonial.fusion b/DistributionPackages/Neos.Presentation/Resources/Private/Fusion/Module/Testimonial/Testimonial.fusion new file mode 100644 index 000000000..c43e34bdd --- /dev/null +++ b/DistributionPackages/Neos.Presentation/Resources/Private/Fusion/Module/Testimonial/Testimonial.fusion @@ -0,0 +1,59 @@ +prototype(Neos.Presentation:Module.Testimonial) < prototype(Neos.Fusion:Component) { + + @styleguide { + title = "Testimonial" + props { + paragraph = "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet." + isQuote = true + textLeft = false + name = "Karsten Dambekalns" + position = "Creative Code Engineer" + button = "Read more" + image.imageSource = Sitegeist.Kaleidoscope:UriImageSource { + uri = 'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?auto=format&fit=facearea&facepad=5&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D' + } + } + } + + @propTypes { + text = PropTypes:FromPrototype { + prototypeName = "Neos.Presentation:Paragraph" + } + isQuote = PropTypes:Bool + textLeft = PropTypes:Bool + name = PropTypes:String + position = PropTypes:String + button = PropTypes:String + } + + textLeft = null + image = null + isQuote = null + paragraph = null + button = null + name = null + position = null + + @private { + textStyle = ${props.isQuote ? 'quote-style' : 'text-style'} + textLeft = ${props.textLeft ? 'lg:flex-row-reverse flex-col-reverse' : 'lg:flex-row flex-col'} + } + + renderer = afx` + +
+ +
+ + +
+ + +
+ +
+
+
+ ` +} diff --git a/DistributionPackages/Neos.Presentation/Resources/Private/Fusion/Module/Testimonial/Testimonial.pcss b/DistributionPackages/Neos.Presentation/Resources/Private/Fusion/Module/Testimonial/Testimonial.pcss new file mode 100644 index 000000000..c58dab4ca --- /dev/null +++ b/DistributionPackages/Neos.Presentation/Resources/Private/Fusion/Module/Testimonial/Testimonial.pcss @@ -0,0 +1,6 @@ +.text-style{ + @apply text-lg font-bold; +} +.quote-style { + @apply text-lg italic; +} diff --git a/DistributionPackages/Neos.Presentation/Resources/Private/Fusion/Template/Default.fusion b/DistributionPackages/Neos.Presentation/Resources/Private/Fusion/Template/Default.fusion index 1c7ae8ea6..204d8a6fb 100644 --- a/DistributionPackages/Neos.Presentation/Resources/Private/Fusion/Template/Default.fusion +++ b/DistributionPackages/Neos.Presentation/Resources/Private/Fusion/Template/Default.fusion @@ -26,6 +26,9 @@ prototype(Neos.Presentation:Template.Default) < prototype(Neos.Fusion:Component) personcards = Sitegeist.Monocle:Preview.Prototype { prototypeName = 'Neos.Presentation:Module.PersonCards' } + testimonial = Sitegeist.Monocle:Preview.Prototype { + prototypeName = 'Neos.Presentation:Module.Testimonial' + } textwithimage = Sitegeist.Monocle:Preview.Prototype { prototypeName = 'Neos.Presentation:Module.TextAndImage' props.image.imageSource = Sitegeist.Kaleidoscope:ResourceImageSource { diff --git a/DistributionPackages/Neos.Presentation/Resources/Public/Assets/Icons/quote-left.svg b/DistributionPackages/Neos.Presentation/Resources/Public/Assets/Icons/quote-left.svg new file mode 100644 index 000000000..5efac1eb1 --- /dev/null +++ b/DistributionPackages/Neos.Presentation/Resources/Public/Assets/Icons/quote-left.svg @@ -0,0 +1 @@ +