@digigov/ui 0.21.2 → 0.23.0

package/admin/Dropdown/__stories__/Default.js

@@ -0,0 +1,75 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Dropdown = _interopRequireWildcard(require("@digigov/ui/admin/Dropdown"));
+
+var _Field = _interopRequireDefault(require("@digigov/ui/core/Field"));
+
+var _Label = _interopRequireDefault(require("@digigov/react-core/Label"));
+
+var _Divider = require("@digigov/ui/core/Divider");
+
+var _NavVertical = _interopRequireDefault(require("@digigov/react-core/NavVertical"));
+
+var _LabelTitle = require("@digigov/react-core/LabelTitle");
+
+var _TextInput = _interopRequireDefault(require("@digigov/ui/core/TextInput"));
+
+var _NavVerticalItem = _interopRequireDefault(require("@digigov/react-core/NavVerticalItem"));
+
+var _Button = _interopRequireDefault(require("@digigov/ui/core/Button"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && 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; }
+
+var _ref = /*#__PURE__*/_react["default"].createElement(_Dropdown["default"], null, /*#__PURE__*/_react["default"].createElement(_Dropdown.DropdownButton, {
+  role: "button",
+  "aria-haspopup": "true",
+  "aria-controls": "menu2",
+  arrow: true
+}, "\u0391\u03BD\u03B1\u03B6\u03B7\u03C4\u03B7\u03C3\u03B7"), /*#__PURE__*/_react["default"].createElement(_Dropdown.DropdownContent, {
+  role: "menu",
+  id: "menu2"
+}, /*#__PURE__*/_react["default"].createElement(_Field["default"], {
+  role: "menuitem"
+}, /*#__PURE__*/_react["default"].createElement(_Label["default"], null, /*#__PURE__*/_react["default"].createElement(_LabelTitle.LabelTitle, null, "\u038C\u03BD\u03BF\u03BC\u03B1 \u03C0\u03B5\u03B4\u03AF\u03BF\u03C5"), /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
+  name: "input-name"
+}))), /*#__PURE__*/_react["default"].createElement(_Divider.SectionBreak, {
+  visible: true,
+  role: "separator"
+}), /*#__PURE__*/_react["default"].createElement(_NavVertical["default"], {
+  role: "menu"
+}, /*#__PURE__*/_react["default"].createElement(_NavVerticalItem["default"], {
+  role: "menuitem",
+  href: "#"
+}, "\u0395\u03C0\u03B5\u03BE\u03B5\u03C1\u03B3\u03B1\u03C3\u03AF\u03B1"), /*#__PURE__*/_react["default"].createElement(_NavVerticalItem["default"], {
+  role: "menuitem",
+  href: "#"
+}, "\u039C\u03B5\u03C4\u03B1\u03BA\u03AF\u03BD\u03B7\u03C3\u03B7"), /*#__PURE__*/_react["default"].createElement(_NavVerticalItem["default"], {
+  role: "menuitem",
+  href: "#"
+}, "\u039F\u03C1\u03B9\u03C3\u03C4\u03B9\u03BA\u03AE \u03B4\u03B9\u03B1\u03B3\u03C1\u03B1\u03C6\u03AE")), /*#__PURE__*/_react["default"].createElement(_Divider.SectionBreak, {
+  visible: true,
+  role: "separator"
+}), /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+  role: "menuitem"
+}, "\u0395\u03BD\u03AD\u03C1\u03B3\u03B5\u03B9\u03B1")));
+
+var Default = function Default() {
+  return _ref;
+};
+
+exports.Default = Default;
+var _default = Default;
+exports["default"] = _default;

package/admin/Dropdown/__stories__/PlacementTop.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export declare const PlacementTop: () => JSX.Element;
+export default PlacementTop;

package/admin/Dropdown/__stories__/PlacementTop.js

