@geneui/components/Section/index.js

The Gene UI components library designed for BI tools

import React__default from 'react';
import PropTypes from 'prop-types';
import { t as titleConfig } from '../configs-00612ce0.js';
import Title from '../Title/index.js';
import { s as styleInject } from '../style-inject.es-746bb8ed.js';
import '../_rollupPluginBabelHelpers-e8fb2e5c.js';
import '../index-031ff73c.js';
import '../Icon/index.js';

var css_248z = "[data-gene-ui-version=\"2.16.5\"] .section-holder{background:var(--background);border:1px solid rgba(var(--background-sc-rgb),.1);border-radius:2rem;padding:0 2rem 2rem;width:100%}[data-gene-ui-version=\"2.16.5\"] .section-holder+.section-holder{margin:1.3rem 0 0}[data-gene-ui-version=\"2.16.5\"] .section-head{align-items:center;display:flex;height:5.4rem;width:100%}[data-gene-ui-version=\"2.16.5\"] .section-body{align-items:stretch;display:flex;flex-direction:column}[data-gene-ui-version=\"2.16.5\"] .section-sub-group{width:100%}[data-gene-ui-version=\"2.16.5\"] .section-sub-group:not(:last-child){margin-bottom:1.4rem}[data-gene-ui-version=\"2.16.5\"] .section-sub-group:not(:first-child){margin-top:.7rem}";
styleInject(css_248z);

function Section(_ref) {
  let {
    children,
    ...restProps
  } = _ref;
  return /*#__PURE__*/React__default.createElement("ul", {
    className: "section-holder"
  }, /*#__PURE__*/React__default.createElement("li", {
    className: "section-head"
  }, /*#__PURE__*/React__default.createElement(Title, restProps)), /*#__PURE__*/React__default.createElement("li", {
    className: "section-body"
  }, children));
}
Section.propTypes = {
  /**
   * Wrapping with 'Section' anything passed as child. Any valid React node
   */
  children: PropTypes.node.isRequired,
  /**
   * Display an icon. Values are the same as "Icon" atoms type prop
   */
  icon: PropTypes.string,
  /**
   * Text/Component to be displayed. Any valid React node
   */
  text: PropTypes.node.isRequired,
  /**
   * Actions to be displayed. Any valid React node
   */
  actions: PropTypes.node,
  /**
   * Title color
   */
  color: PropTypes.oneOf(titleConfig.color),
  /**
   * Displays a divider line
   */
  withLine: PropTypes.bool,
  /**
   * Additional className
   */
  className: PropTypes.string
};
Section.defaultProps = {
  color: titleConfig.color[1],
  withLine: false
};

export { Section as default };