Creation of a solution block.

[nimithshetty17]

Fixes #MERATIVE-886

Description

The current name in Franklin for this block is a Teaser List and it only renders if a link is added for each item. We want to make this so it allows for authors to use this layout without links for each item

New

Changed

• Figma Link - https://www.figma.com/file/FSqQ1LYrVSssEFOZuOnMIE/Final-page-layouts-for-Merative.c[…]ype=design&node-id=2969-41337&mode=design&t=FET0Yd5MWTSILb1b-4
• https://www.figma.com/file/vw24IPXXt4vCh9BNumka9A/Web--Merative-Digital-Design-System-2.0?type=design&node-id=431-2354&mode=design

Test URLs

• Before (Changes from main): https://main--merative2--hlxsites.hlx.page/block-library/blocks/solution-list
• After (Changes from this PR): https://solution-list-block-new--merative2--nimithshetty17.hlx.page/block-library/blocks/solution-list

[aem-code-sync[bot]]

Hello, I'm the AEM Code Sync 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/solution-list

[aem-code-sync[bot]]

Page	Scores	Audits	Google
/block-library/blocks/solution-list

[aem-code-sync[bot]]

Page	Scores	Audits	Google
/block-library/blocks/solution-list

[sachinmesh]

Extra 160px can be seen below the cards @nimithshetty17

[keith-kaplan]

@nimithshetty17 @sachinmesh please see uses of the solution block in actual pages as well. See here:

https://solution-list-block-new--merative2--nimithshetty17.hlx.page/curam

[sachinmesh]

https://solution-list-block-new--merative2--nimithshetty17.hlx.page/curam

This looks good to me

[keith-kaplan]

@nimithshetty17 @sachinmesh I was looking at another page and it looks like there maybe a regression with the latest version. please take a look at screenshot -

https://solution-list-block-new--merative2--nimithshetty17.hlx.page/real-world-evidence

[sachinmesh]

Hi @nimithshetty17 , most of the component, the 160px padding is absent. CC: @keith-kaplan

1. There should not be any divider line here

2. Here, a margin of 160px should be given above the divider line.

   

3. Below the illustration 160px margin is needed in bone color.

   

4. Again, 160px margin is gone here

   

5. Again here, below the simple content component and the ready to talk CTA 160px margin is absent.

[aem-code-sync[bot]]

Page	Scores	Audits	Google
/block-library/blocks/solution-list

[nimithshetty17]

@sachinmesh @keith-kaplan - The fix for the above mentioned comments have been added.

[sachinmesh]

1. Background color of flexible component should be white and not bone.

2. The margin below the illustration should be 160px.

@nimithshetty17 @keith-kaplan