Navigation cards within list appear broken

[AlexSkrypnyk]

Description

Whilst looking into CIVIC-1143: Design: Navigation Card UAT it was noticed the navigation cards are not displaying as expected within the manual list.

This was tested with the side nav hidden and displaying, with 1 card, 2 cards and 3 cards. Each test results in issues.

Also noted, the documentation is incomplete for this component. Will create a separate task for that.

Steps to reproduce.

1. Create a manual list using navigation cards
2. In the ‘content’ section. add up to three cards, each with title, image, summary and link
3. In the ‘fields’ section, leave empty or add a title and summary (issue is present regardless)
4. In the appearance select the column count to match the number of cards. Other items can stay blank.
5. Save the page.

Observed outcome

Expected outcome

[AlexSkrypnyk]

@fionamorrison23 Could you please clarify when multiple cards are expected to look different than a single card? As per figma, the image appears at the bottom only on mobile.

[fionamorrison23]

@AlexSkrypnyk the issue I originally reported was actually user error. I failed to set the Appearance to Fill width in the last row. However, upon attempting to reproduce the original error I did find that the card is not displaying as per design. The design gives the impression the height of the card is related to how much content is present. I created two navigation cards is a row and the result is a lot of white space below the card content. Storybook appears to behave as expected - the card height responds to the amount of content. Close this ticket and raise a new one? Or update this ticket?

DEV

Figma

Storybook Although this only shows 1 card, you can see how the height changes when the amount of content changes

[AlexSkrypnyk]

@fionamorrison23 I think we need a new ticket because we need to have clear definitions on how the card should be resized exactly, keeping in mind that there should be some min height added (or the card will collapse vertically and will look weird).

Also, the width of the card should either be set as % of the width (50% for example) OR be a fixed width OR be a fixed width, but not less or more that a percentage of the width.

All of the above need to be defined in the ACs and may require Figma as well as UIKit updates.

[fionamorrison23]

Closing. See previous comments.

[AlexSkrypnyk]

@fionamorrison23 The concern about the image of the card was resolved in https://github.com/civictheme/uikit/issues/148

We now need to make Navigation card component used in the List component to automatically re-flow to become vertical if there is not enough space in the list. This will address the exact problem provided in the description of this ticket.

I'm going to re-open this since there is no point re-creating the same ticket again.

[AlexSkrypnyk]

https://github.com/civictheme/uikit/assets/378794/7cb0c25b-6ce9-4281-915d-25189db9369e

https://github.com/civictheme/uikit/assets/378794/07c619ab-1361-4d80-ab7f-03d9c6b41b5d

[sonamchaturvedi28]

Test Env: DEV Test Status: PASS Test Result:

• Navigation cards are displayed as expected within the manual list for 1 card or multiple cards
• Navigation card component used in the List component automatically re-flows to become vertical when there is not enough space in the list.
• Navigation cards are displayed as expected on desktop and mobile view

https://github.com/civictheme/uikit/assets/51696317/d934ba7f-94a3-4ce5-823d-11e4567db00d