jobiqo-cl/lib/src/components/03-molecules/07-search/03-facet-popover/index.js

[](https://circleci.com/gh/jobiqo/jobiqo-cl)

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }

var React = require('react');
var React__default = _interopDefault(React);
var styled = require('styled-components');
var styled__default = _interopDefault(styled);
var index = require('../../../02-atoms/01-forms/01-button/index.js');
var index$1 = require('../../../02-atoms/16-popover/index.js');
var ArrowDown = require('../../../../icons/ArrowDown.js');

/**
 * @file index.tsx
 *
 * @fileoverview Displays a facet box (to be used on the sidebar on a search page for example).
 */
const StyledFacetPopover = styled__default(index$1.Popover) `
  a,
  a span {
    display: block;
    margin-top: 1rem;
    margin-bottom: 1rem;
  }
  ${props => props.theme.mediaQueries.smallRevert} {
    box-shadow: none;
    margin: 0;
  }
`;
const FacetChildList = styled__default.div `
  margin-top: 1rem;
  margin-bottom: 1rem;
  ${props => (props.isChild ? `margin-left: 1rem;` : '')};
`;
/**
 * A facet popover displays facet information inside a popover element.
 */
const FacetPopover = ({ children, label = 'Open' }) => {
    return (React__default.createElement(StyledFacetPopover, { maxHeight: "250px", trigger: React__default.createElement(index.default, { bordered: true, buttonStyle: "default" },
            React__default.createElement("span", null, label),
            React__default.createElement(ArrowDown.ArrowDownIcon, { title: "Down" })), p: 6 }, children));
};

exports.FacetChildList = FacetChildList;
exports.FacetPopover = FacetPopover;