As editors we would like to use a horizontal scroll for our promotion components on desktop and mobile to promote more content and take up less vertical real estate

[NickHaggerty1]

Acceptance criteria

1. Optional horizontal scroll option for all Promotion component options (NEWS / PEOPLE / TOPIC / MAGAZINE / EVENTS)
2. Also should be used for NEWS article template newsfeed (at bottom of the page) We would like to make some visual adjustments the news template ´feed´ #1340
3. Horizontal should work on all devices / screen sizes.
4. Explore whether same implementation should apply to PROMO TILES components....
5. Discussion/meeting required on best way to solve the Users interaction with the left / right navigation. Use of horizontal bar to indicate location in the scroll (ref Ikea) arrows left / right. Other ideas/inspiration?

Inspiration:
https://www.ikea.com/no/no/ (third module down)
https://www.apple.com/environment/ (bottom of page)

[NickHaggerty1]

As discussed with @SvSven. FYI @meols

• Mobile horizontal scroll will be default ( Horizontal scroll for PROMOTION component on Mobile view #1312)
• Editor can choose to display horizontally for Desktop
• If editor does not select to display horizontally. The usual 3 are displayed and no option for horizontal scroll
• If editor does select to display horizontally. They have additional options to add/display more cards. Then Left right arrows (same solution as carousel component) would appear on Desktop and also bar underneath to indicate where user is in the scroll.
• For each choice (Topic / News / Magazine) we need to define unique options for amount of cards to display.

How does EVENTS and PEOPLE factor in?

[SvSven]

For future post-Christmas self:

• Horizontal scroll currently works for Topic, News, Magazine, People, and Event promotions.
• Navigation arrows are hidden at start/end respectively.
• A toggle has been added to the Promotion component in Sanity to always have the horizontal scroll enabled (if content is greater than allowed space)
• By default, all promotions will show horizontal scroll on smaller screens
• Scrollbar and navigation arrows have been added

Left to do:

• Styling of navigation buttons is currently EDS styling; does not conform to Figma yet
• Update validation for promotion to allow user to select more than 3 cards if the horizontal scroll is enabled manually
• Add horizontal scroll to "latest news" at the bottom of news articles per acceptance criteria
• Placement of navigation arrows looks weird on larger screens; should ideally not overlap cards
• Figure out why navigation buttons show if horizontal scroll manually enabled but not initialized (enough width for content)

For testing: https://web-global-development-equinor-web-sites-dev.c2.radix.equinor.com/test/carousel

[NickHaggerty1]

@SvSven Firstly, great job, this is looking very good on the components it has been created for.. Small comment from me, Can the Left arrow button display as soon as the Right button been clicked. Currently it only appears when the user reaches the end of the scroll (you can see this on your TOPIC promotion test page)

[fernandolucchesi]

Hi @SvSven, I haven't looked at the code yet. Just tested the UX.

I think it is looking very nice! One thing that I personally dislike tho is the arrow buttons displayed on mobile view, but that might be just me 😅

Other than that I found a bug where some of the cards are shrinking inside the carousel (I believe to respect a possible max-width limit?). When this gets fixed I'll dive deeper in the code :d

[SvSven]

Yeah I think those arrows are going to be the death of me.

@NickHaggerty1 I'll have a look to see if I can tweak the showing/hiding of the navigation arrows a bit, currently it's doing some automagic things for it.

Also the difference in card image; that's weird, they should all be the same size 🤔

[SvSven]

@fernandolucchesi @NickHaggerty1 navigation arrows should now properly show/hide and the cards should all be the same width as well

[NickHaggerty1]

@SvSven You have shown them buttons who's boss thats for sure! Nice work

[fernandolucchesi]

@fernandolucchesi @NickHaggerty1 navigation arrows should now properly show/hide and the cards should all be the same width as well

I think the width should vary accordingly to the carousel type:

[SvSven]

@fernandolucchesi the issue with the people promotion card width should be fixed now. We might want to refactor the implementation slightly when we add support for iframes in a horizontal scroll, but for now it should be fine.

@NickHaggerty1 To try and move things along a bit better, I made a separate issue for adding the horizontal scroll the to promo tile component, see: #1485

[fernandolucchesi]

looks good! approved! ✅

[NickHaggerty1]

Approved. @fernandolucchesi @meols But there is a small bug that maybe is only on Stage? The EVENTS promotion comes with a warning to select a tag. Even through I have selected to manually choose my events.

https://studio-global-development-equinor-web-sites-dev.c2.radix.equinor.com/desk/topicContent;a353cb14-028f-45dd-bbea-4010d6968d3e

[NickHaggerty1]

[millianapia]

@NickHaggerty1 currently looking into this

[millianapia]

@NickHaggerty1 this happens when you toggle manually choose events, when select by tag toggle is still toggled - even though it is hidden. I will try to make a quick fix for this

[NickHaggerty1]

Nice thanks @millianapia

[millianapia]

@NickHaggerty1 should work as expected, could you verify before we move this issue to the deploy column

[NickHaggerty1]

@millianapia Good stuff. Approved, works as expected. Thanks

[millianapia]

@NickHaggerty1 i also made it so the navigation buttons now are hidden when used on a phone size, hope it looks ok

[NickHaggerty1]

Yeah thats great. Lets go for that @millianapia until someone complains about the lack of arrows! Thanks for fixing. Approved