@retailmenot/anchor/ts/List/Item/Item.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, space as spaceStyles } from '@xstyled/system';
// COMPONENTS
import { Typography } from '../../Typography';
const StyledItem = styled('a') `
    box-sizing: border-box;
    display: flex;
    border-radius: base;
    padding: 0.5rem 1rem;
    cursor: pointer;
    transition: background 500ms;
    ${({ background = 'white' }) => css({
    background: th.color(background),
})}
    text-decoration: none;
    min-height: 2.75rem;

    &:hover {
        background: ${th.color('background.light')};
    }

    &.active {
        background: ${th.color('background.base')};
    }
    ${spaceStyles}
`;
const StyledTypography = styled(Typography) `
    display: flex;
    align-content: space-between;
    align-items: center;
    width: 100%;
    height: 100%;

    .item-prefix {
        display: flex;
        align-items: center;
        flex: 0 0 0;
    }
    .item-main {
        display: flex;
        align-items: center;
        flex: 4 1 auto;
    }
    .item-suffix {
        display: flex;
        align-items: center;
        flex: 0 0 0;
        text-align: right;
        justify-content: flex-end;
    }
    &.lg {
        font-size: 1rem;
        font-weight: 400;
    }
    &.sm {
        font-size: 0.875rem;
        font-weight: 500;
    }
`;
export const Item = (_a) => {
    var { className, children, onSelect = () => null, onMouseOver = () => null, onMouseOut = () => null, value, active, href, prefix, suffix, size = 'lg' } = _a, props = __rest(_a, ["className", "children", "onSelect", "onMouseOver", "onMouseOut", "value", "active", "href", "prefix", "suffix", "size"]);
    return (React.createElement(StyledItem, Object.assign({ onMouseOver: onMouseOver, onMouseOut: onMouseOut, onMouseDown: () => onSelect(value), className: classNames('anchor-list-item', className, { active }), href: href }, props),
        React.createElement(StyledTypography, { color: "text.light", className: size },
            prefix && React.cloneElement(prefix, { className: 'item-prefix' }),
            prefix || suffix ? (React.createElement("span", { className: "item-main" }, children)) : (children),
            suffix && React.cloneElement(suffix, { className: 'item-suffix' }))));
};
//# sourceMappingURL=Item.component.js.map