Change active footer accordion colour - small screens

[Jim-Dillon]

Done

Currently when a footer accordion header is clicked, it's a little tricky to distinguish between the accordion header, its second-level dropdown contents and the rest of the footer. I've suggested some separate improvements to the footer in another PR which could outdate my below screenshot, but those still have this same issue.

Proposing an improvement for the footer on small screens:

• When a footer accordion header is clicked (active), its nested items change background colour ($color-mid-x-light). This grey is light enough for you to make out the divider between each item.
• When the header is clicked, it also increases font-weight to distinguish it from the other unclicked headers above it.

QA

• Open demo and view Ubuntu.com footer on small screen (620px>). Open separate tab of live website for comparison.
• In demo, open accordions to see changes made. Drag screen-size to see they're only made to small-screens.

Screenshots

Before:

After:

Please feel free to provide any tweaks or feedback on this! Thanks :)

[webteam-app]

Jim-Dillon is not a collaborator of the repo

[anthonydillon]

@juanruitina @ClementChaumel @lyubomir-popov would you mind taking a look at this please?

[codecov[bot]]

Codecov Report

Merging #13033 (db5d701) into main (6b288d3) will increase coverage by 74.90%. The diff coverage is n/a.

:exclamation: Current head db5d701 differs from pull request most recent head 349532b. Consider uploading reports for the commit 349532b to get more accurate results

@@            Coverage Diff            @@
##           main   #13033       +/-   ##
=========================================
+ Coverage      0   74.90%   +74.90%     
=========================================
  Files         0      107      +107     
  Lines         0     2873     +2873     
  Branches      0      928      +928     
=========================================
+ Hits          0     2152     +2152     
- Misses        0      699      +699     
- Partials      0       22       +22     

see 107 files with indirect coverage changes

[lyubomir-popov]

I'm concerned this is a custom component that is moving further away from our existing accordion. Why not use that instead? It has an indent that distinguishes nested elements.

[juanruitina]

I would agree with reusing the accordion component. Is it possible to use it just on mobile, so design on desktop remains unchanged?

[Jim-Dillon]

Hi all, I've made changes to the footer so that it looks and acts like the vf-accordion on small screens only.

I initially tried to use the accordion HTML to create a second footer, which could then be hidden on larger screens. However, there were some issues as the dummy accordion content is static in the HTML file and the live site footer content is dynamically rendered from a separate file with its own style classes, which were difficult to override. I thought it could be simpler to just apply styling so the current footer looks like the accordion.

Notes:

• The example accordion component doesn't cover instances with multiple items inside an accordion. It does show the border removed between the header and first child though, so I've just extended that to the rest of the children.
• There are 6 headers at the bottom of the footer without a dropdown icon. With the indent it looks a little odd but it might be best to leave all headers with level indent.

[anthonydillon]

@akbarkz this has been sitting up address for months now. Can we assign someone to review this please?

[akbarkz]

@anthonydillon with the new redesigned footer this PR is not relevant anymore