@digigov/ui 0.28.2 → 0.29.0

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

@@ -1,4 +1,5 @@
 import React from 'react';
+
 import {
   Table,
   TableHead,
@@ -7,9 +8,17 @@ import {
   TableHeadCell,
   TableDataCell,
 } from '@digigov/ui/core/Table';
-import { NavVertical, NavVerticalItem } from '@digigov/ui/core/NavList';
-import { Dropdown, DropdownButton, DropdownContent } from '@digigov/ui/admin';
-import TableFloatingScroll from '@digigov/ui/core/Table/TableFloatingScroll';
+
+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: 'Ονοματεπώνυμο',
@@ -88,40 +97,6 @@ export const WithFloatingScroll = () => {
           </TableBody>
         </Table>
       </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>
     </>
   );
 };

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

@@ -10,8 +10,7 @@ import {
   TableHeadCell,
   TableDataCell,
   TableNoDataRow,
-} from '@digigov/ui/core';
-
+} from '@digigov/ui/core/Table';
 
 const data = [
   {
@@ -59,11 +58,8 @@ const data = [
 ];
 
 export const WithHeader = () => {
-
-
   return (
     <TableContainer>
-       
       <Table>
         <TableCaption>Table with vertical headers</TableCaption>
         <TableHead>
@@ -91,7 +87,6 @@ export const WithHeader = () => {
           )}
         </TableBody>
       </Table>
-            
     </TableContainer>
   );
 };

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

@@ -1,5 +1,6 @@
 import React, { useState } from 'react';
-import Button from '@digigov/ui/core/Button';
+import { Button } from '@digigov/ui/core/Button';
+
 import {
   TableContainer,
   Table,
@@ -12,9 +13,9 @@ import {
   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';
+import { TableLoaderBackground } from '@digigov/ui/admin/TableLoaderBackground';
+import { LoaderContainer } from '@digigov/ui/admin/LoaderContainer';
+import { CircularProgress } from '@digigov/ui/admin/CircularProgress';
 
 const data = [
   {

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

@@ -1,4 +1,5 @@
 import React from 'react';
+
 import {
   TableContainer,
   Table,

package/src/core/Table/index.mdx

@@ -16,7 +16,7 @@ import {
   TableHeadCell,
   TableDataCell,
 } from '@digigov/ui/core/Table';
-``` 
+```
 
 ## How to use
 
@@ -24,17 +24,29 @@ import {
 
 ### Table with dark header
 
-<Story packageName="@digigov/ui" component="core/Table" story="DarkVariant.tsx" />
+<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" />
+<Story
+  packageName="@digigov/ui"
+  component="core/Table"
+  story="TableCaptions.tsx"
+/>
 
 ### Numbers in a table
 
-<Story packageName="@digigov/ui" component="core/Table" story="NumericDataType.tsx" />
+<Story
+  packageName="@digigov/ui"
+  component="core/Table"
+  story="NumericDataType.tsx"
+/>
 
 ### Zebra rows
 
@@ -42,7 +54,11 @@ Use the `<TableCaption>` element to describe a table in the same way you would u
 
 ### Vertical lines
 
-<Story packageName="@digigov/ui" component="core/Table" story="VerticalBorders.tsx" />
+<Story
+  packageName="@digigov/ui"
+  component="core/Table"
+  story="VerticalBorders.tsx"
+/>
 
 ### Dense tables
 
@@ -50,7 +66,11 @@ Use the `<TableCaption>` element to describe a table in the same way you would u
 
 ### Custom column widths
 
-<Story packageName="@digigov/ui" component="core/Table" story="DefinedWidth.tsx" />
+<Story
+  packageName="@digigov/ui"
+  component="core/Table"
+  story="DefinedWidth.tsx"
+/>
 
 ### No data
 
@@ -58,11 +78,17 @@ Use the `<TableCaption>` element to describe a table in the same way you would u
 
 ### Using loader
 
-<Story packageName="@digigov/ui" component="core/Table" story="WithLoader.tsx" />
-
+<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.
+
+## API
+
+<PropTypes packageName="@digigov/ui" component="Table" />

package/src/core/Table/index.tsx

@@ -7,4 +7,7 @@ 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';
+export * from '@digigov/ui/core/Table/TableFloatingScroll';
+
+import Table from '@digigov/react-core/Table';
+export default Table;

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

@@ -1,8 +1,11 @@
-
-import Tabs from "@digigov/ui/core"
+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,
-}
-export * from './__stories__/Default';
-  
+  displayName: 'Tabs',
+};
+export * from '@digigov/ui/core/Tabs/__stories__/Default';

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

@@ -1,4 +1,5 @@
 import React from 'react';
+
 import {
   Tabs,
   TabsList,
@@ -6,12 +7,21 @@ import {
   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() {
+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>
@@ -20,12 +30,19 @@ export  function Default() {
         <TabsListItem {...register('b')}>Yποθέσεις</TabsListItem>
       </TabsList>
       <TabsPanel {...panel('a')}>
-        <Title size="md" element="h3">Στοιχεία πολίτη</Title>
+        <Title size="md" element="h3">
+          Στοιχεία πολίτη
+        </Title>
         <SummaryList>
           <SummaryListItem>
             <SummaryListItemKey>Όνομα</SummaryListItemKey>
             <SummaryListItemValue>Γιώργος Παπαδόπουλος</SummaryListItemValue>
-            <SummaryListItemAction> <Link href="#">Αλλαγή <VisuallyHidden> ονόματος </VisuallyHidden></Link></SummaryListItemAction>
+            <SummaryListItemAction>
+              {' '}
+              <Link href="#">
+                Αλλαγή <VisuallyHidden> ονόματος </VisuallyHidden>
+              </Link>
+            </SummaryListItemAction>
           </SummaryListItem>
           <SummaryListItem>
             <SummaryListItemKey>Ημ. Γέννησης</SummaryListItemKey>
@@ -34,14 +51,22 @@ export  function Default() {
           <SummaryListItem>
             <SummaryListItemKey>Τηλέφωνο επικοινωνίας</SummaryListItemKey>
             <SummaryListItemValue>6941234567</SummaryListItemValue>
-            <SummaryListItemAction> <Link> Αλλαγή <VisuallyHidden> τηλεφώνου </VisuallyHidden></Link></SummaryListItemAction>
+            <SummaryListItemAction>
+              {' '}
+              <Link>
+                {' '}
+                Αλλαγή <VisuallyHidden> τηλεφώνου </VisuallyHidden>
+              </Link>
+            </SummaryListItemAction>
           </SummaryListItem>
         </SummaryList>
       </TabsPanel>
       <TabsPanel {...panel('b')}>
-        <Title size="md" element="h3">Yποθέσεις</Title>
-          Περιεχόμενα υποθέσεων
-        </TabsPanel>
+        <Title size="md" element="h3">
+          Yποθέσεις
+        </Title>
+        Περιεχόμενα υποθέσεων
+      </TabsPanel>
     </Tabs>
   );
 }

package/src/core/Tabs/index.mdx

@@ -4,13 +4,15 @@ 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

@@ -1,9 +1,5 @@
 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,
@@ -12,18 +8,24 @@ import {
 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) {
+    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',
@@ -35,7 +37,7 @@ export const useTabs = (): UseTabsReturn => {
   const panel = useCallback(
     (key: string) => {
       return {
-        ref: (el)=> {
+        ref: (el) => {
           if (el && !registeredPanels.current[el.id]) {
             registeredPanels.current[el.id] = el;
           }
@@ -49,4 +51,10 @@ export const useTabs = (): UseTabsReturn => {
   );
   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

@@ -1,15 +1,16 @@
-
-import TextArea from "@digigov/ui/core/TextArea";
+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,
-}
-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';
-  
-
+  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/__stories__/Default.tsx

@@ -1,18 +1,18 @@
 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';
+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 = () => (
-  <Field>
+  <FieldContainer>
     <LabelContainer>
       <LabelTitle size="m">
         Μπορείτε να δώσετε περισσότερες πληροφορίες;
       </LabelTitle>
       <TextArea name="textarea"></TextArea>
     </LabelContainer>
-  </Field>
+  </FieldContainer>
 );
 
 export default Default;

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

@@ -1,12 +1,12 @@
 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';
+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 = () => (
-  <Field>
+  <FieldContainer>
     <LabelContainer>
       <LabelTitle size="m">
         Μπορείτε να δώσετε περισσότερες πληροφορίες;
@@ -17,7 +17,7 @@ export const DisabledInput = () => (
       </Hint>
       <TextArea name="textarea" disabled></TextArea>
     </LabelContainer>
-  </Field>
+  </FieldContainer>
 );
 
 export default DisabledInput;

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

@@ -1,12 +1,12 @@
 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';
+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 = () => (
-  <Field>
+  <FieldContainer>
     <LabelContainer>
       <LabelTitle size="m">
         Μπορείτε να δώσετε περισσότερες πληροφορίες;
@@ -18,7 +18,7 @@ export const LimitedCharacters = () => (
       <TextArea name="textarea"></TextArea>
       <Hint>Μπορείτε να πληκτρολογήσετε άλλους 200 χαρακτήρες.</Hint>
     </LabelContainer>
-  </Field>
+  </FieldContainer>
 );
 
 export default LimitedCharacters;

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

@@ -1,11 +1,11 @@
 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';
+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 = () => (
-  <Field>
+  <FieldContainer>
     <LabelContainer>
       Μπορείτε να δώσετε περισσότερες πληροφορίες;
       <Hint>
@@ -14,7 +14,7 @@ export const MultipleQuestions = () => (
       </Hint>
       <TextArea name="textarea"></TextArea>
     </LabelContainer>
-  </Field>
+  </FieldContainer>
 );
 
 export default MultipleQuestions;

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

@@ -1,12 +1,12 @@
 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';
+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 = () => (
-  <Field>
+  <FieldContainer>
     <LabelContainer>
       <LabelTitle size="m">
         Μπορείτε να δώσετε περισσότερες πληροφορίες;
@@ -17,7 +17,7 @@ export const WithDeclaredRows = () => (
       </Hint>
       <TextArea name="textarea" rows={4}></TextArea>
     </LabelContainer>
-  </Field>
+  </FieldContainer>
 );
 
 export default WithDeclaredRows;

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

@@ -1,13 +1,13 @@
 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';
+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 { ErrorMessage } from '@digigov/ui/core/ErrorMessage';
+import { TextArea } from '@digigov/ui/core/TextArea';
 
 export const WithErrorMessage = () => (
-  <Field error>
+  <FieldContainer error>
     <LabelContainer>
       <LabelTitle size="m">
         Μπορείτε να δώσετε περισσότερες πληροφορίες;
@@ -19,7 +19,7 @@ export const WithErrorMessage = () => (
       <ErrorMessage>Εισάγετε περιεχόμενο.</ErrorMessage>
       <TextArea name="textarea" error></TextArea>
     </LabelContainer>
-  </Field>
+  </FieldContainer>
 );
 
 export default WithErrorMessage;

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

@@ -1,12 +1,12 @@
 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';
+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 WithHint = () => (
-  <Field>
+  <FieldContainer>
     <LabelContainer>
       <LabelTitle size="m">
         Μπορείτε να δώσετε περισσότερες πληροφορίες;
@@ -17,7 +17,7 @@ export const WithHint = () => (
       </Hint>
       <TextArea name="textarea"></TextArea>
     </LabelContainer>
-  </Field>
+  </FieldContainer>
 );
 
 export default WithHint;