Add ability to parse line breaks into <br/> for Docgen description in…

… info addon

addons/info/src/components/PropTable.js

@@ -82,6 +82,22 @@ const propsFromPropTypes = type => {
   return props;
 };
 
+export const multiLineText = text => {
+  if (!text) return '';
+  const arrayOfText = text.replace(/\r?\n|\r/g, '--newline--').split('--newline--');
+  const singleLine = arrayOfText.length < 2;
+  return singleLine
+    ? text
+    : arrayOfText.map((
+        lineOfText,
+        i // note: lineOfText is the closest we will get to a unique key
+      ) => (
+        <span key={lineOfText}>
+          {i > 0 && <br />} {lineOfText}
+        </span>
+      ));
+};
+
 export default function PropTable(props) {
   const { type, maxPropObjectKeys, maxPropArrayLength, maxPropStringLength } = props;
 
@@ -130,7 +146,7 @@ export default function PropTable(props) {
                 <PropVal val={row.defaultValue} {...propValProps} />
               )}
             </Td>
-            <Td bordered>{row.description}</Td>
+            <Td bordered>{multiLineText(row.description)}</Td>
           </tr>
         ))}
       </tbody>

addons/info/src/components/PropTable.test.js

@@ -0,0 +1,32 @@
+// import { shallow } from 'enzyme';
+import renderer from 'react-test-renderer';
+
+import { multiLineText } from './PropTable';
+
+describe('PropTable', () => {
+  describe('multiLineText', () => {
+    const singleLine = 'Foo bar baz';
+    const unixMultiLineText = 'foo \n bar \n baz';
+    const windowsMultiLineText = 'foo \r bar \r baz';
+
+    it('should return a blank string for a null input', () => {
+      expect(multiLineText(null)).toBe('');
+    });
+    it('should return a blank string for an undefined input', () => {
+      expect(multiLineText(undefined)).toBe('');
+    });
+    it('should return its input for a single line of text', () => {
+      expect(multiLineText(singleLine)).toBe(singleLine);
+    });
+    it('should return an array for unix multiline text', () => {
+      expect(multiLineText(unixMultiLineText)).toHaveLength(3);
+    });
+    it('should return an array for windows multiline text', () => {
+      expect(multiLineText(windowsMultiLineText)).toHaveLength(3);
+    });
+    it('should have 2 br tags for 3 lines of text', () => {
+      const tree = renderer.create(multiLineText(unixMultiLineText)).toJSON();
+      expect(tree).toMatchSnapshot();
+    });
+  });
+});

addons/info/src/components/__snapshots__/PropTable.test.js.snap

@@ -0,0 +1,20 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`PropTable multiLineText should have 2 br tags for 3 lines of text 1`] = `
+Array [
+  <span>
+     
+    foo 
+</span>,
+  <span>
+    <br />
+     
+     bar 
+</span>,
+  <span>
+    <br />
+     
+     baz
+</span>,
+]
+`;

examples/cra-kitchen-sink/src/components/DocgenButton.js

@@ -62,7 +62,9 @@ DocgenButton.propTypes = {
   obj: PropTypes.object, // eslint-disable-line react/forbid-prop-types
 
   /**
-   * propType for shape with nested arraytOf
+   * propType for shape with nested arrayOf
+   *
+   * Also, multi-line description
    */
   shape: PropTypes.shape({
     /**