@fenderdigital/react-menu
Version:
Fender React UI Kit Menu Component
36 lines (35 loc) • 3.53 kB
JavaScript
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
return cooked;
};
import React from 'react';
import styled from 'styled-components';
import MenuIcon from './MenuIcon';
var MenuCTA = function (props) {
var arrow = props.arrow, className = props.className, isActive = props.isActive, isMobile = props.isMobile, icon = props.icon, id = props.id, isLink = props.isLink, label = props.label, onClick = props.onClick, target = props.target, url = props.url;
return (React.createElement("section", { className: "menu-cta " + className, "data-id": "menu-cta" }, isLink ? (React.createElement("a", { "data-id": "menu-cta-link-" + (isMobile ? "mobile-" + id : id), href: url, onClick: function () {
onClick('link', label, url);
}, target: target || '' },
React.createElement(MenuIcon, { icon: icon, id: id, isActive: isActive || false }),
React.createElement("span", { className: "menu-label" }, label))) : (React.createElement("button", { "data-id": "menu-cta-button-" + (isMobile ? "mobile-" + id : id), onClick: function () {
onClick('button', label, url);
}, type: "button" },
React.createElement(MenuIcon, { icon: icon, id: id, isActive: isActive || false }),
React.createElement("span", { className: "menu-label" }, label),
arrow ? (React.createElement("i", { className: "icon-" + (isActive ? 'triangle-up' : 'triangle-down') })) : null))));
};
var StyledMenuCTA = styled(MenuCTA)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n > a,\n button {\n display: flex;\n align-items: center;\n\n border-style: none;\n border-width: 0;\n padding-left: 1rem;\n padding-right: 1rem;\n padding-top: 0.5rem;\n padding-bottom: 0.5rem;\n width: 100%;\n\n font-family: 'FuturaPT-Heavy';\n text-decoration: none;\n color: ", ";\n\n background-color: transparent;\n cursor: pointer;\n outline: 0;\n transition: all 0.3s ease;\n\n &:hover {\n color: ", ";\n background-color: #fff;\n }\n\n /**\n * Menu Label\n */\n .menu-label {\n margin-top: ", ";\n flex: 1 1 auto;\n text-align: left;\n & + i {\n color: #888;\n margin-top: -6px;\n }\n }\n }\n"], ["\n > a,\n button {\n display: flex;\n align-items: center;\n\n border-style: none;\n border-width: 0;\n padding-left: 1rem;\n padding-right: 1rem;\n padding-top: 0.5rem;\n padding-bottom: 0.5rem;\n width: 100%;\n\n font-family: 'FuturaPT-Heavy';\n text-decoration: none;\n color: ", ";\n\n background-color: transparent;\n cursor: pointer;\n outline: 0;\n transition: all 0.3s ease;\n\n &:hover {\n color: ", ";\n background-color: #fff;\n }\n\n /**\n * Menu Label\n */\n .menu-label {\n margin-top: ", ";\n flex: 1 1 auto;\n text-align: left;\n & + i {\n color: #888;\n margin-top: -6px;\n }\n }\n }\n"])), function (_a) {
var isActive = _a.isActive;
return (isActive ? '#d52b1e' : '#888');
}, function (_a) {
var isActive = _a.isActive;
return (isActive ? '#d52b1e' : '#000');
}, function (_a) {
var id = _a.id;
return (id === 'favorite' ? '5px' : '');
});
StyledMenuCTA.defaultProps = {
className: '',
};
export default StyledMenuCTA;
var templateObject_1;