@@ -0,0 +1,83 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.PlacementTop = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Dropdown = _interopRequireWildcard(require("@digigov/ui/admin/Dropdown"));
+
+var _Field = _interopRequireDefault(require("@digigov/ui/core/Field"));
+
+var _Label = _interopRequireDefault(require("@digigov/react-core/Label"));
+
+var _Divider = require("@digigov/ui/core/Divider");
+
+var _NavVertical = _interopRequireDefault(require("@digigov/react-core/NavVertical"));
+
+var _LabelTitle = require("@digigov/react-core/LabelTitle");
+
+var _TextInput = _interopRequireDefault(require("@digigov/ui/core/TextInput"));
+
+var _NavVerticalItem = _interopRequireDefault(require("@digigov/react-core/NavVerticalItem"));
+
+var _Button = _interopRequireDefault(require("@digigov/ui/core/Button"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && 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; }
+
+var _ref = /*#__PURE__*/_react["default"].createElement(_Dropdown["default"], {
+  placement: "top"
+}, /*#__PURE__*/_react["default"].createElement(_Dropdown.DropdownButton, {
+  role: "button",
+  "aria-haspopup": "true",
+  "aria-controls": "menu2",
+  arrow: true
+}, "\u0391\u03BD\u03B1\u03B6\u03B7\u03C4\u03B7\u03C3\u03B7"), /*#__PURE__*/_react["default"].createElement(_Dropdown.DropdownContent, {
+  role: "menu",
+  id: "menu2"
+}, /*#__PURE__*/_react["default"].createElement(_Field["default"], {
+  role: "menuitem"
+}, /*#__PURE__*/_react["default"].createElement(_Label["default"], null, /*#__PURE__*/_react["default"].createElement(_LabelTitle.LabelTitle, null, "\u038C\u03BD\u03BF\u03BC\u03B1 \u03C0\u03B5\u03B4\u03AF\u03BF\u03C5"), /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
+  name: "input-name"
+}))), /*#__PURE__*/_react["default"].createElement(_Divider.SectionBreak, {
+  visible: true,
+  role: "separator"
+}), /*#__PURE__*/_react["default"].createElement(_NavVertical["default"], {
+  role: "menu"
+}, /*#__PURE__*/_react["default"].createElement(_NavVerticalItem["default"], {
+  role: "menuitem",
+  href: "#"
+}, "\u0395\u03C0\u03B5\u03BE\u03B5\u03C1\u03B3\u03B1\u03C3\u03AF\u03B1"), /*#__PURE__*/_react["default"].createElement(_NavVerticalItem["default"], {
+  role: "menuitem",
+  href: "#"
+}, "\u039C\u03B5\u03C4\u03B1\u03BA\u03AF\u03BD\u03B7\u03C3\u03B7"), /*#__PURE__*/_react["default"].createElement(_NavVerticalItem["default"], {
+  role: "menuitem",
+  href: "#"
+}, "\u039F\u03C1\u03B9\u03C3\u03C4\u03B9\u03BA\u03AE \u03B4\u03B9\u03B1\u03B3\u03C1\u03B1\u03C6\u03AE")), /*#__PURE__*/_react["default"].createElement(_Divider.SectionBreak, {
+  visible: true,
+  role: "separator"
+}), /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+  role: "menuitem"
+}, "\u0395\u03BD\u03AD\u03C1\u03B3\u03B5\u03B9\u03B1")));
+
+var PlacementTop = function PlacementTop() {
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center'
+    }
+  }, _ref);
+};
+
+exports.PlacementTop = PlacementTop;
+var _default = PlacementTop;
+exports["default"] = _default;

package/admin/Dropdown/index.d.ts

@@ -7,9 +7,15 @@ export interface DropdownProps extends CoreDropdownProps {
      * Use closeBehaviour to set the way that the Dropdown will close.
      */
     closeBehaviour?: 'clickButton' | 'clickOutside';
+    /**
+     * Use float dropdown to set the dropdown to float over
+     * scroll bars and stay on a static position.
+     * This is mainly used to show actions in a long table.
+     */
+    float?: boolean;
 }
 /**
  * Dropdown component is used for showing more options with a button.
  */
-export declare const Dropdown: ({ closeBehaviour, ...props }: DropdownProps) => React.ReactElement;
+export declare const Dropdown: ({ closeBehaviour, float, ...props }: DropdownProps) => React.ReactElement;
 export default Dropdown;

package/admin/Dropdown/index.js

@@ -47,7 +47,7 @@ Object.keys(_DropdownContent).forEach(function (key) {
     }
   });
 });
