feature(case-study-carousel): Case study carousel block.

[nimithshetty17]

Issue

Fixes #MERATIVE-785

Description

There's already a block in Franklin called "Carousel". This will be a variation called "Carousel - Case Study".

New

Design Specs

• Figma Link - https://www.figma.com/file/vw24IPXXt4vCh9BNumka9A/Web--Merative-Digital-Design-System-2.0?type=design&node-id=1402-14262&mode=design&t=FiFpW0l7A8JXp6pZ-0

Test URLs

• Before (Changes from main): https://main--merative2--nimithshetty17.hlx.page/block-library/blocks/carousel
• After (Changes from this PR): https://case-study-carousel--merative2--nimithshetty17.hlx.page/block-library/blocks/carousel

Testing Instruction

To test the case study carousel and its responsiveness with respect to the design across all devices.

[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
/block-library/blocks/carousel

[aem-code-sync[bot]]

Page	Scores	Audits	Google
/block-library/blocks/carousel

[nimithshetty17]

@sachinmesh - The requested changes have been committed. Please have a look. cc: @proeung @Shalini-SB @keith-kaplan

[sachinmesh]

Checking the link here. https://case-study-carousel--merative2--nimithshetty17.hlx.page/block-library/blocks/carousel

HI @nimithshetty17 Can't see the changes in the above link, can you share the correct link.

Changes pending are

1. In desktop, eyebrow font style should be 14px Alliance No.1 medium and not 16px.

2. Title Text box should be 268px wide

3. Body text box should be 446px wide.

4. Spacing between side arrows with above and below component's should be 48px.

5. Carousal indicators spacing with carousal card should be 64px.

[nimithshetty17]

@sachinmesh I have cleared the cache. Please check in an incognito window now.

[sachinmesh]

CHecked @nimithshetty17

Rest is good, but the carousal arrows are gone, can you check once.

[aem-code-sync[bot]]

Page	Scores	Audits	Google
/block-library/blocks/carousel

[nimithshetty17]

@sachinmesh have added the arrows back.

[sachinmesh]

Good to go @nimithshetty17 @proeung @sharathmrft

[aem-code-sync[bot]]

Page	Scores	Audits	Google
/block-library/blocks/carousel

[aem-code-sync[bot]]

Page	Scores	Audits	Google
/block-library/blocks/carousel

[aem-code-sync[bot]]

Page	Scores	Audits	Google
/block-library/blocks/carousel

[nimithshetty17]

@proeung @sachinmesh have done the requested changes. Please have a look.

[sachinmesh]

Good to go now with 100 x 100 carousal arrow.

@nimithshetty17 @proeung

[helms-charity]

@nimithshetty17 @proeung ".carousel-slide-container" is not getting the calculated height, so it is presenting at 0 height. (when you put some number in the browser console, the content shows). I'll see if I can find what happened.

[aem-code-sync[bot]]

Page	Scores	Audits	Google
/block-library/blocks/carousel

[nimithshetty17]

@proeung - Testimonal carousel issue is fixed now.