@digigov/ui 2.0.0-a402a664 → 2.0.0-a64dc016

package/src/layouts/Stack/Stack.stories.jsx

@@ -0,0 +1,104 @@
+import React from 'react';
+import Stack from '@digigov/ui/layouts/Stack';
+import Card from '@digigov/ui/content/Card';
+import doc from './doc.mdx?raw';
+
+export default {
+  title: 'Digigov UI/layouts/Stack',
+  component: Stack,
+  tags: ['autodocs'],
+  markdown: doc,
+  displayName: 'Stack',
+};
+
+export const WithControls = {
+  render: (args) => {
+    return (
+      <Stack
+        spacing={args.spacing}
+        alignItems={args.alignItems}
+        direction={args.direction}
+        justifyContent={args.justifyContent}
+        alignContent={args.alignContent}
+        flexWrap={args.flexWrap}
+      >
+        <Card variant="border"> Item 1 </Card>
+        <Card variant="border"> Item 2 </Card>
+        <Card variant="border"> Item 3 </Card>
+        <Card variant="border"> Item 4 </Card>
+        <Card variant="border"> Item 5 </Card>
+        <Card variant="border"> Item 6 </Card>
+      </Stack>
+    );
+  },
+  args: {
+    spacing: 4,
+    direction: 'row',
+    justifyContent: 'flex-start',
+    alignItems: 'flex-start',
+    alignContent: 'center',
+    flexWrap: 'nowrap',
+  },
+  argsTypes: {
+    spacing: {
+      control: {
+        type: 'select',
+      },
+      options: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
+    },
+    direction: {
+      control: {
+        type: 'select',
+      },
+      options: ['row', 'row-reverse', 'column', 'column-reverse'],
+    },
+    justifyContent: {
+      control: {
+        type: 'select',
+      },
+      options: [
+        'flex-start',
+        'flex-end',
+        'center',
+        'space-between',
+        'space-around',
+        'space-evenly',
+      ],
+    },
+    alignItems: {
+      control: {
+        type: 'select',
+      },
+      options: ['stretch', 'flex-start', 'flex-end', 'center', 'baseline'],
+    },
+    alignContent: {
+      control: {
+        type: 'select',
+      },
+      options: [
+        'stretch',
+        'flex-start',
+        'flex-end',
+        'center',
+        'space-between',
+        'space-around',
+      ],
+    },
+    flexWrap: {
+      control: {
+        type: 'select',
+      },
+      options: ['nowrap', 'wrap'],
+    },
+  },
+  parameters: {
+    controls: { exclude: ['ref'] },
+  },
+};
+
+export { Default } from '@digigov/ui/layouts/Stack/__stories__/Default';
+export { Spacing } from '@digigov/ui/layouts/Stack/__stories__/Spacing';
+export { Row } from '@digigov/ui/layouts/Stack/__stories__/Row';
+export { NoWrap } from '@digigov/ui/layouts/Stack/__stories__/NoWrap';
+export { JustifyContent } from '@digigov/ui/layouts/Stack/__stories__/JustifyContent';
+export { AlignItems } from '@digigov/ui/layouts/Stack/__stories__/AlignItems';

package/src/layouts/Stack/doc.mdx

@@ -9,27 +9,27 @@ Use the Stack component in order to arrange elements vertically or horizontally.
 
 ## How to use
 
-<code src="@digigov/ui/layouts/Stack/__stories__/Default.tsx" />
+<code src="@digigov/ui/src/layouts/Stack/__stories__/Default.tsx" />
 
 ### With align items
 
-<code src="@digigov/ui/layouts/Stack/__stories__/AlignItems.tsx" />
+<code src="@digigov/ui/src/layouts/Stack/__stories__/AlignItems.tsx" />
 
 ### With justify content
 
-<code src="@digigov/ui/layouts/Stack/__stories__/JustifyContent.tsx" />
+<code src="@digigov/ui/src/layouts/Stack/__stories__/JustifyContent.tsx" />
 
 ### With no wrap
 