-var _excluded = ["closeBehaviour"];
+var _excluded = ["closeBehaviour", "float"];
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -59,7 +59,10 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 var Dropdown = function Dropdown(_ref) {
   var _ref$closeBehaviour = _ref.closeBehaviour,
       closeBehaviour = _ref$closeBehaviour === void 0 ? 'clickOutside' : _ref$closeBehaviour,
+      _ref$float = _ref["float"],
+      _float = _ref$float === void 0 ? false : _ref$float,
       props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+
   var innerRef = (0, _react.useRef)();
   (0, _react.useEffect)(function () {
     var handleClickOutside = function handleClickOutside(event) {
@@ -72,10 +75,35 @@ var Dropdown = function Dropdown(_ref) {
       document.addEventListener('click', handleClickOutside, true);
     }
 
+    var toggleFloat = function toggleFloat() {
+      if (innerRef.current.open) {
+        var rect = innerRef.current.getBoundingClientRect();
+        innerRef.current.style.position = 'static';
+        var top = rect.top + window.pageYOffset;
+        var left = rect.left + window.pageXOffset;
+        innerRef.current.style.top = "".concat(top, "px");
+        innerRef.current.style.left = "".concat(left, "px");
+        innerRef.current.style.position = "absolute";
+        innerRef.current.style.display = "block";
+      } else {
+        innerRef.current.style.top = "0";
+        innerRef.current.style.left = "0";
+        innerRef.current.style.position = "relative";
+      }
+    };
+
+    if (_float) {
+      innerRef.current.addEventListener('toggle', toggleFloat);
+    }
+
     return function () {
       if (closeBehaviour === 'clickOutside') {
         document.removeEventListener('click', handleClickOutside, true);
       }
+
+      if (_float) {
+        innerRef.current.removeEventListener('toggle', toggleFloat);
+      }
     };
   }, []); // eslint-disable-next-line @typescript-eslint/ban-ts-comment
   // @ts-ignore

package/admin/Dropdown/index.mdx

@@ -0,0 +1,29 @@
+---
+id: dropdown
+title: Dropdown
+---
+
+# Dropdown
+
+```bash
+import Dropdown from '@digigov/ui/admin/Dropdown';
+``` 
+## How to use
+
+<Story packageName="@digigov/ui" component="admin/Dropdown" story="Default.tsx" />
+
+### Dropdown with align right
+
+You can display the dropdown menu to the right side of the `Dropdown` button.
+
+<Story packageName="@digigov/ui" component="admin/Dropdown" story="AlignRight.tsx" />
+
+### Dropdown with placement top
+
+You can display the dropdown menu to the top of the `Dropdown` button.
+
+<Story packageName="@digigov/ui" component="admin/Dropdown" story="PlacementTop.tsx" />
+
+You can read more about the accessibility patterns used in our Dropdown
+implementation in the ARIA Authoring Practices Guide (APG) at 
+[Menu Button](https://www.w3.org/WAI/ARIA/apg/patterns/menubutton/) section.

package/admin/FilterSection/index.d.ts

@@ -1,4 +1,5 @@
 export * from '@digigov/react-extensions/admin/FilterSection';
+export * from '@digigov/react-extensions/admin/FilterSectionHorizontal';
 export * from '@digigov/react-extensions/admin/FilterHeadingSection';
 export * from '@digigov/react-extensions/admin/FilterContent';
 export * from '@digigov/react-extensions/admin/FilterOptionsSection';

package/admin/FilterSection/index.js

@@ -22,6 +22,20 @@ Object.keys(_FilterSection).forEach(function (key) {
   });
 });
 
+var _FilterSectionHorizontal = require("@digigov/react-extensions/admin/FilterSectionHorizontal");
+
+Object.keys(_FilterSectionHorizontal).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _FilterSectionHorizontal[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _FilterSectionHorizontal[key];
+    }
+  });
+});
+
 var _FilterHeadingSection = require("@digigov/react-extensions/admin/FilterHeadingSection");
 
 Object.keys(_FilterHeadingSection).forEach(function (key) {

package/admin/Modal/Modal.stories.d.ts

@@ -0,0 +1,8 @@
+declare namespace _default {
+    export const title: string;
+    export { Modal as component };
+}
+export default _default;
+export * from "./__stories__/Default";
+export * from "./__stories__/AlertDialog";
+import Modal from "@digigov/ui/admin/Modal";

package/admin/Modal/Modal.stories.js

@@ -0,0 +1,44 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {};
+exports["default"] = void 0;
+
+var _Modal = _interopRequireDefault(require("@digigov/ui/admin/Modal"));
+
+var _Default = require("./__stories__/Default");
+
+Object.keys(_Default).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _Default[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Default[key];
+    }
+  });
+});
+
+var _AlertDialog = require("./__stories__/AlertDialog");
+
+Object.keys(_AlertDialog).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _AlertDialog[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _AlertDialog[key];
+    }
+  });
+});
+var _default = {
+  title: 'Digigov UI/admin/Modal',
+  component: _Modal["default"]
+};
+exports["default"] = _default;

