@digigov/ui 1.2.0-a7ffb5dc → 2.0.0-462194bf

package/cjs/layouts/Basic/index.mdx

@@ -1,40 +1,42 @@
 ---
 id: basic
 title: Basic Layout
-parent: docs/ui/components
 ---
 
-# BasicLayout
+# Layout
 
-Use the BasicLayout component to create a basic page layout.
+The Layout component is used in combination with the Top, Side, Main,
+Content and Bottom components.
 
-```jsx live path=layouts/Basic/index.tsx
-import BasicLayout, { Top, Aside, Main , Container, Bottom } from '@digigov/ui/layouts/Basic';
-function CustomLayout (props){
- return (
-    <BasicLayout>
-      <Top>Header content</Top>
-      <Container>
-        <Main>Main content</Main>
-        <Aside>Side content</Aside>
-      </Container>
-      <Bottom>Bottom content</Bottom>
-    </BasicLayout>
- )
-}
-export CustomLayout
+## How to use
 
-```
+### Default layout
 
-<br />
+<Story
+  packageName="@digigov/ui"
+  component="layouts/Basic"
+  story="Default.tsx"
+/>
 
-## How it works
+### Two thirds one third columns layout
+<Story
+  packageName="@digigov/ui"
+  component="layouts/Basic"
+  story="TwoThirdsOneThirdColumns.tsx"
+/>
 
-The BasicLayout component is used in combination with the Top, Side, Main,
-Content and Bottom components.
+  ### Multiple rows lyout
+
+<Story
+  packageName="@digigov/ui"
+  component="layouts/Basic"
+  story="MultipleRowsLayout.tsx"
+/>
 
 ## API
 
-### Properties
+See below for a complete reference to all of the props  available to the components mentioned here.
+
+<ComponentProps componentName={["Layout"]} /> 
+
 
-<br />

package/cjs/layouts/Grid/index.mdx

@@ -0,0 +1,39 @@
+---
+id: grid
+title: Grid
+---
+
+## How to use
+
+Grid compoment is a  layout system that allows you to design complex web page layouts with rows and columns.
+
+
+### Default Grid
+
+<Story
+  packageName="@digigov/ui"
+  component="layouts/Grid"
+  story="Default.tsx"
+/>
+
+### Responsive spacing Grid
+
+<Story
+  packageName="@digigov/ui"
+  component="layouts/Grid"
+  story="ResponsiveSpacing.tsx"
+/>
+
+### Inline Grid
+
+<Story
+  packageName="@digigov/ui"
+  component="layouts/Grid"
+  story="Inline.tsx"
+/>
+
+## API
+
+See below for a complete reference to all of the props  available to the components mentioned here.
+
+<ComponentProps componentName={["Grid"]} /> 

package/cjs/lazy/index.js

@@ -613,6 +613,15 @@ var _default = exports["default"] = {
       };
     });
   }),
+  'Skeleton': /*#__PURE__*/(0, _react.lazy)(function () {
+    return Promise.resolve().then(function () {
+      return _interopRequireWildcard(require('@digigov/ui/app/Skeleton'));
+    }).then(function (module) {
+      return {
+        "default": module['Skeleton']
+      };
+    });
+  }),
   'AccordionAuto': /*#__PURE__*/(0, _react.lazy)(function () {
     return Promise.resolve().then(function () {
       return _interopRequireWildcard(require('@digigov/ui/content/Accordion/auto'));
@@ -1405,6 +1414,15 @@ var _default = exports["default"] = {
       };
     });
   }),
+  'AutoCompleteContainer': /*#__PURE__*/(0, _react.lazy)(function () {
+    return Promise.resolve().then(function () {
+      return _interopRequireWildcard(require('@digigov/ui/form/AutoComplete'));
+    }).then(function (module) {
+      return {
+        "default": module['AutoCompleteContainer']
+      };
+    });
+  }),
   'AutoCompleteInput': /*#__PURE__*/(0, _react.lazy)(function () {
     return Promise.resolve().then(function () {
       return _interopRequireWildcard(require('@digigov/ui/form/AutoComplete'));
@@ -1423,30 +1441,39 @@ var _default = exports["default"] = {
       };
     });
   }),
