@digigov/ui 0.23.0 → 0.24.2

package/core/Table/__stories__/WithFloatingScroll.js

@@ -0,0 +1,111 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.WithFloatingScroll = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _reactCore = require("@digigov/react-core");
+
+var _admin = require("@digigov/ui/admin");
+
+var _TableFloatingScroll = _interopRequireDefault(require("@digigov/ui/core/Table/TableFloatingScroll"));
+
+var labels = {
+  name: 'Ονοματεπώνυμο',
+  email: 'Email',
+  phone: 'Τηλέφωνο',
+  role: 'Ρόλος',
+  status: 'Κατάσταση',
+  actions: 'Ενέργειες',
+  at: 'Αριθμός Ταυτότητας',
+  zip: 'Ταχυδρομικός Κώδικας',
+  address: 'Διεύθυνση',
+  city: 'Πόλη',
+  country: 'Χώρα',
+  active: 'Ενεργός',
+  last_login: 'Τελευταία Σύνδεση',
+  last_login_agent: 'Τελευταία Σύνδεση Αξεσουάρ',
+  last_login_ip: 'Τελευταία Σύνδεση IP',
+  afm: 'ΑΦΜ'
+};
+var data = new Array(20).fill({
+  name: 'Τάκης Τσούκαλος',
+  afm: '1111111114',
+  role: 'Χειριστής',
+  at: '1212121',
+  email: 'myhomeemail@gov.gr',
+  phone: '22222222',
+  address: 'Αγία Παρασκευής',
+  city: 'Αγία Παρασκευή',
+  country: 'Ελλάδα',
+  zip: '222233',
+  active: 'Ναι',
+  last_login: '12/12/12',
+  last_login_ip: '0.0.0.0',
+  last_login_agent: 'Firefox'
+});
+
+var _ref = /*#__PURE__*/_react["default"].createElement(_reactCore.TableHeadCell, null, "\u0395\u03BD\u03AD\u03C1\u03B3\u03B5\u03B9\u03B5\u03C2");
+
+var _ref2 = /*#__PURE__*/_react["default"].createElement(_reactCore.TableDataCell, null, /*#__PURE__*/_react["default"].createElement(_admin.Dropdown, {
+  "float": true,
+  align: "left",
+  placement: "bottom"
+}, /*#__PURE__*/_react["default"].createElement(_admin.DropdownButton, {
+  variant: "link"
+}, "\u0395\u03BD\u03AD\u03C1\u03B3\u03B5\u03B9\u03B5\u03C2"), /*#__PURE__*/_react["default"].createElement(_admin.DropdownContent, null, /*#__PURE__*/_react["default"].createElement(_reactCore.NavVertical, null, /*#__PURE__*/_react["default"].createElement(_reactCore.NavVerticalItem, {
+  href: "#"
+}, "Accept"), /*#__PURE__*/_react["default"].createElement(_reactCore.NavVerticalItem, {
+  href: "#"
+}, "Dismiss")))));
+
+var _ref3 = /*#__PURE__*/_react["default"].createElement(_reactCore.TableHeadCell, null, "\u0395\u03BD\u03AD\u03C1\u03B3\u03B5\u03B9\u03B5\u03C2");
+
+var _ref4 = /*#__PURE__*/_react["default"].createElement(_reactCore.TableDataCell, null, /*#__PURE__*/_react["default"].createElement(_admin.Dropdown, {
+  "float": true,
+  align: "left",
+  placement: "bottom"
+}, /*#__PURE__*/_react["default"].createElement(_admin.DropdownButton, {
+  variant: "link"
+}, "\u0395\u03BD\u03AD\u03C1\u03B3\u03B5\u03B9\u03B5\u03C2"), /*#__PURE__*/_react["default"].createElement(_admin.DropdownContent, null, /*#__PURE__*/_react["default"].createElement(_reactCore.NavVertical, null, /*#__PURE__*/_react["default"].createElement(_reactCore.NavVerticalItem, {
+  href: "#"
+}, "Accept"), /*#__PURE__*/_react["default"].createElement(_reactCore.NavVerticalItem, {
+  href: "#"
+}, "Dismiss")))));
+
+var WithFloatingScroll = function WithFloatingScroll() {
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_TableFloatingScroll["default"], null, /*#__PURE__*/_react["default"].createElement(_reactCore.Table, null, /*#__PURE__*/_react["default"].createElement(_reactCore.TableHead, null, /*#__PURE__*/_react["default"].createElement(_reactCore.TableRow, null, Object.keys(data[0]).map(function (key) {
+    return /*#__PURE__*/_react["default"].createElement(_reactCore.TableHeadCell, {
+      key: key
+    }, labels[key]);
+  }), _ref)), /*#__PURE__*/_react["default"].createElement(_reactCore.TableBody, null, data && data.map(function (dt, index) {
+    return /*#__PURE__*/_react["default"].createElement(_reactCore.TableRow, {
+      key: index
+    }, Object.keys(dt).map(function (key) {
+      return /*#__PURE__*/_react["default"].createElement(_reactCore.TableDataCell, {
+        key: key
+      }, dt[key]);
+    }), _ref2);
+  })))), /*#__PURE__*/_react["default"].createElement(_reactCore.Table, null, /*#__PURE__*/_react["default"].createElement(_reactCore.TableHead, null, /*#__PURE__*/_react["default"].createElement(_reactCore.TableRow, null, Object.keys(data[0]).map(function (key) {
+    return /*#__PURE__*/_react["default"].createElement(_reactCore.TableHeadCell, {
+      key: key
+    }, labels[key]);
+  }), _ref3)), /*#__PURE__*/_react["default"].createElement(_reactCore.TableBody, null, data && data.map(function (dt, index) {
+    return /*#__PURE__*/_react["default"].createElement(_reactCore.TableRow, {
+      key: index
+    }, Object.keys(dt).map(function (key) {
+      return /*#__PURE__*/_react["default"].createElement(_reactCore.TableDataCell, {
+        key: key
+      }, dt[key]);
+    }), _ref4);
+  }))));
+};
+
+exports.WithFloatingScroll = WithFloatingScroll;
+var _default = WithFloatingScroll;
+exports["default"] = _default;