package/admin/Modal/__stories__/AlertDialog.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export declare const AlertDialog: () => JSX.Element;
+export default AlertDialog;

package/admin/Modal/__stories__/AlertDialog.js

@@ -0,0 +1,80 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.AlertDialog = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _Modal = _interopRequireWildcard(require("@digigov/ui/admin/Modal"));
+
+var _core = require("@digigov/ui/core");
+
+var _typography = require("@digigov/ui/typography");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && 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 useModal() {
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+      open = _useState2[0],
+      setOpen = _useState2[1];
+
+  function toggleModal() {
+    setOpen(!open);
+  }
+
+  return {
+    open: open,
+    toggleModal: toggleModal
+  };
+}
+
+var _ref = /*#__PURE__*/_react["default"].createElement(_Modal.ModalHeading, {
+  id: "modal-label"
+}, "\u0395\u03C0\u03B9\u03B2\u03B5\u03B2\u03B1\u03AF\u03C9\u03C3\u03B7");
+
+var _ref2 = /*#__PURE__*/_react["default"].createElement(_Modal.ModalContent, {
+  id: "modal-content"
+}, /*#__PURE__*/_react["default"].createElement(_typography.Paragraph, null, "\u0395\u03AF\u03C3\u03C4\u03B5 \u03C3\u03AF\u03B3\u03BF\u03C5\u03C1\u03BF\u03B9 \u03CC\u03C4\u03B9 \u03B8\u03AD\u03BB\u03B5\u03C4\u03B5 \u03BD\u03B1 \u03B4\u03B9\u03B1\u03B3\u03C1\u03AC\u03C8\u03B5\u03C4\u03B5 \u03C4\u03B7\u03BD \u03B5\u03B3\u03B3\u03C1\u03B1\u03C6\u03AE;"));
+
+var AlertDialog = function AlertDialog() {
+  var _useModal = useModal(),
+      open = _useModal.open,
+      toggleModal = _useModal.toggleModal;
+
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_core.Button, {
+    color: "warning",
+    onClick: function onClick() {
+      return toggleModal();
+    }
+  }, "\u0394\u03B9\u03B1\u03B3\u03C1\u03B1\u03C6\u03AE"), /*#__PURE__*/_react["default"].createElement(_Modal["default"], {
+    open: open,
+    role: "alertdialog",
+    "aria-modal": "true",
+    "aria-labelledby": "modal-label",
+    "aria-describedby": "modal-content"
+  }, _ref, _ref2, /*#__PURE__*/_react["default"].createElement(_Modal.ModalAction, null, /*#__PURE__*/_react["default"].createElement(_core.Button, {
+    onClick: function onClick() {
+      return toggleModal();
+    }
+  }, "\u0394\u03B9\u03B1\u03B3\u03C1\u03B1\u03C6\u03AE"), /*#__PURE__*/_react["default"].createElement(_core.Button, {
+    variant: "link",
+    onClick: function onClick() {
+      return toggleModal();
+    }
+  }, "\u0391\u03BA\u03CD\u03C1\u03C9\u03C3\u03B7"))));
+};
+
+exports.AlertDialog = AlertDialog;
+var _default = AlertDialog;
+exports["default"] = _default;

