design-system-simplefi
Version:
Design System for SimpleFi Applications
42 lines • 4.02 kB
JavaScript
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
return cooked;
};
import React from 'react';
import PropTypes from 'prop-types';
import { transparentize } from 'polished';
import styled, { keyframes } from 'styled-components';
import { SFIIconsNames } from '../../theme/icons/icons.enums';
import { createPaddingSpacing, getColor, pxToRem } from '../../utils';
import { FlexContainer } from '../layout/FlexContainer';
import { Icon } from '../Icon';
import { Paragraph } from '../typography';
import { TextSizes } from '../typography/Text/Text.enums';
var ToastFromTop = keyframes(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n from {\n top: ", ";\n opacity: 0;\n }\n to {\n top: ", ";\n opacity: 1;\n }\n"], ["\n from {\n top: ", ";\n opacity: 0;\n }\n to {\n top: ", ";\n opacity: 1;\n }\n"])), pxToRem(-100), pxToRem(70));
var ToastContainer = styled(FlexContainer)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n position: fixed;\n z-index: 9999;\n top: ", ";\n right: ", ";\n width: ", ";\n max-height: ", ";\n background-color: ", ";\n color: ", ";\n text-align: left;\n ", ";\n box-shadow: 0px 2px 6px 0px ", ";\n animation: ", " 0.5s;\n"], ["\n position: fixed;\n z-index: 9999;\n top: ", ";\n right: ", ";\n width: ", ";\n max-height: ", ";\n background-color: ", ";\n color: ", ";\n text-align: left;\n ", ";\n box-shadow: 0px 2px 6px 0px ", ";\n animation: ", " 0.5s;\n"])), pxToRem(70), pxToRem(20), function (_a) {
var $width = _a.$width;
return pxToRem($width);
}, pxToRem(240), getColor('graphite5H'), getColor('graphite4B'), createPaddingSpacing({
top: 0.75,
bottom: 0.75,
right: 0.6,
left: 0.75,
}), transparentize(0.85, '#000'), ToastFromTop);
var ToastContent = styled(Paragraph)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n text-decoration: none;\n text-align: left;\n\n button:last-child {\n margin-bottom: -10px;\n }\n"], ["\n text-decoration: none;\n text-align: left;\n\n button:last-child {\n margin-bottom: -10px;\n }\n"])));
var CloseButton = styled.button(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n border: none;\n flex-shrink: 0;\n width: ", ";\n height: ", ";\n margin-left: ", ";\n color: ", ";\n\n &:hover {\n color: ", ";\n }\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n border: none;\n flex-shrink: 0;\n width: ", ";\n height: ", ";\n margin-left: ", ";\n color: ", ";\n\n &:hover {\n color: ", ";\n }\n"])), pxToRem(16), pxToRem(16), pxToRem(15), getColor('graphite2B'), getColor('graphiteB'));
var StyledIcon = styled(Icon)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n font-size: ", ";\n"], ["\n font-size: ", ";\n"])), pxToRem(16));
var stopPropagation = function (event) { return event === null || event === void 0 ? void 0 : event.stopPropagation(); };
var Toast = function (_a) {
var onClose = _a.onClose, children = _a.children, _b = _a.width, width = _b === void 0 ? 370 : _b;
return (React.createElement(ToastContainer, { "$width": width, alignItems: "flex-start", justifyContent: "space-between", onClick: stopPropagation },
React.createElement(ToastContent, { as: "div", margin: "none", size: TextSizes.md }, children),
React.createElement(CloseButton, { "aria-label": "Close", onClick: onClose },
React.createElement(StyledIcon, { name: SFIIconsNames.times }))));
};
Toast.propTypes = {
onClose: PropTypes.func.isRequired,
width: PropTypes.number,
};
export default Toast;
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
//# sourceMappingURL=Toast.js.map