fix: Update the carousel buttons to match design.

[Danielcodepad]

Issue

Fixes #173

Description

Description

Update the carousel buttons to match design. (See issue: "Update carousel buttons #173" for the new buttons)

For Testing: Ensure that the new carousel buttons replace old carousel buttons.

Design Specs

• Figma Link - https://www.figma.com/file/vw24IPXXt4vCh9BNumka9A/Web--Merative-Digital-Design-System-2.0?type=design&node-id=269%3A528&t=wSEra3QF24eUIAm9-1

Test URLs

• Before: https://main--merative2--hlxsites.hlx.page/drafts/Kunwar/carousel
• After: https://173-carousel-buttons--merative2--hlxsites.hlx.page/drafts/Kunwar/carousel

Testing Instruction

If applicable, please describe the tests that you ran to verify your changes. Provide instructions and link to the hlx deploy preview so that QA and the design team can provide proper testing.

[aem-code-sync[bot]]

Hello, I'm Franklin Bot and I will run some test suites that validate the page speed. In case there are problems, just click the checkbox below to rerun the respective action.

• [ ] Re-run PSI Checks

[aem-code-sync[bot]]

Page	Scores	Audits	Google
/drafts/Kunwar/carousel

[aem-code-sync[bot]]

Page	Scores	Audits	Google
/drafts/Kunwar/carousel

[helms-charity]

This looks good to me, @proeung do you want to assign Design QA to review?

[keith-kaplan]

Looking at this now.

[keith-kaplan]

Testimonial band is the only component that has the carousel on a live page. In the design system we have a case study band, but it was never developed fully in AEM - https://www.figma.com/file/vw24IPXXt4vCh9BNumka9A/Web--Merative-Digital-Design-System-2.0?type=design&node-id=1402%3A14262&mode=design&t=hyGynk8zQ1c2T1tj-1

Here are some pages that use the Carousel testimonial component - https://www.merative.com/healthcare-analytics https://www.merative.com/clinical-development

I would develop this block aligned to the testimonial component

[aem-code-sync[bot]]

Page	Scores	Audits	Google
/drafts/Kunwar/carousel

[Danielcodepad]

Per @keith-kaplan's mention in the above, this fix of Carousel block will align with the testimonial component of Carousel on Merative live site.

Reference: https://www.merative.com/healthcare-analytics https://www.merative.com/clinical-development

[sachinmesh]

Are we changing the round button on testimonial to half moon carousal button. @proeung @keith-kaplan Testimonial design is using round button. https://www.figma.com/file/vw24IPXXt4vCh9BNumka9A/Web--Merative-Digital-Design-System-2.0?type=design&node-id=17686-32866&mode=design&t=lIGhOkxVevhD5fC9-4

[proeung]

@Danielcodepad @helms-charity The changes outlined in this issue (https://github.com/hlxsites/merative2/issues/173) does not align with our design system. The half-moon buttons are designed to be used within the "Case Study Carousel" component (see link) and NOT for the Testimonial.

What we have on the main branch looks fine and we'll be doing additional work to clean up the carousel block as part of the Phase 3 effort, which includes migrating and conducting proper design QA for components that we need to bring over to Franklin. Our Merative dev team will be responsible for this.

I'm going to close out this PR as we don't need to update the carousel buttons.