react-styleguidist/lib/rsg-components/ComponentsList/ComponentsListRenderer.js

React components style guide generator

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

import React from 'react';
import PropTypes from 'prop-types';
import cx from 'classnames';
import Link from 'rsg-components/Link';
import Styled from 'rsg-components/Styled';

var styles = function styles(_ref) {
	var color = _ref.color,
	    fontFamily = _ref.fontFamily,
	    fontSize = _ref.fontSize,
	    space = _ref.space,
	    mq = _ref.mq;
	return {
		list: {
			margin: 0,
			paddingLeft: space[2]
		},
		item: {
			color: color.base,
			display: 'block',
			margin: [[space[1], 0, space[1], 0]],
			fontFamily: fontFamily.base,
			fontSize: fontSize.base,
			listStyle: 'none',
			overflow: 'hidden',
			textOverflow: 'ellipsis'
		},
		isChild: _defineProperty({}, mq.small, {
			display: 'inline-block',
			margin: [[0, space[1], 0, 0]]
		}),
		heading: {
			color: color.base,
			marginTop: space[1],
			fontFamily: fontFamily.base,
			fontWeight: 'bold'
		}
	};
};

export function ComponentsListRenderer(_ref2) {
	var classes = _ref2.classes,
	    items = _ref2.items;

	items = items.filter(function (item) {
		return item.name;
	});

	if (!items.length) {
		return null;
	}

	return React.createElement(
		'ul',
		{ className: classes.list },
		items.map(function (_ref3) {
			var heading = _ref3.heading,
			    name = _ref3.name,
			    slug = _ref3.slug,
			    content = _ref3.content;
			return React.createElement(
				'li',
				{
					className: cx(classes.item, (!content || !content.props.items.length) && classes.isChild),
					key: name
				},
				React.createElement(
					Link,
					{ className: cx(heading && classes.heading), href: '#' + slug },
					name
				),
				content
			);
		})
	);
}

ComponentsListRenderer.propTypes = {
	items: PropTypes.array.isRequired,
	classes: PropTypes.object.isRequired
};

export default Styled(styles)(ComponentsListRenderer);