@digigov/ui 1.0.0-6b93ebf2 → 1.0.0-758a1807

package/src/content/Chip/index.mdx

@@ -0,0 +1,39 @@
+---
+id: chip
+title: Chip
+---
+
+# Chip
+
+Chips allow users to enter information, make selections, filter content, or trigger actions. 
+While buttons are expected to appear consistently and with familiar calls to action, 
+chips should appear dynamically as a group of multiple interactive elements.
+
+```bash
+import Chip from '@digigov/ui/content/Chip';
+```
+
+## How to use
+
+<Story packageName="@digigov/ui" component="content/Chip" story="Default.tsx" />
+
+
+### Clickable Chip
+
+<Story packageName="@digigov/ui" component="content/Chip" story="ClickableChip.tsx" />
+
+### Chip with close icon
+
+<Story packageName="@digigov/ui" component="content/Chip" story="DeletableChip.tsx" />
+
+### Clickable Chip with close icon
+
+<Story packageName="@digigov/ui" component="content/Chip" story="ClickableDeletableChip.tsx" />
+
+### Group of Chips
+
+<Story packageName="@digigov/ui" component="content/Chip" story="GroupOfChips.tsx" />
+
+## API
+
+<PropTypes packageName="@digigov/ui" component="Chip" />

package/src/content/Chip/index.tsx

@@ -1,7 +1,6 @@
 export * from '@digigov/react-core/Chip';
 export * from '@digigov/react-core/ChipHeading';
-export * from '@digigov/react-core/ChipSection';
-export * from '@digigov/react-core/ChipSectionWrapper';
+export * from '@digigov/react-core/ChipContainer';
 export * from '@digigov/react-core/ChipKeyValue';
 
 import Chip from '@digigov/react-core/Chip';

package/src/content/Details/index.mdx

@@ -13,11 +13,12 @@ import Details from '@digigov/ui/content/Details';
 
 ## How to use
 
-<Story
-  packageName="@digigov/ui"
-  component="content/Details"
-  story="Default.tsx"
-/>
+<Story packageName="@digigov/ui" component="content/Details" story="Default.tsx" />
+
+## Accessibility
+
+You can read more about the accessibility patterns used in our Details
+implementation in the ARIA Authoring Practices Guide (APG) at [Disclosure](https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/) section.
 
 ## API
 

package/src/content/List/__stories__/HorizontalList.tsx