-  'AutoCompleteResultList': /*#__PURE__*/(0, _react.lazy)(function () {
+  'AutoCompleteMultipleInput': /*#__PURE__*/(0, _react.lazy)(function () {
     return Promise.resolve().then(function () {
       return _interopRequireWildcard(require('@digigov/ui/form/AutoComplete'));
     }).then(function (module) {
       return {
-        "default": module['AutoCompleteResultList']
+        "default": module['AutoCompleteMultipleInput']
       };
     });
   }),
-  'AutoCompleteResultListItem': /*#__PURE__*/(0, _react.lazy)(function () {
+  'AutoCompleteMultipleInputContainer': /*#__PURE__*/(0, _react.lazy)(function () {
     return Promise.resolve().then(function () {
       return _interopRequireWildcard(require('@digigov/ui/form/AutoComplete'));
     }).then(function (module) {
       return {
-        "default": module['AutoCompleteResultListItem']
+        "default": module['AutoCompleteMultipleInputContainer']
+      };
+    });
+  }),
+  'AutoCompleteResultList': /*#__PURE__*/(0, _react.lazy)(function () {
+    return Promise.resolve().then(function () {
+      return _interopRequireWildcard(require('@digigov/ui/form/AutoComplete'));
+    }).then(function (module) {
+      return {
+        "default": module['AutoCompleteResultList']
       };
     });
   }),
-  'AutoCompleteWrapper': /*#__PURE__*/(0, _react.lazy)(function () {
+  'AutoCompleteResultListItem': /*#__PURE__*/(0, _react.lazy)(function () {
     return Promise.resolve().then(function () {
       return _interopRequireWildcard(require('@digigov/ui/form/AutoComplete'));
     }).then(function (module) {
       return {
-        "default": module['AutoCompleteWrapper']
+        "default": module['AutoCompleteResultListItem']
       };
     });
   }),
@@ -1459,12 +1486,12 @@ var _default = exports["default"] = {
       };
     });
   }),
-  'AutoCompleteStatusWrapper': /*#__PURE__*/(0, _react.lazy)(function () {
+  'AutoCompleteStatusContainer': /*#__PURE__*/(0, _react.lazy)(function () {
     return Promise.resolve().then(function () {
       return _interopRequireWildcard(require('@digigov/ui/form/AutoComplete/Status'));
     }).then(function (module) {
       return {
-        "default": module['AutoCompleteStatusWrapper']
+        "default": module['AutoCompleteStatusContainer']
       };
     });
   }),
@@ -1945,6 +1972,114 @@ var _default = exports["default"] = {
       };
     });
   }),
