feat(content-group): v2 style updates

[sangeethababu9223]

Related Ticket(s)

Closes #10753

Description

Style issues with Content Group Component in V2

Changelog

Changed

• Used Card Component instead of CTA Link
• Style updated to match the latest

[ibmdotcom-bot]

Deploy preview created for package Carbon Web Components:
https://carbon-web-components.s3.us-east.cloud-object-storage.appdomain.cloud/deploy-previews/11007/index.html

Built with commit: 6a824fa5b862afa209b9af845785349c5deaf362

[ibmdotcom-bot]

Deploy preview created for package Web Components:
https://ibmdotcom-webcomponents.s3.us-east.cloud-object-storage.appdomain.cloud/deploy-previews/11007/index.html

Built with commit: 6a824fa5b862afa209b9af845785349c5deaf362

[ibmdotcom-bot]

Deploy preview created for package Web Components (React wrapper):
https://ibmdotcom-web-components-react.s3-web.us-east.cloud-object-storage.appdomain.cloud/deploy-previews/11007/index.html

Built with commit: 6a824fa5b862afa209b9af845785349c5deaf362

[kennylam]

LGTM!

[oliviaflory]

Thanks @sangeethababu9223 !

There seems to be a slight difference between the v1 and v2 examples when I add the children elements. In v2 the content items extend beyond the width of the content group, this might have more to do with the content item than the content group? But I am not quite sure. I know @kennylam is still working on the content item

We do want the content group to be able to accept 8 or 12 column children, similar the content section updates, so I am OK with merging this AS-IS for now and returning to it once we have more of the content components figured out.

V1

V2

V1

V2

[RichKummer]

Hey @sangeethababu9223 , two other things to add to Olivia's comment above:

1. When nesting content items into content group, the top and bottom margins should merge together. But right now, it looks like the spacing values stack instead. @kennylam and @IgnacioBecerra were solving a similar problem recently, so they may have some insight.

You can see in the following screenshots that the margin spacing is stacking rather than merging together:

2. The last update is that the last nested piece of content inside content group should automatically remove the bottom spacing (or merge it) so that there is 48px spacing between the bottom of the last item and the CTA.

You can see in the following screenshot that the spacing stacks, creating more space at the end than intended.

[sangeethababu9223]

Hey @RichKummer ,
I'ver fixed the margin collapse issue and the extra spacing before the CTA. Please check.

@oliviaflory,
Width difference in certain sections for V1 & V2 versions seems to be fixed with the update in content Item style. Please let me know if there is any issues.

[oliviaflory]

This looks great, thanks @sangeethababu9223 !