Socket
Socket
Sign inDemoInstall

terra-alert

Package Overview
Dependencies
Maintainers
10
Versions
182
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

terra-alert - npm Package Compare versions

Comparing version 4.28.0 to 4.29.0

lib/clinical-lowlight-theme/Alert.module.scss

10

CHANGELOG.md

@@ -7,2 +7,7 @@ ChangeLog

4.29.0 - (May 12, 2020)
------------------
### Added
* Added `unsatisfied` and `unverified` types
4.28.0 - (May 5, 2020)

@@ -15,7 +20,8 @@ ------------------

------------------
### Changed
* Removed "View Component Source Code" from docs in favour of source code badge
### Added
* Added clinical-lowlight-theme wdio screenshots
### Changed
* Removed "View Component Source Code" from docs in favour of source code badge
4.26.0 - (April 22, 2020)

@@ -22,0 +28,0 @@ ------------------

71

lib/Alert.js

@@ -26,2 +26,6 @@ "use strict";

var _IconGapChecking = _interopRequireDefault(require("terra-icon/lib/icon/IconGapChecking"));
var _IconDiamondSymbol = _interopRequireDefault(require("terra-icon/lib/icon/IconDiamondSymbol"));
var _IconInformation = _interopRequireDefault(require("terra-icon/lib/icon/IconInformation"));

@@ -31,4 +35,8 @@

var _classnames = _interopRequireDefault(require("classnames"));
var _bind = _interopRequireDefault(require("classnames/bind"));
var _terraThemeContext = _interopRequireDefault(require("terra-theme-context"));
var _AlertModule = _interopRequireDefault(require("./Alert.module.scss"));

@@ -44,6 +52,2 @@

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

@@ -73,2 +77,4 @@

WARNING: 'warning',
UNSATISFIED: 'unsatisfied',
UNVERIFIED: 'unverified',
ADVISORY: 'advisory',

@@ -81,3 +87,4 @@ INFO: 'info',

/**
* An action element to be added to the action section of the alert.
* An action element to be added to the action section of the alert to give the user an easy way
* to accomplish a task to resolve the notification.
*/

@@ -115,14 +122,9 @@ action: _propTypes.default.element,

/**
* The type of alert to be rendered. One of `alert`, `error`, `warning`, `advisory`,
* `info`, `success`, `custom`.
* The type of alert to be rendered. One of `alert`, `error`, `warning`, `unsatisfied`, `unverified`, `advisory`,
* `info`, `success`, or `custom`.
*/
type: _propTypes.default.oneOf([AlertTypes.ALERT, AlertTypes.ERROR, AlertTypes.WARNING, AlertTypes.ADVISORY, AlertTypes.INFO, AlertTypes.SUCCESS, AlertTypes.CUSTOM])
type: _propTypes.default.oneOf([AlertTypes.ALERT, AlertTypes.ERROR, AlertTypes.WARNING, AlertTypes.UNSATISFIED, AlertTypes.UNVERIFIED, AlertTypes.ADVISORY, AlertTypes.INFO, AlertTypes.SUCCESS, AlertTypes.CUSTOM])
};
var defaultProps = {
action: null,
children: '',
customIcon: null,
customColorClass: 'custom-default-color',
onDismiss: null,
title: '',
type: AlertTypes.ALERT

@@ -148,2 +150,12 @@ };

case AlertTypes.UNSATISFIED:
return /*#__PURE__*/_react.default.createElement("span", {
className: cx('icon', 'unsatisfied-icon')
}, /*#__PURE__*/_react.default.createElement(_IconGapChecking.default, null));
case AlertTypes.UNVERIFIED:
return /*#__PURE__*/_react.default.createElement("span", {
className: cx('icon', 'unverified-icon')
}, /*#__PURE__*/_react.default.createElement(_IconDiamondSymbol.default, null));
case AlertTypes.ADVISORY:

@@ -182,2 +194,4 @@ return null;

var theme = _react.default.useContext(_terraThemeContext.default);
var _useState = (0, _react.useState)(),

@@ -191,23 +205,13 @@ _useState2 = _slicedToArray(_useState, 2),

});
var attributes = _objectSpread({}, customProps);
var alertClassNames = cx(['alert-base', type, {
var alertClassNames = (0, _classnames.default)(cx('alert-base', type, {
narrow: isNarrow
}, {
wide: !isNarrow
}, attributes.className, _defineProperty({}, "".concat(customColorClass), type === AlertTypes.CUSTOM)]);
var bodyClassNameForParent = cx(['body', {
}, theme.className), customProps.className, _defineProperty({}, "".concat(customColorClass), customColorClass && type === AlertTypes.CUSTOM));
var bodyClassNameForParent = cx('body', {
'body-std': !isNarrow || isNarrow && !onDismiss && !action
}, {
'body-narrow': isNarrow && (onDismiss || action)
}]);
var actionsSection = '';
var dismissButton = '';
var alertSectionClassName = cx(['section', {
'section-custom': type === AlertTypes.CUSTOM
}]);
var actionsClassName = cx(['actions', {
'actions-custom': type === AlertTypes.CUSTOM
}]);
});
var dismissButton;

