@digigov/ui 1.0.0-8bbf3ef2 → 1.0.0-a131264d

package/navigation/Dropdown/__stories__/AlignRight.js

@@ -9,28 +9,28 @@ exports["default"] = exports.AlignRight = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _Button = require("@digigov/ui/form/Button");
+var _Button = require("../../../form/Button");
 
-var _FieldContainer = require("@digigov/ui/form/FieldContainer");
+var _FieldContainer = require("../../../form/FieldContainer");
 
-var _LabelContainer = require("@digigov/ui/form/LabelContainer");
+var _LabelContainer = require("../../../form/LabelContainer");
 
-var _TextInput = require("@digigov/ui/form/TextInput");
+var _TextInput = require("../../../form/TextInput");
 
-var _SectionBreak = require("@digigov/ui/layouts/SectionBreak");
+var _SectionBreak = require("../../../layouts/SectionBreak");
 
-var _Dropdown = require("@digigov/ui/navigation/Dropdown");
+var _ = require("./..");
 
-var _NavList = require("@digigov/ui/navigation/NavList");
+var _NavList = require("../../NavList");
 
-var _ref = /*#__PURE__*/_react["default"].createElement(_Dropdown.Dropdown, {
+var _ref = /*#__PURE__*/_react["default"].createElement(_.Dropdown, {
   align: "right"
-}, /*#__PURE__*/_react["default"].createElement(_Dropdown.DropdownButton, {
+}, /*#__PURE__*/_react["default"].createElement(_.DropdownButton, {
   role: "button",
   "aria-haspopup": "true",
   "aria-controls": "menu2",
   arrow: true
-}, "\u0391\u03BD\u03B1\u03B6\u03AE\u03C4\u03B7\u03C3\u03B7"), /*#__PURE__*/_react["default"].createElement(_Dropdown.DropdownContent, {
+}, "\u0391\u03BD\u03B1\u03B6\u03AE\u03C4\u03B7\u03C3\u03B7"), /*#__PURE__*/_react["default"].createElement(_.DropdownContent, {
   role: "menu",
   id: "menu2"
 }, /*#__PURE__*/_react["default"].createElement(_FieldContainer.FieldContainer, {

package/navigation/Dropdown/__stories__/AlignRight.mjs

@@ -0,0 +1,56 @@
+import React from 'react';
+import { Button } from "../../../form/Button";
+import { FieldContainer } from "../../../form/FieldContainer";
+import { LabelContainer } from "../../../form/LabelContainer";
+import { LabelTitle } from "../../../form/LabelContainer";
+import { TextInput } from "../../../form/TextInput";
+import { SectionBreak } from "../../../layouts/SectionBreak";
+import { Dropdown, DropdownButton, DropdownContent } from "./..";
+import { NavList, NavListItemAction } from "../../NavList";
+
+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\u03AE\u03C4\u03B7\u03C3\u03B7"), /*#__PURE__*/React.createElement(DropdownContent, {
+  role: "menu",
+  id: "menu2"
+}, /*#__PURE__*/React.createElement(FieldContainer, {
+  role: "menuitem"
+}, /*#__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, {
+  role: "separator",
+  paddingBottom: 0,
+  paddingTop: 0
+}), /*#__PURE__*/React.createElement(NavList, {
+  layout: "vertical"
+}, /*#__PURE__*/React.createElement(NavListItemAction, {
+  role: "menuitem",
+  href: "#"
+}, "\u0395\u03C0\u03B5\u03BE\u03B5\u03C1\u03B3\u03B1\u03C3\u03AF\u03B1"), /*#__PURE__*/React.createElement(NavListItemAction, {
+  role: "menuitem",
+  href: "#"
+}, "\u039C\u03B5\u03C4\u03B1\u03BA\u03AF\u03BD\u03B7\u03C3\u03B7"), /*#__PURE__*/React.createElement(NavListItemAction, {
+  role: "menuitem",
+  href: "#"
+}, "\u039F\u03C1\u03B9\u03C3\u03C4\u03B9\u03BA\u03AE \u03B4\u03B9\u03B1\u03B3\u03C1\u03B1\u03C6\u03AE")), /*#__PURE__*/React.createElement(SectionBreak, {
+  role: "separator"
+}), /*#__PURE__*/React.createElement(Button, {
+  role: "menuitem",
+  color: "secondary"
+}, "\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/navigation/Dropdown/__stories__/ContentPosition.d.ts

@@ -0,0 +1,2 @@
+export declare const ContentPosition: () => JSX.Element;
+export default ContentPosition;

package/navigation/Dropdown/__stories__/ContentPosition.js

@@ -0,0 +1,114 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.ContentPosition = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _ = require("./..");
+
+var _NavList = require("../../NavList");
+
+var _Button = require("../../../form/Button");
+
+var _ref = /*#__PURE__*/_react["default"].createElement(_Button.ButtonGroup, null, /*#__PURE__*/_react["default"].createElement(_.DropdownBase, {
+  align: "right"
+}, /*#__PURE__*/_react["default"].createElement(_.DropdownButton, {
+  role: "button",
+  "aria-haspopup": "true",
+  "aria-controls": "menu2",
+  color: "secondary"
+}, "Align right"), /*#__PURE__*/_react["default"].createElement(_.DropdownContent, {
+  role: "menu",
+  id: "menu2",
+  marginTop: 4
+}, /*#__PURE__*/_react["default"].createElement(_NavList.NavList, {
+  layout: "vertical"
+}, /*#__PURE__*/_react["default"].createElement(_NavList.NavListItemAction, {
+  role: "menuitem",
+  href: "#"
+}, "\u0395\u03C0\u03B5\u03BE\u03B5\u03C1\u03B3\u03B1\u03C3\u03AF\u03B1"), /*#__PURE__*/_react["default"].createElement(_NavList.NavListItemAction, {
+  role: "menuitem",
+  href: "#"
+}, "\u039C\u03B5\u03C4\u03B1\u03BA\u03AF\u03BD\u03B7\u03C3\u03B7"), /*#__PURE__*/_react["default"].createElement(_NavList.NavListItemAction, {
+  role: "menuitem",
+  href: "#"
+}, "\u039F\u03C1\u03B9\u03C3\u03C4\u03B9\u03BA\u03AE \u03B4\u03B9\u03B1\u03B3\u03C1\u03B1\u03C6\u03AE")))), /*#__PURE__*/_react["default"].createElement(_.DropdownBase, {
+  align: "left"
+}, /*#__PURE__*/_react["default"].createElement(_.DropdownButton, {
+  role: "button",
+  "aria-haspopup": "true",
+  "aria-controls": "menu2",
+  color: "secondary"
+}, "Align left"), /*#__PURE__*/_react["default"].createElement(_.DropdownContent, {
+  role: "menu",
+  id: "menu2",
+  marginTop: 4
+}, /*#__PURE__*/_react["default"].createElement(_NavList.NavList, {
+  layout: "vertical"
+}, /*#__PURE__*/_react["default"].createElement(_NavList.NavListItemAction, {
+  role: "menuitem",
+  href: "#"
+}, "\u0395\u03C0\u03B5\u03BE\u03B5\u03C1\u03B3\u03B1\u03C3\u03AF\u03B1"), /*#__PURE__*/_react["default"].createElement(_NavList.NavListItemAction, {
+  role: "menuitem",
+  href: "#"
+}, "\u039C\u03B5\u03C4\u03B1\u03BA\u03AF\u03BD\u03B7\u03C3\u03B7"), /*#__PURE__*/_react["default"].createElement(_NavList.NavListItemAction, {
+  role: "menuitem",
+  href: "#"
+}, "\u039F\u03C1\u03B9\u03C3\u03C4\u03B9\u03BA\u03AE \u03B4\u03B9\u03B1\u03B3\u03C1\u03B1\u03C6\u03AE")))), /*#__PURE__*/_react["default"].createElement(_.DropdownBase, {
+  placement: "top"
+}, /*#__PURE__*/_react["default"].createElement(_.DropdownButton, {
+  role: "button",
+  "aria-haspopup": "true",
+  "aria-controls": "menu2",
+  color: "secondary"
+}, "Placement top"), /*#__PURE__*/_react["default"].createElement(_.DropdownContent, {
+  role: "menu",
+  id: "menu2",
+  marginTop: 4
+}, /*#__PURE__*/_react["default"].createElement(_NavList.NavList, {
+  layout: "vertical"
+}, /*#__PURE__*/_react["default"].createElement(_NavList.NavListItemAction, {
+  role: "menuitem",
+  href: "#"
+}, "\u0395\u03C0\u03B5\u03BE\u03B5\u03C1\u03B3\u03B1\u03C3\u03AF\u03B1"), /*#__PURE__*/_react["default"].createElement(_NavList.NavListItemAction, {
+  role: "menuitem",
+  href: "#"
+}, "\u039C\u03B5\u03C4\u03B1\u03BA\u03AF\u03BD\u03B7\u03C3\u03B7"), /*#__PURE__*/_react["default"].createElement(_NavList.NavListItemAction, {
+  role: "menuitem",
+  href: "#"
+}, "\u039F\u03C1\u03B9\u03C3\u03C4\u03B9\u03BA\u03AE \u03B4\u03B9\u03B1\u03B3\u03C1\u03B1\u03C6\u03AE")))), /*#__PURE__*/_react["default"].createElement(_.DropdownBase, {
+  placement: "bottom"
+}, /*#__PURE__*/_react["default"].createElement(_.DropdownButton, {
+  role: "button",
+  "aria-haspopup": "true",
+  "aria-controls": "menu2",
+  color: "secondary"
+}, "Placement bottom"), /*#__PURE__*/_react["default"].createElement(_.DropdownContent, {
+  role: "menu",
+  id: "menu2",
+  marginTop: 4
+}, /*#__PURE__*/_react["default"].createElement(_NavList.NavList, {
+  layout: "vertical"
+}, /*#__PURE__*/_react["default"].createElement(_NavList.NavListItemAction, {
+  role: "menuitem",
+  href: "#"
+}, "\u0395\u03C0\u03B5\u03BE\u03B5\u03C1\u03B3\u03B1\u03C3\u03AF\u03B1"), /*#__PURE__*/_react["default"].createElement(_NavList.NavListItemAction, {
+  role: "menuitem",
+  href: "#"
+}, "\u039C\u03B5\u03C4\u03B1\u03BA\u03AF\u03BD\u03B7\u03C3\u03B7"), /*#__PURE__*/_react["default"].createElement(_NavList.NavListItemAction, {
+  role: "menuitem",
+  href: "#"
+}, "\u039F\u03C1\u03B9\u03C3\u03C4\u03B9\u03BA\u03AE \u03B4\u03B9\u03B1\u03B3\u03C1\u03B1\u03C6\u03AE")))));
+
+var ContentPosition = function ContentPosition() {
+  return _ref;
+};
+
+exports.ContentPosition = ContentPosition;
+var _default = ContentPosition;
+exports["default"] = _default;

package/navigation/Dropdown/__stories__/ContentPosition.mjs

@@ -0,0 +1,99 @@
+import React from 'react';
+import { DropdownBase, DropdownButton, DropdownContent } from "./..";
+import { NavListItemAction, NavList } from "../../NavList";
+import { ButtonGroup } from "../../../form/Button";
+
+var _ref = /*#__PURE__*/React.createElement(ButtonGroup, null, /*#__PURE__*/React.createElement(DropdownBase, {
+  align: "right"
+}, /*#__PURE__*/React.createElement(DropdownButton, {
+  role: "button",
+  "aria-haspopup": "true",
+  "aria-controls": "menu2",
+  color: "secondary"
+}, "Align right"), /*#__PURE__*/React.createElement(DropdownContent, {
+  role: "menu",
+  id: "menu2",
+  marginTop: 4
+}, /*#__PURE__*/React.createElement(NavList, {
+  layout: "vertical"
+}, /*#__PURE__*/React.createElement(NavListItemAction, {
+  role: "menuitem",
+  href: "#"
+}, "\u0395\u03C0\u03B5\u03BE\u03B5\u03C1\u03B3\u03B1\u03C3\u03AF\u03B1"), /*#__PURE__*/React.createElement(NavListItemAction, {
+  role: "menuitem",
+  href: "#"
+}, "\u039C\u03B5\u03C4\u03B1\u03BA\u03AF\u03BD\u03B7\u03C3\u03B7"), /*#__PURE__*/React.createElement(NavListItemAction, {
+  role: "menuitem",
+  href: "#"
+}, "\u039F\u03C1\u03B9\u03C3\u03C4\u03B9\u03BA\u03AE \u03B4\u03B9\u03B1\u03B3\u03C1\u03B1\u03C6\u03AE")))), /*#__PURE__*/React.createElement(DropdownBase, {
+  align: "left"
+}, /*#__PURE__*/React.createElement(DropdownButton, {
+  role: "button",
+  "aria-haspopup": "true",
+  "aria-controls": "menu2",
+  color: "secondary"
+}, "Align left"), /*#__PURE__*/React.createElement(DropdownContent, {
+  role: "menu",
+  id: "menu2",
+  marginTop: 4
+}, /*#__PURE__*/React.createElement(NavList, {
+  layout: "vertical"
+}, /*#__PURE__*/React.createElement(NavListItemAction, {
+  role: "menuitem",
+  href: "#"
+}, "\u0395\u03C0\u03B5\u03BE\u03B5\u03C1\u03B3\u03B1\u03C3\u03AF\u03B1"), /*#__PURE__*/React.createElement(NavListItemAction, {
+  role: "menuitem",
+  href: "#"
+}, "\u039C\u03B5\u03C4\u03B1\u03BA\u03AF\u03BD\u03B7\u03C3\u03B7"), /*#__PURE__*/React.createElement(NavListItemAction, {
+  role: "menuitem",
+  href: "#"
+}, "\u039F\u03C1\u03B9\u03C3\u03C4\u03B9\u03BA\u03AE \u03B4\u03B9\u03B1\u03B3\u03C1\u03B1\u03C6\u03AE")))), /*#__PURE__*/React.createElement(DropdownBase, {
+  placement: "top"
+}, /*#__PURE__*/React.createElement(DropdownButton, {
+  role: "button",
+  "aria-haspopup": "true",
+  "aria-controls": "menu2",
+  color: "secondary"
+}, "Placement top"), /*#__PURE__*/React.createElement(DropdownContent, {
+  role: "menu",
+  id: "menu2",
+  marginTop: 4
+}, /*#__PURE__*/React.createElement(NavList, {
+  layout: "vertical"
+}, /*#__PURE__*/React.createElement(NavListItemAction, {
+  role: "menuitem",
+  href: "#"
+}, "\u0395\u03C0\u03B5\u03BE\u03B5\u03C1\u03B3\u03B1\u03C3\u03AF\u03B1"), /*#__PURE__*/React.createElement(NavListItemAction, {
+  role: "menuitem",
+  href: "#"
+}, "\u039C\u03B5\u03C4\u03B1\u03BA\u03AF\u03BD\u03B7\u03C3\u03B7"), /*#__PURE__*/React.createElement(NavListItemAction, {
+  role: "menuitem",
+  href: "#"
+}, "\u039F\u03C1\u03B9\u03C3\u03C4\u03B9\u03BA\u03AE \u03B4\u03B9\u03B1\u03B3\u03C1\u03B1\u03C6\u03AE")))), /*#__PURE__*/React.createElement(DropdownBase, {
+  placement: "bottom"
+}, /*#__PURE__*/React.createElement(DropdownButton, {
+  role: "button",
+  "aria-haspopup": "true",
+  "aria-controls": "menu2",
+  color: "secondary"
+}, "Placement bottom"), /*#__PURE__*/React.createElement(DropdownContent, {
+  role: "menu",
+  id: "menu2",
+  marginTop: 4
+}, /*#__PURE__*/React.createElement(NavList, {
+  layout: "vertical"
+}, /*#__PURE__*/React.createElement(NavListItemAction, {
+  role: "menuitem",
+  href: "#"
+}, "\u0395\u03C0\u03B5\u03BE\u03B5\u03C1\u03B3\u03B1\u03C3\u03AF\u03B1"), /*#__PURE__*/React.createElement(NavListItemAction, {
+  role: "menuitem",
+  href: "#"
+}, "\u039C\u03B5\u03C4\u03B1\u03BA\u03AF\u03BD\u03B7\u03C3\u03B7"), /*#__PURE__*/React.createElement(NavListItemAction, {
+  role: "menuitem",
+  href: "#"
+}, "\u039F\u03C1\u03B9\u03C3\u03C4\u03B9\u03BA\u03AE \u03B4\u03B9\u03B1\u03B3\u03C1\u03B1\u03C6\u03AE")))));
+
+export var ContentPosition = function ContentPosition() {
+  return _ref;
+};
+export default ContentPosition;

package/navigation/Dropdown/__stories__/Default.js

@@ -9,26 +9,24 @@ exports["default"] = exports.Default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _Button = require("@digigov/ui/form/Button");
+var _FieldContainer = require("../../../form/FieldContainer");
 
-var _FieldContainer = require("@digigov/ui/form/FieldContainer");
+var _LabelContainer = require("../../../form/LabelContainer");
 
-var _LabelContainer = require("@digigov/ui/form/LabelContainer");
+var _TextInput = require("../../../form/TextInput");
 
-var _TextInput = require("@digigov/ui/form/TextInput");
+var _SectionBreak = require("../../../layouts/SectionBreak");
 
-var _SectionBreak = require("@digigov/ui/layouts/SectionBreak");
+var _ = require("./..");
 
-var _Dropdown = require("@digigov/ui/navigation/Dropdown");
+var _NavList = require("../../NavList");
 
-var _NavList = require("@digigov/ui/navigation/NavList");
-
-var _ref = /*#__PURE__*/_react["default"].createElement(_Dropdown.Dropdown, null, /*#__PURE__*/_react["default"].createElement(_Dropdown.DropdownButton, {
+var _ref = /*#__PURE__*/_react["default"].createElement(_.Dropdown, null, /*#__PURE__*/_react["default"].createElement(_.DropdownButton, {
   role: "button",
   "aria-haspopup": "true",
   "aria-controls": "menu2",
   arrow: true
-}, "\u0391\u03BD\u03B1\u03B6\u03AE\u03C4\u03B7\u03C3\u03B7"), /*#__PURE__*/_react["default"].createElement(_Dropdown.DropdownContent, {
+}, "\u0395\u03BD\u03AD\u03C1\u03B3\u03B5\u03B9\u03B5\u03C2"), /*#__PURE__*/_react["default"].createElement(_.DropdownContent, {
   role: "menu",
   id: "menu2"
 }, /*#__PURE__*/_react["default"].createElement(_FieldContainer.FieldContainer, {
@@ -50,12 +48,7 @@ var _ref = /*#__PURE__*/_react["default"].createElement(_Dropdown.Dropdown, null
 }, "\u039C\u03B5\u03C4\u03B1\u03BA\u03AF\u03BD\u03B7\u03C3\u03B7"), /*#__PURE__*/_react["default"].createElement(_NavList.NavListItemAction, {
   role: "menuitem",
   href: "#"
-}, "\u039F\u03C1\u03B9\u03C3\u03C4\u03B9\u03BA\u03AE \u03B4\u03B9\u03B1\u03B3\u03C1\u03B1\u03C6\u03AE")), /*#__PURE__*/_react["default"].createElement(_SectionBreak.SectionBreak, {
-  role: "separator"
-}), /*#__PURE__*/_react["default"].createElement(_Button.Button, {
-  role: "menuitem",
-  color: "secondary"
-}, "\u0395\u03BD\u03AD\u03C1\u03B3\u03B5\u03B9\u03B1")));
+}, "\u039F\u03C1\u03B9\u03C3\u03C4\u03B9\u03BA\u03AE \u03B4\u03B9\u03B1\u03B3\u03C1\u03B1\u03C6\u03AE"))));
 
 var Default = function Default() {
   return _ref;

package/navigation/Dropdown/__stories__/Default.mjs

@@ -0,0 +1,42 @@
+import React from 'react';
+import { FieldContainer } from "../../../form/FieldContainer";
+import { LabelContainer } from "../../../form/LabelContainer";
+import { LabelTitle } from "../../../form/LabelContainer";
+import { TextInput } from "../../../form/TextInput";
+import { SectionBreak } from "../../../layouts/SectionBreak";
+import { Dropdown, DropdownButton, DropdownContent } from "./..";
+import { NavListItemAction, NavList } from "../../NavList";
+
+var _ref = /*#__PURE__*/React.createElement(Dropdown, null, /*#__PURE__*/React.createElement(DropdownButton, {
+  role: "button",
+  "aria-haspopup": "true",
+  "aria-controls": "menu2",
+  arrow: true
+}, "\u0395\u03BD\u03AD\u03C1\u03B3\u03B5\u03B9\u03B5\u03C2"), /*#__PURE__*/React.createElement(DropdownContent, {
+  role: "menu",
+  id: "menu2"
+}, /*#__PURE__*/React.createElement(FieldContainer, {
+  role: "menuitem"
+}, /*#__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, {
+  role: "separator",
+  paddingBottom: 0,
+  paddingTop: 0
+}), /*#__PURE__*/React.createElement(NavList, {
+  layout: "vertical"
+}, /*#__PURE__*/React.createElement(NavListItemAction, {
+  role: "menuitem",
+  href: "#"
+}, "\u0395\u03C0\u03B5\u03BE\u03B5\u03C1\u03B3\u03B1\u03C3\u03AF\u03B1"), /*#__PURE__*/React.createElement(NavListItemAction, {
+  role: "menuitem",
+  href: "#"
+}, "\u039C\u03B5\u03C4\u03B1\u03BA\u03AF\u03BD\u03B7\u03C3\u03B7"), /*#__PURE__*/React.createElement(NavListItemAction, {
+  role: "menuitem",
+  href: "#"
+}, "\u039F\u03C1\u03B9\u03C3\u03C4\u03B9\u03BA\u03AE \u03B4\u03B9\u03B1\u03B3\u03C1\u03B1\u03C6\u03AE"))));
+
+export var Default = function Default() {
+  return _ref;
+};
+export default Default;

package/navigation/Dropdown/__stories__/Dense.d.ts

@@ -0,0 +1,2 @@
+export declare const Dense: () => JSX.Element;
+export default Dense;

package/navigation/Dropdown/__stories__/Dense.js

@@ -0,0 +1,68 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Dense = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Button = require("../../../form/Button");
+
+var _FieldContainer = require("../../../form/FieldContainer");
+
+var _LabelContainer = require("../../../form/LabelContainer");
+
+var _TextInput = require("../../../form/TextInput");
+
+var _SectionBreak = require("../../../layouts/SectionBreak");
+
+var _ = require("./..");
+
+var _NavList = require("../../NavList");
+
+var _ref = /*#__PURE__*/_react["default"].createElement(_.Dropdown, {
+  dense: true
+}, /*#__PURE__*/_react["default"].createElement(_.DropdownButton, {
+  role: "button",
+  "aria-haspopup": "true",
+  "aria-controls": "menu2",
+  arrow: true
+}, "\u0391\u03BD\u03B1\u03B6\u03AE\u03C4\u03B7\u03C3\u03B7"), /*#__PURE__*/_react["default"].createElement(_.DropdownContent, {
+  role: "menu",
+  id: "menu2"
+}, /*#__PURE__*/_react["default"].createElement(_FieldContainer.FieldContainer, {
+  role: "menuitem"
+}, /*#__PURE__*/_react["default"].createElement(_LabelContainer.LabelContainer, null, /*#__PURE__*/_react["default"].createElement(_LabelContainer.LabelTitle, null, "\u038C\u03BD\u03BF\u03BC\u03B1 \u03C0\u03B5\u03B4\u03AF\u03BF\u03C5"), /*#__PURE__*/_react["default"].createElement(_TextInput.TextInput, {
+  name: "input-name"
+}))), /*#__PURE__*/_react["default"].createElement(_SectionBreak.SectionBreak, {
+  role: "separator",
+  paddingBottom: 0,
+  paddingTop: 0
+}), /*#__PURE__*/_react["default"].createElement(_NavList.NavList, {
+  layout: "vertical"
+}, /*#__PURE__*/_react["default"].createElement(_NavList.NavListItemAction, {
+  role: "menuitem",
+  href: "#"
+}, "\u0395\u03C0\u03B5\u03BE\u03B5\u03C1\u03B3\u03B1\u03C3\u03AF\u03B1"), /*#__PURE__*/_react["default"].createElement(_NavList.NavListItemAction, {
+  role: "menuitem",
+  href: "#"
+}, "\u039C\u03B5\u03C4\u03B1\u03BA\u03AF\u03BD\u03B7\u03C3\u03B7"), /*#__PURE__*/_react["default"].createElement(_NavList.NavListItemAction, {
+  role: "menuitem",
+  href: "#"
+}, "\u039F\u03C1\u03B9\u03C3\u03C4\u03B9\u03BA\u03AE \u03B4\u03B9\u03B1\u03B3\u03C1\u03B1\u03C6\u03AE")), /*#__PURE__*/_react["default"].createElement(_SectionBreak.SectionBreak, {
+  role: "separator"
+}), /*#__PURE__*/_react["default"].createElement(_Button.Button, {
+  role: "menuitem",
+  color: "secondary"
+}, "\u0395\u03BD\u03AD\u03C1\u03B3\u03B5\u03B9\u03B1")));
+
+var Dense = function Dense() {
+  return _ref;
+};
+
+exports.Dense = Dense;
+var _default = Dense;
+exports["default"] = _default;

package/navigation/Dropdown/__stories__/Dense.mjs

@@ -0,0 +1,50 @@
+import React from 'react';
+import { Button } from "../../../form/Button";
+import { FieldContainer } from "../../../form/FieldContainer";
+import { LabelContainer } from "../../../form/LabelContainer";
+import { LabelTitle } from "../../../form/LabelContainer";
+import { TextInput } from "../../../form/TextInput";
+import { SectionBreak } from "../../../layouts/SectionBreak";
+import { Dropdown, DropdownButton, DropdownContent } from "./..";
+import { NavListItemAction, NavList } from "../../NavList";
+
+var _ref = /*#__PURE__*/React.createElement(Dropdown, {
+  dense: true
+}, /*#__PURE__*/React.createElement(DropdownButton, {
+  role: "button",
+  "aria-haspopup": "true",
+  "aria-controls": "menu2",
+  arrow: true
+}, "\u0391\u03BD\u03B1\u03B6\u03AE\u03C4\u03B7\u03C3\u03B7"), /*#__PURE__*/React.createElement(DropdownContent, {
+  role: "menu",
+  id: "menu2"
+}, /*#__PURE__*/React.createElement(FieldContainer, {
+  role: "menuitem"
+}, /*#__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, {
+  role: "separator",
+  paddingBottom: 0,
+  paddingTop: 0
+}), /*#__PURE__*/React.createElement(NavList, {
+  layout: "vertical"
+}, /*#__PURE__*/React.createElement(NavListItemAction, {
+  role: "menuitem",
+  href: "#"
+}, "\u0395\u03C0\u03B5\u03BE\u03B5\u03C1\u03B3\u03B1\u03C3\u03AF\u03B1"), /*#__PURE__*/React.createElement(NavListItemAction, {
+  role: "menuitem",
+  href: "#"
+}, "\u039C\u03B5\u03C4\u03B1\u03BA\u03AF\u03BD\u03B7\u03C3\u03B7"), /*#__PURE__*/React.createElement(NavListItemAction, {
+  role: "menuitem",
+  href: "#"
+}, "\u039F\u03C1\u03B9\u03C3\u03C4\u03B9\u03BA\u03AE \u03B4\u03B9\u03B1\u03B3\u03C1\u03B1\u03C6\u03AE")), /*#__PURE__*/React.createElement(SectionBreak, {
+  role: "separator"
+}), /*#__PURE__*/React.createElement(Button, {
+  role: "menuitem",
+  color: "secondary"
+}, "\u0395\u03BD\u03AD\u03C1\u03B3\u03B5\u03B9\u03B1")));
+
+export var Dense = function Dense() {
+  return _ref;
+};
+export default Dense;

package/navigation/Dropdown/__stories__/Disabled.d.ts

@@ -0,0 +1,2 @@
+export declare const Disabled: () => JSX.Element;
+export default Disabled;

package/navigation/Dropdown/__stories__/Disabled.js

@@ -0,0 +1,61 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Disabled = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _FieldContainer = require("../../../form/FieldContainer");
+
+var _LabelContainer = require("../../../form/LabelContainer");
+
+var _TextInput = require("../../../form/TextInput");
+
+var _SectionBreak = require("../../../layouts/SectionBreak");
+
+var _ = require("./..");
+
+var _NavList = require("../../NavList");
+
+var _ref = /*#__PURE__*/_react["default"].createElement(_.DropdownBase, {
+  disabled: true
+}, /*#__PURE__*/_react["default"].createElement(_.DropdownButton, {
+  role: "button",
+  "aria-haspopup": "true",
+  "aria-controls": "menu2",
+  arrow: true
+}, "\u0395\u03BD\u03AD\u03C1\u03B3\u03B5\u03B9\u03B5\u03C2"), /*#__PURE__*/_react["default"].createElement(_.DropdownContent, {
+  role: "menu",
+  id: "menu2"
+}, /*#__PURE__*/_react["default"].createElement(_FieldContainer.FieldContainer, {
+  role: "menuitem"
+}, /*#__PURE__*/_react["default"].createElement(_LabelContainer.LabelContainer, null, /*#__PURE__*/_react["default"].createElement(_LabelContainer.LabelTitle, null, "\u038C\u03BD\u03BF\u03BC\u03B1 \u03C0\u03B5\u03B4\u03AF\u03BF\u03C5"), /*#__PURE__*/_react["default"].createElement(_TextInput.TextInput, {
+  name: "input-name"
+}))), /*#__PURE__*/_react["default"].createElement(_SectionBreak.SectionBreak, {
+  role: "separator",
+  paddingBottom: 0,
+  paddingTop: 0
+}), /*#__PURE__*/_react["default"].createElement(_NavList.NavList, {
+  layout: "vertical"
+}, /*#__PURE__*/_react["default"].createElement(_NavList.NavListItemAction, {
+  role: "menuitem",
+  href: "#"
+}, "\u0395\u03C0\u03B5\u03BE\u03B5\u03C1\u03B3\u03B1\u03C3\u03AF\u03B1"), /*#__PURE__*/_react["default"].createElement(_NavList.NavListItemAction, {
+  role: "menuitem",
+  href: "#"
+}, "\u039C\u03B5\u03C4\u03B1\u03BA\u03AF\u03BD\u03B7\u03C3\u03B7"), /*#__PURE__*/_react["default"].createElement(_NavList.NavListItemAction, {
+  role: "menuitem",
+  href: "#"
+}, "\u039F\u03C1\u03B9\u03C3\u03C4\u03B9\u03BA\u03AE \u03B4\u03B9\u03B1\u03B3\u03C1\u03B1\u03C6\u03AE"))));
+
+var Disabled = function Disabled() {
+  return _ref;
+};
+
+exports.Disabled = Disabled;
+var _default = Disabled;
+exports["default"] = _default;

package/navigation/Dropdown/__stories__/Disabled.mjs

@@ -0,0 +1,44 @@
+import React from 'react';
+import { FieldContainer } from "../../../form/FieldContainer";
+import { LabelContainer } from "../../../form/LabelContainer";
+import { LabelTitle } from "../../../form/LabelContainer";
+import { TextInput } from "../../../form/TextInput";
+import { SectionBreak } from "../../../layouts/SectionBreak";
+import { DropdownBase, DropdownButton, DropdownContent } from "./..";
+import { NavListItemAction, NavList } from "../../NavList";
+
+var _ref = /*#__PURE__*/React.createElement(DropdownBase, {
+  disabled: true
+}, /*#__PURE__*/React.createElement(DropdownButton, {
+  role: "button",
+  "aria-haspopup": "true",
+  "aria-controls": "menu2",
+  arrow: true
+}, "\u0395\u03BD\u03AD\u03C1\u03B3\u03B5\u03B9\u03B5\u03C2"), /*#__PURE__*/React.createElement(DropdownContent, {
+  role: "menu",
+  id: "menu2"
+}, /*#__PURE__*/React.createElement(FieldContainer, {
+  role: "menuitem"
+}, /*#__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, {
+  role: "separator",
+  paddingBottom: 0,
+  paddingTop: 0
+}), /*#__PURE__*/React.createElement(NavList, {
+  layout: "vertical"
+}, /*#__PURE__*/React.createElement(NavListItemAction, {
+  role: "menuitem",
+  href: "#"
+}, "\u0395\u03C0\u03B5\u03BE\u03B5\u03C1\u03B3\u03B1\u03C3\u03AF\u03B1"), /*#__PURE__*/React.createElement(NavListItemAction, {
+  role: "menuitem",
+  href: "#"
+}, "\u039C\u03B5\u03C4\u03B1\u03BA\u03AF\u03BD\u03B7\u03C3\u03B7"), /*#__PURE__*/React.createElement(NavListItemAction, {
+  role: "menuitem",
+  href: "#"
+}, "\u039F\u03C1\u03B9\u03C3\u03C4\u03B9\u03BA\u03AE \u03B4\u03B9\u03B1\u03B3\u03C1\u03B1\u03C6\u03AE"))));
+
+export var Disabled = function Disabled() {
+  return _ref;
+};
+export default Disabled;