package/core/Table/__stories__/WithLoader.js

@@ -85,7 +85,7 @@ var WithLoader = function WithLoader() {
 
   setTimeout(function () {
     setTableData(data);
-  }, 8000);
+  }, 2000);
   return /*#__PURE__*/_react["default"].createElement("div", {
     className: "example"
   }, /*#__PURE__*/_react["default"].createElement(_reactCore.TableContainer, null, !tableData ? _ref : /*#__PURE__*/_react["default"].createElement(_reactCore.Table, null, _ref2, _ref3, /*#__PURE__*/_react["default"].createElement(_reactCore.TableBody, null, loading === true && _ref4, tableData && tableData.length > 0 ? tableData.map(function (d, index) {
@@ -94,12 +94,9 @@ var WithLoader = function WithLoader() {
     }, /*#__PURE__*/_react["default"].createElement(_reactCore.TableDataCell, null, d.name), /*#__PURE__*/_react["default"].createElement(_reactCore.TableDataCell, null, d.job), /*#__PURE__*/_react["default"].createElement(_reactCore.TableDataCell, null, d.year), /*#__PURE__*/_react["default"].createElement(_reactCore.TableDataCell, null, d.salary));
   }) : _ref5))), /*#__PURE__*/_react["default"].createElement(_reactCore.Button, {
     onClick: function onClick() {
-      setLoading(true);
-      /* setTimeout(() => {
-        setLoading(false);
-      }, 7000); */
+      setLoading(!loading);
     }
-  }, "\u03A0\u03C1\u03BF\u03C3\u03B8\u03B7\u03BA\u03B7"));
+  }, "Toggle Loading"));
 };
 
 exports.WithLoader = WithLoader;

