@digigov/ui 0.28.1 → 0.28.3

package/es/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/es/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/es/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/es/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/es/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/es/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/es/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/es/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/es/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/es/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/es/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/es/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/es/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/es/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/es/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/es/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/es/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/es/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/es/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/es/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/es/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/es/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';

package/es/admin/Pagination/__stories__/Default.js

@@ -118,32 +118,6 @@ var _ref7 = /*#__PURE__*/React.createElement(Pagination, null, /*#__PURE__*/Reac
   direction: "right"
 })))));
 
-var _ref8 = /*#__PURE__*/React.createElement(Divider, {
-  visible: true,
-  size: "l"
-});
-
-var _ref9 = /*#__PURE__*/React.createElement(Pagination, null, /*#__PURE__*/React.createElement(PaginationLabel, {
-  start: 1,
-  end: 10,
-  total: 15
-}), /*#__PURE__*/React.createElement(PaginationList, null, /*#__PURE__*/React.createElement(PaginationListItem, {
-  inactive: true
-}, /*#__PURE__*/React.createElement(Link, null, /*#__PURE__*/React.createElement(ArrowIcon, {
-  direction: "left"
-}))), /*#__PURE__*/React.createElement(PaginationListItem, {
-  currentPage: true
-}, "1"), /*#__PURE__*/React.createElement(PaginationListItem, null, /*#__PURE__*/React.createElement(Link, {
-  href: "/page7"
-}, "2")), /*#__PURE__*/React.createElement(PaginationListItem, null, /*#__PURE__*/React.createElement(Link, null, /*#__PURE__*/React.createElement(ArrowIcon, {
-  direction: "right"
-})))));
-
-var _ref10 = /*#__PURE__*/React.createElement(Divider, {
-  visible: true,
-  size: "l"
-});
-
 export var Default = function Default() {
   return /*#__PURE__*/React.createElement("div", {
     className: "example"
@@ -151,6 +125,6 @@ export var Default = function Default() {
     t: function t(str) {
       return str;
     }
-  }, _ref, _ref2, _ref3, _ref4, _ref5, _ref6, _ref7, _ref8, _ref9, _ref10));
+  }, _ref, _ref2, _ref3, _ref4, _ref5, _ref6, _ref7));
 };
 export default Default;

package/es/admin/Pagination/__stories__/PaginationSmall.js

@@ -0,0 +1,38 @@
+import React from 'react';
+import Pagination, { PaginationList, PaginationListItem, PaginationLabel } from '@digigov/ui/admin/Pagination';
+import ArrowIcon from '@digigov/react-core/ArrowIcon';
+import Link from '@digigov/ui/core/Link';
+import Divider from '@digigov/ui/core/Divider';
+import { I18NProvider } from '@digigov/ui/app';
+
+var _ref = /*#__PURE__*/React.createElement(Pagination, null, /*#__PURE__*/React.createElement(PaginationLabel, {
+  start: 1,
+  end: 10,
+  total: 15
+}), /*#__PURE__*/React.createElement(PaginationList, null, /*#__PURE__*/React.createElement(PaginationListItem, {
+  inactive: true
+}, /*#__PURE__*/React.createElement(Link, null, /*#__PURE__*/React.createElement(ArrowIcon, {
+  direction: "left"
+}))), /*#__PURE__*/React.createElement(PaginationListItem, {
+  currentPage: true
+}, "1"), /*#__PURE__*/React.createElement(PaginationListItem, null, /*#__PURE__*/React.createElement(Link, {
+  href: "/page7"
+}, "2")), /*#__PURE__*/React.createElement(PaginationListItem, null, /*#__PURE__*/React.createElement(Link, null, /*#__PURE__*/React.createElement(ArrowIcon, {
+  direction: "right"
+})))));
+
+var _ref2 = /*#__PURE__*/React.createElement(Divider, {
+  visible: true,
+  size: "l"
+});
+
+export var PaginationSmall = function PaginationSmall() {
+  return /*#__PURE__*/React.createElement("div", {
+    className: "example"
+  }, /*#__PURE__*/React.createElement(I18NProvider, {
+    t: function t(str) {
+      return str;
+    }
+  }, _ref, _ref2));
+};
+export default PaginationSmall;

package/es/admin/Pagination/index.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import CorePaginationLabel from '@digigov/react-extensions/admin/PaginationLabel';
+import PaginationLabelContainer from '@digigov/react-extensions/admin/PaginationLabelContainer';
 import { I18nText } from '@digigov/ui/app/I18nText';
 
 /**
@@ -9,7 +9,7 @@ export var PaginationLabel = /*#__PURE__*/React.forwardRef(function PaginationLa
   var start = _ref.start,
       end = _ref.end,
       total = _ref.total;
-  return /*#__PURE__*/React.createElement(CorePaginationLabel, {
+  return /*#__PURE__*/React.createElement(PaginationLabelContainer, {
     ref: ref
   }, /*#__PURE__*/React.createElement(I18nText, {
     i18nKey: "pagination.label"
@@ -18,5 +18,6 @@ export var PaginationLabel = /*#__PURE__*/React.forwardRef(function PaginationLa
 export * from '@digigov/react-extensions/admin/Pagination';
 export * from '@digigov/react-extensions/admin/PaginationList';
 export * from '@digigov/react-extensions/admin/PaginationListItem';
+export { PaginationLabelContainer };
 import Pagination from '@digigov/react-extensions/admin/Pagination';
 export default Pagination;

package/es/admin/Pagination/index.mdx

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

package/es/admin/StepNav/StepNav.stories.js

@@ -2,6 +2,8 @@
 import StepNav from '@digigov/ui/admin/StepNav';
 export default {
   title: 'Digigov UI/admin/StepNav',
-  component: StepNav
+  description: 'The step by step navigation pattern presents an end to end journey in logical steps, with links to content that helps users complete each step.',
+  component: StepNav,
+  displayName: 'StepNav'
 };
 export * from './__stories__/Default';

package/es/admin/TaskList/TaskList.stories.js

@@ -1,6 +1,8 @@
 import TaskList from "@digigov/ui/admin/TaskList";
 export default {
   title: 'Digigov UI/admin/TaskList',
-  component: TaskList
+  description: 'Only use a task list page for longer transactions involving multiple tasks that users may need to complete over a number of sessions.',
+  component: TaskList,
+  displayName: 'TaskList'
 };
 export * from './__stories__/Default';