UNPKG

@procore/core-react

Version:
90 lines (79 loc) 4.01 kB
var _excluded = ["children"], _excluded2 = ["children", "variant"]; function _objectDestructuringEmpty(t) { if (null == t) throw new TypeError("Cannot destructure " + t); } function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); } function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; } function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; } import { Check, Clear, Error } from '@procore/core-icons'; import React from 'react'; import { useI18nContext } from '../_hooks/I18n'; import { addSubcomponents } from '../_utils/addSubcomponents'; import { StyledToast, StyledToastButton, StyledToastText } from './Toast.styles'; /** * Toasts are concise and are written in sentence case with punctuation. * Toasts have a suggested character count limit of 65. @since 11.12.0 */ var Text = /*#__PURE__*/React.forwardRef(function Label(_ref, ref) { var children = _ref.children, props = _objectWithoutProperties(_ref, _excluded); return /*#__PURE__*/React.createElement(StyledToastText, _extends({ role: "alert", "aria-atomic": "true", ref: ref }, props), children); }); /** Button to dismiss/close/hide the Toast. For accessible 'enough time' patterns, Toasts can be extended and have an action to dismiss the Toast. Otherwise, Toasts do not present the user with an action. If an action needs to be performed because of the particular message, use a banner. @since 11.12.0 */ var Dismiss = /*#__PURE__*/React.forwardRef(function ToastDismiss(_ref2, ref) { var props = _extends({}, (_objectDestructuringEmpty(_ref2), _ref2)); var I18n = useI18nContext(); return /*#__PURE__*/React.createElement(StyledToastButton, _extends({ ref: ref, variant: "tertiary", "aria-hidden": "false", "aria-label": I18n.t('core.toast.a11y.dismiss') }, props), /*#__PURE__*/React.createElement(Clear, null)); }); export var Toast_ = /*#__PURE__*/React.forwardRef(function Toast(_ref3, ref) { var children = _ref3.children, variant = _ref3.variant, props = _objectWithoutProperties(_ref3, _excluded2); return /*#__PURE__*/React.createElement(StyledToast, _extends({}, props, { $variant: variant, ref: ref }), variant === 'success' ? /*#__PURE__*/React.createElement(Check, { size: "lg" }) : /*#__PURE__*/React.createElement(Error, { size: "lg" }), typeof children === 'string' || children && typeof children[0] === 'string' ? /*#__PURE__*/ // legacy path automates and wraps direct text with the subcomponent React.createElement(StyledToastText, { $legacy: true }, children) : children); }); Toast_.displayName = 'Toast'; Dismiss.displayName = 'Toast.Dismiss'; Text.displayName = 'Toast.Text'; /** We use toasts to temporarily display information to a user. For example, as a confirmation that an action was successfully or unsuccessfully completed. Toasts do not present the user with an action. If an action needs to be performed because of the particular message, use a banner. However, for accessible 'enough time' patterns, Toasts can be extended and can have an action to dismiss the Toast. @since 10.19.0 @see [Storybook](https://stories.core.procore.com/?path=/story/core-react_demos-toast--demo) @see [Design Guidelines](https://design.procore.com/toast) */ export var Toast = addSubcomponents({ Dismiss: Dismiss, Text: Text }, Toast_); //# sourceMappingURL=Toast.js.map