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

package/src/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/src/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/src/lazy.js

@@ -67,6 +67,7 @@ export default {
   'QrCodeViewer': lazy(() => import('@digigov/ui/app/QrCodeViewer').then((module)=> ({default: module['QrCodeViewer']}))),
   'ThemeOptions': lazy(() => import('@digigov/ui/app/ThemeOptions').then((module)=> ({default: module['ThemeOptions']}))),
   'MARGIN_SIZE': lazy(() => import('@digigov/ui/app/QrCodeViewer/utils').then((module)=> ({default: module['MARGIN_SIZE']}))),
+  'Skeleton': lazy(() => import('@digigov/ui/app/Skeleton').then((module)=> ({default: module['Skeleton']}))),
   'AccordionAuto': lazy(() => import('@digigov/ui/content/Accordion/auto').then((module)=> ({default: module['AccordionAuto']}))),
   'AccordionCloseAllButtonAuto': lazy(() => import('@digigov/ui/content/Accordion/auto').then((module)=> ({default: module['AccordionCloseAllButtonAuto']}))),
   'AccordionOpenAllButtonAuto': lazy(() => import('@digigov/ui/content/Accordion/auto').then((module)=> ({default: module['AccordionOpenAllButtonAuto']}))),
@@ -155,13 +156,15 @@ export default {
   'WarningText': lazy(() => import('@digigov/ui/feedback/WarningText').then((module)=> ({default: module['WarningText']}))),
   'AutoComplete': lazy(() => import('@digigov/ui/form/AutoComplete').then((module)=> ({default: module['AutoComplete']}))),
   'AutoCompleteAssistiveHint': lazy(() => import('@digigov/ui/form/AutoComplete').then((module)=> ({default: module['AutoCompleteAssistiveHint']}))),
+  'AutoCompleteContainer': lazy(() => import('@digigov/ui/form/AutoComplete').then((module)=> ({default: module['AutoCompleteContainer']}))),
   'AutoCompleteInput': lazy(() => import('@digigov/ui/form/AutoComplete').then((module)=> ({default: module['AutoCompleteInput']}))),
   'AutoCompleteInputTypeahead': lazy(() => import('@digigov/ui/form/AutoComplete').then((module)=> ({default: module['AutoCompleteInputTypeahead']}))),
+  'AutoCompleteMultipleInput': lazy(() => import('@digigov/ui/form/AutoComplete').then((module)=> ({default: module['AutoCompleteMultipleInput']}))),
+  'AutoCompleteMultipleInputContainer': lazy(() => import('@digigov/ui/form/AutoComplete').then((module)=> ({default: module['AutoCompleteMultipleInputContainer']}))),
   'AutoCompleteResultList': lazy(() => import('@digigov/ui/form/AutoComplete').then((module)=> ({default: module['AutoCompleteResultList']}))),
   'AutoCompleteResultListItem': lazy(() => import('@digigov/ui/form/AutoComplete').then((module)=> ({default: module['AutoCompleteResultListItem']}))),
-  'AutoCompleteWrapper': lazy(() => import('@digigov/ui/form/AutoComplete').then((module)=> ({default: module['AutoCompleteWrapper']}))),
   'AutoCompleteStatus': lazy(() => import('@digigov/ui/form/AutoComplete/Status').then((module)=> ({default: module['AutoCompleteStatus']}))),
-  'AutoCompleteStatusWrapper': lazy(() => import('@digigov/ui/form/AutoComplete/Status').then((module)=> ({default: module['AutoCompleteStatusWrapper']}))),
+  'AutoCompleteStatusContainer': lazy(() => import('@digigov/ui/form/AutoComplete/Status').then((module)=> ({default: module['AutoCompleteStatusContainer']}))),
   'ButtonLink': lazy(() => import('@digigov/ui/form/Button/ButtonLink').then((module)=> ({default: module['ButtonLink']}))),
   'CallToAction': lazy(() => import('@digigov/ui/form/Button/CallToAction').then((module)=> ({default: module['CallToAction']}))),
   'ContinueButton': lazy(() => import('@digigov/ui/form/Button').then((module)=> ({default: module['ContinueButton']}))),
@@ -215,6 +218,18 @@ export default {
   'CloseIcon': lazy(() => import('@digigov/ui/utils/SvgIcon').then((module)=> ({default: module['CloseIcon']}))),
   'GlobeIcon': lazy(() => import('@digigov/ui/utils/SvgIcon').then((module)=> ({default: module['GlobeIcon']}))),
   'MoreVertIcon': lazy(() => import('@digigov/ui/utils/SvgIcon').then((module)=> ({default: module['MoreVertIcon']}))),
+  'CancelIcon': lazy(() => import('@digigov/ui/utils/SvgIcon').then((module)=> ({default: module['CancelIcon']}))),
+  'LockIcon': lazy(() => import('@digigov/ui/utils/SvgIcon').then((module)=> ({default: module['LockIcon']}))),
+  'DownloadIcon': lazy(() => import('@digigov/ui/utils/SvgIcon').then((module)=> ({default: module['DownloadIcon']}))),
+  'PdfFileIcon': lazy(() => import('@digigov/ui/utils/SvgIcon').then((module)=> ({default: module['PdfFileIcon']}))),
+  'PlusIcon': lazy(() => import('@digigov/ui/utils/SvgIcon').then((module)=> ({default: module['PlusIcon']}))),
+  'MinusIcon': lazy(() => import('@digigov/ui/utils/SvgIcon').then((module)=> ({default: module['MinusIcon']}))),
+  'LoginIcon': lazy(() => import('@digigov/ui/utils/SvgIcon').then((module)=> ({default: module['LoginIcon']}))),
+  'RestoreIcon': lazy(() => import('@digigov/ui/utils/SvgIcon').then((module)=> ({default: module['RestoreIcon']}))),
+  'ReplyIcon': lazy(() => import('@digigov/ui/utils/SvgIcon').then((module)=> ({default: module['ReplyIcon']}))),
+  'ChatIcon': lazy(() => import('@digigov/ui/utils/SvgIcon').then((module)=> ({default: module['ChatIcon']}))),
+  'ExclamationIcon': lazy(() => import('@digigov/ui/utils/SvgIcon').then((module)=> ({default: module['ExclamationIcon']}))),
+  'PrintIcon': lazy(() => import('@digigov/ui/utils/SvgIcon').then((module)=> ({default: module['PrintIcon']}))),
   'ImageLogo': lazy(() => import('@digigov/ui/icons/ImageLogo').then((module)=> ({default: module['ImageLogo']}))),
   'ImageLogoSet': lazy(() => import('@digigov/ui/icons/ImageLogoSet').then((module)=> ({default: module['ImageLogoSet']}))),
   'AdminLayout': lazy(() => import('@digigov/ui/layouts/Admin').then((module)=> ({default: module['AdminLayout']}))),
@@ -294,6 +309,7 @@ export default {
   'Paragraph': lazy(() => import('@digigov/ui/typography/Paragraph').then((module)=> ({default: module['Paragraph']}))),
   'NormalText': lazy(() => import('@digigov/ui/typography/NormalText').then((module)=> ({default: module['NormalText']}))),
   'Hint': lazy(() => import('@digigov/ui/typography/Hint').then((module)=> ({default: module['Hint']}))),
+  'Typography': lazy(() => import('@digigov/ui/typography/Typography').then((module)=> ({default: module['Typography']}))),
   'Base': lazy(() => import('@digigov/ui/utils/Base').then((module)=> ({default: module['Base']}))),
   'SvgIcon': lazy(() => import('@digigov/ui/utils/SvgIcon').then((module)=> ({default: module['SvgIcon']}))),
   'VisuallyHidden': lazy(() => import('@digigov/ui/utils/VisuallyHidden').then((module)=> ({default: module['VisuallyHidden']}))),
@@ -305,6 +321,5 @@ export default {
   'BackToTopLimit': lazy(() => import('@digigov/ui/navigation/BackToTopLink').then((module)=> ({default: module['BackToTopLimit']}))),
   'Code': lazy(() => import('@digigov/ui/typography/Code').then((module)=> ({default: module['Code']}))),
   'CodeBlock': lazy(() => import('@digigov/ui/typography/CodeBlock').then((module)=> ({default: module['CodeBlock']}))),
-  'Typography': lazy(() => import('@digigov/ui/utils/Typography').then((module)=> ({default: module['Typography']}))),
 
 }

package/src/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/src/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/src/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/src/navigation/Dropdown/Dropdown.stories.js

@@ -17,4 +17,5 @@ export * from '@digigov/ui/navigation/Dropdown/__stories__/AlignRight';
 export * from '@digigov/ui/navigation/Dropdown/__stories__/PlacementTop';
 export * from '@digigov/ui/navigation/Dropdown/__stories__/WithIcons';
 export * from '@digigov/ui/navigation/Dropdown/__stories__/ContentPosition';
+export * from '@digigov/ui/navigation/Dropdown/__stories__/ScrollableContent';
 export * from '@digigov/ui/navigation/Dropdown/__stories__/Dense';

package/src/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/src/navigation/Dropdown/__stories__/ScrollableContent.tsx

@@ -0,0 +1,82 @@
+import React from 'react';
+import {
+  Dropdown,
+  DropdownButton,
+  DropdownContent,
+} from '@digigov/ui/navigation/Dropdown';
+import { NavListItemAction, NavList } from '@digigov/ui/navigation/NavList';
+
+const 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: '#',
+  },
+];
+
+export const ScrollableContent = () => (
+  <Dropdown>
+    <DropdownButton
+      role="button"
+      aria-haspopup="true"
+      aria-controls="menu2"
+      arrow
+    >
+      Ενέργειες
+    </DropdownButton>
+    <DropdownContent role="menu" id="menu2" scrollable>
+      <NavList layout="vertical">
+        {data.map((item) => (
+          <NavListItemAction role="menuitem" href={item.href}>
+            {item.name}
+          </NavListItemAction>
+        ))}
+      </NavList>
+    </DropdownContent>
+  </Dropdown>
+);
+
+export default ScrollableContent;

package/src/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"]} /> 

package/src/navigation/Link/index.mdx

@@ -3,10 +3,6 @@ id: link
 title: Link
 ---
 
-```bash
-import Link from '@digigov/ui/navigation/Link';
-```
-
 ## How to use
 
 ### Default
@@ -35,19 +31,11 @@ import Link from '@digigov/ui/navigation/Link';
 
 ### At dark background
 
-<Story
-  packageName="@digigov/ui"
-  component="navigation/Link"
-  story="DarkBackground.tsx"
-/>
+<Story packageName="@digigov/ui" component="navigation/Link" story="DarkBackground.tsx" />
 
 ### At dark background and no underline
 
-<Story
-  packageName="@digigov/ui"
-  component="navigation/Link"
-  story="DarkBackgroundNoUnderline.tsx"
-/>
+<Story packageName="@digigov/ui" component="navigation/Link" story="DarkBackgroundNoUnderline.tsx" />
 
 ### Accessibility
 
@@ -57,4 +45,6 @@ implementation in the ARIA Authoring Practices Guide (APG) at
 
 ## API
 
-<PropTypes packageName="@digigov/ui" component="Link" />
+See below for a complete reference to all of the props  available to the components mentioned here.
+
+<ComponentProps componentName={["LinkBase"]} /> 

package/src/navigation/NavList/__stories__/Default.tsx

@@ -5,7 +5,24 @@ import {
   NavListItemAction,
   useNavList,
 } from '@digigov/ui/navigation/NavList';
-import links from '@digigov/ui/navigation/NavList/__stories__/NavLinksOneLevel.json';
+
+const links = [
+  {
+    "name": "home",
+    "href": "#home",
+    "label": "Αρχική"
+  },
+  {
+    "name": "educational",
+    "label": "Εκπαιδευτικό υλικό",
+    "href": "#educational"
+  },
+  {
+    "name": "news",
+    "href": "#news",
+    "label": "Νέα"
+  }
+]
 
 export const Default = () => {
   const { registerNavItem } = useNavList();

package/src/navigation/NavList/__stories__/HorizontalWithDrawer.tsx

@@ -14,7 +14,43 @@ import {
   NavMenuTitle,
   useNavList,
 } from '@digigov/ui/navigation/NavList';
-import links from '@digigov/ui/navigation/NavList/__stories__/NavLinksWithSubmenu.json';
+
+const links = [
+  { "name": "home", "href": "#home", "label": "Αρχική" },
+  {
+    "name": "educational",
+    "label": "Εκπαιδευτικό υλικό",
+    "subMenuHeading": "Εκπαιδευτικό υλικό",
+    "subMenu": [
+      {
+        "name": "elearning",
+        "href": "#elearning",
+        "label": "Εκπαιδευτική πλατφόρμα"
+      },
+      {
+        "name": "videos",
+        "href": "#videos",
+        "label": "Βίντεο"
+      },
+      {
+        "name": "presentations",
+        "href": "#presentations",
+        "label": "Παρουσιάσεις"
+      },
+      {
+        "name": "promoting",
+        "href": "#promoting",
+        "label": "Προωθώντας την αθλητική ακεραιότητα στην νέα γενιά"
+      },
+      {
+        "name": "other-texts",
+        "href": "#other-texts",
+        "label": "Άλλα κείμενα"
+      }
+    ]
+  },
+  { "name": "news", "href": "#news", "label": "Νέα" }
+]
 
 export const HorizontalWithDrawer = () => {
   const layout = 'horizontal';

package/src/navigation/NavList/__stories__/HorizontalWithoutDrawer.tsx

@@ -11,7 +11,43 @@ import {
   NavMenuTitle,
   useNavList,
 } from '@digigov/ui/navigation/NavList';
-import links from '@digigov/ui/navigation/NavList/__stories__/NavLinksWithSubmenu.json';
+
+const links = [
+  { "name": "home", "href": "#home", "label": "Αρχική" },
+  {
+    "name": "educational",
+    "label": "Εκπαιδευτικό υλικό",
+    "subMenuHeading": "Εκπαιδευτικό υλικό",
+    "subMenu": [
+      {
+        "name": "elearning",
+        "href": "#elearning",
+        "label": "Εκπαιδευτική πλατφόρμα"
+      },
+      {
+        "name": "videos",
+        "href": "#videos",
+        "label": "Βίντεο"
+      },
+      {
+        "name": "presentations",
+        "href": "#presentations",
+        "label": "Παρουσιάσεις"
+      },
+      {
+        "name": "promoting",
+        "href": "#promoting",
+        "label": "Προωθώντας την αθλητική ακεραιότητα στην νέα γενιά"
+      },
+      {
+        "name": "other-texts",
+        "href": "#other-texts",
+        "label": "Άλλα κείμενα"
+      }
+    ]
+  },
+  { "name": "news", "href": "#news", "label": "Νέα" }
+]
 
 export const HorizontalWithoutDrawer = () => {
   const layout = 'horizontal';

package/src/navigation/NavList/__stories__/NavListWithoutNav.tsx

@@ -4,7 +4,24 @@ import {
   NavListItemAction,
   useNavList,
 } from '@digigov/ui/navigation/NavList';
-import links from '@digigov/ui/navigation/NavList/__stories__/NavLinksOneLevel.json';
+
+const links = [
+  {
+    "name": "home",
+    "href": "#home",
+    "label": "Αρχική"
+  },
+  {
+    "name": "educational",
+    "label": "Εκπαιδευτικό υλικό",
+    "href": "#educational"
+  },
+  {
+    "name": "news",
+    "href": "#news",
+    "label": "Νέα"
+  }
+]
 
 export const NavListWithoutNav = () => {
   const layout = 'vertical';

package/src/navigation/NavList/__stories__/UsingNavListAuto.tsx

@@ -1,8 +1,45 @@
 import React from 'react';
-import BurgerIcon from '@digigov/react-icons/BurgerIcon';
+import BurgerIcon from '@digigov/ui/utils/SvgIcon';
 import { Button } from '@digigov/ui/form/Button';
 import { NavListAuto } from '@digigov/ui/navigation/NavList';
-import links from '@digigov/ui/navigation/NavList/__stories__/NavLinksWithSubmenu.json';
+
+const links = [
+  { "name": "home", "href": "#home", "label": "Αρχική" },
+  {
+    "name": "educational",
+    "label": "Εκπαιδευτικό υλικό",
+    "subMenuHeading": "Εκπαιδευτικό υλικό",
+    "subMenu": [
+      {
+        "name": "elearning",
+        "href": "#elearning",
+        "label": "Εκπαιδευτική πλατφόρμα"
+      },
+      {
+        "name": "videos",
+        "href": "#videos",
+        "label": "Βίντεο"
+      },
+      {
+        "name": "presentations",
+        "href": "#presentations",
+        "label": "Παρουσιάσεις"
+      },
+      {
+        "name": "promoting",
+        "href": "#promoting",
+        "label": "Προωθώντας την αθλητική ακεραιότητα στην νέα γενιά"
+      },
+      {
+        "name": "other-texts",
+        "href": "#other-texts",
+        "label": "Άλλα κείμενα"
+      }
+    ]
+  },
+  { "name": "news", "href": "#news", "label": "Νέα" }
+]
+
 
 export const UsingNavListAuto = () => {
   const layout = 'horizontal';

package/src/navigation/NavList/__stories__/Vertical.tsx

@@ -5,7 +5,24 @@ import {
   NavListItemAction,
   useNavList,
 } from '@digigov/ui/navigation/NavList';
-import links from '@digigov/ui/navigation/NavList/__stories__/NavLinksOneLevel.json';
+
+const links = [
+  {
+    "name": "home",
+    "href": "#home",
+    "label": "Αρχική"
+  },
+  {
+    "name": "educational",
+    "label": "Εκπαιδευτικό υλικό",
+    "href": "#educational"
+  },
+  {
+    "name": "news",
+    "href": "#news",
+    "label": "Νέα"
+  }
+]
 
 export const Vertical = () => {
   const layout = 'vertical';