@blend-ui/core/dist/esm/Divider.js

Blend core cmponents

import { objectSpread2 as _objectSpread2, objectWithoutProperties as _objectWithoutProperties, extends as _extends } from './_virtual/_rollupPluginBabelHelpers.js';
import React from 'react';
import styled, { css } from 'styled-components';
import { space } from 'styled-system';
import styledProps from '@styled-system/prop-types';
import PropTypes from 'prop-types';
var _excluded = ["as", "height", "color", "style"];
var normalDivider = css(["border-bottom-style:", ";border-bottom-width:", ";border-color:", ";"], function (props) {
  return props.borderStyle || "solid";
}, function (props) {
  return props.borderWidth || "1px";
}, function (props) {
  return props.borderColor || props.theme.colors.baseMuted;
});
var textInDivider = css(["display:flex;align-items:center;text-align:center;::before,::after{content:\"\";flex:1;border-bottom-style:", ";border-bottom-width:", ";border-color:", ";}::before{margin-right:1.25em;}::after{margin-left:1.25em;}"], function (props) {
  return props.borderStyle || "solid";
}, function (props) {
  return props.borderWidth || "1px";
}, function (props) {
  return props.borderColor || props.theme.colors.baseMuted;
});
/*
const DividerElement = styled("div")`
  ${space}
  border: 0;
  border-bottom-style: ${props => props.borderStyle || "solid"};
  border-bottom-width: ${props => props.borderWidth || "1px"};
  border-color: ${props => props.borderColor || props.theme.colors.baseMuted};
`;
*/

var DividerElement = styled("div").withConfig({
  displayName: "Divider__DividerElement",
  componentId: "sc-qfr82c-0"
})(["", " border:0;", ""], space, function (props) {
  return props.children ? textInDivider : normalDivider;
});

var Divider = function Divider(_ref) {
  var as = _ref.as,
      height = _ref.height,
      color = _ref.color,
      style = _ref.style,
      props = _objectWithoutProperties(_ref, _excluded); //console.log("DIV ", props);


  var opts = _objectSpread2({
    borderWidth: height || null,
    borderStyle: style || null,
    borderColor: color || null
  }, props);

  var dividerType = as;

  if (props.children) {
    dividerType = "div";
  }

  return /*#__PURE__*/React.createElement(DividerElement, _extends({
    as: dividerType
  }, opts));
};

Divider.displayName = "Divider";
Divider.defaultProps = {
  as: "hr"
};
Divider.propTypes = _objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2({}, styledProps.color), styledProps.space), styledProps.layout), styledProps.border), {}, {
  as: PropTypes.oneOf(["hr", "div"])
});
Divider.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "Divider",
  "props": {
    "as": {
      "defaultValue": {
        "value": "\"hr\"",
        "computed": false
      },
      "description": "",
      "type": {
        "name": "enum",
        "value": [{
          "value": "\"hr\"",
          "computed": false
        }, {
          "value": "\"div\"",
          "computed": false
        }]
      },
      "required": false
    }
  },
  "composes": ["@styled-system/prop-types"]
};
export { Divider as default };