package/es/admin/Dropdown/index.js

@@ -29,19 +29,37 @@ export var Dropdown = function Dropdown(_ref) {
     }
 
     var toggleFloat = function toggleFloat() {
+      var _innerRef$current;
+
+      var tbody = innerRef.current.closest('tbody');
+      var parentElement = (_innerRef$current = innerRef.current) === null || _innerRef$current === void 0 ? void 0 : _innerRef$current.parentElement;
+
       if (innerRef.current.open) {
-        var rect = innerRef.current.getBoundingClientRect();
-        innerRef.current.style.position = 'static';
+        var _innerRef$current2;
+
+        tbody.style.position = 'static';
+        var rect = (_innerRef$current2 = innerRef.current) === null || _innerRef$current2 === void 0 ? void 0 : _innerRef$current2.getBoundingClientRect();
+        var parentRect = parentElement.getBoundingClientRect();
+        innerRef.current.style.position = 'static'; // arbitrary spacing of 12 pixels because CSS
+
         var top = rect.top + window.pageYOffset;
         var left = rect.left + window.pageXOffset;
+        parentElement.style.height = "".concat(parentRect.height, "px");
+        parentElement.style.width = "".concat(parentRect.width, "px");
         innerRef.current.style.top = "".concat(top, "px");
         innerRef.current.style.left = "".concat(left, "px");
         innerRef.current.style.position = "absolute";
         innerRef.current.style.display = "block";
+        innerRef.current.style.background = 'white';
       } else {
+        tbody.style.position = 'relative';
+        parentElement.style.height = '';
+        parentElement.style.width = '';
         innerRef.current.style.top = "0";
         innerRef.current.style.left = "0";
         innerRef.current.style.position = "relative";
+        innerRef.current.style.display = "table-cell";
+        innerRef.current.style.background = 'transparent';
       }
     };
 

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

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

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

@@ -0,0 +1,74 @@
+import React from 'react';
+import { Link } from '@digigov/react-core';
+import SummaryList, { SummaryListItem, SummaryListItemAction, SummaryListItemKey } from '@digigov/ui/core/SummaryList';
+import { TaskList, TaskListItem, TaskListItemHeading, TaskListItemContent, TaskListItemTag } from '@digigov/ui/admin';
+var fields = [{
+  title: 'Check before you start',
+  tasks: [{
+    text: 'Check eligibility',
+    status: 'Completed'
+  }, {
+    text: 'Read declaration',
+    status: 'Completed'
+  }]
+}, {
+  title: 'Prepare application',
+  tasks: [{
+    text: 'Company information',
+    status: 'Completed'
+  }, {
+    text: 'Your contact details',
+    status: 'In progress'
+  }, {
+    text: 'List convictions',
+    status: 'Not started'
+  }, {
+    text: 'Provide financial evidence',
+    status: 'Cannot start yet'
+  }, {
+    text: 'Give medical information',
+    status: 'Cannot start yet'
+  }]
+}, {
+  title: 'Apply',
+  tasks: [{
+    text: 'Submit and pay',
+    status: 'Cannot start yet'
+  }]
+}];
+export var Default = function Default() {
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(TaskList, null, fields && fields.map(function (field, index) {
+    return /*#__PURE__*/React.createElement(TaskListItem, {
+      key: index
+    }, /*#__PURE__*/React.createElement(TaskListItemHeading, {
+      size: "m"
+    }, "".concat(index + 1, ". ").concat(field.title)), /*#__PURE__*/React.createElement(TaskListItemContent, null, /*#__PURE__*/React.createElement(SummaryList, null, field.tasks.map(function (task, key) {
+      var tagColor;
+
+      switch (task.status) {
+        case 'Completed':
+          tagColor = 'completed';
+          break;
+
+        case 'In progress':
+          tagColor = 'in-progress';
+          break;
+
+        case 'Not started':
+          tagColor = 'not-started';
+          break;
+
+        case 'Cannot start yet':
+          tagColor = 'not-started';
+          break;
+      }
+
+      return /*#__PURE__*/React.createElement(SummaryListItem, {
+        key: key
+      }, /*#__PURE__*/React.createElement(SummaryListItemKey, null, /*#__PURE__*/React.createElement(Link, null, task.text)), /*#__PURE__*/React.createElement(SummaryListItemAction, null, /*#__PURE__*/React.createElement(TaskListItemTag, {
+        status: tagColor
+      }, task.status)));
+    }))));
+  })));
+};
+export default Default;

