[CTA]: Expose dds-link-list-item-cta and dds-link-list-item-card-cta in the SB variant preview

[proeung]

The problem

• Currently within the CTA component there are variants/previews accounted for the following CTA components (see below)
  • Text
  • Button
  • Card
  • Card Link
  • Feature
• However, there are no variants/previews constructed for Link list item card CTA and Link list item CTA despite the existence of these components.
  • https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/main/packages/web-components/src/components/cta/link-list-item-card-cta.ts
  • https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/main/packages/web-components/src/components/cta/link-list-item-cta.ts

The solution

• I think it's important that we highlight these CTA components in the Storybook environment so that adopters like AEM can see how it's being used as we need to be able to define the CTA type within the CMS.
• Adjust the SB stories of the CTA component to account for the following components.
  • Link list item card CTA
  • Link list item CTA

Application/website

AEM

Business priority

Low Priority = release date is not dependent on fix or not upcoming

What time frame would this ideally be needed by (if applicable)

No response

Examples

No response

Code of Conduct

• [X] I agree to follow this project's Code of Conduct
• [X] I checked the current issues for duplicate issues

[proeung]

@RichKummer I'd love to get your opinion on this improvement request from a design perspective.

cc: @ariellalgilmore

[kennylam]

@proeung Those two components you mentioned simply extend features already provided by CTA. I don't believe there is an instance for them to ever be used on their own - they are more internal components. For instance:

• dds-link-list-item-cta is used only as a CTA for content you can see in content-block-horizontal.
• dds-link-list-item-card-cta is only ever used as an aside element in content-block-* components.

I do agree that the naming of them is a bit confusing. We could probably rename these, or at least mention them and their intended usage in documentation to avoid any confusion. But in any case, showcasing them in Storybook would probably only add to the confusion since they are not intended to be used in the same manner as the other CTA variations (and that may be changing too, we're in the process of auditing how these components are going to be offered).

[proeung]

@kennylam I think the confusion is largely due to the fact that the existing Link List component preview and docs don't have a reference to dds-link-list-item-cta. Just a bit of context, AEM is adopting the CTA component in order to leverage the CTA type that automatically renders the icon based on the selection made by the Content Editors are building.

For instance, they're assembling a layout where there's a <dds-card-cta> on top and <dds-link-list> below (see attached). Overall, I think this issue opens up a discussion that's long overdue about the usage of the regular <dds-card-footer> vs one with CTA ability and how to best document these features for adopters. Happy to jump on a call and provide detail on what we're seeing and how to best clean up the SB docs to make it clear to folks.

https://codesandbox.io/s/sad-euler-vowt9f?file=/index.html

[stale[bot]]

We've marked this issue as stale because there hasn't been any activity for 60 days. If there's no further activity on this issue in the next three days then we'll close it. You can keep the conversation going with just a short comment. Thanks for your contributions.