+  'CancelIcon': /*#__PURE__*/(0, _react.lazy)(function () {
+    return Promise.resolve().then(function () {
+      return _interopRequireWildcard(require('@digigov/ui/utils/SvgIcon'));
+    }).then(function (module) {
+      return {
+        "default": module['CancelIcon']
+      };
+    });
+  }),
+  'LockIcon': /*#__PURE__*/(0, _react.lazy)(function () {
+    return Promise.resolve().then(function () {
+      return _interopRequireWildcard(require('@digigov/ui/utils/SvgIcon'));
+    }).then(function (module) {
+      return {
+        "default": module['LockIcon']
+      };
+    });
+  }),
+  'DownloadIcon': /*#__PURE__*/(0, _react.lazy)(function () {
+    return Promise.resolve().then(function () {
+      return _interopRequireWildcard(require('@digigov/ui/utils/SvgIcon'));
+    }).then(function (module) {
+      return {
+        "default": module['DownloadIcon']
+      };
+    });
+  }),
+  'PdfFileIcon': /*#__PURE__*/(0, _react.lazy)(function () {
+    return Promise.resolve().then(function () {
+      return _interopRequireWildcard(require('@digigov/ui/utils/SvgIcon'));
+    }).then(function (module) {
+      return {
+        "default": module['PdfFileIcon']
+      };
+    });
+  }),
+  'PlusIcon': /*#__PURE__*/(0, _react.lazy)(function () {
+    return Promise.resolve().then(function () {
+      return _interopRequireWildcard(require('@digigov/ui/utils/SvgIcon'));
+    }).then(function (module) {
+      return {
+        "default": module['PlusIcon']
+      };
+    });
+  }),
+  'MinusIcon': /*#__PURE__*/(0, _react.lazy)(function () {
+    return Promise.resolve().then(function () {
+      return _interopRequireWildcard(require('@digigov/ui/utils/SvgIcon'));
+    }).then(function (module) {
+      return {
+        "default": module['MinusIcon']
+      };
+    });
+  }),
+  'LoginIcon': /*#__PURE__*/(0, _react.lazy)(function () {
+    return Promise.resolve().then(function () {
+      return _interopRequireWildcard(require('@digigov/ui/utils/SvgIcon'));
+    }).then(function (module) {
+      return {
+        "default": module['LoginIcon']
+      };
+    });
+  }),
+  'RestoreIcon': /*#__PURE__*/(0, _react.lazy)(function () {
+    return Promise.resolve().then(function () {
+      return _interopRequireWildcard(require('@digigov/ui/utils/SvgIcon'));
+    }).then(function (module) {
+      return {
+        "default": module['RestoreIcon']
+      };
+    });
+  }),
+  'ReplyIcon': /*#__PURE__*/(0, _react.lazy)(function () {
+    return Promise.resolve().then(function () {
+      return _interopRequireWildcard(require('@digigov/ui/utils/SvgIcon'));
+    }).then(function (module) {
+      return {
+        "default": module['ReplyIcon']
+      };
+    });
+  }),
+  'ChatIcon': /*#__PURE__*/(0, _react.lazy)(function () {
+    return Promise.resolve().then(function () {
+      return _interopRequireWildcard(require('@digigov/ui/utils/SvgIcon'));
+    }).then(function (module) {
+      return {
+        "default": module['ChatIcon']
+      };
+    });
+  }),
+  'ExclamationIcon': /*#__PURE__*/(0, _react.lazy)(function () {
+    return Promise.resolve().then(function () {
+      return _interopRequireWildcard(require('@digigov/ui/utils/SvgIcon'));
+    }).then(function (module) {
+      return {
+        "default": module['ExclamationIcon']
+      };
+    });
+  }),
+  'PrintIcon': /*#__PURE__*/(0, _react.lazy)(function () {
+    return Promise.resolve().then(function () {
+      return _interopRequireWildcard(require('@digigov/ui/utils/SvgIcon'));
+    }).then(function (module) {
+      return {
+        "default": module['PrintIcon']
+      };
+    });
+  }),
   'ImageLogo': /*#__PURE__*/(0, _react.lazy)(function () {
     return Promise.resolve().then(function () {
       return _interopRequireWildcard(require('@digigov/ui/icons/ImageLogo'));
@@ -2656,6 +2791,15 @@ var _default = exports["default"] = {
       };
     });
   }),
+  'Typography': /*#__PURE__*/(0, _react.lazy)(function () {
+    return Promise.resolve().then(function () {
+      return _interopRequireWildcard(require('@digigov/ui/typography/Typography'));
+    }).then(function (module) {
+      return {
+        "default": module['Typography']
+      };
+    });
+  }),
   'Base': /*#__PURE__*/(0, _react.lazy)(function () {
     return Promise.resolve().then(function () {
       return _interopRequireWildcard(require('@digigov/ui/utils/Base'));
@@ -2701,78 +2845,6 @@ var _default = exports["default"] = {
       };
     });
   }),
