@zohodesk/components/es/Buttongroup/Buttongroup.js

Dot UI is a customizable React component library built to deliver a clean, accessible, and developer-friendly UI experience. It offers a growing set of reusable components designed to align with modern design systems and streamline application development

import React from 'react';
import { defaultProps } from "./props/defaultProps";
import { propTypes } from "./props/propTypes";
import { cn } from "@dot-system/css-utility";
import style from "./Buttongroup.module.css";
/* eslint css-modules/no-unused-class: [2, { markAsUsed: ['footer','header',
'tab','alignleft','alignright','aligncenter' ] }] */

export default class Buttongroup extends React.Component {
  render() {
    let {
      children,
      type,
      buttonPosition,
      customClass,
      dataId,
      dataSelectorId
    } = this.props;
    let btnGroup = [];
    children && children.forEach(child => {
      let btnRight = /*#__PURE__*/React.createElement("span", {
        className: cn(style[type])
      }, child);
      btnGroup.push(btnRight);
    });
    return /*#__PURE__*/React.createElement("div", {
      className: cn(`${style.buttonGroup} ${style[type]} ${customClass ? customClass : ''}`),
      "data-id": dataId,
      "data-test-id": dataId,
      "data-selector-id": dataSelectorId
    }, /*#__PURE__*/React.createElement("div", {
      className: cn(style[`align${buttonPosition}`])
    }, children));
  }

}
Buttongroup.defaultProps = defaultProps;
Buttongroup.propTypes = propTypes; // if (__DOCS__) {
//   Buttongroup.docs = {
//     componentGroup: 'Molecule',
//     folderName: 'Style Guide',
//     external: false,
//     description: ' ',
//     images: [
//       {
//         view: 'http://zsupport-tech-1.tsi.zohocorpin.com:8080/ui/general/ButtonGroup/v1/ButtonGroup.png',
//         psd: 'http://zsupport-tech-1.tsi.zohocorpin.com:8080/ui/general/ButtonGroup/v1/ButtonGroup.psd'
//       }
//     ]
//   };
// }