package/admin/Modal/__stories__/Default.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export declare const Default: () => JSX.Element;
+export default Default;

package/admin/Modal/__stories__/Default.js

@@ -0,0 +1,79 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Default = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _Modal = _interopRequireWildcard(require("@digigov/ui/admin/Modal"));
+
+var _core = require("@digigov/ui/core");
+
+var _Field = _interopRequireDefault(require("@digigov/ui/core/Field"));
+
+var _Label = _interopRequireDefault(require("@digigov/react-core/Label"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && 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 useModal() {
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+      open = _useState2[0],
+      setOpen = _useState2[1];
+
+  function toggleModal() {
+    setOpen(!open);
+  }
+
+  return {
+    open: open,
+    toggleModal: toggleModal
+  };
+}
+
+var _ref = /*#__PURE__*/_react["default"].createElement(_Modal.ModalHeading, {
+  id: "modal-label"
+}, "\u03A0\u03C1\u03BF\u03C3\u03B8\u03AE\u03BA\u03B7 \u03C4\u03B7\u03BB\u03B5\u03C6\u03CE\u03BD\u03BF\u03C5");
+
+var _ref2 = /*#__PURE__*/_react["default"].createElement(_Modal.ModalContent, null, /*#__PURE__*/_react["default"].createElement(_Field["default"], null, /*#__PURE__*/_react["default"].createElement(_Label["default"], null, "\u03A3\u03C5\u03BC\u03C0\u03BB\u03B7\u03C1\u03CE\u03C3\u03C4\u03B5 \u03C4\u03BF \u03C4\u03B7\u03BB\u03AD\u03C6\u03C9\u03BD\u03BF \u03B5\u03C0\u03B9\u03BA\u03BF\u03B9\u03BD\u03C9\u03BD\u03AF\u03B1\u03C2", /*#__PURE__*/_react["default"].createElement(_core.TextInput, {
+  name: "inputext",
+  characterWidth: 10
+}))));
+
+var _ref3 = /*#__PURE__*/_react["default"].createElement(_core.Button, null, "\u03A5\u03C0\u03BF\u03B2\u03BF\u03BB\u03AE");
+
+var Default = function Default() {
+  var _useModal = useModal(),
+      open = _useModal.open,
+      toggleModal = _useModal.toggleModal;
+
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_core.Button, {
+    onClick: function onClick() {
+      return toggleModal();
+    }
+  }, "\u03A0\u03C1\u03BF\u03C3\u03B8\u03AE\u03BA\u03B7 \u03C4\u03B7\u03BB\u03B5\u03C6\u03CE\u03BD\u03BF\u03C5"), /*#__PURE__*/_react["default"].createElement(_Modal["default"], {
+    open: open,
+    role: "dialog",
+    "aria-modal": "true",
+    "aria-labelledby": "modal-label"
+  }, _ref, _ref2, /*#__PURE__*/_react["default"].createElement(_Modal.ModalAction, null, _ref3, /*#__PURE__*/_react["default"].createElement(_core.Button, {
+    variant: "link",
+    onClick: function onClick() {
+      return toggleModal();
+    }
+  }, "\u0391\u03BA\u03CD\u03C1\u03C9\u03C3\u03B7"))));
+};
+
+exports.Default = Default;
+var _default = Default;
+exports["default"] = _default;

package/admin/Modal/index.mdx

@@ -0,0 +1,26 @@
+---
+id: modal
+title: Modal
+---
+
+```bash
+import Modal, {ModalHeading, ModalContent, ModalAction} from "@digigov/ui/admin/Modal";
+``` 
+
+## How to use
+
+### As a Dialog
+
+<Story packageName="@digigov/ui" component="admin/Modal" story="Default.tsx" />
+
+### As an Alert Dialog
+
+<Story packageName="@digigov/ui" component="admin/Modal" story="AlertDialog.tsx" />
+
+
+## Accessibility
+
+You can read more about the accessibility patterns used in our Modal
+implementation in the ARIA Authoring Practices Guide (APG) at 
+[Dialog](https://www.w3.org/WAI/ARIA/apg/patterns/dialogmodal/) and 
+[Alert Dialog](https://www.w3.org/WAI/ARIA/apg/patterns/alertdialog/) sections.