@digigov/ui 1.2.0-a7ffb5dc → 2.0.0-4be8f7cc

package/cjs/form/AutoComplete/index.mdx

@@ -8,19 +8,9 @@ through, select from large collections of options and help services get more con
 
 ## Usage
 
-### How to import
-
-```bash
-import AutoComplete from '@digigov/ui/form/AutoComplete';
-```
-
 ### AutoComplete
 
-<Story
-  packageName="@digigov/ui"
-  component="form/AutoComplete"
-  story="Default.tsx"
-/>
+<Story packageName="@digigov/ui" component="form/AutoComplete" story="Default.tsx" />
 
 ### AutoComplete with auto select
 
@@ -30,14 +20,6 @@ import AutoComplete from '@digigov/ui/form/AutoComplete';
   story="WithAutoSelect.tsx"
 />
 
-### AutoComplete with inline style
-
-<Story
-  packageName="@digigov/ui"
-  component="form/AutoComplete"
-  story="WithInLine.tsx"
-/>
-
 ### AutoComplete with default value
 
 <Story
@@ -74,4 +56,15 @@ This is the minimum number of characters that should be entered before the autoc
 
 ## API
 
-<PropTypes packageName="@digigov/ui" component="AutoComplete" />
+See below for a complete reference to all of the props  available to the components mentioned here.
+
+<ComponentProps componentName={
+  ["AutoCompleteWrapper",
+  "AutoCompleteStatus",
+  "AutoCompleteStatusWrapper",
+  "AutoCompleteInputTypeahead",
+  "AutoCompleteInput",
+  "AutoCompleteResultList",
+  "AutoCompleteResultListItem",
+  "AutoCompleteAssistiveHint"
+  ]} /> 

package/cjs/form/AutoComplete/utils/index.js

