@digigov/ui 0.28.1 → 0.28.3

package/es/utils/Kitchensink/KitchensinkDashboard.js

@@ -0,0 +1,50 @@
+import Paragraph from "@digigov/react-core/Paragraph";
+import React from "react";
+import { KitchensinkByCategory } from "./KitchensinkByCategory";
+
+var _ref2 = /*#__PURE__*/React.createElement(Paragraph, {
+  fontSize: "72",
+  fontWeight: "bold"
+}, "Components");
+
+export var KitchensinkDashboard = function KitchensinkDashboard(_ref) {
+  var stories = _ref.stories;
+  var categoryOrder = Object.keys(stories).reduce(function (catStories, componentStoriesKey) {
+    var componentStories = stories[componentStoriesKey];
+
+    if (componentStories["default"].ignore) {
+      return catStories;
+    }
+
+    if (!componentStories["default"].component) {
+      throw new Error("no component was found in ".concat(componentStoriesKey));
+    }
+
+    var title = componentStories["default"].title.split("/")[1];
+
+    if (!title) {
+      throw new Error("no title was found for ".concat(componentStoriesKey));
+    }
+
+    var category = title;
+
+    if (catStories[category]) {
+      catStories[category].push(componentStories);
+    } else {
+      catStories[category] = [componentStories];
+    }
+
+    return catStories;
+  }, {});
+  return /*#__PURE__*/React.createElement("div", null, _ref2, /*#__PURE__*/React.createElement("div", {
+    className: "govgr-kitchensink-all-components"
+  }, Object.keys(categoryOrder).sort(function (a, b) {
+    return a > b ? -1 : 1;
+  }).map(function (category, index) {
+    return /*#__PURE__*/React.createElement(KitchensinkByCategory, {
+      category: category,
+      stories: categoryOrder[category],
+      key: index
+    });
+  })));
+};

package/es/utils/withDeprecation.js

@@ -31,16 +31,26 @@ var DigigovError = /*#__PURE__*/function (_Error) {
   return _createClass(DigigovError);
 }( /*#__PURE__*/_wrapNativeSuper(Error));
 
