@festo-ui/react 7.3.0-dev.469 → 7.3.0-dev.471

package/index.d.ts

@@ -18,6 +18,7 @@ export { default as MobileFlyoutItem } from './lib/components/mobile-flyout/mobi
 export { default as MobileFlyoutPage } from './lib/components/mobile-flyout/mobile-flyout-page/MobileFlyoutPage';
 export { default as AlertModal } from './lib/components/modals/AlertModal';
 export { default as ConfirmModal } from './lib/components/modals/ConfirmModal';
+export { default as CustomModal } from './lib/components/modals/CustomModal';
 export { default as ImageGallery } from './lib/components/modals/image-gallery/ImageGallery';
 export { default as ImageGalleryContent } from './lib/components/modals/image-gallery/ImageGalleryContent';
 export { default as ImageGallerySwiper } from './lib/components/modals/image-gallery/ImageGallerySwiper';

package/index.js

@@ -18,6 +18,7 @@ export { default as MobileFlyoutItem } from "./lib/components/mobile-flyout/mobi
 export { default as MobileFlyoutPage } from "./lib/components/mobile-flyout/mobile-flyout-page/MobileFlyoutPage.js";
 export { default as AlertModal } from "./lib/components/modals/AlertModal.js";
 export { default as ConfirmModal } from "./lib/components/modals/ConfirmModal.js";
+export { default as CustomModal } from "./lib/components/modals/CustomModal.js";
 export { default as ImageGallery } from "./lib/components/modals/image-gallery/ImageGallery.js";
 export { default as ImageGalleryContent } from "./lib/components/modals/image-gallery/ImageGalleryContent.js";
 export { default as ImageGallerySwiper } from "./lib/components/modals/image-gallery/ImageGallerySwiper.js";

package/lib/components/modals/CustomModal.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { ModalBaseProps } from './ModalBase';
+interface CustomModalProps extends ModalBaseProps {
+    large?: boolean;
+    title?: string;
+    subtitle?: string;
+}
+declare const CustomModal: (props: CustomModalProps & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null;
+export default CustomModal;

package/lib/components/modals/CustomModal.js

@@ -0,0 +1,44 @@
+import cn from 'classnames';
+import { forwardRef } from 'react';
+import ModalBase from "./ModalBase.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const CustomModal = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    isOpen,
+    onClose,
+    large,
+    title,
+    subtitle,
+    className,
+    children
+  } = _ref;
+  return /*#__PURE__*/_jsxs(ModalBase, {
+    isOpen: isOpen,
+    className: cn({
+      'fwe-modal--large': large
+    }, className),
+    ref: ref,
+    onClose: onClose,
+    children: [/*#__PURE__*/_jsx("button", {
+      className: "fwe-modal-close-btn",
+      type: "button",
+      "aria-label": "Close",
+      onClick: onClose,
+      children: /*#__PURE__*/_jsx("span", {
+        className: "fwe-sr-only",
+        children: "Close"
+      })
+    }), title && /*#__PURE__*/_jsxs("div", {
+      className: "fwe-modal-header",
+      children: [subtitle && /*#__PURE__*/_jsx("h2", {
+        className: "fwe-modal-h2",
+        children: subtitle
+      }), /*#__PURE__*/_jsx("h1", {
+        className: "fwe-modal-h1",
+        children: title
+      })]
+    }), children]
+  });
+});
+export default CustomModal;

package/node/index.js

@@ -117,6 +117,12 @@ Object.defineProperty(exports, "ConfirmModal", {
     return _ConfirmModal.default;
   }
 });
+Object.defineProperty(exports, "CustomModal", {
+  enumerable: true,
+  get: function () {
+    return _CustomModal.default;
+  }
+});
 Object.defineProperty(exports, "DatePicker", {
   enumerable: true,
   get: function () {
@@ -401,6 +407,7 @@ var _MobileFlyoutItem = _interopRequireDefault(require("./lib/components/mobile-
 var _MobileFlyoutPage = _interopRequireDefault(require("./lib/components/mobile-flyout/mobile-flyout-page/MobileFlyoutPage.js"));
 var _AlertModal = _interopRequireDefault(require("./lib/components/modals/AlertModal.js"));
 var _ConfirmModal = _interopRequireDefault(require("./lib/components/modals/ConfirmModal.js"));
+var _CustomModal = _interopRequireDefault(require("./lib/components/modals/CustomModal.js"));
 var _ImageGallery = _interopRequireDefault(require("./lib/components/modals/image-gallery/ImageGallery.js"));
 var _ImageGalleryContent = _interopRequireDefault(require("./lib/components/modals/image-gallery/ImageGalleryContent.js"));
 var _ImageGallerySwiper = _interopRequireDefault(require("./lib/components/modals/image-gallery/ImageGallerySwiper.js"));

package/node/lib/components/modals/CustomModal.js

@@ -0,0 +1,50 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _classnames = _interopRequireDefault(require("classnames"));
+var _react = require("react");
+var _ModalBase = _interopRequireDefault(require("./ModalBase.js"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const CustomModal = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+  let {
+    isOpen,
+    onClose,
+    large,
+    title,
+    subtitle,
+    className,
+    children
+  } = _ref;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ModalBase.default, {
+    isOpen: isOpen,
+    className: (0, _classnames.default)({
+      'fwe-modal--large': large
+    }, className),
+    ref: ref,
+    onClose: onClose,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+      className: "fwe-modal-close-btn",
+      type: "button",
+      "aria-label": "Close",
+      onClick: onClose,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        className: "fwe-sr-only",
+        children: "Close"
+      })
+    }), title && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "fwe-modal-header",
+      children: [subtitle && /*#__PURE__*/(0, _jsxRuntime.jsx)("h2", {
+        className: "fwe-modal-h2",
+        children: subtitle
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("h1", {
+        className: "fwe-modal-h1",
+        children: title
+      })]
+    }), children]
+  });
+});
+var _default = exports.default = CustomModal;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@festo-ui/react",
-  "version": "7.3.0-dev.469",
+  "version": "7.3.0-dev.471",
   "author": "Festo UI (styleguide@festo.com)",
   "license": "apache-2.0",
   "type": "module",