@@ -12,7 +12,8 @@ var keyCodes = exports.keyCodes = {
   27: 'escape',
   32: 'space',
   38: 'up',
-  40: 'down'
+  40: 'down',
+  8: 'backspace'
 };
 function isIosDevice() {
   return typeof navigator !== 'undefined' && !!(navigator.userAgent.match(/(iPod|iPhone|iPad)/g) && navigator.userAgent.match(/AppleWebKit/g));

package/cjs/form/Button/index.mdx

@@ -8,10 +8,6 @@ title: Button
 Use the button component to help users carry out an action like starting an
 application or saving their information.
 
-```bash
-import Button from '@digigov/ui/form/Button';
-```
-
 ## How to use
 
 ### Default buttons
@@ -110,4 +106,6 @@ implementation in the ARIA Authoring Practices Guide (APG) at [button](https://w
 
 ## API
 
-<PropTypes packageName="@digigov/ui" component="Button" />
+See below for a complete reference to all of the props  available to the components mentioned here.
+
+<ComponentProps componentName={["Button","ButtonLink","CallToAction","ButtonGroup"]} /> 

package/cjs/form/Checkbox/index.mdx

@@ -5,10 +5,6 @@ title: Checkbox
 
 # Checkbox
 
-```bash
-import Checkbox from '@digigov/ui/form/Checkbox';
-```
-
 ## How to use
 
 <Story
@@ -82,4 +78,6 @@ implementation in the ARIA Authoring Practices Guide (APG) at [Checkbox](https:/
 
 ## API
 
-<PropTypes packageName="@digigov/ui" component="Checkbox" />
+See below for a complete reference to all of the props  available to the components mentioned here.
+
+<ComponentProps componentName={["Checkbox","CheckboxItem"]} /> 

package/cjs/form/DateInputContainer/index.mdx

@@ -5,10 +5,6 @@ title: DateInputContainer
 
 # DateInputContainer
 
-```bash
-import DateInputContainer from '@digigov/ui/form/DateInputContainer';
-```
-
 ## How to use
 
 <Story
@@ -45,4 +41,6 @@ If you’re highlighting just one field - either the day, month or year - only s
 
 ## API
 
-<PropTypes packageName="@digigov/ui" component="DateInputContainer" />
+See below for a complete reference to all of the props  available to the components mentioned here.
+
+<ComponentProps componentName={["DateInputContainer","DateInputItem"]} /> 

package/cjs/form/ErrorMessage/index.mdx

@@ -8,10 +8,6 @@ title: ErrorMessage
 Follow the validation pattern and show an error message when there is a validation error.
 In the error message explain what went wrong and how to fix it.
 
-```bash
-import ErrorMessage from '@digigov/ui/form/ErrorMessage';
-```
-
 ## How to use
 
 <Story
@@ -22,4 +18,6 @@ import ErrorMessage from '@digigov/ui/form/ErrorMessage';
 
 ## API
 
-<PropTypes packageName="@digigov/ui" component="ErrorMessage" />
+See below for a complete reference to all of the props  available to the components mentioned here.
+
+<ComponentProps componentName={["ErrorMessage"]} /> 

package/cjs/form/FileUpload/index.mdx

@@ -5,10 +5,6 @@ title: FileUpload
 
 # FileUpload
 
-```bash
-import FileUpload from '@digigov/ui/form/FileUpload';
-```
-
 ## How to use
 
 <Story
@@ -29,4 +25,6 @@ Error messages should be styled like this:
 
 ## API
 
-<PropTypes packageName="@digigov/ui" component="FileUpload" />
+See below for a complete reference to all of the props  available to the components mentioned here.
+
+<ComponentProps componentName={["FileUpload", "FileUploadContainer"]} /> 

package/cjs/form/RadioContainer/index.mdx

@@ -5,10 +5,6 @@ title: RadioContainer
 
 # RadioContainer
 
-```bash
-import RadioContainer from '@digigov/ui/form/RadioContainer';
-```
-
 ## How to use
 
 <Story
@@ -83,14 +79,6 @@ implementation in the ARIA Authoring Practices Guide (APG) at [Radio](https://ww
 
 ## API
 
-### RadioContainer
-
-<PropTypes packageName="@digigov/ui" component="RadioContainer" />
-
-### RadioConditional
-
-<PropTypes packageName="@digigov/ui" component="RadioConditional" />
-
-### RadioItem
+See below for a complete reference to all of the props  available to the components mentioned here.
 
-<PropTypes packageName="@digigov/ui" component="RadioItem" />
+<ComponentProps componentName={["RadioItem","RadioContainer","RadioConditional","ChoiceDividerText"]} /> 

package/cjs/form/SelectContainer/index.mdx

@@ -45,4 +45,6 @@ implementation in the ARIA Authoring Practices Guide (APG) at
 
 ## API
 
-<PropTypes packageName="@digigov/ui" component="SelectContainer" />
+See below for a complete reference to all of the props  available to the components mentioned here.
+
+<ComponentProps componentName={["SelectContainer","SelectOption"]} /> 

package/cjs/form/SingleCharacterInputs/index.mdx

@@ -5,10 +5,6 @@ title: SingleCharacterInputs
 
 # SingleCharacterInput
 
-```bash
-import SingleCharacterInputs from '@digigov/ui/form/SingleCharacterInputs';
-```
-
 ## How to use
 
 <Story
@@ -29,4 +25,6 @@ If you’re highlighting the whole date, style all the fields like this:
 
 ## API
 
-<PropTypes packageName="@digigov/ui" component="SingleCharacterInputs" />
+See below for a complete reference to all of the props  available to the components mentioned here.
+
+<ComponentProps componentName={["SingleCharacterInputs","SingleCharacterInput"]} /> 

package/cjs/form/TextArea/index.mdx

@@ -5,10 +5,6 @@ title: TextArea
 
 # TextArea
 
-```bash
-import TextArea from '@digigov/ui/form/TextArea';
-```
-
 ## How to use
 
 <Story
@@ -73,4 +69,6 @@ Error messages should be styled like this:
 
 ## API
 
-<PropTypes packageName="@digigov/ui" component="TextArea" />
+See below for a complete reference to all of the props  available to the components mentioned here.
+
+<ComponentProps componentName={["TextArea"]} /> 

package/cjs/form/TextInput/TextInput.stories/index.js

@@ -103,6 +103,18 @@ Object.keys(_DisabledInput).forEach(function (key) {
     }
   });
 });
+var _DisabledInputWithValue = require("@digigov/ui/form/TextInput/__stories__/DisabledInputWithValue");
+Object.keys(_DisabledInputWithValue).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _DisabledInputWithValue[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _DisabledInputWithValue[key];
+    }
+  });
+});
 var _Dense = require("@digigov/ui/form/TextInput/__stories__/Dense");
 Object.keys(_Dense).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/cjs/form/TextInput/__stories__/DisabledInputWithValue/index.js

