message: feat(api): render properties
diff: export default (props) => {
  const { document, history } = props;
  + const headings = [...document.headings];
  const usage = renderUsage(document.usage);
  + const properties = renderProperties(document.props);
  const customProps = renderCustomProps(document.styles);
  - const headings = [...document.headings];
  if (usage) {
  headings.push({
  @@ -11,6 +12,13 @@ export default (props) => {
  });
  }
  + if (properties) {
  + headings.push({
  + text: 'Properties',
  + href: '#properties'
  + });
  + }
  +
  if (customProps) {
  headings.push({
  text: 'CSS Custom Properties',
  @@ -24,6 +32,7 @@ export default (props) => {
  <docs-table-of-contents links={headings} basepath={history.location.pathname}/>
  <div class="markdown-content" innerHTML={document.body}/>
  { usage }
  + { properties }
  { customProps }
  </main>
  );
  @@ -46,6 +55,26 @@ const renderUsage = (usage) => {
  );
  };
  +const renderProperties = (properties) => {
  + if (!properties.length) {
  + return null;
  + }
  +
  + return (
  + <section>
  + <h2 id="properties">Properties</h2>
  + <docs-reference
  + data={properties}
  + keys={{
  + Head: prop => prop.name,
  + Description: prop => <div innerHTML={prop.docs}/>,
  + Attribute: prop => <code>{ prop.attr }</code>,
  + Type: prop => <code>{ prop.type }</code>
  + }}/>
  + </section>
  + );
  +};
  +
  const renderCustomProps = (customProps) => {
  if (!customProps.length) {
  return null;
  