@digigov/ui 0.21.2 → 0.23.0

package/esm/admin/AutoComplete/index.mdx

@@ -0,0 +1,46 @@
+---
+id: autocomplete
+title: AutoComplete
+---
+
+
+Autocomplete is a feature in which an input field suggests a word based on user input. This allows users to quickly search 
+through, select from large collections of options and help services get more consistent data.
+
+## Usage
+
+
+### How to import
+
+```bash
+import AutoComplete from '@digigov/ui/admin/AutoComplete';
+``` 
+
+### AutoComplete
+
+<Story packageName="@digigov/ui" component="admin/AutoComplete" story="Default.tsx" />
+
+### AutoComplete with auto select
+
+<Story packageName="@digigov/ui" component="admin/AutoComplete" story="WithAutoSelect.tsx" />
+
+### AutoComplete with inline style
+
+<Story packageName="@digigov/ui" component="admin/AutoComplete" story="WithInLine.tsx" />
+
+
+### AutoComplete with default value
+
+<Story packageName="@digigov/ui" component="admin/AutoComplete" story="WithDefaultValue.tsx" />
+
+### AutoComplete with placeholder
+<Story packageName="@digigov/ui" component="admin/AutoComplete" story="WithPlaceHolder.tsx" />
+
+### AutoComplete with all option's values
+<Story packageName="@digigov/ui" component="admin/AutoComplete" story="WithShowAllValues.tsx" />
+
+### AutoComplete with min length
+
+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" />

package/esm/admin/AutoComplete/utils.js

@@ -0,0 +1,6 @@
+export default function suggest(query, syncResults) {
+  var results = ['Afghanistan', 'Akrotiri', 'Albania', 'Algeria', 'American Samoa', 'Andorra', 'Angola', 'Anguilla', 'Antarctica', 'Antigua and Barbuda', 'Argentina', 'Armenia', 'Aruba', 'Ashmore and Cartier Islands', 'Australia', 'Austria', 'Azerbaijan', 'Bahamas, The', 'Bahrain', 'Bangladesh', 'Barbados', 'Bassas da India', 'Belarus', 'Belgium', 'Belize', 'Benin', 'Bermuda', 'Bhutan', 'Bolivia', 'Bosnia and Herzegovina', 'Botswana', 'Bouvet Island', 'Brazil', 'British Indian Ocean Territory', 'British Virgin Islands', 'Brunei', 'Bulgaria', 'Burkina Faso', 'Burma', 'Burundi', 'Cambodia', 'Cameroon', 'Canada', 'Cape Verde', 'Cayman Islands', 'Central African Republic', 'Chad', 'Chile', 'China', 'Christmas Island', 'Clipperton Island', 'Cocos (Keeling) Islands', 'Colombia', 'Comoros', 'Congo', 'Cook Islands', 'Coral Sea Islands', 'Costa Rica', "Cote d'Ivoire", 'Croatia', 'Cuba', 'Cyprus', 'Czech Republic', 'Denmark', 'Dhekelia', 'Djibouti', 'Dominica', 'Dominican Republic', 'Ecuador', 'Egypt', 'El Salvador', 'Equatorial Guinea', 'Eritrea', 'Estonia', 'Ethiopia', 'Europa Island', 'Falkland Islands', 'Faroe Islands', 'Fiji', 'Finland', 'France', 'French Guiana', 'French Polynesia', 'French Southern and Antarctic Lands', 'Gabon', 'Gambia,', 'Gaza Strip', 'Georgia', 'Germany', 'Ghana', 'Gibraltar', 'Glorioso Islands', 'Greece', 'Greenland', 'Grenada', 'Guadeloupe', 'Guam', 'Guatemala', 'Guernsey', 'Guinea', 'Guinea-Bissau', 'Guyana', 'Haiti', 'Heard Island and McDonald Islands', 'Holy See (Vatican City)', 'Honduras', 'Hong Kong', 'Hungary', 'Iceland', 'India', 'Indonesia', 'Iran', 'Iraq', 'Ireland', 'Isle of Man', 'Israel', 'Italy', 'Jamaica', 'Jan Mayen', 'Japan', 'Jersey', 'Jordan', 'Juan de Nova Island', 'Kazakhstan', 'Kenya', 'Kiribati', 'Korea, North', 'Korea, South', 'Kuwait', 'Kyrgyzstan', 'Laos', 'Latvia', 'Lebanon', 'Lesotho', 'Liberia', 'Libya', 'Liechtenstein', 'Lithuania', 'Luxembourg', 'Macau', 'Macedonia', 'Madagascar', 'Malawi', 'Malaysia', 'Maldives', 'Mali', 'Malta', 'Marshall Islands', 'Martinique', 'Mauritania', 'Mauritius', 'Mayotte', 'Mexico', 'Micronesia, Federated States of', 'Moldova', 'Monaco', 'Mongolia', 'Montserrat', 'Morocco', 'Mozambique', 'Namibia', 'Nauru', 'Navassa Island', 'Nepal', 'Netherlands', 'Netherlands Antilles', 'New Caledonia', 'New Zealand', 'Nicaragua', 'Niger', 'Nigeria', 'Niue', 'Norfolk Island', 'Northern Mariana Islands', 'Norway', 'Oman', 'Pakistan', 'Palau', 'Panama', 'Papua New Guinea', 'Paracel Islands', 'Paraguay', 'Peru', 'Philippines', 'Pitcairn Islands', 'Poland', 'Portugal', 'Puerto Rico', 'Qatar', 'Reunion', 'Romania', 'Russia', 'Rwanda', 'Saint Helena', 'Saint Kitts and Nevis', 'Saint Lucia', 'Saint Pierre and Miquelon', 'Saint Vincent and the Grenadines', 'Samoa', 'San Marino', 'Sao Tome and Principe', 'Saudi Arabia', 'Senegal', 'Serbia and Montenegro', 'Seychelles', 'Sierra Leone', 'Singapore', 'Slovakia', 'Slovenia', 'Solomon Islands', 'Somalia', 'South Africa', 'South Georgia and the South Sandwich Islands', 'Spain', 'Spratly Islands', 'Sri Lanka', 'Sudan', 'Suriname', 'Svalbard', 'Swaziland', 'Sweden', 'Switzerland', 'Syria', 'Taiwan', 'Tajikistan', 'Tanzania', 'Thailand', 'Timor-Leste', 'Togo', 'Tokelau', 'Tonga', 'Trinidad and Tobago', 'Tromelin Island', 'Tunisia', 'Turkey', 'Turkmenistan', 'Turks and Caicos Islands', 'Tuvalu', 'Uganda', 'Ukraine', 'United Arab Emirates', 'United Kingdom', 'United States', 'Uruguay', 'Uzbekistan', 'Vanuatu', 'Venezuela', 'Vietnam', 'Virgin Islands', 'Wake Island', 'Wallis and Futuna', 'West Bank', 'Western Sahara', 'Yemen', 'Zambia', 'Zimbabwe'];
+  syncResults(query ? results.filter(function (result) {
+    return result.toLowerCase().indexOf(query.toLowerCase()) !== -1;
+  }) : []);
+}

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

