@digigov/ui 0.28.3 → 0.29.0

package/src/core/Table/__stories__/Full.tsx

@@ -0,0 +1,105 @@
+import React from 'react';
+
+import {
+  TableContainer,
+  Table,
+  TableCaption,
+  TableHead,
+  TableRow,
+  TableBody,
+  TableHeadCell,
+  TableDataCell,
+} from '@digigov/ui/core/Table';
+
+export const Full = () => {
+  return (
+    <TableContainer>
+      <Table zebra variant="dark" verticalBorders dense>
+        <TableCaption>Table with all the properties combined</TableCaption>
+        <TableHead>
+          <TableRow>
+            <TableHeadCell>Date</TableHeadCell>
+            <TableHeadCell>Amount</TableHeadCell>
+            <TableHeadCell>Date</TableHeadCell>
+            <TableHeadCell>Amount</TableHeadCell>
+            <TableHeadCell>Date</TableHeadCell>
+            <TableHeadCell>Amount</TableHeadCell>
+            <TableHeadCell>Date</TableHeadCell>
+            <TableHeadCell>Amount</TableHeadCell>
+            <TableHeadCell>Date</TableHeadCell>
+            <TableHeadCell>Amount</TableHeadCell>
+            <TableHeadCell>Date</TableHeadCell>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          <TableRow>
+            <TableHeadCell>First 6 weeks</TableHeadCell>
+            <TableDataCell>€109.80</TableDataCell>
+            <TableDataCell>€69.80</TableDataCell>
+            <TableDataCell>€109.80</TableDataCell>
+            <TableDataCell>First 6 weeks</TableDataCell>
+            <TableDataCell>€109.80</TableDataCell>
+            <TableDataCell>€69.80</TableDataCell>
+            <TableDataCell>€109.80</TableDataCell>
+            <TableDataCell>€109.80</TableDataCell>
+            <TableDataCell>€69.80</TableDataCell>
+            <TableDataCell>€109.80</TableDataCell>
+          </TableRow>
+          <TableRow>
+            <TableHeadCell>First 6 weeks</TableHeadCell>
+            <TableDataCell>€109.80</TableDataCell>
+            <TableDataCell>€69.80</TableDataCell>
+            <TableDataCell>€109.80</TableDataCell>
+            <TableDataCell>First 6 weeks</TableDataCell>
+            <TableDataCell>€109.80</TableDataCell>
+            <TableDataCell>€69.80</TableDataCell>
+            <TableDataCell>€109.80</TableDataCell>
+            <TableDataCell>€109.80</TableDataCell>
+            <TableDataCell>€69.80</TableDataCell>
+            <TableDataCell>€109.80</TableDataCell>
+          </TableRow>
+          <TableRow>
+            <TableHeadCell>First 6 weeks</TableHeadCell>
+            <TableDataCell>€109.80</TableDataCell>
+            <TableDataCell>€69.80</TableDataCell>
+            <TableDataCell>€109.80</TableDataCell>
+            <TableDataCell>First 6 weeks</TableDataCell>
+            <TableDataCell>€109.80</TableDataCell>
+            <TableDataCell>€69.80</TableDataCell>
+            <TableDataCell>€109.80</TableDataCell>
+            <TableDataCell>€109.80</TableDataCell>
+            <TableDataCell>€69.80</TableDataCell>
+            <TableDataCell>€109.80</TableDataCell>
+          </TableRow>
+          <TableRow>
+            <TableHeadCell>First 6 weeks</TableHeadCell>
+            <TableDataCell>€109.80</TableDataCell>
+            <TableDataCell>€69.80</TableDataCell>
+            <TableDataCell>€109.80</TableDataCell>
+            <TableDataCell>First 6 weeks</TableDataCell>
+            <TableDataCell>€109.80</TableDataCell>
+            <TableDataCell>€69.80</TableDataCell>
+            <TableDataCell>€109.80</TableDataCell>
+            <TableDataCell>€109.80</TableDataCell>
+            <TableDataCell>€69.80</TableDataCell>
+            <TableDataCell>€109.80</TableDataCell>
+          </TableRow>
+          <TableRow>
+            <TableHeadCell>First 6 weeks</TableHeadCell>
+            <TableDataCell>€109.80</TableDataCell>
+            <TableDataCell>€69.80</TableDataCell>
+            <TableDataCell>€109.80</TableDataCell>
+            <TableDataCell>First 6 weeks</TableDataCell>
+            <TableDataCell>€109.80</TableDataCell>
+            <TableDataCell>€69.80</TableDataCell>
+            <TableDataCell>€109.80</TableDataCell>
+            <TableDataCell>€109.80</TableDataCell>
+            <TableDataCell>€69.80</TableDataCell>
+            <TableDataCell>€109.80</TableDataCell>
+          </TableRow>
+        </TableBody>
+      </Table>
+    </TableContainer>
+  );
+};
+export default Full;

