@primer/components/lib/FilterList.js

Primer react components

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _react = _interopRequireDefault(require("react"));

var _styledComponents = _interopRequireDefault(require("styled-components"));

var _constants = require("./constants");

var _sx = _interopRequireDefault(require("./sx"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

const FilterListBase = _styledComponents.default.ul.withConfig({
  displayName: "FilterList__FilterListBase",
  componentId: "sc-1l4pxmz-0"
})(["list-style-type:none;", ";", ";"], _constants.COMMON, _sx.default);

const FilterList = ({
  children,
  ...rest
}) => {
  const items = _react.default.Children.map(children, child => {
    return /*#__PURE__*/_react.default.createElement("li", null, child);
  });

  return /*#__PURE__*/_react.default.createElement(FilterListBase, rest, items);
};

FilterList.displayName = "FilterList";

const FilterListItemBase = _styledComponents.default.a.withConfig({
  displayName: "FilterList__FilterListItemBase",
  componentId: "sc-1l4pxmz-1"
})(["position:relative;display:block;padding:", ";margin:", ";overflow:hidden;font-size:", ";color:", ";background-color:", "!important;text-decoration:none;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;border-radius:", ";&:hover{text-decoration:none;background-color:", ";}&:active{color:", ";background-color:", ";}.count{float:right;font-weight:", ";}", ";", ";"], props => props.small ? `${(0, _constants.get)('space.1')(props)} 10px` : `${(0, _constants.get)('space.2')(props)} 11px`, props => props.small ? '0 0 2px' : '0 0 5px 0', (0, _constants.get)('fontSizes.1'), props => props.selected ? (0, _constants.get)('colors.fg.onEmphasis') : (0, _constants.get)('colors.fg.muted'), props => props.selected ? (0, _constants.get)('colors.accent.emphasis') : '', (0, _constants.get)('radii.1'), (0, _constants.get)('colors.canvas.subtle'), (0, _constants.get)('colors.fg.onEmphasis'), (0, _constants.get)('colors.accent.emphasis'), (0, _constants.get)('fontWeights.bold'), _constants.COMMON, _sx.default);

function FilterListItem({
  children,
  count,
  ...rest
}) {
  return /*#__PURE__*/_react.default.createElement(FilterListItemBase, rest, count && /*#__PURE__*/_react.default.createElement("span", {
    title: "results",
    className: "count"
  }, count), children);
}

FilterListItem.displayName = "FilterListItem";
FilterList.defaultProps = {
  m: 0,
  p: 0
};
FilterListItem.displayName = 'FilterList.Item';

var _default = Object.assign(FilterList, {
  Item: FilterListItem
});

exports.default = _default;