@parkassist/pa-ui-library/dist/components/ButtonGroup/index.js

INX Platform elements

import { jsx as _jsx } from "react/jsx-runtime";
import React from "react";
import styled from "styled-components";
import { Row } from "../Layout/Flex";
import Palette from "../../constants/Palette";
import PropTypes from "prop-types";
import IconButton from "../IconButton";
const marginLeft = 8;
const backgroundColor = '#484848';
const buttonColor = '#76767660';
const Wrapper = styled(Row)`
    heigth: 32px;
    border-radius: 5px;
    align-items: center;
    overflow-x: hidden;
    padding: 8px;
`;
const ButtonGroup = ({
  buttons,
  tooltipPlacement = 'top',
  dark = false
}) => {
  return _jsx(Wrapper, {
    style: {
      width: buttons.length * (32 + marginLeft) + marginLeft + 16,
      backgroundColor: dark ? backgroundColor : Palette.WHITE_SMOKE,
      color: dark ? Palette.WHITE : Palette.BLACK
    },
    children: buttons.map(button => _jsx(IconButton, {
      icon: button.icon,
      tooltip: {
        text: button.text
      },
      marginLeft: marginLeft,
      placement: tooltipPlacement,
      style: dark ? {
        backgroundColor: button.selected ? buttonColor : backgroundColor
      } : {
        backgroundColor: button.selected ? Palette.VERY_LIGHT_GREY_NEW : Palette.WHITE_SMOKE
      },
      onClick: button.onClick
    }))
  });
};
ButtonGroup.propTypes = {
  buttons: PropTypes.arrayOf(PropTypes.shape({
    text: PropTypes.string,
    icon: PropTypes.element,
    selected: PropTypes.bool,
    onClick: PropTypes.func
  }))
};
export default ButtonGroup;