@dnanpm/styleguide/build/cjs/components/Notification/Notification.js

DNA Styleguide repository provides the set of components and theme object used in various DNA projects.

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var icons = require('@dnanpm/icons');
var React = require('react');
var styledComponents = require('styled-components');
var theme = require('../../themes/theme.js');
var ButtonClose = require('../ButtonClose/ButtonClose.js');
var Icon = require('../Icon/Icon.js');

function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }

var React__default = /*#__PURE__*/_interopDefaultCompat(React);

const iconsMap = {
    info: icons.Info,
    success: icons.Check,
    warning: icons.Warning,
    error: icons.Error,
};
const sharedStyles = styledComponents.css `
    display: flex;
    gap: 1rem;
    line-height: ${theme.default.lineHeight.default};
    color: ${theme.default.color.text.black};
    background-color: ${theme.default.color.background.white.default};
    border-radius: ${theme.default.radius.s};
    border: 2px solid ${({ $type }) => theme.default.color.notification[$type]};
`;
const NotificationWrapper = styledComponents.styled.div `
    ${sharedStyles}
    border-color: ${({ $type }) => theme.default.color.notification[$type]};
`;
const StaticWrapper = styledComponents.styled.div `
    ${sharedStyles}
    border-color: ${({ $type }) => theme.default.color.notification[$type]};
`;
const IconWrapper = styledComponents.styled.div `
    display: flex;
    align-items: center;
    padding: 0.5rem;
    background-color: ${({ $type }) => theme.default.color.notification[$type]};
`;
const ContentWrapper = styledComponents.styled.div `
    margin: auto 0;
    padding: 0.5rem 0;
    width: 100%;
`;
const ButtonCloseStyled = styledComponents.styled(ButtonClose.default) `
    position: static;
    margin: auto 0.5rem;

    &:focus-visible {
        outline: none;
        box-shadow:
            0px 0px 0px 2px ${theme.default.color.focus.light},
            0px 0px 0px 4px ${theme.default.color.focus.dark};
    }
`;
const Notification = ({ type = 'info', 'data-testid': dataTestId, isStatic = false, className, children, closeButton = false, closeButtonLabel, onClickCloseButton, dismissed = false, ariaLabel, }) => {
    if (dismissed)
        return null;
    const IconToUse = iconsMap[type];
    const renderContent = () => (React__default.default.createElement(React__default.default.Fragment, null,
        React__default.default.createElement(IconWrapper, { "$type": type },
            React__default.default.createElement(Icon.default, { icon: IconToUse, size: "2rem", color: theme.default.color.default.white, "aria-hidden": true })),
        React__default.default.createElement(ContentWrapper, null, children),
        closeButton && (React__default.default.createElement(ButtonCloseStyled, { onClick: onClickCloseButton, "aria-label": closeButtonLabel },
            React__default.default.createElement(Icon.default, { icon: icons.Close, color: "currentColor", "aria-hidden": true })))));
    return isStatic ? (React__default.default.createElement(StaticWrapper, { "$type": type, className: className, "data-testid": dataTestId, "aria-label": ariaLabel, role: "region" }, renderContent())) : (React__default.default.createElement(NotificationWrapper, { "$type": type, className: className, "data-testid": dataTestId, role: "alert" }, renderContent()));
};

exports.default = Notification;