@digigov/ui 0.21.1 → 0.22.0

package/es/core/SummaryList/__stories__/WithoutBorders.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import SummaryList, { SummaryListItem, SummaryListItemAction, SummaryListItemKey, SummaryListItemValue } from '@digigov/ui/core/SummaryList';
+
+var _ref = /*#__PURE__*/React.createElement(SummaryList, {
+  border: false
+}, /*#__PURE__*/React.createElement(SummaryListItem, null, /*#__PURE__*/React.createElement(SummaryListItemKey, null, "\u038C\u03BD\u03BF\u03BC\u03B1"), /*#__PURE__*/React.createElement(SummaryListItemValue, null, "\u0393\u03B9\u03CE\u03C1\u03B3\u03BF\u03C2 \u03A0\u03B1\u03C0\u03B1\u03B4\u03CC\u03C0\u03BF\u03C5\u03BB\u03BF\u03C2")), /*#__PURE__*/React.createElement(SummaryListItem, null, /*#__PURE__*/React.createElement(SummaryListItemKey, null, "\u0394\u03B9\u03B5\u03CD\u03B8\u03C5\u03BD\u03C3\u03B7"), /*#__PURE__*/React.createElement(SummaryListItemValue, null, "\u03A4\u03AC\u03B4\u03B5 20, \u03A0\u03B1\u03C4\u03AE\u03C3\u03B9\u03B1"), /*#__PURE__*/React.createElement(SummaryListItemAction, null)), /*#__PURE__*/React.createElement(SummaryListItem, null, /*#__PURE__*/React.createElement(SummaryListItemKey, null, "\u03A4\u03B7\u03BB\u03AD\u03C6\u03C9\u03BD\u03BF"), /*#__PURE__*/React.createElement(SummaryListItemValue, null, "6941234567")));
+
+export var WithoutBorders = function WithoutBorders() {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, _ref);
+};
+export default WithoutBorders;

package/es/core/SummaryList/index.mdx

@@ -1,80 +1,32 @@
 ---
-title: Summary List
-parent: docs/ui/components
+id: summary-list
+title: SummaryList
 ---
 
-import {
-  SummaryList,
-  SummaryListItem,
-  SummaryListItemKey,
-  SummaryListItemValue,
-  SummaryListItemAction,
-} from '@digigov/ui/core/SummaryList';
+# SummaryList
 
-## Example
+Use the summary list to summarise information, for example, a user’s responses at the end of a form.
+ 
 
-```jsx live path=core/SummaryList/index.tsx
-<SummaryList>
-  <SummaryListItem>
-    <SummaryListItemKey>Όνομα</SummaryListItemKey>
-    <SummaryListItemValue> Μάριος</SummaryListItemValue>
-    <SummaryListItemAction> Αλλαγή</SummaryListItemAction>
-  </SummaryListItem>
-  <SummaryListItem>
-    <SummaryListItemKey>Επώνυμο</SummaryListItemKey>
-    <SummaryListItemValue>Μενεξές</SummaryListItemValue>
-  </SummaryListItem>
-</SummaryList>
-```
 
-<br />
+```bash
+import SummaryList from '@digigov/ui/core/SummaryList';
+``` 
 
-## When to use this component
+## How to use
 
-Use the SummaryList component to present pairs of related information, known
-as key-value pairs, in a list.
-
-> The key is a description or label of a piece of
-> information, like `Name`, and the value is the piece of information itself,
-> like `John Smith`.
-
-## When not to use this component
-
-Only use it to present information that has a key and at least one value.
-
-Do not use it for tabular data or a simple list of information or tasks, like
-a task list.
-
-## How it works
+<Story packageName="@digigov/ui" component="core/SummaryList" story="Default.tsx" />
 
 ### Summary list with actions
 
-You can add actions to a summary list, like a ‘Change’ link to let users go
-back and edit their answer.
-
-For sighted users, the actions get their context from the other content in the
-row they appear in.
-
-Assistive technology users, like those who use a screen reader, may hear the
-links out of context and not know what they do. To give more context, add
-visually hidden text to the links. This means a screen reader user will hear
-a meaningful action, like `Change name` or `Change date of birth`.
-
-## API
+Assistive technology users, like those who use a screen reader, may hear the links out of context and not know what they do. 
+To give more context, add visually hidden text to the links. 
+This means a screen reader user will hear a meaningful action, like ‘Αλλαγή ονόματος’ or ‘Αλλαγή ημερομηνίας γέννησης’.
 
-### Properties
+<Story packageName="@digigov/ui" component="core/SummaryList" story="WithActions.tsx" />
 
-<PropsDoc data={SummaryList.__doc__} />
-<PropsDoc data={SummaryListItem.__doc__} />
-<PropsDoc data={SummaryListItemKey.__doc__} />
-<PropsDoc data={SummaryListItemValue.__doc__} />
-<PropsDoc data={SummaryListItemAction.__doc__} />
-<br />
+### Summary list without borders
 
-### Styles
+If you do not include actions in your summary list and it would be better for your design to remove the separating borders, use the `border={false}` prop.
 
-<StylesDoc data={SummaryList.__doc__} />
-<StylesDoc data={SummaryListItem.__doc__} />
-<StylesDoc data={SummaryListItemKey.__doc__} />
-<StylesDoc data={SummaryListItemValue.__doc__} />
-<StylesDoc data={SummaryListItemAction.__doc__} />
+<Story packageName="@digigov/ui" component="core/SummaryList" story="WithoutBorders.tsx" />

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

@@ -0,0 +1,19 @@
+/* eslint-disable digigov/no-relative-imports */
+import Table from '@digigov/ui/core';
+export default {
+  title: 'Digigov UI/core/Table',
+  component: Table
+};
+export * from './__stories__/Default';
+export * from './__stories__/TableCaptions';
+export * from './__stories__/NoData';
+export * from './__stories__/VerticalHeaders';
+export * from './__stories__/ZebraProp';
+export * from './__stories__/NumericDataType';
+export * from './__stories__/VerticalBorders';
+export * from './__stories__/DarkVariant';
+export * from './__stories__/DarkVariantWithVerticalHeaders';
+export * from './__stories__/WithLoader';
+export * from './__stories__/DefinedWidth';
+export * from './__stories__/Densed';
+export * from './__stories__/MultipleProps';

