@digigov/ui 2.0.0-a402a664 → 2.0.0-a64dc016

package/src/form/SingleCharacterInputs/doc.mdx

@@ -7,13 +7,13 @@ title: SingleCharacterInputs
 
 ## How to use
 
-<code src="@digigov/ui/form/SingleCharacterInputs/__stories__/Default.tsx" />
+<code src="@digigov/ui/src/form/SingleCharacterInputs/__stories__/Default.tsx" />
 
 ### Error message
 
 If you’re highlighting all the digits of the password, style the fields like this:
 
-<code src="@digigov/ui/form/SingleCharacterInputs/__stories__/WithDefaultError.tsx" />
+<code src="@digigov/ui/src/form/SingleCharacterInputs/__stories__/WithDefaultError.tsx" />
 
 ## API
 

package/src/form/TextArea/doc.mdx

@@ -7,39 +7,39 @@ title: TextArea
 
 ## How to use
 
-<code src="@digigov/ui/form/TextArea/__stories__/Default.tsx" />
+<code src="@digigov/ui/src/form/TextArea/__stories__/Default.tsx" />
 
 ### Use appropriately-sized textarea inputs
 
-<code src="@digigov/ui/form/TextArea/__stories__/WithDeclaredRows.tsx" />
+<code src="@digigov/ui/src/form/TextArea/__stories__/WithDeclaredRows.tsx" />
 
 ### For multiple questions
 
 If you’re asking more than one question on the page, you can display directly the question's title without using the component `LabelTitle`.
 
-<code src="@digigov/ui/form/TextArea/__stories__/MultipleQuestions.tsx" />
+<code src="@digigov/ui/src/form/TextArea/__stories__/MultipleQuestions.tsx" />
 
 ### Limiting the number of characters
 
 If there’s a good reason to limit the number of characters users can enter, you can use the character count component.
 
-<code src="@digigov/ui/form/TextArea/__stories__/LimitedCharacters.tsx" />
+<code src="@digigov/ui/src/form/TextArea/__stories__/LimitedCharacters.tsx" />
 
 ### Hint text
 
 Use hint text for help that’s relevant to the majority of users, like how their information will be used, or where to find it.
 
-<code src="@digigov/ui/form/TextArea/__stories__/WithHint.tsx" />
+<code src="@digigov/ui/src/form/TextArea/__stories__/WithHint.tsx" />
 
 ### Error message
 
 Error messages should be styled like this:
 
-<code src="@digigov/ui/form/TextArea/__stories__/WithErrorMessage.tsx" />
+<code src="@digigov/ui/src/form/TextArea/__stories__/WithErrorMessage.tsx" />
 
 ### Disabled input
 
-<code src="@digigov/ui/form/TextArea/__stories__/DisabledInput.tsx" />
+<code src="@digigov/ui/src/form/TextArea/__stories__/DisabledInput.tsx" />
 
 ## API
 

package/src/form/TextInput/doc.mdx

@@ -7,13 +7,13 @@ title: TextInput
 
 ## How to use
 
-<code src="@digigov/ui/form/TextInput/__stories__/Default.tsx" />
+<code src="@digigov/ui/src/form/TextInput/__stories__/Default.tsx" />
 
 ### For multiple questions
 
 If you’re asking more than one question on the page, you can display directly the question's title without using the component `LabelTitle`.
 
-<code src="@digigov/ui/form/TextInput/__stories__/MultipleQuestions.tsx" />
+<code src="@digigov/ui/src/form/TextInput/__stories__/MultipleQuestions.tsx" />
 
 ### Fixed width inputs
 
@@ -23,33 +23,33 @@ The widths are designed for specific character lengths and to be consistent acro
 
 On fixed width inputs, the width will remain fixed on all screens unless it is wider than the viewport, in which case it will shrink to fit.
 
-<code src="@digigov/ui/form/TextInput/__stories__/FixedWidths.tsx" />
+<code src="@digigov/ui/src/form/TextInput/__stories__/FixedWidths.tsx" />
 
 ### Fluid width inputs
 
 Fluid width inputs will resize with the viewport.
 
-<code src="@digigov/ui/form/TextInput/__stories__/FluidWidths.tsx" />
+<code src="@digigov/ui/src/form/TextInput/__stories__/FluidWidths.tsx" />
 
 ### Hint text
 
 Use hint text for help that’s relevant to the majority of users, like how their information will be used, or where to find it.
 
