@digigov/ui 1.0.0-079f34f3d → 1.0.0-21c8c3dc

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

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

@@ -5,44 +5,44 @@ import { LabelTitle } from '@digigov/ui/form/LabelContainer';
 import { TextInput } from '@digigov/ui/form/TextInput';
 
 export const FixedWidths = () => (
-  <>
+  <div>
     <FieldContainer>
       <LabelContainer>
         <LabelTitle size="sm">Πεδίο 20 χαρακτήρων</LabelTitle>
-         <TextInput name="inputext" maxWidth={'20-char'}></TextInput>
+        <TextInput name="inputext" maxWidth={'20-char'}></TextInput>
       </LabelContainer>
     </FieldContainer>
     <FieldContainer>
       <LabelContainer>
         <LabelTitle size="sm">Πεδίο 10 χαρακτήρων</LabelTitle>
-         <TextInput name="inputext" maxWidth={'10-char'}></TextInput>
+        <TextInput name="inputext" maxWidth={'10-char'}></TextInput>
       </LabelContainer>
     </FieldContainer>
     <FieldContainer>
       <LabelContainer>
         <LabelTitle size="sm">Πεδίο 5 χαρακτήρων</LabelTitle>
-         <TextInput name="inputext" maxWidth={'5-char'}></TextInput>
+        <TextInput name="inputext" maxWidth={'5-char'}></TextInput>
       </LabelContainer>
     </FieldContainer>
     <FieldContainer>
       <LabelContainer>
         <LabelTitle size="sm">Πεδίο 4 χαρακτήρων</LabelTitle>
-         <TextInput name="inputext" maxWidth={'4-char'}></TextInput>
+        <TextInput name="inputext" maxWidth={'4-char'}></TextInput>
       </LabelContainer>
     </FieldContainer>
     <FieldContainer>
       <LabelContainer>
         <LabelTitle size="sm">Πεδίο 3 χαρακτήρων</LabelTitle>
-         <TextInput name="inputext" maxWidth={'3-char'}></TextInput>
+        <TextInput name="inputext" maxWidth={'3-char'}></TextInput>
       </LabelContainer>
     </FieldContainer>
     <FieldContainer>
       <LabelContainer>
         <LabelTitle size="sm">Πεδίο 2 χαρακτήρων</LabelTitle>
-         <TextInput name="inputext" maxWidth={'2-char'}></TextInput>
+        <TextInput name="inputext" maxWidth={'2-char'}></TextInput>
       </LabelContainer>
     </FieldContainer>
-  </>
+  </div>
 );
 
 export default FixedWidths;

package/src/form/TextInput/__stories__/FluidWidths.tsx

