@digigov/ui 0.28.1 → 0.28.3

package/CHANGELOG.md

@@ -1,6 +1,21 @@
 # Change Log - @digigov/ui
 
-This log was last generated on Wed, 16 Nov 2022 14:27:34 GMT and should not be manually modified.
+This log was last generated on Fri, 02 Dec 2022 11:20:56 GMT and should not be manually modified.
+
+## 0.28.3
+Fri, 02 Dec 2022 11:20:56 GMT
+
+### Patches
+
+- Use @uides/react-qr-reader
+- Fix import path at some stories files, simplified some stories, added description, tags and link at .stories.js files 
+
+## 0.28.2
+Fri, 18 Nov 2022 08:33:43 GMT
+
+### Patches
+
+- Rename conflicting components and remove withDeprecation
 
 ## 0.28.1
 Wed, 16 Nov 2022 14:27:34 GMT

package/README.md

@@ -0,0 +1 @@
+lalalal

package/admin/AutoComplete/AutoComplete.stories.d.ts

@@ -1,6 +1,7 @@
 declare namespace _default {
     export const title: string;
     export { AutoComplete as component };
+    export const displayName: string;
 }
 export default _default;
 export * from "@digigov/ui/admin/AutoComplete/__stories__/Default";

package/admin/AutoComplete/AutoComplete.stories.js

@@ -109,7 +109,8 @@ Object.keys(_WithMinLength).forEach(function (key) {
 });
 var _default = {
   title: 'Digigov UI/admin/AutoComplete',
-  component: _AutoComplete["default"]
+  component: _AutoComplete["default"],
+  displayName: 'AutoComplete'
 }; // eslint-disable-next-line digigov/no-relative-import
 
 exports["default"] = _default;

package/admin/AutoComplete/Status/index.d.ts

@@ -33,8 +33,8 @@ export default class Status extends Component<StatusProps, StateProps> {
         silenced: boolean;
     };
     debounceStatusUpdate: () => void;
-    componentWillMount(): void;
-    componentWillReceiveProps(): void;
+    UNSAFE_componentWillMount(): void;
+    UNSAFE_componentWillReceiveProps(): void;
     render(): JSX.Element;
 }
 export { AutoCompleteStatusWrapper, AutoCompleteStatus };

package/admin/AutoComplete/Status/index.js

