@retailmenot/anchor
Version:
A React UI Library by RetailMeNot
189 lines (156 loc) • 6.42 kB
JavaScript
;
Object.defineProperty(exports, '__esModule', { value: true });
function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
var __chunk_1 = require('./anchor-chunk-24f232e7.js');
var __chunk_2 = require('./anchor-chunk-9d9a5df6.js');
var __chunk_9 = require('./anchor-chunk-f296150d.js');
var polished = require('polished');
var React = require('react');
var classNames = _interopDefault(require('classnames'));
var styled = require('@xstyled/styled-components');
var styled__default = _interopDefault(styled);
var system = require('@xstyled/system');
function _templateObject7() {
var data = __chunk_1._taggedTemplateLiteral(["\n display: flex;\n width: 100%;\n ", ";\n min-width: 15.625rem;\n margin: 0;\n padding: 0;\n\n ", ";\n font-size: 0.875rem;\n font-family: base;\n border-radius: base;\n\n .anchor-menu-item {\n line-height: 1.125rem;\n ", ";\n transition: background-color 250ms, color 250ms;\n margin: 0 0.125rem;\n\n &:hover {\n ", ";\n background-color: rgba(255, 255, 255, 0.1);\n }\n\n &:active,\n &.active {\n ", ";\n background-color: rgba(\n 255,\n 255,\n 255,\n 0.1\n ); // TODO: more or less opacity\n }\n\n &:focus {\n background-color: rgba(255, 255, 255, 0.1);\n }\n\n &:first-of-type {\n margin-left: 0;\n }\n &:last-of-type {\n margin-right: 0;\n }\n\n ", ";\n }\n\n /* Positioning */\n ", ";\n\n /* Menu Sizes */\n ", ";\n"]);
_templateObject7 = function _templateObject7() {
return data;
};
return data;
}
function _templateObject6() {
var data = __chunk_1._taggedTemplateLiteral(["\n border-radius: base;\n font-weight: 600;\n padding: 1.5rem 1.25rem;\n "]);
_templateObject6 = function _templateObject6() {
return data;
};
return data;
}
function _templateObject5() {
var data = __chunk_1._taggedTemplateLiteral([""]);
_templateObject5 = function _templateObject5() {
return data;
};
return data;
}
function _templateObject4() {
var data = __chunk_1._taggedTemplateLiteral(["\n border-radius: base;\n font-weight: 600;\n padding: 1rem 0.75rem;\n "]);
_templateObject4 = function _templateObject4() {
return data;
};
return data;
}
function _templateObject3() {
var data = __chunk_1._taggedTemplateLiteral([""]);
_templateObject3 = function _templateObject3() {
return data;
};
return data;
}
function _templateObject2() {
var data = __chunk_1._taggedTemplateLiteral(["\n font-size: 0.75rem;\n line-height: 0.75rem;\n font-weight: 500;\n padding: 0.5rem 0.75rem;\n "]);
_templateObject2 = function _templateObject2() {
return data;
};
return data;
}
function _templateObject() {
var data = __chunk_1._taggedTemplateLiteral([""]);
_templateObject = function _templateObject() {
return data;
};
return data;
}
var MenuSizes;
(function (MenuSizes) {
MenuSizes["sm"] = "sm";
MenuSizes["md"] = "md";
MenuSizes["lg"] = "lg";
})(MenuSizes || (MenuSizes = {}));
var MenuSizeStyles = {
sm: {
menu: styled.css(_templateObject()),
items: styled.css(_templateObject2())
},
md: {
menu: styled.css(_templateObject3()),
items: styled.css(_templateObject4())
},
lg: {
menu: styled.css(_templateObject5()),
items: styled.css(_templateObject6())
}
};
var sizeVariant = system.variant({
key: 'menu.sizes',
prop: 'size',
"default": 'md',
variants: MenuSizeStyles
});
var StyledMenu = styled__default('nav')(_templateObject7(), system.space, function (_ref) {
var _ref$background = _ref.background,
background = _ref$background === void 0 ? 'primary.base' : _ref$background;
return styled.css({
background: system.th.color(background)
});
}, function (_ref2) {
var _ref2$color = _ref2.color,
color = _ref2$color === void 0 ? 'white' : _ref2$color;
return styled.css({
color: color
});
}, function (_ref3) {
var color = _ref3.color;
return styled.css({
color: color ? polished.lighten(0.2, color) : 'white'
});
}, function (_ref4) {
var color = _ref4.color;
return styled.css({
color: color ? polished.lighten(0.2, color) : 'white'
});
}, function (props) {
return __chunk_9.get(sizeVariant(props), 'items');
}, function (_ref5) {
var _ref5$justify = _ref5.justify,
justify = _ref5$justify === void 0 ? 'flex-start' : _ref5$justify;
return styled.css({
justifyContent: justify
});
}, function (props) {
return __chunk_9.get(sizeVariant(props), 'menu');
});
var Menu = function Menu(_a) {
var className = _a.className,
children = _a.children,
_a$size = _a.size,
size = _a$size === void 0 ? 'md' : _a$size,
props = __chunk_2.__rest(_a, ["className", "children", "size"]);
return React.createElement(StyledMenu, Object.assign({
size: size,
className: classNames('anchor-menu', className)
}, props), children);
};
function _templateObject$1() {
var data = __chunk_1._taggedTemplateLiteral(["\n display: inline-flex;\n justify-content: center;\n align-items: center;\n cursor: pointer;\n text-align: center;\n font-family: base;\n color: text.base;\n text-decoration: none;\n transition: color 250ms;\n\n // Disable Select\n user-select: none;\n -webkit-touch-callout: none;\n ", "\n"]);
_templateObject$1 = function _templateObject() {
return data;
};
return data;
}
var StyledItem = styled__default('a')(_templateObject$1(), system.space);
var Item = function Item(_a) {
var className = _a.className,
children = _a.children,
label = _a.label,
size = _a.size,
active = _a.active,
props = __chunk_2.__rest(_a, ["className", "children", "label", "size", "active"]);
return React.createElement(StyledItem, Object.assign({
className: classNames('anchor-menu-item', className, {
active: active
}),
active: active
}, props), label ? label : children);
};
exports.Menu = Menu;
exports.Item = Item;
//# sourceMappingURL=menu.js.map