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

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/Button/index.mdx

@@ -55,7 +55,7 @@ Any links within a button group will automatically align with the buttons.
 <Story packageName="@digigov/ui" component="form/Button" story="GroupingButtonsAndLinks.tsx" />
 
 Write button text in sentence case, describing the action it performs. For
-example:'
+example:
 
 - `Start now` at the [start of the service](https://guide.services.gov.gr/docs/start-pages)
 - `Sign in` to an account a user has already created
@@ -85,12 +85,12 @@ to do next.
 
 ## API Docs
 
-Read more about [how to use the React types](/docs/api/Button)
+Read more about [how to use the React types](/docs/api/Button).
 
 ## Accessibility
 
-You can read more about the accessibility patterns used in our Select
-implementation in the ARIA Authoring Practices Guide (APG) at
+You can read more about the accessibility patterns used in our Button
+implementation in the ARIA Authoring Practices Guide (APG) at [button](https://www.w3.org/WAI/ARIA/apg/patterns/button/) section.
 
 ## API
 

package/src/form/Checkbox/Checkbox.stories.js

@@ -16,3 +16,4 @@ export * from '@digigov/ui/form/Checkbox/__stories__/NoneAnswer';
 export * from '@digigov/ui/form/Checkbox/__stories__/NoneAnswerWithError';
 export * from '@digigov/ui/form/Checkbox/__stories__/WithErrorMessage';
 export * from '@digigov/ui/form/Checkbox/__stories__/ConditionalReveal';
+export * from '@digigov/ui/form/Checkbox/__stories__/Dense';

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

@@ -0,0 +1,35 @@
+import React from 'react';
+
+import { Checkbox, CheckboxItem } from '@digigov/ui/form/Checkbox';
+
+import {
+  FieldContainer,
+  Fieldset,
+  FieldsetLegend,
+} from '@digigov/ui/form/FieldContainer';
+
+import { Hint } from '@digigov/ui/typography/Hint';
+
+export const Dense = () => (
+  <FieldContainer>
+    <Fieldset aria-describedby="feeling-hint">
+      <FieldsetLegend>Πώς αισθάνεται αυτή τη στιγμή;</FieldsetLegend>
+      <Hint id="feeling-hint">
+        Πείτε μας σχετικά με πρόσφατες αλλαγές. Επιλέξτε ό,τι ισχύει.
+      </Hint>
+      <Checkbox dense>
+        <CheckboxItem name="feeling" value="cold">
+          Έχω συνάχι
+        </CheckboxItem>
+        <CheckboxItem name="feeling" value="fever">
+          Έχω πυρετό
+        </CheckboxItem>
+        <CheckboxItem name="feeling" value="fatigue">
+          Αισθάνομαι κούραση
+        </CheckboxItem>
+      </Checkbox>
+    </Fieldset>
+  </FieldContainer>
+);
+
+export default Dense;

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/Checkbox/index.mdx

@@ -47,6 +47,11 @@ This might make 2 related questions easier to answer by grouping them on the sam
 
 <Story packageName="@digigov/ui" component="form/Checkbox" story="ConditionalReveal.tsx" />
 
+## Accessibility
+
+You can read more about the accessibility patterns used in our Checkbox
+implementation in the ARIA Authoring Practices Guide (APG) at [Checkbox](https://www.w3.org/WAI/ARIA/apg/patterns/checkbox/) section.
+
 ## API
 
 <PropTypes packageName="@digigov/ui" component="Checkbox" />

package/src/form/DateInputContainer/DateInputContainer.stories.js

@@ -11,3 +11,4 @@ export * from '@digigov/ui/form/DateInputContainer/__stories__/Default';
 export * from '@digigov/ui/form/DateInputContainer/__stories__/MultipleQuestions';
 export * from '@digigov/ui/form/DateInputContainer/__stories__/WithErrorMessage';
 export * from '@digigov/ui/form/DateInputContainer/__stories__/WithErrorMessageForSingleField';
+export * from '@digigov/ui/form/DateInputContainer/__stories__/Dense';

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

@@ -0,0 +1,31 @@
+import React from 'react';
+
+import {
+  DateInputContainer,
+  DateInputItem,
+} from '@digigov/ui/form/DateInputContainer';
+import {
+  FieldContainer,
+  Fieldset,
+  FieldsetLegend,
+} from '@digigov/ui/form/FieldContainer';
+
+
+export const Dense = () => (
+  <FieldContainer aria-describedby='passport-hint'>
+    <Fieldset>
+      <FieldsetLegend size="md">
+        Πότε εκδόθηκε το διαβατήριό σας;
+      </FieldsetLegend>
+      <DateInputContainer dense>
+        <DateInputItem name="day">Ημέρα</DateInputItem>
+        <DateInputItem name="month">Μήνας</DateInputItem>
+        <DateInputItem width={4} name="year">
+          Έτος
+        </DateInputItem>
+      </DateInputContainer>
+    </Fieldset>
+  </FieldContainer>
+);
+
+export default Dense;

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/DateInputContainer/index.mdx

@@ -26,3 +26,8 @@ If you’re highlighting the whole date, style all the fields like this:
 If you’re highlighting just one field - either the day, month or year - only style the field that has an error. The error message must say which field has an error, like this:
 
 <Story packageName="@digigov/ui" component="form/DateInputContainer"story="WithErrorMessageForSingleField.tsx" />
+
+
+## API
+
+<PropTypes packageName="@digigov/ui" component="DateInputContainer" />

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/FileUpload/index.mdx

@@ -17,6 +17,8 @@ import FileUpload from '@digigov/ui/form/FileUpload';
 
 Error messages should be styled like this:
 
+<Story packageName="@digigov/ui" component="form/FileUpload" story="WithErrorMessage.tsx" />
+
 ## API
 
 <PropTypes packageName="@digigov/ui" component="FileUpload" />

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';
@@ -15,3 +16,4 @@ export * from '@digigov/ui/form/RadioContainer/__stories__/NoneAnswer';
 export * from '@digigov/ui/form/RadioContainer/__stories__/WithErrorMessage';
 export * from '@digigov/ui/form/RadioContainer/__stories__/ConditionalReveal';
 export * from '@digigov/ui/form/RadioContainer/__stories__/InlineWithDivider';
+export * from '@digigov/ui/form/RadioContainer/__stories__/Dense';

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

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

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">
         Πείτε μας σχετικά με πρόσφατες αλλαγές. Επιλέξτε ό,τι ισχύει.

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

@@ -9,8 +9,8 @@ import { RadioContainer, RadioItem } from '@digigov/ui/form/RadioContainer';
 
 export const NoneAnswer = () => (
   <FieldContainer>
-    <Fieldset>
-      <FieldsetLegend>Πόσα παιδιά έχετε;</FieldsetLegend>
+    <Fieldset aria-describedby="name-hint">
+      <FieldsetLegend size='md'>Πόσα παιδιά έχετε;</FieldsetLegend>
       <RadioContainer>
         <RadioItem name="children" value="onetwo">
           1-2 παιδιά
@@ -18,7 +18,7 @@ export const NoneAnswer = () => (
         <RadioItem name="children" value="threefour">
           3 ή περισσότερα παιδιά
         </RadioItem>
-        <RadioItem divider="ή" name="children" value="none">
+        <RadioItem dividerText="ή" name="children" value="none">
           Κανένα παιδί
         </RadioItem>
       </RadioContainer>

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

@@ -14,7 +14,7 @@ import { VisuallyHidden } from '@digigov/ui/utils/VisuallyHidden';
 export const WithErrorMessage = () => (
   <FieldContainer error>
     <Fieldset aria-describedby="travel-hint travel-error">
-      <FieldsetLegend>
+      <FieldsetLegend size='md'>
         Θα ταξιδέψετε σε κάποια από αυτές τις χώρες;
       </FieldsetLegend>
       <Hint id="travel-hint">Μπορείτε να επιλέξετε μόνο μία επιλογή.</Hint>

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

@@ -14,7 +14,7 @@ export const WithHints = () => (
     <Fieldset aria-describedby="login-hint">
       <FieldsetLegend size="md">Πώς θέλετε να συνδεθείτε;</FieldsetLegend>
       <Hint id="login-hint">
-        Θα χρειαστείτε έναν λογαριασμό με τον οποίο θα αποδείξετε την ταύτοτητα
+        Θα χρειαστείτε έναν λογαριασμό με τον οποίο θα αποδείξετε την ταυτότητά
         σας ώστε να προχωρήσετε.
       </Hint>
       <RadioContainer>

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

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

package/src/form/RadioContainer/index.mdx

@@ -48,6 +48,11 @@ Error messages should be styled like this:
 
 <Story packageName="@digigov/ui" component="form/RadioContainer" story="WithErrorMessage.tsx" />
 
+## Accessibility
+
+You can read more about the accessibility patterns used in our Radio
+implementation in the ARIA Authoring Practices Guide (APG) at [Radio](https://www.w3.org/WAI/ARIA/apg/patterns/radio/) section.
+
 ## API
 
 ### RadioContainer

package/src/form/SelectContainer/{Select.stories.js → SelectContainer.stories.js}

@@ -10,3 +10,4 @@ export default {
 export * from '@digigov/ui/form/SelectContainer/__stories__/Default';
 export * from '@digigov/ui/form/SelectContainer/__stories__/DisabledInput';
 export * from '@digigov/ui/form/SelectContainer/__stories__/WithHint';
+export * from '@digigov/ui/form/SelectContainer/__stories__/Dense';

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

@@ -0,0 +1,24 @@
+import React from 'react';
+
+import { FieldContainer } from '@digigov/ui/form/FieldContainer';
+import { LabelContainer } from '@digigov/ui/form/LabelContainer';
+import {
+  SelectContainer,
+  SelectOption,
+} from '@digigov/ui/form/SelectContainer';
+
+export const Dense = () => (
+  <FieldContainer>
+    <LabelContainer>
+      Ταξινόμηση
+      <SelectContainer dense name="select-list" aria-label="ταξινόμηση">
+        <SelectOption value="popular">Δημοφιλή</SelectOption>
+        <SelectOption value="recent">Πρόσφατα</SelectOption>
+        <SelectOption value="views">Περισσότερες προβολές</SelectOption>
+        <SelectOption value="comments">Περισσότερα σχόλια</SelectOption>
+      </SelectContainer>
+    </LabelContainer>
+  </FieldContainer>
+);
+
+export default Dense;

package/src/form/SelectContainer/index.mdx

@@ -25,6 +25,12 @@ Error messages should be styled like this:
 
 <Story packageName="@digigov/ui" component="form/SelectContainer" story="DisabledInput.tsx" />
 
+## Accessibility
+
 You can read more about the accessibility patterns used in our SelectContainer
 implementation in the ARIA Authoring Practices Guide (APG) at
 [Combobox](https://www.w3.org/WAI/ARIA/apg/patterns/combobox/) section.
+
+## API
+
+<PropTypes packageName="@digigov/ui" component="SelectContainer" />

package/src/form/TextArea/TextArea.stories.js

@@ -14,3 +14,4 @@ export * from '@digigov/ui/form/TextArea/__stories__/MultipleQuestions';
 export * from '@digigov/ui/form/TextArea/__stories__/LimitedCharacters';
 export * from '@digigov/ui/form/TextArea/__stories__/WithErrorMessage';
 export * from '@digigov/ui/form/TextArea/__stories__/DisabledInput';
+export * from '@digigov/ui/form/TextArea/__stories__/Dense';

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

@@ -0,0 +1,15 @@
+import React from 'react';
+import { FieldContainer } from '@digigov/ui/form/FieldContainer';
+import { LabelContainer } from '@digigov/ui/form/LabelContainer';
+import { TextArea } from '@digigov/ui/form/TextArea';
+
+export const Dense = () => (
+  <FieldContainer>
+    <LabelContainer>
+        Μπορείτε να δώσετε περισσότερες πληροφορίες;
+      <TextArea dense name="textarea"></TextArea>
+    </LabelContainer>
+  </FieldContainer>
+);
+
+export default Dense;