-<code src="@digigov/ui/layouts/Stack/__stories__/NoWrap.tsx" />
+<code src="@digigov/ui/src/layouts/Stack/__stories__/NoWrap.tsx" />
 
 ### In row
 
-<code src="@digigov/ui/layouts/Stack/__stories__/Row.tsx" />
+<code src="@digigov/ui/src/layouts/Stack/__stories__/Row.tsx" />
 
 ### With spacing
 
-<code src="@digigov/ui/layouts/Stack/__stories__/Spacing.tsx" />
+<code src="@digigov/ui/src/layouts/Stack/__stories__/Spacing.tsx" />
 
 ## API
 

package/src/{lazy.js → lazy.ts}

@@ -44,6 +44,7 @@ export default {
   'LoaderContainer': lazy(() => import('@digigov/ui/app/Loader').then((module) => ({ default: module['LoaderContainer'] }))),
   'FullPageBackground': lazy(() => import('@digigov/ui/app/Loader').then((module) => ({ default: module['FullPageBackground'] }))),
   'CircularProgress': lazy(() => import('@digigov/ui/app/Loader/index.web').then((module) => ({ default: module['CircularProgress'] }))),
+  'CircularProgressBase': lazy(() => import('@digigov/ui/app/Loader/index.web').then((module) => ({ default: module['CircularProgressBase'] }))),
   'Masthead': lazy(() => import('@digigov/ui/app/Masthead').then((module) => ({ default: module['Masthead'] }))),
   'MastheadBody': lazy(() => import('@digigov/ui/app/Masthead').then((module) => ({ default: module['MastheadBody'] }))),
   'MastheadLogo': lazy(() => import('@digigov/ui/app/Masthead').then((module) => ({ default: module['MastheadLogo'] }))),
@@ -188,8 +189,6 @@ export default {
   'LicenseCCSA': lazy(() => import('@digigov/ui/govgr/Footer/LicenseCCSA').then((module) => ({ default: module['LicenseCCSA'] }))),
   'GovGRLogo': lazy(() => import('@digigov/ui/govgr/GovGRLogo').then((module) => ({ default: module['GovGRLogo'] }))),
   'GovGRLogoBase': lazy(() => import('@digigov/ui/govgr/GovGRLogo').then((module) => ({ default: module['GovGRLogoBase'] }))),
-  'I18NContext': lazy(() => import('@digigov/ui/i18n').then((module) => ({ default: module['I18NContext'] }))),
-  'I18NProvider': lazy(() => import('@digigov/ui/i18n').then((module) => ({ default: module['I18NProvider'] }))),
   'ArrowIcon': lazy(() => import('@digigov/ui/icons/Icon').then((module) => ({ default: module['ArrowIcon'] }))),
   'CaretIcon': lazy(() => import('@digigov/ui/icons/Icon').then((module) => ({ default: module['CaretIcon'] }))),
   'ChevronIcon': lazy(() => import('@digigov/ui/icons/Icon').then((module) => ({ default: module['ChevronIcon'] }))),
@@ -288,13 +287,11 @@ export default {
   'Typography': lazy(() => import('@digigov/ui/utils/Typography').then((module) => ({ default: module['Typography'] }))),
   'Base': lazy(() => import('@digigov/ui/utils/Base').then((module) => ({ default: module['Base'] }))),
   'VisuallyHidden': lazy(() => import('@digigov/ui/utils/VisuallyHidden').then((module) => ({ default: module['VisuallyHidden'] }))),
-  'I18nText': lazy(() => import('@digigov/ui/i18n/I18nText').then((module) => ({ default: module['I18nText'] }))),
   'CloseButton': lazy(() => import('@digigov/ui/app/CloseButton').then((module) => ({ default: module['CloseButton'] }))),
   'ModalContext': lazy(() => import('@digigov/ui/app/Modal/auto').then((module) => ({ default: module['ModalContext'] }))),
   'ModalProvider': lazy(() => import('@digigov/ui/app/Modal/auto').then((module) => ({ default: module['ModalProvider'] }))),
   'ModalAuto': lazy(() => import('@digigov/ui/app/Modal/auto').then((module) => ({ default: module['ModalAuto'] }))),
   'ModalButtonAuto': lazy(() => import('@digigov/ui/app/Modal/auto').then((module) => ({ default: module['ModalButtonAuto'] }))),
-  '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'] }))),
   'AccordionSectionAuto': lazy(() => import('@digigov/ui/content/Accordion/auto').then((module) => ({ default: module['AccordionSectionAuto'] }))),

