feat(related-documents): add purple theme and adjust rendering logic when there's no post

[sahmad-merative]

Issue

Fixes # MERATIVE-738

Description

• Added functionality to add cards color to change to purple when purple-cards is added to the component.
• If no information is added to the component linkable-cards component will automatically fetch info from sharepoint

Design Specs

• Figma Link -https://www.figma.com/file/dFJwrp6VkUMSirF2KMLRMx/Thought-leadership-library?type=design&node-id=357%3A17984&t=iaNohDrbt4220FLs-1

Test URLs

• Before (Changes from main): https://main--merative2--sahmad-merative.hlx.page/drafts/saad/leadspace-test
• After (Changes from this PR): https://194-linkable-cards--merative2--sahmad-merative.hlx.page/drafts/saad/leadspace-test

Testing Instruction

• To test card's color purple-cards have to be added to the component as shown in the imae below

  

• If no information is added to the component linkable-cards component will automatically fetch info from sharepoint and populate 3 cards from the list

[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/saad/leadspace-test

[aem-code-sync[bot]]

Page	Scores	Audits	Google
/drafts/saad/leadspace-test

[aem-code-sync[bot]]

Page	Scores	Audits	Google
/drafts/saad/leadspace-test

[aem-code-sync[bot]]

Page	Scores	Audits	Google
/drafts/saad/leadspace-test

[aem-code-sync[bot]]

Page	Scores	Audits	Google
/drafts/saad/leadspace-test

[aem-code-sync[bot]]

Page	Scores	Audits	Google
/drafts/saad/leadspace-test

[aem-code-sync[bot]]

Page	Scores	Audits	Google
/drafts/saad/leadspace-test

[proeung]

@sahmad-merative Any update on this PR? It's been over a week (9/22) since I left my review and I have not seen any follow commits to address and finish up this work.

cc: @keith-kaplan @Shalini-SB

[aem-code-sync[bot]]

Page	Scores	Audits	Google
/drafts/saad/leadspace-test

[aem-code-sync[bot]]

Page	Scores	Audits	Google
/drafts/saad/leadspace-test

[aem-code-sync[bot]]

Page	Scores	Audits	Google
/drafts/saad/leadspace-test

[aem-code-sync[bot]]

Page	Scores	Audits	Google
/drafts/saad/leadspace-test

[sharathmrft]

Issues/observations

1.Card height and width are not matching as per the design 2.No correct spacing between Linkable cards and Related documents 3.'Related Documents' section needs to be included in the design 4.No designs available for tab and Mobile 5.Not able to test the latest Modified document whether it is fetching latest 3 or not from the SharePoint 6.Background color of the component is not rendering in the Test link. each card background color only displaying- as per the design

@sahmad-merative @proeung

[aem-code-sync[bot]]

Page	Scores	Audits	Google
/drafts/saad/leadspace-test