jobiqo-cl/lib/src/components/03-molecules/04-navigation/01-menu-button/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 polished_es = require('../../../../../node_modules/polished/dist/polished.es.js');
var styled = require('styled-components');
var styled__default = _interopDefault(styled);
var styles = require('../../../../../node_modules/@reach/menu-button/styles.css.js');
var ArrowDown = require('../../../../icons/ArrowDown.js');
var index = require('../../../../../node_modules/@reach/menu-button/es/index.js');

/**
 * @file index.tsx
 *
 * @fileoverview Renders a menu button.
 */
const MenuButtonTriggerStyles = styled.css `
  body [data-reach-menu-button] {
    position: relative;
    font-size: ${props => props.theme.button.fontSize};
    text-transform: ${props => props.theme.button.textTransform};
    letter-spacing: ${props => props.theme.button.letterSpacing};
    padding: ${props => props.theme.button.padding};
    border-radius: ${props => props.theme.button.borderRadius};
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: ${props => props.theme.button.color[props.buttonStyle]};
    background: ${props => props.theme.button.backgroundColor[props.buttonStyle]};
    border-width: ${props => props.theme.button.borderWidth};
    border-style: ${props => props.theme.button.borderStyle};
    border-color: ${props => props.theme.button.borderColor[props.buttonStyle]};
    &:focus,
    &:active {
      background: ${props => polished_es.darken(0.1, props.theme.button.backgroundColor[props.buttonStyle])};
    }

    svg:last-child:not(:only-child) {
      margin-left: 0.5rem;
    }

    svg:first-child:not(:only-child) {
      margin-right: 0.5rem;
    }

    ${props => (props.iconed ? 'padding-right: 2rem' : 'padding: 0')};
  }
`;
const menuButtonStyles = styled.css `
  body [data-reach-menu-list] {
    box-shadow: rgba(0, 0, 0, 0.12) 0px 18px 30px 0px;
    background: rgb(255, 255, 255);
    border-width: 1px;
    border-style: solid;
    border-color: rgb(238, 238, 238);
    border-image: initial;
    border-radius: 3px;
    padding: 8px 0px;
  }

  body [data-reach-menu-item] {
    padding: 0.8rem 1rem;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    &[data-selected] {
      background: ${props => props.theme.colors.gray0};
      color: ${props => props.theme.font.color};
    }

    svg:first-child:not(:only-child) {
      margin-right: 1rem;
    }

    svg:last-child:not(:only-child) {
      margin-left: 1rem;
    }
  }

  body [data-reach-menu-item] {
    padding: 0.8rem 1rem;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    &[data-selected] {
      background: ${props => props.theme.colors.gray0};
      color: ${props => props.theme.font.color};
    }

    svg:first-child:not(:only-child) {
      margin-right: 1rem;
    }

    svg:last-child:not(:only-child) {
      margin-left: 1rem;
    }
  }
`;
const GlobalMenuButtonStyle = styled.createGlobalStyle `
  ${styles}
  ${menuButtonStyles}
`;
const GloabMenuButtonTriggerStyles = styled.createGlobalStyle `
  ${MenuButtonTriggerStyles}
`;
const StyledMenuButtonEmpty = styled__default(index.MenuButton) `
  background: none;
  margin: 0;
  padding: 0;
  border: none;
  cursor: pointer;
`;
/**
 * A menu button can be used as a way to combine multiple actions into one single element.
 * Useful for user menu and other kind of multi-level actions it is fully accessible and
 * makes sure focus is properly handled when using keyboards or other kind of assitive technologies.
 */
const MenuDropdownButton = ({ button, children, styledButton = true, buttonStyle = 'default', iconed = true }) => {
    return (React.createElement(React.Fragment, null,
        React.createElement(GlobalMenuButtonStyle, { buttonStyle: buttonStyle, iconed: iconed }),
        React.createElement(index.Menu, null,
            styledButton ? (React.createElement(React.Fragment, null,
                React.createElement(GloabMenuButtonTriggerStyles, { buttonStyle: buttonStyle, iconed: iconed }),
                React.createElement(index.MenuButton, null,
                    React.createElement("span", null, button),
                    iconed && React.createElement(ArrowDown.ArrowDownIcon, { title: "Open" })))) : (React.createElement(StyledMenuButtonEmpty, null, button)),
            React.createElement(index.MenuList, null, children))));
};

exports.GloabMenuButtonTriggerStyles = GloabMenuButtonTriggerStyles;
exports.GlobalMenuButtonStyle = GlobalMenuButtonStyle;
exports.MenuButtonTriggerStyles = MenuButtonTriggerStyles;
exports.MenuDropdownButton = MenuDropdownButton;
exports.default = MenuDropdownButton;
exports.menuButtonStyles = menuButtonStyles;