package/src/core/Table/__stories__/MultipleProps.tsx

@@ -0,0 +1,62 @@
+import React from 'react';
+
+import {
+  TableContainer,
+  Table,
+  TableCaption,
+  TableHead,
+  TableRow,
+  TableBody,
+  TableHeadCell,
+  TableDataCell,
+} from '@digigov/ui/core/Table';
+
+export const MultipleProps = () => {
+  return (
+    <TableContainer>
+      <Table zebra variant="dark" verticalBorders>
+        <TableCaption>Table with zebra prop</TableCaption>
+        <TableHead>
+          <TableRow>
+            <TableHeadCell>Date</TableHeadCell>
+            <TableHeadCell>Amount</TableHeadCell>
+            <TableHeadCell>Date</TableHeadCell>
+            <TableHeadCell>Amount</TableHeadCell>
+            <TableHeadCell>Date</TableHeadCell>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          <TableRow>
+            <TableHeadCell>First 6 weeks</TableHeadCell>
+            <TableDataCell dataType="numeric">€109.80</TableDataCell>
+            <TableDataCell dataType="numeric">€69.80</TableDataCell>
+            <TableDataCell dataType="numeric">€109.80</TableDataCell>
+            <TableDataCell dataType="numeric">€69.80</TableDataCell>
+          </TableRow>
+          <TableRow>
+            <TableHeadCell>First 6 weeks</TableHeadCell>
+            <TableDataCell dataType="numeric">€109.80</TableDataCell>
+            <TableDataCell dataType="numeric">€69.80</TableDataCell>
+            <TableDataCell dataType="numeric">€109.80</TableDataCell>
+            <TableDataCell dataType="numeric">€69.80</TableDataCell>
+          </TableRow>
+          <TableRow>
+            <TableHeadCell>First 6 weeks</TableHeadCell>
+            <TableDataCell dataType="numeric">€109.80</TableDataCell>
+            <TableDataCell dataType="numeric">€69.80</TableDataCell>
+            <TableDataCell dataType="numeric">€109.80</TableDataCell>
+            <TableDataCell dataType="numeric">€69.80</TableDataCell>
+          </TableRow>
+          <TableRow>
+            <TableHeadCell>First 6 weeks</TableHeadCell>
+            <TableDataCell dataType="numeric">€109.80</TableDataCell>
+            <TableDataCell dataType="numeric">€69.80</TableDataCell>
+            <TableDataCell dataType="numeric">€109.80</TableDataCell>
+            <TableDataCell dataType="numeric">€69.80</TableDataCell>
+          </TableRow>
+        </TableBody>
+      </Table>
+    </TableContainer>
+  );
+};
+export default MultipleProps;

