fix(card): ensure copy can render markdown

[IgnacioBecerra]

Related Ticket(s)

#7481

Description

This PR ensures that the copy elements in Card and Content Section can render markdown properly. The approach used in Card queries the slotted p tag and applies the markdown utility function. While a simpler method may be creating a card-copy component that extends DDSMarkdown, I refrained from doing so to avoid a breaking change for adopters using Card. Feel free to let me know what you think about doing that approach instead and simply mentioning it in the release notes.

Note:
Testing markdown in Storybook seems to only work once (i.e. inputting *test*, deleting it, and trying the same thing will result in the text being wrapped in asterisks without formatting.

However, if an adopter uses markdown in the copy of the Card component, it will render properly.

Changelog

Changed

• Card copy can now use markdown
• Content section copy now extends DDSMarkdown component

[ibmdotcom-bot]

Deploy preview created for package React:
https://ibmdotcom-react.s3.us-south.cloud-object-storage.appdomain.cloud/deploy-previews/7871/index.html

Built with commit: e1680836dc7391e62ac1f23e5702b9eeda5b78b8

[ibmdotcom-bot]

Deploy preview created for package Web Components HTML Test Application:
https://ibmdotcom-web-components-html-test-upstream.s3.us-east.cloud-object-storage.appdomain.cloud/deploy-previews/7871/index.html

Built with commit: e1680836dc7391e62ac1f23e5702b9eeda5b78b8

[ibmdotcom-bot]

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

Built with commit: e1680836dc7391e62ac1f23e5702b9eeda5b78b8

[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/7871/index.html

Built with commit: e1680836dc7391e62ac1f23e5702b9eeda5b78b8

[ibmdotcom-bot]

Deploy preview created for package NextJS Test Application:
https://ibmdotcom-nextjs-test-upstream.s3.us-east.cloud-object-storage.appdomain.cloud/deploy-previews/7871/index.html

Built with commit: e1680836dc7391e62ac1f23e5702b9eeda5b78b8

[ibmdotcom-bot]

Deploy preview created for package "Web Components (Codesandbox Examples)":
https://webcomponents-codesandbox.s3-web.us-east.cloud-object-storage.appdomain.cloud/deploy-previews/7871/index.html

Built with commit: e1680836dc7391e62ac1f23e5702b9eeda5b78b8

[ibmdotcom-bot]

Deploy preview created for package "React (Codesandbox Examples)":
https://react-codesandbox.s3-web.us-east.cloud-object-storage.appdomain.cloud/deploy-previews/7871/index.html

Built with commit: e1680836dc7391e62ac1f23e5702b9eeda5b78b8

[emyarod]

creating a card-copy component that extends DDSMarkdown

I think this would be fine given that the component was supposed to have this functionality already. Since the concern is around it being a breaking change it should be ok to make this update in v2

looks good to me, just needs a few CI test updates

[emyarod]

one thing I noticed, characters like # and & won't render properly in the card copy with the markdown parser

related #7469

should be comment

[IgnacioBecerra]

@emyarod I was able to get the # to render, but yeah the ampersand was getting removed. It seemed to have been getting stripped using the regex expression after the & became &amp when parsed through marked(), so I removed that part from the expression so it can remain there. Let me know if that part of the regex expression should actually remain.

[emyarod]

looks good to me! should we create a separate issue for the storybook rendering problems?

[jeffchew]

@IgnacioBecerra just double checking if the font size change in the link list was intentional here? or perhaps this is coming from an outdated baseline?

[IgnacioBecerra]

@jeffchew yeah that change isn't coming from this PR, the actual font size isn't changing with these changes

[jeffchew]

@IgnacioBecerra there seems to be something going on with the card group too, I don't see this on latest canary and double checked that it's happening on your fork:

[IgnacioBecerra]

@jeffchew Found out what was happening -- once there is a dds-content-block-copy in the page, the renderer function it uses to convert its text to <dds-content-block-paragraph overrides the default one in the markdownToHtml utility, which affects the rest of the components using it.

In other words, any use of the utility after using content-block-copy will always be wrapped with at <dds-content-block-paragraph, which includes the p tags in Card that we’re modifying in this PR. A way to circumvent the big text in the cards is to just remove the styles from the rendered content-block-paragraph element.

As mentioned in an earlier comment, creating a dds-card-copy component that extends ddd-markdown will solve the problem properly as it will have its own renderer, but since it will be a breaking change we could have this feature for v2 next year.

[jeffchew]

@IgnacioBecerra thank you for updating, the diffs look much better!

There's still a slight diff for this, wondering if we need a design eye to take a glance at this?

[jeffchew]

Thanks @IgnacioBecerra !