-  'KitchenSinkAllComponents': /*#__PURE__*/(0, _react.lazy)(function () {
-    return Promise.resolve().then(function () {
-      return _interopRequireWildcard(require('@digigov/ui/misc/KitchenSink'));
-    }).then(function (module) {
-      return {
-        "default": module['KitchenSinkAllComponents']
-      };
-    });
-  }),
-  'KitchenSinkCard': /*#__PURE__*/(0, _react.lazy)(function () {
-    return Promise.resolve().then(function () {
-      return _interopRequireWildcard(require('@digigov/ui/misc/KitchenSink'));
-    }).then(function (module) {
-      return {
-        "default": module['KitchenSinkCard']
-      };
-    });
-  }),
-  'KitchenSinkCategory': /*#__PURE__*/(0, _react.lazy)(function () {
-    return Promise.resolve().then(function () {
-      return _interopRequireWildcard(require('@digigov/ui/misc/KitchenSink'));
-    }).then(function (module) {
-      return {
-        "default": module['KitchenSinkCategory']
-      };
-    });
-  }),
-  'KitchenSinkContent': /*#__PURE__*/(0, _react.lazy)(function () {
-    return Promise.resolve().then(function () {
-      return _interopRequireWildcard(require('@digigov/ui/misc/KitchenSink'));
-    }).then(function (module) {
-      return {
-        "default": module['KitchenSinkContent']
-      };
-    });
-  }),
-  'KitchenSinkContentInfo': /*#__PURE__*/(0, _react.lazy)(function () {
-    return Promise.resolve().then(function () {
-      return _interopRequireWildcard(require('@digigov/ui/misc/KitchenSink'));
-    }).then(function (module) {
-      return {
-        "default": module['KitchenSinkContentInfo']
-      };
-    });
-  }),
-  'KitchenSinkContentTags': /*#__PURE__*/(0, _react.lazy)(function () {
-    return Promise.resolve().then(function () {
-      return _interopRequireWildcard(require('@digigov/ui/misc/KitchenSink'));
-    }).then(function (module) {
-      return {
-        "default": module['KitchenSinkContentTags']
-      };
-    });
-  }),
-  'KitchenSinkHeading': /*#__PURE__*/(0, _react.lazy)(function () {
-    return Promise.resolve().then(function () {
-      return _interopRequireWildcard(require('@digigov/ui/misc/KitchenSink'));
-    }).then(function (module) {
-      return {
-        "default": module['KitchenSinkHeading']
-      };
-    });
-  }),
-  'KitchenSinkLetterContent': /*#__PURE__*/(0, _react.lazy)(function () {
-    return Promise.resolve().then(function () {
-      return _interopRequireWildcard(require('@digigov/ui/misc/KitchenSink'));
-    }).then(function (module) {
-      return {
-        "default": module['KitchenSinkLetterContent']
-      };
-    });
-  }),
   'BackToTop': /*#__PURE__*/(0, _react.lazy)(function () {
     return Promise.resolve().then(function () {
       return _interopRequireWildcard(require('@digigov/ui/navigation/BackToTopLink'));
@@ -2826,59 +2898,5 @@ var _default = exports["default"] = {
         "default": module['CodeBlock']
       };
     });
-  }),
-  'AllComponents': /*#__PURE__*/(0, _react.lazy)(function () {
-    return Promise.resolve().then(function () {
-      return _interopRequireWildcard(require('@digigov/ui/utils/Kitchensink/AllComponents'));
-    }).then(function (module) {
-      return {
-        "default": module['AllComponents']
-      };
-    });
-  }),
-  'KitchensinkByCategory': /*#__PURE__*/(0, _react.lazy)(function () {
-    return Promise.resolve().then(function () {
-      return _interopRequireWildcard(require('@digigov/ui/utils/Kitchensink/KitchensinkByCategory'));
-    }).then(function (module) {
-      return {
-        "default": module['KitchensinkByCategory']
-      };
-    });
-  }),
-  'KitchensinkByLetter': /*#__PURE__*/(0, _react.lazy)(function () {
-    return Promise.resolve().then(function () {
-      return _interopRequireWildcard(require('@digigov/ui/utils/Kitchensink/KitchensinkByLetter'));
-    }).then(function (module) {
-      return {
-        "default": module['KitchensinkByLetter']
-      };
-    });
-  }),
-  'KitchensinkComponent': /*#__PURE__*/(0, _react.lazy)(function () {
-    return Promise.resolve().then(function () {
-      return _interopRequireWildcard(require('@digigov/ui/utils/Kitchensink/KitchensinkComponent'));
-    }).then(function (module) {
-      return {
-        "default": module['KitchensinkComponent']
-      };
-    });
-  }),
-  'KitchenSinkDashboard': /*#__PURE__*/(0, _react.lazy)(function () {
-    return Promise.resolve().then(function () {
-      return _interopRequireWildcard(require('@digigov/ui/utils/Kitchensink/KitchensinkDashboard'));
-    }).then(function (module) {
-      return {
-        "default": module['KitchenSinkDashboard']
-      };
-    });
-  }),
-  'Typography': /*#__PURE__*/(0, _react.lazy)(function () {
-    return Promise.resolve().then(function () {
-      return _interopRequireWildcard(require('@digigov/ui/utils/Typography'));
-    }).then(function (module) {
-      return {
-        "default": module['Typography']
-      };
-    });
   })
 };