@@ -225,3 +229,8 @@ if (onDismiss) {

var actionsSection;
if (onDismiss || action) {
var actionsClassName = cx('actions', {
'actions-custom': type === AlertTypes.CUSTOM
});
actionsSection = /*#__PURE__*/_react.default.createElement("div", {

@@ -232,2 +241,6 @@ className: actionsClassName

var alertSectionClassName = cx('section', {
'section-custom': type === AlertTypes.CUSTOM
});
var alertMessageContent = /*#__PURE__*/_react.default.createElement("div", {

@@ -249,3 +262,3 @@ className: alertSectionClassName

role: "alert"
}, attributes, {
}, customProps, {
className: alertClassNames

@@ -252,0 +265,0 @@ }), /*#__PURE__*/_react.default.createElement("div", {

"use strict";
function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
Object.defineProperty(exports, "__esModule", {

@@ -8,3 +10,3 @@ value: true

var _react = _interopRequireDefault(require("react"));
var _react = _interopRequireWildcard(require("react"));

@@ -21,87 +23,54 @@ var _terraButton = _interopRequireDefault(require("terra-button"));

function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function () { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
var cx = _bind.default.bind(_colorsModule.default);
var ActionAndDismissibleExample = /*#__PURE__*/function (_React$Component) {
_inherits(ActionAndDismissibleExample, _React$Component);
var ActionAndDismissibleExample = function ActionAndDismissibleExample() {
var _useState = (0, _react.useState)(0),
_useState2 = _slicedToArray(_useState, 2),
actionButtonClickCount = _useState2[0],
setActionButtonClickCount = _useState2[1];
var _super = _createSuper(ActionAndDismissibleExample);
var _useState3 = (0, _react.useState)(true),
_useState4 = _slicedToArray(_useState3, 2),
isOpen = _useState4[0],
setIsOpen = _useState4[1];
function ActionAndDismissibleExample(props) {
var _this;
_classCallCheck(this, ActionAndDismissibleExample);
_this = _super.call(this, props);
_this.state = {
isDismissed: false,
actionButtonClickCount: 0
};
_this.handleDismiss = _this.handleDismiss.bind(_assertThisInitialized(_this));
_this.actionFunc = _this.actionFunc.bind(_assertThisInitialized(_this));
return _this;
}
_createClass(ActionAndDismissibleExample, [{
key: "handleDismiss",
value: function handleDismiss() {
var newState = this.state;
newState.isDismissed = true;
this.setState(newState);
}
}, {
key: "actionFunc",
value: function actionFunc() {
var newState = this.state;
newState.actionButtonClickCount += 1;
this.setState(newState);
}
}, {
key: "render",
value: function render() {
var alertText = 'This is a a custom alert with no icon or title. It is configured to be dismissible and with a custom action button. Click on the Dismiss button to dismiss the alert.';
var alertElem = '';
if (!this.state.isDismissed) {
alertElem = /*#__PURE__*/_react.default.createElement(_terraAlert.default, {
type: "custom",
onDismiss: this.handleDismiss,
customColorClass: cx(['my-app-alert-dismiss-example']),
action: /*#__PURE__*/_react.default.createElement(_terraButton.default, {
text: "Action",
variant: "emphasis",
onClick: this.actionFunc
})
}, alertText);
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, isOpen && /*#__PURE__*/_react.default.createElement(_terraAlert.default, {
type: "custom",
onDismiss: function onDismiss() {
return setIsOpen(false);
},
customColorClass: cx(['my-app-alert-dismiss-example']),
action: /*#__PURE__*/_react.default.createElement(_terraButton.default, {
text: "Action",
variant: "emphasis",
onClick: function onClick() {
var updatedCount = actionButtonClickCount + 1;
setActionButtonClickCount(updatedCount);
}
return /*#__PURE__*/_react.default.createElement("div", null, alertElem, /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("p", null, "Action button has been clicked", ' ', this.state.actionButtonClickCount, ' ', "times."));
})
}, "This is a custom alert with no icon or title. It is configured to be dismissible and with a custom action button. Click on the Dismiss button to dismiss the alert."), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("p", null, "Action button has been clicked ".concat(actionButtonClickCount, " times.")), !isOpen && /*#__PURE__*/_react.default.createElement(_terraButton.default, {
text: "Trigger Alert",
onClick: function onClick() {
setIsOpen(true);
}
}]);
}));
};
return ActionAndDismissibleExample;
}(_react.default.Component);
var _default = ActionAndDismissibleExample;
exports.default = _default;
"use strict";
function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
Object.defineProperty(exports, "__esModule", {

@@ -8,3 +10,3 @@ value: true

var _react = _interopRequireDefault(require("react"));
var _react = _interopRequireWildcard(require("react"));

@@ -17,67 +19,39 @@ var _terraButton = _interopRequireDefault(require("terra-button"));

function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function () { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
var AlertActionButton = function AlertActionButton() {
var _useState = (0, _react.useState)(0),
_useState2 = _slicedToArray(_useState, 2),
actionButtonClickCount = _useState2[0],
setActionButtonClickCount = _useState2[1];
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
return /*#__PURE__*/_react.default.createElement(_terraAlert.default, {
id: "actionAlert",
type: "warning",
action: /*#__PURE__*/_react.default.createElement(_terraButton.default, {
text: "Action",
variant: "emphasis",
onClick: function onClick() {
var updatedCount = actionButtonClickCount + 1;
setActionButtonClickCount(updatedCount);
}
})
}, "This is a warning. It is configured with a custom Action button. Action button has been clicked ".concat(actionButtonClickCount, " times."));
};
function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
var ActionExample = /*#__PURE__*/function (_React$Component) {
_inherits(ActionExample, _React$Component);
var _super = _createSuper(ActionExample);
function ActionExample(props) {
var _this;
_classCallCheck(this, ActionExample);
_this = _super.call(this, props);
_this.state = {
actionButtonClickCount: 0
};
_this.actionFunc = _this.actionFunc.bind(_assertThisInitialized(_this));
return _this;
}
_createClass(ActionExample, [{
key: "actionFunc",
value: function actionFunc() {
var newState = this.state;
newState.actionButtonClickCount += 1;
this.setState(newState);
}
}, {
key: "render",
value: function render() {
return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_terraAlert.default, {
type: "warning",
action: /*#__PURE__*/_react.default.createElement(_terraButton.default, {
text: "Action",
variant: "emphasis",
onClick: this.actionFunc
})
}, "This is a warning. It is configured with a custom Action button."), /*#__PURE__*/_react.default.createElement("p", null, "Action button has been clicked", this.state.actionButtonClickCount, ' ', "times."));
}
}]);
return ActionExample;
}(_react.default.Component);
var _default = ActionExample;
var _default = AlertActionButton;
exports.default = _default;
"use strict";
function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
Object.defineProperty(exports, "__esModule", {

@@ -8,4 +10,6 @@ value: true

var _react = _interopRequireDefault(require("react"));
var _react = _interopRequireWildcard(require("react"));
var _terraButton = _interopRequireDefault(require("terra-button"));
var _terraAlert = _interopRequireDefault(require("terra-alert"));

@@ -15,70 +19,45 @@

function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function () { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
var AlertDismissible = function AlertDismissible() {
var _useState = (0, _react.useState)(true),
_useState2 = _slicedToArray(_useState, 2),
isOpen = _useState2[0],
setIsOpen = _useState2[1];
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
var DismissibleExample = /*#__PURE__*/function (_React$Component) {
_inherits(DismissibleExample, _React$Component);
var _super = _createSuper(DismissibleExample);
function DismissibleExample(props) {
var _this;
_classCallCheck(this, DismissibleExample);
_this = _super.call(this, props);
_this.state = {
isDismissed: false
};
_this.handleDismiss = _this.handleDismiss.bind(_assertThisInitialized(_this));
return _this;
if (!isOpen) {
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
id: "dismissed"
}, "Alert was dismissed"), /*#__PURE__*/_react.default.createElement(_terraButton.default, {
text: "Trigger Alert",
onClick: function onClick() {
setIsOpen(true);
}
}));
}
_createClass(DismissibleExample, [{
key: "handleDismiss",
value: function handleDismiss() {
var newState = this.state;
newState.isDismissed = true;
this.setState(newState);
return /*#__PURE__*/_react.default.createElement(_terraAlert.default, {
id: "dismissibleAlert",
type: "success",
onDismiss: function onDismiss() {
return setIsOpen(false);
}
}, {
key: "render",
value: function render() {
var alertText = 'This is a success alert. It is configured to be dismissible. Click on the Dismiss button to dismiss the alert.';
var alertElem = '';
}, "This is a dismissable Alert.");
};
if (!this.state.isDismissed) {
alertElem = /*#__PURE__*/_react.default.createElement(_terraAlert.default, {
type: "success",
onDismiss: this.handleDismiss
}, alertText);
}
return alertElem;
}
}]);
return DismissibleExample;
}(_react.default.Component);
var _default = DismissibleExample;
var _default = AlertDismissible;
exports.default = _default;
"use strict";
function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
Object.defineProperty(exports, "__esModule", {

@@ -8,3 +10,3 @@ value: true

var _react = _interopRequireDefault(require("react"));
var _react = _interopRequireWildcard(require("react"));

@@ -19,81 +21,39 @@ var _terraButton = _interopRequireDefault(require("terra-button"));

function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function () { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
var LongTextExample = function LongTextExample() {
var _useState = (0, _react.useState)(false),
_useState2 = _slicedToArray(_useState, 2),
showAll = _useState2[0],
setShowAll = _useState2[1];
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
return /*#__PURE__*/_react.default.createElement(_terraAlert.default, {
type: "info",
title: "Gettysburg Address:"
}, /*#__PURE__*/_react.default.createElement("span", null, "Four score and seven years ago our fathers brought forth on this continent, a new nation, conceived in Liberty, and dedicated to the proposition that all men are created equal.", /*#__PURE__*/_react.default.createElement(_terraButton.default, {
variant: "de-emphasis",
onClick: function onClick() {
setShowAll(!showAll);
},
text: showAll ? 'Less Details' : 'More Details'
}), /*#__PURE__*/_react.default.createElement(_terraToggle.default, {
isOpen: showAll
}, /*#__PURE__*/_react.default.createElement("p", null, "Now we are engaged in a great civil war, testing whether that nation, or any nation so conceived and so dedicated, can long endure. We are met on a great battle-field of that war. We have come to dedicate a portion of that field, as a final resting place for those who here gave their lives that that nation might live. It is altogether fitting and proper that we should do this."), /*#__PURE__*/_react.default.createElement("p", null, "But, in a larger sense, we can not dedicate -- we can not consecrate -- we can not hallow -- this ground. The brave men, living and dead, who struggled here, have consecrated it, far above our poor power to add or detract. The world will little note, nor long remember what we say here, but it can never forget what they did here. It is for us the living, rather, to be dedicated here to the unfinished work which they who fought here have thus far so nobly advanced. It is rather for us to be here dedicated to the great task remaining before us -- that from these honored dead we take increased devotion to that cause for which they gave the last full measure of devotion -- that we here highly resolve that these dead shall not have died in vain -- that this nation, under God, shall have a new birth of freedom -- and that government of the people, by the people, for the people, shall not perish from the earth."))));
};
function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
var LongTextExample = /*#__PURE__*/function (_React$Component) {
_inherits(LongTextExample, _React$Component);
var _super = _createSuper(LongTextExample);
function LongTextExample(props) {
var _this;
_classCallCheck(this, LongTextExample);
_this = _super.call(this, props);
_this.state = {
allTextShown: false
};
_this.handleShowMore = _this.handleShowMore.bind(_assertThisInitialized(_this));
_this.handleShowLess = _this.handleShowLess.bind(_assertThisInitialized(_this));
return _this;
}
_createClass(LongTextExample, [{
key: "handleShowMore",
value: function handleShowMore() {
this.setState({
allTextShown: true
});
}
}, {
key: "handleShowLess",
value: function handleShowLess() {
this.setState({
allTextShown: false
});
}
}, {
key: "render",
value: function render() {
return /*#__PURE__*/_react.default.createElement(_terraAlert.default, {
type: "info",
title: "Gettysburg Address:"
}, /*#__PURE__*/_react.default.createElement("span", null, "Four score and seven years ago our fathers brought forth on this continent, a new nation, conceived in Liberty, and dedicated to the proposition that all men are created equal.", /*#__PURE__*/_react.default.createElement(_terraToggle.default, {
isOpen: !this.state.allTextShown
}, /*#__PURE__*/_react.default.createElement(_terraButton.default, {
onClick: this.handleShowMore,
text: "Show More"
})), /*#__PURE__*/_react.default.createElement(_terraToggle.default, {
isOpen: this.state.allTextShown
}, "Now we are engaged in a great civil war, testing whether that nation, or any nation so conceived and so dedicated, can long endure. We are met on a great battle-field of that war. We have come to dedicate a portion of that field, as a final resting place for those who here gave their lives that that nation might live. It is altogether fitting and proper that we should do this.", /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), "But, in a larger sense, we can not dedicate -- we can not consecrate -- we can not hallow -- this ground. The brave men, living and dead, who struggled here, have consecrated it, far above our poor power to add or detract. The world will little note, nor long remember what we say here, but it can never forget what they did here. It is for us the living, rather, to be dedicated here to the unfinished work which they who fought here have thus far so nobly advanced. It is rather for us to be here dedicated to the great task remaining before us -- that from these honored dead we take increased devotion to that cause for which they gave the last full measure of devotion -- that we here highly resolve that these dead shall not have died in vain -- that this nation, under God, shall have a new birth of freedom -- and that government of the people, by the people, for the people, shall not perish from the earth.", /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement(_terraButton.default, {
onClick: this.handleShowLess,
text: "Show Less"
}))));
}
}]);
return LongTextExample;
}(_react.default.Component);
var _default = LongTextExample;
exports.default = _default;
"use strict";
function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
Object.defineProperty(exports, "__esModule", {

@@ -8,3 +10,3 @@ value: true

var _react = _interopRequireDefault(require("react"));
var _react = _interopRequireWildcard(require("react"));

@@ -17,71 +19,39 @@ var _terraButton = _interopRequireDefault(require("terra-button"));

function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function () { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
var AlertActionButton = function AlertActionButton() {
var _useState = (0, _react.useState)(0),
_useState2 = _slicedToArray(_useState, 2),
actionButtonClickCount = _useState2[0],
setActionButtonClickCount = _useState2[1];
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
return /*#__PURE__*/_react.default.createElement(_Alert.default, {
id: "actionAlert",
type: "warning",
action: /*#__PURE__*/_react.default.createElement(_terraButton.default, {
text: "Action",
id: "actionButtonClickCount",
onClick: function onClick() {
var updatedCount = actionButtonClickCount + 1;
setActionButtonClickCount(updatedCount);
}
})
}, "This is a warning. It is configured with a custom Action button. Action button has been clicked ".concat(actionButtonClickCount, " times."));
};
function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
var AlertActionButton = /*#__PURE__*/function (_React$Component) {
_inherits(AlertActionButton, _React$Component);
var _super = _createSuper(AlertActionButton);
function AlertActionButton(props) {
var _this;
_classCallCheck(this, AlertActionButton);
_this = _super.call(this, props);
_this.state = {
actionButtonClickCount: 0
};
_this.actionFunc = _this.actionFunc.bind(_assertThisInitialized(_this));
return _this;
}
_createClass(AlertActionButton, [{
key: "actionFunc",
value: function actionFunc() {
this.setState(function (prevState) {
return {
actionButtonClickCount: prevState.actionButtonClickCount + 1
};
});
}
}, {
key: "render",
value: function render() {
return /*#__PURE__*/_react.default.createElement(_Alert.default, {
id: "actionAlert",
type: "warning",
action: /*#__PURE__*/_react.default.createElement(_terraButton.default, {
text: "Action",
onClick: this.actionFunc
})
}, "This is a warning. It is configured with a custom Action button. Action button has been clicked", ' ', /*#__PURE__*/_react.default.createElement("span", {
id: "actionButtonClickCount"
}, this.state.actionButtonClickCount), ' ', "times.");
}
}]);
return AlertActionButton;
}(_react.default.Component);
var _default = AlertActionButton;
exports.default = _default;
"use strict";
function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
Object.defineProperty(exports, "__esModule", {

@@ -8,4 +10,6 @@ value: true

var _react = _interopRequireDefault(require("react"));
var _react = _interopRequireWildcard(require("react"));
var _terraButton = _interopRequireDefault(require("terra-button"));
var _Alert = _interopRequireDefault(require("../../../Alert"));

@@ -15,72 +19,45 @@

function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function () { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
var AlertDismissible = function AlertDismissible() {
var _useState = (0, _react.useState)(true),
_useState2 = _slicedToArray(_useState, 2),
isOpen = _useState2[0],
setIsOpen = _useState2[1];
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
var AlertDismissible = /*#__PURE__*/function (_React$Component) {
_inherits(AlertDismissible, _React$Component);
var _super = _createSuper(AlertDismissible);
function AlertDismissible(props) {
var _this;
_classCallCheck(this, AlertDismissible);
_this = _super.call(this, props);
_this.state = {
isDismissed: false
};
_this.handleDismiss = _this.handleDismiss.bind(_assertThisInitialized(_this));
return _this;
if (!isOpen) {
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
id: "dismissed"
}, "Alert was dismissed"), /*#__PURE__*/_react.default.createElement(_terraButton.default, {
text: "Trigger Alert",
onClick: function onClick() {
setIsOpen(true);
}
}));
}
_createClass(AlertDismissible, [{
key: "handleDismiss",
value: function handleDismiss() {
var newState = this.state;
newState.isDismissed = true;
this.setState(newState);
return /*#__PURE__*/_react.default.createElement(_Alert.default, {
id: "dismissibleAlert",
type: "success",
onDismiss: function onDismiss() {
return setIsOpen(false);
}
}, {
key: "render",
value: function render() {
var alertElem = /*#__PURE__*/_react.default.createElement("div", {
id: "dismissed"
}, "Alert was dismissed");
}, "This is a dismissable Alert.");
};
if (!this.state.isDismissed) {
alertElem = /*#__PURE__*/_react.default.createElement(_Alert.default, {
id: "dismissibleAlert",
type: "success",
onDismiss: this.handleDismiss
}, "This is a dismissable Alert;");
}
return alertElem;
}
}]);
return AlertDismissible;
}(_react.default.Component);
var _default = AlertDismissible;
exports.default = _default;

@@ -19,19 +19,19 @@ "use strict";

title: "Alert_Alert:"
}, "Alert of type Alert with custom title"), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement(_Alert.default, {
}, "Alert of type Alert with custom title"), /*#__PURE__*/_react.default.createElement(_Alert.default, {
id: "errorAlert",
type: "error",
title: "Error_Alert:"
}, "Alert of type Error with custom title"), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement(_Alert.default, {
}, "Alert of type Error with custom title"), /*#__PURE__*/_react.default.createElement(_Alert.default, {
id: "warningAlert",
type: "warning",
title: "Warning_Alert:"
}, "Alert of type Warning with custom title"), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement(_Alert.default, {
}, "Alert of type Warning with custom title"), /*#__PURE__*/_react.default.createElement(_Alert.default, {
id: "advisoryAlert",
type: "advisory",
title: "Advisory_Alert:"
}, "Alert of type Advisory with custom title"), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement(_Alert.default, {
}, "Alert of type Advisory with custom title"), /*#__PURE__*/_react.default.createElement(_Alert.default, {
id: "infoAlert",
type: "info",
title: "Info_Alert:"
}, "Alert of type Info with custom title"), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement(_Alert.default, {
}, "Alert of type Info with custom title"), /*#__PURE__*/_react.default.createElement(_Alert.default, {
id: "successAlert",

@@ -38,0 +38,0 @@ type: "success",

@@ -18,20 +18,26 @@ "use strict";

type: _Alert.default.Opts.Types.ALERT
}, "Alert of type Alert"), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement(_Alert.default, {
}, "Alert of type alert"), /*#__PURE__*/_react.default.createElement(_Alert.default, {
id: "errorAlert",
type: _Alert.default.Opts.Types.ERROR
}, "Alert of type Error"), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement(_Alert.default, {
}, "Alert of type error"), /*#__PURE__*/_react.default.createElement(_Alert.default, {
id: "warningAlert",
type: _Alert.default.Opts.Types.WARNING
}, "Alert of type Warning"), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement(_Alert.default, {
}, "Alert of type Warning"), /*#__PURE__*/_react.default.createElement(_Alert.default, {
id: "unsatisfiedAlert",
type: _Alert.default.Opts.Types.UNSATISFIED
}, "Alert of type unsatisfied"), /*#__PURE__*/_react.default.createElement(_Alert.default, {
id: "unverifiedAlert",
type: _Alert.default.Opts.Types.UNVERIFIED
}, "Alert of type unverified"), /*#__PURE__*/_react.default.createElement(_Alert.default, {
id: "advisoryAlert",
type: _Alert.default.Opts.Types.ADVISORY
}, "Alert of type Advisory"), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement(_Alert.default, {
}, "Alert of type advisory"), /*#__PURE__*/_react.default.createElement(_Alert.default, {
id: "infoAlert",
type: _Alert.default.Opts.Types.INFO
}, "Alert of type Info"), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement(_Alert.default, {
}, "Alert of type info"), /*#__PURE__*/_react.default.createElement(_Alert.default, {
id: "successAlert",
type: _Alert.default.Opts.Types.SUCCESS
}, "Alert of type Success"));
}, "Alert of type success"));
};
exports.default = _default;

@@ -26,15 +26,15 @@ "use strict";

type: _terraAlert.default.Opts.Types.CUSTOM
}, "Custom Alert with no icon, title or custom color"), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement(_terraAlert.default, {
}, "Custom Alert with no icon, title or custom color"), /*#__PURE__*/_react.default.createElement(_terraAlert.default, {
id: "custom2",
type: _terraAlert.default.Opts.Types.CUSTOM,
title: "Custom_Alert:"
}, "Custom Alert with title but no icon or custom color"), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement(_terraAlert.default, {
}, "Custom Alert with title but no icon or custom color"), /*#__PURE__*/_react.default.createElement(_terraAlert.default, {
id: "custom3",
type: _terraAlert.default.Opts.Types.CUSTOM,
customIcon: /*#__PURE__*/_react.default.createElement(_IconHelp.default, null)
}, "Custom Alert with icon but no title or custom color"), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement(_terraAlert.default, {
}, "Custom Alert with icon but no title or custom color"), /*#__PURE__*/_react.default.createElement(_terraAlert.default, {
id: "custom4",
type: _terraAlert.default.Opts.Types.CUSTOM,
customColorClass: cx(['my-app-alert-attention-example'])
}, "Custom Alert with custom color but no title or icon"), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement(_terraAlert.default, {
}, "Custom Alert with custom color but no title or icon"), /*#__PURE__*/_react.default.createElement(_terraAlert.default, {
id: "custom5",

@@ -44,3 +44,3 @@ type: _terraAlert.default.Opts.Types.CUSTOM,

title: "Custom_Alert:"
}, "Custom Alert with custom color and title but no icon"), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement(_terraAlert.default, {
}, "Custom Alert with custom color and title but no icon"), /*#__PURE__*/_react.default.createElement(_terraAlert.default, {
id: "custom6",

@@ -50,3 +50,3 @@ type: _terraAlert.default.Opts.Types.CUSTOM,

customIcon: /*#__PURE__*/_react.default.createElement(_IconHelp.default, null)
}, "Custom Alert with title and icon but no custom color"), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement(_terraAlert.default, {
}, "Custom Alert with title and icon but no custom color"), /*#__PURE__*/_react.default.createElement(_terraAlert.default, {
id: "custom7",

@@ -56,3 +56,3 @@ type: _terraAlert.default.Opts.Types.CUSTOM,

customIcon: /*#__PURE__*/_react.default.createElement(_IconHelp.default, null)
}, "Custom Alert with custom color and icon but no title"), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement(_terraAlert.default, {
}, "Custom Alert with custom color and icon but no title"), /*#__PURE__*/_react.default.createElement(_terraAlert.default, {
id: "custom8",

@@ -59,0 +59,0 @@ type: _terraAlert.default.Opts.Types.CUSTOM,

{
"name": "terra-alert",
"main": "lib/Alert.js",
"version": "4.28.0",
"version": "4.29.0",
"description": "The Terra Alert component is a notification banner that can be rendered in your application when there is information that you want to bring to the user's attention. The Alert component supports a number of built-in notification types that render with pre-defined colors and icons that help the user understand the severity and meaning of the notification. A custom notification type is also supported that allows your application to customize an alert that may not fit into the pre-defined types.",

@@ -35,2 +35,3 @@ "repository": {

"terra-responsive-element": "^5.18.0",
"terra-theme-context": "^1.0.0",
"terra-toggle": "^3.31.0"

@@ -51,3 +52,3 @@ },

},
"gitHead": "e48fecfbfb1f51fbad7c34f9aaf8c6b544e9a784"
"gitHead": "cd1ff2a4eda29511aab8317b54aadca8a0d76b09"
}

@@ -9,8 +9,13 @@ import React, { useState } from 'react';

import IconWarning from 'terra-icon/lib/icon/IconWarning';
import IconGapChecking from 'terra-icon/lib/icon/IconGapChecking';
import IconDiamondSymbol from 'terra-icon/lib/icon/IconDiamondSymbol';
import IconInformation from 'terra-icon/lib/icon/IconInformation';
import IconSuccess from 'terra-icon/lib/icon/IconSuccess';
import classNames from 'classnames/bind';
import classNames from 'classnames';
import classNamesBind from 'classnames/bind';
import ThemeContext from 'terra-theme-context';
import styles from './Alert.module.scss';
const cx = classNames.bind(styles);
const cx = classNamesBind.bind(styles);

@@ -21,2 +26,4 @@ const AlertTypes = {

WARNING: 'warning',
UNSATISFIED: 'unsatisfied',
UNVERIFIED: 'unverified',
ADVISORY: 'advisory',

@@ -30,3 +37,4 @@ INFO: 'info',

/**
* An action element to be added to the action section of the alert.
* An action element to be added to the action section of the alert to give the user an easy way
* to accomplish a task to resolve the notification.
*/

@@ -58,4 +66,4 @@ action: PropTypes.element,

/**
* The type of alert to be rendered. One of `alert`, `error`, `warning`, `advisory`,
* `info`, `success`, `custom`.
* The type of alert to be rendered. One of `alert`, `error`, `warning`, `unsatisfied`, `unverified`, `advisory`,
* `info`, `success`, or `custom`.
*/

@@ -66,2 +74,4 @@ type: PropTypes.oneOf([

AlertTypes.WARNING,
AlertTypes.UNSATISFIED,
AlertTypes.UNVERIFIED,
AlertTypes.ADVISORY,

@@ -75,8 +85,3 @@ AlertTypes.INFO,

const defaultProps = {
action: null,
children: '',
customIcon: null,
customColorClass: 'custom-default-color',
onDismiss: null,
title: '',
type: AlertTypes.ALERT,

@@ -93,2 +98,6 @@ };

return (<span className={cx('icon')}><IconWarning /></span>);
case AlertTypes.UNSATISFIED:
return (<span className={cx('icon', 'unsatisfied-icon')}><IconGapChecking /></span>);
case AlertTypes.UNVERIFIED:
return (<span className={cx('icon', 'unverified-icon')}><IconDiamondSymbol /></span>);
case AlertTypes.ADVISORY:

@@ -117,24 +126,25 @@ return null;

}) => {
const theme = React.useContext(ThemeContext);
const [isNarrow, setIsNarrow] = useState();
const defaultTitle = type === AlertTypes.CUSTOM ? '' : <FormattedMessage id={`Terra.alert.${type}`} />;
const attributes = { ...customProps };
const alertClassNames = cx([
'alert-base',
type,
{ narrow: isNarrow },
{ wide: !isNarrow },
attributes.className,
{ [`${customColorClass}`]: type === AlertTypes.CUSTOM },
]);
const alertClassNames = classNames(
cx(
'alert-base',
type,
{ narrow: isNarrow },
{ wide: !isNarrow },
theme.className,
),
customProps.className,
{ [`${customColorClass}`]: customColorClass && type === AlertTypes.CUSTOM },
);
const bodyClassNameForParent = cx([
const bodyClassNameForParent = cx(
'body',
{ 'body-std': !isNarrow || (isNarrow && !onDismiss && !action) },
{ 'body-narrow': isNarrow && (onDismiss || action) },
]);
let actionsSection = '';
let dismissButton = '';
const alertSectionClassName = cx(['section', { 'section-custom': type === AlertTypes.CUSTOM }]);
const actionsClassName = cx(['actions', { 'actions-custom': type === AlertTypes.CUSTOM }]);
);
let dismissButton;
if (onDismiss) {

@@ -149,3 +159,6 @@ dismissButton = (

}
let actionsSection;
if (onDismiss || action) {
const actionsClassName = cx('actions', { 'actions-custom': type === AlertTypes.CUSTOM });
actionsSection = (

@@ -159,2 +172,3 @@ <div className={actionsClassName}>

const alertSectionClassName = cx('section', { 'section-custom': type === AlertTypes.CUSTOM });
const alertMessageContent = (

@@ -176,3 +190,3 @@ <div className={alertSectionClassName}>

>
<div role="alert" {...attributes} className={alertClassNames}>
<div role="alert" {...customProps} className={alertClassNames}>
<div className={bodyClassNameForParent}>

@@ -188,2 +202,3 @@ {getAlertIcon(type, customIcon)}

};
Alert.propTypes = propTypes;

@@ -190,0 +205,0 @@ Alert.defaultProps = defaultProps;

@@ -1,2 +0,2 @@

import React from 'react';
import React, { useState } from 'react';
import Button from 'terra-button';

@@ -9,51 +9,43 @@ import classNames from 'classnames/bind';

class ActionAndDismissibleExample extends React.Component {
constructor(props) {
super(props);
this.state = {
isDismissed: false,
actionButtonClickCount: 0,
};
this.handleDismiss = this.handleDismiss.bind(this);
this.actionFunc = this.actionFunc.bind(this);
}
const ActionAndDismissibleExample = () => {
const [actionButtonClickCount, setActionButtonClickCount] = useState(0);
const [isOpen, setIsOpen] = useState(true);
handleDismiss() {
const newState = this.state;
newState.isDismissed = true;
this.setState(newState);
}
actionFunc() {
const newState = this.state;
newState.actionButtonClickCount += 1;
this.setState(newState);
}
render() {
const alertText = 'This is a a custom alert with no icon or title. It is configured to be dismissible and with a custom action button. Click on the Dismiss button to dismiss the alert.';
let alertElem = '';
if (!this.state.isDismissed) {
alertElem = (
<Alert type="custom" onDismiss={this.handleDismiss} customColorClass={cx(['my-app-alert-dismiss-example'])} action={<Button text="Action" variant="emphasis" onClick={this.actionFunc} />}>
{alertText}
return (
<>
{isOpen && (
<Alert
type="custom"
onDismiss={() => setIsOpen(false)}
customColorClass={cx(['my-app-alert-dismiss-example'])}
action={(
<Button
text="Action"
variant="emphasis"
onClick={() => {
const updatedCount = actionButtonClickCount + 1;
setActionButtonClickCount(updatedCount);
}}
/>
)}
>
This is a custom alert with no icon or title. It is configured to be dismissible and with a custom action button. Click on the Dismiss button to dismiss the alert.
</Alert>
);
}
return (
<div>
{alertElem}
<br />
<p>
Action button has been clicked
{' '}
{this.state.actionButtonClickCount}
{' '}
times.
</p>
</div>
);
}
}
)}
<br />
<p>
{`Action button has been clicked ${actionButtonClickCount} times.`}
</p>
{!isOpen && (
<Button
text="Trigger Alert"
onClick={() => {
setIsOpen(true);
}}
/>
)}
</>
);
};
export default ActionAndDismissibleExample;

@@ -1,37 +0,28 @@

import React from 'react';
import React, { useState } from 'react';
import Button from 'terra-button';
import Alert from 'terra-alert';
class ActionExample extends React.Component {
constructor(props) {
super(props);
this.state = {
actionButtonClickCount: 0,
};
this.actionFunc = this.actionFunc.bind(this);
}
const AlertActionButton = () => {
const [actionButtonClickCount, setActionButtonClickCount] = useState(0);
actionFunc() {
const newState = this.state;
newState.actionButtonClickCount += 1;
this.setState(newState);
}
return (
<Alert
id="actionAlert"
type="warning"
action={(
<Button
text="Action"
variant="emphasis"
onClick={() => {
const updatedCount = actionButtonClickCount + 1;
setActionButtonClickCount(updatedCount);
}}
/>
)}
>
{`This is a warning. It is configured with a custom Action button. Action button has been clicked ${actionButtonClickCount} times.`}
</Alert>
);
};
render() {
return (
<div>
<Alert type="warning" action={<Button text="Action" variant="emphasis" onClick={this.actionFunc} />}>
This is a warning. It is configured with a custom Action button.
</Alert>
<p>
Action button has been clicked
{this.state.actionButtonClickCount}
{' '}
times.
</p>
</div>
);
}
}
export default ActionExample;
export default AlertActionButton;

@@ -1,29 +0,29 @@

import React from 'react';
import React, { useState } from 'react';
import Button from 'terra-button';
import Alert from 'terra-alert';
class DismissibleExample extends React.Component {
constructor(props) {
super(props);
this.state = {
isDismissed: false,
};
this.handleDismiss = this.handleDismiss.bind(this);
}
const AlertDismissible = () => {
const [isOpen, setIsOpen] = useState(true);
handleDismiss() {
const newState = this.state;
newState.isDismissed = true;
this.setState(newState);
if (!isOpen) {
return (
<>
<div id="dismissed">Alert was dismissed</div>
<Button
text="Trigger Alert"
onClick={() => {
setIsOpen(true);
}}
/>
</>
);
}
render() {
const alertText = 'This is a success alert. It is configured to be dismissible. Click on the Dismiss button to dismiss the alert.';
let alertElem = '';
if (!this.state.isDismissed) {
alertElem = <Alert type="success" onDismiss={this.handleDismiss}>{alertText}</Alert>;
}
return alertElem;
}
}
return (
<Alert id="dismissibleAlert" type="success" onDismiss={() => setIsOpen(false)}>
This is a dismissable Alert.
</Alert>
);
};
export default DismissibleExample;
export default AlertDismissible;

@@ -1,2 +0,2 @@

import React from 'react';
import React, { useState } from 'react';
import Button from 'terra-button';

@@ -6,43 +6,29 @@ import Toggle from 'terra-toggle';

class LongTextExample extends React.Component {
constructor(props) {
super(props);
this.state = {
allTextShown: false,
};
this.handleShowMore = this.handleShowMore.bind(this);
this.handleShowLess = this.handleShowLess.bind(this);
}
const LongTextExample = () => {
const [showAll, setShowAll] = useState(false);
handleShowMore() {
this.setState({ allTextShown: true });
}
return (
<Alert type="info" title="Gettysburg Address:">
<span>
Four score and seven years ago our fathers brought forth on this continent, a new nation, conceived in Liberty, and dedicated to the proposition that all men are created equal.
<Button
variant="de-emphasis"
onClick={() => {
setShowAll(!showAll);
}}
text={showAll ? 'Less Details' : 'More Details'}
/>
<Toggle isOpen={showAll}>
<p>
Now we are engaged in a great civil war, testing whether that nation, or any nation so conceived and so dedicated, can long endure. We are met on a great battle-field of that war. We have come to dedicate a portion of that field, as a final resting place for those who here gave their lives that that nation might live. It is altogether fitting and proper that we should do this.
</p>
<p>
But, in a larger sense, we can not dedicate -- we can not consecrate -- we can not hallow -- this ground. The brave men, living and dead, who struggled here, have consecrated it, far above our poor power to add or detract. The world will little note, nor long remember what we say here, but it can never forget what they did here. It is for us the living, rather, to be dedicated here to the unfinished work which they who fought here have thus far so nobly advanced. It is rather for us to be here dedicated to the great task remaining before us -- that from these honored dead we take increased devotion to that cause for which they gave the last full measure of devotion -- that we here highly resolve that these dead shall not have died in vain -- that this nation, under God, shall have a new birth of freedom -- and that government of the people, by the people, for the people, shall not perish from the earth.
</p>
</Toggle>
</span>
</Alert>
);
};
handleShowLess() {
this.setState({ allTextShown: false });
}
render() {
return (
<Alert type="info" title="Gettysburg Address:">
<span>
Four score and seven years ago our fathers brought forth on this continent, a new nation, conceived in Liberty, and dedicated to the proposition that all men are created equal.
<Toggle isOpen={!this.state.allTextShown}>
<Button onClick={this.handleShowMore} text="Show More" />
</Toggle>
<Toggle isOpen={this.state.allTextShown}>
Now we are engaged in a great civil war, testing whether that nation, or any nation so conceived and so dedicated, can long endure. We are met on a great battle-field of that war. We have come to dedicate a portion of that field, as a final resting place for those who here gave their lives that that nation might live. It is altogether fitting and proper that we should do this.
<br />
<br />
But, in a larger sense, we can not dedicate -- we can not consecrate -- we can not hallow -- this ground. The brave men, living and dead, who struggled here, have consecrated it, far above our poor power to add or detract. The world will little note, nor long remember what we say here, but it can never forget what they did here. It is for us the living, rather, to be dedicated here to the unfinished work which they who fought here have thus far so nobly advanced. It is rather for us to be here dedicated to the great task remaining before us -- that from these honored dead we take increased devotion to that cause for which they gave the last full measure of devotion -- that we here highly resolve that these dead shall not have died in vain -- that this nation, under God, shall have a new birth of freedom -- and that government of the people, by the people, for the people, shall not perish from the earth.
<br />
<br />
<Button onClick={this.handleShowLess} text="Show Less" />
</Toggle>
</span>
</Alert>
);
}
}
export default LongTextExample;

@@ -1,32 +0,28 @@

import React from 'react';
import React, { useState } from 'react';
import Button from 'terra-button';
import Alert from '../../../Alert';
class AlertActionButton extends React.Component {
constructor(props) {
super(props);
this.state = {
actionButtonClickCount: 0,
};
this.actionFunc = this.actionFunc.bind(this);
}
const AlertActionButton = () => {
const [actionButtonClickCount, setActionButtonClickCount] = useState(0);
actionFunc() {
this.setState(prevState => ({ actionButtonClickCount: prevState.actionButtonClickCount + 1 }));
}
return (
<Alert
id="actionAlert"
type="warning"
action={(
<Button
text="Action"
id="actionButtonClickCount"
onClick={() => {
const updatedCount = actionButtonClickCount + 1;
setActionButtonClickCount(updatedCount);
}}
/>
)}
>
{`This is a warning. It is configured with a custom Action button. Action button has been clicked ${actionButtonClickCount} times.`}
</Alert>
);
};
render() {
return (
<Alert id="actionAlert" type="warning" action={<Button text="Action" onClick={this.actionFunc} />}>
This is a warning. It is configured with a custom Action button. Action button has been
clicked
{' '}
<span id="actionButtonClickCount">{this.state.actionButtonClickCount}</span>
{' '}
times.
</Alert>
);
}
}
export default AlertActionButton;

@@ -1,34 +0,29 @@

import React from 'react';
import React, { useState } from 'react';
import Button from 'terra-button';
import Alert from '../../../Alert';
class AlertDismissible extends React.Component {
constructor(props) {
super(props);
this.state = {
isDismissed: false,
};
this.handleDismiss = this.handleDismiss.bind(this);
}
const AlertDismissible = () => {
const [isOpen, setIsOpen] = useState(true);
handleDismiss() {
const newState = this.state;
newState.isDismissed = true;
this.setState(newState);
}
render() {
let alertElem = <div id="dismissed">Alert was dismissed</div>;
if (!this.state.isDismissed) {
alertElem = (
<Alert id="dismissibleAlert" type="success" onDismiss={this.handleDismiss}>
This is a dismissable Alert;
</Alert>
);
}
if (!isOpen) {
return (
alertElem
<>
<div id="dismissed">Alert was dismissed</div>
<Button
text="Trigger Alert"
onClick={() => {
setIsOpen(true);
}}
/>
</>
);
}
}
return (
<Alert id="dismissibleAlert" type="success" onDismiss={() => setIsOpen(false)}>
This is a dismissable Alert.
</Alert>
);
};
export default AlertDismissible;

@@ -7,13 +7,8 @@ import React from 'react';

<Alert id="alertAlert" type="alert" title="Alert_Alert:">Alert of type Alert with custom title</Alert>
<br />
<Alert id="errorAlert" type="error" title="Error_Alert:">Alert of type Error with custom title</Alert>
<br />
<Alert id="warningAlert" type="warning" title="Warning_Alert:">Alert of type Warning with custom title</Alert>
<br />
<Alert id="advisoryAlert" type="advisory" title="Advisory_Alert:">Alert of type Advisory with custom title</Alert>
<br />
<Alert id="infoAlert" type="info" title="Info_Alert:">Alert of type Info with custom title</Alert>
<br />
<Alert id="successAlert" type="success" title="Success_Alert:">Alert of type Success with custom title</Alert>
</div>
);

@@ -6,14 +6,11 @@ import React from 'react';

<div>
<Alert id="alertAlert" type={Alert.Opts.Types.ALERT}>Alert of type Alert</Alert>
<br />
<Alert id="errorAlert" type={Alert.Opts.Types.ERROR}>Alert of type Error</Alert>
<br />
<Alert id="alertAlert" type={Alert.Opts.Types.ALERT}>Alert of type alert</Alert>
<Alert id="errorAlert" type={Alert.Opts.Types.ERROR}>Alert of type error</Alert>
<Alert id="warningAlert" type={Alert.Opts.Types.WARNING}>Alert of type Warning</Alert>
<br />
<Alert id="advisoryAlert" type={Alert.Opts.Types.ADVISORY}>Alert of type Advisory</Alert>
<br />
<Alert id="infoAlert" type={Alert.Opts.Types.INFO}>Alert of type Info</Alert>
<br />
<Alert id="successAlert" type={Alert.Opts.Types.SUCCESS}>Alert of type Success</Alert>
<Alert id="unsatisfiedAlert" type={Alert.Opts.Types.UNSATISFIED}>Alert of type unsatisfied</Alert>
<Alert id="unverifiedAlert" type={Alert.Opts.Types.UNVERIFIED}>Alert of type unverified</Alert>
<Alert id="advisoryAlert" type={Alert.Opts.Types.ADVISORY}>Alert of type advisory</Alert>
<Alert id="infoAlert" type={Alert.Opts.Types.INFO}>Alert of type info</Alert>
<Alert id="successAlert" type={Alert.Opts.Types.SUCCESS}>Alert of type success</Alert>
</div>
);

@@ -12,17 +12,10 @@ import React from 'react';

<Alert id="custom1" type={Alert.Opts.Types.CUSTOM}>Custom Alert with no icon, title or custom color</Alert>
<br />
<Alert id="custom2" type={Alert.Opts.Types.CUSTOM} title="Custom_Alert:">Custom Alert with title but no icon or custom color</Alert>
<br />
<Alert id="custom3" type={Alert.Opts.Types.CUSTOM} customIcon={<IconHelp />}>Custom Alert with icon but no title or custom color</Alert>
<br />
<Alert id="custom4" type={Alert.Opts.Types.CUSTOM} customColorClass={cx(['my-app-alert-attention-example'])}>Custom Alert with custom color but no title or icon</Alert>
<br />
<Alert id="custom5" type={Alert.Opts.Types.CUSTOM} customColorClass={cx(['my-app-alert-help-example'])} title="Custom_Alert:">Custom Alert with custom color and title but no icon</Alert>
<br />
<Alert id="custom6" type={Alert.Opts.Types.CUSTOM} title="Custom_Alert:" customIcon={<IconHelp />}>Custom Alert with title and icon but no custom color</Alert>
<br />
<Alert id="custom7" type={Alert.Opts.Types.CUSTOM} customColorClass={cx(['my-app-alert-dismiss-example'])} customIcon={<IconHelp />}>Custom Alert with custom color and icon but no title</Alert>
<br />
<Alert id="custom8" type={Alert.Opts.Types.CUSTOM} title="Custom_Alert:" customColorClass={cx(['my-app-alert-help-example'])} customIcon={<IconHelp />}>Custom Alert with title, custom color and icon</Alert>
</div>
);

@@ -1,5 +0,4 @@

/* eslint-disable no-console */
import React from 'react';
/* eslint-disable-next-line import/no-extraneous-dependencies */
import { mountWithIntl } from 'terra-enzyme-intl';
import { shallowWithIntl, mountWithIntl } from 'terra-enzyme-intl';
import IconHelp from 'terra-icon/lib/icon/IconHelp';

@@ -57,2 +56,16 @@ import Button from 'terra-button';

describe('Alert of type unsatisfied', () => {
it('should render an unsatisfied Alert', () => {
const wrapper = mountWithIntl(<Alert type={Alert.Opts.Types.UNSATISFIED}>This is an unsatisfied alert.</Alert>);
expect(wrapper).toMatchSnapshot();
});
});
describe('Alert of type unverified', () => {
it('should render an unverified Alert', () => {
const wrapper = mountWithIntl(<Alert type={Alert.Opts.Types.UNVERIFIED}>This is an unverified alert.</Alert>);
expect(wrapper).toMatchSnapshot();
});
});
describe('Alert of type info with text content', () => {

@@ -105,1 +118,12 @@ // Snapshot Tests

});
it('correctly applies the theme context className', () => {
jest.spyOn(React, 'useContext')
.mockReturnValue({
className: 'orion-fusion-theme',
});
const wrapper = shallowWithIntl(<Alert type="success" />);
const headerContainer = wrapper.dive();
expect(headerContainer).toMatchSnapshot();
});
Terra.describeViewports('Alert', ['tiny', 'large'], () => {
describe('Default', () => {
before(() => browser.url('/#/raw/tests/terra-alert/alert/default-alert'));
before(() => { browser.url('/#/raw/tests/terra-alert/alert/default-alert'); });
Terra.it.validatesElement();

@@ -8,13 +8,18 @@ });

describe('Types', () => {
before(() => browser.url('/#/raw/tests/terra-alert/alert/alert-type'));
before(() => { browser.url('/#/raw/tests/terra-alert/alert/alert-type'); });
Terra.it.validatesElement();
});
describe('Padding', () => {
before(() => browser.url('/#/raw/tests/terra-alert/alert/alert-padding'));
describe('Wrapped Content', () => {
before(() => { browser.url('/#/raw/tests/terra-alert/alert/alert-with-wrapped-content'); });
Terra.it.validatesElement();
});
describe('Responsive', () => {
before(() => { browser.url('/#/raw/tests/terra-alert/alert/responsive-example'); });
Terra.it.validatesElement();
});
describe('Titles', () => {
before(() => browser.url('/#/raw/tests/terra-alert/alert/alert-title'));
before(() => { browser.url('/#/raw/tests/terra-alert/alert/alert-title'); });
Terra.it.validatesElement();

@@ -24,3 +29,3 @@ });

describe('Custom', () => {
before(() => browser.url('/#/raw/tests/terra-alert/alert/custom-alert'));
before(() => { browser.url('/#/raw/tests/terra-alert/alert/custom-alert'); });
Terra.it.validatesElement();

@@ -37,5 +42,5 @@ });

it('should be register actions', () => {
expect(browser.getText('#actionButtonClickCount')).to.equal('0');
expect(browser.getText('#actionAlert')).to.have.string('clicked 0 times');
browser.click('#actionAlert button');
expect(browser.getText('#actionButtonClickCount')).to.equal('1');
expect(browser.getText('#actionAlert')).to.have.string('clicked 1 times');
});

@@ -58,4 +63,6 @@

Terra.it.validatesElement('dismissed');
after(() => browser.moveToObject('#root', 0, 900));
});
});

@@ -8,3 +8,5 @@ {

"Terra.alert.success": "Erfolg.",
"Terra.alert.unsatisfied": "Erforderliche Aktion.",
"Terra.alert.unverified": "Externe Datensätze",
"Terra.alert.warning": "Achtung."
}

@@ -8,3 +8,5 @@ {

"Terra.alert.advisory": "Advisory.",
"Terra.alert.unsatisfied": "Required Action.",
"Terra.alert.unverified": "Outside Records.",
"Terra.alert.success": "Success."
}

@@ -8,3 +8,5 @@ {

"Terra.alert.advisory": "Advisory.",
"Terra.alert.unsatisfied": "Required Action.",
"Terra.alert.unverified": "Outside Records.",
"Terra.alert.success": "Success."
}

@@ -8,3 +8,5 @@ {

"Terra.alert.advisory": "Advisory.",
"Terra.alert.unsatisfied": "Required Action.",
"Terra.alert.unverified": "Outside Records.",
"Terra.alert.success": "Success."
}

@@ -8,3 +8,5 @@ {

"Terra.alert.advisory": "Advisory.",
"Terra.alert.unsatisfied": "Required Action.",
"Terra.alert.unverified": "Outside Records.",
"Terra.alert.success": "Success."
}

@@ -8,3 +8,5 @@ {

"Terra.alert.advisory": "Advisory.",
"Terra.alert.unsatisfied": "Required Action.",
"Terra.alert.unverified": "Outside Records.",
"Terra.alert.success": "Success."
}

@@ -8,3 +8,5 @@ {

"Terra.alert.success": "Correcto.",
"Terra.alert.unsatisfied": "Acción obligatoria.",
"Terra.alert.unverified": "Historias clínicas externas.",
"Terra.alert.warning": "Advertencia."
}

@@ -8,3 +8,5 @@ {

"Terra.alert.success": "Correcto.",
"Terra.alert.unsatisfied": "Acción obligatoria.",
"Terra.alert.unverified": "Historias clínicas externas.",
"Terra.alert.warning": "Advertencia."
}

@@ -8,3 +8,5 @@ {

"Terra.alert.success": "Correcto.",
"Terra.alert.unsatisfied": "Acción obligatoria.",
"Terra.alert.unverified": "Historias clínicas externas.",
"Terra.alert.warning": "Advertencia."
}

@@ -8,3 +8,5 @@ {

"Terra.alert.success": "Opération réussie.",
"Terra.alert.unsatisfied": "Action requise.",
"Terra.alert.unverified": "Dossiers extérieurs.",
"Terra.alert.warning": "Avertissement."
}

@@ -8,3 +8,5 @@ {

"Terra.alert.success": "Opération réussie.",
"Terra.alert.unsatisfied": "Action requise.",
"Terra.alert.unverified": "Dossiers extérieurs.",
"Terra.alert.warning": "Avertissement."
}

@@ -8,3 +8,5 @@ {

"Terra.alert.success": "Succes.",
"Terra.alert.unsatisfied": "Vereiste actie.",
"Terra.alert.unverified": "Externe records.",
"Terra.alert.warning": "Waarschuwing."
}

@@ -8,3 +8,5 @@ {

"Terra.alert.success": "Succes.",
"Terra.alert.unsatisfied": "Vereiste actie.",
"Terra.alert.unverified": "Externe records.",
"Terra.alert.warning": "Waarschuwing."
}

@@ -8,3 +8,5 @@ {

"Terra.alert.success": "Êxito.",
"Terra.alert.unsatisfied": "Ação exigida.",
"Terra.alert.unverified": "Registros externos.",
"Terra.alert.warning": "Aviso."
}

@@ -8,3 +8,5 @@ {

"Terra.alert.success": "Êxito.",
"Terra.alert.unsatisfied": "Ação exigida.",
"Terra.alert.unverified": "Registros externos.",
"Terra.alert.warning": "Aviso."
}

@@ -8,3 +8,5 @@ {

"Terra.alert.success": "Klar.",
"Terra.alert.unsatisfied": "Nödvändig åtgärd krävs.",
"Terra.alert.unverified": "Externa journaler.",
"Terra.alert.warning": "Varning!"
}

@@ -8,3 +8,5 @@ {

"Terra.alert.success": "Klar.",
"Terra.alert.unsatisfied": "Nödvändig åtgärd krävs.",
"Terra.alert.unverified": "Externa journaler.",
"Terra.alert.warning": "Varning!"
}

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc