@digigov/ui 1.2.0-a7ffb5dc → 2.0.0-7d9a8d86

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

@@ -215,6 +215,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,30 +306,17 @@ 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']}))),
   'Screen': lazy(() => import('@digigov/ui/layouts/Screen').then((module)=> ({default: module['Screen']}))),
   'Section': lazy(() => import('@digigov/ui/layouts/Section').then((module)=> ({default: module['Section']}))),
-  'KitchenSinkAllComponents': lazy(() => import('@digigov/ui/misc/KitchenSink').then((module)=> ({default: module['KitchenSinkAllComponents']}))),
-  'KitchenSinkCard': lazy(() => import('@digigov/ui/misc/KitchenSink').then((module)=> ({default: module['KitchenSinkCard']}))),
-  'KitchenSinkCategory': lazy(() => import('@digigov/ui/misc/KitchenSink').then((module)=> ({default: module['KitchenSinkCategory']}))),
-  'KitchenSinkContent': lazy(() => import('@digigov/ui/misc/KitchenSink').then((module)=> ({default: module['KitchenSinkContent']}))),
-  'KitchenSinkContentInfo': lazy(() => import('@digigov/ui/misc/KitchenSink').then((module)=> ({default: module['KitchenSinkContentInfo']}))),
-  'KitchenSinkContentTags': lazy(() => import('@digigov/ui/misc/KitchenSink').then((module)=> ({default: module['KitchenSinkContentTags']}))),
-  'KitchenSinkHeading': lazy(() => import('@digigov/ui/misc/KitchenSink').then((module)=> ({default: module['KitchenSinkHeading']}))),
-  'KitchenSinkLetterContent': lazy(() => import('@digigov/ui/misc/KitchenSink').then((module)=> ({default: module['KitchenSinkLetterContent']}))),
   'BackToTop': lazy(() => import('@digigov/ui/navigation/BackToTopLink').then((module)=> ({default: module['BackToTop']}))),
   'BackToTopContainer': lazy(() => import('@digigov/ui/navigation/BackToTopLink').then((module)=> ({default: module['BackToTopContainer']}))),
   'BackToTopLink': lazy(() => import('@digigov/ui/navigation/BackToTopLink').then((module)=> ({default: module['BackToTopLink']}))),
   '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']}))),
-  'AllComponents': lazy(() => import('@digigov/ui/utils/Kitchensink/AllComponents').then((module)=> ({default: module['AllComponents']}))),
-  'KitchensinkByCategory': lazy(() => import('@digigov/ui/utils/Kitchensink/KitchensinkByCategory').then((module)=> ({default: module['KitchensinkByCategory']}))),
-  'KitchensinkByLetter': lazy(() => import('@digigov/ui/utils/Kitchensink/KitchensinkByLetter').then((module)=> ({default: module['KitchensinkByLetter']}))),
-  'KitchensinkComponent': lazy(() => import('@digigov/ui/utils/Kitchensink/KitchensinkComponent').then((module)=> ({default: module['KitchensinkComponent']}))),
-  'KitchenSinkDashboard': lazy(() => import('@digigov/ui/utils/Kitchensink/KitchensinkDashboard').then((module)=> ({default: module['KitchenSinkDashboard']}))),
-  '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/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';

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

@@ -10,9 +10,45 @@ import {
   NavMenuContentListItem,
   NavMenuTitle,
 } from '@digigov/ui/navigation/NavList';
-import links from '@digigov/ui/navigation/NavList/__stories__/NavLinksWithSubmenu.json';
 import { useNavList } from '@digigov/ui/navigation/NavList/hooks/useNavList';
 
+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 VerticalWithoutDrawer = () => {
   const layout = 'vertical';
   const border = false;

package/src/navigation/NavList/index.mdx

@@ -3,10 +3,6 @@ id: nav-list
 title: NavList
 ---
 
-```bash
-import NavList, { NavListItem } from '@digigov/ui/navigation/NavList';
-```
-
 ## How to use
 
 ### Horizontal NavList
@@ -25,12 +21,20 @@ import NavList, { NavListItem } from '@digigov/ui/navigation/NavList';
   story="Vertical.tsx"
 />
 
-### NavListAuto
+### Horizontal NavList with submenu
+
+<Story
+  packageName="@digigov/ui"
+  component="navigation/NavList"
+  story="HorizontalWithoutDrawer.tsx"
+/>
+
+### Vertical NavList with submenu
 
 <Story
   packageName="@digigov/ui"
   component="navigation/NavList"
-  story="UsingNavListAuto.tsx"
+  story="VerticalWithoutDrawer.tsx"
 />
 
 ## Accessibility
@@ -41,4 +45,16 @@ implementation in the ARIA Authoring Practices Guide (APG) at
 
 ## API
 
-<PropTypes packageName="@digigov/ui" component="NavList" />
+See below for a complete reference to all of the props  available to the components mentioned here.
+
+<ComponentProps componentName={
+  [ "Nav",
+    "NavList",
+    "NavListAction",
+    "NavListItemActionContainer",
+    "NavListItemButton",
+    "NavListItemLink",
+    "NavMenuContainer",
+    "NavMenuContentListBase",
+    "NavMenuContentListItem",
+    "NavMenuTitle",]} /> 

package/src/navigation/NavList/types.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import { BaseCSSProperties } from '@material-ui/core/styles/withStyles';
 import { NavProps } from '@digigov/ui/navigation/NavList';
 
 export type NavListLayout = 'horizontal' | 'vertical';
@@ -26,7 +25,7 @@ export interface NavListAutoProps extends NavProps {
   floating?: boolean;
   subMenu?: boolean;
   links?: NavLinkInterface[];
-  style?: BaseCSSProperties;
+  style?: React.CSSProperties;
 }
 
 export interface NavListHeaderItemType {

package/src/navigation/Pagination/__stories__/PaginationWithSmallFont.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { LabelContainer } from '@digigov/react-core';
+import { LabelContainer } from '@digigov/react-core/LabelContainer';
 import {
   SelectContainer,
   SelectOption,

package/src/navigation/Pagination/__stories__/WithResultsPerPage.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { LabelContainer } from '@digigov/react-core';
+import { LabelContainer } from '@digigov/react-core/LabelContainer';
 import {
   SelectContainer,
   SelectOption,

package/src/navigation/Pagination/index.mdx

@@ -3,10 +3,6 @@ id: pagination
 title: Pagination
 ---
 
-```bash
-import Pagination from '@digigov/ui/app/Pagination';
-```
-
 ## How to use
 
 <Story
@@ -41,4 +37,12 @@ import Pagination from '@digigov/ui/app/Pagination';
 
 ## API
 
-<PropTypes packageName="@digigov/ui" component="Pagination" />
+See below for a complete reference to all of the props  available to the components mentioned here.
+
+<ComponentProps componentName={
+  [
+  "Pagination",
+  "PaginationLabel",
+  "PaginationList",
+  "PaginationListItem",
+  ]} /> 

package/src/navigation/Tabs/index.mdx

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