@retailmenot/anchor/ts/Menu/Menu.component.js

A React UI Library by RetailMeNot

var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                t[p[i]] = s[p[i]];
        }
    return t;
};
// REACT
import * as React from 'react';
// VENDOR
import classNames from 'classnames';
import styled, { css } from '@xstyled/styled-components';
import { th, variant } from '@xstyled/system';
import { lighten } from 'polished';
// ANCHOR
import { get } from '../utils/get/get';
import { space as spaceStyles } from '@xstyled/system';
var MenuSizes;
(function (MenuSizes) {
    MenuSizes["sm"] = "sm";
    MenuSizes["md"] = "md";
    MenuSizes["lg"] = "lg";
})(MenuSizes || (MenuSizes = {}));
const MenuSizeStyles = {
    sm: {
        menu: css ``,
        items: css `
            font-size: 0.75rem;
            line-height: 0.75rem;
            font-weight: 500;
            padding: 0.5rem 0.75rem;
        `,
    },
    md: {
        menu: css ``,
        items: css `
            border-radius: base;
            font-weight: 600;
            padding: 1rem 0.75rem;
        `,
    },
    lg: {
        menu: css ``,
        items: css `
            border-radius: base;
            font-weight: 600;
            padding: 1.5rem 1.25rem;
        `,
    },
};
const sizeVariant = variant({
    key: 'menu.sizes',
    prop: 'size',
    default: 'md',
    variants: MenuSizeStyles,
});
const StyledMenu = styled('nav') `
    display: flex;
    width: 100%;
    ${spaceStyles};
    min-width: 15.625rem;
    margin: 0;
    padding: 0;

    ${({ background = 'primary.base' }) => css({
    background: th.color(background),
})};
    font-size: 0.875rem;
    font-family: base;
    border-radius: base;

    .anchor-menu-item {
        line-height: 1.125rem;
        ${({ color = 'white' }) => css({ color })};
        transition: background-color 250ms, color 250ms;
        margin: 0 0.125rem;

        &:hover {
            ${({ color }) => css({
    color: color ? lighten(0.2, color) : 'white',
})};
            background-color: rgba(255, 255, 255, 0.1);
        }

        &:active,
        &.active {
            ${({ color }) => css({
    color: color ? lighten(0.2, color) : 'white',
})};
            background-color: rgba(
                255,
                255,
                255,
                0.1
            ); // TODO: more or less opacity
        }

        &:focus {
            background-color: rgba(255, 255, 255, 0.1);
        }

        &:first-of-type {
            margin-left: 0;
        }
        &:last-of-type {
            margin-right: 0;
        }

        ${props => get(sizeVariant(props), 'items')};
    }

    /* Positioning */
    ${({ justify = 'flex-start' }) => css({
    justifyContent: justify,
})};

    /* Menu Sizes */
    ${props => get(sizeVariant(props), 'menu')};
`;
export const Menu = (_a) => {
    var { className, children, size = 'md' } = _a, props = __rest(_a, ["className", "children", "size"]);
    return (React.createElement(StyledMenu, Object.assign({ size: size, className: classNames('anchor-menu', className) }, props), children));
};
//# sourceMappingURL=Menu.component.js.map