@@ -0,0 +1,8 @@
+import CopyToClipboard from '@digigov/ui/admin/CopyToClipboard';
+export default {
+  title: 'Digigov UI/admin/CopyToClipboard',
+  component: 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';

package/esm/admin/CopyToClipboard/__stories__/Banner.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import { CopyToClipboard } from '@digigov/ui/admin';
+import { Button } from '@digigov/ui';
+
+var _ref = /*#__PURE__*/React.createElement(CopyToClipboard, {
+  text: "copied-text",
+  variant: "banner",
+  message: "text successfuly copied!"
+}, /*#__PURE__*/React.createElement(Button, {
+  color: "secondary"
+}, "Banner example"));
+
+export var Banner = function Banner() {
+  return _ref;
+};
+export default Banner;

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

@@ -0,0 +1,18 @@
+import React from 'react';
+import { CopyToClipboard } from '@digigov/ui/admin';
+import { Button } from '@digigov/ui';
+
+var _ref = /*#__PURE__*/React.createElement(CopyToClipboard, {
+  text: "copied-text",
+  variant: "tooltipLeft",
+  message: "text successfuly copied!",
+  id: "copy-to-clipboard"
+}, /*#__PURE__*/React.createElement(Button, {
+  color: "secondary",
+  "aria-describedby": "copy-to-clipboard"
+}, "Copy"));
+
+export var Default = function Default() {
+  return _ref;
+};
+export default Default;

package/{es/app/CopyToClipboard/__stories__/Default.js → esm/admin/CopyToClipboard/__stories__/MultipleCopies.js}

@@ -1,6 +1,6 @@
 import React from 'react';
-import CopyToClipboard from '@digigov/ui/app/CopyToClipboard';
-import { AdminAside, AdminContainer, AdminLayout, AdminMain, AdminTopSection, AdminHeader, AdminHeaderSection, Dropdown, DropdownButton, DropdownContent } from '@digigov/react-extensions/admin/';
+import { CopyToClipboard } from '@digigov/ui/admin';
+import { AdminAside, AdminContainer, AdminLayout, AdminMain, AdminTopSection, AdminHeader, AdminHeaderSection, Dropdown, DropdownButton, DropdownContent } from '@digigov/react-extensions/admin';
 import { MoreVertIcon, NavVertical, NavVerticalItem } from '@digigov/react-core';
 import { Accordion, AccordionItem, AccordionSectionSummary, AccordionSectionSummaryHeading } from '@digigov/ui/core/Accordion';
 import { SummaryList, SummaryListItem, SummaryListItemKey, SummaryListItemValue, SummaryListItemAction, Button, BackButton, ButtonGroup } from '@digigov/ui';
@@ -30,7 +30,9 @@ var fields = [{
   actions: ['Ανάθεση']
 }];
 
-var _ref = /*#__PURE__*/React.createElement(AdminHeader, null, /*#__PURE__*/React.createElement(AdminHeaderSection, null, /*#__PURE__*/React.createElement(HeaderContent, null, /*#__PURE__*/React.createElement(GovGRLogo, null), /*#__PURE__*/React.createElement(HeaderTitle, null, "\u0398\u03C5\u03C1\u03AF\u03B4\u03B5\u03C2")), /*#__PURE__*/React.createElement(HeaderSubtitle, null, /*#__PURE__*/React.createElement(Dropdown, null, /*#__PURE__*/React.createElement(DropdownButton, {
+var _ref = /*#__PURE__*/React.createElement(AdminHeader, null, /*#__PURE__*/React.createElement(AdminHeaderSection, null, /*#__PURE__*/React.createElement(HeaderContent, null, /*#__PURE__*/React.createElement(GovGRLogo, null), /*#__PURE__*/React.createElement(HeaderTitle, null, "\u0398\u03C5\u03C1\u03AF\u03B4\u03B5\u03C2")), /*#__PURE__*/React.createElement(HeaderSubtitle, null, /*#__PURE__*/React.createElement(Dropdown, {
+  align: "right"
+}, /*#__PURE__*/React.createElement(DropdownButton, {
   variant: "link"
 }, "\u0388\u03C7\u03B5\u03C4\u03B5 \u03C3\u03C5\u03BD\u03B4\u03B5\u03B8\u03B5\u03AF \u03C9\u03C2 \u039A\u03B1\u03BB\u03BB\u03B9\u03CC\u03C0\u03B7 \u03A0\u03B1\u03C0\u03B1\u03B4\u03BF\u03C0\u03BF\u03CD\u03BB\u03BF\u03C5", /*#__PURE__*/React.createElement(MoreVertIcon, null)), /*#__PURE__*/React.createElement(DropdownContent, null, /*#__PURE__*/React.createElement(NavVertical, null, /*#__PURE__*/React.createElement(NavVerticalItem, {
   href: "#"
@@ -57,7 +59,7 @@ var _ref3 = /*#__PURE__*/React.createElement(Title, {
 
 var _ref4 = /*#__PURE__*/React.createElement(ButtonGroup, null, /*#__PURE__*/React.createElement(CopyToClipboard, {
   text: "AAABBBFFFLLL",
-  variant: "tooltip",
+  variant: "tooltipLeft",
   message: "text successfuly copied!"
 }, /*#__PURE__*/React.createElement(Button, null, "\u0391\u03C0\u03AC\u03BD\u03C4\u03B7\u03C3\u03B7")), /*#__PURE__*/React.createElement(Button, {
   color: "secondary"
@@ -81,7 +83,7 @@ var _ref6 = /*#__PURE__*/React.createElement(Grid, {
   xs: 12
 }, /*#__PURE__*/React.createElement(CopyToClipboard, {
   text: "AAABBBFFFLLL",
-  variant: "tooltip",
+  variant: "tooltipLeft",
   message: "text successfuly copied!"
 }, /*#__PURE__*/React.createElement(Button, {
   color: "secondary"
@@ -89,7 +91,7 @@ var _ref6 = /*#__PURE__*/React.createElement(Grid, {
 
 var _ref7 = /*#__PURE__*/React.createElement(GovGRFooter, null);
 
-export var Default = function Default() {
+export var MultipleCopies = function MultipleCopies() {
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(AdminLayout, null, _ref, /*#__PURE__*/React.createElement(AdminContainer, null, _ref2, /*#__PURE__*/React.createElement(Grid, {
     item: true,
     md: 9,
@@ -106,7 +108,7 @@ export var Default = function Default() {
     }, /*#__PURE__*/React.createElement(SummaryListItemKey, null, field.name), /*#__PURE__*/React.createElement(SummaryListItemValue, null, field.value), /*#__PURE__*/React.createElement(SummaryListItemAction, null, /*#__PURE__*/React.createElement(ButtonGroup, null, field.actions && field.actions.map(function (action, subIndex) {
       return /*#__PURE__*/React.createElement(CopyToClipboard, {
         text: "MMMNNNKKKO",
-        variant: "tooltip",
+        variant: "tooltipRight",
         key: subIndex
       }, /*#__PURE__*/React.createElement(Button, {
         key: subIndex,
@@ -115,4 +117,4 @@ export var Default = function Default() {
     }))));
   }))), _ref5, _ref6)))), _ref7));
 };
-export default Default;
+export default MultipleCopies;

package/esm/admin/CopyToClipboard/index.js

@@ -7,7 +7,7 @@ import { useTranslation } from '@digigov/ui/app';
 export var CopyToClipboard = /*#__PURE__*/React.forwardRef(function CopyToClipboard(_ref, ref) {
   var text = _ref.text,
       _ref$variant = _ref.variant,
-      variant = _ref$variant === void 0 ? 'tooltip' : _ref$variant,
+      variant = _ref$variant === void 0 ? 'tooltipRight' : _ref$variant,
       message = _ref.message,
       children = _ref.children;
 
@@ -39,7 +39,8 @@ export var CopyToClipboard = /*#__PURE__*/React.forwardRef(function CopyToClipbo
     ref: ref
   }, children, enabled && /*#__PURE__*/React.createElement(CopyToClipboardMessage, {
     variant: variant,
-    enabled: enabled
+    enabled: enabled,
+    role: "tooltip"
   }, /*#__PURE__*/React.createElement(NormalText, null, message || t('copy-to-clipboard.message'))));
 });
 export default CopyToClipboard;

package/esm/admin/CopyToClipboard/index.mdx

@@ -0,0 +1,22 @@
+---
+id: copy-to-clipboard
+title: CopyToClipboard
+---
+
+```bash
+import CopyToClipboard from '@digigov/ui/admin/CopyToClipboard';
+``` 
+
+## How to use
+
+### Default
+
+<Story packageName="@digigov/ui" component="admin/CopyToClipboard" story="Default.tsx" />
+
+### Banner
+
+<Story packageName="@digigov/ui" component="admin/CopyToClipboard" story="Banner.tsx" />
+
+### Layout example
+
+<Story packageName="@digigov/ui" component="admin/CopyToClipboard" story="MultipleCopies.tsx" />

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

@@ -3,7 +3,7 @@ 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 { 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';

package/esm/admin/Drawer/index.mdx

@@ -0,0 +1,12 @@
+---
+id: drawer
+title: Drawer
+---
+
+```bash
+import Drawer from '@digigov/ui/app/Drawer';
+``` 
+
+## How to use
+
+<Story packageName="@digigov/ui" component="admin/Drawer" story="Default.tsx" />

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

@@ -0,0 +1,9 @@
+/* eslint-disable digigov/no-relative-imports */
+import Dropdown from '@digigov/ui/admin/Dropdown';
+export default {
+  title: 'Digigov UI/admin/Dropdown',
+  component: Dropdown
+};
+export * from './__stories__/Default';
+export * from './__stories__/AlignRight';
+export * from './__stories__/PlacementTop';

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

@@ -0,0 +1,56 @@
+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 { SectionBreak } from '@digigov/ui/core/Divider';
+import NavVertical from '@digigov/react-core/NavVertical';
+import { LabelTitle } from '@digigov/react-core/LabelTitle';
+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, {
+  align: "right"
+}, /*#__PURE__*/React.createElement(DropdownButton, {
+  role: "button",
+  "aria-haspopup": "true",
+  "aria-controls": "menu2",
+  arrow: true
+}, "\u0391\u03BD\u03B1\u03B6\u03B7\u03C4\u03B7\u03C3\u03B7"), /*#__PURE__*/React.createElement(DropdownContent, {
+  role: "menu",
+  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, {
+  name: "input-name"
+}))), /*#__PURE__*/React.createElement(SectionBreak, {
+  visible: true,
+  role: "separator"
+}), /*#__PURE__*/React.createElement(NavVertical, {
+  role: "menu"
+}, /*#__PURE__*/React.createElement(NavVerticalItem, {
+  role: "menuitem",
+  href: "#"
+}, "\u0395\u03C0\u03B5\u03BE\u03B5\u03C1\u03B3\u03B1\u03C3\u03AF\u03B1"), /*#__PURE__*/React.createElement(NavVerticalItem, {
+  role: "menuitem",
+  href: "#"
+}, "\u039C\u03B5\u03C4\u03B1\u03BA\u03AF\u03BD\u03B7\u03C3\u03B7"), /*#__PURE__*/React.createElement(NavVerticalItem, {
+  role: "menuitem",
+  href: "#"
+}, "\u039F\u03C1\u03B9\u03C3\u03C4\u03B9\u03BA\u03AE \u03B4\u03B9\u03B1\u03B3\u03C1\u03B1\u03C6\u03AE")), /*#__PURE__*/React.createElement(SectionBreak, {
+  visible: true,
+  role: "separator"
+}), /*#__PURE__*/React.createElement(Button, {
+  role: "menuitem"
+}, "\u0395\u03BD\u03AD\u03C1\u03B3\u03B5\u03B9\u03B1")));
+
+export var AlignRight = function AlignRight() {
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center'
+    }
+  }, _ref);
+};
+export default AlignRight;

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

@@ -0,0 +1,48 @@
+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 { SectionBreak } from '@digigov/ui/core/Divider';
+import NavVertical from '@digigov/react-core/NavVertical';
+import { LabelTitle } from '@digigov/react-core/LabelTitle';
+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, {
+  role: "button",
+  "aria-haspopup": "true",
+  "aria-controls": "menu2",
+  arrow: true
+}, "\u0391\u03BD\u03B1\u03B6\u03B7\u03C4\u03B7\u03C3\u03B7"), /*#__PURE__*/React.createElement(DropdownContent, {
+  role: "menu",
+  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, {
+  name: "input-name"
+}))), /*#__PURE__*/React.createElement(SectionBreak, {
+  visible: true,
+  role: "separator"
+}), /*#__PURE__*/React.createElement(NavVertical, {
+  role: "menu"
+}, /*#__PURE__*/React.createElement(NavVerticalItem, {
+  role: "menuitem",
+  href: "#"
+}, "\u0395\u03C0\u03B5\u03BE\u03B5\u03C1\u03B3\u03B1\u03C3\u03AF\u03B1"), /*#__PURE__*/React.createElement(NavVerticalItem, {
+  role: "menuitem",
+  href: "#"
+}, "\u039C\u03B5\u03C4\u03B1\u03BA\u03AF\u03BD\u03B7\u03C3\u03B7"), /*#__PURE__*/React.createElement(NavVerticalItem, {
+  role: "menuitem",
+  href: "#"
+}, "\u039F\u03C1\u03B9\u03C3\u03C4\u03B9\u03BA\u03AE \u03B4\u03B9\u03B1\u03B3\u03C1\u03B1\u03C6\u03AE")), /*#__PURE__*/React.createElement(SectionBreak, {
+  visible: true,
+  role: "separator"
+}), /*#__PURE__*/React.createElement(Button, {
+  role: "menuitem"
+}, "\u0395\u03BD\u03AD\u03C1\u03B3\u03B5\u03B9\u03B1")));
+
+export var Default = function Default() {
+  return _ref;
+};
+export default Default;

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

@@ -0,0 +1,56 @@
+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 { SectionBreak } from '@digigov/ui/core/Divider';
+import NavVertical from '@digigov/react-core/NavVertical';
+import { LabelTitle } from '@digigov/react-core/LabelTitle';
+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, {
+  placement: "top"
+}, /*#__PURE__*/React.createElement(DropdownButton, {
+  role: "button",
+  "aria-haspopup": "true",
+  "aria-controls": "menu2",
+  arrow: true
+}, "\u0391\u03BD\u03B1\u03B6\u03B7\u03C4\u03B7\u03C3\u03B7"), /*#__PURE__*/React.createElement(DropdownContent, {
+  role: "menu",
+  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, {
+  name: "input-name"
+}))), /*#__PURE__*/React.createElement(SectionBreak, {
+  visible: true,
+  role: "separator"
+}), /*#__PURE__*/React.createElement(NavVertical, {
+  role: "menu"
+}, /*#__PURE__*/React.createElement(NavVerticalItem, {
+  role: "menuitem",
+  href: "#"
+}, "\u0395\u03C0\u03B5\u03BE\u03B5\u03C1\u03B3\u03B1\u03C3\u03AF\u03B1"), /*#__PURE__*/React.createElement(NavVerticalItem, {
+  role: "menuitem",
+  href: "#"
+}, "\u039C\u03B5\u03C4\u03B1\u03BA\u03AF\u03BD\u03B7\u03C3\u03B7"), /*#__PURE__*/React.createElement(NavVerticalItem, {
+  role: "menuitem",
+  href: "#"
+}, "\u039F\u03C1\u03B9\u03C3\u03C4\u03B9\u03BA\u03AE \u03B4\u03B9\u03B1\u03B3\u03C1\u03B1\u03C6\u03AE")), /*#__PURE__*/React.createElement(SectionBreak, {
+  visible: true,
+  role: "separator"
+}), /*#__PURE__*/React.createElement(Button, {
+  role: "menuitem"
+}, "\u0395\u03BD\u03AD\u03C1\u03B3\u03B5\u03B9\u03B1")));
+
+export var PlacementTop = function PlacementTop() {
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center'
+    }
+  }, _ref);
+};
+export default PlacementTop;

package/esm/admin/Dropdown/index.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["closeBehaviour"];
+var _excluded = ["closeBehaviour", "float"];
 import React, { useEffect, useRef } from 'react';
 import CoreDropdown from '@digigov/react-extensions/admin/Dropdown';
 export * from '@digigov/react-extensions/admin/DropdownButton';
@@ -12,6 +12,8 @@ export * from '@digigov/react-extensions/admin/DropdownContent';
 export 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 = _objectWithoutProperties(_ref, _excluded);
 
   var innerRef = useRef();
@@ -26,10 +28,35 @@ export 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/esm/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/esm/admin/FilterSection/index.js

@@ -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/esm/admin/Modal/Modal.stories.js

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

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

@@ -0,0 +1,58 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import React, { useState } from "react";
+import Modal, { ModalHeading, ModalContent, ModalAction } from "@digigov/ui/admin/Modal";
+import { Button } from "@digigov/ui/core";
+import { Paragraph } from "@digigov/ui/typography";
+
+function useModal() {
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      open = _useState2[0],
+      setOpen = _useState2[1];
+
+  function toggleModal() {
+    setOpen(!open);
+  }
+
+  return {
+    open: open,
+    toggleModal: toggleModal
+  };
+}
+
+var _ref = /*#__PURE__*/React.createElement(ModalHeading, {
+  id: "modal-label"
+}, "\u0395\u03C0\u03B9\u03B2\u03B5\u03B2\u03B1\u03AF\u03C9\u03C3\u03B7");
+
+var _ref2 = /*#__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;"));
+
+export var AlertDialog = function AlertDialog() {
+  var _useModal = useModal(),
+      open = _useModal.open,
+      toggleModal = _useModal.toggleModal;
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
+    color: "warning",
+    onClick: function onClick() {
+      return toggleModal();
+    }
+  }, "\u0394\u03B9\u03B1\u03B3\u03C1\u03B1\u03C6\u03AE"), /*#__PURE__*/React.createElement(Modal, {
+    open: open,
+    role: "alertdialog",
+    "aria-modal": "true",
+    "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"))));
+};
+export default AlertDialog;

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

@@ -0,0 +1,56 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import React, { useState } from "react";
+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";
+
+function useModal() {
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      open = _useState2[0],
+      setOpen = _useState2[1];
+
+  function toggleModal() {
+    setOpen(!open);
+  }
+
+  return {
+    open: open,
+    toggleModal: toggleModal
+  };
+}
+
+var _ref = /*#__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, {
+  name: "inputext",
+  characterWidth: 10
+}))));
+
+var _ref3 = /*#__PURE__*/React.createElement(Button, null, "\u03A5\u03C0\u03BF\u03B2\u03BF\u03BB\u03AE");
+
+export var Default = function Default() {
+  var _useModal = useModal(),
+      open = _useModal.open,
+      toggleModal = _useModal.toggleModal;
+
+  return /*#__PURE__*/React.createElement(React.Fragment, 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, {
+    open: open,
+    role: "dialog",
+    "aria-modal": "true",
+    "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"))));
+};
+export default Default;