@@ -0,0 +1,31 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.DisabledInputWithValue = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _FieldContainer = require("@digigov/ui/form/FieldContainer");
+var _LabelContainer = require("@digigov/ui/form/LabelContainer");
+var _TextInput = require("@digigov/ui/form/TextInput");
+var _Hint = require("@digigov/ui/typography/Hint");
+var _reactIcons = require("@digigov/react-icons");
+var _ref = /*#__PURE__*/_react["default"].createElement(_FieldContainer.FieldContainer, null, /*#__PURE__*/_react["default"].createElement(_LabelContainer.LabelContainer, null, /*#__PURE__*/_react["default"].createElement(_LabelContainer.LabelTitle, {
+  size: "md"
+}, "\u038C\u03BD\u03BF\u03BC\u03B1"), /*#__PURE__*/_react["default"].createElement(_TextInput.TextInput, {
+  "aria-describedby": "input-hint",
+  name: "inputext",
+  value: 'Μάριος',
+  disabled: true
+}), /*#__PURE__*/_react["default"].createElement(_Hint.Hint, {
+  id: "input-hint",
+  size: "sm"
+}, /*#__PURE__*/_react["default"].createElement(_reactIcons.LockIcon, {
+  mr: 1,
+  mb: 1
+}), "\u03A0\u03B5\u03B4\u03AF\u03BF \u03BC\u03CC\u03BD\u03BF \u03B3\u03B9\u03B1 \u03C0\u03C1\u03BF\u03B2\u03BF\u03BB\u03AE")));
+var DisabledInputWithValue = exports.DisabledInputWithValue = function DisabledInputWithValue() {
+  return _ref;
+};
+var _default = exports["default"] = DisabledInputWithValue;

package/cjs/form/TextInput/index.mdx

@@ -5,10 +5,6 @@ title: TextInput
 
 # TextInput
 
-```bash
-import TextInput from '@digigov/ui/form/TextInput';
-```
-
 ## How to use
 
 <Story
@@ -89,4 +85,6 @@ Error messages should be styled like this:
 
 ## API
 
-<PropTypes packageName="@digigov/ui" component="TextInput" />
+See below for a complete reference to all of the props  available to the components mentioned here.
+
+<ComponentProps componentName={["TextInput"]} /> 

package/cjs/govgr/Footer/index.mdx

@@ -98,4 +98,4 @@ import { Feedback } from '@digigov/ui/govgr/Footer';
 
 ## API
 
-<PropTypes packageName="@digigov/ui" component="Footer" />
+See below for a complete reference to all of the props  available to the components mentioned here.

package/cjs/i18n/locales/el/index.js

