@digigov/ui 1.0.0-002c630d → 1.0.0-00643e1d

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

@@ -0,0 +1,96 @@
+import React from 'react';
+
+import {
+  TableContainer,
+  Table,
+  TableCaption,
+  TableHead,
+  TableRow,
+  TableBody,
+  TableHeadCell,
+  TableDataCell,
+} from '@digigov/ui/content/Table';
+import Link from '@digigov/ui/navigation/Link';
+
+const data = {
+  title: 'Ειδοποιήσεις',
+  labels: {
+    date: 'Ημερομηνία',
+    title: 'Τίτλος',
+    actions: 'Ενέργειες',
+  },
+  content: [
+    {
+      date: '24-07-23 16:34',
+      title: 'Ειδοποίηση',
+      actions: 'Λεπτομέρειες',
+      new: true,
+    },
+    {
+      date: '24-07-23 12:41',
+      title: 'Μήνυμα υπηρεσίας',
+      actions: 'Λεπτομέρειες',
+      new: true,
+    },
+    {
+      date: '24-07-23 12:40',
+      title: 'Μήνυμα από τον διαχειριστή',
+      actions: 'Λεπτομέρειες',
+      new: false,
+    },
+    {
+      date: '23-07-23 15:14',
+      title: 'Έχετε συνδεθεί',
+      actions: 'Λεπτομέρειες',
+      new: false,
+    },
+    {
+      date: '23-07-23 13:25',
+      title: 'Ο κωδικός άλλαξε',
+      actions: 'Λεπτομέρειες',
+      new: false,
+    },
+  ],
+};
+
+export const RowColors = () => {
+  return (
+    <TableContainer>
+      <Table variant="default">
+        {data && (
+          <>
+            <TableCaption>{data.title}</TableCaption>
+            <TableHead>
+              <TableRow>
+                {data.labels &&
+                  Object.keys(data.labels).map((key) => (
+                    <TableHeadCell key={key}>{data.labels[key]}</TableHeadCell>
+                  ))}
+              </TableRow>
+            </TableHead>
+            <TableBody>
+              {data.content &&
+                data.content.map((item, index) => (
+                  <TableRow
+                    key={index}
+                    color={item.new ? 'primary' : 'secondary'}
+                  >
+                    <TableDataCell data-label={data.labels.date}>
+                      {item.date}
+                    </TableDataCell>
+                    <TableDataCell data-label={data.labels.title}>
+                      {item.title}
+                    </TableDataCell>
+                    <TableDataCell data-label={data.labels.actions}>
+                      <Link href="#">{item.actions}</Link>
+                    </TableDataCell>
+                  </TableRow>
+                ))}
+            </TableBody>
+          </>
+        )}
+      </Table>
+    </TableContainer>
+  );
+};
+export default RowColors;

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/__stories__/ZebraProp.tsx