package/es/admin/TaskList/index.js

@@ -0,0 +1,7 @@
+export * from '@digigov/react-extensions/admin/TaskList';
+export * from '@digigov/react-extensions/admin/TaskListItem';
+export * from '@digigov/react-extensions/admin/TaskListItemContent';
+export * from '@digigov/react-extensions/admin/TaskListItemHeading';
+export * from '@digigov/react-extensions/admin/TaskListItemTag';
+import TaskList from '@digigov/react-extensions/admin/TaskList';
+export default TaskList;

package/es/admin/Timeline/Timeline.stories.js

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

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

@@ -0,0 +1,64 @@
+import React from 'react';
+import { Button, Hint, Link, Paragraph } from '@digigov/react-core';
+import { Timeline, TimelineItem, TimelineHeading, TimelineContent, TimelineActions } from '@digigov/ui/admin';
+import Details, { DetailsSummary, DetailsContent } from '@digigov/ui/core/Details';
+var data = [{
+  title: 'Application requires confirmation',
+  date: '14 June 2019 at 2:01pm',
+  text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras non felis risus. Curabitur nec ante vitae felis ullamcorper tincidunt.',
+  links: [{
+    text: 'See application',
+    href: '#'
+  }]
+}, {
+  title: 'Application review in progress ',
+  date: '7 June 2019 at 12:32pm',
+  text: 'Your application is being reviewed by one of our case workers.',
+  buttons: [{
+    text: 'Continue'
+  }, {
+    text: 'Cancel',
+    color: 'warning'
+  }]
+}, {
+  title: 'Application received ',
+  date: '6 June 2019 at 9:12am ',
+  text: 'Your application has been received – reference MOJ-1234-5678'
+}, {
+  title: 'Application details ',
+  date: '6 June 2019 at 9:12am ',
+  detailsSummary: 'More info regarding your application',
+  detailsContent: 'Your application has been received – reference MOJ-1234-5678'
+}, {
+  title: 'Application submitted',
+  date: '28 May 2019 at 10:45am',
+  text: 'Your application is being reviewed by one of our case workers.',
+  buttons: [{
+    text: 'Continue'
+  }],
+  links: [{
+    text: 'Details',
+    href: '#'
+  }, {
+    text: 'Something else',
+    href: '#'
+  }]
+}];
+export var Default = function Default() {
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Timeline, null, data && data.map(function (field, index) {
+    return /*#__PURE__*/React.createElement(TimelineItem, {
+      key: index
+    }, /*#__PURE__*/React.createElement(TimelineHeading, null, field.title), /*#__PURE__*/React.createElement(TimelineContent, null, /*#__PURE__*/React.createElement(Hint, null, field.date), field.text && /*#__PURE__*/React.createElement(Paragraph, null, field.text), field.detailsSummary && /*#__PURE__*/React.createElement(Details, null, /*#__PURE__*/React.createElement(DetailsSummary, null, field.detailsSummary), /*#__PURE__*/React.createElement(DetailsContent, null, field.detailsContent))), (field.links || field.buttons) && /*#__PURE__*/React.createElement(TimelineActions, null, field.buttons && field.buttons.map(function (button, index) {
+      return /*#__PURE__*/React.createElement(Button, {
+        key: index,
+        color: button.color || 'secondary'
+      }, button.text);
+    }), field.links && field.links.map(function (link, index) {
+      return /*#__PURE__*/React.createElement(Link, {
+        key: index,
+        href: link.href
+      }, link.text);
+    })));
+  })));
+};
+export default Default;