package/src/core/Table/__stories__/NoData.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+
+import {
+  TableContainer,
+  Table,
+  TableCaption,
+  TableHead,
+  TableRow,
+  TableBody,
+  TableHeadCell,
+  TableNoDataRow,
+} from '@digigov/ui/core/Table';
+
+export const NoData = () => {
+  return (
+    <TableContainer>
+      <Table>
+        <TableCaption>Table with no data</TableCaption>
+        <TableHead>
+          <TableRow>
+            <TableHeadCell>Date</TableHeadCell>
+            <TableHeadCell>Amount</TableHeadCell>
+            <TableHeadCell>Date</TableHeadCell>
+            <TableHeadCell>Amount</TableHeadCell>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          <TableNoDataRow aria-colspan={100}>No data</TableNoDataRow>
+        </TableBody>
+      </Table>
+    </TableContainer>
+  );
+};
+export default NoData;

package/src/core/Table/__stories__/NumericDataType.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+
+import {
+  TableContainer,
+  Table,
+  TableCaption,
+  TableHead,
+  TableRow,
+  TableBody,
+  TableHeadCell,
+  TableDataCell,
+} from '@digigov/ui/core/Table';
+
+export const NumericDataType = () => {
+  return (
+    <TableContainer>
+      <Table>
+        <TableCaption>Table with dataType numeric</TableCaption>
+        <TableHead>
+          <TableRow>
+            <TableHeadCell>Date</TableHeadCell>
+            <TableHeadCell dataType="numeric">Amount</TableHeadCell>
+            <TableHeadCell dataType="numeric">Date</TableHeadCell>
+            <TableHeadCell dataType="numeric">Amount</TableHeadCell>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          <TableRow>
+            <TableDataCell>First 6 weeks</TableDataCell>
+            <TableDataCell dataType="numeric">€109.80</TableDataCell>
+            <TableDataCell dataType="numeric">€69.80</TableDataCell>
+            <TableDataCell dataType="numeric">€109.80</TableDataCell>
+          </TableRow>
+          <TableRow>
+            <TableDataCell>First 6 weeks</TableDataCell>
+            <TableDataCell dataType="numeric">€109.80</TableDataCell>
+            <TableDataCell dataType="numeric">€69.80</TableDataCell>
+            <TableDataCell dataType="numeric">€109.80</TableDataCell>
+          </TableRow>
+          <TableRow>
+            <TableDataCell>First 6 weeks</TableDataCell>
+            <TableDataCell dataType="numeric">€109.80</TableDataCell>
+            <TableDataCell dataType="numeric">€69.80</TableDataCell>
+            <TableDataCell dataType="numeric">€109.80</TableDataCell>
+          </TableRow>
+        </TableBody>
+      </Table>
+    </TableContainer>
+  );
+};
+export default NumericDataType;

package/src/core/Table/__stories__/TableCaptions.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+
+import { TableContainer, Table, TableCaption } from '@digigov/ui/core/Table';
+
+export const TableCaptions = () => {
+  return (
+    <TableContainer>
+      <Table>
+        <TableCaption size="xl">Table Caption Extra Large</TableCaption>
+        <TableCaption size="l">Table Caption Large</TableCaption>
+        <TableCaption size="m">Table Caption Medium</TableCaption>
+        <TableCaption size="s">Table Caption Small</TableCaption>
+      </Table>
+    </TableContainer>
+  );
+};
+export default TableCaptions;