@@ -96,8 +96,8 @@ var Status = /*#__PURE__*/function (_Component) {
   }
 
   (0, _createClass2["default"])(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 () {
@@ -115,8 +115,8 @@ var Status = /*#__PURE__*/function (_Component) {
       }, statusDebounceMillis);
     }
   }, {
-    key: "componentWillReceiveProps",
-    value: function componentWillReceiveProps() {
+    key: "UNSAFE_componentWillReceiveProps",
+    value: function UNSAFE_componentWillReceiveProps() {
       this.setState({
         debounced: false
       });

package/admin/AutoComplete/index.d.ts

@@ -7,7 +7,7 @@ import AutoCompleteResultListItem from '@digigov/react-extensions/admin/AutoComp
 import AutoCompleteWrapper from '@digigov/react-extensions/admin/AutoCompleteWrapper';
 import AutoCompleteAssistiveHint from '@digigov/react-extensions/admin/AutoCompleteAssistiveHint';
 import { Component } from 'react';
-export declare type AutoCompleteProps = {
+export interface AutoCompleteProps {
     source: (query: string, syncResults: (options: string[]) => void) => void;
     id: string;
     tStatusResults?: (x: number, y: string) => string;
@@ -33,7 +33,7 @@ export declare type AutoCompleteProps = {
     showAllValues?: boolean;
     required?: boolean;
     dropdownArrow?: React.ElementType;
-};
+}
 export declare type State = {
     focused: any;
     hovered: any;

package/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/admin/CircularProgress/CircularProgress.stories.d.ts

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

package/admin/CircularProgress/CircularProgress.stories.js

@@ -8,7 +8,7 @@ Object.defineProperty(exports, "__esModule", {
 var _exportNames = {};
 exports["default"] = void 0;
 
-var _admin = _interopRequireDefault(require("@digigov/ui/admin"));
+var _CircularProgress = _interopRequireDefault(require("@digigov/ui/admin/CircularProgress"));
 
 var _Default = require("./__stories__/Default");
 
@@ -25,6 +25,7 @@ Object.keys(_Default).forEach(function (key) {
 });
 var _default = {
   title: 'Digigov UI/admin/CircularProgress',
-  component: _admin["default"]
+  component: _CircularProgress["default"],
+  displayName: 'CircularProgress'
 };
 exports["default"] = _default;

package/admin/CircularProgress/__stories__/Default.js

@@ -9,13 +9,11 @@ exports["default"] = exports.Default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _FullPageBackground = _interopRequireDefault(require("@digigov/ui/admin/FullPageBackground"));
-
 var _LoaderContainer = _interopRequireDefault(require("@digigov/ui/admin/LoaderContainer"));
 
 var _CircularProgress = _interopRequireDefault(require("@digigov/ui/admin/CircularProgress"));
 
-var _ref = /*#__PURE__*/_react["default"].createElement(_FullPageBackground["default"], null, /*#__PURE__*/_react["default"].createElement(_LoaderContainer["default"], null, /*#__PURE__*/_react["default"].createElement(_CircularProgress["default"], null)));
+var _ref = /*#__PURE__*/_react["default"].createElement(_LoaderContainer["default"], null, /*#__PURE__*/_react["default"].createElement(_CircularProgress["default"], null));
 
 var Default = function Default() {
   return _ref;

package/admin/CopyToClipboard/CopyToClipboard.stories.d.ts

@@ -1,9 +1,9 @@
 declare namespace _default {
     export const title: string;
     export { CopyToClipboard as component };
+    export const displayName: string;
 }
 export default _default;
 export * from "@digigov/ui/admin/CopyToClipboard/__stories__/Default";
 export * from "@digigov/ui/admin/CopyToClipboard/__stories__/Banner";
-export * from "@digigov/ui/admin/CopyToClipboard/__stories__/MultipleCopies";
 import CopyToClipboard from "@digigov/ui/admin/CopyToClipboard";

package/admin/CopyToClipboard/CopyToClipboard.stories.js

@@ -37,22 +37,9 @@ Object.keys(_Banner).forEach(function (key) {
     }
   });
 });
-
-var _MultipleCopies = require("@digigov/ui/admin/CopyToClipboard/__stories__/MultipleCopies");
-
-Object.keys(_MultipleCopies).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _MultipleCopies[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function get() {
-      return _MultipleCopies[key];
-    }
-  });
-});
 var _default = {
   title: 'Digigov UI/admin/CopyToClipboard',
-  component: _CopyToClipboard["default"]
+  component: _CopyToClipboard["default"],
+  displayName: 'CopyToClipboard'
 };
 exports["default"] = _default;

package/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/admin/Drawer/Drawer.stories.d.ts

@@ -1,4 +1,10 @@
 declare namespace _default {
-    const title: string;
+    export const title: string;
+    export const description: string;
+    export const link: string;
+    export { Drawer as component };
+    export const displayName: string;
 }
 export default _default;
+export * from "@digigov/ui/admin/Drawer/__stories__/Default";
+import Drawer from "@digigov/ui/admin/Drawer";

package/admin/Drawer/Drawer.stories.js

@@ -1,11 +1,33 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+var _exportNames = {};
 exports["default"] = void 0;
-var _default = {
-  title: 'Digigov UI/admin/Drawer'
-}; // export * from '@digigov/ui/admin/Drawer/__stories__/Default';
 
+var _Drawer = _interopRequireDefault(require("@digigov/ui/admin/Drawer"));
+
+var _Default = require("@digigov/ui/admin/Drawer/__stories__/Default");
+
+Object.keys(_Default).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _Default[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Default[key];
+    }
+  });
+});
+var _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["default"],
+  displayName: 'Drawer'
+};
 exports["default"] = _default;