package/es/admin/Timeline/index.js

@@ -0,0 +1,7 @@
+export * from '@digigov/react-extensions/admin/Timeline';
+export * from '@digigov/react-extensions/admin/TimelineContent';
+export * from '@digigov/react-extensions/admin/TimelineHeading';
+export * from '@digigov/react-extensions/admin/TimelineItem';
+export * from '@digigov/react-extensions/admin/TimelineActions';
+import Timeline from '@digigov/react-extensions/admin/Timeline';
+export default Timeline;

package/es/admin/index.js

@@ -14,4 +14,6 @@ export * from '@digigov/ui/admin/AdminLayout';
 export * from '@digigov/ui/admin/ResultsHeading';
 export * from '@digigov/ui/admin/SearchSection';
 export * from '@digigov/ui/admin/FilterSection';
-export * from '@digigov/ui/admin/AutoComplete';
+export * from '@digigov/ui/admin/AutoComplete';
+export * from '@digigov/ui/admin/Timeline';
+export * from '@digigov/ui/admin/TaskList';

package/es/core/Table/Table.stories.js

@@ -16,4 +16,5 @@ export * from './__stories__/DarkVariantWithVerticalHeaders';
 export * from './__stories__/WithLoader';
 export * from './__stories__/DefinedWidth';
 export * from './__stories__/Densed';
-export * from './__stories__/MultipleProps';
+export * from './__stories__/MultipleProps';
+export * from './__stories__/WithFloatingScroll';

package/es/core/Table/TableFloatingScroll.js