package/src/navigation/BackLink/doc.mdx

@@ -9,7 +9,7 @@ Use the back link component to help users go back to the previous page in a mult
 
 ## How to use
 
-<code src="@digigov/ui/navigation/BackLink/__stories__/Default.tsx" />
+<code src="@digigov/ui/src/navigation/BackLink/__stories__/Default.tsx" />
 
 ## API
 

package/src/navigation/BackToTopLink/BackToTopLink.stories.js

@@ -1,8 +1,12 @@
 import BackToTopLink from '@digigov/ui/navigation/BackToTopLink';
+import doc from './doc.mdx?raw';
+
 export default {
   title: 'Digigov UI/navigation/BackToTopLink',
   component: BackToTopLink,
   displayName: 'BackToTopLink',
+  tags: ['autodocs'],
+  markdown: doc,
 };
 export { Default } from '@digigov/ui/navigation/BackToTopLink/__stories__/Default';
 export { InMain } from '@digigov/ui/navigation/BackToTopLink/__stories__/InMain';

package/src/navigation/BackToTopLink/doc.mdx

@@ -0,0 +1,22 @@
+---
+id: back-to-top
+title: BackToTop
+---
+
+# BackToTop
+
+Use the BackToTopLink component to allow users to quickly navigate to the top of the page.
+
+## How to use
+
+<code src="@digigov/ui/src/navigation/BackToTopLink/__stories__/Default.tsx" />
+
+### Display in main content
+
+<code src="@digigov/ui/src/navigation/BackToTopLink/__stories__/InMain.tsx" />
+
+## API
+
+See below for a complete reference to all of the props available to the components mentioned here.
+
+<ComponentProps componentName={["BackToTopLink", "BackToTopContainer"]} /> 

package/src/navigation/Breadcrumbs/doc.mdx

@@ -11,11 +11,15 @@ The Breadcrumbs component lets users show and hide sections of related content o
 
 ## How to use
 
-<code src="@digigov/ui/navigation/Breadcrumbs/__stories__/Default.tsx" />
+<code src="@digigov/ui/src/navigation/Breadcrumbs/__stories__/Default.tsx" />
 
 ### Without current page
 
-<code src="@digigov/ui/navigation/Breadcrumbs/__stories__/WithoutCurrentPage.tsx" />
+<code src="@digigov/ui/src/navigation/Breadcrumbs/__stories__/WithoutCurrentPage.tsx" />
+
+### With hook
+
+<code src="@digigov/ui/src/navigation/Breadcrumbs/__stories__/WithHook.tsx" />
 
 ## Accessibility
 

package/src/navigation/Drawer/doc.mdx

@@ -9,7 +9,7 @@ import PhaseBanner, { PhaseBannerTag } from '@digigov/ui/feedback/PhaseBanner';
 
 ## How to use
 
-<code src="@digigov/ui/navigation/Drawer/__stories__/Default.tsx" />
+<code src="@digigov/ui/src/navigation/Drawer/__stories__/Default.tsx" />
 
 ## API
 

package/src/navigation/Dropdown/Dropdown.stories.jsx

