@digigov/ui 0.28.3 → 0.29.0

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

@@ -0,0 +1,127 @@
+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

@@ -0,0 +1,57 @@
+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

@@ -0,0 +1,94 @@
+---
+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 
+
+## API
+
+<PropTypes packageName="@digigov/ui" component="Table" />

package/src/core/Table/index.tsx

@@ -0,0 +1,13 @@
+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';
+
+import Table from '@digigov/react-core/Table';
+export default Table;

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

@@ -0,0 +1,11 @@
+import Tabs from '@digigov/ui/core/Tabs';
+export default {
+  title: 'Digigov UI/core/Tabs',
+  tags: ['Experimental'],
+  description:
+    'The tabs component lets users navigate between related sections of content, displaying one section at a time.',
+  link: 'https://guide.services.gov.gr/docs/components/tabs',
+  component: Tabs,
+  displayName: 'Tabs',
+};
+export * from '@digigov/ui/core/Tabs/__stories__/Default';

package/src/core/Tabs/Tabs.stories.playwright.json

@@ -0,0 +1,27 @@
+{
+  "version": "4",
+  "stories": {
+    "digigov-ui-core-tabs--default": {
+      "actionSets": [
+        {
+          "actions": [
+            {
+              "name": "hover",
+              "args": {
+                "selector": "html>body>div:nth-child(5)>div>ul>li:nth-child(2)>a"
+              }
+            },
+            {
+              "name": "click",
+              "args": {
+                "selector": "html>body>div:nth-child(5)>div>ul>li:nth-child(2)>a"
+              }
+            }
+          ],
+          "id": "_sXJM58BIiuJ",
+          "title": "Click second tab"
+        }
+      ]
+    }
+  }
+}

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

@@ -0,0 +1,74 @@
+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/ui/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

@@ -0,0 +1,18 @@
+---
+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" />
+
+## API
+
+<PropTypes packageName="@digigov/ui" component="Tabs" />

package/src/core/Tabs/index.tsx

@@ -0,0 +1,60 @@
+import { useCallback, useRef } from 'react';
+import Tabs from '@digigov/react-core/Tabs';
+import {
+  useTogglableSections,
+  UseTogglableSectionsReturn,
+} from '@digigov/ui/hooks/useTogglableSections';
+
+export interface UseTabsReturn extends UseTogglableSectionsReturn {
+  panel: (key: string) => { active: boolean; tabIndex: number; id: string };
+}
+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 * from '@digigov/react-core/Tabs';
+export * from '@digigov/react-core/TabsList';
+export * from '@digigov/react-core/TabsListItem';
+export * from '@digigov/react-core/TabsPanel';
+export * from '@digigov/react-core/TabsHeading';
+export default Tabs;

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

@@ -0,0 +1,16 @@
+import TextArea from '@digigov/ui/core/TextArea';
+export default {
+  title: 'Digigov UI/core/TextArea',
+  description:
+    'Use the textarea component when you need to let users enter an amount of text that’s longer than a single line.',
+  link: 'https://guide.services.gov.gr/docs/components/textarea',
+  component: TextArea,
+  displayName: 'TextArea',
+};
+export * from '@digigov/ui/core/TextArea/__stories__/Default';
+export * from '@digigov/ui/core/TextArea/__stories__/WithHint';
+export * from '@digigov/ui/core/TextArea/__stories__/WithDeclaredRows';
+export * from '@digigov/ui/core/TextArea/__stories__/MultipleQuestions';
+export * from '@digigov/ui/core/TextArea/__stories__/LimitedCharacters';
+export * from '@digigov/ui/core/TextArea/__stories__/WithErrorMessage';
+export * from '@digigov/ui/core/TextArea/__stories__/DisabledInput';

package/src/core/TextArea/TextArea.stories.playwright.json

@@ -0,0 +1,59 @@
+{
+  "version": "4",
+  "stories": {
+    "digigov-ui-core-textarea--default": {
+      "actionSets": [
+        {
+          "actions": [
+            {
+              "name": "click",
+              "args": {
+                "selector": "html>body>div:nth-child(5)>div>label>textarea"
+              }
+            }
+          ],
+          "id": "JcIH-9OSjmEe",
+          "title": "click textarea"
+        }
+      ]
+    },
+    "digigov-ui-core-textarea--with-hint": {
+      "actionSets": [
+        {
+          "actions": [
+            {
+              "name": "keyboard.press",
+              "args": {
+                "key": "Tab"
+              }
+            },
+            {
+              "name": "keyboard.insertText",
+              "args": {
+                "text": "Πληροφορίες"
+              }
+            }
+          ],
+          "id": "Wr00uBfppm0B",
+          "title": "Navigate with keyboard"
+        }
+      ]
+    },
+    "digigov-ui-core-textarea--with-error-message": {
+      "actionSets": [
+        {
+          "actions": [
+            {
+              "name": "click",
+              "args": {
+                "selector": "html>body>div:nth-child(5)>div>label>textarea"
+              }
+            }
+          ],
+          "id": "6ooyo8-_c-LB",
+          "title": "Click textarea"
+        }
+      ]
+    }
+  }
+}

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

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

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

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

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

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

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

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

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

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