@@ -30,11 +30,13 @@ export function TableFloatingScroll(props) {
     var elementOffset = contentRef.current.offsetTop + contentRef.current.offsetHeight;
 
     function onBodyScroll() {
-      var currentScroll = window.pageYOffset + window.innerHeight; // @ts-ignore
+      var currentScroll = window.pageYOffset + window.innerHeight;
 
-      if (currentScroll < elementOffset && currentScroll > contentRef.current.offsetTop) {
-        setPosition('fixed'); // @ts-ignore
-      } else if (currentScroll >= elementOffset || currentScroll <= contentRef.current.offsetTop) {
+      if (currentScroll < elementOffset && // @ts-ignore
+      currentScroll > contentRef.current.offsetTop) {
+        setPosition('fixed');
+      } else if (currentScroll >= elementOffset || // @ts-ignore
+      currentScroll <= contentRef.current.offsetTop) {
         setPosition('relative');
       }
     }

package/es/core/Table/__stories__/WithFloatingScroll.js

@@ -0,0 +1,95 @@
+import React from 'react';
+import { Table, TableHead, TableRow, TableBody, TableHeadCell, TableDataCell, NavVertical, NavVerticalItem } from '@digigov/react-core';
+import { Dropdown, DropdownButton, DropdownContent } from '@digigov/ui/admin';
+import TableFloatingScroll from '@digigov/ui/core/Table/TableFloatingScroll';
+var labels = {
+  name: 'Ονοματεπώνυμο',
+  email: 'Email',
+  phone: 'Τηλέφωνο',
+  role: 'Ρόλος',
+  status: 'Κατάσταση',
+  actions: 'Ενέργειες',
+  at: 'Αριθμός Ταυτότητας',
+  zip: 'Ταχυδρομικός Κώδικας',
+  address: 'Διεύθυνση',
+  city: 'Πόλη',
+  country: 'Χώρα',
+  active: 'Ενεργός',
+  last_login: 'Τελευταία Σύνδεση',
+  last_login_agent: 'Τελευταία Σύνδεση Αξεσουάρ',
+  last_login_ip: 'Τελευταία Σύνδεση IP',
+  afm: 'ΑΦΜ'
+};
+var data = new Array(20).fill({
+  name: 'Τάκης Τσούκαλος',
+  afm: '1111111114',
+  role: 'Χειριστής',
+  at: '1212121',
+  email: 'myhomeemail@gov.gr',
+  phone: '22222222',
+  address: 'Αγία Παρασκευής',
+  city: 'Αγία Παρασκευή',
+  country: 'Ελλάδα',
+  zip: '222233',
+  active: 'Ναι',
+  last_login: '12/12/12',
+  last_login_ip: '0.0.0.0',
+  last_login_agent: 'Firefox'
+});
+
+var _ref = /*#__PURE__*/React.createElement(TableHeadCell, null, "\u0395\u03BD\u03AD\u03C1\u03B3\u03B5\u03B9\u03B5\u03C2");
+
+var _ref2 = /*#__PURE__*/React.createElement(TableDataCell, null, /*#__PURE__*/React.createElement(Dropdown, {
+  "float": true,
+  align: "left",
+  placement: "bottom"
+}, /*#__PURE__*/React.createElement(DropdownButton, {
+  variant: "link"
+}, "\u0395\u03BD\u03AD\u03C1\u03B3\u03B5\u03B9\u03B5\u03C2"), /*#__PURE__*/React.createElement(DropdownContent, null, /*#__PURE__*/React.createElement(NavVertical, null, /*#__PURE__*/React.createElement(NavVerticalItem, {
+  href: "#"
+}, "Accept"), /*#__PURE__*/React.createElement(NavVerticalItem, {
+  href: "#"
+}, "Dismiss")))));
+
+var _ref3 = /*#__PURE__*/React.createElement(TableHeadCell, null, "\u0395\u03BD\u03AD\u03C1\u03B3\u03B5\u03B9\u03B5\u03C2");
+
+var _ref4 = /*#__PURE__*/React.createElement(TableDataCell, null, /*#__PURE__*/React.createElement(Dropdown, {
+  "float": true,
+  align: "left",
+  placement: "bottom"
+}, /*#__PURE__*/React.createElement(DropdownButton, {
+  variant: "link"
+}, "\u0395\u03BD\u03AD\u03C1\u03B3\u03B5\u03B9\u03B5\u03C2"), /*#__PURE__*/React.createElement(DropdownContent, null, /*#__PURE__*/React.createElement(NavVertical, null, /*#__PURE__*/React.createElement(NavVerticalItem, {
+  href: "#"
+}, "Accept"), /*#__PURE__*/React.createElement(NavVerticalItem, {
+  href: "#"
+}, "Dismiss")))));
+
+export var WithFloatingScroll = function WithFloatingScroll() {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TableFloatingScroll, null, /*#__PURE__*/React.createElement(Table, null, /*#__PURE__*/React.createElement(TableHead, null, /*#__PURE__*/React.createElement(TableRow, null, Object.keys(data[0]).map(function (key) {
+    return /*#__PURE__*/React.createElement(TableHeadCell, {
+      key: key
+    }, labels[key]);
+  }), _ref)), /*#__PURE__*/React.createElement(TableBody, null, data && data.map(function (dt, index) {
+    return /*#__PURE__*/React.createElement(TableRow, {
+      key: index
+    }, Object.keys(dt).map(function (key) {
+      return /*#__PURE__*/React.createElement(TableDataCell, {
+        key: key
+      }, dt[key]);
+    }), _ref2);
+  })))), /*#__PURE__*/React.createElement(Table, null, /*#__PURE__*/React.createElement(TableHead, null, /*#__PURE__*/React.createElement(TableRow, null, Object.keys(data[0]).map(function (key) {
+    return /*#__PURE__*/React.createElement(TableHeadCell, {
+      key: key
+    }, labels[key]);
+  }), _ref3)), /*#__PURE__*/React.createElement(TableBody, null, data && data.map(function (dt, index) {
+    return /*#__PURE__*/React.createElement(TableRow, {
+      key: index
+    }, Object.keys(dt).map(function (key) {
+      return /*#__PURE__*/React.createElement(TableDataCell, {
+        key: key
+      }, dt[key]);
+    }), _ref4);
+  }))));
+};
+export default WithFloatingScroll;