package/es/core/Table/TableFloatingScroll.js

@@ -0,0 +1,85 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import React, { useEffect, useRef, useState } from 'react';
+export function TableFloatingScroll(props) {
+  var ref = useRef(null);
+  var contentRef = useRef(null);
+  var scrollBlockRef = useRef(null);
+
+  var _useState = useState(0),
+      _useState2 = _slicedToArray(_useState, 2),
+      width = _useState2[0],
+      setWidth = _useState2[1];
+
+  var _useState3 = useState(0),
+      _useState4 = _slicedToArray(_useState3, 2),
+      containerWidth = _useState4[0],
+      setContainerWidth = _useState4[1];
+
+  var _useState5 = useState('relative'),
+      _useState6 = _slicedToArray(_useState5, 2),
+      position = _useState6[0],
+      setPosition = _useState6[1];
+
+  useEffect(function () {
+    var _ref$current;
+
+    contentRef.current = (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.firstChild; // @ts-ignore
+
+    setContainerWidth(ref.current.offsetWidth);
+    setWidth(contentRef.current.scrollWidth);
+    var elementOffset = contentRef.current.offsetTop + contentRef.current.offsetHeight;
+
+    function onBodyScroll() {
+      var currentScroll = window.pageYOffset + window.innerHeight; // @ts-ignore
+
+      if (currentScroll < elementOffset && currentScroll > contentRef.current.offsetTop) {
+        setPosition('fixed'); // @ts-ignore
+      } else if (currentScroll >= elementOffset || currentScroll <= contentRef.current.offsetTop) {
+        setPosition('relative');
+      }
+    }
+
+    function onBlockScroll() {
+      // @ts-ignore
+      ref.current.scrollLeft = scrollBlockRef.current.scrollLeft;
+    } // @ts-ignore
+
+
+    scrollBlockRef.current.addEventListener('scroll', onBlockScroll);
+    document.addEventListener('scroll', onBodyScroll);
+    window.addEventListener('resize', function () {
+      // @ts-ignore
+      setContainerWidth(ref.current.offsetWidth); // @ts-ignore
+
+      setWidth(contentRef.current.scrollWidth);
+    });
+    return function () {
+      // @ts-ignore
+      scrollBlockRef.current.removeEventListener('scroll', onBlockScroll);
+      document.removeEventListener('scroll', onBodyScroll);
+    };
+  }, []);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    ref: ref,
+    style: {
+      maxWidth: '100%',
+      overflowX: 'scroll'
+    }
+  }, props.children), /*#__PURE__*/React.createElement("div", {
+    style: {
+      overflow: 'auto',
+      height: '35px',
+      marginTop: '-35px',
+      position: position,
+      maxWidth: "".concat(containerWidth, "px"),
+      bottom: 0
+    },
+    ref: scrollBlockRef
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      width: "".concat(width, "px"),
+      overflow: 'hidden'
+    }
+  })));
+}
+export default TableFloatingScroll;

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

@@ -0,0 +1,11 @@
+import React from 'react';
+import { TableContainer, Table, TableCaption, TableHead, TableRow, TableBody, TableHeadCell, TableDataCell } from '@digigov/react-core';
+
+var _ref = /*#__PURE__*/React.createElement(TableContainer, null, /*#__PURE__*/React.createElement(Table, {
+  variant: "dark"
+}, /*#__PURE__*/React.createElement(TableCaption, null, "\u03A0\u03B5\u03C1\u03AF\u03BF\u03B4\u03BF\u03C2 \u03BA\u03B1\u03B9 \u03C0\u03BF\u03C3\u03AC"), /*#__PURE__*/React.createElement(TableHead, null, /*#__PURE__*/React.createElement(TableRow, null, /*#__PURE__*/React.createElement(TableHeadCell, null, "\u03A0\u03B5\u03C1\u03AF\u03BF\u03B4\u03BF\u03C2"), /*#__PURE__*/React.createElement(TableHeadCell, null, "\u039A\u03B1\u03BD\u03BF\u03BD\u03B9\u03BA\u03CC \u03C0\u03BF\u03C3\u03CC"), /*#__PURE__*/React.createElement(TableHeadCell, null, "\u039C\u03B5\u03B9\u03C9\u03BC\u03AD\u03BD\u03BF \u03C0\u03BF\u03C3\u03CC"))), /*#__PURE__*/React.createElement(TableBody, null, /*#__PURE__*/React.createElement(TableRow, null, /*#__PURE__*/React.createElement(TableDataCell, null, "\u03A0\u03C1\u03CE\u03C4\u03B5\u03C2 6 \u03B5\u03B2\u03B4\u03BF\u03BC\u03AC\u03B4\u03B5\u03C2 "), /*#__PURE__*/React.createElement(TableDataCell, null, " \u20AC109.80 / \u03B5\u03B2\u03B4\u03BF\u03BC\u03AC\u03B4\u03B1"), /*#__PURE__*/React.createElement(TableDataCell, null, " \u20AC69.80 / \u03B5\u03B2\u03B4\u03BF\u03BC\u03AC\u03B4\u03B1")), /*#__PURE__*/React.createElement(TableRow, null, /*#__PURE__*/React.createElement(TableDataCell, null, "\u0395\u03C0\u03CC\u03BC\u03B5\u03BD\u03B5\u03C2 33 \u03B5\u03B2\u03B4\u03BF\u03BC\u03AC\u03B4\u03B5\u03C2"), /*#__PURE__*/React.createElement(TableDataCell, null, " \u20AC99.80 / \u03B5\u03B2\u03B4\u03BF\u03BC\u03AC\u03B4\u03B1"), /*#__PURE__*/React.createElement(TableDataCell, null, " \u20AC64.80 / \u03B5\u03B2\u03B4\u03BF\u03BC\u03AC\u03B4\u03B1")), /*#__PURE__*/React.createElement(TableRow, null, /*#__PURE__*/React.createElement(TableDataCell, null, "\u03A3\u03C5\u03BD\u03BF\u03BB\u03B9\u03BA\u03CC \u03C0\u03BF\u03C3\u03CC "), /*#__PURE__*/React.createElement(TableDataCell, null, "\u20AC4.282,20 "), /*#__PURE__*/React.createElement(TableDataCell, null, " \u20AC3.282,20")))));
+
+export var DarkVariant = function DarkVariant() {
+  return _ref;
+};
+export default DarkVariant;

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

