M3-5611: Update Selection Card story

[HanaXu]

Description

• Clean up, add some documentation, and convert the Selection Card story to MDX format
• Remove unused title prop from SelectionCard component

How to test

• yarn storybook
• Go to http://localhost:6006/?path=/docs/ui-elements-selection-card--selection-card

[bnussman]

Nice Job

One thing I'm seeing is that selecting Arch Linux or Debian results in no icon.

Also, I see the filename is SelectionCardNew.stories.mdx. Could the word New be removed?

[HanaXu]

@bnussman I'm not sure why the image icons aren't working, they weren't working in the old tsx file either 🤔 .

Edit: Created M3-5730 to address this

[DevDW]

From the controls, if you remove the subheadings, the story crashes:

which is understandable since subheadings are required, but do we want to allow for this?

Also, if you attempt to add subheadings back after removing the array, Storybook defaults it to an object. Is there a way to have it default to an array?

[HanaXu]

@DevDW Looks like Storybook is using a library for the JSON tree view (storybookjs/storybook#12824). It doesn't look like the root was deletable in this comment, but they were pulling code into the Controls addon directly. So, I'm not sure if there's much we can do on our side.

[tiffwong]

Added one optional comment but everything else looks good!