package/es/core/Table/__stories__/WithLoader.js

@@ -64,7 +64,7 @@ export var WithLoader = function WithLoader() {
 
   setTimeout(function () {
     setTableData(data);
-  }, 8000);
+  }, 2000);
   return /*#__PURE__*/React.createElement("div", {
     className: "example"
   }, /*#__PURE__*/React.createElement(TableContainer, null, !tableData ? _ref : /*#__PURE__*/React.createElement(Table, null, _ref2, _ref3, /*#__PURE__*/React.createElement(TableBody, null, loading === true && _ref4, tableData && tableData.length > 0 ? tableData.map(function (d, index) {
@@ -73,11 +73,8 @@ export var WithLoader = function WithLoader() {
     }, /*#__PURE__*/React.createElement(TableDataCell, null, d.name), /*#__PURE__*/React.createElement(TableDataCell, null, d.job), /*#__PURE__*/React.createElement(TableDataCell, null, d.year), /*#__PURE__*/React.createElement(TableDataCell, null, d.salary));
   }) : _ref5))), /*#__PURE__*/React.createElement(Button, {
     onClick: function onClick() {
-      setLoading(true);
-      /* setTimeout(() => {
-        setLoading(false);
-      }, 7000); */
+      setLoading(!loading);
     }
-  }, "\u03A0\u03C1\u03BF\u03C3\u03B8\u03B7\u03BA\u03B7"));
+  }, "Toggle Loading"));
 };
 export default WithLoader;

package/es/registry.js

@@ -1,4 +1,5 @@
 import * as _digigov_ui from '@digigov/ui';
+import * as _digigov_ui_admin from '@digigov/ui/admin';
 import * as _digigov_ui_api_APIErrors from '@digigov/ui/api/APIErrors';
 import * as _digigov_ui_api_APIProvider from '@digigov/ui/api/APIProvider';
 import * as _digigov_ui_api_fetchAPI from '@digigov/ui/api/fetchAPI';
@@ -7,7 +8,6 @@ import * as _digigov_ui_api_useResource from '@digigov/ui/api/useResource';
 import * as _digigov_ui_api_useResourceAction from '@digigov/ui/api/useResourceAction';
 import * as _digigov_ui_api_useResourceQuery from '@digigov/ui/api/useResourceQuery';
 import * as _digigov_ui_api_utils from '@digigov/ui/api/utils';
-import * as _digigov_ui_admin from '@digigov/ui/admin';
 import * as _digigov_ui_app_App from '@digigov/ui/app/App';
 import * as _digigov_ui_app_I18nText from '@digigov/ui/app/I18nText';
 import * as _digigov_ui_app_OutdatedBrowserBanner from '@digigov/ui/app/OutdatedBrowserBanner';
@@ -47,6 +47,8 @@ import * as _digigov_ui_admin_Pagination from '@digigov/ui/admin/Pagination';
 import * as _digigov_ui_admin_ResultsHeading from '@digigov/ui/admin/ResultsHeading';
 import * as _digigov_ui_admin_SearchSection from '@digigov/ui/admin/SearchSection';
 import * as _digigov_ui_admin_TableLoaderBackground from '@digigov/ui/admin/TableLoaderBackground';
+import * as _digigov_ui_admin_TaskList from '@digigov/ui/admin/TaskList';
+import * as _digigov_ui_admin_Timeline from '@digigov/ui/admin/Timeline';
 import * as _digigov_ui_app_Confirmation from '@digigov/ui/app/Confirmation';
 import * as _digigov_ui_app_Footer from '@digigov/ui/app/Footer';
 import * as _digigov_ui_app_Header_HeaderContent from '@digigov/ui/app/Header/HeaderContent';
