Components: Add Footer component

Added components to structure/menus/footer and then placed these footer menus into the footer region using the block layout. Additionally, I made some required changes to page.html.twig and added styling for the footer.
I am attaching screenshots for the reference.
MR: https://git.drupalcode.org/project/ui_suite_daisyui/-/merge_requests/50

Hello @tanushree gupta ,

This kind of theming is not the approach of the UI Suite DaisyUI theme, that is implementing SDC, UI Patterns 2, UI Suite ecosystem and thus Design System approach.

I invite you to check other components, implemented in /components folder.

I will assign this issue to me as I already planned to do it.

Thanks.

mortona2k → changed the visibility of the branch footer-components to hidden.

mortona2k → changed the visibility of the branch 3467159-4.0.0-alpha6-components-add to hidden.

Footers are highly site/design dependent.

I'm trying to think about how to structure it so it has a good default and is easy to customize.

But I think to get there, we need a discussion on available methods.

I didn't build an SDC, or use the menu component.

It would have been possible to create a variation of the menu component and customize it for the footer.

One caveat is that the menu's contextual edit links are missing. It would be great if we could find a way to get that back in to the block, which coming from UI patterns blocks.

So alternatively, I added a footer_menu region and customized the footer menu block and footer menu templates so that the top level links of the footer menu are column headers, and the second level links are printed.

This brings up a lot, like how to set the background color. I'm thinking UI skins would be useful to set it on the region.

If you wanted to use different menus as different columns, it would have to be reworked.

I ran into some challenges, like a block template has no idea which region it's in. (Here's a trick to add a template suggestion for that if needed: https://www.codimth.com/blog/web/drupal/drupal-8-adding-twig-template-su...)

I tried to use elements|add_suggestion('footer') on menu blocks in the region template, but that crashed it!

It was difficult to get the block title printed with the .footer-title class. I had to create a block--system-branding-block--footer template, which is only going to work for the footer menu.

Hello,

In my opinjion, footer must be a SDC component because it is a component in upstream documentation: https://daisyui.com/components/footer/

Little specification proposal for the component: https://docs.google.com/document/d/1DJCsANcHH7lnbxfUlHnX7m_2kiWdqAN8YWM9...

And the 2 slots must be theme regions and the component must be called from page.html.twig

The injection of footer Drupal menu must be hardcoded in page.html.twig or configurable in the theme settings, because there is no good display builder for pages yet.

No need for menu--footer.html.twig and block--system-menu-block--footer.html.twig.

If there is default blocks in the slots, it must be config entities in config/optional/ folder

I'm looking into making a footer SDC.

In Drupal, the links in the footer are likely built using the Footer menu, or some combination of menu blocks.

There is sort of a discrepancy here where DaisyUI has separate html for footer links vs menus.

Does that mean that when a menu is placed in the footer, it is to be stripped of it's menu attributes and displayed as footer links?

There are some differences, like active menu trail classes.

I think loading the SDC in the page template makes sense. But I'd rather find a way to make it flexible than hardcode the footer menu.

I think I needed those templates to get the contextual edit links to work.

For DaisyUI, the footer menu is not its own component, let's follow that, let's stick with upstream.

I think I needed those templates to get the contextual edit links to work.

We lose the capacity of using Footer Menu Block (and the related contextual links), but that's OK because we can inject the footer menu in the component prop. Moreover it is better to avoid code (templates suggestion here) directly referencing config, by skipping menu--footer.html.twig, because "footer" here is a config entity ID.

There are some differences, like active menu trail classes.

It will be managed by the LinksPropType::normalize() if we use the links items attributes in the template.

I think loading the SDC in the page template makes sense. But I'd rather find a way to make it flexible than hardcode the footer menu.

The way I am proposing is less "hardcoded" in my opinion. This is a pure UI/design implementation, without coupling to the Drupal application state (blocks & menus). It is a different way of theming, maybe a bit disturbing at first, but it worth it.

mortona2k → changed the visibility of the branch 3467159-footer to hidden.

Here's another approach, using UI Styles for color, padding, and the footer class.

Using background and content styles on the block, you can create many variations.

The page template has
The footer menu template wraps the columns with

Here's another approach, using UI Styles for color, padding, and the footer class.

Thanks to the attributes prop, it will be possible to use UI styles with the footer component.

But first, we need the footer component :)

The Menu Block module lets you set the theme hook to use if you want to change footer to use something else, or use another menu.

It is already handled by the MenuSource plugin for links props. If we do this component the right way, UI Patterns 2 will plug it to many Drupal API. It is magical :)

Layout builder and DaisyUI have a ton of options for building footer variations.

Let's not thing about the display builder while authoring the component. Let's build a good component, focused on UI and implemenattion of the upstream design system documentation, and it will work on layout builder and others.

My little proposal si still relevant IMHO: https://docs.google.com/document/d/1DJCsANcHH7lnbxfUlHnX7m_2kiWdqAN8YWM9...

OH, I think I get it now.

I was able to place a menu SDC as a block in LB, and I can see how the form to select the menu/level is similar to Menu Block.

(There are some limitations in comparison, would be great to add those, like the options to render/link the selected parent item)

I'll try to align with your spec. I was experimenting with the UI Suite ecosystem and DaisyUI, this is my first time with both.

(There are some limitations in comparison, would be great to add those, like the options to render/link the selected parent item)

We are open to proposals: https://www.drupal.org/project/issues/ui_patterns → :)

I was experimenting with the UI Suite ecosystem and DaisyUI, this is my first time with both.

I hope you are enjoying this discovery

Take a look at the footer, footer menu, and aside components I created.

Set up links in a footer menu, then add this as a block, select the menu, and the top level links should render as column headers.

You can add an aside. I haven't set up Social Links yet.

Center should be working.

I made some adjustments to the spec and commented on why in https://docs.google.com/document/d/1DJCsANcHH7lnbxfUlHnX7m_2kiWdqAN8YWM9...

I built the footer template to work as a layout section to work on it visually and swap the menu/aside position.
But the implementation has an issue - it switches visually but can't save it.

Hi @mortona2k,

Thanks for your work. However, you created 3 components: footer, footer_menu, and aside.

footer_menu and aside don't exist in DaisyUI according to the documentation: https://daisyui.com/components/

Only footer is documented: https://daisyui.com/components/footer/

Moreover, looking at the templating, it seems aside is not a component but a simple HTML element:

<aside{{ attributes }}>
  {{ content }}
</aside>

And footer_menu markup doesn't look like the one of a self contained component.

Also, we don't need custom CSS here. The CSS is handled by DaisyUI. Maybe you needed to add some because of the 3 components instead of one.

What you need to do in my opinion:

1. create footer as described in the DaisyUI documentation. Nothing more, nothing less.
2. add footer_nav & footer_aside regions to theme info.yml
3. call the component from page.html.twig by mapping the regions to the slots, and setting the default footer if you want