@digigov/ui 1.0.0-290a96e2 → 1.0.0-3bfc7d37

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

@@ -11,3 +11,4 @@ export * from '@digigov/ui/feedback/ErrorSummary/__stories__/Default';
 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__/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/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__/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>

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

@@ -4,9 +4,6 @@ import { Button, ButtonGroup } from '@digigov/ui/form/Button';
 
 import { Link } from '@digigov/ui/navigation/Link';
 
-/**
- * My deescrition is the best description that was described
- */
 export const GroupingButtonsAndLinks = () => (
   <ButtonGroup>
     <Button aria-label="Συνεχίστε στην επόμενη σελίδα">Συνέχεια</Button>

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

@@ -1,9 +1,7 @@
 import React from 'react';
+
 import { Button } from '@digigov/ui/form/Button';
 
-/**
- * My primary descrition is the best description that was described
- */
 export const Primary = () => (
   <Button aria-label="Συνεχίστε στην επόμενη σελίδα">Συνέχεια</Button>
 );

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

@@ -1,9 +1,6 @@
 import React from 'react';
 import { Button } from '@digigov/ui/form/Button';
 
-/**
- * My primary descrition is the best description that was described
- */
 export const Secondary = () => (
   <Button color="secondary" aria-label="Συνεχίστε στην επόμενη σελίδα">
     Συνέχεια

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

@@ -1,9 +1,7 @@
 import React from 'react';
+
 import { Button } from '@digigov/ui/form/Button';
 
-/**
- * My primary descrition is the best description that was described
- */
 export const WithVariantLink = () => (
   <Button
     onClick={() => {

package/src/form/Checkbox/__stories__/WithHint.tsx

@@ -13,7 +13,7 @@ import { Hint } from '@digigov/ui/typography/Hint';
 export const WithHint = () => (
   <FieldContainer>
     <Fieldset aria-describedby="nationality-hint">
-      <FieldsetLegend>Ποια είναι η υπηκοότητα σας;</FieldsetLegend>
+      <FieldsetLegend>Ποιά είναι η υπηκοότητα σας;</FieldsetLegend>
       <Hint id="nationality-hint">
         Αν έχετε πολλαπλή υπηκοότητα, επιλέξτε ό,τι ισχύει.
       </Hint>

package/src/form/DateInputContainer/__stories__/Default.tsx

@@ -22,7 +22,7 @@ export const Default = () => (
         <DateInputItem name="day">Ημέρα</DateInputItem>
         <DateInputItem name="month">Μήνας</DateInputItem>
         <DateInputItem width={4} name="year">
-          Χρόνος
+          Έτος
         </DateInputItem>
       </DateInputContainer>
     </Fieldset>

package/src/form/DateInputContainer/__stories__/MultipleQuestions.tsx

@@ -17,14 +17,14 @@ export const MultipleQuestions = () => (
   <FieldContainer aria-describedby='passport-hint'>
     <Fieldset>
       <FieldsetLegend size="md">
-        Πότε εκδόθηκε το διαβατήριο;
+        Πότε εκδόθηκε το διαβατήριό σας;
       </FieldsetLegend>
       <Hint id='passport-hint'>Για παράδειγμα, 05 11 2020</Hint>
       <DateInputContainer>
         <DateInputItem name="day">Ημέρα</DateInputItem>
         <DateInputItem name="month">Μήνας</DateInputItem>
         <DateInputItem width={4} name="year">
-          Χρόνος
+          Έτος
         </DateInputItem>
       </DateInputContainer>
     </Fieldset>

package/src/form/DateInputContainer/__stories__/WithErrorMessage.tsx

@@ -32,7 +32,7 @@ export const WithErrorMessage = () => (
           Μήνας
         </DateInputItem>
         <DateInputItem error width={4} name="year" defaultValue={2043}>
-          Χρόνος
+          Έτος
         </DateInputItem>
       </DateInputContainer>
     </Fieldset>

package/src/form/DateInputContainer/__stories__/WithErrorMessageForSingleField.tsx

@@ -28,7 +28,7 @@ export const WithErrorMessageForSingleField = () => (
         <DateInputItem name="day">Ημέρα</DateInputItem>
         <DateInputItem name="month">Μήνας</DateInputItem>
         <DateInputItem error width={4} name="year" defaultValue={2043}>
-          Χρόνος
+          Έτος
         </DateInputItem>
       </DateInputContainer>
     </Fieldset>

package/src/form/ErrorMessage/ErrorMessage.stories.js

@@ -8,3 +8,5 @@ export default {
   displayName: 'ErrorMessage',
 };
 export * from '@digigov/ui/form/ErrorMessage/__stories__/Default';
+export * from '@digigov/ui/form/ErrorMessage/__stories__/DateInputError';
+export * from '@digigov/ui/form/ErrorMessage/__stories__/ErrorMessageOnly';

package/src/form/ErrorMessage/__stories__/DateInputError.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+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 { Hint } from '@digigov/ui/typography/Hint';
+import { VisuallyHidden } from '@digigov/ui/utils/VisuallyHidden';
+
+export const DateInputError = () => (
+  <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>
+);
+
+export default DateInputError;

package/src/form/ErrorMessage/__stories__/Default.tsx

@@ -16,21 +16,27 @@ export const Default = () => (
   <FieldContainer error>
     <Fieldset aria-describedby="country-hint">
       <FieldsetLegend>
-        Θα ταξιδέψετε σε κάποια από αυτές τις χώρες;
+        Ποιά είναι η εθνικότητα σας;
       </FieldsetLegend>
       <Hint id="country-hint">
         Αν έχετε πολλαπλή υπηκοότητα, επιλέξτε ό,τι ισχύει.
       </Hint>
       <ErrorMessage id="country-error">
         <VisuallyHidden>Λάθος:</VisuallyHidden>
-        Επιλέξτε μία ή παραπάνω χώρες.
+        Επιλέξτε αν η εθνικότητα σας είναι ελληνική, κυπριακή ή κάποιας άλλης χώρας.
       </ErrorMessage>
       <Checkbox aria-describedby="country-error">
-        <CheckboxItem name="cold" value="cold">
-          Αγγλία
+        <CheckboxItem name="greek" value="greek">
+          Ελληνική
+          <Hint>
+            συμπεριλαμβανομένων απόδημων πολιτών
+          </Hint>
         </CheckboxItem>
-        <CheckboxItem name="fever" value="fever">
-          Γαλλία
+        <CheckboxItem name="cypriot" value="cypriot">
+          Κυπριακή
+        </CheckboxItem>
+        <CheckboxItem name="another_country" value="another_country">
+          Άλλη χώρα
         </CheckboxItem>
       </Checkbox>
     </Fieldset>

package/src/form/ErrorMessage/__stories__/ErrorMessageOnly.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+
+import { ErrorMessage } from '@digigov/ui/form/ErrorMessage';
+import { VisuallyHidden } from '@digigov/ui/utils/VisuallyHidden';
+
+export const ErrorMessageOnly = () => (
+  <ErrorMessage id="birth-date-error">
+    <VisuallyHidden>Λάθος:</VisuallyHidden>Η ημερομηνία γέννησης πρέπει να είναι στο παρελθόν.
+  </ErrorMessage>
+);
+
+export default ErrorMessageOnly;

package/src/form/FileUpload/__stories__/Default.tsx

@@ -13,8 +13,8 @@ export const Default = () => (
   <FieldContainer>
     <Fieldset>
       <FieldsetLegend size="md">Λογότυπο επιχείρησης</FieldsetLegend>
-      <Hint id='logo-hint'>Το αρχείο μπορεί να είναι png ή jpeg.</Hint>
-      <FileUpload aria-describedby='logo-hint'>Επιλογή αρχείου</FileUpload>
+      <Hint id="file-hint">Το αρχείο μπορεί να είναι png ή jpeg.</Hint>
+      <FileUpload aria-describedby="file-hint">Επιλογή αρχείου</FileUpload>
     </Fieldset>
   </FieldContainer>
 );

package/src/form/FileUpload/__stories__/WithErrorMessage.tsx

@@ -15,12 +15,12 @@ export const WithErrorMessage = () => (
   <FieldContainer error>
     <Fieldset>
       <FieldsetLegend size="md">Λογότυπο επιχείρησης</FieldsetLegend>
-      <Hint id="business-hint">Το αρχείο μπορεί να είναι png ή jpeg.</Hint>
+      <Hint id="file-hint">Το αρχείο μπορεί να είναι png ή jpeg.</Hint>
       <ErrorMessage>
         <VisuallyHidden>Λάθος:</VisuallyHidden> Το επιλεγμένο αρχείο πρέπει να
         είναι μικρότερο από 2MB.
       </ErrorMessage>
-      <FileUpload aria-describedby="business-hint">Επιλογή αρχείου</FileUpload>
+      <FileUpload aria-describedby="file-hint">Επιλογή αρχείου</FileUpload>
     </Fieldset>
   </FieldContainer>
 );

package/src/form/RadioContainer/RadioContainer.stories.js

@@ -8,6 +8,7 @@ export default {
   displayName: 'RadioContainer',
 };
 export * from '@digigov/ui/form/RadioContainer/__stories__/Default';
+export * from '@digigov/ui/form/RadioContainer/__stories__/WithMediumLegend';
 export * from '@digigov/ui/form/RadioContainer/__stories__/MultipleQuestions';
 export * from '@digigov/ui/form/RadioContainer/__stories__/Inline';
 export * from '@digigov/ui/form/RadioContainer/__stories__/WithHints';

package/src/form/RadioContainer/__stories__/Default.tsx

@@ -10,16 +10,19 @@ import { RadioContainer, RadioItem } from '@digigov/ui/form/RadioContainer';
 export const Default = () => (
   <FieldContainer>
     <Fieldset>
-      <FieldsetLegend>Ποια ειναι η χώρα της διαμονής σας;</FieldsetLegend>
+      <FieldsetLegend>Ποιά είναι η χώρα της διαμονής σας;</FieldsetLegend>
       <RadioContainer>
         <RadioItem name="country" value="greece">
           Ελλάδα
         </RadioItem>
+        <RadioItem name="country" value="cyprus">
+          Κύπρος
+        </RadioItem>
         <RadioItem name="country" value="eu">
-          Χώρα εντός της Ευρωπαϊκής Ένωσης
+          Χώρα της Ευρωπαϊκής Ένωσης
         </RadioItem>
-        <RadioItem name="country" value="world">
-          Χώρα εκτός της Ευρωπαϊκής Ένωσης
+        <RadioItem name="country" value="us">
+          Hνωμένες Πολιτείες της Αμερικής
         </RadioItem>
       </RadioContainer>
     </Fieldset>

package/src/form/RadioContainer/__stories__/InlineWithDivider.tsx

@@ -6,22 +6,22 @@ import {
   FieldsetLegend,
 } from '@digigov/ui/form/FieldContainer';
 import { RadioContainer, RadioItem } from '@digigov/ui/form/RadioContainer';
+import Hint from '@digigov/ui/typography/Hint';
 
-import { Hint } from '@digigov/ui/typography/Hint';
 
 export const InlineWithDivider = () => (
   <FieldContainer>
-    <Fieldset aria-describedby="name-hint">
+    <Fieldset aria-describedby="feeling-hint">
       <FieldsetLegend>Έχετε αλλάξει το όνομα σας;</FieldsetLegend>
       <Hint id="name-hint">
-        Συμπεριλαμβάνεται αλλαγή του επίθετου σας ή αλλαγή του τρόπου που
-        γράφετε το όνομα σας.
+        Συμπεριλαμβάνεται αλλαγή του επιθέτου σας ή αλλαγή του τρόπου που
+        γράφετε το όνομά σας.
       </Hint>
       <RadioContainer layout='horizontal'>
         <RadioItem name="changed_name" value="yes">
           Ναι
         </RadioItem>
-        <RadioItem name="changed_name" value="no" divider='ή'>
+        <RadioItem dividerText='ή' name="changed_name" value="no">
           Όχι
         </RadioItem>
       </RadioContainer>

package/src/form/RadioContainer/__stories__/MultipleQuestions.tsx

@@ -13,7 +13,7 @@ export const MultipleQuestions = () => (
   <FieldContainer>
     <Fieldset aria-describedby="country-hint">
       <FieldsetLegend size="sm">
-        Ποια ειναι η χώρα της διαμονής σας;
+        Ποιά είναι η χώρα της διαμονής σας;
       </FieldsetLegend>
       <Hint id="country-hint">
         Πείτε μας σχετικά με πρόσφατες αλλαγές. Επιλέξτε ό,τι ισχύει.