Alerts

import React from 'react';
import { AlertTooltip, AlertIcon, Row, Col } from 'seduo-company-ui';

const Example = (props) => (
    <Row>
        <Col>
            <AlertTooltip text="I'm alert with top position" position="top">
                <AlertIcon type="info" />
            </AlertTooltip>
        </Col>
        <Col className="bg-dark">
            <AlertTooltip text="I'm alert with bottom position" position="bottom">
                <AlertIcon type="danger" color="light" />
            </AlertTooltip>
        </Col>
        <Col className="bg-dark">
            <AlertTooltip text="I'm standalone alert with right position" position="right" standaloneContent>
                <AlertIcon type="info" color="light" />
            </AlertTooltip>
        </Col>
        <Col>
            <AlertTooltip text="I'm larger alert with left position" position="left" largeTippyPopper>
                <AlertIcon type="danger" />
            </AlertTooltip>
        </Col>
        <Row>
            <Col>
                <AlertTooltip text="I'm alert with left position without icon" position="left">
                    <span>Anything</span>
                </AlertTooltip>
            </Col>
        </Row>
    </Row>
);

export default Example;

Properties

AlertTooltip.propTypes = {
  text: PropTypes.string.isRequired,
  children: PropTypes.node.isRequired,
  position: PropTypes.oneOf(['top', 'bottom', 'left', 'right']).isRequired,
  standaloneContent: PropTypes.bool,
  largeTippyPopper: PropTypes.bool,
}

AlertTooltip.defaultProps = {
  standaloneContent: false,
  largeTippyPopper: false,
}

AlertIcon.propTypes = {
  type: PropTypes.oneOf(['danger', 'info']).isRequired,
  className: PropTypes.string,
}

AlertIcon.defaultProps = {
  className: '',
}