@@ -0,0 +1,11 @@
+import React from 'react';
+import { TableContainer, Table, TableCaption, TableHead, TableRow, TableBody, TableHeadCell, TableDataCell } from '@digigov/react-core';
+
+var _ref = /*#__PURE__*/React.createElement(TableContainer, null, /*#__PURE__*/React.createElement(Table, {
+  variant: "dark"
+}, /*#__PURE__*/React.createElement(TableCaption, null, "Table with dark variant and vertical borders"), /*#__PURE__*/React.createElement(TableHead, null, /*#__PURE__*/React.createElement(TableRow, null, /*#__PURE__*/React.createElement(TableHeadCell, null, "Date"), /*#__PURE__*/React.createElement(TableHeadCell, null, "Amount"), /*#__PURE__*/React.createElement(TableHeadCell, null, "Date"), /*#__PURE__*/React.createElement(TableHeadCell, null, "Amount"))), /*#__PURE__*/React.createElement(TableBody, null, /*#__PURE__*/React.createElement(TableRow, null, /*#__PURE__*/React.createElement(TableHeadCell, null, "First 6 weeks"), /*#__PURE__*/React.createElement(TableDataCell, null, "\u20AC109.80"), /*#__PURE__*/React.createElement(TableDataCell, null, "\u20AC69.80"), /*#__PURE__*/React.createElement(TableDataCell, null, "\u20AC109.80")), /*#__PURE__*/React.createElement(TableRow, null, /*#__PURE__*/React.createElement(TableHeadCell, null, "First 6 weeks"), /*#__PURE__*/React.createElement(TableDataCell, null, "\u20AC109.80"), /*#__PURE__*/React.createElement(TableDataCell, null, "\u20AC69.80"), /*#__PURE__*/React.createElement(TableDataCell, null, "\u20AC109.80")), /*#__PURE__*/React.createElement(TableRow, null, /*#__PURE__*/React.createElement(TableHeadCell, null, "First 6 weeks"), /*#__PURE__*/React.createElement(TableDataCell, null, "\u20AC109.80"), /*#__PURE__*/React.createElement(TableDataCell, null, "\u20AC69.80"), /*#__PURE__*/React.createElement(TableDataCell, null, "\u20AC109.80")), /*#__PURE__*/React.createElement(TableRow, null, /*#__PURE__*/React.createElement(TableHeadCell, null, "First 6 weeks"), /*#__PURE__*/React.createElement(TableDataCell, null, "\u20AC109.80"), /*#__PURE__*/React.createElement(TableDataCell, null, "\u20AC69.80"), /*#__PURE__*/React.createElement(TableDataCell, null, "\u20AC109.80")))));
+
+export var DarkVariantWithVerticalHeaders = function DarkVariantWithVerticalHeaders() {
+  return _ref;
+};
+export default DarkVariantWithVerticalHeaders;

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

@@ -0,0 +1,9 @@
+import React from 'react';
+import { TableContainer, Table, TableCaption, TableHead, TableRow, TableBody, TableHeadCell, TableDataCell } from '@digigov/react-core';
+
+var _ref = /*#__PURE__*/React.createElement(TableContainer, null, /*#__PURE__*/React.createElement(Table, null, /*#__PURE__*/React.createElement(TableCaption, null, "\u03A0\u03B5\u03C1\u03AF\u03BF\u03B4\u03BF\u03C2 \u03BA\u03B1\u03B9 \u03C0\u03BF\u03C3\u03AC"), /*#__PURE__*/React.createElement(TableHead, null, /*#__PURE__*/React.createElement(TableRow, null, /*#__PURE__*/React.createElement(TableHeadCell, null, "\u03A0\u03B5\u03C1\u03AF\u03BF\u03B4\u03BF\u03C2"), /*#__PURE__*/React.createElement(TableHeadCell, null, "\u039A\u03B1\u03BD\u03BF\u03BD\u03B9\u03BA\u03CC \u03C0\u03BF\u03C3\u03CC"), /*#__PURE__*/React.createElement(TableHeadCell, null, "\u039C\u03B5\u03B9\u03C9\u03BC\u03AD\u03BD\u03BF \u03C0\u03BF\u03C3\u03CC"))), /*#__PURE__*/React.createElement(TableBody, null, /*#__PURE__*/React.createElement(TableRow, null, /*#__PURE__*/React.createElement(TableDataCell, null, "\u03A0\u03C1\u03CE\u03C4\u03B5\u03C2 6 \u03B5\u03B2\u03B4\u03BF\u03BC\u03AC\u03B4\u03B5\u03C2 "), /*#__PURE__*/React.createElement(TableDataCell, null, " \u20AC109.80 / \u03B5\u03B2\u03B4\u03BF\u03BC\u03AC\u03B4\u03B1"), /*#__PURE__*/React.createElement(TableDataCell, null, " \u20AC69.80 / \u03B5\u03B2\u03B4\u03BF\u03BC\u03AC\u03B4\u03B1")), /*#__PURE__*/React.createElement(TableRow, null, /*#__PURE__*/React.createElement(TableDataCell, null, "\u0395\u03C0\u03CC\u03BC\u03B5\u03BD\u03B5\u03C2 33 \u03B5\u03B2\u03B4\u03BF\u03BC\u03AC\u03B4\u03B5\u03C2"), /*#__PURE__*/React.createElement(TableDataCell, null, " \u20AC99.80 / \u03B5\u03B2\u03B4\u03BF\u03BC\u03AC\u03B4\u03B1"), /*#__PURE__*/React.createElement(TableDataCell, null, " \u20AC64.80 / \u03B5\u03B2\u03B4\u03BF\u03BC\u03AC\u03B4\u03B1")), /*#__PURE__*/React.createElement(TableRow, null, /*#__PURE__*/React.createElement(TableDataCell, null, "\u03A3\u03C5\u03BD\u03BF\u03BB\u03B9\u03BA\u03CC \u03C0\u03BF\u03C3\u03CC "), /*#__PURE__*/React.createElement(TableDataCell, null, "\u20AC4.282,20 "), /*#__PURE__*/React.createElement(TableDataCell, null, " \u20AC3.282,20")))));
+
+export var Default = function Default() {
+  return _ref;
+};
+export default Default;

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

