@dnanpm/styleguide/build/cjs/components/MainNavigation/ChildComponents/Ribbon.js

DNA Styleguide repository provides the set of components and theme object used in various DNA projects.

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var React = require('react');
var styledComponents = require('styled-components');
var theme = require('../../../themes/theme.js');
var navigation = require('../../../themes/themeComponents/navigation.js');
var styledUtils = require('../../../utils/styledUtils.js');
var Icon = require('../../Icon/Icon.js');

function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }

var React__default = /*#__PURE__*/_interopDefaultCompat(React);

const RibbonContainer = styledComponents.styled.div `
    display: none;
    ${styledUtils.media.md `
        background: ${theme.default.color.background.sand.E01};
        display: block;
    `};
`;
const RibbonItems = styledComponents.styled.div `
    max-width: 1290px;
    height: ${navigation.ribbonHeight};
    padding: 0 ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 2)};
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
`;
const RibbonColumn = styledComponents.styled.div `
    flex: 1 1 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    color: ${theme.default.color.text.gray};
    font-size: ${theme.default.fontSize.xs};
    border-right: 2px solid ${theme.default.color.line.L03};
    &:last-of-type {
        border: none;
    }

    span.dnasg-icon {
        margin-right: ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 0.5)};
    }

    a {
        display: flex;
        align-items: center;
        color: ${theme.default.color.text.gray};
        &:hover,
        &:focus,
        &:active {
            text-decoration: none;
            color: ${theme.default.color.text.pink};
            border: none;
            outline: none;
        }
        &:focus {
            text-decoration: underline;
        }
    }
`;
const Ribbon = ({ ribbonData, lang = 'fi' }) => (React__default.default.createElement(RibbonContainer, null,
    React__default.default.createElement(RibbonItems, null, ribbonData.map(ribbon => (React__default.default.createElement(RibbonColumn, { key: `ribbon-${ribbon.ribbonIcon}` },
        ribbon.ribbonLink[lang] && (React__default.default.createElement("a", { href: ribbon.ribbonLink[lang] },
            React__default.default.createElement(Icon.default, { name: ribbon.ribbonIcon, size: "1rem" }),
            React__default.default.createElement("span", null, ribbon.ribbonTexts[lang]))),
        !ribbon.ribbonLink[lang] && (React__default.default.createElement(React__default.default.Fragment, null,
            React__default.default.createElement(Icon.default, { name: ribbon.ribbonIcon, size: "1rem" }),
            React__default.default.createElement("span", null, ribbon.ribbonTexts[lang])))))))));

exports.default = Ribbon;