package/admin/Drawer/__stories__/Default.js

@@ -15,16 +15,12 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _Drawer = _interopRequireDefault(require("@digigov/ui/admin/Drawer"));
 
-var _reactCore = require("@digigov/react-core");
+var _List = require("@digigov/ui/core/List");
 
-var _ui = require("@digigov/ui");
+var _Title = _interopRequireDefault(require("@digigov/ui/typography/Title"));
 
 var _admin = require("@digigov/react-extensions/admin");
 
-var _Grid = _interopRequireDefault(require("@digigov/react-core/Grid"));
-
-var _Footer = _interopRequireDefault(require("@digigov/ui/govgr/Footer"));
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -42,42 +38,13 @@ function useDrawer() {
   return [open, toggleDrawer];
 }
 
-var _ref = /*#__PURE__*/_react["default"].createElement(_reactCore.GovGRLogo, null);
-
-var _ref2 = /*#__PURE__*/_react["default"].createElement(_reactCore.BurgerIcon, null);
-
-var _ref3 = /*#__PURE__*/_react["default"].createElement(_admin.AdminTopSection, null);
-
-var _ref4 = /*#__PURE__*/_react["default"].createElement(_ui.Title, {
+var _ref = /*#__PURE__*/_react["default"].createElement(_Title["default"], {
   size: "md"
 }, "Menu");
 
-var _ref5 = /*#__PURE__*/_react["default"].createElement(_reactCore.List, {
+var _ref2 = /*#__PURE__*/_react["default"].createElement(_List.List, {
   spaced: true
-}, /*#__PURE__*/_react["default"].createElement(_reactCore.ListItem, null, "Menu option 1"), /*#__PURE__*/_react["default"].createElement(_reactCore.ListItem, null, "Menu option 2"));
-
-var _ref6 = /*#__PURE__*/_react["default"].createElement(_admin.AdminMain, null, /*#__PURE__*/_react["default"].createElement(_Grid["default"], {
-  container: true,
-  spacing: 4
-}, /*#__PURE__*/_react["default"].createElement(_Grid["default"], {
-  item: true,
-  xs: 12,
-  lg: 6
-}, /*#__PURE__*/_react["default"].createElement(_reactCore.Card, null, /*#__PURE__*/_react["default"].createElement(_reactCore.CardHeading, null, "This is a Card"), /*#__PURE__*/_react["default"].createElement(_reactCore.CardText, null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."))), /*#__PURE__*/_react["default"].createElement(_Grid["default"], {
-  item: true,
-  xs: 12,
-  lg: 6
-}, /*#__PURE__*/_react["default"].createElement(_reactCore.Card, null, /*#__PURE__*/_react["default"].createElement(_reactCore.CardHeading, null, "This is a Card"), /*#__PURE__*/_react["default"].createElement(_reactCore.CardText, null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."))), /*#__PURE__*/_react["default"].createElement(_Grid["default"], {
-  item: true,
-  xs: 12,
-  lg: 6
-}, /*#__PURE__*/_react["default"].createElement(_reactCore.Card, null, /*#__PURE__*/_react["default"].createElement(_reactCore.CardHeading, null, "This is a Card"), /*#__PURE__*/_react["default"].createElement(_reactCore.CardText, null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."))), /*#__PURE__*/_react["default"].createElement(_Grid["default"], {
-  item: true,
-  xs: 12,
-  lg: 6
-}, /*#__PURE__*/_react["default"].createElement(_reactCore.Card, null, /*#__PURE__*/_react["default"].createElement(_reactCore.CardHeading, null, "This is a Card"), /*#__PURE__*/_react["default"].createElement(_reactCore.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["default"].createElement(_Footer["default"], null);
+}, /*#__PURE__*/_react["default"].createElement(_List.ListItem, null, "List Item 1"), /*#__PURE__*/_react["default"].createElement(_List.ListItem, null, "List Item 2"));
 
 var Default = function Default() {
   var _useDrawer = useDrawer(),
@@ -85,20 +52,14 @@ var Default = function Default() {
       open = _useDrawer2[0],
       toggleDrawer = _useDrawer2[1];
 
-  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_admin.AdminLayout, null, /*#__PURE__*/_react["default"].createElement(_admin.AdminHeader, null, /*#__PURE__*/_react["default"].createElement(_admin.AdminHeaderSection, null, _ref, /*#__PURE__*/_react["default"].createElement(_ui.Button, {
-    className: "govgr-drawer__burger-icon",
-    onClick: function onClick() {
-      return toggleDrawer();
-    },
-    color: "secondary"
-  }, _ref2))), /*#__PURE__*/_react["default"].createElement(_admin.AdminContainer, null, /*#__PURE__*/_react["default"].createElement(_admin.AdminAside, null, _ref3, /*#__PURE__*/_react["default"].createElement(_Drawer["default"], {
+  return /*#__PURE__*/_react["default"].createElement(_Drawer["default"], {
     direction: "left",
     open: open
   }, /*#__PURE__*/_react["default"].createElement(_admin.DrawerHeading, {
     onClick: function onClick() {
       return toggleDrawer();
     }
-  }, _ref4), _ref5)), _ref6), _ref7));
+  }, _ref), _ref2);
 };
 
 exports.Default = Default;

package/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/admin/Dropdown/Dropdown.stories.d.ts

@@ -1,6 +1,9 @@
 declare namespace _default {
     export const title: string;
+    export const description: string;
+    export const link: string;
     export { Dropdown as component };
+    export const displayName: string;
 }
 export default _default;
 export * from "./__stories__/Default";

package/admin/Dropdown/Dropdown.stories.js

@@ -55,6 +55,9 @@ Object.keys(_PlacementTop).forEach(function (key) {
 /* eslint-disable digigov/no-relative-imports */
 var _default = {
   title: 'Digigov UI/admin/Dropdown',
-  component: _Dropdown["default"]
+  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["default"],
+  displayName: 'Dropdown'
 };
 exports["default"] = _default;

package/admin/Dropdown/__stories__/AlignRight.js

@@ -15,7 +15,7 @@ var _Dropdown = _interopRequireWildcard(require("@digigov/ui/admin/Dropdown"));
 
 var _Field = _interopRequireDefault(require("@digigov/ui/core/Field"));
 
-var _Label = _interopRequireDefault(require("@digigov/react-core/Label"));
+var _LabelContainer = _interopRequireDefault(require("@digigov/react-core/LabelContainer"));
 
 var _Divider = _interopRequireDefault(require("@digigov/ui/core/Divider"));
 
@@ -34,7 +34,8 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
 var _ref = /*#__PURE__*/_react["default"].createElement(_Dropdown["default"], {
-  align: "right"
+  align: "right",
+  open: true
 }, /*#__PURE__*/_react["default"].createElement(_Dropdown.DropdownButton, {
   role: "button",
   "aria-haspopup": "true",
@@ -45,7 +46,7 @@ var _ref = /*#__PURE__*/_react["default"].createElement(_Dropdown["default"], {
   id: "menu2"
 }, /*#__PURE__*/_react["default"].createElement(_Field["default"], {
   role: "menuitem"
-}, /*#__PURE__*/_react["default"].createElement(_Label["default"], null, /*#__PURE__*/_react["default"].createElement(_LabelTitle.LabelTitle, null, "\u038C\u03BD\u03BF\u03BC\u03B1 \u03C0\u03B5\u03B4\u03AF\u03BF\u03C5"), /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
+}, /*#__PURE__*/_react["default"].createElement(_LabelContainer["default"], null, /*#__PURE__*/_react["default"].createElement(_LabelTitle.LabelTitle, null, "\u038C\u03BD\u03BF\u03BC\u03B1 \u03C0\u03B5\u03B4\u03AF\u03BF\u03C5"), /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
   name: "input-name"
 }))), /*#__PURE__*/_react["default"].createElement(_Divider["default"], {
   visible: true,

package/admin/Dropdown/__stories__/Default.js

@@ -15,7 +15,7 @@ var _Dropdown = _interopRequireWildcard(require("@digigov/ui/admin/Dropdown"));
 
 var _Field = _interopRequireDefault(require("@digigov/ui/core/Field"));
 
-var _Label = _interopRequireDefault(require("@digigov/react-core/Label"));
+var _LabelContainer = _interopRequireDefault(require("@digigov/react-core/LabelContainer"));
 
 var _Divider = _interopRequireDefault(require("@digigov/ui/core/Divider"));
 
@@ -33,7 +33,9 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-var _ref = /*#__PURE__*/_react["default"].createElement(_Dropdown["default"], null, /*#__PURE__*/_react["default"].createElement(_Dropdown.DropdownButton, {
+var _ref = /*#__PURE__*/_react["default"].createElement(_Dropdown["default"], {
+  open: true
+}, /*#__PURE__*/_react["default"].createElement(_Dropdown.DropdownButton, {
   role: "button",
   "aria-haspopup": "true",
   "aria-controls": "menu2",
@@ -43,7 +45,7 @@ var _ref = /*#__PURE__*/_react["default"].createElement(_Dropdown["default"], nu
   id: "menu2"
 }, /*#__PURE__*/_react["default"].createElement(_Field["default"], {
   role: "menuitem"
-}, /*#__PURE__*/_react["default"].createElement(_Label["default"], null, /*#__PURE__*/_react["default"].createElement(_LabelTitle.LabelTitle, null, "\u038C\u03BD\u03BF\u03BC\u03B1 \u03C0\u03B5\u03B4\u03AF\u03BF\u03C5"), /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
+}, /*#__PURE__*/_react["default"].createElement(_LabelContainer["default"], null, /*#__PURE__*/_react["default"].createElement(_LabelTitle.LabelTitle, null, "\u038C\u03BD\u03BF\u03BC\u03B1 \u03C0\u03B5\u03B4\u03AF\u03BF\u03C5"), /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
   name: "input-name"
 }))), /*#__PURE__*/_react["default"].createElement(_Divider["default"], {
   visible: true,

package/admin/Dropdown/__stories__/PlacementTop.js

@@ -15,7 +15,7 @@ var _Dropdown = _interopRequireWildcard(require("@digigov/ui/admin/Dropdown"));
 
 var _Field = _interopRequireDefault(require("@digigov/ui/core/Field"));
 
-var _Label = _interopRequireDefault(require("@digigov/react-core/Label"));
+var _LabelContainer = _interopRequireDefault(require("@digigov/react-core/LabelContainer"));
 
 var _Divider = _interopRequireDefault(require("@digigov/ui/core/Divider"));
 
@@ -34,7 +34,8 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
 var _ref = /*#__PURE__*/_react["default"].createElement(_Dropdown["default"], {
-  placement: "top"
+  placement: "top",
+  open: true
 }, /*#__PURE__*/_react["default"].createElement(_Dropdown.DropdownButton, {
   role: "button",
   "aria-haspopup": "true",
@@ -45,7 +46,7 @@ var _ref = /*#__PURE__*/_react["default"].createElement(_Dropdown["default"], {
   id: "menu2"
 }, /*#__PURE__*/_react["default"].createElement(_Field["default"], {
   role: "menuitem"
-}, /*#__PURE__*/_react["default"].createElement(_Label["default"], null, /*#__PURE__*/_react["default"].createElement(_LabelTitle.LabelTitle, null, "\u038C\u03BD\u03BF\u03BC\u03B1 \u03C0\u03B5\u03B4\u03AF\u03BF\u03C5"), /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
+}, /*#__PURE__*/_react["default"].createElement(_LabelContainer["default"], null, /*#__PURE__*/_react["default"].createElement(_LabelTitle.LabelTitle, null, "\u038C\u03BD\u03BF\u03BC\u03B1 \u03C0\u03B5\u03B4\u03AF\u03BF\u03C5"), /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
   name: "input-name"
 }))), /*#__PURE__*/_react["default"].createElement(_Divider["default"], {
   visible: true,

package/admin/Dropdown/index.d.ts

@@ -1,8 +1,8 @@
 import React from 'react';
-import { DropdownProps as CoreDropdownProps } from '@digigov/react-extensions/admin/Dropdown';
+import DropdownBase, { DropdownBaseProps } from '@digigov/react-extensions/admin/DropdownBase';
 export * from '@digigov/react-extensions/admin/DropdownButton';
 export * from '@digigov/react-extensions/admin/DropdownContent';
-export interface DropdownProps extends CoreDropdownProps {
+export interface DropdownProps extends DropdownBaseProps {
     /**
      * Use closeBehaviour to set the way that the Dropdown will close.
      */
@@ -18,4 +18,5 @@ export interface DropdownProps extends CoreDropdownProps {
  * Dropdown component is used for showing more options with a button.
  */
 export declare const Dropdown: ({ closeBehaviour, float, ...props }: DropdownProps) => React.ReactElement;
+export { DropdownBase };
 export default Dropdown;

package/admin/Dropdown/index.js

@@ -8,9 +8,17 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 var _exportNames = {
-  Dropdown: true
+  Dropdown: true,
+  DropdownBase: true
 };
-exports["default"] = exports.Dropdown = void 0;
+exports.Dropdown = void 0;
+Object.defineProperty(exports, "DropdownBase", {
+  enumerable: true,
+  get: function get() {
+    return _DropdownBase["default"];
+  }
+});
+exports["default"] = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
@@ -18,7 +26,7 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _Dropdown = _interopRequireDefault(require("@digigov/react-extensions/admin/Dropdown"));
+var _DropdownBase = _interopRequireDefault(require("@digigov/react-extensions/admin/DropdownBase"));
 
 var _DropdownButton = require("@digigov/react-extensions/admin/DropdownButton");
 
@@ -126,7 +134,7 @@ var Dropdown = function Dropdown(_ref) {
   }, []); // eslint-disable-next-line @typescript-eslint/ban-ts-comment
   // @ts-ignore
 
-  return /*#__PURE__*/_react["default"].createElement(_Dropdown["default"], (0, _extends2["default"])({
+  return /*#__PURE__*/_react["default"].createElement(_DropdownBase["default"], (0, _extends2["default"])({
     ref: innerRef
   }, props));
 };

package/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/admin/Modal/Modal.stories.d.ts

@@ -1,6 +1,9 @@
 declare namespace _default {
     export const title: string;
+    export const description: string;
+    export const link: string;
     export { Modal as component };
+    export const displayName: string;
 }
 export default _default;
 export * from "./__stories__/Default";

package/admin/Modal/Modal.stories.js

@@ -39,6 +39,9 @@ Object.keys(_AlertDialog).forEach(function (key) {
 });
 var _default = {
   title: 'Digigov UI/admin/Modal',
-  component: _Modal["default"]
+  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["default"],
+  displayName: 'Modal'
 };
 exports["default"] = _default;

package/admin/Modal/__stories__/AlertDialog.js

@@ -9,8 +9,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = exports.AlertDialog = void 0;
 
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _react = _interopRequireDefault(require("react"));
 
 var _Modal = _interopRequireWildcard(require("@digigov/ui/admin/Modal"));
@@ -23,39 +21,21 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-var _ref = /*#__PURE__*/_react["default"].createElement(_Modal.ModalHeading, {
+var _ref = /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_Modal["default"], {
+  open: true,
+  role: "alertdialog",
+  "aria-labelledby": "modal-label",
+  "aria-describedby": "modal-content"
+}, /*#__PURE__*/_react["default"].createElement(_Modal.ModalHeading, {
   id: "modal-label"
-}, "\u0395\u03C0\u03B9\u03B2\u03B5\u03B2\u03B1\u03AF\u03C9\u03C3\u03B7");
-
-var _ref2 = /*#__PURE__*/_react["default"].createElement(_Modal.ModalContent, {
+}, "\u0395\u03C0\u03B9\u03B2\u03B5\u03B2\u03B1\u03AF\u03C9\u03C3\u03B7"), /*#__PURE__*/_react["default"].createElement(_Modal.ModalContent, {
   id: "modal-content"
-}, /*#__PURE__*/_react["default"].createElement(_typography.Paragraph, null, "\u0395\u03AF\u03C3\u03C4\u03B5 \u03C3\u03AF\u03B3\u03BF\u03C5\u03C1\u03BF\u03B9 \u03CC\u03C4\u03B9 \u03B8\u03AD\u03BB\u03B5\u03C4\u03B5 \u03BD\u03B1 \u03B4\u03B9\u03B1\u03B3\u03C1\u03AC\u03C8\u03B5\u03C4\u03B5 \u03C4\u03B7\u03BD \u03B5\u03B3\u03B3\u03C1\u03B1\u03C6\u03AE;"));
+}, /*#__PURE__*/_react["default"].createElement(_typography.Paragraph, null, "\u0395\u03AF\u03C3\u03C4\u03B5 \u03C3\u03AF\u03B3\u03BF\u03C5\u03C1\u03BF\u03B9 \u03CC\u03C4\u03B9 \u03B8\u03AD\u03BB\u03B5\u03C4\u03B5 \u03BD\u03B1 \u03B4\u03B9\u03B1\u03B3\u03C1\u03AC\u03C8\u03B5\u03C4\u03B5 \u03C4\u03B7\u03BD \u03B5\u03B3\u03B3\u03C1\u03B1\u03C6\u03AE;")), /*#__PURE__*/_react["default"].createElement(_Modal.ModalAction, null, /*#__PURE__*/_react["default"].createElement(_core.Button, null, "\u0394\u03B9\u03B1\u03B3\u03C1\u03B1\u03C6\u03AE"), /*#__PURE__*/_react["default"].createElement(_core.Button, {
+  variant: "link"
+}, "\u0391\u03BA\u03CD\u03C1\u03C9\u03C3\u03B7"))));
 
 var AlertDialog = function AlertDialog() {
-  var _useModal = (0, _Modal.useModal)(),
-      modalProps = _useModal.modalProps,
-      toggleModal = _useModal.toggleModal;
-
-  return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_core.Button, {
-    color: "warning",
-    id: "delete-button",
-    onClick: function onClick() {
-      return toggleModal();
-    }
-  }, "\u0394\u03B9\u03B1\u03B3\u03C1\u03B1\u03C6\u03AE"), /*#__PURE__*/_react["default"].createElement(_Modal["default"], (0, _extends2["default"])({}, modalProps, {
-    role: "alertdialog",
-    "aria-labelledby": "modal-label",
-    "aria-describedby": "modal-content"
-  }), _ref, _ref2, /*#__PURE__*/_react["default"].createElement(_Modal.ModalAction, null, /*#__PURE__*/_react["default"].createElement(_core.Button, {
-    onClick: function onClick() {
-      return toggleModal();
-    }
-  }, "\u0394\u03B9\u03B1\u03B3\u03C1\u03B1\u03C6\u03AE"), /*#__PURE__*/_react["default"].createElement(_core.Button, {
-    variant: "link",
-    onClick: function onClick() {
-      return toggleModal();
-    }
-  }, "\u0391\u03BA\u03CD\u03C1\u03C9\u03C3\u03B7"))));
+  return _ref;
 };
 
 exports.AlertDialog = AlertDialog;