@digigov/ui 0.24.0 → 0.24.3

package/CHANGELOG.md

@@ -1,6 +1,28 @@
 # Change Log - @digigov/ui
 
-This log was last generated on Wed, 03 Aug 2022 10:06:10 GMT and should not be manually modified.
+This log was last generated on Tue, 16 Aug 2022 07:40:15 GMT and should not be manually modified.
+
+## 0.24.3
+Tue, 16 Aug 2022 07:40:15 GMT
+
+### Patches
+
+- export stepbystep components from digigov-ui, create stepbystep story
+- export stepnav components from digigov-ui, create stepnav story
+
+## 0.24.2
+Thu, 04 Aug 2022 14:33:46 GMT
+
+### Patches
+
+- Fix visual bug in floating scrol
+
+## 0.24.1
+Wed, 03 Aug 2022 12:52:06 GMT
+
+### Patches
+
+- Fix Dropdown styles when a floating Table scrolls left or right
 
 ## 0.24.0
 Wed, 03 Aug 2022 10:06:10 GMT

package/admin/Dropdown/index.js

@@ -76,19 +76,37 @@ 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/admin/StepNav/StepNav.stories.d.ts

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

package/admin/StepNav/StepNav.stories.js

@@ -0,0 +1,32 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {};
+exports["default"] = void 0;
+
+var _StepNav = _interopRequireDefault(require("@digigov/ui/admin/StepNav"));
+
+var _Default = require("./__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];
+    }
+  });
+});
+
+/* eslint-disable digigov/no-relative-imports */
+var _default = {
+  title: 'Digigov UI/admin/StepNav',
+  component: _StepNav["default"]
+};
+exports["default"] = _default;

package/admin/StepNav/__stories__/Default.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export declare const Default: () => JSX.Element;
+export default Default;

package/admin/StepNav/__stories__/Default.js

@@ -0,0 +1,123 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Default = void 0;
+
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _StepNav = _interopRequireWildcard(require("@digigov/ui/admin/StepNav"));
+
+var _Paragraph = _interopRequireDefault(require("@digigov/ui/typography/Paragraph"));
+
+var _List = _interopRequireWildcard(require("@digigov/ui/core/List"));
+
+var _Link = _interopRequireDefault(require("@digigov/ui/core/Link"));
+
+var _VisuallyHidden = _interopRequireDefault(require("@digigov/ui/core/VisuallyHidden"));
+
+var _Button = _interopRequireDefault(require("@digigov/ui/core/Button"));
+
+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; }
+
+var data = [{
+  title: 'Title-1',
+  description: 'Some description here',
+  link: 'A link to navigate'
+}, {
+  title: 'Title-2',
+  description: 'Some description here',
+  link: 'A link to navigate'
+}, {
+  title: 'Title-3',
+  description: 'Some description here',
+  link: 'A link to navigate'
+}, {
+  title: 'Title-4',
+  description: 'Some description here',
+  link: 'A link to navigate'
+}];
+
+var _ref = /*#__PURE__*/_react["default"].createElement(_StepNav.StepNavCircleΝumber, {
+  border: false
+}, /*#__PURE__*/_react["default"].createElement(_VisuallyHidden["default"], null, "Step"), "and");
+
+var _ref2 = /*#__PURE__*/_react["default"].createElement(_VisuallyHidden["default"], null, "Step");
+
+var _ref3 = /*#__PURE__*/_react["default"].createElement(_StepNav.StepNavAccordionOpened, null, "\u0391\u03C0\u03CC\u03BA\u03C1\u03C5\u03C8\u03B7");
+
+var _ref4 = /*#__PURE__*/_react["default"].createElement(_StepNav.StepNavAccordionClosed, null, "\u0395\u03BC\u03C6\u03AC\u03BD\u03B9\u03C3\u03B7");
+
+var Default = function Default() {
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+      open = _useState2[0],
+      SetOpen = _useState2[1];
+
+  var _useState3 = (0, _react.useState)([false, false, false, false]),
+      _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+      openItem = _useState4[0],
+      setOpenItem = _useState4[1];
+
+  (0, _react.useEffect)(function () {
+    var stateArray = [];
+
+    if (open === false) {
+      openItem.map(function () {
+        stateArray.push(false);
+      });
+      setOpenItem(stateArray);
+    } else {
+      openItem.map(function () {
+        stateArray.push(true);
+      });
+      setOpenItem(stateArray);
+    }
+  }, [open]);
+
+  function openCloseItem(index) {
+    var statusOpenItem = (0, _toConsumableArray2["default"])(openItem);
+    statusOpenItem[index] = !statusOpenItem[index];
+    setOpenItem(statusOpenItem);
+  }
+
+  function openCloseAll() {
+    SetOpen(!open);
+  }
+
+  return /*#__PURE__*/_react["default"].createElement(_StepNav["default"], null, /*#__PURE__*/_react["default"].createElement(_StepNav.StepNavControls, null, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+    variant: "link",
+    onClick: function onClick() {
+      openCloseAll();
+    }
+  }, open === false ? 'Εμφάνιση όλων' : 'Απόκρυψη όλων')), /*#__PURE__*/_react["default"].createElement(_StepNav.StepNavList, null, data && data.map(function (dt, index) {
+    return /*#__PURE__*/_react["default"].createElement(_StepNav.StepNavListItem, {
+      key: index
+    }, /*#__PURE__*/_react["default"].createElement(_StepNav.StepNavAccordion, {
+      open: open
+    }, /*#__PURE__*/_react["default"].createElement(_StepNav.StepNavAccordionSummary, {
+      onClick: function onClick() {
+        openCloseItem(index);
+      }
+    }, /*#__PURE__*/_react["default"].createElement(_StepNav.StepNavAccordionSummaryHeading, {
+      "aria-controls": "content1"
+    }, index === 2 ? _ref : /*#__PURE__*/_react["default"].createElement(_StepNav.StepNavCircleΝumber, null, _ref2, index + 1), /*#__PURE__*/_react["default"].createElement(_StepNav.StepNavAccordionHeadingTitle, null, /*#__PURE__*/_react["default"].createElement(_StepNav.StepNavAccordionHeadingText, null, dt.title), openItem[index] === true ? _ref3 : _ref4))), /*#__PURE__*/_react["default"].createElement(_StepNav.StepNavAccordionContent, {
+      id: "content1"
+    }, /*#__PURE__*/_react["default"].createElement(_Paragraph["default"], null, dt.description), /*#__PURE__*/_react["default"].createElement(_List["default"], null, /*#__PURE__*/_react["default"].createElement(_List.ListItem, null, /*#__PURE__*/_react["default"].createElement(_Link["default"], null, dt.link))))));
+  })));
+};
+
+exports.Default = Default;
+var _default = Default;
+exports["default"] = _default;

