civictheme / uikit

UI atomic component-based library with Storybook integration
https://uikit.civictheme.io/
GNU General Public License v2.0
6 stars 5 forks source link

Design: Add new slot to the Footer #400

Open AlexSkrypnyk opened 1 month ago

AlexSkrypnyk commented 1 month ago

Consumer sites have use cases where they want to have a more simplified footer that is just a horizontal list of links. The Navigation component already allows to output menu links in a horizontal line, but the Footer does not have a slot where these links can be placed

CivicTheme__Design_System_v1_8_0_–_Figma

If the above proposal is accepted, then the following changes would need to be done:

  1. Figma to create a variant with a horizontal navigation
  2. UIKit to provide an extra slot content_middle5
  3. Drupal theme to declare a new region (and also include it into the starter kit)

Please note that #2 and #3 can still happen without #1 to allow consumer sites users to make their own decisions on the menu placement.

Organisms___Footer_-_Footer_⋅_Storybook
AlexSkrypnyk commented 1 month ago

Point 2 implemented in https://github.com/civictheme/uikit/pull/401

alanrako commented 2 weeks ago

@fionamorrison23 As discussed please confirm the following:

  1. Does the horizontal slot replace vertical columns?
  2. Do we also introduce a new variant where the horizontal slot is positioned beneath the acknowledgement of country?
fionamorrison23 commented 1 week ago

@alanrako

  1. No, the new slot does not replace the columns, it's in addition AFAIK. But there may be cases where the columns are not used.
  2. And yes, I do think we need to consider an option for a horizontal slot below the Acknowledgement of Country. But perhaps we need to ask if we need two new horizontal slots.
alanrako commented 4 days ago

@fionamorrison23 Device=Desktop, Dark Theme=False, Navigation=Horizontal Bottom Device=Desktop, Dark Theme=False, Navigation=Horizontal Centre

Updates made as per description - for approval.

We now have 3 footer variants for approval:

  1. Vertical navigation
  2. Vertical & horizontal centre
  3. Vertical & horizontal bottom

Desktop designs attached. Figma design here

We also now have 4 descendant mobile menu component variants:

  1. Stroke top
  2. Stroke bottom
  3. Stroke top and bottom
  4. Stroke none

Figma design here