package/cjs/navigation/BackLink/index.mdx

@@ -7,10 +7,6 @@ title: Back Link
 
 Use the back link component to help users go back to the previous page in a multi-page transaction.
 
-```bash
-import BackLink from "@digigov/ui/navigation/BackLink";
-```
-
 ## How to use
 
 <Story
@@ -21,4 +17,7 @@ import BackLink from "@digigov/ui/navigation/BackLink";
 
 ## API
 
-<PropTypes packageName="@digigov/ui" component="BackLink" />
+See below for a complete reference to all of the props  available to the components mentioned here.
+
+<ComponentProps componentName={["BackLink"]} />
+

package/cjs/navigation/Breadcrumbs/index.mdx

@@ -9,10 +9,6 @@ This component is currently experimental because adding a summary line with more
 
 The Breadcrumbs component lets users show and hide sections of related content on a page.
 
-```bash
-import Breadcrumbs from '@digigov/ui/navigation/Breadcrumbs';
-```
-
 ## How to use
 
 <Story
@@ -28,4 +24,9 @@ implementation in the ARIA Authoring Practices Guide (APG) at [Breadcrumbs](http
 
 ## API
 
-<PropTypes packageName="@digigov/ui" component="Breadcrumbs" />
+See below for a complete reference to all of the props  available to the components mentioned here.
+
+<ComponentProps componentName={[
+  "Breadcrumbs",
+  "BreadcrumbsList",
+  "BreadcrumbsListItem"]} />

package/cjs/navigation/Drawer/index.mdx

@@ -3,18 +3,12 @@ id: drawer
 title: Drawer
 ---
 
-```bash
-import Drawer from '@digigov/ui/app/Drawer';
-```
-
 ## How to use
 
-<Story
-  packageName="@digigov/ui"
-  component="navigation/Drawer"
-  story="Default.tsx"
-/>
+<Story packageName="@digigov/ui" component="navigation/Drawer" story="Default.tsx" />
 
 ## API
 
-<PropTypes packageName="@digigov/ui" component="Drawer" />
+See below for a complete reference to all of the props  available to the components mentioned here.
+
+<ComponentProps componentName={["Drawer", "DrawerHeading",]} />

package/cjs/navigation/Dropdown/Dropdown.stories/index.js

@@ -115,6 +115,18 @@ Object.keys(_ContentPosition).forEach(function (key) {
     }
   });
 });