@@ -0,0 +1,118 @@
+import React from 'react';
+import { SectionBreak } from '@digigov/ui/layouts/SectionBreak';
+import {
+  Dropdown,
+  DropdownButton,
+  DropdownContent,
+} from '@digigov/ui/navigation/Dropdown';
+import { NavListItemAction, NavList } from '@digigov/ui/navigation/NavList';
+
+import doc from './doc.mdx?raw';
+export default {
+  title: 'Digigov UI/navigation/Dropdown',
+  description:
+    'Use the dropdown component to provide more options to users in cases where there is not enough space such as tables, navbars, etc.',
+  link: 'https://guide.services.gov.gr/docs/patterns/admin-pages/components/dropdown',
+  component: Dropdown,
+  tags: ['autodocs'],
+  markdown: doc,
+  displayName: 'Dropdown',
+};
+
+export const WithControls = {
+  render: (args) => {
+    return (
+      <Dropdown
+        align={args.align}
+        disabled={args.disabled}
+        dense={args.dense}
+        placement={args.placement}
+        closeBehaviour={args.closeBehaviour}
+        float={args.float}
+      >
+        <DropdownButton
+          role="button"
+          aria-haspopup="true"
+          aria-controls="menu2"
+          arrow
+        >
+          Ενέργειες
+        </DropdownButton>
+        <DropdownContent role="menu" id="menu2" scrollable={args.scrollable}>
+          <NavList layout="vertical">
+            <NavListItemAction role="menuitem" href="#">
+              Επεξεργασία
+            </NavListItemAction>
+            <NavListItemAction role="menuitem" href="#">
+              Μετακίνηση
+            </NavListItemAction>
+            <NavListItemAction role="menuitem" href="#">
+              Οριστική διαγραφή
+            </NavListItemAction>
+          </NavList>
+        </DropdownContent>
+      </Dropdown>
+    );
+  },
+  args: {
+    align: 'right',
+    placement: 'bottom',
+    disabled: false,
+    dense: false,
+    closeBehaviour: 'clickButton',
+    float: false,
+    scrollable: false,
+  },
+  argsTypes: {
+    align: {
+      control: {
+        type: 'select',
+      },
+      options: ['left', 'right'],
+    },
+    placement: {
+      control: {
+        type: 'select',
+      },
+      options: ['top', 'bottom'],
+    },
+    disabled: {
+      control: {
+        type: 'boolean',
+      },
+    },
+    dense: {
+      control: {
+        type: 'boolean',
+      },
+    },
+    closeBehaviour: {
+      control: {
+        type: 'select',
+      },
+      options: ['clickButton', 'clickOutside'],
+    },
+    float: {
+      control: {
+        type: 'boolean',
+      },
+    },
+    scrollable: {
+      control: {
+        type: 'boolean',
+      },
+    },
+  },
+};
+
+export { Default } from '@digigov/ui/navigation/Dropdown/__stories__/Default';
+export { Secondary } from '@digigov/ui/navigation/Dropdown/__stories__/Secondary';
+export { Warning } from '@digigov/ui/navigation/Dropdown/__stories__/Warning';
+export { Disabled } from '@digigov/ui/navigation/Dropdown/__stories__/Disabled';
+export { VariantLink } from '@digigov/ui/navigation/Dropdown/__stories__/VariantLink';
+export { AlignRight } from '@digigov/ui/navigation/Dropdown/__stories__/AlignRight';
+export { PlacementTop } from '@digigov/ui/navigation/Dropdown/__stories__/PlacementTop';
+export { WithIcons } from '@digigov/ui/navigation/Dropdown/__stories__/WithIcons';
+export { ContentPosition } from '@digigov/ui/navigation/Dropdown/__stories__/ContentPosition';
+export { ScrollableContent } from '@digigov/ui/navigation/Dropdown/__stories__/ScrollableContent';
+export { Dense } from '@digigov/ui/navigation/Dropdown/__stories__/Dense';

package/src/navigation/Dropdown/doc.mdx

@@ -8,21 +8,43 @@ title: Dropdown
 ## How to use
 
 <div className="dropdown-docs">
-  <code src="@digigov/ui/navigation/Dropdown/__stories__/Default.tsx" />
+  <code src="@digigov/ui/src/navigation/Dropdown/__stories__/Default.tsx" />
 </div>
-### Dropdown with align right
+
+### With align right
 
 You can display the dropdown menu to the right side of the `Dropdown` button.
 
 <div className="dropdown-docs">
-  <code src="@digigov/ui/navigation/Dropdown/__stories__/AlignRight.tsx" />
+  <code src="@digigov/ui/src/navigation/Dropdown/__stories__/AlignRight.tsx" />
 </div>