-var loggedDeprecations = new Set();
+var loggedDeprecations = [];
+
+var warnOnce = function warnOnce(name, message) {
+  if (loggedDeprecations.includes(name)) {
+    return;
+  } else {
+    loggedDeprecations.push(name);
+  }
+
+  console.warn(message);
+};
 
 var handleErrorWarning = function handleErrorWarning(componentName, name, _ref, type) {
   var error = _ref.error,
       warning = _ref.warning;
 
   if (warning === true) {
-    console.warn("\u26A0\uFE0F  ".concat(componentName, ": ").concat(name, " ").concat(type, " will be deprecated."));
+    warnOnce(componentName, "\u26A0\uFE0F  ".concat(componentName, ": ").concat(name, " ").concat(type, " will be deprecated."));
   } else if (typeof warning === 'string') {
-    console.warn(warning);
+    warnOnce(componentName, warning);
   }
 
   if (error === true) {
@@ -55,19 +65,12 @@ export default function withDeprecation(Component, deprecations) {
 
   var componentName = // eslint-disable-next-line @typescript-eslint/ban-ts-comment
   // @ts-ignore
-  deprecations.name || Component.name || (Component === null || Component === void 0 ? void 0 : (_Component$render = Component.render) === null || _Component$render === void 0 ? void 0 : _Component$render.name);
-
-  if (loggedDeprecations.has(componentName)) {
-    return Component;
-  } else {
-    loggedDeprecations.add(componentName);
-  } // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  deprecations.name || Component.name || (Component === null || Component === void 0 ? void 0 : (_Component$render = Component.render) === null || _Component$render === void 0 ? void 0 : _Component$render.name); // eslint-disable-next-line @typescript-eslint/ban-ts-comment
   // @ts-ignore
 
-
   return function withDeprecationComponent(props) {
     if (deprecations.rename) {
-      console.warn("\u267B\uFE0F  ".concat(componentName, " is renamed to ").concat(deprecations.rename, "\n"));
+      warnOnce(componentName, "\u267B\uFE0F  ".concat(componentName, " is renamed to ").concat(deprecations.rename, "\n"));
     }
 
     handleErrorWarning(componentName, componentName, deprecations, 'component');

package/esm/admin/AutoComplete/AutoComplete.stories.js

@@ -1,7 +1,8 @@
 import AutoComplete from '@digigov/ui/admin/AutoComplete';
 export default {
   title: 'Digigov UI/admin/AutoComplete',
-  component: AutoComplete
+  component: AutoComplete,
+  displayName: 'AutoComplete'
 }; // eslint-disable-next-line digigov/no-relative-import
 
 export * from '@digigov/ui/admin/AutoComplete/__stories__/Default';

package/esm/admin/AutoComplete/Status/index.js

@@ -63,8 +63,8 @@ var Status = /*#__PURE__*/function (_Component) {
   }
 
   _createClass(Status, [{
-    key: "componentWillMount",
-    value: function componentWillMount() {
+    key: "UNSAFE_componentWillMount",
+    value: function UNSAFE_componentWillMount() {
       // eslint-disable-next-line @typescript-eslint/no-this-alias
       var that = this;
       this.debounceStatusUpdate = debounce(function () {
@@ -82,8 +82,8 @@ var Status = /*#__PURE__*/function (_Component) {
       }, statusDebounceMillis);
     }
   }, {
-    key: "componentWillReceiveProps",
-    value: function componentWillReceiveProps() {
+    key: "UNSAFE_componentWillReceiveProps",
+    value: function UNSAFE_componentWillReceiveProps() {
       this.setState({
         debounced: false
       });

package/esm/admin/AutoComplete/index.mdx

@@ -43,3 +43,7 @@ import AutoComplete from '@digigov/ui/admin/AutoComplete';
 This is the minimum number of characters that should be entered before the autocomplete will attempt to suggest options(in above example is 2)
 
 <Story packageName="@digigov/ui" component="admin/AutoComplete" story="WithMinLength.tsx" />
+
+## API
+
+<PropTypes packageName="@digigov/ui" component="AutoComplete" />

package/esm/admin/CircularProgress/CircularProgress.stories.js

@@ -1,6 +1,7 @@
-import CircularProgress from "@digigov/ui/admin";
+import CircularProgress from "@digigov/ui/admin/CircularProgress";
 export default {
   title: 'Digigov UI/admin/CircularProgress',
-  component: CircularProgress
+  component: CircularProgress,
+  displayName: 'CircularProgress'
 };
 export * from './__stories__/Default';

package/esm/admin/CircularProgress/__stories__/Default.js

@@ -1,9 +1,8 @@
 import React from 'react';
-import FullPageBackground from '@digigov/ui/admin/FullPageBackground';
 import LoaderContainer from '@digigov/ui/admin/LoaderContainer';
 import CircularProgress from '@digigov/ui/admin/CircularProgress';
 
-var _ref = /*#__PURE__*/React.createElement(FullPageBackground, null, /*#__PURE__*/React.createElement(LoaderContainer, null, /*#__PURE__*/React.createElement(CircularProgress, null)));
+var _ref = /*#__PURE__*/React.createElement(LoaderContainer, null, /*#__PURE__*/React.createElement(CircularProgress, null));
 
 export var Default = function Default() {
   return _ref;

package/esm/admin/CopyToClipboard/CopyToClipboard.stories.js

@@ -1,8 +1,8 @@
 import CopyToClipboard from '@digigov/ui/admin/CopyToClipboard';
 export default {
   title: 'Digigov UI/admin/CopyToClipboard',
-  component: CopyToClipboard
+  component: CopyToClipboard,
+  displayName: 'CopyToClipboard'
 };
 export * from '@digigov/ui/admin/CopyToClipboard/__stories__/Default';
-export * from '@digigov/ui/admin/CopyToClipboard/__stories__/Banner';
-export * from '@digigov/ui/admin/CopyToClipboard/__stories__/MultipleCopies';
+export * from '@digigov/ui/admin/CopyToClipboard/__stories__/Banner';

package/esm/admin/CopyToClipboard/index.mdx

@@ -17,6 +17,6 @@ import CopyToClipboard from '@digigov/ui/admin/CopyToClipboard';
 
 <Story packageName="@digigov/ui" component="admin/CopyToClipboard" story="Banner.tsx" />
 
-### Layout example
+## API
 
-<Story packageName="@digigov/ui" component="admin/CopyToClipboard" story="MultipleCopies.tsx" />
+<PropTypes packageName="@digigov/ui" component="CopyToClipboard" />

package/esm/admin/Drawer/Drawer.stories.js

@@ -1,3 +1,9 @@
+import Drawer from "@digigov/ui/admin/Drawer";
 export default {
-  title: 'Digigov UI/admin/Drawer'
-}; // export * from '@digigov/ui/admin/Drawer/__stories__/Default';
+  title: 'Digigov UI/admin/Drawer',
+  description: 'Use this component when you want to add a mobile friendly menu in admin layouts.',
+  link: 'https://guide.services.gov.gr/docs/drawer-layout',
+  component: Drawer,
+  displayName: 'Drawer'
+};
+export * from '@digigov/ui/admin/Drawer/__stories__/Default';

package/esm/admin/Drawer/__stories__/Default.js

@@ -1,13 +1,9 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import React, { useState } from 'react';
 import Drawer from '@digigov/ui/admin/Drawer';
-import { List, ListItem, BurgerIcon } from '@digigov/react-core';
-import { Button, Title } from '@digigov/ui';
-import { AdminAside, AdminContainer, AdminLayout, AdminMain, AdminTopSection, AdminHeader, AdminHeaderSection, DrawerHeading } from '@digigov/react-extensions/admin';
-import { GovGRLogo } from '@digigov/react-core';
-import { Card, CardHeading, CardText } from '@digigov/react-core';
-import Grid from '@digigov/react-core/Grid';
-import GovGRFooter from '@digigov/ui/govgr/Footer';
+import { List, ListItem } from '@digigov/ui/core/List';
+import Title from '@digigov/ui/typography/Title';
+import { DrawerHeading } from '@digigov/react-extensions/admin';
 
 function useDrawer() {
   var _useState = useState(true),
@@ -22,42 +18,13 @@ function useDrawer() {
   return [open, toggleDrawer];
 }
 
-var _ref = /*#__PURE__*/React.createElement(GovGRLogo, null);
-
-var _ref2 = /*#__PURE__*/React.createElement(BurgerIcon, null);
-
-var _ref3 = /*#__PURE__*/React.createElement(AdminTopSection, null);
-
-var _ref4 = /*#__PURE__*/React.createElement(Title, {
+var _ref = /*#__PURE__*/React.createElement(Title, {
   size: "md"
 }, "Menu");
 
-var _ref5 = /*#__PURE__*/React.createElement(List, {
+var _ref2 = /*#__PURE__*/React.createElement(List, {
   spaced: true
-}, /*#__PURE__*/React.createElement(ListItem, null, "Menu option 1"), /*#__PURE__*/React.createElement(ListItem, null, "Menu option 2"));
-
-var _ref6 = /*#__PURE__*/React.createElement(AdminMain, null, /*#__PURE__*/React.createElement(Grid, {
-  container: true,
-  spacing: 4
-}, /*#__PURE__*/React.createElement(Grid, {
-  item: true,
-  xs: 12,
-  lg: 6
-}, /*#__PURE__*/React.createElement(Card, null, /*#__PURE__*/React.createElement(CardHeading, null, "This is a Card"), /*#__PURE__*/React.createElement(CardText, null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."))), /*#__PURE__*/React.createElement(Grid, {
-  item: true,
-  xs: 12,
-  lg: 6
-}, /*#__PURE__*/React.createElement(Card, null, /*#__PURE__*/React.createElement(CardHeading, null, "This is a Card"), /*#__PURE__*/React.createElement(CardText, null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."))), /*#__PURE__*/React.createElement(Grid, {
-  item: true,
-  xs: 12,
-  lg: 6
-}, /*#__PURE__*/React.createElement(Card, null, /*#__PURE__*/React.createElement(CardHeading, null, "This is a Card"), /*#__PURE__*/React.createElement(CardText, null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."))), /*#__PURE__*/React.createElement(Grid, {
-  item: true,
-  xs: 12,
-  lg: 6
-}, /*#__PURE__*/React.createElement(Card, null, /*#__PURE__*/React.createElement(CardHeading, null, "This is a Card"), /*#__PURE__*/React.createElement(CardText, null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.")))));
-
-var _ref7 = /*#__PURE__*/React.createElement(GovGRFooter, null);
+}, /*#__PURE__*/React.createElement(ListItem, null, "List Item 1"), /*#__PURE__*/React.createElement(ListItem, null, "List Item 2"));
 
 export var Default = function Default() {
   var _useDrawer = useDrawer(),
@@ -65,19 +32,13 @@ export var Default = function Default() {
       open = _useDrawer2[0],
       toggleDrawer = _useDrawer2[1];
 
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(AdminLayout, null, /*#__PURE__*/React.createElement(AdminHeader, null, /*#__PURE__*/React.createElement(AdminHeaderSection, null, _ref, /*#__PURE__*/React.createElement(Button, {
-    className: "govgr-drawer__burger-icon",
-    onClick: function onClick() {
-      return toggleDrawer();
-    },
-    color: "secondary"
-  }, _ref2))), /*#__PURE__*/React.createElement(AdminContainer, null, /*#__PURE__*/React.createElement(AdminAside, null, _ref3, /*#__PURE__*/React.createElement(Drawer, {
+  return /*#__PURE__*/React.createElement(Drawer, {
     direction: "left",
     open: open
   }, /*#__PURE__*/React.createElement(DrawerHeading, {
     onClick: function onClick() {
       return toggleDrawer();
     }
-  }, _ref4), _ref5)), _ref6), _ref7));
+  }, _ref), _ref2);
 };
 export default Default;

package/esm/admin/Drawer/index.mdx

@@ -10,3 +10,7 @@ import Drawer from '@digigov/ui/app/Drawer';
 ## How to use
 
 <Story packageName="@digigov/ui" component="admin/Drawer" story="Default.tsx" />
+
+## API
+
+<PropTypes packageName="@digigov/ui" component="Drawer" />

package/esm/admin/Dropdown/Dropdown.stories.js

@@ -2,7 +2,10 @@
 import Dropdown from '@digigov/ui/admin/Dropdown';
 export default {
   title: 'Digigov UI/admin/Dropdown',
-  component: Dropdown
+  description: 'Use the dropdown component to provide more options to users in cases where there is not enough space such as tables, navbars, etc.',
+  link: 'https://guide.services.gov.gr/docs/patterns/admin-pages/components/dropdown',
+  component: Dropdown,
+  displayName: 'Dropdown'
 };
 export * from './__stories__/Default';
 export * from './__stories__/AlignRight';

package/esm/admin/Dropdown/__stories__/AlignRight.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import Dropdown, { DropdownButton, DropdownContent } from '@digigov/ui/admin/Dropdown';
 import Field from '@digigov/ui/core/Field';
-import Label from '@digigov/react-core/Label';
+import LabelContainer from '@digigov/react-core/LabelContainer';
 import SectionBreak from '@digigov/ui/core/Divider';
 import NavVertical from '@digigov/react-core/NavVertical';
 import { LabelTitle } from '@digigov/react-core/LabelTitle';
@@ -10,7 +10,8 @@ import NavVerticalItem from '@digigov/react-core/NavVerticalItem';
 import Button from '@digigov/ui/core/Button';
 
 var _ref = /*#__PURE__*/React.createElement(Dropdown, {
-  align: "right"
+  align: "right",
+  open: true
 }, /*#__PURE__*/React.createElement(DropdownButton, {
   role: "button",
   "aria-haspopup": "true",
@@ -21,7 +22,7 @@ var _ref = /*#__PURE__*/React.createElement(Dropdown, {
   id: "menu2"
 }, /*#__PURE__*/React.createElement(Field, {
   role: "menuitem"
-}, /*#__PURE__*/React.createElement(Label, null, /*#__PURE__*/React.createElement(LabelTitle, null, "\u038C\u03BD\u03BF\u03BC\u03B1 \u03C0\u03B5\u03B4\u03AF\u03BF\u03C5"), /*#__PURE__*/React.createElement(TextInput, {
+}, /*#__PURE__*/React.createElement(LabelContainer, null, /*#__PURE__*/React.createElement(LabelTitle, null, "\u038C\u03BD\u03BF\u03BC\u03B1 \u03C0\u03B5\u03B4\u03AF\u03BF\u03C5"), /*#__PURE__*/React.createElement(TextInput, {
   name: "input-name"
 }))), /*#__PURE__*/React.createElement(SectionBreak, {
   visible: true,

package/esm/admin/Dropdown/__stories__/Default.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import Dropdown, { DropdownButton, DropdownContent } from '@digigov/ui/admin/Dropdown';
 import Field from '@digigov/ui/core/Field';
-import Label from '@digigov/react-core/Label';
+import LabelContainer from '@digigov/react-core/LabelContainer';
 import SectionBreak from '@digigov/ui/core/Divider';
 import NavVertical from '@digigov/react-core/NavVertical';
 import { LabelTitle } from '@digigov/react-core/LabelTitle';
@@ -9,7 +9,9 @@ import TextInput from '@digigov/ui/core/TextInput';
 import NavVerticalItem from '@digigov/react-core/NavVerticalItem';
 import Button from '@digigov/ui/core/Button';
 
-var _ref = /*#__PURE__*/React.createElement(Dropdown, null, /*#__PURE__*/React.createElement(DropdownButton, {
+var _ref = /*#__PURE__*/React.createElement(Dropdown, {
+  open: true
+}, /*#__PURE__*/React.createElement(DropdownButton, {
   role: "button",
   "aria-haspopup": "true",
   "aria-controls": "menu2",
@@ -19,7 +21,7 @@ var _ref = /*#__PURE__*/React.createElement(Dropdown, null, /*#__PURE__*/React.c
   id: "menu2"
 }, /*#__PURE__*/React.createElement(Field, {
   role: "menuitem"
-}, /*#__PURE__*/React.createElement(Label, null, /*#__PURE__*/React.createElement(LabelTitle, null, "\u038C\u03BD\u03BF\u03BC\u03B1 \u03C0\u03B5\u03B4\u03AF\u03BF\u03C5"), /*#__PURE__*/React.createElement(TextInput, {
+}, /*#__PURE__*/React.createElement(LabelContainer, null, /*#__PURE__*/React.createElement(LabelTitle, null, "\u038C\u03BD\u03BF\u03BC\u03B1 \u03C0\u03B5\u03B4\u03AF\u03BF\u03C5"), /*#__PURE__*/React.createElement(TextInput, {
   name: "input-name"
 }))), /*#__PURE__*/React.createElement(SectionBreak, {
   visible: true,

package/esm/admin/Dropdown/__stories__/PlacementTop.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import Dropdown, { DropdownButton, DropdownContent } from '@digigov/ui/admin/Dropdown';
 import Field from '@digigov/ui/core/Field';
-import Label from '@digigov/react-core/Label';
+import LabelContainer from '@digigov/react-core/LabelContainer';
 import SectionBreak from '@digigov/ui/core/Divider';
 import NavVertical from '@digigov/react-core/NavVertical';
 import { LabelTitle } from '@digigov/react-core/LabelTitle';
@@ -10,7 +10,8 @@ import NavVerticalItem from '@digigov/react-core/NavVerticalItem';
 import Button from '@digigov/ui/core/Button';
 
 var _ref = /*#__PURE__*/React.createElement(Dropdown, {
-  placement: "top"
+  placement: "top",
+  open: true
 }, /*#__PURE__*/React.createElement(DropdownButton, {
   role: "button",
   "aria-haspopup": "true",
@@ -21,7 +22,7 @@ var _ref = /*#__PURE__*/React.createElement(Dropdown, {
   id: "menu2"
 }, /*#__PURE__*/React.createElement(Field, {
   role: "menuitem"
-}, /*#__PURE__*/React.createElement(Label, null, /*#__PURE__*/React.createElement(LabelTitle, null, "\u038C\u03BD\u03BF\u03BC\u03B1 \u03C0\u03B5\u03B4\u03AF\u03BF\u03C5"), /*#__PURE__*/React.createElement(TextInput, {
+}, /*#__PURE__*/React.createElement(LabelContainer, null, /*#__PURE__*/React.createElement(LabelTitle, null, "\u038C\u03BD\u03BF\u03BC\u03B1 \u03C0\u03B5\u03B4\u03AF\u03BF\u03C5"), /*#__PURE__*/React.createElement(TextInput, {
   name: "input-name"
 }))), /*#__PURE__*/React.createElement(SectionBreak, {
   visible: true,

package/esm/admin/Dropdown/index.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["closeBehaviour", "float"];
 import React, { useEffect, useRef } from 'react';
-import CoreDropdown from '@digigov/react-extensions/admin/Dropdown';
+import DropdownBase from '@digigov/react-extensions/admin/DropdownBase';
 export * from '@digigov/react-extensions/admin/DropdownButton';
 export * from '@digigov/react-extensions/admin/DropdownContent';
 
@@ -79,8 +79,9 @@ export var Dropdown = function Dropdown(_ref) {
   }, []); // eslint-disable-next-line @typescript-eslint/ban-ts-comment
   // @ts-ignore
 
-  return /*#__PURE__*/React.createElement(CoreDropdown, _extends({
+  return /*#__PURE__*/React.createElement(DropdownBase, _extends({
     ref: innerRef
   }, props));
 };
+export { DropdownBase };
 export default Dropdown;

package/esm/admin/Dropdown/index.mdx

@@ -26,4 +26,7 @@ You can display the dropdown menu to the top of the `Dropdown` button.
 
 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.
+
+## API
+
+<PropTypes packageName="@digigov/ui" component="Dropdown" />

package/esm/admin/Modal/Modal.stories.js

@@ -1,7 +1,10 @@
 import Modal from "@digigov/ui/admin/Modal";
 export default {
   title: 'Digigov UI/admin/Modal',
-  component: Modal
+  description: 'Use the modal component with caution when you need to provide critical information or ask for a decision.',
+  link: 'https://guide.services.gov.gr/docs/patterns/admin-pages/components/modal',
+  component: Modal,
+  displayName: 'Modal'
 };
 export * from './__stories__/Default';
 export * from './__stories__/AlertDialog';

package/esm/admin/Modal/__stories__/AlertDialog.js

@@ -1,41 +1,22 @@
-import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
-import Modal, { ModalHeading, ModalContent, ModalAction, useModal } from '@digigov/ui/admin/Modal';
+import Modal, { ModalHeading, ModalContent, ModalAction } from '@digigov/ui/admin/Modal';
 import { Button } from '@digigov/ui/core';
 import { Paragraph } from '@digigov/ui/typography';
 
-var _ref = /*#__PURE__*/React.createElement(ModalHeading, {
+var _ref = /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Modal, {
+  open: true,
+  role: "alertdialog",
+  "aria-labelledby": "modal-label",
+  "aria-describedby": "modal-content"
+}, /*#__PURE__*/React.createElement(ModalHeading, {
   id: "modal-label"
-}, "\u0395\u03C0\u03B9\u03B2\u03B5\u03B2\u03B1\u03AF\u03C9\u03C3\u03B7");
-
-var _ref2 = /*#__PURE__*/React.createElement(ModalContent, {
+}, "\u0395\u03C0\u03B9\u03B2\u03B5\u03B2\u03B1\u03AF\u03C9\u03C3\u03B7"), /*#__PURE__*/React.createElement(ModalContent, {
   id: "modal-content"
-}, /*#__PURE__*/React.createElement(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;"));
+}, /*#__PURE__*/React.createElement(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;")), /*#__PURE__*/React.createElement(ModalAction, null, /*#__PURE__*/React.createElement(Button, null, "\u0394\u03B9\u03B1\u03B3\u03C1\u03B1\u03C6\u03AE"), /*#__PURE__*/React.createElement(Button, {
+  variant: "link"
+}, "\u0391\u03BA\u03CD\u03C1\u03C9\u03C3\u03B7"))));
 
 export var AlertDialog = function AlertDialog() {
-  var _useModal = useModal(),
-      modalProps = _useModal.modalProps,
-      toggleModal = _useModal.toggleModal;
-
-  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Button, {
-    color: "warning",
-    id: "delete-button",
-    onClick: function onClick() {
-      return toggleModal();
-    }
-  }, "\u0394\u03B9\u03B1\u03B3\u03C1\u03B1\u03C6\u03AE"), /*#__PURE__*/React.createElement(Modal, _extends({}, modalProps, {
-    role: "alertdialog",
-    "aria-labelledby": "modal-label",
-    "aria-describedby": "modal-content"
-  }), _ref, _ref2, /*#__PURE__*/React.createElement(ModalAction, null, /*#__PURE__*/React.createElement(Button, {
-    onClick: function onClick() {
-      return toggleModal();
-    }
-  }, "\u0394\u03B9\u03B1\u03B3\u03C1\u03B1\u03C6\u03AE"), /*#__PURE__*/React.createElement(Button, {
-    variant: "link",
-    onClick: function onClick() {
-      return toggleModal();
-    }
-  }, "\u0391\u03BA\u03CD\u03C1\u03C9\u03C3\u03B7"))));
+  return _ref;
 };
 export default AlertDialog;

package/esm/admin/Modal/__stories__/Default.js

@@ -1,37 +1,22 @@
-import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
-import Modal, { ModalHeading, ModalContent, ModalAction, useModal } from '@digigov/ui/admin/Modal';
+import Modal, { ModalHeading, ModalContent, ModalAction } from '@digigov/ui/admin/Modal';
 import { Button, TextInput } from '@digigov/ui/core';
 import Field from '@digigov/ui/core/Field';
-import Label from '@digigov/react-core/Label';
+import LabelContainer from '@digigov/react-core/LabelContainer';
 
-var _ref = /*#__PURE__*/React.createElement(ModalHeading, {
+var _ref = /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Modal, {
+  open: true,
+  "aria-labelledby": "modal-label"
+}, /*#__PURE__*/React.createElement(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.createElement(ModalContent, null, /*#__PURE__*/React.createElement(Field, null, /*#__PURE__*/React.createElement(Label, 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.createElement(TextInput, {
+}, "\u03A0\u03C1\u03BF\u03C3\u03B8\u03AE\u03BA\u03B7 \u03C4\u03B7\u03BB\u03B5\u03C6\u03CE\u03BD\u03BF\u03C5"), /*#__PURE__*/React.createElement(ModalContent, null, /*#__PURE__*/React.createElement(Field, null, /*#__PURE__*/React.createElement(LabelContainer, 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.createElement(TextInput, {
   name: "inputext",
   characterWidth: 10
-}))));
-
-var _ref3 = /*#__PURE__*/React.createElement(Button, null, "\u03A5\u03C0\u03BF\u03B2\u03BF\u03BB\u03AE");
+})))), /*#__PURE__*/React.createElement(ModalAction, null, /*#__PURE__*/React.createElement(Button, null, "\u03A5\u03C0\u03BF\u03B2\u03BF\u03BB\u03AE"), /*#__PURE__*/React.createElement(Button, {
+  variant: "link"
+}, "\u0391\u03BA\u03CD\u03C1\u03C9\u03C3\u03B7"))));
 
 export var Default = function Default() {
-  var _useModal = useModal(),
-      toggleModal = _useModal.toggleModal,
-      modalProps = _useModal.modalProps;
-
-  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(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.createElement(Modal, _extends({}, modalProps, {
-    "aria-labelledby": "modal-label"
-  }), _ref, _ref2, /*#__PURE__*/React.createElement(ModalAction, null, _ref3, /*#__PURE__*/React.createElement(Button, {
-    variant: "link",
-    onClick: function onClick() {
-      return toggleModal();
-    }
-  }, "\u0391\u03BA\u03CD\u03C1\u03C9\u03C3\u03B7"))));
+  return _ref;
 };
 export default Default;

package/esm/admin/Modal/index.js

@@ -2,12 +2,12 @@ import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 var _excluded = ["open", "children", "onEscape"];
-export * from '@digigov/react-extensions/admin/Modal';
+export * from '@digigov/react-extensions/admin/ModalContainer';
 export * from '@digigov/react-extensions/admin/ModalHeading';
 export * from '@digigov/react-extensions/admin/ModalContent';
 export * from '@digigov/react-extensions/admin/ModalAction';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
-import ModalContainer from '@digigov/react-extensions/admin/Modal';
+import ModalContainer from '@digigov/react-extensions/admin/ModalContainer';
 import useKeypress from '@digigov/ui/hooks/useKeypress';
 export var useModal = function useModal() {
   var _useState = useState(false),

package/esm/admin/Modal/index.mdx

@@ -9,14 +9,6 @@ import Modal, {ModalHeading, ModalContent, ModalAction} from "@digigov/ui/admin/
 
 ## 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
 
@@ -24,3 +16,7 @@ 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.
+
+## API
+
+<PropTypes packageName="@digigov/ui" component="Modal" />

package/esm/admin/Pagination/Pagination.stories.js

@@ -1,6 +1,10 @@
 import Pagination from "@digigov/ui/admin/Pagination";
 export default {
   title: 'Digigov UI/admin/Pagination',
-  component: Pagination
+  description: 'Use the pagination component to let users browse through a long list.',
+  link: 'https://guide.services.gov.gr/docs/patterns/admin-pages/components/pagination',
+  component: Pagination,
+  displayName: 'Pagination'
 };
-export * from './__stories__/Default';
+export * from './__stories__/Default';
+export * from './__stories__/PaginationSmall';