Add SDDS global footer styling

Bumping to major as this is likely to be part of the official xb-demo and we want it to look good.

Ideally, this could be finished by the middle of next week, so we have time to review and test and get it in by end-of-week.

If you don't have time to do the fancy footer, a simple footer could be created as a placeholder for now until you (or someone else) has time for the fancier footer.

Figma is noted here:

#3468620: [META] Create updated custom components for Starshot Demo Design System

@vasantha deepika Fyi, that I have been informed the recording for the Driesnote video will be sooner than I realized so one of my coworkers will be working on this tomorrow. That said, you can still get credit for reviewing/testing:

#3510426: Create SDDS global header config
#3511866: Create SDDS global footer config

and for the styling of header/footer once they are ready tomorrow.

Sorry for that. Hopefully you hadn't done much yet. Let me know if you did work on it and I can give you credit for that.

Update summary

Fix link

Fix typo

@vasantha deepika thanks for your understanding... adding credit for the work you've done already.

Per @gábor hojtsy, we'll simplify the footer... config cleanup is happening in:

#3511877: Add SDDS global header styling

Forgot to upload his screenshot:

This issue needs to happen after the header one due to config updates.

Thanks @heyyo.

Alan has a branch too and was trying to do this in a "generic" way (and didn't include the social media links) as that's what @gábor hojtsy mentioned in Slack.

So, you two have different approaches and hopefully we can take the best of both :)

Assigning to myself for initial review/testing. I'll try to create two videos with each approach and add them here and then open this up for other review.

Tested Alan's MR and these are generic improvements, so I will merge that one shortly. I'm uploading a video right now.

Finished code review and testing on Alan's MR and this video shows testing for the footer in a generic way (using two approaches):

https://youtu.be/_kvCfY8LByg

I'll merge this and move onto @heyyo's approach.

I've tested MR 94 from @heyyo.

I like the gradient and wonder if it could be pulled into the generic components somehow... need to think about this.

I also like the styling of the menus as there is more vertical space between items. That could get pulled into the .ct-menu in the container component.

@heyyo If you have the time/inclination... think about how might your gradient get pulled into the generic components.

And similarly, this one needs work and not sure when Alan would be able to get to this:

#3513066: Improve SDDS generic components and add social media components

I'm marking MR 94 as draft as we work through this.

Here's the video of me testing @heyyo's MR:

https://www.youtube.com/watch?v=IcERuwcbse4

Been playing around with columns and containers and thinking about this...

1. we could add the gradient as a background in the container
2. we could add an optional "split" for the container where there's a second background area where a percentage (?) and background color are provided and that would add a second slot in that area

Thoughts?

I did try putting containers into column slots but then the heights aren't consistent:

I'm working through some issues now that 1.0.x is merged into the branch... not sure why they didn't show up when testing the header branch... hmm

#3513270: Twig\Error\LoaderError: Template "@atoms/starshot-menu/starshot-menu.twig" is not defined

I've hacked around that weird bug for now so this shouldn't be blocked anymore.

Added gradient to container background options:

#3513281: Add gradient background to SDDS container options

but we still need to figure out the "split" container that has two backgrounds.

In MR 89, I've pulled in @heyyo's menu styles into the starshot-menu and refactored to handle both header and footer... this assumes, for now, that the header_panel remains.

Now we need to figure out the container split stuff to support two backgrounds but I think that's out of my CSS skill level.

Happy to have someone pick this up.

Merged in the menu styling in 89.

Still need to figure out the container split stuff to support two backgrounds, but I think that's out of my CSS skill level.

Happy to have someone pick this up.

VIDEO: https://youtu.be/r_pB3wq3X-0

I'm going to review this now.

I haven't tested yet, but reviewed the code and it looks pretty good. Thanks for the cleanup on grid(flex)+columns too :)

I'll make some minor naming changes in the branch and then test. Based on the demo call we did yesterday, I'm very hopeful this will be get merged shortly!

Ah! The css is missing from the new components :) [please note the name changes I did when adding these]

If you add the css how you had it, I can do the name changes myself if you want.

Okay... had a call with Lionel... mystery solved on the css (it was regular css and not scss so the gitignore was ignoring)

Also, this code is part of the MR here:

#3513066: Improve SDDS generic components and add social media components

so I'm closing this issue as fixed for the other work and we'll do the social media links in that issue.

Thanks, everyone!