catalog
catalog copied to clipboard
CodeSpecimen component expects only string children
It looks like <CodeSpecimen /> is expecting children to only be a string. If you end up with multiple children (easily done if you're escaping special characters etc) then it gets passed an array and throws console errors. Also the lang prop wouldn't work as long as I had array children (it rendered fine though).
For example:
<CodeSpecimen>
import {"{"} Button {"}"} from 'components/button';
</CodeSpecimen>
results in
Warning: Failed prop type: Invalid prop `children` of type `array` supplied to `Code`, expected `string`.
and
Warning: Failed prop type: Invalid prop `code` of type `array` supplied to `HighlightedCode`, expected `string`.
I've worked around this for now by ensuring everything ends up as a single string:
<CodeSpecimen lang="javascript">
{"import { Button } from '@ticketmaster/mosaic';"}
</CodeSpecimen>
I assume that <HighlightedCode /> needs a string to pass to Prism, but could we allow strings and arrays in <CodeSpecimen />'s prop types and then ensure arrays get turned back into strings before they reach Prism?
Happy to try a PR if you're open to it.