-### Dropdown with placement top
+
+### With placement top
 
 You can display the dropdown menu to the top of the `Dropdown` button.
 
 <div className="dropdown-docs">
-  <code src="@digigov/ui/navigation/Dropdown/__stories__/PlacementTop.tsx" />
+  <code src="@digigov/ui/src/navigation/Dropdown/__stories__/PlacementTop.tsx" />
+</div>
+
+### With icons
+
+<div className="dropdown-docs">
+  <code src="@digigov/ui/src/navigation/Dropdown/__stories__/WithIcons.tsx" />
+</div>
+
+### With scrollable content
+
+Use this when the content  of the dropdown menu is too long to fit on the screen.
+
+<div className="dropdown-docs">
+  <code src="@digigov/ui/src/navigation/Dropdown/__stories__/ScrollableContent.tsx" />
+</div>
+
+### Dense
+
+<div className="dropdown-docs">
+  <code src="@digigov/ui/src/navigation/Dropdown/__stories__/Dense.tsx" />
 </div>
 
 ## API

package/src/navigation/Link/doc.mdx

@@ -7,23 +7,23 @@ title: Link
 
 ## How to use
 
-<code src="@digigov/ui/navigation/Link/__stories__/Default.tsx" />
+<code src="@digigov/ui/src/navigation/Link/__stories__/Default.tsx" />
 
 ### No Underline
 
-<code src="@digigov/ui/navigation/Link/__stories__/NoUnderline.tsx" />
+<code src="@digigov/ui/src/navigation/Link/__stories__/NoUnderline.tsx" />
 
 ### Opens in a new tab
 
-<code src="@digigov/ui/navigation/Link/__stories__/OpensInNewTab.tsx" />
+<code src="@digigov/ui/src/navigation/Link/__stories__/OpensInNewTab.tsx" />
 
 ### At dark background
 
-<code src="@digigov/ui/navigation/Link/__stories__/DarkBackground.tsx" />
+<code src="@digigov/ui/src/navigation/Link/__stories__/DarkBackground.tsx" />
 
 ### At dark background and no underline
 
-<code src="@digigov/ui/navigation/Link/__stories__/DarkBackgroundNoUnderline.tsx" />
+<code src="@digigov/ui/src/navigation/Link/__stories__/DarkBackgroundNoUnderline.tsx" />
 
 ### Accessibility
 

package/src/navigation/NavList/doc.mdx

@@ -9,19 +9,19 @@ import PhaseBanner, { PhaseBannerTag } from '@digigov/ui/feedback/PhaseBanner';
 
 ## How to use
 
-<code src="@digigov/ui/navigation/NavList/__stories__/Default.tsx" />
+<code src="@digigov/ui/src/navigation/NavList/__stories__/Default.tsx" />
 
 ### Vertical NavList
 
-<code src="@digigov/ui/navigation/NavList/__stories__/Vertical.tsx" />
+<code src="@digigov/ui/src/navigation/NavList/__stories__/Vertical.tsx" />
 
 ### Horizontal NavList with submenu
 
-<code src="@digigov/ui/navigation/NavList/__stories__/HorizontalWithoutDrawer.tsx" />
+<code src="@digigov/ui/src/navigation/NavList/__stories__/HorizontalWithoutDrawer.tsx" />
 
 ### Vertical NavList with submenu
 
-<code src="@digigov/ui/navigation/NavList/__stories__/VerticalWithoutDrawer.tsx" />
+<code src="@digigov/ui/src/navigation/NavList/__stories__/VerticalWithoutDrawer.tsx" />
 
 ### Auto
 
@@ -31,7 +31,7 @@ import PhaseBanner, { PhaseBannerTag } from '@digigov/ui/feedback/PhaseBanner';
 
 This is an implementation of NavList, utilizing the `useNavList` hook to register each item along with its associated content.
 
-<code src="@digigov/ui/navigation/NavList/__stories__/UsingNavListAuto.tsx" />
+<code src="@digigov/ui/src/navigation/NavList/__stories__/UsingNavListAuto.tsx" />
 
 ## Accessibility
 
