@dnanpm/styleguide/build/cjs/components/Toaster/Toaster.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 tslib = require('tslib');
var icons = require('@dnanpm/icons');
var React = require('react');
var styledComponents = require('styled-components');
var theme = require('../../themes/theme.js');
var styledUtils = require('../../utils/styledUtils.js');
var Box = require('../Box/Box.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 ToasterWrapper = styledComponents.styled.div `
    width: 300px;
`;
const StyledBox = styledComponents.styled(Box.default) `
    position: relative;
    font-size: ${theme.default.fontSize.s};
    font-weight: ${theme.default.fontWeight.medium};
    line-height: ${theme.default.lineHeight.default};
    border-left: 5px solid ${({ type }) => theme.default.color.notification[type]};
    display: flex;
    align-items: center;
    padding-right: ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 4.5)};
`;
const IconWrapper = styledComponents.styled.div `
    display: none;
    align-items: center;
    width: ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 4)};
    overflow: hidden;

    ${styledUtils.media.xs `
        display: flex;
    `}
`;
const ContentWrapper = styledComponents.styled.div `
    flex: 1;
`;
const ButtonCloseStyled = styledComponents.styled(ButtonClose.default) `
    display: flex;
    top: auto;
`;
const Toaster = (_a) => {
    var { type = 'info', 'data-testid': dataTestId, closeLabel } = _a, props = tslib.__rest(_a, ["type", 'data-testid', "closeLabel"]);
    if (props.dismissed)
        return null;
    return (React__default.default.createElement(ToasterWrapper, { className: props.className, "data-testid": dataTestId, role: "alert", "aria-live": "assertive", "aria-atomic": "true" },
        React__default.default.createElement(StyledBox, { type: type, padding: styledUtils.getMultipliedSize(theme.default.base.baseWidth, 1), elevation: "extraHigh" },
            React__default.default.createElement(IconWrapper, null,
                React__default.default.createElement(Icon.default, { icon: iconsMap[type], size: "2rem", color: theme.default.color.notification[type], "aria-hidden": true, "data-testid": "toaster-icon" })),
            React__default.default.createElement(ContentWrapper, null, props.children),
            React__default.default.createElement(ButtonCloseStyled, { "aria-label": closeLabel, onClick: props.onClickCloseButton },
                React__default.default.createElement(Icon.default, { icon: icons.Close, color: theme.default.color.text.black, "aria-hidden": true })))));
};

exports.default = Toaster;