@votercircle/clay-v2-alert 1.0.0

package/alert.d.ts

@@ -0,0 +1,12 @@
+export declare type AlertProps = {
+    children?: any;
+    color?: 'success' | 'danger' | 'warning';
+    show?: boolean;
+    className?: string;
+};
+export declare function Alert({ className, show, children, color }: AlertProps): JSX.Element;
+export declare namespace Alert {
+    var defaultProps: {
+        color: string;
+    };
+}

package/alert.js

@@ -0,0 +1,52 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+var _a, _b, _c;
+exports.__esModule = true;
+exports.Alert = void 0;
+var react_1 = __importDefault(require("react"));
+var styled_components_1 = __importStar(require("styled-components"));
+var cui_typography_text_1 = require("@clay/cui.typography.text");
+var cui_theme_provider_1 = require("@clay/cui.theme-provider");
+var ModalAnim = (0, styled_components_1.keyframes)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  from{\n    transform:rotateX(90deg);\n  }\n  to{\n    transform:rotateX(0deg);\n  }\n"], ["\n  from{\n    transform:rotateX(90deg);\n  }\n  to{\n    transform:rotateX(0deg);\n  }\n"])));
+var AlertBox = styled_components_1["default"].div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: none;\n  overflow: hidden;\n  animation: 0.5s 0s ease ", ";\n\n  &._show {\n    display: block;\n  }\n\n  &._success > .clay-ui-alert-wrapper {\n    background: var(--pdi-clay-theme-success-light, ", ");\n  }\n\n  &._danger > .clay-ui-alert-wrapper {\n    background: var(--pdi-clay-theme-danger-light, ", ");\n  }\n\n  &._warning > .clay-ui-alert-wrapper {\n    background: var(--pdi-clay-theme-warning-light, ", ");\n  }\n"], ["\n  display: none;\n  overflow: hidden;\n  animation: 0.5s 0s ease ", ";\n\n  &._show {\n    display: block;\n  }\n\n  &._success > .clay-ui-alert-wrapper {\n    background: var(--pdi-clay-theme-success-light, ", ");\n  }\n\n  &._danger > .clay-ui-alert-wrapper {\n    background: var(--pdi-clay-theme-danger-light, ", ");\n  }\n\n  &._warning > .clay-ui-alert-wrapper {\n    background: var(--pdi-clay-theme-warning-light, ", ");\n  }\n"])), ModalAnim, (_a = cui_theme_provider_1.DefaultPalette === null || cui_theme_provider_1.DefaultPalette === void 0 ? void 0 : cui_theme_provider_1.DefaultPalette.success) === null || _a === void 0 ? void 0 : _a.light, (_b = cui_theme_provider_1.DefaultPalette === null || cui_theme_provider_1.DefaultPalette === void 0 ? void 0 : cui_theme_provider_1.DefaultPalette.danger) === null || _b === void 0 ? void 0 : _b.light, (_c = cui_theme_provider_1.DefaultPalette === null || cui_theme_provider_1.DefaultPalette === void 0 ? void 0 : cui_theme_provider_1.DefaultPalette.warning) === null || _c === void 0 ? void 0 : _c.light);
+var AlertWrapper = styled_components_1["default"].div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  position: relative;\n  padding: 14px 24px;\n  color: #2c2c2c;\n"], ["\n  position: relative;\n  padding: 14px 24px;\n  color: #2c2c2c;\n"])));
+function Alert(_a) {
+    var className = _a.className, show = _a.show, children = _a.children, color = _a.color;
+    return (react_1["default"].createElement(AlertBox, { className: [className, 'clay-ui-alert', show && '_show', color && '_' + color].join(' ') },
+        react_1["default"].createElement(AlertWrapper, { className: 'clay-ui-alert-wrapper' },
+            react_1["default"].createElement(cui_typography_text_1.Text, { variant: 'b2' }, children))));
+}
+exports.Alert = Alert;
+Alert.defaultProps = {
+    color: 'success'
+};
+var templateObject_1, templateObject_2, templateObject_3;

package/index.d.ts

@@ -0,0 +1,2 @@
+export { Alert } from './alert';
+export { AlertProps } from './alert';

package/index.js

@@ -0,0 +1,16 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+exports.__esModule = true;
+exports.Alert = void 0;
+var alert_1 = require("./alert");
+__createBinding(exports, alert_1, "Alert");

package/package.json

@@ -0,0 +1,11 @@
+{
+  "name": "@votercircle/clay-v2-alert",
+  "version": "1.0.0",
+  "main": "index.js",
+  "types": "index.d.ts",
+  "peerDependencies": {
+    "react": ">=16",
+    "react-dom": ">=16",
+    "styled-components": ">=5"
+  }
+}