package/admin/StepNav/index.d.ts

@@ -0,0 +1,15 @@
+import StepNavCircleΝumber from '@digigov/react-extensions/admin/StepNavCircleΝumber';
+import StepNav from '@digigov/react-extensions/admin/StepNav';
+import StepNavControls from '@digigov/react-extensions/admin/StepNavControls';
+import StepNavList from '@digigov/react-extensions/admin/StepNavList';
+import StepNavListItem from '@digigov/react-extensions/admin/StepNavListItem';
+import StepNavAccordion from '@digigov/react-extensions/admin/StepNavAccordion';
+import StepNavAccordionContent from '@digigov/react-extensions/admin/StepNavAccordionContent';
+import StepNavAccordionSummary from '@digigov/react-extensions/admin/StepNavAccordionSummary';
+import StepNavAccordionOpened from '@digigov/react-extensions/admin/StepNavAccordionOpened';
+import StepNavAccordionClosed from '@digigov/react-extensions/admin/StepNavAccordionClosed';
+import StepNavAccordionSummaryHeading from '@digigov/react-extensions/admin/StepNavAccordionSummaryHeading';
+import StepNavAccordionHeadingTitle from '@digigov/react-extensions/admin/StepNavAccordionHeadingTitle';
+import StepNavAccordionHeadingText from '@digigov/react-extensions/admin/StepNavAccordionHeadingText';
+export { StepNavAccordion, StepNavAccordionContent, StepNavAccordionSummary, StepNavAccordionSummaryHeading, StepNavAccordionHeadingTitle, StepNavAccordionHeadingText, StepNavCircleΝumber, StepNavAccordionOpened, StepNavAccordionClosed, StepNav, StepNavControls, StepNavList, StepNavListItem, };
+export default StepNav;

package/admin/StepNav/index.js

