CR: Stories Carousel design changes

[shirin27]

From vg-volvotrucks-us-rd created by cogniSyb: Netcentric/vg-volvotrucks-us-rd#78

Discussed with client: remove the author from "Stories from the road" carousel due to having no proper content available.

A new, more consistent design has been created for the navigation of the carousel. This is shared with #70

Requirements

• The title should be changed, everything behind the pipe character should be stripped
• Buttons with previous/next arrows are used to navigate
  • When the start or the end of the carousel is reached, the respective button will be shown as inactive
  • Buttons are only present on tablet and desktop
  • On tablet, the navigation buttons are placed on the sides of the text
  • On desktop, the navigation buttons are placed near each other
• Text will be truncated if too long
  • If the title text exceeds 1 line, text will truncate
  • If the body copy text exceeds 2 lines, text will truncate
• Retrieve a maximum of articles, as mentioned in #600
• This block can be displayed on article pages and home pages

Desktop: Tablet: Mobile:

[shirin27]

@cogniSyb What do you mean this issue is shared with #70? Can we refine this today?

[shirin27]

@DanielaPedrochevd I mean here that we have a new design for the arrow navigation of this block.

We would need to add #171 to this issue as well.

[shirin27]

related to #70

[shirin27]

@ZoeBeykirch @DanielaPedrochevd I think we should adjust the requirement from #171 "The title can be modified by the content editor". On the block itself this is not possible.

I understand the wish of the business here. Looking at how the magazine is built, I propose the following:

1. Just like magazine article pages we remove all content of the title after a vertical bar then "Business Story Walking the Walk | Volvo Trucks USA" will become "Business Story Walking the Walk"
2. We add a new item to the page metadata for magazine articles, an alternative title. This can be then reused properly in other parts of the website. All current magazine articles will need to contain this extra metadata field

For forward compatibility, I propose solution 2. It will mean less complexity later on when we touch the code of the magazine.

[BeckyMedlin]

@mollyaljenkins @verareljic #560 notes that this ticket must be completed before #541