@os-design/website/lib/Footer/FooterNavigation.js

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const react_1 = __importDefault(require("react"));
const utils_1 = require("@os-design/utils");
const styled_1 = __importDefault(require("@os-design/styled"));
const core_1 = require("@emotion/core");
const resetUl_1 = __importDefault(require("../utils/resetUl"));
/**
 * Shows the navigation on large screens.
 */
const responsive = (p) => core_1.css `
  ${utils_1.m.md} {
    flex: 1;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: flex-start;
    
    max-height: ${p.maxHeight || '6em'};
    
    & > li {
      margin-right: 8em;
    }
  }
`;
const FooterNavigationContainer = styled_1.default('ul', utils_1.omitProps(['maxHeight'])) `
  grid-area: navigation;

  // Hides on small screens
  display: none;
  
  ${resetUl_1.default};
  ${responsive};
`;
const FooterNavigation = props => {
    const items = [];
    let index = 0;
    react_1.default.Children.forEach(props.children, child => {
        if (child) {
            items.push(react_1.default.createElement("li", { key: index }, child));
            index += 1;
        }
    });
    return (react_1.default.createElement(FooterNavigationContainer, { maxHeight: props.maxHeight }, items));
};
exports.default = FooterNavigation;
//# sourceMappingURL=FooterNavigation.js.map