@@ -0,0 +1,115 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "StepNav", {
+  enumerable: true,
+  get: function get() {
+    return _StepNav["default"];
+  }
+});
+Object.defineProperty(exports, "StepNavAccordion", {
+  enumerable: true,
+  get: function get() {
+    return _StepNavAccordion["default"];
+  }
+});
+Object.defineProperty(exports, "StepNavAccordionClosed", {
+  enumerable: true,
+  get: function get() {
+    return _StepNavAccordionClosed["default"];
+  }
+});
+Object.defineProperty(exports, "StepNavAccordionContent", {
+  enumerable: true,
+  get: function get() {
+    return _StepNavAccordionContent["default"];
+  }
+});
+Object.defineProperty(exports, "StepNavAccordionHeadingText", {
+  enumerable: true,
+  get: function get() {
+    return _StepNavAccordionHeadingText["default"];
+  }
+});
+Object.defineProperty(exports, "StepNavAccordionHeadingTitle", {
+  enumerable: true,
+  get: function get() {
+    return _StepNavAccordionHeadingTitle["default"];
+  }
+});
+Object.defineProperty(exports, "StepNavAccordionOpened", {
+  enumerable: true,
+  get: function get() {
+    return _StepNavAccordionOpened["default"];
+  }
+});
+Object.defineProperty(exports, "StepNavAccordionSummary", {
+  enumerable: true,
+  get: function get() {
+    return _StepNavAccordionSummary["default"];
+  }
+});
+Object.defineProperty(exports, "StepNavAccordionSummaryHeading", {
+  enumerable: true,
+  get: function get() {
+    return _StepNavAccordionSummaryHeading["default"];
+  }
+});
+Object.defineProperty(exports, "StepNavCircle\u039Dumber", {
+  enumerable: true,
+  get: function get() {
+    return _StepNavCircleΝumber["default"];
+  }
+});
+Object.defineProperty(exports, "StepNavControls", {
+  enumerable: true,
+  get: function get() {
+    return _StepNavControls["default"];
+  }
+});
+Object.defineProperty(exports, "StepNavList", {
+  enumerable: true,
+  get: function get() {
+    return _StepNavList["default"];
+  }
+});
+Object.defineProperty(exports, "StepNavListItem", {
+  enumerable: true,
+  get: function get() {
+    return _StepNavListItem["default"];
+  }
+});
+exports["default"] = void 0;
+
+var _StepNavCircleΝumber = _interopRequireDefault(require("@digigov/react-extensions/admin/StepNavCircle\u039Dumber"));
+
+var _StepNav = _interopRequireDefault(require("@digigov/react-extensions/admin/StepNav"));
+
+var _StepNavControls = _interopRequireDefault(require("@digigov/react-extensions/admin/StepNavControls"));
+
+var _StepNavList = _interopRequireDefault(require("@digigov/react-extensions/admin/StepNavList"));
+
+var _StepNavListItem = _interopRequireDefault(require("@digigov/react-extensions/admin/StepNavListItem"));
+
+var _StepNavAccordion = _interopRequireDefault(require("@digigov/react-extensions/admin/StepNavAccordion"));
+
+var _StepNavAccordionContent = _interopRequireDefault(require("@digigov/react-extensions/admin/StepNavAccordionContent"));
+
+var _StepNavAccordionSummary = _interopRequireDefault(require("@digigov/react-extensions/admin/StepNavAccordionSummary"));
+
+var _StepNavAccordionOpened = _interopRequireDefault(require("@digigov/react-extensions/admin/StepNavAccordionOpened"));
+
+var _StepNavAccordionClosed = _interopRequireDefault(require("@digigov/react-extensions/admin/StepNavAccordionClosed"));
+
+var _StepNavAccordionSummaryHeading = _interopRequireDefault(require("@digigov/react-extensions/admin/StepNavAccordionSummaryHeading"));
+
+var _StepNavAccordionHeadingTitle = _interopRequireDefault(require("@digigov/react-extensions/admin/StepNavAccordionHeadingTitle"));
+
+var _StepNavAccordionHeadingText = _interopRequireDefault(require("@digigov/react-extensions/admin/StepNavAccordionHeadingText"));
+
+var _default = _StepNav["default"];
+exports["default"] = _default;

package/admin/index.d.ts

@@ -17,3 +17,4 @@ export * from '@digigov/ui/admin/FilterSection';
 export * from '@digigov/ui/admin/AutoComplete';
 export * from '@digigov/ui/admin/Timeline';
 export * from '@digigov/ui/admin/TaskList';
+export * from '@digigov/ui/admin/StepNav';

package/admin/index.js

@@ -249,4 +249,17 @@ Object.keys(_TaskList).forEach(function (key) {
       return _TaskList[key];
     }
   });
+});
+
+var _StepNav = require("@digigov/ui/admin/StepNav");
+
+Object.keys(_StepNav).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _StepNav[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _StepNav[key];
+    }
+  });
 });

package/core/Table/Table.stories.d.ts

@@ -16,3 +16,4 @@ export * from "./__stories__/WithLoader";
 export * from "./__stories__/DefinedWidth";
 export * from "./__stories__/Densed";
 export * from "./__stories__/MultipleProps";
+export * from "./__stories__/WithFloatingScroll";

package/core/Table/Table.stories.js

@@ -192,6 +192,20 @@ Object.keys(_MultipleProps).forEach(function (key) {
   });
 });
 
+var _WithFloatingScroll = require("./__stories__/WithFloatingScroll");
+
+Object.keys(_WithFloatingScroll).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _WithFloatingScroll[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _WithFloatingScroll[key];
+    }
+  });
+});
+
 /* eslint-disable digigov/no-relative-imports */
 var _default = {
   title: 'Digigov UI/core/Table',

package/core/Table/TableFloatingScroll.js

@@ -48,11 +48,13 @@ 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/core/Table/__stories__/WithFloatingScroll.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export declare const WithFloatingScroll: () => JSX.Element;
+export default WithFloatingScroll;

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/StepNav/StepNav.stories.js

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