Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Tabbed Carousel variant for wheelbase #190

Closed
DanielaPedrochevd opened this issue Dec 14, 2023 · 4 comments · Fixed by #196
Closed

Tabbed Carousel variant for wheelbase #190

DanielaPedrochevd opened this issue Dec 14, 2023 · 4 comments · Fixed by #196
Assignees
@girishdigrajkar
Labels
2023 HL estimate PDP Spillover
Milestone
MT PDP

Comments

@DanielaPedrochevd
Copy link
Collaborator

DanielaPedrochevd commented Dec 14, 2023 •
edited by cogniSyb
Loading

Agile Requirement

As a user, I want to be able to see how the different wheels look on the MD Series Truck in an easy user friendly way.

Description
Create a new variant of the Tabbed Carousel block (#25) where the the user can see different wheelbase options as in the following design:

Acceptance Criteria

  1. There is a new variant available for Tabbed Carousel to add to any page by content editors.
  2. The block follows the above mentioned design and style.
    • Minimum width of tabs should be less, so that on desktop we can show all 8 items
    • Instead of motion left to right, we have a fade in/fade out effect
    • Text below header on mobile, top right on desktop. The alignment and sizing needs to be the same as done in FR: MT Powertrain V2 Slider Block #147
  3. The background colour doesn’t have to be changed
@DanielaPedrochevd DanielaPedrochevd added this to the MT PDP milestone Dec 14, 2023
@DanielaPedrochevd DanielaPedrochevd added the SRB tickets that need to be discussed in the SRB label Dec 18, 2023
@DanielaPedrochevd
Copy link
Collaborator Author

DanielaPedrochevd commented Dec 18, 2023 •
edited
Loading

@HaycockJill @WendyKruger The user experience for mobile as it is displayed in the figma file is not very user-friendly. We have other places in figma that use the slider for the desktop viewport but in mobile the slider is omitted and substituted for some tabs. We suggest to do the same here. The final look would be:

For desktop, the slider as:

Image

For mobile, we would do a similar solution as in the trucks configurations block (instead of a slider, we would use tabs):

Image

@DanielaPedrochevd DanielaPedrochevd added HL estimate Design Question RE/Dev team has open questions regarding the designs. and removed SRB tickets that need to be discussed in the SRB labels Dec 18, 2023
@WendyKruger
Copy link
Collaborator

@HaycockJill @WendyKruger The user experience for mobile as it is displayed in the figma file is not very user-friendly. We have other places in figma that use the slider for the desktop viewport but in mobile the slider is omitted and substituted for some tabs. We suggest to do the same here. The final look would be:

For desktop, the slider as:

Image

For mobile, we would do a similar solution as in the trucks configurations block (instead of a slider, we would use tabs):

Image

I'm open to exploring that. But we would need to have room for up to 8 options.

@WendyKruger WendyKruger removed the Design Question RE/Dev team has open questions regarding the designs. label Dec 19, 2023
@DanielaPedrochevd
Copy link
Collaborator Author

Estimation of this ticket went down because now that the specifications of the mobile version are more clear it is less complex as we have a similar solution for the tabbed carousel block.

@cogniSyb cogniSyb changed the title FR - MT Wheelbase options slider FR - Tabbed Carousel variant for wheelbase Dec 21, 2023
@cogniSyb cogniSyb mentioned this issue Dec 21, 2023
Closed
@Lakshmishri Lakshmishri self-assigned this Dec 27, 2023
@Lakshmishri Lakshmishri mentioned this issue Dec 28, 2023
Merged
@jonatan-lledo-netcentric jonatan-lledo-netcentric linked a pull request Jan 3, 2024 that will close this issue
Tabbed Carousel variant for wheelbase #190 #196
Merged
@cogniSyb cogniSyb changed the title FR - Tabbed Carousel variant for wheelbase Tabbed Carousel variant for wheelbase Jan 8, 2024
cogniSyb pushed a commit that referenced this issue Jan 10, 2024
@Lakshmishri @jonatan-lledo-netcentric
Tabbed Carousel variant for wheelbase #190 (#196)
21d2ccc 
* add new variant for tabbed carousel
* 190 fadeIn effect with no scroll
* 190 Fix line more than 100 chars
* 190 fix index overflow
* Figcap conditional add, default color & tab items wider
* list style none & setCarousel index-1 too

---------

Co-authored-by: Jonatan Lledo <117984204+jonatan-lledo-netcentric@users.noreply.github.com>
@girishdigrajkar
Copy link
Collaborator

Validated and able to get the correct results and hence, marking the issue to done status.

manuel-vara added a commit that referenced this issue Jan 31, 2024
@manuel-vara @cogniSyb
@SantiagoHomps-NC @TomaszDziezykNetcentric @jonatan-lledo-netcentric @aem-code-sync @taimurCognizant @Lakshmishri @markovukiceviccn
Release 4 (#211)
f3ff901 
* Update fstab.yaml for redesign

* change url and sharepoint to upstream urls

* Inpage navigation is in reversed order on Firefox #173 (#178)

* fix Firefox issue with sorting
* fix naming issues
* refactor focus state, button styles
* fix overlap issue

* Hero V2 Block displays different images for mobile and desktop. #106 (#179)

* refactor naming structure
* refactor adaptive images mechanism

* Icon cards block (#181)

* hlxsites#509 Fix displaying header on dealer page

* fix done

* one trust position ix

* Embed block match NZ one

* Update feed.xml

* Fix createElement()  v1-Cards

* Update feed.xml

* Update release.yml

* columns block adapted

* icon cards working

* css clean

* adjustements

* last changes

* specific class

* btn state styling

* comments corrected

* secondary btn margin corrected

* secondary btn class added

* cleanup

---------

Co-authored-by: Tomasz Dziezyk <tomasz.dziezyk@netcentric.biz>
Co-authored-by: TomaszDziezykNetcentric <125962117+TomaszDziezykNetcentric@users.noreply.github.com>
Co-authored-by: Jonatan Lledo <117984204+jonatan-lledo-netcentric@users.noreply.github.com>
Co-authored-by: aem-code-sync[bot] <aem-code-sync[bot]@users.noreply.github.com>
Co-authored-by: Syb <133873665+cogniSyb@users.noreply.github.com>

* The pop-up of the video displayed clicking on the Play video button is smaller and the thumbnail is cutout #182 (#183)

* iPhone/iPad - Icon Cards - The local video in the video pop-up cannot be played and is incorrectly displayed #184 (#185)

* fix #184: use <video> tag for video in modal
* fix modal close button
* fix override fullscreen play for safari
* refactor setting attributes

* Opening up Images will display an incorrect default state on the Image grid carousel #169 (#193)

* Hero variant for Solutions page #45 (#197)

* hero variants added

* refactored changes to alltrucks block

* comments addressed

* color confusion

* make btn color always white

* button style refactor

* margin solved

* pdp edge cases

* Tabbed Carousel variant for wheelbase #190 (#196)

* add new variant for tabbed carousel
* 190 fadeIn effect with no scroll
* 190 Fix line more than 100 chars
* 190 fix index overflow
* Figcap conditional add, default color & tab items wider
* list style none & setCarousel index-1 too

---------

Co-authored-by: Jonatan Lledo <117984204+jonatan-lledo-netcentric@users.noreply.github.com>

* Pencil Promo block #108 (#195)

* #108 - Pencil promo and banner promo block

* #108 - Add cursor: pointer to the block

* #108 - Add pencil banner links styles

* #108 - Change link hover color to acheive better contrast

* Applied comments & each block cares by itself only

* fixed alignment issue in line 288

* fix lint issue

* Fix an issue if p Element is not present inside content

* Style issues fix

* remove an unnecessary search for h1 & its styling

* move the hover effect 1 level up & a bit of code clean up

---------

Co-authored-by: Jonatan Lledo <117984204+jonatan-lledo-netcentric@users.noreply.github.com>

* fix alignment, add hover and focus state

* V2 Columns Block variation #133 (#186)


---------

Co-authored-by: aem-code-sync[bot] <aem-code-sync[bot]@users.noreply.github.com>
Co-authored-by: Lakshmishri <lakshmi.shri.v.a@gmail.com>
Co-authored-by: Syb Wartna <sybren.wartna@cognizant.com>

* Add "My Assets" functionality #201 (#202)

* add my assets to sidekick
* add custom viewport configurations for sidekick library

* Powertrain V2 Slider Block #147 (#200)

* add block
* add new section background color

---------

Co-authored-by: Syb <133873665+cogniSyb@users.noreply.github.com>
Co-authored-by: Syb Wartna <sybren.wartna@cognizant.com>
Co-authored-by: SantiagoHomps-NC <103571932+SantiagoHomps-NC@users.noreply.github.com>
Co-authored-by: Tomasz Dziezyk <tomasz.dziezyk@netcentric.biz>
Co-authored-by: TomaszDziezykNetcentric <125962117+TomaszDziezykNetcentric@users.noreply.github.com>
Co-authored-by: Jonatan Lledo <117984204+jonatan-lledo-netcentric@users.noreply.github.com>
Co-authored-by: aem-code-sync[bot] <aem-code-sync[bot]@users.noreply.github.com>
Co-authored-by: taimurCognizant <150666850+taimurCognizant@users.noreply.github.com>
Co-authored-by: Lakshmishri <lakshmi.shri.v.a@gmail.com>
Co-authored-by: Marko Vukićević <139957716+markovukiceviccn@users.noreply.github.com>
cogniSyb added a commit that referenced this issue Feb 26, 2024
@manuel-vara @cogniSyb
@Lakshmishri @SantiagoHomps-NC @TomaszDziezykNetcentric @jonatan-lledo-netcentric @aem-code-sync @taimurCognizant @markovukiceviccn
Redesign release 4 (hlxsites#559)
a9933c7 
* change url and sharepoint to upstream urls

* Release 4 (#211)

* Update fstab.yaml for redesign

* change url and sharepoint to upstream urls

* Inpage navigation is in reversed order on Firefox #173 (#178)

* fix Firefox issue with sorting
* fix naming issues
* refactor focus state, button styles
* fix overlap issue

* Hero V2 Block displays different images for mobile and desktop. #106 (#179)

* refactor naming structure
* refactor adaptive images mechanism

* Icon cards block (#181)

* hlxsites#509 Fix displaying header on dealer page

* fix done

* one trust position ix

* Embed block match NZ one

* Update feed.xml

* Fix createElement()  v1-Cards

* Update feed.xml

* Update release.yml

* columns block adapted

* icon cards working

* css clean

* adjustements

* last changes

* specific class

* btn state styling

* comments corrected

* secondary btn margin corrected

* secondary btn class added

* cleanup

---------

Co-authored-by: Tomasz Dziezyk <tomasz.dziezyk@netcentric.biz>
Co-authored-by: TomaszDziezykNetcentric <125962117+TomaszDziezykNetcentric@users.noreply.github.com>
Co-authored-by: Jonatan Lledo <117984204+jonatan-lledo-netcentric@users.noreply.github.com>
Co-authored-by: aem-code-sync[bot] <aem-code-sync[bot]@users.noreply.github.com>
Co-authored-by: Syb <133873665+cogniSyb@users.noreply.github.com>

* The pop-up of the video displayed clicking on the Play video button is smaller and the thumbnail is cutout #182 (#183)

* iPhone/iPad - Icon Cards - The local video in the video pop-up cannot be played and is incorrectly displayed #184 (#185)

* fix #184: use <video> tag for video in modal
* fix modal close button
* fix override fullscreen play for safari
* refactor setting attributes

* Opening up Images will display an incorrect default state on the Image grid carousel #169 (#193)

* Hero variant for Solutions page #45 (#197)

* hero variants added

* refactored changes to alltrucks block

* comments addressed

* color confusion

* make btn color always white

* button style refactor

* margin solved

* pdp edge cases

* Tabbed Carousel variant for wheelbase #190 (#196)

* add new variant for tabbed carousel
* 190 fadeIn effect with no scroll
* 190 Fix line more than 100 chars
* 190 fix index overflow
* Figcap conditional add, default color & tab items wider
* list style none & setCarousel index-1 too

---------

Co-authored-by: Jonatan Lledo <117984204+jonatan-lledo-netcentric@users.noreply.github.com>

* Pencil Promo block #108 (#195)

* #108 - Pencil promo and banner promo block

* #108 - Add cursor: pointer to the block

* #108 - Add pencil banner links styles

* #108 - Change link hover color to acheive better contrast

* Applied comments & each block cares by itself only

* fixed alignment issue in line 288

* fix lint issue

* Fix an issue if p Element is not present inside content

* Style issues fix

* remove an unnecessary search for h1 & its styling

* move the hover effect 1 level up & a bit of code clean up

---------

Co-authored-by: Jonatan Lledo <117984204+jonatan-lledo-netcentric@users.noreply.github.com>

* fix alignment, add hover and focus state

* V2 Columns Block variation #133 (#186)


---------

Co-authored-by: aem-code-sync[bot] <aem-code-sync[bot]@users.noreply.github.com>
Co-authored-by: Lakshmishri <lakshmi.shri.v.a@gmail.com>
Co-authored-by: Syb Wartna <sybren.wartna@cognizant.com>

* Add "My Assets" functionality #201 (#202)

* add my assets to sidekick
* add custom viewport configurations for sidekick library

* Powertrain V2 Slider Block #147 (#200)

* add block
* add new section background color

---------

Co-authored-by: Syb <133873665+cogniSyb@users.noreply.github.com>
Co-authored-by: Syb Wartna <sybren.wartna@cognizant.com>
Co-authored-by: SantiagoHomps-NC <103571932+SantiagoHomps-NC@users.noreply.github.com>
Co-authored-by: Tomasz Dziezyk <tomasz.dziezyk@netcentric.biz>
Co-authored-by: TomaszDziezykNetcentric <125962117+TomaszDziezykNetcentric@users.noreply.github.com>
Co-authored-by: Jonatan Lledo <117984204+jonatan-lledo-netcentric@users.noreply.github.com>
Co-authored-by: aem-code-sync[bot] <aem-code-sync[bot]@users.noreply.github.com>
Co-authored-by: taimurCognizant <150666850+taimurCognizant@users.noreply.github.com>
Co-authored-by: Lakshmishri <lakshmi.shri.v.a@gmail.com>
Co-authored-by: Marko Vukićević <139957716+markovukiceviccn@users.noreply.github.com>

* change url and sharepoint to upstream urls

---------

Co-authored-by: Syb Wartna <sybren.wartna@cognizant.com>
Co-authored-by: Lakshmishri <lakshmi.shri.v.a@gmail.com>
Co-authored-by: Syb <133873665+cogniSyb@users.noreply.github.com>
Co-authored-by: SantiagoHomps-NC <103571932+SantiagoHomps-NC@users.noreply.github.com>
Co-authored-by: Tomasz Dziezyk <tomasz.dziezyk@netcentric.biz>
Co-authored-by: TomaszDziezykNetcentric <125962117+TomaszDziezykNetcentric@users.noreply.github.com>
Co-authored-by: Jonatan Lledo <117984204+jonatan-lledo-netcentric@users.noreply.github.com>
Co-authored-by: aem-code-sync[bot] <aem-code-sync[bot]@users.noreply.github.com>
Co-authored-by: taimurCognizant <150666850+taimurCognizant@users.noreply.github.com>
Co-authored-by: Marko Vukićević <139957716+markovukiceviccn@users.noreply.github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@girishdigrajkar girishdigrajkar

Labels
2023 HL estimate PDP Spillover
Projects
None yet
Milestone
MT PDP
Development

Successfully merging a pull request may close this issue.

Tabbed Carousel variant for wheelbase #190 Netcentric/vg-macktrucks-com-rd
5 participants
@Lakshmishri @jonatan-lledo-netcentric @girishdigrajkar @WendyKruger @DanielaPedrochevd