-<code src="@digigov/ui/form/TextInput/__stories__/WithHint.tsx" />
+<code src="@digigov/ui/src/form/TextInput/__stories__/WithHint.tsx" />
 
 ### Asking for numbers
 
-<code src="@digigov/ui/form/TextInput/__stories__/AskingForNumbers.tsx" />
+<code src="@digigov/ui/src/form/TextInput/__stories__/AskingForNumbers.tsx" />
 
 ### Error message
 
 Error messages should be styled like this:
 
-<code src="@digigov/ui/form/TextInput/__stories__/WithErrorMessage.tsx" />
+<code src="@digigov/ui/src/form/TextInput/__stories__/WithErrorMessage.tsx" />
 
 ### Disabled input
 
-<code src="@digigov/ui/form/TextInput/__stories__/DisabledInput.tsx" />
+<code src="@digigov/ui/src/form/TextInput/__stories__/DisabledInput.tsx" />
 
 ## API
 

package/src/i18n/locales/el.ts

@@ -35,36 +35,86 @@ export default {
       date: {
         invalid: 'Η ημερομηνία πρέπει να είναι έγκυρη.',
         invalid_month_year:
-          'Η ημερομηνία πρέπει να συμπεριλαμβάνει τον μήνα και το έτος.',
+          'Η ημερομηνία πρέπει να περιλαμβάνει τον μήνα και το έτος.',
         invalid_day_year:
-          'Η ημερομηνία πρέπει να συμπεριλαμβάνει τη μέρα και το έτος.',
+          'Η ημερομηνία πρέπει να περιλαμβάνει την ημέρα και το έτος.',
         invalid_day_month:
-          'Η ημερομηνία πρέπει να συμπεριλαμβάνει τη μέρα και τον μήνα.',
-        invalid_day: 'Η ημερομηνία πρέπει να συμπεριλαμβάνει τη μέρα',
-        invalid_month: 'Η ημερομηνία πρέπει να συμπεριλαμβάνει τον μήνα.',
-        invalid_year: 'Η ημερομηνία πρέπει να συμπεριλαμβάνει το ετος.',
+          'Η ημερομηνία πρέπει να περιλαμβάνει την ημέρα και τον μήνα.',
+        invalid_day: 'Η ημερομηνία πρέπει να περιλαμβάνει την ημέρα.',
+        invalid_month: 'Η ημερομηνία πρέπει να περιλαμβάνει τον μήνα.',
+        invalid_year: 'Η ημερομηνία πρέπει να περιλαμβάνει το ετος.',
         earlier_than: 'Συμπληρώστε μια ημερομηνία προγενέστερη της {{maxDate}}',
         later_than: 'Συμπληρώστε μια ημερομηνία μεταγενέστερη της {{minDate}}',
+        invalid_day_range: 'Η ημέρα πρέπει να είναι μεταξύ 1 και {{maxDay}}.',
+        invalid_month_range: 'Ο μήνας πρέπει να είναι μεταξύ 1 και 12.',
       },
       datetime: {
         invalid: 'Η ημερομηνία και ώρα πρέπει να είναι έγκυρη.',
+        invalid_month_year_hours_minutes:
+          'Η ημερομηνία πρέπει να περιλαμβάνει τον μήνα, το έτος, την ώρα και τα λεπτά.',
+        invalid_day_year_hours_minutes:
+          'Η ημερομηνία πρέπει να περιλαμβάνει την ημέρα, το έτος, την ώρα και τα λεπτά.',
+        invalid_day_month_hours_minutes:
+          'Η ημερομηνία πρέπει να περιλαμβάνει την ημέρα, τον μήνα, την ώρα και τα λεπτά.',
+        invalid_year_hours_minutes:
+          'Η ημερομηνία πρέπει να περιλαμβάνει το έτος, την ώρα και τα λεπτά.',
+        invalid_month_hours_minutes:
+          'Η ημερομηνία πρέπει να περιλαμβάνει τον μήνα, την ώρα και τα λεπτά.',
+        invalid_day_hours_minutes:
+          'Η ημερομηνία πρέπει να περιλαμβάνει την ημέρα, την ώρα και τα λεπτά.',
+        invalid__hours_minutes:
+          'Η ημερομηνία πρέπει να περιλαμβάνει την ώρα και τα λεπτά.',
+        invalid_minutes: 'Η ημερομηνία πρέπει να περιλαμβάνει τα λεπτά.',
+        invalid_hours: 'Η ημερομηνία πρέπει να περιλαμβάνει την ώρα.',
+        invalid_month_year_minutes:
+          'Η ημερομηνία πρέπει να περιλαμβάνει τον μήνα, το έτος και τα λεπτά.',
+        invalid_month_year_hours:
+          'Η ημερομηνία πρέπει να περιλαμβάνει τον μήνα, το έτος και την ώρα.',
         invalid_month_year:
-          'Η ημερομηνία πρέπει να συμπεριλαμβάνει τον μήνα και το έτος.',
+          'Η ημερομηνία πρέπει να περιλαμβάνει τον μήνα και το έτος.',
+        invalid_day_year_minutes:
+          'Η ημερομηνία πρέπει να περιλαμβάνει την ημέρα, το έτος και τα λεπτά.',
+        invalid_day_year_hours:
+          'Η ημερομηνία πρέπει να περιλαμβάνει την ημέρα, το έτος και την ώρα.',
+        invalid_day_month_year:
+          'Η ημερομηνία πρέπει να περιλαμβάνει την ημέρα, τον μήνα και το έτος.',
+        invalid_day_month_year_hours:
+          'Η ημερομηνία πρέπει να περιλαμβάνει την ημέρα, τον μήνα, το έτος και την ώρα.',
         invalid_day_year:
-          'Η ημερομηνία πρέπει να συμπεριλαμβάνει τη μέρα και το έτος.',
+          'Η ημερομηνία πρέπει να περιλαμβάνει την ημέρα και το έτος.',
+        invalid_day_month_minutes:
+          'Η ημερομηνία πρέπει να περιλαμβάνει την ημέρα, τον μήνα και τα λεπτά.',
+        invalid_day_month_hours:
+          'Η ημερομηνία πρέπει να περιλαμβάνει την ημέρα, τον μήνα και την ώρα.',
         invalid_day_month:
-          'Η ημερομηνία πρέπει να συμπεριλαμβάνει τη μέρα και τον μήνα.',
-        invalid_day: 'Η ημερομηνία πρέπει να συμπεριλαμβάνει τη μέρα',
-        invalid_month: 'Η ημερομηνία πρέπει να συμπεριλαμβάνει τον μήνα.',
-        invalid_year: 'Η ημερομηνία πρέπει να συμπεριλαμβάνει το έτος.',
-        invalid_hours: 'Συμπληρώστε έγκυρη ώρα.',
-        invalid_minutes: 'Συμπληρώστε έγκυρα λεπτά.',
+          'Η ημερομηνία πρέπει να περιλαμβάνει την ημέρα και τον μήνα.',
+        invalid_year_minutes:
+          'Η ημερομηνία πρέπει να περιλαμβάνει το έτος και τα λεπτά.',
+        invalid_year_hours:
+          'Η ημερομηνία πρέπει να περιλαμβάνει το έτος και την ώρα.',
+        invalid_year: 'Η ημερομηνία πρέπει να περιλαμβάνει το έτος.',
+        invalid_month_minutes:
+          'Η ημερομηνία πρέπει να περιλαμβάνει τον μήνα και τα λεπτά.',
+        invalid_month_hours:
+          'Η ημερομηνία πρέπει να περιλαμβάνει τον μήνα και την ώρα.',
+        invalid_month: 'Η ημερομηνία πρέπει να περιλαμβάνει τον μήνα.',
+        invalid_day_minutes:
+          'Η ημερομηνία πρέπει να περιλαμβάνει την ημέρα και τα λεπτά.',
+        invalid_day_hours:
+          'Η ημερομηνία πρέπει να περιλαμβάνει την ημέρα και την ώρα.',
+        invalid_day: 'Η ημερομηνία πρέπει να περιλαμβάνει την ημέρα.',
         invalid_hours_range: 'Η ώρα πρέπει να είναι μεταξύ 0 και 23.',
         invalid_minutes_range: 'Τα λεπτά πρέπει να είναι μεταξύ 0 και 59.',
+        invalid_day_range: 'Η ημέρα πρέπει να είναι μεταξύ 1 και {{maxDay}}.',
+        invalid_month_range: 'Ο μήνας πρέπει να είναι μεταξύ 1 και 12.',
+        invalid_day_month_year_minutes:
+          'Η ημερομηννία πρέπει να περιλαμβάνει την ημέρα, τον μήνα και το έτος κ  τα λεπτά.',
+        invalid_hours_minutes:
+          'Η ημερομηνία πρέπει να περιλαμβάνει την ώρα και τα λεπτά.',
         earlier_than:
-          'Συμπληρώστε ημερομηνία και ώρα προγενέστερη της {{maxDateTime}}',
+          'Συμπληρώστε ημερομηνία και ώρα προγενέστερη της {{maxDateTime}}.',
         later_than:
-          'Συμπληρώστε ημερομηνία και ώρα μεταγενέστερη της {{minDateTime}}',
+          'Συμπληρώστε ημερομηνία και ώρα μεταγενέστερη της {{minDateTime}}.',
       },
       otp: {
         invalid: 'Ο κωδικός που έχετε εισάγει είναι λάθος.',
@@ -78,6 +128,10 @@ export default {
         more_than: 'Έχετε υπερβεί το όριο των {{max}} χαρακτήρων.',
         less_than: 'Χρειάζονται τουλάχιστον {{min}} χαρακτήρες.',
       },
+      rate: {
+        rate_percent:
+          'Συμπληρώστε ένα έγκυρο ακέραιο ποσοστό από το {{min}} έως το {{max}}',
+      },
     },
     info: {
       text: {

package/src/i18n/locales/en.ts

@@ -38,21 +38,56 @@ export default {
         invalid_day: 'Date must include day.',
         invalid_month: 'Date must include month.',
         invalid_year: 'Date must include year.',
+        invalid_day_range: 'Day must be between 1 and {{maxDay}}.',
+        invalid_month_range: 'Month must be between 1 and 12.',
       },
       datetime: {
         invalid: 'Date and time must be valid.',
+        invalid_month_year_hours_minutes:
+          'Date must include month, year, hours, and minutes.',
+        invalid_day_year_hours_minutes:
+          'Date must include day, year, hours, and minutes.',
+        invalid_day_month_hours_minutes:
+          'Date must include day, month, hours, and minutes.',
+        invalid_year_hours_minutes:
+          'Date must include year, hours, and minutes.',
+        invalid_month_hours_minutes:
+          'Date must include month, hours, and minutes.',
+        invalid_day_hours_minutes: 'Date must include day, hours, and minutes.',
+        invalid__hours_minutes: 'Time must include hours and minutes.',
+        invalid_minutes: 'Please enter valid minutes.',
+        invalid_hours: 'Please enter valid hours.',
+        invalid_month_year_minutes:
+          'Date must include month, year, and minutes.',
+        invalid_month_year_hours: 'Date must include month, year, and hours.',
         invalid_month_year: 'Date must include month and year.',
+        invalid_day_year_minutes: 'Date must include day, year, and minutes.',
+        invalid_day_year_hours: 'Date must include day, year, and hours.',
+        invalid_day_month_year: 'Date must include day, month, and year.',
+        invalid_day_month_year_hours:
+          'Date must include day, month, year, and hours.',
         invalid_day_year: 'Date must include day and year.',
+        invalid_day_month_minutes: 'Date must include day, month, and minutes.',
+        invalid_day_month_hours: 'Date must include day, month, and hours.',
         invalid_day_month: 'Date must include day and month.',
-        invalid_day: 'Date must include day.',
-        invalid_month: 'Date must include month.',
+        invalid_year_minutes: 'Date must include year and minutes.',
+        invalid_year_hours: 'Date must include year and hours.',
         invalid_year: 'Date must include year.',
-        invalid_hours: 'Please enter valid hours.',
-        invalid_minutes: 'Please enter valid minutes.',
+        invalid_month_minutes: 'Date must include month and minutes.',
+        invalid_month_hours: 'Date must include month and hours.',
+        invalid_month: 'Date must include month.',
+        invalid_day_minutes: 'Date must include day and minutes.',
+        invalid_day_hours: 'Date must include day and hours.',
+        invalid_day: 'Date must include day.',
+        invalid_day_month_year_minutes:
+          'Date must include day, month,year and minutes.',
+        invalid_hours_minutes: 'Date must include hours and minutes.',
         invalid_hours_range: 'Hours must be between 0 and 23.',
         invalid_minutes_range: 'Minutes must be between 0 and 59.',
+        invalid_day_range: 'Day must be between 1 and {{maxDay}}.',
+        invalid_month_range: 'Month must be between 1 and 12.',
         earlier_than: 'The date and time must be earlier than {{maxDateTime}}.',
-        later_than: 'The date and time must be later than {{minDateTime}}',
+        later_than: 'The date and time must be later than {{minDateTime}}.',
       },
       text: {
         more_than: 'You have surpass the {{max}} characters limit.',
@@ -62,6 +97,10 @@ export default {
         image_dimension_size:
           'The dimensions you entered exceed the expected limits. Minimum size ({{minWidth}}x{{minHeight}})px, Maximum Size: ({{maxWidth}}x{{maxHeight}})px',
       },
+      rate: {
+        rate_percent:
+          'Please enter a valid integer percentage between {{min}} and {{max}}',
+      },
     },
     info: {
       text: {

package/src/layouts/Basic/Bottom/doc.mdx

@@ -9,7 +9,7 @@ Use the Bottom component in order to wrap the Footer's components.
 
 ## How to use
 
-<code src="@digigov/ui/layouts/Basic/Bottom/__stories__/Default.tsx" />
+<code src="@digigov/ui/src/layouts/Basic/Bottom/__stories__/Default.tsx" />
 
 ## API
 

package/src/layouts/Basic/Container/doc.mdx

@@ -9,10 +9,10 @@ Container compoment wraps around other elements, grouping them together. Contain
 
 ## How to use
 
-<code src="@digigov/ui/layouts/Basic/Container/__stories__/Default.tsx" />
+<code src="@digigov/ui/src/layouts/Basic/Container/__stories__/Default.tsx" />
 
 ## API
 
 See below for a complete reference to all of the props  available to the components mentioned here.
 
-<ComponentProps componentName={["Container"]} /> 
+<ComponentProps componentName={["Container"]} /> 

package/src/layouts/Basic/Main/doc.mdx

@@ -10,7 +10,7 @@ title: Main
 The Main component is used to include tha main information of the page,
 spanning two-thirds of the page width.
 
-<code src="@digigov/ui/layouts/Basic/Main/__stories__/Default.tsx" />
+<code src="@digigov/ui/src/layouts/Basic/Main/__stories__/Default.tsx" />
 
 ## API
 

package/src/layouts/Basic/Top/doc.mdx

@@ -10,7 +10,7 @@ The Top component is used to group the Header components.
 
 ## How to use
 
-<code src="@digigov/ui/layouts/Basic/Top/__stories__/Default.tsx" />
+<code src="@digigov/ui/src/layouts/Basic/Top/__stories__/Default.tsx" />
 
 ## API
 

package/src/layouts/Basic/doc.mdx

@@ -10,17 +10,15 @@ Content and Bottom components.
 
 ## How to use
 
-### Default layout
-
-<code src="@digigov/ui/layouts/Basic/__stories__/Default.tsx" />
+<code src="@digigov/ui/src/layouts/Basic/__stories__/Default.tsx" />
 
 ### Two thirds one third columns layout
 
-<code src="@digigov/ui/layouts/Basic/__stories__/TwoThirdsOneThirdColumns.tsx" />
+<code src="@digigov/ui/src/layouts/Basic/__stories__/TwoThirdsOneThirdColumns.tsx" />
 
 ### Multiple rows layout
 
-<code src="@digigov/ui/layouts/Basic/__stories__/MultipleRowsLayout.tsx" />
+<code src="@digigov/ui/src/layouts/Basic/__stories__/MultipleRowsLayout.tsx" />
 
 ## API
 

package/src/layouts/Grid/Grid.stories.jsx

@@ -0,0 +1,143 @@
+import React from 'react';
+import Grid from '@digigov/ui/layouts/Grid';
+import doc from './doc.mdx?raw';
+
+export default {
+  title: 'Digigov UI/layouts/Grid',
+  component: Grid,
+  tags: ['autodocs'],
+  markdown: doc,
+  displayName: 'Grid',
+};
+
+export const WithControls = {
+  render: (args) => {
+    return (
+      <Grid
+        role="grid"
+        aria-label="grid-example"
+        container
+        spacing={args.spacing}
+        inline={args.inline}
+      >
+        <Grid
+          role="row"
+          xs={args.xs}
+          sm={args.sm}
+          md={args.md}
+          lg={args.lg}
+          xl={args.xl}
+        >
+          grid item no.1
+        </Grid>
+        <Grid
+          role="row"
+          xs={args.xs}
+          sm={args.sm}
+          md={args.md}
+          lg={args.lg}
+          xl={args.xl}
+        >
+          grid item no.2
+        </Grid>
+        <Grid
+          role="row"
+          xs={args.xs}
+          sm={args.sm}
+          md={args.md}
+          lg={args.lg}
+          xl={args.xl}
+        >
+          grid item no.3
+        </Grid>
+        <Grid
+          role="row"
+          xs={args.xs}
+          sm={args.sm}
+          md={args.md}
+          lg={args.lg}
+          xl={args.xl}
+        >
+          grid item no.4
+        </Grid>
+        <Grid
+          role="row"
+          xs={args.xs}
+          sm={args.sm}
+          md={args.md}
+          lg={args.lg}
+          xl={args.xl}
+        >
+          grid item no.5
+        </Grid>
+        <Grid
+          role="row"
+          xs={args.xs}
+          sm={args.sm}
+          md={args.md}
+          lg={args.lg}
+          xl={args.xl}
+        >
+          grid item no.6
+        </Grid>
+      </Grid>
+    );
+  },
+  args: {
+    inline: false,
+    spacing: 4,
+    xs: 12,
+    sm: 6,
+    md: 4,
+    lg: 3,
+    xl: 2,
+  },
+  argsTypes: {
+    inline: {
+      control: 'boolean',
+    },
+    spacing: {
+      control: {
+        type: 'select',
+      },
+      options: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
+    },
+    xs: {
+      control: {
+        type: 'select',
+      },
+      options: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
+    },
+    sm: {
+      control: {
+        type: 'select',
+      },
+      options: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
+    },
+    md: {
+      control: {
+        type: 'select',
+      },
+      options: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
+    },
+    lg: {
+      control: {
+        type: 'select',
+      },
+      options: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
+    },
+    xl: {
+      control: {
+        type: 'select',
+      },
+      options: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
+    },
+  },
+  parameters: {
+    controls: { exclude: ['ref'] },
+  },
+};
+
+export { Default } from '@digigov/ui/layouts/Grid/__stories__/Default';
+export { ResponsiveSpacing } from '@digigov/ui/layouts/Grid/__stories__/ResponsiveSpacing';
+export { Inline } from '@digigov/ui/layouts/Grid/__stories__/Inline';

package/src/layouts/Grid/doc.mdx

@@ -9,18 +9,18 @@ title: Grid
 
 Grid component is a  layout system that allows you to design complex web page layouts with rows and columns.
 
-<code src="@digigov/ui/layouts/Grid/__stories__/Default.tsx" />
+<code src="@digigov/ui/src/layouts/Grid/__stories__/Default.tsx" />
 
 ### Responsive spacing Grid
 
-<code src="@digigov/ui/layouts/Grid/__stories__/ResponsiveSpacing.tsx" />
+<code src="@digigov/ui/src/layouts/Grid/__stories__/ResponsiveSpacing.tsx" />
 
 ### Inline Grid
 
-<code src="@digigov/ui/layouts/Grid/__stories__/Inline.tsx" />
+<code src="@digigov/ui/src/layouts/Grid/__stories__/Inline.tsx" />
 
 ## API
 
 See below for a complete reference to all of the props  available to the components mentioned here.
 
-<ComponentProps componentName={["Grid"]} /> 
+<ComponentProps componentName={["Grid"]} /> 

package/src/layouts/Hidden/Hidden.stories.jsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import Hidden from '@digigov/ui/layouts/Hidden';
+
+export default {
+  title: 'Digigov UI/layouts/Hidden',
+  component: Hidden,
+  displayName: 'Hidden',
+};
+
+export const WithControls = {
+  args: {
+    children: 'Περιεχόμενο μέσα σε Hidden.',
+    xsUpHidden: false,
+    smUpHidden: false,
+    mdUpHidden: false,
+    lgUpHidden: false,
+    xlUpHidden: false,
+    xsHidden: false,
+    smHidden: false,
+    mdHidden: false,
+    lgHidden: false,
+    xlHidden: false,
+  },
+  argTypes: {
+    children: {
+      control: { type: 'text' },
+    },
+    xsUpHidden: {
+      control: { type: 'boolean' },
+    },
+    smUpHidden: {
+      control: { type: 'boolean' },
+    },
+    mdUpHidden: {
+      control: { type: 'boolean' },
+    },
+    lgUpHidden: {
+      control: { type: 'boolean' },
+    },
+    xlUpHidden: {
+      control: { type: 'boolean' },
+    },
+    xsHidden: {
+      control: { type: 'boolean' },
+    },
+    smHidden: {
+      control: { type: 'boolean' },
+    },
+    mdHidden: {
+      control: { type: 'boolean' },
+    },
+    lgHidden: {
+      control: { type: 'boolean' },
+    },
+    xlHidden: {
+      control: { type: 'boolean' },
+    },
+  },
+  parameters: {
+    controls: { exclude: ['ref'] },
+  },
+};

package/src/layouts/Hidden/index.tsx

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