React

by cvalleskey

HTML

<div id="app"></div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: -apple-system;
  color: #;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

.text-styles {
  
}

React

function TextStylesList(props) {
  const textStyles = props.textStyles;
  const listItems = textStyles.map((textStyle) =>
    <li><span className="name">{textStyle.name}</span>
    <span className="font">{textStyle.font}</span>
    <span className="font-weight">{textStyle.fontWeight}</span>
    <span className="font-size-min">{textStyle.fontSize.min}</span>
    <span className="font-size-max">{textStyle.fontSize.max}</span>
    <span className="font-weight">{textStyle.fontWeight}</span>
    <span className="line-height">{textStyle.fontSize.lineHeight}</span>
    <span className="paragraphSpacing">{textStyle.paragraphSpacing}</span>
    </li>
  );
  return (
    <ul className="text-styles">{listItems}</ul>
  );
}

const textStyles = [
{
	name: "Title",
  font: "Abril Fatface",
  fontSize: { min: 33, max: 66 },
  fontWeight: 7,
  lineHeight: 1.125,
  parapgraphSpacing: 0.25
},
{
	name: "Body",
  font: "Avenir Next",
  fontSize: { min: 16, max: 22 },
  fontWeight: 5,
  lineHeight: 1.5,
  parapgraphSpacing: 0.5
}
];
ReactDOM.render(
  <TextStylesList textStyles={textStyles} />,
  document.getElementById('app')
);