<!-- Default -->
<div>
    <h3 class="font-HNM5-s font-HNM4-m margin-top-s0 margin-bottom-s1">Curabitur quis</h3>
    <p class="plain-text font-HNL5-s font-HNL4-m margin-bottom-s2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur quis mollis turpis, eu facilisis ex. Vivamus sollicitudin pulvinar arcu sagittis posuere. Fusce a congue mauris. Vestibulum faucibus vel nibh ut commodo.</p>
    <ul class="plain-list margin-bottom-s2 margin-top-s0 margin-left-s0 margin-right-s0 padding-top-s0 padding-left-s0 padding-right-s0"></ul>
    <hr class="divider divider--pumice divider--keyline margin-top-s1 margin-bottom-s1" />
</div>

<!-- Links -->
<div>
    <h3 class="font-HNM5-s font-HNM4-m margin-top-s0 margin-bottom-s1">Curabitur quis</h3>
    <ul class="plain-list margin-bottom-s2 margin-top-s0 margin-left-s0 margin-right-s0 padding-top-s0 padding-left-s0 padding-right-s0">
        <li class="inline"><a class="plain-link font-green font-hover-turquoise font-HNM5-s font-HNM4-m" href="#">Warlock</a>,</li>
        <li class="inline"><a class="plain-link font-green font-hover-turquoise font-HNM5-s font-HNM4-m" href="#">Witch</a>,</li>
        <li class="inline"><a class="plain-link font-green font-hover-turquoise font-HNM5-s font-HNM4-m" href="#">Gallows</a>
        </li>
    </ul>
    <hr class="divider divider--pumice divider--keyline margin-top-s1 margin-bottom-s1" />
</div>

<!-- Multiple Paragraphs -->
<div>
    <h3 class="font-HNM5-s font-HNM4-m margin-top-s0 margin-bottom-s1">Curabitur quis</h3>
    <p class="plain-text font-HNL5-s font-HNL4-m margin-bottom-s2">Fusce a congue mauris. Vestibulum faucibus vel nibh ut commodo.</p>
    <p class="plain-text font-HNL5-s font-HNL4-m margin-bottom-s2">Curabitur quis mollis turpis, eu facilisis ex.</p>
    <p class="plain-text font-HNL5-s font-HNL4-m margin-bottom-s2">Vivamus sollicitudin pulvinar arcu sagittis posuere. Fusce a congue mauris.</p>
    <ul class="plain-list margin-bottom-s2 margin-top-s0 margin-left-s0 margin-right-s0 padding-top-s0 padding-left-s0 padding-right-s0"></ul>
    <hr class="divider divider--pumice divider--keyline margin-top-s1 margin-bottom-s1" />
</div>

// @flow
import NextLink from 'next/link';
import {spacing, font} from '../../../utils/classnames';
import Divider from '../Divider/Divider';
import type {Link} from '../../../model/link';
import type {MetaUnitProps} from '../../../model/meta-unit';

function renderHeading(headingLevel, headingText) {
  const classes = `${font({s: 'HNM5', m: 'HNM4'})} ${spacing({s: 0}, {margin: ['top']})} ${spacing({s: 1}, {margin: ['bottom']})}`;
  switch (headingLevel) {
    case 1:
      return (<h1 className={classes}>{headingText}</h1>);
    case 2:
      return (<h2 className={classes}>{headingText}</h2>);
    case 3:
      return (<h3 className={classes}>{headingText}</h3>);
    case 4:
      return (<h4 className={classes}>{headingText}</h4>);
    case 5:
      return (<h5 className={classes}>{headingText}</h5>);
    case 6:
      return (<h6 className={classes}>{headingText}</h6>);
    default:
      return (<h2 className={classes}>{headingText}</h2>);
  }
}

function renderParagraphs(text: Array<string>) {
  if (text) {
    return text.map((para, i) => {
      return <p key={i} className={`plain-text ${font({s: 'HNL5', m: 'HNL4'})} ${spacing({s: 2}, {margin: ['bottom']})}`} dangerouslySetInnerHTML={{__html: para}} />;
    });
  }
}

function renderLinksList(links: Array<Link>) {
  if (links) {
    const listItems = links.map((link, i, arr) =>
      <li key={i} className='inline'>
        <NextLink href={link.url}>
          <a className={`plain-link font-green font-hover-turquoise ${font({s: 'HNM5', m: 'HNM4'})}`}>
            {link.text}
          </a>
        </NextLink>
        {arr.length - 1 !== i && ', '}
      </li>
    );
    return (
      <ul className={`plain-list ${spacing({s: 2}, {margin: ['bottom']})} ${spacing({s: 0}, {margin: ['top', 'left', 'right'], padding: ['top', 'left', 'right']})}`}>
        {listItems}
      </ul>
    );
  }
}

const MetaUnit = ({headingLevel, headingText, text = [], links = [], includeDivider}: MetaUnitProps) => {
  return (
    <div>
      {renderHeading(headingLevel, headingText)}
      {renderParagraphs(text)}
      {renderLinksList(links)}
      {includeDivider &&
      <Divider extraClasses = {`divider--pumice divider--keyline ${spacing({s: 1}, {margin: ['top', 'bottom']})}`} />}
    </div>
  );
};

export default MetaUnit;
/* Default */
{
  "headingLevel": 3,
  "headingText": "Curabitur quis",
  "text": [
    "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur quis mollis turpis, eu facilisis ex. Vivamus sollicitudin pulvinar arcu sagittis posuere. Fusce a congue mauris. Vestibulum faucibus vel nibh ut commodo."
  ],
  "includeDivider": true
}

/* Links */
{
  "headingLevel": 3,
  "headingText": "Curabitur quis",
  "text": [],
  "includeDivider": true,
  "links": [
    {
      "text": "Warlock",
      "url": "#"
    },
    {
      "text": "Witch",
      "url": "#"
    },
    {
      "text": "Gallows",
      "url": "#"
    }
  ]
}

/* Multiple Paragraphs */
{
  "headingLevel": 3,
  "headingText": "Curabitur quis",
  "text": [
    "Fusce a congue mauris. Vestibulum faucibus vel nibh ut commodo.",
    "Curabitur quis mollis turpis, eu facilisis ex.",
    "Vivamus sollicitudin pulvinar arcu sagittis posuere. Fusce a congue mauris."
  ],
  "includeDivider": true
}

There are no notes for this item.