@@ -18,8 +18,8 @@ var _default = exports["default"] = {
       string: 'Το πεδίο πρέπει να είναι string',
       email: 'Συμπληρώστε μια έγκυρη ηλεκτρονική διεύθυνση (e-mail).',
       afm: 'Ο Α.Φ.Μ που πληκτρολογήσατε είναι λανθασμένος.',
-      file_size: 'Το μέγεθος του αρχείου είναι μεγαλύτερο απο το επιτρεπόμενο.',
-      image_size: 'Το μέγεθος της φωτογραφίας είναι μεγαλύτερο απο το επιτρεπόμενο.',
+      file_size: 'Το μέγεθος του αρχείου είναι μεγαλύτερο απο το επιτρεπόμενο ({{maxSizeToMb}}Mb).',
+      image_size: 'Το μέγεθος της φωτογραφίας είναι μεγαλύτερο απο το επιτρεπόμενο ({{maxSizeToMb}}Mb).',
       mobile_phone: 'Συμπληρώστε έναν έγκυρο αριθμό κινητού τηλεφώνου.',
       phone_number: 'Συμπληρώστε έναν έγκυρο αριθμό τηλεφώνου.',
       landline: 'Συμπληρώστε έναν έγκυρο αριθμό σταθερού τηλεφώνου.',

package/cjs/i18n/locales/en/index.js

@@ -18,8 +18,8 @@ var _default = exports["default"] = {
       string: 'This field must be a string',
       email: 'Please enter a valid email address (e-mail).',
       afm: 'The VAT number you entered is incorrect.',
-      file_size: 'File size is larger than allowed.',
-      image_size: 'Image size is larger than allowed.',
+      file_size: 'File size is larger than allowed ({{maxSizeToMb}}Mb).',
+      image_size: 'Image size is larger than allowed ({{maxSizeToMb}}Mb).',
       mobile_phone: 'Fill in a valid mobile phone number.',
       landline: 'Fill in a valid landline phone number.',
       phone_number: 'Fill in a valid phone number.',

package/cjs/layouts/Basic/Bottom/__stories__/Default/index.js

@@ -0,0 +1,22 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _Footer = require("@digigov/ui/govgr/Footer");
+var _Basic = require("@digigov/ui/layouts/Basic");
+var _Container = require("@digigov/ui/layouts/Basic/Container");
+var _Main = require("@digigov/ui/layouts/Basic/Main");
+var _typography = require("@digigov/ui/typography");
+var _Header = _interopRequireDefault(require("@digigov/ui/app/Header"));
+var _GovGRLogo = _interopRequireDefault(require("@digigov/ui/govgr/GovGRLogo"));
+var _Top = _interopRequireDefault(require("@digigov/ui/layouts/Basic/Top"));
+var _Bottom = _interopRequireDefault(require("@digigov/ui/layouts/Basic/Bottom"));
+var _ref = /*#__PURE__*/_react["default"].createElement(_Basic.Layout, null, /*#__PURE__*/_react["default"].createElement(_Top["default"], null, /*#__PURE__*/_react["default"].createElement(_Header["default"], null, /*#__PURE__*/_react["default"].createElement(_GovGRLogo["default"], null))), /*#__PURE__*/_react["default"].createElement(_Container.Container, null, /*#__PURE__*/_react["default"].createElement(_Main.Main, null, /*#__PURE__*/_react["default"].createElement(_typography.Heading, null, "\u03A4\u03AF\u03C4\u03BB\u03BF\u03C2 \u03C3\u03B5\u03BB\u03AF\u03B4\u03B1\u03C2"), /*#__PURE__*/_react["default"].createElement(_typography.Paragraph, null, "\u03A3\u03B5 \u03B1\u03C5\u03C4\u03CC \u03C4\u03BF \u03C0\u03B1\u03C1\u03AC\u03B4\u03B5\u03B9\u03B3\u03BC\u03B1 \u03C4\u03BF Footer \u03B5\u03C3\u03C9\u03BA\u03BB\u03B5\u03AF\u03B5\u03C4\u03B1\u03B9 \u03BC\u03AD\u03C3\u03B1 \u03C3\u03C4\u03BF Bottom component"))), /*#__PURE__*/_react["default"].createElement(_Bottom["default"], null, /*#__PURE__*/_react["default"].createElement(_Footer.GovGRFooter, null)));
+var Default = exports.Default = function Default() {
+  return _ref;
+};
+var _default = exports["default"] = Default;

package/cjs/layouts/Basic/Bottom/index.mdx

@@ -1,41 +1,22 @@
 ---
 id: bottom
 title: Bottom
-parent: docs/ui/components
 ---
 
 # Bottom
 
-import { Bottom } from '@digigov/ui/layouts/Basic';
-
-```jsx live path=layouts/Basic/index.tsx
-import GovGRFooter from '@digigov/ui/govgr/Footer';
-
-function Bottom{
- return (
-    <Bottom>
-        <GovGRFooter />
-    </Bottom>
- )
-}
-export Bottom
-
-```
-
-<br />
-
-## How it works
-
 Use the Bottom component in order to wrap the Footer's components.
 
-<br />
-
-## API
+## How to use
 
-### Properties
-
-<PropsDoc data={Bottom.__doc__} />
+<Story
+  packageName="@digigov/ui"
+  component="layouts/Basic/Bottom"
+  story="Default.tsx"
+/>
 
 ## API
 
-<PropTypes packageName="@digigov/ui" component="Bottom" />
+See below for a complete reference to all of the props  available to the components mentioned here.
+
+<ComponentProps componentName={["Bottom"]} /> 

package/cjs/layouts/Basic/Container/__stories__/Default/index.js

@@ -0,0 +1,20 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _Basic = require("@digigov/ui/layouts/Basic");
+var _Container = require("@digigov/ui/layouts/Basic/Container");
+var _Main = require("@digigov/ui/layouts/Basic/Main");
+var _typography = require("@digigov/ui/typography");
+var _Header = _interopRequireDefault(require("@digigov/ui/app/Header"));
+var _GovGRLogo = _interopRequireDefault(require("@digigov/ui/govgr/GovGRLogo"));
+var _Top = _interopRequireDefault(require("@digigov/ui/layouts/Basic/Top"));
+var _ref = /*#__PURE__*/_react["default"].createElement(_Basic.Layout, null, /*#__PURE__*/_react["default"].createElement(_Top["default"], null, /*#__PURE__*/_react["default"].createElement(_Header["default"], null, /*#__PURE__*/_react["default"].createElement(_GovGRLogo["default"], null))), /*#__PURE__*/_react["default"].createElement(_Container.Container, null, /*#__PURE__*/_react["default"].createElement(_Main.Main, null, /*#__PURE__*/_react["default"].createElement(_typography.Heading, null, "\u03A0\u03B5\u03C1\u03B9\u03B5\u03C7\u03CC\u03BC\u03B5\u03BD\u03BF \u03BC\u03AD\u03C3\u03B1 \u03C3\u03B5 Container"), /*#__PURE__*/_react["default"].createElement(_typography.Paragraph, null, "\u0397 \u03B5\u03C6\u03B1\u03C1\u03BC\u03BF\u03B3\u03AE \u03B1\u03C6\u03BF\u03C1\u03AC \u03C3\u03C4\u03B7\u03BD \u0391\u03C4\u03BF\u03BC\u03B9\u03BA\u03AE \u0391\u03BE\u03B9\u03BF\u03BB\u03CC\u03B3\u03B7\u03C3\u03B7 \u0395\u03BA\u03C0\u03B1\u03B9\u03B4\u03B5\u03C5\u03C4\u03B9\u03BA\u03CE\u03BD, \u039C\u03B5\u03BB\u03CE\u03BD \u0395\u03B9\u03B4\u03B9\u03BA\u03BF\u03CD \u0395\u03BA\u03C0\u03B1\u03B9\u03B4\u03B5\u03C5\u03C4\u03B9\u03BA\u03BF\u03CD \u03BA\u03B1\u03B9 \u0395\u03B9\u03B4\u03B9\u03BA\u03BF\u03CD \u0392\u03BF\u03B7\u03B8\u03B7\u03C4\u03B9\u03BA\u03BF\u03CD \u03A0\u03C1\u03BF\u03C3\u03C9\u03C0\u03B9\u03BA\u03BF\u03CD, \u0394\u03B9\u03B5\u03C5\u03B8\u03C5\u03BD\u03C4\u03CE\u03BD, \u03A0\u03C1\u03BF\u03CA\u03C3\u03C4\u03B1\u03BC\u03AD\u03BD\u03C9\u03BD \u03C3\u03C7\u03BF\u03BB\u03B9\u03BA\u03AE\u03C2 \u03BC\u03BF\u03BD\u03AC\u03B4\u03B1\u03C2 \u03AE \u0395\u03C1\u03B3\u03B1\u03C3\u03C4\u03B7\u03C1\u03B9\u03B1\u03BA\u03BF\u03CD \u039A\u03AD\u03BD\u03C4\u03C1\u03BF\u03C5 \u03C0\u03BF\u03C5 \u03C0\u03B1\u03C1\u03AD\u03C7\u03BF\u03C5\u03BD \u03B4\u03B9\u03B4\u03B1\u03BA\u03C4\u03B9\u03BA\u03CC \u03AD\u03C1\u03B3\u03BF."))));
+var Default = exports.Default = function Default() {
+  return _ref;
+};
+var _default = exports["default"] = Default;

package/cjs/layouts/Basic/Container/index.mdx

@@ -0,0 +1,23 @@
+---
+id: container
+title: Container
+---
+
+# Container
+
+Container compoment wraps around other elements, grouping them together. Containers are often used to structure and organize content on a web page.
+
+## How to use
+
+<Story
+  packageName="@digigov/ui"
+  component="layouts/Basic/Container"
+  story="Default.tsx"
+/>
+
+
+## API
+
+See below for a complete reference to all of the props  available to the components mentioned here.
+
+<ComponentProps componentName={["Container"]} /> 

package/cjs/layouts/Basic/Main/__stories__/Default/index.js

@@ -0,0 +1,20 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _Basic = require("@digigov/ui/layouts/Basic");
+var _Container = require("@digigov/ui/layouts/Basic/Container");
+var _Main = require("@digigov/ui/layouts/Basic/Main");
+var _typography = require("@digigov/ui/typography");
+var _Header = _interopRequireDefault(require("@digigov/ui/app/Header"));
+var _GovGRLogo = _interopRequireDefault(require("@digigov/ui/govgr/GovGRLogo"));
+var _Top = _interopRequireDefault(require("@digigov/ui/layouts/Basic/Top"));
+var _ref = /*#__PURE__*/_react["default"].createElement(_Basic.Layout, null, /*#__PURE__*/_react["default"].createElement(_Top["default"], null, /*#__PURE__*/_react["default"].createElement(_Header["default"], null, /*#__PURE__*/_react["default"].createElement(_GovGRLogo["default"], null))), /*#__PURE__*/_react["default"].createElement(_Container.Container, null, /*#__PURE__*/_react["default"].createElement(_Main.Main, null, /*#__PURE__*/_react["default"].createElement(_typography.Heading, null, "\u03A4\u03AF\u03C4\u03BB\u03BF\u03C2 Main"), /*#__PURE__*/_react["default"].createElement(_typography.Paragraph, null, "\u0397 \u03B5\u03C6\u03B1\u03C1\u03BC\u03BF\u03B3\u03AE \u03B1\u03C6\u03BF\u03C1\u03AC \u03C3\u03C4\u03B7\u03BD \u0391\u03C4\u03BF\u03BC\u03B9\u03BA\u03AE \u0391\u03BE\u03B9\u03BF\u03BB\u03CC\u03B3\u03B7\u03C3\u03B7 \u0395\u03BA\u03C0\u03B1\u03B9\u03B4\u03B5\u03C5\u03C4\u03B9\u03BA\u03CE\u03BD, \u039C\u03B5\u03BB\u03CE\u03BD \u0395\u03B9\u03B4\u03B9\u03BA\u03BF\u03CD \u0395\u03BA\u03C0\u03B1\u03B9\u03B4\u03B5\u03C5\u03C4\u03B9\u03BA\u03BF\u03CD \u03BA\u03B1\u03B9 \u0395\u03B9\u03B4\u03B9\u03BA\u03BF\u03CD \u0392\u03BF\u03B7\u03B8\u03B7\u03C4\u03B9\u03BA\u03BF\u03CD \u03A0\u03C1\u03BF\u03C3\u03C9\u03C0\u03B9\u03BA\u03BF\u03CD, \u0394\u03B9\u03B5\u03C5\u03B8\u03C5\u03BD\u03C4\u03CE\u03BD, \u03A0\u03C1\u03BF\u03CA\u03C3\u03C4\u03B1\u03BC\u03AD\u03BD\u03C9\u03BD \u03C3\u03C7\u03BF\u03BB\u03B9\u03BA\u03AE\u03C2 \u03BC\u03BF\u03BD\u03AC\u03B4\u03B1\u03C2 \u03AE \u0395\u03C1\u03B3\u03B1\u03C3\u03C4\u03B7\u03C1\u03B9\u03B1\u03BA\u03BF\u03CD \u039A\u03AD\u03BD\u03C4\u03C1\u03BF\u03C5 \u03C0\u03BF\u03C5 \u03C0\u03B1\u03C1\u03AD\u03C7\u03BF\u03C5\u03BD \u03B4\u03B9\u03B4\u03B1\u03BA\u03C4\u03B9\u03BA\u03CC \u03AD\u03C1\u03B3\u03BF."))));
+var Default = exports.Default = function Default() {
+  return _ref;
+};
+var _default = exports["default"] = Default;

package/cjs/layouts/Basic/Main/index.mdx

@@ -1,58 +1,21 @@
 ---
 id: main
 title: Main
-parent: docs/ui/components
 ---
 
-# Main
-
-```jsx live path=layouts/Basic/index.tsx
-import Header, { HeaderTitle } from '@digigov/ui/app/Header';
-import GovGRLogo from '@digigov/ui/govgr/GovGRLogo';
-import Paragraph from '@digigov/ui/typography/Paragraph';
-import PhaseBanner, { PhaseBannerTag } from '@digigov/ui/feedback/PhaseBanner';
-
-function Main{
-    return (
-      <>
-    <Top>
-        <Header>
-          <GovGRLogo />
-          <HeaderTitle>
-            <PhaseBanner>
-              <PhaseBannerTag>ALPHA</PhaseBannerTag>
-            </PhaseBanner>
-          </HeaderTitle>
-        </Header>
-      </Top>
-    <Container>
-        <Main>
-          <Title size="xl">Main content</Title>
-            <Paragraph>
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit,
-                sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-                Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-                Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
-                Excepteur sint occaecat cupidatat non proident,
-                sunt in culpa qui officia deserunt mollit anim id est laborum.
-            </Paragraph>
-        </Main>
-      </Container>
-      </>
-
- )
-}
-export Main
-
-```
-
-<br />
-
-## How it works
+# How to use
 
 The Main component is used to include tha main information of the page,
 spanning two-thirds of the page width.
 
+<Story
+  packageName="@digigov/ui"
+  component="layouts/Basic/Main"
+  story="Default.tsx"
+/>
+
 ## API
 
-<PropTypes packageName="@digigov/ui" component="Main" />
+See below for a complete reference to all of the props  available to the components mentioned here.
+
+<ComponentProps componentName={["Main"]} /> 

package/cjs/layouts/Basic/Top/__stories__/Default/index.js

@@ -0,0 +1,20 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _Basic = require("@digigov/ui/layouts/Basic");
+var _Container = require("@digigov/ui/layouts/Basic/Container");
+var _Main = require("@digigov/ui/layouts/Basic/Main");
+var _typography = require("@digigov/ui/typography");
+var _Header = _interopRequireDefault(require("@digigov/ui/app/Header"));
+var _GovGRLogo = _interopRequireDefault(require("@digigov/ui/govgr/GovGRLogo"));
+var _Top = _interopRequireDefault(require("@digigov/ui/layouts/Basic/Top"));
+var _ref = /*#__PURE__*/_react["default"].createElement(_Basic.Layout, null, /*#__PURE__*/_react["default"].createElement(_Top["default"], null, /*#__PURE__*/_react["default"].createElement(_Header["default"], null, /*#__PURE__*/_react["default"].createElement(_GovGRLogo["default"], null))), /*#__PURE__*/_react["default"].createElement(_Container.Container, null, /*#__PURE__*/_react["default"].createElement(_Main.Main, null, /*#__PURE__*/_react["default"].createElement(_typography.Heading, null, "\u03A4\u03AF\u03C4\u03BB\u03BF\u03C2 \u03C3\u03B5\u03BB\u03AF\u03B4\u03B1\u03C2"), /*#__PURE__*/_react["default"].createElement(_typography.Paragraph, null, "\u03A3\u03B5 \u03B1\u03C5\u03C4\u03CC \u03C4\u03BF \u03C0\u03B1\u03C1\u03AC\u03B4\u03B5\u03B9\u03B3\u03BC\u03B1 \u03C4\u03BF \u03C0\u03B5\u03C1\u03B9\u03B5\u03C7\u03CC\u03BC\u03B5\u03BD\u03BF \u03C4\u03BF\u03C5 Header \u03B5\u03C3\u03C9\u03BA\u03BB\u03B5\u03AF\u03B5\u03C4\u03B1\u03B9 \u03BC\u03AD\u03C3\u03B1 \u03C3\u03C4\u03BF Top component"))));
+var Default = exports.Default = function Default() {
+  return _ref;
+};
+var _default = exports["default"] = Default;

package/cjs/layouts/Basic/Top/index.mdx

@@ -6,63 +6,18 @@ parent: docs/ui/components
 
 # Top
 
-### Example without bottom margin
-
-```jsx live path=layouts/Basic/index.tsx
-import Header, { HeaderTitle } from '@digigov/ui/app/Header';
-import GovGRLogo from '@digigov/ui/govgr/GovGRLogo';
-import PhaseBanner, { PhaseBannerTag } from '@digigov/ui/feedback/PhaseBanner';
-
-
-function Top{
- return (
-      <Top dense>
-        <Header>
-          <GovGRLogo />
-          <HeaderTitle>
-            <PhaseBanner>
-              <PhaseBannerTag>ALPHA</PhaseBannerTag>
-            </PhaseBanner>
-          </HeaderTitle>
-        </Header>
-     </Top>
- )
-}
-export Top
-
-```
-
-### Example with bottom margin
-
-```jsx live path=layouts/Basic/index.tsx
-import Header, { HeaderTitle } from '@digigov/ui/app/Header';
-import GovGRLogo from '@digigov/ui/govgr/GovGRLogo';
-
-
-function Top{
- return (
-      <Top>
-        <Header>
-          <GovGRLogo />
-          <HeaderTitle>
-            <PhaseBanner>
-              <PhaseBannerTag>ALPHA</PhaseBannerTag>
-            </PhaseBanner>
-          </HeaderTitle>
-        </Header>
-     </Top>
- )
-}
-export Top
-
-```
-
-<br />
+The Top component is used to group the Header components.
 
-## How it works
+## How to use
 
-The Top component is used to group the Header components.
+<Story
+  packageName="@digigov/ui"
+  component="layouts/Basic/Top"
+  story="Default.tsx"
+/>
 
 ## API
 
-<PropTypes packageName="@digigov/ui" component="Top" />
+See below for a complete reference to all of the props  available to the components mentioned here.
+
+<ComponentProps componentName={["Top"]} />