@digigov/ui 0.28.2 → 0.28.3

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

@@ -1,98 +0,0 @@
-import React from 'react';
-
-import {
-  TableContainer,
-  Table,
-  TableCaption,
-  TableHead,
-  TableRow,
-  TableBody,
-  TableHeadCell,
-  TableDataCell,
-  TableNoDataRow,
-} from '@digigov/ui/core';
-
-
-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;

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

@@ -1,126 +0,0 @@
-import React, { useState } from 'react';
-import Button from '@digigov/ui/core/Button';
-import {
-  TableContainer,
-  Table,
-  TableCaption,
-  TableHead,
-  TableRow,
-  TableBody,
-  TableHeadCell,
-  TableDataCell,
-  TableNoDataRow,
-} from '@digigov/ui/core/Table';
-
-import TableLoaderBackground from '@digigov/ui/admin/TableLoaderBackground';
-import LoaderContainer from '@digigov/ui/admin/LoaderContainer';
-import CircularProgress from '@digigov/ui/admin/CircularProgress';
-
-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 WithLoader = () => {
-  const [tableData, setTableData] = useState<any | null>();
-  const [loading, setLoading] = useState(false);
-  setTimeout(() => {
-    setTableData(data);
-  }, 2000);
-
-  return (
-    <div className="example">
-      <TableContainer>
-        {!tableData ? (
-          <LoaderContainer>
-            <CircularProgress />
-          </LoaderContainer>
-        ) : (
-          <Table>
-            <TableCaption>Table loading test</TableCaption>
-            <TableHead>
-              <TableRow>
-                <TableHeadCell>Employee name</TableHeadCell>
-                <TableHeadCell>Job</TableHeadCell>
-                <TableHeadCell>Years</TableHeadCell>
-                <TableHeadCell>Salary</TableHeadCell>
-              </TableRow>
-            </TableHead>
-            <TableBody>
-              {loading === true && (
-                <TableLoaderBackground>
-                  <LoaderContainer>
-                    <CircularProgress />
-                  </LoaderContainer>
-                </TableLoaderBackground>
-              )}
-              {tableData && tableData.length > 0 ? (
-                tableData.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>
-
-      <Button
-        onClick={() => {
-          setLoading(!loading);
-        }}
-      >
-        Toggle Loading
-      </Button>
-    </div>
-  );
-};
-export default WithLoader;

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

@@ -1,56 +0,0 @@
-import React from 'react';
-import {
-  TableContainer,
-  Table,
-  TableCaption,
-  TableHead,
-  TableRow,
-  TableBody,
-  TableHeadCell,
-  TableDataCell,
-} from '@digigov/ui/core/Table';
-
-export const ZebraProp = () => {
-  return (
-    <TableContainer>
-      <Table zebra>
-        <TableCaption>Table with zebra prop</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 ZebraProp;

package/src/core/Table/index.mdx

@@ -1,68 +0,0 @@
----
-id: table
-title: Table
----
-
-# Table
-
-```bash
-import {
-  TableContainer,
-  Table,
-  TableCaption,
-  TableHead,
-  TableRow,
-  TableBody,
-  TableHeadCell,
-  TableDataCell,
-} from '@digigov/ui/core/Table';
-``` 
-
-## How to use
-
-<Story packageName="@digigov/ui" component="core/Table" story="Default.tsx" />
-
-### Table with dark header
-
-<Story packageName="@digigov/ui" component="core/Table" story="DarkVariant.tsx" />
-
-### Table captions
- 
-Use the `<TableCaption>` element to describe a table in the same way you would use a heading. A caption helps users find, navigate and understand tables.
-
-<Story packageName="@digigov/ui" component="core/Table" story="TableCaptions.tsx" />
-
-### Numbers in a table
-
-<Story packageName="@digigov/ui" component="core/Table" story="NumericDataType.tsx" />
-
-### Zebra rows
-
-<Story packageName="@digigov/ui" component="core/Table" story="ZebraProp.tsx" />
-
-### Vertical lines
-
-<Story packageName="@digigov/ui" component="core/Table" story="VerticalBorders.tsx" />
-
-### Dense tables
-
-<Story packageName="@digigov/ui" component="core/Table" story="Densed.tsx" />
-
-### Custom column widths
-
-<Story packageName="@digigov/ui" component="core/Table" story="DefinedWidth.tsx" />
-
-### No data
-
-<Story packageName="@digigov/ui" component="core/Table" story="NoData.tsx" />
-
-### Using loader
-
-<Story packageName="@digigov/ui" component="core/Table" story="WithLoader.tsx" />
-
-
-## Accessibility
-
-You can read more about the accessibility patterns used in our Table
-implementation in the ARIA Authoring Practices Guide (APG) at 
-[Table](https://www.w3.org/WAI/ARIA/apg/patterns/table/) section.

package/src/core/Table/index.tsx

@@ -1,10 +0,0 @@
-export * from '@digigov/react-core/TableContainer';
-export * from '@digigov/react-core/Table';
-export * from '@digigov/react-core/TableBody';
-export * from '@digigov/react-core/TableCaption';
-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/ui/core/Table/TableFloatingScroll';

package/src/core/Tabs/Tabs.stories.js

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

package/src/core/Tabs/__stories__/Default.tsx

@@ -1,49 +0,0 @@
-import React from 'react';
-import {
-  Tabs,
-  TabsList,
-  TabsListItem,
-  TabsPanel,
-  useTabs,
-} from '@digigov/ui/core/Tabs';
-import Title from '@digigov/ui/typography/Title';
-import VisuallyHidden from '@digigov/react-core/VisuallyHidden';
-import SummaryList, { SummaryListItem, SummaryListItemKey, SummaryListItemValue, SummaryListItemAction } from '@digigov/ui/core/SummaryList';
-import Link from '@digigov/ui/core/Link';
-
-export  function Default() {
-  const { register, panel } = useTabs();
-  return (
-    <Tabs>
-      <TabsList>
-        <TabsListItem {...register('a')}>Στοιχεία πολίτη</TabsListItem>
-        <TabsListItem {...register('b')}>Yποθέσεις</TabsListItem>
-      </TabsList>
-      <TabsPanel {...panel('a')}>
-        <Title size="md" element="h3">Στοιχεία πολίτη</Title>
-        <SummaryList>
-          <SummaryListItem>
-            <SummaryListItemKey>Όνομα</SummaryListItemKey>
-            <SummaryListItemValue>Γιώργος Παπαδόπουλος</SummaryListItemValue>
-            <SummaryListItemAction> <Link href="#">Αλλαγή <VisuallyHidden> ονόματος </VisuallyHidden></Link></SummaryListItemAction>
-          </SummaryListItem>
-          <SummaryListItem>
-            <SummaryListItemKey>Ημ. Γέννησης</SummaryListItemKey>
-            <SummaryListItemValue>11 Μαϊου 1990</SummaryListItemValue>
-          </SummaryListItem>
-          <SummaryListItem>
-            <SummaryListItemKey>Τηλέφωνο επικοινωνίας</SummaryListItemKey>
-            <SummaryListItemValue>6941234567</SummaryListItemValue>
-            <SummaryListItemAction> <Link> Αλλαγή <VisuallyHidden> τηλεφώνου </VisuallyHidden></Link></SummaryListItemAction>
-          </SummaryListItem>
-        </SummaryList>
-      </TabsPanel>
-      <TabsPanel {...panel('b')}>
-        <Title size="md" element="h3">Yποθέσεις</Title>
-          Περιεχόμενα υποθέσεων
-        </TabsPanel>
-    </Tabs>
-  );
-}
-
-export default Default;

package/src/core/Tabs/index.mdx

@@ -1,16 +0,0 @@
----
-id: tabs
-title: Tabs
----
-
-# Tabs
- 
-
-
-```bash
-import Tabs from '@digigov/ui/core/Tabs';
-``` 
-
-## How to use
-
-<Story packageName="@digigov/ui" component="core/Tabs" story="Default.tsx" />

package/src/core/Tabs/index.tsx

@@ -1,52 +0,0 @@
-import { useCallback, useRef } from 'react';
-import Tabs from '@digigov/react-core/Tabs';
-import TabsList from '@digigov/react-core/TabsList';
-import TabsListItem from '@digigov/react-core/TabsListItem';
-import TabsPanel from '@digigov/react-core/TabsPanel';
-import TabsHeading from '@digigov/react-core/TabsHeading';
-import {
-  useTogglableSections,
-  UseTogglableSectionsReturn,
-} from '@digigov/ui/hooks/useTogglableSections';
-
-export interface UseTabsReturn extends UseTogglableSectionsReturn {
-  panel: (key: string) => { active: boolean; tabIndex: number; id: string };
-}
-export { Tabs, TabsList, TabsListItem, TabsPanel, TabsHeading };
-export const useTabs = (): UseTabsReturn => {
-  const registeredPanels = useRef({});
-  const goTo = useCallback((key: string) => {
-    console.log (registeredPanels.current[key].offsetTop - rest.registered.current[key].offsetTop);
-    if (registeredPanels.current[key].offsetTop - rest.registered.current[key].offsetTop >= 30) {
-      window.scrollTo({
-        top: registeredPanels.current[key]?.offsetTop,
-        behavior: 'smooth',
-      });
-    }
-}, []);
-  const { register, opened, ...rest } = useTogglableSections({
-    singleOpen: true,
-    toggleProperty: 'selected',
-    onToggleProperty: 'onClick',
-    firstOpen: true,
-    ariaNavigation: true,
-    toggleHook: goTo,
-  });
-  const panel = useCallback(
-    (key: string) => {
-      return {
-        ref: (el)=> {
-          if (el && !registeredPanels.current[el.id]) {
-            registeredPanels.current[el.id] = el;
-          }
-        },
-        active: opened[key],
-        id: key,
-        tabIndex: opened[key] ? 1 : -1,
-      };
-    },
-    [opened]
-  );
-  return { register, opened, panel, ...rest };
-};
-export default Tabs;

package/src/core/TextArea/TextArea.stories.js

@@ -1,15 +0,0 @@
-
-import TextArea from "@digigov/ui/core/TextArea";
-export default {
-  title: 'Digigov UI/core/TextArea',
-  component: TextArea,
-}
-export * from './__stories__/Default';
-export * from './__stories__/WithHint';
-export * from './__stories__/WithDeclaredRows';
-export * from './__stories__/MultipleQuestions';
-export * from './__stories__/LimitedCharacters';
-export * from './__stories__/WithErrorMessage';
-export * from './__stories__/DisabledInput';
-  
-

package/src/core/TextArea/__stories__/Default.tsx

@@ -1,18 +0,0 @@
-import React from 'react';
-import Field from '@digigov/ui/core/Field';
-import LabelContainer from '@digigov/react-core/LabelContainer';
-import LabelTitle from '@digigov/react-core/LabelTitle';
-import TextArea from '@digigov/ui/core/TextArea';
-
-export const Default = () => (
-  <Field>
-    <LabelContainer>
-      <LabelTitle size="m">
-        Μπορείτε να δώσετε περισσότερες πληροφορίες;
-      </LabelTitle>
-      <TextArea name="textarea"></TextArea>
-    </LabelContainer>
-  </Field>
-);
-
-export default Default;

package/src/core/TextArea/__stories__/DisabledInput.tsx

@@ -1,23 +0,0 @@
-import React from 'react';
-import Field from '@digigov/ui/core/Field';
-import Hint from '@digigov/react-core/Hint';
-import LabelContainer from '@digigov/react-core/LabelContainer';
-import LabelTitle from '@digigov/react-core/LabelTitle';
-import TextArea from '@digigov/ui/core/TextArea';
-
-export const DisabledInput = () => (
-  <Field>
-    <LabelContainer>
-      <LabelTitle size="m">
-        Μπορείτε να δώσετε περισσότερες πληροφορίες;
-      </LabelTitle>
-      <Hint>
-        Στις πληροφορίες μην προσθέσετε προσωπικά ή οικονομικά δεδομένα, όπως το
-        ΑΜΑ ή δεδομένα πιστωτικής κάρτας.
-      </Hint>
-      <TextArea name="textarea" disabled></TextArea>
-    </LabelContainer>
-  </Field>
-);
-
-export default DisabledInput;

package/src/core/TextArea/__stories__/LimitedCharacters.tsx

@@ -1,24 +0,0 @@
-import React from 'react';
-import Field from '@digigov/ui/core/Field';
-import Hint from '@digigov/react-core/Hint';
-import LabelContainer from '@digigov/react-core/LabelContainer';
-import LabelTitle from '@digigov/react-core/LabelTitle';
-import TextArea from '@digigov/ui/core/TextArea';
-
-export const LimitedCharacters = () => (
-  <Field>
-    <LabelContainer>
-      <LabelTitle size="m">
-        Μπορείτε να δώσετε περισσότερες πληροφορίες;
-      </LabelTitle>
-      <Hint>
-        Στις πληροφορίες μην προσθέσετε προσωπικά ή οικονομικά δεδομένα, όπως το
-        ΑΜΑ ή δεδομένα πιστωτικής κάρτας.
-      </Hint>
-      <TextArea name="textarea"></TextArea>
-      <Hint>Μπορείτε να πληκτρολογήσετε άλλους 200 χαρακτήρες.</Hint>
-    </LabelContainer>
-  </Field>
-);
-
-export default LimitedCharacters;

package/src/core/TextArea/__stories__/MultipleQuestions.tsx

@@ -1,20 +0,0 @@
-import React from 'react';
-import Field from '@digigov/ui/core/Field';
-import Hint from '@digigov/react-core/Hint';
-import LabelContainer from '@digigov/react-core/LabelContainer';
-import TextArea from '@digigov/ui/core/TextArea';
-
-export const MultipleQuestions = () => (
-  <Field>
-    <LabelContainer>
-      Μπορείτε να δώσετε περισσότερες πληροφορίες;
-      <Hint>
-        Στις πληροφορίες μην προσθέσετε προσωπικά ή οικονομικά δεδομένα, όπως το
-        ΑΜΑ ή δεδομένα πιστωτικής κάρτας.
-      </Hint>
-      <TextArea name="textarea"></TextArea>
-    </LabelContainer>
-  </Field>
-);
-
-export default MultipleQuestions;

package/src/core/TextArea/__stories__/WithDeclaredRows.tsx

@@ -1,23 +0,0 @@
-import React from 'react';
-import Field from '@digigov/ui/core/Field';
-import Hint from '@digigov/react-core/Hint';
-import LabelContainer from '@digigov/react-core/LabelContainer';
-import LabelTitle from '@digigov/react-core/LabelTitle';
-import TextArea from '@digigov/ui/core/TextArea';
-
-export const WithDeclaredRows = () => (
-  <Field>
-    <LabelContainer>
-      <LabelTitle size="m">
-        Μπορείτε να δώσετε περισσότερες πληροφορίες;
-      </LabelTitle>
-      <Hint>
-        Στις πληροφορίες μην προσθέσετε προσωπικά ή οικονομικά δεδομένα, όπως το
-        ΑΜΑ ή δεδομένα πιστωτικής κάρτας.
-      </Hint>
-      <TextArea name="textarea" rows={4}></TextArea>
-    </LabelContainer>
-  </Field>
-);
-
-export default WithDeclaredRows;

package/src/core/TextArea/__stories__/WithErrorMessage.tsx

@@ -1,25 +0,0 @@
-import React from 'react';
-import Field from '@digigov/ui/core/Field';
-import Hint from '@digigov/react-core/Hint';
-import LabelContainer from '@digigov/react-core/LabelContainer';
-import LabelTitle from '@digigov/react-core/LabelTitle';
-import ErrorMessage from '@digigov/react-core/ErrorMessage';
-import TextArea from '@digigov/ui/core/TextArea';
-
-export const WithErrorMessage = () => (
-  <Field error>
-    <LabelContainer>
-      <LabelTitle size="m">
-        Μπορείτε να δώσετε περισσότερες πληροφορίες;
-      </LabelTitle>
-      <Hint>
-        Στις πληροφορίες μην προσθέσετε προσωπικά ή οικονομικά δεδομένα, όπως το
-        ΑΜΑ ή δεδομένα πιστωτικής κάρτας.
-      </Hint>
-      <ErrorMessage>Εισάγετε περιεχόμενο.</ErrorMessage>
-      <TextArea name="textarea" error></TextArea>
-    </LabelContainer>
-  </Field>
-);
-
-export default WithErrorMessage;

package/src/core/TextArea/__stories__/WithHint.tsx

@@ -1,23 +0,0 @@
-import React from 'react';
-import Field from '@digigov/ui/core/Field';
-import Hint from '@digigov/react-core/Hint';
-import LabelContainer from '@digigov/react-core/LabelContainer';
-import LabelTitle from '@digigov/react-core/LabelTitle';
-import TextArea from '@digigov/ui/core/TextArea';
-
-export const WithHint = () => (
-  <Field>
-    <LabelContainer>
-      <LabelTitle size="m">
-        Μπορείτε να δώσετε περισσότερες πληροφορίες;
-      </LabelTitle>
-      <Hint>
-        Στις πληροφορίες μην προσθέσετε προσωπικά ή οικονομικά δεδομένα, όπως το
-        ΑΜΑ ή δεδομένα πιστωτικής κάρτας.
-      </Hint>
-      <TextArea name="textarea"></TextArea>
-    </LabelContainer>
-  </Field>
-);
-
-export default WithHint;