@digigov/ui 0.28.2 → 0.29.0

package/src/admin/Dropdown/Dropdown.stories.js

@@ -3,7 +3,12 @@
 import Dropdown from '@digigov/ui/admin/Dropdown';
 export default {
   title: 'Digigov UI/admin/Dropdown',
+  description:
+    'Use the dropdown component to provide more options to users in cases where there is not enough space such as tables, navbars, etc.',
+  link:
+    'https://guide.services.gov.gr/docs/patterns/admin-pages/components/dropdown',
   component: Dropdown,
+  displayName: 'Dropdown',
 };
 export * from './__stories__/Default';
 export * from './__stories__/AlignRight';

package/src/admin/Dropdown/__stories__/AlignRight.tsx

@@ -1,16 +1,19 @@
 import React from 'react';
-import Dropdown, {
+
+import {
+  Dropdown,
   DropdownButton,
   DropdownContent,
 } from '@digigov/ui/admin/Dropdown';
-import Field from '@digigov/ui/core/Field';
-import LabelContainer from '@digigov/react-core/LabelContainer';
-import SectionBreak from '@digigov/ui/core/Divider';
-import NavVertical from '@digigov/react-core/NavVertical';
-import { LabelTitle } from '@digigov/react-core/LabelTitle';
-import TextInput from '@digigov/ui/core/TextInput';
-import NavVerticalItem from '@digigov/react-core/NavVerticalItem';
-import Button from '@digigov/ui/core/Button';
+
+import { FieldContainer } from '@digigov/ui/core/FieldContainer';
+import { LabelContainer } from '@digigov/ui/core/LabelContainer';
+import { SectionBreak } from '@digigov/ui/core/SectionBreak';
+import { NavVertical } from '@digigov/ui/core/NavList/NavVertical';
+import { LabelTitle } from '@digigov/ui/core/LabelContainer';
+import { TextInput } from '@digigov/ui/core/TextInput';
+import { NavVerticalItem } from '@digigov/ui/core/NavList/NavVerticalItem';
+import { Button } from '@digigov/ui/core/Button';
 
 export const AlignRight = () => (
   <div
@@ -20,7 +23,7 @@ export const AlignRight = () => (
       alignItems: 'center',
     }}
   >
-    <Dropdown align="right">
+    <Dropdown align="right" open>
       <DropdownButton
         role="button"
         aria-haspopup="true"
@@ -30,12 +33,12 @@ export const AlignRight = () => (
         Αναζητηση
       </DropdownButton>
       <DropdownContent role="menu" id="menu2">
-        <Field role="menuitem">
+        <FieldContainer role="menuitem">
           <LabelContainer>
             <LabelTitle>Όνομα πεδίου</LabelTitle>
             <TextInput name="input-name" />
           </LabelContainer>
-        </Field>
+        </FieldContainer>
         <SectionBreak visible role="separator" />
         <NavVertical role="menu">
           <NavVerticalItem role="menuitem" href="#">

package/src/admin/Dropdown/__stories__/Default.tsx

@@ -1,19 +1,22 @@
 import React from 'react';
-import Dropdown, {
+
+import {
+  Dropdown,
   DropdownButton,
   DropdownContent,
 } from '@digigov/ui/admin/Dropdown';
-import Field from '@digigov/ui/core/Field';
-import LabelContainer from '@digigov/react-core/LabelContainer';
-import SectionBreak from '@digigov/ui/core/Divider';
-import NavVertical from '@digigov/react-core/NavVertical';
-import { LabelTitle } from '@digigov/react-core/LabelTitle';
-import TextInput from '@digigov/ui/core/TextInput';
-import NavVerticalItem from '@digigov/react-core/NavVerticalItem';
-import Button from '@digigov/ui/core/Button';
+
+import { FieldContainer } from '@digigov/ui/core/FieldContainer';
+import { LabelContainer } from '@digigov/ui/core/LabelContainer';
+import { SectionBreak } from '@digigov/ui/core/SectionBreak';
+import { NavVertical } from '@digigov/ui/core/NavList/NavVertical';
+import { LabelTitle } from '@digigov/ui/core/LabelContainer';
+import { TextInput } from '@digigov/ui/core/TextInput';
+import { NavVerticalItem } from '@digigov/ui/core/NavList/NavVerticalItem';
+import { Button } from '@digigov/ui/core/Button';
 
 export const Default = () => (
-  <Dropdown>
+  <Dropdown open>
     <DropdownButton
       role="button"
       aria-haspopup="true"
@@ -23,12 +26,12 @@ export const Default = () => (
       Αναζητηση
     </DropdownButton>
     <DropdownContent role="menu" id="menu2">
-      <Field role="menuitem">
+      <FieldContainer role="menuitem">
         <LabelContainer>
           <LabelTitle>Όνομα πεδίου</LabelTitle>
           <TextInput name="input-name" />
         </LabelContainer>
-      </Field>
+      </FieldContainer>
       <SectionBreak visible role="separator" />
       <NavVertical role="menu">
         <NavVerticalItem role="menuitem" href="#">

package/src/admin/Dropdown/__stories__/PlacementTop.tsx

@@ -1,16 +1,19 @@
 import React from 'react';
-import Dropdown, {
+
+import {
+  Dropdown,
   DropdownButton,
   DropdownContent,
 } from '@digigov/ui/admin/Dropdown';
-import Field from '@digigov/ui/core/Field';
-import LabelContainer from '@digigov/react-core/LabelContainer';
-import SectionBreak from '@digigov/ui/core/Divider';
-import NavVertical from '@digigov/react-core/NavVertical';
-import { LabelTitle } from '@digigov/react-core/LabelTitle';
-import TextInput from '@digigov/ui/core/TextInput';
-import NavVerticalItem from '@digigov/react-core/NavVerticalItem';
-import Button from '@digigov/ui/core/Button';
+
+import { FieldContainer } from '@digigov/ui/core/FieldContainer';
+import { LabelContainer } from '@digigov/ui/core/LabelContainer';
+import { SectionBreak } from '@digigov/ui/core/SectionBreak';
+import { NavVertical } from '@digigov/ui/core/NavList/NavVertical';
+import { LabelTitle } from '@digigov/ui/core/LabelContainer';
+import { TextInput } from '@digigov/ui/core/TextInput';
+import { NavVerticalItem } from '@digigov/ui/core/NavList/NavVerticalItem';
+import { Button } from '@digigov/ui/core/Button';
 
 export const PlacementTop = () => (
   <div
@@ -20,7 +23,7 @@ export const PlacementTop = () => (
       alignItems: 'center',
     }}
   >
-    <Dropdown placement="top">
+    <Dropdown placement="top" open>
       <DropdownButton
         role="button"
         aria-haspopup="true"
@@ -30,12 +33,12 @@ export const PlacementTop = () => (
         Αναζητηση
       </DropdownButton>
       <DropdownContent role="menu" id="menu2">
-        <Field role="menuitem">
+        <FieldContainer role="menuitem">
           <LabelContainer>
             <LabelTitle>Όνομα πεδίου</LabelTitle>
             <TextInput name="input-name" />
           </LabelContainer>
-        </Field>
+        </FieldContainer>
         <SectionBreak visible role="separator" />
         <NavVertical role="menu">
           <NavVerticalItem role="menuitem" href="#">

package/src/admin/Dropdown/index.mdx

@@ -7,23 +7,39 @@ title: Dropdown
 
 ```bash
 import Dropdown from '@digigov/ui/admin/Dropdown';
-``` 
+```
+
 ## How to use
 
-<Story packageName="@digigov/ui" component="admin/Dropdown" story="Default.tsx" />
+<Story
+  packageName="@digigov/ui"
+  component="admin/Dropdown"
+  story="Default.tsx"
+/>
 
 ### Dropdown with align right
 
 You can display the dropdown menu to the right side of the `Dropdown` button.
 
-<Story packageName="@digigov/ui" component="admin/Dropdown" story="AlignRight.tsx" />
+<Story
+  packageName="@digigov/ui"
+  component="admin/Dropdown"
+  story="AlignRight.tsx"
+/>
 
 ### Dropdown with placement top
 
 You can display the dropdown menu to the top of the `Dropdown` button.
 
-<Story packageName="@digigov/ui" component="admin/Dropdown" story="PlacementTop.tsx" />
+<Story
+  packageName="@digigov/ui"
+  component="admin/Dropdown"
+  story="PlacementTop.tsx"
+/>
 
 You can read more about the accessibility patterns used in our Dropdown
 implementation in the ARIA Authoring Practices Guide (APG) at 
-[Menu Button](https://www.w3.org/WAI/ARIA/apg/patterns/menubutton/) section.
+
+## API
+
+<PropTypes packageName="@digigov/ui" component="Dropdown" />

package/src/admin/Modal/Modal.stories.js

@@ -1,9 +1,12 @@
-
-import Modal from "@digigov/ui/admin/Modal";
+import Modal from '@digigov/ui/admin/Modal';
 export default {
   title: 'Digigov UI/admin/Modal',
+  description:
+    'Use the modal component with caution when you need to provide critical information or ask for a decision.',
+  link:
+    'https://guide.services.gov.gr/docs/patterns/admin-pages/components/modal',
   component: Modal,
-}
-export * from './__stories__/Default';
-export * from './__stories__/AlertDialog';
-  
+  displayName: 'Modal',
+};
+export * from '@digigov/ui/admin/Modal/__stories__/Default';
+export * from '@digigov/ui/admin/Modal/__stories__/AlertDialog';

package/src/admin/Modal/__stories__/AlertDialog.tsx

@@ -1,22 +1,20 @@
 import React from 'react';
-import Modal, {
+
+import {
+  Modal,
   ModalHeading,
   ModalContent,
   ModalAction,
-  useModal,
 } from '@digigov/ui/admin/Modal';
-import { Button } from '@digigov/ui/core';
-import { Paragraph } from '@digigov/ui/typography';
+
+import { Button } from '@digigov/ui/core/Button';
+import { Paragraph } from '@digigov/ui/typography/Paragraph';
 
 export const AlertDialog = () => {
-  const { modalProps, toggleModal } = useModal();
   return (
     <div>
-      <Button color="warning" id="delete-button" onClick={() => toggleModal()}>
-        Διαγραφή
-      </Button>
       <Modal
-        {...modalProps}
+        open
         role="alertdialog"
         aria-labelledby="modal-label"
         aria-describedby="modal-content"
@@ -28,10 +26,8 @@ export const AlertDialog = () => {
           </Paragraph>
         </ModalContent>
         <ModalAction>
-          <Button onClick={() => toggleModal()}>Διαγραφή</Button>
-          <Button variant="link" onClick={() => toggleModal()}>
-            Ακύρωση
-          </Button>
+          <Button>Διαγραφή</Button>
+          <Button variant="link">Ακύρωση</Button>
         </ModalAction>
       </Modal>
     </div>

package/src/admin/Modal/__stories__/Default.tsx

@@ -1,35 +1,33 @@
 import React from 'react';
-import Modal, {
+
+import {
+  Modal,
   ModalHeading,
   ModalContent,
   ModalAction,
-  useModal,
 } from '@digigov/ui/admin/Modal';
-import { Button, TextInput } from '@digigov/ui/core';
-import Field from '@digigov/ui/core/Field';
-import LabelContainer from '@digigov/react-core/LabelContainer';
+
+import { Button } from '@digigov/ui/core/Button';
+import { TextInput } from '@digigov/ui/core/TextInput';
+import { FieldContainer } from '@digigov/ui/core/FieldContainer';
+import { LabelContainer } from '@digigov/ui/core/LabelContainer';
 
 export const Default = () => {
-  const { toggleModal, modalProps } = useModal();
   return (
     <div>
-      <Button onClick={() => toggleModal()}>Προσθήκη τηλεφώνου</Button>
-
-      <Modal {...modalProps} aria-labelledby="modal-label">
+      <Modal open aria-labelledby="modal-label">
         <ModalHeading id="modal-label">Προσθήκη τηλεφώνου</ModalHeading>
         <ModalContent>
-          <Field>
+          <FieldContainer>
             <LabelContainer>
               Συμπληρώστε το τηλέφωνο επικοινωνίας
               <TextInput name="inputext" characterWidth={10}></TextInput>
             </LabelContainer>
-          </Field>
+          </FieldContainer>
         </ModalContent>
         <ModalAction>
           <Button>Υποβολή</Button>
-          <Button variant="link" onClick={() => toggleModal()}>
-            Ακύρωση
-          </Button>
+          <Button variant="link">Ακύρωση</Button>
         </ModalAction>
       </Modal>
     </div>

package/src/admin/Modal/index.mdx

@@ -5,7 +5,7 @@ title: Modal
 
 ```bash
 import Modal, {ModalHeading, ModalContent, ModalAction} from "@digigov/ui/admin/Modal";
-``` 
+```
 
 ## How to use
 
@@ -15,12 +15,19 @@ import Modal, {ModalHeading, ModalContent, ModalAction} from "@digigov/ui/admin/
 
 ### As an Alert Dialog
 
-<Story packageName="@digigov/ui" component="admin/Modal" story="AlertDialog.tsx" />
-
+<Story
+  packageName="@digigov/ui"
+  component="admin/Modal"
+  story="AlertDialog.tsx"
+/>
 
 ## Accessibility
 
 You can read more about the accessibility patterns used in our Modal
-implementation in the ARIA Authoring Practices Guide (APG) at 
-[Dialog](https://www.w3.org/WAI/ARIA/apg/patterns/dialogmodal/) and 
+implementation in the ARIA Authoring Practices Guide (APG) at
+[Dialog](https://www.w3.org/WAI/ARIA/apg/patterns/dialogmodal/) and
 [Alert Dialog](https://www.w3.org/WAI/ARIA/apg/patterns/alertdialog/) sections.
+
+## API
+
+<PropTypes packageName="@digigov/ui" component="Modal" />

package/src/admin/Pagination/Pagination.stories.js

@@ -1,8 +1,12 @@
-
-import Pagination from "@digigov/ui/admin/Pagination";
+import Pagination from '@digigov/ui/admin/Pagination';
 export default {
   title: 'Digigov UI/admin/Pagination',
+  description:
+    'Use the pagination component to let users browse through a long list.',
+  link:
+    'https://guide.services.gov.gr/docs/patterns/admin-pages/components/pagination',
   component: Pagination,
-}
-export * from './__stories__/Default';
-  
+  displayName: 'Pagination',
+};
+export * from '@digigov/ui/admin/Pagination/__stories__/Default';
+export * from '@digigov/ui/admin/Pagination/__stories__/PaginationSmall';

package/src/admin/Pagination/__stories__/Default.tsx

@@ -1,13 +1,16 @@
 import React from 'react';
-import Pagination, {
+
+import {
+  Pagination,
   PaginationList,
   PaginationListItem,
   PaginationLabel,
 } from '@digigov/ui/admin/Pagination';
-import ArrowIcon from '@digigov/react-core/ArrowIcon';
-import Link from '@digigov/ui/core/Link';
-import Divider from '@digigov/ui/core/Divider';
-import { I18NProvider } from '@digigov/ui/app';
+
+import { ArrowIcon } from '@digigov/ui/core/SvgIcon';
+import { Link } from '@digigov/ui/core/Link';
+import { Divider } from '@digigov/ui/core/Divider';
+import { I18NProvider } from '@digigov/ui/app/i18n';
 
 export const Default = () => (
   <div className="example">
@@ -155,30 +158,6 @@ export const Default = () => (
           </PaginationListItem>
         </PaginationList>
       </Pagination>
-
-      <Divider visible size="l" />
-      <Pagination>
-        <PaginationLabel start={1} end={10} total={15}></PaginationLabel>
-        <PaginationList>
-          <PaginationListItem inactive>
-            <Link>
-              <ArrowIcon direction="left" />
-            </Link>
-          </PaginationListItem>
-          <PaginationListItem currentPage>1</PaginationListItem>
-
-          <PaginationListItem>
-            <Link href="/page7">2</Link>
-          </PaginationListItem>
-
-          <PaginationListItem>
-            <Link>
-              <ArrowIcon direction="right" />
-            </Link>
-          </PaginationListItem>
-        </PaginationList>
-      </Pagination>
-      <Divider visible size="l" />
     </I18NProvider>
   </div>
 );

package/src/admin/Pagination/__stories__/PaginationSmall.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+
+import {
+  Pagination,
+  PaginationList,
+  PaginationListItem,
+  PaginationLabel,
+} from '@digigov/ui/admin/Pagination';
+
+import { ArrowIcon } from '@digigov/ui/core/SvgIcon';
+import { Link } from '@digigov/ui/core/Link';
+import { Divider } from '@digigov/ui/core/Divider';
+import { I18NProvider } from '@digigov/ui/app/i18n';
+
+export const PaginationSmall = () => (
+  <div className="example">
+    <I18NProvider t={(str: string) => str}>
+      <Pagination>
+        <PaginationLabel start={1} end={10} total={15}></PaginationLabel>
+        <PaginationList>
+          <PaginationListItem inactive>
+            <Link>
+              <ArrowIcon direction="left" />
+            </Link>
+          </PaginationListItem>
+          <PaginationListItem currentPage>1</PaginationListItem>
+
+          <PaginationListItem>
+            <Link href="/page7">2</Link>
+          </PaginationListItem>
+
+          <PaginationListItem>
+            <Link>
+              <ArrowIcon direction="right" />
+            </Link>
+          </PaginationListItem>
+        </PaginationList>
+      </Pagination>
+      <Divider visible size="l" />
+    </I18NProvider>
+  </div>
+);
+
+export default PaginationSmall;

package/src/admin/Pagination/index.mdx

@@ -5,8 +5,12 @@ title: Pagination
 
 ```bash
 import Pagination from '@digigov/ui/app/Pagination';
-``` 
+```
 
 ## How to use
 
 <Story packageName="@digigov/ui" component="admin/Pagination" story="Default.tsx" />
+
+## API
+
+<PropTypes packageName="@digigov/ui" component="Pagination" />

package/src/admin/StepNav/StepNav.stories.js

@@ -3,6 +3,9 @@
 import StepNav from '@digigov/ui/admin/StepNav';
 export default {
   title: 'Digigov UI/admin/StepNav',
+  description:
+    'The step by step navigation pattern presents an end to end journey in logical steps, with links to content that helps users complete each step.',
   component: StepNav,
+  displayName: 'StepNav',
 };
 export * from './__stories__/Default';

package/src/admin/StepNav/__stories__/Default.tsx

@@ -1,5 +1,7 @@
 import React, { useState, useEffect } from 'react';
-import StepNav, {
+
+import {
+  StepNav,
   StepNavCircleΝumber,
   StepNavControls,
   StepNavList,
@@ -13,11 +15,13 @@ import StepNav, {
   StepNavAccordionHeadingTitle,
   StepNavAccordionHeadingText,
 } from '@digigov/ui/admin/StepNav';
-import Paragraph from '@digigov/ui/typography/Paragraph';
-import List, { ListItem } from '@digigov/ui/core/List';
-import Link from '@digigov/ui/core/Link';
-import VisuallyHidden from '@digigov/ui/core/VisuallyHidden';
-import Button from '@digigov/ui/core/Button';
+
+import { Paragraph } from '@digigov/ui/typography/Paragraph';
+import { List } from '@digigov/ui/core/List/List';
+import { ListItem } from '@digigov/ui/core/List/ListItem';
+import { Link } from '@digigov/ui/core/Link';
+import { VisuallyHidden } from '@digigov/ui/core/VisuallyHidden';
+import { Button } from '@digigov/ui/core/Button';
 
 const data = [
   {

package/src/admin/TaskList/TaskList.stories.js

@@ -1,8 +1,9 @@
-
-import TaskList from "@digigov/ui/admin/TaskList";
+import TaskList from '@digigov/ui/admin/TaskList';
 export default {
   title: 'Digigov UI/admin/TaskList',
+  description:
+    'Only use a task list page for longer transactions involving multiple tasks that users may need to complete over a number of sessions.',
   component: TaskList,
-}
-export * from './__stories__/Default';
-  
+  displayName: 'TaskList',
+};
+export * from '@digigov/ui/admin/TaskList/__stories__/Default';

package/src/admin/TaskList/__stories__/Default.tsx

@@ -1,17 +1,20 @@
 import React from 'react';
-import LinkBase from '@digigov/react-core/LinkBase';
-import SummaryList, {
+import { LinkBase } from '@digigov/ui/core/Link';
+
+import {
+  SummaryList,
   SummaryListItem,
   SummaryListItemAction,
   SummaryListItemKey,
 } from '@digigov/ui/core/SummaryList';
+
 import {
   TaskList,
   TaskListItem,
   TaskListItemHeading,
   TaskListItemContent,
   TaskListItemTag,
-} from '@digigov/ui/admin';
+} from '@digigov/ui/admin/TaskList';
 
 const fields = [
   {

package/src/admin/Timeline/Timeline.stories.js

@@ -1,8 +1,9 @@
-
-import Timeline from "@digigov/ui/admin/Timeline";
+import Timeline from '@digigov/ui/admin/Timeline';
 export default {
   title: 'Digigov UI/admin/Timeline',
+  description:
+    'Use this pattern to show a list of entries in the order they happened.',
   component: Timeline,
-}
-export * from './__stories__/Default';
-  
+  displayName: 'Timeline',
+};
+export * from '@digigov/ui/admin/Timeline/__stories__/Default';

package/src/admin/Timeline/__stories__/Default.tsx

@@ -1,14 +1,19 @@
 import React from 'react';
-import { Button, Hint, Paragraph } from '@digigov/react-core';
-import LinkBase from '@digigov/react-core/LinkBase';
+import { Button } from '@digigov/ui/core/Button';
+import { Hint } from '@digigov/ui/typography/Hint';
+import { Paragraph } from '@digigov/ui/typography/Paragraph';
+import { LinkBase } from '@digigov/ui/core/Link';
+
 import {
   Timeline,
   TimelineItem,
   TimelineHeading,
   TimelineContent,
   TimelineActions,
-} from '@digigov/ui/admin';
-import Details, {
+} from '@digigov/ui/admin/Timeline';
+
+import {
+  Details,
   DetailsSummary,
   DetailsContent,
 } from '@digigov/ui/core/Details';

package/src/app/Confirmation/Confirmation.mdx

@@ -5,8 +5,12 @@ title: Confirmation
 
 ```bash
 import Confirmation from '@digigov/ui/app/Confirmation';
-``` 
+```
 
 ## How to use
 
 <Story packageName="@digigov/ui" component="app/Confirmation" story="Default.tsx" />
+
+## API
+
+<PropTypes packageName="@digigov/ui" component="Confirmation" />

package/src/app/Confirmation/Confirmation.stories.js

@@ -1,8 +1,10 @@
-
-import Confirmation from "@digigov/ui/app"
+import Confirmation from '@digigov/ui/app/Confirmation';
 export default {
   title: 'Digigov UI/app/Confirmation',
+  description:
+    'You should use it in a confirmation page at the end of a transaction.',
+  link: 'https://guide.services.gov.gr/docs/components/confirmation-message',
   component: Confirmation,
-}
-export * from './__stories__/Default';
-  
+  displayName: 'Confirmation',
+};
+export * from '@digigov/ui/app/Confirmation/__stories__/Default';

package/src/app/Confirmation/__stories__/Default.tsx

@@ -1,5 +1,7 @@
 import React from 'react';
-import Confirmation, {
+
+import {
+  Confirmation,
   ConfirmationTitle,
   ConfirmationBody,
 } from '@digigov/ui/app/Confirmation';