@@ -149,6 +151,7 @@ function lazyImport(pkgImport) {
 
 export default {
   '@digigov/ui': lazyImport(_digigov_ui),
+  '@digigov/ui/admin': lazyImport(_digigov_ui_admin),
   '@digigov/ui/api/APIErrors': lazyImport(_digigov_ui_api_APIErrors),
   '@digigov/ui/api/APIProvider': lazyImport(_digigov_ui_api_APIProvider),
   '@digigov/ui/api/fetchAPI': lazyImport(_digigov_ui_api_fetchAPI),
@@ -157,7 +160,6 @@ export default {
   '@digigov/ui/api/useResourceAction': lazyImport(_digigov_ui_api_useResourceAction),
   '@digigov/ui/api/useResourceQuery': lazyImport(_digigov_ui_api_useResourceQuery),
   '@digigov/ui/api/utils': lazyImport(_digigov_ui_api_utils),
-  '@digigov/ui/admin': lazyImport(_digigov_ui_admin),
   '@digigov/ui/app/App': lazyImport(_digigov_ui_app_App),
   '@digigov/ui/app/I18nText': lazyImport(_digigov_ui_app_I18nText),
   '@digigov/ui/app/OutdatedBrowserBanner': lazyImport(_digigov_ui_app_OutdatedBrowserBanner),
@@ -197,6 +199,8 @@ export default {
   '@digigov/ui/admin/ResultsHeading': lazyImport(_digigov_ui_admin_ResultsHeading),
   '@digigov/ui/admin/SearchSection': lazyImport(_digigov_ui_admin_SearchSection),
   '@digigov/ui/admin/TableLoaderBackground': lazyImport(_digigov_ui_admin_TableLoaderBackground),
+  '@digigov/ui/admin/TaskList': lazyImport(_digigov_ui_admin_TaskList),
+  '@digigov/ui/admin/Timeline': lazyImport(_digigov_ui_admin_Timeline),
   '@digigov/ui/app/Confirmation': lazyImport(_digigov_ui_app_Confirmation),
   '@digigov/ui/app/Footer': lazyImport(_digigov_ui_app_Footer),
   '@digigov/ui/app/Header/HeaderContent': lazyImport(_digigov_ui_app_Header_HeaderContent),

package/esm/admin/Dropdown/index.js

@@ -29,19 +29,37 @@ export var Dropdown = function Dropdown(_ref) {
     }
 
     var toggleFloat = function toggleFloat() {
+      var _innerRef$current;
+
+      var tbody = innerRef.current.closest('tbody');
+      var parentElement = (_innerRef$current = innerRef.current) === null || _innerRef$current === void 0 ? void 0 : _innerRef$current.parentElement;
+
       if (innerRef.current.open) {
-        var rect = innerRef.current.getBoundingClientRect();
-        innerRef.current.style.position = 'static';
+        var _innerRef$current2;
+
+        tbody.style.position = 'static';
+        var rect = (_innerRef$current2 = innerRef.current) === null || _innerRef$current2 === void 0 ? void 0 : _innerRef$current2.getBoundingClientRect();
+        var parentRect = parentElement.getBoundingClientRect();
+        innerRef.current.style.position = 'static'; // arbitrary spacing of 12 pixels because CSS
+
         var top = rect.top + window.pageYOffset;
         var left = rect.left + window.pageXOffset;
+        parentElement.style.height = "".concat(parentRect.height, "px");
+        parentElement.style.width = "".concat(parentRect.width, "px");
         innerRef.current.style.top = "".concat(top, "px");
         innerRef.current.style.left = "".concat(left, "px");
         innerRef.current.style.position = "absolute";
         innerRef.current.style.display = "block";
+        innerRef.current.style.background = 'white';
       } else {
+        tbody.style.position = 'relative';
+        parentElement.style.height = '';
+        parentElement.style.width = '';
         innerRef.current.style.top = "0";
         innerRef.current.style.left = "0";
         innerRef.current.style.position = "relative";
+        innerRef.current.style.display = "table-cell";
+        innerRef.current.style.background = 'transparent';
       }
     };
 

package/esm/admin/TaskList/TaskList.stories.js

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