package/src/core/Table/__stories__/VerticalBorders.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+
+import {
+  TableContainer,
+  Table,
+  TableHead,
+  TableRow,
+  TableBody,
+  TableHeadCell,
+  TableDataCell,
+  TableCaption,
+} from '@digigov/ui/core/Table';
+
+export const VerticalBorders = () => {
+  return (
+    <TableContainer>
+      <Table verticalBorders>
+        <TableCaption>Table with vertical borders</TableCaption>
+        <TableHead>
+          <TableRow>
+            <TableHeadCell>Date</TableHeadCell>
+            <TableHeadCell>Amount</TableHeadCell>
+            <TableHeadCell>Date</TableHeadCell>
+            <TableHeadCell>Amount</TableHeadCell>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          <TableRow>
+            <TableDataCell>First 6 weeks</TableDataCell>
+            <TableDataCell>€109.80</TableDataCell>
+            <TableDataCell>€69.80</TableDataCell>
+            <TableDataCell>€109.80</TableDataCell>
+          </TableRow>
+          <TableRow>
+            <TableDataCell>First 6 weeks</TableDataCell>
+            <TableDataCell>€109.80</TableDataCell>
+            <TableDataCell>€69.80</TableDataCell>
+            <TableDataCell>€109.80</TableDataCell>
+          </TableRow>
+          <TableRow>
+            <TableDataCell>First 6 weeks</TableDataCell>
+            <TableDataCell>€109.80</TableDataCell>
+            <TableDataCell>€69.80</TableDataCell>
+            <TableDataCell>€109.80</TableDataCell>
+          </TableRow>
+          <TableRow>
+            <TableDataCell>First 6 weeks</TableDataCell>
+            <TableDataCell>€109.80</TableDataCell>
+            <TableDataCell>€69.80</TableDataCell>
+            <TableDataCell>€109.80</TableDataCell>
+          </TableRow>
+        </TableBody>
+      </Table>
+    </TableContainer>
+  );
+};
+export default VerticalBorders;

package/src/core/Table/__stories__/VerticalHeaders.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+
+import {
+  TableContainer,
+  Table,
+  TableHead,
+  TableRow,
+  TableBody,
+  TableHeadCell,
+  TableDataCell,
+  TableCaption,
+} from '@digigov/ui/core/Table';
+
+export const VerticalHeaders = () => {
+  return (
+    <TableContainer>
+      <Table>
+        <TableCaption>Table with vertical borders</TableCaption>
+        <TableHead>
+          <TableRow>
+            <TableHeadCell>Date</TableHeadCell>
+            <TableHeadCell>Amount</TableHeadCell>
+            <TableHeadCell>Date</TableHeadCell>
+            <TableHeadCell>Amount</TableHeadCell>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          <TableRow>
+            <TableHeadCell>First 6 weeks</TableHeadCell>
+            <TableDataCell>€109.80</TableDataCell>
+            <TableDataCell>€69.80</TableDataCell>
+            <TableDataCell>€109.80</TableDataCell>
+          </TableRow>
+          <TableRow>
+            <TableHeadCell>First 6 weeks</TableHeadCell>
+            <TableDataCell>€109.80</TableDataCell>
+            <TableDataCell>€69.80</TableDataCell>
+            <TableDataCell>€109.80</TableDataCell>
+          </TableRow>
+          <TableRow>
+            <TableHeadCell>First 6 weeks</TableHeadCell>
+            <TableDataCell>€109.80</TableDataCell>
+            <TableDataCell>€69.80</TableDataCell>
+            <TableDataCell>€109.80</TableDataCell>
+          </TableRow>
+          <TableRow>
+            <TableHeadCell>First 6 weeks</TableHeadCell>
+            <TableDataCell>€109.80</TableDataCell>
+            <TableDataCell>€69.80</TableDataCell>
+            <TableDataCell>€109.80</TableDataCell>
+          </TableRow>
+        </TableBody>
+      </Table>
+    </TableContainer>
+  );
+};
+export default VerticalHeaders;

package/src/core/Table/__stories__/WithFloatingScroll.tsx