@@ -56,4 +56,4 @@ See below for a complete reference to all of the props available to the componen
     'NavMenuContentListItem',
     'NavMenuTitle',
   ]}
-/>{' '}
+/>

package/src/navigation/Pagination/doc.mdx

@@ -9,19 +9,23 @@ pagination component displays a list of page numbers, and allows the user to nav
 
 ## How to use
 
-<code src="@digigov/ui/navigation/Pagination/__stories__/Default.tsx" />
+<code src="@digigov/ui/src/navigation/Pagination/__stories__/Default.tsx" />
 
 ### With inactive values
 
-<code src="@digigov/ui/navigation/Pagination/__stories__/WithInactiveValues.tsx" />
+<code src="@digigov/ui/src/navigation/Pagination/__stories__/WithInactiveValues.tsx" />
 
 ### With small fonts
 
-<code src="@digigov/ui/navigation/Pagination/__stories__/PaginationWithSmallFont.tsx" />
+<code src="@digigov/ui/src/navigation/Pagination/__stories__/PaginationWithSmallFont.tsx" />
+
+### Dense 
+
+<code src="@digigov/ui/src/navigation/Pagination/__stories__/PaginationSmall.tsx" />
 
 ### With results per page
 
-<code src="@digigov/ui/navigation/Pagination/__stories__/WithResultsPerPage.tsx" />
+<code src="@digigov/ui/src/navigation/Pagination/__stories__/WithResultsPerPage.tsx" />
 
 ## API
 
@@ -34,4 +38,4 @@ See below for a complete reference to all of the props available to the componen
     'PaginationList',
     'PaginationListItem',
   ]}
-/>{' '}
+/>

package/src/navigation/SkipLink/SkipLink.stories.js

@@ -1,9 +1,13 @@
 import SkipLink from '@digigov/ui/navigation/SkipLink';
+import doc from './doc.mdx?raw';
+
 export default {
   title: 'Digigov UI/navigation/SkipLink',
   description:
     'Use the skip link component to help keyboard-only users skip to the main content on a page.',
   component: SkipLink,
+  tags: ['autodocs'],
+  markdown: doc,
   displayName: 'SkipLink',
 };
 export { Default } from '@digigov/ui/navigation/SkipLink/__stories__/Default';

package/src/navigation/SkipLink/doc.mdx

@@ -0,0 +1,19 @@
+---
+id: skip-link
+title: SkipLink
+---
+
+# SkipLink
+
+SkipLink is a component that allows users to skip to the main content of the page.
+
+## How to use
+
+<code src="@digigov/ui/src/navigation/SkipLink/__stories__/Default.tsx" />
+
+
+## API
+
+See below for a complete reference to all of the props available to the components mentioned here.
+
+<ComponentProps componentName={['SkipLink',]}/>

package/src/navigation/Tabs/doc.mdx

@@ -9,15 +9,15 @@ import PhaseBanner, { PhaseBannerTag } from '@digigov/ui/feedback/PhaseBanner';
 
 ## How to use
 
-<code src="@digigov/ui/navigation/Tabs/__stories__/Default.tsx" />
+<code src="@digigov/ui/src/navigation/Tabs/__stories__/Default.tsx" />
 
 ### With dense style
 
-<code src="@digigov/ui/navigation/Tabs/__stories__/Dense.tsx" />
+<code src="@digigov/ui/src/navigation/Tabs/__stories__/Dense.tsx" />
 
 ### Using Accordion
 
-<code src="@digigov/ui/navigation/Tabs/__stories__/UsingAccordion.tsx" />
+<code src="@digigov/ui/src/navigation/Tabs/__stories__/UsingAccordion.tsx" />
 
 ### Auto
 
@@ -27,7 +27,7 @@ This is an implementation of the Tabs collection, encapsulated within a `TabsCon
     <PhaseBannerTag>EXPERIMENTAL</PhaseBannerTag>
 </PhaseBanner>
 
-<code src="@digigov/ui/navigation/Tabs/__stories__/UsingAccordion.tsx" />
+<code src="@digigov/ui/src/navigation/Tabs/__stories__/UsingAccordion.tsx" />
 
 ## Accessibility