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

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/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/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__/Default.tsx

@@ -6,7 +6,8 @@ export const Default = () => {
   return (
     <CopyToClipboard
       text="copied-text"
-      variant="tooltip-left"
+      variant="tooltip"
+      tooltipAlign="left"
       message="Αντιγράφηκε στο πρόχειρο"
       id="copy-to-clipboard"
     >

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.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/CopyToClipboard/index.tsx

@@ -1,13 +1,11 @@
 import React, { useState, useEffect } from 'react';
-import CopyToClipboardContainer from '@digigov/react-core/CopyToClipboardContainer';
+import CopyToClipboardContainer, { CopyToClipboardContainerProps } from '@digigov/react-core/CopyToClipboardContainer';
 import CopyToClipboardMessage from '@digigov/react-core/CopyToClipboardMessage';
 import { useTranslation } from '@digigov/ui/i18n';
 import NormalText from '@digigov/ui/typography/NormalText';
 
-type DivElementAttributes = JSX.IntrinsicElements['div'];
-export interface CopyToClipboardProps extends DivElementAttributes {
+export interface CopyToClipboardProps extends CopyToClipboardContainerProps {
   text: string;
-  variant?: 'tooltip-right' | 'tooltip-left' | 'banner';
   message?: string;
   timeout?: number;
 }
@@ -16,7 +14,7 @@ export const CopyToClipboard = React.forwardRef<
   HTMLDivElement,
   CopyToClipboardProps
 >(function CopyToClipboard(
-  { text, variant = 'tooltip-right', message, timeout = 3000, children },
+  { text, variant = 'tooltip', tooltipAlign = 'right', message, dense, timeout = 3000, children },
   ref
 ) {
   const [enabled, setEnabled] = useState(false);
@@ -39,12 +37,13 @@ export const CopyToClipboard = React.forwardRef<
     <CopyToClipboardContainer
       onClick={copyToClipboard}
       variant={variant}
+      tooltipAlign={tooltipAlign}
       ref={ref}
+      dense={dense}
     >
       {children}
       {enabled && (
         <CopyToClipboardMessage
-          variant={variant}
           enabled={enabled}
           role="tooltip"
         >

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/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
 

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__/Default.tsx

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

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.mdx

@@ -19,19 +19,11 @@ Use a ‘neutral’ blue notification banner if the user needs to know about a p
 
 Use a ‘neutral’ notification banner if the user needs to know about something that’s happening elsewhere in the service.
 
-<Story
-  packageName="@digigov/ui"
-  component="feedback/NotificationBanner"
-  story="Default.tsx"
-/>
+<Story packageName="@digigov/ui" component="feedback/NotificationBanner" story="Default.tsx" />
 
 You can also use a notification banner to tell the user about the outcome of something they’ve just done - but they have not finished using the service, so it does not make sense to use a confirmation page.
 
-<Story
-  packageName="@digigov/ui"
-  component="feedback/NotificationBanner"
-  story="Success.tsx"
-/>
+<Story packageName="@digigov/ui" component="feedback/NotificationBanner" story="Success.tsx" />
 
 ## API
 

package/src/feedback/NotificationBanner/index.tsx

@@ -9,24 +9,25 @@ import NotificationBannerLink from '@digigov/react-core/NotificationBannerLink';
 
 export interface NotificationBannerProps
   extends NotificationBannerContainerProps {
-  variant?: 'important' | 'success';
+  variant?: 'info' | 'success' | 'error';
   title?: string;
   link?: { href: string; label: string };
   ref?: React.Ref<HTMLDivElement>;
 }
 
 export const NotificationBanner: React.FC<NotificationBannerProps> = ({
-  variant = 'important',
+  variant,
   title,
   link,
+  dense,
   children,
   ...props
 }) => {
-  const success = variant === 'success';
-  title = title ? title : success ? 'Success' : 'Important';
   return (
-    <NotificationBannerContainer success={success} {...props}>
-      <NotificationBannerHeader>{title}</NotificationBannerHeader>
+    <NotificationBannerContainer variant={variant} dense={dense} {...props}>
+      {title && (
+        <NotificationBannerHeader>{title}</NotificationBannerHeader>
+      )}
       <NotificationBannerContent>
         <NotificationBannerHeading>
           {children}

package/src/feedback/PhaseBanner/index.mdx

@@ -15,19 +15,11 @@ import PhaseBanner from '@digigov/ui/feedback/PhaseBanner';
 
 Your banner must be directly under the blue GOV.GR header and colour bar.
 
-<Story
-  packageName="@digigov/ui"
-  component="feedback/PhaseBanner"
-  story="Default.tsx"
-/>
+<Story packageName="@digigov/ui" component="feedback/PhaseBanner" story="Default.tsx" />
 
 ### Underlined
 
-<Story
-  packageName="@digigov/ui"
-  component="feedback/PhaseBanner"
-  story="Underlined.tsx"
-/>
+<Story packageName="@digigov/ui" component="feedback/PhaseBanner"story="Underlined.tsx" />
 
 ## API
 

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