search

Netcentric / vg-volvotrucks-us-rd

Franklin Site Redesign for https://www.volvotrucks.us/
Apache License 2.0
1 stars 1 forks source link

FR: Media with Text Block #180

Closed DanielaPedrochevd closed 10 months ago

DanielaPedrochevd commented 1 year ago

Agile Requirement As a Business owner, I want to display text and images in different positions and configurations so that my page looks more dynamic and has a nicer design.

Description

Create a Media with Text Block that has the following variants selectable by the editor:

https://www.figma.com/file/Id3nd9kbfh8TpS1SfWhrW2/Volvo-Component-Library?type=design&node-id=1723-10961&mode=design&t=y47m3UK0uZa2NwDF-4

Acceptance Criteria

1- There is a new "Media with text" block available that editors can add to any site. 2- The new block has 7 different variants:

Single 1 Video with Play Button

Single 1 Standard

Single 1 Video Autoplay

Single 2 Left

Single 2 Right

Double 1

Double 2

DanielaPedrochevd commented 1 year ago

Design points to solve after last meeting:

For the single Media with text block 1 Video with play button variant, we are looking into harmonizing the aspect ratio and using 16:9 across all viewports.

Video Standard should be relabeled in Figma as Media Standard, allowing images to be displayed and video. Same for Video Full Width. We need to see clearly the expected behavior of each of the variants in Figma :)

BeckyMedlin commented 1 year ago

Per discussion w/ @cogniSyb This is needed for Digital Reveal, too.

cogniSyb commented 12 months ago

@ozzy-krishnan I’ve got two questions regarding the variant Single 1/standard with play button. We didn’t find this component in use. Could you point out where and how this will be used? The play button here could suggest that clicking it would open a modal window with the video, as is the case for the Resource Gallery. Could we get clarity on the intended interaction?

ozzy-krishnan commented 12 months ago

Hi @cogniSyb :)

The component is located within the Exterior details modal on the PDP. you can find it located here.

For the experience, it should open the existing embedded video player modal with the video (as you mentioned - similar to the resource gallery).

Let me know if this helps or if you require any further clarifications!

markovukiceviccn commented 12 months ago

@DanielaPedrochevd @cogniSyb

None of the seven variants listed in acceptance criteria above don't describe or show "Media with tabs" variant - https://www.figma.com/file/Id3nd9kbfh8TpS1SfWhrW2/Volvo-Component-Library?node-id=1790%3A15798&mode=dev

Please update the specification with these variants.

cogniSyb commented 12 months ago

@ozzy-krishnan thanks for your comment. I’ve checked with our developers; opening a modal from a modal would replace the contents of the former. This will interfere with the flow of the user: after opening the second modal and closing it, we return to the PDP whereas the previous modal is expected.

Could we find another way to deal with this video variant? Probably it’d be better to discuss this in a call :)

cogniSyb commented 12 months ago

None of the seven variants listed in acceptance criteria above don't describe or show "Media with tabs" variant - https://www.figma.com/file/Id3nd9kbfh8TpS1SfWhrW2/Volvo-Component-Library?node-id=1790%3A15798&mode=dev

Please update the specification with these variants.

@markovukiceviccn Media with Tabs is already developed. It can be found in the design in several modals and is available in our documentation for content editors.

In this issue –Media with Text Block– we have 'Single 2 Left' and 'Single 2 Right' specified. The code can be reused partially; the interaction/tabs should be removed.

markovukiceviccn commented 12 months ago

@cogniSyb "The code can be reused partially; the interaction/tabs should be removed." - I thought we should use tabs in Single 2 Left' and 'Single 2 Right' since you mentioned we should reuse code from "Media with tabs". I got confused by advice to reuse the code from "Media with tabs" because from my perspective the only thing which we can reuse from Media with tabs is 'tabbing' functionality. All clear now.

BeckyMedlin commented 11 months ago

@cogniSyb Are the design questions all answered? If so, please clear the label. Thank you!

cogniSyb commented 11 months ago

@BeckyMedlin no they aren’t, today we found out about another variation.

@ozzy-krishnan we noticed for Media with Text Block Single 2 variant that we can have different sizes:

  1. https://www.figma.com/file/yv0VtHTvMoGPqkv0RAYcVp/PDP?type=design&node-id=7920-33330&mode=dev
  2. https://www.figma.com/file/yv0VtHTvMoGPqkv0RAYcVp/PDP?type=design&node-id=1741-24323&mode=dev

We’ve picked this up from a code perspective. Could you confirm whether this is correct and not a mistake in the design? If it’s correct, could you make sure this is added to the Component Library?

ozzy-krishnan commented 11 months ago

@cogniSyb thanks for raising - will double check and try get an answer on this today

ozzy-krishnan commented 11 months ago

Hi @cogniSyb I checked with design, there should not be 2 variants, there is only 1 that the margins match other components. It can be located here in the design change log. let me know if you have any further questions! :)

girishdigrajkar commented 11 months ago

Issues reported and fix received : Sybren Wartna 2 days ago This can be retested Single 1 Video with Play Button – video size updated. Both mobile and tablet have a square aspect ratio Single 2 Right (and Single 2 Left) – image size is changed, aspect ratio is 4/3 and aligns with Media With Tabs: https://180-media-with-text--vg-volvotrucks-us-rd--netcentric.hlx.page/drafts/syb/media-tabs-vs-media-text Double 1 Margin between Title and text is 24px whereas expected is 16px – I’m going to check this with design Double 2 scrolling – fixed

Girish Digrajkar: 1 day ago Retest summary : Single 1 Video with Play Button – Desktop, Mobile Width is as expected however, not the Height ; Tablet size is now as expected;
Single 2 Right (and Single 2 Left) – Desktop Width is 609 whereas required is 698 ; Tablet size is as expected; Mobile : Width required is 245 whereas is 257.25 Ok Double 2 scrolling – Mobile : Width and Height expected is 335px whereas it is 506 and no padding in between 2 images; Desktop & Tablet : As expected so, passed

girishdigrajkar commented 11 months ago

Checked and confirmed with Syb for above observations and pixel size are expected as per his discussion with Agency. Double 2 block scrolling has been validated and is as expected hence, this issue passed validations thus, could be closed.