@@ -0,0 +1,103 @@
+import React from 'react';
+
+import {
+  Table,
+  TableHead,
+  TableRow,
+  TableBody,
+  TableHeadCell,
+  TableDataCell,
+} from '@digigov/ui/core/Table';
+
+import { NavVertical } from '@digigov/ui/core/NavList/NavVertical';
+import { NavVerticalItem } from '@digigov/ui/core/NavList/NavVerticalItem';
+
+import {
+  Dropdown,
+  DropdownButton,
+  DropdownContent,
+} from '@digigov/ui/admin/Dropdown';
+
+import { TableFloatingScroll } from '@digigov/ui/core/Table/TableFloatingScroll';
+
+const labels = {
+  name: 'Ονοματεπώνυμο',
+  email: 'Email',
+  phone: 'Τηλέφωνο',
+  role: 'Ρόλος',
+  status: 'Κατάσταση',
+  actions: 'Ενέργειες',
+  at: 'Αριθμός Ταυτότητας',
+  zip: 'Ταχυδρομικός Κώδικας',
+  address: 'Διεύθυνση',
+  city: 'Πόλη',
+  country: 'Χώρα',
+  active: 'Ενεργός',
+  last_login: 'Τελευταία Σύνδεση',
+  last_login_agent: 'Τελευταία Σύνδεση Αξεσουάρ',
+  last_login_ip: 'Τελευταία Σύνδεση IP',
+  afm: 'ΑΦΜ',
+};
+
+const 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',
+});
+
+export const WithFloatingScroll = () => {
+  return (
+    <>
+      <TableFloatingScroll>
+        <Table>
+          <TableHead>
+            <TableRow>
+              {Object.keys(data[0]).map((key) => (
+                <TableHeadCell key={key}>{labels[key]}</TableHeadCell>
+              ))}
+              <TableHeadCell>Ενέργειες</TableHeadCell>
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            {data &&
+              data.map((dt, index) => {
+                return (
+                  <TableRow key={index}>
+                    {Object.keys(dt).map((key) => (
+                      <TableDataCell key={key}>{dt[key]}</TableDataCell>
+                    ))}
+
+                    <TableDataCell>
+                      <Dropdown float align="left" placement="bottom">
+                        <DropdownButton variant="link">
+                          Ενέργειες
+                        </DropdownButton>
+                        <DropdownContent>
+                          <NavVertical>
+                            <NavVerticalItem href="#">Accept</NavVerticalItem>
+                            <NavVerticalItem href="#">Dismiss</NavVerticalItem>
+                          </NavVertical>
+                        </DropdownContent>
+                      </Dropdown>
+                    </TableDataCell>
+                  </TableRow>
+                );
+              })}
+          </TableBody>
+        </Table>
+      </TableFloatingScroll>
+    </>
+  );
+};
+export default WithFloatingScroll;

package/src/core/Table/__stories__/WithHeader.tsx

@@ -0,0 +1,93 @@
+import React from 'react';
+
+import {
+  TableContainer,
+  Table,
+  TableCaption,
+  TableHead,
+  TableRow,
+  TableBody,
+  TableHeadCell,
+  TableDataCell,
+  TableNoDataRow,
+} from '@digigov/ui/core/Table';
+
+const 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$',
+  },
+];
+
+export const WithHeader = () => {
+  return (
+    <TableContainer>
+      <Table>
+        <TableCaption>Table with vertical headers</TableCaption>
+        <TableHead>
+          <TableRow>
+            <TableHeadCell>Name</TableHeadCell>
+            <TableHeadCell>Job</TableHeadCell>
+            <TableHeadCell>Year</TableHeadCell>
+            <TableHeadCell>Salary</TableHeadCell>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {data && data.length > 0 ? (
+            data.map((d, index) => {
+              return (
+                <TableRow key={index}>
+                  <TableDataCell>{d.name}</TableDataCell>
+                  <TableDataCell>{d.job}</TableDataCell>
+                  <TableDataCell>{d.year}</TableDataCell>
+                  <TableDataCell>{d.salary}</TableDataCell>
+                </TableRow>
+              );
+            })
+          ) : (
+            <TableNoDataRow>No data</TableNoDataRow>
+          )}
+        </TableBody>
+      </Table>
+    </TableContainer>
+  );
+};
+export default WithHeader;