@@ -44,7 +44,7 @@ const data = {
 export const ZebraProp = () => {
   return (
     <TableContainer>
-      <Table zebra>
+      <Table variant='zebra'>
         {data && (
           <>
             <TableCaption>{data.title}</TableCaption>

package/src/content/Table/index.mdx

@@ -20,53 +20,35 @@ import {
 
 ## How to use
 
-<Story
-  packageName="@digigov/ui"
-  component="content/Table"
-  story="Default.tsx"
-/>
+<Story packageName="@digigov/ui" component="content/Table" story="Default.tsx"/>
 
 ### Table with dark header
 
-<Story
-  packageName="@digigov/ui"
-  component="content/Table"
-  story="DarkVariant.tsx"
-/>
+<Story packageName="@digigov/ui" component="content/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="content/Table"
-  story="TableCaptions.tsx"
-/>
+<Story packageName="@digigov/ui" component="content/Table" story="TableCaptions.tsx"/>
 
 ### Numbers in a table
 
-<Story
-  packageName="@digigov/ui"
-  component="content/Table"
-  story="NumericDataType.tsx"
-/>
+<Story packageName="@digigov/ui" component="content/Table" story="NumericDataType.tsx"/>
 
 ### Zebra rows
 
-<Story
-  packageName="@digigov/ui"
-  component="content/Table"
-  story="ZebraProp.tsx"
-/>
+<Story  packageName="@digigov/ui" component="content/Table" story="ZebraProp.tsx"/>
+
+### Rows with primary or secondary color
+
+The prop `color='primary'` or `color='secondary'` is only functional when Table component has `variant='default'`.
+
+<Story packageName="@digigov/ui" component="content/Table"  story="RowColors.tsx"/>
 
 ### Vertical lines
 
-<Story
-  packageName="@digigov/ui"
-  component="content/Table"
-  story="VerticalBorders.tsx"
-/>
+<Story packageName="@digigov/ui" component="content/Table" story="VerticalBorders.tsx" />
 
 ### Dense tables
 
@@ -74,11 +56,7 @@ Use the `<TableCaption>` element to describe a table in the same way you would u
 
 ### Custom column widths
 
-<Story
-  packageName="@digigov/ui"
-  component="content/Table"
-  story="DefinedWidth.tsx"
-/>
+<Story packageName="@digigov/ui" component="content/Table" story="DefinedWidth.tsx"/>
 
 ### No data
 
@@ -86,16 +64,12 @@ Use the `<TableCaption>` element to describe a table in the same way you would u
 
 ### Using loader
 
-<Story
-  packageName="@digigov/ui"
-  component="content/Table"
-  story="WithLoader.tsx"
-/>
+<Story packageName="@digigov/ui" component="content/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
+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/TaskList.stories.js

@@ -7,3 +7,4 @@ export default {
   displayName: 'TaskList',
 };
 export * from '@digigov/ui/content/TaskList/__stories__/Default';
+export * from '@digigov/ui/content/TaskList/__stories__/Dense';

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/__stories__/Dense.tsx

@@ -0,0 +1,118 @@
+import React from 'react';
+
+import {
+  SummaryList,
+  SummaryListItem,
+  SummaryListItemAction,
+  SummaryListItemKey,
+} from '@digigov/ui/content/SummaryList';
+
+import {
+  TaskList,
+  TaskListItem,
+  TaskListItemHeading,
+  TaskListItemContent,
+  TaskListItemTag,
+} from '@digigov/ui/content/TaskList';
+import { LinkBase } from '@digigov/ui/navigation/Link';
+
+const fields = [
+  {
+    title: 'Έλεγχοι πριν ξεκινήσετε',
+    tasks: [
+      {
+        text: 'Ελέγξτε την καταλληλότητα',
+        status: 'Ολοκληρωθηκε',
+      },
+      {
+        text: 'Εμφάνιση δήλωσης',
+        status: 'Ολοκληρωθηκε',
+      },
+    ],
+  },
+  {
+    title: 'Προετοιμασία αίτησης',
+    tasks: [
+      {
+        text: 'Στοιχεία εταιρείας',
+        status: 'Ολοκληρωθηκε',
+      },
+      {
+        text: 'Στοιχεία επικοινωνίας',
+        status: 'Σε εξελιξη',
+      },
+      {
+        text: 'Λίστα αποδείξεων',
+        status: 'Δεν εχει ξεκινησει',
+      },
+      {
+        text: 'Παροχή οικονομικών στοιχείων',
+        status: 'Σε αναμονη',
+      },
+      {
+        text: 'Παροχή ιατρικών πληροφοριών',
+        status: 'Σε αναμονη',
+      },
+    ],
+  },
+  {
+    title: 'Αίτηση',
+    tasks: [
+      {
+        text: 'Υποβολή και πληρωμή',
+        status: 'Σε αναμονη',
+      },
+    ],
+  },
+];
+
+export const Dense = () => (
+  <div>
+    <TaskList dense>
+      {fields &&
+        fields.map((field, index) => {
+          return (
+            <TaskListItem key={index}>
+              <TaskListItemHeading size="md">{`${index + 1}. ${field.title
+                }`}</TaskListItemHeading>
+              <TaskListItemContent>
+                <SummaryList>
+                  {field.tasks.map((task, key) => {
+                    let tagColor;
+                    switch (task.status) {
+                      case 'Ολοκληρωθηκε':
+                        tagColor = 'info';
+                        break;
+                      case 'Σε εξελιξη':
+                        tagColor = 'primary';
+                        break;
+                      case 'Δεν εχει ξεκινησει':
+                        tagColor = 'secondary';
+                        break;
+                      case 'Σε αναμονη':
+                        tagColor = 'secondary';
+                        break;
+                    }
+                    return (
+                      <SummaryListItem key={key}>
+                        <SummaryListItemKey>
+                          <LinkBase>{task.text}</LinkBase>
+                        </SummaryListItemKey>
+                        <SummaryListItemAction>
+                          <TaskListItemTag color={tagColor}>
+                            {task.status}
+                          </TaskListItemTag>
+                        </SummaryListItemAction>
+                      </SummaryListItem>
+                    );
+                  })}
+                </SummaryList>
+              </TaskListItemContent>
+            </TaskListItem>
+          );
+        })}
+    </TaskList>
+  </div>
+);
+
+export default Dense;

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/Timeline.stories.js

@@ -7,3 +7,4 @@ export default {
   displayName: 'Timeline',
 };
 export * from '@digigov/ui/content/Timeline/__stories__/Default';
+export * from '@digigov/ui/content/Timeline/__stories__/Dense';

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}>
+            <TimelineHeading size="md">
+              {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>