@@ -0,0 +1,15 @@
+import React from 'react';
+import { TableContainer, Table, TableHead, TableRow, TableBody, TableHeadCell, TableDataCell, TableCaption } from '@digigov/react-core';
+
+var _ref = /*#__PURE__*/React.createElement(TableContainer, null, /*#__PURE__*/React.createElement(Table, null, /*#__PURE__*/React.createElement(TableCaption, null, "Table with one-half and one-quarter width"), /*#__PURE__*/React.createElement(TableHead, null, /*#__PURE__*/React.createElement(TableRow, null, /*#__PURE__*/React.createElement(TableHeadCell, {
+  cellWidth: "one-half"
+}, "Date"), /*#__PURE__*/React.createElement(TableHeadCell, {
+  cellWidth: "one-quarter"
+}, "Amount"), /*#__PURE__*/React.createElement(TableHeadCell, {
+  cellWidth: "one-quarter"
+}, "Date"))), /*#__PURE__*/React.createElement(TableBody, null, /*#__PURE__*/React.createElement(TableRow, null, /*#__PURE__*/React.createElement(TableHeadCell, null, "First 6 weeks"), /*#__PURE__*/React.createElement(TableDataCell, null, "\u20AC109.80"), /*#__PURE__*/React.createElement(TableDataCell, null, "\u20AC69.80")), /*#__PURE__*/React.createElement(TableRow, null, /*#__PURE__*/React.createElement(TableHeadCell, null, "First 6 weeks"), /*#__PURE__*/React.createElement(TableDataCell, null, "\u20AC109.80"), /*#__PURE__*/React.createElement(TableDataCell, null, "\u20AC69.80")))));
+
+export var DefinedWidth = function DefinedWidth() {
+  return _ref;
+};
+export default DefinedWidth;

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

@@ -0,0 +1,13 @@
+import React from 'react';
+import { TableContainer, Table, TableCaption, TableHead, TableRow, TableBody, TableHeadCell, TableDataCell } from '@digigov/react-core';
+
+var _ref = /*#__PURE__*/React.createElement(TableContainer, {
+  border: true
+}, /*#__PURE__*/React.createElement(Table, {
+  dense: true
+}, /*#__PURE__*/React.createElement(TableCaption, null, "Table with dense props"), /*#__PURE__*/React.createElement(TableHead, null, /*#__PURE__*/React.createElement(TableRow, null, /*#__PURE__*/React.createElement(TableHeadCell, null, "Date"), /*#__PURE__*/React.createElement(TableHeadCell, null, "Amount"), /*#__PURE__*/React.createElement(TableHeadCell, null, "Date"), /*#__PURE__*/React.createElement(TableHeadCell, null, "Amount"), /*#__PURE__*/React.createElement(TableHeadCell, null, "Date"), /*#__PURE__*/React.createElement(TableHeadCell, null, "Amount"), /*#__PURE__*/React.createElement(TableHeadCell, null, "Date"), /*#__PURE__*/React.createElement(TableHeadCell, null, "Amount"), /*#__PURE__*/React.createElement(TableHeadCell, null, "Date"), /*#__PURE__*/React.createElement(TableHeadCell, null, "Amount"), /*#__PURE__*/React.createElement(TableHeadCell, null, "Date"))), /*#__PURE__*/React.createElement(TableBody, null, /*#__PURE__*/React.createElement(TableRow, null, /*#__PURE__*/React.createElement(TableDataCell, null, "First 6 weeks"), /*#__PURE__*/React.createElement(TableDataCell, null, "\u20AC109.80"), /*#__PURE__*/React.createElement(TableDataCell, null, "\u20AC69.80"), /*#__PURE__*/React.createElement(TableDataCell, null, "\u20AC109.80"), /*#__PURE__*/React.createElement(TableDataCell, null, "First 6 weeks"), /*#__PURE__*/React.createElement(TableDataCell, null, "\u20AC109.80"), /*#__PURE__*/React.createElement(TableDataCell, null, "\u20AC69.80"), /*#__PURE__*/React.createElement(TableDataCell, null, "\u20AC109.80"), /*#__PURE__*/React.createElement(TableDataCell, null, "\u20AC109.80"), /*#__PURE__*/React.createElement(TableDataCell, null, "\u20AC69.80"), /*#__PURE__*/React.createElement(TableDataCell, null, "\u20AC109.80")), /*#__PURE__*/React.createElement(TableRow, null, /*#__PURE__*/React.createElement(TableDataCell, null, "First 6 weeks"), /*#__PURE__*/React.createElement(TableDataCell, null, "\u20AC109.80"), /*#__PURE__*/React.createElement(TableDataCell, null, "\u20AC69.80"), /*#__PURE__*/React.createElement(TableDataCell, null, "\u20AC109.80"), /*#__PURE__*/React.createElement(TableDataCell, null, "First 6 weeks"), /*#__PURE__*/React.createElement(TableDataCell, null, "\u20AC109.80"), /*#__PURE__*/React.createElement(TableDataCell, null, "\u20AC69.80"), /*#__PURE__*/React.createElement(TableDataCell, null, "\u20AC109.80"), /*#__PURE__*/React.createElement(TableDataCell, null, "\u20AC109.80"), /*#__PURE__*/React.createElement(TableDataCell, null, "\u20AC69.80"), /*#__PURE__*/React.createElement(TableDataCell, null, "\u20AC109.80")), /*#__PURE__*/React.createElement(TableRow, null, /*#__PURE__*/React.createElement(TableDataCell, null, "First 6 weeks"), /*#__PURE__*/React.createElement(TableDataCell, null, "\u20AC109.80"), /*#__PURE__*/React.createElement(TableDataCell, null, "\u20AC69.80"), /*#__PURE__*/React.createElement(TableDataCell, null, "\u20AC109.80"), /*#__PURE__*/React.createElement(TableDataCell, null, "First 6 weeks"), /*#__PURE__*/React.createElement(TableDataCell, null, "\u20AC109.80"), /*#__PURE__*/React.createElement(TableDataCell, null, "\u20AC69.80"), /*#__PURE__*/React.createElement(TableDataCell, null, "\u20AC109.80"), /*#__PURE__*/React.createElement(TableDataCell, null, "\u20AC109.80"), /*#__PURE__*/React.createElement(TableDataCell, null, "\u20AC69.80"), /*#__PURE__*/React.createElement(TableDataCell, null, "\u20AC109.80")))));
+
+export var Densed = function Densed() {
+  return _ref;
+};
+export default Densed;

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

