Skip to content

Bugfix: Footer Monocle (linkGroups) #570

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
dmitrijkiltau wants to merge 2 commits into
base: rebrand
Choose a base branch
from
Open

Bugfix: Footer Monocle (linkGroups) #570

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
6ef7361
Feature: Allow attributes as parameter in Icon component
dmitrijkiltau Feb 22, 2024
e0acc46
BUGFIX: Footer Monocle
dmitrijkiltau Feb 22, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion DistributionPackages/Neos.Presentation/Resources/Private/Fusion/Atom/Icon.fusion
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ prototype(Neos.Presentation:Icon) < prototype(Neos.Fusion:Component) {
name = ${PropTypes.string}
fallbackName = ${PropTypes.string}
class = ${PropTypes.string}
attributes = PropTypes:DataStructure
}

name = null
Expand All @@ -14,14 +15,15 @@ prototype(Neos.Presentation:Icon) < prototype(Neos.Fusion:Component) {
[email protected] = ${String.trim(String.toLowerCase(value))}

inline = null

class = null
attributes = Neos.Fusion:DataStructure

renderer = Neos.Fusion:Augmenter {
data-icon-name = ${props.name}
[email protected] = ${props.name}

class = ${props.class}
attributes = ${props.attributes}
Copy link
Member

@jonnitto jonnitto Feb 22, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think this don't work, as it is not a Neos.Fusion:Tag. Shouldn't we use @apply here?

Copy link
Collaborator Author

@dmitrijkiltau dmitrijkiltau Feb 26, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I used it here and it's working: https://github.com/neos/Neos.NeosIo/pull/570/files#diff-848690a40a1ace0905c7261f04fa62147836e1377c165d75523a454d4322808fR131

I like to add attributes to components, as it get's rid of Neos.Fusion:Augmenter is many cases.


content = Neos.Fusion:Case {
inlineExists {
Expand Down
122 changes: 61 additions & 61 deletions DistributionPackages/Neos.Presentation/Resources/Private/Fusion/Module/Footer.fusion
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,13 +5,13 @@ prototype(Neos.Presentation:Module.Footer) < prototype(Neos.Fusion:Component) {
description = 'Footer of the page'
props {
linkGroups = Neos.Fusion:Map {
items = ${Array.range(1,4)}
items = ${Array.range(1, 4)}
itemRenderer = Neos.Fusion:DataStructure {
title = 'Features'
links = Neos.Fusion:Map {
items = ${Array.range(1,5)}
items = ${Array.range(1, 5)}
itemRenderer = Neos.Fusion:DataStructure {
title = 'Why Neos'
title = 'Just a footer link'
link = '#'
}
}
Expand Down Expand Up @@ -69,27 +69,24 @@ prototype(Neos.Presentation:Module.Footer) < prototype(Neos.Fusion:Component) {
}

@propTypes {
// does not work with monocle yet
//linkGroups = PropTypes:Array {
// type = PropTypes:DataStructure {
// title = PropTypes:String
// links = PropTypes:Array {
// type = Neos.Fusion:DataStructure {
// title = PropTypes:String
// link = PropTypes:String
// }
// }
// }
//}

linkGroups = PropTypes:Array {
type = PropTypes:DataStructure {
title = PropTypes:String
links = PropTypes:Array {
type = PropTypes:DataStructure {
title = PropTypes:String
link = PropTypes:String
}
}
}
}
socials = PropTypes:Array {
type = PropTypes:DataStructure {
link = PropTypes:String
icon = PropTypes:String
label = PropTypes:String
}
}

endlinks = PropTypes:Array {
type = PropTypes:DataStructure {
link = PropTypes:String
Expand All @@ -99,50 +96,53 @@ prototype(Neos.Presentation:Module.Footer) < prototype(Neos.Fusion:Component) {
}

renderer = afx`
<Neos.Presentation:Background variant="gradient">
<Neos.Presentation:Spacing y>
<Neos.Presentation:Spacing x y="small" size>
<div class="flex flex-wrap gap-12 mb-10">
<div class="flex-grow grid gap-y-14">
<Neos.Presentation:Icon name="neos-white-logo" class="h-12" />
<Neos.Presentation:Paragraph
text="Neos is free and open source software licensed under GPL v3 or later. Created with passion by over 100 contributors around the world."
class="max-w-screen-xxs"
/>
</div>
<div class="flex flex-grow-[3] flex-wrap gap-8">
<Neos.Fusion:Loop items={props.linkGroups} itemName="group">
<div class="flex-grow">
<Neos.Presentation:Headline display="title-md" text={group.title} />
<div class="grid gap-y-1 mt-6">
<Neos.Fusion:Loop items={group.links} itemName="link">
<a href={link.link} class="py-1 hover:underline underline-offset-8 display-body-lg">{link.title}</a>
</Neos.Fusion:Loop>
<Neos.Presentation:Background variant="gradient">
<Neos.Presentation:Spacing y>
<Neos.Presentation:Spacing x y="small" size>
<div class="flex flex-wrap gap-12 mb-10">
<div class="flex-grow grid gap-y-14">
<Neos.Presentation:Icon name="neos-white-logo" class="h-12" />
<Neos.Presentation:Paragraph
text="Neos is free and open source software licensed under GPL v3 or later. Created with passion by over 100 contributors around the world."
class="max-w-screen-xxs"
/>
</div>

<div class="flex flex-grow-[3] flex-wrap gap-8">
<Neos.Fusion:Loop items={props.linkGroups} itemName="group">
<div class="flex-grow">
<Neos.Presentation:Headline display="title-md" text={group.title} />
<div class="grid gap-y-1 mt-6">
<Neos.Fusion:Loop items={group.links} itemName="link">
<a href={link.link} class="py-1 hover:underline underline-offset-8 display-body-lg">{link.title}</a>
</Neos.Fusion:Loop>
</div>
</div>
</Neos.Fusion:Loop>
</div>
</div>
</div>
</Neos.Fusion:Loop>
</div>
</div>
</Neos.Presentation:Spacing>
<Neos.Presentation:Spacing x y="small" size>
<ul class="flex flex-wrap gap-4 -mx-2">
<Neos.Fusion:Loop items={props.socials}>
<li><a href={item.link} class="flex p-2 border border-transparent hover:border-current rounded-full">
<Neos.Fusion:Augmenter aria-label={item.label}>
<Neos.Presentation:Icon name={item.icon} class="h-6 w-6" />
</Neos.Fusion:Augmenter>
</a></li>
</Neos.Fusion:Loop>
</ul>
</Neos.Presentation:Spacing>
<Neos.Presentation:Spacing x y="small" size>
<p class="flex flex-wrap gap-6">
<Neos.Fusion:Loop items={props.endlinks}>
<a href={item.link} class="hover:underline underline-offset-8">{item.label}</a>
</Neos.Fusion:Loop>
</p>
</Neos.Presentation:Spacing>
</Neos.Presentation:Spacing>
</Neos.Presentation:Background>
</Neos.Presentation:Spacing>

<Neos.Presentation:Spacing x y="small" size>
<ul class="flex flex-wrap gap-4 -mx-2">
<Neos.Fusion:Loop items={props.socials}>
<li>
<a href={item.link} class="flex p-2 border border-transparent hover:border-current rounded-full">
<Neos.Presentation:Icon name={item.icon} class="h-6 w-6" attributes.aria-label={item.label} />
</a>
</li>
</Neos.Fusion:Loop>
</ul>
</Neos.Presentation:Spacing>

<Neos.Presentation:Spacing x y="small" size>
<p class="flex flex-wrap gap-6">
<Neos.Fusion:Loop items={props.endlinks}>
<a href={item.link} class="hover:underline underline-offset-8">{item.label}</a>
</Neos.Fusion:Loop>
</p>
</Neos.Presentation:Spacing>
</Neos.Presentation:Spacing>
</Neos.Presentation:Background>
`
}