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

FR: V2 Columns Block variation #133

Closed
DanielaPedrochevd opened this issue Oct 23, 2023 · 3 comments
Closed

FR: V2 Columns Block variation #133

DanielaPedrochevd opened this issue Oct 23, 2023 · 3 comments
Assignees
@girishdigrajkar
Labels
2023 Spillover Trucks and segments
Milestone
MT Trucks and Seg...

Comments

@DanielaPedrochevd
Copy link
Collaborator

DanielaPedrochevd commented Oct 23, 2023 •
edited
Loading

Agile Requirement

As a Business Owner, I want to display an image with a card as in the following design -> https://www.figma.com/file/oNwe2jHIICPMIe551EY62l/Mack-Reskin---Full-Project?type=design&node-id=2220-85452&mode=dev so that clients can get more information on the segment they have selected and access the trucks page of the different trucks related to the segment as well as the truck builder (if they have one)

Description

Edit the existing V2 columns block to allow for a white card background, a red line above the title, a text list and the addition of two possible buttons (build and explore).

Acceptance Criteria

  1. The columns block can have a white card background, a red line above the title, a text list and the addition of two possible buttons (build and explore).
  2. The new additions to the existing V2 columns block follow the design-> https://www.figma.com/file/oNwe2jHIICPMIe551EY62l/Mack-Reskin---Full-Project?type=design&node-id=2220-85452&mode=dev
  3. If the truck is available in the builder, then the "build" button is displayed, if not, only the "explore" button is displayed.
@DanielaPedrochevd DanielaPedrochevd self-assigned this Oct 23, 2023
@DanielaPedrochevd
Copy link
Collaborator Author

DanielaPedrochevd commented Nov 22, 2023 •
edited
Loading

Technical hints:

We can leave a white background in the primary version for the background image.
For the list we should adjust the standard typography to allow for it.
The red line is already available (Header with mark). -> Check V2 Hero implementation, for example.
We should make use of the Franklin functionality to show the secondary button.

This ticket has to be picked up after merging #119

@DanielaPedrochevd DanielaPedrochevd changed the title FR: MT Large Image with Card Block FR: V2 Columns Block editions Nov 23, 2023
@SantiagoHomps-NC SantiagoHomps-NC self-assigned this Dec 11, 2023
@SantiagoHomps-NC SantiagoHomps-NC mentioned this issue Dec 12, 2023
Merged
@DanielaPedrochevd
Copy link
Collaborator Author

This was initially planned for sprint 9 but Santiago could pick it up early :)

@cogniSyb cogniSyb changed the title FR: V2 Columns Block editions FR: V2 Columns Block variation Dec 19, 2023
@girishdigrajkar
Copy link
Collaborator

Validated and able to get the correct results; Closing the issue.

cogniSyb added a commit that referenced this issue Jan 17, 2024
@SantiagoHomps-NC @aem-code-sync
@Lakshmishri @cogniSyb
V2 Columns Block variation #133 (#186)
cd88cf9 
---------

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>
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>
@cogniSyb cogniSyb mentioned this issue Feb 28, 2024
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@girishdigrajkar girishdigrajkar

Labels
2023 Spillover Trucks and segments
Projects
None yet
Milestone
MT Trucks and Segments
Development

When branches are created from issues, their pull requests are automatically linked.

133-columns-variation Netcentric/vg-macktrucks-com-rd
6 participants
@Lakshmishri @SantiagoHomps-NC @girishdigrajkar @Gonzalo-CG @BeckyMedlin @DanielaPedrochevd