@@ -4,7 +4,7 @@ import { ListItem } from '@digigov/ui/content/List/ListItem';
 import { Link } from '@digigov/ui/navigation/Link';
 
 export const HorizontalList = () => (
-  <List horizontal>
+  <List layout='horizontal'>
     <ListItem>
       <Link>List Item One</Link>
     </ListItem>

package/src/content/List/__stories__/WithExtraSpace.tsx

@@ -3,7 +3,7 @@ import { List } from '@digigov/ui/content/List/List';
 import { ListItem } from '@digigov/ui/content/List/ListItem';
 
 export const WithExtraSpace = () => (
-  <List spaced>
+  <List dense={false}>
     <ListItem>Αποτελέσματα διαγνωστικών εργαστηριακών εξετάσεων</ListItem>
     <ListItem>Πτυχία τριτοβάθμιας εκπαίδευσης</ListItem>
     <ListItem>Υπεύθυνη Δήλωση / Εξουσιοδότηση / Γνήσιο Υπογραφής</ListItem>

package/src/content/List/index.mdx

@@ -15,27 +15,15 @@ import List from '@digigov/ui/content/List';
 
 ### List with bullets
 
-<Story
-  packageName="@digigov/ui"
-  component="content/List"
-  story="BulletList.tsx"
-/>
+<Story packageName="@digigov/ui" component="content/List" story="BulletList.tsx" />
 
 ### List with numbers
 
-<Story
-  packageName="@digigov/ui"
-  component="content/List"
-  story="NumberedList.tsx"
-/>
+<Story packageName="@digigov/ui" component="content/List" story="NumberedList.tsx" />
 
 ### List with extra space
 
-<Story
-  packageName="@digigov/ui"
-  component="content/List"
-  story="WithExtraSpace.tsx"
-/>
+<Story packageName="@digigov/ui" component="content/List" story="WithExtraSpace.tsx" />
 
 ## API
 

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

@@ -22,7 +22,6 @@ import {
   SummaryListItemValue,
 } from '@digigov/ui/content/SummaryList';
 
-
 const data = [
   {
     title: 'Απάντηση',
@@ -135,7 +134,7 @@ const data = [
 ];
 
 export const Default = () => {
-  const [open, SetOpen] = useState<boolean>(false);
+  const [open, setOpen] = useState<boolean>(false);
   const [openItem, setOpenItem] = useState(
     Array<boolean>(data.length).fill(false)
   );
@@ -160,7 +159,7 @@ export const Default = () => {
     setOpenItem(statusOpenItem);
   }
   function openCloseAll(): void {
-    SetOpen(!open);
+    setOpen(!open);
   }
   return (
     <StepNav>
@@ -199,7 +198,7 @@ export const Default = () => {
                         </StepNavCircleNumber>
                       )}
                       <StepNavAccordionHeadingTitle>
-                        <StepNavAccordionHeadingText open={openItem[index]}>
+                        <StepNavAccordionHeadingText>
                           {field.title}
                           {field.codename && (
                             <>

package/src/content/StepNav/__stories__/WithHints.tsx

@@ -199,16 +199,16 @@ export const WithHints = () => {
                           {index > 1 ? index : index + 1}
                         </StepNavCircleNumber>
                       )}
-                       <StepNavAccordionHeadingTitle>
-                        <StepNavAccordionHeadingText open={openItem[index]}>
+                      <StepNavAccordionHeadingTitle>
+                        <StepNavAccordionHeadingText>
                           {field.title}
                           {field.codename && (
                             <>
                               {' - '} {field.codename}
                             </>
                           )}
-                       </StepNavAccordionHeadingText>
-                       <Hint fontSize='14'>
+                        </StepNavAccordionHeadingText>
+                        <Hint fontSize={14}>
                           {field.date}
                         </Hint>
                       </StepNavAccordionHeadingTitle>

package/src/content/StepNav/index.mdx

@@ -0,0 +1,21 @@
+---
+id: step-nav
+title: StepNav
+---
+
+# StepNav
+ StepNav is a component that displays number of steps required to complete a process inside your application.
+
+```bash
+import StepNav from '@digigov/ui/content/StepNav';
+```
+
+## How to use
+
+### Default
+
+<Story packageName="@digigov/ui" component="content/StepNav" story="Default.tsx" />
+
+### With hints
+
+<Story packageName="@digigov/ui" component="content/StepNav" story="WithHints.tsx" />

package/src/content/SummaryList/index.mdx

@@ -13,11 +13,7 @@ import SummaryList from '@digigov/ui/content/SummaryList';
 
 ## How to use
 
-<Story
-  packageName="@digigov/ui"
-  component="content/SummaryList"
-  story="Default.tsx"
-/>
+<Story packageName="@digigov/ui" component="content/SummaryList" story="Default.tsx" />
 
 ### Summary list with actions
 
@@ -25,21 +21,13 @@ Assistive technology users, like those who use a screen reader, may hear the lin
 To give more context, add visually hidden text to the links.
 This means a screen reader user will hear a meaningful action, like ‘Αλλαγή ονόματος’ or ‘Αλλαγή ημερομηνίας γέννησης’.
 
-<Story
-  packageName="@digigov/ui"
-  component="content/SummaryList"
-  story="WithActions.tsx"
-/>
+<Story packageName="@digigov/ui" component="content/SummaryList" story="WithActions.tsx" />
 
 ### Summary list without borders
 
 If you do not include actions in your summary list and it would be better for your design to remove the separating borders, use the `border={false}` prop.
 
-<Story
-  packageName="@digigov/ui"
-  component="content/SummaryList"
-  story="WithoutBorders.tsx"
-/>
+<Story packageName="@digigov/ui" component="content/SummaryList" story="WithoutBorders.tsx" />
 
 ## API
 

package/src/content/Table/__stories__/DefinedWidth.tsx

@@ -47,13 +47,13 @@ export const DefinedWidth = () => {
               <TableRow>
                 {data.labels && (
                   <>
-                    <TableHeadCell cellWidth="one-half">
+                    <TableHeadCell width='50%'>
                       {data.labels.name}
                     </TableHeadCell>
-                    <TableHeadCell cellWidth="one-quarter">
+                    <TableHeadCell width='25%'>
                       {data.labels.role}
                     </TableHeadCell>
-                    <TableHeadCell cellWidth="one-quarter">
+                    <TableHeadCell width='25%'>
                       {data.labels.email}
                     </TableHeadCell>
                   </>

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

@@ -15,8 +15,7 @@ import {
   DropdownButton,
   DropdownContent,
 } from '@digigov/ui/navigation/Dropdown';
-import { NavVertical } from '@digigov/ui/navigation/NavList/NavVertical';
-import { NavVerticalItem } from '@digigov/ui/navigation/NavList/NavVerticalItem';
+import NavList, { NavListItemAction } from '@digigov/ui/navigation/NavList';
 
 const labels = {
   name: 'Ονοματεπώνυμο',
@@ -75,17 +74,16 @@ export const WithFloatingScroll = () => {
                     {Object.keys(dt).map((key) => (
                       <TableDataCell key={key}>{dt[key]}</TableDataCell>
                     ))}
-
                     <TableDataCell>
                       <Dropdown float align="right" placement="bottom">
                         <DropdownButton variant="link">
                           Ενέργειες
                         </DropdownButton>
                         <DropdownContent>
-                          <NavVertical>
-                            <NavVerticalItem href="#">Επεξεργασία</NavVerticalItem>
-                            <NavVerticalItem href="#">Διαγραφή</NavVerticalItem>
-                          </NavVertical>
+                          <NavList layout='vertical'>
+                            <NavListItemAction href="#">Επεξεργασία</NavListItemAction>
+                            <NavListItemAction href="#">Διαγραφή</NavListItemAction>
+                          </NavList>
                         </DropdownContent>
                       </Dropdown>
                     </TableDataCell>

package/src/content/Table/index.mdx

@@ -69,7 +69,7 @@ The prop `color='primary'` or `color='secondary'` is only functional when Table
 ## Accessibility
 
 You can read more about the accessibility patterns used in our Table
-implementation in the ARIA Authoring Practices Guide (APG) at
+implementation in the ARIA Authoring Practices Guide (APG) at [Table](https://www.w3.org/WAI/ARIA/apg/patterns/table/) section.
 
 ## API
 

package/src/content/Table/index.tsx

@@ -8,8 +8,7 @@ import {
   DropdownContent,
   DropdownProps,
 } from '@digigov/ui/navigation/Dropdown';
-import { NavVertical } from '@digigov/ui/navigation/NavList/NavVertical';
-import { NavVerticalItem } from '@digigov/ui/navigation/NavList/NavVerticalItem';
+import { NavList, NavListItemAction } from '@digigov/ui/navigation/NavList';
 
 export type SortDirection = 1 | -1 | 0;
 
@@ -48,21 +47,22 @@ export const TableSortLabel = React.forwardRef<
         <TableSortIconContainer marginLeft={1}>
           <CaretIcon
             direction={'up'}
-            size="md"
+            size="sm"
             variant={direction === 1 ? 'dark' : 'gray'}
           />
           <CaretIcon
             direction={'down'}
-            size="md"
+            size="sm"
             variant={direction === -1 ? 'dark' : 'gray'}
           />
         </TableSortIconContainer>
       </DropdownButton>
       <DropdownContent>
-        <NavVertical>
-          <NavVerticalItem
+        <NavList layout='vertical'>
+          <NavListItemAction
             active={direction === 1}
             tabIndex={0}
+            arrow={false}
             onClick={() => {
               onSort(1);
               dropdownRef.current && (dropdownRef.current.open = false);
@@ -78,13 +78,14 @@ export const TableSortLabel = React.forwardRef<
               direction={'up'}
               marginRight={1}
               marginTop={1}
-              size="md"
+              size="sm"
             />
             {labels.asc}
-          </NavVerticalItem>
-          <NavVerticalItem
+          </NavListItemAction>
+          <NavListItemAction
             active={direction === -1}
             tabIndex={0}
+            arrow={false}
             onClick={() => {
               onSort(-1);
               dropdownRef.current && (dropdownRef.current.open = false);
@@ -100,11 +101,11 @@ export const TableSortLabel = React.forwardRef<
               direction={'down'}
               marginRight={1}
               marginTop={1}
-              size="md"
+              size="sm"
             />
             {labels.desc}
-          </NavVerticalItem>
-        </NavVertical>
+          </NavListItemAction>
+        </NavList>
       </DropdownContent>
     </Dropdown>
   );

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

@@ -82,16 +82,16 @@ export const Default = () => (
                     let tagColor;
                     switch (task.status) {
                       case 'Ολοκληρωθηκε':
-                        tagColor = 'completed';
+                        tagColor = 'info';
                         break;
                       case 'Σε εξελιξη':
-                        tagColor = 'in-progress';
+                        tagColor = 'primary';
                         break;
                       case 'Δεν εχει ξεκινησει':
-                        tagColor = 'not-started';
+                        tagColor = 'secondary';
                         break;
                       case 'Σε αναμονη':
-                        tagColor = 'not-started';
+                        tagColor = 'secondary';
                         break;
                     }
                     return (
@@ -100,7 +100,7 @@ export const Default = () => (
                           <LinkBase>{task.text}</LinkBase>
                         </SummaryListItemKey>
                         <SummaryListItemAction>
-                          <TaskListItemTag status={tagColor}>
+                          <TaskListItemTag color={tagColor}>
                             {task.status}
                           </TaskListItemTag>
                         </SummaryListItemAction>

package/src/content/TaskList/index.mdx

@@ -0,0 +1,21 @@
+---
+id: task-list
+title: TaskList
+---
+
+# TaskList
+ TaskList is a component that displays number of steps required to complete a process inside your application.
+
+```bash
+import TaskList from '@digigov/ui/content/TaskList';
+```
+
+## How to use
+
+### Default
+
+<Story packageName="@digigov/ui" component="content/TaskList" story="Default.tsx" />
+
+## API
+
+<PropTypes packageName="@digigov/ui" component="TaskList" />

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

@@ -132,64 +132,62 @@ export const Default = () => (
     {data &&
       data.map((field, index) => {
         return (
-          <>
-            <TimelineItem key={index} marginBottom={10}>
-              <TimelineHeading size="md" marginBottom={2}>
-                {field.title}
-                {field.codename && (
-                  <>
-                    {' - '} {field.codename}
-                  </>
-                )}
-              </TimelineHeading>
-              <Hint>{field.date}</Hint>
-              <TimelineContent>
-                {field.details && (
-                  <SummaryList>
-                    {field.details.map((field, index) => {
-                      return (
-                        <SummaryListItem key={index}>
-                          <SummaryListItemKey>{field.name}</SummaryListItemKey>
-                          <SummaryListItemValue>
-                            {field.value}
-                          </SummaryListItemValue>
-                          {field.actions && (
-                            <SummaryListItemAction>
-                              <ButtonGroup>
-                                {field.actions &&
-                                  field.actions.map((action, subIndex) => {
-                                    return (
-                                      <Button key={subIndex} variant="link">
-                                        {action}
-                                      </Button>
-                                    );
-                                  })}
-                              </ButtonGroup>
-                            </SummaryListItemAction>
-                          )}
-                        </SummaryListItem>
-                      );
-                    })}
-                  </SummaryList>
-                )}
-              </TimelineContent>
-              <TimelineActions>
-                <ButtonGroup>
-                  {(field.actions || []).map((action, subIndex) => (
-                    <Button key={subIndex} variant="link">
-                      {action.label}
-                    </Button>
-                  ))}
-                  <Button color="secondary" variant="link">
-                    Προβολή εγγράφου
+          <TimelineItem key={index} marginBottom={10}>
+            <TimelineHeading size="md" marginBottom={2}>
+              {field.title}
+              {field.codename && (
+                <>
+                  {' - '} {field.codename}
+                </>
+              )}
+            </TimelineHeading>
+            <Hint>{field.date}</Hint>
+            <TimelineContent>
+              {field.details && (
+                <SummaryList>
+                  {field.details.map((field, index) => {
+                    return (
+                      <SummaryListItem key={index}>
+                        <SummaryListItemKey>{field.name}</SummaryListItemKey>
+                        <SummaryListItemValue>
+                          {field.value}
+                        </SummaryListItemValue>
+                        {field.actions && (
+                          <SummaryListItemAction>
+                            <ButtonGroup>
+                              {field.actions &&
+                                field.actions.map((action, subIndex) => {
+                                  return (
+                                    <Button key={subIndex} variant="link">
+                                      {action}
+                                    </Button>
+                                  );
+                                })}
+                            </ButtonGroup>
+                          </SummaryListItemAction>
+                        )}
+                      </SummaryListItem>
+                    );
+                  })}
+                </SummaryList>
+              )}
+            </TimelineContent>
+            <TimelineActions>
+              <ButtonGroup>
+                {(field.actions || []).map((action, subIndex) => (
+                  <Button key={subIndex} variant="link">
+                    {action.label}
                   </Button>
-                  <Button color="secondary" variant="link">
-                    Λήψη PDF
-                  </Button>
-                </ButtonGroup>
-              </TimelineActions>
-            </TimelineItem>
-          </>
+                ))}
+                <Button color="secondary" variant="link">
+                  Προβολή εγγράφου
+                </Button>
+                <Button color="secondary" variant="link">
+                  Λήψη PDF
+                </Button>
+              </ButtonGroup>
+            </TimelineActions>
+          </TimelineItem>
         );
       })}
   </Timeline>

package/src/content/Timeline/index.mdx

@@ -0,0 +1,23 @@
+---
+id: timeline
+title: Timeline
+---
+
+# Timeline
+A timeline is a useful way to display a whole range of information and/or data points to a user.
+Keeping things organized in logical sequence timeline helps to keep track of what’s happening. 
+User can better understand what has happened and also understand what the next steps should be.
+
+```bash
+import Timeline from '@digigov/ui/content/Timeline';
+```
+
+## How to use
+
+### Default
+
+<Story packageName="@digigov/ui" component="content/Timeline" story="Default.tsx" />
+
+## API
+
+<PropTypes packageName="@digigov/ui" component="Timeline" />

package/src/feedback/CopyToClipboard/index.mdx

@@ -11,19 +11,11 @@ import CopyToClipboard from '@digigov/ui/feedback/CopyToClipboard';
 
 ### Default
 
-<Story
-  packageName="@digigov/ui"
-  component="feedback/CopyToClipboard"
-  story="Default.tsx"
-/>
+<Story packageName="@digigov/ui" component="feedback/CopyToClipboard" story="Default.tsx" />
 
 ### Banner
 
-<Story
-  packageName="@digigov/ui"
-  component="feedback/CopyToClipboard"
-  story="Banner.tsx"
-/>
+<Story packageName="@digigov/ui" component="feedback/CopyToClipboard" story="Banner.tsx" />
 
 ## API
 

package/src/feedback/ErrorSummary/index.mdx

@@ -15,11 +15,7 @@ import ErrorSummary from '@digigov/ui/feedback/ErrorSummary';
 
 ## How to use
 
-<Story
-  packageName="@digigov/ui"
-  component="feedback/ErrorSummary"
-  story="Default.tsx"
-/>
+<Story packageName="@digigov/ui" component="feedback/ErrorSummary" story="Default.tsx" />
 
 ### Linking from the error summary to each answer
 
@@ -27,29 +23,17 @@ You must link the errors in the error summary to the answer they relate to.
 
 For questions that require a user to answer using a single field, like a file upload, select, textarea, text input or character count, link to the field.
 
-<Story
-  packageName="@digigov/ui"
-  component="feedback/ErrorSummary"
-  story="LinkedToInput.tsx"
-/>
+<Story packageName="@digigov/ui" component="feedback/ErrorSummary" story="LinkedToInput.tsx" />
 
 When a user has to enter their answer into multiple fields, such as the day, month and year fields in the date input component, link to the first field that contains an error.
 
 If you do not know which field contains an error, link to the first field.
 
-<Story
-  packageName="@digigov/ui"
-  component="feedback/ErrorSummary"
-  story="LinkedToField.tsx"
-/>
+<Story packageName="@digigov/ui" component="feedback/ErrorSummary" story="LinkedToField.tsx" />
 
 For questions that require a user to select one or more options from a list using radios or checkboxes, link to the first radio or checkbox.
 
-<Story
-  packageName="@digigov/ui"
-  component="feedback/ErrorSummary"
-  story="LinkedToCheckbox.tsx"
-/>
+<Story packageName="@digigov/ui" component="feedback/ErrorSummary" story="LinkedToCheckbox.tsx" />
 
 ## API