Create mapped components for each supported RMDX component

[jharvey10]

This is the work to make the existing mdx-components work with the new RMDX AST and be renderable as part of the <RmdxNode> component.

This means doing the following things:

mdx-components

• Removing usages of ...rest or other arbitrary props spreading in each of the mdx-components
  • instances of [otherProp: string]: unknown should be removed. All props must be explicitly defined
• Removing the ability to specify a custom className in each mdx-component
• Removing any non-scalar props which depend on user input
  • If you can specify it in MDX and it's a non-scalar prop, it needs to be removed
  • This only applies to "public" components (i.e. if a component renders another (private) component, it doesn't need non-scalar props removed
• Any mdx-component that is not a "leaf" (i.e. it renders non-scalar stuff received via props) should receive children and render it someplace within their component

good:

const SomeMdxComponent = ({ children }) => {
  return <strong>{children}</strong>
}

bad:

const SomeMdxComponent = ({ title, component }) => {
  return <>
    <h1>{title}</h1>
    <Caption>{component}</Caption>
  </>
}

good:

const SomeMdxComponent = ({ children, title, children }) => {
  return <>
    <h1>{title}</h1>
    <Caption>{children}</Caption>
  </>
}

We will "work backwards" having the components dictate the props that they need, and making those available in the AST whenever possible.

web-app

• "import" all of the mdx-components, and mapping each of them to as AST nodeType
• for markdown components, map between what we see in the AST and a markdown component.
  • For example: "bold" text (**it's bold**) comes through as { nodeType: 'strong', value: "it's bold"}. So the mapping would be from nodeType: 'strong' to <strong>

More comprehensive example:

const theMapper = {
  strong: ({ children }) => {
    return <strong>{children}</strong>
  },
}

List of components:

• [x] Accordion
• [x] AnchorLink --> children prop ask joe
• [x] AnchorLinks -> children prop ask joe
• [x] ArtDirection 🐳
• [x] ArticleCard 🐢 🐳
• [x] Aside -> test when grid is fixed <- ask @jdharvey-ibm , being wrapped around a paragraph
• [x] Caption
• [x] CardGroup 🐳
• [x] Code 🐳
• [x] Divider
• [x] DoDont
• [x] DoDontRow
• [x] GifPlayer 🐳
• [x] Column -> test when number props are fixed <- ask @jdharvey-ibm about col object with span
• [x] Grid
• [x] Row
• [x] ImageWrapper 🐳
• [x] InlineNotification
• [x] Link --> ask @jdharvey-ibm about renderIcon prop
• [x] Blockquote
• [x] H1
• [x] H2
• [x] H3
• [x] H4
• [x] H5
• [x] H6
• [x] LI 🐳
• [x] OL 🐳
• [x] P
• [x] UL 🐳
• [x] MiniCard 🐳
• [x] PageDescription
• [x] PageTable -> ask @jdharvey-ibm about problem with children
• [x] Preview
• [x] ResourceCard 🐳 -> ask @jdharvey-ibm about component prop
• [x] StorybookDemo
• [x] Tab
• [x] Tabs
• [x] Title
• [x] Video 🐳
• [x] Image

Carbon components

• export { AccordionItem, Button, Layer } from '@carbon/react' -- no further action needed

TODO:

• [x] PageTable mapper <- need tHead and tBody

• [x] Remove Component prop from ResourceCard, Make Web-App ResourceCard with Component

• [x] Kill renderIcon prop on Link , make customLinks instead DownloadLink, ArrowRightLink (find what icons are being used in carbon-website and carbon-plaftorm and make wrappers for those too. <-- removed prop since there doesn't seem to be any instance of usage of this

• [x] Kill renderIcon prop on Button , make customLinks instead DownloadButton, ArrowRightButton (find what icons are being used in carbon-website and carbon-plaftorm and make wrappers for those too. <- we will need to make a Button mapper for this

• [ ] Fix web-app broken styling due to removed props: - If possible: > Switch to lowercase and override styles - else: > custom “duplicate” component

• [x] Column:

  • spanPropType: services/web-app/pages/elements/2x-grid/implementation.mdx

• [ ] Grid: 🐳

  • className: services/web-app/pages/about-carbon/meetups.mdx -- done
  • className: services/web-app/pages/about-carbon/releases.mdx -- turned into js page
  • className: services/web-app/pages/data-visualization/color-palettes.mdx -- done
  • className: services/web-app/pages/elements/color/overview.mdx -- ⚠️ tabs do not work <- turn into js page 🐳
  • className: services/web-app/pages/libraries/[host]/[org]/[repo]/[library]/[ref]/index.js <- imported from carbon, doesn't matter
  • className: services/web-app/pages/libraries/[host]/[org]/[repo]/[library]/[ref]/assets/index.js <- imported from carbon, doesn't matter
  • className: services/web-app/pages/libraries/[host]/[org]/[repo]/[library]/[ref]/assets/index.js <- imported from carbon, doesn't matter

• [ ] Row: <- * Substitute row className=“resource-card-group” with card group

  • carbon-website, <Row className="resource-card-group"> (a buuuunch of places)
  • carbon-website, <Row className="meetups-list"> src/pages/whats-happening/meetups/index.mdx
  • carbon-website, <Row className={dividedSection}> src/pages/all-about-carbon/partners.mdx

• [x] H1:

  • className, headingClassName: services/web-app/components/mdx-page/errors/full-page-error/full-page-error.js
  • className, headingClassName: services/web-app/components/page-not-found/page-not-found.js

• [x] H2:

  • className, headingClassName: services/web-app/components/catalog-list/catalog-list.js
  • className, headingClassName: services/web-app/components/glossary/glossary-list/glossary-list.js
  • className: services/web-app/components/svg-libraries/icon-library/icon-category.js
  • headingClassName: services/web-app/pages/libraries/[host]/[org]/[repo]/[library]/[ref]/assets/index.js

• [x] H3:

  • className, headingClassName: services/web-app/pages/about-carbon/platform-roadmap.js
  • className, headingClassName: services/web-app/pages/libraries/[host]/[org]/[repo]/[library]/[ref]/assets/index.js

• [x] H4: 🐳

  • className: services/web-app/components/glossary/glossary-list/glossary-list.js
  • headingClassName: services/web-app/components/typeset-style/typeset-style.js

• [x] P:

  • className: services/web-app/pages/index.js x2

• [x] PageDescription:

  • className: services/web-app/pages/libraries/index.js
  • className: services/web-app/pages/libraries/[host]/[org]/[repo]/[library]/[ref]/index.js

• [x] Preview: <- it just won’t come through, no action needed

  • carbon-website, className: src/pages/developing/react-tutorial/step-2.mdx

• [x] ResourceCard: <- won't come through, no action needed

  • onClick: services/web-app/pages/designing/adobe-xd.mdx x4
  • onClick: services/web-app/pages/designing/sketch.mdx x4
  • carbon-website, onClick: src/pages/designing/kits/adobe-xd.mdx x4
  • carbon-website, onClick: src/pages/designing/kits/figma.mdx x18
  • carbon-website, onClick: src/pages/designing/kits/sketch.mdx x4

• [ ] StorybookDemo: <- just need to merge https://github.com/carbon-design-system/carbon/pull/12807

  • carbon: 54 instances need to be refactored to use <Variant /> 🐳

• [ ] Button: - replace onClick with href and test: <Button kind="tertiary" renderIcon={ArrowRight} onClick={() => (window.location.href = 'mailto:[email protected]')} >

Unanswered:

• [ ] how will people know to add active and label to Tab? <- need to double check on this

• [x] Video aria-label <- added prop

• [ ] Do we need a SB story for button <- yes

• [x] Outstanding TODOASKJOE (6)

• [ ] Local mdx pageTables