@@ -0,0 +1,45 @@
+import React from 'react';
+import { TableContainer, Table, TableCaption, TableHead, TableRow, TableBody, TableHeadCell, TableDataCell } from '@digigov/react-core';
+
+var _ref = /*#__PURE__*/React.createElement(TableContainer, null, /*#__PURE__*/React.createElement(Table, {
+  zebra: true,
+  variant: "dark",
+  verticalBorders: true
+}, /*#__PURE__*/React.createElement(TableCaption, null, "Table with zebra prop"), /*#__PURE__*/React.createElement(TableHead, null, /*#__PURE__*/React.createElement(TableRow, null, /*#__PURE__*/React.createElement(TableHeadCell, null, "Date"), /*#__PURE__*/React.createElement(TableHeadCell, null, "Amount"), /*#__PURE__*/React.createElement(TableHeadCell, null, "Date"), /*#__PURE__*/React.createElement(TableHeadCell, null, "Amount"), /*#__PURE__*/React.createElement(TableHeadCell, null, "Date"))), /*#__PURE__*/React.createElement(TableBody, null, /*#__PURE__*/React.createElement(TableRow, null, /*#__PURE__*/React.createElement(TableHeadCell, null, "First 6 weeks"), /*#__PURE__*/React.createElement(TableDataCell, {
+  dataType: "numeric"
+}, "\u20AC109.80"), /*#__PURE__*/React.createElement(TableDataCell, {
+  dataType: "numeric"
+}, "\u20AC69.80"), /*#__PURE__*/React.createElement(TableDataCell, {
+  dataType: "numeric"
+}, "\u20AC109.80"), /*#__PURE__*/React.createElement(TableDataCell, {
+  dataType: "numeric"
+}, "\u20AC69.80")), /*#__PURE__*/React.createElement(TableRow, null, /*#__PURE__*/React.createElement(TableHeadCell, null, "First 6 weeks"), /*#__PURE__*/React.createElement(TableDataCell, {
+  dataType: "numeric"
+}, "\u20AC109.80"), /*#__PURE__*/React.createElement(TableDataCell, {
+  dataType: "numeric"
+}, "\u20AC69.80"), /*#__PURE__*/React.createElement(TableDataCell, {
+  dataType: "numeric"
+}, "\u20AC109.80"), /*#__PURE__*/React.createElement(TableDataCell, {
+  dataType: "numeric"
+}, "\u20AC69.80")), /*#__PURE__*/React.createElement(TableRow, null, /*#__PURE__*/React.createElement(TableHeadCell, null, "First 6 weeks"), /*#__PURE__*/React.createElement(TableDataCell, {
+  dataType: "numeric"
+}, "\u20AC109.80"), /*#__PURE__*/React.createElement(TableDataCell, {
+  dataType: "numeric"
+}, "\u20AC69.80"), /*#__PURE__*/React.createElement(TableDataCell, {
+  dataType: "numeric"
+}, "\u20AC109.80"), /*#__PURE__*/React.createElement(TableDataCell, {
+  dataType: "numeric"
+}, "\u20AC69.80")), /*#__PURE__*/React.createElement(TableRow, null, /*#__PURE__*/React.createElement(TableHeadCell, null, "First 6 weeks"), /*#__PURE__*/React.createElement(TableDataCell, {
+  dataType: "numeric"
+}, "\u20AC109.80"), /*#__PURE__*/React.createElement(TableDataCell, {
+  dataType: "numeric"
+}, "\u20AC69.80"), /*#__PURE__*/React.createElement(TableDataCell, {
+  dataType: "numeric"
+}, "\u20AC109.80"), /*#__PURE__*/React.createElement(TableDataCell, {
+  dataType: "numeric"
+}, "\u20AC69.80")))));
+
+export var MultipleProps = function MultipleProps() {
+  return _ref;
+};
+export default MultipleProps;

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

@@ -0,0 +1,9 @@
+import React from 'react';
+import { TableContainer, Table, TableCaption, TableHead, TableRow, TableBody, TableHeadCell, TableNoDataRow } from '@digigov/react-core';
+
+var _ref = /*#__PURE__*/React.createElement(TableContainer, null, /*#__PURE__*/React.createElement(Table, null, /*#__PURE__*/React.createElement(TableCaption, null, "Table with no data"), /*#__PURE__*/React.createElement(TableHead, null, /*#__PURE__*/React.createElement(TableRow, null, /*#__PURE__*/React.createElement(TableHeadCell, null, "Date"), /*#__PURE__*/React.createElement(TableHeadCell, null, "Amount"), /*#__PURE__*/React.createElement(TableHeadCell, null, "Date"), /*#__PURE__*/React.createElement(TableHeadCell, null, "Amount"))), /*#__PURE__*/React.createElement(TableBody, null, /*#__PURE__*/React.createElement(TableNoDataRow, null, "No data"))));
+
+export var NoData = function NoData() {
+  return _ref;
+};
+export default NoData;

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