+var _ScrollableContent = require("@digigov/ui/navigation/Dropdown/__stories__/ScrollableContent");
+Object.keys(_ScrollableContent).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _ScrollableContent[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _ScrollableContent[key];
+    }
+  });
+});
 var _Dense = require("@digigov/ui/navigation/Dropdown/__stories__/Dense");
 Object.keys(_Dense).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/cjs/navigation/Dropdown/Dropdown.stories.playwright.json

@@ -64,6 +64,22 @@
           "title": "Open dropdown action"
         }
       ]
+    },
+    "digigov-ui-navigation-dropdown--scrollable-content": {
+      "actionSets": [
+        {
+          "actions": [
+            {
+              "name": "click",
+              "args": {
+                "selector": "html>body>div:nth-child(5)>details>summary"
+              }
+            }
+          ],
+          "id": "rZUYM--IzpfW",
+          "title": "open content"
+        }
+      ]
     }
   }
 }

package/cjs/navigation/Dropdown/__stories__/ScrollableContent/index.js

@@ -0,0 +1,68 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.ScrollableContent = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _Dropdown = require("@digigov/ui/navigation/Dropdown");
+var _NavList = require("@digigov/ui/navigation/NavList");
+var data = [{
+  name: 'Item 1',
+  href: '#'
+}, {
+  name: 'Item 2',
+  href: '#'
+}, {
+  name: 'Item 3',
+  href: '#'
+}, {
+  name: 'Item 4',
+  href: '#'
+}, {
+  name: 'Item 5',
+  href: '#'
+}, {
+  name: 'Item 6',
+  href: '#'
+}, {
+  name: 'Item 7',
+  href: '#'
+}, {
+  name: 'Item 8',
+  href: '#'
+}, {
+  name: 'Item 9',
+  href: '#'
+}, {
+  name: 'Item 10',
+  href: '#'
+}, {
+  name: 'Item 11',
+  href: '#'
+}, {
+  name: 'Item 12',
+  href: '#'
+}];
+var _ref = /*#__PURE__*/_react["default"].createElement(_Dropdown.DropdownButton, {
+  role: "button",
+  "aria-haspopup": "true",
+  "aria-controls": "menu2",
+  arrow: true
+}, "\u0395\u03BD\u03AD\u03C1\u03B3\u03B5\u03B9\u03B5\u03C2");
+var ScrollableContent = exports.ScrollableContent = function ScrollableContent() {
+  return /*#__PURE__*/_react["default"].createElement(_Dropdown.Dropdown, null, _ref, /*#__PURE__*/_react["default"].createElement(_Dropdown.DropdownContent, {
+    role: "menu",
+    id: "menu2",
+    scrollable: true
+  }, /*#__PURE__*/_react["default"].createElement(_NavList.NavList, {
+    layout: "vertical"
+  }, data.map(function (item) {
+    return /*#__PURE__*/_react["default"].createElement(_NavList.NavListItemAction, {
+      role: "menuitem",
+      href: item.href
+    }, item.name);
+  }))));
+};
+var _default = exports["default"] = ScrollableContent;

package/cjs/navigation/Dropdown/index.mdx

@@ -5,10 +5,6 @@ title: Dropdown
 
 # Dropdown
 
-```bash
-import Dropdown from '@digigov/ui/navigation/Dropdown';
-```
-
 ## How to use
 
 <Story
@@ -39,4 +35,6 @@ You can display the dropdown menu to the top of the `Dropdown` button.
 
 ## API
 
-<PropTypes packageName="@digigov/ui" component="Dropdown" />
+See below for a complete reference to all of the props  available to the components mentioned here.
+
+<ComponentProps componentName={["DropdownBase","DropdownButton","DropdownContent"]} />