@retailmenot/anchor/commonjs/list.js

A React UI Library by RetailMeNot

'use strict';

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 React = require('react');
var classNames = _interopDefault(require('classnames'));
var styled = require('@xstyled/styled-components');
var styled__default = _interopDefault(styled);
var system = require('@xstyled/system');
var __chunk_6 = require('./anchor-chunk-cd6fece5.js');
require('./anchor-chunk-1efd6395.js');

function _templateObject2() {
  var data = __chunk_1._taggedTemplateLiteral(["\n    display: flex;\n    align-content: space-between;\n    align-items: center;\n    width: 100%;\n    height: 100%;\n\n    .item-prefix {\n        display: flex;\n        align-items: center;\n        flex: 0 0 0;\n    }\n    .item-main {\n        display: flex;\n        align-items: center;\n        flex: 4 1 auto;\n    }\n    .item-suffix {\n        display: flex;\n        align-items: center;\n        flex: 0 0 0;\n        text-align: right;\n        justify-content: flex-end;\n    }\n    &.lg {\n        font-size: 1rem;\n        font-weight: 400;\n    }\n    &.sm {\n        font-size: 0.875rem;\n        font-weight: 500;\n    }\n"]);

  _templateObject2 = function _templateObject2() {
    return data;
  };

  return data;
}

function _templateObject() {
  var data = __chunk_1._taggedTemplateLiteral(["\n    box-sizing: border-box;\n    display: flex;\n    border-radius: base;\n    padding: 0.5rem 1rem;\n    cursor: pointer;\n    transition: background 500ms;\n    ", "\n    text-decoration: none;\n    min-height: 2.75rem;\n\n    &:hover {\n        background: ", ";\n    }\n\n    &.active {\n        background: ", ";\n    }\n    ", "\n"]);

  _templateObject = function _templateObject() {
    return data;
  };

  return data;
}
var StyledItem = styled__default('a')(_templateObject(), function (_ref) {
  var _ref$background = _ref.background,
      background = _ref$background === void 0 ? 'white' : _ref$background;
  return styled.css({
    background: system.th.color(background)
  });
}, system.th.color('background.light'), system.th.color('background.base'), system.space);
var StyledTypography = styled__default(__chunk_6.Typography)(_templateObject2());
var Item = function Item(_a) {
  var className = _a.className,
      children = _a.children,
      _a$onSelect = _a.onSelect,
      onSelect = _a$onSelect === void 0 ? function () {
    return null;
  } : _a$onSelect,
      _a$onMouseOver = _a.onMouseOver,
      onMouseOver = _a$onMouseOver === void 0 ? function () {
    return null;
  } : _a$onMouseOver,
      _a$onMouseOut = _a.onMouseOut,
      onMouseOut = _a$onMouseOut === void 0 ? function () {
    return null;
  } : _a$onMouseOut,
      value = _a.value,
      active = _a.active,
      href = _a.href,
      prefix = _a.prefix,
      suffix = _a.suffix,
      _a$size = _a.size,
      size = _a$size === void 0 ? 'lg' : _a$size,
      props = __chunk_2.__rest(_a, ["className", "children", "onSelect", "onMouseOver", "onMouseOut", "value", "active", "href", "prefix", "suffix", "size"]);

  return React.createElement(StyledItem, Object.assign({
    onMouseOver: onMouseOver,
    onMouseOut: onMouseOut,
    onMouseDown: function onMouseDown() {
      return onSelect(value);
    },
    className: classNames('anchor-list-item', className, {
      active: 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'
  })));
};

function _templateObject$1() {
  var data = __chunk_1._taggedTemplateLiteral(["\n    box-sizing: border-box;\n    display: flex;\n    padding: 0 1rem 0;\n    align-items: center;\n    height: 2rem;\n    margin-top: 0.75rem;\n    ", "\n"]);

  _templateObject$1 = function _templateObject() {
    return data;
  };

  return data;
}
var StyledTitle = styled__default('div')(_templateObject$1(), system.space);
var Title = function Title(_ref) {
  var className = _ref.className,
      children = _ref.children;
  return React.createElement(StyledTitle, {
    className: classNames('anchor-list-title', className)
  }, React.createElement(__chunk_6.Typography, {
    weight: 700,
    scale: 12,
    color: "text.label"
  }, children));
};

function _templateObject$2() {
  var data = __chunk_1._taggedTemplateLiteral(["\n    height: 0.5rem;\n    padding: 0.5rem 1rem;\n    hr {\n        border: none;\n        border-top: light;\n    }\n    ", "\n"]);

  _templateObject$2 = function _templateObject() {
    return data;
  };

  return data;
}
var StyledDivider = styled__default('div')(_templateObject$2(), system.space);
var Divider = function Divider(_a) {
  var className = _a.className,
      props = __chunk_2.__rest(_a, ["className"]);

  return React.createElement(StyledDivider, Object.assign({
    className: classNames('anchor-list-divider', className)
  }, props), React.createElement("hr", null));
};

function _templateObject$3() {
  var data = __chunk_1._taggedTemplateLiteral(["\n    box-sizing: border-box;\n    ", "\n"]);

  _templateObject$3 = function _templateObject() {
    return data;
  };

  return data;
}
var itemComponent = {
  item: Item,
  title: Title,
  divider: Divider
};
var StyledList = styled__default('div')(_templateObject$3(), system.space);
var List = function List(_a) {
  var className = _a.className,
      _a$children = _a.children,
      children = _a$children === void 0 ? [] : _a$children,
      items = _a.items,
      props = __chunk_2.__rest(_a, ["className", "children", "items"]);

  return React.createElement(StyledList, Object.assign({
    className: classNames('anchor-list', className)
  }, props), items ? items.map(function (_a, index) {
    var label = _a.label,
        _b = _a.value,
        _b$listItemType = _b.listItemType,
        listItemType = _b$listItemType === void 0 ? 'item' : _b$listItemType,
        key = _b.key,
        r = __chunk_2.__rest(_b, ["listItemType", "key"]);

    return React.createElement(itemComponent[listItemType], Object.assign({
      label: label,
      key: key || "list-".concat(index)
    }, r), label);
  }) : children);
};

exports.List = List;
exports.Item = Item;
exports.Title = Title;
exports.Divider = Divider;
//# sourceMappingURL=list.js.map