@@ -0,0 +1,33 @@
+import React from 'react';
+import { TableContainer, Table, TableCaption, TableHead, TableRow, TableBody, TableHeadCell, TableDataCell } from '@digigov/react-core';
+
+var _ref = /*#__PURE__*/React.createElement(TableContainer, null, /*#__PURE__*/React.createElement(Table, null, /*#__PURE__*/React.createElement(TableCaption, null, "Table with dataType numeric"), /*#__PURE__*/React.createElement(TableHead, null, /*#__PURE__*/React.createElement(TableRow, null, /*#__PURE__*/React.createElement(TableHeadCell, null, "Date"), /*#__PURE__*/React.createElement(TableHeadCell, {
+  dataType: "numeric"
+}, "Amount"), /*#__PURE__*/React.createElement(TableHeadCell, {
+  dataType: "numeric"
+}, "Date"), /*#__PURE__*/React.createElement(TableHeadCell, {
+  dataType: "numeric"
+}, "Amount"))), /*#__PURE__*/React.createElement(TableBody, null, /*#__PURE__*/React.createElement(TableRow, null, /*#__PURE__*/React.createElement(TableDataCell, null, "First 6 weeks"), /*#__PURE__*/React.createElement(TableDataCell, {
+  dataType: "numeric"
+}, "\u20AC109.80"), /*#__PURE__*/React.createElement(TableDataCell, {
+  dataType: "numeric"
+}, "\u20AC69.80"), /*#__PURE__*/React.createElement(TableDataCell, {
+  dataType: "numeric"
+}, "\u20AC109.80")), /*#__PURE__*/React.createElement(TableRow, null, /*#__PURE__*/React.createElement(TableDataCell, null, "First 6 weeks"), /*#__PURE__*/React.createElement(TableDataCell, {
+  dataType: "numeric"
+}, "\u20AC109.80"), /*#__PURE__*/React.createElement(TableDataCell, {
+  dataType: "numeric"
+}, "\u20AC69.80"), /*#__PURE__*/React.createElement(TableDataCell, {
+  dataType: "numeric"
+}, "\u20AC109.80")), /*#__PURE__*/React.createElement(TableRow, null, /*#__PURE__*/React.createElement(TableDataCell, null, "First 6 weeks"), /*#__PURE__*/React.createElement(TableDataCell, {
+  dataType: "numeric"
+}, "\u20AC109.80"), /*#__PURE__*/React.createElement(TableDataCell, {
+  dataType: "numeric"
+}, "\u20AC69.80"), /*#__PURE__*/React.createElement(TableDataCell, {
+  dataType: "numeric"
+}, "\u20AC109.80")))));
+
+export var NumericDataType = function NumericDataType() {
+  return _ref;
+};
+export default NumericDataType;

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

@@ -0,0 +1,17 @@
+import React from 'react';
+import { TableContainer, Table, TableCaption } from '@digigov/react-core';
+
+var _ref = /*#__PURE__*/React.createElement(TableContainer, null, /*#__PURE__*/React.createElement(Table, null, /*#__PURE__*/React.createElement(TableCaption, {
+  size: "xl"
+}, "Table Caption Extra Large"), /*#__PURE__*/React.createElement(TableCaption, {
+  size: "l"
+}, "Table Caption Large"), /*#__PURE__*/React.createElement(TableCaption, {
+  size: "m"
+}, "Table Caption Medium"), /*#__PURE__*/React.createElement(TableCaption, {
+  size: "s"
+}, "Table Caption Small")));
+
+export var TableCaptions = function TableCaptions() {
+  return _ref;
+};
+export default TableCaptions;

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

@@ -0,0 +1,11 @@
+import React from 'react';
+import { TableContainer, Table, TableHead, TableRow, TableBody, TableHeadCell, TableDataCell, TableCaption } from '@digigov/react-core';
+
+var _ref = /*#__PURE__*/React.createElement(TableContainer, null, /*#__PURE__*/React.createElement(Table, {
+  verticalBorders: true
+}, /*#__PURE__*/React.createElement(TableCaption, null, "Table with vertical borders"), /*#__PURE__*/React.createElement(TableHead, null, /*#__PURE__*/React.createElement(TableRow, null, /*#__PURE__*/React.createElement(TableHeadCell, null, "Date"), /*#__PURE__*/React.createElement(TableHeadCell, null, "Amount"), /*#__PURE__*/React.createElement(TableHeadCell, null, "Date"), /*#__PURE__*/React.createElement(TableHeadCell, null, "Amount"))), /*#__PURE__*/React.createElement(TableBody, null, /*#__PURE__*/React.createElement(TableRow, null, /*#__PURE__*/React.createElement(TableDataCell, null, "First 6 weeks"), /*#__PURE__*/React.createElement(TableDataCell, null, "\u20AC109.80"), /*#__PURE__*/React.createElement(TableDataCell, null, "\u20AC69.80"), /*#__PURE__*/React.createElement(TableDataCell, null, "\u20AC109.80")), /*#__PURE__*/React.createElement(TableRow, null, /*#__PURE__*/React.createElement(TableDataCell, null, "First 6 weeks"), /*#__PURE__*/React.createElement(TableDataCell, null, "\u20AC109.80"), /*#__PURE__*/React.createElement(TableDataCell, null, "\u20AC69.80"), /*#__PURE__*/React.createElement(TableDataCell, null, "\u20AC109.80")), /*#__PURE__*/React.createElement(TableRow, null, /*#__PURE__*/React.createElement(TableDataCell, null, "First 6 weeks"), /*#__PURE__*/React.createElement(TableDataCell, null, "\u20AC109.80"), /*#__PURE__*/React.createElement(TableDataCell, null, "\u20AC69.80"), /*#__PURE__*/React.createElement(TableDataCell, null, "\u20AC109.80")), /*#__PURE__*/React.createElement(TableRow, null, /*#__PURE__*/React.createElement(TableDataCell, null, "First 6 weeks"), /*#__PURE__*/React.createElement(TableDataCell, null, "\u20AC109.80"), /*#__PURE__*/React.createElement(TableDataCell, null, "\u20AC69.80"), /*#__PURE__*/React.createElement(TableDataCell, null, "\u20AC109.80")))));
+
+export var VerticalBorders = function VerticalBorders() {
+  return _ref;
+};
+export default VerticalBorders;

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

