Component/interact

packages/styleguide/package.json

@@ -51,7 +51,7 @@
   },
   "lint-staged": {
     "src/**/*.{js,jsx,json,css}": [
-      "prettier --single-quote --write",
+      "prettier --single-quote --trailing-comma --write",
       "git add"
     ]
   },

packages/styleguide/src/components/ColorPalette/ColorPalette.docs.mdx

@@ -48,4 +48,4 @@ Convey meaning through color. ColorPalette is intended to display one color hue
 
 ## Props
 
-<ComponentDocs title="<ColorPallete />" component={ColorPallete} />
+<ComponentDocs title="<ColorPallete />" component={ColorPallete} />

packages/styleguide/src/components/ComponentDocs/utils.js

@@ -120,7 +120,6 @@ function getType(type) {
 }
 
 function getPropsData(props = {}) {
-  console.log('props:', props);
   return Object.keys(props).reduce(
     (allProps, prop) => [
       ...allProps,

packages/styleguide/src/components/ComponentInfo/ComponentInfo.js

@@ -14,11 +14,11 @@ const propTypes = {
       /** Type label */
       label: string.isRequired,
       /** Array of values which will be displayed as InfoBadges */
-      values: array
+      values: array,
     })
   ).isRequired,
   /** Default map of available colors to types. Color must be defined in theme. */
-  typeToColorMap: BadgePropTypes.typeToColorMap
+  typeToColorMap: BadgePropTypes.typeToColorMap,
 };
 
 const ComponentInfo = ({ infoTypes, typeToColorMap, ...other }) => {
@@ -33,7 +33,7 @@ const ComponentInfo = ({ infoTypes, typeToColorMap, ...other }) => {
             typeToColorMap={typeToColorMap}
             {...other}
           />
-        </BarItem>
+        </BarItem>,
       ];
     }
 
@@ -58,6 +58,6 @@ const StyledComponentInfo = styled.div`
 `;
 
 ComponentInfo.propTypes = propTypes;
-ComponentInfo.defaultName = 'ComponentInfo';
+ComponentInfo.displayName = 'ComponentInfo';
 
 export default ComponentInfo;

packages/styleguide/src/components/Preview/CodeExample.js

@@ -11,14 +11,65 @@ import { renderToStaticMarkup } from 'react-dom/server';
 import Code from '../Code/';
 import Button from '../Button';
 
+/**
+ * Remove props that are undefined or null
+ * Don't show React.Fragment in code example
+ */
+const cleanUpCode = markup => {
+  const markupProps = markup.props || {};
+
+  return Object.keys(markupProps).reduce((acc, curr) => {
+    let currProp = markupProps[curr];
+
+    let newProp;
+    // clean up child code
+    if (curr === 'children' && typeof currProp !== 'string') {
+      newProp = React.Children.map(currProp, child => {
+        // hide fragments if containing just strings
+        const isFragmentString =
+          child.type === React.Fragment &&
+          child.props &&
+          typeof child.props.children === 'string';
+
+        return isFragmentString
+          ? child.props.children
+          : {
+              ...child,
+              props: cleanUpCode(child)
+            };
+      });
+    }
+
+    // hide undefined or null props
+    const isNotDefined = [undefined, null].indexOf(currProp) !== -1;
+    return {
+      ...acc,
+      ...(isNotDefined
+        ? {}
+        : {
+            [curr]: newProp || currProp
+          })
+    };
+  }, {});
+};
+
 const getJSXAsStringFromMarkup = (markup, options) => {
+  const { cleanProps, ...otherOptions } = options || {};
+
   const reactElementToJSXStringOptions = {
     showDefaultProps: false,
     showFunctions: true,
     functionValue: fn => fn.name,
-    ...options
+    ...otherOptions
   };
 
+  if (cleanProps) {
+    markup = {
+      ...markup,
+      props: cleanUpCode(markup)
+    };
+  }
+
   // valid element can be passed to reactElementToJSXString directly
   if (React.isValidElement(markup)) {
     return reactElementToJSXString(markup, reactElementToJSXStringOptions);