Use the Do/Dont components in /design/colors and remove custom card s…

[yurm04]

WHY are these changes introduced?

Swap out the custom do/dont for the new DoDont components with the updated styling

WHAT is this pull request doing?

Broken

After

How to 🎩

🖥 Local development instructions
🗒 General tophatting guidelines
📄 Changelog guidelines

Copy-paste this code in playground/Playground.tsx:

import React from 'react';
import {Page} from '../src';

export function Playground() {
  return (
    <Page title="Playground">
      {/* Add the code you want to test in here */}
    </Page>
  );
}

🎩 checklist

• Tested on mobile
• Tested on multiple browsers
• Tested for accessibility
• Updated the component's README.md with documentation changes
• Tophatted documentation changes in the style guide

[yurm04]

pulling out the image from the childrens array

[gwyneplaine]

@yurm04 While I appreciate the impetus for this change, automatically making the latest image in children the feature image seems like something that might cause indirection and unintended bugs in the future.

Is there a reason we can't just explicitly passing the image and alt text to the Do / Don't component as props instead (since we're leaning on MDX anyways)

[gwyneplaine]

@yurm04 While I appreciate the impetus for this change, automatically making the latest image in children the feature image seems like something that might cause indirection and unintended bugs in the future.

Is there a reason we can't just explicitly passing the image and alt text to the Do / Don't component as props instead (since we're leaning on MDX anyways)

[yurm04]

@gwyneplaine the old and current DoDonts are authored by nesting markdown (pre-react) and this was a request that came up while writing the gen3 design guidance cc @tjonx. I do personally prefer keeping content writing in markdown as much as possible since I think that's more accessible for the greatest amount of people. Not a strongly held opinion at this point, but i do worry that we're muddying up the authoring experience quite a bit with the amount of react we're introducing in the markdown files

I agree that there is the potential for bugs here. If you're open to keeping this behavior I would totally be down to pair on some more safeguards that can help mitigate the risk for bugs

[tjonx]

We're going to be much more stricter about how we write directives. ie: No more directives with images within their text. It's always going to either be a text-only directive (no image), or an image followed by the directive. In this case, @yurm04 's solution fits our needs!

I would say sure, it might cause bugs, but that will be intended if folks are not writing directives properly in the future.

And to @yurm04 's point, keeping everything in markdown format makes things easier to implement. It would be weird to switch to props from markdown midway in the markdown file for images, IMO.

[yurm04]

@gwyneplaine for the sake of time and unblocking content writing we're going to merge in this implementation. I'll create a ticket to re-visit this discussion post v12 launch once we have the time and breathing room to come up with solid opinions informed by @tjonx's comment above