@@ -0,0 +1,9 @@
+import React from 'react';
+import { TableContainer, Table, TableHead, TableRow, TableBody, TableHeadCell, TableDataCell, TableCaption } from '@digigov/react-core';
+
+var _ref = /*#__PURE__*/React.createElement(TableContainer, null, /*#__PURE__*/React.createElement(Table, null, /*#__PURE__*/React.createElement(TableCaption, null, "Table with vertical borders"), /*#__PURE__*/React.createElement(TableHead, null, /*#__PURE__*/React.createElement(TableRow, null, /*#__PURE__*/React.createElement(TableHeadCell, null, "Date"), /*#__PURE__*/React.createElement(TableHeadCell, null, "Amount"), /*#__PURE__*/React.createElement(TableHeadCell, null, "Date"), /*#__PURE__*/React.createElement(TableHeadCell, null, "Amount"))), /*#__PURE__*/React.createElement(TableBody, null, /*#__PURE__*/React.createElement(TableRow, null, /*#__PURE__*/React.createElement(TableHeadCell, null, "First 6 weeks"), /*#__PURE__*/React.createElement(TableDataCell, null, "\u20AC109.80"), /*#__PURE__*/React.createElement(TableDataCell, null, "\u20AC69.80"), /*#__PURE__*/React.createElement(TableDataCell, null, "\u20AC109.80")), /*#__PURE__*/React.createElement(TableRow, null, /*#__PURE__*/React.createElement(TableHeadCell, null, "First 6 weeks"), /*#__PURE__*/React.createElement(TableDataCell, null, "\u20AC109.80"), /*#__PURE__*/React.createElement(TableDataCell, null, "\u20AC69.80"), /*#__PURE__*/React.createElement(TableDataCell, null, "\u20AC109.80")), /*#__PURE__*/React.createElement(TableRow, null, /*#__PURE__*/React.createElement(TableHeadCell, null, "First 6 weeks"), /*#__PURE__*/React.createElement(TableDataCell, null, "\u20AC109.80"), /*#__PURE__*/React.createElement(TableDataCell, null, "\u20AC69.80"), /*#__PURE__*/React.createElement(TableDataCell, null, "\u20AC109.80")), /*#__PURE__*/React.createElement(TableRow, null, /*#__PURE__*/React.createElement(TableHeadCell, null, "First 6 weeks"), /*#__PURE__*/React.createElement(TableDataCell, null, "\u20AC109.80"), /*#__PURE__*/React.createElement(TableDataCell, null, "\u20AC69.80"), /*#__PURE__*/React.createElement(TableDataCell, null, "\u20AC109.80")))));
+
+export var VerticalHeaders = function VerticalHeaders() {
+  return _ref;
+};
+export default VerticalHeaders;

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

