@digigov/ui 1.0.0-88820b1e → 1.0.0-8bbf3ef2

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/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,8 +132,8 @@ export const Default = () => (
     {data &&
       data.map((field, index) => {
         return (
-          <TimelineItem key={index} marginBottom={10}>
-            <TimelineHeading size="md" marginBottom={2}>
+          <TimelineItem key={index}>
+            <TimelineHeading size="md">
               {field.title}
               {field.codename && (
                 <>

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

@@ -0,0 +1,196 @@
+import React from 'react';
+import {
+  Timeline,
+  TimelineItem,
+  TimelineHeading,
+  TimelineContent,
+  TimelineActions,
+} from '@digigov/ui/content/Timeline';
+import { Button, ButtonGroup } from '@digigov/ui/form/Button';
+import { Hint } from '@digigov/ui/typography/Hint';
+import {
+  SummaryList,
+  SummaryListItem,
+  SummaryListItemAction,
+  SummaryListItemKey,
+  SummaryListItemValue,
+} from '@digigov/ui/content/SummaryList';
+
+const data = [
+  {
+    title: 'Απάντηση',
+    codename: '(KEP-APA)',
+    date: '7 Απριλίου 2023, 12:32μ.μ.',
+    details: [
+      {
+        name: 'Ημερομηνία',
+        value: '7 Απριλίου 2023, 12:32μ.μ.',
+      },
+      {
+        name: 'Χειριστής',
+        value: 'Καλλιόπη Παπαδοπούλου',
+        actions: ['Ανάθεση'],
+      },
+      {
+        name: 'Κωδικός επαλήθευσης',
+        value: '637283494',
+      },
+      {
+        name: 'Κατάσταση',
+        value: 'Εισερχόμενη',
+        actions: ['Αλλαγή'],
+      },
+    ],
+  },
+  {
+    title: 'Συμπληρωματικά έγγραφα ',
+    codename: '(MORE-DOCS)',
+    date: '5 Απριλίου 2023, 8:32π.μ.',
+    details: [
+      {
+        name: 'Ημερομηνία',
+        value: '7 Απριλίου 2023, 12:32μ.μ.',
+      },
+      {
+        name: 'Χειριστής',
+        value: 'Μαρία Φλούπη',
+        actions: ['Ανάθεση'],
+      },
+      {
+        name: 'Κωδικός επαλήθευσης',
+        value: '637283494',
+      },
+      {
+        name: 'Κατάσταση',
+        value: 'Εισερχόμενη',
+        actions: ['Αλλαγή'],
+      },
+    ],
+  },
+  {
+    title: 'Αίτηση για συμπληρωματικά έγγραφα',
+    codename: '(MORE-DOCS-REQUEST)',
+    date: '5 Απριλίου 2023, 8:32π.μ.',
+    details: [
+      {
+        name: 'Ημερομηνία',
+        value: '5 Απριλίου 2023, 8:32π.μ.',
+      },
+      {
+        name: 'Χειριστής',
+        value: 'Μαρία Φλούπη',
+        actions: ['Ανάθεση'],
+      },
+      {
+        name: 'Κωδικός επαλήθευσης',
+        value: '974256',
+      },
+      {
+        name: 'Κατάσταση',
+        value: 'Εισερχόμενη',
+        actions: ['Αλλαγή'],
+      },
+    ],
+  },
+  {
+    title: 'Αίτηση Βεβαίωσης Μόνιμης Κατοικίας',
+    codename: '(PERMRES-FOREIS)',
+    date: '3 Απριλίου 2023, 5:42μ.μ.',
+    actions: [
+      {
+        label: 'Απάντηση',
+      },
+      {
+        label: 'Αίτημα για συμπληρωματικά έγγραφα',
+      },
+    ],
+    details: [
+      {
+        name: 'Ημερομηνία',
+        value: '3 Απριλίου 2023, 5:42μ.μ.',
+      },
+      {
+        name: 'Χειριστής',
+        value: 'Μαρία Φλούπη',
+        actions: ['Ανάθεση'],
+      },
+      {
+        name: 'Κωδικός επαλήθευσης',
+        value: '475747',
+      },
+      {
+        name: 'Κατάσταση',
+        value: 'Εισερχόμενη',
+        actions: ['Αλλαγή'],
+      },
+    ],
+  },
+];
+
+export const Dense = () => (
+  <Timeline dense>
+    {data &&
+      data.map((field, index) => {
+        return (
+          <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">
+                  Προβολή εγγράφου
+                </Button>
+                <Button color="secondary" variant="link">
+                  Λήψη PDF
+                </Button>
+              </ButtonGroup>
+            </TimelineActions>
+          </TimelineItem>
+        );
+      })}
+  </Timeline>
+);
+
+export default Dense;

package/src/feedback/CopyToClipboard/CopyToClipboard.stories.js

@@ -6,3 +6,4 @@ export default {
 };
 export * from '@digigov/ui/feedback/CopyToClipboard/__stories__/Default';
 export * from '@digigov/ui/feedback/CopyToClipboard/__stories__/Banner';
+export * from '@digigov/ui/feedback/CopyToClipboard/__stories__/Dense';

package/src/feedback/CopyToClipboard/CopyToClipboard.stories.playwright.json

@@ -32,6 +32,22 @@
           "title": "Click button"
         }
       ]
+    },
+    "digigov-ui-feedback-copytoclipboard--dense": {
+      "actionSets": [
+        {
+          "actions": [
+            {
+              "name": "click",
+              "args": {
+                "selector": "html>body>div:nth-child(5)>div>div>button"
+              }
+            }
+          ],
+          "id": "ghUU4iC32gX-",
+          "title": "Click button"
+        }
+      ]
     }
   }
 }

package/src/feedback/CopyToClipboard/__stories__/Dense.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { CopyToClipboard } from '@digigov/ui/feedback/CopyToClipboard';
+import { Button } from '@digigov/ui/form/Button';
+
+export const Dense = () => {
+  return (
+    <CopyToClipboard
+      text="copied-text"
+      variant="tooltip"
+      tooltipAlign="left"
+      message="Αντιγράφηκε στο πρόχειρο"
+      id="copy-to-clipboard"
+      dense
+    >
+      <Button color="secondary" aria-describedby="copy-to-clipboard">
+        Αντιγραφή
+      </Button>
+    </CopyToClipboard>
+  );
+};
+export default Dense;

package/src/feedback/CopyToClipboard/index.tsx

@@ -14,7 +14,7 @@ export const CopyToClipboard = React.forwardRef<
   HTMLDivElement,
   CopyToClipboardProps
 >(function CopyToClipboard(
-  { text, variant = 'tooltip', tooltipAlign = 'right', message, timeout = 3000, children },
+  { text, variant = 'tooltip', tooltipAlign = 'right', message, dense, timeout = 3000, children },
   ref
 ) {
   const [enabled, setEnabled] = useState(false);
@@ -39,6 +39,7 @@ export const CopyToClipboard = React.forwardRef<
       variant={variant}
       tooltipAlign={tooltipAlign}
       ref={ref}
+      dense={dense}
     >
       {children}
       {enabled && (

package/src/feedback/ErrorSummary/ErrorSummary.stories.js

@@ -8,6 +8,8 @@ export default {
   displayName: 'ErrorSummary',
 };
 export * from '@digigov/ui/feedback/ErrorSummary/__stories__/Default';
+export * from '@digigov/ui/feedback/ErrorSummary/__stories__/Dense';
 export * from '@digigov/ui/feedback/ErrorSummary/__stories__/LinkedToInput';
 export * from '@digigov/ui/feedback/ErrorSummary/__stories__/LinkedToField';
 export * from '@digigov/ui/feedback/ErrorSummary/__stories__/LinkedToCheckbox';
+export * from '@digigov/ui/feedback/ErrorSummary/__stories__/WithBackLinkAndButton';

package/src/feedback/ErrorSummary/__stories__/Dense.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { ErrorSummary } from '@digigov/ui/feedback/ErrorSummary';
+import { Link } from '@digigov/ui/navigation/Link';
+import { Heading } from '@digigov/ui/typography/Heading';
+
+export const Dense = () => (
+  <ErrorSummary dense>
+    <Heading size="sm">Υπήρξε κάποιο πρόβλημα</Heading>
+    <Link>Πρέπει να συμπληρώσετε το έτος</Link>
+  </ErrorSummary>
+);
+
+export default Dense;

package/src/feedback/ErrorSummary/__stories__/LinkedToCheckbox.tsx

@@ -10,6 +10,7 @@ import {
 import { Link } from '@digigov/ui/navigation/Link';
 import { Heading } from '@digigov/ui/typography/Heading';
 import { VisuallyHidden } from '@digigov/ui/utils/VisuallyHidden';
+import { Hint } from '@digigov/ui/typography/Hint';
 
 export const LinkedToCheckbox = () => (
   <div>
@@ -17,12 +18,12 @@ export const LinkedToCheckbox = () => (
       <Heading size="sm">Υπήρξε κάποιο πρόβλημα</Heading>
       <Link href="#england">Επιλέξτε μία ή παραπάνω χώρες.</Link>
     </ErrorSummary>
-
     <FieldContainer error>
       <Fieldset>
         <FieldsetLegend>
           Θα ταξιδέψετε σε κάποια από αυτές τις χώρες;
         </FieldsetLegend>
+        <Hint>Πείτε μας σχετικά με πρόσφατες αλλαγές. Επιλέξτε ό,τι ισχύει.</Hint>
         <ErrorMessage>
           <VisuallyHidden>Λάθος:</VisuallyHidden> Επιλέξτε μία ή παραπάνω χώρες.
         </ErrorMessage>

package/src/feedback/ErrorSummary/__stories__/LinkedToField.tsx

@@ -20,23 +20,21 @@ export const LinkedToField = () => (
     <ErrorSummary>
       <Heading size="sm">Υπήρξε κάποιο πρόβλημα</Heading>
       <Link href="#passport-date">
-        Η ημερομηνία έκδοσης του διαβατηρίου πρέπει να είναι στο
-        παρελθόν.
+        Πρέπει να συμπληρώσετε το έτος.
       </Link>
     </ErrorSummary>
     <FieldContainer error id="passport-date">
       <Fieldset>
-        <FieldsetLegend>Πότε εκδόθηκε το διαβατήριο;</FieldsetLegend>
+        <FieldsetLegend>Ποιά είναι η ημερομηνία γέννησής σας;</FieldsetLegend>
         <Hint>Για παράδειγμα, 05 11 2020</Hint>
         <ErrorMessage>
-          <VisuallyHidden>Λάθος:</VisuallyHidden> Η ημερομηνία έκδοσης του
-          διαβατηρίου σας θα πρέπει να είναι στο παρελθόν.
+          <VisuallyHidden>Λάθος:</VisuallyHidden>Η ημερομηνία γέννησης πρέπει να έχει έτος.
         </ErrorMessage>
         <DateInputContainer>
           <DateInputItem name="day">Ημέρα</DateInputItem>
           <DateInputItem name="month">Μήνας</DateInputItem>
           <DateInputItem error width={4} name="year">
-            Χρόνος
+            Έτος
           </DateInputItem>
         </DateInputContainer>
       </Fieldset>

package/src/feedback/ErrorSummary/__stories__/WithBackLinkAndButton.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import { ErrorSummary } from '@digigov/ui/feedback/ErrorSummary';
+import {
+  DateInputContainer,
+  DateInputItem,
+} from '@digigov/ui/form/DateInputContainer';
+import { ErrorMessage } from '@digigov/ui/form/ErrorMessage';
+import {
+  FieldContainer,
+  Fieldset,
+  FieldsetLegend,
+} from '@digigov/ui/form/FieldContainer';
+import { Link } from '@digigov/ui/navigation/Link';
+import { Heading } from '@digigov/ui/typography/Heading';
+import { Hint } from '@digigov/ui/typography/Hint';
+import { VisuallyHidden } from '@digigov/ui/utils/VisuallyHidden';
+import { BackLink } from '@digigov/ui/navigation/BackLink';
+import Button from '@digigov/ui/form/Button';
+
+export const WithBackLinkAndButton = () => (
+  <div>
+    <BackLink href="/">Πίσω</BackLink>
+    <ErrorSummary>
+      <Heading size="sm">Υπήρξε κάποιο πρόβλημα</Heading>
+      <Link href="#passport-date">
+        Πρέπει να συμπληρώσετε το έτος
+      </Link>
+    </ErrorSummary>
+    <FieldContainer error id="passport-date">
+      <Fieldset>
+        <FieldsetLegend>Ποιά είναι η ημερομηνία γέννησής σας</FieldsetLegend>
+        <Hint>Για παράδειγμα, 05 11 2020</Hint>
+        <ErrorMessage>
+          <VisuallyHidden>Λάθος:</VisuallyHidden>Η ημερομηνία γέννησης πρέπει να έχει έτος.
+        </ErrorMessage>
+        <DateInputContainer>
+          <DateInputItem name="day">Ημέρα</DateInputItem>
+          <DateInputItem name="month">Μήνας</DateInputItem>
+          <DateInputItem error width={4} name="year">
+            Έτος
+          </DateInputItem>
+        </DateInputContainer>
+      </Fieldset>
+    </FieldContainer>
+    <Button>Συνέχεια</Button>
+  </div>
+);
+
+export default WithBackLinkAndButton;

package/src/feedback/NotificationBanner/NotificationBanner.stories.js

@@ -11,3 +11,4 @@ export default {
 };
 export * from '@digigov/ui/feedback/NotificationBanner/__stories__/Default';
 export * from '@digigov/ui/feedback/NotificationBanner/__stories__/Success';
+export * from '@digigov/ui/feedback/NotificationBanner/__stories__/Dense';

package/src/feedback/NotificationBanner/__stories__/Dense.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { NotificationBanner } from '@digigov/ui/feedback/NotificationBanner';
+
+export const Dense = () => (
+  <NotificationBanner
+    title="Ειδοποίηση"
+    link={{
+      label: 'Προβολή αίτησης',
+      href: '#link?name=NotificationBannerDefault',
+    }}
+    dense
+  >
+    Σε 7 ημέρες θα μπορείτε να υποβάλετε την αίτηση.
+  </NotificationBanner>
+);
+
+export default Dense;

package/src/feedback/NotificationBanner/index.tsx

@@ -19,11 +19,12 @@ export const NotificationBanner: React.FC<NotificationBannerProps> = ({
   variant,
   title,
   link,
+  dense,
   children,
   ...props
 }) => {
   return (
-    <NotificationBannerContainer variant={variant} {...props}>
+    <NotificationBannerContainer variant={variant} dense={dense} {...props}>
       {title && (
         <NotificationBannerHeader>{title}</NotificationBannerHeader>
       )}

package/src/feedback/ServiceBadge/index.mdx

@@ -5,17 +5,21 @@ parent: docs/ui/component
 ---
 
 import ServiceBadge from '@digigov/ui/feedback/ServiceBadge';
-import Header, { HeaderTitle } from '@digigov/ui/app/Header';
+import Header, { HeaderContent, HeaderSection, HeaderTitle } from '@digigov/ui/app/Header';
 import GovGRLogo from '@digigov/ui/govgr/GovGRLogo';
 
 ## Example
 
 <Header>
-  <GovGRLogo />
-  <HeaderTitle>
-    Service Name <ServiceBadge label="ALPHA" />
-  </HeaderTitle>
+  <HeaderContent>
+    <HeaderSection>
+      <GovGRLogo />
+      <HeaderTitle>Service Name </HeaderTitle>
+      <ServiceBadge label="ALPHA" />
+    </HeaderSection>
+  </HeaderContent>
 </Header>
+<br/>
 
 ## How to use
 

package/src/feedback/WarningText/WarningText.stories.js

@@ -9,3 +9,4 @@ export default {
 };
 export * from '@digigov/ui/feedback/WarningText/__stories__/Default';
 export * from '@digigov/ui/feedback/WarningText/__stories__/AssistiveText';
+export * from '@digigov/ui/feedback/WarningText/__stories__/Dense';

package/src/feedback/WarningText/__stories__/Dense.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import { WarningText } from '@digigov/ui/feedback/WarningText';
+
+export const Dense = () => (
+  <WarningText dense>
+    Μπορεί να σας επιβληθεί πρόστιμο έως και 5.000 ευρώ εάν δεν εγγραφείτε.
+  </WarningText>
+);
+
+export default Dense;

package/src/form/Button/Button.stories.js

@@ -16,6 +16,7 @@ export * from './__stories__/GroupingButtons';
 export * from './__stories__/GroupingButtonsAndLinks';
 export * from './__stories__/CallToActionButton';
 export * from './__stories__/Disabled';
+export * from './__stories__/Dense';
 export * from './__stories__/ButtonLinkButton';
 export * from './__stories__/Back';
 export * from './__stories__/WithVariantLink';

package/src/form/Button/__stories__/CallToActionButton.tsx

@@ -1,9 +1,6 @@
 import React from 'react';
 import { CallToAction } from '@digigov/ui/form/Button/CallToAction';
 
-/**
- * My primary descrition is the best description that was described
- */
 export const CallToActionButton = () => (
   <CallToAction
     href="#"
@@ -11,7 +8,7 @@ export const CallToActionButton = () => (
     aria-label="Είσοδος στην υπηρεσία"
     tabIndex={0}
   >
-    Είσοδος
+    Είσοδος στην υπηρεσία
   </CallToAction>
 );
 export default CallToActionButton;

package/src/form/Button/__stories__/Dense.tsx

@@ -0,0 +1,8 @@
+import React from 'react';
+
+import { Button } from '@digigov/ui/form/Button';
+
+export const Dense = () => (
+  <Button dense aria-label="Προβολή αρχείου">Προβολή αρχείου</Button>
+);
+export default Dense;

package/src/form/Button/__stories__/GroupingButtons.tsx

@@ -2,9 +2,6 @@ import React from 'react';
 
 import { Button, ButtonGroup } from '@digigov/ui/form/Button';
 
-/**
- * My deescrition is the best description that was described
- */
 export const GroupingButtons = () => (
   <ButtonGroup>
     <Button>Οριστική υποβολή</Button>