@@ -5,7 +5,7 @@ import { LabelTitle } from '@digigov/ui/form/LabelContainer';
 import { TextInput } from '@digigov/ui/form/TextInput';
 
 export const FluidWidths = () => (
-  <>
+  <div>
     <FieldContainer>
       <LabelContainer>
         <LabelTitle size="sm">Μέγιστο πλάτος</LabelTitle>
@@ -42,7 +42,7 @@ export const FluidWidths = () => (
         <TextInput name="inputext" width='25%'></TextInput>
       </LabelContainer>
     </FieldContainer>
-  </>
+  </div>
 );
 
 export default FluidWidths;

package/src/govgr/Footer/Copyright.tsx

@@ -23,13 +23,13 @@ export const Copyright: React.FC<CopyrightProps> = ({
   const { t } = useTranslation();
   const copyrightInfo = minDigitalCopyright
     ? {
-        url: 'https://mindigital.gr',
-        label: t('footer.mindigital'),
-      }
+      url: 'https://mindigital.gr',
+      label: t('footer.mindigital'),
+    }
     : {
-        url: 'https://grnet.gr',
-        label: t('footer.grnet'),
-      };
+      url: 'https://grnet.gr',
+      label: t('footer.grnet'),
+    };
 
   return (
     <CopyrightContainer {...props}>
@@ -40,23 +40,23 @@ export const Copyright: React.FC<CopyrightProps> = ({
           {copyright}
           {createdBy || (
             <>
-              {t('footer.created_by')}{' '}
+              {`${t('footer.created_by')} `}
               <Link
                 href={copyrightInfo.url}
                 target="_blank"
                 rel="noopener noreferrer"
               >
-                {copyrightInfo.label}
-              </Link>{' '}
+                {`${copyrightInfo.label}`}
+              </Link>
               {!minDigitalCopyright && (
                 <>
-                  {t('footer.created_for')}{' '}
+                  {` ${t('footer.created_for')} `}
                   <Link
                     href="https://mindigital.gr"
                     target="_blank"
                     rel="noopener noreferrer"
                   >
-                    {t('footer.mindigital')}
+                    {`${t('footer.mindigital')}`}
                   </Link>
                 </>
               )}

package/src/icons/Icon/index.tsx

@@ -1,6 +1,6 @@
-export * from '@digigov/react-core/Icon';
+export * from '@digigov/react-icons/Icon';
 export * from '@digigov/react-icons';
 export * from '@digigov/react-icons/icons';
 
-import Icon from '@digigov/react-core/Icon';
+import Icon from '@digigov/react-icons/Icon';
 export default Icon;

package/src/icons/ImageLogo/index.tsx

@@ -0,0 +1,5 @@
+
+import ImageLogo from '@digigov/react-core/ImageLogo';
+export * from '@digigov/react-core/ImageLogo';
+
+export default ImageLogo;

package/src/icons/ImageLogoSet/index.tsx

@@ -0,0 +1,4 @@
+import ImageLogoSet from '@digigov/react-core/ImageLogoSet';
+export * from '@digigov/react-core/ImageLogoSet';
+
+export default ImageLogoSet;

package/src/layouts/Grid/Grid.stories.js

@@ -5,4 +5,5 @@ export default {
   displayName: 'Grid',
 };
 export * from '@digigov/ui/layouts/Grid/__stories__/Default';
+export * from '@digigov/ui/layouts/Grid/__stories__/ResponsiveSpacing';
 export * from '@digigov/ui/layouts/Grid/__stories__/Inline';

package/src/layouts/Grid/__stories__/ResponsiveSpacing.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import { Card } from '@digigov/ui/content/Card';
+import { Grid } from '@digigov/ui/layouts/Grid';
+
+export const ResponsiveSpacing = () => {
+  return (
+    <>
+      <Grid role="grid" aria-label="grid-example" container spacing={{xs:1, sm:4, md:6, lg:8, xl:12}}>
+        <Grid role="row" xs={12} sm={6} md={4}>
+          <Card variant="border" role="gridcell">
+            1
+          </Card>
+        </Grid>
+        <Grid role="row" xs={12} sm={6} md={4}>
+          <Card variant="border" role="gridcell">
+            1
+          </Card>
+        </Grid>
+        <Grid role="row" xs={12} sm={6} md={4}>
+          <Card variant="border" role="gridcell">
+            1
+          </Card>
+        </Grid>
+        <Grid role="row" xs={12} sm={6} md={4}>
+          <Card variant="border" role="gridcell">
+            1
+          </Card>
+        </Grid>
+        <Grid role="row" xs={12} sm={6} md={4}>
+          <Card variant="border" role="gridcell">
+            1
+          </Card>
+        </Grid>
+        <Grid role="row" xs={12} sm={6} md={4}>
+          <Card variant="border" role="gridcell">
+            1
+          </Card>
+        </Grid>
+      </Grid>
+    </>
+  );
+};
+export default ResponsiveSpacing;

package/src/navigation/Link/index.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 import LinkBase, { LinkBaseProps } from '@digigov/react-core/LinkBase';
 
 export interface LinkComponentContextProps {

package/src/navigation/NavList/NavList.stories.js

@@ -8,4 +8,8 @@ export default {
   displayName: 'NavList',
 };
 export * from '@digigov/ui/navigation/NavList/__stories__/Default';
+export * from '@digigov/ui/navigation/NavList/__stories__/NavVertical';
+export * from '@digigov/ui/navigation/NavList/__stories__/NavVerticalWithTitle';
+export * from '@digigov/ui/navigation/NavList/__stories__/WithSubMenu';
 export * from '@digigov/ui/navigation/NavList/__stories__/NavVerticalLayout';
+export * from '@digigov/ui/navigation/NavList/__stories__/WithBurgerIcon';