@@ -0,0 +1,53 @@
+import React from 'react';
+import { TableContainer, Table, TableCaption, TableHead, TableRow, TableBody, TableHeadCell, TableDataCell, TableNoDataRow } from '@digigov/ui/core';
+var data = [{
+  name: 'Dimitris',
+  job: 'carpenter',
+  year: '5 years',
+  salary: '10.80$'
+}, {
+  name: 'Katerina',
+  job: 'engineer',
+  year: '6 years',
+  salary: '19.60$'
+}, {
+  name: 'Vasilis',
+  job: 'taxi driver',
+  year: '10 years',
+  salary: '12.83$'
+}, {
+  name: 'Giorgos',
+  job: 'yoga master',
+  year: '15 years',
+  salary: '27.80$'
+}, {
+  name: 'Giannis',
+  job: 'unemployed',
+  year: '5 years',
+  salary: '00.00$'
+}, {
+  name: 'Katerina',
+  job: 'car driver',
+  year: '10 years',
+  salary: '11.80$'
+}, {
+  name: 'Thanasis',
+  job: 'babysitter',
+  year: '5 years',
+  salary: '15.80$'
+}];
+
+var _ref = /*#__PURE__*/React.createElement(TableCaption, null, "Table with vertical headers");
+
+var _ref2 = /*#__PURE__*/React.createElement(TableHead, null, /*#__PURE__*/React.createElement(TableRow, null, /*#__PURE__*/React.createElement(TableHeadCell, null, "Name"), /*#__PURE__*/React.createElement(TableHeadCell, null, "Job"), /*#__PURE__*/React.createElement(TableHeadCell, null, "Year"), /*#__PURE__*/React.createElement(TableHeadCell, null, "Salary")));
+
+var _ref3 = /*#__PURE__*/React.createElement(TableNoDataRow, null, "No data");
+
+export var WithHeader = function WithHeader() {
+  return /*#__PURE__*/React.createElement(TableContainer, null, /*#__PURE__*/React.createElement(Table, null, _ref, _ref2, /*#__PURE__*/React.createElement(TableBody, null, data && data.length > 0 ? data.map(function (d, index) {
+    return /*#__PURE__*/React.createElement(TableRow, {
+      key: index
+    }, /*#__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));
+  }) : _ref3)));
+};
+export default WithHeader;

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

@@ -0,0 +1,81 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import React, { useState } from 'react';
+import { Button, TableContainer, Table, TableCaption, TableHead, TableRow, TableBody, TableHeadCell, TableDataCell, TableNoDataRow } from '@digigov/react-core';
+import { LoaderContainer, CircularProgress, TableLoaderBackground } from '@digigov/react-extensions/admin/';
+var data = [{
+  name: 'Dimitris',
+  job: 'carpenter',
+  year: '5 years',
+  salary: '10.80$'
+}, {
+  name: 'Katerina',
+  job: 'engineer',
+  year: '6 years',
+  salary: '19.60$'
+}, {
+  name: 'Vasilis',
+  job: 'taxi driver',
+  year: '10 years',
+  salary: '12.83$'
+}, {
+  name: 'Giorgos',
+  job: 'yoga master',
+  year: '15 years',
+  salary: '27.80$'
+}, {
+  name: 'Giannis',
+  job: 'unemployed',
+  year: '5 years',
+  salary: '00.00$'
+}, {
+  name: 'Katerina',
+  job: 'car driver',
+  year: '10 years',
+  salary: '11.80$'
+}, {
+  name: 'Thanasis',
+  job: 'babysitter',
+  year: '5 years',
+  salary: '15.80$'
+}];
+
+var _ref = /*#__PURE__*/React.createElement(LoaderContainer, null, /*#__PURE__*/React.createElement(CircularProgress, null));
+
+var _ref2 = /*#__PURE__*/React.createElement(TableCaption, null, "Table loading test");
+
+var _ref3 = /*#__PURE__*/React.createElement(TableHead, null, /*#__PURE__*/React.createElement(TableRow, null, /*#__PURE__*/React.createElement(TableHeadCell, null, "Employee name"), /*#__PURE__*/React.createElement(TableHeadCell, null, "Job"), /*#__PURE__*/React.createElement(TableHeadCell, null, "Years"), /*#__PURE__*/React.createElement(TableHeadCell, null, "Salary")));
+
+var _ref4 = /*#__PURE__*/React.createElement(TableLoaderBackground, null, /*#__PURE__*/React.createElement(LoaderContainer, null, /*#__PURE__*/React.createElement(CircularProgress, null)));
+
+var _ref5 = /*#__PURE__*/React.createElement(TableNoDataRow, null, "No data");
+
+export var WithLoader = function WithLoader() {
+  var _useState = useState(),
+      _useState2 = _slicedToArray(_useState, 2),
+      tableData = _useState2[0],
+      setTableData = _useState2[1];
+
+  var _useState3 = useState(false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      loading = _useState4[0],
+      setLoading = _useState4[1];
+
+  setTimeout(function () {
+    setTableData(data);
+  }, 8000);
+  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) {
+    return /*#__PURE__*/React.createElement(TableRow, {
+      key: index
+    }, /*#__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(function () {
+        setLoading(false);
+      }, 7000);
+    }
+  }, "\u03A0\u03C1\u03BF\u03C3\u03B8\u03B7\u03BA\u03B7"));
+};
+export default WithLoader;

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

@@ -0,0 +1,11 @@
+import React from 'react';
+import { TableContainer, Table, TableCaption, TableHead, TableRow, TableBody, TableHeadCell, TableDataCell } from '@digigov/react-core';
+
+var _ref = /*#__PURE__*/React.createElement(TableContainer, null, /*#__PURE__*/React.createElement(Table, {
+  zebra: true
+}, /*#__PURE__*/React.createElement(TableCaption, null, "Table with zebra prop"), /*#__PURE__*/React.createElement(TableHead, null, /*#__PURE__*/React.createElement(TableRow, null, /*#__PURE__*/React.createElement(TableHeadCell, null, "Date"), /*#__PURE__*/React.createElement(TableHeadCell, null, "Amount"), /*#__PURE__*/React.createElement(TableHeadCell, null, "Date"), /*#__PURE__*/React.createElement(TableHeadCell, null, "Amount"))), /*#__PURE__*/React.createElement(TableBody, null, /*#__PURE__*/React.createElement(TableRow, null, /*#__PURE__*/React.createElement(TableDataCell, null, "First 6 weeks"), /*#__PURE__*/React.createElement(TableDataCell, null, "\u20AC109.80"), /*#__PURE__*/React.createElement(TableDataCell, null, "\u20AC69.80"), /*#__PURE__*/React.createElement(TableDataCell, null, "\u20AC109.80")), /*#__PURE__*/React.createElement(TableRow, null, /*#__PURE__*/React.createElement(TableDataCell, null, "First 6 weeks"), /*#__PURE__*/React.createElement(TableDataCell, null, "\u20AC109.80"), /*#__PURE__*/React.createElement(TableDataCell, null, "\u20AC69.80"), /*#__PURE__*/React.createElement(TableDataCell, null, "\u20AC109.80")), /*#__PURE__*/React.createElement(TableRow, null, /*#__PURE__*/React.createElement(TableDataCell, null, "First 6 weeks"), /*#__PURE__*/React.createElement(TableDataCell, null, "\u20AC109.80"), /*#__PURE__*/React.createElement(TableDataCell, null, "\u20AC69.80"), /*#__PURE__*/React.createElement(TableDataCell, null, "\u20AC109.80")), /*#__PURE__*/React.createElement(TableRow, null, /*#__PURE__*/React.createElement(TableDataCell, null, "First 6 weeks"), /*#__PURE__*/React.createElement(TableDataCell, null, "\u20AC109.80"), /*#__PURE__*/React.createElement(TableDataCell, null, "\u20AC69.80"), /*#__PURE__*/React.createElement(TableDataCell, null, "\u20AC109.80")))));
+
+export var ZebraProp = function ZebraProp() {
+  return _ref;
+};
+export default ZebraProp;

package/es/core/Table/index.js

@@ -6,4 +6,5 @@ export * from '@digigov/react-core/TableDataCell';
 export * from '@digigov/react-core/TableHead';
 export * from '@digigov/react-core/TableHeadCell';
 export * from '@digigov/react-core/TableRow';
-export * from '@digigov/react-core/TableNoDataRow';
+export * from '@digigov/react-core/TableNoDataRow';
+export * from '@digigov/ui/core/Table/TableFloatingScroll';